@nok-integration/storefront-react 0.20.12 → 0.20.13

package/dist/index.d.ts

@@ -4386,16 +4386,6 @@ export declare interface OrderSummaryProps {
     discount?: Money;
 }
 
-/**
- * The order progress timeline (Figma `mobile/order/timeline-row`, 3879:13868).
- *
- * The steps come from the engine rather than being enumerated here, so the screen renders
- * what the order can actually evidence — three rows for a normal delivery, four when a
- * carrier reports the parcel out for delivery, and a cancelled tail when it applies.
- *
- * An ordered list, because it is one: the rows have a sequence and a screen reader should
- * announce it as such.
- */
 export declare function OrderTimeline({ progress, estimatedDelivery, locale: localeProp, }: OrderTimelineProps): JSX.Element;
 
 export declare interface OrderTimelineProps {

package/dist/index.mjs

@@ -6110,7 +6110,20 @@ const ES = {
   "You’ll receive a shipping label PDF to your email as well.": "Recibirá un PDF de la etiqueta de envío en su correo electrónico.",
   "{0} photographs": "{0} fotografías",
   "{0}, opens in a new tab": "{0}, se abre en una pestaña nueva",
-  "Zip Ups": "Sudaderas con cremalleras"
+  "Zip Ups": "Sudaderas con cremalleras",
+  "Added to cart": "Añadido a la cesta",
+  "Order placed": "Pedido realizado",
+  "On its way": "En camino",
+  "Out for delivery": "En reparto",
+  "Estimated delivery": "Entrega estimada",
+  "Nothing matches these filters.": "Nada coincide con estos filtros.",
+  "Your items will show up here once you've added to your cart.": "Sus artículos aparecerán aquí cuando los añada a la cesta.",
+  "Complete your DAZN sign-up to check out. Your cart is saved.": "Complete su registro en DAZN para finalizar la compra. Su cesta está guardada.",
+  "Your orders will show up here once you've shopped.": "Sus pedidos aparecerán aquí cuando haya comprado.",
+  "We'll let you know": "Le avisaremos",
+  "{0} — as soon as it is back": "{0} — en cuanto vuelva a estar disponible",
+  "Size {0}": "Talla {0}",
+  "On the way": "En camino"
 };
 const CATALOGUES = {
   es: ES
@@ -6710,8 +6723,23 @@ const styles$H = {
   future,
   date: date$1
 };
+const STEP_LABELS = {
+  packing: "Order placed",
+  on_its_way: "On its way",
+  out_for_delivery: "Out for delivery",
+  delivered: "Delivered",
+  cancelled: "Order cancelled"
+};
+const PENDING_LABELS = {
+  delivered: "Estimated delivery"
+};
+function labelFor(entry) {
+  if (entry.label) return entry.label;
+  return (entry.at ? void 0 : PENDING_LABELS[entry.step]) ?? STEP_LABELS[entry.step] ?? "";
+}
 function OrderTimeline({ progress: progress2, estimatedDelivery, locale: localeProp }) {
   const locale = useLocale(localeProp);
+  const t = useT();
   const currentIndex = progress2.findIndex((e) => e.current);
   return jsx("ol", {
     className: styles$H.timeline,
@@ -6735,7 +6763,7 @@ function OrderTimeline({ progress: progress2, estimatedDelivery, locale: localeP
             className: styles$H.text,
             children: [jsx("span", {
               className: [styles$H.label, styles$H[state]].join(" "),
-              children: entry.label
+              children: t(labelFor(entry))
             }), entry.at ? jsx("time", {
               className: styles$H.date,
               dateTime: entry.at,
@@ -7100,7 +7128,7 @@ function OrderItemsCard({ order }) {
       className: styles$F.itemsHeader,
       children: [jsx("h2", {
         className: styles$F.itemsTitle,
-        children: "Items"
+        children: t("Items")
       }), jsx("span", {
         className: styles$F.itemsCount,
         children: itemCount
@@ -7120,7 +7148,7 @@ function ShippingAddressCard({ order }) {
     "aria-label": t("Shipping address"),
     children: [jsx("h2", {
       className: styles$F.cardTitle,
-      children: "Shipping address"
+      children: t("Shipping address")
     }), jsx("p", {
       className: styles$F.cardBody,
       children: formatAddress(order.ship_to)
@@ -8620,13 +8648,13 @@ function OrderListContent({ onOpenOrder, onOpenReturn, onStartShopping, locale:
       className: styles$v.empty,
       children: jsx(EmptyState, {
         title: t("Nothing here yet"),
-        body: "Your orders will show up here once you've shopped.",
+        body: t("Your orders will show up here once you've shopped."),
         ...onStartShopping ? {
           action: jsx("button", {
             type: "button",
             className: styles$v.cta,
             onClick: onStartShopping,
-            children: "Continue shopping"
+            children: t("Continue shopping")
           })
         } : {}
       })
@@ -8891,6 +8919,7 @@ function ProductTile({ product, priority, size = "default" }) {
   const anyInStock = product.variants.length === 0 ? true : product.variants.some((v) => v.in_stock);
   const topBadge2 = product.badges?.[0];
   const pct = discountPct(product.price, product.compare_at);
+  const t = useT();
   return jsxs(ShopLink, {
     to: `/product/${encodeURIComponent(product.sku)}`,
     className: [styles$t.tile, size === "large" ? styles$t.large : ""].join(" "),
@@ -8916,7 +8945,7 @@ function ProductTile({ product, priority, size = "default" }) {
         })
       }), !anyInStock && jsx("span", {
         className: styles$t.oos,
-        children: "Out of stock"
+        children: t("Out of stock")
       })]
     }), jsxs("div", {
       className: styles$t.bottom,
@@ -9011,7 +9040,7 @@ function ProductGallery({ title: title2, product }) {
             })
           }), i === 0 && !inStock && jsx("span", {
             className: styles$s.oos,
-            children: "Out of stock"
+            children: t("Out of stock")
           })]
         }, src ?? i))
       }), jsxs("div", {
@@ -9077,7 +9106,7 @@ function FilterBar({ options: options2, active, onToggle, onClear }) {
       type: "button",
       className: styles$r.clear,
       onClick: onClear,
-      children: "Clear"
+      children: t("Clear")
     })]
   });
 }
@@ -9137,11 +9166,11 @@ function ProductGrid({ category, initialProducts, initialCursor, filters = [] })
       onClear: () => setActive([])
     }), visible.length === 0 ? jsx(EmptyState, {
       title: t("No products"),
-      body: "Nothing matches these filters.",
+      body: t("Nothing matches these filters."),
       action: active.length > 0 ? jsx(Button, {
         variant: "secondary",
         onClick: () => setActive([]),
-        children: "Clear filters"
+        children: t("Clear filters")
       }) : void 0
     }) : jsx("ul", {
       className: styles$q.grid,
@@ -9181,6 +9210,7 @@ const styles$p = {
   inset
 };
 function RailCarousel({ title: title2, products, seeAllTo, inset: inset2 }) {
+  const t = useT();
   if (products.length === 0) return null;
   return jsxs("section", {
     className: [styles$p.rail, inset2 ? styles$p.inset : ""].join(" "),
@@ -9193,7 +9223,7 @@ function RailCarousel({ title: title2, products, seeAllTo, inset: inset2 }) {
       }), seeAllTo && jsx(ShopLink, {
         className: styles$p.seeAll,
         to: seeAllTo,
-        children: "See all"
+        children: t("See all")
       })]
     }), jsx("ul", {
       className: styles$p.track,
@@ -9515,7 +9545,7 @@ function CartLineItem({ item: item2, title: title2, image: image2, compareAt: co
         }), soldOut ? jsx("span", {
           className: styles$m.oos,
           id: noticeId,
-          children: "Out of stock"
+          children: t("Out of stock")
         }) : pct !== void 0 && jsx("span", {
           className: styles$m.saleBadge,
           children: jsx(SaleBadge, {
@@ -9614,7 +9644,7 @@ function ShippingInfo() {
         })]
       }), jsx("p", {
         className: styles$l.label,
-        children: "Standard or express delivery"
+        children: t("Standard or express delivery")
       })]
     }), jsx("div", {
       className: styles$l.divider,
@@ -9643,7 +9673,7 @@ function ShippingInfo() {
         })]
       }), jsx("p", {
         className: styles$l.label,
-        children: "14 days returns"
+        children: t("14 days returns")
       })]
     })]
   });
@@ -9826,16 +9856,16 @@ function CartViewContent({ onContinueShopping, checkoutLabel } = {}) {
   if (state === "empty" || !cart2) {
     return jsx(EmptyState, {
       title: t("Nothing here yet"),
-      body: "Your items will show up here once you've added to your cart.",
+      body: t("Your items will show up here once you've added to your cart."),
       action: onContinueShopping ? jsx(Button, {
         variant: "primary",
         onClick: onContinueShopping,
-        children: "Continue shopping"
+        children: t("Continue shopping")
       }) : jsx(ShopLink, {
         to: "/",
         children: jsx(Button, {
           variant: "primary",
-          children: "Continue shopping"
+          children: t("Continue shopping")
         })
       })
     });
@@ -10254,14 +10284,14 @@ function SizeSelector({ sizes, selected: selected2, onSelect, error: error2 = fa
       children: [jsx("h2", {
         id: "size-heading",
         className: styles$g.title,
-        children: "Size"
+        children: t("Size")
       }), showGuide && jsxs("button", {
         type: "button",
         className: styles$g.sizeGuide,
         onClick: () => setGuideOpen(true),
         "aria-haspopup": "dialog",
         "aria-expanded": guideOpen,
-        children: ["Size guide", jsxs("svg", {
+        children: [t("Size guide"), jsxs("svg", {
           className: styles$g.info,
           width: "12",
           height: "12",
@@ -10312,7 +10342,7 @@ function SizeSelector({ sizes, selected: selected2, onSelect, error: error2 = fa
     }), error2 && jsx("p", {
       className: styles$g.error,
       role: "alert",
-      children: "Please select a size"
+      children: t("Please select a size")
     }), lowStock2 && !error2 && jsx("p", {
       className: styles$g.lowStock,
       role: "status",
@@ -10394,7 +10424,7 @@ function ColorSelector({ colours, selected: selected2, onSelect }) {
             }), soldOut && jsx("span", {
               className: styles$f.scrim,
               "aria-hidden": "true",
-              children: "Out of stock"
+              children: t("Out of stock")
             })]
           }), lowStock2 && jsx("span", {
             className: styles$f.stockBadge,
@@ -10422,7 +10452,7 @@ const styles$e = {
 };
 function VariantSelector({ variants, selectedSku, onSelect, labelAttribute }) {
   const t = useT();
-  function labelFor(variant) {
+  function labelFor2(variant) {
     if (labelAttribute && variant.attributes[labelAttribute]) {
       return variant.attributes[labelAttribute];
     }
@@ -10433,7 +10463,7 @@ function VariantSelector({ variants, selectedSku, onSelect, labelAttribute }) {
     className: styles$e.fieldset,
     children: [jsx("legend", {
       className: styles$e.legend,
-      children: "Select an option"
+      children: t("Select an option")
     }), jsx("div", {
       className: styles$e.options,
       role: "radiogroup",
@@ -10449,7 +10479,7 @@ function VariantSelector({ variants, selectedSku, onSelect, labelAttribute }) {
           disabled: disabled2,
           className: [styles$e.option, selected2 ? styles$e.selected : "", disabled2 ? styles$e.disabled : ""].filter(Boolean).join(" "),
           onClick: () => !disabled2 && onSelect(variant.sku),
-          children: [labelFor(variant), disabled2 && jsx("span", {
+          children: [labelFor2(variant), disabled2 && jsx("span", {
             className: "visually-hidden",
             children: " (out of stock)"
           })]
@@ -10500,6 +10530,7 @@ function ProductDetails({ description: description2 }) {
       observer?.disconnect();
     };
   }, [expanded, description2]);
+  const t = useT();
   if (paragraphs.length === 0) return null;
   return jsxs("section", {
     className: styles$d.root,
@@ -10509,7 +10540,7 @@ function ProductDetails({ description: description2 }) {
       children: [jsx("h2", {
         id: "details-heading",
         className: styles$d.title,
-        children: "Product details"
+        children: t("Product details")
       }), jsx("div", {
         ref: bodyRef,
         className: [styles$d.body, expanded ? "" : styles$d.clamped].join(" "),
@@ -10758,8 +10789,8 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
         type: "stock_alert_requested",
         sku: alertSku
       });
-      toast2.show("We'll let you know", {
-        description: `${product.title} — as soon as it is back`,
+      toast2.show(t("We'll let you know"), {
+        description: t("{0} — as soon as it is back", product.title),
         image: product.media[0]
       });
     } catch (err) {
@@ -10812,8 +10843,8 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
     const variant = variants.find((v) => v.sku === sku);
     const size = variant?.attributes.size ?? selectedSize;
     setAdded((current2) => current2.includes(sku) ? current2 : [...current2, sku]);
-    toast2.show("Added to cart", {
-      description: [product.title, size && `Size ${size}`].filter(Boolean).join(" · "),
+    toast2.show(t("Added to cart"), {
+      description: [product.title, size && t("Size {0}", size)].filter(Boolean).join(" · "),
       image: variant?.image ?? product.media[0],
       action: cartSheet || navigate ? {
         label: t("View cart"),
@@ -10940,6 +10971,7 @@ const styles$9 = {
 function PcpHero({ hero: hero2 }) {
   const heroRef = useRef(null);
   useTopOffset(heroRef, "--hero-top");
+  const t = useT();
   return jsxs("section", {
     ref: heroRef,
     className: [styles$9.hero, hero2.image ? "" : styles$9.noImage].join(" "),
@@ -10964,10 +10996,10 @@ function PcpHero({ hero: hero2 }) {
       className: styles$9.text,
       children: [jsx("h1", {
         className: styles$9.title,
-        children: hero2.title
+        children: t(hero2.title)
       }), hero2.subtitle && jsx("p", {
         className: styles$9.subtitle,
-        children: hero2.subtitle
+        children: t(hero2.subtitle)
       })]
     })]
   });
@@ -11147,6 +11179,7 @@ const styles$4 = {
   row: row$1
 };
 function ExploreList({ title: title2, links }) {
+  const t = useT();
   return jsxs("section", {
     className: styles$4.section,
     "aria-label": title2,
@@ -11160,7 +11193,7 @@ function ExploreList({ title: title2, links }) {
           to: `/category/${encodeURIComponent(l.code)}`,
           className: styles$4.row,
           children: [jsx("span", {
-            children: l.label
+            children: t(l.label)
           }), jsx("svg", {
             width: "16",
             height: "16",
@@ -11195,10 +11228,11 @@ const styles$3 = {
   grid
 };
 function Block({ block }) {
+  const t = useT();
   switch (block.kind) {
     case "rail":
       return jsx(RailCarousel, {
-        title: block.title,
+        title: t(block.title),
         products: block.products
       });
     case "lifestyle_text":
@@ -11211,7 +11245,7 @@ function Block({ block }) {
         className: styles$3.featured,
         children: [block.title && jsx("h2", {
           className: styles$3.blockTitle,
-          children: block.title
+          children: t(block.title)
         }), jsx(ProductTile, {
           product: block.product,
           priority: true,
@@ -11220,7 +11254,7 @@ function Block({ block }) {
       });
     case "product_gallery":
       return jsx(ProductGallery, {
-        title: block.title,
+        title: t(block.title),
         product: block.product
       });
     case "lifestyle_image":
@@ -11233,7 +11267,7 @@ function Block({ block }) {
         className: styles$3.gridBlock,
         children: [block.title && jsx("h2", {
           className: styles$3.blockTitle,
-          children: block.title
+          children: t(block.title)
         }), jsx("ul", {
           className: styles$3.grid,
           children: block.products.map((p) => jsx("li", {
@@ -11253,7 +11287,7 @@ function Block({ block }) {
       });
     case "explore":
       return jsx(ExploreList, {
-        title: block.title,
+        title: t(block.title),
         links: block.links
       });
     default:
@@ -11583,9 +11617,10 @@ const FALLBACK_PANELS = [{
   image: "/figma/home/tshirts-poster.jpg"
 }];
 function CategoryPanel({ panel: panel2 }) {
+  const t = useT();
   return jsxs("section", {
     className: styles$2.panel,
-    "aria-label": panel2.title,
+    "aria-label": t(panel2.title),
     ...panel2.focalY === void 0 ? {} : {
       style: {
         "--slide-focal-y": `${panel2.focalY}%`
@@ -11608,16 +11643,16 @@ function CategoryPanel({ panel: panel2 }) {
         className: styles$2.copy,
         children: [jsx("h2", {
           className: styles$2.title,
-          children: panel2.title
+          children: t(panel2.title)
         }), jsx("p", {
           className: styles$2.subtitle,
-          children: panel2.subtitle
+          children: t(panel2.subtitle)
         })]
       }), jsx(ShopLink, {
         to: panel2.to,
         className: styles$2.cta,
-        "aria-label": `${panel2.title} — ${panel2.cta}`,
-        children: panel2.cta
+        "aria-label": `${t(panel2.title)} — ${t(panel2.cta)}`,
+        children: t(panel2.cta)
       })]
     })]
   });
@@ -11713,16 +11748,16 @@ function HomeShowcase() {
               className: styles$2.logo
             }), jsx("h1", {
               className: styles$2.heroTitle,
-              children: "DAZN SHOP"
+              children: t("DAZN SHOP")
             }), jsx("p", {
               className: styles$2.heroSub,
-              children: "Fresh drops inspired by sport, culture, and everyday movement"
+              children: t("Fresh drops inspired by sport, culture, and everyday movement")
             })]
           }), jsxs("div", {
             className: styles$2.swipe,
             children: [jsx("p", {
               className: styles$2.swipeLabel,
-              children: "Swipe down for more"
+              children: t("Swipe down for more")
             }), jsx("svg", {
               className: styles$2.chevron,
               viewBox: "0 0 24 24",
@@ -11771,13 +11806,13 @@ function IdentityGate({ returnTo }) {
   const emit = useShopEvent();
   return jsx(EmptyState, {
     title: t("Finish signing up"),
-    body: "Complete your DAZN sign-up to check out. Your cart is saved.",
+    body: t("Complete your DAZN sign-up to check out. Your cart is saved."),
     action: jsx(Button, {
       onClick: () => emit({
         type: "session_required",
         action: `sign_in:${returnTo}`
       }),
-      children: "Finish signing up"
+      children: t("Finish signing up")
     })
   });
 }

package/dist/standalone/storefront.mjs

@@ -6110,7 +6110,20 @@ const ES = {
   "You’ll receive a shipping label PDF to your email as well.": "Recibirá un PDF de la etiqueta de envío en su correo electrónico.",
   "{0} photographs": "{0} fotografías",
   "{0}, opens in a new tab": "{0}, se abre en una pestaña nueva",
-  "Zip Ups": "Sudaderas con cremalleras"
+  "Zip Ups": "Sudaderas con cremalleras",
+  "Added to cart": "Añadido a la cesta",
+  "Order placed": "Pedido realizado",
+  "On its way": "En camino",
+  "Out for delivery": "En reparto",
+  "Estimated delivery": "Entrega estimada",
+  "Nothing matches these filters.": "Nada coincide con estos filtros.",
+  "Your items will show up here once you've added to your cart.": "Sus artículos aparecerán aquí cuando los añada a la cesta.",
+  "Complete your DAZN sign-up to check out. Your cart is saved.": "Complete su registro en DAZN para finalizar la compra. Su cesta está guardada.",
+  "Your orders will show up here once you've shopped.": "Sus pedidos aparecerán aquí cuando haya comprado.",
+  "We'll let you know": "Le avisaremos",
+  "{0} — as soon as it is back": "{0} — en cuanto vuelva a estar disponible",
+  "Size {0}": "Talla {0}",
+  "On the way": "En camino"
 };
 const CATALOGUES = {
   es: ES
@@ -6710,8 +6723,23 @@ const styles$H = {
   future,
   date: date$1
 };
+const STEP_LABELS = {
+  packing: "Order placed",
+  on_its_way: "On its way",
+  out_for_delivery: "Out for delivery",
+  delivered: "Delivered",
+  cancelled: "Order cancelled"
+};
+const PENDING_LABELS = {
+  delivered: "Estimated delivery"
+};
+function labelFor(entry) {
+  if (entry.label) return entry.label;
+  return (entry.at ? void 0 : PENDING_LABELS[entry.step]) ?? STEP_LABELS[entry.step] ?? "";
+}
 function OrderTimeline({ progress: progress2, estimatedDelivery, locale: localeProp }) {
   const locale = useLocale(localeProp);
+  const t = useT();
   const currentIndex = progress2.findIndex((e) => e.current);
   return jsx("ol", {
     className: styles$H.timeline,
@@ -6735,7 +6763,7 @@ function OrderTimeline({ progress: progress2, estimatedDelivery, locale: localeP
             className: styles$H.text,
             children: [jsx("span", {
               className: [styles$H.label, styles$H[state]].join(" "),
-              children: entry.label
+              children: t(labelFor(entry))
             }), entry.at ? jsx("time", {
               className: styles$H.date,
               dateTime: entry.at,
@@ -7100,7 +7128,7 @@ function OrderItemsCard({ order }) {
       className: styles$F.itemsHeader,
       children: [jsx("h2", {
         className: styles$F.itemsTitle,
-        children: "Items"
+        children: t("Items")
       }), jsx("span", {
         className: styles$F.itemsCount,
         children: itemCount
@@ -7120,7 +7148,7 @@ function ShippingAddressCard({ order }) {
     "aria-label": t("Shipping address"),
     children: [jsx("h2", {
       className: styles$F.cardTitle,
-      children: "Shipping address"
+      children: t("Shipping address")
     }), jsx("p", {
       className: styles$F.cardBody,
       children: formatAddress(order.ship_to)
@@ -8620,13 +8648,13 @@ function OrderListContent({ onOpenOrder, onOpenReturn, onStartShopping, locale:
       className: styles$v.empty,
       children: jsx(EmptyState, {
         title: t("Nothing here yet"),
-        body: "Your orders will show up here once you've shopped.",
+        body: t("Your orders will show up here once you've shopped."),
         ...onStartShopping ? {
           action: jsx("button", {
             type: "button",
             className: styles$v.cta,
             onClick: onStartShopping,
-            children: "Continue shopping"
+            children: t("Continue shopping")
           })
         } : {}
       })
@@ -8891,6 +8919,7 @@ function ProductTile({ product, priority, size = "default" }) {
   const anyInStock = product.variants.length === 0 ? true : product.variants.some((v) => v.in_stock);
   const topBadge2 = product.badges?.[0];
   const pct = discountPct(product.price, product.compare_at);
+  const t = useT();
   return jsxs(ShopLink, {
     to: `/product/${encodeURIComponent(product.sku)}`,
     className: [styles$t.tile, size === "large" ? styles$t.large : ""].join(" "),
@@ -8916,7 +8945,7 @@ function ProductTile({ product, priority, size = "default" }) {
         })
       }), !anyInStock && jsx("span", {
         className: styles$t.oos,
-        children: "Out of stock"
+        children: t("Out of stock")
       })]
     }), jsxs("div", {
       className: styles$t.bottom,
@@ -9011,7 +9040,7 @@ function ProductGallery({ title: title2, product }) {
             })
           }), i === 0 && !inStock && jsx("span", {
             className: styles$s.oos,
-            children: "Out of stock"
+            children: t("Out of stock")
           })]
         }, src ?? i))
       }), jsxs("div", {
@@ -9077,7 +9106,7 @@ function FilterBar({ options: options2, active, onToggle, onClear }) {
       type: "button",
       className: styles$r.clear,
       onClick: onClear,
-      children: "Clear"
+      children: t("Clear")
     })]
   });
 }
@@ -9137,11 +9166,11 @@ function ProductGrid({ category, initialProducts, initialCursor, filters = [] })
       onClear: () => setActive([])
     }), visible.length === 0 ? jsx(EmptyState, {
       title: t("No products"),
-      body: "Nothing matches these filters.",
+      body: t("Nothing matches these filters."),
       action: active.length > 0 ? jsx(Button, {
         variant: "secondary",
         onClick: () => setActive([]),
-        children: "Clear filters"
+        children: t("Clear filters")
       }) : void 0
     }) : jsx("ul", {
       className: styles$q.grid,
@@ -9181,6 +9210,7 @@ const styles$p = {
   inset
 };
 function RailCarousel({ title: title2, products, seeAllTo, inset: inset2 }) {
+  const t = useT();
   if (products.length === 0) return null;
   return jsxs("section", {
     className: [styles$p.rail, inset2 ? styles$p.inset : ""].join(" "),
@@ -9193,7 +9223,7 @@ function RailCarousel({ title: title2, products, seeAllTo, inset: inset2 }) {
       }), seeAllTo && jsx(ShopLink, {
         className: styles$p.seeAll,
         to: seeAllTo,
-        children: "See all"
+        children: t("See all")
       })]
     }), jsx("ul", {
       className: styles$p.track,
@@ -9515,7 +9545,7 @@ function CartLineItem({ item: item2, title: title2, image: image2, compareAt: co
         }), soldOut ? jsx("span", {
           className: styles$m.oos,
           id: noticeId,
-          children: "Out of stock"
+          children: t("Out of stock")
         }) : pct !== void 0 && jsx("span", {
           className: styles$m.saleBadge,
           children: jsx(SaleBadge, {
@@ -9614,7 +9644,7 @@ function ShippingInfo() {
         })]
       }), jsx("p", {
         className: styles$l.label,
-        children: "Standard or express delivery"
+        children: t("Standard or express delivery")
       })]
     }), jsx("div", {
       className: styles$l.divider,
@@ -9643,7 +9673,7 @@ function ShippingInfo() {
         })]
       }), jsx("p", {
         className: styles$l.label,
-        children: "14 days returns"
+        children: t("14 days returns")
       })]
     })]
   });
@@ -9826,16 +9856,16 @@ function CartViewContent({ onContinueShopping, checkoutLabel } = {}) {
   if (state === "empty" || !cart2) {
     return jsx(EmptyState, {
       title: t("Nothing here yet"),
-      body: "Your items will show up here once you've added to your cart.",
+      body: t("Your items will show up here once you've added to your cart."),
       action: onContinueShopping ? jsx(Button, {
         variant: "primary",
         onClick: onContinueShopping,
-        children: "Continue shopping"
+        children: t("Continue shopping")
       }) : jsx(ShopLink, {
         to: "/",
         children: jsx(Button, {
           variant: "primary",
-          children: "Continue shopping"
+          children: t("Continue shopping")
         })
       })
     });
@@ -10254,14 +10284,14 @@ function SizeSelector({ sizes, selected: selected2, onSelect, error: error2 = fa
       children: [jsx("h2", {
         id: "size-heading",
         className: styles$g.title,
-        children: "Size"
+        children: t("Size")
       }), showGuide && jsxs("button", {
         type: "button",
         className: styles$g.sizeGuide,
         onClick: () => setGuideOpen(true),
         "aria-haspopup": "dialog",
         "aria-expanded": guideOpen,
-        children: ["Size guide", jsxs("svg", {
+        children: [t("Size guide"), jsxs("svg", {
           className: styles$g.info,
           width: "12",
           height: "12",
@@ -10312,7 +10342,7 @@ function SizeSelector({ sizes, selected: selected2, onSelect, error: error2 = fa
     }), error2 && jsx("p", {
       className: styles$g.error,
       role: "alert",
-      children: "Please select a size"
+      children: t("Please select a size")
     }), lowStock2 && !error2 && jsx("p", {
       className: styles$g.lowStock,
       role: "status",
@@ -10394,7 +10424,7 @@ function ColorSelector({ colours, selected: selected2, onSelect }) {
             }), soldOut && jsx("span", {
               className: styles$f.scrim,
               "aria-hidden": "true",
-              children: "Out of stock"
+              children: t("Out of stock")
             })]
           }), lowStock2 && jsx("span", {
             className: styles$f.stockBadge,
@@ -10422,7 +10452,7 @@ const styles$e = {
 };
 function VariantSelector({ variants, selectedSku, onSelect, labelAttribute }) {
   const t = useT();
-  function labelFor(variant) {
+  function labelFor2(variant) {
     if (labelAttribute && variant.attributes[labelAttribute]) {
       return variant.attributes[labelAttribute];
     }
@@ -10433,7 +10463,7 @@ function VariantSelector({ variants, selectedSku, onSelect, labelAttribute }) {
     className: styles$e.fieldset,
     children: [jsx("legend", {
       className: styles$e.legend,
-      children: "Select an option"
+      children: t("Select an option")
     }), jsx("div", {
       className: styles$e.options,
       role: "radiogroup",
@@ -10449,7 +10479,7 @@ function VariantSelector({ variants, selectedSku, onSelect, labelAttribute }) {
           disabled: disabled2,
           className: [styles$e.option, selected2 ? styles$e.selected : "", disabled2 ? styles$e.disabled : ""].filter(Boolean).join(" "),
           onClick: () => !disabled2 && onSelect(variant.sku),
-          children: [labelFor(variant), disabled2 && jsx("span", {
+          children: [labelFor2(variant), disabled2 && jsx("span", {
             className: "visually-hidden",
             children: " (out of stock)"
           })]
@@ -10500,6 +10530,7 @@ function ProductDetails({ description: description2 }) {
       observer?.disconnect();
     };
   }, [expanded, description2]);
+  const t = useT();
   if (paragraphs.length === 0) return null;
   return jsxs("section", {
     className: styles$d.root,
@@ -10509,7 +10540,7 @@ function ProductDetails({ description: description2 }) {
       children: [jsx("h2", {
         id: "details-heading",
         className: styles$d.title,
-        children: "Product details"
+        children: t("Product details")
       }), jsx("div", {
         ref: bodyRef,
         className: [styles$d.body, expanded ? "" : styles$d.clamped].join(" "),
@@ -10758,8 +10789,8 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
         type: "stock_alert_requested",
         sku: alertSku
       });
-      toast2.show("We'll let you know", {
-        description: `${product.title} — as soon as it is back`,
+      toast2.show(t("We'll let you know"), {
+        description: t("{0} — as soon as it is back", product.title),
         image: product.media[0]
       });
     } catch (err) {
@@ -10812,8 +10843,8 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
     const variant = variants.find((v) => v.sku === sku);
     const size = variant?.attributes.size ?? selectedSize;
     setAdded((current2) => current2.includes(sku) ? current2 : [...current2, sku]);
-    toast2.show("Added to cart", {
-      description: [product.title, size && `Size ${size}`].filter(Boolean).join(" · "),
+    toast2.show(t("Added to cart"), {
+      description: [product.title, size && t("Size {0}", size)].filter(Boolean).join(" · "),
       image: variant?.image ?? product.media[0],
       action: cartSheet || navigate ? {
         label: t("View cart"),
@@ -10940,6 +10971,7 @@ const styles$9 = {
 function PcpHero({ hero: hero2 }) {
   const heroRef = useRef(null);
   useTopOffset(heroRef, "--hero-top");
+  const t = useT();
   return jsxs("section", {
     ref: heroRef,
     className: [styles$9.hero, hero2.image ? "" : styles$9.noImage].join(" "),
@@ -10964,10 +10996,10 @@ function PcpHero({ hero: hero2 }) {
       className: styles$9.text,
       children: [jsx("h1", {
         className: styles$9.title,
-        children: hero2.title
+        children: t(hero2.title)
       }), hero2.subtitle && jsx("p", {
         className: styles$9.subtitle,
-        children: hero2.subtitle
+        children: t(hero2.subtitle)
       })]
     })]
   });
@@ -11147,6 +11179,7 @@ const styles$4 = {
   row: row$1
 };
 function ExploreList({ title: title2, links }) {
+  const t = useT();
   return jsxs("section", {
     className: styles$4.section,
     "aria-label": title2,
@@ -11160,7 +11193,7 @@ function ExploreList({ title: title2, links }) {
           to: `/category/${encodeURIComponent(l.code)}`,
           className: styles$4.row,
           children: [jsx("span", {
-            children: l.label
+            children: t(l.label)
           }), jsx("svg", {
             width: "16",
             height: "16",
@@ -11195,10 +11228,11 @@ const styles$3 = {
   grid
 };
 function Block({ block }) {
+  const t = useT();
   switch (block.kind) {
     case "rail":
       return jsx(RailCarousel, {
-        title: block.title,
+        title: t(block.title),
         products: block.products
       });
     case "lifestyle_text":
@@ -11211,7 +11245,7 @@ function Block({ block }) {
         className: styles$3.featured,
         children: [block.title && jsx("h2", {
           className: styles$3.blockTitle,
-          children: block.title
+          children: t(block.title)
         }), jsx(ProductTile, {
           product: block.product,
           priority: true,
@@ -11220,7 +11254,7 @@ function Block({ block }) {
       });
     case "product_gallery":
       return jsx(ProductGallery, {
-        title: block.title,
+        title: t(block.title),
         product: block.product
       });
     case "lifestyle_image":
@@ -11233,7 +11267,7 @@ function Block({ block }) {
         className: styles$3.gridBlock,
         children: [block.title && jsx("h2", {
           className: styles$3.blockTitle,
-          children: block.title
+          children: t(block.title)
         }), jsx("ul", {
           className: styles$3.grid,
           children: block.products.map((p) => jsx("li", {
@@ -11253,7 +11287,7 @@ function Block({ block }) {
       });
     case "explore":
       return jsx(ExploreList, {
-        title: block.title,
+        title: t(block.title),
         links: block.links
       });
     default:
@@ -11583,9 +11617,10 @@ const FALLBACK_PANELS = [{
   image: "/figma/home/tshirts-poster.jpg"
 }];
 function CategoryPanel({ panel: panel2 }) {
+  const t = useT();
   return jsxs("section", {
     className: styles$2.panel,
-    "aria-label": panel2.title,
+    "aria-label": t(panel2.title),
     ...panel2.focalY === void 0 ? {} : {
       style: {
         "--slide-focal-y": `${panel2.focalY}%`
@@ -11608,16 +11643,16 @@ function CategoryPanel({ panel: panel2 }) {
         className: styles$2.copy,
         children: [jsx("h2", {
           className: styles$2.title,
-          children: panel2.title
+          children: t(panel2.title)
         }), jsx("p", {
           className: styles$2.subtitle,
-          children: panel2.subtitle
+          children: t(panel2.subtitle)
         })]
       }), jsx(ShopLink, {
         to: panel2.to,
         className: styles$2.cta,
-        "aria-label": `${panel2.title} — ${panel2.cta}`,
-        children: panel2.cta
+        "aria-label": `${t(panel2.title)} — ${t(panel2.cta)}`,
+        children: t(panel2.cta)
       })]
     })]
   });
@@ -11713,16 +11748,16 @@ function HomeShowcase() {
               className: styles$2.logo
             }), jsx("h1", {
               className: styles$2.heroTitle,
-              children: "DAZN SHOP"
+              children: t("DAZN SHOP")
             }), jsx("p", {
               className: styles$2.heroSub,
-              children: "Fresh drops inspired by sport, culture, and everyday movement"
+              children: t("Fresh drops inspired by sport, culture, and everyday movement")
             })]
           }), jsxs("div", {
             className: styles$2.swipe,
             children: [jsx("p", {
               className: styles$2.swipeLabel,
-              children: "Swipe down for more"
+              children: t("Swipe down for more")
             }), jsx("svg", {
               className: styles$2.chevron,
               viewBox: "0 0 24 24",
@@ -11771,13 +11806,13 @@ function IdentityGate({ returnTo }) {
   const emit = useShopEvent();
   return jsx(EmptyState, {
     title: t("Finish signing up"),
-    body: "Complete your DAZN sign-up to check out. Your cart is saved.",
+    body: t("Complete your DAZN sign-up to check out. Your cart is saved."),
     action: jsx(Button, {
       onClick: () => emit({
         type: "session_required",
         action: `sign_in:${returnTo}`
       }),
-      children: "Finish signing up"
+      children: t("Finish signing up")
     })
   });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nok-integration/storefront-react",
-  "version": "0.20.12",
+  "version": "0.20.13",
   "description": "Mountable React storefront components: catalogue, product detail and cart, mounted directly into a host DOM tree. No iframe.",
   "license": "UNLICENSED",
   "type": "module",