@thorprovider/blocks 3.0.1 → 4.0.0

package/dist/blocks/e-commerce/checkout-forms/checkout.mjs

@@ -1,9 +1,15 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useId, useRef, useState } from "react";
 import { Lock } from "lucide-react";
 import { Button } from "../../../ui/button.mjs";
 import { Card, CardContent } from "../../../ui/card.mjs";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger
+} from "../../../ui/accordion.mjs";
 import { cn } from "../../../lib/utils.mjs";
 import { CheckoutContactStep } from "./checkout-contact-step.mjs";
 import { CheckoutShippingStep } from "./checkout-shipping-step.mjs";
@@ -11,6 +17,14 @@ import { CheckoutPaymentStep } from "./checkout-payment-step.mjs";
 import { CheckoutReviewStep } from "./checkout-review-step.mjs";
 import { CheckoutOrderSummaryPanel } from "./checkout-order-summary.mjs";
 import { CheckoutProgress } from "./checkout-progress.mjs";
+import {
+  CheckoutSectionNav,
+  checkoutSectionHeadingId,
+  checkoutSectionId
+} from "./checkout-section-nav.mjs";
+import { CheckoutStepHeader } from "./checkout-step-header.mjs";
+import { stepErrorMessage, stepHasErrors, stepSummary } from "./checkout-step-summary.mjs";
+import { CheckoutIdProvider } from "./checkout-id-context.mjs";
 const DEFAULT_LABELS = {
   title: "Checkout",
   description: "",
@@ -24,6 +38,8 @@ const DEFAULT_LABELS = {
   contactDescription: "We use these details to keep you informed about your order.",
   shippingHeading: "Shipping address",
   shippingDescription: "Tell us where the order should be delivered.",
+  billingHeading: "Billing address",
+  billingDescription: "Where should the invoice be addressed?",
   paymentHeading: "Payment",
   paymentDescription: "Choose how you want to pay for this order.",
   reviewHeading: "Review your order",
@@ -31,18 +47,70 @@ const DEFAULT_LABELS = {
   emailLabel: "Email",
   firstNameLabel: "First name",
   lastNameLabel: "Last name",
-  phoneLabel: "Phone (optional)",
-  addressLabel: "Street address",
+  phoneLabel: "Phone",
+  companyLabel: "Company (optional)",
+  addressLabel: "Address line 1",
+  address2Label: "Address line 2 (optional)",
   cityLabel: "City",
   stateLabel: "State / Province",
   zipCodeLabel: "ZIP / Postal code",
   countryLabel: "Country",
   countryPlaceholder: "Select a country",
+  provincePlaceholder: "Select a province or state",
+  cityPlaceholder: "Select a city",
+  signedInAsLabel: "Signed in as",
+  signOutLabel: "Sign out",
+  signInLabel: "Sign in",
+  accountRequiredHeading: "Sign in to continue",
+  accountRequiredDescription: "You need an account to complete this purchase.",
+  signUpLabel: "Create account",
+  identityPendingLabel: "Checking your account\u2026",
+  optionalIndicatorLabel: "optional",
+  savedAddressesLabel: "Saved addresses",
+  defaultAddressLabel: "Default",
+  recipientHeading: "Recipient",
+  recipientDescription: "Who should receive this order? It can be someone else.",
+  addressHeading: "Address",
+  addAddressLabel: "Add address",
+  useAddressLabel: "Use",
+  deleteAddressLabel: "Delete",
+  deleteAddressConfirmLabel: "Delete this saved address?",
+  deleteAddressHintLabel: "The order will still ship to the current address.",
+  cancelAddressLabel: "Cancel",
+  updateSavedAddressLabel: "Update saved address",
+  saveAsNewAddressLabel: "Save as new address",
+  saveAddressLabel: "Save to my addresses",
+  newAddressLabel: "New address",
+  savingAddressLabel: "Saving address\u2026",
+  deletingAddressLabel: "Deleting\u2026",
+  addressSaveErrorLabel: "We could not save this address.",
+  addressDeleteErrorLabel: "We could not delete this address.",
+  addressSavedLabel: "Address saved.",
+  addressDeletedLabel: "Address deleted.",
+  billingSameAsShippingLabel: "Billing address same as shipping",
+  locationLoadingLabel: "Loading options\u2026",
+  locationErrorLabel: "We could not load these options.",
+  locationUnavailableLabel: "No options are available.",
+  locationOptionalLabel: "Optional for this address.",
   shippingMethodLegend: "Shipping method",
+  noShippingOptionsLabel: "No delivery options are available for this address.",
+  groupUnavailableLabel: "Unavailable for this address.",
+  deliveryLoadingLabel: "Loading delivery options\u2026",
+  deliveryErrorLabel: "We could not load delivery options.",
+  deliveryUnavailableLabel: "Delivery is unavailable for this address.",
   paymentMethodLegend: "Payment method",
   noPaymentMethodsLabel: "No payment methods are available for this region.",
+  paymentLoadingLabel: "Loading payment methods\u2026",
+  paymentErrorLabel: "We could not load payment methods.",
+  paymentUnavailableLabel: "Payment is unavailable for this region.",
   unavailableMethodLabel: "Unavailable",
   requiresSetupLabel: "Requires additional setup",
+  giftCardLabel: "Gift card",
+  giftCardPlaceholder: "Enter a gift card code",
+  applyLabel: "Apply",
+  removeLabel: "Remove",
+  storeCreditLabel: "Store credit",
+  availableCreditLabel: "Available credit",
   saveInfoLabel: "Save this information for next time",
   newsletterLabel: "Email me about news and offers",
   promoCodeLabel: "Promotional code",
@@ -61,16 +129,30 @@ const DEFAULT_LABELS = {
   retryLabel: "Retry",
   reviewContactLabel: "Contact",
   reviewShipToLabel: "Ship to",
+  reviewBillingLabel: "Billing",
   reviewPaymentLabel: "Payment",
-  reviewShippingLabel: "Shipping method",
+  reviewShippingLabel: "Delivery",
+  reviewDeliveryGroupsLabel: "Delivery groups",
+  reviewGroupLabel: "Group {n} of {total}",
+  reviewGroupItemsLabel: "Items",
+  reviewAdjustmentsLabel: "Adjustments",
+  reviewSameAsShippingLabel: "Same as shipping",
+  reviewLinesLabel: "Lines",
   reviewEmptyLabel: "No details provided yet.",
   backLabel: "Back",
   continueLabel: "Continue",
+  validationAttentionLabel: "Please review the {step} section.",
   completeOrderLabel: "Place order",
   processingLabel: "Placing order\u2026",
-  submitErrorActionLabel: "Try again"
+  submitErrorActionLabel: "Try again",
+  interruptionAcknowledgeLabel: "Acknowledge and continue",
+  interruptionRefreshLabel: "Refresh",
+  interruptionReturnToCartLabel: "Return to cart",
+  interruptionRetryLabel: "Try again",
+  availabilityEmptyLabel: "Your cart is empty.",
+  availabilityUnavailableLabel: "Checkout is unavailable.",
+  availabilityErrorLabel: "We could not load checkout."
 };
-const BASE_STEPS = ["contact", "shipping", "payment"];
 const STEP_COPY = {
   contact: {
     name: "contactStepName",
@@ -93,19 +175,61 @@ const STEP_COPY = {
     description: "reviewDescription"
   }
 };
+function availabilityLabel(status, labels) {
+  if (status === "empty") return labels.availabilityEmptyLabel;
+  if (status === "error") return labels.availabilityErrorLabel;
+  return labels.availabilityUnavailableLabel;
+}
 function Checkout({
   presentation,
   showReviewStep = false,
-  values,
-  onChange,
+  requireAccount = false,
+  contactStep = "when-guest",
+  onSignUp,
+  requireContactPhone = false,
+  requireShippingPhone = false,
+  contact,
+  onContactChange,
+  customer,
+  onSignIn,
+  onSignOut,
+  savedAddresses,
+  onSelectSavedAddress,
+  onCreateSavedAddress,
+  onUpdateSavedAddress,
+  onDeleteSavedAddress,
+  onStartNewAddress,
+  onCancelNewAddress,
+  savedAddressState,
+  shippingAddress,
+  billingAddress,
+  sameAsShipping,
+  onShippingAddressChange,
+  onBillingAddressChange,
+  onSameAsShippingChange,
+  shippingLocations,
+  billingLocations,
+  onRetryLocations,
+  shippingGroups,
+  shippingState = "idle",
+  onSelectShippingOption,
+  onRetryShipping,
+  paymentMethods = [],
+  paymentState = "idle",
+  paymentMethod,
+  onSelectPaymentMethod,
+  onRetryPayment,
+  adjustmentPayments,
+  onApplyGiftCard,
+  giftCardState,
+  giftCardMessage,
+  onRemoveAdjustment,
+  storeCredit,
   orderSummary,
   totalsState = "idle",
   onRetryTotals,
-  countries,
-  shippingOptions,
-  selectedShippingOptionId,
-  onSelectShippingOption,
-  paymentMethods = [],
+  promoCode,
+  onPromoCodeChange,
   onApplyPromo,
   promoPending = false,
   trustNotes,
@@ -115,43 +239,113 @@ function Checkout({
   fieldDescriptions,
   validateStep,
   onStepChange,
-  onSubmit,
+  availability,
+  interruption,
+  onInterruptionAction,
   submitting = false,
   submitError,
-  onRetrySubmit
+  onRetrySubmit,
+  onSubmit
 }) {
   const resolved = { ...DEFAULT_LABELS, ...labels };
-  const steps = showReviewStep ? [...BASE_STEPS, "review"] : BASE_STEPS;
-  const [stepIndex, setStepIndex] = useState(0);
-  const activeStep = steps[Math.min(stepIndex, steps.length - 1)];
+  const identityPending = requireAccount && customer === void 0;
+  const accountGate = requireAccount && customer === null;
+  const contactVisible = contactStep === "always" || !customer;
+  const steps = [
+    ...contactVisible ? ["contact"] : [],
+    "shipping",
+    "payment",
+    ...showReviewStep ? ["review"] : []
+  ];
+  const checkoutInstanceId = `checkout-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+  const [activeStepState, setActiveStepState] = useState(steps[0]);
+  const activeStep = steps.includes(activeStepState) ? activeStepState : steps[0];
+  const stepIndex = steps.indexOf(activeStep);
+  const [validationAlert, setValidationAlert] = useState();
+  const validationAlertNonce = useRef(0);
   const headingRef = useRef(null);
   const hasMounted = useRef(false);
   useEffect(() => {
-    if (presentation !== "stepper") return;
+    if (activeStepState === activeStep) return;
+    setActiveStepState(activeStep);
+    onStepChange?.(activeStep);
+  }, [activeStep, activeStepState, onStepChange]);
+  useEffect(() => {
+    if (presentation !== "stepper" && presentation !== "accordion") return;
     if (!hasMounted.current) {
       hasMounted.current = true;
       return;
     }
-    headingRef.current?.focus();
-  }, [presentation, activeStep]);
+    if (presentation === "stepper") {
+      headingRef.current?.focus();
+    } else {
+      document.getElementById(checkoutSectionHeadingId(checkoutInstanceId, activeStep))?.focus();
+    }
+  }, [presentation, activeStep, checkoutInstanceId]);
+  useEffect(() => {
+    if (!validationAlert) return;
+    if ((presentation === "stepper" || presentation === "accordion") && activeStep !== validationAlert.step) {
+      return;
+    }
+    const heading = document.getElementById(
+      checkoutSectionHeadingId(checkoutInstanceId, validationAlert.step)
+    );
+    const stepContainer = heading?.closest("[data-checkout-step]");
+    const firstInvalid = stepContainer?.querySelector('[aria-invalid="true"]');
+    const target = firstInvalid ?? heading;
+    if (!target) return;
+    const prefersReducedMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+    target.scrollIntoView?.({ behavior: prefersReducedMotion ? "auto" : "smooth", block: "start" });
+    target.focus({ preventScroll: true });
+  }, [activeStep, checkoutInstanceId, presentation, validationAlert]);
   const moveTo = (nextIndex) => {
     const next = steps[nextIndex];
     if (!next) return;
-    setStepIndex(nextIndex);
+    setActiveStepState(next);
     onStepChange?.(next);
   };
+  const revealStep = (step) => {
+    validationAlertNonce.current += 1;
+    setValidationAlert({ step, nonce: validationAlertNonce.current });
+    if (presentation === "stepper" || presentation === "accordion") {
+      const nextIndex = steps.indexOf(step);
+      if (nextIndex >= 0 && step !== activeStep) moveTo(nextIndex);
+    }
+  };
   const handleContinue = () => {
-    if (validateStep && !validateStep(activeStep)) return;
+    if (validateStep && !validateStep(activeStep)) {
+      revealStep(activeStep);
+      return;
+    }
     moveTo(stepIndex + 1);
   };
   const handleBack = () => {
     if (stepIndex === 0) return;
     moveTo(stepIndex - 1);
   };
+  const blockedByInterruption = interruption?.severity === "blocking";
   const handleSubmit = () => {
-    if (submitting) return;
-    if (validateStep && !steps.every((step) => validateStep(step))) return;
-    onSubmit?.(values);
+    if (submitting || blockedByInterruption) return;
+    if (validateStep) {
+      const firstInvalidStep = steps.find((step) => !validateStep(step));
+      if (firstInvalidStep) {
+        revealStep(firstInvalidStep);
+        return;
+      }
+    }
+    const snapshot = {
+      contact,
+      shippingAddress,
+      billingAddress: sameAsShipping ? void 0 : billingAddress,
+      sameAsShipping,
+      shippingSelections: (shippingGroups ?? []).flatMap(
+        (group) => group.selectedOptionId ? [{ groupId: group.id, optionId: group.selectedOptionId }] : []
+      ),
+      paymentMethod,
+      adjustmentPayments: adjustmentPayments ?? [],
+      promoCode: promoCode ?? ""
+    };
+    onSubmit?.(snapshot);
   };
   const renderStep = (step) => {
     switch (step) {
@@ -159,61 +353,103 @@ function Checkout({
         return /* @__PURE__ */ jsx(
           CheckoutContactStep,
           {
-            values,
-            onChange,
+            contact,
+            onChange: onContactChange,
+            customer,
+            onSignIn,
+            onSignOut,
+            requirePhone: requireContactPhone,
             labels: resolved,
-            showSaveInfo: labels?.saveInfoLabel !== void 0,
-            showNewsletter: labels?.newsletterLabel !== void 0,
-            fieldErrors,
-            fieldDescriptions
+            fieldErrors: fieldErrors?.contact,
+            fieldDescriptions: fieldDescriptions?.contact
           }
         );
       case "shipping":
         return /* @__PURE__ */ jsx(
           CheckoutShippingStep,
           {
-            values,
-            onChange,
-            labels: resolved,
-            countries,
-            shippingOptions,
-            selectedShippingOptionId,
+            shippingAddress,
+            billingAddress,
+            sameAsShipping,
+            onShippingAddressChange,
+            onBillingAddressChange,
+            onSameAsShippingChange,
+            shippingLocations,
+            billingLocations,
+            onRetryLocations,
+            savedAddresses,
+            onSelectSavedAddress,
+            onCreateSavedAddress,
+            onUpdateSavedAddress,
+            onDeleteSavedAddress,
+            onStartNewAddress,
+            onCancelNewAddress,
+            savedAddressState,
+            shippingGroups,
+            shippingState,
             onSelectShippingOption,
+            onRetryShipping,
+            labels: resolved,
             formatMoney,
             fieldErrors,
-            fieldDescriptions
+            fieldDescriptions,
+            requireShippingPhone
           }
         );
       case "payment":
         return /* @__PURE__ */ jsx(
           CheckoutPaymentStep,
           {
-            values,
-            onChange,
-            labels: resolved,
             paymentMethods,
-            fieldErrors,
-            fieldDescriptions
+            paymentState,
+            paymentMethod,
+            onSelectPaymentMethod,
+            onRetryPayment,
+            adjustmentPayments,
+            onApplyGiftCard,
+            giftCardState,
+            giftCardMessage,
+            onRemoveAdjustment,
+            storeCredit,
+            labels: resolved,
+            formatMoney,
+            fieldErrors: fieldErrors?.paymentMethod,
+            description: fieldDescriptions?.paymentMethod
           }
         );
       case "review":
         return /* @__PURE__ */ jsx(
           CheckoutReviewStep,
           {
-            values,
+            contact,
+            shippingAddress,
+            billingAddress,
+            sameAsShipping,
+            shippingGroups,
+            paymentMethod,
+            paymentMethods,
+            adjustmentPayments,
+            orderSummary,
             labels: resolved,
-            selectedShippingOptionId,
-            shippingOptions,
-            paymentMethods
+            formatMoney
           }
         );
     }
   };
   const isLastStep = stepIndex === steps.length - 1;
-  const submitAction = /* @__PURE__ */ jsxs(Button, { type: "button", onClick: handleSubmit, disabled: submitting, children: [
-    /* @__PURE__ */ jsx(Lock, { className: "size-4" }),
-    submitting ? resolved.processingLabel : resolved.completeOrderLabel
-  ] });
+  const submitAction = /* @__PURE__ */ jsxs(
+    Button,
+    {
+      type: "button",
+      onClick: handleSubmit,
+      disabled: submitting || blockedByInterruption,
+      "data-checkout-action": "submit",
+      children: [
+        /* @__PURE__ */ jsx(Lock, { className: "size-4" }),
+        submitting ? resolved.processingLabel : resolved.completeOrderLabel
+      ]
+    }
+  );
   const submitErrorNode = submitError ? /* @__PURE__ */ jsxs(
     "div",
     {
@@ -235,6 +471,10 @@ function Checkout({
       ]
     }
   ) : null;
+  const validationAlertNode = validationAlert ? /* @__PURE__ */ jsx("p", { className: "sr-only", role: "alert", children: resolved.validationAttentionLabel.replace(
+    "{step}",
+    resolved[STEP_COPY[validationAlert.step].name]
+  ) }, validationAlert.nonce) : null;
   const summaryNode = orderSummary ? /* @__PURE__ */ jsx(
     "div",
     {
@@ -249,75 +489,268 @@ function Checkout({
           labels: resolved,
           totalsState,
           onRetryTotals,
-          promoCode: values.promoCode,
-          onPromoCodeChange: (value) => onChange("promoCode", value),
+          promoCode: promoCode ?? "",
+          onPromoCodeChange: onPromoCodeChange ?? (() => {
+          }),
           onApplyPromo,
           promoPending,
+          adjustmentPayments,
           trustNotes,
           formatMoney
         }
       )
     }
   ) : null;
-  return /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-6xl px-4 py-12 sm:px-6 lg:px-8", children: [
-    (resolved.title || resolved.description) && /* @__PURE__ */ jsxs("header", { className: "mb-8 text-center", children: [
-      resolved.title ? /* @__PURE__ */ jsx("h1", { className: "text-3xl font-bold tracking-tight sm:text-4xl", children: resolved.title }) : null,
-      resolved.description ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-muted-foreground", children: resolved.description }) : null
-    ] }),
-    presentation === "stepper" ? /* @__PURE__ */ jsx(
-      CheckoutProgress,
-      {
-        steps: steps.map((step) => ({
-          id: step,
-          label: resolved[STEP_COPY[step].name]
-        })),
-        currentStep: activeStep,
-        ariaLabel: resolved.stepProgressLabel
-      }
-    ) : null,
-    /* @__PURE__ */ jsxs("div", { className: cn("mt-8 grid grid-cols-1 gap-6", orderSummary && "lg:grid-cols-3"), children: [
-      presentation === "single-page" ? summaryNode : null,
-      /* @__PURE__ */ jsx("div", { className: cn("min-w-0", orderSummary ? "lg:col-span-2" : "lg:col-span-3"), children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { className: "p-6", children: [
-        presentation === "stepper" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
-            /* @__PURE__ */ jsx("h2", { ref: headingRef, tabIndex: -1, className: "text-lg font-semibold outline-none", children: resolved[STEP_COPY[activeStep].heading] }),
-            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: resolved[STEP_COPY[activeStep].description] })
-          ] }),
-          renderStep(activeStep)
-        ] }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-8", children: steps.map((step) => /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-4", children: [
+  if (availability && availability.status !== "available") {
+    return /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-3xl px-4 py-12 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col items-center gap-4 p-8 text-center", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold", children: resolved.title }),
+      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: availability.reason ?? availabilityLabel(availability.status, resolved) }),
+      availability.actionLabel && availability.onAction ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: availability.onAction, children: availability.actionLabel }) : null
+    ] }) }) });
+  }
+  if (identityPending || accountGate) {
+    return /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-6xl px-4 py-12 sm:px-6 lg:px-8", children: [
+      (resolved.title || resolved.description) && /* @__PURE__ */ jsxs("header", { className: "mb-8 text-center", children: [
+        resolved.title ? /* @__PURE__ */ jsx("h1", { className: "text-3xl font-bold tracking-tight sm:text-4xl", children: resolved.title }) : null,
+        resolved.description ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-muted-foreground", children: resolved.description }) : null
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: cn("grid grid-cols-1 gap-6", orderSummary && "lg:grid-cols-3"), children: [
+        /* @__PURE__ */ jsx(Card, { className: cn("min-w-0", orderSummary ? "lg:col-span-2" : "lg:col-span-3"), children: /* @__PURE__ */ jsx(CardContent, { className: "flex flex-col gap-4 p-6", children: identityPending ? /* @__PURE__ */ jsx("p", { role: "status", "aria-live": "polite", className: "text-muted-foreground", children: resolved.identityPendingLabel }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: resolved[STEP_COPY[step].heading] }),
-            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: resolved[STEP_COPY[step].description] })
+            /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: resolved.accountRequiredHeading }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: resolved.accountRequiredDescription })
           ] }),
-          renderStep(step)
-        ] }, step)) }),
-        submitErrorNode,
-        /* @__PURE__ */ jsx(
-          "div",
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-3", children: [
+            onSignIn ? /* @__PURE__ */ jsx(Button, { type: "button", onClick: onSignIn, "data-checkout-action": "sign-in", children: resolved.signInLabel }) : null,
+            onSignUp ? /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "outline",
+                onClick: onSignUp,
+                "data-checkout-action": "sign-up",
+                children: resolved.signUpLabel
+              }
+            ) : null
+          ] })
+        ] }) }) }),
+        summaryNode
+      ] })
+    ] });
+  }
+  const interruptionNode = interruption ? /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: interruption.severity === "blocking" ? "alert" : "status",
+      className: cn(
+        "mt-6 flex flex-col gap-3 rounded-md border px-4 py-3 text-sm",
+        interruption.severity === "blocking" ? "border-destructive/50 bg-destructive/10 text-destructive" : "border-amber-500/50 bg-amber-500/10"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "font-medium", children: interruption.title }),
+          /* @__PURE__ */ jsx("p", { children: interruption.message }),
+          interruption.changes?.length ? /* @__PURE__ */ jsx("ul", { className: "mt-2 list-disc pl-5", children: interruption.changes.map((change, index) => /* @__PURE__ */ jsxs("li", { children: [
+            change.label,
+            change.previous && change.next ? `: ${change.previous} \u2192 ${change.next}` : null
+          ] }, `${change.lineId ?? index}:${change.label}`)) }) : null
+        ] }),
+        interruption.actions.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: interruption.actions.map((action) => /* @__PURE__ */ jsx(
+          Button,
           {
-            className: cn(
-              "mt-6 flex flex-wrap items-center gap-4",
-              presentation === "stepper" ? "justify-between" : "justify-end"
-            ),
-            children: presentation === "stepper" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  type: "button",
-                  variant: "outline",
-                  onClick: handleBack,
-                  disabled: stepIndex === 0 || submitting,
-                  children: resolved.backLabel
-                }
-              ),
-              isLastStep ? submitAction : /* @__PURE__ */ jsx(Button, { type: "button", onClick: handleContinue, disabled: submitting, children: resolved.continueLabel })
-            ] }) : submitAction
+            type: "button",
+            variant: "outline",
+            size: "sm",
+            onClick: () => onInterruptionAction?.(action),
+            children: actionLabel(action, resolved)
+          },
+          action
+        )) }) : null
+      ]
+    }
+  ) : null;
+  return /* @__PURE__ */ jsx(CheckoutIdProvider, { prefix: checkoutInstanceId, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "mx-auto max-w-6xl px-4 py-12 sm:px-6 lg:px-8",
+      "data-checkout-presentation": presentation,
+      "data-checkout-step": presentation === "stepper" ? activeStep : void 0,
+      children: [
+        (resolved.title || resolved.description) && /* @__PURE__ */ jsxs("header", { className: "mb-8 text-center", children: [
+          resolved.title ? /* @__PURE__ */ jsx("h1", { className: "text-3xl font-bold tracking-tight sm:text-4xl", children: resolved.title }) : null,
+          resolved.description ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-muted-foreground", children: resolved.description }) : null
+        ] }),
+        presentation === "stepper" ? /* @__PURE__ */ jsx(
+          CheckoutProgress,
+          {
+            steps: steps.map((step) => ({
+              id: step,
+              label: resolved[STEP_COPY[step].name]
+            })),
+            currentStep: activeStep,
+            ariaLabel: resolved.stepProgressLabel
           }
-        )
-      ] }) }) }),
-      presentation === "stepper" ? summaryNode : null
-    ] })
-  ] });
+        ) : null,
+        presentation === "single-page" ? /* @__PURE__ */ jsx("div", { className: "mt-8", children: /* @__PURE__ */ jsx(
+          CheckoutSectionNav,
+          {
+            instanceId: checkoutInstanceId,
+            steps: steps.map((step) => ({
+              id: step,
+              label: resolved[STEP_COPY[step].name]
+            })),
+            ariaLabel: resolved.stepProgressLabel
+          }
+        ) }) : null,
+        /* @__PURE__ */ jsxs("div", { className: cn("mt-8 grid grid-cols-1 gap-6", orderSummary && "lg:grid-cols-3"), children: [
+          presentation === "single-page" ? summaryNode : null,
+          /* @__PURE__ */ jsx("div", { className: cn("min-w-0", orderSummary ? "lg:col-span-2" : "lg:col-span-3"), children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { className: "p-6", children: [
+            presentation === "stepper" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
+                /* @__PURE__ */ jsx(
+                  "h2",
+                  {
+                    id: checkoutSectionHeadingId(checkoutInstanceId, activeStep),
+                    ref: headingRef,
+                    tabIndex: -1,
+                    className: "scroll-mt-24 text-lg font-semibold outline-none",
+                    children: resolved[STEP_COPY[activeStep].heading]
+                  }
+                ),
+                /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: resolved[STEP_COPY[activeStep].description] })
+              ] }),
+              /* @__PURE__ */ jsx("div", { "data-checkout-step": activeStep, children: renderStep(activeStep) })
+            ] }) : presentation === "accordion" ? /* @__PURE__ */ jsx(
+              Accordion,
+              {
+                type: "single",
+                value: activeStep,
+                collapsible: false,
+                className: "flex flex-col",
+                onValueChange: (value) => {
+                  const nextIndex = steps.indexOf(value);
+                  if (nextIndex >= 0) moveTo(nextIndex);
+                },
+                children: steps.map((step, index) => /* @__PURE__ */ jsxs(
+                  AccordionItem,
+                  {
+                    value: step,
+                    id: checkoutSectionId(checkoutInstanceId, step),
+                    "data-checkout-step": step,
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        AccordionTrigger,
+                        {
+                          id: checkoutSectionHeadingId(checkoutInstanceId, step),
+                          headingLevel: 2,
+                          className: "gap-4 py-5 hover:no-underline",
+                          children: /* @__PURE__ */ jsx(
+                            CheckoutStepHeader,
+                            {
+                              index,
+                              heading: resolved[STEP_COPY[step].heading],
+                              description: resolved[STEP_COPY[step].description],
+                              headingAs: "span",
+                              summary: step === activeStep ? void 0 : stepSummary(step, {
+                                contact,
+                                shippingAddress,
+                                shippingGroups,
+                                paymentMethods,
+                                paymentMethod
+                              }),
+                              errorMessage: stepHasErrors(step, fieldErrors) ? stepErrorMessage(step, fieldErrors) ?? resolved.validationAttentionLabel.replace(
+                                "{step}",
+                                resolved[STEP_COPY[step].name]
+                              ) : void 0
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(AccordionContent, { className: "pb-6", children: /* @__PURE__ */ jsx("div", { children: renderStep(step) }) })
+                    ]
+                  },
+                  step
+                ))
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-8", children: steps.map((step, index) => /* @__PURE__ */ jsxs(
+              "section",
+              {
+                id: checkoutSectionId(checkoutInstanceId, step),
+                className: "flex flex-col gap-4 border-t pt-8 first:border-t-0 first:pt-0",
+                "data-checkout-step": step,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    CheckoutStepHeader,
+                    {
+                      index,
+                      heading: resolved[STEP_COPY[step].heading],
+                      description: resolved[STEP_COPY[step].description],
+                      headingId: checkoutSectionHeadingId(checkoutInstanceId, step),
+                      headingTabIndex: -1,
+                      errorMessage: stepHasErrors(step, fieldErrors) ? stepErrorMessage(step, fieldErrors) ?? resolved.validationAttentionLabel.replace(
+                        "{step}",
+                        resolved[STEP_COPY[step].name]
+                      ) : void 0
+                    }
+                  ),
+                  renderStep(step)
+                ]
+              },
+              step
+            )) }),
+            interruptionNode,
+            submitErrorNode,
+            validationAlertNode,
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "mt-6 flex flex-wrap items-center gap-4",
+                  presentation === "stepper" || presentation === "accordion" ? "justify-between" : "justify-end"
+                ),
+                children: presentation === "stepper" || presentation === "accordion" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      type: "button",
+                      variant: "outline",
+                      onClick: handleBack,
+                      disabled: stepIndex === 0 || submitting,
+                      "data-checkout-action": "back",
+                      children: resolved.backLabel
+                    }
+                  ),
+                  isLastStep ? submitAction : /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      type: "button",
+                      onClick: handleContinue,
+                      disabled: submitting || blockedByInterruption,
+                      "data-checkout-action": "continue",
+                      children: resolved.continueLabel
+                    }
+                  )
+                ] }) : submitAction
+              }
+            )
+          ] }) }) }),
+          presentation === "stepper" ? summaryNode : null
+        ] })
+      ]
+    }
+  ) });
+}
+function actionLabel(action, labels) {
+  switch (action) {
+    case "acknowledge":
+      return labels.interruptionAcknowledgeLabel;
+    case "refresh":
+      return labels.interruptionRefreshLabel;
+    case "return-to-cart":
+      return labels.interruptionReturnToCartLabel;
+    case "retry":
+      return labels.interruptionRetryLabel;
+  }
 }
 var checkout_default = Checkout;
 export {