@nok-integration/storefront-react 0.19.40 → 0.19.41

package/dist/index.mjs

@@ -5529,7 +5529,7 @@ const styles$O = {
   surface: surface$1,
   fill
 };
-const SETTLE_MS$1 = 150;
+const SETTLE_MS = 150;
 function scrolledOffOrigin(el) {
   for (let node = el.parentElement; node; node = node.parentElement) {
     if (node.scrollTop > 0) return true;
@@ -5553,11 +5553,11 @@ function useTopOffset(ref, property, enabled = true) {
     };
     const settle = () => {
       if (timer2) clearTimeout(timer2);
-      timer2 = setTimeout(measure, SETTLE_MS$1);
+      timer2 = setTimeout(measure, SETTLE_MS);
     };
     measure();
     const frame2 = typeof requestAnimationFrame === "undefined" ? void 0 : requestAnimationFrame(measure);
-    const settleAfterMount = setTimeout(measure, SETTLE_MS$1);
+    const settleAfterMount = setTimeout(measure, SETTLE_MS);
     window.addEventListener("resize", measure);
     window.addEventListener("orientationchange", measure);
     document.addEventListener("scroll", settle, {
@@ -10924,24 +10924,24 @@ function ProductView({ sku, initialData, showRecommendations = true, onNotFound
     })
   });
 }
-const showcase = "_showcase_1qnt2_44";
-const panel = "_panel_1qnt2_48";
-const image = "_image_1qnt2_76";
-const hero = "_hero_1qnt2_116";
-const heroContent = "_heroContent_1qnt2_197";
-const heroText = "_heroText_1qnt2_221";
-const logo = "_logo_1qnt2_230";
-const heroTitle = "_heroTitle_1qnt2_250";
-const heroSub = "_heroSub_1qnt2_274";
-const swipe = "_swipe_1qnt2_293";
-const swipeLabel = "_swipeLabel_1qnt2_300";
-const chevron$1 = "_chevron_1qnt2_306";
-const overlay$1 = "_overlay_1qnt2_11";
-const copy = "_copy_1qnt2_341";
-const title$2 = "_title_1qnt2_346";
-const subtitle$1 = "_subtitle_1qnt2_353";
-const cta = "_cta_1qnt2_359";
-const mosaic = "_mosaic_1qnt2_403";
+const showcase = "_showcase_c2hqd_59";
+const panel = "_panel_c2hqd_63";
+const image = "_image_c2hqd_91";
+const hero = "_hero_c2hqd_131";
+const heroContent = "_heroContent_c2hqd_212";
+const heroText = "_heroText_c2hqd_236";
+const logo = "_logo_c2hqd_245";
+const heroTitle = "_heroTitle_c2hqd_265";
+const heroSub = "_heroSub_c2hqd_289";
+const swipe = "_swipe_c2hqd_308";
+const swipeLabel = "_swipeLabel_c2hqd_315";
+const chevron$1 = "_chevron_c2hqd_321";
+const overlay$1 = "_overlay_c2hqd_11";
+const copy = "_copy_c2hqd_356";
+const title$2 = "_title_c2hqd_361";
+const subtitle$1 = "_subtitle_c2hqd_368";
+const cta = "_cta_c2hqd_374";
+const mosaic = "_mosaic_c2hqd_418";
 const styles$2 = {
   showcase,
   panel,
@@ -10962,7 +10962,6 @@ const styles$2 = {
   cta,
   mosaic
 };
-const SETTLE_MS = 150;
 function useDocumentSnap(ref, enabled = true) {
   useEffect(() => {
     const el = ref.current;
@@ -10970,23 +10969,9 @@ function useDocumentSnap(ref, enabled = true) {
     const root2 = document.documentElement;
     const previousType = root2.style.scrollSnapType;
     const previousPadding = root2.style.scrollPaddingTop;
-    let timer2;
-    const syncPadding = () => {
-      const top2 = getComputedStyle(el).getPropertyValue("--showcase-top").trim();
-      root2.style.scrollPaddingTop = top2 === "" ? "0px" : top2;
-    };
-    const schedule = () => {
-      if (timer2) clearTimeout(timer2);
-      timer2 = setTimeout(syncPadding, SETTLE_MS);
-    };
     root2.style.scrollSnapType = "y mandatory";
-    syncPadding();
-    window.addEventListener("resize", schedule);
-    window.addEventListener("orientationchange", schedule);
+    root2.style.scrollPaddingTop = "0px";
     return () => {
-      if (timer2) clearTimeout(timer2);
-      window.removeEventListener("resize", schedule);
-      window.removeEventListener("orientationchange", schedule);
       root2.style.scrollSnapType = previousType;
       root2.style.scrollPaddingTop = previousPadding;
     };
@@ -11113,7 +11098,6 @@ function HomeShowcase() {
   const assetUrl = useAssetUrl();
   const panels = useSlides();
   const showcaseRef = useRef(null);
-  useTopOffset(showcaseRef, "--showcase-top");
   useDocumentSnap(showcaseRef);
   return jsx(ShopSurface, {
     tone: "dark",

package/dist/standalone/storefront.mjs

@@ -5529,7 +5529,7 @@ const styles$O = {
   surface: surface$1,
   fill
 };
-const SETTLE_MS$1 = 150;
+const SETTLE_MS = 150;
 function scrolledOffOrigin(el) {
   for (let node = el.parentElement; node; node = node.parentElement) {
     if (node.scrollTop > 0) return true;
@@ -5553,11 +5553,11 @@ function useTopOffset(ref, property, enabled = true) {
     };
     const settle = () => {
       if (timer2) clearTimeout(timer2);
-      timer2 = setTimeout(measure, SETTLE_MS$1);
+      timer2 = setTimeout(measure, SETTLE_MS);
     };
     measure();
     const frame2 = typeof requestAnimationFrame === "undefined" ? void 0 : requestAnimationFrame(measure);
-    const settleAfterMount = setTimeout(measure, SETTLE_MS$1);
+    const settleAfterMount = setTimeout(measure, SETTLE_MS);
     window.addEventListener("resize", measure);
     window.addEventListener("orientationchange", measure);
     document.addEventListener("scroll", settle, {
@@ -10924,24 +10924,24 @@ function ProductView({ sku, initialData, showRecommendations = true, onNotFound
     })
   });
 }
-const showcase = "_showcase_1qnt2_44";
-const panel = "_panel_1qnt2_48";
-const image = "_image_1qnt2_76";
-const hero = "_hero_1qnt2_116";
-const heroContent = "_heroContent_1qnt2_197";
-const heroText = "_heroText_1qnt2_221";
-const logo = "_logo_1qnt2_230";
-const heroTitle = "_heroTitle_1qnt2_250";
-const heroSub = "_heroSub_1qnt2_274";
-const swipe = "_swipe_1qnt2_293";
-const swipeLabel = "_swipeLabel_1qnt2_300";
-const chevron$1 = "_chevron_1qnt2_306";
-const overlay$1 = "_overlay_1qnt2_11";
-const copy = "_copy_1qnt2_341";
-const title$2 = "_title_1qnt2_346";
-const subtitle$1 = "_subtitle_1qnt2_353";
-const cta = "_cta_1qnt2_359";
-const mosaic = "_mosaic_1qnt2_403";
+const showcase = "_showcase_c2hqd_59";
+const panel = "_panel_c2hqd_63";
+const image = "_image_c2hqd_91";
+const hero = "_hero_c2hqd_131";
+const heroContent = "_heroContent_c2hqd_212";
+const heroText = "_heroText_c2hqd_236";
+const logo = "_logo_c2hqd_245";
+const heroTitle = "_heroTitle_c2hqd_265";
+const heroSub = "_heroSub_c2hqd_289";
+const swipe = "_swipe_c2hqd_308";
+const swipeLabel = "_swipeLabel_c2hqd_315";
+const chevron$1 = "_chevron_c2hqd_321";
+const overlay$1 = "_overlay_c2hqd_11";
+const copy = "_copy_c2hqd_356";
+const title$2 = "_title_c2hqd_361";
+const subtitle$1 = "_subtitle_c2hqd_368";
+const cta = "_cta_c2hqd_374";
+const mosaic = "_mosaic_c2hqd_418";
 const styles$2 = {
   showcase,
   panel,
@@ -10962,7 +10962,6 @@ const styles$2 = {
   cta,
   mosaic
 };
-const SETTLE_MS = 150;
 function useDocumentSnap(ref, enabled = true) {
   useEffect(() => {
     const el = ref.current;
@@ -10970,23 +10969,9 @@ function useDocumentSnap(ref, enabled = true) {
     const root2 = document.documentElement;
     const previousType = root2.style.scrollSnapType;
     const previousPadding = root2.style.scrollPaddingTop;
-    let timer2;
-    const syncPadding = () => {
-      const top2 = getComputedStyle(el).getPropertyValue("--showcase-top").trim();
-      root2.style.scrollPaddingTop = top2 === "" ? "0px" : top2;
-    };
-    const schedule = () => {
-      if (timer2) clearTimeout(timer2);
-      timer2 = setTimeout(syncPadding, SETTLE_MS);
-    };
     root2.style.scrollSnapType = "y mandatory";
-    syncPadding();
-    window.addEventListener("resize", schedule);
-    window.addEventListener("orientationchange", schedule);
+    root2.style.scrollPaddingTop = "0px";
     return () => {
-      if (timer2) clearTimeout(timer2);
-      window.removeEventListener("resize", schedule);
-      window.removeEventListener("orientationchange", schedule);
       root2.style.scrollSnapType = previousType;
       root2.style.scrollPaddingTop = previousPadding;
     };
@@ -11113,7 +11098,6 @@ function HomeShowcase() {
   const assetUrl = useAssetUrl();
   const panels = useSlides();
   const showcaseRef = useRef(null);
-  useTopOffset(showcaseRef, "--showcase-top");
   useDocumentSnap(showcaseRef);
   return jsx(ShopSurface, {
     tone: "dark",

package/dist/standalone/styles.css

@@ -3487,22 +3487,22 @@
   column-gap: var(--space-12);
   row-gap: var(--space-12);
 }
-._showcase_1qnt2_44 {
+._showcase_c2hqd_59 {
   background: #080e12;
 }
-._panel_1qnt2_48 {
+._panel_c2hqd_63 {
   position: relative;
-  height: calc(100lvh - var(--showcase-top, 0px));
+  height: 100lvh;
   scroll-snap-align: start;
   scroll-snap-stop: always;
   overflow: hidden;
   background: #080e12;
 }
-._image_1qnt2_76 {
+._image_c2hqd_91 {
   object-fit: cover;
   object-position: 50% var(--slide-focal-y, 50%);
 }
-._hero_1qnt2_116::after {
+._hero_c2hqd_131::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -3517,7 +3517,7 @@
       rgba(8, 14, 18, 0) 520px);
   pointer-events: none;
 }
-._hero_1qnt2_116 ._heroContent_1qnt2_197 {
+._hero_c2hqd_131 ._heroContent_c2hqd_212 {
   position: absolute;
   bottom: 32px;
   bottom: calc(32px + 100lvh - 100dvh);
@@ -3529,7 +3529,7 @@
   gap: 24px;
   align-items: stretch;
 }
-._heroText_1qnt2_221 {
+._heroText_c2hqd_236 {
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -3537,11 +3537,11 @@
   padding: 0 24px;
   text-align: center;
 }
-._heroText_1qnt2_221 ._logo_1qnt2_230 {
+._heroText_c2hqd_236 ._logo_c2hqd_245 {
   width: 48px;
   height: 48px;
 }
-._heroTitle_1qnt2_250 {
+._heroTitle_c2hqd_265 {
   width: 100%;
   margin: 0;
   font-family:
@@ -3556,33 +3556,33 @@
   letter-spacing: -1.12px;
   color: #f9fafa;
 }
-._heroSub_1qnt2_274 {
+._heroSub_c2hqd_289 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
   max-width: 327px;
 }
-._swipe_1qnt2_293 {
+._swipe_c2hqd_308 {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 6px;
   padding: 8px 0;
 }
-._swipeLabel_1qnt2_300 {
+._swipeLabel_c2hqd_315 {
   margin: 0;
   font-size: 14px;
   line-height: 1;
   color: rgba(255, 255, 255, 0.54);
 }
-._chevron_1qnt2_306 {
+._chevron_c2hqd_321 {
   width: 24px;
   height: 24px;
   color: rgba(255, 255, 255, 0.54);
-  animation: _bob_1qnt2_1 1.8s ease-in-out infinite;
+  animation: _bob_c2hqd_1 1.8s ease-in-out infinite;
 }
-@keyframes _bob_1qnt2_1 {
+@keyframes _bob_c2hqd_1 {
   0%, 100% {
     transform: translateY(0);
   }
@@ -3590,7 +3590,7 @@
     transform: translateY(4px);
   }
 }
-._overlay_1qnt2_11 {
+._overlay_c2hqd_11 {
   position: absolute;
   inset: 0;
   z-index: 1;
@@ -3607,25 +3607,25 @@
   padding: 0 24px 24px;
   padding-bottom: calc(24px + 100lvh - 100dvh);
 }
-._copy_1qnt2_341 {
+._copy_c2hqd_356 {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
-._title_1qnt2_346 {
+._title_c2hqd_361 {
   margin: 0;
   font-size: 32px;
   line-height: 1.2;
   font-weight: 700;
   color: #f9fafa;
 }
-._subtitle_1qnt2_353 {
+._subtitle_c2hqd_368 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
 }
-._cta_1qnt2_359 {
+._cta_c2hqd_374 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3639,19 +3639,19 @@
   font-weight: 700;
   text-decoration: none;
 }
-._cta_1qnt2_359::after {
+._cta_c2hqd_374::after {
   content: "";
   position: absolute;
   inset: 0;
 }
-._cta_1qnt2_359:active {
+._cta_c2hqd_374:active {
   background: rgba(249, 250, 250, 0.12);
 }
-._cta_1qnt2_359:focus-visible {
+._cta_c2hqd_374:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
-._mosaic_1qnt2_403 {
+._mosaic_c2hqd_418 {
   background: #080e12;
 }
 ._header_8o3d7_25 {

package/dist/styles.css

@@ -3487,22 +3487,22 @@
   column-gap: var(--space-12);
   row-gap: var(--space-12);
 }
-._showcase_1qnt2_44 {
+._showcase_c2hqd_59 {
   background: #080e12;
 }
-._panel_1qnt2_48 {
+._panel_c2hqd_63 {
   position: relative;
-  height: calc(100lvh - var(--showcase-top, 0px));
+  height: 100lvh;
   scroll-snap-align: start;
   scroll-snap-stop: always;
   overflow: hidden;
   background: #080e12;
 }
-._image_1qnt2_76 {
+._image_c2hqd_91 {
   object-fit: cover;
   object-position: 50% var(--slide-focal-y, 50%);
 }
-._hero_1qnt2_116::after {
+._hero_c2hqd_131::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -3517,7 +3517,7 @@
       rgba(8, 14, 18, 0) 520px);
   pointer-events: none;
 }
-._hero_1qnt2_116 ._heroContent_1qnt2_197 {
+._hero_c2hqd_131 ._heroContent_c2hqd_212 {
   position: absolute;
   bottom: 32px;
   bottom: calc(32px + 100lvh - 100dvh);
@@ -3529,7 +3529,7 @@
   gap: 24px;
   align-items: stretch;
 }
-._heroText_1qnt2_221 {
+._heroText_c2hqd_236 {
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -3537,11 +3537,11 @@
   padding: 0 24px;
   text-align: center;
 }
-._heroText_1qnt2_221 ._logo_1qnt2_230 {
+._heroText_c2hqd_236 ._logo_c2hqd_245 {
   width: 48px;
   height: 48px;
 }
-._heroTitle_1qnt2_250 {
+._heroTitle_c2hqd_265 {
   width: 100%;
   margin: 0;
   font-family:
@@ -3556,33 +3556,33 @@
   letter-spacing: -1.12px;
   color: #f9fafa;
 }
-._heroSub_1qnt2_274 {
+._heroSub_c2hqd_289 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
   max-width: 327px;
 }
-._swipe_1qnt2_293 {
+._swipe_c2hqd_308 {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 6px;
   padding: 8px 0;
 }
-._swipeLabel_1qnt2_300 {
+._swipeLabel_c2hqd_315 {
   margin: 0;
   font-size: 14px;
   line-height: 1;
   color: rgba(255, 255, 255, 0.54);
 }
-._chevron_1qnt2_306 {
+._chevron_c2hqd_321 {
   width: 24px;
   height: 24px;
   color: rgba(255, 255, 255, 0.54);
-  animation: _bob_1qnt2_1 1.8s ease-in-out infinite;
+  animation: _bob_c2hqd_1 1.8s ease-in-out infinite;
 }
-@keyframes _bob_1qnt2_1 {
+@keyframes _bob_c2hqd_1 {
   0%, 100% {
     transform: translateY(0);
   }
@@ -3590,7 +3590,7 @@
     transform: translateY(4px);
   }
 }
-._overlay_1qnt2_11 {
+._overlay_c2hqd_11 {
   position: absolute;
   inset: 0;
   z-index: 1;
@@ -3607,25 +3607,25 @@
   padding: 0 24px 24px;
   padding-bottom: calc(24px + 100lvh - 100dvh);
 }
-._copy_1qnt2_341 {
+._copy_c2hqd_356 {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
-._title_1qnt2_346 {
+._title_c2hqd_361 {
   margin: 0;
   font-size: 32px;
   line-height: 1.2;
   font-weight: 700;
   color: #f9fafa;
 }
-._subtitle_1qnt2_353 {
+._subtitle_c2hqd_368 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
 }
-._cta_1qnt2_359 {
+._cta_c2hqd_374 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3639,19 +3639,19 @@
   font-weight: 700;
   text-decoration: none;
 }
-._cta_1qnt2_359::after {
+._cta_c2hqd_374::after {
   content: "";
   position: absolute;
   inset: 0;
 }
-._cta_1qnt2_359:active {
+._cta_c2hqd_374:active {
   background: rgba(249, 250, 250, 0.12);
 }
-._cta_1qnt2_359:focus-visible {
+._cta_c2hqd_374:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
-._mosaic_1qnt2_403 {
+._mosaic_c2hqd_418 {
   background: #080e12;
 }
 ._header_8o3d7_25 {

package/package.json

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