@nok-integration/storefront-react 0.29.14 → 0.29.16

package/dist/index.d.ts

@@ -6115,6 +6115,8 @@ export declare type ShopEvent = {
 | {
     type: 'support_requested';
     orderRef: string;
+} | {
+    type: 'help_requested';
 }
 /**
 * The fan confirmed a cancellation and the engine accepted it.
@@ -6222,6 +6224,7 @@ export declare interface ShopHeaderProps {
      * and cannot know which screen it is over.
      */
     onMenu?: () => void;
+    onHelp?: () => void;
     /**
      * The screen name, drawn between the back control and the icons (Figma `mobile/header`
      * carries "DAZN Shop" here on the shop entry).
@@ -6277,6 +6280,7 @@ export declare interface ShopHeaderProps {
     /** Accessible name for the back control, for a host that is not in English. */
     backLabel?: string;
     menuLabel?: string;
+    helpLabel?: string;
     closeLabel?: string;
     className?: string;
 }

package/dist/index.mjs

@@ -5761,6 +5761,7 @@ async function restoreSetAside(cart2, writer, query, { force = false } = {}) {
 const ScreenTitleContext = createContext({
   title: void 0,
   trailing: "default",
+  leading: "default",
   claim: () => () => {
   }
 });
@@ -5768,23 +5769,27 @@ const SuppressedContext = createContext(false);
 function ScreenTitleProvider({ children }) {
   const [title2, setTitle] = useState(void 0);
   const [trailing, setTrailing] = useState("default");
+  const [leading2, setLeading] = useState("default");
   const held = useRef(void 0);
-  const claim = useCallback((next, nextTrailing) => {
+  const claim = useCallback((next, nextTrailing, nextLeading) => {
     held.current = next;
     setTitle(next);
     setTrailing(nextTrailing);
+    setLeading(nextLeading);
     return () => {
       if (held.current !== next) return;
       held.current = void 0;
       setTitle(void 0);
       setTrailing("default");
+      setLeading("default");
     };
   }, []);
   const value2 = useMemo(() => ({
     title: title2,
     trailing,
+    leading: leading2,
     claim
-  }), [title2, trailing, claim]);
+  }), [title2, trailing, leading2, claim]);
   return jsx(ScreenTitleContext.Provider, {
     value: value2,
     children: jsx(ScreenNavProvider, {
@@ -5800,13 +5805,16 @@ function useScreenTitle() {
 function useScreenTrailing() {
   return useContext(ScreenTitleContext).trailing;
 }
-function useSetScreenTitle(title2, trailing = "default") {
+function useScreenLeading() {
+  return useContext(ScreenTitleContext).leading;
+}
+function useSetScreenTitle(title2, trailing = "default", leading2 = "default") {
   const { claim } = useContext(ScreenTitleContext);
   const suppressed = useContext(SuppressedContext);
   useEffect(() => {
     if (suppressed || title2 === void 0) return;
-    return claim(title2, trailing);
-  }, [claim, title2, trailing, suppressed]);
+    return claim(title2, trailing, leading2);
+  }, [claim, title2, trailing, leading2, suppressed]);
 }
 function NoScreenTitle({ children }) {
   return jsx(SuppressedContext.Provider, {
@@ -6523,6 +6531,7 @@ const ES = {
   "Gallery pagination": "Paginación de la galería",
   "Go to image {0}": "Ir a la imagen {0}",
   "Heavyweight comfort built for training days and off-duty moments": "Comodidad y resistencia pensadas para los días de entrenamiento y los momentos de ocio",
+  Help: "Ayuda",
   "Help & Support": "Ayuda y asistencia",
   Hoodies: "Sudaderas con capucha",
   "Increase quantity": "Aumentar la cantidad",
@@ -14828,18 +14837,41 @@ function requireDist() {
   return dist;
 }
 var distExports = requireDist();
-const hero$1 = "_hero_15sq4_1";
-const image$1 = "_image_15sq4_11";
-const foot = "_foot_15sq4_34";
-const text$1 = "_text_15sq4_40";
-const logo$1 = "_logo_15sq4_48";
-const copy$1 = "_copy_15sq4_53";
-const headline = "_headline_15sq4_62";
-const body = "_body_15sq4_70";
-const cta$2 = "_cta_15sq4_79";
-const video = "_video_15sq4_83";
-const desktopOnly = "_desktopOnly_15sq4_87";
-const phoneOnly$1 = "_phoneOnly_15sq4_97";
+function useRoomBelow(ref, property) {
+  useEffect(() => {
+    const el = ref.current;
+    const host = el?.parentElement?.parentElement;
+    if (!el || !host) return;
+    const measure = () => {
+      const room = Math.round(host.getBoundingClientRect().bottom - el.getBoundingClientRect().top);
+      if (room > 0) el.style.setProperty(property, `${room}px`);
+      else el.style.removeProperty(property);
+    };
+    measure();
+    const frame2 = typeof requestAnimationFrame === "undefined" ? void 0 : requestAnimationFrame(measure);
+    window.addEventListener("resize", measure);
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+    observer?.observe(host);
+    return () => {
+      if (frame2 !== void 0) cancelAnimationFrame(frame2);
+      window.removeEventListener("resize", measure);
+      observer?.disconnect();
+      el.style.removeProperty(property);
+    };
+  }, [ref, property]);
+}
+const hero$1 = "_hero_1ddez_1";
+const image$1 = "_image_1ddez_11";
+const foot = "_foot_1ddez_34";
+const text$1 = "_text_1ddez_40";
+const logo$1 = "_logo_1ddez_48";
+const copy$1 = "_copy_1ddez_53";
+const headline = "_headline_1ddez_62";
+const body = "_body_1ddez_70";
+const cta$2 = "_cta_1ddez_79";
+const video = "_video_1ddez_83";
+const desktopOnly = "_desktopOnly_1ddez_87";
+const phoneOnly$1 = "_phoneOnly_1ddez_97";
 const hero$2 = {
   hero: hero$1,
   image: image$1,
@@ -14859,6 +14891,7 @@ function VipHero({ hero: hero2, onContinue }) {
   const assetUrl = useAssetUrl();
   const ref = useRef(null);
   useTopOffset(ref, "--vip-hero-top");
+  useRoomBelow(ref, "--vip-hero-room");
   useSetScreenBackdrop("media");
   const desktopImage = hero2.desktop_image ?? null;
   const desktopVideo = hero2.desktop_video ?? null;
@@ -14937,6 +14970,7 @@ function VipInviteNotice({ title: title2, body: body3 }) {
   const navigate = useNavigate();
   const ref = useRef(null);
   useTopOffset(ref, "--vip-hero-top");
+  useRoomBelow(ref, "--vip-hero-room");
   useSetScreenBackdrop("media");
   const explore = () => {
     if (navigate) {
@@ -15091,7 +15125,7 @@ function VipLandingView({ token, onUnavailable, screen: screen2 = "hero" }) {
   const [attempt, setAttempt] = useState(0);
   const emitRef = useRef(emit);
   emitRef.current = emit;
-  useSetScreenTitle(t("DAZN Shop"), "none");
+  useSetScreenTitle(screen2 === "product" ? "" : t("DAZN Shop"), "help", screen2 === "product" ? "default" : "none");
   useEffect(() => {
     const target = locatorOf(token);
     if (!target) {
@@ -16480,17 +16514,22 @@ function CheckoutBar({ title: title2, onClose, closeLabel, className }) {
     })]
   });
 }
-function ShopBar({ onBack, onMenu, title: title2, showCart, floating: floatingProp, scrolled: scrolled2, backLabel, menuLabel, className }) {
+function ShopBar({ onBack, onMenu, onHelp, helpLabel, title: title2, showCart, floating: floatingProp, scrolled: scrolled2, backLabel, menuLabel, className }) {
   const backdrop = useScreenBackdrop();
-  const floating2 = floatingProp ?? backdrop === "media";
+  const floating2 = backdrop === "media" || (floatingProp ?? false);
   const t = useT();
+  const emit = useShopEvent();
+  const leading2 = useScreenLeading();
+  const back = leading2 === "none" ? void 0 : onBack;
   const cartCount = useCartCount();
   const screenTitle = useScreenTitle();
   const shownTitle = title2 ?? screenTitle;
-  const bare = useScreenTrailing() === "none";
-  const cartOn = showCart ?? !bare;
+  const trailing = useScreenTrailing();
+  const help2 = trailing === "help";
+  const bare = trailing !== "default";
+  const cartOn = help2 ? false : showCart ?? !bare;
   const menu = bare ? void 0 : onMenu;
-  const hasTrailing = cartOn || Boolean(menu);
+  const hasTrailing = cartOn || Boolean(menu) || help2;
   const nav = useScreenNav();
   const navClaimed = useShopNavClaimed();
   const wide2 = Boolean(nav && nav.crumbs.length > 0);
@@ -16511,13 +16550,13 @@ function ShopBar({ onBack, onMenu, title: title2, showCart, floating: floatingPr
       } : {}
     }) : null, jsxs("header", {
       className: classes,
-      children: [onBack ? jsx("button", {
+      children: [back ? jsx("button", {
         type: "button",
         className: styles.iconBtn,
         "aria-label": backLabel ?? t("Back"),
-        onClick: onBack,
+        onClick: back,
         children: jsx(ChevronLeft, {})
-      }) : jsx("span", {
+      }) : leading2 === "none" ? null : jsx("span", {
         className: styles.spacer,
         "aria-hidden": "true"
       }), shownTitle ? jsx("span", {
@@ -16533,6 +16572,17 @@ function ShopBar({ onBack, onMenu, title: title2, showCart, floating: floatingPr
             "aria-hidden": "true",
             children: cartCount > 99 ? "99+" : cartCount
           }) : null]
+        }) : null, help2 ? jsx("button", {
+          type: "button",
+          className: `${styles.iconBtn} ${styles.menuBtn}`,
+          "aria-label": helpLabel ?? t("Help"),
+          onClick: () => {
+            emit({
+              type: "help_requested"
+            });
+            onHelp?.();
+          },
+          children: jsx(HelpIcon, {})
         }) : null, menu ? jsx("button", {
           type: "button",
           className: `${styles.iconBtn} ${styles.menuBtn}`,
@@ -16629,6 +16679,7 @@ function toGa4Event(event) {
     case "ready":
     case "navigate":
     case "support_requested":
+    case "help_requested":
     case "order_cancellation_requested":
     case "reorder_requested":
     case "session_required":

package/dist/standalone/storefront.mjs

@@ -5761,6 +5761,7 @@ async function restoreSetAside(cart2, writer, query, { force = false } = {}) {
 const ScreenTitleContext = createContext({
   title: void 0,
   trailing: "default",
+  leading: "default",
   claim: () => () => {
   }
 });
@@ -5768,23 +5769,27 @@ const SuppressedContext = createContext(false);
 function ScreenTitleProvider({ children }) {
   const [title2, setTitle] = useState(void 0);
   const [trailing, setTrailing] = useState("default");
+  const [leading2, setLeading] = useState("default");
   const held = useRef(void 0);
-  const claim = useCallback((next, nextTrailing) => {
+  const claim = useCallback((next, nextTrailing, nextLeading) => {
     held.current = next;
     setTitle(next);
     setTrailing(nextTrailing);
+    setLeading(nextLeading);
     return () => {
       if (held.current !== next) return;
       held.current = void 0;
       setTitle(void 0);
       setTrailing("default");
+      setLeading("default");
     };
   }, []);
   const value2 = useMemo(() => ({
     title: title2,
     trailing,
+    leading: leading2,
     claim
-  }), [title2, trailing, claim]);
+  }), [title2, trailing, leading2, claim]);
   return jsx(ScreenTitleContext.Provider, {
     value: value2,
     children: jsx(ScreenNavProvider, {
@@ -5800,13 +5805,16 @@ function useScreenTitle() {
 function useScreenTrailing() {
   return useContext(ScreenTitleContext).trailing;
 }
-function useSetScreenTitle(title2, trailing = "default") {
+function useScreenLeading() {
+  return useContext(ScreenTitleContext).leading;
+}
+function useSetScreenTitle(title2, trailing = "default", leading2 = "default") {
   const { claim } = useContext(ScreenTitleContext);
   const suppressed = useContext(SuppressedContext);
   useEffect(() => {
     if (suppressed || title2 === void 0) return;
-    return claim(title2, trailing);
-  }, [claim, title2, trailing, suppressed]);
+    return claim(title2, trailing, leading2);
+  }, [claim, title2, trailing, leading2, suppressed]);
 }
 function NoScreenTitle({ children }) {
   return jsx(SuppressedContext.Provider, {
@@ -6523,6 +6531,7 @@ const ES = {
   "Gallery pagination": "Paginación de la galería",
   "Go to image {0}": "Ir a la imagen {0}",
   "Heavyweight comfort built for training days and off-duty moments": "Comodidad y resistencia pensadas para los días de entrenamiento y los momentos de ocio",
+  Help: "Ayuda",
   "Help & Support": "Ayuda y asistencia",
   Hoodies: "Sudaderas con capucha",
   "Increase quantity": "Aumentar la cantidad",
@@ -14828,18 +14837,41 @@ function requireDist() {
   return dist;
 }
 var distExports = requireDist();
-const hero$1 = "_hero_15sq4_1";
-const image$1 = "_image_15sq4_11";
-const foot = "_foot_15sq4_34";
-const text$1 = "_text_15sq4_40";
-const logo$1 = "_logo_15sq4_48";
-const copy$1 = "_copy_15sq4_53";
-const headline = "_headline_15sq4_62";
-const body = "_body_15sq4_70";
-const cta$2 = "_cta_15sq4_79";
-const video = "_video_15sq4_83";
-const desktopOnly = "_desktopOnly_15sq4_87";
-const phoneOnly$1 = "_phoneOnly_15sq4_97";
+function useRoomBelow(ref, property) {
+  useEffect(() => {
+    const el = ref.current;
+    const host = el?.parentElement?.parentElement;
+    if (!el || !host) return;
+    const measure = () => {
+      const room = Math.round(host.getBoundingClientRect().bottom - el.getBoundingClientRect().top);
+      if (room > 0) el.style.setProperty(property, `${room}px`);
+      else el.style.removeProperty(property);
+    };
+    measure();
+    const frame2 = typeof requestAnimationFrame === "undefined" ? void 0 : requestAnimationFrame(measure);
+    window.addEventListener("resize", measure);
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+    observer?.observe(host);
+    return () => {
+      if (frame2 !== void 0) cancelAnimationFrame(frame2);
+      window.removeEventListener("resize", measure);
+      observer?.disconnect();
+      el.style.removeProperty(property);
+    };
+  }, [ref, property]);
+}
+const hero$1 = "_hero_1ddez_1";
+const image$1 = "_image_1ddez_11";
+const foot = "_foot_1ddez_34";
+const text$1 = "_text_1ddez_40";
+const logo$1 = "_logo_1ddez_48";
+const copy$1 = "_copy_1ddez_53";
+const headline = "_headline_1ddez_62";
+const body = "_body_1ddez_70";
+const cta$2 = "_cta_1ddez_79";
+const video = "_video_1ddez_83";
+const desktopOnly = "_desktopOnly_1ddez_87";
+const phoneOnly$1 = "_phoneOnly_1ddez_97";
 const hero$2 = {
   hero: hero$1,
   image: image$1,
@@ -14859,6 +14891,7 @@ function VipHero({ hero: hero2, onContinue }) {
   const assetUrl = useAssetUrl();
   const ref = useRef(null);
   useTopOffset(ref, "--vip-hero-top");
+  useRoomBelow(ref, "--vip-hero-room");
   useSetScreenBackdrop("media");
   const desktopImage = hero2.desktop_image ?? null;
   const desktopVideo = hero2.desktop_video ?? null;
@@ -14937,6 +14970,7 @@ function VipInviteNotice({ title: title2, body: body3 }) {
   const navigate = useNavigate();
   const ref = useRef(null);
   useTopOffset(ref, "--vip-hero-top");
+  useRoomBelow(ref, "--vip-hero-room");
   useSetScreenBackdrop("media");
   const explore = () => {
     if (navigate) {
@@ -15091,7 +15125,7 @@ function VipLandingView({ token, onUnavailable, screen: screen2 = "hero" }) {
   const [attempt, setAttempt] = useState(0);
   const emitRef = useRef(emit);
   emitRef.current = emit;
-  useSetScreenTitle(t("DAZN Shop"), "none");
+  useSetScreenTitle(screen2 === "product" ? "" : t("DAZN Shop"), "help", screen2 === "product" ? "default" : "none");
   useEffect(() => {
     const target = locatorOf(token);
     if (!target) {
@@ -16480,17 +16514,22 @@ function CheckoutBar({ title: title2, onClose, closeLabel, className }) {
     })]
   });
 }
-function ShopBar({ onBack, onMenu, title: title2, showCart, floating: floatingProp, scrolled: scrolled2, backLabel, menuLabel, className }) {
+function ShopBar({ onBack, onMenu, onHelp, helpLabel, title: title2, showCart, floating: floatingProp, scrolled: scrolled2, backLabel, menuLabel, className }) {
   const backdrop = useScreenBackdrop();
-  const floating2 = floatingProp ?? backdrop === "media";
+  const floating2 = backdrop === "media" || (floatingProp ?? false);
   const t = useT();
+  const emit = useShopEvent();
+  const leading2 = useScreenLeading();
+  const back = leading2 === "none" ? void 0 : onBack;
   const cartCount = useCartCount();
   const screenTitle = useScreenTitle();
   const shownTitle = title2 ?? screenTitle;
-  const bare = useScreenTrailing() === "none";
-  const cartOn = showCart ?? !bare;
+  const trailing = useScreenTrailing();
+  const help2 = trailing === "help";
+  const bare = trailing !== "default";
+  const cartOn = help2 ? false : showCart ?? !bare;
   const menu = bare ? void 0 : onMenu;
-  const hasTrailing = cartOn || Boolean(menu);
+  const hasTrailing = cartOn || Boolean(menu) || help2;
   const nav = useScreenNav();
   const navClaimed = useShopNavClaimed();
   const wide2 = Boolean(nav && nav.crumbs.length > 0);
@@ -16511,13 +16550,13 @@ function ShopBar({ onBack, onMenu, title: title2, showCart, floating: floatingPr
       } : {}
     }) : null, jsxs("header", {
       className: classes,
-      children: [onBack ? jsx("button", {
+      children: [back ? jsx("button", {
         type: "button",
         className: styles.iconBtn,
         "aria-label": backLabel ?? t("Back"),
-        onClick: onBack,
+        onClick: back,
         children: jsx(ChevronLeft, {})
-      }) : jsx("span", {
+      }) : leading2 === "none" ? null : jsx("span", {
         className: styles.spacer,
         "aria-hidden": "true"
       }), shownTitle ? jsx("span", {
@@ -16533,6 +16572,17 @@ function ShopBar({ onBack, onMenu, title: title2, showCart, floating: floatingPr
             "aria-hidden": "true",
             children: cartCount > 99 ? "99+" : cartCount
           }) : null]
+        }) : null, help2 ? jsx("button", {
+          type: "button",
+          className: `${styles.iconBtn} ${styles.menuBtn}`,
+          "aria-label": helpLabel ?? t("Help"),
+          onClick: () => {
+            emit({
+              type: "help_requested"
+            });
+            onHelp?.();
+          },
+          children: jsx(HelpIcon, {})
         }) : null, menu ? jsx("button", {
           type: "button",
           className: `${styles.iconBtn} ${styles.menuBtn}`,
@@ -16629,6 +16679,7 @@ function toGa4Event(event) {
     case "ready":
     case "navigate":
     case "support_requested":
+    case "help_requested":
     case "order_cancellation_requested":
     case "reorder_requested":
     case "session_required":

package/dist/standalone/styles.css

@@ -4689,20 +4689,20 @@
     display: block;
   }
 }
-._hero_15sq4_1 {
+._hero_1ddez_1 {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  min-height: max(480px, calc(100svh - var(--vip-hero-top, 0px)));
+  min-height: max(480px, calc(100svh - var(--vip-hero-top, 0px)), var(--vip-hero-room, 0px));
   overflow: hidden;
   background: var(--color-surface-default);
 }
-._image_15sq4_11 {
+._image_1ddez_11 {
   position: absolute;
   inset: 0;
 }
-._image_15sq4_11::after {
+._image_1ddez_11::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -4714,27 +4714,27 @@
       rgba(8, 14, 18, 0) 382px);
   pointer-events: none;
 }
-._image_15sq4_11 img {
+._image_1ddez_11 img {
   object-fit: cover;
   object-position: top center;
 }
-._foot_15sq4_34 {
+._foot_1ddez_34 {
   position: relative;
   display: flex;
   flex-direction: column;
 }
-._text_15sq4_40 {
+._text_1ddez_40 {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--space-16);
   padding: 0 var(--space-16) var(--space-8);
 }
-._text_15sq4_40 ._logo_15sq4_48 {
+._text_1ddez_40 ._logo_1ddez_48 {
   width: 48px;
   height: 48px;
 }
-._copy_15sq4_53 {
+._copy_1ddez_53 {
   display: flex;
   flex-direction: column;
   gap: 6px;
@@ -4742,14 +4742,14 @@
   text-align: center;
   overflow-wrap: break-word;
 }
-._headline_15sq4_62 {
+._headline_1ddez_62 {
   margin: 0;
   font-size: 36px;
   line-height: 1.1;
   font-weight: var(--font-weight-bold);
   color: var(--color-text-default);
 }
-._body_15sq4_70 {
+._body_1ddez_70 {
   margin: 0;
   font-size: var(--type-paragraph-size);
   line-height: var(--type-paragraph-line);
@@ -4757,69 +4757,69 @@
   color: var(--color-text-default);
   white-space: pre-line;
 }
-._cta_15sq4_79 {
+._cta_1ddez_79 {
   padding: var(--space-16) var(--space-16) var(--space-24);
 }
-._video_15sq4_83 {
+._video_1ddez_83 {
   object-fit: cover;
 }
-._desktopOnly_15sq4_87 {
+._desktopOnly_1ddez_87 {
   display: none;
 }
 @media (min-width: 1200px) {
-  ._hero_15sq4_1 {
+  ._hero_1ddez_1 {
     justify-content: center;
-    min-height: max(480px, calc(100svh - var(--vip-hero-top, 0px)));
+    min-height: max(480px, calc(100svh - var(--vip-hero-top, 0px)), var(--vip-hero-room, 0px));
   }
-  ._phoneOnly_15sq4_97 {
+  ._phoneOnly_1ddez_97 {
     display: none;
   }
-  ._desktopOnly_15sq4_87 {
+  ._desktopOnly_1ddez_87 {
     display: block;
   }
-  ._image_15sq4_11::after {
+  ._image_1ddez_11::after {
     background:
       linear-gradient(
         to right,
         rgba(8, 14, 18, 0.9) 0,
         rgba(8, 14, 18, 0) 53.33%);
   }
-  ._image_15sq4_11 img,
-  ._video_15sq4_83 {
+  ._image_1ddez_11 img,
+  ._video_1ddez_83 {
     object-position: center;
   }
-  ._foot_15sq4_34 {
+  ._foot_1ddez_34 {
     gap: var(--space-16);
     width: 100%;
     max-width: 624px;
     padding-left: 64px;
   }
-  ._text_15sq4_40 {
+  ._text_1ddez_40 {
     align-items: flex-start;
     padding: 0;
   }
-  ._text_15sq4_40 ._logo_15sq4_48 {
+  ._text_1ddez_40 ._logo_1ddez_48 {
     display: none;
   }
-  ._copy_15sq4_53 {
+  ._copy_1ddez_53 {
     gap: var(--space-16);
     text-align: left;
   }
-  ._headline_15sq4_62 {
+  ._headline_1ddez_62 {
     font-size: 64px;
     line-height: 0.9375;
     letter-spacing: -0.64px;
   }
-  ._body_15sq4_70 {
+  ._body_1ddez_70 {
     max-width: 520px;
     font-size: 20px;
     line-height: 1.4;
     white-space: normal;
   }
-  ._cta_15sq4_79 {
+  ._cta_1ddez_79 {
     padding: var(--space-8) 0 0;
   }
-  ._cta_15sq4_79 > * {
+  ._cta_1ddez_79 > * {
     width: auto;
     min-width: 173px;
   }

package/dist/styles.css

@@ -4689,20 +4689,20 @@
     display: block;
   }
 }
-._hero_15sq4_1 {
+._hero_1ddez_1 {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  min-height: max(480px, calc(100svh - var(--vip-hero-top, 0px)));
+  min-height: max(480px, calc(100svh - var(--vip-hero-top, 0px)), var(--vip-hero-room, 0px));
   overflow: hidden;
   background: var(--color-surface-default);
 }
-._image_15sq4_11 {
+._image_1ddez_11 {
   position: absolute;
   inset: 0;
 }
-._image_15sq4_11::after {
+._image_1ddez_11::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -4714,27 +4714,27 @@
       rgba(8, 14, 18, 0) 382px);
   pointer-events: none;
 }
-._image_15sq4_11 img {
+._image_1ddez_11 img {
   object-fit: cover;
   object-position: top center;
 }
-._foot_15sq4_34 {
+._foot_1ddez_34 {
   position: relative;
   display: flex;
   flex-direction: column;
 }
-._text_15sq4_40 {
+._text_1ddez_40 {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--space-16);
   padding: 0 var(--space-16) var(--space-8);
 }
-._text_15sq4_40 ._logo_15sq4_48 {
+._text_1ddez_40 ._logo_1ddez_48 {
   width: 48px;
   height: 48px;
 }
-._copy_15sq4_53 {
+._copy_1ddez_53 {
   display: flex;
   flex-direction: column;
   gap: 6px;
@@ -4742,14 +4742,14 @@
   text-align: center;
   overflow-wrap: break-word;
 }
-._headline_15sq4_62 {
+._headline_1ddez_62 {
   margin: 0;
   font-size: 36px;
   line-height: 1.1;
   font-weight: var(--font-weight-bold);
   color: var(--color-text-default);
 }
-._body_15sq4_70 {
+._body_1ddez_70 {
   margin: 0;
   font-size: var(--type-paragraph-size);
   line-height: var(--type-paragraph-line);
@@ -4757,69 +4757,69 @@
   color: var(--color-text-default);
   white-space: pre-line;
 }
-._cta_15sq4_79 {
+._cta_1ddez_79 {
   padding: var(--space-16) var(--space-16) var(--space-24);
 }
-._video_15sq4_83 {
+._video_1ddez_83 {
   object-fit: cover;
 }
-._desktopOnly_15sq4_87 {
+._desktopOnly_1ddez_87 {
   display: none;
 }
 @media (min-width: 1200px) {
-  ._hero_15sq4_1 {
+  ._hero_1ddez_1 {
     justify-content: center;
-    min-height: max(480px, calc(100svh - var(--vip-hero-top, 0px)));
+    min-height: max(480px, calc(100svh - var(--vip-hero-top, 0px)), var(--vip-hero-room, 0px));
   }
-  ._phoneOnly_15sq4_97 {
+  ._phoneOnly_1ddez_97 {
     display: none;
   }
-  ._desktopOnly_15sq4_87 {
+  ._desktopOnly_1ddez_87 {
     display: block;
   }
-  ._image_15sq4_11::after {
+  ._image_1ddez_11::after {
     background:
       linear-gradient(
         to right,
         rgba(8, 14, 18, 0.9) 0,
         rgba(8, 14, 18, 0) 53.33%);
   }
-  ._image_15sq4_11 img,
-  ._video_15sq4_83 {
+  ._image_1ddez_11 img,
+  ._video_1ddez_83 {
     object-position: center;
   }
-  ._foot_15sq4_34 {
+  ._foot_1ddez_34 {
     gap: var(--space-16);
     width: 100%;
     max-width: 624px;
     padding-left: 64px;
   }
-  ._text_15sq4_40 {
+  ._text_1ddez_40 {
     align-items: flex-start;
     padding: 0;
   }
-  ._text_15sq4_40 ._logo_15sq4_48 {
+  ._text_1ddez_40 ._logo_1ddez_48 {
     display: none;
   }
-  ._copy_15sq4_53 {
+  ._copy_1ddez_53 {
     gap: var(--space-16);
     text-align: left;
   }
-  ._headline_15sq4_62 {
+  ._headline_1ddez_62 {
     font-size: 64px;
     line-height: 0.9375;
     letter-spacing: -0.64px;
   }
-  ._body_15sq4_70 {
+  ._body_1ddez_70 {
     max-width: 520px;
     font-size: 20px;
     line-height: 1.4;
     white-space: normal;
   }
-  ._cta_15sq4_79 {
+  ._cta_1ddez_79 {
     padding: var(--space-8) 0 0;
   }
-  ._cta_15sq4_79 > * {
+  ._cta_1ddez_79 > * {
     width: auto;
     min-width: 173px;
   }

package/package.json

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