@nok-integration/storefront-react 0.20.8 → 0.20.10

package/dist/index.mjs

@@ -5580,13 +5580,13 @@ function ShopVideo({ src, poster, fill: fill2 = false, className, style, priorit
   });
 }
 const badge$5 = "_badge_1bagf_1";
-const neutral$1 = "_neutral_1bagf_12";
+const neutral$2 = "_neutral_1bagf_12";
 const success$1 = "_success_1bagf_17";
 const critical$2 = "_critical_1bagf_22";
 const promo = "_promo_1bagf_27";
 const styles$R = {
   badge: badge$5,
-  neutral: neutral$1,
+  neutral: neutral$2,
   success: success$1,
   critical: critical$2,
   promo
@@ -5713,16 +5713,21 @@ function withoutRestoration() {
     history.scrollRestoration = previous;
   };
 }
-const RELEASES = ["touchstart", "wheel", "keydown", "pointerdown"];
-function anchorTop(shouldHold = () => true) {
+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 && shouldHold()) window.scrollTo(0, 0);
+    if (scrolled2 > 0 && onMoved()) window.scrollTo(0, 0);
   };
-  const release = () => {
+  const release = (event) => {
     if (released) return;
+    if (event && !movesThePage(event)) return;
     released = true;
     if (frame2 !== null && typeof cancelAnimationFrame === "function") cancelAnimationFrame(frame2);
     clearTimeout(timer2);
@@ -5738,7 +5743,23 @@ function anchorTop(shouldHold = () => true) {
   for (const type of RELEASES) window.addEventListener(type, release, {
     passive: true
   });
-  return release;
+  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) {
@@ -5756,8 +5777,13 @@ function useScreenAnchor(ref, enabled = true) {
     const el = ref.current;
     if (!el || !enabled) return;
     const restore = withoutRestoration();
-    const release = anchorTop(() => beginsOnTheFirstViewport(el));
+    let release = anchorTop(() => beginsOnTheFirstViewport(el));
+    const unobserve = onReveal(el, () => {
+      release();
+      release = anchorTop(() => beginsOnTheFirstViewport(el));
+    });
     return () => {
+      unobserve();
       release();
       restore();
     };
@@ -5972,11 +5998,62 @@ const ES = {
   Refunded: "Reembolsado",
   "In progress": "En curso",
   Return: "Devolución",
-  Initiated: "Iniciada",
+  Reported: "Notificada",
   Received: "Recibida",
   Completed: "Completada",
   item: "artículo",
-  items: "artículos"
+  items: "artículos",
+  "(opens in a new tab)": "(se abre en nueva pestaña)",
+  "Arrived too late": "Llegó demasiado tarde",
+  "Cancel order": "Cancelar pedido",
+  "Changed my mind": "Cambié de opinión",
+  "Contact support": "Contactar atención al cliente",
+  "Delivery takes too long": "Demora en la entrega",
+  Discount: "Descuento",
+  Done: "Listo",
+  "Download return label": "Descargar etiqueta de devolución",
+  "Download your return label": "Descargar tu etiqueta de devolución",
+  "Drop it off at your local carrier or post office.": "Entréguelo en su transportista local o oficina de correos.",
+  "Every item on this order has already been returned or cancelled.": "Todos los artículos de este pedido ya han sido devueltos o cancelados.",
+  Fabric: "Tela",
+  "Follow the instructions below to complete your return": "Siga las instrucciones a continuación para completar su devolución",
+  "How to measure": "Cómo medir",
+  "Item doesn't match description": "El artículo no coincide con la descripción",
+  "Item is damaged": "El artículo está dañado",
+  "Measurement unit": "Unidad de medida",
+  "Need help?": "¿Necesita ayuda?",
+  "Nothing left to return": "No queda nada por devolver",
+  "Order #{0} · Placed {1}": "Pedido n.º {0} · Realizado el {1}",
+  "Order cancelled": "Pedido cancelado",
+  "Order confirmation": "Confirmación del pedido",
+  "Ordered by mistake": "Pedido por error",
+  "Pack and ship the item": "Empaque y envíe el artículo",
+  "Reason for cancelling": "Motivo de la cancelación",
+  "Reason for return": "Motivo de la devolución",
+  Reorder: "Volver a pedir",
+  "Repackage the item securely and attach the return label to the outside of the package.": "Vuelva a empaquetar el artículo de forma segura y pegue la etiqueta de devolución en el exterior del paquete.",
+  "Request not found": "Solicitud no encontrada",
+  "Return #{0} · Reported {1}": "Devolución n.º {0} · Notificada el {1}",
+  "Return in progress": "Devolución en curso",
+  "Return selected items": "Devolver artículos seleccionados",
+  "Select items you want to return": "Seleccione los artículos que desea devolver",
+  "Size guide unavailable": "Guía de tallas no disponible",
+  "Size: {0}": "Talla: {0}",
+  "Start a return": "Iniciar una devolución",
+  "Tap the button below to download your pre-paid return label": "Toque el botón de abajo para descargar su etiqueta de devolución prepagada",
+  "Too large": "Demasiado grande",
+  "Too small": "Demasiado pequeño",
+  Track: "Seguir envío",
+  "We could not find that support request.": "No pudimos encontrar esa solicitud de ayuda.",
+  "We could not load the size guide for this item.": "No pudimos cargar la guía de tallas de este artículo.",
+  "We’ve generated your return label": "Hemos generado su etiqueta de devolución",
+  "We’ve sent a confirmation to {0}": "Hemos enviado una confirmación a {0}",
+  "What do you want to return?": "¿Qué desea devolver?",
+  "Your order is confirmed": "Su pedido está confirmado",
+  "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"
 };
 const CATALOGUES = {
   es: ES
@@ -6251,7 +6328,7 @@ const toast = "_toast_oz4st_82";
 const text$4 = "_text_oz4st_111";
 const message$1 = "_message_oz4st_120";
 const action = "_action_oz4st_133";
-const neutral = "_neutral_oz4st_158";
+const neutral$1 = "_neutral_oz4st_158";
 const success = "_success_oz4st_163";
 const critical$1 = "_critical_oz4st_168";
 const rich = "_rich_oz4st_183";
@@ -6266,7 +6343,7 @@ const styles$K = {
   text: text$4,
   message: message$1,
   action,
-  neutral,
+  neutral: neutral$1,
   success,
   critical: critical$1,
   rich,
@@ -6482,6 +6559,7 @@ const styles$I = {
 };
 function PriceBlock({ price: price2, compareAt: compareAt2, discountPct: discountPct$1, size = "md", variant = "strikethrough", align = "baseline" }) {
   const { format } = useMoney();
+  const t = useT();
   const pct = discountPct$1 ?? discountPct(price2, compareAt2);
   const hasCompare = compareAt2 && compareAt2.amount > price2.amount;
   return jsxs("div", {
@@ -6493,7 +6571,7 @@ function PriceBlock({ price: price2, compareAt: compareAt2, discountPct: discoun
       className: styles$I.compareAt,
       children: [jsx("span", {
         className: "visually-hidden",
-        children: `Was ${format(compareAt2)}`
+        children: t("Was {0}", format(compareAt2))
       }), jsx("span", {
         "aria-hidden": "true",
         children: format(compareAt2)
@@ -6891,7 +6969,7 @@ function OrderLine({ item: item2 }) {
           className: styles$F.was,
           children: [jsx("span", {
             className: "visually-hidden",
-            children: `Was ${format(compareAt2)}`
+            children: t("Was {0}", format(compareAt2))
           }), jsx("span", {
             "aria-hidden": "true",
             children: format(compareAt2)
@@ -6955,7 +7033,7 @@ function OrderSummaryCard({ order }) {
     "aria-label": t("Order summary"),
     children: [jsx("h2", {
       className: styles$F.cardTitle,
-      children: "Order summary"
+      children: t("Order summary")
     }), jsx(OrderSummary, {
       pricing: toPricing(order),
       rows: rowsFor(order),
@@ -7106,6 +7184,7 @@ const styles$D = {
 function ReasonSheet({ title: title2, options: options2, ctaLabel, selected: selected2, onConfirm, onClose, closeLabel, busy = false, error: error2 }) {
   const sheetRef = useRef(null);
   const [choice, setChoice] = useState(selected2);
+  const t = useT();
   useModalDialog(true, onClose, sheetRef);
   return jsx("div", {
     className: styles$D.scrim,
@@ -7126,7 +7205,7 @@ function ReasonSheet({ title: title2, options: options2, ctaLabel, selected: sel
         children: [jsx("h2", {
           id: "reason-sheet-title",
           className: styles$D.title,
-          children: title2
+          children: t(title2)
         }), jsx("div", {
           className: styles$D.options,
           role: "radiogroup",
@@ -7160,7 +7239,7 @@ function ReasonSheet({ title: title2, options: options2, ctaLabel, selected: sel
               })
             }), jsx("span", {
               className: styles$D.label,
-              children: o.label
+              children: t(o.label)
             })]
           }, o.value))
         })]
@@ -7176,7 +7255,7 @@ function ReasonSheet({ title: title2, options: options2, ctaLabel, selected: sel
           disabled: !choice,
           loading: busy,
           onClick: () => choice && onConfirm(choice),
-          children: ctaLabel
+          children: t(ctaLabel)
         })]
       })]
     })
@@ -7206,6 +7285,7 @@ const styles$C = {
 };
 function ReturnItemRow({ item: item2, className }) {
   const { format } = useMoney();
+  const t = useT();
   return jsxs("div", {
     className: [styles$C.line, className ?? ""].join(" ").trim(),
     children: [jsx("div", {
@@ -7227,7 +7307,7 @@ function ReturnItemRow({ item: item2, className }) {
         children: item2.title ?? item2.sku
       }), item2.attributes?.size && jsx("p", {
         className: styles$C.attrs,
-        children: `Size: ${item2.attributes.size}`
+        children: t("Size: {0}", item2.attributes.size)
       })]
     }), jsxs("div", {
       className: styles$C.price,
@@ -7238,7 +7318,7 @@ function ReturnItemRow({ item: item2, className }) {
         className: styles$C.was,
         children: [jsx("span", {
           className: "visually-hidden",
-          children: `Was ${format(item2.compare_at_unit_price)}`
+          children: t("Was {0}", format(item2.compare_at_unit_price))
         }), jsx("span", {
           "aria-hidden": "true",
           children: format(item2.compare_at_unit_price)
@@ -7334,6 +7414,7 @@ function unitsLeft(item2) {
 function ReturnItemsView({ order, onSubmit, busy = false }) {
   const [chosen, setChosen] = useState({});
   const [reasonFor, setReasonFor] = useState(null);
+  const t = useT();
   const returnable = useMemo(() => order.items.filter((i) => unitsLeft(i) > 0), [order.items]);
   const selected2 = Object.entries(chosen).filter(([, reason2]) => reason2 !== void 0);
   const canSubmit = selected2.length > 0;
@@ -7372,10 +7453,10 @@ function ReturnItemsView({ order, onSubmit, busy = false }) {
         className: styles$B.titles,
         children: [jsx("h1", {
           className: styles$B.title,
-          children: "Nothing left to return"
+          children: t("Nothing left to return")
         }), jsx("p", {
           className: styles$B.subtitle,
-          children: "Every item on this order has already been returned or cancelled."
+          children: t("Every item on this order has already been returned or cancelled.")
         })]
       })
     });
@@ -7386,10 +7467,10 @@ function ReturnItemsView({ order, onSubmit, busy = false }) {
       className: styles$B.titles,
       children: [jsx("h1", {
         className: styles$B.title,
-        children: "What do you want to return?"
+        children: t("What do you want to return?")
       }), jsx("p", {
         className: styles$B.subtitle,
-        children: "Select items you want to return"
+        children: t("Select items you want to return")
       })]
     }), jsx("div", {
       className: styles$B.list,
@@ -7419,7 +7500,7 @@ function ReturnItemsView({ order, onSubmit, busy = false }) {
               onClick: () => setReasonFor(item2.line_ref),
               "aria-haspopup": "dialog",
               children: [jsx("span", {
-                children: reason2 ? REASON_LABEL.get(reason2) : "Select reason"
+                children: t(reason2 ? REASON_LABEL.get(reason2) ?? reason2 : "Select reason")
               }), jsx(Chevron$1, {})]
             })]
           })]
@@ -7431,7 +7512,7 @@ function ReturnItemsView({ order, onSubmit, busy = false }) {
       disabled: !canSubmit,
       loading: busy,
       onClick: submit,
-      children: "Return selected items"
+      children: t("Return selected items")
     }), reasonFor && jsx(ReasonSheet, {
       title: "Reason for return",
       options: RETURN_REASONS,
@@ -7486,6 +7567,7 @@ const styles$A = {
   note: note$1
 };
 function ReturnLabelView({ ret, onDone }) {
+  const t = useT();
   return jsxs("div", {
     className: styles$A.page,
     children: [jsxs("div", {
@@ -7499,10 +7581,10 @@ function ReturnLabelView({ ret, onDone }) {
         className: styles$A.intro,
         children: [jsx("h1", {
           className: styles$A.title,
-          children: "We’ve generated your return label"
+          children: t("We’ve generated your return label")
         }), jsx("p", {
           className: styles$A.subtitle,
-          children: "Follow the instructions below to complete your return"
+          children: t("Follow the instructions below to complete your return")
         })]
       }), jsxs("div", {
         className: styles$A.card,
@@ -7516,23 +7598,23 @@ function ReturnLabelView({ ret, onDone }) {
               children: "1"
             }), jsx("h2", {
               className: styles$A.stepTitle,
-              children: "Download your return label"
+              children: t("Download your return label")
             })]
           }), jsx("p", {
             className: styles$A.body,
-            children: "Tap the button below to download your pre-paid return label"
+            children: t("Tap the button below to download your pre-paid return label")
           }), ret.label_url && jsxs("a", {
             className: styles$A.download,
             href: ret.label_url,
             target: "_blank",
             rel: "noopener noreferrer",
-            children: ["Download return label", jsx("span", {
+            children: [t("Download return label"), jsx("span", {
               className: "visually-hidden",
-              children: " (opens in a new tab)"
+              children: ` ${t("(opens in a new tab)")}`
             })]
           }), ret.label_email && jsxs("p", {
             className: styles$A.note,
-            children: ["You’ll receive a shipping label PDF to your email as well.", jsx("br", {}), ret.label_email]
+            children: [t("You’ll receive a shipping label PDF to your email as well."), jsx("br", {}), ret.label_email]
           })]
         }), jsxs("section", {
           className: styles$A.step2,
@@ -7544,11 +7626,11 @@ function ReturnLabelView({ ret, onDone }) {
               children: "2"
             }), jsx("h2", {
               className: styles$A.stepTitle,
-              children: "Pack and ship the item"
+              children: t("Pack and ship the item")
             })]
           }), jsxs("p", {
             className: styles$A.body2,
-            children: ["Repackage the item securely and attach the return label to the outside of the package.", jsx("br", {}), "Drop it off at your local carrier or post office."]
+            children: [t("Repackage the item securely and attach the return label to the outside of the package."), jsx("br", {}), t("Drop it off at your local carrier or post office.")]
           })]
         })]
       })]
@@ -7556,7 +7638,7 @@ function ReturnLabelView({ ret, onDone }) {
       variant: "primary",
       fullWidth: true,
       onClick: onDone,
-      children: "Done"
+      children: t("Done")
     })]
   });
 }
@@ -7598,6 +7680,7 @@ function pctOff(item2) {
 function ReturnTrackingView({ ret, locale: localeProp }) {
   const locale = useLocale(localeProp);
   const { format } = useMoney();
+  const t = useT();
   const reported = new Date(ret.reported_at).toLocaleDateString(locale, {
     day: "numeric",
     month: "short",
@@ -7613,10 +7696,10 @@ function ReturnTrackingView({ ret, locale: localeProp }) {
         className: styles$z.titles,
         children: [jsx("h1", {
           className: styles$z.title,
-          children: "Return in progress"
+          children: t("Return in progress")
         }), jsx("p", {
           className: styles$z.subtitle,
-          children: `Return #${ret.return_ref} · Reported ${reported}`
+          children: t("Return #{0} · Reported {1}", ret.return_ref, reported)
         })]
       }), jsx(OrderTimeline, {
         progress: ret.progress,
@@ -7645,7 +7728,7 @@ function ReturnTrackingView({ ret, locale: localeProp }) {
             }), (item2.attributes?.size || pctOff(item2)) && jsxs("p", {
               className: styles$z.attrs,
               children: [item2.attributes?.size && jsx("span", {
-                children: `Size: ${item2.attributes.size}`
+                children: t("Size: {0}", item2.attributes.size)
               }), pctOff(item2) !== void 0 && jsx(SaleBadge, {
                 pct: pctOff(item2)
               })]
@@ -7971,17 +8054,17 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
         className: styles$y.cancelledHead,
         children: [jsx("h1", {
           className: styles$y.cancelledTitle,
-          children: "Order cancelled"
+          children: t("Order cancelled")
         }), jsx("p", {
           className: styles$y.cancelledMeta,
-          children: `Order #${shortRef$1(order.order_ref)} · Placed ${placedOn(order.placed_at, locale)}`
+          children: t("Order #{0} · Placed {1}", shortRef$1(order.order_ref), placedOn(order.placed_at, locale))
         })]
       }), jsx(Button, {
         variant: "primary",
         fullWidth: true,
         loading: reordering,
         onClick: () => void reorder(order),
-        children: "Reorder"
+        children: t("Reorder")
       }), jsx(OrderItemsCard, {
         order
       }), jsx(ShippingAddressCard, {
@@ -8000,15 +8083,15 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
         className: styles$y.titleRow,
         children: [jsx("h1", {
           className: styles$y.headline,
-          children: `Order #${shortRef$1(order.order_ref)}`
+          children: t("Order #{0}", shortRef$1(order.order_ref))
         }), order.tracking?.url && inTransit && jsxs("a", {
           className: styles$y.track,
           href: order.tracking.url,
           target: "_blank",
           rel: "noopener noreferrer",
-          children: ["Track", jsx("span", {
+          children: [t("Track"), jsx("span", {
             className: "visually-hidden",
-            children: ` ${order.tracking.carrier}, opens in a new tab`
+            children: ` ${t("{0}, opens in a new tab", order.tracking.carrier)}`
           }), jsx(RedirectLink, {})]
         })]
       }), jsx(OrderTimeline, {
@@ -8030,7 +8113,7 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
       type: "button",
       className: styles$y.cancel,
       onClick: () => setCancelOpen(true),
-      children: "Cancel order"
+      children: t("Cancel order")
     }), jsx(NeedHelp, {
       order,
       ...onStartReturn ? {
@@ -8077,6 +8160,7 @@ function placedOn(iso, locale) {
 }
 function NeedHelp({ order, onStartReturn, onOpenReturn, onContactSupport }) {
   const emit = useShopEvent();
+  const t = useT();
   if (order.status !== "delivered") return null;
   const returns = order.returns ?? [];
   return jsxs("section", {
@@ -8085,11 +8169,11 @@ function NeedHelp({ order, onStartReturn, onOpenReturn, onContactSupport }) {
     children: [jsx("h2", {
       className: styles$y.helpTitle,
       id: "order-help",
-      children: "Need help?"
+      children: t("Need help?")
     }), jsxs("div", {
       className: styles$y.helpRows,
       children: [returns.map((ret) => jsx(HelpRow, {
-        label: returns.length > 1 ? `Track return ${ret.return_ref}` : "Track your return",
+        label: returns.length > 1 ? t("Track return {0}", ret.return_ref) : "Track your return",
         status: RETURN_STATUS[ret.status] ?? ret.status.replace(/_/g, " "),
         onClick: () => onOpenReturn?.(ret.return_ref)
       }, ret.return_ref)), order.can_return && onStartReturn && jsx(HelpRow, {
@@ -8120,7 +8204,7 @@ function HelpRow({ label: label2, status, onClick }) {
     className: styles$y.helpRow,
     onClick,
     children: [jsx("span", {
-      children: label2
+      children: t(label2)
     }), jsxs("span", {
       className: styles$y.helpRowEnd,
       children: [status && jsx("span", {
@@ -8173,6 +8257,7 @@ function confirmationProgress(progress2) {
   });
 }
 function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
+  const t = useT();
   const { api } = useShop();
   const locale = useLocale(localeProp);
   const [order, setOrder] = useState(null);
@@ -8219,15 +8304,15 @@ function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
     className: styles$x.page,
     children: [jsxs("section", {
       className: styles$x.confirmed,
-      "aria-label": "Order confirmation",
+      "aria-label": t("Order confirmation"),
       children: [jsxs("div", {
         className: styles$x.title,
         children: [jsx("h1", {
           className: styles$x.headline,
-          children: "Your order is confirmed"
+          children: t("Your order is confirmed")
         }), order.email && jsx("p", {
           className: styles$x.subtitle,
-          children: `We’ve sent a confirmation to ${order.email}`
+          children: t("We’ve sent a confirmation to {0}", order.email)
         })]
       }), jsx(OrderTimeline, {
         progress: confirmationProgress(order.progress),
@@ -8249,18 +8334,20 @@ function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
       fullWidth: true,
       className: styles$x.done,
       onClick: onDone,
-      children: "Done"
+      children: t("Done")
     })]
   });
 }
-const badge$2 = "_badge_1w0zn_6";
-const progress = "_progress_1w0zn_22";
-const delivered = "_delivered_1w0zn_27";
-const critical = "_critical_1w0zn_36";
+const badge$2 = "_badge_u46qd_6";
+const progress = "_progress_u46qd_22";
+const delivered = "_delivered_u46qd_27";
+const neutral = "_neutral_u46qd_34";
+const critical = "_critical_u46qd_43";
 const styles$w = {
   badge: badge$2,
   progress,
   delivered,
+  neutral,
   critical
 };
 const LABEL = {
@@ -8280,26 +8367,26 @@ const TONE = {
 function OrderStatusBadge({ status }) {
   const t = useT();
   const label2 = LABEL[status] ?? status.replace(/_/g, " ");
-  const tone = TONE[status] ?? "progress";
+  const tone = TONE[status] ?? "neutral";
   return jsx("span", {
     className: [styles$w.badge, styles$w[tone]].join(" "),
     children: t(label2)
   });
 }
 const RETURN_LABEL = {
-  reported: "Initiated",
+  reported: "Reported",
   package_received: "Received",
   completed: "Completed"
 };
 const RETURN_TONE = {
-  reported: "progress",
-  package_received: "progress",
-  completed: "delivered"
+  reported: "neutral",
+  package_received: "neutral",
+  completed: "neutral"
 };
 function ReturnStatusBadge({ status }) {
   const t = useT();
   const label2 = RETURN_LABEL[status] ?? status.replace(/_/g, " ");
-  const tone = RETURN_TONE[status] ?? "progress";
+  const tone = RETURN_TONE[status] ?? "neutral";
   return jsx("span", {
     className: [styles$w.badge, styles$w[tone]].join(" "),
     children: t(label2)
@@ -8777,6 +8864,7 @@ const styles$s = {
 };
 function ProductGallery({ title: title2, product }) {
   const { format } = useMoney();
+  const t = useT();
   const pct = product.compare_at ? discountPct(product.price, product.compare_at) : void 0;
   const inStock = product.variants.some((v) => v.in_stock);
   const images = product.media.length > 0 ? product.media : [void 0];
@@ -8792,7 +8880,7 @@ function ProductGallery({ title: title2, product }) {
       className: styles$s.link,
       children: [jsx("ul", {
         className: styles$s.track,
-        "aria-label": `${product.title} photographs`,
+        "aria-label": t("{0} photographs", product.title),
         children: images.map((src, i) => jsxs("li", {
           className: styles$s.frame,
           children: [src ? jsx(ShopImage, {
@@ -8831,7 +8919,7 @@ function ProductGallery({ title: title2, product }) {
             className: styles$s.was,
             children: [jsx("span", {
               className: "visually-hidden",
-              children: `Was ${format(product.compare_at)}`
+              children: t("Was {0}", format(product.compare_at))
             }), jsx("span", {
               "aria-hidden": "true",
               children: format(product.compare_at)
@@ -9944,7 +10032,7 @@ function SizeGuideSheet({ guide, onClose }) {
         }), hasTable && authored && unit2 && jsx("div", {
           className: styles$h.units,
           role: "radiogroup",
-          "aria-label": "Measurement unit",
+          "aria-label": t("Measurement unit"),
           children: [authored, otherUnit(authored)].map((u) => jsx("button", {
             type: "button",
             role: "radio",
@@ -9988,7 +10076,7 @@ function SizeGuideSheet({ guide, onClose }) {
           children: [jsx("h3", {
             id: "size-guide-how",
             className: styles$h.howTitle,
-            children: "How to measure"
+            children: t("How to measure")
           }), jsx("dl", {
             className: styles$h.howList,
             children: measurements.map((m) => jsxs("div", {
@@ -10006,7 +10094,7 @@ function SizeGuideSheet({ guide, onClose }) {
           className: styles$h.fabric,
           children: [jsx("p", {
             className: styles$h.fabricLabel,
-            children: "Fabric"
+            children: t("Fabric")
           }), jsx("p", {
             className: styles$h.fabricText,
             children: guide.fabric
@@ -11289,24 +11377,64 @@ function useDocumentSnap(ref, enabled = true) {
     const root2 = document.documentElement;
     const previousType = root2.style.scrollSnapType;
     const previousPadding = root2.style.scrollPaddingTop;
-    root2.style.scrollSnapType = "y mandatory";
     root2.style.scrollPaddingTop = "0px";
+    let snapping = false;
+    let awaitingTouch = false;
+    const snapOn = () => {
+      root2.style.scrollSnapType = "y mandatory";
+      snapping = true;
+    };
+    const snapOff = () => {
+      root2.style.scrollSnapType = "none";
+      snapping = false;
+    };
+    const snapOnAtTouch = () => {
+      if (awaitingTouch) return;
+      awaitingTouch = true;
+      window.addEventListener("touchstart", snapOn, {
+        once: true,
+        passive: true
+      });
+    };
     const top2 = () => window.scrollTo(0, 0);
-    top2();
-    const frame2 = typeof window.requestAnimationFrame === "function" ? window.requestAnimationFrame(top2) : null;
-    const release = anchorTop();
+    let frame2 = null;
+    let release = () => {
+    };
+    const anchor2 = () => {
+      release();
+      if (frame2 !== null && typeof window.cancelAnimationFrame === "function") {
+        window.cancelAnimationFrame(frame2);
+      }
+      snapOff();
+      top2();
+      frame2 = typeof window.requestAnimationFrame === "function" ? window.requestAnimationFrame(() => {
+        top2();
+        snapOn();
+      }) : null;
+      release = anchorTop(() => {
+        if (snapping) {
+          snapOff();
+          snapOnAtTouch();
+        }
+        return true;
+      });
+    };
+    anchor2();
     const history = window.history;
     const previousRestoration = history && "scrollRestoration" in history ? history.scrollRestoration : null;
     if (previousRestoration !== null) history.scrollRestoration = "manual";
     const onPageShow = (event) => {
-      if (event.persisted) top2();
+      if (event.persisted) anchor2();
     };
     window.addEventListener("pageshow", onPageShow);
+    const unobserve = onReveal(el, anchor2);
     return () => {
+      unobserve();
       release();
       if (frame2 !== null && typeof window.cancelAnimationFrame === "function") {
         window.cancelAnimationFrame(frame2);
       }
+      window.removeEventListener("touchstart", snapOn);
       window.removeEventListener("pageshow", onPageShow);
       if (previousRestoration !== null) history.scrollRestoration = previousRestoration;
       root2.style.scrollSnapType = previousType;