@nok-integration/storefront-react 0.29.8 → 0.29.11

package/dist/standalone/storefront.mjs

@@ -5319,14 +5319,65 @@ const TOP = {
   doc: 0,
   pane: 0
 };
-const places = /* @__PURE__ */ new Map();
+const STORE = "dazn-shop.places";
+const KEPT = 50;
+function stored() {
+  const out = /* @__PURE__ */ new Map();
+  try {
+    const raw = typeof sessionStorage === "undefined" ? null : sessionStorage.getItem(STORE);
+    const rows = raw ? JSON.parse(raw) : [];
+    if (!Array.isArray(rows)) return out;
+    for (const row2 of rows) {
+      if (!Array.isArray(row2) || typeof row2[0] !== "string") continue;
+      const at = row2[1];
+      if (at && Number.isFinite(at.doc) && Number.isFinite(at.pane)) {
+        out.set(row2[0], {
+          doc: at.doc,
+          pane: at.pane
+        });
+      }
+    }
+  } catch {
+    return out;
+  }
+  return out;
+}
+function persist() {
+  try {
+    if (typeof sessionStorage === "undefined") return;
+    if (places.size === 0) sessionStorage.removeItem(STORE);
+    else sessionStorage.setItem(STORE, JSON.stringify([...places]));
+  } catch {
+    return;
+  }
+}
+const places = stored();
 let returnedTo = null;
+let pending$3 = null;
+function flush() {
+  if (pending$3 !== null) clearTimeout(pending$3);
+  pending$3 = null;
+  persist();
+}
+function persistSoon() {
+  if (pending$3 === null) pending$3 = setTimeout(flush, 150);
+}
 function here() {
   if (typeof window === "undefined") return "";
   const { pathname, search, hash } = window.location;
   return pathname + search + hash;
 }
+function reachedThroughHistory() {
+  try {
+    const [entry] = performance.getEntriesByType("navigation");
+    return entry?.type === "back_forward";
+  } catch {
+    return false;
+  }
+}
 if (typeof window !== "undefined") {
+  if (reachedThroughHistory()) returnedTo = here();
+  window.addEventListener("pagehide", flush);
   window.addEventListener("popstate", () => {
     returnedTo = here();
   }, {
@@ -5344,7 +5395,10 @@ function settleReturn() {
   returnedTo = null;
 }
 function remember(key, offset) {
+  places.delete(key);
   places.set(key, offset);
+  while (places.size > KEPT) places.delete(places.keys().next().value);
+  persistSoon();
 }
 let latestScreen = 0;
 let currentScreen = 0;
@@ -5668,7 +5722,9 @@ function ScreenTitleProvider({ children }) {
   return jsx(ScreenTitleContext.Provider, {
     value: value2,
     children: jsx(ScreenNavProvider, {
-      children
+      children: jsx(ScreenBackdropProvider, {
+        children
+      })
     })
   });
 }
@@ -5733,15 +5789,52 @@ 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 }) {
   const { apiBaseUrl, getToken, market, navigate: hostNavigate, prefetch: hostPrefetch, sessionTransport = "bearer", theme = "auto", notifications = "internal", features, onEvent, locale, assetBaseUrl } = config;
-  const listeners = useRef(/* @__PURE__ */ new Set());
+  const listeners2 = useRef(/* @__PURE__ */ new Set());
   const subscribe = useCallback((listener) => {
-    listeners.current.add(listener);
+    listeners2.current.add(listener);
     return () => {
-      listeners.current.delete(listener);
+      listeners2.current.delete(listener);
     };
   }, []);
   const onEventRef = useRef(onEvent);
@@ -5761,7 +5854,7 @@ function DaznShopProvider({ children, ...config }) {
   productsRef.current ??= new ProductCache();
   const products2 = productsRef.current;
   const emit = useCallback((event) => {
-    for (const listener of listeners.current) {
+    for (const listener of listeners2.current) {
       try {
         listener(event);
       } catch {
@@ -6782,6 +6875,11 @@ const TREATMENTS = {
     title: "That is not possible right now",
     body: "This has already moved on. Refresh to see where it is.",
     retriable: false
+  },
+  vip_hero_missing: {
+    title: "Not available yet",
+    body: "This is still being set up.",
+    retriable: false
   }
 };
 const FALLBACK = {
@@ -14654,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,
@@ -14685,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;
@@ -14762,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("/");
@@ -15740,236 +15840,57 @@ function useCartCount() {
   }, [subscribe]);
   return count2;
 }
-const header$1 = "_header_r9jjq_14";
-const floating = "_floating_r9jjq_39";
-const scrolled = "_scrolled_r9jjq_47";
-const title$1 = "_title_r9jjq_121";
-const leading = "_leading_r9jjq_134";
-const right = "_right_r9jjq_140";
-const spacer = "_spacer_r9jjq_153";
-const iconBtn$1 = "_iconBtn_r9jjq_158";
-const menuBtn = "_menuBtn_r9jjq_185";
-const badge$1 = "_badge_r9jjq_194";
-const closeSlot = "_closeSlot_r9jjq_221";
-const centred = "_centred_r9jjq_236";
-const styles$2 = {
-  header: header$1,
-  floating,
-  scrolled,
-  title: title$1,
-  leading,
-  right,
-  spacer,
-  iconBtn: iconBtn$1,
-  menuBtn,
-  badge: badge$1,
-  closeSlot,
-  centred
-};
-function CartIcon() {
-  const wheel = "M0.211146 1.10557C0.948194 -0.368524 3.05181 -0.368524 3.78885 1.10557C4.07038 1.66863 4.07038 2.33137 3.78885 2.89443C3.05181 4.36852 0.948194 4.36852 0.211146 2.89443C-0.0703819 2.33137 -0.0703819 1.66863 0.211146 1.10557Z";
-  return jsxs("svg", {
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    "aria-hidden": "true",
-    children: [jsx("g", {
-      transform: "translate(2 3)",
-      children: jsx("path", {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M3 2H0V0H4C4.55228 0 5 0.447715 5 1V1.84615H19C19.3727 1.84615 19.7146 2.05347 19.8868 2.38402C20.0591 2.71458 20.0332 3.11351 19.8196 3.41902L14.8196 10.5729C14.6326 10.8405 14.3266 11 14 11H5V12H17V14H4C3.44772 14 3 13.5523 3 13V2ZM5 3.84615V9H13.4789L17.081 3.84615H5Z",
-        fill: "currentColor"
-      })
-    }), jsx("g", {
-      transform: "translate(6 18)",
-      children: jsx("path", {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: wheel,
-        fill: "currentColor"
-      })
-    }), jsx("g", {
-      transform: "translate(14 18)",
-      children: jsx("path", {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: wheel,
-        fill: "currentColor"
-      })
-    })]
-  });
+let mounted = 0;
+const listeners = /* @__PURE__ */ new Set();
+function notify() {
+  for (const listener of listeners) listener();
 }
-function MenuIcon() {
-  return jsx("svg", {
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    "aria-hidden": "true",
-    children: jsx("g", {
-      transform: "translate(12 12.25) rotate(90) translate(-8 -2)",
-      children: jsx("path", {
-        d: "M2 4C1.45 4 0.979167 3.80417 0.5875 3.4125C0.195833 3.02083 0 2.55 0 2C0 1.45 0.195833 0.979167 0.5875 0.5875C0.979167 0.195833 1.45 0 2 0C2.55 0 3.02083 0.195833 3.4125 0.5875C3.80417 0.979167 4 1.45 4 2C4 2.55 3.80417 3.02083 3.4125 3.4125C3.02083 3.80417 2.55 4 2 4ZM8 4C7.45 4 6.97917 3.80417 6.5875 3.4125C6.19583 3.02083 6 2.55 6 2C6 1.45 6.19583 0.979167 6.5875 0.5875C6.97917 0.195833 7.45 0 8 0C8.55 0 9.02083 0.195833 9.4125 0.5875C9.80417 0.979167 10 1.45 10 2C10 2.55 9.80417 3.02083 9.4125 3.4125C9.02083 3.80417 8.55 4 8 4ZM14 4C13.45 4 12.9792 3.80417 12.5875 3.4125C12.1958 3.02083 12 2.55 12 2C12 1.45 12.1958 0.979167 12.5875 0.5875C12.9792 0.195833 13.45 0 14 0C14.55 0 15.0208 0.195833 15.4125 0.5875C15.8042 0.979167 16 1.45 16 2C16 2.55 15.8042 3.02083 15.4125 3.4125C15.0208 3.80417 14.55 4 14 4Z",
-        fill: "currentColor"
-      })
-    })
-  });
-}
-function ChevronLeft() {
-  return jsx("svg", {
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    "aria-hidden": "true",
-    children: jsx("g", {
-      transform: "translate(6.48 2.988)",
-      children: jsx("path", {
-        d: "M0 9.00923C1.26763e-08 8.71923 0.12 8.44923 0.34 8.25923L9.38 0.249231C9.79 -0.110769 10.42 -0.0807692 10.79 0.339231C11.15 0.749231 11.12 1.37923 10.7 1.74923L2.5 9.01923L10.7 16.2792C11.12 16.6492 11.15 17.2792 10.79 17.6892C10.42 18.0992 9.79 18.1392 9.38 17.7692L0.34 9.75923C0.13 9.56923 -1.26763e-08 9.29923 0 9.00923Z",
-        fill: "currentColor"
-      })
-    })
-  });
-}
-function useScrolledUnder(enabled) {
-  const [scrolled2, setScrolled] = useState(false);
+function useClaimShopNav() {
   useEffect(() => {
-    if (!enabled) return;
-    const read = (event) => {
-      const target = event?.target;
-      const top2 = target && target !== document && target instanceof HTMLElement ? target.scrollTop : window.scrollY || document.documentElement.scrollTop;
-      setScrolled(top2 > 0);
+    mounted += 1;
+    notify();
+    return () => {
+      mounted -= 1;
+      notify();
     };
-    read();
-    document.addEventListener("scroll", read, {
-      capture: true,
-      passive: true
-    });
-    return () => document.removeEventListener("scroll", read, {
-      capture: true
-    });
-  }, [enabled]);
-  return enabled ? scrolled2 : false;
-}
-function CloseMedium() {
-  return jsx("svg", {
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    "aria-hidden": "true",
-    children: jsx("g", {
-      transform: "translate(5.03 5.03)",
-      children: jsx("path", {
-        d: "M12.233 0.292847C12.6235 -0.0975851 13.2566 -0.0976464 13.6471 0.292847C14.0375 0.683347 14.0375 1.3164 13.6471 1.70691L8.38437 6.9696L13.6471 12.2323C14.0376 12.6228 14.0376 13.2558 13.6471 13.6464C13.2565 14.0369 12.6235 14.0369 12.233 13.6464L6.96933 8.38367L1.70761 13.6464C1.31711 14.0369 0.684078 14.0368 0.293548 13.6464C-0.0969764 13.2558 -0.0969764 12.6228 0.293548 12.2323L5.55527 6.9696L0.292571 1.70691C-0.0976189 1.31653 -0.0974286 0.683349 0.292571 0.292847C0.683065 -0.0976464 1.31708 -0.0975851 1.70761 0.292847L6.97031 5.55554L12.233 0.292847Z",
-        fill: "currentColor"
-      })
-    })
-  });
-}
-function ShopHeader(props) {
-  return props.context === "checkout" ? jsx(CheckoutBar, {
-    ...props
-  }) : jsx(ShopBar, {
-    ...props
-  });
-}
-function CheckoutBar({ title: title2, onClose, closeLabel, className }) {
-  const t = useT();
-  const classes = [styles$2.header, className ?? ""].filter(Boolean).join(" ");
-  return jsxs("header", {
-    className: classes,
-    children: [jsx("span", {
-      className: styles$2.closeSlot,
-      "aria-hidden": "true"
-    }), title2 ? jsx("span", {
-      className: [styles$2.title, styles$2.centred].join(" "),
-      children: title2
-    }) : null, onClose ? jsx("button", {
-      type: "button",
-      className: [styles$2.iconBtn, styles$2.closeSlot].join(" "),
-      "aria-label": closeLabel ?? t("Close"),
-      onClick: onClose,
-      children: jsx(CloseMedium, {})
-    }) : jsx("span", {
-      className: styles$2.closeSlot,
-      "aria-hidden": "true"
-    })]
-  });
+  }, []);
 }
-function ShopBar({ onBack, onMenu, title: title2, showCart, floating: floating2 = false, scrolled: scrolled2, backLabel, menuLabel, className }) {
-  const t = useT();
-  const cartCount = useCartCount();
-  const screenTitle = useScreenTitle();
-  const shownTitle = title2 ?? screenTitle;
-  const bare = useScreenTrailing() === "none";
-  const cartOn = showCart ?? !bare;
-  const menu = bare ? void 0 : onMenu;
-  const hasTrailing = cartOn || Boolean(menu);
-  const atTop = useScrolledUnder(floating2 && scrolled2 === void 0);
-  const isScrolled = scrolled2 ?? atTop;
-  const cartLabel = cartCount === null ? t("Cart") : cartCount === 0 ? t("Cart, empty") : t("Cart, {0} item{1}", cartCount, cartCount === 1 ? "" : "s");
-  const classes = [styles$2.header, floating2 ? styles$2.floating : "", floating2 && isScrolled ? styles$2.scrolled : "", className ?? ""].filter(Boolean).join(" ");
-  return jsxs("header", {
-    className: classes,
-    children: [onBack ? jsx("button", {
-      type: "button",
-      className: styles$2.iconBtn,
-      "aria-label": backLabel ?? t("Back"),
-      onClick: onBack,
-      children: jsx(ChevronLeft, {})
-    }) : jsx("span", {
-      className: styles$2.spacer,
-      "aria-hidden": "true"
-    }), shownTitle ? jsx("span", {
-      className: hasTrailing ? styles$2.title : `${styles$2.title} ${styles$2.leading}`,
-      children: shownTitle
-    }) : null, jsxs("div", {
-      className: styles$2.right,
-      children: [cartOn ? jsxs(CartTrigger, {
-        className: styles$2.iconBtn,
-        "aria-label": cartLabel,
-        children: [jsx(CartIcon, {}), cartCount !== null && cartCount > 0 ? jsx("span", {
-          className: styles$2.badge,
-          "aria-hidden": "true",
-          children: cartCount > 99 ? "99+" : cartCount
-        }) : null]
-      }) : null, menu ? jsx("button", {
-        type: "button",
-        className: `${styles$2.iconBtn} ${styles$2.menuBtn}`,
-        "aria-label": menuLabel ?? t("More options"),
-        onClick: menu,
-        children: jsx(MenuIcon, {})
-      }) : null]
-    })]
-  });
+function useShopNavClaimed() {
+  const [claimed, setClaimed] = useState(mounted > 0);
+  useEffect(() => {
+    const listener = () => setClaimed(mounted > 0);
+    listeners.add(listener);
+    listener();
+    return () => {
+      listeners.delete(listener);
+    };
+  }, []);
+  return claimed;
 }
 const overlay = "_overlay_y4mxb_5";
 const scrim = "_scrim_y4mxb_21";
 const sheet = "_sheet_y4mxb_31";
-const header = "_header_y4mxb_80";
+const header$1 = "_header_y4mxb_80";
 const close = "_close_y4mxb_86";
 const list$1 = "_list_y4mxb_105";
 const row = "_row_y4mxb_120";
 const icon = "_icon_y4mxb_149";
 const text = "_text_y4mxb_157";
-const title = "_title_y4mxb_165";
+const title$1 = "_title_y4mxb_165";
 const subtitle = "_subtitle_y4mxb_172";
 const chevron = "_chevron_y4mxb_178";
 const dropdown = "_dropdown_y4mxb_187";
-const styles$1 = {
+const styles$2 = {
   overlay,
   scrim,
   sheet,
-  header,
+  header: header$1,
   close,
   list: list$1,
   row,
   icon,
   text,
-  title,
+  title: title$1,
   subtitle,
   chevron,
   dropdown
@@ -16144,51 +16065,51 @@ function ShopMenuSheet({ open, onClose, onManageOrders, onHelp, closeLabel, labe
     } : {}
   }];
   return jsxs("div", {
-    className: [styles$1.overlay, placement === "dropdown" ? styles$1.dropdown : ""].filter(Boolean).join(" "),
+    className: [styles$2.overlay, placement === "dropdown" ? styles$2.dropdown : ""].filter(Boolean).join(" "),
     children: [jsx("div", {
-      className: styles$1.scrim,
+      className: styles$2.scrim,
       onClick: onClose,
       "aria-hidden": "true"
     }), jsxs(ShopSurface, {
       tone: "light",
-      className: styles$1.sheet,
+      className: styles$2.sheet,
       role: "dialog",
       "aria-modal": "true",
       "aria-label": label2 ?? t("Shop menu"),
       ref: sheetRef,
       children: [jsx("div", {
-        className: styles$1.header,
+        className: styles$2.header,
         children: jsx("button", {
           type: "button",
-          className: styles$1.close,
+          className: styles$2.close,
           onClick: onClose,
           "aria-label": closeLabel ?? t("Close"),
           children: jsx(CloseIcon, {})
         })
       }), jsx("ul", {
-        className: styles$1.list,
+        className: styles$2.list,
         children: rows.map((row2) => jsx("li", {
           "data-row": row2.key,
           children: jsxs("button", {
             type: "button",
-            className: styles$1.row,
+            className: styles$2.row,
             onClick: row2.onSelect,
             disabled: !row2.onSelect,
             "aria-disabled": row2.onSelect ? void 0 : true,
             children: [row2.icon && jsx("span", {
-              className: styles$1.icon,
+              className: styles$2.icon,
               children: row2.icon
             }), jsxs("span", {
-              className: styles$1.text,
+              className: styles$2.text,
               children: [jsx("span", {
-                className: styles$1.title,
+                className: styles$2.title,
                 children: row2.title
               }), row2.subtitle && jsx("span", {
-                className: styles$1.subtitle,
+                className: styles$2.subtitle,
                 children: row2.subtitle
               })]
             }), jsx("span", {
-              className: styles$1.chevron,
+              className: styles$2.chevron,
               children: jsx(ChevronRight, {})
             })]
           })
@@ -16197,6 +16118,57 @@ function ShopMenuSheet({ open, onClose, onManageOrders, onHelp, closeLabel, labe
     })]
   });
 }
+function CartIcon() {
+  const wheel = "M0.211146 1.10557C0.948194 -0.368524 3.05181 -0.368524 3.78885 1.10557C4.07038 1.66863 4.07038 2.33137 3.78885 2.89443C3.05181 4.36852 0.948194 4.36852 0.211146 2.89443C-0.0703819 2.33137 -0.0703819 1.66863 0.211146 1.10557Z";
+  return jsxs("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    "aria-hidden": "true",
+    children: [jsx("g", {
+      transform: "translate(2 3)",
+      children: jsx("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M3 2H0V0H4C4.55228 0 5 0.447715 5 1V1.84615H19C19.3727 1.84615 19.7146 2.05347 19.8868 2.38402C20.0591 2.71458 20.0332 3.11351 19.8196 3.41902L14.8196 10.5729C14.6326 10.8405 14.3266 11 14 11H5V12H17V14H4C3.44772 14 3 13.5523 3 13V2ZM5 3.84615V9H13.4789L17.081 3.84615H5Z",
+        fill: "currentColor"
+      })
+    }), jsx("g", {
+      transform: "translate(6 18)",
+      children: jsx("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: wheel,
+        fill: "currentColor"
+      })
+    }), jsx("g", {
+      transform: "translate(14 18)",
+      children: jsx("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: wheel,
+        fill: "currentColor"
+      })
+    })]
+  });
+}
+function MenuIcon() {
+  return jsx("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    "aria-hidden": "true",
+    children: jsx("g", {
+      transform: "translate(12 12.25) rotate(90) translate(-8 -2)",
+      children: jsx("path", {
+        d: "M2 4C1.45 4 0.979167 3.80417 0.5875 3.4125C0.195833 3.02083 0 2.55 0 2C0 1.45 0.195833 0.979167 0.5875 0.5875C0.979167 0.195833 1.45 0 2 0C2.55 0 3.02083 0.195833 3.4125 0.5875C3.80417 0.979167 4 1.45 4 2C4 2.55 3.80417 3.02083 3.4125 3.4125C3.02083 3.80417 2.55 4 2 4ZM8 4C7.45 4 6.97917 3.80417 6.5875 3.4125C6.19583 3.02083 6 2.55 6 2C6 1.45 6.19583 0.979167 6.5875 0.5875C6.97917 0.195833 7.45 0 8 0C8.55 0 9.02083 0.195833 9.4125 0.5875C9.80417 0.979167 10 1.45 10 2C10 2.55 9.80417 3.02083 9.4125 3.4125C9.02083 3.80417 8.55 4 8 4ZM14 4C13.45 4 12.9792 3.80417 12.5875 3.4125C12.1958 3.02083 12 2.55 12 2C12 1.45 12.1958 0.979167 12.5875 0.5875C12.9792 0.195833 13.45 0 14 0C14.55 0 15.0208 0.195833 15.4125 0.5875C15.8042 0.979167 16 1.45 16 2C16 2.55 15.8042 3.02083 15.4125 3.4125C15.0208 3.80417 14.55 4 14 4Z",
+        fill: "currentColor"
+      })
+    })
+  });
+}
 const bar = "_bar_10bv8_1";
 const media = "_media_10bv8_22";
 const light = "_light_10bv8_30";
@@ -16208,9 +16180,9 @@ const trail = "_trail_10bv8_64";
 const current = "_current_10bv8_65";
 const separator = "_separator_10bv8_85";
 const actions = "_actions_10bv8_90";
-const iconBtn = "_iconBtn_10bv8_97";
-const badge = "_badge_10bv8_126";
-const styles = {
+const iconBtn$1 = "_iconBtn_10bv8_97";
+const badge$1 = "_badge_10bv8_126";
+const styles$1 = {
   bar,
   media,
   light,
@@ -16222,10 +16194,16 @@ const styles = {
   current,
   separator,
   actions,
-  iconBtn,
-  badge
+  iconBtn: iconBtn$1,
+  badge: badge$1
 };
-function ShopNav({ onManageOrders, onHelp, menuLabel, className }) {
+function ShopNav(props) {
+  useClaimShopNav();
+  return jsx(ShopNavBar, {
+    ...props
+  });
+}
+function ShopNavBar({ onManageOrders, onHelp, menuLabel, className, onMenu, showCart }) {
   const t = useT();
   const nav = useScreenNav();
   const bare = useScreenTrailing() === "none";
@@ -16238,17 +16216,17 @@ function ShopNav({ onManageOrders, onHelp, menuLabel, className }) {
   const manageOrders = onManageOrders ?? (navigate ? () => navigate("/orders") : void 0);
   return jsxs(Fragment, {
     children: [jsxs("div", {
-      className: [styles.bar, nav.tone === "media" ? styles.media : styles.light, className ?? ""].filter(Boolean).join(" "),
+      className: [styles$1.bar, nav.tone === "media" ? styles$1.media : styles$1.light, className ?? ""].filter(Boolean).join(" "),
       "data-shop-nav": nav.tone,
       children: [jsx("nav", {
         "aria-label": t("Breadcrumb"),
-        className: styles.crumbs,
+        className: styles$1.crumbs,
         children: jsx("ol", {
-          className: styles.list,
+          className: styles$1.list,
           children: nav.crumbs.map((crumb, i) => {
-            const role = i === last ? styles.current : i === 0 ? styles.root : styles.trail;
+            const role = i === last ? styles$1.current : i === 0 ? styles$1.root : styles$1.trail;
             return jsxs("li", {
-              className: styles.item,
+              className: styles$1.item,
               children: [i === last ? jsx("span", {
                 className: role,
                 "aria-current": "page",
@@ -16261,7 +16239,7 @@ function ShopNav({ onManageOrders, onHelp, menuLabel, className }) {
                 className: role,
                 children: crumb.label
               }), i < last && jsx("span", {
-                className: styles.separator,
+                className: styles$1.separator,
                 "aria-hidden": "true",
                 children: "›"
               })]
@@ -16269,22 +16247,22 @@ function ShopNav({ onManageOrders, onHelp, menuLabel, className }) {
           })
         })
       }), !bare && jsxs("div", {
-        className: styles.actions,
-        children: [jsxs(CartTrigger, {
-          className: styles.iconBtn,
+        className: styles$1.actions,
+        children: [showCart !== false && jsxs(CartTrigger, {
+          className: styles$1.iconBtn,
           "aria-label": cartLabel,
           children: [jsx(CartIcon, {}), cartCount !== null && cartCount > 0 ? jsx("span", {
-            className: styles.badge,
+            className: styles$1.badge,
             "aria-hidden": "true",
             children: cartCount > 99 ? "99+" : cartCount
           }) : null]
         }), jsx("button", {
           type: "button",
-          className: styles.iconBtn,
+          className: styles$1.iconBtn,
           "aria-label": menuLabel ?? t("More options"),
-          "aria-expanded": menuOpen,
+          "aria-expanded": onMenu ? void 0 : menuOpen,
           "aria-haspopup": "dialog",
-          onClick: () => setMenuOpen((open) => !open),
+          onClick: onMenu ?? (() => setMenuOpen((open) => !open)),
           children: jsx(MenuIcon, {})
         })]
       })]
@@ -16307,6 +16285,180 @@ function ShopNav({ onManageOrders, onHelp, menuLabel, className }) {
     })]
   });
 }
+const header = "_header_iwoi3_14";
+const floating = "_floating_iwoi3_39";
+const scrolled = "_scrolled_iwoi3_47";
+const title = "_title_iwoi3_121";
+const leading = "_leading_iwoi3_134";
+const right = "_right_iwoi3_140";
+const spacer = "_spacer_iwoi3_153";
+const iconBtn = "_iconBtn_iwoi3_158";
+const menuBtn = "_menuBtn_iwoi3_185";
+const badge = "_badge_iwoi3_194";
+const closeSlot = "_closeSlot_iwoi3_221";
+const centred = "_centred_iwoi3_236";
+const narrowOnly = "_narrowOnly_iwoi3_243";
+const styles = {
+  header,
+  floating,
+  scrolled,
+  title,
+  leading,
+  right,
+  spacer,
+  iconBtn,
+  menuBtn,
+  badge,
+  closeSlot,
+  centred,
+  narrowOnly
+};
+function ChevronLeft() {
+  return jsx("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    "aria-hidden": "true",
+    children: jsx("g", {
+      transform: "translate(6.48 2.988)",
+      children: jsx("path", {
+        d: "M0 9.00923C1.26763e-08 8.71923 0.12 8.44923 0.34 8.25923L9.38 0.249231C9.79 -0.110769 10.42 -0.0807692 10.79 0.339231C11.15 0.749231 11.12 1.37923 10.7 1.74923L2.5 9.01923L10.7 16.2792C11.12 16.6492 11.15 17.2792 10.79 17.6892C10.42 18.0992 9.79 18.1392 9.38 17.7692L0.34 9.75923C0.13 9.56923 -1.26763e-08 9.29923 0 9.00923Z",
+        fill: "currentColor"
+      })
+    })
+  });
+}
+function useScrolledUnder(enabled) {
+  const [scrolled2, setScrolled] = useState(false);
+  useEffect(() => {
+    if (!enabled) return;
+    const read = (event) => {
+      const target = event?.target;
+      const top2 = target && target !== document && target instanceof HTMLElement ? target.scrollTop : window.scrollY || document.documentElement.scrollTop;
+      setScrolled(top2 > 0);
+    };
+    read();
+    document.addEventListener("scroll", read, {
+      capture: true,
+      passive: true
+    });
+    return () => document.removeEventListener("scroll", read, {
+      capture: true
+    });
+  }, [enabled]);
+  return enabled ? scrolled2 : false;
+}
+function CloseMedium() {
+  return jsx("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    "aria-hidden": "true",
+    children: jsx("g", {
+      transform: "translate(5.03 5.03)",
+      children: jsx("path", {
+        d: "M12.233 0.292847C12.6235 -0.0975851 13.2566 -0.0976464 13.6471 0.292847C14.0375 0.683347 14.0375 1.3164 13.6471 1.70691L8.38437 6.9696L13.6471 12.2323C14.0376 12.6228 14.0376 13.2558 13.6471 13.6464C13.2565 14.0369 12.6235 14.0369 12.233 13.6464L6.96933 8.38367L1.70761 13.6464C1.31711 14.0369 0.684078 14.0368 0.293548 13.6464C-0.0969764 13.2558 -0.0969764 12.6228 0.293548 12.2323L5.55527 6.9696L0.292571 1.70691C-0.0976189 1.31653 -0.0974286 0.683349 0.292571 0.292847C0.683065 -0.0976464 1.31708 -0.0975851 1.70761 0.292847L6.97031 5.55554L12.233 0.292847Z",
+        fill: "currentColor"
+      })
+    })
+  });
+}
+function ShopHeader(props) {
+  return props.context === "checkout" ? jsx(CheckoutBar, {
+    ...props
+  }) : jsx(ShopBar, {
+    ...props
+  });
+}
+function CheckoutBar({ title: title2, onClose, closeLabel, className }) {
+  const t = useT();
+  const classes = [styles.header, className ?? ""].filter(Boolean).join(" ");
+  return jsxs("header", {
+    className: classes,
+    children: [jsx("span", {
+      className: styles.closeSlot,
+      "aria-hidden": "true"
+    }), title2 ? jsx("span", {
+      className: [styles.title, styles.centred].join(" "),
+      children: title2
+    }) : null, onClose ? jsx("button", {
+      type: "button",
+      className: [styles.iconBtn, styles.closeSlot].join(" "),
+      "aria-label": closeLabel ?? t("Close"),
+      onClick: onClose,
+      children: jsx(CloseMedium, {})
+    }) : jsx("span", {
+      className: styles.closeSlot,
+      "aria-hidden": "true"
+    })]
+  });
+}
+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();
+  const shownTitle = title2 ?? screenTitle;
+  const bare = useScreenTrailing() === "none";
+  const cartOn = showCart ?? !bare;
+  const menu = bare ? void 0 : onMenu;
+  const hasTrailing = cartOn || Boolean(menu);
+  const nav = useScreenNav();
+  const navClaimed = useShopNavClaimed();
+  const wide2 = Boolean(nav && nav.crumbs.length > 0);
+  const atTop = useScrolledUnder(floating2 && scrolled2 === void 0);
+  const isScrolled = scrolled2 ?? atTop;
+  const cartLabel = cartCount === null ? t("Cart") : cartCount === 0 ? t("Cart, empty") : t("Cart, {0} item{1}", cartCount, cartCount === 1 ? "" : "s");
+  const classes = [styles.header, floating2 ? styles.floating : "", floating2 && isScrolled ? styles.scrolled : "", wide2 ? styles.narrowOnly : "", className ?? ""].filter(Boolean).join(" ");
+  return jsxs(Fragment, {
+    children: [wide2 && !navClaimed ? jsx(ShopNavBar, {
+      ...menu ? {
+        onMenu: menu
+      } : {},
+      ...showCart === false ? {
+        showCart: false
+      } : {},
+      ...menuLabel ? {
+        menuLabel
+      } : {}
+    }) : null, jsxs("header", {
+      className: classes,
+      children: [onBack ? jsx("button", {
+        type: "button",
+        className: styles.iconBtn,
+        "aria-label": backLabel ?? t("Back"),
+        onClick: onBack,
+        children: jsx(ChevronLeft, {})
+      }) : jsx("span", {
+        className: styles.spacer,
+        "aria-hidden": "true"
+      }), shownTitle ? jsx("span", {
+        className: hasTrailing ? styles.title : `${styles.title} ${styles.leading}`,
+        children: shownTitle
+      }) : null, jsxs("div", {
+        className: styles.right,
+        children: [cartOn ? jsxs(CartTrigger, {
+          className: styles.iconBtn,
+          "aria-label": cartLabel,
+          children: [jsx(CartIcon, {}), cartCount !== null && cartCount > 0 ? jsx("span", {
+            className: styles.badge,
+            "aria-hidden": "true",
+            children: cartCount > 99 ? "99+" : cartCount
+          }) : null]
+        }) : null, menu ? jsx("button", {
+          type: "button",
+          className: `${styles.iconBtn} ${styles.menuBtn}`,
+          "aria-label": menuLabel ?? t("More options"),
+          onClick: menu,
+          children: jsx(MenuIcon, {})
+        }) : null]
+      })]
+    })]
+  });
+}
 function major(money2) {
   return money2.amount / 100;
 }