@nok-integration/storefront-react 0.19.9 → 0.19.14

package/dist/index.mjs

@@ -5587,6 +5587,7 @@ const ES = {
   "One moment": "Un momento",
   "One or more items just sold out. Adjust your cart to continue.": "Uno o más artículos se han agotado. Ajusta tu carrito para continuar.",
   "Only {0} left": "Solo quedan {0}",
+  "Only {0} left in {1} size": "Solo quedan {0} en talla {1}",
   "Order #{0}": "Pedido n.º {0}",
   "Order already placed": "Pedido ya realizado",
   "Order not found": "Pedido no encontrado",
@@ -6835,306 +6836,7 @@ function ReasonSheet({ title: title2, options: options2, ctaLabel, selected: sel
     })
   });
 }
-const page$6 = "_page_1v9my_8";
-const widget = "_widget_1v9my_18";
-const titleRow = "_titleRow_1v9my_26";
-const headline$1 = "_headline_1v9my_42";
-const track$5 = "_track_1v9my_74";
-const rule$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 styles$A = {
-  page: page$6,
-  widget,
-  titleRow,
-  headline: headline$1,
-  track: track$5,
-  rule: rule$1,
-  help,
-  helpTitle,
-  helpRows,
-  helpRow,
-  cancel,
-  cancelledHead,
-  cancelledTitle,
-  cancelledMeta
-};
-function RedirectLink() {
-  return jsxs("svg", {
-    width: "14",
-    height: "14",
-    viewBox: "0 0 14 14",
-    fill: "none",
-    "aria-hidden": "true",
-    children: [jsx("path", {
-      d: "M3.37413 1.63539C2.84882 1.63539 2.39164 1.90422 2.08646 2.29534C1.78479 2.68228 1.63445 3.17776 1.63445 3.66795V3.67088L1.66569 10.3328C1.66636 10.8221 1.81652 11.3164 2.1177 11.7025C2.42287 12.0935 2.8802 12.3615 3.40537 12.3615L3.4044 12.3625L10.6248 12.3654C11.1499 12.3653 11.6063 12.0965 11.9115 11.7054C12.2134 11.3185 12.3644 10.8232 12.3645 10.3328V8.33347C12.3645 7.94707 12.0508 7.63363 11.6645 7.63349C11.278 7.63349 10.9645 7.94699 10.9645 8.33347V10.3328C10.9644 10.5489 10.8962 10.7317 10.8083 10.8444C10.7238 10.9526 10.6512 10.9654 10.6248 10.9654L3.40537 10.9625C3.37921 10.9625 3.30653 10.9498 3.22184 10.8415C3.13389 10.7287 3.06474 10.5461 3.06466 10.3299V10.327L3.03342 3.66405C3.03416 3.44927 3.10311 3.26759 3.1906 3.15542C3.27527 3.04709 3.34796 3.03436 3.37413 3.03436H5.44477C5.83092 3.03423 6.14439 2.72147 6.14474 2.33537C6.14474 1.94897 5.83113 1.63553 5.44477 1.63539H3.37413Z",
-      fill: "currentColor"
-    }), jsx("path", {
-      d: "M8.683 1.63442C8.29663 1.63442 7.9832 1.94806 7.98303 2.33439C7.98303 2.72087 8.29652 3.03436 8.683 3.03436H9.97458L6.504 6.50495C6.23093 6.77819 6.23093 7.22163 6.504 7.49487C6.77724 7.76794 7.22068 7.76794 7.49392 7.49487L10.9645 4.02331V5.31587C10.9645 5.70233 11.278 6.01582 11.6645 6.01584C12.0508 6.01571 12.3645 5.70226 12.3645 5.31587V2.33439C12.3643 2.04478 12.1878 1.79638 11.9369 1.69006L11.9271 1.68616C11.9116 1.67987 11.8951 1.67664 11.8793 1.67152C11.8526 1.66289 11.8261 1.6535 11.7982 1.64809C11.7924 1.64696 11.7865 1.64711 11.7807 1.64613C11.7428 1.63977 11.7042 1.63443 11.6645 1.63442H8.683Z",
-      fill: "currentColor"
-    })]
-  });
-}
-function ChevronRight$1() {
-  return jsx("svg", {
-    width: "16",
-    height: "16",
-    viewBox: "0 0 16 16",
-    fill: "none",
-    "aria-hidden": "true",
-    children: jsx("g", {
-      transform: "translate(4.28 1.96)",
-      children: jsx("path", {
-        d: "M7.42763 6.03763C7.42763 5.83763 7.33763 5.64763 7.18763 5.51763L1.15763 0.177629C0.867628 -0.0823714 0.427629 -0.0523713 0.177629 0.237629C-0.0823713 0.527629 -0.0523714 0.967629 0.237629 1.22763L5.67763 6.04763L0.237629 10.8576C-0.0523709 11.1176 -0.0823709 11.5576 0.177629 11.8476C0.437629 12.1376 0.877629 12.1676 1.16763 11.9076L7.19763 6.56763C7.34763 6.43763 7.43763 6.24763 7.43763 6.04763L7.42763 6.03763Z",
-        fill: "currentColor"
-      })
-    })
-  });
-}
-function OrderTrackingView(props) {
-  return jsx(ShopSurface, {
-    tone: "light",
-    fill: true,
-    children: jsx(OrderTrackingContent, {
-      ...props
-    })
-  });
-}
-function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onContactSupport, onCancelled, onReorder }) {
-  const t = useT();
-  const { api } = useShop();
-  const locale = useLocale(localeProp);
-  const [order, setOrder] = useState(null);
-  const [state, setState] = useState("loading");
-  const [errorCode, setErrorCode] = useState(void 0);
-  const [cancelOpen, setCancelOpen] = useState(false);
-  const [cancelling, setCancelling] = useState(false);
-  const [cancelError, setCancelError] = useState(null);
-  const emit = useShopEvent();
-  const load = useCallback(async () => {
-    setState("loading");
-    try {
-      setOrder(await api.orders.get(orderRef));
-      setState("ready");
-    } catch (err) {
-      setErrorCode(codeOf(err));
-      setState("error");
-    }
-  }, [api, orderRef]);
-  useEffect(() => {
-    void load();
-  }, [load]);
-  if (state === "loading") {
-    return jsxs("div", {
-      className: styles$A.page,
-      children: [jsx(Skeleton, {
-        height: 206,
-        radius: 8
-      }), jsx(Skeleton, {
-        height: 48,
-        radius: 8
-      }), jsx(Skeleton, {
-        height: 113,
-        radius: 18
-      }), jsx(Skeleton, {
-        height: 240,
-        radius: 18
-      })]
-    });
-  }
-  if (state === "error" || !order) {
-    return jsx(ErrorState, {
-      code: errorCode,
-      onRetry: () => void load()
-    });
-  }
-  async function confirmCancellation(reason2) {
-    setCancelling(true);
-    setCancelError(null);
-    try {
-      const updated = await api.orders.requestCancellation(orderRef, {
-        reason: reason2
-      });
-      setOrder(updated);
-      setCancelOpen(false);
-      emit({
-        type: "order_cancellation_requested",
-        orderRef,
-        reason: reason2
-      });
-      onCancelled?.(updated);
-    } catch (err) {
-      setCancelError(t(treatmentFor(codeOf(err)).body));
-    } finally {
-      setCancelling(false);
-    }
-  }
-  if (order.status === "cancelled") {
-    return jsxs("div", {
-      className: styles$A.page,
-      children: [jsxs("div", {
-        className: styles$A.cancelledHead,
-        children: [jsx("h1", {
-          className: styles$A.cancelledTitle,
-          children: "Order cancelled"
-        }), jsx("p", {
-          className: styles$A.cancelledMeta,
-          children: `Order #${shortRef$1(order.order_ref)} · Placed ${placedOn(order.placed_at, locale)}`
-        })]
-      }), onReorder && jsx(Button, {
-        variant: "primary",
-        fullWidth: true,
-        onClick: () => {
-          emit({
-            type: "reorder_requested",
-            orderRef: order.order_ref
-          });
-          onReorder();
-        },
-        children: "Reorder"
-      }), jsx(OrderLines, {
-        order
-      }), jsx(ShippingAddressCard, {
-        order
-      }), jsx(OrderSummaryCard, {
-        order
-      })]
-    });
-  }
-  return jsxs("div", {
-    className: styles$A.page,
-    children: [jsxs("section", {
-      className: styles$A.widget,
-      "aria-label": t("Delivery status"),
-      children: [jsxs("div", {
-        className: styles$A.titleRow,
-        children: [jsx("h1", {
-          className: styles$A.headline,
-          children: `Order #${shortRef$1(order.order_ref)}`
-        }), order.tracking?.url && jsxs("a", {
-          className: styles$A.track,
-          href: order.tracking.url,
-          target: "_blank",
-          rel: "noopener noreferrer",
-          children: ["Track", jsx("span", {
-            className: "visually-hidden",
-            children: ` ${order.tracking.carrier}, opens in a new tab`
-          }), jsx(RedirectLink, {})]
-        })]
-      }), jsx(OrderTimeline, {
-        progress: order.progress,
-        ...order.estimated_delivery ? {
-          estimatedDelivery: order.estimated_delivery
-        } : {},
-        locale
-      }), order.can_return && onStartReturn && jsx(Button, {
-        variant: "secondary",
-        fullWidth: true,
-        onClick: onStartReturn,
-        children: "Return items"
-      })]
-    }), jsx("hr", {
-      className: styles$A.rule
-    }), jsx(OrderLines, {
-      order
-    }), jsx(ShippingAddressCard, {
-      order
-    }), jsx(OrderSummaryCard, {
-      order
-    }), order.can_cancel && jsx("button", {
-      type: "button",
-      className: styles$A.cancel,
-      onClick: () => setCancelOpen(true),
-      children: "Cancel order"
-    }), jsx(NeedHelp, {
-      order,
-      ...onStartReturn ? {
-        onStartReturn
-      } : {},
-      ...onContactSupport ? {
-        onContactSupport
-      } : {}
-    }), cancelOpen && jsx(ReasonSheet, {
-      title: "Reason for cancelling",
-      options: CANCEL_REASONS,
-      ctaLabel: "Cancel order",
-      closeLabel: "Close reasons",
-      busy: cancelling,
-      onClose: () => setCancelOpen(false),
-      onConfirm: (reason2) => void confirmCancellation(reason2),
-      ...cancelError ? {
-        error: cancelError
-      } : {}
-    })]
-  });
-}
-const CANCEL_REASONS = [{
-  value: "changed_my_mind",
-  label: "Changed my mind"
-}, {
-  value: "ordered_by_mistake",
-  label: "Ordered by mistake"
-}, {
-  value: "delivery_too_long",
-  label: "Delivery takes too long"
-}];
-function placedOn(iso, locale) {
-  const d = new Date(iso);
-  const day = d.getUTCDate();
-  const month = new Intl.DateTimeFormat(locale, {
-    month: "short",
-    timeZone: "UTC"
-  }).format(d);
-  return `${day} ${month}, ${d.getUTCFullYear()}`;
-}
-function NeedHelp({ order, onStartReturn, onContactSupport }) {
-  const emit = useShopEvent();
-  if (order.status !== "delivered") return null;
-  return jsxs("section", {
-    className: styles$A.help,
-    "aria-labelledby": "order-help",
-    children: [jsx("h2", {
-      className: styles$A.helpTitle,
-      id: "order-help",
-      children: "Need help?"
-    }), jsxs("div", {
-      className: styles$A.helpRows,
-      children: [onStartReturn && jsx(HelpRow, {
-        label: "Start a return",
-        onClick: onStartReturn
-      }), jsx(HelpRow, {
-        label: "Contact support",
-        onClick: () => {
-          emit({
-            type: "support_requested",
-            orderRef: order.order_ref
-          });
-          onContactSupport?.();
-        }
-      })]
-    })]
-  });
-}
-function HelpRow({ label: label2, onClick }) {
-  return jsxs("button", {
-    type: "button",
-    className: styles$A.helpRow,
-    onClick,
-    children: [jsx("span", {
-      children: label2
-    }), jsx(ChevronRight$1, {})]
-  });
-}
-function shortRef$1(orderRef) {
-  return orderRef.replace(/^ord_/, "");
-}
-const page$5 = "_page_1c7ro_7";
+const page$6 = "_page_1c7ro_7";
 const titles$2 = "_titles_1c7ro_15";
 const title$k = "_title_1c7ro_15";
 const subtitle$7 = "_subtitle_1c7ro_30";
@@ -7155,8 +6857,8 @@ const paid$2 = "_paid_1c7ro_176";
 const was$3 = "_was_1c7ro_184";
 const reason = "_reason_1c7ro_199";
 const reasonSet = "_reasonSet_1c7ro_217";
-const styles$z = {
-  page: page$5,
+const styles$A = {
+  page: page$6,
   titles: titles$2,
   title: title$k,
   subtitle: subtitle$7,
@@ -7271,72 +6973,72 @@ function ReturnItemsView({ order, onSubmit, busy = false }) {
     if (items2.length > 0) onSubmit(items2);
   }
   return jsxs("div", {
-    className: styles$z.page,
+    className: styles$A.page,
     children: [jsxs("div", {
-      className: styles$z.titles,
+      className: styles$A.titles,
       children: [jsx("h1", {
-        className: styles$z.title,
+        className: styles$A.title,
         children: "What do you want to return?"
       }), jsx("p", {
-        className: styles$z.subtitle,
+        className: styles$A.subtitle,
         children: "Select items you want to return"
       })]
     }), jsx("div", {
-      className: styles$z.list,
+      className: styles$A.list,
       children: returnable.map((item2) => {
         const picked = item2.line_ref in chosen;
         const reason2 = chosen[item2.line_ref];
         return jsxs("div", {
-          className: styles$z.card,
+          className: styles$A.card,
           children: [jsx("button", {
             type: "button",
             role: "checkbox",
             "aria-checked": picked,
             "aria-label": item2.title ?? item2.sku,
-            className: styles$z.checkSlot,
+            className: styles$A.checkSlot,
             onClick: () => toggle2(item2.line_ref),
             children: jsx("span", {
-              className: styles$z.check,
+              className: styles$A.check,
               children: picked ? jsx(Tick, {}) : null
             })
           }), jsxs("div", {
-            className: styles$z.row,
+            className: styles$A.row,
             children: [jsxs("div", {
-              className: styles$z.line,
+              className: styles$A.line,
               children: [jsx("div", {
-                className: styles$z.thumb,
+                className: styles$A.thumb,
                 children: item2.image ? jsx(ShopImage, {
                   src: item2.image,
                   alt: "",
                   fill: true,
                   sizes: "48px",
-                  className: styles$z.img
+                  className: styles$A.img
                 }) : jsx("div", {
-                  className: styles$z.placeholder,
+                  className: styles$A.placeholder,
                   "aria-hidden": "true"
                 })
               }), jsxs("div", {
-                className: styles$z.meta,
+                className: styles$A.meta,
                 children: [jsx("p", {
-                  className: styles$z.name,
+                  className: styles$A.name,
                   children: item2.title ?? item2.sku
                 }), item2.attributes?.size && jsx("p", {
-                  className: styles$z.attrs,
+                  className: styles$A.attrs,
                   children: `Size: ${item2.attributes.size}`
                 })]
               }), jsxs("div", {
-                className: styles$z.price,
+                className: styles$A.price,
                 children: [jsx("span", {
-                  className: styles$z.paid,
+                  className: styles$A.paid,
                   children: format(item2.unit_price)
                 }), item2.compare_at_unit_price && jsx("span", {
-                  className: styles$z.was,
+                  className: styles$A.was,
                   children: format(item2.compare_at_unit_price)
                 })]
               })]
             }), jsxs("button", {
               type: "button",
-              className: `${styles$z.reason} ${reason2 ? styles$z.reasonSet : ""}`,
+              className: `${styles$A.reason} ${reason2 ? styles$A.reasonSet : ""}`,
               onClick: () => setReasonFor(item2.line_ref),
               "aria-haspopup": "dialog",
               children: [jsx("span", {
@@ -7372,7 +7074,7 @@ function ReturnItemsView({ order, onSubmit, busy = false }) {
     })]
   });
 }
-const page$4 = "_page_1r0ea_7";
+const page$5 = "_page_1r0ea_7";
 const intro$1 = "_intro_1r0ea_15";
 const title$j = "_title_1r0ea_22";
 const subtitle$6 = "_subtitle_1r0ea_31";
@@ -7386,8 +7088,8 @@ const body$5 = "_body_1r0ea_95";
 const body2 = "_body2_1r0ea_103";
 const download = "_download_1r0ea_121";
 const note$1 = "_note_1r0ea_143";
-const styles$y = {
-  page: page$4,
+const styles$z = {
+  page: page$5,
   intro: intro$1,
   title: title$j,
   subtitle: subtitle$6,
@@ -7404,35 +7106,35 @@ const styles$y = {
 };
 function ReturnLabelView({ ret, onDone }) {
   return jsxs("div", {
-    className: styles$y.page,
+    className: styles$z.page,
     children: [jsxs("div", {
-      className: styles$y.intro,
+      className: styles$z.intro,
       children: [jsx("h1", {
-        className: styles$y.title,
+        className: styles$z.title,
         children: "We’ve generated your return label"
       }), jsx("p", {
-        className: styles$y.subtitle,
+        className: styles$z.subtitle,
         children: "Follow the instructions below to complete your return"
       })]
     }), jsxs("div", {
-      className: styles$y.card,
+      className: styles$z.card,
       children: [jsxs("section", {
-        className: styles$y.step,
+        className: styles$z.step,
         children: [jsxs("div", {
-          className: styles$y.stepHead,
+          className: styles$z.stepHead,
           children: [jsx("span", {
-            className: styles$y.number,
+            className: styles$z.number,
             "aria-hidden": "true",
             children: "1"
           }), jsx("h2", {
-            className: styles$y.stepTitle,
+            className: styles$z.stepTitle,
             children: "Download your return label"
           })]
         }), jsx("p", {
-          className: styles$y.body,
+          className: styles$z.body,
           children: "Tap the button below to download your pre-paid return label"
         }), ret.label_url && jsxs("a", {
-          className: styles$y.download,
+          className: styles$z.download,
           href: ret.label_url,
           target: "_blank",
           rel: "noopener noreferrer",
@@ -7441,23 +7143,23 @@ function ReturnLabelView({ ret, onDone }) {
             children: " (opens in a new tab)"
           })]
         }), ret.label_email && jsxs("p", {
-          className: styles$y.note,
+          className: styles$z.note,
           children: ["You’ll receive a shipping label PDF to your email as well.", jsx("br", {}), ret.label_email]
         })]
       }), jsxs("section", {
-        className: styles$y.step2,
+        className: styles$z.step2,
         children: [jsxs("div", {
-          className: styles$y.stepHead,
+          className: styles$z.stepHead,
           children: [jsx("span", {
-            className: styles$y.number,
+            className: styles$z.number,
             "aria-hidden": "true",
             children: "2"
           }), jsx("h2", {
-            className: styles$y.stepTitle,
+            className: styles$z.stepTitle,
             children: "Pack and ship the item"
           })]
         }), jsxs("p", {
-          className: styles$y.body2,
+          className: styles$z.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."]
         })]
       })]
@@ -7469,7 +7171,7 @@ function ReturnLabelView({ ret, onDone }) {
     })]
   });
 }
-const page$3 = "_page_o44fl_8";
+const page$4 = "_page_o44fl_8";
 const titles$1 = "_titles_o44fl_15";
 const title$i = "_title_o44fl_15";
 const subtitle$5 = "_subtitle_o44fl_30";
@@ -7484,8 +7186,8 @@ const attrs = "_attrs_o44fl_100";
 const price$2 = "_price_o44fl_115";
 const paid$1 = "_paid_o44fl_124";
 const was$2 = "_was_o44fl_132";
-const styles$x = {
-  page: page$3,
+const styles$y = {
+  page: page$4,
   titles: titles$1,
   title: title$i,
   subtitle: subtitle$5,
@@ -7517,42 +7219,42 @@ function ReturnTrackingView({ ret, locale: localeProp }) {
     tone: "light",
     fill: true,
     children: jsxs("div", {
-      className: styles$x.page,
+      className: styles$y.page,
       children: [jsxs("div", {
-        className: styles$x.titles,
+        className: styles$y.titles,
         children: [jsx("h1", {
-          className: styles$x.title,
+          className: styles$y.title,
           children: "Return in progress"
         }), jsx("p", {
-          className: styles$x.subtitle,
+          className: styles$y.subtitle,
           children: `Return #${ret.return_ref} · Reported ${reported}`
         })]
       }), jsx(OrderTimeline, {
         progress: ret.progress,
         locale
       }), jsx("ul", {
-        className: styles$x.items,
+        className: styles$y.items,
         children: ret.items.map((item2) => jsxs("li", {
-          className: styles$x.item,
+          className: styles$y.item,
           children: [jsx("div", {
-            className: styles$x.thumb,
+            className: styles$y.thumb,
             children: item2.image ? jsx(ShopImage, {
               src: item2.image,
               alt: "",
               fill: true,
               sizes: "48px",
-              className: styles$x.img
+              className: styles$y.img
             }) : jsx("div", {
-              className: styles$x.placeholder,
+              className: styles$y.placeholder,
               "aria-hidden": "true"
             })
           }), jsxs("div", {
-            className: styles$x.meta,
+            className: styles$y.meta,
             children: [jsx("p", {
-              className: styles$x.name,
+              className: styles$y.name,
               children: item2.title ?? item2.sku
             }), (item2.attributes?.size || pctOff(item2)) && jsxs("p", {
-              className: styles$x.attrs,
+              className: styles$y.attrs,
               children: [item2.attributes?.size && jsx("span", {
                 children: `Size: ${item2.attributes.size}`
               }), pctOff(item2) !== void 0 && jsx(SaleBadge, {
@@ -7560,12 +7262,12 @@ function ReturnTrackingView({ ret, locale: localeProp }) {
               })]
             })]
           }), jsxs("div", {
-            className: styles$x.price,
+            className: styles$y.price,
             children: [jsx("span", {
-              className: styles$x.paid,
+              className: styles$y.paid,
               children: format(item2.unit_price)
             }), item2.compare_at_unit_price && jsx("span", {
-              className: styles$x.was,
+              className: styles$y.was,
               children: format(item2.compare_at_unit_price)
             })]
           })]
@@ -7612,72 +7314,376 @@ function ReturnFlowContent({ orderRef, returnRef, onDone, locale }) {
     if (!orderRef) return;
     setBusy(true);
     try {
-      const created = await api.orders.createReturn(orderRef, {
-        items: items2
-      });
-      setRet(created);
-      emit({
-        type: "return_requested",
-        orderRef,
-        returnRef: created.return_ref
-      });
+      const created = await api.orders.createReturn(orderRef, {
+        items: items2
+      });
+      setRet(created);
+      emit({
+        type: "return_requested",
+        orderRef,
+        returnRef: created.return_ref
+      });
+    } catch (err) {
+      setErrorCode(codeOf(err));
+      setState("error");
+      setBusy(false);
+    }
+  }
+  if (state === "loading") {
+    return jsx("div", {
+      style: {
+        padding: "var(--space-16)",
+        display: "flex",
+        flexDirection: "column",
+        gap: "var(--space-16)"
+      },
+      children: [0, 1, 2].map((i) => jsx(Skeleton, {
+        height: 88,
+        radius: 8
+      }, i))
+    });
+  }
+  if (state === "error") {
+    return jsx(ErrorState, {
+      code: errorCode,
+      onRetry: () => void load()
+    });
+  }
+  if (ret) {
+    return ret.status === "reported" ? jsx(ReturnLabelView, {
+      ret,
+      ...onDone ? {
+        onDone
+      } : {}
+    }) : jsx(ReturnTrackingView, {
+      ret,
+      ...locale ? {
+        locale
+      } : {}
+    });
+  }
+  if (!order) {
+    return jsx(ErrorState, {
+      code: errorCode,
+      onRetry: () => void load()
+    });
+  }
+  if (!order.can_return) {
+    return jsx(ErrorState, {
+      code: "order_not_cancellable",
+      onRetry: () => void load()
+    });
+  }
+  return jsx(ReturnItemsView, {
+    order,
+    onSubmit: (items2) => void submit(items2),
+    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 styles$x = {
+  page: page$3,
+  widget,
+  titleRow,
+  headline: headline$1,
+  track: track$5,
+  rule: rule$1,
+  help,
+  helpTitle,
+  helpRows,
+  helpRow,
+  cancel,
+  cancelledHead,
+  cancelledTitle,
+  cancelledMeta
+};
+function RedirectLink() {
+  return jsxs("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    "aria-hidden": "true",
+    children: [jsx("path", {
+      d: "M3.37413 1.63539C2.84882 1.63539 2.39164 1.90422 2.08646 2.29534C1.78479 2.68228 1.63445 3.17776 1.63445 3.66795V3.67088L1.66569 10.3328C1.66636 10.8221 1.81652 11.3164 2.1177 11.7025C2.42287 12.0935 2.8802 12.3615 3.40537 12.3615L3.4044 12.3625L10.6248 12.3654C11.1499 12.3653 11.6063 12.0965 11.9115 11.7054C12.2134 11.3185 12.3644 10.8232 12.3645 10.3328V8.33347C12.3645 7.94707 12.0508 7.63363 11.6645 7.63349C11.278 7.63349 10.9645 7.94699 10.9645 8.33347V10.3328C10.9644 10.5489 10.8962 10.7317 10.8083 10.8444C10.7238 10.9526 10.6512 10.9654 10.6248 10.9654L3.40537 10.9625C3.37921 10.9625 3.30653 10.9498 3.22184 10.8415C3.13389 10.7287 3.06474 10.5461 3.06466 10.3299V10.327L3.03342 3.66405C3.03416 3.44927 3.10311 3.26759 3.1906 3.15542C3.27527 3.04709 3.34796 3.03436 3.37413 3.03436H5.44477C5.83092 3.03423 6.14439 2.72147 6.14474 2.33537C6.14474 1.94897 5.83113 1.63553 5.44477 1.63539H3.37413Z",
+      fill: "currentColor"
+    }), jsx("path", {
+      d: "M8.683 1.63442C8.29663 1.63442 7.9832 1.94806 7.98303 2.33439C7.98303 2.72087 8.29652 3.03436 8.683 3.03436H9.97458L6.504 6.50495C6.23093 6.77819 6.23093 7.22163 6.504 7.49487C6.77724 7.76794 7.22068 7.76794 7.49392 7.49487L10.9645 4.02331V5.31587C10.9645 5.70233 11.278 6.01582 11.6645 6.01584C12.0508 6.01571 12.3645 5.70226 12.3645 5.31587V2.33439C12.3643 2.04478 12.1878 1.79638 11.9369 1.69006L11.9271 1.68616C11.9116 1.67987 11.8951 1.67664 11.8793 1.67152C11.8526 1.66289 11.8261 1.6535 11.7982 1.64809C11.7924 1.64696 11.7865 1.64711 11.7807 1.64613C11.7428 1.63977 11.7042 1.63443 11.6645 1.63442H8.683Z",
+      fill: "currentColor"
+    })]
+  });
+}
+function ChevronRight$1() {
+  return jsx("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    "aria-hidden": "true",
+    children: jsx("g", {
+      transform: "translate(4.28 1.96)",
+      children: jsx("path", {
+        d: "M7.42763 6.03763C7.42763 5.83763 7.33763 5.64763 7.18763 5.51763L1.15763 0.177629C0.867628 -0.0823714 0.427629 -0.0523713 0.177629 0.237629C-0.0823713 0.527629 -0.0523714 0.967629 0.237629 1.22763L5.67763 6.04763L0.237629 10.8576C-0.0523709 11.1176 -0.0823709 11.5576 0.177629 11.8476C0.437629 12.1376 0.877629 12.1676 1.16763 11.9076L7.19763 6.56763C7.34763 6.43763 7.43763 6.24763 7.43763 6.04763L7.42763 6.03763Z",
+        fill: "currentColor"
+      })
+    })
+  });
+}
+function OrderTrackingView(props) {
+  const [returning, setReturning] = useState(false);
+  if (returning) {
+    return jsx(ReturnFlowView, {
+      orderRef: props.orderRef,
+      onDone: () => setReturning(false)
+    });
+  }
+  return jsx(ShopSurface, {
+    tone: "light",
+    fill: true,
+    children: jsx(OrderTrackingContent, {
+      ...props,
+      onStartReturn: props.onStartReturn ?? (() => setReturning(true))
+    })
+  });
+}
+function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onContactSupport, onCancelled, onReorder }) {
+  const t = useT();
+  const { api } = useShop();
+  const locale = useLocale(localeProp);
+  const [order, setOrder] = useState(null);
+  const [state, setState] = useState("loading");
+  const [errorCode, setErrorCode] = useState(void 0);
+  const [cancelOpen, setCancelOpen] = useState(false);
+  const [cancelling, setCancelling] = useState(false);
+  const [cancelError, setCancelError] = useState(null);
+  const emit = useShopEvent();
+  const load = useCallback(async () => {
+    setState("loading");
+    try {
+      setOrder(await api.orders.get(orderRef));
+      setState("ready");
     } catch (err) {
       setErrorCode(codeOf(err));
       setState("error");
-      setBusy(false);
     }
-  }
+  }, [api, orderRef]);
+  useEffect(() => {
+    void load();
+  }, [load]);
   if (state === "loading") {
-    return jsx("div", {
-      style: {
-        padding: "var(--space-16)",
-        display: "flex",
-        flexDirection: "column",
-        gap: "var(--space-16)"
-      },
-      children: [0, 1, 2].map((i) => jsx(Skeleton, {
-        height: 88,
+    return jsxs("div", {
+      className: styles$x.page,
+      children: [jsx(Skeleton, {
+        height: 206,
         radius: 8
-      }, i))
+      }), jsx(Skeleton, {
+        height: 48,
+        radius: 8
+      }), jsx(Skeleton, {
+        height: 113,
+        radius: 18
+      }), jsx(Skeleton, {
+        height: 240,
+        radius: 18
+      })]
     });
   }
-  if (state === "error") {
+  if (state === "error" || !order) {
     return jsx(ErrorState, {
       code: errorCode,
       onRetry: () => void load()
     });
   }
-  if (ret) {
-    return ret.status === "reported" ? jsx(ReturnLabelView, {
-      ret,
-      ...onDone ? {
-        onDone
-      } : {}
-    }) : jsx(ReturnTrackingView, {
-      ret,
-      ...locale ? {
-        locale
-      } : {}
-    });
-  }
-  if (!order) {
-    return jsx(ErrorState, {
-      code: errorCode,
-      onRetry: () => void load()
-    });
+  const currentStep = order.progress.find((entry) => entry.current)?.step;
+  const inTransit = currentStep === "on_its_way" || currentStep === "out_for_delivery";
+  async function confirmCancellation(reason2) {
+    setCancelling(true);
+    setCancelError(null);
+    try {
+      const updated = await api.orders.requestCancellation(orderRef, {
+        reason: reason2
+      });
+      setOrder(updated);
+      setCancelOpen(false);
+      emit({
+        type: "order_cancellation_requested",
+        orderRef,
+        reason: reason2
+      });
+      onCancelled?.(updated);
+    } catch (err) {
+      setCancelError(t(treatmentFor(codeOf(err)).body));
+    } finally {
+      setCancelling(false);
+    }
   }
-  if (!order.can_return) {
-    return jsx(ErrorState, {
-      code: "order_not_cancellable",
-      onRetry: () => void load()
+  if (order.status === "cancelled") {
+    return jsxs("div", {
+      className: styles$x.page,
+      children: [jsxs("div", {
+        className: styles$x.cancelledHead,
+        children: [jsx("h1", {
+          className: styles$x.cancelledTitle,
+          children: "Order cancelled"
+        }), jsx("p", {
+          className: styles$x.cancelledMeta,
+          children: `Order #${shortRef$1(order.order_ref)} · Placed ${placedOn(order.placed_at, locale)}`
+        })]
+      }), onReorder && jsx(Button, {
+        variant: "primary",
+        fullWidth: true,
+        onClick: () => {
+          emit({
+            type: "reorder_requested",
+            orderRef: order.order_ref
+          });
+          onReorder();
+        },
+        children: "Reorder"
+      }), jsx(OrderLines, {
+        order
+      }), jsx(ShippingAddressCard, {
+        order
+      }), jsx(OrderSummaryCard, {
+        order
+      })]
     });
   }
-  return jsx(ReturnItemsView, {
-    order,
-    onSubmit: (items2) => void submit(items2),
-    busy
+  return jsxs("div", {
+    className: styles$x.page,
+    children: [jsxs("section", {
+      className: styles$x.widget,
+      "aria-label": t("Delivery status"),
+      children: [jsxs("div", {
+        className: styles$x.titleRow,
+        children: [jsx("h1", {
+          className: styles$x.headline,
+          children: `Order #${shortRef$1(order.order_ref)}`
+        }), order.tracking?.url && inTransit && jsxs("a", {
+          className: styles$x.track,
+          href: order.tracking.url,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          children: ["Track", jsx("span", {
+            className: "visually-hidden",
+            children: ` ${order.tracking.carrier}, opens in a new tab`
+          }), jsx(RedirectLink, {})]
+        })]
+      }), jsx(OrderTimeline, {
+        progress: order.progress,
+        ...order.estimated_delivery ? {
+          estimatedDelivery: order.estimated_delivery
+        } : {},
+        locale
+      })]
+    }), jsx("hr", {
+      className: styles$x.rule
+    }), jsx(OrderLines, {
+      order
+    }), jsx(ShippingAddressCard, {
+      order
+    }), jsx(OrderSummaryCard, {
+      order
+    }), order.can_cancel && jsx("button", {
+      type: "button",
+      className: styles$x.cancel,
+      onClick: () => setCancelOpen(true),
+      children: "Cancel order"
+    }), jsx(NeedHelp, {
+      order,
+      ...onStartReturn ? {
+        onStartReturn
+      } : {},
+      ...onContactSupport ? {
+        onContactSupport
+      } : {}
+    }), cancelOpen && jsx(ReasonSheet, {
+      title: "Reason for cancelling",
+      options: CANCEL_REASONS,
+      ctaLabel: "Cancel order",
+      closeLabel: "Close reasons",
+      busy: cancelling,
+      onClose: () => setCancelOpen(false),
+      onConfirm: (reason2) => void confirmCancellation(reason2),
+      ...cancelError ? {
+        error: cancelError
+      } : {}
+    })]
+  });
+}
+const CANCEL_REASONS = [{
+  value: "changed_my_mind",
+  label: "Changed my mind"
+}, {
+  value: "ordered_by_mistake",
+  label: "Ordered by mistake"
+}, {
+  value: "delivery_too_long",
+  label: "Delivery takes too long"
+}];
+function placedOn(iso, locale) {
+  const d = new Date(iso);
+  const day = d.getUTCDate();
+  const month = new Intl.DateTimeFormat(locale, {
+    month: "short",
+    timeZone: "UTC"
+  }).format(d);
+  return `${day} ${month}, ${d.getUTCFullYear()}`;
+}
+function NeedHelp({ order, onStartReturn, onContactSupport }) {
+  const emit = useShopEvent();
+  if (order.status !== "delivered") return null;
+  return jsxs("section", {
+    className: styles$x.help,
+    "aria-labelledby": "order-help",
+    children: [jsx("h2", {
+      className: styles$x.helpTitle,
+      id: "order-help",
+      children: "Need help?"
+    }), jsxs("div", {
+      className: styles$x.helpRows,
+      children: [order.can_return && onStartReturn && jsx(HelpRow, {
+        label: "Start a return",
+        onClick: onStartReturn
+      }), jsx(HelpRow, {
+        label: "Contact support",
+        onClick: () => {
+          emit({
+            type: "support_requested",
+            orderRef: order.order_ref
+          });
+          onContactSupport?.();
+        }
+      })]
+    })]
+  });
+}
+function HelpRow({ label: label2, onClick }) {
+  return jsxs("button", {
+    type: "button",
+    className: styles$x.helpRow,
+    onClick,
+    children: [jsx("span", {
+      children: label2
+    }), jsx(ChevronRight$1, {})]
   });
 }
+function shortRef$1(orderRef) {
+  return orderRef.replace(/^ord_/, "");
+}
 const page$2 = "_page_2uqhz_6";
 const confirmed = "_confirmed_2uqhz_16";
 const title$h = "_title_2uqhz_22";
@@ -7846,7 +7852,7 @@ const tile$2 = "_tile_6xodo_133";
 const image$8 = "_image_6xodo_143";
 const placeholder$5 = "_placeholder_6xodo_147";
 const more = "_more_6xodo_154";
-const chevron$3 = "_chevron_6xodo_167";
+const chevron$2 = "_chevron_6xodo_167";
 const styles$u = {
   page: page$1,
   empty,
@@ -7863,7 +7869,7 @@ const styles$u = {
   image: image$8,
   placeholder: placeholder$5,
   more,
-  chevron: chevron$3
+  chevron: chevron$2
 };
 const TILES = 3;
 function Chevron() {
@@ -8652,13 +8658,13 @@ const line = "_line_1s2s6_6";
 const row$5 = "_row_1s2s6_12";
 const pending = "_pending_1s2s6_18";
 const labels = "_labels_1s2s6_24";
-const lowStock = "_lowStock_1s2s6_39";
+const lowStock$1 = "_lowStock_1s2s6_39";
 const media$1 = "_media_1s2s6_49";
 const image$5 = "_image_1s2s6_59";
 const placeholder$2 = "_placeholder_1s2s6_63";
 const saleBadge = "_saleBadge_1s2s6_76";
 const oos$1 = "_oos_1s2s6_91";
-const info$1 = "_info_1s2s6_104";
+const info$2 = "_info_1s2s6_104";
 const head = "_head_1s2s6_112";
 const meta = "_meta_1s2s6_119";
 const title$b = "_title_1s2s6_134";
@@ -8672,13 +8678,13 @@ const styles$m = {
   row: row$5,
   pending,
   labels,
-  lowStock,
+  lowStock: lowStock$1,
   media: media$1,
   image: image$5,
   placeholder: placeholder$2,
   saleBadge,
   oos: oos$1,
-  info: info$1,
+  info: info$2,
   head,
   meta,
   title: title$b,
@@ -8854,13 +8860,13 @@ function ShippingInfo() {
 const bar = "_bar_xqpxa_1";
 const floating$1 = "_floating_xqpxa_31";
 const divider = "_divider_xqpxa_37";
-const info = "_info_xqpxa_41";
+const info$1 = "_info_xqpxa_41";
 const actions = "_actions_xqpxa_49";
 const styles$k = {
   bar,
   floating: floating$1,
   divider,
-  info,
+  info: info$1,
   actions
 };
 function StickyCtaBar({ children, info: info2, variant = "floating" }) {
@@ -9444,16 +9450,17 @@ function SizeGuideSheet({ guide, onClose }) {
     })
   });
 }
-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 root$2 = "_root_1q3xe_1";
+const header$3 = "_header_1q3xe_11";
+const title$9 = "_title_1q3xe_18";
+const chips = "_chips_1q3xe_26";
+const chip = "_chip_1q3xe_26";
+const selected$2 = "_selected_1q3xe_50";
+const disabled$1 = "_disabled_1q3xe_62";
+const lowStock = "_lowStock_1q3xe_74";
+const error = "_error_1q3xe_84";
+const sizeGuide = "_sizeGuide_1q3xe_91";
+const info = "_info_1q3xe_115";
 const styles$g = {
   root: root$2,
   header: header$3,
@@ -9462,23 +9469,55 @@ const styles$g = {
   chip,
   selected: selected$2,
   disabled: disabled$1,
+  lowStock,
   error,
   sizeGuide,
-  chevron: chevron$2
+  info
 };
-function SizeSelector({ sizes, selected: selected2, onSelect, error: error2 = false, guide }) {
+function SizeSelector({ sizes, selected: selected2, onSelect, error: error2 = false, lowStock: lowStock2, guide }) {
   const t = useT();
   const [guideOpen, setGuideOpen] = useState(false);
   return jsxs("section", {
     className: styles$g.root,
     "aria-labelledby": "size-heading",
-    children: [jsx("div", {
+    children: [jsxs("div", {
       className: styles$g.header,
-      children: jsx("h2", {
+      children: [jsx("h2", {
         id: "size-heading",
         className: styles$g.title,
         children: "Size"
-      })
+      }), guide && jsxs("button", {
+        type: "button",
+        className: styles$g.sizeGuide,
+        onClick: () => setGuideOpen(true),
+        "aria-haspopup": "dialog",
+        "aria-expanded": guideOpen,
+        children: ["Size guide", jsxs("svg", {
+          className: styles$g.info,
+          width: "12",
+          height: "12",
+          viewBox: "0 0 12 12",
+          fill: "none",
+          "aria-hidden": "true",
+          children: [jsx("circle", {
+            cx: "6",
+            cy: "6",
+            r: "5",
+            stroke: "currentColor",
+            strokeWidth: "1.2"
+          }), jsx("path", {
+            d: "M6 5.6v2.6",
+            stroke: "currentColor",
+            strokeWidth: "1.2",
+            strokeLinecap: "round"
+          }), jsx("circle", {
+            cx: "6",
+            cy: "3.7",
+            r: "0.7",
+            fill: "currentColor"
+          })]
+        })]
+      })]
     }), jsx("div", {
       className: styles$g.chips,
       role: "radiogroup",
@@ -9505,27 +9544,10 @@ function SizeSelector({ sizes, selected: selected2, onSelect, error: error2 = fa
       className: styles$g.error,
       role: "alert",
       children: "Please select a size"
-    }), guide && jsxs("button", {
-      type: "button",
-      className: styles$g.sizeGuide,
-      onClick: () => setGuideOpen(true),
-      "aria-haspopup": "dialog",
-      "aria-expanded": guideOpen,
-      children: ["Size guide", jsx("svg", {
-        className: styles$g.chevron,
-        width: "12",
-        height: "12",
-        viewBox: "0 0 12 12",
-        fill: "none",
-        "aria-hidden": "true",
-        children: jsx("path", {
-          d: "m4.6 2.6 3.4 3.4-3.4 3.4",
-          stroke: "currentColor",
-          strokeWidth: "1.2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        })
-      })]
+    }), lowStock2 && !error2 && jsx("p", {
+      className: styles$g.lowStock,
+      role: "status",
+      children: lowStock2
     }), guide && guideOpen && jsx(SizeGuideSheet, {
       guide,
       onClose: () => setGuideOpen(false)
@@ -10019,7 +10041,8 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
   const selectedVariant = hasVariants ? variants.find((v) => v.sku === selectedSku) : void 0;
   const available = selectedVariant?.available ?? inventory2?.available ?? 0;
   const lowStock2 = isLowStock(available);
-  const stockNotice = !purchasable || lowStock2;
+  const sizeLowStock = lowStock2 && hasSizes && selectedSize ? t("Only {0} left in {1} size", available, selectedSize) : void 0;
+  const stockNotice = !purchasable || lowStock2 && !sizeLowStock;
   const availabilityLabel = !purchasable ? t("Out of stock") : lowStock2 ? t("Only {0} left", available) : "";
   const cta2 = purchasable ? jsx(Button, {
     variant: "primary",
@@ -10083,6 +10106,9 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
           selected: selectedSize,
           onSelect: selectSize,
           error: sizeError,
+          ...sizeLowStock ? {
+            lowStock: sizeLowStock
+          } : {},
           guide: product.size_guide
         })
       }), hasVariants && !structured && jsx(VariantSelector, {
@@ -10101,24 +10127,29 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
     })]
   });
 }
-const hero$1 = "_hero_pi6qp_10";
-const image$2 = "_image_pi6qp_37";
-const scrim$1 = "_scrim_pi6qp_51";
-const text$2 = "_text_pi6qp_57";
-const title$5 = "_title_pi6qp_79";
-const subtitle$2 = "_subtitle_pi6qp_90";
-const noImage = "_noImage_pi6qp_105";
+const hero$1 = "_hero_1glho_10";
+const image$2 = "_image_1glho_42";
+const scrim$1 = "_scrim_1glho_70";
+const fade = "_fade_1glho_94";
+const text$2 = "_text_1glho_108";
+const title$5 = "_title_1glho_146";
+const subtitle$2 = "_subtitle_1glho_157";
+const noImage = "_noImage_1glho_172";
 const styles$9 = {
   hero: hero$1,
   image: image$2,
   scrim: scrim$1,
+  fade,
   text: text$2,
   title: title$5,
   subtitle: subtitle$2,
   noImage
 };
 function PcpHero({ hero: hero2 }) {
+  const heroRef = useRef(null);
+  useTopOffset(heroRef, "--hero-top");
   return jsxs("section", {
+    ref: heroRef,
     className: [styles$9.hero, hero2.image ? "" : styles$9.noImage].join(" "),
     children: [hero2.image && jsxs(Fragment, {
       children: [jsx("div", {
@@ -10133,6 +10164,9 @@ function PcpHero({ hero: hero2 }) {
       }), jsx("div", {
         className: styles$9.scrim,
         "aria-hidden": "true"
+      }), jsx("div", {
+        className: styles$9.fade,
+        "aria-hidden": "true"
       })]
     }), jsxs("div", {
       className: styles$9.text,
@@ -10567,24 +10601,24 @@ function ProductView({ sku, initialData, showRecommendations = true, onNotFound
   }
   return unavailable;
 }
-const showcase = "_showcase_1y51o_40";
-const panel = "_panel_1y51o_59";
-const image = "_image_1y51o_88";
-const heroImageBox = "_heroImageBox_1y51o_136";
-const hero = "_hero_1y51o_136";
-const heroContent = "_heroContent_1y51o_207";
-const heroText = "_heroText_1y51o_224";
-const logo = "_logo_1y51o_233";
-const heroTitle = "_heroTitle_1y51o_253";
-const heroSub = "_heroSub_1y51o_277";
-const swipe = "_swipe_1y51o_290";
-const swipeLabel = "_swipeLabel_1y51o_298";
-const chevron$1 = "_chevron_1y51o_304";
-const overlay$1 = "_overlay_1y51o_321";
-const copy = "_copy_1y51o_332";
-const title$2 = "_title_1y51o_337";
-const subtitle$1 = "_subtitle_1y51o_344";
-const cta = "_cta_1y51o_350";
+const showcase = "_showcase_a0wva_39";
+const panel = "_panel_a0wva_43";
+const image = "_image_a0wva_71";
+const heroImageBox = "_heroImageBox_a0wva_119";
+const hero = "_hero_a0wva_119";
+const heroContent = "_heroContent_a0wva_190";
+const heroText = "_heroText_a0wva_207";
+const logo = "_logo_a0wva_216";
+const heroTitle = "_heroTitle_a0wva_236";
+const heroSub = "_heroSub_a0wva_260";
+const swipe = "_swipe_a0wva_273";
+const swipeLabel = "_swipeLabel_a0wva_281";
+const chevron$1 = "_chevron_a0wva_287";
+const overlay$1 = "_overlay_a0wva_304";
+const copy = "_copy_a0wva_315";
+const title$2 = "_title_a0wva_320";
+const subtitle$1 = "_subtitle_a0wva_327";
+const cta = "_cta_a0wva_333";
 const styles$2 = {
   showcase,
   panel,
@@ -10605,41 +10639,35 @@ const styles$2 = {
   subtitle: subtitle$1,
   cta
 };
-const SETTLE_MS = 250;
-function useViewportHeight(ref, property, enabled = true) {
+const SETTLE_MS = 150;
+function useDocumentSnap(ref, enabled = true) {
   useEffect(() => {
     const el = ref.current;
-    if (!el || !enabled) return;
+    if (!el || !enabled || typeof document === "undefined") return;
+    const root2 = document.documentElement;
+    const previousType = root2.style.scrollSnapType;
+    const previousPadding = root2.style.scrollPaddingTop;
     let timer2;
-    const read = () => Math.round(window.visualViewport?.height ?? window.innerHeight);
-    const apply = () => {
-      const height = read();
-      if (height > 0) el.style.setProperty(property, `${height}px`);
-    };
-    const applySettled = () => {
-      const previous = el.clientHeight;
-      const index = previous > 0 ? Math.round(el.scrollTop / previous) : 0;
-      apply();
-      if (el.clientHeight > 0) el.scrollTo({
-        top: index * el.clientHeight,
-        behavior: "auto"
-      });
+    const syncPadding = () => {
+      const top = getComputedStyle(el).getPropertyValue("--showcase-top").trim();
+      root2.style.scrollPaddingTop = top === "" ? "0px" : top;
     };
     const schedule = () => {
       if (timer2) clearTimeout(timer2);
-      timer2 = setTimeout(applySettled, SETTLE_MS);
+      timer2 = setTimeout(syncPadding, SETTLE_MS);
     };
-    apply();
+    root2.style.scrollSnapType = "y mandatory";
+    syncPadding();
     window.addEventListener("resize", schedule);
     window.addEventListener("orientationchange", schedule);
-    window.visualViewport?.addEventListener("resize", schedule);
     return () => {
       if (timer2) clearTimeout(timer2);
       window.removeEventListener("resize", schedule);
       window.removeEventListener("orientationchange", schedule);
-      window.visualViewport?.removeEventListener("resize", schedule);
+      root2.style.scrollSnapType = previousType;
+      root2.style.scrollPaddingTop = previousPadding;
     };
-  }, [ref, property, enabled]);
+  }, [ref, enabled]);
 }
 const FALLBACK_PANELS = [{
   key: "all-items",
@@ -10753,7 +10781,7 @@ function HomeShowcase() {
   const panels = useSlides();
   const showcaseRef = useRef(null);
   useTopOffset(showcaseRef, "--showcase-top");
-  useViewportHeight(showcaseRef, "--showcase-vh");
+  useDocumentSnap(showcaseRef);
   return jsx(ShopSurface, {
     tone: "dark",
     children: jsxs("div", {
@@ -11360,4 +11388,4 @@ export {
   useToast,
   variantLabel
 };
-//# sourceMappingURL=index.mjs.map
+