@nok-integration/storefront-react 0.19.43 → 0.19.45

package/dist/index.d.ts

@@ -3282,6 +3282,7 @@ export declare interface DaznShopConfig {
     assetBaseUrl?: string;
     market?: Market;
     navigate?: Navigate;
+    prefetch?: Prefetch;
     /**
      * @deprecated No longer affects how anything renders, and safe to remove.
      *
@@ -4451,6 +4452,9 @@ export declare interface PdpBadgesProps {
     badges: string[];
 }
 
+/** Optional host router warm-up. Omit it and every navigation is a cold fetch. */
+export declare type Prefetch = (to: ShopRoute) => void;
+
 /**
  * Displays a price with an optional discount. DISPLAY ONLY — it never computes totals;
  * any percentage shown is a presentational rounding of values the server already
@@ -5568,6 +5572,7 @@ declare interface ShopContextValue {
     /** Listen to the same event stream the host sees. Returns an unsubscribe. */
     subscribe: (listener: OnEvent) => () => void;
     navigate: (to: ShopRoute) => void;
+    prefetch: ((to: ShopRoute) => void) | null;
 }
 
 export declare type ShopEvent = {
@@ -5966,18 +5971,28 @@ 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
+ * The 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.
+ * **There is no `autoplay` attribute, and its absence is what makes `preload` mean
+ * anything.** A `<video autoplay preload="none">` is a contradiction the browser resolves
+ * in favour of autoplay: WebKit ignores the `preload` hint and begins fetching at once,
+ * because it has been told the clip is going to play regardless. On the shop entry that is
+ * five full-screen clips, several megabytes, all pulling against each other on a phone from
+ * the moment the screen opens — which is slowest for the one panel a fan is actually
+ * looking at. Playback is driven from the observer below instead, so the clips still start
+ * by themselves and still loop, and `preload` is honoured.
+ *
+ * **Playback follows visibility; fetching runs one screen ahead of it.** Each clip plays
+ * when its panel comes into view and pauses when it leaves, which keeps one video decoding
+ * at a time. Downloading cannot wait that long: a clip that only starts arriving once its
+ * panel is on screen shows its poster for as long as the file takes. So `preload` flips to
+ * `auto` a screen out — the panel being approached is buffered before it is reached, and a
+ * fan who never scrolls past the hero pays for the hero and its neighbour, not for all five.
  *
  * **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
@@ -6417,6 +6432,8 @@ export declare function useMoney(defaultLocale?: string): {
  */
 export declare function useNavigate(): ((to: ShopRoute) => void) | null;
 
+export declare function usePrefetch(): ((to: ShopRoute) => void) | null;
+
 /**
  * The data behind a product screen: the product, then inventory and recommendations.
  *

package/dist/index.mjs

@@ -5257,7 +5257,7 @@ function NoScreenTitle({ children }) {
 }
 const ShopContext = createContext(null);
 function DaznShopProvider({ children, ...config }) {
-  const { apiBaseUrl, getToken, market, navigate: hostNavigate, sessionTransport = "bearer", theme = "auto", notifications = "internal", onEvent, locale, assetBaseUrl } = config;
+  const { apiBaseUrl, getToken, market, navigate: hostNavigate, prefetch: hostPrefetch, sessionTransport = "bearer", theme = "auto", notifications = "internal", onEvent, locale, assetBaseUrl } = config;
   const listeners = useRef(/* @__PURE__ */ new Set());
   const subscribe = useCallback((listener) => {
     listeners.current.add(listener);
@@ -5320,8 +5320,9 @@ function DaznShopProvider({ children, ...config }) {
     assetBaseUrl,
     emit,
     subscribe,
-    navigate
-  }), [api, market, products, theme, notifications, locale, assetBaseUrl, emit, subscribe, navigate]);
+    navigate,
+    prefetch: hostPrefetch ?? null
+  }), [api, market, products, theme, notifications, locale, assetBaseUrl, emit, subscribe, navigate, hostPrefetch]);
   return jsx(ShopContext.Provider, {
     value: value2,
     children: jsx(ScreenTitleProvider, {
@@ -5345,6 +5346,9 @@ function useShopApi() {
 function useNavigate() {
   return useShopOptional()?.navigate ?? null;
 }
+function usePrefetch() {
+  return useShopOptional()?.prefetch ?? null;
+}
 function useAssetUrl() {
   const base = useShopOptional()?.assetBaseUrl;
   return useCallback((src) => resolveAssetUrl(src, base), [base]);
@@ -5355,7 +5359,35 @@ function useShopEvent() {
 }
 function ShopLink({ to, children, ...rest }) {
   const navigate = useNavigate();
+  const prefetch = usePrefetch();
+  const anchor2 = useRef(null);
+  const warmed = useRef(false);
+  const warm = () => {
+    if (warmed.current || !prefetch) return;
+    warmed.current = true;
+    prefetch(to);
+  };
+  useEffect(() => {
+    warmed.current = false;
+  }, [to]);
+  useEffect(() => {
+    const el = anchor2.current;
+    if (!el || !prefetch || typeof IntersectionObserver === "undefined") return;
+    const observer = new IntersectionObserver((entries) => {
+      for (const entry of entries) {
+        if (!entry.isIntersecting) continue;
+        observer.disconnect();
+        warm();
+      }
+    }, {
+      rootMargin: "200px"
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [prefetch, to]);
   return jsx("a", {
+    ref: anchor2,
+    onPointerDown: warm,
     href: to,
     onClick: (event) => {
       if (!navigate || event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || rest.target && rest.target !== "_self") {
@@ -5399,6 +5431,7 @@ function ShopImage({ src, alt, fill: fill2 = false, width, height, sizes, classN
     fetchPriority: priority ? "high" : void 0
   });
 }
+const WARM_MARGIN = "100%";
 function ShopVideo({ src, poster, fill: fill2 = false, className, style, priority = false }) {
   const assetUrl = useAssetUrl();
   const ref = useRef(null);
@@ -5406,6 +5439,9 @@ function ShopVideo({ src, poster, fill: fill2 = false, className, style, priorit
     const el = ref.current;
     if (!el || typeof IntersectionObserver === "undefined") return;
     const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)");
+    const fetchNow = () => {
+      if (el.preload === "none") el.preload = "auto";
+    };
     const play = () => {
       if (reduced?.matches) {
         el.pause();
@@ -5414,10 +5450,18 @@ function ShopVideo({ src, poster, fill: fill2 = false, className, style, priorit
       void el.play().catch(() => {
       });
     };
-    const observer = new IntersectionObserver((entries) => {
+    const warm = new IntersectionObserver((entries) => {
+      if (!entries.some((entry) => entry.isIntersecting)) return;
+      if (!reduced?.matches) fetchNow();
+      warm.disconnect();
+    }, {
+      rootMargin: WARM_MARGIN
+    });
+    warm.observe(el);
+    const playback = new IntersectionObserver((entries) => {
       for (const entry of entries) {
         if (entry.isIntersecting) {
-          if (el.preload === "none") el.preload = "auto";
+          fetchNow();
           play();
         } else {
           el.pause();
@@ -5426,10 +5470,11 @@ function ShopVideo({ src, poster, fill: fill2 = false, className, style, priorit
     }, {
       threshold: 0.25
     });
-    observer.observe(el);
+    playback.observe(el);
     reduced?.addEventListener("change", play);
     return () => {
-      observer.disconnect();
+      warm.disconnect();
+      playback.disconnect();
       reduced?.removeEventListener("change", play);
     };
   }, []);
@@ -5448,7 +5493,6 @@ function ShopVideo({ src, poster, fill: fill2 = false, className, style, priorit
       ...fillStyle,
       ...style
     },
-    autoPlay: true,
     loop: true,
     muted: true,
     playsInline: true,
@@ -8698,16 +8742,16 @@ function RailCarousel({ title: title2, products, seeAllTo, inset: inset2 }) {
     })]
   });
 }
-const overlay$2 = "_overlay_fszc5_1";
-const scrim$4 = "_scrim_fszc5_10";
-const sheet$2 = "_sheet_fszc5_16";
-const grabArea = "_grabArea_fszc5_41";
-const grabber = "_grabber_fszc5_51";
-const header$4 = "_header_fszc5_59";
-const title$c = "_title_fszc5_67";
-const close$1 = "_close_fszc5_71";
-const body$4 = "_body_fszc5_84";
-const footer = "_footer_fszc5_97";
+const overlay$2 = "_overlay_uxpgl_1";
+const scrim$4 = "_scrim_uxpgl_10";
+const sheet$2 = "_sheet_uxpgl_16";
+const grabArea = "_grabArea_uxpgl_41";
+const grabber = "_grabber_uxpgl_51";
+const header$4 = "_header_uxpgl_59";
+const title$c = "_title_uxpgl_67";
+const close$1 = "_close_uxpgl_71";
+const body$4 = "_body_uxpgl_84";
+const footer = "_footer_uxpgl_97";
 const styles$o = {
   overlay: overlay$2,
   scrim: scrim$4,
@@ -9163,14 +9207,14 @@ function StickyCtaBar({ children, info: info2, variant = "floating" }) {
     })]
   });
 }
-const surface = "_surface_j3seb_15";
-const screen = "_screen_j3seb_20";
-const body$3 = "_body_j3seb_12";
-const items = "_items_j3seb_34";
-const sectionHeader = "_sectionHeader_j3seb_40";
-const sectionTitle = "_sectionTitle_j3seb_46";
-const count = "_count_j3seb_55";
-const lines = "_lines_j3seb_79";
+const surface = "_surface_15488_15";
+const screen = "_screen_15488_20";
+const body$3 = "_body_15488_12";
+const items = "_items_15488_34";
+const sectionHeader = "_sectionHeader_15488_40";
+const sectionTitle = "_sectionTitle_15488_46";
+const count = "_count_15488_55";
+const lines = "_lines_15488_79";
 const styles$j = {
   surface,
   screen,
@@ -11702,6 +11746,7 @@ export {
   useCartSheet,
   useMoney,
   useNavigate,
+  usePrefetch,
   useProduct,
   useShopApi,
   useShopEvent,

package/dist/standalone/storefront.mjs

@@ -5257,7 +5257,7 @@ function NoScreenTitle({ children }) {
 }
 const ShopContext = createContext(null);
 function DaznShopProvider({ children, ...config }) {
-  const { apiBaseUrl, getToken, market, navigate: hostNavigate, sessionTransport = "bearer", theme = "auto", notifications = "internal", onEvent, locale, assetBaseUrl } = config;
+  const { apiBaseUrl, getToken, market, navigate: hostNavigate, prefetch: hostPrefetch, sessionTransport = "bearer", theme = "auto", notifications = "internal", onEvent, locale, assetBaseUrl } = config;
   const listeners = useRef(/* @__PURE__ */ new Set());
   const subscribe = useCallback((listener) => {
     listeners.current.add(listener);
@@ -5320,8 +5320,9 @@ function DaznShopProvider({ children, ...config }) {
     assetBaseUrl,
     emit,
     subscribe,
-    navigate
-  }), [api, market, products, theme, notifications, locale, assetBaseUrl, emit, subscribe, navigate]);
+    navigate,
+    prefetch: hostPrefetch ?? null
+  }), [api, market, products, theme, notifications, locale, assetBaseUrl, emit, subscribe, navigate, hostPrefetch]);
   return jsx(ShopContext.Provider, {
     value: value2,
     children: jsx(ScreenTitleProvider, {
@@ -5345,6 +5346,9 @@ function useShopApi() {
 function useNavigate() {
   return useShopOptional()?.navigate ?? null;
 }
+function usePrefetch() {
+  return useShopOptional()?.prefetch ?? null;
+}
 function useAssetUrl() {
   const base = useShopOptional()?.assetBaseUrl;
   return useCallback((src) => resolveAssetUrl(src, base), [base]);
@@ -5355,7 +5359,35 @@ function useShopEvent() {
 }
 function ShopLink({ to, children, ...rest }) {
   const navigate = useNavigate();
+  const prefetch = usePrefetch();
+  const anchor2 = useRef(null);
+  const warmed = useRef(false);
+  const warm = () => {
+    if (warmed.current || !prefetch) return;
+    warmed.current = true;
+    prefetch(to);
+  };
+  useEffect(() => {
+    warmed.current = false;
+  }, [to]);
+  useEffect(() => {
+    const el = anchor2.current;
+    if (!el || !prefetch || typeof IntersectionObserver === "undefined") return;
+    const observer = new IntersectionObserver((entries) => {
+      for (const entry of entries) {
+        if (!entry.isIntersecting) continue;
+        observer.disconnect();
+        warm();
+      }
+    }, {
+      rootMargin: "200px"
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [prefetch, to]);
   return jsx("a", {
+    ref: anchor2,
+    onPointerDown: warm,
     href: to,
     onClick: (event) => {
       if (!navigate || event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || rest.target && rest.target !== "_self") {
@@ -5399,6 +5431,7 @@ function ShopImage({ src, alt, fill: fill2 = false, width, height, sizes, classN
     fetchPriority: priority ? "high" : void 0
   });
 }
+const WARM_MARGIN = "100%";
 function ShopVideo({ src, poster, fill: fill2 = false, className, style, priority = false }) {
   const assetUrl = useAssetUrl();
   const ref = useRef(null);
@@ -5406,6 +5439,9 @@ function ShopVideo({ src, poster, fill: fill2 = false, className, style, priorit
     const el = ref.current;
     if (!el || typeof IntersectionObserver === "undefined") return;
     const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)");
+    const fetchNow = () => {
+      if (el.preload === "none") el.preload = "auto";
+    };
     const play = () => {
       if (reduced?.matches) {
         el.pause();
@@ -5414,10 +5450,18 @@ function ShopVideo({ src, poster, fill: fill2 = false, className, style, priorit
       void el.play().catch(() => {
       });
     };
-    const observer = new IntersectionObserver((entries) => {
+    const warm = new IntersectionObserver((entries) => {
+      if (!entries.some((entry) => entry.isIntersecting)) return;
+      if (!reduced?.matches) fetchNow();
+      warm.disconnect();
+    }, {
+      rootMargin: WARM_MARGIN
+    });
+    warm.observe(el);
+    const playback = new IntersectionObserver((entries) => {
       for (const entry of entries) {
         if (entry.isIntersecting) {
-          if (el.preload === "none") el.preload = "auto";
+          fetchNow();
           play();
         } else {
           el.pause();
@@ -5426,10 +5470,11 @@ function ShopVideo({ src, poster, fill: fill2 = false, className, style, priorit
     }, {
       threshold: 0.25
     });
-    observer.observe(el);
+    playback.observe(el);
     reduced?.addEventListener("change", play);
     return () => {
-      observer.disconnect();
+      warm.disconnect();
+      playback.disconnect();
       reduced?.removeEventListener("change", play);
     };
   }, []);
@@ -5448,7 +5493,6 @@ function ShopVideo({ src, poster, fill: fill2 = false, className, style, priorit
       ...fillStyle,
       ...style
     },
-    autoPlay: true,
     loop: true,
     muted: true,
     playsInline: true,
@@ -8698,16 +8742,16 @@ function RailCarousel({ title: title2, products, seeAllTo, inset: inset2 }) {
     })]
   });
 }
-const overlay$2 = "_overlay_fszc5_1";
-const scrim$4 = "_scrim_fszc5_10";
-const sheet$2 = "_sheet_fszc5_16";
-const grabArea = "_grabArea_fszc5_41";
-const grabber = "_grabber_fszc5_51";
-const header$4 = "_header_fszc5_59";
-const title$c = "_title_fszc5_67";
-const close$1 = "_close_fszc5_71";
-const body$4 = "_body_fszc5_84";
-const footer = "_footer_fszc5_97";
+const overlay$2 = "_overlay_uxpgl_1";
+const scrim$4 = "_scrim_uxpgl_10";
+const sheet$2 = "_sheet_uxpgl_16";
+const grabArea = "_grabArea_uxpgl_41";
+const grabber = "_grabber_uxpgl_51";
+const header$4 = "_header_uxpgl_59";
+const title$c = "_title_uxpgl_67";
+const close$1 = "_close_uxpgl_71";
+const body$4 = "_body_uxpgl_84";
+const footer = "_footer_uxpgl_97";
 const styles$o = {
   overlay: overlay$2,
   scrim: scrim$4,
@@ -9163,14 +9207,14 @@ function StickyCtaBar({ children, info: info2, variant = "floating" }) {
     })]
   });
 }
-const surface = "_surface_j3seb_15";
-const screen = "_screen_j3seb_20";
-const body$3 = "_body_j3seb_12";
-const items = "_items_j3seb_34";
-const sectionHeader = "_sectionHeader_j3seb_40";
-const sectionTitle = "_sectionTitle_j3seb_46";
-const count = "_count_j3seb_55";
-const lines = "_lines_j3seb_79";
+const surface = "_surface_15488_15";
+const screen = "_screen_15488_20";
+const body$3 = "_body_15488_12";
+const items = "_items_15488_34";
+const sectionHeader = "_sectionHeader_15488_40";
+const sectionTitle = "_sectionTitle_15488_46";
+const count = "_count_15488_55";
+const lines = "_lines_15488_79";
 const styles$j = {
   surface,
   screen,
@@ -11702,6 +11746,7 @@ export {
   useCartSheet,
   useMoney,
   useNavigate,
+  usePrefetch,
   useProduct,
   useShopApi,
   useShopEvent,

package/dist/standalone/styles.css

@@ -2120,7 +2120,7 @@
   width: 165px;
   max-width: none;
 }
-._overlay_fszc5_1 {
+._overlay_uxpgl_1 {
   position: fixed;
   inset: 0;
   z-index: 900;
@@ -2128,12 +2128,12 @@
   align-items: flex-end;
   justify-content: center;
 }
-._scrim_fszc5_10 {
+._scrim_uxpgl_10 {
   position: absolute;
   inset: 0;
   background: rgba(8, 14, 18, 0.5);
 }
-._sheet_fszc5_16 {
+._sheet_uxpgl_16 {
   position: relative;
   width: 100%;
   max-width: 480px;
@@ -2142,10 +2142,10 @@
   border-radius: var(--radius-18) var(--radius-18) 0 0;
   display: flex;
   flex-direction: column;
-  animation: _slide-up_fszc5_1 200ms ease;
+  animation: _slide-up_uxpgl_1 200ms ease;
   padding-bottom: var(--safe-area-bottom);
 }
-@keyframes _slide-up_fszc5_1 {
+@keyframes _slide-up_uxpgl_1 {
   from {
     transform: translateY(100%);
   }
@@ -2153,32 +2153,32 @@
     transform: translateY(0);
   }
 }
-._grabArea_fszc5_41 {
+._grabArea_uxpgl_41 {
   padding: var(--space-8) 0 var(--space-4);
   touch-action: none;
   cursor: grab;
 }
-._grabArea_fszc5_41:active {
+._grabArea_uxpgl_41:active {
   cursor: grabbing;
 }
-._grabber_fszc5_51 {
+._grabber_uxpgl_51 {
   width: 40px;
   height: 4px;
   margin: 0 auto;
   border-radius: 2px;
   background: var(--color-border-default);
 }
-._header_fszc5_59 {
+._header_uxpgl_59 {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: var(--space-16);
   border-bottom: 1px solid var(--color-border-default);
 }
-._title_fszc5_67 {
+._title_uxpgl_67 {
   font-size: var(--type-heading-md-size);
 }
-._close_fszc5_71 {
+._close_uxpgl_71 {
   min-width: var(--tap-target-min);
   min-height: var(--tap-target-min);
   display: inline-flex;
@@ -2190,16 +2190,16 @@
   cursor: pointer;
   color: var(--color-text-subtle);
 }
-._body_fszc5_84 {
+._body_uxpgl_84 {
   overflow-y: auto;
-  padding: var(--space-16);
+  padding: 0 var(--space-16) var(--space-16);
   flex: 1 1 auto;
   scrollbar-width: none;
 }
-._body_fszc5_84::-webkit-scrollbar {
+._body_uxpgl_84::-webkit-scrollbar {
   display: none;
 }
-._footer_fszc5_97 {
+._footer_uxpgl_97 {
   border-top: 1px solid var(--color-border-default);
   padding: var(--space-16);
 }
@@ -2442,33 +2442,33 @@
 ._actions_v20rr_49 > * {
   flex: 1 1 0;
 }
-._surface_j3seb_15 {
+._surface_15488_15 {
   display: flex;
   flex-direction: column;
 }
-._screen_j3seb_20 {
+._screen_15488_20 {
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
 }
-._body_j3seb_12 {
+._body_15488_12 {
   display: flex;
   flex-direction: column;
   gap: var(--space-20);
-  padding: 0 var(--space-16);
+  padding: var(--space-20) var(--space-16) 0;
   flex: 1 1 auto;
 }
-._items_j3seb_34 {
+._items_15488_34 {
   display: flex;
   flex-direction: column;
   gap: var(--space-20);
 }
-._sectionHeader_j3seb_40 {
+._sectionHeader_15488_40 {
   display: flex;
   align-items: center;
   gap: var(--space-12);
 }
-._sectionTitle_j3seb_46 {
+._sectionTitle_15488_46 {
   margin: 0;
   font-size: var(--type-heading-md-size);
   line-height: 1.38;
@@ -2476,7 +2476,7 @@
   flex: 1 0 0;
   min-width: 0;
 }
-._count_j3seb_55 {
+._count_15488_55 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -2491,7 +2491,7 @@
   font-variant-numeric: tabular-nums;
   flex-shrink: 0;
 }
-._lines_j3seb_79 {
+._lines_15488_79 {
   list-style: none;
   margin: 0;
   padding: 0;

package/dist/styles.css

@@ -2120,7 +2120,7 @@
   width: 165px;
   max-width: none;
 }
-._overlay_fszc5_1 {
+._overlay_uxpgl_1 {
   position: fixed;
   inset: 0;
   z-index: 900;
@@ -2128,12 +2128,12 @@
   align-items: flex-end;
   justify-content: center;
 }
-._scrim_fszc5_10 {
+._scrim_uxpgl_10 {
   position: absolute;
   inset: 0;
   background: rgba(8, 14, 18, 0.5);
 }
-._sheet_fszc5_16 {
+._sheet_uxpgl_16 {
   position: relative;
   width: 100%;
   max-width: 480px;
@@ -2142,10 +2142,10 @@
   border-radius: var(--radius-18) var(--radius-18) 0 0;
   display: flex;
   flex-direction: column;
-  animation: _slide-up_fszc5_1 200ms ease;
+  animation: _slide-up_uxpgl_1 200ms ease;
   padding-bottom: var(--safe-area-bottom);
 }
-@keyframes _slide-up_fszc5_1 {
+@keyframes _slide-up_uxpgl_1 {
   from {
     transform: translateY(100%);
   }
@@ -2153,32 +2153,32 @@
     transform: translateY(0);
   }
 }
-._grabArea_fszc5_41 {
+._grabArea_uxpgl_41 {
   padding: var(--space-8) 0 var(--space-4);
   touch-action: none;
   cursor: grab;
 }
-._grabArea_fszc5_41:active {
+._grabArea_uxpgl_41:active {
   cursor: grabbing;
 }
-._grabber_fszc5_51 {
+._grabber_uxpgl_51 {
   width: 40px;
   height: 4px;
   margin: 0 auto;
   border-radius: 2px;
   background: var(--color-border-default);
 }
-._header_fszc5_59 {
+._header_uxpgl_59 {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: var(--space-16);
   border-bottom: 1px solid var(--color-border-default);
 }
-._title_fszc5_67 {
+._title_uxpgl_67 {
   font-size: var(--type-heading-md-size);
 }
-._close_fszc5_71 {
+._close_uxpgl_71 {
   min-width: var(--tap-target-min);
   min-height: var(--tap-target-min);
   display: inline-flex;
@@ -2190,16 +2190,16 @@
   cursor: pointer;
   color: var(--color-text-subtle);
 }
-._body_fszc5_84 {
+._body_uxpgl_84 {
   overflow-y: auto;
-  padding: var(--space-16);
+  padding: 0 var(--space-16) var(--space-16);
   flex: 1 1 auto;
   scrollbar-width: none;
 }
-._body_fszc5_84::-webkit-scrollbar {
+._body_uxpgl_84::-webkit-scrollbar {
   display: none;
 }
-._footer_fszc5_97 {
+._footer_uxpgl_97 {
   border-top: 1px solid var(--color-border-default);
   padding: var(--space-16);
 }
@@ -2442,33 +2442,33 @@
 ._actions_v20rr_49 > * {
   flex: 1 1 0;
 }
-._surface_j3seb_15 {
+._surface_15488_15 {
   display: flex;
   flex-direction: column;
 }
-._screen_j3seb_20 {
+._screen_15488_20 {
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
 }
-._body_j3seb_12 {
+._body_15488_12 {
   display: flex;
   flex-direction: column;
   gap: var(--space-20);
-  padding: 0 var(--space-16);
+  padding: var(--space-20) var(--space-16) 0;
   flex: 1 1 auto;
 }
-._items_j3seb_34 {
+._items_15488_34 {
   display: flex;
   flex-direction: column;
   gap: var(--space-20);
 }
-._sectionHeader_j3seb_40 {
+._sectionHeader_15488_40 {
   display: flex;
   align-items: center;
   gap: var(--space-12);
 }
-._sectionTitle_j3seb_46 {
+._sectionTitle_15488_46 {
   margin: 0;
   font-size: var(--type-heading-md-size);
   line-height: 1.38;
@@ -2476,7 +2476,7 @@
   flex: 1 0 0;
   min-width: 0;
 }
-._count_j3seb_55 {
+._count_15488_55 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -2491,7 +2491,7 @@
   font-variant-numeric: tabular-nums;
   flex-shrink: 0;
 }
-._lines_j3seb_79 {
+._lines_15488_79 {
   list-style: none;
   margin: 0;
   padding: 0;

package/package.json

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