@nok-integration/storefront-react 0.18.1 → 0.18.3

package/dist/index.d.ts

@@ -3580,9 +3580,14 @@ export declare interface OrderConfirmationViewProps {
     /**
      * The frame's "Done". Omit it and no button renders.
      *
-     * Where it goes is the host's: in the embed this is the end of a checkout DAZN own, so
-     * only they know whether it closes the webview, returns to the shop, or goes somewhere
-     * else entirely.
+     * **It leaves the shop.** DAZN settled this on 21 Aug 2026: "Done = DAZN home, X = DAZN
+     * Shop home". The two are not the same destination and wiring both to the shop home —
+     * which is what the first integration did — loses the only way out of the shop at the
+     * end of a purchase.
+     *
+     * We cannot make that trip ourselves: the DAZN app's own home is not a route on our
+     * `/v1` surface and not something a `navigate('/')` can reach. So this stays the host's
+     * callback, and the header's `onClose` is the one that goes to the shop home.
      */
     onDone?: () => void;
 }

package/dist/index.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useRef, useCallback, useMemo, useEffect, useContext, createContext, forwardRef, useState } from "react";
+import { useContext, useEffect, useState, useRef, useCallback, useMemo, createContext, forwardRef } from "react";
 var client = {};
 var catalog = {};
 var zod = {};
@@ -5542,6 +5542,38 @@ function withAuthorization(init, token) {
   headers.set("authorization", `Bearer ${token}`);
   return { ...init, headers };
 }
+const ScreenTitleContext = createContext({ title: void 0, claim: () => () => {
+} });
+const SuppressedContext = createContext(false);
+function ScreenTitleProvider({ children }) {
+  const [title2, setTitle] = useState(void 0);
+  const held = useRef(void 0);
+  const claim = useCallback((next) => {
+    held.current = next;
+    setTitle(next);
+    return () => {
+      if (held.current !== next) return;
+      held.current = void 0;
+      setTitle(void 0);
+    };
+  }, []);
+  const value2 = useMemo(() => ({ title: title2, claim }), [title2, claim]);
+  return /* @__PURE__ */ jsx(ScreenTitleContext.Provider, { value: value2, children });
+}
+function useScreenTitle() {
+  return useContext(ScreenTitleContext).title;
+}
+function useSetScreenTitle(title2) {
+  const { claim } = useContext(ScreenTitleContext);
+  const suppressed = useContext(SuppressedContext);
+  useEffect(() => {
+    if (suppressed || title2 === void 0) return;
+    return claim(title2);
+  }, [claim, title2, suppressed]);
+}
+function NoScreenTitle({ children }) {
+  return /* @__PURE__ */ jsx(SuppressedContext.Provider, { value: true, children });
+}
 const ShopContext = createContext(null);
 function DaznShopProvider({
   children,
@@ -5631,7 +5663,7 @@ function DaznShopProvider({
     }),
     [api, market, theme, notifications, locale, assetBaseUrl, emit, subscribe, navigate]
   );
-  return /* @__PURE__ */ jsx(ShopContext.Provider, { value: value2, children });
+  return /* @__PURE__ */ jsx(ShopContext.Provider, { value: value2, children: /* @__PURE__ */ jsx(ScreenTitleProvider, { children }) });
 }
 function useShopOptional() {
   return useContext(ShopContext);
@@ -6893,20 +6925,20 @@ function ReasonSheet({
     }
   ) });
 }
-const page$6 = "_page_opefg_8";
-const widget = "_widget_opefg_18";
-const titleRow = "_titleRow_opefg_26";
-const headline$1 = "_headline_opefg_42";
-const track$5 = "_track_opefg_61";
-const rule = "_rule_opefg_86";
-const help = "_help_opefg_96";
-const helpTitle = "_helpTitle_opefg_102";
-const helpRows = "_helpRows_opefg_109";
-const helpRow = "_helpRow_opefg_109";
-const cancel = "_cancel_opefg_167";
-const cancelledHead = "_cancelledHead_opefg_191";
-const cancelledTitle = "_cancelledTitle_opefg_197";
-const cancelledMeta = "_cancelledMeta_opefg_206";
+const page$6 = "_page_1v9my_8";
+const widget = "_widget_1v9my_18";
+const titleRow = "_titleRow_1v9my_26";
+const headline$1 = "_headline_1v9my_42";
+const track$5 = "_track_1v9my_74";
+const rule = "_rule_1v9my_99";
+const help = "_help_1v9my_109";
+const helpTitle = "_helpTitle_1v9my_115";
+const helpRows = "_helpRows_1v9my_122";
+const helpRow = "_helpRow_1v9my_122";
+const cancel = "_cancel_1v9my_180";
+const cancelledHead = "_cancelledHead_1v9my_204";
+const cancelledTitle = "_cancelledTitle_1v9my_210";
+const cancelledMeta = "_cancelledMeta_1v9my_219";
 const styles$A = {
   page: page$6,
   widget,
@@ -7542,6 +7574,19 @@ const styles$w = {
 function OrderConfirmationView(props) {
   return /* @__PURE__ */ jsx(ShopSurface, { tone: "light", fill: true, children: /* @__PURE__ */ jsx(OrderConfirmationContent, { ...props }) });
 }
+const CONFIRMATION_LABELS = {
+  packing: "Order placed",
+  on_its_way: "On the way"
+};
+function confirmationProgress(progress2) {
+  return progress2.map((entry) => {
+    if (entry.step === "delivered" && !entry.at) {
+      return { ...entry, label: "Estimated delivery" };
+    }
+    const relabelled = CONFIRMATION_LABELS[entry.step];
+    return relabelled ? { ...entry, label: relabelled } : { ...entry };
+  });
+}
 function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
   const { api } = useShop();
   const locale = useLocale(localeProp);
@@ -7581,7 +7626,7 @@ function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
       /* @__PURE__ */ jsx(
         OrderTimeline,
         {
-          progress: order.progress,
+          progress: confirmationProgress(order.progress),
           ...order.estimated_delivery ? { estimatedDelivery: order.estimated_delivery } : {},
           locale
         }
@@ -8454,6 +8499,7 @@ const styles$j = {
   lines
 };
 function CartView(props = {}) {
+  useSetScreenTitle("Cart");
   return /* @__PURE__ */ jsx(ShopSurface, { tone: "light", fill: true, className: styles$j.surface, children: /* @__PURE__ */ jsx(CartViewContent, { ...props }) });
 }
 function CartViewContent({
@@ -8644,7 +8690,7 @@ function CartSheetProvider({ children }) {
   const api = useMemo(() => ({ open, close: close2, isOpen }), [open, close2, isOpen]);
   return /* @__PURE__ */ jsxs(CartSheetContext.Provider, { value: api, children: [
     children,
-    isOpen && /* @__PURE__ */ jsx(BottomSheet, { open: true, onClose: close2, title: "Cart", children: /* @__PURE__ */ jsx(CartView, { onContinueShopping: close2 }) })
+    isOpen && /* @__PURE__ */ jsx(BottomSheet, { open: true, onClose: close2, title: "Cart", children: /* @__PURE__ */ jsx(NoScreenTitle, { children: /* @__PURE__ */ jsx(CartView, { onContinueShopping: close2 }) }) })
   ] });
 }
 const gallery = "_gallery_10mch_1";
@@ -10124,6 +10170,8 @@ function ShopBar({
   className
 }) {
   const cartCount = useCartCount();
+  const screenTitle = useScreenTitle();
+  const shownTitle = title2 ?? screenTitle;
   const atTop = useScrolledUnder(floating2 && scrolled2 === void 0);
   const isScrolled = scrolled2 ?? atTop;
   const cartLabel = cartCount === null ? "Cart" : cartCount === 0 ? "Cart, empty" : `Cart, ${cartCount} item${cartCount === 1 ? "" : "s"}`;
@@ -10135,7 +10183,7 @@ function ShopBar({
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs("header", { className: classes, children: [
     onBack ? /* @__PURE__ */ jsx("button", { type: "button", className: styles$1.iconBtn, "aria-label": backLabel, onClick: onBack, children: /* @__PURE__ */ jsx(ChevronLeft, {}) }) : /* @__PURE__ */ jsx("span", { className: styles$1.spacer, "aria-hidden": "true" }),
-    title2 ? /* @__PURE__ */ jsx("span", { className: styles$1.title, children: title2 }) : null,
+    shownTitle ? /* @__PURE__ */ jsx("span", { className: styles$1.title, children: shownTitle }) : null,
     /* @__PURE__ */ jsxs("div", { className: styles$1.right, children: [
       showCart ? /* @__PURE__ */ jsxs(CartTrigger, { className: styles$1.iconBtn, "aria-label": cartLabel, children: [
         /* @__PURE__ */ jsx(CartIcon, {}),

package/dist/standalone/storefront.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useRef, useCallback, useMemo, useEffect, useContext, createContext, forwardRef, useState } from "react";
+import { useContext, useEffect, useState, useRef, useCallback, useMemo, createContext, forwardRef } from "react";
 var client = {};
 var catalog = {};
 var zod = {};
@@ -5542,6 +5542,38 @@ function withAuthorization(init, token) {
   headers.set("authorization", `Bearer ${token}`);
   return { ...init, headers };
 }
+const ScreenTitleContext = createContext({ title: void 0, claim: () => () => {
+} });
+const SuppressedContext = createContext(false);
+function ScreenTitleProvider({ children }) {
+  const [title2, setTitle] = useState(void 0);
+  const held = useRef(void 0);
+  const claim = useCallback((next) => {
+    held.current = next;
+    setTitle(next);
+    return () => {
+      if (held.current !== next) return;
+      held.current = void 0;
+      setTitle(void 0);
+    };
+  }, []);
+  const value2 = useMemo(() => ({ title: title2, claim }), [title2, claim]);
+  return /* @__PURE__ */ jsx(ScreenTitleContext.Provider, { value: value2, children });
+}
+function useScreenTitle() {
+  return useContext(ScreenTitleContext).title;
+}
+function useSetScreenTitle(title2) {
+  const { claim } = useContext(ScreenTitleContext);
+  const suppressed = useContext(SuppressedContext);
+  useEffect(() => {
+    if (suppressed || title2 === void 0) return;
+    return claim(title2);
+  }, [claim, title2, suppressed]);
+}
+function NoScreenTitle({ children }) {
+  return /* @__PURE__ */ jsx(SuppressedContext.Provider, { value: true, children });
+}
 const ShopContext = createContext(null);
 function DaznShopProvider({
   children,
@@ -5631,7 +5663,7 @@ function DaznShopProvider({
     }),
     [api, market, theme, notifications, locale, assetBaseUrl, emit, subscribe, navigate]
   );
-  return /* @__PURE__ */ jsx(ShopContext.Provider, { value: value2, children });
+  return /* @__PURE__ */ jsx(ShopContext.Provider, { value: value2, children: /* @__PURE__ */ jsx(ScreenTitleProvider, { children }) });
 }
 function useShopOptional() {
   return useContext(ShopContext);
@@ -6893,20 +6925,20 @@ function ReasonSheet({
     }
   ) });
 }
-const page$6 = "_page_opefg_8";
-const widget = "_widget_opefg_18";
-const titleRow = "_titleRow_opefg_26";
-const headline$1 = "_headline_opefg_42";
-const track$5 = "_track_opefg_61";
-const rule = "_rule_opefg_86";
-const help = "_help_opefg_96";
-const helpTitle = "_helpTitle_opefg_102";
-const helpRows = "_helpRows_opefg_109";
-const helpRow = "_helpRow_opefg_109";
-const cancel = "_cancel_opefg_167";
-const cancelledHead = "_cancelledHead_opefg_191";
-const cancelledTitle = "_cancelledTitle_opefg_197";
-const cancelledMeta = "_cancelledMeta_opefg_206";
+const page$6 = "_page_1v9my_8";
+const widget = "_widget_1v9my_18";
+const titleRow = "_titleRow_1v9my_26";
+const headline$1 = "_headline_1v9my_42";
+const track$5 = "_track_1v9my_74";
+const rule = "_rule_1v9my_99";
+const help = "_help_1v9my_109";
+const helpTitle = "_helpTitle_1v9my_115";
+const helpRows = "_helpRows_1v9my_122";
+const helpRow = "_helpRow_1v9my_122";
+const cancel = "_cancel_1v9my_180";
+const cancelledHead = "_cancelledHead_1v9my_204";
+const cancelledTitle = "_cancelledTitle_1v9my_210";
+const cancelledMeta = "_cancelledMeta_1v9my_219";
 const styles$A = {
   page: page$6,
   widget,
@@ -7542,6 +7574,19 @@ const styles$w = {
 function OrderConfirmationView(props) {
   return /* @__PURE__ */ jsx(ShopSurface, { tone: "light", fill: true, children: /* @__PURE__ */ jsx(OrderConfirmationContent, { ...props }) });
 }
+const CONFIRMATION_LABELS = {
+  packing: "Order placed",
+  on_its_way: "On the way"
+};
+function confirmationProgress(progress2) {
+  return progress2.map((entry) => {
+    if (entry.step === "delivered" && !entry.at) {
+      return { ...entry, label: "Estimated delivery" };
+    }
+    const relabelled = CONFIRMATION_LABELS[entry.step];
+    return relabelled ? { ...entry, label: relabelled } : { ...entry };
+  });
+}
 function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
   const { api } = useShop();
   const locale = useLocale(localeProp);
@@ -7581,7 +7626,7 @@ function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
       /* @__PURE__ */ jsx(
         OrderTimeline,
         {
-          progress: order.progress,
+          progress: confirmationProgress(order.progress),
           ...order.estimated_delivery ? { estimatedDelivery: order.estimated_delivery } : {},
           locale
         }
@@ -8454,6 +8499,7 @@ const styles$j = {
   lines
 };
 function CartView(props = {}) {
+  useSetScreenTitle("Cart");
   return /* @__PURE__ */ jsx(ShopSurface, { tone: "light", fill: true, className: styles$j.surface, children: /* @__PURE__ */ jsx(CartViewContent, { ...props }) });
 }
 function CartViewContent({
@@ -8644,7 +8690,7 @@ function CartSheetProvider({ children }) {
   const api = useMemo(() => ({ open, close: close2, isOpen }), [open, close2, isOpen]);
   return /* @__PURE__ */ jsxs(CartSheetContext.Provider, { value: api, children: [
     children,
-    isOpen && /* @__PURE__ */ jsx(BottomSheet, { open: true, onClose: close2, title: "Cart", children: /* @__PURE__ */ jsx(CartView, { onContinueShopping: close2 }) })
+    isOpen && /* @__PURE__ */ jsx(BottomSheet, { open: true, onClose: close2, title: "Cart", children: /* @__PURE__ */ jsx(NoScreenTitle, { children: /* @__PURE__ */ jsx(CartView, { onContinueShopping: close2 }) }) })
   ] });
 }
 const gallery = "_gallery_10mch_1";
@@ -10124,6 +10170,8 @@ function ShopBar({
   className
 }) {
   const cartCount = useCartCount();
+  const screenTitle = useScreenTitle();
+  const shownTitle = title2 ?? screenTitle;
   const atTop = useScrolledUnder(floating2 && scrolled2 === void 0);
   const isScrolled = scrolled2 ?? atTop;
   const cartLabel = cartCount === null ? "Cart" : cartCount === 0 ? "Cart, empty" : `Cart, ${cartCount} item${cartCount === 1 ? "" : "s"}`;
@@ -10135,7 +10183,7 @@ function ShopBar({
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs("header", { className: classes, children: [
     onBack ? /* @__PURE__ */ jsx("button", { type: "button", className: styles$1.iconBtn, "aria-label": backLabel, onClick: onBack, children: /* @__PURE__ */ jsx(ChevronLeft, {}) }) : /* @__PURE__ */ jsx("span", { className: styles$1.spacer, "aria-hidden": "true" }),
-    title2 ? /* @__PURE__ */ jsx("span", { className: styles$1.title, children: title2 }) : null,
+    shownTitle ? /* @__PURE__ */ jsx("span", { className: styles$1.title, children: shownTitle }) : null,
     /* @__PURE__ */ jsxs("div", { className: styles$1.right, children: [
       showCart ? /* @__PURE__ */ jsxs(CartTrigger, { className: styles$1.iconBtn, "aria-label": cartLabel, children: [
         /* @__PURE__ */ jsx(CartIcon, {}),

package/dist/standalone/styles.css

@@ -1560,7 +1560,7 @@
  * everything below it is 32 apart: widget, rule, rows, address, summary. Same rhythm and
  * same padding as the confirmation, which is the same page from the fold down.
  */
-._page_opefg_8 {
+._page_1v9my_8 {
   display: flex;
   flex-direction: column;
   gap: var(--space-32);
@@ -1570,7 +1570,7 @@
 /* ── Order number + timeline ───────────────────────────────────────────────── */
 
 /* `mobile/order/delivery-widget`: the title row, then the steps, 32 apart. */
-._widget_opefg_18 {
+._widget_1v9my_18 {
   display: flex;
   flex-direction: column;
   gap: var(--space-32);
@@ -1578,7 +1578,7 @@
 
 /* The number on the left, the carrier link hard right — and nothing between them, so a
    long reference runs into the space the link is not using rather than under it. */
-._titleRow_opefg_26 {
+._titleRow_1v9my_26 {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1594,8 +1594,21 @@
  *
  * Nothing clips it, so the cap-height box needs no descender protection.
  */
-._headline_opefg_42 {
-  margin: 0;
+._headline_1v9my_42 {
+  /*
+   * The padding is what the trim costs, and this rule went out without it.
+   *
+   * A 14px box on 20px text is the cap height, so the glyphs deliberately overflow it —
+   * exactly as they do in Figma. That is fine until something clips, and the ellipsis
+   * below does: `overflow: hidden` cuts in both directions and takes the bottom off the
+   * letters. DAZN reported it on the order screen, where the heading is `Order #611887`.
+   *
+   * Nine each way clears 20px glyphs the way six clears 16px ones on the confirmation
+   * subtitle, and the equal negative margin takes the room straight back out, so the box
+   * stays 14 and the row does not move.
+   */
+  margin: -9px 0;
+  padding: 9px 0;
   min-width: 0;
   font-size: var(--type-heading-md-size);
   line-height: 14px;
@@ -1613,7 +1626,7 @@
  * An anchor rather than a button because the destination is a real page on somebody else's
  * site, and it has to behave like one: middle-click, long-press, open in a new tab.
  */
-._track_opefg_61 {
+._track_1v9my_74 {
   display: inline-flex;
   align-items: center;
   gap: var(--space-6);
@@ -1625,7 +1638,7 @@
   text-decoration: none;
 }
 
-._track_opefg_61:focus-visible {
+._track_1v9my_74:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
   border-radius: var(--radius-4);
@@ -1638,7 +1651,7 @@
  * separates, with the hairline drawn on that boundary. The negative margin takes the
  * pixel back out of the layout so the two gaps stay 32 rather than becoming 32 and 33.
  */
-._rule_opefg_86 {
+._rule_1v9my_99 {
   height: 1px;
   margin: 0 0 -1px;
   border: 0;
@@ -1648,20 +1661,20 @@
 /* ── Need help? ────────────────────────────────────────────────────────────── */
 
 /* `mobile/explore`: the heading, then the rows, 6 apart. */
-._help_opefg_96 {
+._help_1v9my_109 {
   display: flex;
   flex-direction: column;
   gap: var(--space-6);
 }
 
-._helpTitle_opefg_102 {
+._helpTitle_1v9my_115 {
   margin: 0;
   font-size: var(--type-heading-md-size);
   line-height: 1.32;
   font-weight: var(--font-weight-bold);
 }
 
-._helpRows_opefg_109 {
+._helpRows_1v9my_122 {
   display: flex;
   flex-direction: column;
 }
@@ -1670,7 +1683,7 @@
  * 48 tall: 16 of padding either side of a 16px chevron, which is what sets the height. The
  * label is cap-trimmed to 10 and is shorter than the mark beside it.
  */
-._helpRow_opefg_109 {
+._helpRow_1v9my_122 {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1700,11 +1713,11 @@
  * padding and its 16px chevron rather than from a `height`, so the hairline adds to the
  * row instead of eating into it. 48, the line, then 48 — the frame's own 97 for the pair.
  */
-._helpRow_opefg_109 + ._helpRow_opefg_109 {
+._helpRow_1v9my_122 + ._helpRow_1v9my_122 {
   border-top: 1px solid var(--color-border-subtle);
 }
 
-._helpRow_opefg_109:focus-visible {
+._helpRow_1v9my_122:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
@@ -1719,7 +1732,7 @@
  * would put a fourth variant in the primitive for a single use — this is the one control
  * in the package drawn this way, so it is drawn here.
  */
-._cancel_opefg_167 {
+._cancel_1v9my_180 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1737,19 +1750,19 @@
   cursor: pointer;
 }
 
-._cancel_opefg_167:focus-visible {
+._cancel_1v9my_180:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
 
 /* Screen 3. The head is a title and one meta line, 8 apart. */
-._cancelledHead_opefg_191 {
+._cancelledHead_1v9my_204 {
   display: flex;
   flex-direction: column;
   gap: var(--space-8);
 }
 
-._cancelledTitle_opefg_197 {
+._cancelledTitle_1v9my_210 {
   margin: 0;
   font-size: var(--type-heading-md-size);
   line-height: 1.32;
@@ -1758,7 +1771,7 @@
 }
 
 /* The reference and the date it was placed, cap-trimmed to 10 on 14. */
-._cancelledMeta_opefg_206 {
+._cancelledMeta_1v9my_219 {
   font-size: var(--type-trimmed-sm-size);
   line-height: 10px;
   padding: 5px 0;

package/dist/styles.css

@@ -1560,7 +1560,7 @@
  * everything below it is 32 apart: widget, rule, rows, address, summary. Same rhythm and
  * same padding as the confirmation, which is the same page from the fold down.
  */
-._page_opefg_8 {
+._page_1v9my_8 {
   display: flex;
   flex-direction: column;
   gap: var(--space-32);
@@ -1570,7 +1570,7 @@
 /* ── Order number + timeline ───────────────────────────────────────────────── */
 
 /* `mobile/order/delivery-widget`: the title row, then the steps, 32 apart. */
-._widget_opefg_18 {
+._widget_1v9my_18 {
   display: flex;
   flex-direction: column;
   gap: var(--space-32);
@@ -1578,7 +1578,7 @@
 
 /* The number on the left, the carrier link hard right — and nothing between them, so a
    long reference runs into the space the link is not using rather than under it. */
-._titleRow_opefg_26 {
+._titleRow_1v9my_26 {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1594,8 +1594,21 @@
  *
  * Nothing clips it, so the cap-height box needs no descender protection.
  */
-._headline_opefg_42 {
-  margin: 0;
+._headline_1v9my_42 {
+  /*
+   * The padding is what the trim costs, and this rule went out without it.
+   *
+   * A 14px box on 20px text is the cap height, so the glyphs deliberately overflow it —
+   * exactly as they do in Figma. That is fine until something clips, and the ellipsis
+   * below does: `overflow: hidden` cuts in both directions and takes the bottom off the
+   * letters. DAZN reported it on the order screen, where the heading is `Order #611887`.
+   *
+   * Nine each way clears 20px glyphs the way six clears 16px ones on the confirmation
+   * subtitle, and the equal negative margin takes the room straight back out, so the box
+   * stays 14 and the row does not move.
+   */
+  margin: -9px 0;
+  padding: 9px 0;
   min-width: 0;
   font-size: var(--type-heading-md-size);
   line-height: 14px;
@@ -1613,7 +1626,7 @@
  * An anchor rather than a button because the destination is a real page on somebody else's
  * site, and it has to behave like one: middle-click, long-press, open in a new tab.
  */
-._track_opefg_61 {
+._track_1v9my_74 {
   display: inline-flex;
   align-items: center;
   gap: var(--space-6);
@@ -1625,7 +1638,7 @@
   text-decoration: none;
 }
 
-._track_opefg_61:focus-visible {
+._track_1v9my_74:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
   border-radius: var(--radius-4);
@@ -1638,7 +1651,7 @@
  * separates, with the hairline drawn on that boundary. The negative margin takes the
  * pixel back out of the layout so the two gaps stay 32 rather than becoming 32 and 33.
  */
-._rule_opefg_86 {
+._rule_1v9my_99 {
   height: 1px;
   margin: 0 0 -1px;
   border: 0;
@@ -1648,20 +1661,20 @@
 /* ── Need help? ────────────────────────────────────────────────────────────── */
 
 /* `mobile/explore`: the heading, then the rows, 6 apart. */
-._help_opefg_96 {
+._help_1v9my_109 {
   display: flex;
   flex-direction: column;
   gap: var(--space-6);
 }
 
-._helpTitle_opefg_102 {
+._helpTitle_1v9my_115 {
   margin: 0;
   font-size: var(--type-heading-md-size);
   line-height: 1.32;
   font-weight: var(--font-weight-bold);
 }
 
-._helpRows_opefg_109 {
+._helpRows_1v9my_122 {
   display: flex;
   flex-direction: column;
 }
@@ -1670,7 +1683,7 @@
  * 48 tall: 16 of padding either side of a 16px chevron, which is what sets the height. The
  * label is cap-trimmed to 10 and is shorter than the mark beside it.
  */
-._helpRow_opefg_109 {
+._helpRow_1v9my_122 {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1700,11 +1713,11 @@
  * padding and its 16px chevron rather than from a `height`, so the hairline adds to the
  * row instead of eating into it. 48, the line, then 48 — the frame's own 97 for the pair.
  */
-._helpRow_opefg_109 + ._helpRow_opefg_109 {
+._helpRow_1v9my_122 + ._helpRow_1v9my_122 {
   border-top: 1px solid var(--color-border-subtle);
 }
 
-._helpRow_opefg_109:focus-visible {
+._helpRow_1v9my_122:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
@@ -1719,7 +1732,7 @@
  * would put a fourth variant in the primitive for a single use — this is the one control
  * in the package drawn this way, so it is drawn here.
  */
-._cancel_opefg_167 {
+._cancel_1v9my_180 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1737,19 +1750,19 @@
   cursor: pointer;
 }
 
-._cancel_opefg_167:focus-visible {
+._cancel_1v9my_180:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
 
 /* Screen 3. The head is a title and one meta line, 8 apart. */
-._cancelledHead_opefg_191 {
+._cancelledHead_1v9my_204 {
   display: flex;
   flex-direction: column;
   gap: var(--space-8);
 }
 
-._cancelledTitle_opefg_197 {
+._cancelledTitle_1v9my_210 {
   margin: 0;
   font-size: var(--type-heading-md-size);
   line-height: 1.32;
@@ -1758,7 +1771,7 @@
 }
 
 /* The reference and the date it was placed, cap-trimmed to 10 on 14. */
-._cancelledMeta_opefg_206 {
+._cancelledMeta_1v9my_219 {
   font-size: var(--type-trimmed-sm-size);
   line-height: 10px;
   padding: 5px 0;

package/package.json

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