@nok-integration/storefront-react 0.19.6 → 0.19.8

package/dist/index.d.ts

@@ -2503,6 +2503,7 @@ declare function createClient(options: ClientOptions): {
                 cta: string;
                 image?: string | undefined;
                 target?: string | undefined;
+                focal_y?: number | undefined;
             }[];
         }>;
     };
@@ -3692,11 +3693,20 @@ declare const OrderDetail: z.ZodObject<{
             currency: string;
         }>;
         /**
-         * The undiscounted per-unit price, echoed from intake. Display only.
+         * The undiscounted per-unit price. Display only.
          *
-         * Drawn as a struck-through price with a saving badge beside what was paid. Absent
-         * means the line was sold at full price, which is the ordinary case; see `OrderLine`
-         * for why this is DAZN's figure and not our catalogue's.
+         * Drawn as a struck-through price with a saving badge beside what was paid. Absent means
+         * the line was sold at full price.
+         *
+         * **Two possible sources, and the screen cannot tell them apart.** It is the
+         * `compare_at_unit_price` stated on the order where one was sent, and the catalogue's
+         * current compare-at for the order's currency where it was not. The second exists
+         * because the first is not yet populated, and it carries a caveat the first does not: a
+         * catalogue price moves with merchandising, so this figure can differ between two reads
+         * of the same order. What was *paid* never moves.
+         *
+         * Always strictly greater than `unit_price` when present — a compare-at at or below what
+         * was paid is dropped rather than drawn as a saving of zero or less.
          */
         compare_at_unit_price: z.ZodOptional<z.ZodObject<{
             amount: z.ZodNumber;

package/dist/index.mjs

@@ -4391,7 +4391,8 @@ function requireContent() {
       subtitle: zod_1.z.string(),
       cta: zod_1.z.string().min(1),
       target: zod_1.z.string().min(1).optional(),
-      image: zod_1.z.string().min(1).optional()
+      image: zod_1.z.string().min(1).optional(),
+      focal_y: zod_1.z.number().int().min(0).max(100).optional()
     });
     exports.HomeContent = zod_1.z.object({
       slides: zod_1.z.array(exports.HomeSlide)
@@ -4599,7 +4600,7 @@ function requireOrders() {
       last4: zod_1.z.string().regex(/^\d{4}$/).optional()
     });
     exports.OrderPlacedRequest = exports.OrderEventEnvelope.extend({
-      order_ref: ids_1.OrderRef,
+      order_ref: ids_1.OrderRef.optional(),
       placed_at: common_1.Timestamp,
       currency: money_1.Currency,
       customer: exports.OrderCustomer,
@@ -6472,22 +6473,23 @@ function renderValue(key, pricing, format, t) {
   }
   return key === "discount" ? null : format(pricing[key]);
 }
-const lines$1 = "_lines_7mr8w_19";
-const line$2 = "_line_7mr8w_19";
-const thumb$2 = "_thumb_7mr8w_34";
-const image$9 = "_image_7mr8w_44";
-const placeholder$8 = "_placeholder_7mr8w_48";
-const lineBody = "_lineBody_7mr8w_53";
-const lineText = "_lineText_7mr8w_62";
-const lineTitle = "_lineTitle_7mr8w_72";
-const lineMeta = "_lineMeta_7mr8w_91";
-const linePrice = "_linePrice_7mr8w_106";
-const paid$3 = "_paid_7mr8w_118";
-const was$4 = "_was_7mr8w_124";
-const card$4 = "_card_7mr8w_144";
-const cardTitle = "_cardTitle_7mr8w_152";
-const cardBody = "_cardBody_7mr8w_164";
-const summaryCard = "_summaryCard_7mr8w_136";
+const lines$1 = "_lines_1vmnm_19";
+const line$2 = "_line_1vmnm_19";
+const thumb$2 = "_thumb_1vmnm_34";
+const image$9 = "_image_1vmnm_44";
+const placeholder$8 = "_placeholder_1vmnm_48";
+const lineBody = "_lineBody_1vmnm_53";
+const lineText = "_lineText_1vmnm_62";
+const lineTitle = "_lineTitle_1vmnm_72";
+const lineMeta = "_lineMeta_1vmnm_104";
+const detail$1 = "_detail_1vmnm_101";
+const linePrice = "_linePrice_1vmnm_125";
+const paid$3 = "_paid_1vmnm_137";
+const was$4 = "_was_1vmnm_150";
+const card$4 = "_card_1vmnm_173";
+const cardTitle = "_cardTitle_1vmnm_181";
+const cardBody = "_cardBody_1vmnm_193";
+const summaryCard = "_summaryCard_1vmnm_165";
 const styles$D = {
   lines: lines$1,
   line: line$2,
@@ -6498,6 +6500,7 @@ const styles$D = {
   lineText,
   lineTitle,
   lineMeta,
+  detail: detail$1,
   linePrice,
   paid: paid$3,
   was: was$4,
@@ -6549,6 +6552,7 @@ function OrderLine({ item: item2 }) {
         }), jsxs("span", {
           className: styles$D.lineMeta,
           children: [details2.map((detail2) => jsx("span", {
+            className: styles$D.detail,
             children: detail2
           }, detail2)), pct !== void 0 && jsx(SaleBadge, {
             pct
@@ -10563,24 +10567,24 @@ function ProductView({ sku, initialData, showRecommendations = true, onNotFound
   }
   return unavailable;
 }
-const showcase = "_showcase_12z2a_40";
-const panel = "_panel_12z2a_59";
-const image = "_image_12z2a_69";
-const heroImageBox = "_heroImageBox_12z2a_117";
-const hero = "_hero_12z2a_117";
-const heroContent = "_heroContent_12z2a_188";
-const heroText = "_heroText_12z2a_205";
-const logo = "_logo_12z2a_214";
-const heroTitle = "_heroTitle_12z2a_234";
-const heroSub = "_heroSub_12z2a_258";
-const swipe = "_swipe_12z2a_271";
-const swipeLabel = "_swipeLabel_12z2a_279";
-const chevron$1 = "_chevron_12z2a_285";
-const overlay$1 = "_overlay_12z2a_302";
-const copy = "_copy_12z2a_313";
-const title$2 = "_title_12z2a_318";
-const subtitle$1 = "_subtitle_12z2a_325";
-const cta = "_cta_12z2a_331";
+const showcase = "_showcase_1y51o_40";
+const panel = "_panel_1y51o_59";
+const image = "_image_1y51o_88";
+const heroImageBox = "_heroImageBox_1y51o_136";
+const hero = "_hero_1y51o_136";
+const heroContent = "_heroContent_1y51o_207";
+const heroText = "_heroText_1y51o_224";
+const logo = "_logo_1y51o_233";
+const heroTitle = "_heroTitle_1y51o_253";
+const heroSub = "_heroSub_1y51o_277";
+const swipe = "_swipe_1y51o_290";
+const swipeLabel = "_swipeLabel_1y51o_298";
+const chevron$1 = "_chevron_1y51o_304";
+const overlay$1 = "_overlay_1y51o_321";
+const copy = "_copy_1y51o_332";
+const title$2 = "_title_1y51o_337";
+const subtitle$1 = "_subtitle_1y51o_344";
+const cta = "_cta_1y51o_350";
 const styles$2 = {
   showcase,
   panel,
@@ -10677,6 +10681,11 @@ function CategoryPanel({ panel: panel2 }) {
   return jsxs("section", {
     className: styles$2.panel,
     "aria-label": panel2.title,
+    ...panel2.focalY === void 0 ? {} : {
+      style: {
+        "--slide-focal-y": `${panel2.focalY}%`
+      }
+    },
     children: [jsx(ShopImage, {
       src: panel2.image,
       alt: "",
@@ -10725,7 +10734,10 @@ function useSlides() {
         subtitle: s.subtitle,
         cta: s.cta,
         to: s.target ? `/category/${s.target}` : "/",
-        image: s.image ?? ""
+        image: s.image ?? "",
+        ...s.focal_y === void 0 ? {} : {
+          focalY: s.focal_y
+        }
       })));
     }).catch(() => {
     });

package/dist/standalone/storefront.mjs

@@ -4391,7 +4391,8 @@ function requireContent() {
       subtitle: zod_1.z.string(),
       cta: zod_1.z.string().min(1),
       target: zod_1.z.string().min(1).optional(),
-      image: zod_1.z.string().min(1).optional()
+      image: zod_1.z.string().min(1).optional(),
+      focal_y: zod_1.z.number().int().min(0).max(100).optional()
     });
     exports.HomeContent = zod_1.z.object({
       slides: zod_1.z.array(exports.HomeSlide)
@@ -4599,7 +4600,7 @@ function requireOrders() {
       last4: zod_1.z.string().regex(/^\d{4}$/).optional()
     });
     exports.OrderPlacedRequest = exports.OrderEventEnvelope.extend({
-      order_ref: ids_1.OrderRef,
+      order_ref: ids_1.OrderRef.optional(),
       placed_at: common_1.Timestamp,
       currency: money_1.Currency,
       customer: exports.OrderCustomer,
@@ -6472,22 +6473,23 @@ function renderValue(key, pricing, format, t) {
   }
   return key === "discount" ? null : format(pricing[key]);
 }
-const lines$1 = "_lines_7mr8w_19";
-const line$2 = "_line_7mr8w_19";
-const thumb$2 = "_thumb_7mr8w_34";
-const image$9 = "_image_7mr8w_44";
-const placeholder$8 = "_placeholder_7mr8w_48";
-const lineBody = "_lineBody_7mr8w_53";
-const lineText = "_lineText_7mr8w_62";
-const lineTitle = "_lineTitle_7mr8w_72";
-const lineMeta = "_lineMeta_7mr8w_91";
-const linePrice = "_linePrice_7mr8w_106";
-const paid$3 = "_paid_7mr8w_118";
-const was$4 = "_was_7mr8w_124";
-const card$4 = "_card_7mr8w_144";
-const cardTitle = "_cardTitle_7mr8w_152";
-const cardBody = "_cardBody_7mr8w_164";
-const summaryCard = "_summaryCard_7mr8w_136";
+const lines$1 = "_lines_1vmnm_19";
+const line$2 = "_line_1vmnm_19";
+const thumb$2 = "_thumb_1vmnm_34";
+const image$9 = "_image_1vmnm_44";
+const placeholder$8 = "_placeholder_1vmnm_48";
+const lineBody = "_lineBody_1vmnm_53";
+const lineText = "_lineText_1vmnm_62";
+const lineTitle = "_lineTitle_1vmnm_72";
+const lineMeta = "_lineMeta_1vmnm_104";
+const detail$1 = "_detail_1vmnm_101";
+const linePrice = "_linePrice_1vmnm_125";
+const paid$3 = "_paid_1vmnm_137";
+const was$4 = "_was_1vmnm_150";
+const card$4 = "_card_1vmnm_173";
+const cardTitle = "_cardTitle_1vmnm_181";
+const cardBody = "_cardBody_1vmnm_193";
+const summaryCard = "_summaryCard_1vmnm_165";
 const styles$D = {
   lines: lines$1,
   line: line$2,
@@ -6498,6 +6500,7 @@ const styles$D = {
   lineText,
   lineTitle,
   lineMeta,
+  detail: detail$1,
   linePrice,
   paid: paid$3,
   was: was$4,
@@ -6549,6 +6552,7 @@ function OrderLine({ item: item2 }) {
         }), jsxs("span", {
           className: styles$D.lineMeta,
           children: [details2.map((detail2) => jsx("span", {
+            className: styles$D.detail,
             children: detail2
           }, detail2)), pct !== void 0 && jsx(SaleBadge, {
             pct
@@ -10563,24 +10567,24 @@ function ProductView({ sku, initialData, showRecommendations = true, onNotFound
   }
   return unavailable;
 }
-const showcase = "_showcase_12z2a_40";
-const panel = "_panel_12z2a_59";
-const image = "_image_12z2a_69";
-const heroImageBox = "_heroImageBox_12z2a_117";
-const hero = "_hero_12z2a_117";
-const heroContent = "_heroContent_12z2a_188";
-const heroText = "_heroText_12z2a_205";
-const logo = "_logo_12z2a_214";
-const heroTitle = "_heroTitle_12z2a_234";
-const heroSub = "_heroSub_12z2a_258";
-const swipe = "_swipe_12z2a_271";
-const swipeLabel = "_swipeLabel_12z2a_279";
-const chevron$1 = "_chevron_12z2a_285";
-const overlay$1 = "_overlay_12z2a_302";
-const copy = "_copy_12z2a_313";
-const title$2 = "_title_12z2a_318";
-const subtitle$1 = "_subtitle_12z2a_325";
-const cta = "_cta_12z2a_331";
+const showcase = "_showcase_1y51o_40";
+const panel = "_panel_1y51o_59";
+const image = "_image_1y51o_88";
+const heroImageBox = "_heroImageBox_1y51o_136";
+const hero = "_hero_1y51o_136";
+const heroContent = "_heroContent_1y51o_207";
+const heroText = "_heroText_1y51o_224";
+const logo = "_logo_1y51o_233";
+const heroTitle = "_heroTitle_1y51o_253";
+const heroSub = "_heroSub_1y51o_277";
+const swipe = "_swipe_1y51o_290";
+const swipeLabel = "_swipeLabel_1y51o_298";
+const chevron$1 = "_chevron_1y51o_304";
+const overlay$1 = "_overlay_1y51o_321";
+const copy = "_copy_1y51o_332";
+const title$2 = "_title_1y51o_337";
+const subtitle$1 = "_subtitle_1y51o_344";
+const cta = "_cta_1y51o_350";
 const styles$2 = {
   showcase,
   panel,
@@ -10677,6 +10681,11 @@ function CategoryPanel({ panel: panel2 }) {
   return jsxs("section", {
     className: styles$2.panel,
     "aria-label": panel2.title,
+    ...panel2.focalY === void 0 ? {} : {
+      style: {
+        "--slide-focal-y": `${panel2.focalY}%`
+      }
+    },
     children: [jsx(ShopImage, {
       src: panel2.image,
       alt: "",
@@ -10725,7 +10734,10 @@ function useSlides() {
         subtitle: s.subtitle,
         cta: s.cta,
         to: s.target ? `/category/${s.target}` : "/",
-        image: s.image ?? ""
+        image: s.image ?? "",
+        ...s.focal_y === void 0 ? {} : {
+          focalY: s.focal_y
+        }
       })));
     }).catch(() => {
     });

package/dist/standalone/styles.css

@@ -683,7 +683,7 @@
 ._row_1hsxt_16._discount_1hsxt_69 dd {
   color: var(--color-state-text-success);
 }
-._lines_7mr8w_19 {
+._lines_1vmnm_19 {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -691,12 +691,12 @@
   flex-direction: column;
   gap: var(--space-16);
 }
-._line_7mr8w_19 {
+._line_1vmnm_19 {
   display: flex;
   align-items: center;
   gap: var(--space-12);
 }
-._thumb_7mr8w_34 {
+._thumb_1vmnm_34 {
   position: relative;
   flex-shrink: 0;
   width: 48px;
@@ -705,14 +705,14 @@
   overflow: hidden;
   background: var(--color-surface-soft);
 }
-._image_7mr8w_44 {
+._image_1vmnm_44 {
   object-fit: cover;
 }
-._placeholder_7mr8w_48 {
+._placeholder_1vmnm_48 {
   width: 100%;
   height: 100%;
 }
-._lineBody_7mr8w_53 {
+._lineBody_1vmnm_53 {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
@@ -720,14 +720,14 @@
   flex: 1 1 0;
   min-width: 0;
 }
-._lineText_7mr8w_62 {
+._lineText_1vmnm_62 {
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
   flex: 1 1 0;
   min-width: 0;
 }
-._lineTitle_7mr8w_72 {
+._lineTitle_1vmnm_72 {
   margin: -6px 0;
   padding: 6px 0;
   font-size: var(--type-trimmed-sm-size);
@@ -737,16 +737,20 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._lineMeta_7mr8w_91 {
+._lineMeta_1vmnm_104 {
   display: flex;
   align-items: center;
-  gap: var(--space-12);
+  flex-wrap: wrap;
+  gap: var(--space-6);
   min-width: 0;
   font-size: var(--type-trimmed-sm-size);
   line-height: 11px;
   color: var(--color-text-subtle);
 }
-._linePrice_7mr8w_106 {
+._detail_1vmnm_101 {
+  white-space: nowrap;
+}
+._linePrice_1vmnm_125 {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
@@ -755,26 +759,29 @@
   white-space: nowrap;
   font-variant-numeric: tabular-nums;
 }
-._paid_7mr8w_118 {
+._paid_1vmnm_137 {
   font-size: var(--type-trimmed-md-size);
   line-height: 11px;
   font-weight: var(--font-weight-bold);
 }
-._was_7mr8w_124 {
+._was_1vmnm_150 {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
   font-size: var(--type-trimmed-sm-size);
   line-height: 10px;
   font-weight: var(--font-weight-regular);
   color: var(--color-text-disabled);
   text-decoration: line-through;
 }
-._card_7mr8w_144 {
+._card_1vmnm_173 {
   display: flex;
   flex-direction: column;
   box-shadow: inset 0 0 0 1px var(--color-border-default);
   border-radius: var(--radius-18);
   overflow: hidden;
 }
-._cardTitle_7mr8w_152 {
+._cardTitle_1vmnm_181 {
   display: flex;
   align-items: center;
   margin: 0;
@@ -785,16 +792,16 @@
   line-height: 1.38;
   font-weight: var(--font-weight-bold);
 }
-._cardBody_7mr8w_164 {
+._cardBody_1vmnm_193 {
   margin: 0;
   padding: var(--space-16);
   font-size: var(--type-trimmed-sm-size);
   line-height: 1.5;
 }
-._summaryCard_7mr8w_136 {
+._summaryCard_1vmnm_165 {
   background: var(--color-surface-soft);
 }
-._summaryCard_7mr8w_136 > :last-child {
+._summaryCard_1vmnm_165 > :last-child {
   padding: 0 var(--space-16);
 }
 ._header_1f3nh_7 {
@@ -3390,7 +3397,7 @@
   column-gap: var(--space-12);
   row-gap: var(--space-24);
 }
-._showcase_12z2a_40 {
+._showcase_1y51o_40 {
   height: calc(var(--showcase-vh, 100svh) - var(--showcase-top, 0px));
   overflow-y: auto;
   scroll-snap-type: y mandatory;
@@ -3399,10 +3406,10 @@
   background: #080e12;
   scrollbar-width: none;
 }
-._showcase_12z2a_40::-webkit-scrollbar {
+._showcase_1y51o_40::-webkit-scrollbar {
   display: none;
 }
-._panel_12z2a_59 {
+._panel_1y51o_59 {
   position: relative;
   height: calc(var(--showcase-vh, 100svh) - var(--showcase-top, 0px));
   scroll-snap-align: start;
@@ -3410,11 +3417,11 @@
   overflow: hidden;
   background: #080e12;
 }
-._image_12z2a_69 {
+._image_1y51o_88 {
   object-fit: cover;
-  object-position: center;
+  object-position: 50% var(--slide-focal-y, 50%);
 }
-._heroImageBox_12z2a_117 {
+._heroImageBox_1y51o_136 {
   position: absolute;
   top: 31px;
   left: 0;
@@ -3422,7 +3429,7 @@
   aspect-ratio: 750 / 1348;
   overflow: hidden;
 }
-._hero_12z2a_117::after {
+._hero_1y51o_136::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -3437,10 +3444,10 @@
       rgba(8, 14, 18, 1) 90%);
   pointer-events: none;
 }
-._hero_12z2a_117 ._image_12z2a_69 {
+._hero_1y51o_136 ._image_1y51o_88 {
   object-position: top;
 }
-._hero_12z2a_117 ._heroContent_12z2a_188 {
+._hero_1y51o_136 ._heroContent_1y51o_207 {
   position: absolute;
   bottom: 0;
   left: 0;
@@ -3451,7 +3458,7 @@
   gap: 24px;
   align-items: stretch;
 }
-._heroText_12z2a_205 {
+._heroText_1y51o_224 {
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -3459,11 +3466,11 @@
   padding: 0 24px;
   text-align: center;
 }
-._heroText_12z2a_205 ._logo_12z2a_214 {
+._heroText_1y51o_224 ._logo_1y51o_233 {
   width: 48px;
   height: 48px;
 }
-._heroTitle_12z2a_234 {
+._heroTitle_1y51o_253 {
   width: 100%;
   margin: 0;
   font-family:
@@ -3478,14 +3485,14 @@
   letter-spacing: -1.12px;
   color: #f9fafa;
 }
-._heroSub_12z2a_258 {
+._heroSub_1y51o_277 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
   max-width: 327px;
 }
-._swipe_12z2a_271 {
+._swipe_1y51o_290 {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -3493,19 +3500,19 @@
   padding: 8px 0;
   background: #080e12;
 }
-._swipeLabel_12z2a_279 {
+._swipeLabel_1y51o_298 {
   margin: 0;
   font-size: 14px;
   line-height: 1;
   color: rgba(255, 255, 255, 0.54);
 }
-._chevron_12z2a_285 {
+._chevron_1y51o_304 {
   width: 24px;
   height: 24px;
   color: rgba(255, 255, 255, 0.54);
-  animation: _bob_12z2a_1 1.8s ease-in-out infinite;
+  animation: _bob_1y51o_1 1.8s ease-in-out infinite;
 }
-@keyframes _bob_12z2a_1 {
+@keyframes _bob_1y51o_1 {
   0%, 100% {
     transform: translateY(0);
   }
@@ -3513,7 +3520,7 @@
     transform: translateY(4px);
   }
 }
-._overlay_12z2a_302 {
+._overlay_1y51o_321 {
   position: absolute;
   inset: 0;
   z-index: 1;
@@ -3524,25 +3531,25 @@
   align-items: flex-start;
   padding: 0 24px 24px;
 }
-._copy_12z2a_313 {
+._copy_1y51o_332 {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
-._title_12z2a_318 {
+._title_1y51o_337 {
   margin: 0;
   font-size: 32px;
   line-height: 1.2;
   font-weight: 700;
   color: #f9fafa;
 }
-._subtitle_12z2a_325 {
+._subtitle_1y51o_344 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
 }
-._cta_12z2a_331 {
+._cta_1y51o_350 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3556,15 +3563,15 @@
   font-weight: 700;
   text-decoration: none;
 }
-._cta_12z2a_331::after {
+._cta_1y51o_350::after {
   content: "";
   position: absolute;
   inset: 0;
 }
-._cta_12z2a_331:active {
+._cta_1y51o_350:active {
   background: rgba(249, 250, 250, 0.12);
 }
-._cta_12z2a_331:focus-visible {
+._cta_1y51o_350:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }

package/dist/styles.css

@@ -683,7 +683,7 @@
 ._row_1hsxt_16._discount_1hsxt_69 dd {
   color: var(--color-state-text-success);
 }
-._lines_7mr8w_19 {
+._lines_1vmnm_19 {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -691,12 +691,12 @@
   flex-direction: column;
   gap: var(--space-16);
 }
-._line_7mr8w_19 {
+._line_1vmnm_19 {
   display: flex;
   align-items: center;
   gap: var(--space-12);
 }
-._thumb_7mr8w_34 {
+._thumb_1vmnm_34 {
   position: relative;
   flex-shrink: 0;
   width: 48px;
@@ -705,14 +705,14 @@
   overflow: hidden;
   background: var(--color-surface-soft);
 }
-._image_7mr8w_44 {
+._image_1vmnm_44 {
   object-fit: cover;
 }
-._placeholder_7mr8w_48 {
+._placeholder_1vmnm_48 {
   width: 100%;
   height: 100%;
 }
-._lineBody_7mr8w_53 {
+._lineBody_1vmnm_53 {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
@@ -720,14 +720,14 @@
   flex: 1 1 0;
   min-width: 0;
 }
-._lineText_7mr8w_62 {
+._lineText_1vmnm_62 {
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
   flex: 1 1 0;
   min-width: 0;
 }
-._lineTitle_7mr8w_72 {
+._lineTitle_1vmnm_72 {
   margin: -6px 0;
   padding: 6px 0;
   font-size: var(--type-trimmed-sm-size);
@@ -737,16 +737,20 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._lineMeta_7mr8w_91 {
+._lineMeta_1vmnm_104 {
   display: flex;
   align-items: center;
-  gap: var(--space-12);
+  flex-wrap: wrap;
+  gap: var(--space-6);
   min-width: 0;
   font-size: var(--type-trimmed-sm-size);
   line-height: 11px;
   color: var(--color-text-subtle);
 }
-._linePrice_7mr8w_106 {
+._detail_1vmnm_101 {
+  white-space: nowrap;
+}
+._linePrice_1vmnm_125 {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
@@ -755,26 +759,29 @@
   white-space: nowrap;
   font-variant-numeric: tabular-nums;
 }
-._paid_7mr8w_118 {
+._paid_1vmnm_137 {
   font-size: var(--type-trimmed-md-size);
   line-height: 11px;
   font-weight: var(--font-weight-bold);
 }
-._was_7mr8w_124 {
+._was_1vmnm_150 {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
   font-size: var(--type-trimmed-sm-size);
   line-height: 10px;
   font-weight: var(--font-weight-regular);
   color: var(--color-text-disabled);
   text-decoration: line-through;
 }
-._card_7mr8w_144 {
+._card_1vmnm_173 {
   display: flex;
   flex-direction: column;
   box-shadow: inset 0 0 0 1px var(--color-border-default);
   border-radius: var(--radius-18);
   overflow: hidden;
 }
-._cardTitle_7mr8w_152 {
+._cardTitle_1vmnm_181 {
   display: flex;
   align-items: center;
   margin: 0;
@@ -785,16 +792,16 @@
   line-height: 1.38;
   font-weight: var(--font-weight-bold);
 }
-._cardBody_7mr8w_164 {
+._cardBody_1vmnm_193 {
   margin: 0;
   padding: var(--space-16);
   font-size: var(--type-trimmed-sm-size);
   line-height: 1.5;
 }
-._summaryCard_7mr8w_136 {
+._summaryCard_1vmnm_165 {
   background: var(--color-surface-soft);
 }
-._summaryCard_7mr8w_136 > :last-child {
+._summaryCard_1vmnm_165 > :last-child {
   padding: 0 var(--space-16);
 }
 ._header_1f3nh_7 {
@@ -3390,7 +3397,7 @@
   column-gap: var(--space-12);
   row-gap: var(--space-24);
 }
-._showcase_12z2a_40 {
+._showcase_1y51o_40 {
   height: calc(var(--showcase-vh, 100svh) - var(--showcase-top, 0px));
   overflow-y: auto;
   scroll-snap-type: y mandatory;
@@ -3399,10 +3406,10 @@
   background: #080e12;
   scrollbar-width: none;
 }
-._showcase_12z2a_40::-webkit-scrollbar {
+._showcase_1y51o_40::-webkit-scrollbar {
   display: none;
 }
-._panel_12z2a_59 {
+._panel_1y51o_59 {
   position: relative;
   height: calc(var(--showcase-vh, 100svh) - var(--showcase-top, 0px));
   scroll-snap-align: start;
@@ -3410,11 +3417,11 @@
   overflow: hidden;
   background: #080e12;
 }
-._image_12z2a_69 {
+._image_1y51o_88 {
   object-fit: cover;
-  object-position: center;
+  object-position: 50% var(--slide-focal-y, 50%);
 }
-._heroImageBox_12z2a_117 {
+._heroImageBox_1y51o_136 {
   position: absolute;
   top: 31px;
   left: 0;
@@ -3422,7 +3429,7 @@
   aspect-ratio: 750 / 1348;
   overflow: hidden;
 }
-._hero_12z2a_117::after {
+._hero_1y51o_136::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -3437,10 +3444,10 @@
       rgba(8, 14, 18, 1) 90%);
   pointer-events: none;
 }
-._hero_12z2a_117 ._image_12z2a_69 {
+._hero_1y51o_136 ._image_1y51o_88 {
   object-position: top;
 }
-._hero_12z2a_117 ._heroContent_12z2a_188 {
+._hero_1y51o_136 ._heroContent_1y51o_207 {
   position: absolute;
   bottom: 0;
   left: 0;
@@ -3451,7 +3458,7 @@
   gap: 24px;
   align-items: stretch;
 }
-._heroText_12z2a_205 {
+._heroText_1y51o_224 {
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -3459,11 +3466,11 @@
   padding: 0 24px;
   text-align: center;
 }
-._heroText_12z2a_205 ._logo_12z2a_214 {
+._heroText_1y51o_224 ._logo_1y51o_233 {
   width: 48px;
   height: 48px;
 }
-._heroTitle_12z2a_234 {
+._heroTitle_1y51o_253 {
   width: 100%;
   margin: 0;
   font-family:
@@ -3478,14 +3485,14 @@
   letter-spacing: -1.12px;
   color: #f9fafa;
 }
-._heroSub_12z2a_258 {
+._heroSub_1y51o_277 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
   max-width: 327px;
 }
-._swipe_12z2a_271 {
+._swipe_1y51o_290 {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -3493,19 +3500,19 @@
   padding: 8px 0;
   background: #080e12;
 }
-._swipeLabel_12z2a_279 {
+._swipeLabel_1y51o_298 {
   margin: 0;
   font-size: 14px;
   line-height: 1;
   color: rgba(255, 255, 255, 0.54);
 }
-._chevron_12z2a_285 {
+._chevron_1y51o_304 {
   width: 24px;
   height: 24px;
   color: rgba(255, 255, 255, 0.54);
-  animation: _bob_12z2a_1 1.8s ease-in-out infinite;
+  animation: _bob_1y51o_1 1.8s ease-in-out infinite;
 }
-@keyframes _bob_12z2a_1 {
+@keyframes _bob_1y51o_1 {
   0%, 100% {
     transform: translateY(0);
   }
@@ -3513,7 +3520,7 @@
     transform: translateY(4px);
   }
 }
-._overlay_12z2a_302 {
+._overlay_1y51o_321 {
   position: absolute;
   inset: 0;
   z-index: 1;
@@ -3524,25 +3531,25 @@
   align-items: flex-start;
   padding: 0 24px 24px;
 }
-._copy_12z2a_313 {
+._copy_1y51o_332 {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
-._title_12z2a_318 {
+._title_1y51o_337 {
   margin: 0;
   font-size: 32px;
   line-height: 1.2;
   font-weight: 700;
   color: #f9fafa;
 }
-._subtitle_12z2a_325 {
+._subtitle_1y51o_344 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
 }
-._cta_12z2a_331 {
+._cta_1y51o_350 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3556,15 +3563,15 @@
   font-weight: 700;
   text-decoration: none;
 }
-._cta_12z2a_331::after {
+._cta_1y51o_350::after {
   content: "";
   position: absolute;
   inset: 0;
 }
-._cta_12z2a_331:active {
+._cta_1y51o_350:active {
   background: rgba(249, 250, 250, 0.12);
 }
-._cta_12z2a_331:focus-visible {
+._cta_1y51o_350:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }

package/package.json

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