@nok-integration/storefront-react 0.18.4 → 0.19.0

package/dist/standalone/styles.css

@@ -5397,7 +5397,7 @@
  * the sticky CTA bar (50), the size-guide sheet (60), the bottom sheets (900) and the
  * toast (1000).
  */
-._header_1yjrk_25 {
+._header_8o3d7_25 {
   position: sticky;
   top: 0;
   z-index: 40;
@@ -5462,7 +5462,7 @@
  * Declared after `.header` so it wins the background: both are one class, so the later
  * rule takes it.
  */
-._floating_1yjrk_44 {
+._floating_8o3d7_44 {
   position: sticky;
   top: 0;
   /* Out of the flow without leaving it: the artwork below starts at y=0 and is drawn
@@ -5519,12 +5519,12 @@
  * Fixed rather than tokenised, like the hero's own palette: it is drawn over a photograph
  * and does not follow the surface.
  */
-._floating_1yjrk_44._scrolled_1yjrk_79 {
+._floating_8o3d7_44._scrolled_8o3d7_79 {
   background: rgba(8, 14, 18, 0.6);
 }
 
 @media (prefers-reduced-motion: reduce) {
-  ._floating_1yjrk_44 {
+  ._floating_8o3d7_44 {
     transition: none;
   }
 }
@@ -5544,7 +5544,7 @@
  * the dark screens, and the light PDP header (5295:75116) has an empty title slot. Written
  * as a static white it would be invisible the first time a host passed one on a light page.
  */
-._title_1yjrk_172 {
+._title_8o3d7_172 {
   flex: 0 0 auto;
   width: 222px;
   min-width: 0;
@@ -5557,7 +5557,27 @@
   white-space: nowrap;
 }
 
-._right_1yjrk_185 {
+/*
+ * The same title, on a bar that carries no icons — the cart (`4661:136810`) and the order
+ * screens.
+ *
+ * The 222px above is measured against a bar with the full 72px icon cluster on the right.
+ * Take the cluster away and `space-between` has 97px of slack to share between two gaps,
+ * which lands the text at x=88.5 — a title floating in the middle of an otherwise empty
+ * bar. The frame puts "Cart" hard against the chevron: box at x=16..40, text from 57, so
+ * one 16px gap and no more. DAZN reported it on 21 Aug 2026.
+ *
+ * `flex: 1 1 auto` rather than a second measured width, because there is nothing on the
+ * right to measure against: the title simply takes what is left, and a long order
+ * reference ellipsises instead of pushing a layout that has no other content in it.
+ */
+._title_8o3d7_172._leading_8o3d7_199 {
+  flex: 1 1 auto;
+  width: auto;
+  margin-left: var(--space-16);
+}
+
+._right_8o3d7_205 {
   display: flex;
   align-items: center;
   gap: var(--space-16);
@@ -5570,12 +5590,12 @@
  * header without a back button would silently re-lay-out rather than simply losing one
  * icon. 24px is the icon box it stands in for.
  */
-._spacer_1yjrk_198 {
+._spacer_8o3d7_218 {
   width: 24px;
   height: 24px;
 }
 
-._iconBtn_1yjrk_203 {
+._iconBtn_8o3d7_223 {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -5591,7 +5611,7 @@
 }
 
 /* Expand the hit area to >=44px without moving the 24px icon off the 16px inset. */
-._iconBtn_1yjrk_203::after {
+._iconBtn_8o3d7_223::after {
   content: '';
   position: absolute;
   inset: -10px;
@@ -5602,12 +5622,12 @@
  * its glyph on the design's centre line — 16px from the right edge, not 12. Its own icon
  * stays 24px.
  */
-._menuBtn_1yjrk_230 {
+._menuBtn_8o3d7_250 {
   width: 32px;
   height: 32px;
 }
 
-._menuBtn_1yjrk_230::after {
+._menuBtn_8o3d7_250::after {
   inset: -6px;
 }
 
@@ -5630,7 +5650,7 @@
  *
  * Sits above the ::after hit area so the number is never painted underneath it.
  */
-._badge_1yjrk_258 {
+._badge_8o3d7_278 {
   position: absolute;
   top: -6px;
   left: 14px;
@@ -5657,13 +5677,13 @@
  * `context=checkout` (5295:74075). Both side slots are the 32px box the frame draws — the
  * left one empty, so the title centres on the screen rather than on what is left over.
  */
-._closeSlot_1yjrk_285 {
+._closeSlot_8o3d7_305 {
   flex: 0 0 auto;
   width: 32px;
   height: 32px;
 }
 
-._closeSlot_1yjrk_285._iconBtn_1yjrk_203::after {
+._closeSlot_8o3d7_305._iconBtn_8o3d7_223::after {
   inset: -6px;
 }
 
@@ -5672,7 +5692,7 @@
  * centres "Order #2304" between two equal slots, so it is the free space, not a measured
  * width. Same size, weight and colour as the shop entry's — one text style, two positions.
  */
-._centred_1yjrk_300 {
+._centred_8o3d7_320 {
   flex: 1 1 auto;
   width: auto;
   text-align: center;

package/dist/styles.css

@@ -5397,7 +5397,7 @@
  * the sticky CTA bar (50), the size-guide sheet (60), the bottom sheets (900) and the
  * toast (1000).
  */
-._header_1yjrk_25 {
+._header_8o3d7_25 {
   position: sticky;
   top: 0;
   z-index: 40;
@@ -5462,7 +5462,7 @@
  * Declared after `.header` so it wins the background: both are one class, so the later
  * rule takes it.
  */
-._floating_1yjrk_44 {
+._floating_8o3d7_44 {
   position: sticky;
   top: 0;
   /* Out of the flow without leaving it: the artwork below starts at y=0 and is drawn
@@ -5519,12 +5519,12 @@
  * Fixed rather than tokenised, like the hero's own palette: it is drawn over a photograph
  * and does not follow the surface.
  */
-._floating_1yjrk_44._scrolled_1yjrk_79 {
+._floating_8o3d7_44._scrolled_8o3d7_79 {
   background: rgba(8, 14, 18, 0.6);
 }
 
 @media (prefers-reduced-motion: reduce) {
-  ._floating_1yjrk_44 {
+  ._floating_8o3d7_44 {
     transition: none;
   }
 }
@@ -5544,7 +5544,7 @@
  * the dark screens, and the light PDP header (5295:75116) has an empty title slot. Written
  * as a static white it would be invisible the first time a host passed one on a light page.
  */
-._title_1yjrk_172 {
+._title_8o3d7_172 {
   flex: 0 0 auto;
   width: 222px;
   min-width: 0;
@@ -5557,7 +5557,27 @@
   white-space: nowrap;
 }
 
-._right_1yjrk_185 {
+/*
+ * The same title, on a bar that carries no icons — the cart (`4661:136810`) and the order
+ * screens.
+ *
+ * The 222px above is measured against a bar with the full 72px icon cluster on the right.
+ * Take the cluster away and `space-between` has 97px of slack to share between two gaps,
+ * which lands the text at x=88.5 — a title floating in the middle of an otherwise empty
+ * bar. The frame puts "Cart" hard against the chevron: box at x=16..40, text from 57, so
+ * one 16px gap and no more. DAZN reported it on 21 Aug 2026.
+ *
+ * `flex: 1 1 auto` rather than a second measured width, because there is nothing on the
+ * right to measure against: the title simply takes what is left, and a long order
+ * reference ellipsises instead of pushing a layout that has no other content in it.
+ */
+._title_8o3d7_172._leading_8o3d7_199 {
+  flex: 1 1 auto;
+  width: auto;
+  margin-left: var(--space-16);
+}
+
+._right_8o3d7_205 {
   display: flex;
   align-items: center;
   gap: var(--space-16);
@@ -5570,12 +5590,12 @@
  * header without a back button would silently re-lay-out rather than simply losing one
  * icon. 24px is the icon box it stands in for.
  */
-._spacer_1yjrk_198 {
+._spacer_8o3d7_218 {
   width: 24px;
   height: 24px;
 }
 
-._iconBtn_1yjrk_203 {
+._iconBtn_8o3d7_223 {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -5591,7 +5611,7 @@
 }
 
 /* Expand the hit area to >=44px without moving the 24px icon off the 16px inset. */
-._iconBtn_1yjrk_203::after {
+._iconBtn_8o3d7_223::after {
   content: '';
   position: absolute;
   inset: -10px;
@@ -5602,12 +5622,12 @@
  * its glyph on the design's centre line — 16px from the right edge, not 12. Its own icon
  * stays 24px.
  */
-._menuBtn_1yjrk_230 {
+._menuBtn_8o3d7_250 {
   width: 32px;
   height: 32px;
 }
 
-._menuBtn_1yjrk_230::after {
+._menuBtn_8o3d7_250::after {
   inset: -6px;
 }
 
@@ -5630,7 +5650,7 @@
  *
  * Sits above the ::after hit area so the number is never painted underneath it.
  */
-._badge_1yjrk_258 {
+._badge_8o3d7_278 {
   position: absolute;
   top: -6px;
   left: 14px;
@@ -5657,13 +5677,13 @@
  * `context=checkout` (5295:74075). Both side slots are the 32px box the frame draws — the
  * left one empty, so the title centres on the screen rather than on what is left over.
  */
-._closeSlot_1yjrk_285 {
+._closeSlot_8o3d7_305 {
   flex: 0 0 auto;
   width: 32px;
   height: 32px;
 }
 
-._closeSlot_1yjrk_285._iconBtn_1yjrk_203::after {
+._closeSlot_8o3d7_305._iconBtn_8o3d7_223::after {
   inset: -6px;
 }
 
@@ -5672,7 +5692,7 @@
  * centres "Order #2304" between two equal slots, so it is the free space, not a measured
  * width. Same size, weight and colour as the shop entry's — one text style, two positions.
  */
-._centred_1yjrk_300 {
+._centred_8o3d7_320 {
   flex: 1 1 auto;
   width: auto;
   text-align: center;

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@nok-integration/storefront-react",
-  "version": "0.18.4",
+  "version": "0.19.0",
   "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,32 @@
     "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": {
+    "@raqmix/contracts": "^2.0.0",
+    "@microsoft/api-extractor": "^7.58.12",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "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/"
   }
 }