@nok-integration/storefront-react 0.19.10 → 0.19.15

package/dist/standalone/storefront.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useContext, useEffect, useState, useRef, useCallback, useMemo, createContext, forwardRef } from "react";
+import { useContext, useEffect, useState, useRef, useCallback, useMemo, createContext, forwardRef, Fragment as Fragment$1 } from "react";
 var client = {};
 var catalog = {};
 var zod = {};
@@ -4392,6 +4392,7 @@ function requireContent() {
       cta: zod_1.z.string().min(1),
       target: zod_1.z.string().min(1).optional(),
       image: zod_1.z.string().min(1).optional(),
+      video: zod_1.z.string().min(1).optional(),
       focal_y: zod_1.z.number().int().min(0).max(100).optional()
     });
     exports.HomeContent = zod_1.z.object({
@@ -4673,7 +4674,8 @@ function requireOrderTracking() {
       image: common_1.Url.optional(),
       attributes: common_1.Attributes.optional(),
       cancelled_qty: zod_1.z.number().int().nonnegative(),
-      refunded_qty: zod_1.z.number().int().nonnegative()
+      refunded_qty: zod_1.z.number().int().nonnegative(),
+      returned_qty: zod_1.z.number().int().nonnegative().optional()
     });
     exports.OrderSummaryItem = zod_1.z.object({
       order_ref: ids_1.OrderRef,
@@ -5338,6 +5340,64 @@ function ShopImage({ src, alt, fill: fill2 = false, width, height, sizes, classN
     fetchPriority: priority ? "high" : void 0
   });
 }
+function ShopVideo({ src, poster, fill: fill2 = false, className, style, priority = false }) {
+  const assetUrl = useAssetUrl();
+  const ref = useRef(null);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || typeof IntersectionObserver === "undefined") return;
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)");
+    const play = () => {
+      if (reduced?.matches) {
+        el.pause();
+        return;
+      }
+      void el.play().catch(() => {
+      });
+    };
+    const observer = new IntersectionObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          if (el.preload === "none") el.preload = "auto";
+          play();
+        } else {
+          el.pause();
+        }
+      }
+    }, {
+      threshold: 0.25
+    });
+    observer.observe(el);
+    reduced?.addEventListener("change", play);
+    return () => {
+      observer.disconnect();
+      reduced?.removeEventListener("change", play);
+    };
+  }, []);
+  const fillStyle = fill2 ? {
+    position: "absolute",
+    inset: 0,
+    width: "100%",
+    height: "100%"
+  } : {};
+  return jsx("video", {
+    ref,
+    src: assetUrl(src),
+    poster: poster ? assetUrl(poster) : void 0,
+    className,
+    style: {
+      ...fillStyle,
+      ...style
+    },
+    autoPlay: true,
+    loop: true,
+    muted: true,
+    playsInline: true,
+    preload: priority ? "auto" : "none",
+    "aria-hidden": true,
+    tabIndex: -1
+  });
+}
 const badge$5 = "_badge_1bagf_1";
 const neutral$1 = "_neutral_1bagf_12";
 const success$1 = "_success_1bagf_17";
@@ -5555,7 +5615,6 @@ const ES = {
   "Close size guide": "Cerrar la guía de tallas",
   Color: "Color",
   "Color:": "Color:",
-  "Complete the look with everyday essentials and finishing details": "Completa tu look con básicos para el día a día y detalles que marcan la diferencia",
   "Continue shopping": "Seguir comprando",
   DAZN: "DAZN",
   "DAZN Shop": "Tienda DAZN",
@@ -5587,6 +5646,7 @@ const ES = {
   "One moment": "Un momento",
   "One or more items just sold out. Adjust your cart to continue.": "Uno o más artículos se han agotado. Ajusta tu carrito para continuar.",
   "Only {0} left": "Solo quedan {0}",
+  "Only {0} left in {1} size": "Solo quedan {0} en talla {1}",
   "Order #{0}": "Pedido n.º {0}",
   "Order already placed": "Pedido ya realizado",
   "Order not found": "Pedido no encontrado",
@@ -5617,7 +5677,6 @@ const ES = {
   "Shipping address": "Dirección de envío",
   "Shipping and returns": "Envíos y devoluciones",
   "Shop menu": "Menú de la tienda",
-  "Shop now": "Comprar ahora",
   Size: "Talla",
   "Size guide": "Guía de tallas",
   "Something looks off": "Algo no va bien",
@@ -5625,6 +5684,7 @@ const ES = {
   "Standard or express delivery": "Envío estándar o urgente",
   Subtotal: "Subtotal",
   "Swipe down for more": "Desliza hacia abajo para ver más",
+  "The DAZN Shop collection": "La colección de DAZN Shop",
   "T-Shirts": "Camisetas",
   Tax: "Impuestos",
   "That is not possible right now": "Eso no es posible en este momento",
@@ -6835,426 +6895,130 @@ function ReasonSheet({ title: title2, options: options2, ctaLabel, selected: sel
     })
   });
 }
-const page$6 = "_page_1v9my_8";
-const widget = "_widget_1v9my_18";
-const titleRow = "_titleRow_1v9my_26";
-const headline$1 = "_headline_1v9my_42";
-const track$5 = "_track_1v9my_74";
-const rule$1 = "_rule_1v9my_99";
-const help = "_help_1v9my_109";
-const helpTitle = "_helpTitle_1v9my_115";
-const helpRows = "_helpRows_1v9my_122";
-const helpRow = "_helpRow_1v9my_122";
-const cancel = "_cancel_1v9my_180";
-const cancelledHead = "_cancelledHead_1v9my_204";
-const cancelledTitle = "_cancelledTitle_1v9my_210";
-const cancelledMeta = "_cancelledMeta_1v9my_219";
+const page$6 = "_page_1c7ro_7";
+const titles$2 = "_titles_1c7ro_15";
+const title$k = "_title_1c7ro_15";
+const subtitle$7 = "_subtitle_1c7ro_30";
+const list$2 = "_list_1c7ro_38";
+const card$3 = "_card_1c7ro_48";
+const checkSlot = "_checkSlot_1c7ro_61";
+const check = "_check_1c7ro_61";
+const row$6 = "_row_1c7ro_105";
+const line$1 = "_line_1c7ro_113";
+const thumb$1 = "_thumb_1c7ro_119";
+const img$1 = "_img_1c7ro_129";
+const placeholder$7 = "_placeholder_1c7ro_133";
+const meta$2 = "_meta_1c7ro_138";
+const name$2 = "_name_1c7ro_147";
+const attrs$1 = "_attrs_1c7ro_159";
+const price$3 = "_price_1c7ro_167";
+const paid$2 = "_paid_1c7ro_176";
+const was$3 = "_was_1c7ro_184";
+const reason = "_reason_1c7ro_199";
+const reasonSet = "_reasonSet_1c7ro_217";
 const styles$A = {
   page: page$6,
-  widget,
-  titleRow,
-  headline: headline$1,
-  track: track$5,
-  rule: rule$1,
-  help,
-  helpTitle,
-  helpRows,
-  helpRow,
-  cancel,
-  cancelledHead,
-  cancelledTitle,
-  cancelledMeta
+  titles: titles$2,
+  title: title$k,
+  subtitle: subtitle$7,
+  list: list$2,
+  card: card$3,
+  checkSlot,
+  check,
+  row: row$6,
+  line: line$1,
+  thumb: thumb$1,
+  img: img$1,
+  placeholder: placeholder$7,
+  meta: meta$2,
+  name: name$2,
+  attrs: attrs$1,
+  price: price$3,
+  paid: paid$2,
+  was: was$3,
+  reason,
+  reasonSet
 };
-function RedirectLink() {
-  return jsxs("svg", {
-    width: "14",
-    height: "14",
-    viewBox: "0 0 14 14",
-    fill: "none",
-    "aria-hidden": "true",
-    children: [jsx("path", {
-      d: "M3.37413 1.63539C2.84882 1.63539 2.39164 1.90422 2.08646 2.29534C1.78479 2.68228 1.63445 3.17776 1.63445 3.66795V3.67088L1.66569 10.3328C1.66636 10.8221 1.81652 11.3164 2.1177 11.7025C2.42287 12.0935 2.8802 12.3615 3.40537 12.3615L3.4044 12.3625L10.6248 12.3654C11.1499 12.3653 11.6063 12.0965 11.9115 11.7054C12.2134 11.3185 12.3644 10.8232 12.3645 10.3328V8.33347C12.3645 7.94707 12.0508 7.63363 11.6645 7.63349C11.278 7.63349 10.9645 7.94699 10.9645 8.33347V10.3328C10.9644 10.5489 10.8962 10.7317 10.8083 10.8444C10.7238 10.9526 10.6512 10.9654 10.6248 10.9654L3.40537 10.9625C3.37921 10.9625 3.30653 10.9498 3.22184 10.8415C3.13389 10.7287 3.06474 10.5461 3.06466 10.3299V10.327L3.03342 3.66405C3.03416 3.44927 3.10311 3.26759 3.1906 3.15542C3.27527 3.04709 3.34796 3.03436 3.37413 3.03436H5.44477C5.83092 3.03423 6.14439 2.72147 6.14474 2.33537C6.14474 1.94897 5.83113 1.63553 5.44477 1.63539H3.37413Z",
-      fill: "currentColor"
-    }), jsx("path", {
-      d: "M8.683 1.63442C8.29663 1.63442 7.9832 1.94806 7.98303 2.33439C7.98303 2.72087 8.29652 3.03436 8.683 3.03436H9.97458L6.504 6.50495C6.23093 6.77819 6.23093 7.22163 6.504 7.49487C6.77724 7.76794 7.22068 7.76794 7.49392 7.49487L10.9645 4.02331V5.31587C10.9645 5.70233 11.278 6.01582 11.6645 6.01584C12.0508 6.01571 12.3645 5.70226 12.3645 5.31587V2.33439C12.3643 2.04478 12.1878 1.79638 11.9369 1.69006L11.9271 1.68616C11.9116 1.67987 11.8951 1.67664 11.8793 1.67152C11.8526 1.66289 11.8261 1.6535 11.7982 1.64809C11.7924 1.64696 11.7865 1.64711 11.7807 1.64613C11.7428 1.63977 11.7042 1.63443 11.6645 1.63442H8.683Z",
-      fill: "currentColor"
-    })]
-  });
-}
-function ChevronRight$1() {
+function Chevron$1() {
   return jsx("svg", {
     width: "16",
     height: "16",
     viewBox: "0 0 16 16",
     fill: "none",
     "aria-hidden": "true",
-    children: jsx("g", {
-      transform: "translate(4.28 1.96)",
-      children: jsx("path", {
-        d: "M7.42763 6.03763C7.42763 5.83763 7.33763 5.64763 7.18763 5.51763L1.15763 0.177629C0.867628 -0.0823714 0.427629 -0.0523713 0.177629 0.237629C-0.0823713 0.527629 -0.0523714 0.967629 0.237629 1.22763L5.67763 6.04763L0.237629 10.8576C-0.0523709 11.1176 -0.0823709 11.5576 0.177629 11.8476C0.437629 12.1376 0.877629 12.1676 1.16763 11.9076L7.19763 6.56763C7.34763 6.43763 7.43763 6.24763 7.43763 6.04763L7.42763 6.03763Z",
-        fill: "currentColor"
-      })
+    children: jsx("path", {
+      d: "m6.3 4.1 3.4 3.9-3.4 3.9",
+      stroke: "currentColor",
+      strokeWidth: "1.6",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
     })
   });
 }
-function OrderTrackingView(props) {
-  return jsx(ShopSurface, {
-    tone: "light",
-    fill: true,
-    children: jsx(OrderTrackingContent, {
-      ...props
-    })
+function Tick() {
+  return jsxs("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    "aria-hidden": "true",
+    children: [jsx("circle", {
+      cx: "10",
+      cy: "10",
+      r: "10",
+      fill: "currentColor"
+    }), jsx("path", {
+      d: "m5.8 10.3 2.7 2.7 5.7-5.7",
+      stroke: "var(--color-text-strong)",
+      strokeWidth: "1.8",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
   });
 }
-function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onContactSupport, onCancelled, onReorder }) {
-  const t = useT();
-  const { api } = useShop();
-  const locale = useLocale(localeProp);
-  const [order, setOrder] = useState(null);
-  const [state, setState] = useState("loading");
-  const [errorCode, setErrorCode] = useState(void 0);
-  const [cancelOpen, setCancelOpen] = useState(false);
-  const [cancelling, setCancelling] = useState(false);
-  const [cancelError, setCancelError] = useState(null);
-  const emit = useShopEvent();
-  const load = useCallback(async () => {
-    setState("loading");
-    try {
-      setOrder(await api.orders.get(orderRef));
-      setState("ready");
-    } catch (err) {
-      setErrorCode(codeOf(err));
-      setState("error");
-    }
-  }, [api, orderRef]);
-  useEffect(() => {
-    void load();
-  }, [load]);
-  if (state === "loading") {
-    return jsxs("div", {
-      className: styles$A.page,
-      children: [jsx(Skeleton, {
-        height: 206,
-        radius: 8
-      }), jsx(Skeleton, {
-        height: 48,
-        radius: 8
-      }), jsx(Skeleton, {
-        height: 113,
-        radius: 18
-      }), jsx(Skeleton, {
-        height: 240,
-        radius: 18
-      })]
-    });
-  }
-  if (state === "error" || !order) {
-    return jsx(ErrorState, {
-      code: errorCode,
-      onRetry: () => void load()
-    });
+const RETURN_REASONS = [{
+  value: "too_large",
+  label: "Too large"
+}, {
+  value: "too_small",
+  label: "Too small"
+}, {
+  value: "arrived_too_late",
+  label: "Arrived too late"
+}, {
+  value: "item_damaged",
+  label: "Item is damaged"
+}, {
+  value: "not_as_described",
+  label: "Item doesn't match description"
+}, {
+  value: "changed_my_mind",
+  label: "Changed my mind"
+}];
+const REASON_LABEL = new Map(RETURN_REASONS.map((r) => [r.value, r.label]));
+function unitsLeft(item2) {
+  return item2.qty - item2.cancelled_qty - item2.refunded_qty - (item2.returned_qty ?? 0);
+}
+function ReturnItemsView({ order, onSubmit, busy = false }) {
+  const { format } = useMoney();
+  const [chosen, setChosen] = useState({});
+  const [reasonFor, setReasonFor] = useState(null);
+  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;
+  function remaining(item2) {
+    return unitsLeft(item2);
   }
-  async function confirmCancellation(reason2) {
-    setCancelling(true);
-    setCancelError(null);
-    try {
-      const updated = await api.orders.requestCancellation(orderRef, {
-        reason: reason2
-      });
-      setOrder(updated);
-      setCancelOpen(false);
-      emit({
-        type: "order_cancellation_requested",
-        orderRef,
-        reason: reason2
+  function toggle2(lineRef) {
+    if (lineRef in chosen) {
+      setChosen((prev) => {
+        const next = {
+          ...prev
+        };
+        delete next[lineRef];
+        return next;
       });
-      onCancelled?.(updated);
-    } catch (err) {
-      setCancelError(t(treatmentFor(codeOf(err)).body));
-    } finally {
-      setCancelling(false);
-    }
-  }
-  if (order.status === "cancelled") {
-    return jsxs("div", {
-      className: styles$A.page,
-      children: [jsxs("div", {
-        className: styles$A.cancelledHead,
-        children: [jsx("h1", {
-          className: styles$A.cancelledTitle,
-          children: "Order cancelled"
-        }), jsx("p", {
-          className: styles$A.cancelledMeta,
-          children: `Order #${shortRef$1(order.order_ref)} · Placed ${placedOn(order.placed_at, locale)}`
-        })]
-      }), onReorder && jsx(Button, {
-        variant: "primary",
-        fullWidth: true,
-        onClick: () => {
-          emit({
-            type: "reorder_requested",
-            orderRef: order.order_ref
-          });
-          onReorder();
-        },
-        children: "Reorder"
-      }), jsx(OrderLines, {
-        order
-      }), jsx(ShippingAddressCard, {
-        order
-      }), jsx(OrderSummaryCard, {
-        order
-      })]
-    });
-  }
-  return jsxs("div", {
-    className: styles$A.page,
-    children: [jsxs("section", {
-      className: styles$A.widget,
-      "aria-label": t("Delivery status"),
-      children: [jsxs("div", {
-        className: styles$A.titleRow,
-        children: [jsx("h1", {
-          className: styles$A.headline,
-          children: `Order #${shortRef$1(order.order_ref)}`
-        }), order.tracking?.url && jsxs("a", {
-          className: styles$A.track,
-          href: order.tracking.url,
-          target: "_blank",
-          rel: "noopener noreferrer",
-          children: ["Track", jsx("span", {
-            className: "visually-hidden",
-            children: ` ${order.tracking.carrier}, opens in a new tab`
-          }), jsx(RedirectLink, {})]
-        })]
-      }), jsx(OrderTimeline, {
-        progress: order.progress,
-        ...order.estimated_delivery ? {
-          estimatedDelivery: order.estimated_delivery
-        } : {},
-        locale
-      }), order.can_return && onStartReturn && jsx(Button, {
-        variant: "secondary",
-        fullWidth: true,
-        onClick: onStartReturn,
-        children: "Return items"
-      })]
-    }), jsx("hr", {
-      className: styles$A.rule
-    }), jsx(OrderLines, {
-      order
-    }), jsx(ShippingAddressCard, {
-      order
-    }), jsx(OrderSummaryCard, {
-      order
-    }), order.can_cancel && jsx("button", {
-      type: "button",
-      className: styles$A.cancel,
-      onClick: () => setCancelOpen(true),
-      children: "Cancel order"
-    }), jsx(NeedHelp, {
-      order,
-      ...onStartReturn ? {
-        onStartReturn
-      } : {},
-      ...onContactSupport ? {
-        onContactSupport
-      } : {}
-    }), cancelOpen && jsx(ReasonSheet, {
-      title: "Reason for cancelling",
-      options: CANCEL_REASONS,
-      ctaLabel: "Cancel order",
-      closeLabel: "Close reasons",
-      busy: cancelling,
-      onClose: () => setCancelOpen(false),
-      onConfirm: (reason2) => void confirmCancellation(reason2),
-      ...cancelError ? {
-        error: cancelError
-      } : {}
-    })]
-  });
-}
-const CANCEL_REASONS = [{
-  value: "changed_my_mind",
-  label: "Changed my mind"
-}, {
-  value: "ordered_by_mistake",
-  label: "Ordered by mistake"
-}, {
-  value: "delivery_too_long",
-  label: "Delivery takes too long"
-}];
-function placedOn(iso, locale) {
-  const d = new Date(iso);
-  const day = d.getUTCDate();
-  const month = new Intl.DateTimeFormat(locale, {
-    month: "short",
-    timeZone: "UTC"
-  }).format(d);
-  return `${day} ${month}, ${d.getUTCFullYear()}`;
-}
-function NeedHelp({ order, onStartReturn, onContactSupport }) {
-  const emit = useShopEvent();
-  if (order.status !== "delivered") return null;
-  return jsxs("section", {
-    className: styles$A.help,
-    "aria-labelledby": "order-help",
-    children: [jsx("h2", {
-      className: styles$A.helpTitle,
-      id: "order-help",
-      children: "Need help?"
-    }), jsxs("div", {
-      className: styles$A.helpRows,
-      children: [onStartReturn && jsx(HelpRow, {
-        label: "Start a return",
-        onClick: onStartReturn
-      }), jsx(HelpRow, {
-        label: "Contact support",
-        onClick: () => {
-          emit({
-            type: "support_requested",
-            orderRef: order.order_ref
-          });
-          onContactSupport?.();
-        }
-      })]
-    })]
-  });
-}
-function HelpRow({ label: label2, onClick }) {
-  return jsxs("button", {
-    type: "button",
-    className: styles$A.helpRow,
-    onClick,
-    children: [jsx("span", {
-      children: label2
-    }), jsx(ChevronRight$1, {})]
-  });
-}
-function shortRef$1(orderRef) {
-  return orderRef.replace(/^ord_/, "");
-}
-const page$5 = "_page_1c7ro_7";
-const titles$2 = "_titles_1c7ro_15";
-const title$k = "_title_1c7ro_15";
-const subtitle$7 = "_subtitle_1c7ro_30";
-const list$2 = "_list_1c7ro_38";
-const card$3 = "_card_1c7ro_48";
-const checkSlot = "_checkSlot_1c7ro_61";
-const check = "_check_1c7ro_61";
-const row$6 = "_row_1c7ro_105";
-const line$1 = "_line_1c7ro_113";
-const thumb$1 = "_thumb_1c7ro_119";
-const img$1 = "_img_1c7ro_129";
-const placeholder$7 = "_placeholder_1c7ro_133";
-const meta$2 = "_meta_1c7ro_138";
-const name$2 = "_name_1c7ro_147";
-const attrs$1 = "_attrs_1c7ro_159";
-const price$3 = "_price_1c7ro_167";
-const paid$2 = "_paid_1c7ro_176";
-const was$3 = "_was_1c7ro_184";
-const reason = "_reason_1c7ro_199";
-const reasonSet = "_reasonSet_1c7ro_217";
-const styles$z = {
-  page: page$5,
-  titles: titles$2,
-  title: title$k,
-  subtitle: subtitle$7,
-  list: list$2,
-  card: card$3,
-  checkSlot,
-  check,
-  row: row$6,
-  line: line$1,
-  thumb: thumb$1,
-  img: img$1,
-  placeholder: placeholder$7,
-  meta: meta$2,
-  name: name$2,
-  attrs: attrs$1,
-  price: price$3,
-  paid: paid$2,
-  was: was$3,
-  reason,
-  reasonSet
-};
-function Chevron$1() {
-  return jsx("svg", {
-    width: "16",
-    height: "16",
-    viewBox: "0 0 16 16",
-    fill: "none",
-    "aria-hidden": "true",
-    children: jsx("path", {
-      d: "m6.3 4.1 3.4 3.9-3.4 3.9",
-      stroke: "currentColor",
-      strokeWidth: "1.6",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })
-  });
-}
-function Tick() {
-  return jsxs("svg", {
-    width: "20",
-    height: "20",
-    viewBox: "0 0 20 20",
-    fill: "none",
-    "aria-hidden": "true",
-    children: [jsx("circle", {
-      cx: "10",
-      cy: "10",
-      r: "10",
-      fill: "currentColor"
-    }), jsx("path", {
-      d: "m5.8 10.3 2.7 2.7 5.7-5.7",
-      stroke: "var(--color-text-strong)",
-      strokeWidth: "1.8",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })]
-  });
-}
-const RETURN_REASONS = [{
-  value: "too_large",
-  label: "Too large"
-}, {
-  value: "too_small",
-  label: "Too small"
-}, {
-  value: "arrived_too_late",
-  label: "Arrived too late"
-}, {
-  value: "item_damaged",
-  label: "Item is damaged"
-}, {
-  value: "not_as_described",
-  label: "Item doesn't match description"
-}, {
-  value: "changed_my_mind",
-  label: "Changed my mind"
-}];
-const REASON_LABEL = new Map(RETURN_REASONS.map((r) => [r.value, r.label]));
-function ReturnItemsView({ order, onSubmit, busy = false }) {
-  const { format } = useMoney();
-  const [chosen, setChosen] = useState({});
-  const [reasonFor, setReasonFor] = useState(null);
-  const returnable = useMemo(() => order.items.filter((i) => i.qty - i.cancelled_qty - i.refunded_qty > 0), [order.items]);
-  const selected2 = Object.entries(chosen).filter(([, reason2]) => reason2 !== void 0);
-  const canSubmit = selected2.length > 0;
-  function remaining(item2) {
-    return item2.qty - item2.cancelled_qty - item2.refunded_qty;
-  }
-  function toggle2(lineRef) {
-    if (lineRef in chosen) {
-      setChosen((prev) => {
-        const next = {
-          ...prev
-        };
-        delete next[lineRef];
-        return next;
-      });
-      return;
+      return;
     }
     setChosen((prev) => ({
       ...prev,
@@ -7271,72 +7035,72 @@ function ReturnItemsView({ order, onSubmit, busy = false }) {
     if (items2.length > 0) onSubmit(items2);
   }
   return jsxs("div", {
-    className: styles$z.page,
+    className: styles$A.page,
     children: [jsxs("div", {
-      className: styles$z.titles,
+      className: styles$A.titles,
       children: [jsx("h1", {
-        className: styles$z.title,
+        className: styles$A.title,
         children: "What do you want to return?"
       }), jsx("p", {
-        className: styles$z.subtitle,
+        className: styles$A.subtitle,
         children: "Select items you want to return"
       })]
     }), jsx("div", {
-      className: styles$z.list,
+      className: styles$A.list,
       children: returnable.map((item2) => {
         const picked = item2.line_ref in chosen;
         const reason2 = chosen[item2.line_ref];
         return jsxs("div", {
-          className: styles$z.card,
+          className: styles$A.card,
           children: [jsx("button", {
             type: "button",
             role: "checkbox",
             "aria-checked": picked,
             "aria-label": item2.title ?? item2.sku,
-            className: styles$z.checkSlot,
+            className: styles$A.checkSlot,
             onClick: () => toggle2(item2.line_ref),
             children: jsx("span", {
-              className: styles$z.check,
+              className: styles$A.check,
               children: picked ? jsx(Tick, {}) : null
             })
           }), jsxs("div", {
-            className: styles$z.row,
+            className: styles$A.row,
             children: [jsxs("div", {
-              className: styles$z.line,
+              className: styles$A.line,
               children: [jsx("div", {
-                className: styles$z.thumb,
+                className: styles$A.thumb,
                 children: item2.image ? jsx(ShopImage, {
                   src: item2.image,
                   alt: "",
                   fill: true,
                   sizes: "48px",
-                  className: styles$z.img
+                  className: styles$A.img
                 }) : jsx("div", {
-                  className: styles$z.placeholder,
+                  className: styles$A.placeholder,
                   "aria-hidden": "true"
                 })
               }), jsxs("div", {
-                className: styles$z.meta,
+                className: styles$A.meta,
                 children: [jsx("p", {
-                  className: styles$z.name,
+                  className: styles$A.name,
                   children: item2.title ?? item2.sku
                 }), item2.attributes?.size && jsx("p", {
-                  className: styles$z.attrs,
+                  className: styles$A.attrs,
                   children: `Size: ${item2.attributes.size}`
                 })]
               }), jsxs("div", {
-                className: styles$z.price,
+                className: styles$A.price,
                 children: [jsx("span", {
-                  className: styles$z.paid,
+                  className: styles$A.paid,
                   children: format(item2.unit_price)
                 }), item2.compare_at_unit_price && jsx("span", {
-                  className: styles$z.was,
+                  className: styles$A.was,
                   children: format(item2.compare_at_unit_price)
                 })]
               })]
             }), jsxs("button", {
               type: "button",
-              className: `${styles$z.reason} ${reason2 ? styles$z.reasonSet : ""}`,
+              className: `${styles$A.reason} ${reason2 ? styles$A.reasonSet : ""}`,
               onClick: () => setReasonFor(item2.line_ref),
               "aria-haspopup": "dialog",
               children: [jsx("span", {
@@ -7372,7 +7136,7 @@ function ReturnItemsView({ order, onSubmit, busy = false }) {
     })]
   });
 }
-const page$4 = "_page_1r0ea_7";
+const page$5 = "_page_1r0ea_7";
 const intro$1 = "_intro_1r0ea_15";
 const title$j = "_title_1r0ea_22";
 const subtitle$6 = "_subtitle_1r0ea_31";
@@ -7386,8 +7150,8 @@ const body$5 = "_body_1r0ea_95";
 const body2 = "_body2_1r0ea_103";
 const download = "_download_1r0ea_121";
 const note$1 = "_note_1r0ea_143";
-const styles$y = {
-  page: page$4,
+const styles$z = {
+  page: page$5,
   intro: intro$1,
   title: title$j,
   subtitle: subtitle$6,
@@ -7404,35 +7168,35 @@ const styles$y = {
 };
 function ReturnLabelView({ ret, onDone }) {
   return jsxs("div", {
-    className: styles$y.page,
+    className: styles$z.page,
     children: [jsxs("div", {
-      className: styles$y.intro,
+      className: styles$z.intro,
       children: [jsx("h1", {
-        className: styles$y.title,
+        className: styles$z.title,
         children: "We’ve generated your return label"
       }), jsx("p", {
-        className: styles$y.subtitle,
+        className: styles$z.subtitle,
         children: "Follow the instructions below to complete your return"
       })]
     }), jsxs("div", {
-      className: styles$y.card,
+      className: styles$z.card,
       children: [jsxs("section", {
-        className: styles$y.step,
+        className: styles$z.step,
         children: [jsxs("div", {
-          className: styles$y.stepHead,
+          className: styles$z.stepHead,
           children: [jsx("span", {
-            className: styles$y.number,
+            className: styles$z.number,
             "aria-hidden": "true",
             children: "1"
           }), jsx("h2", {
-            className: styles$y.stepTitle,
+            className: styles$z.stepTitle,
             children: "Download your return label"
           })]
         }), jsx("p", {
-          className: styles$y.body,
+          className: styles$z.body,
           children: "Tap the button below to download your pre-paid return label"
         }), ret.label_url && jsxs("a", {
-          className: styles$y.download,
+          className: styles$z.download,
           href: ret.label_url,
           target: "_blank",
           rel: "noopener noreferrer",
@@ -7441,23 +7205,23 @@ function ReturnLabelView({ ret, onDone }) {
             children: " (opens in a new tab)"
           })]
         }), ret.label_email && jsxs("p", {
-          className: styles$y.note,
+          className: styles$z.note,
           children: ["You’ll receive a shipping label PDF to your email as well.", jsx("br", {}), ret.label_email]
         })]
       }), jsxs("section", {
-        className: styles$y.step2,
+        className: styles$z.step2,
         children: [jsxs("div", {
-          className: styles$y.stepHead,
+          className: styles$z.stepHead,
           children: [jsx("span", {
-            className: styles$y.number,
+            className: styles$z.number,
             "aria-hidden": "true",
             children: "2"
           }), jsx("h2", {
-            className: styles$y.stepTitle,
+            className: styles$z.stepTitle,
             children: "Pack and ship the item"
           })]
         }), jsxs("p", {
-          className: styles$y.body2,
+          className: styles$z.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."]
         })]
       })]
@@ -7469,7 +7233,7 @@ function ReturnLabelView({ ret, onDone }) {
     })]
   });
 }
-const page$3 = "_page_o44fl_8";
+const page$4 = "_page_o44fl_8";
 const titles$1 = "_titles_o44fl_15";
 const title$i = "_title_o44fl_15";
 const subtitle$5 = "_subtitle_o44fl_30";
@@ -7484,8 +7248,8 @@ const attrs = "_attrs_o44fl_100";
 const price$2 = "_price_o44fl_115";
 const paid$1 = "_paid_o44fl_124";
 const was$2 = "_was_o44fl_132";
-const styles$x = {
-  page: page$3,
+const styles$y = {
+  page: page$4,
   titles: titles$1,
   title: title$i,
   subtitle: subtitle$5,
@@ -7517,42 +7281,42 @@ function ReturnTrackingView({ ret, locale: localeProp }) {
     tone: "light",
     fill: true,
     children: jsxs("div", {
-      className: styles$x.page,
+      className: styles$y.page,
       children: [jsxs("div", {
-        className: styles$x.titles,
+        className: styles$y.titles,
         children: [jsx("h1", {
-          className: styles$x.title,
+          className: styles$y.title,
           children: "Return in progress"
         }), jsx("p", {
-          className: styles$x.subtitle,
+          className: styles$y.subtitle,
           children: `Return #${ret.return_ref} · Reported ${reported}`
         })]
       }), jsx(OrderTimeline, {
         progress: ret.progress,
         locale
       }), jsx("ul", {
-        className: styles$x.items,
+        className: styles$y.items,
         children: ret.items.map((item2) => jsxs("li", {
-          className: styles$x.item,
+          className: styles$y.item,
           children: [jsx("div", {
-            className: styles$x.thumb,
+            className: styles$y.thumb,
             children: item2.image ? jsx(ShopImage, {
               src: item2.image,
               alt: "",
               fill: true,
               sizes: "48px",
-              className: styles$x.img
+              className: styles$y.img
             }) : jsx("div", {
-              className: styles$x.placeholder,
+              className: styles$y.placeholder,
               "aria-hidden": "true"
             })
           }), jsxs("div", {
-            className: styles$x.meta,
+            className: styles$y.meta,
             children: [jsx("p", {
-              className: styles$x.name,
+              className: styles$y.name,
               children: item2.title ?? item2.sku
             }), (item2.attributes?.size || pctOff(item2)) && jsxs("p", {
-              className: styles$x.attrs,
+              className: styles$y.attrs,
               children: [item2.attributes?.size && jsx("span", {
                 children: `Size: ${item2.attributes.size}`
               }), pctOff(item2) !== void 0 && jsx(SaleBadge, {
@@ -7560,12 +7324,12 @@ function ReturnTrackingView({ ret, locale: localeProp }) {
               })]
             })]
           }), jsxs("div", {
-            className: styles$x.price,
+            className: styles$y.price,
             children: [jsx("span", {
-              className: styles$x.paid,
+              className: styles$y.paid,
               children: format(item2.unit_price)
             }), item2.compare_at_unit_price && jsx("span", {
-              className: styles$x.was,
+              className: styles$y.was,
               children: format(item2.compare_at_unit_price)
             })]
           })]
@@ -7612,72 +7376,376 @@ function ReturnFlowContent({ orderRef, returnRef, onDone, locale }) {
     if (!orderRef) return;
     setBusy(true);
     try {
-      const created = await api.orders.createReturn(orderRef, {
-        items: items2
+      const created = await api.orders.createReturn(orderRef, {
+        items: items2
+      });
+      setRet(created);
+      emit({
+        type: "return_requested",
+        orderRef,
+        returnRef: created.return_ref
+      });
+    } catch (err) {
+      setErrorCode(codeOf(err));
+      setState("error");
+      setBusy(false);
+    }
+  }
+  if (state === "loading") {
+    return jsx("div", {
+      style: {
+        padding: "var(--space-16)",
+        display: "flex",
+        flexDirection: "column",
+        gap: "var(--space-16)"
+      },
+      children: [0, 1, 2].map((i) => jsx(Skeleton, {
+        height: 88,
+        radius: 8
+      }, i))
+    });
+  }
+  if (state === "error") {
+    return jsx(ErrorState, {
+      code: errorCode,
+      onRetry: () => void load()
+    });
+  }
+  if (ret) {
+    return ret.status === "reported" ? jsx(ReturnLabelView, {
+      ret,
+      ...onDone ? {
+        onDone
+      } : {}
+    }) : jsx(ReturnTrackingView, {
+      ret,
+      ...locale ? {
+        locale
+      } : {}
+    });
+  }
+  if (!order) {
+    return jsx(ErrorState, {
+      code: errorCode,
+      onRetry: () => void load()
+    });
+  }
+  if (!order.can_return) {
+    return jsx(ErrorState, {
+      code: "order_not_cancellable",
+      onRetry: () => void load()
+    });
+  }
+  return jsx(ReturnItemsView, {
+    order,
+    onSubmit: (items2) => void submit(items2),
+    busy
+  });
+}
+const page$3 = "_page_1v9my_8";
+const widget = "_widget_1v9my_18";
+const titleRow = "_titleRow_1v9my_26";
+const headline$1 = "_headline_1v9my_42";
+const track$5 = "_track_1v9my_74";
+const rule$1 = "_rule_1v9my_99";
+const help = "_help_1v9my_109";
+const helpTitle = "_helpTitle_1v9my_115";
+const helpRows = "_helpRows_1v9my_122";
+const helpRow = "_helpRow_1v9my_122";
+const cancel = "_cancel_1v9my_180";
+const cancelledHead = "_cancelledHead_1v9my_204";
+const cancelledTitle = "_cancelledTitle_1v9my_210";
+const cancelledMeta = "_cancelledMeta_1v9my_219";
+const styles$x = {
+  page: page$3,
+  widget,
+  titleRow,
+  headline: headline$1,
+  track: track$5,
+  rule: rule$1,
+  help,
+  helpTitle,
+  helpRows,
+  helpRow,
+  cancel,
+  cancelledHead,
+  cancelledTitle,
+  cancelledMeta
+};
+function RedirectLink() {
+  return jsxs("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    "aria-hidden": "true",
+    children: [jsx("path", {
+      d: "M3.37413 1.63539C2.84882 1.63539 2.39164 1.90422 2.08646 2.29534C1.78479 2.68228 1.63445 3.17776 1.63445 3.66795V3.67088L1.66569 10.3328C1.66636 10.8221 1.81652 11.3164 2.1177 11.7025C2.42287 12.0935 2.8802 12.3615 3.40537 12.3615L3.4044 12.3625L10.6248 12.3654C11.1499 12.3653 11.6063 12.0965 11.9115 11.7054C12.2134 11.3185 12.3644 10.8232 12.3645 10.3328V8.33347C12.3645 7.94707 12.0508 7.63363 11.6645 7.63349C11.278 7.63349 10.9645 7.94699 10.9645 8.33347V10.3328C10.9644 10.5489 10.8962 10.7317 10.8083 10.8444C10.7238 10.9526 10.6512 10.9654 10.6248 10.9654L3.40537 10.9625C3.37921 10.9625 3.30653 10.9498 3.22184 10.8415C3.13389 10.7287 3.06474 10.5461 3.06466 10.3299V10.327L3.03342 3.66405C3.03416 3.44927 3.10311 3.26759 3.1906 3.15542C3.27527 3.04709 3.34796 3.03436 3.37413 3.03436H5.44477C5.83092 3.03423 6.14439 2.72147 6.14474 2.33537C6.14474 1.94897 5.83113 1.63553 5.44477 1.63539H3.37413Z",
+      fill: "currentColor"
+    }), jsx("path", {
+      d: "M8.683 1.63442C8.29663 1.63442 7.9832 1.94806 7.98303 2.33439C7.98303 2.72087 8.29652 3.03436 8.683 3.03436H9.97458L6.504 6.50495C6.23093 6.77819 6.23093 7.22163 6.504 7.49487C6.77724 7.76794 7.22068 7.76794 7.49392 7.49487L10.9645 4.02331V5.31587C10.9645 5.70233 11.278 6.01582 11.6645 6.01584C12.0508 6.01571 12.3645 5.70226 12.3645 5.31587V2.33439C12.3643 2.04478 12.1878 1.79638 11.9369 1.69006L11.9271 1.68616C11.9116 1.67987 11.8951 1.67664 11.8793 1.67152C11.8526 1.66289 11.8261 1.6535 11.7982 1.64809C11.7924 1.64696 11.7865 1.64711 11.7807 1.64613C11.7428 1.63977 11.7042 1.63443 11.6645 1.63442H8.683Z",
+      fill: "currentColor"
+    })]
+  });
+}
+function ChevronRight$1() {
+  return jsx("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    "aria-hidden": "true",
+    children: jsx("g", {
+      transform: "translate(4.28 1.96)",
+      children: jsx("path", {
+        d: "M7.42763 6.03763C7.42763 5.83763 7.33763 5.64763 7.18763 5.51763L1.15763 0.177629C0.867628 -0.0823714 0.427629 -0.0523713 0.177629 0.237629C-0.0823713 0.527629 -0.0523714 0.967629 0.237629 1.22763L5.67763 6.04763L0.237629 10.8576C-0.0523709 11.1176 -0.0823709 11.5576 0.177629 11.8476C0.437629 12.1376 0.877629 12.1676 1.16763 11.9076L7.19763 6.56763C7.34763 6.43763 7.43763 6.24763 7.43763 6.04763L7.42763 6.03763Z",
+        fill: "currentColor"
+      })
+    })
+  });
+}
+function OrderTrackingView(props) {
+  const [returning, setReturning] = useState(false);
+  if (returning) {
+    return jsx(ReturnFlowView, {
+      orderRef: props.orderRef,
+      onDone: () => setReturning(false)
+    });
+  }
+  return jsx(ShopSurface, {
+    tone: "light",
+    fill: true,
+    children: jsx(OrderTrackingContent, {
+      ...props,
+      onStartReturn: props.onStartReturn ?? (() => setReturning(true))
+    })
+  });
+}
+function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onContactSupport, onCancelled, onReorder }) {
+  const t = useT();
+  const { api } = useShop();
+  const locale = useLocale(localeProp);
+  const [order, setOrder] = useState(null);
+  const [state, setState] = useState("loading");
+  const [errorCode, setErrorCode] = useState(void 0);
+  const [cancelOpen, setCancelOpen] = useState(false);
+  const [cancelling, setCancelling] = useState(false);
+  const [cancelError, setCancelError] = useState(null);
+  const emit = useShopEvent();
+  const load = useCallback(async () => {
+    setState("loading");
+    try {
+      setOrder(await api.orders.get(orderRef));
+      setState("ready");
+    } catch (err) {
+      setErrorCode(codeOf(err));
+      setState("error");
+    }
+  }, [api, orderRef]);
+  useEffect(() => {
+    void load();
+  }, [load]);
+  if (state === "loading") {
+    return jsxs("div", {
+      className: styles$x.page,
+      children: [jsx(Skeleton, {
+        height: 206,
+        radius: 8
+      }), jsx(Skeleton, {
+        height: 48,
+        radius: 8
+      }), jsx(Skeleton, {
+        height: 113,
+        radius: 18
+      }), jsx(Skeleton, {
+        height: 240,
+        radius: 18
+      })]
+    });
+  }
+  if (state === "error" || !order) {
+    return jsx(ErrorState, {
+      code: errorCode,
+      onRetry: () => void load()
+    });
+  }
+  const currentStep = order.progress.find((entry) => entry.current)?.step;
+  const inTransit = currentStep === "on_its_way" || currentStep === "out_for_delivery";
+  async function confirmCancellation(reason2) {
+    setCancelling(true);
+    setCancelError(null);
+    try {
+      const updated = await api.orders.requestCancellation(orderRef, {
+        reason: reason2
       });
-      setRet(created);
+      setOrder(updated);
+      setCancelOpen(false);
       emit({
-        type: "return_requested",
+        type: "order_cancellation_requested",
         orderRef,
-        returnRef: created.return_ref
+        reason: reason2
       });
+      onCancelled?.(updated);
     } catch (err) {
-      setErrorCode(codeOf(err));
-      setState("error");
-      setBusy(false);
+      setCancelError(t(treatmentFor(codeOf(err)).body));
+    } finally {
+      setCancelling(false);
     }
   }
-  if (state === "loading") {
-    return jsx("div", {
-      style: {
-        padding: "var(--space-16)",
-        display: "flex",
-        flexDirection: "column",
-        gap: "var(--space-16)"
-      },
-      children: [0, 1, 2].map((i) => jsx(Skeleton, {
-        height: 88,
-        radius: 8
-      }, i))
-    });
-  }
-  if (state === "error") {
-    return jsx(ErrorState, {
-      code: errorCode,
-      onRetry: () => void load()
+  if (order.status === "cancelled") {
+    return jsxs("div", {
+      className: styles$x.page,
+      children: [jsxs("div", {
+        className: styles$x.cancelledHead,
+        children: [jsx("h1", {
+          className: styles$x.cancelledTitle,
+          children: "Order cancelled"
+        }), jsx("p", {
+          className: styles$x.cancelledMeta,
+          children: `Order #${shortRef$1(order.order_ref)} · Placed ${placedOn(order.placed_at, locale)}`
+        })]
+      }), onReorder && jsx(Button, {
+        variant: "primary",
+        fullWidth: true,
+        onClick: () => {
+          emit({
+            type: "reorder_requested",
+            orderRef: order.order_ref
+          });
+          onReorder();
+        },
+        children: "Reorder"
+      }), jsx(OrderLines, {
+        order
+      }), jsx(ShippingAddressCard, {
+        order
+      }), jsx(OrderSummaryCard, {
+        order
+      })]
     });
   }
-  if (ret) {
-    return ret.status === "reported" ? jsx(ReturnLabelView, {
-      ret,
-      ...onDone ? {
-        onDone
-      } : {}
-    }) : jsx(ReturnTrackingView, {
-      ret,
-      ...locale ? {
+  return jsxs("div", {
+    className: styles$x.page,
+    children: [jsxs("section", {
+      className: styles$x.widget,
+      "aria-label": t("Delivery status"),
+      children: [jsxs("div", {
+        className: styles$x.titleRow,
+        children: [jsx("h1", {
+          className: styles$x.headline,
+          children: `Order #${shortRef$1(order.order_ref)}`
+        }), order.tracking?.url && inTransit && jsxs("a", {
+          className: styles$x.track,
+          href: order.tracking.url,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          children: ["Track", jsx("span", {
+            className: "visually-hidden",
+            children: ` ${order.tracking.carrier}, opens in a new tab`
+          }), jsx(RedirectLink, {})]
+        })]
+      }), jsx(OrderTimeline, {
+        progress: order.progress,
+        ...order.estimated_delivery ? {
+          estimatedDelivery: order.estimated_delivery
+        } : {},
         locale
+      })]
+    }), jsx("hr", {
+      className: styles$x.rule
+    }), jsx(OrderLines, {
+      order
+    }), jsx(ShippingAddressCard, {
+      order
+    }), jsx(OrderSummaryCard, {
+      order
+    }), order.can_cancel && jsx("button", {
+      type: "button",
+      className: styles$x.cancel,
+      onClick: () => setCancelOpen(true),
+      children: "Cancel order"
+    }), jsx(NeedHelp, {
+      order,
+      ...onStartReturn ? {
+        onStartReturn
+      } : {},
+      ...onContactSupport ? {
+        onContactSupport
       } : {}
-    });
-  }
-  if (!order) {
-    return jsx(ErrorState, {
-      code: errorCode,
-      onRetry: () => void load()
-    });
-  }
-  if (!order.can_return) {
-    return jsx(ErrorState, {
-      code: "order_not_cancellable",
-      onRetry: () => void load()
-    });
-  }
-  return jsx(ReturnItemsView, {
-    order,
-    onSubmit: (items2) => void submit(items2),
-    busy
+    }), cancelOpen && jsx(ReasonSheet, {
+      title: "Reason for cancelling",
+      options: CANCEL_REASONS,
+      ctaLabel: "Cancel order",
+      closeLabel: "Close reasons",
+      busy: cancelling,
+      onClose: () => setCancelOpen(false),
+      onConfirm: (reason2) => void confirmCancellation(reason2),
+      ...cancelError ? {
+        error: cancelError
+      } : {}
+    })]
+  });
+}
+const CANCEL_REASONS = [{
+  value: "changed_my_mind",
+  label: "Changed my mind"
+}, {
+  value: "ordered_by_mistake",
+  label: "Ordered by mistake"
+}, {
+  value: "delivery_too_long",
+  label: "Delivery takes too long"
+}];
+function placedOn(iso, locale) {
+  const d = new Date(iso);
+  const day = d.getUTCDate();
+  const month = new Intl.DateTimeFormat(locale, {
+    month: "short",
+    timeZone: "UTC"
+  }).format(d);
+  return `${day} ${month}, ${d.getUTCFullYear()}`;
+}
+function NeedHelp({ order, onStartReturn, onContactSupport }) {
+  const emit = useShopEvent();
+  if (order.status !== "delivered") return null;
+  return jsxs("section", {
+    className: styles$x.help,
+    "aria-labelledby": "order-help",
+    children: [jsx("h2", {
+      className: styles$x.helpTitle,
+      id: "order-help",
+      children: "Need help?"
+    }), jsxs("div", {
+      className: styles$x.helpRows,
+      children: [order.can_return && onStartReturn && jsx(HelpRow, {
+        label: "Start a return",
+        onClick: onStartReturn
+      }), jsx(HelpRow, {
+        label: "Contact support",
+        onClick: () => {
+          emit({
+            type: "support_requested",
+            orderRef: order.order_ref
+          });
+          onContactSupport?.();
+        }
+      })]
+    })]
+  });
+}
+function HelpRow({ label: label2, onClick }) {
+  return jsxs("button", {
+    type: "button",
+    className: styles$x.helpRow,
+    onClick,
+    children: [jsx("span", {
+      children: label2
+    }), jsx(ChevronRight$1, {})]
   });
 }
+function shortRef$1(orderRef) {
+  return orderRef.replace(/^ord_/, "");
+}
 const page$2 = "_page_2uqhz_6";
 const confirmed = "_confirmed_2uqhz_16";
 const title$h = "_title_2uqhz_22";
@@ -7846,7 +7914,7 @@ const tile$2 = "_tile_6xodo_133";
 const image$8 = "_image_6xodo_143";
 const placeholder$5 = "_placeholder_6xodo_147";
 const more = "_more_6xodo_154";
-const chevron$3 = "_chevron_6xodo_167";
+const chevron$2 = "_chevron_6xodo_167";
 const styles$u = {
   page: page$1,
   empty,
@@ -7863,7 +7931,7 @@ const styles$u = {
   image: image$8,
   placeholder: placeholder$5,
   more,
-  chevron: chevron$3
+  chevron: chevron$2
 };
 const TILES = 3;
 function Chevron() {
@@ -8652,13 +8720,13 @@ const line = "_line_1s2s6_6";
 const row$5 = "_row_1s2s6_12";
 const pending = "_pending_1s2s6_18";
 const labels = "_labels_1s2s6_24";
-const lowStock = "_lowStock_1s2s6_39";
+const lowStock$1 = "_lowStock_1s2s6_39";
 const media$1 = "_media_1s2s6_49";
 const image$5 = "_image_1s2s6_59";
 const placeholder$2 = "_placeholder_1s2s6_63";
 const saleBadge = "_saleBadge_1s2s6_76";
 const oos$1 = "_oos_1s2s6_91";
-const info$1 = "_info_1s2s6_104";
+const info$2 = "_info_1s2s6_104";
 const head = "_head_1s2s6_112";
 const meta = "_meta_1s2s6_119";
 const title$b = "_title_1s2s6_134";
@@ -8672,13 +8740,13 @@ const styles$m = {
   row: row$5,
   pending,
   labels,
-  lowStock,
+  lowStock: lowStock$1,
   media: media$1,
   image: image$5,
   placeholder: placeholder$2,
   saleBadge,
   oos: oos$1,
-  info: info$1,
+  info: info$2,
   head,
   meta,
   title: title$b,
@@ -8854,13 +8922,13 @@ function ShippingInfo() {
 const bar = "_bar_xqpxa_1";
 const floating$1 = "_floating_xqpxa_31";
 const divider = "_divider_xqpxa_37";
-const info = "_info_xqpxa_41";
+const info$1 = "_info_xqpxa_41";
 const actions = "_actions_xqpxa_49";
 const styles$k = {
   bar,
   floating: floating$1,
   divider,
-  info,
+  info: info$1,
   actions
 };
 function StickyCtaBar({ children, info: info2, variant = "floating" }) {
@@ -9444,16 +9512,17 @@ function SizeGuideSheet({ guide, onClose }) {
     })
   });
 }
-const root$2 = "_root_6sbl9_1";
-const header$3 = "_header_6sbl9_7";
-const title$9 = "_title_6sbl9_12";
-const chips = "_chips_6sbl9_20";
-const chip = "_chip_6sbl9_20";
-const selected$2 = "_selected_6sbl9_44";
-const disabled$1 = "_disabled_6sbl9_56";
-const error = "_error_6sbl9_64";
-const sizeGuide = "_sizeGuide_6sbl9_71";
-const chevron$2 = "_chevron_6sbl9_87";
+const root$2 = "_root_1q3xe_1";
+const header$3 = "_header_1q3xe_11";
+const title$9 = "_title_1q3xe_18";
+const chips = "_chips_1q3xe_26";
+const chip = "_chip_1q3xe_26";
+const selected$2 = "_selected_1q3xe_50";
+const disabled$1 = "_disabled_1q3xe_62";
+const lowStock = "_lowStock_1q3xe_74";
+const error = "_error_1q3xe_84";
+const sizeGuide = "_sizeGuide_1q3xe_91";
+const info = "_info_1q3xe_115";
 const styles$g = {
   root: root$2,
   header: header$3,
@@ -9462,23 +9531,55 @@ const styles$g = {
   chip,
   selected: selected$2,
   disabled: disabled$1,
+  lowStock,
   error,
   sizeGuide,
-  chevron: chevron$2
+  info
 };
-function SizeSelector({ sizes, selected: selected2, onSelect, error: error2 = false, guide }) {
+function SizeSelector({ sizes, selected: selected2, onSelect, error: error2 = false, lowStock: lowStock2, guide }) {
   const t = useT();
   const [guideOpen, setGuideOpen] = useState(false);
   return jsxs("section", {
     className: styles$g.root,
     "aria-labelledby": "size-heading",
-    children: [jsx("div", {
+    children: [jsxs("div", {
       className: styles$g.header,
-      children: jsx("h2", {
+      children: [jsx("h2", {
         id: "size-heading",
         className: styles$g.title,
         children: "Size"
-      })
+      }), guide && jsxs("button", {
+        type: "button",
+        className: styles$g.sizeGuide,
+        onClick: () => setGuideOpen(true),
+        "aria-haspopup": "dialog",
+        "aria-expanded": guideOpen,
+        children: ["Size guide", jsxs("svg", {
+          className: styles$g.info,
+          width: "12",
+          height: "12",
+          viewBox: "0 0 12 12",
+          fill: "none",
+          "aria-hidden": "true",
+          children: [jsx("circle", {
+            cx: "6",
+            cy: "6",
+            r: "5",
+            stroke: "currentColor",
+            strokeWidth: "1.2"
+          }), jsx("path", {
+            d: "M6 5.6v2.6",
+            stroke: "currentColor",
+            strokeWidth: "1.2",
+            strokeLinecap: "round"
+          }), jsx("circle", {
+            cx: "6",
+            cy: "3.7",
+            r: "0.7",
+            fill: "currentColor"
+          })]
+        })]
+      })]
     }), jsx("div", {
       className: styles$g.chips,
       role: "radiogroup",
@@ -9505,27 +9606,10 @@ function SizeSelector({ sizes, selected: selected2, onSelect, error: error2 = fa
       className: styles$g.error,
       role: "alert",
       children: "Please select a size"
-    }), guide && jsxs("button", {
-      type: "button",
-      className: styles$g.sizeGuide,
-      onClick: () => setGuideOpen(true),
-      "aria-haspopup": "dialog",
-      "aria-expanded": guideOpen,
-      children: ["Size guide", jsx("svg", {
-        className: styles$g.chevron,
-        width: "12",
-        height: "12",
-        viewBox: "0 0 12 12",
-        fill: "none",
-        "aria-hidden": "true",
-        children: jsx("path", {
-          d: "m4.6 2.6 3.4 3.4-3.4 3.4",
-          stroke: "currentColor",
-          strokeWidth: "1.2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        })
-      })]
+    }), lowStock2 && !error2 && jsx("p", {
+      className: styles$g.lowStock,
+      role: "status",
+      children: lowStock2
     }), guide && guideOpen && jsx(SizeGuideSheet, {
       guide,
       onClose: () => setGuideOpen(false)
@@ -10019,7 +10103,8 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
   const selectedVariant = hasVariants ? variants.find((v) => v.sku === selectedSku) : void 0;
   const available = selectedVariant?.available ?? inventory2?.available ?? 0;
   const lowStock2 = isLowStock(available);
-  const stockNotice = !purchasable || lowStock2;
+  const sizeLowStock = lowStock2 && hasSizes && selectedSize ? t("Only {0} left in {1} size", available, selectedSize) : void 0;
+  const stockNotice = !purchasable || lowStock2 && !sizeLowStock;
   const availabilityLabel = !purchasable ? t("Out of stock") : lowStock2 ? t("Only {0} left", available) : "";
   const cta2 = purchasable ? jsx(Button, {
     variant: "primary",
@@ -10083,6 +10168,9 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
           selected: selectedSize,
           onSelect: selectSize,
           error: sizeError,
+          ...sizeLowStock ? {
+            lowStock: sizeLowStock
+          } : {},
           guide: product.size_guide
         })
       }), hasVariants && !structured && jsx(VariantSelector, {
@@ -10101,24 +10189,29 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
     })]
   });
 }
-const hero$1 = "_hero_pi6qp_10";
-const image$2 = "_image_pi6qp_37";
-const scrim$1 = "_scrim_pi6qp_51";
-const text$2 = "_text_pi6qp_57";
-const title$5 = "_title_pi6qp_79";
-const subtitle$2 = "_subtitle_pi6qp_90";
-const noImage = "_noImage_pi6qp_105";
+const hero$1 = "_hero_1glho_10";
+const image$2 = "_image_1glho_42";
+const scrim$1 = "_scrim_1glho_70";
+const fade = "_fade_1glho_94";
+const text$2 = "_text_1glho_108";
+const title$5 = "_title_1glho_146";
+const subtitle$2 = "_subtitle_1glho_157";
+const noImage = "_noImage_1glho_172";
 const styles$9 = {
   hero: hero$1,
   image: image$2,
   scrim: scrim$1,
+  fade,
   text: text$2,
   title: title$5,
   subtitle: subtitle$2,
   noImage
 };
 function PcpHero({ hero: hero2 }) {
+  const heroRef = useRef(null);
+  useTopOffset(heroRef, "--hero-top");
   return jsxs("section", {
+    ref: heroRef,
     className: [styles$9.hero, hero2.image ? "" : styles$9.noImage].join(" "),
     children: [hero2.image && jsxs(Fragment, {
       children: [jsx("div", {
@@ -10133,6 +10226,9 @@ function PcpHero({ hero: hero2 }) {
       }), jsx("div", {
         className: styles$9.scrim,
         "aria-hidden": "true"
+      }), jsx("div", {
+        className: styles$9.fade,
+        "aria-hidden": "true"
       })]
     }), jsxs("div", {
       className: styles$9.text,
@@ -10567,29 +10663,28 @@ function ProductView({ sku, initialData, showRecommendations = true, onNotFound
   }
   return unavailable;
 }
-const showcase = "_showcase_a0wva_39";
-const panel = "_panel_a0wva_43";
-const image = "_image_a0wva_71";
-const heroImageBox = "_heroImageBox_a0wva_119";
-const hero = "_hero_a0wva_119";
-const heroContent = "_heroContent_a0wva_190";
-const heroText = "_heroText_a0wva_207";
-const logo = "_logo_a0wva_216";
-const heroTitle = "_heroTitle_a0wva_236";
-const heroSub = "_heroSub_a0wva_260";
-const swipe = "_swipe_a0wva_273";
-const swipeLabel = "_swipeLabel_a0wva_281";
-const chevron$1 = "_chevron_a0wva_287";
-const overlay$1 = "_overlay_a0wva_304";
-const copy = "_copy_a0wva_315";
-const title$2 = "_title_a0wva_320";
-const subtitle$1 = "_subtitle_a0wva_327";
-const cta = "_cta_a0wva_333";
+const showcase = "_showcase_144lm_44";
+const panel = "_panel_144lm_48";
+const image = "_image_144lm_76";
+const hero = "_hero_144lm_116";
+const heroContent = "_heroContent_144lm_174";
+const heroText = "_heroText_144lm_197";
+const logo = "_logo_144lm_206";
+const heroTitle = "_heroTitle_144lm_226";
+const heroSub = "_heroSub_144lm_250";
+const swipe = "_swipe_144lm_269";
+const swipeLabel = "_swipeLabel_144lm_276";
+const chevron$1 = "_chevron_144lm_282";
+const overlay$1 = "_overlay_144lm_11";
+const copy = "_copy_144lm_315";
+const title$2 = "_title_144lm_320";
+const subtitle$1 = "_subtitle_144lm_327";
+const cta = "_cta_144lm_333";
+const mosaic = "_mosaic_144lm_377";
 const styles$2 = {
   showcase,
   panel,
   image,
-  heroImageBox,
   hero,
   heroContent,
   heroText,
@@ -10603,7 +10698,8 @@ const styles$2 = {
   copy,
   title: title$2,
   subtitle: subtitle$1,
-  cta
+  cta,
+  mosaic
 };
 const SETTLE_MS = 150;
 function useDocumentSnap(ref, enabled = true) {
@@ -10636,40 +10732,29 @@ function useDocumentSnap(ref, enabled = true) {
   }, [ref, enabled]);
 }
 const FALLBACK_PANELS = [{
-  key: "all-items",
-  title: "All items",
-  subtitle: "Heavyweight comfort built for training days and off-duty moments",
-  cta: "See more",
-  to: "/category/t-shirts",
-  image: "/figma/home/new.jpg"
-}, {
   key: "hoodies",
   title: "Hoodies",
   subtitle: "Heavyweight comfort built for training days and off-duty moments",
   cta: "See more",
   to: "/category/hoodies",
-  image: "/figma/home/hoodies.jpg"
+  video: "/figma/home/hoodies.mp4",
+  image: "/figma/home/hoodies-poster.jpg"
+}, {
+  key: "zip-ups",
+  title: "Zip Ups",
+  subtitle: "Everyday essentials with sport-inspired fits and minimal branding",
+  cta: "See more",
+  to: "/category/zip-ups",
+  video: "/figma/home/zip-ups.mp4",
+  image: "/figma/home/zip-ups-poster.jpg"
 }, {
   key: "t-shirts",
   title: "T-Shirts",
   subtitle: "Everyday essentials with sport-inspired fits and minimal branding",
-  cta: "Explore",
-  to: "/category/t-shirts",
-  image: "/figma/home/tshirts.jpg"
-}, {
-  key: "jackets",
-  title: "Jackets",
-  subtitle: "Heavyweight comfort built for training days and off-duty moments",
   cta: "See more",
-  to: "/category/jackets",
-  image: "/figma/home/jackets.jpg"
-}, {
-  key: "seasonal",
-  title: "Seasonal",
-  subtitle: "Complete the look with everyday essentials and finishing details",
-  cta: "Shop now",
-  to: "/category/summer",
-  image: "/figma/home/accessories.jpg"
+  to: "/category/t-shirts",
+  video: "/figma/home/tshirts.mp4",
+  image: "/figma/home/tshirts-poster.jpg"
 }];
 function CategoryPanel({ panel: panel2 }) {
   return jsxs("section", {
@@ -10680,7 +10765,12 @@ function CategoryPanel({ panel: panel2 }) {
         "--slide-focal-y": `${panel2.focalY}%`
       }
     },
-    children: [jsx(ShopImage, {
+    children: [panel2.video ? jsx(ShopVideo, {
+      src: panel2.video,
+      poster: panel2.image,
+      fill: true,
+      className: styles$2.image
+    }) : jsx(ShopImage, {
       src: panel2.image,
       alt: "",
       fill: true,
@@ -10706,6 +10796,19 @@ function CategoryPanel({ panel: panel2 }) {
     })]
   });
 }
+function MosaicPanel() {
+  const t = useT();
+  return jsx("section", {
+    className: `${styles$2.panel} ${styles$2.mosaic}`,
+    "aria-label": t("The DAZN Shop collection"),
+    children: jsx(ShopVideo, {
+      src: "/figma/home/mosaic.mp4",
+      poster: "/figma/home/mosaic-poster.jpg",
+      fill: true,
+      className: styles$2.image
+    })
+  });
+}
 function useSlides() {
   const t = useT();
   const shop = useShopOptional();
@@ -10729,6 +10832,9 @@ function useSlides() {
         cta: s.cta,
         to: s.target ? `/category/${s.target}` : "/",
         image: s.image ?? "",
+        ...s.video === void 0 ? {} : {
+          video: s.video
+        },
         ...s.focal_y === void 0 ? {} : {
           focalY: s.focal_y
         }
@@ -10756,16 +10862,12 @@ function HomeShowcase() {
       children: [jsxs("section", {
         className: `${styles$2.panel} ${styles$2.hero}`,
         "aria-label": t("DAZN Shop"),
-        children: [jsx("div", {
-          className: styles$2.heroImageBox,
-          children: jsx(ShopImage, {
-            src: "/figma/home/hero.jpg",
-            alt: "",
-            fill: true,
-            priority: true,
-            sizes: "(max-width: 480px) 100vw, 480px",
-            className: styles$2.image
-          })
+        children: [jsx(ShopVideo, {
+          src: "/figma/home/hero.mp4",
+          poster: "/figma/home/hero-poster.jpg",
+          fill: true,
+          priority: true,
+          className: styles$2.image
         }), jsxs("div", {
           className: styles$2.heroContent,
           children: [jsxs("div", {
@@ -10801,9 +10903,11 @@ function HomeShowcase() {
             })]
           })]
         })]
-      }), panels.map((p) => jsx(CategoryPanel, {
-        panel: p
-      }, p.key))]
+      }), panels.map((p, i) => jsxs(Fragment$1, {
+        children: [jsx(CategoryPanel, {
+          panel: p
+        }), i === 0 && jsx(MosaicPanel, {})]
+      }, p.key)), panels.length === 0 && jsx(MosaicPanel, {})]
     })
   });
 }
@@ -11319,6 +11423,7 @@ export {
   ShopLink,
   ShopMenuSheet,
   ShopSurface,
+  ShopVideo,
   SizeGuideSheet,
   SizeSelector,
   Skeleton,
@@ -11354,4 +11459,4 @@ export {
   useToast,
   variantLabel
 };
-//# sourceMappingURL=storefront.mjs.map
+