@nok-integration/storefront-react 0.19.50 → 0.19.51

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.mjs CHANGED
@@ -11101,24 +11101,24 @@ function ProductView({ sku, initialData, showRecommendations = true, onNotFound
11101
11101
  })
11102
11102
  });
11103
11103
  }
11104
- const showcase = "_showcase_jukpz_14";
11105
- const panel = "_panel_jukpz_19";
11106
- const image = "_image_jukpz_80";
11107
- const hero = "_hero_jukpz_120";
11108
- const heroContent = "_heroContent_jukpz_205";
11109
- const heroText = "_heroText_jukpz_229";
11110
- const logo = "_logo_jukpz_238";
11111
- const heroTitle = "_heroTitle_jukpz_258";
11112
- const heroSub = "_heroSub_jukpz_282";
11113
- const swipe = "_swipe_jukpz_301";
11114
- const swipeLabel = "_swipeLabel_jukpz_308";
11115
- const chevron$1 = "_chevron_jukpz_314";
11116
- const overlay$1 = "_overlay_jukpz_11";
11117
- const copy = "_copy_jukpz_349";
11118
- const title$2 = "_title_jukpz_354";
11119
- const subtitle$1 = "_subtitle_jukpz_361";
11120
- const cta = "_cta_jukpz_367";
11121
- const mosaic = "_mosaic_jukpz_411";
11104
+ const showcase = "_showcase_15pba_14";
11105
+ const panel = "_panel_15pba_57";
11106
+ const image = "_image_15pba_122";
11107
+ const hero = "_hero_15pba_162";
11108
+ const heroContent = "_heroContent_15pba_254";
11109
+ const heroText = "_heroText_15pba_278";
11110
+ const logo = "_logo_15pba_287";
11111
+ const heroTitle = "_heroTitle_15pba_307";
11112
+ const heroSub = "_heroSub_15pba_331";
11113
+ const swipe = "_swipe_15pba_350";
11114
+ const swipeLabel = "_swipeLabel_15pba_357";
11115
+ const chevron$1 = "_chevron_15pba_363";
11116
+ const overlay$1 = "_overlay_15pba_11";
11117
+ const copy = "_copy_15pba_398";
11118
+ const title$2 = "_title_15pba_403";
11119
+ const subtitle$1 = "_subtitle_15pba_410";
11120
+ const cta = "_cta_15pba_416";
11121
+ const mosaic = "_mosaic_15pba_460";
11122
11122
  const styles$2 = {
11123
11123
  showcase,
11124
11124
  panel,
@@ -11101,24 +11101,24 @@ function ProductView({ sku, initialData, showRecommendations = true, onNotFound
11101
11101
  })
11102
11102
  });
11103
11103
  }
11104
- const showcase = "_showcase_jukpz_14";
11105
- const panel = "_panel_jukpz_19";
11106
- const image = "_image_jukpz_80";
11107
- const hero = "_hero_jukpz_120";
11108
- const heroContent = "_heroContent_jukpz_205";
11109
- const heroText = "_heroText_jukpz_229";
11110
- const logo = "_logo_jukpz_238";
11111
- const heroTitle = "_heroTitle_jukpz_258";
11112
- const heroSub = "_heroSub_jukpz_282";
11113
- const swipe = "_swipe_jukpz_301";
11114
- const swipeLabel = "_swipeLabel_jukpz_308";
11115
- const chevron$1 = "_chevron_jukpz_314";
11116
- const overlay$1 = "_overlay_jukpz_11";
11117
- const copy = "_copy_jukpz_349";
11118
- const title$2 = "_title_jukpz_354";
11119
- const subtitle$1 = "_subtitle_jukpz_361";
11120
- const cta = "_cta_jukpz_367";
11121
- const mosaic = "_mosaic_jukpz_411";
11104
+ const showcase = "_showcase_15pba_14";
11105
+ const panel = "_panel_15pba_57";
11106
+ const image = "_image_15pba_122";
11107
+ const hero = "_hero_15pba_162";
11108
+ const heroContent = "_heroContent_15pba_254";
11109
+ const heroText = "_heroText_15pba_278";
11110
+ const logo = "_logo_15pba_287";
11111
+ const heroTitle = "_heroTitle_15pba_307";
11112
+ const heroSub = "_heroSub_15pba_331";
11113
+ const swipe = "_swipe_15pba_350";
11114
+ const swipeLabel = "_swipeLabel_15pba_357";
11115
+ const chevron$1 = "_chevron_15pba_363";
11116
+ const overlay$1 = "_overlay_15pba_11";
11117
+ const copy = "_copy_15pba_398";
11118
+ const title$2 = "_title_15pba_403";
11119
+ const subtitle$1 = "_subtitle_15pba_410";
11120
+ const cta = "_cta_15pba_416";
11121
+ const mosaic = "_mosaic_15pba_460";
11122
11122
  const styles$2 = {
11123
11123
  showcase,
11124
11124
  panel,
@@ -3495,11 +3495,19 @@
3495
3495
  column-gap: var(--space-12);
3496
3496
  row-gap: var(--space-12);
3497
3497
  }
3498
- ._showcase_jukpz_14 {
3499
- --chrome-bleed: calc(3 * (100lvh - 100svh));
3498
+ ._showcase_15pba_14 {
3499
+ --chrome-bleed: 0px;
3500
3500
  background: #080e12;
3501
+ display: flow-root;
3502
+ overflow: clip;
3503
+ overflow-clip-margin: var(--chrome-bleed, 0px);
3501
3504
  }
3502
- ._panel_jukpz_19 {
3505
+ @supports (-webkit-touch-callout: none) {
3506
+ ._showcase_15pba_14 {
3507
+ --chrome-bleed: calc(3 * (100lvh - 100svh));
3508
+ }
3509
+ }
3510
+ ._panel_15pba_57 {
3503
3511
  position: relative;
3504
3512
  height: 100lvh;
3505
3513
  height: calc(100lvh + var(--chrome-bleed, 0px));
@@ -3509,15 +3517,14 @@
3509
3517
  overflow: hidden;
3510
3518
  background: #080e12;
3511
3519
  }
3512
- ._panel_jukpz_19:last-child {
3513
- height: 100dvh;
3514
- scroll-margin-bottom: 0;
3520
+ ._panel_15pba_57:last-child {
3521
+ margin-bottom: calc(100dvh - 100lvh - var(--chrome-bleed, 0px));
3515
3522
  }
3516
- ._image_jukpz_80 {
3523
+ ._image_15pba_122 {
3517
3524
  object-fit: cover;
3518
3525
  object-position: 50% var(--slide-focal-y, 50%);
3519
3526
  }
3520
- ._hero_jukpz_120::after {
3527
+ ._hero_15pba_162::after {
3521
3528
  content: "";
3522
3529
  position: absolute;
3523
3530
  inset: 0;
@@ -3532,10 +3539,10 @@
3532
3539
  rgba(8, 14, 18, 0) calc(520px + var(--chrome-bleed, 0px)));
3533
3540
  pointer-events: none;
3534
3541
  }
3535
- ._hero_jukpz_120 ._heroContent_jukpz_205 {
3542
+ ._hero_15pba_162 ._heroContent_15pba_254 {
3536
3543
  position: absolute;
3537
3544
  bottom: 32px;
3538
- bottom: calc(32px + var(--chrome-bleed, 0px) + 100lvh - 100dvh);
3545
+ bottom: calc(32px + var(--chrome-bleed, 0px) + 100lvh - 100svh);
3539
3546
  left: 0;
3540
3547
  right: 0;
3541
3548
  z-index: 1;
@@ -3544,7 +3551,7 @@
3544
3551
  gap: 24px;
3545
3552
  align-items: stretch;
3546
3553
  }
3547
- ._heroText_jukpz_229 {
3554
+ ._heroText_15pba_278 {
3548
3555
  display: flex;
3549
3556
  flex-direction: column;
3550
3557
  gap: 8px;
@@ -3552,11 +3559,11 @@
3552
3559
  padding: 0 24px;
3553
3560
  text-align: center;
3554
3561
  }
3555
- ._heroText_jukpz_229 ._logo_jukpz_238 {
3562
+ ._heroText_15pba_278 ._logo_15pba_287 {
3556
3563
  width: 48px;
3557
3564
  height: 48px;
3558
3565
  }
3559
- ._heroTitle_jukpz_258 {
3566
+ ._heroTitle_15pba_307 {
3560
3567
  width: 100%;
3561
3568
  margin: 0;
3562
3569
  font-family:
@@ -3571,33 +3578,33 @@
3571
3578
  letter-spacing: -1.12px;
3572
3579
  color: #f9fafa;
3573
3580
  }
3574
- ._heroSub_jukpz_282 {
3581
+ ._heroSub_15pba_331 {
3575
3582
  margin: 0;
3576
3583
  font-size: 16px;
3577
3584
  line-height: 1.55;
3578
3585
  color: #f9fafa;
3579
3586
  max-width: 327px;
3580
3587
  }
3581
- ._swipe_jukpz_301 {
3588
+ ._swipe_15pba_350 {
3582
3589
  display: flex;
3583
3590
  flex-direction: column;
3584
3591
  align-items: center;
3585
3592
  gap: 6px;
3586
3593
  padding: 8px 0;
3587
3594
  }
3588
- ._swipeLabel_jukpz_308 {
3595
+ ._swipeLabel_15pba_357 {
3589
3596
  margin: 0;
3590
3597
  font-size: 14px;
3591
3598
  line-height: 1;
3592
3599
  color: rgba(255, 255, 255, 0.54);
3593
3600
  }
3594
- ._chevron_jukpz_314 {
3601
+ ._chevron_15pba_363 {
3595
3602
  width: 24px;
3596
3603
  height: 24px;
3597
3604
  color: rgba(255, 255, 255, 0.54);
3598
- animation: _bob_jukpz_1 1.8s ease-in-out infinite;
3605
+ animation: _bob_15pba_1 1.8s ease-in-out infinite;
3599
3606
  }
3600
- @keyframes _bob_jukpz_1 {
3607
+ @keyframes _bob_15pba_1 {
3601
3608
  0%, 100% {
3602
3609
  transform: translateY(0);
3603
3610
  }
@@ -3605,7 +3612,7 @@
3605
3612
  transform: translateY(4px);
3606
3613
  }
3607
3614
  }
3608
- ._overlay_jukpz_11 {
3615
+ ._overlay_15pba_11 {
3609
3616
  position: absolute;
3610
3617
  inset: 0;
3611
3618
  z-index: 1;
@@ -3620,27 +3627,27 @@
3620
3627
  gap: 16px;
3621
3628
  align-items: flex-start;
3622
3629
  padding: 0 24px 24px;
3623
- padding-bottom: calc(24px + var(--chrome-bleed, 0px) + 100lvh - 100dvh);
3630
+ padding-bottom: calc(24px + var(--chrome-bleed, 0px) + 100lvh - 100svh);
3624
3631
  }
3625
- ._copy_jukpz_349 {
3632
+ ._copy_15pba_398 {
3626
3633
  display: flex;
3627
3634
  flex-direction: column;
3628
3635
  gap: 8px;
3629
3636
  }
3630
- ._title_jukpz_354 {
3637
+ ._title_15pba_403 {
3631
3638
  margin: 0;
3632
3639
  font-size: 32px;
3633
3640
  line-height: 1.2;
3634
3641
  font-weight: 700;
3635
3642
  color: #f9fafa;
3636
3643
  }
3637
- ._subtitle_jukpz_361 {
3644
+ ._subtitle_15pba_410 {
3638
3645
  margin: 0;
3639
3646
  font-size: 16px;
3640
3647
  line-height: 1.55;
3641
3648
  color: #f9fafa;
3642
3649
  }
3643
- ._cta_jukpz_367 {
3650
+ ._cta_15pba_416 {
3644
3651
  display: inline-flex;
3645
3652
  align-items: center;
3646
3653
  justify-content: center;
@@ -3654,19 +3661,19 @@
3654
3661
  font-weight: 700;
3655
3662
  text-decoration: none;
3656
3663
  }
3657
- ._cta_jukpz_367::after {
3664
+ ._cta_15pba_416::after {
3658
3665
  content: "";
3659
3666
  position: absolute;
3660
3667
  inset: 0;
3661
3668
  }
3662
- ._cta_jukpz_367:active {
3669
+ ._cta_15pba_416:active {
3663
3670
  background: rgba(249, 250, 250, 0.12);
3664
3671
  }
3665
- ._cta_jukpz_367:focus-visible {
3672
+ ._cta_15pba_416:focus-visible {
3666
3673
  outline: none;
3667
3674
  box-shadow: var(--focus-ring);
3668
3675
  }
3669
- ._mosaic_jukpz_411 {
3676
+ ._mosaic_15pba_460 {
3670
3677
  background: #080e12;
3671
3678
  }
3672
3679
  ._header_r9jjq_14 {
package/dist/styles.css CHANGED
@@ -3495,11 +3495,19 @@
3495
3495
  column-gap: var(--space-12);
3496
3496
  row-gap: var(--space-12);
3497
3497
  }
3498
- ._showcase_jukpz_14 {
3499
- --chrome-bleed: calc(3 * (100lvh - 100svh));
3498
+ ._showcase_15pba_14 {
3499
+ --chrome-bleed: 0px;
3500
3500
  background: #080e12;
3501
+ display: flow-root;
3502
+ overflow: clip;
3503
+ overflow-clip-margin: var(--chrome-bleed, 0px);
3501
3504
  }
3502
- ._panel_jukpz_19 {
3505
+ @supports (-webkit-touch-callout: none) {
3506
+ ._showcase_15pba_14 {
3507
+ --chrome-bleed: calc(3 * (100lvh - 100svh));
3508
+ }
3509
+ }
3510
+ ._panel_15pba_57 {
3503
3511
  position: relative;
3504
3512
  height: 100lvh;
3505
3513
  height: calc(100lvh + var(--chrome-bleed, 0px));
@@ -3509,15 +3517,14 @@
3509
3517
  overflow: hidden;
3510
3518
  background: #080e12;
3511
3519
  }
3512
- ._panel_jukpz_19:last-child {
3513
- height: 100dvh;
3514
- scroll-margin-bottom: 0;
3520
+ ._panel_15pba_57:last-child {
3521
+ margin-bottom: calc(100dvh - 100lvh - var(--chrome-bleed, 0px));
3515
3522
  }
3516
- ._image_jukpz_80 {
3523
+ ._image_15pba_122 {
3517
3524
  object-fit: cover;
3518
3525
  object-position: 50% var(--slide-focal-y, 50%);
3519
3526
  }
3520
- ._hero_jukpz_120::after {
3527
+ ._hero_15pba_162::after {
3521
3528
  content: "";
3522
3529
  position: absolute;
3523
3530
  inset: 0;
@@ -3532,10 +3539,10 @@
3532
3539
  rgba(8, 14, 18, 0) calc(520px + var(--chrome-bleed, 0px)));
3533
3540
  pointer-events: none;
3534
3541
  }
3535
- ._hero_jukpz_120 ._heroContent_jukpz_205 {
3542
+ ._hero_15pba_162 ._heroContent_15pba_254 {
3536
3543
  position: absolute;
3537
3544
  bottom: 32px;
3538
- bottom: calc(32px + var(--chrome-bleed, 0px) + 100lvh - 100dvh);
3545
+ bottom: calc(32px + var(--chrome-bleed, 0px) + 100lvh - 100svh);
3539
3546
  left: 0;
3540
3547
  right: 0;
3541
3548
  z-index: 1;
@@ -3544,7 +3551,7 @@
3544
3551
  gap: 24px;
3545
3552
  align-items: stretch;
3546
3553
  }
3547
- ._heroText_jukpz_229 {
3554
+ ._heroText_15pba_278 {
3548
3555
  display: flex;
3549
3556
  flex-direction: column;
3550
3557
  gap: 8px;
@@ -3552,11 +3559,11 @@
3552
3559
  padding: 0 24px;
3553
3560
  text-align: center;
3554
3561
  }
3555
- ._heroText_jukpz_229 ._logo_jukpz_238 {
3562
+ ._heroText_15pba_278 ._logo_15pba_287 {
3556
3563
  width: 48px;
3557
3564
  height: 48px;
3558
3565
  }
3559
- ._heroTitle_jukpz_258 {
3566
+ ._heroTitle_15pba_307 {
3560
3567
  width: 100%;
3561
3568
  margin: 0;
3562
3569
  font-family:
@@ -3571,33 +3578,33 @@
3571
3578
  letter-spacing: -1.12px;
3572
3579
  color: #f9fafa;
3573
3580
  }
3574
- ._heroSub_jukpz_282 {
3581
+ ._heroSub_15pba_331 {
3575
3582
  margin: 0;
3576
3583
  font-size: 16px;
3577
3584
  line-height: 1.55;
3578
3585
  color: #f9fafa;
3579
3586
  max-width: 327px;
3580
3587
  }
3581
- ._swipe_jukpz_301 {
3588
+ ._swipe_15pba_350 {
3582
3589
  display: flex;
3583
3590
  flex-direction: column;
3584
3591
  align-items: center;
3585
3592
  gap: 6px;
3586
3593
  padding: 8px 0;
3587
3594
  }
3588
- ._swipeLabel_jukpz_308 {
3595
+ ._swipeLabel_15pba_357 {
3589
3596
  margin: 0;
3590
3597
  font-size: 14px;
3591
3598
  line-height: 1;
3592
3599
  color: rgba(255, 255, 255, 0.54);
3593
3600
  }
3594
- ._chevron_jukpz_314 {
3601
+ ._chevron_15pba_363 {
3595
3602
  width: 24px;
3596
3603
  height: 24px;
3597
3604
  color: rgba(255, 255, 255, 0.54);
3598
- animation: _bob_jukpz_1 1.8s ease-in-out infinite;
3605
+ animation: _bob_15pba_1 1.8s ease-in-out infinite;
3599
3606
  }
3600
- @keyframes _bob_jukpz_1 {
3607
+ @keyframes _bob_15pba_1 {
3601
3608
  0%, 100% {
3602
3609
  transform: translateY(0);
3603
3610
  }
@@ -3605,7 +3612,7 @@
3605
3612
  transform: translateY(4px);
3606
3613
  }
3607
3614
  }
3608
- ._overlay_jukpz_11 {
3615
+ ._overlay_15pba_11 {
3609
3616
  position: absolute;
3610
3617
  inset: 0;
3611
3618
  z-index: 1;
@@ -3620,27 +3627,27 @@
3620
3627
  gap: 16px;
3621
3628
  align-items: flex-start;
3622
3629
  padding: 0 24px 24px;
3623
- padding-bottom: calc(24px + var(--chrome-bleed, 0px) + 100lvh - 100dvh);
3630
+ padding-bottom: calc(24px + var(--chrome-bleed, 0px) + 100lvh - 100svh);
3624
3631
  }
3625
- ._copy_jukpz_349 {
3632
+ ._copy_15pba_398 {
3626
3633
  display: flex;
3627
3634
  flex-direction: column;
3628
3635
  gap: 8px;
3629
3636
  }
3630
- ._title_jukpz_354 {
3637
+ ._title_15pba_403 {
3631
3638
  margin: 0;
3632
3639
  font-size: 32px;
3633
3640
  line-height: 1.2;
3634
3641
  font-weight: 700;
3635
3642
  color: #f9fafa;
3636
3643
  }
3637
- ._subtitle_jukpz_361 {
3644
+ ._subtitle_15pba_410 {
3638
3645
  margin: 0;
3639
3646
  font-size: 16px;
3640
3647
  line-height: 1.55;
3641
3648
  color: #f9fafa;
3642
3649
  }
3643
- ._cta_jukpz_367 {
3650
+ ._cta_15pba_416 {
3644
3651
  display: inline-flex;
3645
3652
  align-items: center;
3646
3653
  justify-content: center;
@@ -3654,19 +3661,19 @@
3654
3661
  font-weight: 700;
3655
3662
  text-decoration: none;
3656
3663
  }
3657
- ._cta_jukpz_367::after {
3664
+ ._cta_15pba_416::after {
3658
3665
  content: "";
3659
3666
  position: absolute;
3660
3667
  inset: 0;
3661
3668
  }
3662
- ._cta_jukpz_367:active {
3669
+ ._cta_15pba_416:active {
3663
3670
  background: rgba(249, 250, 250, 0.12);
3664
3671
  }
3665
- ._cta_jukpz_367:focus-visible {
3672
+ ._cta_15pba_416:focus-visible {
3666
3673
  outline: none;
3667
3674
  box-shadow: var(--focus-ring);
3668
3675
  }
3669
- ._mosaic_jukpz_411 {
3676
+ ._mosaic_15pba_460 {
3670
3677
  background: #080e12;
3671
3678
  }
3672
3679
  ._header_r9jjq_14 {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nok-integration/storefront-react",
3
- "version": "0.19.50",
3
+ "version": "0.19.51",
4
4
  "description": "Mountable React storefront components: catalogue, product detail and cart, mounted directly into a host DOM tree. No iframe.",
5
5
  "license": "UNLICENSED",
6
6
  "type": "module",