@nok-integration/storefront-react 0.19.19 → 0.19.21

package/dist/index.mjs

@@ -5313,9 +5313,9 @@ function ShopLink({ to, children, ...rest }) {
 }
 function anchorToTop() {
   if (typeof window === "undefined") return;
-  const top = () => window.scrollTo(0, 0);
-  top();
-  if (typeof window.requestAnimationFrame === "function") window.requestAnimationFrame(top);
+  const top2 = () => window.scrollTo(0, 0);
+  top2();
+  if (typeof window.requestAnimationFrame === "function") window.requestAnimationFrame(top2);
 }
 function ShopImage({ src, alt, fill: fill2 = false, width, height, sizes, className, style, priority = false }) {
   const assetUrl = useAssetUrl();
@@ -5404,7 +5404,7 @@ const neutral$1 = "_neutral_1bagf_12";
 const success$1 = "_success_1bagf_17";
 const critical$1 = "_critical_1bagf_22";
 const promo = "_promo_1bagf_27";
-const styles$Q = {
+const styles$R = {
   badge: badge$5,
   neutral: neutral$1,
   success: success$1,
@@ -5413,7 +5413,7 @@ const styles$Q = {
 };
 function Badge({ tone = "neutral", children }) {
   return jsx("span", {
-    className: [styles$Q.badge, styles$Q[tone]].join(" "),
+    className: [styles$R.badge, styles$R[tone]].join(" "),
     children
   });
 }
@@ -5424,7 +5424,7 @@ const secondary = "_secondary_1u2uh_34";
 const ghost = "_ghost_1u2uh_40";
 const spinner = "_spinner_1u2uh_83";
 const spin = "_spin_1u2uh_83";
-const styles$P = {
+const styles$Q = {
   button: button$1,
   fullWidth,
   primary,
@@ -5438,12 +5438,12 @@ const Button = forwardRef(function Button2({ variant = "primary", loading = fals
   return jsxs("button", {
     ref,
     type,
-    className: [styles$P.button, styles$P[variant], fullWidth2 ? styles$P.fullWidth : "", className ?? ""].filter(Boolean).join(" "),
+    className: [styles$Q.button, styles$Q[variant], fullWidth2 ? styles$Q.fullWidth : "", className ?? ""].filter(Boolean).join(" "),
     disabled: isDisabled,
     "aria-busy": loading || void 0,
     ...rest,
     children: [loading && jsx("span", {
-      className: styles$P.spinner,
+      className: styles$Q.spinner,
       "aria-hidden": "true"
     }), jsx("span", {
       children
@@ -5451,7 +5451,7 @@ const Button = forwardRef(function Button2({ variant = "primary", loading = fals
   });
 });
 const skeleton = "_skeleton_1nxz7_1";
-const styles$O = {
+const styles$P = {
   skeleton
 };
 function Skeleton({ width, height, radius, className, circle }) {
@@ -5462,24 +5462,24 @@ function Skeleton({ width, height, radius, className, circle }) {
   };
   return jsx("span", {
     "aria-hidden": "true",
-    className: [styles$O.skeleton, className ?? ""].filter(Boolean).join(" "),
+    className: [styles$P.skeleton, className ?? ""].filter(Boolean).join(" "),
     style
   });
 }
 const surface$1 = "_surface_cfqo9_10";
 const fill = "_fill_cfqo9_35";
-const styles$N = {
+const styles$O = {
   surface: surface$1,
   fill
 };
 const SETTLE_MS$1 = 150;
 function offsetFromViewportTop(el) {
-  let top = el.getBoundingClientRect().top;
+  let top2 = el.getBoundingClientRect().top;
   for (let node = el.parentElement; node; node = node.parentElement) {
-    top += node.scrollTop;
+    top2 += node.scrollTop;
     if (getComputedStyle(node).position === "fixed") break;
   }
-  const offset = Math.max(0, Math.round(top));
+  const offset = Math.max(0, Math.round(top2));
   return offset >= window.innerHeight ? 0 : offset;
 }
 function useTopOffset(ref, property, enabled = true) {
@@ -5495,6 +5495,8 @@ function useTopOffset(ref, property, enabled = true) {
       timer2 = setTimeout(measure, SETTLE_MS$1);
     };
     measure();
+    const frame2 = typeof requestAnimationFrame === "undefined" ? void 0 : requestAnimationFrame(measure);
+    const settleAfterMount = setTimeout(measure, SETTLE_MS$1);
     window.addEventListener("resize", measure);
     window.addEventListener("orientationchange", measure);
     document.addEventListener("scroll", settle, {
@@ -5505,6 +5507,8 @@ function useTopOffset(ref, property, enabled = true) {
     if (observer && el.parentElement) observer.observe(el.parentElement);
     return () => {
       if (timer2) clearTimeout(timer2);
+      if (frame2 !== void 0) cancelAnimationFrame(frame2);
+      clearTimeout(settleAfterMount);
       window.removeEventListener("resize", measure);
       window.removeEventListener("orientationchange", measure);
       document.removeEventListener("scroll", settle, {
@@ -5526,7 +5530,7 @@ const ShopSurface = forwardRef(function ShopSurface2({ tone, fill: fill2 = false
     ...rest,
     ref: attach,
     "data-shop-theme": tone,
-    className: [styles$N.surface, fill2 ? styles$N.fill : "", className ?? ""].filter(Boolean).join(" "),
+    className: [styles$O.surface, fill2 ? styles$O.fill : "", className ?? ""].filter(Boolean).join(" "),
     children
   });
 });
@@ -5539,7 +5543,7 @@ const lineMid = "_lineMid_ney0g_45";
 const lineNarrow = "_lineNarrow_ney0g_49";
 const row$9 = "_row_ney0g_53";
 const action$2 = "_action_ney0g_57";
-const styles$M = {
+const styles$N = {
   root: root$6,
   inner,
   media: media$3,
@@ -5751,36 +5755,36 @@ function ScreenSkeleton({ tone, shape = "media" }) {
   return jsx(ShopSurface, {
     tone,
     fill: true,
-    className: styles$M.root,
+    className: styles$N.root,
     children: jsx("div", {
-      className: styles$M.inner,
+      className: styles$N.inner,
       role: "status",
       "aria-label": t("Loading"),
       children: shape === "media" ? jsxs(Fragment, {
         children: [jsx(Skeleton, {
-          className: styles$M.media
+          className: styles$N.media
         }), jsxs("div", {
-          className: styles$M.lines,
+          className: styles$N.lines,
           children: [jsx(Skeleton, {
             height: 22,
-            className: styles$M.lineWide
+            className: styles$N.lineWide
           }), jsx(Skeleton, {
             height: 16,
-            className: styles$M.lineMid
+            className: styles$N.lineMid
           }), jsx(Skeleton, {
             height: 16,
-            className: styles$M.lineNarrow
+            className: styles$N.lineNarrow
           })]
         }), jsx(Skeleton, {
           height: 48,
           radius: 8,
-          className: styles$M.action
+          className: styles$N.action
         })]
       }) : jsx("div", {
-        className: styles$M.lines,
+        className: styles$N.lines,
         children: [0, 1, 2, 3].map((i) => jsx(Skeleton, {
           height: 72,
-          className: styles$M.row
+          className: styles$N.row
         }, i))
       })
     })
@@ -5792,7 +5796,7 @@ const text$5 = "_text_ryf3q_21";
 const title$n = "_title_ryf3q_35";
 const body$8 = "_body_ryf3q_40";
 const action$1 = "_action_ryf3q_48";
-const styles$L = {
+const styles$M = {
   root: root$5,
   icon: icon$4,
   text: text$5,
@@ -5802,22 +5806,22 @@ const styles$L = {
 };
 function EmptyState({ title: title2, body: body3, action: action2, icon: icon2 }) {
   return jsxs("div", {
-    className: styles$L.root,
+    className: styles$M.root,
     role: "status",
     children: [icon2 && jsx("div", {
-      className: styles$L.icon,
+      className: styles$M.icon,
       children: icon2
     }), jsxs("div", {
-      className: styles$L.text,
+      className: styles$M.text,
       children: [jsx("h2", {
-        className: styles$L.title,
+        className: styles$M.title,
         children: title2
       }), body3 && jsx("p", {
-        className: styles$L.body,
+        className: styles$M.body,
         children: body3
       })]
     }), action2 && jsx("div", {
-      className: styles$L.action,
+      className: styles$M.action,
       children: action2
     })]
   });
@@ -5939,7 +5943,7 @@ function isDuplicateOrder(err) {
 const root$4 = "_root_1lbpx_1";
 const title$m = "_title_1lbpx_10";
 const body$7 = "_body_1lbpx_15";
-const styles$K = {
+const styles$L = {
   root: root$4,
   title: title$m,
   body: body$7
@@ -5949,13 +5953,13 @@ function ErrorState({ code, title: title2, body: body3, onRetry, retryLabel }) {
   const treatment = treatmentFor(code);
   const showRetry = Boolean(onRetry) && treatment.retriable;
   return jsxs("div", {
-    className: styles$K.root,
+    className: styles$L.root,
     role: "alert",
     children: [jsx("h2", {
-      className: styles$K.title,
+      className: styles$L.title,
       children: title2 ?? t(treatment.title)
     }), jsx("p", {
-      className: styles$K.body,
+      className: styles$L.body,
       children: body3 ?? t(treatment.body)
     }), showRetry && jsx(Button, {
       variant: "secondary",
@@ -6003,7 +6007,7 @@ const rich = "_rich_5aafz_183";
 const description = "_description_5aafz_198";
 const thumb$3 = "_thumb_5aafz_216";
 const thumbImage = "_thumbImage_5aafz_227";
-const styles$J = {
+const styles$K = {
   viewport,
   anchor,
   caret,
@@ -6126,41 +6130,41 @@ function ToastProvider({ children }) {
   return jsxs(ToastContext.Provider, {
     value: api,
     children: [children, jsx("div", {
-      className: styles$J.viewport,
+      className: styles$K.viewport,
       ref: viewportRef,
       "aria-live": "polite",
       "aria-atomic": "false",
       children: toasts.map((t) => {
         const rich2 = Boolean(t.description || t.image);
         return jsxs("div", {
-          className: styles$J.anchor,
+          className: styles$K.anchor,
           children: [t.anchor === "cart" && jsx("span", {
-            className: styles$J.caret,
+            className: styles$K.caret,
             children: jsx(Caret, {})
           }), jsxs("div", {
-            className: [styles$J.toast, rich2 ? styles$J.rich : styles$J[t.tone]].join(" "),
+            className: [styles$K.toast, rich2 ? styles$K.rich : styles$K[t.tone]].join(" "),
             role: "status",
             children: [t.image && jsx("span", {
-              className: styles$J.thumb,
+              className: styles$K.thumb,
               children: jsx(ShopImage, {
                 src: t.image,
                 alt: "",
                 fill: true,
                 sizes: "40px",
-                className: styles$J.thumbImage
+                className: styles$K.thumbImage
               })
             }), jsxs("span", {
-              className: styles$J.text,
+              className: styles$K.text,
               children: [jsx("span", {
-                className: styles$J.message,
+                className: styles$K.message,
                 children: t.message
               }), t.description && jsx("span", {
-                className: styles$J.description,
+                className: styles$K.description,
                 children: t.description
               })]
             }), t.action && jsx("button", {
               type: "button",
-              className: styles$J.action,
+              className: styles$K.action,
               onClick: () => {
                 t.action?.onAction();
                 dismiss(t.id);
@@ -6175,15 +6179,15 @@ function ToastProvider({ children }) {
 }
 const badge$4 = "_badge_156ya_2";
 const icon$3 = "_icon_156ya_18";
-const styles$I = {
+const styles$J = {
   badge: badge$4,
   icon: icon$3
 };
 function SaleBadge({ pct }) {
   return jsxs("span", {
-    className: styles$I.badge,
+    className: styles$J.badge,
     children: [jsxs("svg", {
-      className: styles$I.icon,
+      className: styles$J.icon,
       width: "12",
       height: "12",
       viewBox: "0 0 24 24",
@@ -6213,7 +6217,7 @@ const badge$3 = "_badge_rvfx9_48";
 const price$4 = "_price_rvfx9_52";
 const compareAt = "_compareAt_rvfx9_57";
 const strikethrough = "_strikethrough_rvfx9_65";
-const styles$H = {
+const styles$I = {
   root: root$3,
   center: center$1,
   end,
@@ -6230,12 +6234,12 @@ function PriceBlock({ price: price2, compareAt: compareAt2, discountPct: discoun
   const pct = discountPct$1 ?? discountPct(price2, compareAt2);
   const hasCompare = compareAt2 && compareAt2.amount > price2.amount;
   return jsxs("div", {
-    className: [styles$H.root, styles$H[size], styles$H[align], styles$H[variant]].join(" "),
+    className: [styles$I.root, styles$I[size], styles$I[align], styles$I[variant]].join(" "),
     children: [jsx("span", {
-      className: styles$H.price,
+      className: styles$I.price,
       children: format(price2)
     }), hasCompare && jsxs("span", {
-      className: styles$H.compareAt,
+      className: styles$I.compareAt,
       children: [jsx("span", {
         className: "visually-hidden",
         children: `Was ${format(compareAt2)}`
@@ -6261,7 +6265,7 @@ const past = "_past_1cum7_113";
 const current = "_current_1cum7_118";
 const future = "_future_1cum7_133";
 const date$1 = "_date_1cum7_138";
-const styles$G = {
+const styles$H = {
   timeline,
   row: row$8,
   line: line$3,
@@ -6280,39 +6284,39 @@ function OrderTimeline({ progress: progress2, estimatedDelivery, locale: localeP
   const locale = useLocale(localeProp);
   const currentIndex = progress2.findIndex((e) => e.current);
   return jsx("ol", {
-    className: styles$G.timeline,
+    className: styles$H.timeline,
     children: progress2.map((entry, i) => {
       const state = stateOf(entry, i, currentIndex);
       const estimate = !entry.at && i === progress2.length - 1 && estimatedDelivery ? formatWindow(estimatedDelivery, locale) : void 0;
       return jsxs("li", {
-        className: styles$G.row,
+        className: styles$H.row,
         "aria-current": entry.current ? "step" : void 0,
         children: [jsxs("div", {
-          className: styles$G.line,
+          className: styles$H.line,
           children: [jsx("span", {
-            className: styles$G.marker,
+            className: styles$H.marker,
             children: state === "future" ? jsx("span", {
-              className: styles$G.pending,
+              className: styles$H.pending,
               "aria-hidden": "true"
             }) : jsx(StepTick, {
               tone: state
             })
           }), jsxs("span", {
-            className: styles$G.text,
+            className: styles$H.text,
             children: [jsx("span", {
-              className: [styles$G.label, styles$G[state]].join(" "),
+              className: [styles$H.label, styles$H[state]].join(" "),
               children: entry.label
             }), entry.at ? jsx("time", {
-              className: styles$G.date,
+              className: styles$H.date,
               dateTime: entry.at,
               children: formatStepDate(entry.at, locale)
             }) : estimate && jsx("span", {
-              className: styles$G.date,
+              className: styles$H.date,
               children: estimate
             })]
           })]
         }), i < progress2.length - 1 && jsx("span", {
-          className: styles$G.connector,
+          className: styles$H.connector,
           "aria-hidden": "true"
         })]
       }, entry.step);
@@ -6326,7 +6330,7 @@ function stateOf(entry, index, currentIndex) {
 }
 function StepTick({ tone }) {
   return jsxs("svg", {
-    className: styles$G.tick,
+    className: styles$H.tick,
     width: "28",
     height: "28",
     viewBox: "0 0 28 28",
@@ -6471,7 +6475,7 @@ const row$7 = "_row_1hsxt_16";
 const free = "_free_1hsxt_53";
 const pending$1 = "_pending_1hsxt_59";
 const discount = "_discount_1hsxt_69";
-const styles$F = {
+const styles$G = {
   summary,
   row: row$7,
   free,
@@ -6500,11 +6504,11 @@ function OrderSummary({ pricing, deferred = [], hidden = [], rows = CART_ROWS, d
   const isDeferred = (key) => deferred.includes(key);
   const visible = rows.filter((row2) => !hidden.includes(row2.key)).filter((row2) => row2.key !== "discount" || discount2 !== void 0);
   return jsx("dl", {
-    className: styles$F.summary,
+    className: styles$G.summary,
     children: visible.map(({ label: label2, key }) => {
       if (key === "discount" && discount2) {
         return jsxs("div", {
-          className: [styles$F.row, styles$F.discount].join(" "),
+          className: [styles$G.row, styles$G.discount].join(" "),
           children: [jsx("dt", {
             children: t(label2)
           }), jsx("dd", {
@@ -6514,11 +6518,11 @@ function OrderSummary({ pricing, deferred = [], hidden = [], rows = CART_ROWS, d
       }
       const pending2 = key !== "total" && isDeferred(key);
       return jsxs("div", {
-        className: styles$F.row,
+        className: styles$G.row,
         children: [jsx("dt", {
           children: t(label2)
         }), jsx("dd", {
-          className: pending2 ? styles$F.pending : void 0,
+          className: pending2 ? styles$G.pending : void 0,
           children: pending2 ? t("Calculated at checkout") : renderValue(key, pricing, format, t)
         })]
       }, key);
@@ -6528,7 +6532,7 @@ function OrderSummary({ pricing, deferred = [], hidden = [], rows = CART_ROWS, d
 function renderValue(key, pricing, format, t) {
   if (key === "shipping" && pricing.shipping.amount === 0) {
     return jsx("span", {
-      className: styles$F.free,
+      className: styles$G.free,
       children: t("Free")
     });
   }
@@ -6551,7 +6555,7 @@ const card$4 = "_card_1vmnm_173";
 const cardTitle = "_cardTitle_1vmnm_181";
 const cardBody = "_cardBody_1vmnm_193";
 const summaryCard = "_summaryCard_1vmnm_165";
-const styles$E = {
+const styles$F = {
   lines: lines$1,
   line: line$2,
   thumb: thumb$2,
@@ -6590,42 +6594,42 @@ function OrderLine({ item: item2 }) {
   const pct = compareAt2 ? discountPct(item2.unit_price, compareAt2) : void 0;
   const details2 = detailsOf(item2, t);
   return jsxs("li", {
-    className: styles$E.line,
+    className: styles$F.line,
     children: [jsx("div", {
-      className: styles$E.thumb,
+      className: styles$F.thumb,
       children: item2.image ? jsx(ShopImage, {
         src: item2.image,
         alt: "",
         fill: true,
         sizes: "48px",
-        className: styles$E.image
+        className: styles$F.image
       }) : jsx("div", {
-        className: styles$E.placeholder,
+        className: styles$F.placeholder,
         "aria-hidden": "true"
       })
     }), jsxs("div", {
-      className: styles$E.lineBody,
+      className: styles$F.lineBody,
       children: [jsxs("div", {
-        className: styles$E.lineText,
+        className: styles$F.lineText,
         children: [jsx("span", {
-          className: styles$E.lineTitle,
+          className: styles$F.lineTitle,
           children: item2.title ?? item2.sku
         }), jsxs("span", {
-          className: styles$E.lineMeta,
+          className: styles$F.lineMeta,
           children: [details2.map((detail2) => jsx("span", {
-            className: styles$E.detail,
+            className: styles$F.detail,
             children: detail2
           }, detail2)), pct !== void 0 && jsx(SaleBadge, {
             pct
           })]
         })]
       }), jsxs("span", {
-        className: styles$E.linePrice,
+        className: styles$F.linePrice,
         children: [jsx("span", {
-          className: styles$E.paid,
+          className: styles$F.paid,
           children: format(item2.line_total)
         }), compareAt2 && jsxs("span", {
-          className: styles$E.was,
+          className: styles$F.was,
           children: [jsx("span", {
             className: "visually-hidden",
             children: `Was ${format(compareAt2)}`
@@ -6641,7 +6645,7 @@ function OrderLine({ item: item2 }) {
 function OrderLines({ order }) {
   const t = useT();
   return jsx("ul", {
-    className: styles$E.lines,
+    className: styles$F.lines,
     "aria-label": t("Items"),
     children: order.items.map((item2) => jsx(OrderLine, {
       item: item2
@@ -6651,13 +6655,13 @@ function OrderLines({ order }) {
 function ShippingAddressCard({ order }) {
   const t = useT();
   return jsxs("section", {
-    className: styles$E.card,
+    className: styles$F.card,
     "aria-label": t("Shipping address"),
     children: [jsx("h2", {
-      className: styles$E.cardTitle,
+      className: styles$F.cardTitle,
       children: "Shipping address"
     }), jsx("p", {
-      className: styles$E.cardBody,
+      className: styles$F.cardBody,
       children: formatAddress(order.ship_to)
     })]
   });
@@ -6665,10 +6669,10 @@ function ShippingAddressCard({ order }) {
 function OrderSummaryCard({ order }) {
   const t = useT();
   return jsxs("section", {
-    className: [styles$E.card, styles$E.summaryCard].join(" "),
+    className: [styles$F.card, styles$F.summaryCard].join(" "),
     "aria-label": t("Order summary"),
     children: [jsx("h2", {
-      className: styles$E.cardTitle,
+      className: styles$F.cardTitle,
       children: "Order summary"
     }), jsx(OrderSummary, {
       pricing: toPricing(order),
@@ -6705,7 +6709,7 @@ const handleSlot = "_handleSlot_1f3nh_23";
 const handle = "_handle_1f3nh_23";
 const closeSlot$1 = "_closeSlot_1f3nh_35";
 const close$2 = "_close_1f3nh_35";
-const styles$D = {
+const styles$E = {
   header: header$6,
   slot,
   handleSlot,
@@ -6733,23 +6737,23 @@ function CloseIcon$1() {
 }
 function SheetHeader({ onClose, closeLabel }) {
   return jsxs("div", {
-    className: styles$D.header,
+    className: styles$E.header,
     children: [jsx("div", {
-      className: styles$D.slot,
+      className: styles$E.slot,
       "aria-hidden": "true"
     }), jsx("div", {
-      className: styles$D.handleSlot,
+      className: styles$E.handleSlot,
       "aria-hidden": "true",
       children: jsx("div", {
-        className: styles$D.handle
+        className: styles$E.handle
       })
     }), jsx("button", {
       type: "button",
-      className: styles$D.closeSlot,
+      className: styles$E.closeSlot,
       onClick: onClose,
       "aria-label": closeLabel,
       children: jsx("span", {
-        className: styles$D.close,
+        className: styles$E.close,
         children: jsx(CloseIcon$1, {})
       })
     })]
@@ -6805,7 +6809,7 @@ const radio = "_radio_7on4q_88";
 const label$1 = "_label_7on4q_118";
 const footer$1 = "_footer_7on4q_127";
 const error$1 = "_error_7on4q_135";
-const styles$C = {
+const styles$D = {
   scrim: scrim$5,
   sheet: sheet$3,
   body: body$6,
@@ -6822,12 +6826,12 @@ function ReasonSheet({ title: title2, options: options2, ctaLabel, selected: sel
   const [choice, setChoice] = useState(selected2);
   useModalDialog(true, onClose, sheetRef);
   return jsx("div", {
-    className: styles$C.scrim,
+    className: styles$D.scrim,
     onClick: onClose,
     children: jsxs(ShopSurface, {
       tone: "light",
       ref: sheetRef,
-      className: styles$C.sheet,
+      className: styles$D.sheet,
       role: "dialog",
       "aria-modal": "true",
       "aria-labelledby": "reason-sheet-title",
@@ -6836,23 +6840,23 @@ function ReasonSheet({ title: title2, options: options2, ctaLabel, selected: sel
         onClose,
         closeLabel
       }), jsxs("div", {
-        className: styles$C.body,
+        className: styles$D.body,
         children: [jsx("h2", {
           id: "reason-sheet-title",
-          className: styles$C.title,
+          className: styles$D.title,
           children: title2
         }), jsx("div", {
-          className: styles$C.options,
+          className: styles$D.options,
           role: "radiogroup",
           "aria-labelledby": "reason-sheet-title",
           children: options2.map((o) => jsxs("button", {
             type: "button",
             role: "radio",
             "aria-checked": o.value === choice,
-            className: styles$C.option,
+            className: styles$D.option,
             onClick: () => setChoice(o.value),
             children: [jsx("span", {
-              className: styles$C.radio,
+              className: styles$D.radio,
               "aria-hidden": "true",
               children: o.value === choice && jsxs("svg", {
                 width: "20",
@@ -6873,15 +6877,15 @@ function ReasonSheet({ title: title2, options: options2, ctaLabel, selected: sel
                 })]
               })
             }), jsx("span", {
-              className: styles$C.label,
+              className: styles$D.label,
               children: o.label
             })]
           }, o.value))
         })]
       }), jsxs("div", {
-        className: styles$C.footer,
+        className: styles$D.footer,
         children: [error2 && jsx("p", {
-          className: styles$C.error,
+          className: styles$D.error,
           role: "alert",
           children: error2
         }), jsx(Button, {
@@ -6896,27 +6900,82 @@ function ReasonSheet({ title: title2, options: options2, ctaLabel, selected: sel
     })
   });
 }
-const page$6 = "_page_1c7ro_7";
-const titles$2 = "_titles_1c7ro_15";
-const title$k = "_title_1c7ro_15";
-const subtitle$7 = "_subtitle_1c7ro_30";
-const list$2 = "_list_1c7ro_38";
-const card$3 = "_card_1c7ro_48";
-const checkSlot = "_checkSlot_1c7ro_61";
-const check = "_check_1c7ro_61";
-const row$6 = "_row_1c7ro_105";
-const line$1 = "_line_1c7ro_113";
-const thumb$1 = "_thumb_1c7ro_119";
-const img$1 = "_img_1c7ro_129";
-const placeholder$7 = "_placeholder_1c7ro_133";
-const meta$2 = "_meta_1c7ro_138";
-const name$2 = "_name_1c7ro_147";
-const attrs$1 = "_attrs_1c7ro_159";
-const price$3 = "_price_1c7ro_167";
-const paid$2 = "_paid_1c7ro_176";
-const was$3 = "_was_1c7ro_184";
-const reason = "_reason_1c7ro_199";
-const reasonSet = "_reasonSet_1c7ro_217";
+const line$1 = "_line_1v0et_6";
+const thumb$1 = "_thumb_1v0et_12";
+const img$1 = "_img_1v0et_22";
+const placeholder$7 = "_placeholder_1v0et_26";
+const meta$2 = "_meta_1v0et_31";
+const name$2 = "_name_1v0et_40";
+const attrs$1 = "_attrs_1v0et_52";
+const price$3 = "_price_1v0et_60";
+const paid$2 = "_paid_1v0et_69";
+const was$3 = "_was_1v0et_77";
+const styles$C = {
+  line: line$1,
+  thumb: thumb$1,
+  img: img$1,
+  placeholder: placeholder$7,
+  meta: meta$2,
+  name: name$2,
+  attrs: attrs$1,
+  price: price$3,
+  paid: paid$2,
+  was: was$3
+};
+function ReturnItemRow({ item: item2, className }) {
+  const { format } = useMoney();
+  return jsxs("div", {
+    className: [styles$C.line, className ?? ""].join(" ").trim(),
+    children: [jsx("div", {
+      className: styles$C.thumb,
+      children: item2.image ? jsx(ShopImage, {
+        src: item2.image,
+        alt: "",
+        fill: true,
+        sizes: "48px",
+        className: styles$C.img
+      }) : jsx("div", {
+        className: styles$C.placeholder,
+        "aria-hidden": "true"
+      })
+    }), jsxs("div", {
+      className: styles$C.meta,
+      children: [jsx("p", {
+        className: styles$C.name,
+        children: item2.title ?? item2.sku
+      }), item2.attributes?.size && jsx("p", {
+        className: styles$C.attrs,
+        children: `Size: ${item2.attributes.size}`
+      })]
+    }), jsxs("div", {
+      className: styles$C.price,
+      children: [jsx("span", {
+        className: styles$C.paid,
+        children: format(item2.unit_price)
+      }), item2.compare_at_unit_price && jsxs("span", {
+        className: styles$C.was,
+        children: [jsx("span", {
+          className: "visually-hidden",
+          children: `Was ${format(item2.compare_at_unit_price)}`
+        }), jsx("span", {
+          "aria-hidden": "true",
+          children: format(item2.compare_at_unit_price)
+        })]
+      })]
+    })]
+  });
+}
+const page$6 = "_page_6yt5y_7";
+const titles$2 = "_titles_6yt5y_15";
+const title$k = "_title_6yt5y_15";
+const subtitle$7 = "_subtitle_6yt5y_30";
+const list$2 = "_list_6yt5y_38";
+const card$3 = "_card_6yt5y_48";
+const checkSlot = "_checkSlot_6yt5y_61";
+const check = "_check_6yt5y_61";
+const row$6 = "_row_6yt5y_105";
+const reason = "_reason_6yt5y_119";
+const reasonSet = "_reasonSet_6yt5y_137";
 const styles$B = {
   page: page$6,
   titles: titles$2,
@@ -6927,16 +6986,6 @@ const styles$B = {
   checkSlot,
   check,
   row: row$6,
-  line: line$1,
-  thumb: thumb$1,
-  img: img$1,
-  placeholder: placeholder$7,
-  meta: meta$2,
-  name: name$2,
-  attrs: attrs$1,
-  price: price$3,
-  paid: paid$2,
-  was: was$3,
   reason,
   reasonSet
 };
@@ -7001,7 +7050,6 @@ function unitsLeft(item2) {
   return item2.qty - item2.cancelled_qty - item2.refunded_qty - (item2.returned_qty ?? 0);
 }
 function ReturnItemsView({ order, onSubmit, busy = false }) {
-  const { format } = useMoney();
   const [chosen, setChosen] = useState({});
   const [reasonFor, setReasonFor] = useState(null);
   const returnable = useMemo(() => order.items.filter((i) => unitsLeft(i) > 0), [order.items]);
@@ -7066,39 +7114,8 @@ function ReturnItemsView({ order, onSubmit, busy = false }) {
             })
           }), jsxs("div", {
             className: styles$B.row,
-            children: [jsxs("div", {
-              className: styles$B.line,
-              children: [jsx("div", {
-                className: styles$B.thumb,
-                children: item2.image ? jsx(ShopImage, {
-                  src: item2.image,
-                  alt: "",
-                  fill: true,
-                  sizes: "48px",
-                  className: styles$B.img
-                }) : jsx("div", {
-                  className: styles$B.placeholder,
-                  "aria-hidden": "true"
-                })
-              }), jsxs("div", {
-                className: styles$B.meta,
-                children: [jsx("p", {
-                  className: styles$B.name,
-                  children: item2.title ?? item2.sku
-                }), item2.attributes?.size && jsx("p", {
-                  className: styles$B.attrs,
-                  children: `Size: ${item2.attributes.size}`
-                })]
-              }), jsxs("div", {
-                className: styles$B.price,
-                children: [jsx("span", {
-                  className: styles$B.paid,
-                  children: format(item2.unit_price)
-                }), item2.compare_at_unit_price && jsx("span", {
-                  className: styles$B.was,
-                  children: format(item2.compare_at_unit_price)
-                })]
-              })]
+            children: [jsx(ReturnItemRow, {
+              item: item2
             }), jsxs("button", {
               type: "button",
               className: `${styles$B.reason} ${reason2 ? styles$B.reasonSet : ""}`,
@@ -7137,22 +7154,26 @@ function ReturnItemsView({ order, onSubmit, busy = false }) {
     })]
   });
 }
-const page$5 = "_page_1r0ea_7";
-const intro$1 = "_intro_1r0ea_15";
-const title$j = "_title_1r0ea_22";
-const subtitle$6 = "_subtitle_1r0ea_31";
-const card$2 = "_card_1r0ea_39";
-const step = "_step_1r0ea_49";
-const step2 = "_step2_1r0ea_56";
-const stepHead = "_stepHead_1r0ea_62";
-const number = "_number_1r0ea_69";
-const stepTitle = "_stepTitle_1r0ea_84";
-const body$5 = "_body_1r0ea_95";
-const body2 = "_body2_1r0ea_103";
-const download = "_download_1r0ea_121";
-const note$1 = "_note_1r0ea_143";
+const page$5 = "_page_51f4e_7";
+const top = "_top_51f4e_20";
+const items$2 = "_items_51f4e_27";
+const intro$1 = "_intro_51f4e_33";
+const title$j = "_title_51f4e_40";
+const subtitle$6 = "_subtitle_51f4e_49";
+const card$2 = "_card_51f4e_57";
+const step = "_step_51f4e_67";
+const step2 = "_step2_51f4e_74";
+const stepHead = "_stepHead_51f4e_80";
+const number = "_number_51f4e_87";
+const stepTitle = "_stepTitle_51f4e_102";
+const body$5 = "_body_51f4e_113";
+const body2 = "_body2_51f4e_121";
+const download = "_download_51f4e_139";
+const note$1 = "_note_51f4e_161";
 const styles$A = {
   page: page$5,
+  top,
+  items: items$2,
   intro: intro$1,
   title: title$j,
   subtitle: subtitle$6,
@@ -7171,59 +7192,67 @@ function ReturnLabelView({ ret, onDone }) {
   return jsxs("div", {
     className: styles$A.page,
     children: [jsxs("div", {
-      className: styles$A.intro,
-      children: [jsx("h1", {
-        className: styles$A.title,
-        children: "We’ve generated your return label"
-      }), jsx("p", {
-        className: styles$A.subtitle,
-        children: "Follow the instructions below to complete your return"
-      })]
-    }), jsxs("div", {
-      className: styles$A.card,
-      children: [jsxs("section", {
-        className: styles$A.step,
-        children: [jsxs("div", {
-          className: styles$A.stepHead,
-          children: [jsx("span", {
-            className: styles$A.number,
-            "aria-hidden": "true",
-            children: "1"
-          }), jsx("h2", {
-            className: styles$A.stepTitle,
-            children: "Download your return label"
-          })]
+      className: styles$A.top,
+      children: [jsx("div", {
+        className: styles$A.items,
+        children: ret.items.map((item2) => jsx(ReturnItemRow, {
+          item: item2
+        }, item2.line_ref))
+      }), jsxs("div", {
+        className: styles$A.intro,
+        children: [jsx("h1", {
+          className: styles$A.title,
+          children: "We’ve generated your return label"
         }), jsx("p", {
-          className: styles$A.body,
-          children: "Tap the button below to download your pre-paid return label"
-        }), ret.label_url && jsxs("a", {
-          className: styles$A.download,
-          href: ret.label_url,
-          target: "_blank",
-          rel: "noopener noreferrer",
-          children: ["Download return label", jsx("span", {
-            className: "visually-hidden",
-            children: " (opens in a new tab)"
-          })]
-        }), ret.label_email && jsxs("p", {
-          className: styles$A.note,
-          children: ["You’ll receive a shipping label PDF to your email as well.", jsx("br", {}), ret.label_email]
+          className: styles$A.subtitle,
+          children: "Follow the instructions below to complete your return"
         })]
-      }), jsxs("section", {
-        className: styles$A.step2,
-        children: [jsxs("div", {
-          className: styles$A.stepHead,
-          children: [jsx("span", {
-            className: styles$A.number,
-            "aria-hidden": "true",
-            children: "2"
-          }), jsx("h2", {
-            className: styles$A.stepTitle,
-            children: "Pack and ship the item"
+      }), jsxs("div", {
+        className: styles$A.card,
+        children: [jsxs("section", {
+          className: styles$A.step,
+          children: [jsxs("div", {
+            className: styles$A.stepHead,
+            children: [jsx("span", {
+              className: styles$A.number,
+              "aria-hidden": "true",
+              children: "1"
+            }), jsx("h2", {
+              className: styles$A.stepTitle,
+              children: "Download your return label"
+            })]
+          }), jsx("p", {
+            className: styles$A.body,
+            children: "Tap the button below to download your pre-paid return label"
+          }), ret.label_url && jsxs("a", {
+            className: styles$A.download,
+            href: ret.label_url,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: ["Download return label", jsx("span", {
+              className: "visually-hidden",
+              children: " (opens in a new tab)"
+            })]
+          }), ret.label_email && jsxs("p", {
+            className: styles$A.note,
+            children: ["You’ll receive a shipping label PDF to your email as well.", jsx("br", {}), ret.label_email]
+          })]
+        }), jsxs("section", {
+          className: styles$A.step2,
+          children: [jsxs("div", {
+            className: styles$A.stepHead,
+            children: [jsx("span", {
+              className: styles$A.number,
+              "aria-hidden": "true",
+              children: "2"
+            }), jsx("h2", {
+              className: styles$A.stepTitle,
+              children: "Pack and ship the item"
+            })]
+          }), jsxs("p", {
+            className: styles$A.body2,
+            children: ["Repackage the item securely and attach the return label to the outside of the package.", jsx("br", {}), "Drop it off at your local carrier or post office."]
           })]
-        }), jsxs("p", {
-          className: styles$A.body2,
-          children: ["Repackage the item securely and attach the return label to the outside of the package.", jsx("br", {}), "Drop it off at your local carrier or post office."]
         })]
       })]
     }), onDone && jsx(Button, {
@@ -10737,8 +10766,8 @@ function useDocumentSnap(ref, enabled = true) {
     const previousPadding = root2.style.scrollPaddingTop;
     let timer2;
     const syncPadding = () => {
-      const top = getComputedStyle(el).getPropertyValue("--showcase-top").trim();
-      root2.style.scrollPaddingTop = top === "" ? "0px" : top;
+      const top2 = getComputedStyle(el).getPropertyValue("--showcase-top").trim();
+      root2.style.scrollPaddingTop = top2 === "" ? "0px" : top2;
     };
     const schedule = () => {
       if (timer2) clearTimeout(timer2);
@@ -11096,8 +11125,8 @@ function useScrolledUnder(enabled) {
     if (!enabled) return;
     const read = (event) => {
       const target = event?.target;
-      const top = target && target !== document && target instanceof HTMLElement ? target.scrollTop : window.scrollY || document.documentElement.scrollTop;
-      setScrolled(top > 0);
+      const top2 = target && target !== document && target instanceof HTMLElement ? target.scrollTop : window.scrollY || document.documentElement.scrollTop;
+      setScrolled(top2 > 0);
     };
     read();
     document.addEventListener("scroll", read, {