@nok-integration/storefront-react 0.19.8 → 0.19.10

package/dist/index.mjs

@@ -8053,21 +8053,21 @@ function formatPlaced(iso, locale) {
     year: "numeric"
   })}`;
 }
-const tile$1 = "_tile_1io44_7";
-const media$2 = "_media_1io44_15";
-const image$7 = "_image_1io44_25";
-const placeholder$4 = "_placeholder_1io44_29";
-const topBadge = "_topBadge_1io44_37";
-const saleBadge$2 = "_saleBadge_1io44_78";
-const oos$3 = "_oos_1io44_86";
-const bottom = "_bottom_1io44_113";
-const titlePrice$1 = "_titlePrice_1io44_100";
-const title$f = "_title_1io44_5";
-const swatches = "_swatches_1io44_179";
-const swatch = "_swatch_1io44_179";
-const swatchActive = "_swatchActive_1io44_196";
-const swatchDot = "_swatchDot_1io44_200";
-const large = "_large_1io44_211";
+const tile$1 = "_tile_1a177_7";
+const media$2 = "_media_1a177_15";
+const image$7 = "_image_1a177_25";
+const placeholder$4 = "_placeholder_1a177_29";
+const topBadge = "_topBadge_1a177_37";
+const saleBadge$2 = "_saleBadge_1a177_78";
+const oos$3 = "_oos_1a177_86";
+const bottom = "_bottom_1a177_113";
+const titlePrice$1 = "_titlePrice_1a177_100";
+const title$f = "_title_1a177_5";
+const swatches = "_swatches_1a177_181";
+const swatch = "_swatch_1a177_181";
+const swatchActive = "_swatchActive_1a177_198";
+const swatchDot = "_swatchDot_1a177_202";
+const large = "_large_1a177_213";
 const styles$t = {
   tile: tile$1,
   media: media$2,
@@ -10567,24 +10567,24 @@ function ProductView({ sku, initialData, showRecommendations = true, onNotFound
   }
   return unavailable;
 }
-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 showcase = "_showcase_a0wva_39";
+const panel = "_panel_a0wva_43";
+const image = "_image_a0wva_71";
+const heroImageBox = "_heroImageBox_a0wva_119";
+const hero = "_hero_a0wva_119";
+const heroContent = "_heroContent_a0wva_190";
+const heroText = "_heroText_a0wva_207";
+const logo = "_logo_a0wva_216";
+const heroTitle = "_heroTitle_a0wva_236";
+const heroSub = "_heroSub_a0wva_260";
+const swipe = "_swipe_a0wva_273";
+const swipeLabel = "_swipeLabel_a0wva_281";
+const chevron$1 = "_chevron_a0wva_287";
+const overlay$1 = "_overlay_a0wva_304";
+const copy = "_copy_a0wva_315";
+const title$2 = "_title_a0wva_320";
+const subtitle$1 = "_subtitle_a0wva_327";
+const cta = "_cta_a0wva_333";
 const styles$2 = {
   showcase,
   panel,
@@ -10605,41 +10605,35 @@ const styles$2 = {
   subtitle: subtitle$1,
   cta
 };
-const SETTLE_MS = 250;
-function useViewportHeight(ref, property, enabled = true) {
+const SETTLE_MS = 150;
+function useDocumentSnap(ref, enabled = true) {
   useEffect(() => {
     const el = ref.current;
-    if (!el || !enabled) return;
+    if (!el || !enabled || typeof document === "undefined") return;
+    const root2 = document.documentElement;
+    const previousType = root2.style.scrollSnapType;
+    const previousPadding = root2.style.scrollPaddingTop;
     let timer2;
-    const read = () => Math.round(window.visualViewport?.height ?? window.innerHeight);
-    const apply = () => {
-      const height = read();
-      if (height > 0) el.style.setProperty(property, `${height}px`);
-    };
-    const applySettled = () => {
-      const previous = el.clientHeight;
-      const index = previous > 0 ? Math.round(el.scrollTop / previous) : 0;
-      apply();
-      if (el.clientHeight > 0) el.scrollTo({
-        top: index * el.clientHeight,
-        behavior: "auto"
-      });
+    const syncPadding = () => {
+      const top = getComputedStyle(el).getPropertyValue("--showcase-top").trim();
+      root2.style.scrollPaddingTop = top === "" ? "0px" : top;
     };
     const schedule = () => {
       if (timer2) clearTimeout(timer2);
-      timer2 = setTimeout(applySettled, SETTLE_MS);
+      timer2 = setTimeout(syncPadding, SETTLE_MS);
     };
-    apply();
+    root2.style.scrollSnapType = "y mandatory";
+    syncPadding();
     window.addEventListener("resize", schedule);
     window.addEventListener("orientationchange", schedule);
-    window.visualViewport?.addEventListener("resize", schedule);
     return () => {
       if (timer2) clearTimeout(timer2);
       window.removeEventListener("resize", schedule);
       window.removeEventListener("orientationchange", schedule);
-      window.visualViewport?.removeEventListener("resize", schedule);
+      root2.style.scrollSnapType = previousType;
+      root2.style.scrollPaddingTop = previousPadding;
     };
-  }, [ref, property, enabled]);
+  }, [ref, enabled]);
 }
 const FALLBACK_PANELS = [{
   key: "all-items",
@@ -10753,7 +10747,7 @@ function HomeShowcase() {
   const panels = useSlides();
   const showcaseRef = useRef(null);
   useTopOffset(showcaseRef, "--showcase-top");
-  useViewportHeight(showcaseRef, "--showcase-vh");
+  useDocumentSnap(showcaseRef);
   return jsx(ShopSurface, {
     tone: "dark",
     children: jsxs("div", {

package/dist/standalone/storefront.mjs

@@ -8053,21 +8053,21 @@ function formatPlaced(iso, locale) {
     year: "numeric"
   })}`;
 }
-const tile$1 = "_tile_1io44_7";
-const media$2 = "_media_1io44_15";
-const image$7 = "_image_1io44_25";
-const placeholder$4 = "_placeholder_1io44_29";
-const topBadge = "_topBadge_1io44_37";
-const saleBadge$2 = "_saleBadge_1io44_78";
-const oos$3 = "_oos_1io44_86";
-const bottom = "_bottom_1io44_113";
-const titlePrice$1 = "_titlePrice_1io44_100";
-const title$f = "_title_1io44_5";
-const swatches = "_swatches_1io44_179";
-const swatch = "_swatch_1io44_179";
-const swatchActive = "_swatchActive_1io44_196";
-const swatchDot = "_swatchDot_1io44_200";
-const large = "_large_1io44_211";
+const tile$1 = "_tile_1a177_7";
+const media$2 = "_media_1a177_15";
+const image$7 = "_image_1a177_25";
+const placeholder$4 = "_placeholder_1a177_29";
+const topBadge = "_topBadge_1a177_37";
+const saleBadge$2 = "_saleBadge_1a177_78";
+const oos$3 = "_oos_1a177_86";
+const bottom = "_bottom_1a177_113";
+const titlePrice$1 = "_titlePrice_1a177_100";
+const title$f = "_title_1a177_5";
+const swatches = "_swatches_1a177_181";
+const swatch = "_swatch_1a177_181";
+const swatchActive = "_swatchActive_1a177_198";
+const swatchDot = "_swatchDot_1a177_202";
+const large = "_large_1a177_213";
 const styles$t = {
   tile: tile$1,
   media: media$2,
@@ -10567,24 +10567,24 @@ function ProductView({ sku, initialData, showRecommendations = true, onNotFound
   }
   return unavailable;
 }
-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 showcase = "_showcase_a0wva_39";
+const panel = "_panel_a0wva_43";
+const image = "_image_a0wva_71";
+const heroImageBox = "_heroImageBox_a0wva_119";
+const hero = "_hero_a0wva_119";
+const heroContent = "_heroContent_a0wva_190";
+const heroText = "_heroText_a0wva_207";
+const logo = "_logo_a0wva_216";
+const heroTitle = "_heroTitle_a0wva_236";
+const heroSub = "_heroSub_a0wva_260";
+const swipe = "_swipe_a0wva_273";
+const swipeLabel = "_swipeLabel_a0wva_281";
+const chevron$1 = "_chevron_a0wva_287";
+const overlay$1 = "_overlay_a0wva_304";
+const copy = "_copy_a0wva_315";
+const title$2 = "_title_a0wva_320";
+const subtitle$1 = "_subtitle_a0wva_327";
+const cta = "_cta_a0wva_333";
 const styles$2 = {
   showcase,
   panel,
@@ -10605,41 +10605,35 @@ const styles$2 = {
   subtitle: subtitle$1,
   cta
 };
-const SETTLE_MS = 250;
-function useViewportHeight(ref, property, enabled = true) {
+const SETTLE_MS = 150;
+function useDocumentSnap(ref, enabled = true) {
   useEffect(() => {
     const el = ref.current;
-    if (!el || !enabled) return;
+    if (!el || !enabled || typeof document === "undefined") return;
+    const root2 = document.documentElement;
+    const previousType = root2.style.scrollSnapType;
+    const previousPadding = root2.style.scrollPaddingTop;
     let timer2;
-    const read = () => Math.round(window.visualViewport?.height ?? window.innerHeight);
-    const apply = () => {
-      const height = read();
-      if (height > 0) el.style.setProperty(property, `${height}px`);
-    };
-    const applySettled = () => {
-      const previous = el.clientHeight;
-      const index = previous > 0 ? Math.round(el.scrollTop / previous) : 0;
-      apply();
-      if (el.clientHeight > 0) el.scrollTo({
-        top: index * el.clientHeight,
-        behavior: "auto"
-      });
+    const syncPadding = () => {
+      const top = getComputedStyle(el).getPropertyValue("--showcase-top").trim();
+      root2.style.scrollPaddingTop = top === "" ? "0px" : top;
     };
     const schedule = () => {
       if (timer2) clearTimeout(timer2);
-      timer2 = setTimeout(applySettled, SETTLE_MS);
+      timer2 = setTimeout(syncPadding, SETTLE_MS);
     };
-    apply();
+    root2.style.scrollSnapType = "y mandatory";
+    syncPadding();
     window.addEventListener("resize", schedule);
     window.addEventListener("orientationchange", schedule);
-    window.visualViewport?.addEventListener("resize", schedule);
     return () => {
       if (timer2) clearTimeout(timer2);
       window.removeEventListener("resize", schedule);
       window.removeEventListener("orientationchange", schedule);
-      window.visualViewport?.removeEventListener("resize", schedule);
+      root2.style.scrollSnapType = previousType;
+      root2.style.scrollPaddingTop = previousPadding;
     };
-  }, [ref, property, enabled]);
+  }, [ref, enabled]);
 }
 const FALLBACK_PANELS = [{
   key: "all-items",
@@ -10753,7 +10747,7 @@ function HomeShowcase() {
   const panels = useSlides();
   const showcaseRef = useRef(null);
   useTopOffset(showcaseRef, "--showcase-top");
-  useViewportHeight(showcaseRef, "--showcase-vh");
+  useDocumentSnap(showcaseRef);
   return jsx(ShopSurface, {
     tone: "dark",
     children: jsxs("div", {

package/dist/standalone/styles.css

@@ -38,6 +38,8 @@
   --color-surface-bold: #6d7377;
   --color-border-default: #dddedf;
   --color-border-subtle: #ced0d2;
+  --color-border-full-color-subtle: #6d7377;
+  --color-border-full-color-max: #f9fafa;
   --color-border-transparent-soft: rgba(0, 0, 0, 0.1);
   --color-state-text-success: #147e4a;
   --color-state-surface-success-soft: #def1e9;
@@ -1706,14 +1708,14 @@
   height: 24px;
   color: var(--color-text-default);
 }
-._tile_1io44_7 {
+._tile_1a177_7 {
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
   text-decoration: none;
   color: inherit;
 }
-._media_1io44_15 {
+._media_1a177_15 {
   position: relative;
   width: 100%;
   aspect-ratio: 165 / 220;
@@ -1721,15 +1723,15 @@
   overflow: hidden;
   background: var(--color-surface-soft);
 }
-._image_1io44_25 {
+._image_1a177_25 {
   object-fit: cover;
 }
-._placeholder_1io44_29 {
+._placeholder_1a177_29 {
   width: 100%;
   height: 100%;
   background: var(--color-surface-soft);
 }
-._topBadge_1io44_37 {
+._topBadge_1a177_37 {
   position: absolute;
   top: var(--space-8);
   left: var(--space-8);
@@ -1750,13 +1752,13 @@
   text-transform: uppercase;
   white-space: nowrap;
 }
-._saleBadge_1io44_78 {
+._saleBadge_1a177_78 {
   position: absolute;
   display: flex;
   bottom: var(--space-8);
   left: var(--space-8);
 }
-._oos_1io44_86 {
+._oos_1a177_86 {
   position: absolute;
   inset: 0;
   display: flex;
@@ -1768,17 +1770,17 @@
   font-size: var(--type-trimmed-sm-size);
   font-weight: var(--font-weight-bold);
 }
-._bottom_1io44_113 {
+._bottom_1a177_113 {
   display: flex;
   flex-direction: column;
   gap: var(--space-16);
 }
-._titlePrice_1io44_100 {
+._titlePrice_1a177_100 {
   display: flex;
   flex-direction: column;
   gap: var(--space-16);
 }
-._title_1io44_5 {
+._title_1a177_5 {
   font-size: var(--type-paragraph-size);
   line-height: 21px;
   padding: 5px 0;
@@ -1792,41 +1794,41 @@
   overflow: hidden;
   min-height: calc(2 * 21px + 10px);
 }
-._titlePrice_1io44_100 > :last-child {
+._titlePrice_1a177_100 > :last-child {
   line-height: 11px;
 }
-._swatches_1io44_179 {
+._swatches_1a177_181 {
   display: flex;
   gap: var(--space-4);
   align-items: center;
 }
-._swatch_1io44_179 {
+._swatch_1a177_181 {
   display: inline-flex;
   padding: 2px;
-  box-shadow: inset 0 0 0 0.5px var(--color-border-subtle);
+  box-shadow: inset 0 0 0 0.5px var(--color-border-full-color-subtle);
   border-radius: var(--radius-2);
 }
-._swatchActive_1io44_196 {
-  box-shadow: inset 0 0 0 0.5px var(--color-surface-max);
+._swatchActive_1a177_198 {
+  box-shadow: inset 0 0 0 0.5px var(--color-border-full-color-max);
 }
-._swatchDot_1io44_200 {
+._swatchDot_1a177_202 {
   display: block;
   width: 14px;
   height: 14px;
   border-radius: var(--radius-2);
 }
-._large_1io44_211 {
+._large_1a177_213 {
   padding: 0 var(--space-16);
 }
-._large_1io44_211 ._media_1io44_15 {
+._large_1a177_213 ._media_1a177_15 {
   aspect-ratio: 343 / 457;
 }
-._large_1io44_211 ._title_1io44_5 {
+._large_1a177_213 ._title_1a177_5 {
   font-size: 18px;
   line-height: 23px;
   min-height: 0;
 }
-._tile_1io44_7:not(._large_1io44_211) ._swatches_1io44_179 {
+._tile_1a177_7:not(._large_1a177_213) ._swatches_1a177_181 {
   display: none;
 }
 ._section_1n5an_5 {
@@ -3397,31 +3399,22 @@
   column-gap: var(--space-12);
   row-gap: var(--space-24);
 }
-._showcase_1y51o_40 {
-  height: calc(var(--showcase-vh, 100svh) - var(--showcase-top, 0px));
-  overflow-y: auto;
-  scroll-snap-type: y mandatory;
-  overscroll-behavior-y: contain;
-  -webkit-overflow-scrolling: touch;
+._showcase_a0wva_39 {
   background: #080e12;
-  scrollbar-width: none;
-}
-._showcase_1y51o_40::-webkit-scrollbar {
-  display: none;
 }
-._panel_1y51o_59 {
+._panel_a0wva_43 {
   position: relative;
-  height: calc(var(--showcase-vh, 100svh) - var(--showcase-top, 0px));
+  height: calc(100lvh - var(--showcase-top, 0px));
   scroll-snap-align: start;
   scroll-snap-stop: always;
   overflow: hidden;
   background: #080e12;
 }
-._image_1y51o_88 {
+._image_a0wva_71 {
   object-fit: cover;
   object-position: 50% var(--slide-focal-y, 50%);
 }
-._heroImageBox_1y51o_136 {
+._heroImageBox_a0wva_119 {
   position: absolute;
   top: 31px;
   left: 0;
@@ -3429,7 +3422,7 @@
   aspect-ratio: 750 / 1348;
   overflow: hidden;
 }
-._hero_1y51o_136::after {
+._hero_a0wva_119::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -3444,10 +3437,10 @@
       rgba(8, 14, 18, 1) 90%);
   pointer-events: none;
 }
-._hero_1y51o_136 ._image_1y51o_88 {
+._hero_a0wva_119 ._image_a0wva_71 {
   object-position: top;
 }
-._hero_1y51o_136 ._heroContent_1y51o_207 {
+._hero_a0wva_119 ._heroContent_a0wva_190 {
   position: absolute;
   bottom: 0;
   left: 0;
@@ -3458,7 +3451,7 @@
   gap: 24px;
   align-items: stretch;
 }
-._heroText_1y51o_224 {
+._heroText_a0wva_207 {
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -3466,11 +3459,11 @@
   padding: 0 24px;
   text-align: center;
 }
-._heroText_1y51o_224 ._logo_1y51o_233 {
+._heroText_a0wva_207 ._logo_a0wva_216 {
   width: 48px;
   height: 48px;
 }
-._heroTitle_1y51o_253 {
+._heroTitle_a0wva_236 {
   width: 100%;
   margin: 0;
   font-family:
@@ -3485,14 +3478,14 @@
   letter-spacing: -1.12px;
   color: #f9fafa;
 }
-._heroSub_1y51o_277 {
+._heroSub_a0wva_260 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
   max-width: 327px;
 }
-._swipe_1y51o_290 {
+._swipe_a0wva_273 {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -3500,19 +3493,19 @@
   padding: 8px 0;
   background: #080e12;
 }
-._swipeLabel_1y51o_298 {
+._swipeLabel_a0wva_281 {
   margin: 0;
   font-size: 14px;
   line-height: 1;
   color: rgba(255, 255, 255, 0.54);
 }
-._chevron_1y51o_304 {
+._chevron_a0wva_287 {
   width: 24px;
   height: 24px;
   color: rgba(255, 255, 255, 0.54);
-  animation: _bob_1y51o_1 1.8s ease-in-out infinite;
+  animation: _bob_a0wva_1 1.8s ease-in-out infinite;
 }
-@keyframes _bob_1y51o_1 {
+@keyframes _bob_a0wva_1 {
   0%, 100% {
     transform: translateY(0);
   }
@@ -3520,7 +3513,7 @@
     transform: translateY(4px);
   }
 }
-._overlay_1y51o_321 {
+._overlay_a0wva_304 {
   position: absolute;
   inset: 0;
   z-index: 1;
@@ -3531,25 +3524,25 @@
   align-items: flex-start;
   padding: 0 24px 24px;
 }
-._copy_1y51o_332 {
+._copy_a0wva_315 {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
-._title_1y51o_337 {
+._title_a0wva_320 {
   margin: 0;
   font-size: 32px;
   line-height: 1.2;
   font-weight: 700;
   color: #f9fafa;
 }
-._subtitle_1y51o_344 {
+._subtitle_a0wva_327 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
 }
-._cta_1y51o_350 {
+._cta_a0wva_333 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3563,15 +3556,15 @@
   font-weight: 700;
   text-decoration: none;
 }
-._cta_1y51o_350::after {
+._cta_a0wva_333::after {
   content: "";
   position: absolute;
   inset: 0;
 }
-._cta_1y51o_350:active {
+._cta_a0wva_333:active {
   background: rgba(249, 250, 250, 0.12);
 }
-._cta_1y51o_350:focus-visible {
+._cta_a0wva_333:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }

package/dist/styles.css

@@ -38,6 +38,8 @@
   --color-surface-bold: #6d7377;
   --color-border-default: #dddedf;
   --color-border-subtle: #ced0d2;
+  --color-border-full-color-subtle: #6d7377;
+  --color-border-full-color-max: #f9fafa;
   --color-border-transparent-soft: rgba(0, 0, 0, 0.1);
   --color-state-text-success: #147e4a;
   --color-state-surface-success-soft: #def1e9;
@@ -1706,14 +1708,14 @@
   height: 24px;
   color: var(--color-text-default);
 }
-._tile_1io44_7 {
+._tile_1a177_7 {
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
   text-decoration: none;
   color: inherit;
 }
-._media_1io44_15 {
+._media_1a177_15 {
   position: relative;
   width: 100%;
   aspect-ratio: 165 / 220;
@@ -1721,15 +1723,15 @@
   overflow: hidden;
   background: var(--color-surface-soft);
 }
-._image_1io44_25 {
+._image_1a177_25 {
   object-fit: cover;
 }
-._placeholder_1io44_29 {
+._placeholder_1a177_29 {
   width: 100%;
   height: 100%;
   background: var(--color-surface-soft);
 }
-._topBadge_1io44_37 {
+._topBadge_1a177_37 {
   position: absolute;
   top: var(--space-8);
   left: var(--space-8);
@@ -1750,13 +1752,13 @@
   text-transform: uppercase;
   white-space: nowrap;
 }
-._saleBadge_1io44_78 {
+._saleBadge_1a177_78 {
   position: absolute;
   display: flex;
   bottom: var(--space-8);
   left: var(--space-8);
 }
-._oos_1io44_86 {
+._oos_1a177_86 {
   position: absolute;
   inset: 0;
   display: flex;
@@ -1768,17 +1770,17 @@
   font-size: var(--type-trimmed-sm-size);
   font-weight: var(--font-weight-bold);
 }
-._bottom_1io44_113 {
+._bottom_1a177_113 {
   display: flex;
   flex-direction: column;
   gap: var(--space-16);
 }
-._titlePrice_1io44_100 {
+._titlePrice_1a177_100 {
   display: flex;
   flex-direction: column;
   gap: var(--space-16);
 }
-._title_1io44_5 {
+._title_1a177_5 {
   font-size: var(--type-paragraph-size);
   line-height: 21px;
   padding: 5px 0;
@@ -1792,41 +1794,41 @@
   overflow: hidden;
   min-height: calc(2 * 21px + 10px);
 }
-._titlePrice_1io44_100 > :last-child {
+._titlePrice_1a177_100 > :last-child {
   line-height: 11px;
 }
-._swatches_1io44_179 {
+._swatches_1a177_181 {
   display: flex;
   gap: var(--space-4);
   align-items: center;
 }
-._swatch_1io44_179 {
+._swatch_1a177_181 {
   display: inline-flex;
   padding: 2px;
-  box-shadow: inset 0 0 0 0.5px var(--color-border-subtle);
+  box-shadow: inset 0 0 0 0.5px var(--color-border-full-color-subtle);
   border-radius: var(--radius-2);
 }
-._swatchActive_1io44_196 {
-  box-shadow: inset 0 0 0 0.5px var(--color-surface-max);
+._swatchActive_1a177_198 {
+  box-shadow: inset 0 0 0 0.5px var(--color-border-full-color-max);
 }
-._swatchDot_1io44_200 {
+._swatchDot_1a177_202 {
   display: block;
   width: 14px;
   height: 14px;
   border-radius: var(--radius-2);
 }
-._large_1io44_211 {
+._large_1a177_213 {
   padding: 0 var(--space-16);
 }
-._large_1io44_211 ._media_1io44_15 {
+._large_1a177_213 ._media_1a177_15 {
   aspect-ratio: 343 / 457;
 }
-._large_1io44_211 ._title_1io44_5 {
+._large_1a177_213 ._title_1a177_5 {
   font-size: 18px;
   line-height: 23px;
   min-height: 0;
 }
-._tile_1io44_7:not(._large_1io44_211) ._swatches_1io44_179 {
+._tile_1a177_7:not(._large_1a177_213) ._swatches_1a177_181 {
   display: none;
 }
 ._section_1n5an_5 {
@@ -3397,31 +3399,22 @@
   column-gap: var(--space-12);
   row-gap: var(--space-24);
 }
-._showcase_1y51o_40 {
-  height: calc(var(--showcase-vh, 100svh) - var(--showcase-top, 0px));
-  overflow-y: auto;
-  scroll-snap-type: y mandatory;
-  overscroll-behavior-y: contain;
-  -webkit-overflow-scrolling: touch;
+._showcase_a0wva_39 {
   background: #080e12;
-  scrollbar-width: none;
-}
-._showcase_1y51o_40::-webkit-scrollbar {
-  display: none;
 }
-._panel_1y51o_59 {
+._panel_a0wva_43 {
   position: relative;
-  height: calc(var(--showcase-vh, 100svh) - var(--showcase-top, 0px));
+  height: calc(100lvh - var(--showcase-top, 0px));
   scroll-snap-align: start;
   scroll-snap-stop: always;
   overflow: hidden;
   background: #080e12;
 }
-._image_1y51o_88 {
+._image_a0wva_71 {
   object-fit: cover;
   object-position: 50% var(--slide-focal-y, 50%);
 }
-._heroImageBox_1y51o_136 {
+._heroImageBox_a0wva_119 {
   position: absolute;
   top: 31px;
   left: 0;
@@ -3429,7 +3422,7 @@
   aspect-ratio: 750 / 1348;
   overflow: hidden;
 }
-._hero_1y51o_136::after {
+._hero_a0wva_119::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -3444,10 +3437,10 @@
       rgba(8, 14, 18, 1) 90%);
   pointer-events: none;
 }
-._hero_1y51o_136 ._image_1y51o_88 {
+._hero_a0wva_119 ._image_a0wva_71 {
   object-position: top;
 }
-._hero_1y51o_136 ._heroContent_1y51o_207 {
+._hero_a0wva_119 ._heroContent_a0wva_190 {
   position: absolute;
   bottom: 0;
   left: 0;
@@ -3458,7 +3451,7 @@
   gap: 24px;
   align-items: stretch;
 }
-._heroText_1y51o_224 {
+._heroText_a0wva_207 {
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -3466,11 +3459,11 @@
   padding: 0 24px;
   text-align: center;
 }
-._heroText_1y51o_224 ._logo_1y51o_233 {
+._heroText_a0wva_207 ._logo_a0wva_216 {
   width: 48px;
   height: 48px;
 }
-._heroTitle_1y51o_253 {
+._heroTitle_a0wva_236 {
   width: 100%;
   margin: 0;
   font-family:
@@ -3485,14 +3478,14 @@
   letter-spacing: -1.12px;
   color: #f9fafa;
 }
-._heroSub_1y51o_277 {
+._heroSub_a0wva_260 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
   max-width: 327px;
 }
-._swipe_1y51o_290 {
+._swipe_a0wva_273 {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -3500,19 +3493,19 @@
   padding: 8px 0;
   background: #080e12;
 }
-._swipeLabel_1y51o_298 {
+._swipeLabel_a0wva_281 {
   margin: 0;
   font-size: 14px;
   line-height: 1;
   color: rgba(255, 255, 255, 0.54);
 }
-._chevron_1y51o_304 {
+._chevron_a0wva_287 {
   width: 24px;
   height: 24px;
   color: rgba(255, 255, 255, 0.54);
-  animation: _bob_1y51o_1 1.8s ease-in-out infinite;
+  animation: _bob_a0wva_1 1.8s ease-in-out infinite;
 }
-@keyframes _bob_1y51o_1 {
+@keyframes _bob_a0wva_1 {
   0%, 100% {
     transform: translateY(0);
   }
@@ -3520,7 +3513,7 @@
     transform: translateY(4px);
   }
 }
-._overlay_1y51o_321 {
+._overlay_a0wva_304 {
   position: absolute;
   inset: 0;
   z-index: 1;
@@ -3531,25 +3524,25 @@
   align-items: flex-start;
   padding: 0 24px 24px;
 }
-._copy_1y51o_332 {
+._copy_a0wva_315 {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
-._title_1y51o_337 {
+._title_a0wva_320 {
   margin: 0;
   font-size: 32px;
   line-height: 1.2;
   font-weight: 700;
   color: #f9fafa;
 }
-._subtitle_1y51o_344 {
+._subtitle_a0wva_327 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
 }
-._cta_1y51o_350 {
+._cta_a0wva_333 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3563,15 +3556,15 @@
   font-weight: 700;
   text-decoration: none;
 }
-._cta_1y51o_350::after {
+._cta_a0wva_333::after {
   content: "";
   position: absolute;
   inset: 0;
 }
-._cta_1y51o_350:active {
+._cta_a0wva_333:active {
   background: rgba(249, 250, 250, 0.12);
 }
-._cta_1y51o_350:focus-visible {
+._cta_a0wva_333:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }

package/package.json

@@ -1,14 +1,11 @@
 {
   "name": "@nok-integration/storefront-react",
-  "version": "0.19.8",
+  "version": "0.19.10",
   "description": "Mountable React storefront components: catalogue, product detail and cart, mounted directly into a host DOM tree. No iframe.",
   "license": "UNLICENSED",
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  },
   "type": "module",
   "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
@@ -23,34 +20,18 @@
     "dist",
     "!dist/**/*.map"
   ],
-  "scripts": {
-    "build": "pnpm build:package && pnpm build:standalone",
-    "build:package": "vite build",
-    "build:standalone": "BUILD_TARGET=standalone vite build",
-    "typecheck": "tsc --noEmit",
-    "build:partner": "PARTNER_DROP=1 pnpm build && pnpm pack"
-  },
+  "sideEffects": [
+    "*.css"
+  ],
   "peerDependencies": {
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
-  "devDependencies": {
-    "@microsoft/api-extractor": "^7.58.12",
-    "@raqmix/contracts": "^2.0.0",
-    "@types/react": "^19.1.0",
-    "@types/react-dom": "^19.1.0",
-    "@vitejs/plugin-react": "^4.3.4",
-    "esbuild": "^0.28.1",
-    "terser": "^5.50.0",
-    "typescript": "^5.7.3",
-    "vite": "^7.0.0",
-    "vite-plugin-dts": "^5.0.3"
-  },
-  "module": "./dist/index.mjs",
-  "sideEffects": [
-    "*.css"
-  ],
   "dependencies": {
     "zod": "^3.24.1"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
   }
 }