@nok-integration/storefront-react 0.19.22 → 0.19.24

package/dist/index.d.ts

@@ -4336,10 +4336,19 @@ export declare interface OrderTrackingViewProps {
      */
     onCancelled?: (order: OrderDetail) => void;
     /**
-     * The cancelled screen's "Reorder". Omit it and no button renders.
+     * Take over the cancelled screen's "Reorder".
      *
-     * The host's, because it means "put these items back in a cart and go somewhere", and
-     * only they know where that is. We raise `reorder_requested` regardless.
+     * Optional. Pass it and you own the trip. Omit it and the button puts the order's lines
+     * back in the cart itself and navigates to `/cart`, so the frame's one useful next step
+     * is there for a fan whether the host routes it or not.
+     *
+     * **It used to gate whether the button was drawn at all**, which is why a cancelled
+     * order on a host that passes no handler offered nothing at all — the control existed
+     * everywhere we looked and nowhere a fan was. Same rule as `onStartReturn` and the
+     * return flow's "Done": a host handler customises a control, it never decides whether
+     * the design has one.
+     *
+     * `reorder_requested` is raised either way.
      */
     onReorder?: () => void;
     /**
@@ -5586,7 +5595,13 @@ export declare interface ShopHeaderProps {
      * navigation already provides a back affordance should not get a second one.
      */
     onBack?: () => void;
-    /** Overflow menu. Omitted by default: a control that opens nothing is worse than none. */
+    /**
+     * Overflow menu. Omitted by default: a control that opens nothing is worse than none.
+     *
+     * A handler passed here is still not drawn on a screen that has declared it carries no
+     * trailing controls — the cart. A host with one bar over every route passes this once,
+     * and cannot know which screen it is over.
+     */
     onMenu?: () => void;
     /**
      * The screen name, drawn between the back control and the icons (Figma `mobile/header`
@@ -5596,7 +5611,13 @@ export declare interface ShopHeaderProps {
      * frames leave it empty, so a bar with nothing in the middle is a state the design has.
      */
     title?: string;
-    /** The cart icon and its live count. */
+    /**
+     * The cart icon and its live count. On unless the screen below says otherwise.
+     *
+     * Left unset, this follows the screen: the cart's own bar carries nothing on the right,
+     * and it declares that itself because a host mounting this bar as a sibling cannot see
+     * which view is under it. Set it explicitly and you get exactly what you asked for.
+     */
     showCart?: boolean;
     /**
      * Lay the bar over the content instead of above it, with no background of its own.

package/dist/index.mjs

@@ -5159,26 +5159,31 @@ function withAuthorization(init, token) {
 }
 const ScreenTitleContext = createContext({
   title: void 0,
+  trailing: "default",
   claim: () => () => {
   }
 });
 const SuppressedContext = createContext(false);
 function ScreenTitleProvider({ children }) {
   const [title2, setTitle] = useState(void 0);
+  const [trailing, setTrailing] = useState("default");
   const held = useRef(void 0);
-  const claim = useCallback((next) => {
+  const claim = useCallback((next, nextTrailing) => {
     held.current = next;
     setTitle(next);
+    setTrailing(nextTrailing);
     return () => {
       if (held.current !== next) return;
       held.current = void 0;
       setTitle(void 0);
+      setTrailing("default");
     };
   }, []);
   const value2 = useMemo(() => ({
     title: title2,
+    trailing,
     claim
-  }), [title2, claim]);
+  }), [title2, trailing, claim]);
   return jsx(ScreenTitleContext.Provider, {
     value: value2,
     children
@@ -5187,13 +5192,16 @@ function ScreenTitleProvider({ children }) {
 function useScreenTitle() {
   return useContext(ScreenTitleContext).title;
 }
-function useSetScreenTitle(title2) {
+function useScreenTrailing() {
+  return useContext(ScreenTitleContext).trailing;
+}
+function useSetScreenTitle(title2, trailing = "default") {
   const { claim } = useContext(ScreenTitleContext);
   const suppressed = useContext(SuppressedContext);
   useEffect(() => {
     if (suppressed || title2 === void 0) return;
-    return claim(title2);
-  }, [claim, title2, suppressed]);
+    return claim(title2, trailing);
+  }, [claim, title2, trailing, suppressed]);
 }
 function NoScreenTitle({ children }) {
   return jsx(SuppressedContext.Provider, {
@@ -5473,13 +5481,16 @@ const styles$O = {
   fill
 };
 const SETTLE_MS$1 = 150;
-function offsetFromViewportTop(el) {
-  let top2 = el.getBoundingClientRect().top;
+function scrolledOffOrigin(el) {
   for (let node = el.parentElement; node; node = node.parentElement) {
-    top2 += node.scrollTop;
+    if (node.scrollTop > 0) return true;
     if (getComputedStyle(node).position === "fixed") break;
   }
-  const offset = Math.max(0, Math.round(top2));
+  return false;
+}
+function offsetFromViewportTop(el) {
+  if (scrolledOffOrigin(el)) return null;
+  const offset = Math.max(0, Math.round(el.getBoundingClientRect().top));
   return offset >= window.innerHeight ? 0 : offset;
 }
 function useTopOffset(ref, property, enabled = true) {
@@ -5488,7 +5499,8 @@ function useTopOffset(ref, property, enabled = true) {
     if (!el || !enabled) return;
     let timer2;
     const measure = () => {
-      el.style.setProperty(property, `${offsetFromViewportTop(el)}px`);
+      const offset = offsetFromViewportTop(el);
+      if (offset !== null) el.style.setProperty(property, `${offset}px`);
     };
     const settle = () => {
       if (timer2) clearTimeout(timer2);
@@ -7564,7 +7576,10 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onC
   const [cancelOpen, setCancelOpen] = useState(false);
   const [cancelling, setCancelling] = useState(false);
   const [cancelError, setCancelError] = useState(null);
+  const [reordering, setReordering] = useState(false);
   const emit = useShopEvent();
+  const navigate = useNavigate();
+  const toast2 = useToast();
   const load = useCallback(async () => {
     setState("loading");
     try {
@@ -7625,6 +7640,37 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onC
       setCancelling(false);
     }
   }
+  async function reorder(current2) {
+    emit({
+      type: "reorder_requested",
+      orderRef: current2.order_ref
+    });
+    if (onReorder) {
+      onReorder();
+      return;
+    }
+    setReordering(true);
+    try {
+      let added = 0;
+      for (const line2 of current2.items) {
+        try {
+          await api.cart.addItem({
+            sku: line2.sku,
+            qty: line2.qty
+          });
+          added += 1;
+        } catch {
+        }
+      }
+      if (added === 0) {
+        toast2.show("These items are no longer available", "critical");
+        return;
+      }
+      navigate?.("/cart");
+    } finally {
+      setReordering(false);
+    }
+  }
   if (order.status === "cancelled") {
     return jsxs("div", {
       className: styles$y.page,
@@ -7637,16 +7683,11 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onC
           className: styles$y.cancelledMeta,
           children: `Order #${shortRef$1(order.order_ref)} · Placed ${placedOn(order.placed_at, locale)}`
         })]
-      }), onReorder && jsx(Button, {
+      }), jsx(Button, {
         variant: "primary",
         fullWidth: true,
-        onClick: () => {
-          emit({
-            type: "reorder_requested",
-            orderRef: order.order_ref
-          });
-          onReorder();
-        },
+        loading: reordering,
+        onClick: () => void reorder(order),
         children: "Reorder"
       }), jsx(OrderLines, {
         order
@@ -8968,11 +9009,11 @@ function ShippingInfo() {
     })]
   });
 }
-const bar = "_bar_v5jjj_1";
-const floating$1 = "_floating_v5jjj_52";
-const divider = "_divider_v5jjj_58";
-const info$1 = "_info_v5jjj_62";
-const actions = "_actions_v5jjj_70";
+const bar = "_bar_coyti_1";
+const floating$1 = "_floating_coyti_53";
+const divider = "_divider_coyti_59";
+const info$1 = "_info_coyti_63";
+const actions = "_actions_coyti_71";
 const styles$k = {
   bar,
   floating: floating$1,
@@ -9012,7 +9053,7 @@ const styles$j = {
 };
 function CartView(props = {}) {
   const t = useT();
-  useSetScreenTitle(t("Cart"));
+  useSetScreenTitle(t("Cart"), "none");
   return jsx(ShopSurface, {
     tone: "light",
     fill: true,
@@ -10721,24 +10762,24 @@ function ProductView({ sku, initialData, showRecommendations = true, onNotFound
   }
   return unavailable;
 }
-const showcase = "_showcase_144lm_44";
-const panel = "_panel_144lm_48";
-const image = "_image_144lm_76";
-const hero = "_hero_144lm_116";
-const heroContent = "_heroContent_144lm_174";
-const heroText = "_heroText_144lm_197";
-const logo = "_logo_144lm_206";
-const heroTitle = "_heroTitle_144lm_226";
-const heroSub = "_heroSub_144lm_250";
-const swipe = "_swipe_144lm_269";
-const swipeLabel = "_swipeLabel_144lm_276";
-const chevron$1 = "_chevron_144lm_282";
-const overlay$1 = "_overlay_144lm_11";
-const copy = "_copy_144lm_315";
-const title$2 = "_title_144lm_320";
-const subtitle$1 = "_subtitle_144lm_327";
-const cta = "_cta_144lm_333";
-const mosaic = "_mosaic_144lm_377";
+const showcase = "_showcase_1qnt2_44";
+const panel = "_panel_1qnt2_48";
+const image = "_image_1qnt2_76";
+const hero = "_hero_1qnt2_116";
+const heroContent = "_heroContent_1qnt2_197";
+const heroText = "_heroText_1qnt2_221";
+const logo = "_logo_1qnt2_230";
+const heroTitle = "_heroTitle_1qnt2_250";
+const heroSub = "_heroSub_1qnt2_274";
+const swipe = "_swipe_1qnt2_293";
+const swipeLabel = "_swipeLabel_1qnt2_300";
+const chevron$1 = "_chevron_1qnt2_306";
+const overlay$1 = "_overlay_1qnt2_11";
+const copy = "_copy_1qnt2_341";
+const title$2 = "_title_1qnt2_346";
+const subtitle$1 = "_subtitle_1qnt2_353";
+const cta = "_cta_1qnt2_359";
+const mosaic = "_mosaic_1qnt2_403";
 const styles$2 = {
   showcase,
   panel,
@@ -11188,12 +11229,15 @@ function CheckoutBar({ title: title2, onClose, closeLabel, className }) {
     })]
   });
 }
-function ShopBar({ onBack, onMenu, title: title2, showCart = true, floating: floating2 = false, scrolled: scrolled2, backLabel, menuLabel, className }) {
+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 hasTrailing = showCart || Boolean(onMenu);
+  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");
@@ -11214,7 +11258,7 @@ function ShopBar({ onBack, onMenu, title: title2, showCart = true, floating: flo
       children: shownTitle
     }) : null, jsxs("div", {
       className: styles$1.right,
-      children: [showCart ? jsxs(CartTrigger, {
+      children: [cartOn ? jsxs(CartTrigger, {
         className: styles$1.iconBtn,
         "aria-label": cartLabel,
         children: [jsx(CartIcon, {}), cartCount !== null && cartCount > 0 ? jsx("span", {
@@ -11222,11 +11266,11 @@ function ShopBar({ onBack, onMenu, title: title2, showCart = true, floating: flo
           "aria-hidden": "true",
           children: cartCount > 99 ? "99+" : cartCount
         }) : null]
-      }) : null, onMenu ? jsx("button", {
+      }) : null, menu ? jsx("button", {
         type: "button",
         className: `${styles$1.iconBtn} ${styles$1.menuBtn}`,
         "aria-label": menuLabel ?? t("More options"),
-        onClick: onMenu,
+        onClick: menu,
         children: jsx(MenuIcon, {})
       }) : null]
     })]
@@ -11517,4 +11561,4 @@ export {
   useToast,
   variantLabel
 };
-
+//# sourceMappingURL=index.mjs.map

package/dist/standalone/storefront.mjs

@@ -5159,26 +5159,31 @@ function withAuthorization(init, token) {
 }
 const ScreenTitleContext = createContext({
   title: void 0,
+  trailing: "default",
   claim: () => () => {
   }
 });
 const SuppressedContext = createContext(false);
 function ScreenTitleProvider({ children }) {
   const [title2, setTitle] = useState(void 0);
+  const [trailing, setTrailing] = useState("default");
   const held = useRef(void 0);
-  const claim = useCallback((next) => {
+  const claim = useCallback((next, nextTrailing) => {
     held.current = next;
     setTitle(next);
+    setTrailing(nextTrailing);
     return () => {
       if (held.current !== next) return;
       held.current = void 0;
       setTitle(void 0);
+      setTrailing("default");
     };
   }, []);
   const value2 = useMemo(() => ({
     title: title2,
+    trailing,
     claim
-  }), [title2, claim]);
+  }), [title2, trailing, claim]);
   return jsx(ScreenTitleContext.Provider, {
     value: value2,
     children
@@ -5187,13 +5192,16 @@ function ScreenTitleProvider({ children }) {
 function useScreenTitle() {
   return useContext(ScreenTitleContext).title;
 }
-function useSetScreenTitle(title2) {
+function useScreenTrailing() {
+  return useContext(ScreenTitleContext).trailing;
+}
+function useSetScreenTitle(title2, trailing = "default") {
   const { claim } = useContext(ScreenTitleContext);
   const suppressed = useContext(SuppressedContext);
   useEffect(() => {
     if (suppressed || title2 === void 0) return;
-    return claim(title2);
-  }, [claim, title2, suppressed]);
+    return claim(title2, trailing);
+  }, [claim, title2, trailing, suppressed]);
 }
 function NoScreenTitle({ children }) {
   return jsx(SuppressedContext.Provider, {
@@ -5473,13 +5481,16 @@ const styles$O = {
   fill
 };
 const SETTLE_MS$1 = 150;
-function offsetFromViewportTop(el) {
-  let top2 = el.getBoundingClientRect().top;
+function scrolledOffOrigin(el) {
   for (let node = el.parentElement; node; node = node.parentElement) {
-    top2 += node.scrollTop;
+    if (node.scrollTop > 0) return true;
     if (getComputedStyle(node).position === "fixed") break;
   }
-  const offset = Math.max(0, Math.round(top2));
+  return false;
+}
+function offsetFromViewportTop(el) {
+  if (scrolledOffOrigin(el)) return null;
+  const offset = Math.max(0, Math.round(el.getBoundingClientRect().top));
   return offset >= window.innerHeight ? 0 : offset;
 }
 function useTopOffset(ref, property, enabled = true) {
@@ -5488,7 +5499,8 @@ function useTopOffset(ref, property, enabled = true) {
     if (!el || !enabled) return;
     let timer2;
     const measure = () => {
-      el.style.setProperty(property, `${offsetFromViewportTop(el)}px`);
+      const offset = offsetFromViewportTop(el);
+      if (offset !== null) el.style.setProperty(property, `${offset}px`);
     };
     const settle = () => {
       if (timer2) clearTimeout(timer2);
@@ -7564,7 +7576,10 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onC
   const [cancelOpen, setCancelOpen] = useState(false);
   const [cancelling, setCancelling] = useState(false);
   const [cancelError, setCancelError] = useState(null);
+  const [reordering, setReordering] = useState(false);
   const emit = useShopEvent();
+  const navigate = useNavigate();
+  const toast2 = useToast();
   const load = useCallback(async () => {
     setState("loading");
     try {
@@ -7625,6 +7640,37 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onC
       setCancelling(false);
     }
   }
+  async function reorder(current2) {
+    emit({
+      type: "reorder_requested",
+      orderRef: current2.order_ref
+    });
+    if (onReorder) {
+      onReorder();
+      return;
+    }
+    setReordering(true);
+    try {
+      let added = 0;
+      for (const line2 of current2.items) {
+        try {
+          await api.cart.addItem({
+            sku: line2.sku,
+            qty: line2.qty
+          });
+          added += 1;
+        } catch {
+        }
+      }
+      if (added === 0) {
+        toast2.show("These items are no longer available", "critical");
+        return;
+      }
+      navigate?.("/cart");
+    } finally {
+      setReordering(false);
+    }
+  }
   if (order.status === "cancelled") {
     return jsxs("div", {
       className: styles$y.page,
@@ -7637,16 +7683,11 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onC
           className: styles$y.cancelledMeta,
           children: `Order #${shortRef$1(order.order_ref)} · Placed ${placedOn(order.placed_at, locale)}`
         })]
-      }), onReorder && jsx(Button, {
+      }), jsx(Button, {
         variant: "primary",
         fullWidth: true,
-        onClick: () => {
-          emit({
-            type: "reorder_requested",
-            orderRef: order.order_ref
-          });
-          onReorder();
-        },
+        loading: reordering,
+        onClick: () => void reorder(order),
         children: "Reorder"
       }), jsx(OrderLines, {
         order
@@ -8968,11 +9009,11 @@ function ShippingInfo() {
     })]
   });
 }
-const bar = "_bar_v5jjj_1";
-const floating$1 = "_floating_v5jjj_52";
-const divider = "_divider_v5jjj_58";
-const info$1 = "_info_v5jjj_62";
-const actions = "_actions_v5jjj_70";
+const bar = "_bar_coyti_1";
+const floating$1 = "_floating_coyti_53";
+const divider = "_divider_coyti_59";
+const info$1 = "_info_coyti_63";
+const actions = "_actions_coyti_71";
 const styles$k = {
   bar,
   floating: floating$1,
@@ -9012,7 +9053,7 @@ const styles$j = {
 };
 function CartView(props = {}) {
   const t = useT();
-  useSetScreenTitle(t("Cart"));
+  useSetScreenTitle(t("Cart"), "none");
   return jsx(ShopSurface, {
     tone: "light",
     fill: true,
@@ -10721,24 +10762,24 @@ function ProductView({ sku, initialData, showRecommendations = true, onNotFound
   }
   return unavailable;
 }
-const showcase = "_showcase_144lm_44";
-const panel = "_panel_144lm_48";
-const image = "_image_144lm_76";
-const hero = "_hero_144lm_116";
-const heroContent = "_heroContent_144lm_174";
-const heroText = "_heroText_144lm_197";
-const logo = "_logo_144lm_206";
-const heroTitle = "_heroTitle_144lm_226";
-const heroSub = "_heroSub_144lm_250";
-const swipe = "_swipe_144lm_269";
-const swipeLabel = "_swipeLabel_144lm_276";
-const chevron$1 = "_chevron_144lm_282";
-const overlay$1 = "_overlay_144lm_11";
-const copy = "_copy_144lm_315";
-const title$2 = "_title_144lm_320";
-const subtitle$1 = "_subtitle_144lm_327";
-const cta = "_cta_144lm_333";
-const mosaic = "_mosaic_144lm_377";
+const showcase = "_showcase_1qnt2_44";
+const panel = "_panel_1qnt2_48";
+const image = "_image_1qnt2_76";
+const hero = "_hero_1qnt2_116";
+const heroContent = "_heroContent_1qnt2_197";
+const heroText = "_heroText_1qnt2_221";
+const logo = "_logo_1qnt2_230";
+const heroTitle = "_heroTitle_1qnt2_250";
+const heroSub = "_heroSub_1qnt2_274";
+const swipe = "_swipe_1qnt2_293";
+const swipeLabel = "_swipeLabel_1qnt2_300";
+const chevron$1 = "_chevron_1qnt2_306";
+const overlay$1 = "_overlay_1qnt2_11";
+const copy = "_copy_1qnt2_341";
+const title$2 = "_title_1qnt2_346";
+const subtitle$1 = "_subtitle_1qnt2_353";
+const cta = "_cta_1qnt2_359";
+const mosaic = "_mosaic_1qnt2_403";
 const styles$2 = {
   showcase,
   panel,
@@ -11188,12 +11229,15 @@ function CheckoutBar({ title: title2, onClose, closeLabel, className }) {
     })]
   });
 }
-function ShopBar({ onBack, onMenu, title: title2, showCart = true, floating: floating2 = false, scrolled: scrolled2, backLabel, menuLabel, className }) {
+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 hasTrailing = showCart || Boolean(onMenu);
+  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");
@@ -11214,7 +11258,7 @@ function ShopBar({ onBack, onMenu, title: title2, showCart = true, floating: flo
       children: shownTitle
     }) : null, jsxs("div", {
       className: styles$1.right,
-      children: [showCart ? jsxs(CartTrigger, {
+      children: [cartOn ? jsxs(CartTrigger, {
         className: styles$1.iconBtn,
         "aria-label": cartLabel,
         children: [jsx(CartIcon, {}), cartCount !== null && cartCount > 0 ? jsx("span", {
@@ -11222,11 +11266,11 @@ function ShopBar({ onBack, onMenu, title: title2, showCart = true, floating: flo
           "aria-hidden": "true",
           children: cartCount > 99 ? "99+" : cartCount
         }) : null]
-      }) : null, onMenu ? jsx("button", {
+      }) : null, menu ? jsx("button", {
         type: "button",
         className: `${styles$1.iconBtn} ${styles$1.menuBtn}`,
         "aria-label": menuLabel ?? t("More options"),
-        onClick: onMenu,
+        onClick: menu,
         children: jsx(MenuIcon, {})
       }) : null]
     })]
@@ -11517,4 +11561,4 @@ export {
   useToast,
   variantLabel
 };
-
+//# sourceMappingURL=storefront.mjs.map

package/dist/standalone/styles.css

@@ -2340,10 +2340,9 @@
   height: 1px;
   background: var(--color-border-default);
 }
-._bar_v5jjj_1 {
+._bar_coyti_1 {
   position: sticky;
   bottom: 0;
-  bottom: calc(100lvh - 100dvh);
   left: 0;
   right: 0;
   display: flex;
@@ -2353,24 +2352,24 @@
   background: var(--color-surface-default);
   z-index: 50;
 }
-._floating_v5jjj_52 {
+._floating_coyti_53 {
   border-radius: var(--radius-12) var(--radius-12) 0 0;
   filter: drop-shadow(0 -4px 12px rgba(206, 206, 206, 0.48));
 }
-._divider_v5jjj_58 {
+._divider_coyti_59 {
   border-top: 1px solid var(--color-border-default);
 }
-._info_v5jjj_62 {
+._info_coyti_63 {
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-weight: var(--font-weight-bold);
 }
-._actions_v5jjj_70 {
+._actions_coyti_71 {
   display: flex;
   gap: var(--space-8);
 }
-._actions_v5jjj_70 > * {
+._actions_coyti_71 > * {
   flex: 1 1 0;
 }
 ._surface_nkc99_15 {
@@ -3436,10 +3435,10 @@
   column-gap: var(--space-12);
   row-gap: var(--space-24);
 }
-._showcase_144lm_44 {
+._showcase_1qnt2_44 {
   background: #080e12;
 }
-._panel_144lm_48 {
+._panel_1qnt2_48 {
   position: relative;
   height: calc(100lvh - var(--showcase-top, 0px));
   scroll-snap-align: start;
@@ -3447,11 +3446,11 @@
   overflow: hidden;
   background: #080e12;
 }
-._image_144lm_76 {
+._image_1qnt2_76 {
   object-fit: cover;
   object-position: 50% var(--slide-focal-y, 50%);
 }
-._hero_144lm_116::after {
+._hero_1qnt2_116::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -3466,9 +3465,10 @@
       rgba(8, 14, 18, 0) 520px);
   pointer-events: none;
 }
-._hero_144lm_116 ._heroContent_144lm_174 {
+._hero_1qnt2_116 ._heroContent_1qnt2_197 {
   position: absolute;
   bottom: 32px;
+  bottom: calc(32px + 100lvh - 100dvh);
   left: 0;
   right: 0;
   z-index: 1;
@@ -3477,7 +3477,7 @@
   gap: 24px;
   align-items: stretch;
 }
-._heroText_144lm_197 {
+._heroText_1qnt2_221 {
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -3485,11 +3485,11 @@
   padding: 0 24px;
   text-align: center;
 }
-._heroText_144lm_197 ._logo_144lm_206 {
+._heroText_1qnt2_221 ._logo_1qnt2_230 {
   width: 48px;
   height: 48px;
 }
-._heroTitle_144lm_226 {
+._heroTitle_1qnt2_250 {
   width: 100%;
   margin: 0;
   font-family:
@@ -3504,33 +3504,33 @@
   letter-spacing: -1.12px;
   color: #f9fafa;
 }
-._heroSub_144lm_250 {
+._heroSub_1qnt2_274 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
   max-width: 327px;
 }
-._swipe_144lm_269 {
+._swipe_1qnt2_293 {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 6px;
   padding: 8px 0;
 }
-._swipeLabel_144lm_276 {
+._swipeLabel_1qnt2_300 {
   margin: 0;
   font-size: 14px;
   line-height: 1;
   color: rgba(255, 255, 255, 0.54);
 }
-._chevron_144lm_282 {
+._chevron_1qnt2_306 {
   width: 24px;
   height: 24px;
   color: rgba(255, 255, 255, 0.54);
-  animation: _bob_144lm_1 1.8s ease-in-out infinite;
+  animation: _bob_1qnt2_1 1.8s ease-in-out infinite;
 }
-@keyframes _bob_144lm_1 {
+@keyframes _bob_1qnt2_1 {
   0%, 100% {
     transform: translateY(0);
   }
@@ -3538,7 +3538,7 @@
     transform: translateY(4px);
   }
 }
-._overlay_144lm_11 {
+._overlay_1qnt2_11 {
   position: absolute;
   inset: 0;
   z-index: 1;
@@ -3553,26 +3553,27 @@
   gap: 16px;
   align-items: flex-start;
   padding: 0 24px 24px;
+  padding-bottom: calc(24px + 100lvh - 100dvh);
 }
-._copy_144lm_315 {
+._copy_1qnt2_341 {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
-._title_144lm_320 {
+._title_1qnt2_346 {
   margin: 0;
   font-size: 32px;
   line-height: 1.2;
   font-weight: 700;
   color: #f9fafa;
 }
-._subtitle_144lm_327 {
+._subtitle_1qnt2_353 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
 }
-._cta_144lm_333 {
+._cta_1qnt2_359 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3586,19 +3587,19 @@
   font-weight: 700;
   text-decoration: none;
 }
-._cta_144lm_333::after {
+._cta_1qnt2_359::after {
   content: "";
   position: absolute;
   inset: 0;
 }
-._cta_144lm_333:active {
+._cta_1qnt2_359:active {
   background: rgba(249, 250, 250, 0.12);
 }
-._cta_144lm_333:focus-visible {
+._cta_1qnt2_359:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
-._mosaic_144lm_377 {
+._mosaic_1qnt2_403 {
   background: #080e12;
 }
 ._header_8o3d7_25 {

package/dist/styles.css

@@ -2340,10 +2340,9 @@
   height: 1px;
   background: var(--color-border-default);
 }
-._bar_v5jjj_1 {
+._bar_coyti_1 {
   position: sticky;
   bottom: 0;
-  bottom: calc(100lvh - 100dvh);
   left: 0;
   right: 0;
   display: flex;
@@ -2353,24 +2352,24 @@
   background: var(--color-surface-default);
   z-index: 50;
 }
-._floating_v5jjj_52 {
+._floating_coyti_53 {
   border-radius: var(--radius-12) var(--radius-12) 0 0;
   filter: drop-shadow(0 -4px 12px rgba(206, 206, 206, 0.48));
 }
-._divider_v5jjj_58 {
+._divider_coyti_59 {
   border-top: 1px solid var(--color-border-default);
 }
-._info_v5jjj_62 {
+._info_coyti_63 {
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-weight: var(--font-weight-bold);
 }
-._actions_v5jjj_70 {
+._actions_coyti_71 {
   display: flex;
   gap: var(--space-8);
 }
-._actions_v5jjj_70 > * {
+._actions_coyti_71 > * {
   flex: 1 1 0;
 }
 ._surface_nkc99_15 {
@@ -3436,10 +3435,10 @@
   column-gap: var(--space-12);
   row-gap: var(--space-24);
 }
-._showcase_144lm_44 {
+._showcase_1qnt2_44 {
   background: #080e12;
 }
-._panel_144lm_48 {
+._panel_1qnt2_48 {
   position: relative;
   height: calc(100lvh - var(--showcase-top, 0px));
   scroll-snap-align: start;
@@ -3447,11 +3446,11 @@
   overflow: hidden;
   background: #080e12;
 }
-._image_144lm_76 {
+._image_1qnt2_76 {
   object-fit: cover;
   object-position: 50% var(--slide-focal-y, 50%);
 }
-._hero_144lm_116::after {
+._hero_1qnt2_116::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -3466,9 +3465,10 @@
       rgba(8, 14, 18, 0) 520px);
   pointer-events: none;
 }
-._hero_144lm_116 ._heroContent_144lm_174 {
+._hero_1qnt2_116 ._heroContent_1qnt2_197 {
   position: absolute;
   bottom: 32px;
+  bottom: calc(32px + 100lvh - 100dvh);
   left: 0;
   right: 0;
   z-index: 1;
@@ -3477,7 +3477,7 @@
   gap: 24px;
   align-items: stretch;
 }
-._heroText_144lm_197 {
+._heroText_1qnt2_221 {
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -3485,11 +3485,11 @@
   padding: 0 24px;
   text-align: center;
 }
-._heroText_144lm_197 ._logo_144lm_206 {
+._heroText_1qnt2_221 ._logo_1qnt2_230 {
   width: 48px;
   height: 48px;
 }
-._heroTitle_144lm_226 {
+._heroTitle_1qnt2_250 {
   width: 100%;
   margin: 0;
   font-family:
@@ -3504,33 +3504,33 @@
   letter-spacing: -1.12px;
   color: #f9fafa;
 }
-._heroSub_144lm_250 {
+._heroSub_1qnt2_274 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
   max-width: 327px;
 }
-._swipe_144lm_269 {
+._swipe_1qnt2_293 {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 6px;
   padding: 8px 0;
 }
-._swipeLabel_144lm_276 {
+._swipeLabel_1qnt2_300 {
   margin: 0;
   font-size: 14px;
   line-height: 1;
   color: rgba(255, 255, 255, 0.54);
 }
-._chevron_144lm_282 {
+._chevron_1qnt2_306 {
   width: 24px;
   height: 24px;
   color: rgba(255, 255, 255, 0.54);
-  animation: _bob_144lm_1 1.8s ease-in-out infinite;
+  animation: _bob_1qnt2_1 1.8s ease-in-out infinite;
 }
-@keyframes _bob_144lm_1 {
+@keyframes _bob_1qnt2_1 {
   0%, 100% {
     transform: translateY(0);
   }
@@ -3538,7 +3538,7 @@
     transform: translateY(4px);
   }
 }
-._overlay_144lm_11 {
+._overlay_1qnt2_11 {
   position: absolute;
   inset: 0;
   z-index: 1;
@@ -3553,26 +3553,27 @@
   gap: 16px;
   align-items: flex-start;
   padding: 0 24px 24px;
+  padding-bottom: calc(24px + 100lvh - 100dvh);
 }
-._copy_144lm_315 {
+._copy_1qnt2_341 {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
-._title_144lm_320 {
+._title_1qnt2_346 {
   margin: 0;
   font-size: 32px;
   line-height: 1.2;
   font-weight: 700;
   color: #f9fafa;
 }
-._subtitle_144lm_327 {
+._subtitle_1qnt2_353 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
 }
-._cta_144lm_333 {
+._cta_1qnt2_359 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3586,19 +3587,19 @@
   font-weight: 700;
   text-decoration: none;
 }
-._cta_144lm_333::after {
+._cta_1qnt2_359::after {
   content: "";
   position: absolute;
   inset: 0;
 }
-._cta_144lm_333:active {
+._cta_1qnt2_359:active {
   background: rgba(249, 250, 250, 0.12);
 }
-._cta_144lm_333:focus-visible {
+._cta_1qnt2_359:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
-._mosaic_144lm_377 {
+._mosaic_1qnt2_403 {
   background: #080e12;
 }
 ._header_8o3d7_25 {

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@nok-integration/storefront-react",
-  "version": "0.19.22",
+  "version": "0.19.24",
   "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": {
     ".": {
@@ -20,18 +23,34 @@
     "dist",
     "!dist/**/*.map"
   ],
-  "sideEffects": [
-    "*.css"
-  ],
+  "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"
+  },
   "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/"
   }
 }