@nok-integration/storefront-react 0.28.0 → 0.29.0

package/dist/index.d.ts

@@ -2766,6 +2766,7 @@ declare function createClient(options: ClientOptions): {
                 cta: string;
                 image?: string | undefined;
                 desktop_image?: string | undefined;
+                desktop_subtitle?: string | undefined;
                 target?: string | undefined;
                 video?: string | undefined;
                 desktop_video?: string | undefined;

package/dist/index.mjs

@@ -4393,6 +4393,7 @@ function requireContent$1() {
       key: zod_1.z.string().min(1),
       title: zod_1.z.string().min(1),
       subtitle: zod_1.z.string(),
+      desktop_subtitle: zod_1.z.string().min(1).optional(),
       cta: zod_1.z.string().min(1),
       target: zod_1.z.string().min(1).optional(),
       image: zod_1.z.string().min(1).optional(),
@@ -6534,6 +6535,9 @@ const ES = {
   "White ringer tee with DAZN chest logo": "Camiseta ringer blanca con el logo de DAZN en el pecho",
   "Boxing Hoodie": "Sudadera de boxeo",
   "The Home of Boxing back print": "Estampado The Home of Boxing en la espalda",
+  "Heavyweight fits, ringside energy": "Tejido grueso, energía de ring",
+  "Layer up, matchday ready": "Abrígate, listo para el partido",
+  "Everyday tees, fan-first graphics": "Camisetas para cada día, gráficos para la afición",
   Previous: "Anterior",
   Next: "Siguiente",
   "Claim yours": "Consigue el tuyo",
@@ -13499,6 +13503,7 @@ function requireContent() {
       key: zod_1.z.string().min(1),
       title: zod_1.z.string().min(1),
       subtitle: zod_1.z.string(),
+      desktop_subtitle: zod_1.z.string().min(1).optional(),
       cta: zod_1.z.string().min(1),
       target: zod_1.z.string().min(1).optional(),
       image: zod_1.z.string().min(1).optional(),
@@ -15041,40 +15046,40 @@ function ActiveLanding({ token, invite }) {
     })
   });
 }
-const showcase = "_showcase_qp8eb_14";
-const panel = "_panel_qp8eb_40";
-const image = "_image_qp8eb_93";
-const desktopArt = "_desktopArt_qp8eb_98";
-const hero = "_hero_qp8eb_137";
-const heroContent = "_heroContent_qp8eb_228";
-const heroText = "_heroText_qp8eb_252";
-const logo = "_logo_qp8eb_261";
-const heroTitle = "_heroTitle_qp8eb_281";
-const heroSub = "_heroSub_qp8eb_305";
-const swipe = "_swipe_qp8eb_324";
-const swipeLabel = "_swipeLabel_qp8eb_331";
-const chevron$1 = "_chevron_qp8eb_337";
-const overlay$1 = "_overlay_qp8eb_11";
-const copy = "_copy_qp8eb_374";
-const title$2 = "_title_qp8eb_386";
-const subtitle$1 = "_subtitle_qp8eb_395";
-const cta = "_cta_qp8eb_403";
-const mosaic = "_mosaic_qp8eb_447";
-const info = "_info_qp8eb_459";
-const art = "_art_qp8eb_463";
-const band = "_band_qp8eb_468";
-const bandTitle = "_bandTitle_qp8eb_477";
-const products = "_products_qp8eb_489";
-const wideOnly = "_wideOnly_qp8eb_509";
-const phoneOnly = "_phoneOnly_qp8eb_535";
-const phoneArt = "_phoneArt_qp8eb_536";
-const desktopFocal = "_desktopFocal_qp8eb_545";
-const diptych = "_diptych_qp8eb_711";
-const tile = "_tile_qp8eb_716";
-const tileCopy = "_tileCopy_qp8eb_730";
-const tileText = "_tileText_qp8eb_743";
-const tileTitle = "_tileTitle_qp8eb_750";
-const tileSubtitle = "_tileSubtitle_qp8eb_757";
+const showcase = "_showcase_sml7n_14";
+const panel = "_panel_sml7n_40";
+const image = "_image_sml7n_93";
+const desktopArt = "_desktopArt_sml7n_98";
+const hero = "_hero_sml7n_137";
+const heroContent = "_heroContent_sml7n_228";
+const heroText = "_heroText_sml7n_252";
+const logo = "_logo_sml7n_261";
+const heroTitle = "_heroTitle_sml7n_281";
+const heroSub = "_heroSub_sml7n_305";
+const swipe = "_swipe_sml7n_324";
+const swipeLabel = "_swipeLabel_sml7n_331";
+const chevron$1 = "_chevron_sml7n_337";
+const overlay$1 = "_overlay_sml7n_11";
+const copy = "_copy_sml7n_374";
+const title$2 = "_title_sml7n_386";
+const subtitle$1 = "_subtitle_sml7n_395";
+const cta = "_cta_sml7n_403";
+const mosaic = "_mosaic_sml7n_447";
+const info = "_info_sml7n_459";
+const art = "_art_sml7n_463";
+const band = "_band_sml7n_468";
+const bandTitle = "_bandTitle_sml7n_477";
+const products = "_products_sml7n_489";
+const wideOnly = "_wideOnly_sml7n_509";
+const phoneOnly = "_phoneOnly_sml7n_535";
+const phoneArt = "_phoneArt_sml7n_536";
+const desktopFocal = "_desktopFocal_sml7n_545";
+const diptych = "_diptych_sml7n_736";
+const tile = "_tile_sml7n_741";
+const tileCopy = "_tileCopy_sml7n_755";
+const tileText = "_tileText_sml7n_768";
+const tileTitle = "_tileTitle_sml7n_775";
+const tileSubtitle = "_tileSubtitle_sml7n_782";
 const styles$3 = {
   showcase,
   panel,
@@ -15260,7 +15265,8 @@ const FALLBACK_PANELS = [{
   to: "/category/hoodies",
   target: "hoodies",
   video: "/figma/home/hoodies.mp4",
-  image: "/figma/home/hoodies-poster.jpg"
+  image: "/figma/home/hoodies-poster.jpg",
+  desktopSubtitle: "Heavyweight fits, ringside energy"
 }, {
   key: "zip-ups",
   title: "Zip Ups",
@@ -15271,7 +15277,8 @@ const FALLBACK_PANELS = [{
   video: "/figma/home/zip-ups.mp4",
   image: "/figma/home/zip-ups-poster.jpg",
   desktopImage: "/figma/home/desktop-zip-ups-poster.jpg",
-  desktopVideo: "/figma/home/desktop-zip-ups.mp4"
+  desktopVideo: "/figma/home/desktop-zip-ups.mp4",
+  desktopSubtitle: "Layer up, matchday ready"
 }, {
   key: "t-shirts",
   title: "T-Shirts",
@@ -15282,7 +15289,8 @@ const FALLBACK_PANELS = [{
   video: "/figma/home/tshirts.mp4",
   image: "/figma/home/tshirts-poster.jpg",
   desktopImage: "/figma/home/desktop-tshirts-poster.jpg",
-  desktopVideo: "/figma/home/desktop-tshirts.mp4"
+  desktopVideo: "/figma/home/desktop-tshirts.mp4",
+  desktopSubtitle: "Everyday tees, fan-first graphics"
 }];
 const BAND_LIMIT = 20;
 const WIDE_BAND = 3;
@@ -15367,7 +15375,15 @@ function CategoryPanel({ panel: panel2, wide: wide2 }) {
             children: t(panel2.title)
           }), jsx("p", {
             className: styles$3.subtitle,
-            children: t(panel2.subtitle)
+            children: panel2.desktopSubtitle ? jsxs(Fragment, {
+              children: [jsx("span", {
+                className: styles$3.phoneOnly,
+                children: t(panel2.subtitle)
+              }), jsx("span", {
+                className: styles$3.wideOnly,
+                children: t(panel2.desktopSubtitle)
+              })]
+            }) : t(panel2.subtitle)
           })]
         }), jsx(ShopLink, {
           to: panel2.to,
@@ -15458,6 +15474,9 @@ function useSlides() {
     ...p,
     title: t(p.title),
     subtitle: t(p.subtitle),
+    ...p.desktopSubtitle === void 0 ? {} : {
+      desktopSubtitle: t(p.desktopSubtitle)
+    },
     cta: t(p.cta)
   })), [t]);
   useEffect(() => {
@@ -15485,6 +15504,9 @@ function useSlides() {
         ...s.desktop_video === void 0 ? {} : {
           desktopVideo: s.desktop_video
         },
+        ...s.desktop_subtitle === void 0 ? {} : {
+          desktopSubtitle: s.desktop_subtitle
+        },
         ...s.focal_y === void 0 ? {} : {
           focalY: s.focal_y
         }

package/dist/standalone/storefront.mjs

@@ -4393,6 +4393,7 @@ function requireContent$1() {
       key: zod_1.z.string().min(1),
       title: zod_1.z.string().min(1),
       subtitle: zod_1.z.string(),
+      desktop_subtitle: zod_1.z.string().min(1).optional(),
       cta: zod_1.z.string().min(1),
       target: zod_1.z.string().min(1).optional(),
       image: zod_1.z.string().min(1).optional(),
@@ -6534,6 +6535,9 @@ const ES = {
   "White ringer tee with DAZN chest logo": "Camiseta ringer blanca con el logo de DAZN en el pecho",
   "Boxing Hoodie": "Sudadera de boxeo",
   "The Home of Boxing back print": "Estampado The Home of Boxing en la espalda",
+  "Heavyweight fits, ringside energy": "Tejido grueso, energía de ring",
+  "Layer up, matchday ready": "Abrígate, listo para el partido",
+  "Everyday tees, fan-first graphics": "Camisetas para cada día, gráficos para la afición",
   Previous: "Anterior",
   Next: "Siguiente",
   "Claim yours": "Consigue el tuyo",
@@ -13499,6 +13503,7 @@ function requireContent() {
       key: zod_1.z.string().min(1),
       title: zod_1.z.string().min(1),
       subtitle: zod_1.z.string(),
+      desktop_subtitle: zod_1.z.string().min(1).optional(),
       cta: zod_1.z.string().min(1),
       target: zod_1.z.string().min(1).optional(),
       image: zod_1.z.string().min(1).optional(),
@@ -15041,40 +15046,40 @@ function ActiveLanding({ token, invite }) {
     })
   });
 }
-const showcase = "_showcase_qp8eb_14";
-const panel = "_panel_qp8eb_40";
-const image = "_image_qp8eb_93";
-const desktopArt = "_desktopArt_qp8eb_98";
-const hero = "_hero_qp8eb_137";
-const heroContent = "_heroContent_qp8eb_228";
-const heroText = "_heroText_qp8eb_252";
-const logo = "_logo_qp8eb_261";
-const heroTitle = "_heroTitle_qp8eb_281";
-const heroSub = "_heroSub_qp8eb_305";
-const swipe = "_swipe_qp8eb_324";
-const swipeLabel = "_swipeLabel_qp8eb_331";
-const chevron$1 = "_chevron_qp8eb_337";
-const overlay$1 = "_overlay_qp8eb_11";
-const copy = "_copy_qp8eb_374";
-const title$2 = "_title_qp8eb_386";
-const subtitle$1 = "_subtitle_qp8eb_395";
-const cta = "_cta_qp8eb_403";
-const mosaic = "_mosaic_qp8eb_447";
-const info = "_info_qp8eb_459";
-const art = "_art_qp8eb_463";
-const band = "_band_qp8eb_468";
-const bandTitle = "_bandTitle_qp8eb_477";
-const products = "_products_qp8eb_489";
-const wideOnly = "_wideOnly_qp8eb_509";
-const phoneOnly = "_phoneOnly_qp8eb_535";
-const phoneArt = "_phoneArt_qp8eb_536";
-const desktopFocal = "_desktopFocal_qp8eb_545";
-const diptych = "_diptych_qp8eb_711";
-const tile = "_tile_qp8eb_716";
-const tileCopy = "_tileCopy_qp8eb_730";
-const tileText = "_tileText_qp8eb_743";
-const tileTitle = "_tileTitle_qp8eb_750";
-const tileSubtitle = "_tileSubtitle_qp8eb_757";
+const showcase = "_showcase_sml7n_14";
+const panel = "_panel_sml7n_40";
+const image = "_image_sml7n_93";
+const desktopArt = "_desktopArt_sml7n_98";
+const hero = "_hero_sml7n_137";
+const heroContent = "_heroContent_sml7n_228";
+const heroText = "_heroText_sml7n_252";
+const logo = "_logo_sml7n_261";
+const heroTitle = "_heroTitle_sml7n_281";
+const heroSub = "_heroSub_sml7n_305";
+const swipe = "_swipe_sml7n_324";
+const swipeLabel = "_swipeLabel_sml7n_331";
+const chevron$1 = "_chevron_sml7n_337";
+const overlay$1 = "_overlay_sml7n_11";
+const copy = "_copy_sml7n_374";
+const title$2 = "_title_sml7n_386";
+const subtitle$1 = "_subtitle_sml7n_395";
+const cta = "_cta_sml7n_403";
+const mosaic = "_mosaic_sml7n_447";
+const info = "_info_sml7n_459";
+const art = "_art_sml7n_463";
+const band = "_band_sml7n_468";
+const bandTitle = "_bandTitle_sml7n_477";
+const products = "_products_sml7n_489";
+const wideOnly = "_wideOnly_sml7n_509";
+const phoneOnly = "_phoneOnly_sml7n_535";
+const phoneArt = "_phoneArt_sml7n_536";
+const desktopFocal = "_desktopFocal_sml7n_545";
+const diptych = "_diptych_sml7n_736";
+const tile = "_tile_sml7n_741";
+const tileCopy = "_tileCopy_sml7n_755";
+const tileText = "_tileText_sml7n_768";
+const tileTitle = "_tileTitle_sml7n_775";
+const tileSubtitle = "_tileSubtitle_sml7n_782";
 const styles$3 = {
   showcase,
   panel,
@@ -15260,7 +15265,8 @@ const FALLBACK_PANELS = [{
   to: "/category/hoodies",
   target: "hoodies",
   video: "/figma/home/hoodies.mp4",
-  image: "/figma/home/hoodies-poster.jpg"
+  image: "/figma/home/hoodies-poster.jpg",
+  desktopSubtitle: "Heavyweight fits, ringside energy"
 }, {
   key: "zip-ups",
   title: "Zip Ups",
@@ -15271,7 +15277,8 @@ const FALLBACK_PANELS = [{
   video: "/figma/home/zip-ups.mp4",
   image: "/figma/home/zip-ups-poster.jpg",
   desktopImage: "/figma/home/desktop-zip-ups-poster.jpg",
-  desktopVideo: "/figma/home/desktop-zip-ups.mp4"
+  desktopVideo: "/figma/home/desktop-zip-ups.mp4",
+  desktopSubtitle: "Layer up, matchday ready"
 }, {
   key: "t-shirts",
   title: "T-Shirts",
@@ -15282,7 +15289,8 @@ const FALLBACK_PANELS = [{
   video: "/figma/home/tshirts.mp4",
   image: "/figma/home/tshirts-poster.jpg",
   desktopImage: "/figma/home/desktop-tshirts-poster.jpg",
-  desktopVideo: "/figma/home/desktop-tshirts.mp4"
+  desktopVideo: "/figma/home/desktop-tshirts.mp4",
+  desktopSubtitle: "Everyday tees, fan-first graphics"
 }];
 const BAND_LIMIT = 20;
 const WIDE_BAND = 3;
@@ -15367,7 +15375,15 @@ function CategoryPanel({ panel: panel2, wide: wide2 }) {
             children: t(panel2.title)
           }), jsx("p", {
             className: styles$3.subtitle,
-            children: t(panel2.subtitle)
+            children: panel2.desktopSubtitle ? jsxs(Fragment, {
+              children: [jsx("span", {
+                className: styles$3.phoneOnly,
+                children: t(panel2.subtitle)
+              }), jsx("span", {
+                className: styles$3.wideOnly,
+                children: t(panel2.desktopSubtitle)
+              })]
+            }) : t(panel2.subtitle)
           })]
         }), jsx(ShopLink, {
           to: panel2.to,
@@ -15458,6 +15474,9 @@ function useSlides() {
     ...p,
     title: t(p.title),
     subtitle: t(p.subtitle),
+    ...p.desktopSubtitle === void 0 ? {} : {
+      desktopSubtitle: t(p.desktopSubtitle)
+    },
     cta: t(p.cta)
   })), [t]);
   useEffect(() => {
@@ -15485,6 +15504,9 @@ function useSlides() {
         ...s.desktop_video === void 0 ? {} : {
           desktopVideo: s.desktop_video
         },
+        ...s.desktop_subtitle === void 0 ? {} : {
+          desktopSubtitle: s.desktop_subtitle
+        },
         ...s.focal_y === void 0 ? {} : {
           focalY: s.focal_y
         }

package/dist/standalone/styles.css

@@ -4837,16 +4837,16 @@
   font-size: 16px;
   line-height: normal;
 }
-._showcase_qp8eb_14 {
+._showcase_sml7n_14 {
   --chrome-bleed: 0px;
   background: #080e12;
 }
 @supports (-webkit-touch-callout: none) {
-  ._showcase_qp8eb_14 {
+  ._showcase_sml7n_14 {
     --chrome-bleed: calc(3 * (100lvh - 100svh));
   }
 }
-._panel_qp8eb_40 {
+._panel_sml7n_40 {
   position: relative;
   height: 100lvh;
   height: calc(100lvh + var(--chrome-bleed, 0px));
@@ -4856,14 +4856,14 @@
   overflow: hidden;
   background: #080e12;
 }
-._image_qp8eb_93 {
+._image_sml7n_93 {
   object-fit: cover;
   object-position: 50% var(--slide-focal-y, 50%);
 }
-._desktopArt_qp8eb_98 {
+._desktopArt_sml7n_98 {
   display: none;
 }
-._hero_qp8eb_137::after {
+._hero_sml7n_137::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -4878,7 +4878,7 @@
       rgba(8, 14, 18, 0) calc(520px + var(--chrome-bleed, 0px)));
   pointer-events: none;
 }
-._hero_qp8eb_137 ._heroContent_qp8eb_228 {
+._hero_sml7n_137 ._heroContent_sml7n_228 {
   position: absolute;
   bottom: 32px;
   bottom: calc(32px + var(--chrome-bleed, 0px) + 100lvh - 100svh);
@@ -4890,7 +4890,7 @@
   gap: 24px;
   align-items: stretch;
 }
-._heroText_qp8eb_252 {
+._heroText_sml7n_252 {
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -4898,11 +4898,11 @@
   padding: 0 24px;
   text-align: center;
 }
-._heroText_qp8eb_252 ._logo_qp8eb_261 {
+._heroText_sml7n_252 ._logo_sml7n_261 {
   width: 48px;
   height: 48px;
 }
-._heroTitle_qp8eb_281 {
+._heroTitle_sml7n_281 {
   width: 100%;
   margin: 0;
   font-family:
@@ -4917,33 +4917,33 @@
   letter-spacing: -1.12px;
   color: #f9fafa;
 }
-._heroSub_qp8eb_305 {
+._heroSub_sml7n_305 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
   max-width: 327px;
 }
-._swipe_qp8eb_324 {
+._swipe_sml7n_324 {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 6px;
   padding: 8px 0;
 }
-._swipeLabel_qp8eb_331 {
+._swipeLabel_sml7n_331 {
   margin: 0;
   font-size: 14px;
   line-height: 1;
   color: rgba(255, 255, 255, 0.54);
 }
-._chevron_qp8eb_337 {
+._chevron_sml7n_337 {
   width: 24px;
   height: 24px;
   color: rgba(255, 255, 255, 0.54);
-  animation: _bob_qp8eb_1 1.8s ease-in-out infinite;
+  animation: _bob_sml7n_1 1.8s ease-in-out infinite;
 }
-@keyframes _bob_qp8eb_1 {
+@keyframes _bob_sml7n_1 {
   0%, 100% {
     transform: translateY(0);
   }
@@ -4951,7 +4951,7 @@
     transform: translateY(4px);
   }
 }
-._overlay_qp8eb_11 {
+._overlay_sml7n_11 {
   position: absolute;
   inset: 0;
   z-index: 1;
@@ -4972,7 +4972,7 @@
   padding: 0 0 32px;
   padding-bottom: calc(32px + var(--chrome-bleed, 0px) + 100lvh - 100svh);
 }
-._copy_qp8eb_374 {
+._copy_sml7n_374 {
   position: absolute;
   top: 77px;
   left: 0;
@@ -4984,7 +4984,7 @@
   padding: 12px 24px 24px;
   text-align: center;
 }
-._title_qp8eb_386 {
+._title_sml7n_386 {
   width: 327px;
   max-width: 100%;
   margin: 0;
@@ -4993,7 +4993,7 @@
   font-weight: 700;
   color: #f9fafa;
 }
-._subtitle_qp8eb_395 {
+._subtitle_sml7n_395 {
   width: 224px;
   max-width: 100%;
   margin: 0;
@@ -5001,7 +5001,7 @@
   line-height: 1;
   color: #f9fafa;
 }
-._cta_qp8eb_403 {
+._cta_sml7n_403 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -5015,32 +5015,32 @@
   font-weight: 700;
   text-decoration: none;
 }
-._cta_qp8eb_403::after {
+._cta_sml7n_403::after {
   content: "";
   position: absolute;
   inset: 0;
 }
-._cta_qp8eb_403:active {
+._cta_sml7n_403:active {
   background: rgba(249, 250, 250, 0.12);
 }
-._cta_qp8eb_403:focus-visible {
+._cta_sml7n_403:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
-._mosaic_qp8eb_447 {
+._mosaic_sml7n_447 {
   background: #080e12;
 }
-._showcase_qp8eb_14[data-viewport=fixed] {
+._showcase_sml7n_14[data-viewport=fixed] {
   --chrome-bleed: 0px;
 }
-._info_qp8eb_459 {
+._info_sml7n_459 {
   display: contents;
 }
-._art_qp8eb_463 {
+._art_sml7n_463 {
   position: absolute;
   inset: 0;
 }
-._band_qp8eb_468 {
+._band_sml7n_468 {
   position: relative;
   z-index: 1;
   display: flex;
@@ -5048,7 +5048,7 @@
   gap: 12px;
   width: 100%;
 }
-._bandTitle_qp8eb_477 {
+._bandTitle_sml7n_477 {
   margin: 0;
   padding: 0 16px;
   overflow: hidden;
@@ -5059,7 +5059,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-._products_qp8eb_489 {
+._products_sml7n_489 {
   display: flex;
   gap: 12px;
   margin: 0;
@@ -5069,18 +5069,18 @@
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
 }
-._products_qp8eb_489::-webkit-scrollbar {
+._products_sml7n_489::-webkit-scrollbar {
   display: none;
 }
-._products_qp8eb_489 > li {
+._products_sml7n_489 > li {
   flex: 0 0 auto;
   width: 135px;
 }
-._wideOnly_qp8eb_509 {
+._wideOnly_sml7n_509 {
   display: none;
 }
 @media (max-width: 1199.98px) {
-  ._cta_qp8eb_403 {
+  ._cta_sml7n_403 {
     position: absolute;
     inset: 0;
     min-height: 0;
@@ -5090,40 +5090,40 @@
     font-size: 0;
     color: transparent;
   }
-  ._cta_qp8eb_403:active {
+  ._cta_sml7n_403:active {
     background: transparent;
   }
-  ._cta_qp8eb_403:focus-visible {
+  ._cta_sml7n_403:focus-visible {
     box-shadow: inset 0 0 0 2px #ffffff, inset 0 0 0 4px #080e12;
   }
 }
 @media (min-width: 1200px) {
-  ._phoneOnly_qp8eb_535,
-  ._phoneArt_qp8eb_536 {
+  ._phoneOnly_sml7n_535,
+  ._phoneArt_sml7n_536 {
     display: none;
   }
-  ._desktopArt_qp8eb_98 {
+  ._desktopArt_sml7n_98 {
     display: block;
   }
-  ._desktopArt_qp8eb_98,
-  ._desktopFocal_qp8eb_545 {
+  ._desktopArt_sml7n_98,
+  ._desktopFocal_sml7n_545 {
     object-position: 50% 50%;
   }
-  ._wideOnly_qp8eb_509 {
+  ._wideOnly_sml7n_509 {
     display: inline;
   }
-  ._panel_qp8eb_40 {
+  ._panel_sml7n_40 {
     height: max(100vh, 640px);
     scroll-margin-bottom: 0;
   }
-  ._mosaic_qp8eb_447 {
+  ._mosaic_sml7n_447 {
     display: none;
   }
-  ._hero_qp8eb_137 {
+  ._hero_sml7n_137 {
     height: max(calc(100vh - var(--shop-chrome-top, 0px)), 576px);
     scroll-margin-top: var(--shop-chrome-top, 0px);
   }
-  ._hero_qp8eb_137::after {
+  ._hero_sml7n_137::after {
     background:
       linear-gradient(
         to bottom,
@@ -5134,47 +5134,47 @@
         rgba(8, 14, 18, 0) 50%,
         #080e12 100%);
   }
-  ._hero_qp8eb_137 ._heroContent_qp8eb_228 {
+  ._hero_sml7n_137 ._heroContent_sml7n_228 {
     bottom: 16px;
     gap: 60px;
     align-items: center;
   }
-  ._heroText_qp8eb_252 {
+  ._heroText_sml7n_252 {
     width: 677px;
     gap: 16px;
     padding: 0;
   }
-  ._heroText_qp8eb_252 ._logo_qp8eb_261 {
+  ._heroText_sml7n_252 ._logo_sml7n_261 {
     width: 56px;
     height: 56px;
   }
-  ._heroTitle_qp8eb_281 {
+  ._heroTitle_sml7n_281 {
     font-family: inherit;
     font-size: 64px;
     line-height: 0.9375;
     letter-spacing: -0.64px;
   }
-  ._heroSub_qp8eb_305 {
+  ._heroSub_sml7n_305 {
     max-width: none;
     font-size: 20px;
     line-height: 1.4;
   }
-  ._showcase_qp8eb_14 {
+  ._showcase_sml7n_14 {
     --cover-block: max(100vh, 640px);
   }
-  ._panel_qp8eb_40[data-desktop] {
+  ._panel_sml7n_40[data-desktop] {
     height: auto;
     overflow: visible;
   }
-  ._panel_qp8eb_40[data-desktop=products] ._art_qp8eb_463 {
+  ._panel_sml7n_40[data-desktop=products] ._art_sml7n_463 {
     display: none;
   }
-  ._panel_qp8eb_40[data-desktop=cover] ._art_qp8eb_463 {
+  ._panel_sml7n_40[data-desktop=cover] ._art_sml7n_463 {
     inset: 0 0 auto;
     height: var(--cover-block);
     overflow: hidden;
   }
-  ._panel_qp8eb_40[data-desktop=cover] ._art_qp8eb_463::after {
+  ._panel_sml7n_40[data-desktop=cover] ._art_sml7n_463::after {
     content: "";
     position: absolute;
     inset: 0;
@@ -5190,7 +5190,7 @@
         #080e12 100%);
     pointer-events: none;
   }
-  ._overlay_qp8eb_11 {
+  ._overlay_sml7n_11 {
     position: relative;
     inset: auto;
     flex-direction: column;
@@ -5200,10 +5200,31 @@
     padding: 64px 0 120px;
     background: none;
   }
-  ._panel_qp8eb_40[data-desktop=cover] ._overlay_qp8eb_11 {
+  @supports (animation-timeline: view()) {
+    @media (prefers-reduced-motion: no-preference) {
+      ._panel_sml7n_40[data-desktop=cover] {
+        view-timeline: --cover-panel block;
+      }
+      ._panel_sml7n_40[data-desktop=cover] ._art_sml7n_463 ._image_sml7n_93 {
+        animation: _coverParallax_sml7n_1 linear both;
+        animation-timeline: --cover-panel;
+        animation-range: cover;
+        will-change: transform;
+      }
+      @keyframes _coverParallax_sml7n_1 {
+        from {
+          transform: translateY(-12%) scale(1.25);
+        }
+        to {
+          transform: translateY(12%) scale(1.25);
+        }
+      }
+    }
+  }
+  ._panel_sml7n_40[data-desktop=cover] ._overlay_sml7n_11 {
     padding-top: calc(var(--cover-block) - 339px);
   }
-  ._copy_qp8eb_374 {
+  ._copy_sml7n_374 {
     position: static;
     width: 100%;
     align-items: stretch;
@@ -5211,33 +5232,33 @@
     padding: 0;
     text-align: center;
   }
-  ._panel_qp8eb_40[data-desktop=cover] ._copy_qp8eb_374 {
+  ._panel_sml7n_40[data-desktop=cover] ._copy_sml7n_374 {
     padding-bottom: 16px;
   }
-  ._title_qp8eb_386 {
+  ._title_sml7n_386 {
     width: auto;
     font-size: 56px;
     line-height: 1;
   }
-  ._subtitle_qp8eb_395 {
+  ._subtitle_sml7n_395 {
     width: auto;
     font-size: 18px;
     line-height: normal;
     color: #b3b9bb;
   }
-  ._cta_qp8eb_403 {
+  ._cta_sml7n_403 {
     order: 2;
   }
-  ._cta_qp8eb_403::after {
+  ._cta_sml7n_403::after {
     content: none;
   }
-  ._band_qp8eb_468 {
+  ._band_sml7n_468 {
     display: contents;
   }
-  ._bandTitle_qp8eb_477 {
+  ._bandTitle_sml7n_477 {
     display: none;
   }
-  ._products_qp8eb_489 {
+  ._products_sml7n_489 {
     --type-paragraph-size: 18px;
     --type-trimmed-md-size: 18px;
     order: 1;
@@ -5248,20 +5269,20 @@
     padding: 0;
     overflow: visible;
   }
-  ._products_qp8eb_489 > li {
+  ._products_sml7n_489 > li {
     flex: 0 0 276px;
     width: 276px;
   }
-  ._diptych_qp8eb_711 {
+  ._diptych_sml7n_736 {
     display: flex;
     height: var(--cover-block);
   }
-  ._tile_qp8eb_716 {
+  ._tile_sml7n_741 {
     position: relative;
     flex: 1 1 50%;
     overflow: hidden;
   }
-  ._tile_qp8eb_716::after {
+  ._tile_sml7n_741::after {
     content: "";
     position: absolute;
     inset: 0;
@@ -5272,7 +5293,7 @@
         rgba(8, 14, 18, 0.75) 100%);
     pointer-events: none;
   }
-  ._tileCopy_qp8eb_730 {
+  ._tileCopy_sml7n_755 {
     position: absolute;
     left: 0;
     right: 0;
@@ -5284,19 +5305,19 @@
     gap: 24px;
     padding: 48px;
   }
-  ._tileText_qp8eb_743 {
+  ._tileText_sml7n_768 {
     display: flex;
     flex-direction: column;
     gap: 8px;
     color: #f9fafa;
   }
-  ._tileTitle_qp8eb_750 {
+  ._tileTitle_sml7n_775 {
     margin: 0;
     font-size: 32px;
     line-height: 1;
     font-weight: 700;
   }
-  ._tileSubtitle_qp8eb_757 {
+  ._tileSubtitle_sml7n_782 {
     margin: 0;
     font-size: 18px;
     line-height: 23px;

package/dist/styles.css

@@ -4837,16 +4837,16 @@
   font-size: 16px;
   line-height: normal;
 }
-._showcase_qp8eb_14 {
+._showcase_sml7n_14 {
   --chrome-bleed: 0px;
   background: #080e12;
 }
 @supports (-webkit-touch-callout: none) {
-  ._showcase_qp8eb_14 {
+  ._showcase_sml7n_14 {
     --chrome-bleed: calc(3 * (100lvh - 100svh));
   }
 }
-._panel_qp8eb_40 {
+._panel_sml7n_40 {
   position: relative;
   height: 100lvh;
   height: calc(100lvh + var(--chrome-bleed, 0px));
@@ -4856,14 +4856,14 @@
   overflow: hidden;
   background: #080e12;
 }
-._image_qp8eb_93 {
+._image_sml7n_93 {
   object-fit: cover;
   object-position: 50% var(--slide-focal-y, 50%);
 }
-._desktopArt_qp8eb_98 {
+._desktopArt_sml7n_98 {
   display: none;
 }
-._hero_qp8eb_137::after {
+._hero_sml7n_137::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -4878,7 +4878,7 @@
       rgba(8, 14, 18, 0) calc(520px + var(--chrome-bleed, 0px)));
   pointer-events: none;
 }
-._hero_qp8eb_137 ._heroContent_qp8eb_228 {
+._hero_sml7n_137 ._heroContent_sml7n_228 {
   position: absolute;
   bottom: 32px;
   bottom: calc(32px + var(--chrome-bleed, 0px) + 100lvh - 100svh);
@@ -4890,7 +4890,7 @@
   gap: 24px;
   align-items: stretch;
 }
-._heroText_qp8eb_252 {
+._heroText_sml7n_252 {
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -4898,11 +4898,11 @@
   padding: 0 24px;
   text-align: center;
 }
-._heroText_qp8eb_252 ._logo_qp8eb_261 {
+._heroText_sml7n_252 ._logo_sml7n_261 {
   width: 48px;
   height: 48px;
 }
-._heroTitle_qp8eb_281 {
+._heroTitle_sml7n_281 {
   width: 100%;
   margin: 0;
   font-family:
@@ -4917,33 +4917,33 @@
   letter-spacing: -1.12px;
   color: #f9fafa;
 }
-._heroSub_qp8eb_305 {
+._heroSub_sml7n_305 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
   max-width: 327px;
 }
-._swipe_qp8eb_324 {
+._swipe_sml7n_324 {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 6px;
   padding: 8px 0;
 }
-._swipeLabel_qp8eb_331 {
+._swipeLabel_sml7n_331 {
   margin: 0;
   font-size: 14px;
   line-height: 1;
   color: rgba(255, 255, 255, 0.54);
 }
-._chevron_qp8eb_337 {
+._chevron_sml7n_337 {
   width: 24px;
   height: 24px;
   color: rgba(255, 255, 255, 0.54);
-  animation: _bob_qp8eb_1 1.8s ease-in-out infinite;
+  animation: _bob_sml7n_1 1.8s ease-in-out infinite;
 }
-@keyframes _bob_qp8eb_1 {
+@keyframes _bob_sml7n_1 {
   0%, 100% {
     transform: translateY(0);
   }
@@ -4951,7 +4951,7 @@
     transform: translateY(4px);
   }
 }
-._overlay_qp8eb_11 {
+._overlay_sml7n_11 {
   position: absolute;
   inset: 0;
   z-index: 1;
@@ -4972,7 +4972,7 @@
   padding: 0 0 32px;
   padding-bottom: calc(32px + var(--chrome-bleed, 0px) + 100lvh - 100svh);
 }
-._copy_qp8eb_374 {
+._copy_sml7n_374 {
   position: absolute;
   top: 77px;
   left: 0;
@@ -4984,7 +4984,7 @@
   padding: 12px 24px 24px;
   text-align: center;
 }
-._title_qp8eb_386 {
+._title_sml7n_386 {
   width: 327px;
   max-width: 100%;
   margin: 0;
@@ -4993,7 +4993,7 @@
   font-weight: 700;
   color: #f9fafa;
 }
-._subtitle_qp8eb_395 {
+._subtitle_sml7n_395 {
   width: 224px;
   max-width: 100%;
   margin: 0;
@@ -5001,7 +5001,7 @@
   line-height: 1;
   color: #f9fafa;
 }
-._cta_qp8eb_403 {
+._cta_sml7n_403 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -5015,32 +5015,32 @@
   font-weight: 700;
   text-decoration: none;
 }
-._cta_qp8eb_403::after {
+._cta_sml7n_403::after {
   content: "";
   position: absolute;
   inset: 0;
 }
-._cta_qp8eb_403:active {
+._cta_sml7n_403:active {
   background: rgba(249, 250, 250, 0.12);
 }
-._cta_qp8eb_403:focus-visible {
+._cta_sml7n_403:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
-._mosaic_qp8eb_447 {
+._mosaic_sml7n_447 {
   background: #080e12;
 }
-._showcase_qp8eb_14[data-viewport=fixed] {
+._showcase_sml7n_14[data-viewport=fixed] {
   --chrome-bleed: 0px;
 }
-._info_qp8eb_459 {
+._info_sml7n_459 {
   display: contents;
 }
-._art_qp8eb_463 {
+._art_sml7n_463 {
   position: absolute;
   inset: 0;
 }
-._band_qp8eb_468 {
+._band_sml7n_468 {
   position: relative;
   z-index: 1;
   display: flex;
@@ -5048,7 +5048,7 @@
   gap: 12px;
   width: 100%;
 }
-._bandTitle_qp8eb_477 {
+._bandTitle_sml7n_477 {
   margin: 0;
   padding: 0 16px;
   overflow: hidden;
@@ -5059,7 +5059,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-._products_qp8eb_489 {
+._products_sml7n_489 {
   display: flex;
   gap: 12px;
   margin: 0;
@@ -5069,18 +5069,18 @@
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
 }
-._products_qp8eb_489::-webkit-scrollbar {
+._products_sml7n_489::-webkit-scrollbar {
   display: none;
 }
-._products_qp8eb_489 > li {
+._products_sml7n_489 > li {
   flex: 0 0 auto;
   width: 135px;
 }
-._wideOnly_qp8eb_509 {
+._wideOnly_sml7n_509 {
   display: none;
 }
 @media (max-width: 1199.98px) {
-  ._cta_qp8eb_403 {
+  ._cta_sml7n_403 {
     position: absolute;
     inset: 0;
     min-height: 0;
@@ -5090,40 +5090,40 @@
     font-size: 0;
     color: transparent;
   }
-  ._cta_qp8eb_403:active {
+  ._cta_sml7n_403:active {
     background: transparent;
   }
-  ._cta_qp8eb_403:focus-visible {
+  ._cta_sml7n_403:focus-visible {
     box-shadow: inset 0 0 0 2px #ffffff, inset 0 0 0 4px #080e12;
   }
 }
 @media (min-width: 1200px) {
-  ._phoneOnly_qp8eb_535,
-  ._phoneArt_qp8eb_536 {
+  ._phoneOnly_sml7n_535,
+  ._phoneArt_sml7n_536 {
     display: none;
   }
-  ._desktopArt_qp8eb_98 {
+  ._desktopArt_sml7n_98 {
     display: block;
   }
-  ._desktopArt_qp8eb_98,
-  ._desktopFocal_qp8eb_545 {
+  ._desktopArt_sml7n_98,
+  ._desktopFocal_sml7n_545 {
     object-position: 50% 50%;
   }
-  ._wideOnly_qp8eb_509 {
+  ._wideOnly_sml7n_509 {
     display: inline;
   }
-  ._panel_qp8eb_40 {
+  ._panel_sml7n_40 {
     height: max(100vh, 640px);
     scroll-margin-bottom: 0;
   }
-  ._mosaic_qp8eb_447 {
+  ._mosaic_sml7n_447 {
     display: none;
   }
-  ._hero_qp8eb_137 {
+  ._hero_sml7n_137 {
     height: max(calc(100vh - var(--shop-chrome-top, 0px)), 576px);
     scroll-margin-top: var(--shop-chrome-top, 0px);
   }
-  ._hero_qp8eb_137::after {
+  ._hero_sml7n_137::after {
     background:
       linear-gradient(
         to bottom,
@@ -5134,47 +5134,47 @@
         rgba(8, 14, 18, 0) 50%,
         #080e12 100%);
   }
-  ._hero_qp8eb_137 ._heroContent_qp8eb_228 {
+  ._hero_sml7n_137 ._heroContent_sml7n_228 {
     bottom: 16px;
     gap: 60px;
     align-items: center;
   }
-  ._heroText_qp8eb_252 {
+  ._heroText_sml7n_252 {
     width: 677px;
     gap: 16px;
     padding: 0;
   }
-  ._heroText_qp8eb_252 ._logo_qp8eb_261 {
+  ._heroText_sml7n_252 ._logo_sml7n_261 {
     width: 56px;
     height: 56px;
   }
-  ._heroTitle_qp8eb_281 {
+  ._heroTitle_sml7n_281 {
     font-family: inherit;
     font-size: 64px;
     line-height: 0.9375;
     letter-spacing: -0.64px;
   }
-  ._heroSub_qp8eb_305 {
+  ._heroSub_sml7n_305 {
     max-width: none;
     font-size: 20px;
     line-height: 1.4;
   }
-  ._showcase_qp8eb_14 {
+  ._showcase_sml7n_14 {
     --cover-block: max(100vh, 640px);
   }
-  ._panel_qp8eb_40[data-desktop] {
+  ._panel_sml7n_40[data-desktop] {
     height: auto;
     overflow: visible;
   }
-  ._panel_qp8eb_40[data-desktop=products] ._art_qp8eb_463 {
+  ._panel_sml7n_40[data-desktop=products] ._art_sml7n_463 {
     display: none;
   }
-  ._panel_qp8eb_40[data-desktop=cover] ._art_qp8eb_463 {
+  ._panel_sml7n_40[data-desktop=cover] ._art_sml7n_463 {
     inset: 0 0 auto;
     height: var(--cover-block);
     overflow: hidden;
   }
-  ._panel_qp8eb_40[data-desktop=cover] ._art_qp8eb_463::after {
+  ._panel_sml7n_40[data-desktop=cover] ._art_sml7n_463::after {
     content: "";
     position: absolute;
     inset: 0;
@@ -5190,7 +5190,7 @@
         #080e12 100%);
     pointer-events: none;
   }
-  ._overlay_qp8eb_11 {
+  ._overlay_sml7n_11 {
     position: relative;
     inset: auto;
     flex-direction: column;
@@ -5200,10 +5200,31 @@
     padding: 64px 0 120px;
     background: none;
   }
-  ._panel_qp8eb_40[data-desktop=cover] ._overlay_qp8eb_11 {
+  @supports (animation-timeline: view()) {
+    @media (prefers-reduced-motion: no-preference) {
+      ._panel_sml7n_40[data-desktop=cover] {
+        view-timeline: --cover-panel block;
+      }
+      ._panel_sml7n_40[data-desktop=cover] ._art_sml7n_463 ._image_sml7n_93 {
+        animation: _coverParallax_sml7n_1 linear both;
+        animation-timeline: --cover-panel;
+        animation-range: cover;
+        will-change: transform;
+      }
+      @keyframes _coverParallax_sml7n_1 {
+        from {
+          transform: translateY(-12%) scale(1.25);
+        }
+        to {
+          transform: translateY(12%) scale(1.25);
+        }
+      }
+    }
+  }
+  ._panel_sml7n_40[data-desktop=cover] ._overlay_sml7n_11 {
     padding-top: calc(var(--cover-block) - 339px);
   }
-  ._copy_qp8eb_374 {
+  ._copy_sml7n_374 {
     position: static;
     width: 100%;
     align-items: stretch;
@@ -5211,33 +5232,33 @@
     padding: 0;
     text-align: center;
   }
-  ._panel_qp8eb_40[data-desktop=cover] ._copy_qp8eb_374 {
+  ._panel_sml7n_40[data-desktop=cover] ._copy_sml7n_374 {
     padding-bottom: 16px;
   }
-  ._title_qp8eb_386 {
+  ._title_sml7n_386 {
     width: auto;
     font-size: 56px;
     line-height: 1;
   }
-  ._subtitle_qp8eb_395 {
+  ._subtitle_sml7n_395 {
     width: auto;
     font-size: 18px;
     line-height: normal;
     color: #b3b9bb;
   }
-  ._cta_qp8eb_403 {
+  ._cta_sml7n_403 {
     order: 2;
   }
-  ._cta_qp8eb_403::after {
+  ._cta_sml7n_403::after {
     content: none;
   }
-  ._band_qp8eb_468 {
+  ._band_sml7n_468 {
     display: contents;
   }
-  ._bandTitle_qp8eb_477 {
+  ._bandTitle_sml7n_477 {
     display: none;
   }
-  ._products_qp8eb_489 {
+  ._products_sml7n_489 {
     --type-paragraph-size: 18px;
     --type-trimmed-md-size: 18px;
     order: 1;
@@ -5248,20 +5269,20 @@
     padding: 0;
     overflow: visible;
   }
-  ._products_qp8eb_489 > li {
+  ._products_sml7n_489 > li {
     flex: 0 0 276px;
     width: 276px;
   }
-  ._diptych_qp8eb_711 {
+  ._diptych_sml7n_736 {
     display: flex;
     height: var(--cover-block);
   }
-  ._tile_qp8eb_716 {
+  ._tile_sml7n_741 {
     position: relative;
     flex: 1 1 50%;
     overflow: hidden;
   }
-  ._tile_qp8eb_716::after {
+  ._tile_sml7n_741::after {
     content: "";
     position: absolute;
     inset: 0;
@@ -5272,7 +5293,7 @@
         rgba(8, 14, 18, 0.75) 100%);
     pointer-events: none;
   }
-  ._tileCopy_qp8eb_730 {
+  ._tileCopy_sml7n_755 {
     position: absolute;
     left: 0;
     right: 0;
@@ -5284,19 +5305,19 @@
     gap: 24px;
     padding: 48px;
   }
-  ._tileText_qp8eb_743 {
+  ._tileText_sml7n_768 {
     display: flex;
     flex-direction: column;
     gap: 8px;
     color: #f9fafa;
   }
-  ._tileTitle_qp8eb_750 {
+  ._tileTitle_sml7n_775 {
     margin: 0;
     font-size: 32px;
     line-height: 1;
     font-weight: 700;
   }
-  ._tileSubtitle_qp8eb_757 {
+  ._tileSubtitle_sml7n_782 {
     margin: 0;
     font-size: 18px;
     line-height: 23px;

package/package.json

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