@propeller-commerce/propeller-v2-react-ui 0.15.11 → 0.18.0

package/dist/index.cjs

@@ -5,6 +5,8 @@ var propellerV2CoreUi = require('@propeller-commerce/propeller-v2-core-ui');
 var React6 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var propellerSdkV2 = require('@propeller-commerce/propeller-sdk-v2');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
 var lucideReact = require('lucide-react');
 
 function _interopNamespace(e) {
@@ -738,7 +740,8 @@ function useCart(options) {
   const { graphqlClient, user, companyId, configuration, onCartCreated } = options;
   const language = options.language || configuration?.language || "NL";
   const [cart, setCart] = React6.useState(null);
-  const [cartId, setCartId] = React6.useState(options.cartId || "");
+  const [createdCartId, setCreatedCartId] = React6.useState("");
+  const cartId = options.cartId || createdCartId;
   const [loading, setLoading] = React6.useState(false);
   const [error, setError] = React6.useState(null);
   const notesTimers = React6.useRef({});
@@ -774,13 +777,13 @@ function useCart(options) {
       imageVariantFilters: configuration?.imageVariantFiltersSmall,
       onCartCreated: (c) => {
         setCart(c);
-        setCartId(c.cartId);
+        setCreatedCartId(c.cartId);
         onCartCreated?.(c);
       }
     };
     const resolved = await initCart(config);
     setCart(resolved);
-    setCartId(resolved.cartId);
+    setCreatedCartId(resolved.cartId);
     return resolved;
   }, [graphqlClient, user, companyId, language, configuration, onCartCreated]);
   const addItem = React6.useCallback(async (opts) => {
@@ -795,7 +798,7 @@ function useCart(options) {
       if (opts.onAddToCart) {
         const resultCart2 = opts.onAddToCart(opts.product, opts.cluster?.clusterId, opts.quantity, childItemInputs, opts.notes, opts.price);
         setCart(resultCart2);
-        setCartId(resultCart2.cartId);
+        setCreatedCartId(resultCart2.cartId);
         const addedItem2 = resultCart2.items?.find((i) => i.productId === opts.product.productId) ?? null;
         opts.afterAddToCart?.(resultCart2, addedItem2);
         return propellerV2CoreUi.ok({ cart: resultCart2, item: addedItem2 });
@@ -816,7 +819,7 @@ function useCart(options) {
         imageVariantFilters: configuration?.imageVariantFiltersSmall
       });
       setCart(resultCart);
-      setCartId(resultCart.cartId);
+      setCreatedCartId(resultCart.cartId);
       const addedItem = resultCart.items?.find((i) => i.productId === opts.product.productId) ?? null;
       opts.afterAddToCart?.(resultCart, addedItem);
       return propellerV2CoreUi.ok({ cart: resultCart, item: addedItem });
@@ -1409,7 +1412,7 @@ function useFavorites(options) {
       if (onEdit) {
         onEdit(listId, data);
         cancelEdit();
-        onListChanged?.();
+        onListChanged?.({ action: "updated", listId, ...data });
         return;
       }
       setSaving(true);
@@ -1424,7 +1427,7 @@ function useFavorites(options) {
         const updated = await service.updateFavoriteList(listId, { name: data.name, isDefault: data.isDefault });
         setLists((prev) => prev.map((l) => String(l.id) === listId ? updated : l));
         cancelEdit();
-        onListChanged?.();
+        onListChanged?.({ action: "updated", listId, name: data.name, isDefault: data.isDefault });
       } catch (e) {
         setError(e instanceof Error ? e.message : "Failed to update list");
       } finally {
@@ -1441,7 +1444,7 @@ function useFavorites(options) {
     if (onDelete) {
       onDelete(listId);
       setListToDelete(null);
-      onListChanged?.();
+      onListChanged?.({ action: "deleted", listId, name: list.name });
       return;
     }
     setSaving(true);
@@ -1450,7 +1453,7 @@ function useFavorites(options) {
     try {
       const service = propellerV2CoreUi.createServices(graphqlClient).favoriteList;
       await service.deleteFavoriteList(listId);
-      onListChanged?.();
+      onListChanged?.({ action: "deleted", listId, name: list.name });
     } catch (e) {
       setError(e instanceof Error ? e.message : "Failed to delete list");
       setLists((prev) => [...prev, list]);
@@ -1463,7 +1466,7 @@ function useFavorites(options) {
       const data = { name, isDefault };
       if (onCreate) {
         onCreate(data);
-        onListChanged?.();
+        onListChanged?.({ action: "created", name, isDefault });
         return;
       }
       setSaving(true);
@@ -1480,7 +1483,7 @@ function useFavorites(options) {
         if (propellerV2CoreUi.isCustomer(user)) createInput.customerId = user.customerId;
         const created = await service.createFavoriteList(createInput);
         setLists((prev) => [...prev, created]);
-        onListChanged?.();
+        onListChanged?.({ action: "created", listId: created?.id, name, isDefault });
       } catch (e) {
         setError(e instanceof Error ? e.message : "Failed to create list");
       } finally {
@@ -2202,6 +2205,15 @@ function useProductInfo(options) {
     clusterImageUrl
   };
 }
+
+// src/composables/shared/utils/listingUserId.ts
+function resolveListingUserId(user, configuration) {
+  if (user && "contactId" in user) return user.contactId;
+  if (user && "customerId" in user) return user.customerId;
+  return configuration?.anonymousUserId;
+}
+
+// src/composables/react/useProductSearch.ts
 var inflightFetches2 = /* @__PURE__ */ new Set();
 function buildAttributeInput(names) {
   if (!names || names.length === 0) return void 0;
@@ -2306,7 +2318,7 @@ function useProductSearch(options) {
       ] : [];
       const priceFilter = options.priceFilterMin !== void 0 || options.priceFilterMax !== void 0 ? { from: options.priceFilterMin ?? 0, to: options.priceFilterMax ?? 999999 } : void 0;
       const inventoryFilter = propellerV2CoreUi.buildInventoryFilter(options.availability, options.minStock);
-      const userId = options.user && "contactId" in options.user ? options.user.contactId : options.user && "customerId" in options.user ? options.user.customerId : void 0;
+      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;
       const orderlistScope = options.orderlistIds && options.orderlistIds.length > 0 ? {
@@ -2443,7 +2455,7 @@ function useProductSearch(options) {
             applyOrderlists: options.applyOrderlists !== false,
             orderlistIds: options.orderlistIds
           } : { applyOrderlists: false };
-          const userId = options.user && "contactId" in options.user ? options.user.contactId : options.user && "customerId" in options.user ? options.user.customerId : void 0;
+          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;
           const inventoryFilter = propellerV2CoreUi.buildInventoryFilter(options.availability, options.minStock);
@@ -2609,7 +2621,7 @@ function useQuickOrder(options) {
       try {
         const service = propellerV2CoreUi.createServices(graphqlClient).category;
         const orderlistScope = orderlistIds && orderlistIds.length > 0 ? { applyOrderlists: applyOrderlists !== false, orderlistIds } : { applyOrderlists: false };
-        const userId = user && "contactId" in user ? user.contactId : user && "customerId" in user ? user.customerId : void 0;
+        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;
         const input = {
@@ -2751,7 +2763,7 @@ function useSpareParts(options) {
     [isControlled, options.parts, internalParts]
   );
   const isLoading = !isControlled && internalLoading;
-  const userId = options.user && "contactId" in options.user ? options.user.contactId : options.user && "customerId" in options.user ? options.user.customerId : void 0;
+  const userId = resolveListingUserId(options.user, options.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;
   const userKey = `${contactId ?? ""}:${customerId ?? ""}`;
@@ -3054,9 +3066,7 @@ function useProductSlider(options) {
     }
   }
   function resolveUserId() {
-    if (options.user && "contactId" in options.user) return options.user.contactId;
-    if (options.user && "customerId" in options.user) return options.user.customerId;
-    return void 0;
+    return resolveListingUserId(options.user, options.configuration);
   }
   const fetchCrossupsells = React6.useCallback(async (input) => {
     setLoading(true);
@@ -4043,6 +4053,9 @@ LoginFormExport.RegisterLink = LoginFormRegisterLink;
 LoginFormExport.GuestCheckoutButton = LoginFormGuestCheckoutButton;
 LoginFormExport.ErrorMessage = LoginFormErrorMessage;
 var LoginForm_default = LoginFormExport;
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
 function AccountIconAndMenu(rawProps) {
   const props = useInfraProps(rawProps);
   const LoginFormImpl = props.loginFormComponent ?? LoginForm_default;
@@ -4191,7 +4204,7 @@ function AccountIconAndMenu(rawProps) {
               onClick: (event) => handleIconClick(),
               "aria-label": propellerV2CoreUi.getLabel(props.labels, "accountLabel", "Account"),
               "data-open": menuOpen ? "true" : "false",
-              className: `propeller-account-menu__trigger inline-flex items-center gap-2 px-3 py-2 rounded-control text-sm font-medium transition-colors text-white hover:bg-white/10${props.iconClassName ? " " + props.iconClassName : ""}`,
+              className: cn(`propeller-account-menu__trigger inline-flex items-center gap-2 px-3 py-2 rounded-control text-sm font-medium transition-colors text-white hover:bg-white/10${props.iconClassName ? " " + props.iconClassName : ""}`),
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "svg",
@@ -4219,7 +4232,7 @@ function AccountIconAndMenu(rawProps) {
           menuOpen ? /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
-              className: `propeller-account-menu__popover absolute right-0 mt-2 w-80 bg-popover text-foreground rounded-container shadow-lg border border-border py-4 px-5 z-50${props.menuClassName ? " " + props.menuClassName : ""}`,
+              className: cn(`propeller-account-menu__popover absolute right-0 mt-2 w-80 bg-popover text-foreground rounded-container shadow-lg border border-border py-4 px-5 z-50${props.menuClassName ? " " + props.menuClassName : ""}`),
               children: [
                 !!props.user ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-account-menu__user pb-3 mb-3 border-b border-border", children: [
@@ -4580,7 +4593,7 @@ function AddToCart(rawProps) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: `propeller-add-to-cart ${props.className || ""}`,
+      className: cn(`propeller-add-to-cart ${props.className || ""}`),
       "data-loading": loading ? "true" : "false",
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-add-to-cart__controls flex flex-wrap items-center gap-2 w-full md:flex-nowrap", children: [
@@ -4950,7 +4963,14 @@ function AddToFavorite(rawProps) {
       setMemberListIds(newMemberIds);
       setSelectedListId("");
       setIsOpen(false);
-      if (props.onFavoriteChanged) props.onFavoriteChanged();
+      if (props.onFavoriteChanged) {
+        props.onFavoriteChanged({
+          action: "added",
+          listId: selectedListId,
+          productId: props.productId,
+          clusterId: props.clusterId
+        });
+      }
     } catch (error) {
       console.error("Error adding to favorite list:", error);
     } finally {
@@ -4967,7 +4987,14 @@ function AddToFavorite(rawProps) {
       setMemberListIds(newMemberIds);
       setSelectedListId("");
       setIsOpen(false);
-      if (props.onFavoriteChanged) props.onFavoriteChanged();
+      if (props.onFavoriteChanged) {
+        props.onFavoriteChanged({
+          action: "removed",
+          listId,
+          productId: props.productId,
+          clusterId: props.clusterId
+        });
+      }
     } catch (error) {
       console.error("Error removing from favorite list:", error);
     } finally {
@@ -5007,7 +5034,7 @@ function AddToFavorite(rawProps) {
         type: "button",
         onClick: (event) => toggleModal(),
         title: isFavorited() ? propellerV2CoreUi.getLabel(props.labels, "removeFromFavorites", "Remove from favorites") : propellerV2CoreUi.getLabel(props.labels, "addToFavorites", "Add to favorites"),
-        className: `propeller-add-to-favorite__btn inline-flex items-center justify-center rounded-control border p-2.5 transition-colors ${isFavorited() ? "border-primary/30 bg-primary/5 text-primary hover:bg-primary/10" : "border-border bg-card text-foreground-subtle hover:text-primary hover:border-primary/30 hover:bg-primary/5"} ${props.className || ""}`,
+        className: cn(`propeller-add-to-favorite__btn inline-flex items-center justify-center rounded-control border p-2.5 transition-colors ${isFavorited() ? "border-primary/30 bg-primary/5 text-primary hover:bg-primary/10" : "border-border bg-card text-foreground-subtle hover:text-primary hover:border-primary/30 hover:bg-primary/5"} ${props.className || ""}`),
         children: [
           isFavorited() ? /* @__PURE__ */ jsxRuntime.jsx(
             "svg",
@@ -6156,7 +6183,7 @@ function AddressSelector(props) {
       setIsLoading(false);
     }
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `propeller-address-selector ${props.className || ""}`, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(`propeller-address-selector ${props.className || ""}`), children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
@@ -6299,7 +6326,7 @@ function Breadcrumbs(props) {
     return index === displayItems.length - 1;
   }
   const showSeparatorBefore = (index) => props.showHome !== false || index > 0;
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": propellerV2CoreUi.getLabel(props.labels, "breadcrumbAriaLabel", "Breadcrumb"), className: `propeller-breadcrumbs ${props.className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("ol", { className: "propeller-breadcrumbs__list flex flex-wrap items-center text-sm text-muted-foreground", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": propellerV2CoreUi.getLabel(props.labels, "breadcrumbAriaLabel", "Breadcrumb"), className: cn(`propeller-breadcrumbs ${props.className || ""}`), children: /* @__PURE__ */ jsxRuntime.jsxs("ol", { className: "propeller-breadcrumbs__list flex flex-wrap items-center text-sm text-muted-foreground", children: [
     props.showHome !== false ? /* @__PURE__ */ jsxRuntime.jsx("li", { className: "propeller-breadcrumbs__item flex items-center", "data-home": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
       "a",
       {
@@ -6377,7 +6404,7 @@ function CartBonusItems(rawProps) {
   const money = (value) => propellerV2CoreUi.formatPrice(value, { symbol: currency });
   const productName = (item) => propellerV2CoreUi.getLocalizedValue(item.product?.names, props.language, "Product");
   const productImage = (item) => item.product?.media?.images?.items?.[0]?.imageVariants?.[0]?.url || "";
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `propeller-cart-bonus-items ${props.className || "mt-2"}`, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(`propeller-cart-bonus-items ${props.className || "mt-2"}`), children: [
     /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "propeller-cart-bonus-items__title text-lg font-semibold mb-3", children: propellerV2CoreUi.getLabel(props.labels, "title", "Bonus items") }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-cart-bonus-items__list space-y-4", children: items.map((item) => {
       const img = productImage(item);
@@ -6524,7 +6551,7 @@ function ItemStock(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: hasInventory() ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: `propeller-item-stock flex flex-wrap items-center gap-1.5 ${props.className || ""}`,
+      className: cn(`propeller-item-stock flex flex-wrap items-center gap-1.5 ${props.className || ""}`),
       "data-available": isAvailable() ? "true" : "false",
       "data-stock": getStockStatusData(),
       children: [
@@ -6853,7 +6880,7 @@ function CartItem(rawProps) {
     return /* @__PURE__ */ jsxRuntime.jsx(CartItemContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: `propeller-cart-item flex flex-wrap md:flex-nowrap items-start gap-4 ${props.cardFrame === false ? "" : "bg-card p-4 rounded-container shadow-sm border border-border"} ${props.className || ""}`,
+        className: cn(`propeller-cart-item flex flex-wrap md:flex-nowrap items-start gap-4 ${props.cardFrame === false ? "" : "bg-card p-4 rounded-container shadow-sm border border-border"} ${props.className || ""}`),
         "data-bundle": isBundleItem() ? "true" : "false",
         "data-loading": loading ? "true" : "false",
         children: rawProps.children
@@ -6863,7 +6890,7 @@ function CartItem(rawProps) {
   return /* @__PURE__ */ jsxRuntime.jsx(CartItemContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: `propeller-cart-item flex flex-wrap md:flex-nowrap items-start gap-4 ${props.cardFrame === false ? "" : "bg-card p-4 rounded-container shadow-sm border border-border"} ${props.className || ""}`,
+      className: cn(`propeller-cart-item flex flex-wrap md:flex-nowrap items-start gap-4 ${props.cardFrame === false ? "" : "bg-card p-4 rounded-container shadow-sm border border-border"} ${props.className || ""}`),
       "data-bundle": isBundleItem() ? "true" : "false",
       "data-loading": loading ? "true" : "false",
       children: [
@@ -7335,7 +7362,7 @@ function CartIconAndSidebar(rawProps) {
               type: "button",
               onClick: () => handleIconClick(),
               "aria-label": propellerV2CoreUi.getLabel(props.labels, "cartIconLabel", "Shopping cart"),
-              className: `propeller-cart-icon__trigger relative inline-flex items-center justify-center p-2 rounded-control transition-colors text-foreground${props.iconClassName ? " " + props.iconClassName : ""}`,
+              className: cn(`propeller-cart-icon__trigger relative inline-flex items-center justify-center p-2 rounded-control transition-colors text-foreground${props.iconClassName ? " " + props.iconClassName : ""}`),
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "svg",
@@ -7387,7 +7414,7 @@ function CartIconAndSidebar(rawProps) {
         "aria-modal": "true",
         "aria-label": sidebarTitle,
         "data-open": sidebarOpen ? "true" : "false",
-        className: `propeller-cart-icon__sidebar fixed inset-y-0 right-0 z-[70] w-full max-w-md bg-card shadow-2xl transform transition-transform duration-300 ease-in-out border-l border-border${sidebarOpen ? " translate-x-0" : " translate-x-full"}${props.sidebarClassName ? " " + props.sidebarClassName : ""}`,
+        className: cn(`propeller-cart-icon__sidebar fixed inset-y-0 right-0 z-[70] w-full max-w-md bg-card shadow-2xl transform transition-transform duration-300 ease-in-out border-l border-border${sidebarOpen ? " translate-x-0" : " translate-x-full"}${props.sidebarClassName ? " " + props.sidebarClassName : ""}`),
         children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col h-full", children: isMounted ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-cart-icon__sidebar-header flex items-center justify-between px-5 py-4 border-b border-border", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
@@ -8019,7 +8046,7 @@ function CategoryDescription(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: !!html ? /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: `propeller-category-description mb-6 ${props.className || ""}`,
+      className: cn(`propeller-category-description mb-6 ${props.className || ""}`),
       "data-expanded": expanded ? "true" : "false",
       "data-truncatable": shouldTruncate ? "true" : "false",
       children: [
@@ -8049,7 +8076,7 @@ function CategoryShortDescription(props) {
     (d) => d.language === props.language
   );
   const html = match?.value || "";
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: !!html ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `propeller-category-short-description mb-6 ${props.className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: !!html ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(`propeller-category-short-description mb-6 ${props.className || ""}`), children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: "propeller-category-short-description__content prose prose-slate max-w-none text-muted-foreground",
@@ -8184,7 +8211,7 @@ function ClusterCard(rawProps) {
     return /* @__PURE__ */ jsxRuntime.jsx(ClusterCardContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: `propeller-cluster-card group relative flex h-full overflow-hidden rounded-container border border-border bg-card shadow-sm transition-all duration-200 hover:shadow-md hover:border-secondary/20 ${isRow ? "flex-row flex-wrap md:flex-nowrap items-center" : "flex-col"} ${props.className ?? ""}`,
+        className: cn(`propeller-cluster-card group relative flex h-full overflow-hidden rounded-container border border-border bg-card shadow-sm transition-all duration-200 hover:shadow-md hover:border-secondary/20 ${isRow ? "flex-row flex-wrap md:flex-nowrap items-center" : "flex-col"} ${props.className ?? ""}`),
         "data-cluster-id": cluster.clusterId,
         "data-layout": isRow ? "row" : "grid",
         children: rawProps.children
@@ -8194,7 +8221,7 @@ function ClusterCard(rawProps) {
   return /* @__PURE__ */ jsxRuntime.jsx(ClusterCardContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: `propeller-cluster-card group relative flex h-full overflow-hidden rounded-container border border-border bg-card shadow-sm transition-all duration-200 hover:shadow-md hover:border-secondary/20 ${isRow ? "flex-row flex-wrap md:flex-nowrap items-center" : "flex-col"} ${props.className || ""}`,
+      className: cn(`propeller-cluster-card group relative flex h-full overflow-hidden rounded-container border border-border bg-card shadow-sm transition-all duration-200 hover:shadow-md hover:border-secondary/20 ${isRow ? "flex-row flex-wrap md:flex-nowrap items-center" : "flex-col"} ${props.className || ""}`),
       "data-layout": isRow ? "row" : "grid",
       children: [
         props.showImage !== false ? /* @__PURE__ */ jsxRuntime.jsx(ClusterCardImage, {}) : null,
@@ -8486,7 +8513,7 @@ function MachineCard(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: `propeller-machine-card group relative flex h-full flex-col overflow-hidden rounded-lg border border-border bg-background ${props.className ?? ""}`,
+      className: cn(`propeller-machine-card group relative flex h-full flex-col overflow-hidden rounded-lg border border-border bg-background ${props.className ?? ""}`),
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         "a",
         {
@@ -8547,7 +8574,7 @@ function LoginToOrderButton(props) {
     "button",
     {
       type: "button",
-      className: `propeller-login-to-order inline-flex items-center justify-center gap-2 h-10 px-4 w-full rounded-control bg-primary text-primary-foreground text-sm font-medium hover:opacity-90 transition-opacity ${props.className || ""}`,
+      className: cn(`propeller-login-to-order inline-flex items-center justify-center gap-2 h-10 px-4 w-full rounded-control bg-primary text-primary-foreground text-sm font-medium hover:opacity-90 transition-opacity ${props.className || ""}`),
       onClick: () => {
         if (props.onLoginClick) props.onLoginClick();
       },
@@ -8608,7 +8635,7 @@ function ProductPriceDisplay(props) {
   function getSecondaryTaxLabel() {
     return props.includeTax ? propellerV2CoreUi.getLabel(props.labels, "exclTax", "excl. VAT") : propellerV2CoreUi.getLabel(props.labels, "inclTax", "incl. VAT");
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `propeller-product-price ${props.className || ""}`, "data-hidden": isHidden2() ? "true" : "false", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(`propeller-product-price ${props.className || ""}`), "data-hidden": isHidden2() ? "true" : "false", children: [
     isHidden2() && props.showLoginPrompt !== false ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "propeller-product-price__login-prompt text-sm text-muted-foreground italic", children: propellerV2CoreUi.getLabel(props.labels, "loginToSeePrices", "Log in to see prices") }) : null,
     !isHidden2() && !!getLeadingPrice() ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-product-price__content flex flex-col gap-0.5", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-product-price__primary flex items-baseline gap-2", children: [
@@ -8755,7 +8782,7 @@ function ProductCardRoot(rawProps) {
     return /* @__PURE__ */ jsxRuntime.jsx(ProductCardContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: `propeller-product-card group relative flex h-full overflow-hidden rounded-container border border-border bg-card shadow-sm transition-all duration-200 hover:shadow-md hover:border-secondary/20 ${isRow ? "flex-row flex-wrap md:flex-nowrap items-center" : "flex-col"} ${props.className || ""}`,
+        className: cn(`propeller-product-card group relative flex h-full overflow-hidden rounded-container border border-border bg-card shadow-sm transition-all duration-200 hover:shadow-md hover:border-secondary/20 ${isRow ? "flex-row flex-wrap md:flex-nowrap items-center" : "flex-col"} ${props.className || ""}`),
         "data-layout": isRow ? "row" : "grid",
         children: rawProps.children
       }
@@ -8764,7 +8791,7 @@ function ProductCardRoot(rawProps) {
   return /* @__PURE__ */ jsxRuntime.jsx(ProductCardContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: `propeller-product-card group relative flex h-full overflow-hidden rounded-container border border-border bg-card shadow-sm transition-all duration-200 hover:shadow-md hover:border-secondary/20 ${isRow ? "flex-row flex-wrap md:flex-nowrap items-center" : "flex-col"} ${props.className || ""}`,
+      className: cn(`propeller-product-card group relative flex h-full overflow-hidden rounded-container border border-border bg-card shadow-sm transition-all duration-200 hover:shadow-md hover:border-secondary/20 ${isRow ? "flex-row flex-wrap md:flex-nowrap items-center" : "flex-col"} ${props.className || ""}`),
       "data-layout": isRow ? "row" : "grid",
       children: [
         props.showImage !== false ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardImage, {}) : null,
@@ -9211,7 +9238,7 @@ function ProductGrid(rawProps) {
     return /* @__PURE__ */ jsxRuntime.jsx(ProductGridConfigProvider, { value: gridConfig, children: /* @__PURE__ */ jsxRuntime.jsx(ProductGridSearchContext.Provider, { value: compoundCtx, children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: `propeller-product-grid w-full ${props.className || ""}`,
+        className: cn(`propeller-product-grid w-full ${props.className || ""}`),
         "data-loading": getIsLoading() ? "true" : "false",
         "data-mode": "compound",
         children: rawProps.children
@@ -9221,7 +9248,7 @@ function ProductGrid(rawProps) {
   return /* @__PURE__ */ jsxRuntime.jsx(ProductGridConfigProvider, { value: gridConfig, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: `propeller-product-grid w-full ${props.className || ""}`,
+      className: cn(`propeller-product-grid w-full ${props.className || ""}`),
       "data-loading": getIsLoading() ? "true" : "false",
       children: [
         getIsLoading() ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `propeller-product-grid__skeleton-grid ${getGridColsClass()}`, children: getSkeletonItems()?.map((_, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -9324,7 +9351,7 @@ function ProductGridItems(props) {
   const gridClass = cols === 1 ? "flex flex-col gap-4" : cols === 2 ? "grid grid-cols-2 gap-3 sm:gap-6 auto-rows-fr" : cols === 4 ? "grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-6 auto-rows-fr" : cols === 5 ? "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3 sm:gap-6 auto-rows-fr" : cols === 6 ? "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3 sm:gap-6 auto-rows-fr" : "grid grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-6 auto-rows-fr";
   if (isLoading) {
     const skeletonCount = cols === 2 ? 4 : cols === 4 ? 8 : cols === 5 ? 10 : cols === 6 ? 12 : 6;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `propeller-product-grid__skeleton-grid ${gridClass} ${props.className ?? ""}`, children: Array.from({ length: skeletonCount }).map((_, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(`propeller-product-grid__skeleton-grid ${gridClass} ${props.className ?? ""}`), children: Array.from({ length: skeletonCount }).map((_, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         className: "propeller-product-grid__skeleton-card flex flex-col overflow-hidden rounded-container border border-border bg-card shadow-sm",
@@ -9346,7 +9373,7 @@ function ProductGridItems(props) {
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "propeller-product-grid__empty-message mt-1 text-sm text-muted-foreground", children: propellerV2CoreUi.getLabel(props.labels, "noProductsHelp", "Try adjusting your filters or search term.") })
     ] }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `propeller-product-grid__grid ${gridClass} ${props.className ?? ""}`, children: items.map((item, idx) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(`propeller-product-grid__grid ${gridClass} ${props.className ?? ""}`), children: items.map((item, idx) => {
     const isCluster = "clusterId" in item && !!item.clusterId;
     const key = item.productId || item.clusterId || idx;
     return /* @__PURE__ */ jsxRuntime.jsxs(React6__namespace.Fragment, { children: [
@@ -9607,7 +9634,7 @@ function GridFilters(rawProps) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: `propeller-grid-filters space-y-4 ${props.isMobile ? "pb-8" : "sticky top-24"} ${isPending ? "opacity-50 pointer-events-none" : ""} ${props.className || ""}`,
+      className: cn(`propeller-grid-filters space-y-4 ${props.isMobile ? "pb-8" : "sticky top-24"} ${isPending ? "opacity-50 pointer-events-none" : ""} ${props.className || ""}`),
       "data-mobile": props.isMobile ? "true" : "false",
       "data-pending": isPending ? "true" : "false",
       children: [
@@ -10031,7 +10058,7 @@ function GridToolbar(rawProps) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: `propeller-grid-toolbar ${props.className || ""}`,
+      className: cn(`propeller-grid-toolbar ${props.className || ""}`),
       "data-view-mode": currentViewMode,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-grid-toolbar__bar flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-4", children: [
@@ -10270,7 +10297,7 @@ function GridPagination(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: `propeller-grid-pagination ${props.className || ""}`,
+      className: cn(`propeller-grid-pagination ${props.className || ""}`),
       "data-variant": variant,
       children: showPagination ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         variant === "compact" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-grid-pagination__compact flex justify-center items-center gap-2", children: [
@@ -10648,7 +10675,7 @@ function ClusterConfigurator(props) {
       initFromProduct(props.defaultProduct);
     }
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `propeller-cluster-configurator ${props.className || ""}`, children: !!props.config?.settings?.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-cluster-configurator__content flex flex-col gap-6", children: settingsWithValues?.map((setting) => /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(`propeller-cluster-configurator ${props.className || ""}`), children: !!props.config?.settings?.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-cluster-configurator__content flex flex-col gap-6", children: settingsWithValues?.map((setting) => /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: "propeller-cluster-configurator__group",
@@ -10797,7 +10824,7 @@ function ClusterInfo(rawProps) {
       props.onClusterLoaded(fetchedCluster);
     }
   }, [fetchedCluster]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `propeller-cluster-info ${props.className || ""}`, "data-loading": loading ? "true" : "false", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(`propeller-cluster-info ${props.className || ""}`), "data-loading": loading ? "true" : "false", children: [
     loading && !props.cluster ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-cluster-info__skeleton animate-pulse space-y-3", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-cluster-info__skeleton-line h-4 bg-surface-hover rounded w-1/4" }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-cluster-info__skeleton-line h-8 bg-surface-hover rounded w-3/4" })
@@ -10815,8 +10842,8 @@ var ClusterInfo_default = ClusterInfo;
 function formatPrice9(price, currency) {
   return propellerV2CoreUi.formatPrice(price, { symbol: currency });
 }
-function getProductName2(product) {
-  return product.names?.[0]?.value || `Product ${product.productId}`;
+function getProductName2(product, language) {
+  return propellerV2CoreUi.getLocalizedValue(product.names, language, `Product ${product.productId}`);
 }
 function getProductImageUrl4(product) {
   const media = product.media;
@@ -10826,9 +10853,11 @@ function getProductImageUrl4(product) {
   }
   return "";
 }
-function ClusterOptions(props) {
+function ClusterOptions(rawProps) {
+  const props = useInfraProps(rawProps);
   const [selectedProductIds, setSelectedProductIds] = React6.useState({});
   function getOptionsForRender() {
+    const language = props.language;
     const options = props.options || [];
     const sel = selectedProductIds;
     const hidePrices = propellerV2CoreUi.isContentHidden(props.portalMode, props.user);
@@ -10838,7 +10867,7 @@ function ClusterOptions(props) {
       const products = (option.products || []).map((p) => ({
         productId: p.productId,
         productIdStr: p.productId.toString(),
-        label: hidePrices ? getProductName2(p) : `${getProductName2(p)} \u2014 ${formatPrice9(p.price?.gross || 0, props.currency ?? "\u20AC")}`
+        label: hidePrices ? getProductName2(p, language) : `${getProductName2(p, language)} \u2014 ${formatPrice9(p.price?.gross || 0, props.currency ?? "\u20AC")}`
       }));
       let previewImageUrl = "";
       let previewName = "";
@@ -10849,7 +10878,7 @@ function ClusterOptions(props) {
         );
         if (selectedProduct) {
           previewImageUrl = getProductImageUrl4(selectedProduct);
-          previewName = getProductName2(selectedProduct);
+          previewName = getProductName2(selectedProduct, language);
           previewPrice = hidePrices ? "" : formatPrice9(selectedProduct.price?.gross || 0, props.currency ?? "\u20AC");
         }
       }
@@ -10857,7 +10886,7 @@ function ClusterOptions(props) {
       return {
         id: option.id,
         idStr,
-        name: option.names?.[0]?.value || `Option ${option.id}`,
+        name: propellerV2CoreUi.getLocalizedValue(option.names, language, `Option ${option.id}`),
         isRequired,
         selectedProductId,
         hasSelection: !!selectedProductId,
@@ -10886,7 +10915,7 @@ function ClusterOptions(props) {
     }
   }
   const renderedOptions = getOptionsForRender();
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `propeller-cluster-options ${props.className || ""}`, children: renderedOptions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-cluster-options__content flex flex-col gap-6", children: renderedOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(`propeller-cluster-options ${props.className || ""}`), children: renderedOptions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-cluster-options__content flex flex-col gap-6", children: renderedOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: "propeller-cluster-options__group",
@@ -11325,7 +11354,8 @@ function FavoriteListItem(rawProps) {
   const isProduct = "productId" in props.item;
   const product = props.item;
   const cluster = props.item;
-  const name = isProduct ? product?.names?.[0]?.value || "Product" : cluster?.names?.[0]?.value || cluster?.defaultProduct?.names?.[0]?.value || "Cluster";
+  const nameLanguage = props.language;
+  const name = isProduct ? propellerV2CoreUi.getLocalizedValue(product?.names, nameLanguage, "Product") : propellerV2CoreUi.getLocalizedValue(cluster?.names, nameLanguage, "") || propellerV2CoreUi.getLocalizedValue(cluster?.defaultProduct?.names, nameLanguage, "Cluster");
   const sku = isProduct ? product?.sku || "" : cluster?.sku || cluster?.defaultProduct?.sku || "";
   const imageUrl = isProduct ? product?.media?.images?.items?.[0]?.imageVariants?.[0]?.url || "" : cluster?.defaultProduct?.media?.images?.items?.[0]?.imageVariants?.[0]?.url || "";
   const itemUrl = isProduct ? props.configuration?.urls?.getProductUrl?.(props.item) || "" : props.configuration?.urls?.getClusterUrl?.(props.item) || "";
@@ -11378,7 +11408,7 @@ function FavoriteListItem(rawProps) {
       {
         onClick: (e) => handleItemClick(e),
         "data-type": isProduct ? "product" : "cluster",
-        className: `propeller-favorite-list-item flex flex-row items-center gap-4 rounded-container border border-border bg-card p-4 transition-colors hover:border-secondary/20 hover:shadow-sm cursor-pointer ${props.className || ""}`,
+        className: cn(`propeller-favorite-list-item flex flex-row items-center gap-4 rounded-container border border-border bg-card p-4 transition-colors hover:border-secondary/20 hover:shadow-sm cursor-pointer ${props.className || ""}`),
         children: rawProps.children
       }
     ) });
@@ -11388,7 +11418,7 @@ function FavoriteListItem(rawProps) {
     {
       onClick: (e) => handleItemClick(e),
       "data-type": isProduct ? "product" : "cluster",
-      className: `propeller-favorite-list-item flex flex-row items-center gap-4 rounded-container border border-border bg-card p-4 transition-colors hover:border-secondary/20 hover:shadow-sm cursor-pointer ${props.className || ""}`,
+      className: cn(`propeller-favorite-list-item flex flex-row items-center gap-4 rounded-container border border-border bg-card p-4 transition-colors hover:border-secondary/20 hover:shadow-sm cursor-pointer ${props.className || ""}`),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(FavoriteListItemImage, {}),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-favorite-list-item__body flex flex-col gap-0.5 min-w-0 flex-1", children: [
@@ -11759,9 +11789,10 @@ function FavoriteListDetails(rawProps) {
     }
   }
   function getSearchItemName(item) {
-    if ("productId" in item) return item.names?.[0]?.value || "Product";
+    const language = props.language;
+    if ("productId" in item) return propellerV2CoreUi.getLocalizedValue(item.names, language, "Product");
     const cluster = item;
-    return cluster.names?.[0]?.value || cluster.defaultProduct?.names?.[0]?.value || "Cluster";
+    return propellerV2CoreUi.getLocalizedValue(cluster.names, language, "") || propellerV2CoreUi.getLocalizedValue(cluster.defaultProduct?.names, language, "Cluster");
   }
   function getSearchItemSku(item) {
     if ("productId" in item) return item.sku || "";
@@ -11901,7 +11932,7 @@ function FavoriteListDetails(rawProps) {
       fetchList();
     }
   }, [props.favoriteListId]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `propeller-favorite-list-details ${props.className || ""}`, "data-loading": loading ? "true" : "false", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(`propeller-favorite-list-details ${props.className || ""}`), "data-loading": loading ? "true" : "false", children: [
     loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-favorite-list-details__skeleton space-y-4", children: [1, 2, 3]?.map((i) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -12004,7 +12035,7 @@ function FavoriteListDetails(rawProps) {
           type: "button",
           className: "propeller-favorite-list-details__add-btn inline-flex items-center justify-center rounded-control bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground transition-colors hover:bg-secondary/90",
           onClick: () => setShowAddModal(true),
-          children: propellerV2CoreUi.getLabel(props.labels, "addProductDirectly", "Add product directly to this wishlist")
+          children: propellerV2CoreUi.getLabel(props.labels, "addProductDirectly", "Add product to favorite list")
         }
       ) }),
       allItems.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-favorite-list-details__empty border border-border rounded-container p-12 text-center space-y-4", children: [
@@ -12346,7 +12377,7 @@ function FavoriteLists(rawProps) {
     setNewSetAsDefault(false);
     closeCreateModal();
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `propeller-favorite-lists ${props.className || ""}`, "data-loading": loading ? "true" : "false", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(`propeller-favorite-lists ${props.className || ""}`), "data-loading": loading ? "true" : "false", children: [
     props.allowFavoriteListCreate !== false && !loading && displayedLists.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-favorite-lists__toolbar flex justify-end mb-4", children: /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
@@ -12869,7 +12900,7 @@ function ForgotPassword(rawProps) {
 }
 var ForgotPassword_default = ForgotPassword;
 function GridTitle(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `propeller-grid-title mb-8 ${props.className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-grid-title__row flex items-baseline gap-3 mb-3", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(`propeller-grid-title mb-8 ${props.className || ""}`), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-grid-title__row flex items-baseline gap-3 mb-3", children: [
     props.headingLevel === "h2" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "propeller-grid-title__heading text-3xl sm:text-4xl font-bold tracking-tight", children: props.title }) : null,
     props.headingLevel !== "h2" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "propeller-grid-title__heading text-3xl sm:text-4xl font-bold tracking-tight", children: props.title }) : null
   ] }) });
@@ -12880,8 +12911,8 @@ function GridTitleWithProvider(rawProps) {
   return /* @__PURE__ */ jsxRuntime.jsx(GridTitle_default, { ...props });
 }
 var GridTitleWithProvider_default = GridTitleWithProvider;
-function getItemName(item) {
-  return item.product?.names?.[0]?.value || "Product";
+function getItemName(item, language) {
+  return propellerV2CoreUi.getLocalizedValue(item.product?.names, language, "Product");
 }
 function getItemImageUrl(item) {
   const url = item.product?.media?.images?.items?.[0]?.imageVariants?.[0]?.url;
@@ -12902,6 +12933,7 @@ function getBundleNonLeaders(item) {
 }
 function ItemsOverview(rawProps) {
   const props = useInfraProps(rawProps);
+  const language = props.language;
   const useTax = !!props.includeTax;
   const containerClass = props.itemsOverviewContainerClass || "cart-items-overview";
   const itemNameClickable = props.itemNameClickable !== void 0 ? props.itemNameClickable : true;
@@ -12963,7 +12995,7 @@ function ItemsOverview(rawProps) {
               {
                 className: "propeller-items-overview__item-image w-full h-full object-contain p-1.5",
                 src: getItemImageUrl(item),
-                alt: getItemName(item)
+                alt: getItemName(item, language)
               }
             ) : /* @__PURE__ */ jsxRuntime.jsx(
               "svg",
@@ -12991,7 +13023,7 @@ function ItemsOverview(rawProps) {
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-items-overview__item-bundle mt-1.5 space-y-1 border-l-2 border-secondary/10 pl-2", children: [
                   leader ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-items-overview__item-bundle-leader flex justify-between items-center text-xs", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-foreground", children: leader.product.names?.[0]?.value || "Product" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-foreground", children: propellerV2CoreUi.getLocalizedValue(leader.product.names, language, "Product") }),
                     money(bundlePrice(leader.price)) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground whitespace-nowrap ml-2", children: money(bundlePrice(leader.price)) }) : null
                   ] }) : null,
                   getBundleNonLeaders(item).map((bundleItem, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -12999,7 +13031,7 @@ function ItemsOverview(rawProps) {
                     {
                       className: "propeller-items-overview__item-bundle-item flex justify-between items-center text-xs text-muted-foreground",
                       children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "line-clamp-1", children: bundleItem.product?.names?.[0]?.value || "Product" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "line-clamp-1", children: propellerV2CoreUi.getLocalizedValue(bundleItem.product?.names, language, "Product") }),
                         money(bundlePrice(bundleItem.price)) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground-subtle whitespace-nowrap ml-2", children: money(bundlePrice(bundleItem.price)) }) : null
                       ]
                     },
@@ -13020,9 +13052,9 @@ function ItemsOverview(rawProps) {
                     {
                       className: "propeller-items-overview__item-title font-medium text-sm leading-tight cursor-pointer hover:text-secondary transition-colors line-clamp-2",
                       onClick: () => handleItemNameClick(item),
-                      children: getItemName(item)
+                      children: getItemName(item, language)
                     }
-                  ) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "propeller-items-overview__item-title font-medium text-sm leading-tight line-clamp-2", children: getItemName(item) }),
+                  ) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "propeller-items-overview__item-title font-medium text-sm leading-tight line-clamp-2", children: getItemName(item, language) }),
                   showPrice ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "propeller-items-overview__item-price font-semibold text-sm text-foreground whitespace-nowrap", children: formatItemPrice(lineTotal(item)) }) : null
                 ] }),
                 showSku && itemSku ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "propeller-items-overview__item-sku text-xs text-muted-foreground mt-0.5", children: [
@@ -13038,7 +13070,7 @@ function ItemsOverview(rawProps) {
                   {
                     className: "propeller-items-overview__item-option flex justify-between items-center text-xs text-muted-foreground",
                     children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "line-clamp-1", children: child.product?.names?.[0]?.value || "Option" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "line-clamp-1", children: propellerV2CoreUi.getLocalizedValue(child.product?.names, language, "Option") }),
                       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground-subtle whitespace-nowrap ml-2", children: formatItemPrice(lineTotal(child)) })
                     ]
                   },
@@ -13275,7 +13307,7 @@ function Menu(rawProps) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: `propeller-menu ${props.className || ""}`,
+        className: cn(`propeller-menu ${props.className || ""}`),
         "data-variant": props.menuStyle || "custom",
         "data-loading": isLoading ? "true" : "false",
         children: customMenu
@@ -13285,7 +13317,7 @@ function Menu(rawProps) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: `propeller-menu ${props.className || ""}`,
+      className: cn(`propeller-menu ${props.className || ""}`),
       "data-variant": getMenuStyle(),
       "data-loading": isLoading ? "true" : "false",
       children: [
@@ -13431,7 +13463,7 @@ function OrderActions(rawProps) {
     // (the bug screenshot showed "Order / confirmation / (PDF)" on three lines).
     // `whitespace-nowrap` on the buttons is the belt-and-braces guarantee that
     // text never wraps even in narrow containers without flex sizing.
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `propeller-order-actions flex-shrink-0 ${props.className || ""}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(`propeller-order-actions flex-shrink-0 ${props.className || ""}`), children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-order-actions__actions flex flex-row items-center gap-3 flex-shrink-0", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
@@ -13516,22 +13548,22 @@ function OrderActions(rawProps) {
   );
 }
 var OrderActions_default = OrderActions;
-function getProductName3(orderItem) {
-  return orderItem?.product?.names?.[0]?.value || orderItem?.name || "Unknown Product";
+function getProductName3(orderItem, language) {
+  return propellerV2CoreUi.getLocalizedValue(orderItem?.product?.names, language, "") || orderItem?.name || "Unknown Product";
 }
-function getClusterUrl(orderItem) {
+function getClusterUrl(orderItem, language) {
   const cluster = orderItem?.product?.cluster;
   if (!cluster) return "";
   const id = cluster.clusterId;
-  const slug = cluster.slugs?.[0]?.value || "";
+  const slug = propellerV2CoreUi.getLocalizedValue(cluster.slugs, language, "");
   if (!id || !slug) return "";
   return `/cluster/${id}/${slug}`;
 }
-function getProductUrl(orderItem) {
-  const cu = getClusterUrl(orderItem);
+function getProductUrl(orderItem, language) {
+  const cu = getClusterUrl(orderItem, language);
   if (cu) return cu;
   const id = orderItem?.product?.productId;
-  const slug = orderItem?.product?.slugs?.[0]?.value || "";
+  const slug = propellerV2CoreUi.getLocalizedValue(orderItem?.product?.slugs, language, "");
   if (id && slug) return `/product/${id}/${slug}`;
   return "";
 }
@@ -13546,10 +13578,10 @@ function OrderItemCard(props) {
   const showDiscount = props.showDiscount !== void 0 ? props.showDiscount : false;
   const showStockComponent = props.showStockComponent !== void 0 ? props.showStockComponent : false;
   const showItemNotes = props.showItemNotes !== void 0 ? props.showItemNotes : false;
-  const productName = getProductName3(item);
+  const productName = getProductName3(item, props.language);
   const productSku = item?.product?.sku || item?.sku || "";
   const productImage = item?.product?.media?.images?.items?.[0]?.imageVariants?.[0]?.url || "";
-  const productUrl = getProductUrl(item);
+  const productUrl = getProductUrl(item, props.language);
   const quantity = item?.quantity || 0;
   const priceTotal = item?.priceTotal || 0;
   const discount = item?.discount || 0;
@@ -13664,7 +13696,7 @@ function OrderItemCard(props) {
         className: "propeller-order-item-card__child-row border-0",
         "data-child": "true",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("td", { className: "propeller-order-item-card__cell propeller-order-item-card__cell--product px-6 py-2 pl-28", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "propeller-order-item-card__child-title text-sm text-muted-foreground", children: child.product?.names?.[0]?.value || child.name || "Unknown" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("td", { className: "propeller-order-item-card__cell propeller-order-item-card__cell--product px-6 py-2 pl-28", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "propeller-order-item-card__child-title text-sm text-muted-foreground", children: propellerV2CoreUi.getLocalizedValue(child.product?.names, props.language, "") || child.name || "Unknown" }) }),
           showQuantity ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "propeller-order-item-card__cell propeller-order-item-card__cell--quantity px-6 py-2 text-center text-sm text-muted-foreground", children: child.quantity || 0 }) : null,
           showDiscount ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "propeller-order-item-card__cell propeller-order-item-card__cell--discount px-6 py-2 text-right text-sm text-muted-foreground" }) : null,
           showPrice ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "propeller-order-item-card__cell propeller-order-item-card__cell--price px-6 py-2 text-right whitespace-nowrap text-sm text-muted-foreground", children: formatItemPrice(child.priceTotal || 0) }) : null
@@ -13681,14 +13713,15 @@ function OrderBonusItems(rawProps) {
   const bonusItems = propellerV2CoreUi.getNettedBonusItems(allItems);
   if (bonusItems.length === 0) return null;
   const OrderItemCardImpl = props.orderItemCardComponent ?? OrderItemCard_default;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `propeller-order-bonus-items ${props.className || "mb-8"}`, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(`propeller-order-bonus-items ${props.className || "mb-8"}`), children: [
     /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "propeller-order-bonus-items__title text-lg font-bold mb-3 text-foreground", children: propellerV2CoreUi.getLabel(props.labels, "title", "Bonus items") }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-order-bonus-items__table bg-card rounded-container shadow overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("table", { className: "w-full", children: bonusItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
       OrderItemCardImpl,
       {
         orderItem: item,
         titleLinkable: false,
-        currency: props.currency
+        currency: props.currency,
+        language: props.language
       },
       item.id
     )) }) })
@@ -13770,7 +13803,7 @@ function OrderList(rawProps) {
     }
     return fields;
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `propeller-order-list ${props.className || ""}`, "data-loading": loading ? "true" : "false", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(`propeller-order-list ${props.className || ""}`), "data-loading": loading ? "true" : "false", children: [
     props.enableSearch && searchFields().length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-order-list__filters mb-6 bg-card p-4 rounded-container shadow space-y-4", children: [
       searchFields().includes("term") ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-order-list__search-field w-full", children: [
         /* @__PURE__ */ jsxRuntime.jsx("label", { className: "propeller-order-list__filter-label block text-sm font-medium text-muted-foreground capitalize mb-1", children: getColumnLabel("term") }),
@@ -14360,6 +14393,7 @@ function QuickOrderInner(props) {
           target: "_blank",
           rel: "noopener nofollow",
           className: "text-primary hover:underline text-sm inline-block mb-4",
+          onClick: () => props.onTemplateDownload?.(),
           children: L("downloadTemplate", "Download XLSX template")
         }
       ) : null,
@@ -14523,7 +14557,7 @@ function OrderShipments(props) {
     const code = tat.code || "";
     return `${baseUrl}${code}`;
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `order-shipments ${props.className || ""}`, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(`order-shipments ${props.className || ""}`), children: [
     shipments.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
       /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-semibold", children: propellerV2CoreUi.getLabel(props.labels, "title", "Shipping details") }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto rounded-lg border border-border bg-card shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full text-sm", children: [
@@ -14924,7 +14958,7 @@ function PriceToggle(props) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: `propeller-price-toggle flex items-center gap-2 ${props.className || ""}`,
+      className: cn(`propeller-price-toggle flex items-center gap-2 ${props.className || ""}`),
       "data-state": isOn ? "on" : "off",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "propeller-price-toggle__label hidden sm:inline text-xs", children: label }),
@@ -15016,7 +15050,7 @@ function ProductBulkPrices(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: !isHidden2 && hasItems ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: `propeller-product-bulk-prices ${props.className || ""}`,
+      className: cn(`propeller-product-bulk-prices ${props.className || ""}`),
       "data-include-tax": includeTax ? "true" : "false",
       children: [
         propellerV2CoreUi.getLabel(props.labels, "title", "Volume pricing") ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "propeller-product-bulk-prices__title text-base font-semibold text-foreground mb-3", children: propellerV2CoreUi.getLabel(props.labels, "title", "Volume pricing") }) : null,
@@ -15059,11 +15093,12 @@ function getItemPrice(item, includeTax) {
 function getProductImage(product) {
   return product?.media?.images?.items?.[0]?.imageVariants?.[0]?.url || "";
 }
-function getProductName4(product) {
-  return product?.names?.[0]?.value || "";
+function getProductName4(product, language) {
+  return propellerV2CoreUi.getLocalizedValue(product?.names, language, "");
 }
 function ProductBundles(rawProps) {
   const props = useInfraProps(rawProps);
+  const language = props.language;
   const currencySymbol = props.currency ?? "\u20AC";
   const money = (value) => propellerV2CoreUi.formatPrice(value, { symbol: currencySymbol });
   const [isMounted, setIsMounted] = React6.useState(false);
@@ -15162,7 +15197,7 @@ function ProductBundles(rawProps) {
   React6.useEffect(() => {
     fetchBundles(props.productId);
   }, [props.productId]);
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: isMounted && !isLoading && bundles.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `propeller-product-bundles ${props.className || "mb-12"}`, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: isMounted && !isLoading && bundles.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(`propeller-product-bundles ${props.className || "mb-12"}`), children: [
     bundles.map((bundle, bundleIdx) => {
       const bundlePrice = getBundlePrice(bundle, includeTax);
       const originalPrice = getOriginalPrice(bundle, includeTax);
@@ -15202,10 +15237,10 @@ function ProductBundles(rawProps) {
                       {
                         className: "propeller-product-bundles__item-image w-full h-full object-contain p-2",
                         src: getProductImage(item.product),
-                        alt: getProductName4(item.product)
+                        alt: getProductName4(item.product, language)
                       }
                     ) : 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) || "Product " + item.productId }),
+                    /* @__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 }),
                     !hidePrices && item.price ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-product-bundles__item-price text-sm font-semibold text-foreground", children: [
                       money(getItemPrice(item, includeTax)),
                       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-normal text-muted-foreground ml-1", children: includeTax ? propellerV2CoreUi.getLabel(props.labels, "inclTax", "incl. VAT") : propellerV2CoreUi.getLabel(props.labels, "exclTax", "excl. VAT") })
@@ -15405,7 +15440,7 @@ function ProductBundles(rawProps) {
             {
               className: "propeller-product-bundles__modal-child flex justify-between items-center text-xs text-muted-foreground",
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "line-clamp-1", children: getProductName4(item.product) || "Product" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "line-clamp-1", children: getProductName4(item.product, language) || "Product" }),
                 !hidePrices && item.price ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground-subtle whitespace-nowrap ml-2", children: money(getItemPrice(item, includeTax)) }) : null
               ]
             },
@@ -15461,7 +15496,7 @@ function ProductDescription(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: !!html ? /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: `propeller-product-description ${props.className || ""}`,
+      className: cn(`propeller-product-description ${props.className || ""}`),
       "data-expanded": expanded ? "true" : "false",
       "data-truncatable": shouldTruncate ? "true" : "false",
       children: [
@@ -15500,7 +15535,7 @@ function ProductDownloads(props) {
     const match = alts.find((a) => a.language === lang);
     return match?.value || alts?.[0]?.value || "Download";
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `propeller-product-downloads ${props.className || ""}`, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(`propeller-product-downloads ${props.className || ""}`), children: [
     hasItems ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "propeller-product-downloads__title text-base font-semibold text-foreground mb-3", children: propellerV2CoreUi.getLabel(props.labels, "title", "Downloads") }) : null,
     hasItems ? /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "propeller-product-downloads__list space-y-2", children: items.map((doc, index) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "propeller-product-downloads__item", children: !!getDocumentUrl(doc) ? /* @__PURE__ */ jsxRuntime.jsxs(
       "a",
@@ -15571,7 +15606,7 @@ function ProductGallery(props) {
     if (images.length === 0) return;
     setSelectedIndex((idx) => (idx + 1) % images.length);
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `propeller-product-gallery ${props.className || ""}`, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(`propeller-product-gallery ${props.className || ""}`), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-product-gallery__stage relative aspect-square bg-card overflow-hidden", children: [
       images.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-product-gallery__empty flex h-full w-full items-center justify-center bg-surface-hover", children: /* @__PURE__ */ jsxRuntime.jsx(
         "svg",
@@ -15906,13 +15941,13 @@ function ProductInfo(rawProps) {
       }
     };
     if (rawProps.children !== void 0) {
-      return /* @__PURE__ */ jsxRuntime.jsx(ProductInfoContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(ProductGridConfigProvider, { value: pdpConfig, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `propeller-product-info ${props.className || ""}`, children: [
+      return /* @__PURE__ */ jsxRuntime.jsx(ProductInfoContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(ProductGridConfigProvider, { value: pdpConfig, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(`propeller-product-info ${props.className || ""}`), children: [
         props.beforeContent ? props.beforeContent(product) : null,
         rawProps.children,
         props.afterContent ? props.afterContent(product) : null
       ] }) }) });
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(ProductInfoContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(ProductGridConfigProvider, { value: pdpConfig, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `propeller-product-info ${props.className || ""}`, children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(ProductInfoContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(ProductGridConfigProvider, { value: pdpConfig, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(`propeller-product-info ${props.className || ""}`), children: [
       props.beforeContent ? props.beforeContent(product) : null,
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-product-info__media relative", children: [
@@ -15934,7 +15969,7 @@ function ProductInfo(rawProps) {
       props.afterContent ? props.afterContent(product) : null
     ] }) }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `propeller-product-info ${props.className || ""}`, "data-loading": loading ? "true" : "false", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(`propeller-product-info ${props.className || ""}`), "data-loading": loading ? "true" : "false", children: [
     loading && !props.product ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-product-info__skeleton animate-pulse space-y-3", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-product-info__skeleton-line h-4 bg-surface-hover rounded w-1/4" }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-product-info__skeleton-line h-8 bg-surface-hover rounded w-3/4" })
@@ -16210,7 +16245,7 @@ function ProductShortDescription(props) {
     "div",
     {
       dangerouslySetInnerHTML: { __html: html },
-      className: `propeller-product-short-description prose prose-slate max-w-none text-muted-foreground ${props.className || ""}`
+      className: cn(`propeller-product-short-description prose prose-slate max-w-none text-muted-foreground ${props.className || ""}`)
     }
   ) : null });
 }
@@ -16377,7 +16412,7 @@ function ProductSlider(rawProps) {
   }, [sliderId, items().length]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     " ",
-    !(isCrossUpsellMode() && !isLoading && items().length === 0) ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `propeller-product-slider ${props.containerClassName || "mb-12"}`, "data-loading": isLoading ? "true" : "false", children: [
+    !(isCrossUpsellMode() && !isLoading && items().length === 0) ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(`propeller-product-slider ${props.containerClassName || "mb-12"}`), "data-loading": isLoading ? "true" : "false", children: [
       sliderTitle() || items().length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-product-slider__header flex items-center justify-between mb-6", children: [
         sliderTitle() ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "propeller-product-slider__title text-2xl font-bold", children: sliderTitle() }) : null,
         items().length > desktopCount() ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-product-slider__nav flex gap-2", children: [
@@ -16565,7 +16600,7 @@ function ProductSpecifications(rawProps) {
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: !loading && (hasPublicAttributes() || props.packageDescription || hasSlotContent) ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: `propeller-product-specifications ${props.className || ""}`,
+      className: cn(`propeller-product-specifications ${props.className || ""}`),
       "data-layout": props.layout === "list" ? "list" : "table",
       "data-grouped": props.grouping ? "true" : "false",
       children: [
@@ -16646,7 +16681,7 @@ function ProductVideos(props) {
     }
     return uri;
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `propeller-product-videos ${props.className || ""}`, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(`propeller-product-videos ${props.className || ""}`), children: [
     hasItems ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "propeller-product-videos__title text-base font-semibold text-foreground mb-3", children: propellerV2CoreUi.getLabel(props.labels, "title", "Videos") }) : null,
     hasItems ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-product-videos__list space-y-4", children: items.map((video, index) => /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -16744,7 +16779,7 @@ function ProductTabs(rawProps) {
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.product ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: `propeller-product-tabs ${props.className || ""}`,
+      className: cn(`propeller-product-tabs ${props.className || ""}`),
       "data-active-tab": activeTab,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-product-tabs__desktop hidden md:block", children: [
@@ -17050,7 +17085,7 @@ function PurchaseAuthorizationConfigurator(rawProps) {
     onPurchaseAuthorizationDelete: props.onPurchaseAuthorizationDelete,
     afterPurchaseAuthorizationDelete: props.afterPurchaseAuthorizationDelete
   });
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `propeller-purchase-authorization-configurator ${props.className || ""}`, children: isAuthManager ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(`propeller-purchase-authorization-configurator ${props.className || ""}`), children: isAuthManager ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-semibold", children: propellerV2CoreUi.getLabel(props.labels, "title", "Purchase Authorization Settings") }),
@@ -17417,7 +17452,7 @@ function PurchaseAuthorizationRequests(rawProps) {
     if (fromBundle) return fromBundle;
     return item?.product?.sku || "";
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `propeller-purchase-authorization-requests ${props.className || ""}`, children: isAuthManager ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-purchase-authorization-requests__content space-y-4", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(`propeller-purchase-authorization-requests ${props.className || ""}`), children: isAuthManager ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-purchase-authorization-requests__content space-y-4", children: [
     !props.hideTitle ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "propeller-purchase-authorization-requests__title text-xl font-semibold", children: propellerV2CoreUi.getLabel(props.labels, "title", "Authorization Requests") }) : null,
     loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 h-8 border-4 border-primary border-t-transparent rounded-full animate-spin" }) }) : null,
     !loading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -18620,7 +18655,7 @@ function mapToSearchBarResult(item, language) {
   const isCluster = "clusterId" in item;
   const displayItem = isCluster ? item.defaultProduct : item;
   const id = isCluster ? item.clusterId : item.productId;
-  const slug = item.slugs?.[0]?.value || "";
+  const slug = propellerV2CoreUi.getLocalizedValue(item.slugs, language, "");
   const url = isCluster ? "/cluster/" + id + "/" + slug : "/product/" + id + "/" + slug;
   const priceNet = displayItem?.price?.net || 0;
   const priceGross = displayItem?.price?.gross || 0;
@@ -18737,7 +18772,7 @@ function SearchBar(rawProps) {
     {
       ref: containerRef,
       "data-search-bar": true,
-      className: `propeller-search-bar ${props.containerClassName || "relative flex-1 max-w-2xl mx-8"}`,
+      className: cn(`propeller-search-bar ${props.containerClassName || "relative flex-1 max-w-2xl mx-8"}`),
       "data-open": showDropdown ? "true" : "false",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("form", { className: "propeller-search-bar__form", onSubmit: (e) => handleSubmit(e), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-search-bar__input-wrapper relative", children: [