@nok-integration/storefront-react 0.19.15 → 0.19.16

package/dist/standalone/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 {

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 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nok-integration/storefront-react",
-  "version": "0.19.15",
+  "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",