@nok-integration/storefront-react 0.29.10 → 0.29.11

package/dist/index.mjs

@@ -5722,7 +5722,9 @@ function ScreenTitleProvider({ children }) {
   return jsx(ScreenTitleContext.Provider, {
     value: value2,
     children: jsx(ScreenNavProvider, {
-      children
+      children: jsx(ScreenBackdropProvider, {
+        children
+      })
     })
   });
 }
@@ -5787,6 +5789,43 @@ function useSetScreenNav(crumbs2, tone) {
     });
   }, [claim, key, tone, suppressed]);
 }
+const ScreenBackdropContext = createContext({
+  backdrop: "plain",
+  claim: () => () => {
+  }
+});
+function ScreenBackdropProvider({ children }) {
+  const [backdrop, setBackdrop] = useState("plain");
+  const held = useRef(0);
+  const claim = useCallback((next) => {
+    held.current += 1;
+    const mine = held.current;
+    setBackdrop(next);
+    return () => {
+      if (held.current !== mine) return;
+      setBackdrop("plain");
+    };
+  }, []);
+  const value2 = useMemo(() => ({
+    backdrop,
+    claim
+  }), [backdrop, claim]);
+  return jsx(ScreenBackdropContext.Provider, {
+    value: value2,
+    children
+  });
+}
+function useScreenBackdrop() {
+  return useContext(ScreenBackdropContext).backdrop;
+}
+function useSetScreenBackdrop(backdrop) {
+  const { claim } = useContext(ScreenBackdropContext);
+  const suppressed = useContext(SuppressedContext);
+  useEffect(() => {
+    if (suppressed) return;
+    return claim(backdrop);
+  }, [claim, backdrop, suppressed]);
+}
 const ShopContext = createContext(null);
 const CartCacheContext = createContext(null);
 function DaznShopProvider({ children, ...config }) {
@@ -14713,18 +14752,18 @@ function requireDist() {
   return dist;
 }
 var distExports = requireDist();
-const hero$1 = "_hero_dctyt_1";
-const image$1 = "_image_dctyt_11";
-const foot = "_foot_dctyt_34";
-const text$1 = "_text_dctyt_40";
-const logo$1 = "_logo_dctyt_48";
-const copy$1 = "_copy_dctyt_53";
-const headline = "_headline_dctyt_62";
-const body = "_body_dctyt_70";
-const cta$2 = "_cta_dctyt_79";
-const video = "_video_dctyt_83";
-const desktopOnly = "_desktopOnly_dctyt_87";
-const phoneOnly$1 = "_phoneOnly_dctyt_97";
+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";
 const hero$2 = {
   hero: hero$1,
   image: image$1,
@@ -14744,6 +14783,7 @@ function VipHero({ hero: hero2, onContinue }) {
   const assetUrl = useAssetUrl();
   const ref = useRef(null);
   useTopOffset(ref, "--vip-hero-top");
+  useSetScreenBackdrop("media");
   const desktopImage = hero2.desktop_image ?? null;
   const desktopVideo = hero2.desktop_video ?? null;
   const wide2 = desktopImage !== null || desktopVideo !== null;
@@ -14821,6 +14861,7 @@ function VipInviteNotice({ title: title2, body: body3 }) {
   const navigate = useNavigate();
   const ref = useRef(null);
   useTopOffset(ref, "--vip-hero-top");
+  useSetScreenBackdrop("media");
   const explore = () => {
     if (navigate) {
       navigate("/");
@@ -16354,7 +16395,9 @@ function CheckoutBar({ title: title2, onClose, closeLabel, className }) {
     })]
   });
 }
-function ShopBar({ onBack, onMenu, title: title2, showCart, floating: floating2 = false, scrolled: scrolled2, backLabel, menuLabel, className }) {
+function ShopBar({ onBack, onMenu, title: title2, showCart, floating: floatingProp, scrolled: scrolled2, backLabel, menuLabel, className }) {
+  const backdrop = useScreenBackdrop();
+  const floating2 = floatingProp ?? backdrop === "media";
   const t = useT();
   const cartCount = useCartCount();
   const screenTitle = useScreenTitle();

package/dist/standalone/storefront.mjs

@@ -5722,7 +5722,9 @@ function ScreenTitleProvider({ children }) {
   return jsx(ScreenTitleContext.Provider, {
     value: value2,
     children: jsx(ScreenNavProvider, {
-      children
+      children: jsx(ScreenBackdropProvider, {
+        children
+      })
     })
   });
 }
@@ -5787,6 +5789,43 @@ function useSetScreenNav(crumbs2, tone) {
     });
   }, [claim, key, tone, suppressed]);
 }
+const ScreenBackdropContext = createContext({
+  backdrop: "plain",
+  claim: () => () => {
+  }
+});
+function ScreenBackdropProvider({ children }) {
+  const [backdrop, setBackdrop] = useState("plain");
+  const held = useRef(0);
+  const claim = useCallback((next) => {
+    held.current += 1;
+    const mine = held.current;
+    setBackdrop(next);
+    return () => {
+      if (held.current !== mine) return;
+      setBackdrop("plain");
+    };
+  }, []);
+  const value2 = useMemo(() => ({
+    backdrop,
+    claim
+  }), [backdrop, claim]);
+  return jsx(ScreenBackdropContext.Provider, {
+    value: value2,
+    children
+  });
+}
+function useScreenBackdrop() {
+  return useContext(ScreenBackdropContext).backdrop;
+}
+function useSetScreenBackdrop(backdrop) {
+  const { claim } = useContext(ScreenBackdropContext);
+  const suppressed = useContext(SuppressedContext);
+  useEffect(() => {
+    if (suppressed) return;
+    return claim(backdrop);
+  }, [claim, backdrop, suppressed]);
+}
 const ShopContext = createContext(null);
 const CartCacheContext = createContext(null);
 function DaznShopProvider({ children, ...config }) {
@@ -14713,18 +14752,18 @@ function requireDist() {
   return dist;
 }
 var distExports = requireDist();
-const hero$1 = "_hero_dctyt_1";
-const image$1 = "_image_dctyt_11";
-const foot = "_foot_dctyt_34";
-const text$1 = "_text_dctyt_40";
-const logo$1 = "_logo_dctyt_48";
-const copy$1 = "_copy_dctyt_53";
-const headline = "_headline_dctyt_62";
-const body = "_body_dctyt_70";
-const cta$2 = "_cta_dctyt_79";
-const video = "_video_dctyt_83";
-const desktopOnly = "_desktopOnly_dctyt_87";
-const phoneOnly$1 = "_phoneOnly_dctyt_97";
+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";
 const hero$2 = {
   hero: hero$1,
   image: image$1,
@@ -14744,6 +14783,7 @@ function VipHero({ hero: hero2, onContinue }) {
   const assetUrl = useAssetUrl();
   const ref = useRef(null);
   useTopOffset(ref, "--vip-hero-top");
+  useSetScreenBackdrop("media");
   const desktopImage = hero2.desktop_image ?? null;
   const desktopVideo = hero2.desktop_video ?? null;
   const wide2 = desktopImage !== null || desktopVideo !== null;
@@ -14821,6 +14861,7 @@ function VipInviteNotice({ title: title2, body: body3 }) {
   const navigate = useNavigate();
   const ref = useRef(null);
   useTopOffset(ref, "--vip-hero-top");
+  useSetScreenBackdrop("media");
   const explore = () => {
     if (navigate) {
       navigate("/");
@@ -16354,7 +16395,9 @@ function CheckoutBar({ title: title2, onClose, closeLabel, className }) {
     })]
   });
 }
-function ShopBar({ onBack, onMenu, title: title2, showCart, floating: floating2 = false, scrolled: scrolled2, backLabel, menuLabel, className }) {
+function ShopBar({ onBack, onMenu, title: title2, showCart, floating: floatingProp, scrolled: scrolled2, backLabel, menuLabel, className }) {
+  const backdrop = useScreenBackdrop();
+  const floating2 = floatingProp ?? backdrop === "media";
   const t = useT();
   const cartCount = useCartCount();
   const screenTitle = useScreenTitle();

package/dist/standalone/styles.css

@@ -4684,20 +4684,20 @@
     display: block;
   }
 }
-._hero_dctyt_1 {
+._hero_15sq4_1 {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  min-height: clamp(480px, calc(100svh - var(--vip-hero-top, 0px)), 812px);
+  min-height: max(480px, calc(100svh - var(--vip-hero-top, 0px)));
   overflow: hidden;
   background: var(--color-surface-default);
 }
-._image_dctyt_11 {
+._image_15sq4_11 {
   position: absolute;
   inset: 0;
 }
-._image_dctyt_11::after {
+._image_15sq4_11::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -4709,27 +4709,27 @@
       rgba(8, 14, 18, 0) 382px);
   pointer-events: none;
 }
-._image_dctyt_11 img {
+._image_15sq4_11 img {
   object-fit: cover;
   object-position: top center;
 }
-._foot_dctyt_34 {
+._foot_15sq4_34 {
   position: relative;
   display: flex;
   flex-direction: column;
 }
-._text_dctyt_40 {
+._text_15sq4_40 {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--space-16);
   padding: 0 var(--space-16) var(--space-8);
 }
-._text_dctyt_40 ._logo_dctyt_48 {
+._text_15sq4_40 ._logo_15sq4_48 {
   width: 48px;
   height: 48px;
 }
-._copy_dctyt_53 {
+._copy_15sq4_53 {
   display: flex;
   flex-direction: column;
   gap: 6px;
@@ -4737,14 +4737,14 @@
   text-align: center;
   overflow-wrap: break-word;
 }
-._headline_dctyt_62 {
+._headline_15sq4_62 {
   margin: 0;
   font-size: 36px;
   line-height: 1.1;
   font-weight: var(--font-weight-bold);
   color: var(--color-text-default);
 }
-._body_dctyt_70 {
+._body_15sq4_70 {
   margin: 0;
   font-size: var(--type-paragraph-size);
   line-height: var(--type-paragraph-line);
@@ -4752,69 +4752,69 @@
   color: var(--color-text-default);
   white-space: pre-line;
 }
-._cta_dctyt_79 {
+._cta_15sq4_79 {
   padding: var(--space-16) var(--space-16) var(--space-24);
 }
-._video_dctyt_83 {
+._video_15sq4_83 {
   object-fit: cover;
 }
-._desktopOnly_dctyt_87 {
+._desktopOnly_15sq4_87 {
   display: none;
 }
 @media (min-width: 1200px) {
-  ._hero_dctyt_1 {
+  ._hero_15sq4_1 {
     justify-content: center;
     min-height: max(480px, calc(100svh - var(--vip-hero-top, 0px)));
   }
-  ._phoneOnly_dctyt_97 {
+  ._phoneOnly_15sq4_97 {
     display: none;
   }
-  ._desktopOnly_dctyt_87 {
+  ._desktopOnly_15sq4_87 {
     display: block;
   }
-  ._image_dctyt_11::after {
+  ._image_15sq4_11::after {
     background:
       linear-gradient(
         to right,
         rgba(8, 14, 18, 0.9) 0,
         rgba(8, 14, 18, 0) 53.33%);
   }
-  ._image_dctyt_11 img,
-  ._video_dctyt_83 {
+  ._image_15sq4_11 img,
+  ._video_15sq4_83 {
     object-position: center;
   }
-  ._foot_dctyt_34 {
+  ._foot_15sq4_34 {
     gap: var(--space-16);
     width: 100%;
     max-width: 624px;
     padding-left: 64px;
   }
-  ._text_dctyt_40 {
+  ._text_15sq4_40 {
     align-items: flex-start;
     padding: 0;
   }
-  ._text_dctyt_40 ._logo_dctyt_48 {
+  ._text_15sq4_40 ._logo_15sq4_48 {
     display: none;
   }
-  ._copy_dctyt_53 {
+  ._copy_15sq4_53 {
     gap: var(--space-16);
     text-align: left;
   }
-  ._headline_dctyt_62 {
+  ._headline_15sq4_62 {
     font-size: 64px;
     line-height: 0.9375;
     letter-spacing: -0.64px;
   }
-  ._body_dctyt_70 {
+  ._body_15sq4_70 {
     max-width: 520px;
     font-size: 20px;
     line-height: 1.4;
     white-space: normal;
   }
-  ._cta_dctyt_79 {
+  ._cta_15sq4_79 {
     padding: var(--space-8) 0 0;
   }
-  ._cta_dctyt_79 > * {
+  ._cta_15sq4_79 > * {
     width: auto;
     min-width: 173px;
   }

package/dist/styles.css

@@ -4684,20 +4684,20 @@
     display: block;
   }
 }
-._hero_dctyt_1 {
+._hero_15sq4_1 {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  min-height: clamp(480px, calc(100svh - var(--vip-hero-top, 0px)), 812px);
+  min-height: max(480px, calc(100svh - var(--vip-hero-top, 0px)));
   overflow: hidden;
   background: var(--color-surface-default);
 }
-._image_dctyt_11 {
+._image_15sq4_11 {
   position: absolute;
   inset: 0;
 }
-._image_dctyt_11::after {
+._image_15sq4_11::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -4709,27 +4709,27 @@
       rgba(8, 14, 18, 0) 382px);
   pointer-events: none;
 }
-._image_dctyt_11 img {
+._image_15sq4_11 img {
   object-fit: cover;
   object-position: top center;
 }
-._foot_dctyt_34 {
+._foot_15sq4_34 {
   position: relative;
   display: flex;
   flex-direction: column;
 }
-._text_dctyt_40 {
+._text_15sq4_40 {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--space-16);
   padding: 0 var(--space-16) var(--space-8);
 }
-._text_dctyt_40 ._logo_dctyt_48 {
+._text_15sq4_40 ._logo_15sq4_48 {
   width: 48px;
   height: 48px;
 }
-._copy_dctyt_53 {
+._copy_15sq4_53 {
   display: flex;
   flex-direction: column;
   gap: 6px;
@@ -4737,14 +4737,14 @@
   text-align: center;
   overflow-wrap: break-word;
 }
-._headline_dctyt_62 {
+._headline_15sq4_62 {
   margin: 0;
   font-size: 36px;
   line-height: 1.1;
   font-weight: var(--font-weight-bold);
   color: var(--color-text-default);
 }
-._body_dctyt_70 {
+._body_15sq4_70 {
   margin: 0;
   font-size: var(--type-paragraph-size);
   line-height: var(--type-paragraph-line);
@@ -4752,69 +4752,69 @@
   color: var(--color-text-default);
   white-space: pre-line;
 }
-._cta_dctyt_79 {
+._cta_15sq4_79 {
   padding: var(--space-16) var(--space-16) var(--space-24);
 }
-._video_dctyt_83 {
+._video_15sq4_83 {
   object-fit: cover;
 }
-._desktopOnly_dctyt_87 {
+._desktopOnly_15sq4_87 {
   display: none;
 }
 @media (min-width: 1200px) {
-  ._hero_dctyt_1 {
+  ._hero_15sq4_1 {
     justify-content: center;
     min-height: max(480px, calc(100svh - var(--vip-hero-top, 0px)));
   }
-  ._phoneOnly_dctyt_97 {
+  ._phoneOnly_15sq4_97 {
     display: none;
   }
-  ._desktopOnly_dctyt_87 {
+  ._desktopOnly_15sq4_87 {
     display: block;
   }
-  ._image_dctyt_11::after {
+  ._image_15sq4_11::after {
     background:
       linear-gradient(
         to right,
         rgba(8, 14, 18, 0.9) 0,
         rgba(8, 14, 18, 0) 53.33%);
   }
-  ._image_dctyt_11 img,
-  ._video_dctyt_83 {
+  ._image_15sq4_11 img,
+  ._video_15sq4_83 {
     object-position: center;
   }
-  ._foot_dctyt_34 {
+  ._foot_15sq4_34 {
     gap: var(--space-16);
     width: 100%;
     max-width: 624px;
     padding-left: 64px;
   }
-  ._text_dctyt_40 {
+  ._text_15sq4_40 {
     align-items: flex-start;
     padding: 0;
   }
-  ._text_dctyt_40 ._logo_dctyt_48 {
+  ._text_15sq4_40 ._logo_15sq4_48 {
     display: none;
   }
-  ._copy_dctyt_53 {
+  ._copy_15sq4_53 {
     gap: var(--space-16);
     text-align: left;
   }
-  ._headline_dctyt_62 {
+  ._headline_15sq4_62 {
     font-size: 64px;
     line-height: 0.9375;
     letter-spacing: -0.64px;
   }
-  ._body_dctyt_70 {
+  ._body_15sq4_70 {
     max-width: 520px;
     font-size: 20px;
     line-height: 1.4;
     white-space: normal;
   }
-  ._cta_dctyt_79 {
+  ._cta_15sq4_79 {
     padding: var(--space-8) 0 0;
   }
-  ._cta_dctyt_79 > * {
+  ._cta_15sq4_79 > * {
     width: auto;
     min-width: 173px;
   }

package/package.json

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