@nok-integration/storefront-react 0.19.38 → 0.19.40

package/dist/index.d.ts

@@ -2089,6 +2089,10 @@ declare type CategoryPage = z.infer<typeof CategoryPage>;
  *
  * Fetching happens on mount, client-side, through the provider's client — so it inherits
  * the host's session and market without being told about either.
+ *
+ * The page is held under the CODE it belongs to and read back only while that code is
+ * still the one being asked for, so a change of `code` never leaves the previous category
+ * on screen while the next one loads.
  */
 export declare function CategoryView({ code, initialData, onNotFound }: CategoryViewProps): JSX.Element;
 
@@ -2100,6 +2104,10 @@ export declare interface CategoryViewProps {
      * synchronously on the first frame — no skeleton, no waterfall — and revalidated in the
      * background, because a server-rendered page can be arbitrarily old by the time it is
      * interactive and price and availability are the two things worst served by being stale.
+     *
+     * Matched against `code` on every render, not only at mount, so a host that swaps both
+     * together has the new page painted immediately. A page for a different code is ignored
+     * rather than shown.
      */
     initialData?: CategoryPage;
     /**
@@ -4803,6 +4811,19 @@ declare const Product: z.ZodObject<{
 
 declare type Product = z.infer<typeof Product>;
 
+declare class ProductCache {
+    private readonly now;
+    private readonly entries;
+    /** Injectable so the age limit can be tested without leaning on timers. */
+    constructor(now?: () => number);
+    private static keyFor;
+    get(sku: string, market?: Market): Product | undefined;
+    set(product: Product, market?: Market): void;
+    setMany(products: readonly Product[], market?: Market): void;
+    /** Test seam. Nothing in the SDK calls this. */
+    clear(): void;
+}
+
 /**
  * 4.3 PDP interactive surface, aligned to the DAZN mobile PDP design. Sections render
  * from server-authoritative contract data: badges, title + price, promo nudge, description
@@ -4950,11 +4971,10 @@ declare type ProductVariant = z.infer<typeof ProductVariant>;
 /**
  * A whole product-detail screen, data fetching included — a **level 1 view**.
  *
- * Fetches the product, then enriches it with inventory and recommendations. Those two are
- * deliberately best-effort: the PDP renders perfectly well without either, so a failure in
- * one must not fault the screen. `Promise.allSettled` rather than `all` is what makes that
- * true — with `all`, a recommendations outage would blank a page the fan could otherwise
- * have bought from.
+ * All of the fetching lives in {@link useProduct}, which is exported: a host composing its
+ * own product screen from level-2 pieces gets the same behaviour rather than writing it
+ * again. Switching between two items paints the new one immediately wherever the rail
+ * already carried it, and never leaves the outgoing item up while the next one loads.
  *
  * `sku_not_found` is separated from the generic error path because it is not a fault: the
  * product is gone, and "this is no longer available" is the honest thing to say. An error
@@ -5538,6 +5558,8 @@ export declare function ShippingInfo(): JSX.Element;
 declare interface ShopContextValue {
     api: DaznClient;
     market?: Market;
+    /** Products this provider has already been given — see {@link ProductCache}. */
+    products: ProductCache;
     theme: 'light' | 'dark' | 'auto';
     notifications: 'internal' | 'host';
     locale?: string;
@@ -6395,6 +6417,56 @@ export declare function useMoney(defaultLocale?: string): {
  */
 export declare function useNavigate(): ((to: ShopRoute) => void) | null;
 
+/**
+ * The data behind a product screen: the product, then inventory and recommendations.
+ *
+ * This is what {@link ProductView} is built from, exported so a host composing its own
+ * product screen from the level-2 pieces does not have to write the fetching again. Two
+ * properties are worth knowing about, because a hand-rolled version has to reproduce both.
+ *
+ * **Everything is held under the SKU it belongs to**, and read back only while that SKU is
+ * still the one being asked for. A change of `sku` invalidates the whole set in the same
+ * render that changes it, so the outgoing product is never left on screen while the next
+ * one loads, and there is no frame in which one item's title sits above another item's
+ * price.
+ *
+ * **A product already in memory is painted at once.** The recommendation rail carries whole
+ * products, so opening one of them is usually drawn on the first frame and corrected a
+ * moment later, rather than spending a round trip behind a skeleton. Inventory and
+ * recommendations always come from the request — they are the two things worst served by
+ * being remembered, and neither is needed to draw the top of the screen.
+ *
+ * Inventory and recommendations are best-effort: the screen renders perfectly well without
+ * either, so a failure in one does not fault it.
+ */ export declare function useProduct(sku: string, options?: UseProductOptions): UseProductResult;
+
+export declare interface UseProductOptions {
+    /**
+     * An already-fetched product, from a host that server-rendered this screen. Painted on
+     * the first frame and revalidated in the background.
+     *
+     * Read on every render, not only at mount, so a host that swaps `sku` and `initialData`
+     * together has the new product painted immediately. It is matched against `sku` before
+     * use: a product for a different SKU is ignored rather than shown.
+     */
+    initialData?: {
+        product: Product;
+        inventory?: Inventory | null;
+    };
+    /** Fetch the "you may also like" rail. Default `true`. */
+    showRecommendations?: boolean;
+}
+
+export declare interface UseProductResult {
+    /** Null until there is something to draw for this SKU. */
+    product: Product | null;
+    inventory: Inventory | null;
+    recommendations: Product[];
+    /** Nothing to draw yet and nothing has gone wrong — it is still on its way. */
+    loading: boolean;
+    error: ReturnType<typeof codeOf> | undefined;
+}
+
 /** The typed, schema-validating commerce client. Requires a provider. */
 export declare function useShopApi(): DaznClient;
 

package/dist/index.mjs

@@ -5112,6 +5112,49 @@ function resolveAssetUrl(src, base) {
   if (!src.startsWith("/") || src.startsWith("//")) return src;
   return `${base.replace(/\/+$/, "")}${src}`;
 }
+const MAX_AGE_MS = 5 * 6e4;
+const CAPACITY = 60;
+class ProductCache {
+  constructor(now = () => Date.now()) {
+    this.now = now;
+  }
+  now;
+  entries = /* @__PURE__ */ new Map();
+  static keyFor(sku, market) {
+    return `${market?.country ?? ""}\0${market?.lang ?? ""}\0${sku}`;
+  }
+  get(sku, market) {
+    const key = ProductCache.keyFor(sku, market);
+    const entry = this.entries.get(key);
+    if (!entry) return void 0;
+    if (this.now() - entry.at > MAX_AGE_MS) {
+      this.entries.delete(key);
+      return void 0;
+    }
+    this.entries.delete(key);
+    this.entries.set(key, entry);
+    return entry.product;
+  }
+  set(product, market) {
+    const key = ProductCache.keyFor(product.sku, market);
+    this.entries.delete(key);
+    this.entries.set(key, {
+      product,
+      at: this.now()
+    });
+    while (this.entries.size > CAPACITY) {
+      const oldest = this.entries.keys().next();
+      if (oldest.done) break;
+      this.entries.delete(oldest.value);
+    }
+  }
+  setMany(products, market) {
+    for (const product of products) this.set(product, market);
+  }
+  clear() {
+    this.entries.clear();
+  }
+}
 function createShopFetch(opts) {
   const baseFetch = opts.fetchImpl ?? globalThis.fetch;
   if (!baseFetch) throw new Error("No fetch implementation available");
@@ -5226,6 +5269,9 @@ function DaznShopProvider({ children, ...config }) {
   const getTokenRef = useRef(getToken);
   getTokenRef.current = getToken;
   const stableGetToken = useCallback(() => getTokenRef.current(), []);
+  const productsRef = useRef(null);
+  productsRef.current ??= new ProductCache();
+  const products = productsRef.current;
   const emit = useCallback((event) => {
     for (const listener of listeners.current) {
       try {
@@ -5266,6 +5312,7 @@ function DaznShopProvider({ children, ...config }) {
   const value2 = useMemo(() => ({
     api,
     market,
+    products,
     theme,
     notifications,
     locale,
@@ -5273,7 +5320,7 @@ function DaznShopProvider({ children, ...config }) {
     emit,
     subscribe,
     navigate
-  }), [api, market, theme, notifications, locale, assetBaseUrl, emit, subscribe, navigate]);
+  }), [api, market, products, theme, notifications, locale, assetBaseUrl, emit, subscribe, navigate]);
   return jsx(ShopContext.Provider, {
     value: value2,
     children: jsx(ScreenTitleProvider, {
@@ -5476,8 +5523,8 @@ function Skeleton({ width, height, radius, className, circle }) {
     style
   });
 }
-const surface$1 = "_surface_cfqo9_10";
-const fill = "_fill_cfqo9_35";
+const surface$1 = "_surface_zq8bq_10";
+const fill = "_fill_zq8bq_35";
 const styles$O = {
   surface: surface$1,
   fill
@@ -10710,32 +10757,51 @@ function CategoryContent({ page: page2 }) {
     })]
   });
 }
+function productsIn(page2) {
+  const found = [];
+  for (const block of page2.blocks) {
+    if (block.kind === "rail" || block.kind === "grid") found.push(...block.products);
+    else if (block.kind === "featured" || block.kind === "product_gallery") found.push(block.product);
+  }
+  return found;
+}
 function CategoryView({ code, initialData, onNotFound }) {
   const t = useT();
-  const { api, market, emit } = useShop();
-  const [page2, setPage] = useState(initialData ?? null);
-  const [error2, setError] = useState();
-  const [loading, setLoading] = useState(!initialData);
+  const { api, market, emit, products } = useShop();
+  const [loaded, setLoaded] = useState(null);
+  const [failure, setFailure] = useState(null);
+  const settled = loaded?.code === code;
+  const seeded = initialData && initialData.code === code ? initialData : void 0;
+  const page2 = (settled ? loaded?.page : void 0) ?? seeded ?? null;
+  const error2 = failure?.code === code ? failure.error : void 0;
+  const loading = !page2 && !error2 && !settled;
   useEffect(() => {
     let live = true;
-    setError(void 0);
     api.catalog.getCategoryPage(code, market).then((res) => {
+      const fetched = res;
+      products.setMany(productsIn(fetched), market);
       if (!live) return;
-      setPage(res);
+      setLoaded({
+        code,
+        page: fetched
+      });
     }).catch((err) => {
       if (!live) return;
       const c = codeOf(err);
-      setError(c);
+      setFailure({
+        code,
+        error: c
+      });
       emit({
         type: "error",
         code: c,
         scope: "category"
       });
-    }).finally(() => live && setLoading(false));
+    });
     return () => {
       live = false;
     };
-  }, [api, code, market, emit]);
+  }, [api, code, market, emit, products]);
   if (error2 === "category_not_found" && onNotFound) return jsx(Fragment, {
     children: onNotFound()
   });
@@ -10756,23 +10822,22 @@ function CategoryView({ code, initialData, onNotFound }) {
     })
   });
 }
-function ProductView({ sku, initialData, showRecommendations = true, onNotFound }) {
-  const t = useT();
-  const { api, market, emit } = useShop();
-  const [loaded, setLoaded] = useState(initialData ? {
-    sku,
-    product: initialData.product,
-    inventory: initialData.inventory ?? null,
-    recommendations: []
-  } : null);
+function useProduct(sku, options2 = {}) {
+  const { initialData, showRecommendations = true } = options2;
+  const { api, market, emit, products } = useShop();
+  const [loaded, setLoaded] = useState(null);
   const [failure, setFailure] = useState(null);
   const current2 = loaded?.sku === sku ? loaded : null;
   const error2 = failure?.sku === sku ? failure.code : void 0;
+  const seeded = initialData && initialData.product.sku === sku ? initialData.product : products.get(sku, market);
+  const product = current2?.product ?? seeded ?? null;
+  const inventory2 = current2 ? current2.inventory : initialData && initialData.product.sku === sku ? initialData.inventory ?? null : null;
   useEffect(() => {
     let live = true;
     (async () => {
       try {
         const p = await api.catalog.getProduct(sku, market);
+        products.set(p, market);
         if (!live) return;
         setLoaded({
           sku,
@@ -10784,12 +10849,14 @@ function ProductView({ sku, initialData, showRecommendations = true, onNotFound
         const [inv, recs] = await Promise.allSettled([hasVariants ? Promise.resolve(null) : api.inventory.get(sku), showRecommendations ? api.catalog.getRecommendations(sku, market) : Promise.resolve({
           data: []
         })]);
+        const recommendations = recs.status === "fulfilled" ? recs.value.data : [];
+        products.setMany(recommendations, market);
         if (!live) return;
         setLoaded({
           sku,
           product: p,
           inventory: inv.status === "fulfilled" ? inv.value : null,
-          recommendations: recs.status === "fulfilled" ? recs.value.data : []
+          recommendations
         });
       } catch (err) {
         if (!live) return;
@@ -10808,7 +10875,23 @@ function ProductView({ sku, initialData, showRecommendations = true, onNotFound
     return () => {
       live = false;
     };
-  }, [api, sku, market, emit, showRecommendations]);
+  }, [api, sku, market, emit, showRecommendations, products]);
+  return {
+    product,
+    inventory: inventory2,
+    recommendations: current2?.recommendations ?? [],
+    loading: !product && !error2,
+    error: error2
+  };
+}
+function ProductView({ sku, initialData, showRecommendations = true, onNotFound }) {
+  const t = useT();
+  const { product, inventory: inventory2, recommendations, loading, error: error2 } = useProduct(sku, {
+    ...initialData ? {
+      initialData
+    } : {},
+    showRecommendations
+  });
   const unavailable = jsx(ShopSurface, {
     tone: "light",
     fill: true,
@@ -10823,14 +10906,14 @@ function ProductView({ sku, initialData, showRecommendations = true, onNotFound
     });
     return unavailable;
   }
-  if (current2) {
+  if (product) {
     return jsx(ProductDetail, {
-      product: current2.product,
-      inventory: current2.inventory,
-      recommendations: current2.recommendations
-    });
+      product,
+      inventory: inventory2,
+      recommendations
+    }, product.sku);
   }
-  if (!error2) return jsx(ScreenSkeleton, {
+  if (loading) return jsx(ScreenSkeleton, {
     tone: "light"
   });
   return jsx(ShopSurface, {
@@ -11634,6 +11717,7 @@ export {
   useCartSheet,
   useMoney,
   useNavigate,
+  useProduct,
   useShopApi,
   useShopEvent,
   useShopOptional,

package/dist/standalone/storefront.mjs

@@ -5112,6 +5112,49 @@ function resolveAssetUrl(src, base) {
   if (!src.startsWith("/") || src.startsWith("//")) return src;
   return `${base.replace(/\/+$/, "")}${src}`;
 }
+const MAX_AGE_MS = 5 * 6e4;
+const CAPACITY = 60;
+class ProductCache {
+  constructor(now = () => Date.now()) {
+    this.now = now;
+  }
+  now;
+  entries = /* @__PURE__ */ new Map();
+  static keyFor(sku, market) {
+    return `${market?.country ?? ""}\0${market?.lang ?? ""}\0${sku}`;
+  }
+  get(sku, market) {
+    const key = ProductCache.keyFor(sku, market);
+    const entry = this.entries.get(key);
+    if (!entry) return void 0;
+    if (this.now() - entry.at > MAX_AGE_MS) {
+      this.entries.delete(key);
+      return void 0;
+    }
+    this.entries.delete(key);
+    this.entries.set(key, entry);
+    return entry.product;
+  }
+  set(product, market) {
+    const key = ProductCache.keyFor(product.sku, market);
+    this.entries.delete(key);
+    this.entries.set(key, {
+      product,
+      at: this.now()
+    });
+    while (this.entries.size > CAPACITY) {
+      const oldest = this.entries.keys().next();
+      if (oldest.done) break;
+      this.entries.delete(oldest.value);
+    }
+  }
+  setMany(products, market) {
+    for (const product of products) this.set(product, market);
+  }
+  clear() {
+    this.entries.clear();
+  }
+}
 function createShopFetch(opts) {
   const baseFetch = opts.fetchImpl ?? globalThis.fetch;
   if (!baseFetch) throw new Error("No fetch implementation available");
@@ -5226,6 +5269,9 @@ function DaznShopProvider({ children, ...config }) {
   const getTokenRef = useRef(getToken);
   getTokenRef.current = getToken;
   const stableGetToken = useCallback(() => getTokenRef.current(), []);
+  const productsRef = useRef(null);
+  productsRef.current ??= new ProductCache();
+  const products = productsRef.current;
   const emit = useCallback((event) => {
     for (const listener of listeners.current) {
       try {
@@ -5266,6 +5312,7 @@ function DaznShopProvider({ children, ...config }) {
   const value2 = useMemo(() => ({
     api,
     market,
+    products,
     theme,
     notifications,
     locale,
@@ -5273,7 +5320,7 @@ function DaznShopProvider({ children, ...config }) {
     emit,
     subscribe,
     navigate
-  }), [api, market, theme, notifications, locale, assetBaseUrl, emit, subscribe, navigate]);
+  }), [api, market, products, theme, notifications, locale, assetBaseUrl, emit, subscribe, navigate]);
   return jsx(ShopContext.Provider, {
     value: value2,
     children: jsx(ScreenTitleProvider, {
@@ -5476,8 +5523,8 @@ function Skeleton({ width, height, radius, className, circle }) {
     style
   });
 }
-const surface$1 = "_surface_cfqo9_10";
-const fill = "_fill_cfqo9_35";
+const surface$1 = "_surface_zq8bq_10";
+const fill = "_fill_zq8bq_35";
 const styles$O = {
   surface: surface$1,
   fill
@@ -10710,32 +10757,51 @@ function CategoryContent({ page: page2 }) {
     })]
   });
 }
+function productsIn(page2) {
+  const found = [];
+  for (const block of page2.blocks) {
+    if (block.kind === "rail" || block.kind === "grid") found.push(...block.products);
+    else if (block.kind === "featured" || block.kind === "product_gallery") found.push(block.product);
+  }
+  return found;
+}
 function CategoryView({ code, initialData, onNotFound }) {
   const t = useT();
-  const { api, market, emit } = useShop();
-  const [page2, setPage] = useState(initialData ?? null);
-  const [error2, setError] = useState();
-  const [loading, setLoading] = useState(!initialData);
+  const { api, market, emit, products } = useShop();
+  const [loaded, setLoaded] = useState(null);
+  const [failure, setFailure] = useState(null);
+  const settled = loaded?.code === code;
+  const seeded = initialData && initialData.code === code ? initialData : void 0;
+  const page2 = (settled ? loaded?.page : void 0) ?? seeded ?? null;
+  const error2 = failure?.code === code ? failure.error : void 0;
+  const loading = !page2 && !error2 && !settled;
   useEffect(() => {
     let live = true;
-    setError(void 0);
     api.catalog.getCategoryPage(code, market).then((res) => {
+      const fetched = res;
+      products.setMany(productsIn(fetched), market);
       if (!live) return;
-      setPage(res);
+      setLoaded({
+        code,
+        page: fetched
+      });
     }).catch((err) => {
       if (!live) return;
       const c = codeOf(err);
-      setError(c);
+      setFailure({
+        code,
+        error: c
+      });
       emit({
         type: "error",
         code: c,
         scope: "category"
       });
-    }).finally(() => live && setLoading(false));
+    });
     return () => {
       live = false;
     };
-  }, [api, code, market, emit]);
+  }, [api, code, market, emit, products]);
   if (error2 === "category_not_found" && onNotFound) return jsx(Fragment, {
     children: onNotFound()
   });
@@ -10756,23 +10822,22 @@ function CategoryView({ code, initialData, onNotFound }) {
     })
   });
 }
-function ProductView({ sku, initialData, showRecommendations = true, onNotFound }) {
-  const t = useT();
-  const { api, market, emit } = useShop();
-  const [loaded, setLoaded] = useState(initialData ? {
-    sku,
-    product: initialData.product,
-    inventory: initialData.inventory ?? null,
-    recommendations: []
-  } : null);
+function useProduct(sku, options2 = {}) {
+  const { initialData, showRecommendations = true } = options2;
+  const { api, market, emit, products } = useShop();
+  const [loaded, setLoaded] = useState(null);
   const [failure, setFailure] = useState(null);
   const current2 = loaded?.sku === sku ? loaded : null;
   const error2 = failure?.sku === sku ? failure.code : void 0;
+  const seeded = initialData && initialData.product.sku === sku ? initialData.product : products.get(sku, market);
+  const product = current2?.product ?? seeded ?? null;
+  const inventory2 = current2 ? current2.inventory : initialData && initialData.product.sku === sku ? initialData.inventory ?? null : null;
   useEffect(() => {
     let live = true;
     (async () => {
       try {
         const p = await api.catalog.getProduct(sku, market);
+        products.set(p, market);
         if (!live) return;
         setLoaded({
           sku,
@@ -10784,12 +10849,14 @@ function ProductView({ sku, initialData, showRecommendations = true, onNotFound
         const [inv, recs] = await Promise.allSettled([hasVariants ? Promise.resolve(null) : api.inventory.get(sku), showRecommendations ? api.catalog.getRecommendations(sku, market) : Promise.resolve({
           data: []
         })]);
+        const recommendations = recs.status === "fulfilled" ? recs.value.data : [];
+        products.setMany(recommendations, market);
         if (!live) return;
         setLoaded({
           sku,
           product: p,
           inventory: inv.status === "fulfilled" ? inv.value : null,
-          recommendations: recs.status === "fulfilled" ? recs.value.data : []
+          recommendations
         });
       } catch (err) {
         if (!live) return;
@@ -10808,7 +10875,23 @@ function ProductView({ sku, initialData, showRecommendations = true, onNotFound
     return () => {
       live = false;
     };
-  }, [api, sku, market, emit, showRecommendations]);
+  }, [api, sku, market, emit, showRecommendations, products]);
+  return {
+    product,
+    inventory: inventory2,
+    recommendations: current2?.recommendations ?? [],
+    loading: !product && !error2,
+    error: error2
+  };
+}
+function ProductView({ sku, initialData, showRecommendations = true, onNotFound }) {
+  const t = useT();
+  const { product, inventory: inventory2, recommendations, loading, error: error2 } = useProduct(sku, {
+    ...initialData ? {
+      initialData
+    } : {},
+    showRecommendations
+  });
   const unavailable = jsx(ShopSurface, {
     tone: "light",
     fill: true,
@@ -10823,14 +10906,14 @@ function ProductView({ sku, initialData, showRecommendations = true, onNotFound
     });
     return unavailable;
   }
-  if (current2) {
+  if (product) {
     return jsx(ProductDetail, {
-      product: current2.product,
-      inventory: current2.inventory,
-      recommendations: current2.recommendations
-    });
+      product,
+      inventory: inventory2,
+      recommendations
+    }, product.sku);
   }
-  if (!error2) return jsx(ScreenSkeleton, {
+  if (loading) return jsx(ScreenSkeleton, {
     tone: "light"
   });
   return jsx(ShopSurface, {
@@ -11634,6 +11717,7 @@ export {
   useCartSheet,
   useMoney,
   useNavigate,
+  useProduct,
   useShopApi,
   useShopEvent,
   useShopOptional,

package/dist/standalone/styles.css

@@ -216,7 +216,7 @@
     background-position: 0 50%;
   }
 }
-._surface_cfqo9_10 {
+._surface_zq8bq_10 {
   font-family: var(--font-family-base);
   font-weight: var(--font-weight-regular);
   font-size: var(--type-paragraph-size);
@@ -226,43 +226,44 @@
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
 }
-._surface_cfqo9_10 *,
-._surface_cfqo9_10 *::before,
-._surface_cfqo9_10 *::after {
+._surface_zq8bq_10 *,
+._surface_zq8bq_10 *::before,
+._surface_zq8bq_10 *::after {
   box-sizing: border-box;
 }
-._fill_cfqo9_35 {
+._fill_zq8bq_35 {
   min-height: 100vh;
   min-height: calc(100dvh - var(--surface-top, 0px));
+  box-shadow: 0 calc(100lvh - 100dvh) 0 var(--color-surface-default);
 }
-:where(._surface_cfqo9_10) :where(h1, h2, h3) {
+:where(._surface_zq8bq_10) :where(h1, h2, h3) {
   margin: 0;
   font-weight: var(--font-weight-bold);
 }
-:where(._surface_cfqo9_10) :where(h1) {
+:where(._surface_zq8bq_10) :where(h1) {
   font-size: var(--type-heading-lg-size);
   line-height: var(--type-heading-lg-line);
 }
-:where(._surface_cfqo9_10) :where(h2) {
+:where(._surface_zq8bq_10) :where(h2) {
   font-size: var(--type-heading-md-size);
   line-height: var(--type-heading-md-line);
 }
-._surface_cfqo9_10 a:not([class]) {
+._surface_zq8bq_10 a:not([class]) {
   color: inherit;
 }
-._surface_cfqo9_10 img {
+._surface_zq8bq_10 img {
   max-width: 100%;
   height: auto;
 }
-._surface_cfqo9_10 :focus-visible {
+._surface_zq8bq_10 :focus-visible {
   outline: 2px solid var(--color-surface-max);
   outline-offset: 2px;
   border-radius: var(--radius-4);
 }
 @media (prefers-reduced-motion: reduce) {
-  ._surface_cfqo9_10 *,
-  ._surface_cfqo9_10 *::before,
-  ._surface_cfqo9_10 *::after {
+  ._surface_zq8bq_10 *,
+  ._surface_zq8bq_10 *::before,
+  ._surface_zq8bq_10 *::after {
     animation-duration: 0.001ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.001ms !important;

package/dist/styles.css

@@ -216,7 +216,7 @@
     background-position: 0 50%;
   }
 }
-._surface_cfqo9_10 {
+._surface_zq8bq_10 {
   font-family: var(--font-family-base);
   font-weight: var(--font-weight-regular);
   font-size: var(--type-paragraph-size);
@@ -226,43 +226,44 @@
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
 }
-._surface_cfqo9_10 *,
-._surface_cfqo9_10 *::before,
-._surface_cfqo9_10 *::after {
+._surface_zq8bq_10 *,
+._surface_zq8bq_10 *::before,
+._surface_zq8bq_10 *::after {
   box-sizing: border-box;
 }
-._fill_cfqo9_35 {
+._fill_zq8bq_35 {
   min-height: 100vh;
   min-height: calc(100dvh - var(--surface-top, 0px));
+  box-shadow: 0 calc(100lvh - 100dvh) 0 var(--color-surface-default);
 }
-:where(._surface_cfqo9_10) :where(h1, h2, h3) {
+:where(._surface_zq8bq_10) :where(h1, h2, h3) {
   margin: 0;
   font-weight: var(--font-weight-bold);
 }
-:where(._surface_cfqo9_10) :where(h1) {
+:where(._surface_zq8bq_10) :where(h1) {
   font-size: var(--type-heading-lg-size);
   line-height: var(--type-heading-lg-line);
 }
-:where(._surface_cfqo9_10) :where(h2) {
+:where(._surface_zq8bq_10) :where(h2) {
   font-size: var(--type-heading-md-size);
   line-height: var(--type-heading-md-line);
 }
-._surface_cfqo9_10 a:not([class]) {
+._surface_zq8bq_10 a:not([class]) {
   color: inherit;
 }
-._surface_cfqo9_10 img {
+._surface_zq8bq_10 img {
   max-width: 100%;
   height: auto;
 }
-._surface_cfqo9_10 :focus-visible {
+._surface_zq8bq_10 :focus-visible {
   outline: 2px solid var(--color-surface-max);
   outline-offset: 2px;
   border-radius: var(--radius-4);
 }
 @media (prefers-reduced-motion: reduce) {
-  ._surface_cfqo9_10 *,
-  ._surface_cfqo9_10 *::before,
-  ._surface_cfqo9_10 *::after {
+  ._surface_zq8bq_10 *,
+  ._surface_zq8bq_10 *::before,
+  ._surface_zq8bq_10 *::after {
     animation-duration: 0.001ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.001ms !important;

package/package.json

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