@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 +18 -18
- package/dist/standalone/storefront.mjs +18 -18
- package/dist/standalone/styles.css +36 -29
- package/dist/styles.css +36 -29
- package/package.json +1 -1
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 = "
|
|
11105
|
-
const panel = "
|
|
11106
|
-
const image = "
|
|
11107
|
-
const hero = "
|
|
11108
|
-
const heroContent = "
|
|
11109
|
-
const heroText = "
|
|
11110
|
-
const logo = "
|
|
11111
|
-
const heroTitle = "
|
|
11112
|
-
const heroSub = "
|
|
11113
|
-
const swipe = "
|
|
11114
|
-
const swipeLabel = "
|
|
11115
|
-
const chevron$1 = "
|
|
11116
|
-
const overlay$1 = "
|
|
11117
|
-
const copy = "
|
|
11118
|
-
const title$2 = "
|
|
11119
|
-
const subtitle$1 = "
|
|
11120
|
-
const cta = "
|
|
11121
|
-
const mosaic = "
|
|
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 = "
|
|
11105
|
-
const panel = "
|
|
11106
|
-
const image = "
|
|
11107
|
-
const hero = "
|
|
11108
|
-
const heroContent = "
|
|
11109
|
-
const heroText = "
|
|
11110
|
-
const logo = "
|
|
11111
|
-
const heroTitle = "
|
|
11112
|
-
const heroSub = "
|
|
11113
|
-
const swipe = "
|
|
11114
|
-
const swipeLabel = "
|
|
11115
|
-
const chevron$1 = "
|
|
11116
|
-
const overlay$1 = "
|
|
11117
|
-
const copy = "
|
|
11118
|
-
const title$2 = "
|
|
11119
|
-
const subtitle$1 = "
|
|
11120
|
-
const cta = "
|
|
11121
|
-
const mosaic = "
|
|
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
|
-
.
|
|
3499
|
-
--chrome-bleed:
|
|
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
|
-
|
|
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
|
-
.
|
|
3513
|
-
|
|
3514
|
-
scroll-margin-bottom: 0;
|
|
3520
|
+
._panel_15pba_57:last-child {
|
|
3521
|
+
margin-bottom: calc(100dvh - 100lvh - var(--chrome-bleed, 0px));
|
|
3515
3522
|
}
|
|
3516
|
-
.
|
|
3523
|
+
._image_15pba_122 {
|
|
3517
3524
|
object-fit: cover;
|
|
3518
3525
|
object-position: 50% var(--slide-focal-y, 50%);
|
|
3519
3526
|
}
|
|
3520
|
-
.
|
|
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
|
-
.
|
|
3542
|
+
._hero_15pba_162 ._heroContent_15pba_254 {
|
|
3536
3543
|
position: absolute;
|
|
3537
3544
|
bottom: 32px;
|
|
3538
|
-
bottom: calc(32px + var(--chrome-bleed, 0px) + 100lvh -
|
|
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
|
-
.
|
|
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
|
-
.
|
|
3562
|
+
._heroText_15pba_278 ._logo_15pba_287 {
|
|
3556
3563
|
width: 48px;
|
|
3557
3564
|
height: 48px;
|
|
3558
3565
|
}
|
|
3559
|
-
.
|
|
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
|
-
.
|
|
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
|
-
.
|
|
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
|
-
.
|
|
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
|
-
.
|
|
3601
|
+
._chevron_15pba_363 {
|
|
3595
3602
|
width: 24px;
|
|
3596
3603
|
height: 24px;
|
|
3597
3604
|
color: rgba(255, 255, 255, 0.54);
|
|
3598
|
-
animation:
|
|
3605
|
+
animation: _bob_15pba_1 1.8s ease-in-out infinite;
|
|
3599
3606
|
}
|
|
3600
|
-
@keyframes
|
|
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
|
-
.
|
|
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 -
|
|
3630
|
+
padding-bottom: calc(24px + var(--chrome-bleed, 0px) + 100lvh - 100svh);
|
|
3624
3631
|
}
|
|
3625
|
-
.
|
|
3632
|
+
._copy_15pba_398 {
|
|
3626
3633
|
display: flex;
|
|
3627
3634
|
flex-direction: column;
|
|
3628
3635
|
gap: 8px;
|
|
3629
3636
|
}
|
|
3630
|
-
.
|
|
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
|
-
.
|
|
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
|
-
.
|
|
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
|
-
.
|
|
3664
|
+
._cta_15pba_416::after {
|
|
3658
3665
|
content: "";
|
|
3659
3666
|
position: absolute;
|
|
3660
3667
|
inset: 0;
|
|
3661
3668
|
}
|
|
3662
|
-
.
|
|
3669
|
+
._cta_15pba_416:active {
|
|
3663
3670
|
background: rgba(249, 250, 250, 0.12);
|
|
3664
3671
|
}
|
|
3665
|
-
.
|
|
3672
|
+
._cta_15pba_416:focus-visible {
|
|
3666
3673
|
outline: none;
|
|
3667
3674
|
box-shadow: var(--focus-ring);
|
|
3668
3675
|
}
|
|
3669
|
-
.
|
|
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
|
-
.
|
|
3499
|
-
--chrome-bleed:
|
|
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
|
-
|
|
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
|
-
.
|
|
3513
|
-
|
|
3514
|
-
scroll-margin-bottom: 0;
|
|
3520
|
+
._panel_15pba_57:last-child {
|
|
3521
|
+
margin-bottom: calc(100dvh - 100lvh - var(--chrome-bleed, 0px));
|
|
3515
3522
|
}
|
|
3516
|
-
.
|
|
3523
|
+
._image_15pba_122 {
|
|
3517
3524
|
object-fit: cover;
|
|
3518
3525
|
object-position: 50% var(--slide-focal-y, 50%);
|
|
3519
3526
|
}
|
|
3520
|
-
.
|
|
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
|
-
.
|
|
3542
|
+
._hero_15pba_162 ._heroContent_15pba_254 {
|
|
3536
3543
|
position: absolute;
|
|
3537
3544
|
bottom: 32px;
|
|
3538
|
-
bottom: calc(32px + var(--chrome-bleed, 0px) + 100lvh -
|
|
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
|
-
.
|
|
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
|
-
.
|
|
3562
|
+
._heroText_15pba_278 ._logo_15pba_287 {
|
|
3556
3563
|
width: 48px;
|
|
3557
3564
|
height: 48px;
|
|
3558
3565
|
}
|
|
3559
|
-
.
|
|
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
|
-
.
|
|
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
|
-
.
|
|
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
|
-
.
|
|
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
|
-
.
|
|
3601
|
+
._chevron_15pba_363 {
|
|
3595
3602
|
width: 24px;
|
|
3596
3603
|
height: 24px;
|
|
3597
3604
|
color: rgba(255, 255, 255, 0.54);
|
|
3598
|
-
animation:
|
|
3605
|
+
animation: _bob_15pba_1 1.8s ease-in-out infinite;
|
|
3599
3606
|
}
|
|
3600
|
-
@keyframes
|
|
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
|
-
.
|
|
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 -
|
|
3630
|
+
padding-bottom: calc(24px + var(--chrome-bleed, 0px) + 100lvh - 100svh);
|
|
3624
3631
|
}
|
|
3625
|
-
.
|
|
3632
|
+
._copy_15pba_398 {
|
|
3626
3633
|
display: flex;
|
|
3627
3634
|
flex-direction: column;
|
|
3628
3635
|
gap: 8px;
|
|
3629
3636
|
}
|
|
3630
|
-
.
|
|
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
|
-
.
|
|
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
|
-
.
|
|
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
|
-
.
|
|
3664
|
+
._cta_15pba_416::after {
|
|
3658
3665
|
content: "";
|
|
3659
3666
|
position: absolute;
|
|
3660
3667
|
inset: 0;
|
|
3661
3668
|
}
|
|
3662
|
-
.
|
|
3669
|
+
._cta_15pba_416:active {
|
|
3663
3670
|
background: rgba(249, 250, 250, 0.12);
|
|
3664
3671
|
}
|
|
3665
|
-
.
|
|
3672
|
+
._cta_15pba_416:focus-visible {
|
|
3666
3673
|
outline: none;
|
|
3667
3674
|
box-shadow: var(--focus-ring);
|
|
3668
3675
|
}
|
|
3669
|
-
.
|
|
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.
|
|
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",
|