@nok-integration/storefront-react 0.18.2 → 0.18.4

package/dist/index.mjs

@@ -6180,6 +6180,7 @@ function Caret() {
   ) });
 }
 let nextId = 0;
+const DISMISS_AFTER_MS = 2e3;
 function ToastProvider({ children }) {
   const [toasts, setToasts] = useState([]);
   const viewportRef = useRef(null);
@@ -6206,7 +6207,7 @@ function ToastProvider({ children }) {
       }
       const id = nextId++;
       setToasts((prev) => [...prev, { ...opts, id, message: message2, tone, action: action2 }]);
-      setTimeout(() => dismiss(id), action2 ? 8e3 : 4e3);
+      setTimeout(() => dismiss(id), DISMISS_AFTER_MS);
     },
     [dismiss, hostOwnsNotifications, emit]
   );
@@ -6925,20 +6926,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,

package/dist/standalone/storefront.mjs

@@ -6180,6 +6180,7 @@ function Caret() {
   ) });
 }
 let nextId = 0;
+const DISMISS_AFTER_MS = 2e3;
 function ToastProvider({ children }) {
   const [toasts, setToasts] = useState([]);
   const viewportRef = useRef(null);
@@ -6206,7 +6207,7 @@ function ToastProvider({ children }) {
       }
       const id = nextId++;
       setToasts((prev) => [...prev, { ...opts, id, message: message2, tone, action: action2 }]);
-      setTimeout(() => dismiss(id), action2 ? 8e3 : 4e3);
+      setTimeout(() => dismiss(id), DISMISS_AFTER_MS);
     },
     [dismiss, hostOwnsNotifications, emit]
   );
@@ -6925,20 +6926,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,

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.2",
+  "version": "0.18.4",
   "description": "Mountable React storefront components: catalogue, product detail and cart, mounted directly into a host DOM tree. No iframe.",
   "license": "UNLICENSED",
   "type": "module",