@nok-integration/storefront-react 0.19.14 → 0.19.16

package/dist/index.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,12 +5340,70 @@ 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";
 const critical$1 = "_critical_1bagf_22";
 const promo = "_promo_1bagf_27";
-const styles$P = {
+const styles$Q = {
   badge: badge$5,
   neutral: neutral$1,
   success: success$1,
@@ -5352,7 +5412,7 @@ const styles$P = {
 };
 function Badge({ tone = "neutral", children }) {
   return jsx("span", {
-    className: [styles$P.badge, styles$P[tone]].join(" "),
+    className: [styles$Q.badge, styles$Q[tone]].join(" "),
     children
   });
 }
@@ -5363,7 +5423,7 @@ const secondary = "_secondary_1u2uh_34";
 const ghost = "_ghost_1u2uh_40";
 const spinner = "_spinner_1u2uh_83";
 const spin = "_spin_1u2uh_83";
-const styles$O = {
+const styles$P = {
   button: button$1,
   fullWidth,
   primary,
@@ -5377,12 +5437,12 @@ const Button = forwardRef(function Button2({ variant = "primary", loading = fals
   return jsxs("button", {
     ref,
     type,
-    className: [styles$O.button, styles$O[variant], fullWidth2 ? styles$O.fullWidth : "", className ?? ""].filter(Boolean).join(" "),
+    className: [styles$P.button, styles$P[variant], fullWidth2 ? styles$P.fullWidth : "", className ?? ""].filter(Boolean).join(" "),
     disabled: isDisabled,
     "aria-busy": loading || void 0,
     ...rest,
     children: [loading && jsx("span", {
-      className: styles$O.spinner,
+      className: styles$P.spinner,
       "aria-hidden": "true"
     }), jsx("span", {
       children
@@ -5390,7 +5450,7 @@ const Button = forwardRef(function Button2({ variant = "primary", loading = fals
   });
 });
 const skeleton = "_skeleton_1nxz7_1";
-const styles$N = {
+const styles$O = {
   skeleton
 };
 function Skeleton({ width, height, radius, className, circle }) {
@@ -5401,13 +5461,13 @@ function Skeleton({ width, height, radius, className, circle }) {
   };
   return jsx("span", {
     "aria-hidden": "true",
-    className: [styles$N.skeleton, className ?? ""].filter(Boolean).join(" "),
+    className: [styles$O.skeleton, className ?? ""].filter(Boolean).join(" "),
     style
   });
 }
 const surface$1 = "_surface_cfqo9_10";
 const fill = "_fill_cfqo9_35";
-const styles$M = {
+const styles$N = {
   surface: surface$1,
   fill
 };
@@ -5465,7 +5525,7 @@ const ShopSurface = forwardRef(function ShopSurface2({ tone, fill: fill2 = false
     ...rest,
     ref: attach,
     "data-shop-theme": tone,
-    className: [styles$M.surface, fill2 ? styles$M.fill : "", className ?? ""].filter(Boolean).join(" "),
+    className: [styles$N.surface, fill2 ? styles$N.fill : "", className ?? ""].filter(Boolean).join(" "),
     children
   });
 });
@@ -5478,7 +5538,7 @@ const lineMid = "_lineMid_ney0g_45";
 const lineNarrow = "_lineNarrow_ney0g_49";
 const row$9 = "_row_ney0g_53";
 const action$2 = "_action_ney0g_57";
-const styles$L = {
+const styles$M = {
   root: root$6,
   inner,
   media: media$3,
@@ -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",
@@ -5618,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",
@@ -5626,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",
@@ -5691,36 +5750,36 @@ function ScreenSkeleton({ tone, shape = "media" }) {
   return jsx(ShopSurface, {
     tone,
     fill: true,
-    className: styles$L.root,
+    className: styles$M.root,
     children: jsx("div", {
-      className: styles$L.inner,
+      className: styles$M.inner,
       role: "status",
       "aria-label": t("Loading"),
       children: shape === "media" ? jsxs(Fragment, {
         children: [jsx(Skeleton, {
-          className: styles$L.media
+          className: styles$M.media
         }), jsxs("div", {
-          className: styles$L.lines,
+          className: styles$M.lines,
           children: [jsx(Skeleton, {
             height: 22,
-            className: styles$L.lineWide
+            className: styles$M.lineWide
           }), jsx(Skeleton, {
             height: 16,
-            className: styles$L.lineMid
+            className: styles$M.lineMid
           }), jsx(Skeleton, {
             height: 16,
-            className: styles$L.lineNarrow
+            className: styles$M.lineNarrow
           })]
         }), jsx(Skeleton, {
           height: 48,
           radius: 8,
-          className: styles$L.action
+          className: styles$M.action
         })]
       }) : jsx("div", {
-        className: styles$L.lines,
+        className: styles$M.lines,
         children: [0, 1, 2, 3].map((i) => jsx(Skeleton, {
           height: 72,
-          className: styles$L.row
+          className: styles$M.row
         }, i))
       })
     })
@@ -5732,7 +5791,7 @@ const text$5 = "_text_ryf3q_21";
 const title$n = "_title_ryf3q_35";
 const body$8 = "_body_ryf3q_40";
 const action$1 = "_action_ryf3q_48";
-const styles$K = {
+const styles$L = {
   root: root$5,
   icon: icon$4,
   text: text$5,
@@ -5742,22 +5801,22 @@ const styles$K = {
 };
 function EmptyState({ title: title2, body: body3, action: action2, icon: icon2 }) {
   return jsxs("div", {
-    className: styles$K.root,
+    className: styles$L.root,
     role: "status",
     children: [icon2 && jsx("div", {
-      className: styles$K.icon,
+      className: styles$L.icon,
       children: icon2
     }), jsxs("div", {
-      className: styles$K.text,
+      className: styles$L.text,
       children: [jsx("h2", {
-        className: styles$K.title,
+        className: styles$L.title,
         children: title2
       }), body3 && jsx("p", {
-        className: styles$K.body,
+        className: styles$L.body,
         children: body3
       })]
     }), action2 && jsx("div", {
-      className: styles$K.action,
+      className: styles$L.action,
       children: action2
     })]
   });
@@ -5879,7 +5938,7 @@ function isDuplicateOrder(err) {
 const root$4 = "_root_1lbpx_1";
 const title$m = "_title_1lbpx_10";
 const body$7 = "_body_1lbpx_15";
-const styles$J = {
+const styles$K = {
   root: root$4,
   title: title$m,
   body: body$7
@@ -5889,13 +5948,13 @@ function ErrorState({ code, title: title2, body: body3, onRetry, retryLabel }) {
   const treatment = treatmentFor(code);
   const showRetry = Boolean(onRetry) && treatment.retriable;
   return jsxs("div", {
-    className: styles$J.root,
+    className: styles$K.root,
     role: "alert",
     children: [jsx("h2", {
-      className: styles$J.title,
+      className: styles$K.title,
       children: title2 ?? t(treatment.title)
     }), jsx("p", {
-      className: styles$J.body,
+      className: styles$K.body,
       children: body3 ?? t(treatment.body)
     }), showRetry && jsx(Button, {
       variant: "secondary",
@@ -5943,7 +6002,7 @@ const rich = "_rich_5aafz_183";
 const description = "_description_5aafz_198";
 const thumb$3 = "_thumb_5aafz_216";
 const thumbImage = "_thumbImage_5aafz_227";
-const styles$I = {
+const styles$J = {
   viewport,
   anchor,
   caret,
@@ -6066,41 +6125,41 @@ function ToastProvider({ children }) {
   return jsxs(ToastContext.Provider, {
     value: api,
     children: [children, jsx("div", {
-      className: styles$I.viewport,
+      className: styles$J.viewport,
       ref: viewportRef,
       "aria-live": "polite",
       "aria-atomic": "false",
       children: toasts.map((t) => {
         const rich2 = Boolean(t.description || t.image);
         return jsxs("div", {
-          className: styles$I.anchor,
+          className: styles$J.anchor,
           children: [t.anchor === "cart" && jsx("span", {
-            className: styles$I.caret,
+            className: styles$J.caret,
             children: jsx(Caret, {})
           }), jsxs("div", {
-            className: [styles$I.toast, rich2 ? styles$I.rich : styles$I[t.tone]].join(" "),
+            className: [styles$J.toast, rich2 ? styles$J.rich : styles$J[t.tone]].join(" "),
             role: "status",
             children: [t.image && jsx("span", {
-              className: styles$I.thumb,
+              className: styles$J.thumb,
               children: jsx(ShopImage, {
                 src: t.image,
                 alt: "",
                 fill: true,
                 sizes: "40px",
-                className: styles$I.thumbImage
+                className: styles$J.thumbImage
               })
             }), jsxs("span", {
-              className: styles$I.text,
+              className: styles$J.text,
               children: [jsx("span", {
-                className: styles$I.message,
+                className: styles$J.message,
                 children: t.message
               }), t.description && jsx("span", {
-                className: styles$I.description,
+                className: styles$J.description,
                 children: t.description
               })]
             }), t.action && jsx("button", {
               type: "button",
-              className: styles$I.action,
+              className: styles$J.action,
               onClick: () => {
                 t.action?.onAction();
                 dismiss(t.id);
@@ -6115,15 +6174,15 @@ function ToastProvider({ children }) {
 }
 const badge$4 = "_badge_156ya_2";
 const icon$3 = "_icon_156ya_18";
-const styles$H = {
+const styles$I = {
   badge: badge$4,
   icon: icon$3
 };
 function SaleBadge({ pct }) {
   return jsxs("span", {
-    className: styles$H.badge,
+    className: styles$I.badge,
     children: [jsxs("svg", {
-      className: styles$H.icon,
+      className: styles$I.icon,
       width: "12",
       height: "12",
       viewBox: "0 0 24 24",
@@ -6153,7 +6212,7 @@ const badge$3 = "_badge_rvfx9_48";
 const price$4 = "_price_rvfx9_52";
 const compareAt = "_compareAt_rvfx9_57";
 const strikethrough = "_strikethrough_rvfx9_65";
-const styles$G = {
+const styles$H = {
   root: root$3,
   center: center$1,
   end,
@@ -6170,12 +6229,12 @@ function PriceBlock({ price: price2, compareAt: compareAt2, discountPct: discoun
   const pct = discountPct$1 ?? discountPct(price2, compareAt2);
   const hasCompare = compareAt2 && compareAt2.amount > price2.amount;
   return jsxs("div", {
-    className: [styles$G.root, styles$G[size], styles$G[align], styles$G[variant]].join(" "),
+    className: [styles$H.root, styles$H[size], styles$H[align], styles$H[variant]].join(" "),
     children: [jsx("span", {
-      className: styles$G.price,
+      className: styles$H.price,
       children: format(price2)
     }), hasCompare && jsxs("span", {
-      className: styles$G.compareAt,
+      className: styles$H.compareAt,
       children: [jsx("span", {
         className: "visually-hidden",
         children: `Was ${format(compareAt2)}`
@@ -6201,7 +6260,7 @@ const past = "_past_1cum7_113";
 const current = "_current_1cum7_118";
 const future = "_future_1cum7_133";
 const date$1 = "_date_1cum7_138";
-const styles$F = {
+const styles$G = {
   timeline,
   row: row$8,
   line: line$3,
@@ -6220,39 +6279,39 @@ function OrderTimeline({ progress: progress2, estimatedDelivery, locale: localeP
   const locale = useLocale(localeProp);
   const currentIndex = progress2.findIndex((e) => e.current);
   return jsx("ol", {
-    className: styles$F.timeline,
+    className: styles$G.timeline,
     children: progress2.map((entry, i) => {
       const state = stateOf(entry, i, currentIndex);
       const estimate = !entry.at && i === progress2.length - 1 && estimatedDelivery ? formatWindow(estimatedDelivery, locale) : void 0;
       return jsxs("li", {
-        className: styles$F.row,
+        className: styles$G.row,
         "aria-current": entry.current ? "step" : void 0,
         children: [jsxs("div", {
-          className: styles$F.line,
+          className: styles$G.line,
           children: [jsx("span", {
-            className: styles$F.marker,
+            className: styles$G.marker,
             children: state === "future" ? jsx("span", {
-              className: styles$F.pending,
+              className: styles$G.pending,
               "aria-hidden": "true"
             }) : jsx(StepTick, {
               tone: state
             })
           }), jsxs("span", {
-            className: styles$F.text,
+            className: styles$G.text,
             children: [jsx("span", {
-              className: [styles$F.label, styles$F[state]].join(" "),
+              className: [styles$G.label, styles$G[state]].join(" "),
               children: entry.label
             }), entry.at ? jsx("time", {
-              className: styles$F.date,
+              className: styles$G.date,
               dateTime: entry.at,
               children: formatStepDate(entry.at, locale)
             }) : estimate && jsx("span", {
-              className: styles$F.date,
+              className: styles$G.date,
               children: estimate
             })]
           })]
         }), i < progress2.length - 1 && jsx("span", {
-          className: styles$F.connector,
+          className: styles$G.connector,
           "aria-hidden": "true"
         })]
       }, entry.step);
@@ -6266,7 +6325,7 @@ function stateOf(entry, index, currentIndex) {
 }
 function StepTick({ tone }) {
   return jsxs("svg", {
-    className: styles$F.tick,
+    className: styles$G.tick,
     width: "28",
     height: "28",
     viewBox: "0 0 28 28",
@@ -6411,7 +6470,7 @@ const row$7 = "_row_1hsxt_16";
 const free = "_free_1hsxt_53";
 const pending$1 = "_pending_1hsxt_59";
 const discount = "_discount_1hsxt_69";
-const styles$E = {
+const styles$F = {
   summary,
   row: row$7,
   free,
@@ -6440,11 +6499,11 @@ function OrderSummary({ pricing, deferred = [], hidden = [], rows = CART_ROWS, d
   const isDeferred = (key) => deferred.includes(key);
   const visible = rows.filter((row2) => !hidden.includes(row2.key)).filter((row2) => row2.key !== "discount" || discount2 !== void 0);
   return jsx("dl", {
-    className: styles$E.summary,
+    className: styles$F.summary,
     children: visible.map(({ label: label2, key }) => {
       if (key === "discount" && discount2) {
         return jsxs("div", {
-          className: [styles$E.row, styles$E.discount].join(" "),
+          className: [styles$F.row, styles$F.discount].join(" "),
           children: [jsx("dt", {
             children: t(label2)
           }), jsx("dd", {
@@ -6454,11 +6513,11 @@ function OrderSummary({ pricing, deferred = [], hidden = [], rows = CART_ROWS, d
       }
       const pending2 = key !== "total" && isDeferred(key);
       return jsxs("div", {
-        className: styles$E.row,
+        className: styles$F.row,
         children: [jsx("dt", {
           children: t(label2)
         }), jsx("dd", {
-          className: pending2 ? styles$E.pending : void 0,
+          className: pending2 ? styles$F.pending : void 0,
           children: pending2 ? t("Calculated at checkout") : renderValue(key, pricing, format, t)
         })]
       }, key);
@@ -6468,7 +6527,7 @@ function OrderSummary({ pricing, deferred = [], hidden = [], rows = CART_ROWS, d
 function renderValue(key, pricing, format, t) {
   if (key === "shipping" && pricing.shipping.amount === 0) {
     return jsx("span", {
-      className: styles$E.free,
+      className: styles$F.free,
       children: t("Free")
     });
   }
@@ -6491,7 +6550,7 @@ const card$4 = "_card_1vmnm_173";
 const cardTitle = "_cardTitle_1vmnm_181";
 const cardBody = "_cardBody_1vmnm_193";
 const summaryCard = "_summaryCard_1vmnm_165";
-const styles$D = {
+const styles$E = {
   lines: lines$1,
   line: line$2,
   thumb: thumb$2,
@@ -6530,42 +6589,42 @@ function OrderLine({ item: item2 }) {
   const pct = compareAt2 ? discountPct(item2.unit_price, compareAt2) : void 0;
   const details2 = detailsOf(item2, t);
   return jsxs("li", {
-    className: styles$D.line,
+    className: styles$E.line,
     children: [jsx("div", {
-      className: styles$D.thumb,
+      className: styles$E.thumb,
       children: item2.image ? jsx(ShopImage, {
         src: item2.image,
         alt: "",
         fill: true,
         sizes: "48px",
-        className: styles$D.image
+        className: styles$E.image
       }) : jsx("div", {
-        className: styles$D.placeholder,
+        className: styles$E.placeholder,
         "aria-hidden": "true"
       })
     }), jsxs("div", {
-      className: styles$D.lineBody,
+      className: styles$E.lineBody,
       children: [jsxs("div", {
-        className: styles$D.lineText,
+        className: styles$E.lineText,
         children: [jsx("span", {
-          className: styles$D.lineTitle,
+          className: styles$E.lineTitle,
           children: item2.title ?? item2.sku
         }), jsxs("span", {
-          className: styles$D.lineMeta,
+          className: styles$E.lineMeta,
           children: [details2.map((detail2) => jsx("span", {
-            className: styles$D.detail,
+            className: styles$E.detail,
             children: detail2
           }, detail2)), pct !== void 0 && jsx(SaleBadge, {
             pct
           })]
         })]
       }), jsxs("span", {
-        className: styles$D.linePrice,
+        className: styles$E.linePrice,
         children: [jsx("span", {
-          className: styles$D.paid,
+          className: styles$E.paid,
           children: format(item2.line_total)
         }), compareAt2 && jsxs("span", {
-          className: styles$D.was,
+          className: styles$E.was,
           children: [jsx("span", {
             className: "visually-hidden",
             children: `Was ${format(compareAt2)}`
@@ -6581,7 +6640,7 @@ function OrderLine({ item: item2 }) {
 function OrderLines({ order }) {
   const t = useT();
   return jsx("ul", {
-    className: styles$D.lines,
+    className: styles$E.lines,
     "aria-label": t("Items"),
     children: order.items.map((item2) => jsx(OrderLine, {
       item: item2
@@ -6591,13 +6650,13 @@ function OrderLines({ order }) {
 function ShippingAddressCard({ order }) {
   const t = useT();
   return jsxs("section", {
-    className: styles$D.card,
+    className: styles$E.card,
     "aria-label": t("Shipping address"),
     children: [jsx("h2", {
-      className: styles$D.cardTitle,
+      className: styles$E.cardTitle,
       children: "Shipping address"
     }), jsx("p", {
-      className: styles$D.cardBody,
+      className: styles$E.cardBody,
       children: formatAddress(order.ship_to)
     })]
   });
@@ -6605,10 +6664,10 @@ function ShippingAddressCard({ order }) {
 function OrderSummaryCard({ order }) {
   const t = useT();
   return jsxs("section", {
-    className: [styles$D.card, styles$D.summaryCard].join(" "),
+    className: [styles$E.card, styles$E.summaryCard].join(" "),
     "aria-label": t("Order summary"),
     children: [jsx("h2", {
-      className: styles$D.cardTitle,
+      className: styles$E.cardTitle,
       children: "Order summary"
     }), jsx(OrderSummary, {
       pricing: toPricing(order),
@@ -6645,7 +6704,7 @@ const handleSlot = "_handleSlot_1f3nh_23";
 const handle = "_handle_1f3nh_23";
 const closeSlot$1 = "_closeSlot_1f3nh_35";
 const close$2 = "_close_1f3nh_35";
-const styles$C = {
+const styles$D = {
   header: header$6,
   slot,
   handleSlot,
@@ -6673,23 +6732,23 @@ function CloseIcon$1() {
 }
 function SheetHeader({ onClose, closeLabel }) {
   return jsxs("div", {
-    className: styles$C.header,
+    className: styles$D.header,
     children: [jsx("div", {
-      className: styles$C.slot,
+      className: styles$D.slot,
       "aria-hidden": "true"
     }), jsx("div", {
-      className: styles$C.handleSlot,
+      className: styles$D.handleSlot,
       "aria-hidden": "true",
       children: jsx("div", {
-        className: styles$C.handle
+        className: styles$D.handle
       })
     }), jsx("button", {
       type: "button",
-      className: styles$C.closeSlot,
+      className: styles$D.closeSlot,
       onClick: onClose,
       "aria-label": closeLabel,
       children: jsx("span", {
-        className: styles$C.close,
+        className: styles$D.close,
         children: jsx(CloseIcon$1, {})
       })
     })]
@@ -6745,7 +6804,7 @@ const radio = "_radio_7on4q_88";
 const label$1 = "_label_7on4q_118";
 const footer$1 = "_footer_7on4q_127";
 const error$1 = "_error_7on4q_135";
-const styles$B = {
+const styles$C = {
   scrim: scrim$5,
   sheet: sheet$3,
   body: body$6,
@@ -6762,12 +6821,12 @@ function ReasonSheet({ title: title2, options: options2, ctaLabel, selected: sel
   const [choice, setChoice] = useState(selected2);
   useModalDialog(true, onClose, sheetRef);
   return jsx("div", {
-    className: styles$B.scrim,
+    className: styles$C.scrim,
     onClick: onClose,
     children: jsxs(ShopSurface, {
       tone: "light",
       ref: sheetRef,
-      className: styles$B.sheet,
+      className: styles$C.sheet,
       role: "dialog",
       "aria-modal": "true",
       "aria-labelledby": "reason-sheet-title",
@@ -6776,23 +6835,23 @@ function ReasonSheet({ title: title2, options: options2, ctaLabel, selected: sel
         onClose,
         closeLabel
       }), jsxs("div", {
-        className: styles$B.body,
+        className: styles$C.body,
         children: [jsx("h2", {
           id: "reason-sheet-title",
-          className: styles$B.title,
+          className: styles$C.title,
           children: title2
         }), jsx("div", {
-          className: styles$B.options,
+          className: styles$C.options,
           role: "radiogroup",
           "aria-labelledby": "reason-sheet-title",
           children: options2.map((o) => jsxs("button", {
             type: "button",
             role: "radio",
             "aria-checked": o.value === choice,
-            className: styles$B.option,
+            className: styles$C.option,
             onClick: () => setChoice(o.value),
             children: [jsx("span", {
-              className: styles$B.radio,
+              className: styles$C.radio,
               "aria-hidden": "true",
               children: o.value === choice && jsxs("svg", {
                 width: "20",
@@ -6813,15 +6872,15 @@ function ReasonSheet({ title: title2, options: options2, ctaLabel, selected: sel
                 })]
               })
             }), jsx("span", {
-              className: styles$B.label,
+              className: styles$C.label,
               children: o.label
             })]
           }, o.value))
         })]
       }), jsxs("div", {
-        className: styles$B.footer,
+        className: styles$C.footer,
         children: [error2 && jsx("p", {
-          className: styles$B.error,
+          className: styles$C.error,
           role: "alert",
           children: error2
         }), jsx(Button, {
@@ -6857,7 +6916,7 @@ 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 = {
+const styles$B = {
   page: page$6,
   titles: titles$2,
   title: title$k,
@@ -6937,15 +6996,18 @@ const RETURN_REASONS = [{
   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) => i.qty - i.cancelled_qty - i.refunded_qty > 0), [order.items]);
+  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 item2.qty - item2.cancelled_qty - item2.refunded_qty;
+    return unitsLeft(item2);
   }
   function toggle2(lineRef) {
     if (lineRef in chosen) {
@@ -6973,72 +7035,72 @@ function ReturnItemsView({ order, onSubmit, busy = false }) {
     if (items2.length > 0) onSubmit(items2);
   }
   return jsxs("div", {
-    className: styles$A.page,
+    className: styles$B.page,
     children: [jsxs("div", {
-      className: styles$A.titles,
+      className: styles$B.titles,
       children: [jsx("h1", {
-        className: styles$A.title,
+        className: styles$B.title,
         children: "What do you want to return?"
       }), jsx("p", {
-        className: styles$A.subtitle,
+        className: styles$B.subtitle,
         children: "Select items you want to return"
       })]
     }), jsx("div", {
-      className: styles$A.list,
+      className: styles$B.list,
       children: returnable.map((item2) => {
         const picked = item2.line_ref in chosen;
         const reason2 = chosen[item2.line_ref];
         return jsxs("div", {
-          className: styles$A.card,
+          className: styles$B.card,
           children: [jsx("button", {
             type: "button",
             role: "checkbox",
             "aria-checked": picked,
             "aria-label": item2.title ?? item2.sku,
-            className: styles$A.checkSlot,
+            className: styles$B.checkSlot,
             onClick: () => toggle2(item2.line_ref),
             children: jsx("span", {
-              className: styles$A.check,
+              className: styles$B.check,
               children: picked ? jsx(Tick, {}) : null
             })
           }), jsxs("div", {
-            className: styles$A.row,
+            className: styles$B.row,
             children: [jsxs("div", {
-              className: styles$A.line,
+              className: styles$B.line,
               children: [jsx("div", {
-                className: styles$A.thumb,
+                className: styles$B.thumb,
                 children: item2.image ? jsx(ShopImage, {
                   src: item2.image,
                   alt: "",
                   fill: true,
                   sizes: "48px",
-                  className: styles$A.img
+                  className: styles$B.img
                 }) : jsx("div", {
-                  className: styles$A.placeholder,
+                  className: styles$B.placeholder,
                   "aria-hidden": "true"
                 })
               }), jsxs("div", {
-                className: styles$A.meta,
+                className: styles$B.meta,
                 children: [jsx("p", {
-                  className: styles$A.name,
+                  className: styles$B.name,
                   children: item2.title ?? item2.sku
                 }), item2.attributes?.size && jsx("p", {
-                  className: styles$A.attrs,
+                  className: styles$B.attrs,
                   children: `Size: ${item2.attributes.size}`
                 })]
               }), jsxs("div", {
-                className: styles$A.price,
+                className: styles$B.price,
                 children: [jsx("span", {
-                  className: styles$A.paid,
+                  className: styles$B.paid,
                   children: format(item2.unit_price)
                 }), item2.compare_at_unit_price && jsx("span", {
-                  className: styles$A.was,
+                  className: styles$B.was,
                   children: format(item2.compare_at_unit_price)
                 })]
               })]
             }), jsxs("button", {
               type: "button",
-              className: `${styles$A.reason} ${reason2 ? styles$A.reasonSet : ""}`,
+              className: `${styles$B.reason} ${reason2 ? styles$B.reasonSet : ""}`,
               onClick: () => setReasonFor(item2.line_ref),
               "aria-haspopup": "dialog",
               children: [jsx("span", {
@@ -7088,7 +7150,7 @@ const body$5 = "_body_1r0ea_95";
 const body2 = "_body2_1r0ea_103";
 const download = "_download_1r0ea_121";
 const note$1 = "_note_1r0ea_143";
-const styles$z = {
+const styles$A = {
   page: page$5,
   intro: intro$1,
   title: title$j,
@@ -7106,35 +7168,35 @@ const styles$z = {
 };
 function ReturnLabelView({ ret, onDone }) {
   return jsxs("div", {
-    className: styles$z.page,
+    className: styles$A.page,
     children: [jsxs("div", {
-      className: styles$z.intro,
+      className: styles$A.intro,
       children: [jsx("h1", {
-        className: styles$z.title,
+        className: styles$A.title,
         children: "We’ve generated your return label"
       }), jsx("p", {
-        className: styles$z.subtitle,
+        className: styles$A.subtitle,
         children: "Follow the instructions below to complete your return"
       })]
     }), jsxs("div", {
-      className: styles$z.card,
+      className: styles$A.card,
       children: [jsxs("section", {
-        className: styles$z.step,
+        className: styles$A.step,
         children: [jsxs("div", {
-          className: styles$z.stepHead,
+          className: styles$A.stepHead,
           children: [jsx("span", {
-            className: styles$z.number,
+            className: styles$A.number,
             "aria-hidden": "true",
             children: "1"
           }), jsx("h2", {
-            className: styles$z.stepTitle,
+            className: styles$A.stepTitle,
             children: "Download your return label"
           })]
         }), jsx("p", {
-          className: styles$z.body,
+          className: styles$A.body,
           children: "Tap the button below to download your pre-paid return label"
         }), ret.label_url && jsxs("a", {
-          className: styles$z.download,
+          className: styles$A.download,
           href: ret.label_url,
           target: "_blank",
           rel: "noopener noreferrer",
@@ -7143,23 +7205,23 @@ function ReturnLabelView({ ret, onDone }) {
             children: " (opens in a new tab)"
           })]
         }), ret.label_email && jsxs("p", {
-          className: styles$z.note,
+          className: styles$A.note,
           children: ["You’ll receive a shipping label PDF to your email as well.", jsx("br", {}), ret.label_email]
         })]
       }), jsxs("section", {
-        className: styles$z.step2,
+        className: styles$A.step2,
         children: [jsxs("div", {
-          className: styles$z.stepHead,
+          className: styles$A.stepHead,
           children: [jsx("span", {
-            className: styles$z.number,
+            className: styles$A.number,
             "aria-hidden": "true",
             children: "2"
           }), jsx("h2", {
-            className: styles$z.stepTitle,
+            className: styles$A.stepTitle,
             children: "Pack and ship the item"
           })]
         }), jsxs("p", {
-          className: styles$z.body2,
+          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."]
         })]
       })]
@@ -7186,7 +7248,7 @@ 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$y = {
+const styles$z = {
   page: page$4,
   titles: titles$1,
   title: title$i,
@@ -7219,42 +7281,42 @@ function ReturnTrackingView({ ret, locale: localeProp }) {
     tone: "light",
     fill: true,
     children: jsxs("div", {
-      className: styles$y.page,
+      className: styles$z.page,
       children: [jsxs("div", {
-        className: styles$y.titles,
+        className: styles$z.titles,
         children: [jsx("h1", {
-          className: styles$y.title,
+          className: styles$z.title,
           children: "Return in progress"
         }), jsx("p", {
-          className: styles$y.subtitle,
+          className: styles$z.subtitle,
           children: `Return #${ret.return_ref} · Reported ${reported}`
         })]
       }), jsx(OrderTimeline, {
         progress: ret.progress,
         locale
       }), jsx("ul", {
-        className: styles$y.items,
+        className: styles$z.items,
         children: ret.items.map((item2) => jsxs("li", {
-          className: styles$y.item,
+          className: styles$z.item,
           children: [jsx("div", {
-            className: styles$y.thumb,
+            className: styles$z.thumb,
             children: item2.image ? jsx(ShopImage, {
               src: item2.image,
               alt: "",
               fill: true,
               sizes: "48px",
-              className: styles$y.img
+              className: styles$z.img
             }) : jsx("div", {
-              className: styles$y.placeholder,
+              className: styles$z.placeholder,
               "aria-hidden": "true"
             })
           }), jsxs("div", {
-            className: styles$y.meta,
+            className: styles$z.meta,
             children: [jsx("p", {
-              className: styles$y.name,
+              className: styles$z.name,
               children: item2.title ?? item2.sku
             }), (item2.attributes?.size || pctOff(item2)) && jsxs("p", {
-              className: styles$y.attrs,
+              className: styles$z.attrs,
               children: [item2.attributes?.size && jsx("span", {
                 children: `Size: ${item2.attributes.size}`
               }), pctOff(item2) !== void 0 && jsx(SaleBadge, {
@@ -7262,12 +7324,12 @@ function ReturnTrackingView({ ret, locale: localeProp }) {
               })]
             })]
           }), jsxs("div", {
-            className: styles$y.price,
+            className: styles$z.price,
             children: [jsx("span", {
-              className: styles$y.paid,
+              className: styles$z.paid,
               children: format(item2.unit_price)
             }), item2.compare_at_unit_price && jsx("span", {
-              className: styles$y.was,
+              className: styles$z.was,
               children: format(item2.compare_at_unit_price)
             })]
           })]
@@ -7394,7 +7456,7 @@ const cancel = "_cancel_1v9my_180";
 const cancelledHead = "_cancelledHead_1v9my_204";
 const cancelledTitle = "_cancelledTitle_1v9my_210";
 const cancelledMeta = "_cancelledMeta_1v9my_219";
-const styles$x = {
+const styles$y = {
   page: page$3,
   widget,
   titleRow,
@@ -7485,7 +7547,7 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onC
   }, [load]);
   if (state === "loading") {
     return jsxs("div", {
-      className: styles$x.page,
+      className: styles$y.page,
       children: [jsx(Skeleton, {
         height: 206,
         radius: 8
@@ -7532,14 +7594,14 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onC
   }
   if (order.status === "cancelled") {
     return jsxs("div", {
-      className: styles$x.page,
+      className: styles$y.page,
       children: [jsxs("div", {
-        className: styles$x.cancelledHead,
+        className: styles$y.cancelledHead,
         children: [jsx("h1", {
-          className: styles$x.cancelledTitle,
+          className: styles$y.cancelledTitle,
           children: "Order cancelled"
         }), jsx("p", {
-          className: styles$x.cancelledMeta,
+          className: styles$y.cancelledMeta,
           children: `Order #${shortRef$1(order.order_ref)} · Placed ${placedOn(order.placed_at, locale)}`
         })]
       }), onReorder && jsx(Button, {
@@ -7563,17 +7625,17 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onC
     });
   }
   return jsxs("div", {
-    className: styles$x.page,
+    className: styles$y.page,
     children: [jsxs("section", {
-      className: styles$x.widget,
+      className: styles$y.widget,
       "aria-label": t("Delivery status"),
       children: [jsxs("div", {
-        className: styles$x.titleRow,
+        className: styles$y.titleRow,
         children: [jsx("h1", {
-          className: styles$x.headline,
+          className: styles$y.headline,
           children: `Order #${shortRef$1(order.order_ref)}`
         }), order.tracking?.url && inTransit && jsxs("a", {
-          className: styles$x.track,
+          className: styles$y.track,
           href: order.tracking.url,
           target: "_blank",
           rel: "noopener noreferrer",
@@ -7590,7 +7652,7 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onC
         locale
       })]
     }), jsx("hr", {
-      className: styles$x.rule
+      className: styles$y.rule
     }), jsx(OrderLines, {
       order
     }), jsx(ShippingAddressCard, {
@@ -7599,7 +7661,7 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onC
       order
     }), order.can_cancel && jsx("button", {
       type: "button",
-      className: styles$x.cancel,
+      className: styles$y.cancel,
       onClick: () => setCancelOpen(true),
       children: "Cancel order"
     }), jsx(NeedHelp, {
@@ -7647,14 +7709,14 @@ function NeedHelp({ order, onStartReturn, onContactSupport }) {
   const emit = useShopEvent();
   if (order.status !== "delivered") return null;
   return jsxs("section", {
-    className: styles$x.help,
+    className: styles$y.help,
     "aria-labelledby": "order-help",
     children: [jsx("h2", {
-      className: styles$x.helpTitle,
+      className: styles$y.helpTitle,
       id: "order-help",
       children: "Need help?"
     }), jsxs("div", {
-      className: styles$x.helpRows,
+      className: styles$y.helpRows,
       children: [order.can_return && onStartReturn && jsx(HelpRow, {
         label: "Start a return",
         onClick: onStartReturn
@@ -7674,7 +7736,7 @@ function NeedHelp({ order, onStartReturn, onContactSupport }) {
 function HelpRow({ label: label2, onClick }) {
   return jsxs("button", {
     type: "button",
-    className: styles$x.helpRow,
+    className: styles$y.helpRow,
     onClick,
     children: [jsx("span", {
       children: label2
@@ -7691,7 +7753,7 @@ const headline = "_headline_2uqhz_47";
 const subtitle$4 = "_subtitle_2uqhz_65";
 const rule = "_rule_2uqhz_90";
 const done = "_done_2uqhz_107";
-const styles$w = {
+const styles$x = {
   page: page$2,
   confirmed,
   title: title$h,
@@ -7744,7 +7806,7 @@ function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
   }, [load]);
   if (state === "loading") {
     return jsxs("div", {
-      className: styles$w.page,
+      className: styles$x.page,
       children: [jsx(Skeleton, {
         height: 140,
         radius: 8
@@ -7767,17 +7829,17 @@ function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
     });
   }
   return jsxs("div", {
-    className: styles$w.page,
+    className: styles$x.page,
     children: [jsxs("section", {
-      className: styles$w.confirmed,
+      className: styles$x.confirmed,
       "aria-label": "Order confirmation",
       children: [jsxs("div", {
-        className: styles$w.title,
+        className: styles$x.title,
         children: [jsx("h1", {
-          className: styles$w.headline,
+          className: styles$x.headline,
           children: "Your order is confirmed"
         }), order.email && jsx("p", {
-          className: styles$w.subtitle,
+          className: styles$x.subtitle,
           children: `We’ve sent a confirmation to ${order.email}`
         })]
       }), jsx(OrderTimeline, {
@@ -7788,7 +7850,7 @@ function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
         locale
       })]
     }), jsx("hr", {
-      className: styles$w.rule
+      className: styles$x.rule
     }), jsx(OrderLines, {
       order
     }), jsx(ShippingAddressCard, {
@@ -7798,7 +7860,7 @@ function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
     }), onDone && jsx(Button, {
       variant: "secondary",
       fullWidth: true,
-      className: styles$w.done,
+      className: styles$x.done,
       onClick: onDone,
       children: "Done"
     })]
@@ -7808,7 +7870,7 @@ const badge$2 = "_badge_ghd02_6";
 const progress = "_progress_ghd02_22";
 const delivered = "_delivered_ghd02_27";
 const cancelled = "_cancelled_ghd02_32";
-const styles$v = {
+const styles$w = {
   badge: badge$2,
   progress,
   delivered,
@@ -7833,7 +7895,7 @@ function OrderStatusBadge({ status }) {
   const label2 = LABEL[status] ?? status.replace(/_/g, " ");
   const tone = TONE[status] ?? "progress";
   return jsx("span", {
-    className: [styles$v.badge, styles$v[tone]].join(" "),
+    className: [styles$w.badge, styles$w[tone]].join(" "),
     children: t(label2)
   });
 }
@@ -7853,7 +7915,7 @@ const image$8 = "_image_6xodo_143";
 const placeholder$5 = "_placeholder_6xodo_147";
 const more = "_more_6xodo_154";
 const chevron$2 = "_chevron_6xodo_167";
-const styles$u = {
+const styles$v = {
   page: page$1,
   empty,
   cta: cta$1,
@@ -7920,7 +7982,7 @@ function OrderListContent({ onOpenOrder, onStartShopping, locale: localeProp })
   }, [load]);
   if (state === "loading") {
     return jsxs("div", {
-      className: styles$u.page,
+      className: styles$v.page,
       children: [jsx(Skeleton, {
         height: 148,
         radius: 12
@@ -7941,14 +8003,14 @@ function OrderListContent({ onOpenOrder, onStartShopping, locale: localeProp })
   }
   if (orders2.length === 0) {
     return jsx("div", {
-      className: styles$u.empty,
+      className: styles$v.empty,
       children: jsx(EmptyState, {
         title: t("Nothing here yet"),
         body: "Your orders will show up here once you've shopped.",
         ...onStartShopping ? {
           action: jsx("button", {
             type: "button",
-            className: styles$u.cta,
+            className: styles$v.cta,
             onClick: onStartShopping,
             children: "Continue shopping"
           })
@@ -7957,7 +8019,7 @@ function OrderListContent({ onOpenOrder, onStartShopping, locale: localeProp })
     });
   }
   return jsx("ul", {
-    className: styles$u.page,
+    className: styles$v.page,
     children: orders2.map((order) => jsx("li", {
       children: jsx(OrderCard, {
         order,
@@ -7972,36 +8034,36 @@ function OrderListContent({ onOpenOrder, onStartShopping, locale: localeProp })
 function OrderCard({ order, locale, onOpen }) {
   const body3 = jsxs(Fragment, {
     children: [jsxs("div", {
-      className: styles$u.head,
+      className: styles$v.head,
       children: [jsxs("div", {
-        className: styles$u.heading,
+        className: styles$v.heading,
         children: [jsx("span", {
-          className: styles$u.title,
+          className: styles$v.title,
           children: `Order #${shortRef(order.order_ref)}`
         }), jsx("span", {
-          className: styles$u.date,
+          className: styles$v.date,
           children: formatPlaced(order.placed_at, locale)
         })]
       }), jsx(OrderStatusBadge, {
         status: order.status
       })]
     }), jsxs("div", {
-      className: styles$u.bottom,
+      className: styles$v.bottom,
       children: [jsx(Thumbnails, {
         order
       }), onOpen && jsx("span", {
-        className: styles$u.chevron,
+        className: styles$v.chevron,
         children: jsx(Chevron, {})
       })]
     })]
   });
   if (!onOpen) return jsx("div", {
-    className: styles$u.card,
+    className: styles$v.card,
     children: body3
   });
   return jsx("button", {
     type: "button",
-    className: [styles$u.card, styles$u.tappable].join(" "),
+    className: [styles$v.card, styles$v.tappable].join(" "),
     onClick: onOpen,
     "aria-label": `Order ${shortRef(order.order_ref)}, ${order.headline}`,
     children: body3
@@ -8013,27 +8075,27 @@ function Thumbnails({ order }) {
   const overflow = images.length >= TILES && hidden > 1 ? hidden : 0;
   if (images.length === 0) {
     return jsx("div", {
-      className: styles$u.strip,
+      className: styles$v.strip,
       children: jsx("div", {
-        className: [styles$u.tile, styles$u.placeholder].join(" "),
+        className: [styles$v.tile, styles$v.placeholder].join(" "),
         "aria-hidden": "true"
       })
     });
   }
   return jsx("div", {
-    className: styles$u.strip,
+    className: styles$v.strip,
     children: images.map((src, i) => {
       const last = i === images.length - 1;
       return jsxs("div", {
-        className: styles$u.tile,
+        className: styles$v.tile,
         children: [jsx(ShopImage, {
           src,
           alt: "",
           fill: true,
           sizes: "56px",
-          className: styles$u.image
+          className: styles$v.image
         }), overflow > 0 && last && jsxs("span", {
-          className: styles$u.more,
+          className: styles$v.more,
           children: [jsxs("span", {
             "aria-hidden": "true",
             children: ["+", overflow]
@@ -8059,21 +8121,45 @@ function formatPlaced(iso, locale) {
     year: "numeric"
   })}`;
 }
-const tile$1 = "_tile_1a177_7";
-const media$2 = "_media_1a177_15";
-const image$7 = "_image_1a177_25";
-const placeholder$4 = "_placeholder_1a177_29";
-const topBadge = "_topBadge_1a177_37";
-const saleBadge$2 = "_saleBadge_1a177_78";
-const oos$3 = "_oos_1a177_86";
-const bottom = "_bottom_1a177_113";
-const titlePrice$1 = "_titlePrice_1a177_100";
-const title$f = "_title_1a177_5";
-const swatches = "_swatches_1a177_181";
-const swatch = "_swatch_1a177_181";
-const swatchActive = "_swatchActive_1a177_198";
-const swatchDot = "_swatchDot_1a177_202";
-const large = "_large_1a177_213";
+const swatches = "_swatches_mdi63_1";
+const swatch = "_swatch_mdi63_1";
+const swatchActive = "_swatchActive_mdi63_18";
+const swatchDot = "_swatchDot_mdi63_22";
+const styles$u = {
+  swatches,
+  swatch,
+  swatchActive,
+  swatchDot
+};
+function ColourSwatches({ variants, className }) {
+  const colours = colourOptions(variants);
+  if (colours.length === 0) return null;
+  return jsx("div", {
+    className: [styles$u.swatches, className ?? ""].join(" ").trim(),
+    "aria-hidden": "true",
+    children: colours.map((c, i) => jsx("span", {
+      className: [styles$u.swatch, i === 0 ? styles$u.swatchActive : ""].join(" "),
+      children: jsx("span", {
+        className: styles$u.swatchDot,
+        style: {
+          background: swatchColour(c.value)
+        }
+      })
+    }, c.value))
+  });
+}
+const tile$1 = "_tile_yg69t_7";
+const media$2 = "_media_yg69t_15";
+const image$7 = "_image_yg69t_25";
+const placeholder$4 = "_placeholder_yg69t_29";
+const topBadge = "_topBadge_yg69t_37";
+const saleBadge$2 = "_saleBadge_yg69t_78";
+const oos$3 = "_oos_yg69t_86";
+const bottom = "_bottom_yg69t_113";
+const titlePrice$1 = "_titlePrice_yg69t_100";
+const title$f = "_title_yg69t_5";
+const large = "_large_yg69t_185";
+const swatchSlot = "_swatchSlot_yg69t_223";
 const styles$t = {
   tile: tile$1,
   media: media$2,
@@ -8085,18 +8171,14 @@ const styles$t = {
   bottom,
   titlePrice: titlePrice$1,
   title: title$f,
-  swatches,
-  swatch,
-  swatchActive,
-  swatchDot,
-  large
+  large,
+  swatchSlot
 };
 function ProductTile({ product, priority, size = "default" }) {
   const image2 = product.media[0];
   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 swatches2 = colourOptions(product.variants);
   return jsxs(ShopLink, {
     to: `/product/${encodeURIComponent(product.sku)}`,
     className: [styles$t.tile, size === "large" ? styles$t.large : ""].join(" "),
@@ -8138,36 +8220,28 @@ function ProductTile({ product, priority, size = "default" }) {
           variant: "strikethrough",
           align: "end"
         })]
-      }), swatches2.length > 0 && jsx("div", {
-        className: styles$t.swatches,
-        "aria-hidden": "true",
-        children: swatches2.map((c, i) => jsx("span", {
-          className: [styles$t.swatch, i === 0 ? styles$t.swatchActive : ""].join(" "),
-          children: jsx("span", {
-            className: styles$t.swatchDot,
-            style: {
-              background: swatchColour(c.value)
-            }
-          })
-        }, c.value))
+      }), jsx(ColourSwatches, {
+        variants: product.variants,
+        className: styles$t.swatchSlot
       })]
     })]
   });
 }
-const section$3 = "_section_1n5an_5";
-const title$e = "_title_1n5an_17";
-const link = "_link_1n5an_26";
-const track$4 = "_track_1n5an_38";
-const frame = "_frame_1n5an_58";
-const image$6 = "_image_1n5an_69";
-const placeholder$3 = "_placeholder_1n5an_73";
-const saleBadge$1 = "_saleBadge_1n5an_85";
-const oos$2 = "_oos_1n5an_93";
-const caption = "_caption_1n5an_109";
-const name = "_name_1n5an_122";
-const price$1 = "_price_1n5an_135";
-const paid = "_paid_1n5an_144";
-const was$1 = "_was_1n5an_150";
+const section$3 = "_section_v48ok_9";
+const title$e = "_title_v48ok_21";
+const link = "_link_v48ok_30";
+const track$4 = "_track_v48ok_42";
+const frame = "_frame_v48ok_62";
+const image$6 = "_image_v48ok_73";
+const placeholder$3 = "_placeholder_v48ok_77";
+const saleBadge$1 = "_saleBadge_v48ok_89";
+const oos$2 = "_oos_v48ok_97";
+const caption = "_caption_v48ok_113";
+const swatchRow = "_swatchRow_v48ok_132";
+const name = "_name_v48ok_142";
+const price$1 = "_price_v48ok_155";
+const paid = "_paid_v48ok_164";
+const was$1 = "_was_v48ok_170";
 const styles$s = {
   section: section$3,
   title: title$e,
@@ -8179,6 +8253,7 @@ const styles$s = {
   saleBadge: saleBadge$1,
   oos: oos$2,
   caption,
+  swatchRow,
   name,
   price: price$1,
   paid,
@@ -8246,6 +8321,9 @@ function ProductGallery({ title: title2, product }) {
               children: format(product.compare_at)
             })]
           })]
+        }), jsx(ColourSwatches, {
+          variants: product.variants,
+          className: styles$s.swatchRow
         })]
       })]
     })]
@@ -10194,14 +10272,14 @@ function LifestyleText({ text: text2, align = "center" }) {
     children: text2
   });
 }
-const wrap = "_wrap_9mquf_1";
-const box = "_box_9mquf_5";
-const track$1 = "_track_9mquf_15";
-const slide = "_slide_9mquf_31";
-const image$1 = "_image_9mquf_38";
-const dots$1 = "_dots_9mquf_43";
-const dot$1 = "_dot_9mquf_43";
-const dotActive$1 = "_dotActive_9mquf_63";
+const wrap = "_wrap_79nr3_10";
+const box = "_box_79nr3_14";
+const track$1 = "_track_79nr3_23";
+const slide = "_slide_79nr3_39";
+const image$1 = "_image_79nr3_46";
+const dots$1 = "_dots_79nr3_51";
+const dot$1 = "_dot_79nr3_51";
+const dotActive$1 = "_dotActive_79nr3_76";
 const styles$7 = {
   wrap,
   box,
@@ -10601,29 +10679,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,
@@ -10637,7 +10714,8 @@ const styles$2 = {
   copy,
   title: title$2,
   subtitle: subtitle$1,
-  cta
+  cta,
+  mosaic
 };
 const SETTLE_MS = 150;
 function useDocumentSnap(ref, enabled = true) {
@@ -10670,40 +10748,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", {
@@ -10714,7 +10781,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,
@@ -10740,6 +10812,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();
@@ -10763,6 +10848,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
         }
@@ -10790,16 +10878,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", {
@@ -10835,9 +10919,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, {})]
     })
   });
 }
@@ -11353,6 +11439,7 @@ export {
   ShopLink,
   ShopMenuSheet,
   ShopSurface,
+  ShopVideo,
   SizeGuideSheet,
   SizeSelector,
   Skeleton,