@nok-integration/storefront-react 0.19.17 → 0.19.20

package/dist/index.mjs

@@ -5495,6 +5495,8 @@ function useTopOffset(ref, property, enabled = true) {
       timer2 = setTimeout(measure, SETTLE_MS$1);
     };
     measure();
+    const frame2 = typeof requestAnimationFrame === "undefined" ? void 0 : requestAnimationFrame(measure);
+    const settleAfterMount = setTimeout(measure, SETTLE_MS$1);
     window.addEventListener("resize", measure);
     window.addEventListener("orientationchange", measure);
     document.addEventListener("scroll", settle, {
@@ -5505,6 +5507,8 @@ function useTopOffset(ref, property, enabled = true) {
     if (observer && el.parentElement) observer.observe(el.parentElement);
     return () => {
       if (timer2) clearTimeout(timer2);
+      if (frame2 !== void 0) cancelAnimationFrame(frame2);
+      clearTimeout(settleAfterMount);
       window.removeEventListener("resize", measure);
       window.removeEventListener("orientationchange", measure);
       document.removeEventListener("scroll", settle, {
@@ -10206,14 +10210,14 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
     })]
   });
 }
-const hero$1 = "_hero_wguje_10";
-const image$2 = "_image_wguje_42";
-const scrim$1 = "_scrim_wguje_70";
-const fade = "_fade_wguje_94";
-const text$2 = "_text_wguje_108";
-const title$5 = "_title_wguje_155";
-const subtitle$2 = "_subtitle_wguje_166";
-const noImage = "_noImage_wguje_181";
+const hero$1 = "_hero_1tiqx_10";
+const image$2 = "_image_1tiqx_42";
+const scrim$1 = "_scrim_1tiqx_70";
+const fade = "_fade_1tiqx_94";
+const text$2 = "_text_1tiqx_108";
+const title$5 = "_title_1tiqx_157";
+const subtitle$2 = "_subtitle_1tiqx_168";
+const noImage = "_noImage_1tiqx_183";
 const styles$9 = {
   hero: hero$1,
   image: image$2,

package/dist/standalone/storefront.mjs

@@ -5495,6 +5495,8 @@ function useTopOffset(ref, property, enabled = true) {
       timer2 = setTimeout(measure, SETTLE_MS$1);
     };
     measure();
+    const frame2 = typeof requestAnimationFrame === "undefined" ? void 0 : requestAnimationFrame(measure);
+    const settleAfterMount = setTimeout(measure, SETTLE_MS$1);
     window.addEventListener("resize", measure);
     window.addEventListener("orientationchange", measure);
     document.addEventListener("scroll", settle, {
@@ -5505,6 +5507,8 @@ function useTopOffset(ref, property, enabled = true) {
     if (observer && el.parentElement) observer.observe(el.parentElement);
     return () => {
       if (timer2) clearTimeout(timer2);
+      if (frame2 !== void 0) cancelAnimationFrame(frame2);
+      clearTimeout(settleAfterMount);
       window.removeEventListener("resize", measure);
       window.removeEventListener("orientationchange", measure);
       document.removeEventListener("scroll", settle, {
@@ -10206,14 +10210,14 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
     })]
   });
 }
-const hero$1 = "_hero_wguje_10";
-const image$2 = "_image_wguje_42";
-const scrim$1 = "_scrim_wguje_70";
-const fade = "_fade_wguje_94";
-const text$2 = "_text_wguje_108";
-const title$5 = "_title_wguje_155";
-const subtitle$2 = "_subtitle_wguje_166";
-const noImage = "_noImage_wguje_181";
+const hero$1 = "_hero_1tiqx_10";
+const image$2 = "_image_1tiqx_42";
+const scrim$1 = "_scrim_1tiqx_70";
+const fade = "_fade_1tiqx_94";
+const text$2 = "_text_1tiqx_108";
+const title$5 = "_title_1tiqx_157";
+const subtitle$2 = "_subtitle_1tiqx_168";
+const noImage = "_noImage_1tiqx_183";
 const styles$9 = {
   hero: hero$1,
   image: image$2,

package/dist/standalone/styles.css

@@ -3107,7 +3107,7 @@
 ._oos_1hv16_66 {
   color: var(--color-state-surface-critical-default);
 }
-._hero_wguje_10 {
+._hero_1tiqx_10 {
   --hero-height: clamp(480px, calc(100svh - var(--hero-top, 0px)), 812px);
   position: relative;
   height: var(--hero-height);
@@ -3115,15 +3115,15 @@
   background: var(--color-surface-default);
   margin-bottom: calc(var(--hero-height) * -237 / 812);
 }
-._image_wguje_42 {
+._image_1tiqx_42 {
   position: absolute;
   inset: 0;
 }
-._image_wguje_42 img {
+._image_1tiqx_42 img {
   object-fit: cover;
   object-position: top center;
 }
-._scrim_wguje_70 {
+._scrim_1tiqx_70 {
   position: absolute;
   inset: 0;
   background:
@@ -3133,7 +3133,7 @@
       rgba(0, 0, 0, 0.1) 45%,
       rgba(0, 0, 0, 0) 70%);
 }
-._fade_wguje_94 {
+._fade_1tiqx_94 {
   position: absolute;
   right: 0;
   bottom: 0;
@@ -3146,19 +3146,19 @@
       rgba(8, 14, 18, 0.65) 55%,
       var(--color-surface-default) 100%);
 }
-._text_wguje_108 {
+._text_1tiqx_108 {
   position: absolute;
-  top: max(0px, calc(var(--space-12) - var(--hero-top, 0px)));
+  top: max(var(--space-12), calc(65px - var(--hero-top, 0px)));
   left: 0;
   right: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--space-8);
-  padding: 0 var(--space-24) var(--space-24);
+  padding: var(--space-12) var(--space-24) var(--space-24);
   text-align: center;
 }
-._title_wguje_155 {
+._title_1tiqx_157 {
   width: 327px;
   max-width: 100%;
   margin: 0;
@@ -3168,7 +3168,7 @@
   color: #f9fafa;
   text-wrap: balance;
 }
-._subtitle_wguje_166 {
+._subtitle_1tiqx_168 {
   width: 224px;
   max-width: 100%;
   margin: 0;
@@ -3177,18 +3177,18 @@
   font-weight: var(--font-weight-regular);
   color: #f9fafa;
 }
-._noImage_wguje_181 {
+._noImage_1tiqx_183 {
   height: auto;
   min-height: 0;
   max-height: none;
   margin-bottom: 0;
 }
-._noImage_wguje_181 ._text_wguje_108 {
+._noImage_1tiqx_183 ._text_1tiqx_108 {
   position: static;
   padding-top: var(--space-24);
 }
-._noImage_wguje_181 ._title_wguje_155,
-._noImage_wguje_181 ._subtitle_wguje_166 {
+._noImage_1tiqx_183 ._title_1tiqx_157,
+._noImage_1tiqx_183 ._subtitle_1tiqx_168 {
   color: var(--color-text-default);
 }
 ._text_1saw4_6 {

package/dist/styles.css

@@ -3107,7 +3107,7 @@
 ._oos_1hv16_66 {
   color: var(--color-state-surface-critical-default);
 }
-._hero_wguje_10 {
+._hero_1tiqx_10 {
   --hero-height: clamp(480px, calc(100svh - var(--hero-top, 0px)), 812px);
   position: relative;
   height: var(--hero-height);
@@ -3115,15 +3115,15 @@
   background: var(--color-surface-default);
   margin-bottom: calc(var(--hero-height) * -237 / 812);
 }
-._image_wguje_42 {
+._image_1tiqx_42 {
   position: absolute;
   inset: 0;
 }
-._image_wguje_42 img {
+._image_1tiqx_42 img {
   object-fit: cover;
   object-position: top center;
 }
-._scrim_wguje_70 {
+._scrim_1tiqx_70 {
   position: absolute;
   inset: 0;
   background:
@@ -3133,7 +3133,7 @@
       rgba(0, 0, 0, 0.1) 45%,
       rgba(0, 0, 0, 0) 70%);
 }
-._fade_wguje_94 {
+._fade_1tiqx_94 {
   position: absolute;
   right: 0;
   bottom: 0;
@@ -3146,19 +3146,19 @@
       rgba(8, 14, 18, 0.65) 55%,
       var(--color-surface-default) 100%);
 }
-._text_wguje_108 {
+._text_1tiqx_108 {
   position: absolute;
-  top: max(0px, calc(var(--space-12) - var(--hero-top, 0px)));
+  top: max(var(--space-12), calc(65px - var(--hero-top, 0px)));
   left: 0;
   right: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--space-8);
-  padding: 0 var(--space-24) var(--space-24);
+  padding: var(--space-12) var(--space-24) var(--space-24);
   text-align: center;
 }
-._title_wguje_155 {
+._title_1tiqx_157 {
   width: 327px;
   max-width: 100%;
   margin: 0;
@@ -3168,7 +3168,7 @@
   color: #f9fafa;
   text-wrap: balance;
 }
-._subtitle_wguje_166 {
+._subtitle_1tiqx_168 {
   width: 224px;
   max-width: 100%;
   margin: 0;
@@ -3177,18 +3177,18 @@
   font-weight: var(--font-weight-regular);
   color: #f9fafa;
 }
-._noImage_wguje_181 {
+._noImage_1tiqx_183 {
   height: auto;
   min-height: 0;
   max-height: none;
   margin-bottom: 0;
 }
-._noImage_wguje_181 ._text_wguje_108 {
+._noImage_1tiqx_183 ._text_1tiqx_108 {
   position: static;
   padding-top: var(--space-24);
 }
-._noImage_wguje_181 ._title_wguje_155,
-._noImage_wguje_181 ._subtitle_wguje_166 {
+._noImage_1tiqx_183 ._title_1tiqx_157,
+._noImage_1tiqx_183 ._subtitle_1tiqx_168 {
   color: var(--color-text-default);
 }
 ._text_1saw4_6 {

package/package.json

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