@nok-integration/storefront-react 0.19.14 → 0.19.15

package/dist/index.d.ts

@@ -2503,6 +2503,7 @@ declare function createClient(options: ClientOptions): {
                 cta: string;
                 image?: string | undefined;
                 target?: string | undefined;
+                video?: string | undefined;
                 focal_y?: number | undefined;
             }[];
         }>;
@@ -2858,6 +2859,7 @@ declare function createClient(options: ClientOptions): {
                     amount: number;
                     currency: string;
                 } | undefined;
+                returned_qty?: number | undefined;
             }[];
             totals: {
                 shipping: {
@@ -2951,6 +2953,7 @@ declare function createClient(options: ClientOptions): {
                     amount: number;
                     currency: string;
                 } | undefined;
+                returned_qty?: number | undefined;
             }[];
             totals: {
                 shipping: {
@@ -3729,6 +3732,20 @@ declare const OrderDetail: z.ZodObject<{
          */
         cancelled_qty: z.ZodNumber;
         refunded_qty: z.ZodNumber;
+        /**
+         * Units already reported as coming back.
+         *
+         * **The returns screen cannot compute what is left without it, and got it wrong.** The
+         * engine refuses a return of more than `qty - cancelled_qty - refunded_qty - returned_qty`
+         * (`returns.service`), and this was the only one of those four not on the wire — so a
+         * line returned in full still offered its full quantity, and choosing it answered 400
+         * `invalid_request` with "Only 0 of line_1 can be returned". Seen on UAT order 611887,
+         * 28 Aug.
+         *
+         * Optional so an engine that predates it stays valid; absent means zero, which is what a
+         * consumer already assumed.
+         */
+        returned_qty: z.ZodOptional<z.ZodNumber>;
     }, "strip", z.ZodTypeAny, {
         sku: string;
         qty: number;
@@ -3750,6 +3767,7 @@ declare const OrderDetail: z.ZodObject<{
         title?: string | undefined;
         image?: string | undefined;
         attributes?: Record<string, string> | undefined;
+        returned_qty?: number | undefined;
     }, {
         sku: string;
         qty: number;
@@ -3771,6 +3789,7 @@ declare const OrderDetail: z.ZodObject<{
         title?: string | undefined;
         image?: string | undefined;
         attributes?: Record<string, string> | undefined;
+        returned_qty?: number | undefined;
     }>, "many">;
     ship_to: z.ZodObject<{
         name: z.ZodString;
@@ -3951,6 +3970,7 @@ declare const OrderDetail: z.ZodObject<{
         title?: string | undefined;
         image?: string | undefined;
         attributes?: Record<string, string> | undefined;
+        returned_qty?: number | undefined;
     }[];
     totals: {
         shipping: {
@@ -4037,6 +4057,7 @@ declare const OrderDetail: z.ZodObject<{
         title?: string | undefined;
         image?: string | undefined;
         attributes?: Record<string, string> | undefined;
+        returned_qty?: number | undefined;
     }[];
     totals: {
         shipping: {
@@ -5769,6 +5790,51 @@ export declare interface ShopSurfaceProps extends Omit<ComponentPropsWithoutRef<
 
 export declare type ShopTone = 'dark' | 'light';
 
+/**
+ * Full-bleed background video: muted, looping, inline, and never showing a control.
+ *
+ * The four attributes below are not stylistic. `muted` and `playsInline` together are the
+ * only combination iOS will start without a gesture — a video that is unmuted, or that is
+ * allowed to go fullscreen, simply does not play, and the panel shows its poster forever.
+ * `loop` is the brief. `controls` is absent because this is artwork behind copy, not a
+ * player: a tap belongs to the CTA stretched over the panel, and a play button in the
+ * middle of a category slide would sit directly on that hit area.
+ *
+ * **Playback follows visibility.** The shop entry is five full-screen panels, so a naive
+ * page decodes five simultaneous streams for four panels nobody is looking at. Each clip
+ * starts when its panel comes into view and pauses when it leaves, which keeps one video
+ * decoding at a time. Fetching is deferred the same way: `preload="none"` until the
+ * observer fires, so a fan who never scrolls past the hero pays for the hero alone.
+ *
+ * **Reduced motion is honoured by not playing at all.** Autoplaying background video is
+ * exactly what the preference is about, and there is a good still to fall back to — the
+ * poster is frame 0 of the clip, so the panel is the design's own opening frame rather
+ * than an empty box. The preference is read live rather than once: a fan can change it
+ * while the page is open, and on iOS it changes with the low-power setting.
+ */
+export declare function ShopVideo({ src, poster, fill, className, style, priority, }: ShopVideoProps): JSX.Element;
+
+export declare interface ShopVideoProps {
+    src: string;
+    /**
+     * Still shown until the first frame decodes, and the only thing shown when motion is
+     * reduced. Cut from frame 0 of `src` so there is no jump when playback starts.
+     */
+    poster?: string;
+    /**
+     * Fill the positioned ancestor, as `ShopImage`'s `fill` does. The parent must be
+     * `position: relative` (or absolute/fixed) — same requirement, same reason.
+     */
+    fill?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    /**
+     * Above the fold. Fetches the file immediately instead of waiting for the panel to come
+     * into view. One video per screen should carry this; the rest should not.
+     */
+    priority?: boolean;
+}
+
 /**
  * Sizing help, shown in the PDP "Size guide" overlay (Figma `size-guide`, 4882:58365).
  *

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,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",
@@ -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",
@@ -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) {
@@ -10601,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,
@@ -10637,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) {
@@ -10670,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", {
@@ -10714,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,
@@ -10740,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();
@@ -10763,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
         }
@@ -10790,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", {
@@ -10835,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, {})]
     })
   });
 }
@@ -11353,6 +11423,7 @@ export {
   ShopLink,
   ShopMenuSheet,
   ShopSurface,
+  ShopVideo,
   SizeGuideSheet,
   SizeSelector,
   Skeleton,

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",
@@ -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",
@@ -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) {
@@ -10601,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,
@@ -10637,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) {
@@ -10670,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", {
@@ -10714,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,
@@ -10740,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();
@@ -10763,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
         }
@@ -10790,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", {
@@ -10835,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, {})]
     })
   });
 }
@@ -11353,6 +11423,7 @@ export {
   ShopLink,
   ShopMenuSheet,
   ShopSurface,
+  ShopVideo,
   SizeGuideSheet,
   SizeSelector,
   Skeleton,

package/dist/standalone/styles.css

@@ -3423,10 +3423,10 @@
   column-gap: var(--space-12);
   row-gap: var(--space-24);
 }
-._showcase_a0wva_39 {
+._showcase_144lm_44 {
   background: #080e12;
 }
-._panel_a0wva_43 {
+._panel_144lm_48 {
   position: relative;
   height: calc(100lvh - var(--showcase-top, 0px));
   scroll-snap-align: start;
@@ -3434,39 +3434,28 @@
   overflow: hidden;
   background: #080e12;
 }
-._image_a0wva_71 {
+._image_144lm_76 {
   object-fit: cover;
   object-position: 50% var(--slide-focal-y, 50%);
 }
-._heroImageBox_a0wva_119 {
-  position: absolute;
-  top: 31px;
-  left: 0;
-  right: 0;
-  aspect-ratio: 750 / 1348;
-  overflow: hidden;
-}
-._hero_a0wva_119::after {
+._hero_144lm_116::after {
   content: "";
   position: absolute;
   inset: 0;
   background:
     linear-gradient(
       to bottom,
-      rgba(8, 14, 18, 1) 39px,
-      rgba(8, 14, 18, 0) 119px),
+      rgba(8, 14, 18, 0.45) 118px,
+      rgba(8, 14, 18, 0) 180px),
     linear-gradient(
-      to bottom,
-      rgba(8, 14, 18, 0) 18%,
-      rgba(8, 14, 18, 1) 90%);
+      to top,
+      rgba(8, 14, 18, 0.6) 330px,
+      rgba(8, 14, 18, 0) 520px);
   pointer-events: none;
 }
-._hero_a0wva_119 ._image_a0wva_71 {
-  object-position: top;
-}
-._hero_a0wva_119 ._heroContent_a0wva_190 {
+._hero_144lm_116 ._heroContent_144lm_174 {
   position: absolute;
-  bottom: 0;
+  bottom: 32px;
   left: 0;
   right: 0;
   z-index: 1;
@@ -3475,7 +3464,7 @@
   gap: 24px;
   align-items: stretch;
 }
-._heroText_a0wva_207 {
+._heroText_144lm_197 {
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -3483,11 +3472,11 @@
   padding: 0 24px;
   text-align: center;
 }
-._heroText_a0wva_207 ._logo_a0wva_216 {
+._heroText_144lm_197 ._logo_144lm_206 {
   width: 48px;
   height: 48px;
 }
-._heroTitle_a0wva_236 {
+._heroTitle_144lm_226 {
   width: 100%;
   margin: 0;
   font-family:
@@ -3502,34 +3491,33 @@
   letter-spacing: -1.12px;
   color: #f9fafa;
 }
-._heroSub_a0wva_260 {
+._heroSub_144lm_250 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
   max-width: 327px;
 }
-._swipe_a0wva_273 {
+._swipe_144lm_269 {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 6px;
   padding: 8px 0;
-  background: #080e12;
 }
-._swipeLabel_a0wva_281 {
+._swipeLabel_144lm_276 {
   margin: 0;
   font-size: 14px;
   line-height: 1;
   color: rgba(255, 255, 255, 0.54);
 }
-._chevron_a0wva_287 {
+._chevron_144lm_282 {
   width: 24px;
   height: 24px;
   color: rgba(255, 255, 255, 0.54);
-  animation: _bob_a0wva_1 1.8s ease-in-out infinite;
+  animation: _bob_144lm_1 1.8s ease-in-out infinite;
 }
-@keyframes _bob_a0wva_1 {
+@keyframes _bob_144lm_1 {
   0%, 100% {
     transform: translateY(0);
   }
@@ -3537,10 +3525,15 @@
     transform: translateY(4px);
   }
 }
-._overlay_a0wva_304 {
+._overlay_144lm_11 {
   position: absolute;
   inset: 0;
   z-index: 1;
+  background:
+    linear-gradient(
+      to top,
+      rgba(8, 14, 18, 0.6) 260px,
+      rgba(8, 14, 18, 0) 460px);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
@@ -3548,25 +3541,25 @@
   align-items: flex-start;
   padding: 0 24px 24px;
 }
-._copy_a0wva_315 {
+._copy_144lm_315 {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
-._title_a0wva_320 {
+._title_144lm_320 {
   margin: 0;
   font-size: 32px;
   line-height: 1.2;
   font-weight: 700;
   color: #f9fafa;
 }
-._subtitle_a0wva_327 {
+._subtitle_144lm_327 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
 }
-._cta_a0wva_333 {
+._cta_144lm_333 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3580,18 +3573,21 @@
   font-weight: 700;
   text-decoration: none;
 }
-._cta_a0wva_333::after {
+._cta_144lm_333::after {
   content: "";
   position: absolute;
   inset: 0;
 }
-._cta_a0wva_333:active {
+._cta_144lm_333:active {
   background: rgba(249, 250, 250, 0.12);
 }
-._cta_a0wva_333:focus-visible {
+._cta_144lm_333:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
+._mosaic_144lm_377 {
+  background: #080e12;
+}
 ._header_8o3d7_25 {
   position: sticky;
   top: 0;

package/dist/styles.css

@@ -3423,10 +3423,10 @@
   column-gap: var(--space-12);
   row-gap: var(--space-24);
 }
-._showcase_a0wva_39 {
+._showcase_144lm_44 {
   background: #080e12;
 }
-._panel_a0wva_43 {
+._panel_144lm_48 {
   position: relative;
   height: calc(100lvh - var(--showcase-top, 0px));
   scroll-snap-align: start;
@@ -3434,39 +3434,28 @@
   overflow: hidden;
   background: #080e12;
 }
-._image_a0wva_71 {
+._image_144lm_76 {
   object-fit: cover;
   object-position: 50% var(--slide-focal-y, 50%);
 }
-._heroImageBox_a0wva_119 {
-  position: absolute;
-  top: 31px;
-  left: 0;
-  right: 0;
-  aspect-ratio: 750 / 1348;
-  overflow: hidden;
-}
-._hero_a0wva_119::after {
+._hero_144lm_116::after {
   content: "";
   position: absolute;
   inset: 0;
   background:
     linear-gradient(
       to bottom,
-      rgba(8, 14, 18, 1) 39px,
-      rgba(8, 14, 18, 0) 119px),
+      rgba(8, 14, 18, 0.45) 118px,
+      rgba(8, 14, 18, 0) 180px),
     linear-gradient(
-      to bottom,
-      rgba(8, 14, 18, 0) 18%,
-      rgba(8, 14, 18, 1) 90%);
+      to top,
+      rgba(8, 14, 18, 0.6) 330px,
+      rgba(8, 14, 18, 0) 520px);
   pointer-events: none;
 }
-._hero_a0wva_119 ._image_a0wva_71 {
-  object-position: top;
-}
-._hero_a0wva_119 ._heroContent_a0wva_190 {
+._hero_144lm_116 ._heroContent_144lm_174 {
   position: absolute;
-  bottom: 0;
+  bottom: 32px;
   left: 0;
   right: 0;
   z-index: 1;
@@ -3475,7 +3464,7 @@
   gap: 24px;
   align-items: stretch;
 }
-._heroText_a0wva_207 {
+._heroText_144lm_197 {
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -3483,11 +3472,11 @@
   padding: 0 24px;
   text-align: center;
 }
-._heroText_a0wva_207 ._logo_a0wva_216 {
+._heroText_144lm_197 ._logo_144lm_206 {
   width: 48px;
   height: 48px;
 }
-._heroTitle_a0wva_236 {
+._heroTitle_144lm_226 {
   width: 100%;
   margin: 0;
   font-family:
@@ -3502,34 +3491,33 @@
   letter-spacing: -1.12px;
   color: #f9fafa;
 }
-._heroSub_a0wva_260 {
+._heroSub_144lm_250 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
   max-width: 327px;
 }
-._swipe_a0wva_273 {
+._swipe_144lm_269 {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 6px;
   padding: 8px 0;
-  background: #080e12;
 }
-._swipeLabel_a0wva_281 {
+._swipeLabel_144lm_276 {
   margin: 0;
   font-size: 14px;
   line-height: 1;
   color: rgba(255, 255, 255, 0.54);
 }
-._chevron_a0wva_287 {
+._chevron_144lm_282 {
   width: 24px;
   height: 24px;
   color: rgba(255, 255, 255, 0.54);
-  animation: _bob_a0wva_1 1.8s ease-in-out infinite;
+  animation: _bob_144lm_1 1.8s ease-in-out infinite;
 }
-@keyframes _bob_a0wva_1 {
+@keyframes _bob_144lm_1 {
   0%, 100% {
     transform: translateY(0);
   }
@@ -3537,10 +3525,15 @@
     transform: translateY(4px);
   }
 }
-._overlay_a0wva_304 {
+._overlay_144lm_11 {
   position: absolute;
   inset: 0;
   z-index: 1;
+  background:
+    linear-gradient(
+      to top,
+      rgba(8, 14, 18, 0.6) 260px,
+      rgba(8, 14, 18, 0) 460px);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
@@ -3548,25 +3541,25 @@
   align-items: flex-start;
   padding: 0 24px 24px;
 }
-._copy_a0wva_315 {
+._copy_144lm_315 {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
-._title_a0wva_320 {
+._title_144lm_320 {
   margin: 0;
   font-size: 32px;
   line-height: 1.2;
   font-weight: 700;
   color: #f9fafa;
 }
-._subtitle_a0wva_327 {
+._subtitle_144lm_327 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
 }
-._cta_a0wva_333 {
+._cta_144lm_333 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3580,18 +3573,21 @@
   font-weight: 700;
   text-decoration: none;
 }
-._cta_a0wva_333::after {
+._cta_144lm_333::after {
   content: "";
   position: absolute;
   inset: 0;
 }
-._cta_a0wva_333:active {
+._cta_144lm_333:active {
   background: rgba(249, 250, 250, 0.12);
 }
-._cta_a0wva_333:focus-visible {
+._cta_144lm_333:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
+._mosaic_144lm_377 {
+  background: #080e12;
+}
 ._header_8o3d7_25 {
   position: sticky;
   top: 0;

package/package.json

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