@nok-integration/storefront-react 0.19.31 → 0.19.33

package/dist/index.d.ts

@@ -444,6 +444,7 @@ declare const CategoryPage: z.ZodObject<{
                 currency: string;
             }>>;
             media: z.ZodArray<z.ZodString, "many">;
+            media_by_colour: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodArray<z.ZodString, "many">>>;
             variants: z.ZodArray<z.ZodObject<{
                 sku: z.ZodString;
                 attributes: z.ZodRecord<z.ZodString, z.ZodString>;
@@ -542,6 +543,7 @@ declare const CategoryPage: z.ZodObject<{
                 amount: number;
                 currency: string;
             } | undefined;
+            media_by_colour?: Record<string, string[]> | undefined;
             badges?: string[] | undefined;
             promo?: {
                 message: string;
@@ -582,6 +584,7 @@ declare const CategoryPage: z.ZodObject<{
                 amount: number;
                 currency: string;
             } | undefined;
+            media_by_colour?: Record<string, string[]> | undefined;
             badges?: string[] | undefined;
             promo?: {
                 message: string;
@@ -626,6 +629,7 @@ declare const CategoryPage: z.ZodObject<{
                 amount: number;
                 currency: string;
             } | undefined;
+            media_by_colour?: Record<string, string[]> | undefined;
             badges?: string[] | undefined;
             promo?: {
                 message: string;
@@ -670,6 +674,7 @@ declare const CategoryPage: z.ZodObject<{
                 amount: number;
                 currency: string;
             } | undefined;
+            media_by_colour?: Record<string, string[]> | undefined;
             badges?: string[] | undefined;
             promo?: {
                 message: string;
@@ -730,6 +735,7 @@ declare const CategoryPage: z.ZodObject<{
                 currency: string;
             }>>;
             media: z.ZodArray<z.ZodString, "many">;
+            media_by_colour: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodArray<z.ZodString, "many">>>;
             variants: z.ZodArray<z.ZodObject<{
                 sku: z.ZodString;
                 attributes: z.ZodRecord<z.ZodString, z.ZodString>;
@@ -828,6 +834,7 @@ declare const CategoryPage: z.ZodObject<{
                 amount: number;
                 currency: string;
             } | undefined;
+            media_by_colour?: Record<string, string[]> | undefined;
             badges?: string[] | undefined;
             promo?: {
                 message: string;
@@ -868,6 +875,7 @@ declare const CategoryPage: z.ZodObject<{
                 amount: number;
                 currency: string;
             } | undefined;
+            media_by_colour?: Record<string, string[]> | undefined;
             badges?: string[] | undefined;
             promo?: {
                 message: string;
@@ -911,6 +919,7 @@ declare const CategoryPage: z.ZodObject<{
                 amount: number;
                 currency: string;
             } | undefined;
+            media_by_colour?: Record<string, string[]> | undefined;
             badges?: string[] | undefined;
             promo?: {
                 message: string;
@@ -955,6 +964,7 @@ declare const CategoryPage: z.ZodObject<{
                 amount: number;
                 currency: string;
             } | undefined;
+            media_by_colour?: Record<string, string[]> | undefined;
             badges?: string[] | undefined;
             promo?: {
                 message: string;
@@ -1004,6 +1014,7 @@ declare const CategoryPage: z.ZodObject<{
                 currency: string;
             }>>;
             media: z.ZodArray<z.ZodString, "many">;
+            media_by_colour: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodArray<z.ZodString, "many">>>;
             variants: z.ZodArray<z.ZodObject<{
                 sku: z.ZodString;
                 attributes: z.ZodRecord<z.ZodString, z.ZodString>;
@@ -1102,6 +1113,7 @@ declare const CategoryPage: z.ZodObject<{
                 amount: number;
                 currency: string;
             } | undefined;
+            media_by_colour?: Record<string, string[]> | undefined;
             badges?: string[] | undefined;
             promo?: {
                 message: string;
@@ -1142,6 +1154,7 @@ declare const CategoryPage: z.ZodObject<{
                 amount: number;
                 currency: string;
             } | undefined;
+            media_by_colour?: Record<string, string[]> | undefined;
             badges?: string[] | undefined;
             promo?: {
                 message: string;
@@ -1186,6 +1199,7 @@ declare const CategoryPage: z.ZodObject<{
                 amount: number;
                 currency: string;
             } | undefined;
+            media_by_colour?: Record<string, string[]> | undefined;
             badges?: string[] | undefined;
             promo?: {
                 message: string;
@@ -1230,6 +1244,7 @@ declare const CategoryPage: z.ZodObject<{
                 amount: number;
                 currency: string;
             } | undefined;
+            media_by_colour?: Record<string, string[]> | undefined;
             badges?: string[] | undefined;
             promo?: {
                 message: string;
@@ -1290,6 +1305,7 @@ declare const CategoryPage: z.ZodObject<{
                 currency: string;
             }>>;
             media: z.ZodArray<z.ZodString, "many">;
+            media_by_colour: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodArray<z.ZodString, "many">>>;
             variants: z.ZodArray<z.ZodObject<{
                 sku: z.ZodString;
                 attributes: z.ZodRecord<z.ZodString, z.ZodString>;
@@ -1388,6 +1404,7 @@ declare const CategoryPage: z.ZodObject<{
                 amount: number;
                 currency: string;
             } | undefined;
+            media_by_colour?: Record<string, string[]> | undefined;
             badges?: string[] | undefined;
             promo?: {
                 message: string;
@@ -1428,6 +1445,7 @@ declare const CategoryPage: z.ZodObject<{
                 amount: number;
                 currency: string;
             } | undefined;
+            media_by_colour?: Record<string, string[]> | undefined;
             badges?: string[] | undefined;
             promo?: {
                 message: string;
@@ -1471,6 +1489,7 @@ declare const CategoryPage: z.ZodObject<{
                 amount: number;
                 currency: string;
             } | undefined;
+            media_by_colour?: Record<string, string[]> | undefined;
             badges?: string[] | undefined;
             promo?: {
                 message: string;
@@ -1515,6 +1534,7 @@ declare const CategoryPage: z.ZodObject<{
                 amount: number;
                 currency: string;
             } | undefined;
+            media_by_colour?: Record<string, string[]> | undefined;
             badges?: string[] | undefined;
             promo?: {
                 message: string;
@@ -1651,6 +1671,7 @@ declare const CategoryPage: z.ZodObject<{
                 amount: number;
                 currency: string;
             } | undefined;
+            media_by_colour?: Record<string, string[]> | undefined;
             badges?: string[] | undefined;
             promo?: {
                 message: string;
@@ -1698,6 +1719,7 @@ declare const CategoryPage: z.ZodObject<{
                 amount: number;
                 currency: string;
             } | undefined;
+            media_by_colour?: Record<string, string[]> | undefined;
             badges?: string[] | undefined;
             promo?: {
                 message: string;
@@ -1746,6 +1768,7 @@ declare const CategoryPage: z.ZodObject<{
                 amount: number;
                 currency: string;
             } | undefined;
+            media_by_colour?: Record<string, string[]> | undefined;
             badges?: string[] | undefined;
             promo?: {
                 message: string;
@@ -1812,6 +1835,7 @@ declare const CategoryPage: z.ZodObject<{
                 amount: number;
                 currency: string;
             } | undefined;
+            media_by_colour?: Record<string, string[]> | undefined;
             badges?: string[] | undefined;
             promo?: {
                 message: string;
@@ -1864,6 +1888,7 @@ declare const CategoryPage: z.ZodObject<{
                 amount: number;
                 currency: string;
             } | undefined;
+            media_by_colour?: Record<string, string[]> | undefined;
             badges?: string[] | undefined;
             promo?: {
                 message: string;
@@ -1911,6 +1936,7 @@ declare const CategoryPage: z.ZodObject<{
                 amount: number;
                 currency: string;
             } | undefined;
+            media_by_colour?: Record<string, string[]> | undefined;
             badges?: string[] | undefined;
             promo?: {
                 message: string;
@@ -1959,6 +1985,7 @@ declare const CategoryPage: z.ZodObject<{
                 amount: number;
                 currency: string;
             } | undefined;
+            media_by_colour?: Record<string, string[]> | undefined;
             badges?: string[] | undefined;
             promo?: {
                 message: string;
@@ -2025,6 +2052,7 @@ declare const CategoryPage: z.ZodObject<{
                 amount: number;
                 currency: string;
             } | undefined;
+            media_by_colour?: Record<string, string[]> | undefined;
             badges?: string[] | undefined;
             promo?: {
                 message: string;
@@ -2163,6 +2191,7 @@ declare function createClient(options: ClientOptions): {
                     amount: number;
                     currency: string;
                 } | undefined;
+                media_by_colour?: Record<string, string[]> | undefined;
                 badges?: string[] | undefined;
                 promo?: {
                     message: string;
@@ -2209,6 +2238,7 @@ declare function createClient(options: ClientOptions): {
                 amount: number;
                 currency: string;
             } | undefined;
+            media_by_colour?: Record<string, string[]> | undefined;
             badges?: string[] | undefined;
             promo?: {
                 message: string;
@@ -2251,6 +2281,7 @@ declare function createClient(options: ClientOptions): {
                     amount: number;
                     currency: string;
                 } | undefined;
+                media_by_colour?: Record<string, string[]> | undefined;
                 badges?: string[] | undefined;
                 promo?: {
                     message: string;
@@ -2315,6 +2346,7 @@ declare function createClient(options: ClientOptions): {
                         amount: number;
                         currency: string;
                     } | undefined;
+                    media_by_colour?: Record<string, string[]> | undefined;
                     badges?: string[] | undefined;
                     promo?: {
                         message: string;
@@ -2362,6 +2394,7 @@ declare function createClient(options: ClientOptions): {
                         amount: number;
                         currency: string;
                     } | undefined;
+                    media_by_colour?: Record<string, string[]> | undefined;
                     badges?: string[] | undefined;
                     promo?: {
                         message: string;
@@ -2410,6 +2443,7 @@ declare function createClient(options: ClientOptions): {
                         amount: number;
                         currency: string;
                     } | undefined;
+                    media_by_colour?: Record<string, string[]> | undefined;
                     badges?: string[] | undefined;
                     promo?: {
                         message: string;
@@ -2476,6 +2510,7 @@ declare function createClient(options: ClientOptions): {
                         amount: number;
                         currency: string;
                     } | undefined;
+                    media_by_colour?: Record<string, string[]> | undefined;
                     badges?: string[] | undefined;
                     promo?: {
                         message: string;
@@ -4540,6 +4575,23 @@ declare const Product: z.ZodObject<{
         currency: string;
     }>>;
     media: z.ZodArray<z.ZodString, "many">;
+    /**
+     * Which of `media` belongs to which colourway, keyed on the colour's attribute value.
+     *
+     * **`media` stays the whole ordered list and is unchanged**, so a consumer that ignores
+     * this shows exactly what it showed before. This says only which shots are *about* a
+     * colour; a URL in no bucket is colour-neutral — a flat-lay, a fabric detail, a size
+     * chart — and belongs to every colourway.
+     *
+     * It exists because a colour selector cannot filter a gallery without it. `media` is a
+     * flat list with no attribution, and it is not colour-neutral in practice: a merged
+     * product inherits the photography of whichever colourway it was merged from, so the
+     * black shots were being shown under White. Filtering on a guess about which colour an
+     * unattributed shot depicts is the thing this replaces.
+     *
+     * Absent entirely for a product with no colourways, which is most of them.
+     */
+    media_by_colour: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodArray<z.ZodString, "many">>>;
     variants: z.ZodArray<z.ZodObject<{
         sku: z.ZodString;
         attributes: z.ZodRecord<z.ZodString, z.ZodString>;
@@ -4678,6 +4730,7 @@ declare const Product: z.ZodObject<{
         amount: number;
         currency: string;
     } | undefined;
+    media_by_colour?: Record<string, string[]> | undefined;
     badges?: string[] | undefined;
     promo?: {
         message: string;
@@ -4718,6 +4771,7 @@ declare const Product: z.ZodObject<{
         amount: number;
         currency: string;
     } | undefined;
+    media_by_colour?: Record<string, string[]> | undefined;
     badges?: string[] | undefined;
     promo?: {
         message: string;

package/dist/index.mjs

@@ -4286,6 +4286,7 @@ function requireCatalog() {
       price: money_1.Money,
       compare_at: money_1.Money.optional(),
       media: zod_1.z.array(common_1.Url),
+      media_by_colour: zod_1.z.record(zod_1.z.string(), zod_1.z.array(common_1.Url)).optional(),
       variants: zod_1.z.array(exports.ProductVariant),
       description: zod_1.z.string().optional(),
       badges: zod_1.z.array(zod_1.z.string()).optional(),
@@ -7501,20 +7502,22 @@ function ReturnFlowContent({ orderRef, returnRef, onDone, locale }) {
     busy
   });
 }
-const page$3 = "_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$1 = "_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 page$3 = "_page_1qh0r_8";
+const widget = "_widget_1qh0r_18";
+const titleRow = "_titleRow_1qh0r_26";
+const headline$1 = "_headline_1qh0r_42";
+const track$5 = "_track_1qh0r_74";
+const rule$1 = "_rule_1qh0r_99";
+const help = "_help_1qh0r_109";
+const helpTitle = "_helpTitle_1qh0r_115";
+const helpRows = "_helpRows_1qh0r_122";
+const helpRowEnd = "_helpRowEnd_1qh0r_131";
+const helpStatus = "_helpStatus_1qh0r_139";
+const helpRow = "_helpRow_1qh0r_122";
+const cancel = "_cancel_1qh0r_197";
+const cancelledHead = "_cancelledHead_1qh0r_221";
+const cancelledTitle = "_cancelledTitle_1qh0r_227";
+const cancelledMeta = "_cancelledMeta_1qh0r_236";
 const styles$y = {
   page: page$3,
   widget,
@@ -7525,6 +7528,8 @@ const styles$y = {
   help,
   helpTitle,
   helpRows,
+  helpRowEnd,
+  helpStatus,
   helpRow,
   cancel,
   cancelledHead,
@@ -7815,6 +7820,7 @@ function NeedHelp({ order, onStartReturn, onOpenReturn, onContactSupport }) {
       className: styles$y.helpRows,
       children: [returns.map((ret) => jsx(HelpRow, {
         label: returns.length > 1 ? `Track return ${ret.return_ref}` : "Track your return",
+        status: RETURN_STATUS[ret.status] ?? ret.status.replace(/_/g, " "),
         onClick: () => onOpenReturn?.(ret.return_ref)
       }, ret.return_ref)), order.can_return && onStartReturn && jsx(HelpRow, {
         label: "Start a return",
@@ -7832,14 +7838,26 @@ function NeedHelp({ order, onStartReturn, onOpenReturn, onContactSupport }) {
     })]
   });
 }
-function HelpRow({ label: label2, onClick }) {
+const RETURN_STATUS = {
+  reported: "Return requested",
+  package_received: "Package received",
+  completed: "Return complete"
+};
+function HelpRow({ label: label2, status, onClick }) {
+  const t = useT();
   return jsxs("button", {
     type: "button",
     className: styles$y.helpRow,
     onClick,
     children: [jsx("span", {
       children: label2
-    }), jsx(ChevronRight$1, {})]
+    }), jsxs("span", {
+      className: styles$y.helpRowEnd,
+      children: [status && jsx("span", {
+        className: styles$y.helpStatus,
+        children: t(status)
+      }), jsx(ChevronRight$1, {})]
+    })]
   });
 }
 function shortRef$1(orderRef) {
@@ -10071,9 +10089,14 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
   const purchasable = anyInStock && !colourSoldOut;
   const colourImage = useMemo(() => selectedColour ? baseColours.find((c) => c.value === selectedColour)?.image : void 0, [baseColours, selectedColour]);
   const media2 = useMemo(() => {
-    const swatches2 = baseColours.map((c) => c.image).filter((src) => typeof src === "string" && src.length > 0);
-    return [...swatches2, ...product.media.filter((m) => !swatches2.includes(m))];
-  }, [baseColours, product.media]);
+    const byColour = product.media_by_colour ?? {};
+    const attributed = new Set(Object.values(byColour).flat());
+    const mine = selectedColour ? new Set(byColour[selectedColour] ?? []) : null;
+    const swatch2 = selectedColour ? baseColours.find((c) => c.value === selectedColour)?.image : void 0;
+    const lead = typeof swatch2 === "string" && swatch2.length > 0 ? [swatch2] : [];
+    const rest = product.media.filter((m) => mine ? mine.has(m) || !attributed.has(m) : true);
+    return [...lead, ...rest.filter((m) => !lead.includes(m))];
+  }, [baseColours, product.media, product.media_by_colour, selectedColour]);
   const focus = useMemo(() => {
     if (!colourImage) return void 0;
     const at = media2.indexOf(colourImage);

package/dist/standalone/storefront.mjs

@@ -4286,6 +4286,7 @@ function requireCatalog() {
       price: money_1.Money,
       compare_at: money_1.Money.optional(),
       media: zod_1.z.array(common_1.Url),
+      media_by_colour: zod_1.z.record(zod_1.z.string(), zod_1.z.array(common_1.Url)).optional(),
       variants: zod_1.z.array(exports.ProductVariant),
       description: zod_1.z.string().optional(),
       badges: zod_1.z.array(zod_1.z.string()).optional(),
@@ -7501,20 +7502,22 @@ function ReturnFlowContent({ orderRef, returnRef, onDone, locale }) {
     busy
   });
 }
-const page$3 = "_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$1 = "_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 page$3 = "_page_1qh0r_8";
+const widget = "_widget_1qh0r_18";
+const titleRow = "_titleRow_1qh0r_26";
+const headline$1 = "_headline_1qh0r_42";
+const track$5 = "_track_1qh0r_74";
+const rule$1 = "_rule_1qh0r_99";
+const help = "_help_1qh0r_109";
+const helpTitle = "_helpTitle_1qh0r_115";
+const helpRows = "_helpRows_1qh0r_122";
+const helpRowEnd = "_helpRowEnd_1qh0r_131";
+const helpStatus = "_helpStatus_1qh0r_139";
+const helpRow = "_helpRow_1qh0r_122";
+const cancel = "_cancel_1qh0r_197";
+const cancelledHead = "_cancelledHead_1qh0r_221";
+const cancelledTitle = "_cancelledTitle_1qh0r_227";
+const cancelledMeta = "_cancelledMeta_1qh0r_236";
 const styles$y = {
   page: page$3,
   widget,
@@ -7525,6 +7528,8 @@ const styles$y = {
   help,
   helpTitle,
   helpRows,
+  helpRowEnd,
+  helpStatus,
   helpRow,
   cancel,
   cancelledHead,
@@ -7815,6 +7820,7 @@ function NeedHelp({ order, onStartReturn, onOpenReturn, onContactSupport }) {
       className: styles$y.helpRows,
       children: [returns.map((ret) => jsx(HelpRow, {
         label: returns.length > 1 ? `Track return ${ret.return_ref}` : "Track your return",
+        status: RETURN_STATUS[ret.status] ?? ret.status.replace(/_/g, " "),
         onClick: () => onOpenReturn?.(ret.return_ref)
       }, ret.return_ref)), order.can_return && onStartReturn && jsx(HelpRow, {
         label: "Start a return",
@@ -7832,14 +7838,26 @@ function NeedHelp({ order, onStartReturn, onOpenReturn, onContactSupport }) {
     })]
   });
 }
-function HelpRow({ label: label2, onClick }) {
+const RETURN_STATUS = {
+  reported: "Return requested",
+  package_received: "Package received",
+  completed: "Return complete"
+};
+function HelpRow({ label: label2, status, onClick }) {
+  const t = useT();
   return jsxs("button", {
     type: "button",
     className: styles$y.helpRow,
     onClick,
     children: [jsx("span", {
       children: label2
-    }), jsx(ChevronRight$1, {})]
+    }), jsxs("span", {
+      className: styles$y.helpRowEnd,
+      children: [status && jsx("span", {
+        className: styles$y.helpStatus,
+        children: t(status)
+      }), jsx(ChevronRight$1, {})]
+    })]
   });
 }
 function shortRef$1(orderRef) {
@@ -10071,9 +10089,14 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
   const purchasable = anyInStock && !colourSoldOut;
   const colourImage = useMemo(() => selectedColour ? baseColours.find((c) => c.value === selectedColour)?.image : void 0, [baseColours, selectedColour]);
   const media2 = useMemo(() => {
-    const swatches2 = baseColours.map((c) => c.image).filter((src) => typeof src === "string" && src.length > 0);
-    return [...swatches2, ...product.media.filter((m) => !swatches2.includes(m))];
-  }, [baseColours, product.media]);
+    const byColour = product.media_by_colour ?? {};
+    const attributed = new Set(Object.values(byColour).flat());
+    const mine = selectedColour ? new Set(byColour[selectedColour] ?? []) : null;
+    const swatch2 = selectedColour ? baseColours.find((c) => c.value === selectedColour)?.image : void 0;
+    const lead = typeof swatch2 === "string" && swatch2.length > 0 ? [swatch2] : [];
+    const rest = product.media.filter((m) => mine ? mine.has(m) || !attributed.has(m) : true);
+    return [...lead, ...rest.filter((m) => !lead.includes(m))];
+  }, [baseColours, product.media, product.media_by_colour, selectedColour]);
   const focus = useMemo(() => {
     if (!colourImage) return void 0;
     const at = media2.indexOf(colourImage);

package/dist/standalone/styles.css

@@ -1397,24 +1397,24 @@
   text-decoration: line-through;
   font-variant-numeric: tabular-nums;
 }
-._page_1v9my_8 {
+._page_1qh0r_8 {
   display: flex;
   flex-direction: column;
   gap: var(--space-32);
   padding: var(--space-20) var(--space-16) var(--space-24);
 }
-._widget_1v9my_18 {
+._widget_1qh0r_18 {
   display: flex;
   flex-direction: column;
   gap: var(--space-32);
 }
-._titleRow_1v9my_26 {
+._titleRow_1qh0r_26 {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--space-12);
 }
-._headline_1v9my_42 {
+._headline_1qh0r_42 {
   margin: -9px 0;
   padding: 9px 0;
   min-width: 0;
@@ -1425,7 +1425,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-._track_1v9my_74 {
+._track_1qh0r_74 {
   display: inline-flex;
   align-items: center;
   gap: var(--space-6);
@@ -1436,33 +1436,43 @@
   color: var(--color-text-default);
   text-decoration: none;
 }
-._track_1v9my_74:focus-visible {
+._track_1qh0r_74:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
   border-radius: var(--radius-4);
 }
-._rule_1v9my_99 {
+._rule_1qh0r_99 {
   height: 1px;
   margin: 0 0 -1px;
   border: 0;
   background: var(--color-border-default);
 }
-._help_1v9my_109 {
+._help_1qh0r_109 {
   display: flex;
   flex-direction: column;
   gap: var(--space-6);
 }
-._helpTitle_1v9my_115 {
+._helpTitle_1qh0r_115 {
   margin: 0;
   font-size: var(--type-heading-md-size);
   line-height: 1.32;
   font-weight: var(--font-weight-bold);
 }
-._helpRows_1v9my_122 {
+._helpRows_1qh0r_122 {
   display: flex;
   flex-direction: column;
 }
-._helpRow_1v9my_122 {
+._helpRowEnd_1qh0r_131 {
+  display: flex;
+  align-items: center;
+  gap: var(--space-8);
+  min-width: 0;
+}
+._helpStatus_1qh0r_139 {
+  color: var(--color-text-subtle);
+  white-space: nowrap;
+}
+._helpRow_1qh0r_122 {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1480,14 +1490,14 @@
   text-align: left;
   cursor: pointer;
 }
-._helpRow_1v9my_122 + ._helpRow_1v9my_122 {
+._helpRow_1qh0r_122 + ._helpRow_1qh0r_122 {
   border-top: 1px solid var(--color-border-subtle);
 }
-._helpRow_1v9my_122:focus-visible {
+._helpRow_1qh0r_122:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
-._cancel_1v9my_180 {
+._cancel_1qh0r_197 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1504,23 +1514,23 @@
   font-weight: var(--font-weight-bold);
   cursor: pointer;
 }
-._cancel_1v9my_180:focus-visible {
+._cancel_1qh0r_197:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
-._cancelledHead_1v9my_204 {
+._cancelledHead_1qh0r_221 {
   display: flex;
   flex-direction: column;
   gap: var(--space-8);
 }
-._cancelledTitle_1v9my_210 {
+._cancelledTitle_1qh0r_227 {
   margin: 0;
   font-size: var(--type-heading-md-size);
   line-height: 1.32;
   font-weight: var(--font-weight-bold);
   color: var(--color-text-default);
 }
-._cancelledMeta_1v9my_219 {
+._cancelledMeta_1qh0r_236 {
   font-size: var(--type-trimmed-sm-size);
   line-height: 10px;
   padding: 5px 0;

package/dist/styles.css

@@ -1397,24 +1397,24 @@
   text-decoration: line-through;
   font-variant-numeric: tabular-nums;
 }
-._page_1v9my_8 {
+._page_1qh0r_8 {
   display: flex;
   flex-direction: column;
   gap: var(--space-32);
   padding: var(--space-20) var(--space-16) var(--space-24);
 }
-._widget_1v9my_18 {
+._widget_1qh0r_18 {
   display: flex;
   flex-direction: column;
   gap: var(--space-32);
 }
-._titleRow_1v9my_26 {
+._titleRow_1qh0r_26 {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--space-12);
 }
-._headline_1v9my_42 {
+._headline_1qh0r_42 {
   margin: -9px 0;
   padding: 9px 0;
   min-width: 0;
@@ -1425,7 +1425,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-._track_1v9my_74 {
+._track_1qh0r_74 {
   display: inline-flex;
   align-items: center;
   gap: var(--space-6);
@@ -1436,33 +1436,43 @@
   color: var(--color-text-default);
   text-decoration: none;
 }
-._track_1v9my_74:focus-visible {
+._track_1qh0r_74:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
   border-radius: var(--radius-4);
 }
-._rule_1v9my_99 {
+._rule_1qh0r_99 {
   height: 1px;
   margin: 0 0 -1px;
   border: 0;
   background: var(--color-border-default);
 }
-._help_1v9my_109 {
+._help_1qh0r_109 {
   display: flex;
   flex-direction: column;
   gap: var(--space-6);
 }
-._helpTitle_1v9my_115 {
+._helpTitle_1qh0r_115 {
   margin: 0;
   font-size: var(--type-heading-md-size);
   line-height: 1.32;
   font-weight: var(--font-weight-bold);
 }
-._helpRows_1v9my_122 {
+._helpRows_1qh0r_122 {
   display: flex;
   flex-direction: column;
 }
-._helpRow_1v9my_122 {
+._helpRowEnd_1qh0r_131 {
+  display: flex;
+  align-items: center;
+  gap: var(--space-8);
+  min-width: 0;
+}
+._helpStatus_1qh0r_139 {
+  color: var(--color-text-subtle);
+  white-space: nowrap;
+}
+._helpRow_1qh0r_122 {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1480,14 +1490,14 @@
   text-align: left;
   cursor: pointer;
 }
-._helpRow_1v9my_122 + ._helpRow_1v9my_122 {
+._helpRow_1qh0r_122 + ._helpRow_1qh0r_122 {
   border-top: 1px solid var(--color-border-subtle);
 }
-._helpRow_1v9my_122:focus-visible {
+._helpRow_1qh0r_122:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
-._cancel_1v9my_180 {
+._cancel_1qh0r_197 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1504,23 +1514,23 @@
   font-weight: var(--font-weight-bold);
   cursor: pointer;
 }
-._cancel_1v9my_180:focus-visible {
+._cancel_1qh0r_197:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
-._cancelledHead_1v9my_204 {
+._cancelledHead_1qh0r_221 {
   display: flex;
   flex-direction: column;
   gap: var(--space-8);
 }
-._cancelledTitle_1v9my_210 {
+._cancelledTitle_1qh0r_227 {
   margin: 0;
   font-size: var(--type-heading-md-size);
   line-height: 1.32;
   font-weight: var(--font-weight-bold);
   color: var(--color-text-default);
 }
-._cancelledMeta_1v9my_219 {
+._cancelledMeta_1qh0r_236 {
   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.19.31",
+  "version": "0.19.33",
   "description": "Mountable React storefront components: catalogue, product detail and cart, mounted directly into a host DOM tree. No iframe.",
   "license": "UNLICENSED",
   "publishConfig": {