@nok-integration/storefront-react 0.19.6 → 0.19.7

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;
             }[];
         }>;
     };

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,
@@ -10563,24 +10564,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 +10678,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 +10731,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,
@@ -10563,24 +10564,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 +10678,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 +10731,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

@@ -3390,7 +3390,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 +3399,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 +3410,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 +3422,7 @@
   aspect-ratio: 750 / 1348;
   overflow: hidden;
 }
-._hero_12z2a_117::after {
+._hero_1y51o_136::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -3437,10 +3437,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 +3451,7 @@
   gap: 24px;
   align-items: stretch;
 }
-._heroText_12z2a_205 {
+._heroText_1y51o_224 {
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -3459,11 +3459,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 +3478,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 +3493,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 +3513,7 @@
     transform: translateY(4px);
   }
 }
-._overlay_12z2a_302 {
+._overlay_1y51o_321 {
   position: absolute;
   inset: 0;
   z-index: 1;
@@ -3524,25 +3524,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 +3556,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

@@ -3390,7 +3390,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 +3399,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 +3410,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 +3422,7 @@
   aspect-ratio: 750 / 1348;
   overflow: hidden;
 }
-._hero_12z2a_117::after {
+._hero_1y51o_136::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -3437,10 +3437,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 +3451,7 @@
   gap: 24px;
   align-items: stretch;
 }
-._heroText_12z2a_205 {
+._heroText_1y51o_224 {
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -3459,11 +3459,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 +3478,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 +3493,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 +3513,7 @@
     transform: translateY(4px);
   }
 }
-._overlay_12z2a_302 {
+._overlay_1y51o_321 {
   position: absolute;
   inset: 0;
   z-index: 1;
@@ -3524,25 +3524,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 +3556,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.7",
   "description": "Mountable React storefront components: catalogue, product detail and cart, mounted directly into a host DOM tree. No iframe.",
   "license": "UNLICENSED",
   "publishConfig": {