@nok-integration/storefront-react 0.19.14 → 0.19.16

package/dist/styles.css

@@ -1708,14 +1708,34 @@
   height: 24px;
   color: var(--color-text-default);
 }
-._tile_1a177_7 {
+._swatches_mdi63_1 {
+  display: flex;
+  gap: var(--space-4);
+  align-items: center;
+}
+._swatch_mdi63_1 {
+  display: inline-flex;
+  padding: 2px;
+  box-shadow: inset 0 0 0 0.5px var(--color-border-full-color-subtle);
+  border-radius: var(--radius-2);
+}
+._swatchActive_mdi63_18 {
+  box-shadow: inset 0 0 0 0.5px var(--color-border-full-color-max);
+}
+._swatchDot_mdi63_22 {
+  display: block;
+  width: 14px;
+  height: 14px;
+  border-radius: var(--radius-2);
+}
+._tile_yg69t_7 {
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
   text-decoration: none;
   color: inherit;
 }
-._media_1a177_15 {
+._media_yg69t_15 {
   position: relative;
   width: 100%;
   aspect-ratio: 165 / 220;
@@ -1723,15 +1743,15 @@
   overflow: hidden;
   background: var(--color-surface-soft);
 }
-._image_1a177_25 {
+._image_yg69t_25 {
   object-fit: cover;
 }
-._placeholder_1a177_29 {
+._placeholder_yg69t_29 {
   width: 100%;
   height: 100%;
   background: var(--color-surface-soft);
 }
-._topBadge_1a177_37 {
+._topBadge_yg69t_37 {
   position: absolute;
   top: var(--space-8);
   left: var(--space-8);
@@ -1752,13 +1772,13 @@
   text-transform: uppercase;
   white-space: nowrap;
 }
-._saleBadge_1a177_78 {
+._saleBadge_yg69t_78 {
   position: absolute;
   display: flex;
   bottom: var(--space-8);
   left: var(--space-8);
 }
-._oos_1a177_86 {
+._oos_yg69t_86 {
   position: absolute;
   inset: 0;
   display: flex;
@@ -1770,17 +1790,17 @@
   font-size: var(--type-trimmed-sm-size);
   font-weight: var(--font-weight-bold);
 }
-._bottom_1a177_113 {
+._bottom_yg69t_113 {
   display: flex;
   flex-direction: column;
   gap: var(--space-16);
 }
-._titlePrice_1a177_100 {
+._titlePrice_yg69t_100 {
   display: flex;
   flex-direction: column;
   gap: var(--space-16);
 }
-._title_1a177_5 {
+._title_yg69t_5 {
   font-size: var(--type-paragraph-size);
   line-height: 21px;
   padding: 5px 0;
@@ -1794,50 +1814,30 @@
   overflow: hidden;
   min-height: calc(2 * 21px + 10px);
 }
-._titlePrice_1a177_100 > :last-child {
+._titlePrice_yg69t_100 > :last-child {
   line-height: 11px;
 }
-._swatches_1a177_181 {
-  display: flex;
-  gap: var(--space-4);
-  align-items: center;
-}
-._swatch_1a177_181 {
-  display: inline-flex;
-  padding: 2px;
-  box-shadow: inset 0 0 0 0.5px var(--color-border-full-color-subtle);
-  border-radius: var(--radius-2);
-}
-._swatchActive_1a177_198 {
-  box-shadow: inset 0 0 0 0.5px var(--color-border-full-color-max);
-}
-._swatchDot_1a177_202 {
-  display: block;
-  width: 14px;
-  height: 14px;
-  border-radius: var(--radius-2);
-}
-._large_1a177_213 {
+._large_yg69t_185 {
   padding: 0 var(--space-16);
 }
-._large_1a177_213 ._media_1a177_15 {
+._large_yg69t_185 ._media_yg69t_15 {
   aspect-ratio: 343 / 457;
 }
-._large_1a177_213 ._title_1a177_5 {
+._large_yg69t_185 ._title_yg69t_5 {
   font-size: 18px;
   line-height: 23px;
   min-height: 0;
 }
-._tile_1a177_7:not(._large_1a177_213) ._swatches_1a177_181 {
+._tile_yg69t_7:not(._large_yg69t_185) ._swatchSlot_yg69t_223 {
   display: none;
 }
-._section_1n5an_5 {
+._section_v48ok_9 {
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
   padding: var(--space-24) 0;
 }
-._title_1n5an_17 {
+._title_v48ok_21 {
   margin: 0;
   padding: 0 var(--space-16);
   font-size: var(--type-heading-md-size);
@@ -1845,14 +1845,14 @@
   font-weight: var(--font-weight-bold);
   color: var(--color-text-default);
 }
-._link_1n5an_26 {
+._link_v48ok_30 {
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
   text-decoration: none;
   color: inherit;
 }
-._track_1n5an_38 {
+._track_v48ok_42 {
   display: flex;
   gap: var(--space-12);
   list-style: none;
@@ -1864,10 +1864,10 @@
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
 }
-._track_1n5an_38::-webkit-scrollbar {
+._track_v48ok_42::-webkit-scrollbar {
   display: none;
 }
-._frame_1n5an_58 {
+._frame_v48ok_62 {
   position: relative;
   flex: 0 0 auto;
   width: 165px;
@@ -1877,20 +1877,20 @@
   background: var(--color-surface-soft);
   scroll-snap-align: start;
 }
-._image_1n5an_69 {
+._image_v48ok_73 {
   object-fit: cover;
 }
-._placeholder_1n5an_73 {
+._placeholder_v48ok_77 {
   width: 100%;
   height: 100%;
 }
-._saleBadge_1n5an_85 {
+._saleBadge_v48ok_89 {
   position: absolute;
   display: flex;
   bottom: var(--space-8);
   left: var(--space-8);
 }
-._oos_1n5an_93 {
+._oos_v48ok_97 {
   position: absolute;
   inset: 0;
   display: flex;
@@ -1901,13 +1901,16 @@
   font-size: var(--type-trimmed-sm-size);
   font-weight: var(--font-weight-bold);
 }
-._caption_1n5an_109 {
+._caption_v48ok_113 {
   display: flex;
   flex-direction: column;
   gap: var(--space-16);
   padding: 0 var(--space-16);
 }
-._name_1n5an_122 {
+._swatchRow_v48ok_132 {
+  margin-top: calc(var(--space-12) - var(--space-16));
+}
+._name_v48ok_142 {
   font-size: 18px;
   line-height: 23px;
   padding: 5px 0;
@@ -1918,7 +1921,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-._price_1n5an_135 {
+._price_v48ok_155 {
   display: flex;
   align-items: baseline;
   gap: var(--space-4);
@@ -1926,11 +1929,11 @@
   line-height: 11px;
   font-variant-numeric: tabular-nums;
 }
-._paid_1n5an_144 {
+._paid_v48ok_164 {
   font-weight: var(--font-weight-bold);
   color: var(--color-text-default);
 }
-._was_1n5an_150 {
+._was_v48ok_170 {
   font-weight: var(--font-weight-bold);
   color: var(--color-text-disabled);
   text-decoration: line-through;
@@ -3207,18 +3210,17 @@
   justify-content: flex-start;
   text-align: left;
 }
-._wrap_9mquf_1 {
-  padding: var(--space-24) var(--space-16);
+._wrap_79nr3_10 {
+  padding: var(--space-24) 0;
 }
-._box_9mquf_5 {
+._box_79nr3_14 {
   position: relative;
   width: 100%;
-  aspect-ratio: 343 / 425;
-  border-radius: var(--radius-18);
+  aspect-ratio: 3 / 4;
   overflow: hidden;
   background: var(--color-surface-soft);
 }
-._track_9mquf_15 {
+._track_79nr3_23 {
   display: flex;
   list-style: none;
   margin: 0;
@@ -3229,21 +3231,21 @@
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
 }
-._track_9mquf_15::-webkit-scrollbar {
+._track_79nr3_23::-webkit-scrollbar {
   display: none;
 }
-._slide_9mquf_31 {
+._slide_79nr3_39 {
   position: relative;
   flex: 0 0 100%;
   height: 100%;
   scroll-snap-align: start;
 }
-._image_9mquf_38 {
+._image_79nr3_46 {
   object-fit: cover;
 }
-._dots_9mquf_43 {
+._dots_79nr3_51 {
   position: absolute;
-  bottom: 4px;
+  bottom: 0;
   left: 0;
   right: 0;
   height: 32px;
@@ -3253,13 +3255,13 @@
   gap: var(--space-8);
   pointer-events: none;
 }
-._dot_9mquf_43 {
+._dot_79nr3_51 {
   width: 8px;
   height: 8px;
   border-radius: var(--radius-full);
   background: #9ea2a4;
 }
-._dotActive_9mquf_63 {
+._dotActive_79nr3_76 {
   background: #f9fafa;
 }
 ._section_kdf3c_1 {
@@ -3423,10 +3425,10 @@
   column-gap: var(--space-12);
   row-gap: var(--space-24);
 }
-._showcase_a0wva_39 {
+._showcase_144lm_44 {
   background: #080e12;
 }
-._panel_a0wva_43 {
+._panel_144lm_48 {
   position: relative;
   height: calc(100lvh - var(--showcase-top, 0px));
   scroll-snap-align: start;
@@ -3434,39 +3436,28 @@
   overflow: hidden;
   background: #080e12;
 }
-._image_a0wva_71 {
+._image_144lm_76 {
   object-fit: cover;
   object-position: 50% var(--slide-focal-y, 50%);
 }
-._heroImageBox_a0wva_119 {
-  position: absolute;
-  top: 31px;
-  left: 0;
-  right: 0;
-  aspect-ratio: 750 / 1348;
-  overflow: hidden;
-}
-._hero_a0wva_119::after {
+._hero_144lm_116::after {
   content: "";
   position: absolute;
   inset: 0;
   background:
     linear-gradient(
       to bottom,
-      rgba(8, 14, 18, 1) 39px,
-      rgba(8, 14, 18, 0) 119px),
+      rgba(8, 14, 18, 0.45) 118px,
+      rgba(8, 14, 18, 0) 180px),
     linear-gradient(
-      to bottom,
-      rgba(8, 14, 18, 0) 18%,
-      rgba(8, 14, 18, 1) 90%);
+      to top,
+      rgba(8, 14, 18, 0.6) 330px,
+      rgba(8, 14, 18, 0) 520px);
   pointer-events: none;
 }
-._hero_a0wva_119 ._image_a0wva_71 {
-  object-position: top;
-}
-._hero_a0wva_119 ._heroContent_a0wva_190 {
+._hero_144lm_116 ._heroContent_144lm_174 {
   position: absolute;
-  bottom: 0;
+  bottom: 32px;
   left: 0;
   right: 0;
   z-index: 1;
@@ -3475,7 +3466,7 @@
   gap: 24px;
   align-items: stretch;
 }
-._heroText_a0wva_207 {
+._heroText_144lm_197 {
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -3483,11 +3474,11 @@
   padding: 0 24px;
   text-align: center;
 }
-._heroText_a0wva_207 ._logo_a0wva_216 {
+._heroText_144lm_197 ._logo_144lm_206 {
   width: 48px;
   height: 48px;
 }
-._heroTitle_a0wva_236 {
+._heroTitle_144lm_226 {
   width: 100%;
   margin: 0;
   font-family:
@@ -3502,34 +3493,33 @@
   letter-spacing: -1.12px;
   color: #f9fafa;
 }
-._heroSub_a0wva_260 {
+._heroSub_144lm_250 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
   max-width: 327px;
 }
-._swipe_a0wva_273 {
+._swipe_144lm_269 {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 6px;
   padding: 8px 0;
-  background: #080e12;
 }
-._swipeLabel_a0wva_281 {
+._swipeLabel_144lm_276 {
   margin: 0;
   font-size: 14px;
   line-height: 1;
   color: rgba(255, 255, 255, 0.54);
 }
-._chevron_a0wva_287 {
+._chevron_144lm_282 {
   width: 24px;
   height: 24px;
   color: rgba(255, 255, 255, 0.54);
-  animation: _bob_a0wva_1 1.8s ease-in-out infinite;
+  animation: _bob_144lm_1 1.8s ease-in-out infinite;
 }
-@keyframes _bob_a0wva_1 {
+@keyframes _bob_144lm_1 {
   0%, 100% {
     transform: translateY(0);
   }
@@ -3537,10 +3527,15 @@
     transform: translateY(4px);
   }
 }
-._overlay_a0wva_304 {
+._overlay_144lm_11 {
   position: absolute;
   inset: 0;
   z-index: 1;
+  background:
+    linear-gradient(
+      to top,
+      rgba(8, 14, 18, 0.6) 260px,
+      rgba(8, 14, 18, 0) 460px);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
@@ -3548,25 +3543,25 @@
   align-items: flex-start;
   padding: 0 24px 24px;
 }
-._copy_a0wva_315 {
+._copy_144lm_315 {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
-._title_a0wva_320 {
+._title_144lm_320 {
   margin: 0;
   font-size: 32px;
   line-height: 1.2;
   font-weight: 700;
   color: #f9fafa;
 }
-._subtitle_a0wva_327 {
+._subtitle_144lm_327 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
 }
-._cta_a0wva_333 {
+._cta_144lm_333 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3580,18 +3575,21 @@
   font-weight: 700;
   text-decoration: none;
 }
-._cta_a0wva_333::after {
+._cta_144lm_333::after {
   content: "";
   position: absolute;
   inset: 0;
 }
-._cta_a0wva_333:active {
+._cta_144lm_333:active {
   background: rgba(249, 250, 250, 0.12);
 }
-._cta_a0wva_333:focus-visible {
+._cta_144lm_333:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
+._mosaic_144lm_377 {
+  background: #080e12;
+}
 ._header_8o3d7_25 {
   position: sticky;
   top: 0;

package/package.json

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