@nok-integration/storefront-react 0.19.0 → 0.19.1

package/dist/index.d.ts

@@ -5997,16 +5997,38 @@ declare const SupportTicketRequest: z.ZodObject<{
      * a page showing another customer's data.
      */
     image_url: z.ZodOptional<z.ZodString>;
+    /**
+     * The fan this ticket belongs to — **only when the caller is a DAZN service holding a
+     * support API key**, and refused outright when the caller holds a shop session.
+     *
+     * Optional here because one field cannot be required of one caller and forbidden to
+     * another in a single schema. The engine decides which rule applies from how the
+     * request authenticated, and rejects the wrong combination either way: absent under a
+     * key is a 400, present under a session is a 400.
+     *
+     * **This is not a relaxation of the rule it looks like a relaxation of.** The rule is
+     * that an *untrusted* caller may not name the fan: a browser that could would let
+     * anyone file a ticket as anyone, and CS would answer it in good faith with another
+     * customer's account detail. A backend authenticated by a shared secret is not that
+     * caller. It is authoritative for its own users in exactly the way order intake
+     * already is when DAZN tells us whose order they have taken.
+     *
+     * Added for DAZN's Contact Support form, which lives outside the shop and therefore
+     * has no shop session to read an identity from (21 Aug 2026).
+     */
+    dazn_user_id: z.ZodOptional<z.ZodString>;
 }, "strict", z.ZodTypeAny, {
     email: string;
     description: string;
     category: string;
     image_url?: string | undefined;
+    dazn_user_id?: string | undefined;
 }, {
     email: string;
     description: string;
     category: string;
     image_url?: string | undefined;
+    dazn_user_id?: string | undefined;
 }>;
 
 declare type SupportTicketRequest = z.infer<typeof SupportTicketRequest>;

package/dist/index.mjs

@@ -5141,7 +5141,27 @@ function requireSupport() {
        * CS agent's browser fetch whatever a stranger typed, from inside DAZN's network, on
        * a page showing another customer's data.
        */
-      image_url: zod_1.z.string().url().max(2048).optional()
+      image_url: zod_1.z.string().url().max(2048).optional(),
+      /**
+       * The fan this ticket belongs to — **only when the caller is a DAZN service holding a
+       * support API key**, and refused outright when the caller holds a shop session.
+       *
+       * Optional here because one field cannot be required of one caller and forbidden to
+       * another in a single schema. The engine decides which rule applies from how the
+       * request authenticated, and rejects the wrong combination either way: absent under a
+       * key is a 400, present under a session is a 400.
+       *
+       * **This is not a relaxation of the rule it looks like a relaxation of.** The rule is
+       * that an *untrusted* caller may not name the fan: a browser that could would let
+       * anyone file a ticket as anyone, and CS would answer it in good faith with another
+       * customer's account detail. A backend authenticated by a shared secret is not that
+       * caller. It is authoritative for its own users in exactly the way order intake
+       * already is when DAZN tells us whose order they have taken.
+       *
+       * Added for DAZN's Contact Support form, which lives outside the shop and therefore
+       * has no shop session to read an identity from (21 Aug 2026).
+       */
+      dazn_user_id: zod_1.z.string().trim().min(1).max(128).optional()
     }).strict();
     exports.SupportTicket = zod_1.z.object({
       reference: zod_1.z.string().min(1),
@@ -8904,15 +8924,15 @@ function CartSheetProvider({ children }) {
     isOpen && /* @__PURE__ */ jsx(BottomSheet, { open: true, onClose: close2, title: t("Cart"), children: /* @__PURE__ */ jsx(NoScreenTitle, { children: /* @__PURE__ */ jsx(CartView, { onContinueShopping: close2 }) }) })
   ] });
 }
-const gallery = "_gallery_10mch_1";
-const track$2 = "_track_10mch_8";
-const slide$1 = "_slide_10mch_32";
-const image$4 = "_image_10mch_39";
-const placeholder$1 = "_placeholder_10mch_43";
-const share = "_share_10mch_50";
-const dots$2 = "_dots_10mch_67";
-const dot$2 = "_dot_10mch_67";
-const dotActive$2 = "_dotActive_10mch_91";
+const gallery = "_gallery_9e68b_1";
+const track$2 = "_track_9e68b_8";
+const slide$1 = "_slide_9e68b_32";
+const image$4 = "_image_9e68b_39";
+const placeholder$1 = "_placeholder_9e68b_43";
+const share = "_share_9e68b_50";
+const dots$2 = "_dots_9e68b_83";
+const dot$2 = "_dot_9e68b_83";
+const dotActive$2 = "_dotActive_9e68b_134";
 const styles$i = {
   gallery,
   track: track$2,
@@ -9136,16 +9156,16 @@ function SizeGuideSheet({ guide, onClose }) {
     }
   ) });
 }
-const root$2 = "_root_9zj90_1";
-const header$3 = "_header_9zj90_7";
-const title$9 = "_title_9zj90_12";
-const chips = "_chips_9zj90_20";
-const chip = "_chip_9zj90_20";
-const selected$2 = "_selected_9zj90_44";
-const disabled$1 = "_disabled_9zj90_56";
-const error = "_error_9zj90_64";
-const sizeGuide = "_sizeGuide_9zj90_71";
-const chevron$2 = "_chevron_9zj90_85";
+const root$2 = "_root_6sbl9_1";
+const header$3 = "_header_6sbl9_7";
+const title$9 = "_title_6sbl9_12";
+const chips = "_chips_6sbl9_20";
+const chip = "_chip_6sbl9_20";
+const selected$2 = "_selected_6sbl9_44";
+const disabled$1 = "_disabled_6sbl9_56";
+const error = "_error_6sbl9_64";
+const sizeGuide = "_sizeGuide_6sbl9_71";
+const chevron$2 = "_chevron_6sbl9_87";
 const styles$g = {
   root: root$2,
   header: header$3,
@@ -9345,13 +9365,13 @@ function VariantSelector({
     }) })
   ] });
 }
-const root = "_root_t4qba_2";
-const group = "_group_t4qba_8";
-const title$7 = "_title_t4qba_14";
-const body$1 = "_body_t4qba_22";
-const paragraph = "_paragraph_t4qba_26";
-const clamped = "_clamped_t4qba_46";
-const toggle = "_toggle_t4qba_51";
+const root = "_root_9cj0g_2";
+const group = "_group_9cj0g_8";
+const title$7 = "_title_9cj0g_14";
+const body$1 = "_body_9cj0g_22";
+const paragraph = "_paragraph_9cj0g_26";
+const clamped = "_clamped_9cj0g_46";
+const toggle = "_toggle_9cj0g_51";
 const styles$d = {
   root,
   group,

package/dist/standalone/storefront.mjs

@@ -5141,7 +5141,27 @@ function requireSupport() {
        * CS agent's browser fetch whatever a stranger typed, from inside DAZN's network, on
        * a page showing another customer's data.
        */
-      image_url: zod_1.z.string().url().max(2048).optional()
+      image_url: zod_1.z.string().url().max(2048).optional(),
+      /**
+       * The fan this ticket belongs to — **only when the caller is a DAZN service holding a
+       * support API key**, and refused outright when the caller holds a shop session.
+       *
+       * Optional here because one field cannot be required of one caller and forbidden to
+       * another in a single schema. The engine decides which rule applies from how the
+       * request authenticated, and rejects the wrong combination either way: absent under a
+       * key is a 400, present under a session is a 400.
+       *
+       * **This is not a relaxation of the rule it looks like a relaxation of.** The rule is
+       * that an *untrusted* caller may not name the fan: a browser that could would let
+       * anyone file a ticket as anyone, and CS would answer it in good faith with another
+       * customer's account detail. A backend authenticated by a shared secret is not that
+       * caller. It is authoritative for its own users in exactly the way order intake
+       * already is when DAZN tells us whose order they have taken.
+       *
+       * Added for DAZN's Contact Support form, which lives outside the shop and therefore
+       * has no shop session to read an identity from (21 Aug 2026).
+       */
+      dazn_user_id: zod_1.z.string().trim().min(1).max(128).optional()
     }).strict();
     exports.SupportTicket = zod_1.z.object({
       reference: zod_1.z.string().min(1),
@@ -8904,15 +8924,15 @@ function CartSheetProvider({ children }) {
     isOpen && /* @__PURE__ */ jsx(BottomSheet, { open: true, onClose: close2, title: t("Cart"), children: /* @__PURE__ */ jsx(NoScreenTitle, { children: /* @__PURE__ */ jsx(CartView, { onContinueShopping: close2 }) }) })
   ] });
 }
-const gallery = "_gallery_10mch_1";
-const track$2 = "_track_10mch_8";
-const slide$1 = "_slide_10mch_32";
-const image$4 = "_image_10mch_39";
-const placeholder$1 = "_placeholder_10mch_43";
-const share = "_share_10mch_50";
-const dots$2 = "_dots_10mch_67";
-const dot$2 = "_dot_10mch_67";
-const dotActive$2 = "_dotActive_10mch_91";
+const gallery = "_gallery_9e68b_1";
+const track$2 = "_track_9e68b_8";
+const slide$1 = "_slide_9e68b_32";
+const image$4 = "_image_9e68b_39";
+const placeholder$1 = "_placeholder_9e68b_43";
+const share = "_share_9e68b_50";
+const dots$2 = "_dots_9e68b_83";
+const dot$2 = "_dot_9e68b_83";
+const dotActive$2 = "_dotActive_9e68b_134";
 const styles$i = {
   gallery,
   track: track$2,
@@ -9136,16 +9156,16 @@ function SizeGuideSheet({ guide, onClose }) {
     }
   ) });
 }
-const root$2 = "_root_9zj90_1";
-const header$3 = "_header_9zj90_7";
-const title$9 = "_title_9zj90_12";
-const chips = "_chips_9zj90_20";
-const chip = "_chip_9zj90_20";
-const selected$2 = "_selected_9zj90_44";
-const disabled$1 = "_disabled_9zj90_56";
-const error = "_error_9zj90_64";
-const sizeGuide = "_sizeGuide_9zj90_71";
-const chevron$2 = "_chevron_9zj90_85";
+const root$2 = "_root_6sbl9_1";
+const header$3 = "_header_6sbl9_7";
+const title$9 = "_title_6sbl9_12";
+const chips = "_chips_6sbl9_20";
+const chip = "_chip_6sbl9_20";
+const selected$2 = "_selected_6sbl9_44";
+const disabled$1 = "_disabled_6sbl9_56";
+const error = "_error_6sbl9_64";
+const sizeGuide = "_sizeGuide_6sbl9_71";
+const chevron$2 = "_chevron_6sbl9_87";
 const styles$g = {
   root: root$2,
   header: header$3,
@@ -9345,13 +9365,13 @@ function VariantSelector({
     }) })
   ] });
 }
-const root = "_root_t4qba_2";
-const group = "_group_t4qba_8";
-const title$7 = "_title_t4qba_14";
-const body$1 = "_body_t4qba_22";
-const paragraph = "_paragraph_t4qba_26";
-const clamped = "_clamped_t4qba_46";
-const toggle = "_toggle_t4qba_51";
+const root = "_root_9cj0g_2";
+const group = "_group_9cj0g_8";
+const title$7 = "_title_9cj0g_14";
+const body$1 = "_body_9cj0g_22";
+const paragraph = "_paragraph_9cj0g_26";
+const clamped = "_clamped_9cj0g_46";
+const toggle = "_toggle_9cj0g_51";
 const styles$d = {
   root,
   group,

package/dist/standalone/styles.css

@@ -3647,14 +3647,14 @@
   gap: var(--space-20);
 }
 
-._gallery_10mch_1 {
+._gallery_9e68b_1 {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
 }
 
-._track_10mch_8 {
+._track_9e68b_8 {
   display: flex;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
@@ -3674,30 +3674,46 @@
   scrollbar-width: none;
 }
 
-._track_10mch_8::-webkit-scrollbar {
+._track_9e68b_8::-webkit-scrollbar {
   display: none;
 }
 
-._slide_10mch_32 {
+._slide_9e68b_32 {
   position: relative;
   flex: 0 0 100%;
   scroll-snap-align: center;
   aspect-ratio: 375 / 475;
 }
 
-._image_10mch_39 {
+._image_9e68b_39 {
   object-fit: cover;
 }
 
-._placeholder_10mch_43 {
+._placeholder_9e68b_43 {
   width: 100%;
   aspect-ratio: 375 / 475;
   background: var(--color-surface-soft);
 }
 
 /* Share button — top-right chrome over the image (mobile/button: 32px, soft, radius-8). */
-._share_10mch_50 {
+._share_9e68b_50 {
   position: absolute;
+  /*
+   * **Without this the button is drawn and cannot be tapped.**
+   *
+   * `.share` is the gallery's first child and the image track follows it. Both the button
+   * and the `fill` images inside the track are absolutely positioned and nothing here
+   * declared a `z-index`, so painting order fell to DOM order and every image won. A tap
+   * anywhere on the icon landed on the photograph — the control looked completely normal
+   * and did nothing, which is the failure mode this repo has been bitten by before.
+   *
+   * The pagination dots were never affected: they come *after* the track, so they were
+   * already on top by accident. That is why this survived review.
+   *
+   * Found by hit-testing `document.elementFromPoint` at the button's own centre, not by
+   * reading the stylesheet — from the CSS it looks correct.
+   */
+  z-index: 1;
   top: var(--space-16);
   right: var(--space-16);
   display: inline-flex;
@@ -3713,13 +3729,25 @@
   cursor: pointer;
 }
 
-._dots_10mch_67 {
+._dots_9e68b_83 {
   display: flex;
   justify-content: center;
   gap: var(--space-6);
 }
 
-._dot_10mch_67 {
+/*
+ * The icon is drawn at 32px because that is the box the design gives it; the TAP is 44px.
+ * Same trick as the header's controls — a negative-inset pseudo-element, so the hit area
+ * grows and not one pixel moves. Measured 32px of clear space above it, so symmetric
+ * expansion cannot reach the control overhead.
+ */
+._share_9e68b_50::after {
+  content: '';
+  position: absolute;
+  inset: -6px;
+}
+
+._dot_9e68b_83 {
   width: 8px;
   height: 8px;
   padding: 0;
@@ -3731,13 +3759,28 @@
   position: relative;
 }
 
-._dot_10mch_67::after {
+/*
+ * The hit area is tall, and only as wide as the dot's own column.
+ *
+ * It used to be `inset: -18px` on all four sides, which reads as "44px target" and behaved
+ * as the opposite. The dots are 8px with a 6px gap — a 14px pitch — so an 18px horizontal
+ * bleed put every dot's hit area completely over its neighbour's, and the later sibling
+ * paints on top. **Only the last dot was tappable**; aiming at the first selected the
+ * second. Measured by walking `elementFromPoint` outward from each dot's centre.
+ *
+ * 3px is half the gap, so the columns tile exactly and never overlap. That makes each dot
+ * 14px wide, which is under the 44px guideline and is the widest the design's own spacing
+ * allows without one dot stealing another's taps — a reliable 14x44 beats a nominal 44x44
+ * that belongs to the wrong control. Swiping the track remains the primary affordance, and
+ * it is unaffected.
+ */
+._dot_9e68b_83::after {
   content: '';
   position: absolute;
-  inset: -18px;
+  inset: -18px -3px;
 }
 
-._dotActive_10mch_91 {
+._dotActive_9e68b_134 {
   background: var(--color-surface-max);
 }
 /*
@@ -4115,18 +4158,18 @@
     animation: none;
   }
 }
-._root_9zj90_1 {
+._root_6sbl9_1 {
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
 }
 
-._header_9zj90_7 {
+._header_6sbl9_7 {
   display: flex;
   align-items: center;
 }
 
-._title_9zj90_12 {
+._title_6sbl9_12 {
   margin: 0;
   font-size: var(--type-trimmed-md-size);
   line-height: var(--type-trimmed-md-line);
@@ -4134,14 +4177,14 @@
   color: var(--color-text-default);
 }
 
-._chips_9zj90_20 {
+._chips_6sbl9_20 {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-8);
 }
 
 /* 48px square chips per the mobile/pdp/size component (radius-xs, not radius-sm). */
-._chip_9zj90_20 {
+._chip_6sbl9_20 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -4158,7 +4201,7 @@
   cursor: pointer;
 }
 
-._selected_9zj90_44 {
+._selected_6sbl9_44 {
   border-color: var(--color-surface-max);
   background: var(--color-surface-max);
   color: var(--color-text-strong);
@@ -4170,7 +4213,7 @@
  * range reads complete"), so a fan can see the range runs to XXL and that their size is
  * the one that has gone, rather than seeing a range with a hole in it.
  */
-._disabled_9zj90_56 {
+._disabled_6sbl9_56 {
   cursor: not-allowed;
   border-style: dashed;
   color: var(--color-text-disabled);
@@ -4178,14 +4221,16 @@
 
 /* Figma: regular weight, critical token. Bold read as a second heading next to the
    16px "Size" label above it. */
-._error_9zj90_64 {
+._error_6sbl9_64 {
   margin: 0;
   font-size: var(--type-trimmed-sm-size);
   font-weight: var(--font-weight-regular);
   color: var(--color-state-surface-critical-default);
 }
 
-._sizeGuide_9zj90_71 {
+._sizeGuide_6sbl9_71 {
+  /* Anchors the hit-area pseudo-element below. */
+  position: relative;
   display: inline-flex;
   align-items: center;
   gap: var(--space-2);
@@ -4199,9 +4244,23 @@
   cursor: pointer;
 }
 
-._chevron_9zj90_85 {
+._chevron_6sbl9_87 {
   display: block;
 }
+
+/*
+ * An 18px-tall text button is a 44px tap target.
+ *
+ * **Asymmetric on purpose.** There are only 11px of clear space between this row and the
+ * size chips above it, so a symmetric -13px would put this control's hit area *over* the
+ * chips — and a fan aiming at XL would open the size guide instead. It grows 8px up (3px
+ * of the gap left clear) and 18px down, into empty space: 8 + 18 + 18 = 44.
+ */
+._sizeGuide_6sbl9_71::after {
+  content: '';
+  position: absolute;
+  inset: -8px -8px -18px;
+}
 ._root_1h4ny_1 {
   display: flex;
   flex-direction: column;
@@ -4362,19 +4421,19 @@
   background: var(--color-surface-soft);
 }
 /* Figma mobile/pdp/details: heading+body group, then more/Less 4px under it. */
-._root_t4qba_2 {
+._root_9cj0g_2 {
   display: flex;
   flex-direction: column;
   gap: var(--space-4);
 }
 
-._group_t4qba_8 {
+._group_9cj0g_8 {
   display: flex;
   flex-direction: column;
   gap: var(--space-8);
 }
 
-._title_t4qba_14 {
+._title_9cj0g_14 {
   margin: 0;
   font-size: var(--type-trimmed-md-size);
   line-height: var(--type-trimmed-md-line);
@@ -4382,18 +4441,18 @@
   color: var(--color-text-default);
 }
 
-._body_t4qba_22 {
+._body_9cj0g_22 {
   color: var(--color-text-subtle);
 }
 
-._paragraph_t4qba_26 {
+._paragraph_9cj0g_26 {
   margin: 0;
   font-size: var(--type-paragraph-size);
   line-height: var(--type-paragraph-line);
 }
 
 /* paragraph-spacing/lg between paragraphs, nothing after the last. */
-._paragraph_t4qba_26 + ._paragraph_t4qba_26 {
+._paragraph_9cj0g_26 + ._paragraph_9cj0g_26 {
   margin-top: var(--space-12);
 }
 
@@ -4406,12 +4465,14 @@
  * lines is exactly `font-size × line-height × 3`, so the cut lands on a line boundary
  * rather than through the middle of one.
  */
-._clamped_t4qba_46 {
+._clamped_9cj0g_46 {
   max-height: calc(var(--type-paragraph-size) * var(--type-paragraph-line) * 3);
   overflow: hidden;
 }
 
-._toggle_t4qba_51 {
+._toggle_9cj0g_51 {
+  /* Anchors the hit-area pseudo-element below. */
+  position: relative;
   align-self: flex-start;
   padding: 0;
   border: none;
@@ -4424,6 +4485,16 @@
   font-weight: var(--font-weight-bold);
   cursor: pointer;
 }
+
+/*
+ * 36x25 drawn, 44x45 tapped. The control sits in clear space — 266px above, 72px below —
+ * so this cannot overlap anything.
+ */
+._toggle_9cj0g_51::after {
+  content: '';
+  position: absolute;
+  inset: -10px -4px;
+}
 ._row_l4edh_1 {
   display: flex;
   flex-wrap: wrap;

package/dist/styles.css

@@ -3647,14 +3647,14 @@
   gap: var(--space-20);
 }
 
-._gallery_10mch_1 {
+._gallery_9e68b_1 {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
 }
 
-._track_10mch_8 {
+._track_9e68b_8 {
   display: flex;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
@@ -3674,30 +3674,46 @@
   scrollbar-width: none;
 }
 
-._track_10mch_8::-webkit-scrollbar {
+._track_9e68b_8::-webkit-scrollbar {
   display: none;
 }
 
-._slide_10mch_32 {
+._slide_9e68b_32 {
   position: relative;
   flex: 0 0 100%;
   scroll-snap-align: center;
   aspect-ratio: 375 / 475;
 }
 
-._image_10mch_39 {
+._image_9e68b_39 {
   object-fit: cover;
 }
 
-._placeholder_10mch_43 {
+._placeholder_9e68b_43 {
   width: 100%;
   aspect-ratio: 375 / 475;
   background: var(--color-surface-soft);
 }
 
 /* Share button — top-right chrome over the image (mobile/button: 32px, soft, radius-8). */
-._share_10mch_50 {
+._share_9e68b_50 {
   position: absolute;
+  /*
+   * **Without this the button is drawn and cannot be tapped.**
+   *
+   * `.share` is the gallery's first child and the image track follows it. Both the button
+   * and the `fill` images inside the track are absolutely positioned and nothing here
+   * declared a `z-index`, so painting order fell to DOM order and every image won. A tap
+   * anywhere on the icon landed on the photograph — the control looked completely normal
+   * and did nothing, which is the failure mode this repo has been bitten by before.
+   *
+   * The pagination dots were never affected: they come *after* the track, so they were
+   * already on top by accident. That is why this survived review.
+   *
+   * Found by hit-testing `document.elementFromPoint` at the button's own centre, not by
+   * reading the stylesheet — from the CSS it looks correct.
+   */
+  z-index: 1;
   top: var(--space-16);
   right: var(--space-16);
   display: inline-flex;
@@ -3713,13 +3729,25 @@
   cursor: pointer;
 }
 
-._dots_10mch_67 {
+._dots_9e68b_83 {
   display: flex;
   justify-content: center;
   gap: var(--space-6);
 }
 
-._dot_10mch_67 {
+/*
+ * The icon is drawn at 32px because that is the box the design gives it; the TAP is 44px.
+ * Same trick as the header's controls — a negative-inset pseudo-element, so the hit area
+ * grows and not one pixel moves. Measured 32px of clear space above it, so symmetric
+ * expansion cannot reach the control overhead.
+ */
+._share_9e68b_50::after {
+  content: '';
+  position: absolute;
+  inset: -6px;
+}
+
+._dot_9e68b_83 {
   width: 8px;
   height: 8px;
   padding: 0;
@@ -3731,13 +3759,28 @@
   position: relative;
 }
 
-._dot_10mch_67::after {
+/*
+ * The hit area is tall, and only as wide as the dot's own column.
+ *
+ * It used to be `inset: -18px` on all four sides, which reads as "44px target" and behaved
+ * as the opposite. The dots are 8px with a 6px gap — a 14px pitch — so an 18px horizontal
+ * bleed put every dot's hit area completely over its neighbour's, and the later sibling
+ * paints on top. **Only the last dot was tappable**; aiming at the first selected the
+ * second. Measured by walking `elementFromPoint` outward from each dot's centre.
+ *
+ * 3px is half the gap, so the columns tile exactly and never overlap. That makes each dot
+ * 14px wide, which is under the 44px guideline and is the widest the design's own spacing
+ * allows without one dot stealing another's taps — a reliable 14x44 beats a nominal 44x44
+ * that belongs to the wrong control. Swiping the track remains the primary affordance, and
+ * it is unaffected.
+ */
+._dot_9e68b_83::after {
   content: '';
   position: absolute;
-  inset: -18px;
+  inset: -18px -3px;
 }
 
-._dotActive_10mch_91 {
+._dotActive_9e68b_134 {
   background: var(--color-surface-max);
 }
 /*
@@ -4115,18 +4158,18 @@
     animation: none;
   }
 }
-._root_9zj90_1 {
+._root_6sbl9_1 {
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
 }
 
-._header_9zj90_7 {
+._header_6sbl9_7 {
   display: flex;
   align-items: center;
 }
 
-._title_9zj90_12 {
+._title_6sbl9_12 {
   margin: 0;
   font-size: var(--type-trimmed-md-size);
   line-height: var(--type-trimmed-md-line);
@@ -4134,14 +4177,14 @@
   color: var(--color-text-default);
 }
 
-._chips_9zj90_20 {
+._chips_6sbl9_20 {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-8);
 }
 
 /* 48px square chips per the mobile/pdp/size component (radius-xs, not radius-sm). */
-._chip_9zj90_20 {
+._chip_6sbl9_20 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -4158,7 +4201,7 @@
   cursor: pointer;
 }
 
-._selected_9zj90_44 {
+._selected_6sbl9_44 {
   border-color: var(--color-surface-max);
   background: var(--color-surface-max);
   color: var(--color-text-strong);
@@ -4170,7 +4213,7 @@
  * range reads complete"), so a fan can see the range runs to XXL and that their size is
  * the one that has gone, rather than seeing a range with a hole in it.
  */
-._disabled_9zj90_56 {
+._disabled_6sbl9_56 {
   cursor: not-allowed;
   border-style: dashed;
   color: var(--color-text-disabled);
@@ -4178,14 +4221,16 @@
 
 /* Figma: regular weight, critical token. Bold read as a second heading next to the
    16px "Size" label above it. */
-._error_9zj90_64 {
+._error_6sbl9_64 {
   margin: 0;
   font-size: var(--type-trimmed-sm-size);
   font-weight: var(--font-weight-regular);
   color: var(--color-state-surface-critical-default);
 }
 
-._sizeGuide_9zj90_71 {
+._sizeGuide_6sbl9_71 {
+  /* Anchors the hit-area pseudo-element below. */
+  position: relative;
   display: inline-flex;
   align-items: center;
   gap: var(--space-2);
@@ -4199,9 +4244,23 @@
   cursor: pointer;
 }
 
-._chevron_9zj90_85 {
+._chevron_6sbl9_87 {
   display: block;
 }
+
+/*
+ * An 18px-tall text button is a 44px tap target.
+ *
+ * **Asymmetric on purpose.** There are only 11px of clear space between this row and the
+ * size chips above it, so a symmetric -13px would put this control's hit area *over* the
+ * chips — and a fan aiming at XL would open the size guide instead. It grows 8px up (3px
+ * of the gap left clear) and 18px down, into empty space: 8 + 18 + 18 = 44.
+ */
+._sizeGuide_6sbl9_71::after {
+  content: '';
+  position: absolute;
+  inset: -8px -8px -18px;
+}
 ._root_1h4ny_1 {
   display: flex;
   flex-direction: column;
@@ -4362,19 +4421,19 @@
   background: var(--color-surface-soft);
 }
 /* Figma mobile/pdp/details: heading+body group, then more/Less 4px under it. */
-._root_t4qba_2 {
+._root_9cj0g_2 {
   display: flex;
   flex-direction: column;
   gap: var(--space-4);
 }
 
-._group_t4qba_8 {
+._group_9cj0g_8 {
   display: flex;
   flex-direction: column;
   gap: var(--space-8);
 }
 
-._title_t4qba_14 {
+._title_9cj0g_14 {
   margin: 0;
   font-size: var(--type-trimmed-md-size);
   line-height: var(--type-trimmed-md-line);
@@ -4382,18 +4441,18 @@
   color: var(--color-text-default);
 }
 
-._body_t4qba_22 {
+._body_9cj0g_22 {
   color: var(--color-text-subtle);
 }
 
-._paragraph_t4qba_26 {
+._paragraph_9cj0g_26 {
   margin: 0;
   font-size: var(--type-paragraph-size);
   line-height: var(--type-paragraph-line);
 }
 
 /* paragraph-spacing/lg between paragraphs, nothing after the last. */
-._paragraph_t4qba_26 + ._paragraph_t4qba_26 {
+._paragraph_9cj0g_26 + ._paragraph_9cj0g_26 {
   margin-top: var(--space-12);
 }
 
@@ -4406,12 +4465,14 @@
  * lines is exactly `font-size × line-height × 3`, so the cut lands on a line boundary
  * rather than through the middle of one.
  */
-._clamped_t4qba_46 {
+._clamped_9cj0g_46 {
   max-height: calc(var(--type-paragraph-size) * var(--type-paragraph-line) * 3);
   overflow: hidden;
 }
 
-._toggle_t4qba_51 {
+._toggle_9cj0g_51 {
+  /* Anchors the hit-area pseudo-element below. */
+  position: relative;
   align-self: flex-start;
   padding: 0;
   border: none;
@@ -4424,6 +4485,16 @@
   font-weight: var(--font-weight-bold);
   cursor: pointer;
 }
+
+/*
+ * 36x25 drawn, 44x45 tapped. The control sits in clear space — 266px above, 72px below —
+ * so this cannot overlap anything.
+ */
+._toggle_9cj0g_51::after {
+  content: '';
+  position: absolute;
+  inset: -10px -4px;
+}
 ._row_l4edh_1 {
   display: flex;
   flex-wrap: wrap;

package/package.json

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