@nok-integration/storefront-react 0.20.11 → 0.20.13

package/dist/index.mjs

@@ -5175,9 +5175,113 @@ function requireClient() {
   return client;
 }
 var clientExports = requireClient();
+const HOLD_MS = 2500;
+function withoutRestoration() {
+  const history = typeof window !== "undefined" ? window.history : void 0;
+  if (!history || !("scrollRestoration" in history)) return () => {
+  };
+  const previous = history.scrollRestoration;
+  history.scrollRestoration = "manual";
+  return () => {
+    history.scrollRestoration = previous;
+  };
+}
+function scrollToTop(box2) {
+  const target = box2 ?? document.documentElement;
+  const behaviour = target.style.scrollBehavior;
+  target.style.scrollBehavior = "auto";
+  if (box2) box2.scrollTop = 0;
+  else window.scrollTo(0, 0);
+  target.style.scrollBehavior = behaviour;
+}
+function scrollerOf(el) {
+  if (!el || typeof getComputedStyle !== "function") return null;
+  for (let node = el.parentElement; node; node = node.parentElement) {
+    if (node === document.documentElement) return null;
+    const { overflowY } = getComputedStyle(node);
+    if (overflowY !== "auto" && overflowY !== "scroll" && overflowY !== "overlay") continue;
+    if (node !== document.body) return node;
+    const root2 = getComputedStyle(document.documentElement).overflowY;
+    return root2 === "visible" || root2 === "" ? null : node;
+  }
+  return null;
+}
+const RELEASES = ["touchmove", "wheel", "keydown", "pointerdown"];
+function movesThePage(event) {
+  if (event.type === "pointerdown") return event.pointerType !== "touch";
+  return true;
+}
+const holds = /* @__PURE__ */ new Set();
+function releaseHolds() {
+  for (const end2 of Array.from(holds)) end2();
+}
+function anchorTop(onMoved = () => true, onEnd, box2 = null) {
+  let released = false;
+  const top2 = () => {
+    if (released) return;
+    const document_ = window.scrollY || document.documentElement.scrollTop || 0;
+    const pane = box2 ? box2.scrollTop : 0;
+    if (document_ <= 0 && pane <= 0) return;
+    if (!onMoved()) return;
+    if (document_ > 0) scrollToTop();
+    if (box2 && pane > 0) scrollToTop(box2);
+  };
+  const end2 = (how2) => {
+    if (released) return;
+    released = true;
+    holds.delete(moved);
+    if (frame2 !== null && typeof cancelAnimationFrame === "function") cancelAnimationFrame(frame2);
+    clearTimeout(timer2);
+    window.removeEventListener("scroll", top2);
+    box2?.removeEventListener("scroll", top2);
+    for (const type of RELEASES) window.removeEventListener(type, release);
+    onEnd?.(how2);
+  };
+  const release = (event) => {
+    if (movesThePage(event)) end2("moved");
+  };
+  const moved = () => end2("moved");
+  top2();
+  const frame2 = typeof requestAnimationFrame === "function" ? requestAnimationFrame(top2) : null;
+  const timer2 = setTimeout(() => end2("lapsed"), HOLD_MS);
+  window.addEventListener("scroll", top2, {
+    passive: true
+  });
+  box2?.addEventListener("scroll", top2, {
+    passive: true
+  });
+  for (const type of RELEASES) window.addEventListener(type, release, {
+    passive: true
+  });
+  holds.add(moved);
+  return () => end2("released");
+}
+function onReveal(el, revealed) {
+  if (typeof IntersectionObserver === "undefined") return () => {
+  };
+  let seen = false;
+  let visible = true;
+  const observer = new IntersectionObserver((entries) => {
+    const entry = entries[entries.length - 1];
+    if (!entry) return;
+    const now = entry.isIntersecting;
+    if (seen && now && !visible) revealed();
+    seen = true;
+    visible = now;
+  });
+  observer.observe(el);
+  return () => observer.disconnect();
+}
+function onResize(el, resized) {
+  if (typeof ResizeObserver === "undefined") return () => {
+  };
+  const observer = new ResizeObserver(() => resized());
+  observer.observe(el);
+  return () => observer.disconnect();
+}
 function anchorToTop() {
   if (typeof window === "undefined") return;
-  const top2 = () => window.scrollTo(0, 0);
+  const top2 = () => scrollToTop();
   top2();
   if (typeof window.requestAnimationFrame === "function") window.requestAnimationFrame(top2);
 }
@@ -5702,65 +5806,6 @@ function useTopOffset(ref, property, enabled = true) {
     };
   }, [ref, property, enabled]);
 }
-const HOLD_MS = 2500;
-function withoutRestoration() {
-  const history = typeof window !== "undefined" ? window.history : void 0;
-  if (!history || !("scrollRestoration" in history)) return () => {
-  };
-  const previous = history.scrollRestoration;
-  history.scrollRestoration = "manual";
-  return () => {
-    history.scrollRestoration = previous;
-  };
-}
-const RELEASES = ["touchmove", "wheel", "keydown", "pointerdown"];
-function movesThePage(event) {
-  if (event.type === "pointerdown") return event.pointerType !== "touch";
-  return true;
-}
-function anchorTop(onMoved = () => true) {
-  let released = false;
-  const top2 = () => {
-    if (released) return;
-    const scrolled2 = window.scrollY || document.documentElement.scrollTop || 0;
-    if (scrolled2 > 0 && onMoved()) window.scrollTo(0, 0);
-  };
-  const release = (event) => {
-    if (released) return;
-    if (event && !movesThePage(event)) return;
-    released = true;
-    if (frame2 !== null && typeof cancelAnimationFrame === "function") cancelAnimationFrame(frame2);
-    clearTimeout(timer2);
-    window.removeEventListener("scroll", top2);
-    for (const type of RELEASES) window.removeEventListener(type, release);
-  };
-  top2();
-  const frame2 = typeof requestAnimationFrame === "function" ? requestAnimationFrame(top2) : null;
-  const timer2 = setTimeout(release, HOLD_MS);
-  window.addEventListener("scroll", top2, {
-    passive: true
-  });
-  for (const type of RELEASES) window.addEventListener(type, release, {
-    passive: true
-  });
-  return () => release();
-}
-function onReveal(el, revealed) {
-  if (typeof IntersectionObserver === "undefined") return () => {
-  };
-  let seen = false;
-  let visible = true;
-  const observer = new IntersectionObserver((entries) => {
-    const entry = entries[entries.length - 1];
-    if (!entry) return;
-    const now = entry.isIntersecting;
-    if (seen && now && !visible) revealed();
-    seen = true;
-    visible = now;
-  });
-  observer.observe(el);
-  return () => observer.disconnect();
-}
 const useMountEffect$1 = typeof window === "undefined" ? useEffect : useLayoutEffect;
 function documentTop(el) {
   let top2 = 0;
@@ -5777,12 +5822,24 @@ function useScreenAnchor(ref, enabled = true) {
     const el = ref.current;
     if (!el || !enabled) return;
     const restore = withoutRestoration();
-    let release = anchorTop(() => beginsOnTheFirstViewport(el));
-    const unobserve = onReveal(el, () => {
+    let moved = false;
+    const hold = () => anchorTop(() => beginsOnTheFirstViewport(el), (end2) => {
+      if (end2 === "moved") moved = true;
+    }, scrollerOf(el));
+    let release = hold();
+    const again = () => {
       release();
-      release = anchorTop(() => beginsOnTheFirstViewport(el));
+      release = hold();
+    };
+    const unobserve = onReveal(el, () => {
+      moved = false;
+      again();
+    });
+    const settled = onResize(el, () => {
+      if (!moved) again();
     });
     return () => {
+      settled();
       unobserve();
       release();
       restore();
@@ -6053,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
@@ -6653,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,
@@ -6678,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,
@@ -7043,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
@@ -7063,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)
@@ -8015,9 +8100,10 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
     void load();
   }, [load]);
   const cancelled = order?.status === "cancelled";
+  const cancelledPage = useRef(null);
   useBrowserLayoutEffect(() => {
     if (!cancelled) return;
-    return anchorTop();
+    return anchorTop(void 0, void 0, scrollerOf(cancelledPage.current));
   }, [cancelled]);
   if (state === "loading") {
     return jsxs("div", {
@@ -8100,6 +8186,7 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
   if (order.status === "cancelled") {
     return jsxs("div", {
       className: styles$y.page,
+      ref: cancelledPage,
       children: [jsxs("div", {
         className: styles$y.cancelledHead,
         children: [jsx("h1", {
@@ -8561,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")
           })
         } : {}
       })
@@ -8832,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(" "),
@@ -8857,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,
@@ -8952,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", {
@@ -9018,7 +9106,7 @@ function FilterBar({ options: options2, active, onToggle, onClear }) {
       type: "button",
       className: styles$r.clear,
       onClick: onClear,
-      children: "Clear"
+      children: t("Clear")
     })]
   });
 }
@@ -9078,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,
@@ -9122,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(" "),
@@ -9134,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,
@@ -9456,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, {
@@ -9555,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,
@@ -9584,7 +9673,7 @@ function ShippingInfo() {
         })]
       }), jsx("p", {
         className: styles$l.label,
-        children: "14 days returns"
+        children: t("14 days returns")
       })]
     })]
   });
@@ -9767,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")
         })
       })
     });
@@ -10195,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",
@@ -10253,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",
@@ -10335,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,
@@ -10363,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];
     }
@@ -10374,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",
@@ -10390,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)"
           })]
@@ -10441,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,
@@ -10450,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(" "),
@@ -10699,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) {
@@ -10725,6 +10815,7 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
   function ensureSelection() {
     if (needsSize) {
       setSizeError(true);
+      releaseHolds();
       sizeRef.current?.scrollIntoView({
         behavior: "smooth",
         block: "center"
@@ -10732,6 +10823,7 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
       return false;
     }
     if (needsColour) {
+      releaseHolds();
       colourRef.current?.scrollIntoView({
         behavior: "smooth",
         block: "center"
@@ -10751,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"),
@@ -10879,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(" "),
@@ -10903,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)
       })]
     })]
   });
@@ -11086,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,
@@ -11099,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",
@@ -11134,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":
@@ -11150,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,
@@ -11159,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":
@@ -11172,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", {
@@ -11192,7 +11287,7 @@ function Block({ block }) {
       });
     case "explore":
       return jsx(ExploreList, {
-        title: block.title,
+        title: t(block.title),
         links: block.links
       });
     default:
@@ -11424,7 +11519,8 @@ function useDocumentSnap(ref, enabled = true) {
   useMountEffect(() => {
     const el = ref.current;
     if (!el || !enabled || typeof document === "undefined") return;
-    const root2 = document.documentElement;
+    const pane = scrollerOf(el);
+    const root2 = pane ?? document.documentElement;
     const previousType = root2.style.scrollSnapType;
     const previousPadding = root2.style.scrollPaddingTop;
     root2.style.scrollPaddingTop = "0px";
@@ -11446,7 +11542,10 @@ function useDocumentSnap(ref, enabled = true) {
         passive: true
       });
     };
-    const top2 = () => window.scrollTo(0, 0);
+    const top2 = () => {
+      scrollToTop();
+      if (pane) scrollToTop(pane);
+    };
     let frame2 = null;
     let release = () => {
     };
@@ -11467,7 +11566,7 @@ function useDocumentSnap(ref, enabled = true) {
           snapOnAtTouch();
         }
         return true;
-      });
+      }, void 0, pane);
     };
     anchor2();
     const history = window.history;
@@ -11518,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}%`
@@ -11543,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)
       })]
     })]
   });
@@ -11648,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",
@@ -11706,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")
     })
   });
 }