@nok-integration/storefront-react 0.19.50 → 0.19.52

package/dist/index.mjs

@@ -10768,10 +10768,10 @@ function ReviewCarousel({ quotes }) {
     })]
   });
 }
-const section$1 = "_section_1tevp_1";
-const row$2 = "_row_1tevp_9";
-const title$4 = "_title_1tevp_21";
-const body = "_body_1tevp_38";
+const section$1 = "_section_82ve5_1";
+const row$2 = "_row_82ve5_9";
+const title$4 = "_title_82ve5_21";
+const body = "_body_82ve5_48";
 const styles$5 = {
   section: section$1,
   row: row$2,
@@ -11101,24 +11101,24 @@ function ProductView({ sku, initialData, showRecommendations = true, onNotFound
     })
   });
 }
-const showcase = "_showcase_jukpz_14";
-const panel = "_panel_jukpz_19";
-const image = "_image_jukpz_80";
-const hero = "_hero_jukpz_120";
-const heroContent = "_heroContent_jukpz_205";
-const heroText = "_heroText_jukpz_229";
-const logo = "_logo_jukpz_238";
-const heroTitle = "_heroTitle_jukpz_258";
-const heroSub = "_heroSub_jukpz_282";
-const swipe = "_swipe_jukpz_301";
-const swipeLabel = "_swipeLabel_jukpz_308";
-const chevron$1 = "_chevron_jukpz_314";
-const overlay$1 = "_overlay_jukpz_11";
-const copy = "_copy_jukpz_349";
-const title$2 = "_title_jukpz_354";
-const subtitle$1 = "_subtitle_jukpz_361";
-const cta = "_cta_jukpz_367";
-const mosaic = "_mosaic_jukpz_411";
+const showcase = "_showcase_15pba_14";
+const panel = "_panel_15pba_57";
+const image = "_image_15pba_122";
+const hero = "_hero_15pba_162";
+const heroContent = "_heroContent_15pba_254";
+const heroText = "_heroText_15pba_278";
+const logo = "_logo_15pba_287";
+const heroTitle = "_heroTitle_15pba_307";
+const heroSub = "_heroSub_15pba_331";
+const swipe = "_swipe_15pba_350";
+const swipeLabel = "_swipeLabel_15pba_357";
+const chevron$1 = "_chevron_15pba_363";
+const overlay$1 = "_overlay_15pba_11";
+const copy = "_copy_15pba_398";
+const title$2 = "_title_15pba_403";
+const subtitle$1 = "_subtitle_15pba_410";
+const cta = "_cta_15pba_416";
+const mosaic = "_mosaic_15pba_460";
 const styles$2 = {
   showcase,
   panel,

package/dist/standalone/storefront.mjs

@@ -10768,10 +10768,10 @@ function ReviewCarousel({ quotes }) {
     })]
   });
 }
-const section$1 = "_section_1tevp_1";
-const row$2 = "_row_1tevp_9";
-const title$4 = "_title_1tevp_21";
-const body = "_body_1tevp_38";
+const section$1 = "_section_82ve5_1";
+const row$2 = "_row_82ve5_9";
+const title$4 = "_title_82ve5_21";
+const body = "_body_82ve5_48";
 const styles$5 = {
   section: section$1,
   row: row$2,
@@ -11101,24 +11101,24 @@ function ProductView({ sku, initialData, showRecommendations = true, onNotFound
     })
   });
 }
-const showcase = "_showcase_jukpz_14";
-const panel = "_panel_jukpz_19";
-const image = "_image_jukpz_80";
-const hero = "_hero_jukpz_120";
-const heroContent = "_heroContent_jukpz_205";
-const heroText = "_heroText_jukpz_229";
-const logo = "_logo_jukpz_238";
-const heroTitle = "_heroTitle_jukpz_258";
-const heroSub = "_heroSub_jukpz_282";
-const swipe = "_swipe_jukpz_301";
-const swipeLabel = "_swipeLabel_jukpz_308";
-const chevron$1 = "_chevron_jukpz_314";
-const overlay$1 = "_overlay_jukpz_11";
-const copy = "_copy_jukpz_349";
-const title$2 = "_title_jukpz_354";
-const subtitle$1 = "_subtitle_jukpz_361";
-const cta = "_cta_jukpz_367";
-const mosaic = "_mosaic_jukpz_411";
+const showcase = "_showcase_15pba_14";
+const panel = "_panel_15pba_57";
+const image = "_image_15pba_122";
+const hero = "_hero_15pba_162";
+const heroContent = "_heroContent_15pba_254";
+const heroText = "_heroText_15pba_278";
+const logo = "_logo_15pba_287";
+const heroTitle = "_heroTitle_15pba_307";
+const heroSub = "_heroSub_15pba_331";
+const swipe = "_swipe_15pba_350";
+const swipeLabel = "_swipeLabel_15pba_357";
+const chevron$1 = "_chevron_15pba_363";
+const overlay$1 = "_overlay_15pba_11";
+const copy = "_copy_15pba_398";
+const title$2 = "_title_15pba_403";
+const subtitle$1 = "_subtitle_15pba_410";
+const cta = "_cta_15pba_416";
+const mosaic = "_mosaic_15pba_460";
 const styles$2 = {
   showcase,
   panel,

package/dist/standalone/styles.css

@@ -3401,13 +3401,13 @@
 ._dotActive_qsxtq_85 {
   background: #f9fafa;
 }
-._section_1tevp_1 {
+._section_82ve5_1 {
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
   padding: var(--space-24) var(--space-16);
 }
-._row_1tevp_9 {
+._row_82ve5_9 {
   display: flex;
   flex-direction: column;
   gap: var(--space-8);
@@ -3415,17 +3415,18 @@
   border-radius: var(--radius-8);
   background: var(--color-surface-soft);
 }
-._title_1tevp_21 {
+._title_82ve5_21 {
   margin: 0;
   font-size: var(--type-heading-sm-size);
   line-height: var(--type-heading-sm-line);
   font-weight: var(--font-weight-bold);
   color: var(--color-text-default);
 }
-._body_1tevp_38 {
+._body_82ve5_48 {
   margin: 0;
   font-size: var(--type-trimmed-sm-size);
-  line-height: 10px;
+  line-height: var(--type-caption-sm-line);
+  margin-block: calc((var(--type-trimmed-sm-line) - var(--type-caption-sm-line) * 1em) / 2);
   color: var(--color-text-subtle);
 }
 ._section_snuuj_1 {
@@ -3495,11 +3496,19 @@
   column-gap: var(--space-12);
   row-gap: var(--space-12);
 }
-._showcase_jukpz_14 {
-  --chrome-bleed: calc(3 * (100lvh - 100svh));
+._showcase_15pba_14 {
+  --chrome-bleed: 0px;
   background: #080e12;
+  display: flow-root;
+  overflow: clip;
+  overflow-clip-margin: var(--chrome-bleed, 0px);
+}
+@supports (-webkit-touch-callout: none) {
+  ._showcase_15pba_14 {
+    --chrome-bleed: calc(3 * (100lvh - 100svh));
+  }
 }
-._panel_jukpz_19 {
+._panel_15pba_57 {
   position: relative;
   height: 100lvh;
   height: calc(100lvh + var(--chrome-bleed, 0px));
@@ -3509,15 +3518,14 @@
   overflow: hidden;
   background: #080e12;
 }
-._panel_jukpz_19:last-child {
-  height: 100dvh;
-  scroll-margin-bottom: 0;
+._panel_15pba_57:last-child {
+  margin-bottom: calc(100dvh - 100lvh - var(--chrome-bleed, 0px));
 }
-._image_jukpz_80 {
+._image_15pba_122 {
   object-fit: cover;
   object-position: 50% var(--slide-focal-y, 50%);
 }
-._hero_jukpz_120::after {
+._hero_15pba_162::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -3532,10 +3540,10 @@
       rgba(8, 14, 18, 0) calc(520px + var(--chrome-bleed, 0px)));
   pointer-events: none;
 }
-._hero_jukpz_120 ._heroContent_jukpz_205 {
+._hero_15pba_162 ._heroContent_15pba_254 {
   position: absolute;
   bottom: 32px;
-  bottom: calc(32px + var(--chrome-bleed, 0px) + 100lvh - 100dvh);
+  bottom: calc(32px + var(--chrome-bleed, 0px) + 100lvh - 100svh);
   left: 0;
   right: 0;
   z-index: 1;
@@ -3544,7 +3552,7 @@
   gap: 24px;
   align-items: stretch;
 }
-._heroText_jukpz_229 {
+._heroText_15pba_278 {
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -3552,11 +3560,11 @@
   padding: 0 24px;
   text-align: center;
 }
-._heroText_jukpz_229 ._logo_jukpz_238 {
+._heroText_15pba_278 ._logo_15pba_287 {
   width: 48px;
   height: 48px;
 }
-._heroTitle_jukpz_258 {
+._heroTitle_15pba_307 {
   width: 100%;
   margin: 0;
   font-family:
@@ -3571,33 +3579,33 @@
   letter-spacing: -1.12px;
   color: #f9fafa;
 }
-._heroSub_jukpz_282 {
+._heroSub_15pba_331 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
   max-width: 327px;
 }
-._swipe_jukpz_301 {
+._swipe_15pba_350 {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 6px;
   padding: 8px 0;
 }
-._swipeLabel_jukpz_308 {
+._swipeLabel_15pba_357 {
   margin: 0;
   font-size: 14px;
   line-height: 1;
   color: rgba(255, 255, 255, 0.54);
 }
-._chevron_jukpz_314 {
+._chevron_15pba_363 {
   width: 24px;
   height: 24px;
   color: rgba(255, 255, 255, 0.54);
-  animation: _bob_jukpz_1 1.8s ease-in-out infinite;
+  animation: _bob_15pba_1 1.8s ease-in-out infinite;
 }
-@keyframes _bob_jukpz_1 {
+@keyframes _bob_15pba_1 {
   0%, 100% {
     transform: translateY(0);
   }
@@ -3605,7 +3613,7 @@
     transform: translateY(4px);
   }
 }
-._overlay_jukpz_11 {
+._overlay_15pba_11 {
   position: absolute;
   inset: 0;
   z-index: 1;
@@ -3620,27 +3628,27 @@
   gap: 16px;
   align-items: flex-start;
   padding: 0 24px 24px;
-  padding-bottom: calc(24px + var(--chrome-bleed, 0px) + 100lvh - 100dvh);
+  padding-bottom: calc(24px + var(--chrome-bleed, 0px) + 100lvh - 100svh);
 }
-._copy_jukpz_349 {
+._copy_15pba_398 {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
-._title_jukpz_354 {
+._title_15pba_403 {
   margin: 0;
   font-size: 32px;
   line-height: 1.2;
   font-weight: 700;
   color: #f9fafa;
 }
-._subtitle_jukpz_361 {
+._subtitle_15pba_410 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
 }
-._cta_jukpz_367 {
+._cta_15pba_416 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3654,19 +3662,19 @@
   font-weight: 700;
   text-decoration: none;
 }
-._cta_jukpz_367::after {
+._cta_15pba_416::after {
   content: "";
   position: absolute;
   inset: 0;
 }
-._cta_jukpz_367:active {
+._cta_15pba_416:active {
   background: rgba(249, 250, 250, 0.12);
 }
-._cta_jukpz_367:focus-visible {
+._cta_15pba_416:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
-._mosaic_jukpz_411 {
+._mosaic_15pba_460 {
   background: #080e12;
 }
 ._header_r9jjq_14 {

package/dist/styles.css

@@ -3401,13 +3401,13 @@
 ._dotActive_qsxtq_85 {
   background: #f9fafa;
 }
-._section_1tevp_1 {
+._section_82ve5_1 {
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
   padding: var(--space-24) var(--space-16);
 }
-._row_1tevp_9 {
+._row_82ve5_9 {
   display: flex;
   flex-direction: column;
   gap: var(--space-8);
@@ -3415,17 +3415,18 @@
   border-radius: var(--radius-8);
   background: var(--color-surface-soft);
 }
-._title_1tevp_21 {
+._title_82ve5_21 {
   margin: 0;
   font-size: var(--type-heading-sm-size);
   line-height: var(--type-heading-sm-line);
   font-weight: var(--font-weight-bold);
   color: var(--color-text-default);
 }
-._body_1tevp_38 {
+._body_82ve5_48 {
   margin: 0;
   font-size: var(--type-trimmed-sm-size);
-  line-height: 10px;
+  line-height: var(--type-caption-sm-line);
+  margin-block: calc((var(--type-trimmed-sm-line) - var(--type-caption-sm-line) * 1em) / 2);
   color: var(--color-text-subtle);
 }
 ._section_snuuj_1 {
@@ -3495,11 +3496,19 @@
   column-gap: var(--space-12);
   row-gap: var(--space-12);
 }
-._showcase_jukpz_14 {
-  --chrome-bleed: calc(3 * (100lvh - 100svh));
+._showcase_15pba_14 {
+  --chrome-bleed: 0px;
   background: #080e12;
+  display: flow-root;
+  overflow: clip;
+  overflow-clip-margin: var(--chrome-bleed, 0px);
+}
+@supports (-webkit-touch-callout: none) {
+  ._showcase_15pba_14 {
+    --chrome-bleed: calc(3 * (100lvh - 100svh));
+  }
 }
-._panel_jukpz_19 {
+._panel_15pba_57 {
   position: relative;
   height: 100lvh;
   height: calc(100lvh + var(--chrome-bleed, 0px));
@@ -3509,15 +3518,14 @@
   overflow: hidden;
   background: #080e12;
 }
-._panel_jukpz_19:last-child {
-  height: 100dvh;
-  scroll-margin-bottom: 0;
+._panel_15pba_57:last-child {
+  margin-bottom: calc(100dvh - 100lvh - var(--chrome-bleed, 0px));
 }
-._image_jukpz_80 {
+._image_15pba_122 {
   object-fit: cover;
   object-position: 50% var(--slide-focal-y, 50%);
 }
-._hero_jukpz_120::after {
+._hero_15pba_162::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -3532,10 +3540,10 @@
       rgba(8, 14, 18, 0) calc(520px + var(--chrome-bleed, 0px)));
   pointer-events: none;
 }
-._hero_jukpz_120 ._heroContent_jukpz_205 {
+._hero_15pba_162 ._heroContent_15pba_254 {
   position: absolute;
   bottom: 32px;
-  bottom: calc(32px + var(--chrome-bleed, 0px) + 100lvh - 100dvh);
+  bottom: calc(32px + var(--chrome-bleed, 0px) + 100lvh - 100svh);
   left: 0;
   right: 0;
   z-index: 1;
@@ -3544,7 +3552,7 @@
   gap: 24px;
   align-items: stretch;
 }
-._heroText_jukpz_229 {
+._heroText_15pba_278 {
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -3552,11 +3560,11 @@
   padding: 0 24px;
   text-align: center;
 }
-._heroText_jukpz_229 ._logo_jukpz_238 {
+._heroText_15pba_278 ._logo_15pba_287 {
   width: 48px;
   height: 48px;
 }
-._heroTitle_jukpz_258 {
+._heroTitle_15pba_307 {
   width: 100%;
   margin: 0;
   font-family:
@@ -3571,33 +3579,33 @@
   letter-spacing: -1.12px;
   color: #f9fafa;
 }
-._heroSub_jukpz_282 {
+._heroSub_15pba_331 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
   max-width: 327px;
 }
-._swipe_jukpz_301 {
+._swipe_15pba_350 {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 6px;
   padding: 8px 0;
 }
-._swipeLabel_jukpz_308 {
+._swipeLabel_15pba_357 {
   margin: 0;
   font-size: 14px;
   line-height: 1;
   color: rgba(255, 255, 255, 0.54);
 }
-._chevron_jukpz_314 {
+._chevron_15pba_363 {
   width: 24px;
   height: 24px;
   color: rgba(255, 255, 255, 0.54);
-  animation: _bob_jukpz_1 1.8s ease-in-out infinite;
+  animation: _bob_15pba_1 1.8s ease-in-out infinite;
 }
-@keyframes _bob_jukpz_1 {
+@keyframes _bob_15pba_1 {
   0%, 100% {
     transform: translateY(0);
   }
@@ -3605,7 +3613,7 @@
     transform: translateY(4px);
   }
 }
-._overlay_jukpz_11 {
+._overlay_15pba_11 {
   position: absolute;
   inset: 0;
   z-index: 1;
@@ -3620,27 +3628,27 @@
   gap: 16px;
   align-items: flex-start;
   padding: 0 24px 24px;
-  padding-bottom: calc(24px + var(--chrome-bleed, 0px) + 100lvh - 100dvh);
+  padding-bottom: calc(24px + var(--chrome-bleed, 0px) + 100lvh - 100svh);
 }
-._copy_jukpz_349 {
+._copy_15pba_398 {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
-._title_jukpz_354 {
+._title_15pba_403 {
   margin: 0;
   font-size: 32px;
   line-height: 1.2;
   font-weight: 700;
   color: #f9fafa;
 }
-._subtitle_jukpz_361 {
+._subtitle_15pba_410 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
 }
-._cta_jukpz_367 {
+._cta_15pba_416 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3654,19 +3662,19 @@
   font-weight: 700;
   text-decoration: none;
 }
-._cta_jukpz_367::after {
+._cta_15pba_416::after {
   content: "";
   position: absolute;
   inset: 0;
 }
-._cta_jukpz_367:active {
+._cta_15pba_416:active {
   background: rgba(249, 250, 250, 0.12);
 }
-._cta_jukpz_367:focus-visible {
+._cta_15pba_416:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
-._mosaic_jukpz_411 {
+._mosaic_15pba_460 {
   background: #080e12;
 }
 ._header_r9jjq_14 {

package/package.json

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