@b3dotfun/sdk 0.1.66 → 0.1.68

package/dist/cjs/anyspend/react/components/common/OrderStatus.js

@@ -6,37 +6,111 @@ const anyspend_1 = require("../../../../anyspend");
 const react_1 = require("../../../../shared/react");
 const lucide_react_1 = require("lucide-react");
 const react_2 = require("react");
+const AnySpendCustomizationContext_1 = require("../context/AnySpendCustomizationContext");
+const AnimatedCheckmark_1 = require("../icons/AnimatedCheckmark");
 const StepProgress_1 = require("./StepProgress");
+/** Map order status to its step index in the StepProgress. -1 = not a step state. */
+function getStepIndex(status) {
+    if (["waiting_stripe_payment", "scanning_deposit_transaction"].includes(status))
+        return 0;
+    if (["quoting_after_deposit", "sending_token_from_vault", "relay", "executing"].includes(status))
+        return 1;
+    return -1;
+}
 exports.OrderStatus = (0, react_2.memo)(function OrderStatus({ order, selectedCryptoPaymentMethod, }) {
-    const showCheck = order.status === "executed" || order.status === "quoting_after_deposit";
-    const { text, status: displayStatus, description } = (0, anyspend_1.getStatusDisplay)(order);
+    const { text: defaultText, description: defaultDescription } = (0, anyspend_1.getStatusDisplay)(order);
+    const { content, slots } = (0, AnySpendCustomizationContext_1.useAnySpendCustomization)();
     const searchParams = (0, react_1.useSearchParams)();
     const cryptoPaymentMethod = selectedCryptoPaymentMethod || searchParams.get("cryptoPaymentMethod");
-    console.log("OrderStatus", displayStatus);
-    console.log("OrderStatus", order);
+    const currentStepIndex = getStepIndex(order.status);
+    const prevStepIndexRef = (0, react_2.useRef)(currentStepIndex);
+    const shouldAnimateCheck = currentStepIndex > prevStepIndexRef.current;
+    (0, react_2.useEffect)(() => {
+        prevStepIndexRef.current = currentStepIndex;
+    }, [currentStepIndex]);
+    // Resolve content overrides based on order status
+    let text = defaultText;
+    let description = defaultDescription;
+    if (order.status === "executed") {
+        if (content.successTitle && typeof content.successTitle === "string")
+            text = content.successTitle;
+        if (content.successDescription)
+            description = content.successDescription;
+    }
+    else if (order.status === "failure") {
+        if (content.failureTitle && typeof content.failureTitle === "string")
+            text = content.failureTitle;
+        if (content.failureDescription)
+            description = content.failureDescription;
+    }
+    else if (order.status === "expired") {
+        if (content.expiredTitle && typeof content.expiredTitle === "string")
+            text = content.expiredTitle;
+        if (content.expiredDescription)
+            description = content.expiredDescription;
+    }
+    else if (order.status === "refunded") {
+        if (content.refundedTitle && typeof content.refundedTitle === "string")
+            text = content.refundedTitle;
+        if (content.refundedDescription)
+            description = content.refundedDescription;
+    }
+    else if (content.processingTitle || content.processingDescription) {
+        if (content.processingTitle && typeof content.processingTitle === "string")
+            text = content.processingTitle;
+        if (content.processingDescription)
+            description = content.processingDescription;
+    }
     const paymentSteps = [
-        {
-            id: 1,
-            title: text,
-            description: description,
-        },
-        {
-            id: 2,
-            title: text,
-            description: description,
-        },
+        { id: 1, title: text, description: typeof description === "string" ? description : defaultDescription || "" },
+        { id: 2, title: text, description: typeof description === "string" ? description : defaultDescription || "" },
     ];
-    if (["waiting_stripe_payment", "scanning_deposit_transaction"].includes(order.status)) {
-        // hide step if order is scanning_deposit_transaction and crypto payment method is transfer_crypto
+    if (currentStepIndex === 0) {
         if (!(order.status === "scanning_deposit_transaction" && cryptoPaymentMethod === "transfer_crypto")) {
             return (0, jsx_runtime_1.jsx)(StepProgress_1.StepProgress, { steps: paymentSteps, currentStepIndex: 0 });
         }
     }
-    if (["relay", "executing", "sending_token_from_vault"].includes(order.status)) {
-        return (0, jsx_runtime_1.jsx)(StepProgress_1.StepProgress, { steps: paymentSteps, currentStepIndex: 1 });
+    if (currentStepIndex === 1) {
+        return (0, jsx_runtime_1.jsx)(StepProgress_1.StepProgress, { steps: paymentSteps, currentStepIndex: 1, animateCompletedSteps: shouldAnimateCheck });
+    }
+    if (order.status === "refunding") {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center gap-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-amber-500/15", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-6 w-6 animate-spin text-amber-500" }) }), (0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary mt-4 text-xl font-semibold", children: text }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiary mt-1 text-center text-sm", children: description })] }) }));
     }
     if (selectedCryptoPaymentMethod === "transfer_crypto" && order.status === "scanning_deposit_transaction") {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center gap-2", children: showCheck ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: `bg-as-success-secondary relative flex h-10 w-10 items-center justify-center rounded-full`, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "text-as-content-icon-success h-6 w-6" }) }), (0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary mt-4 text-xl font-semibold", children: text }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry mt-1 text-center", children: description })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-error-secondary flex h-10 w-10 items-center justify-center rounded-full text-base", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "text-as-content-icon-error h-5 w-5" }) }), (0, jsx_runtime_1.jsx)("div", { className: "font-sf-rounded text-as-content-primary mt-4 text-lg font-semibold", children: text }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry text-center", style: { whiteSpace: "normal" }, children: description })] })) }));
+    if (order.status === "executed") {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center gap-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center", children: [(0, jsx_runtime_1.jsx)(AnimatedCheckmark_1.AnimatedCheckmark, { className: "h-14 w-14" }), (0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary mt-4 text-xl font-semibold", children: content.successTitle || text }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiary mt-1 text-center text-sm", children: content.successDescription || description })] }) }));
+    }
+    if (order.status === "expired") {
+        if (slots.errorScreen) {
+            return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: slots.errorScreen({
+                    title: text,
+                    description: typeof description === "string" ? description : defaultDescription || "",
+                    errorType: "expired",
+                    orderId: order.id,
+                }) }));
+        }
+        return ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center gap-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-amber-500/15", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Clock, { className: "h-5 w-5 text-amber-500" }) }), (0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary mt-4 text-xl font-semibold", children: text }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiary mt-1 text-center text-sm", children: description })] }) }));
+    }
+    if (order.status === "refunded") {
+        if (slots.errorScreen) {
+            return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: slots.errorScreen({
+                    title: text,
+                    description: typeof description === "string" ? description : defaultDescription || "",
+                    errorType: "refunded",
+                    orderId: order.id,
+                }) }));
+        }
+        return ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center gap-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-surface-secondary flex h-10 w-10 items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)(lucide_react_1.RotateCcw, { className: "text-as-secondary h-5 w-5" }) }), (0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary mt-4 text-xl font-semibold", children: text }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiary mt-1 text-center text-sm", children: description })] }) }));
+    }
+    if (slots.errorScreen) {
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: slots.errorScreen({
+                title: text,
+                description: typeof description === "string" ? description : defaultDescription || "",
+                errorType: "failure",
+                orderId: order.id,
+            }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center gap-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-error-secondary flex h-10 w-10 items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "text-as-content-icon-error h-5 w-5" }) }), (0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary mt-4 text-xl font-semibold", children: text }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiary mt-1 text-center text-sm", style: { whiteSpace: "normal" }, children: description })] }) }));
 });

package/dist/cjs/anyspend/react/components/common/PanelOnramp.js

@@ -78,20 +78,20 @@ function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMetho
     const handleQuickAmount = (value) => {
         setSrcAmountOnRamp(value);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: classes?.container || "panel-onramp bg-as-surface-primary flex w-full flex-col", children: [(0, jsx_runtime_1.jsxs)("div", { className: "border-as-border-secondary bg-as-surface-secondary relative flex w-full flex-col rounded-2xl border p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex h-7 w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry flex items-center text-sm font-bold", children: "Pay" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm", onClick: () => setActivePanel(fiatPaymentMethodIndex), children: (() => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: classes?.container || "panel-onramp bg-as-surface-primary flex w-full flex-col", children: [(0, jsx_runtime_1.jsxs)("div", { className: "border-as-border-secondary bg-as-surface-secondary relative flex w-full flex-col rounded-2xl border p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex h-7 w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiary flex items-center text-sm font-bold", children: "Pay" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiary flex h-7 items-center gap-1 text-sm", onClick: () => setActivePanel(fiatPaymentMethodIndex), children: (() => {
                                     const config = selectedPaymentMethod ? FiatPaymentMethod_1.FIAT_PAYMENT_METHOD_DISPLAY[selectedPaymentMethod] : null;
                                     if (config) {
                                         return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-white", children: config.icon }) }), config.label] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] }));
                                     }
                                     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Select payment method", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] }));
-                                })() })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center pb-2 pt-8", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry text-2xl font-bold", children: "$" }), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: amountInputRef, type: "text", value: srcAmountOnRamp, onChange: handleAmountChange, placeholder: "5", className: "text-as-primary placeholder:text-as-primary/50 h-auto border-0 bg-transparent p-0 px-1 pt-1 text-4xl font-bold focus-visible:ring-0 focus-visible:ring-offset-0", style: {
+                                })() })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center pb-2 pt-8", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiary text-2xl font-bold", children: "$" }), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: amountInputRef, type: "text", value: srcAmountOnRamp, onChange: handleAmountChange, placeholder: "5", className: "text-as-primary placeholder:text-as-primary/50 h-auto border-0 bg-transparent p-0 px-1 pt-1 text-4xl font-bold focus-visible:ring-0 focus-visible:ring-offset-0", style: {
                                         width: `${Math.max(ONE_CHAR_WIDTH, srcAmountOnRamp.length * ONE_CHAR_WIDTH)}px`,
                                     } })] }) }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("mx-auto mb-6 flex justify-center gap-2", hideDstToken && "mb-0"), children: customUsdInputValues
                             .filter(v => !isNaN(Number(v)))
                             .map(value => ((0, jsx_runtime_1.jsxs)("button", { onClick: () => handleQuickAmount(value), className: `bg-as-surface-secondary border-as-border-secondary hover:border-as-border-secondary h-7 w-14 rounded-lg border text-sm font-medium transition-all duration-200 ${srcAmountOnRamp === value
                                 ? "border-as-border-secondary bg-as-surface-secondary"
-                                : "bg-as-surface-secondary hover:bg-as-surface-secondary"}`, children: ["$", value] }, value))) }), destinationToken && destinationChainId && !hideDstToken && ((0, jsx_runtime_1.jsx)(OrderTokenAmountFiat_1.OrderTokenAmountFiat, { address: _recipientAddress, context: "to", inputValue: destinationAmount || "0", onChangeInput: () => { }, chainId: destinationChainId, setChainId: onDestinationChainChange || (() => { }), token: destinationToken, setToken: onDestinationTokenChange || (() => { }) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "border-as-border-secondary bg-as-surface-secondary mt-4 flex w-full flex-col gap-3 rounded-xl border p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-between gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry flex items-center text-sm", children: "Recipient" }), _recipientAddress ? ((0, jsx_runtime_1.jsxs)("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(recipientSelectionPanelIndex), children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm", children: customRecipientLabel ||
-                                            (recipientName ? (0, utils_1.formatUsername)(recipientName) : (0, formatAddress_1.formatAddress)(_recipientAddress)) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16 })] })) : ((0, jsx_runtime_1.jsxs)("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(5), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "text-as-brand", size: 16 }), "Select recipient", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16 })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry text-sm", children: "Expected to receive" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center justify-end gap-1", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary font-semibold", children: [destinationAmount || "0", " ", dstTokenSymbol || destinationToken?.symbol || ""] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-tertiarry text-sm", children: ["on ", destinationChainId ? chain_1.ALL_CHAINS[destinationChainId]?.name : ""] }), destinationToken && destinationChainId && destinationToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("img", { src: chain_1.ALL_CHAINS[destinationChainId]?.logoUrl, alt: "Chain", className: "h-4 w-4 rounded-full" }))] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsx)("div", { className: "", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry text-sm", children: "Total" }), anyspendQuote?.data?.fee && onShowFeeDetail && ((0, jsx_runtime_1.jsx)("button", { onClick: onShowFeeDetail, className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "h-4 w-4" }) })), anyspendQuote?.data?.pointsAmount && anyspendQuote?.data?.pointsAmount > 0 && ((0, jsx_runtime_1.jsx)(PointsBadge_1.PointsBadge, { pointsAmount: anyspendQuote.data.pointsAmount, pointsMultiplier: anyspendQuote.data.pointsMultiplier, onClick: () => onShowPointsDetail?.() }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-end gap-0.5", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary font-semibold", children: ["$", getTotalAmount(selectedPaymentMethod || FiatPaymentMethod_1.FiatPaymentMethod.NONE).toFixed(2)] }), (() => {
+                                : "bg-as-surface-secondary hover:bg-as-surface-secondary"}`, children: ["$", value] }, value))) }), destinationToken && destinationChainId && !hideDstToken && ((0, jsx_runtime_1.jsx)(OrderTokenAmountFiat_1.OrderTokenAmountFiat, { address: _recipientAddress, context: "to", inputValue: destinationAmount || "0", onChangeInput: () => { }, chainId: destinationChainId, setChainId: onDestinationChainChange || (() => { }), token: destinationToken, setToken: onDestinationTokenChange || (() => { }) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "border-as-border-secondary bg-as-surface-secondary mt-4 flex w-full flex-col gap-3 rounded-xl border p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-between gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiary flex items-center text-sm", children: "Recipient" }), _recipientAddress ? ((0, jsx_runtime_1.jsxs)("button", { className: "text-as-tertiary flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(recipientSelectionPanelIndex), children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm", children: customRecipientLabel ||
+                                            (recipientName ? (0, utils_1.formatUsername)(recipientName) : (0, formatAddress_1.formatAddress)(_recipientAddress)) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16 })] })) : ((0, jsx_runtime_1.jsxs)("button", { className: "text-as-tertiary flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(5), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "text-as-brand", size: 16 }), "Select recipient", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16 })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiary text-sm", children: "Expected to receive" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center justify-end gap-1", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary font-semibold", children: [destinationAmount || "0", " ", dstTokenSymbol || destinationToken?.symbol || ""] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-tertiary text-sm", children: ["on ", destinationChainId ? chain_1.ALL_CHAINS[destinationChainId]?.name : ""] }), destinationToken && destinationChainId && destinationToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("img", { src: chain_1.ALL_CHAINS[destinationChainId]?.logoUrl, alt: "Chain", className: "h-4 w-4 rounded-full" }))] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsx)("div", { className: "", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiary text-sm", children: "Total" }), anyspendQuote?.data?.fee && onShowFeeDetail && ((0, jsx_runtime_1.jsx)("button", { onClick: onShowFeeDetail, className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "h-4 w-4" }) })), anyspendQuote?.data?.pointsAmount && anyspendQuote?.data?.pointsAmount > 0 && ((0, jsx_runtime_1.jsx)(PointsBadge_1.PointsBadge, { pointsAmount: anyspendQuote.data.pointsAmount, pointsMultiplier: anyspendQuote.data.pointsMultiplier, onClick: () => onShowPointsDetail?.() }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-end gap-0.5", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary font-semibold", children: ["$", getTotalAmount(selectedPaymentMethod || FiatPaymentMethod_1.FiatPaymentMethod.NONE).toFixed(2)] }), (() => {
                                             // For fiat payments, show the fee from the payment method
                                             const fiatFee = getFeeFromApi(selectedPaymentMethod || FiatPaymentMethod_1.FiatPaymentMethod.NONE);
                                             if (fiatFee !== null && fiatFee > 0) {

package/dist/cjs/anyspend/react/components/common/PaySection.js

@@ -42,7 +42,7 @@ function CryptoPaySection({ selectedSrcChainId, setSelectedSrcChainId, selectedS
     (0, react_3.useEffect)(() => {
         appliedSrcMetadataRef.current = false;
     }, [selectedSrcToken.address, selectedSrcToken.chainId]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "pay-section bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none", onClick: onSelectCryptoPaymentMethod, children: selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isConnected ? ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1", children: connectedName ? (0, utils_1.formatUsername)(connectedName) : (0, formatAddress_1.shortenAddress)(connectedAddress || "") })) : ("Connect wallet"), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.GLOBAL_WALLET ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Global Account", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Transfer crypto", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Select payment method", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) })] }), (0, jsx_runtime_1.jsx)(OrderTokenAmount_1.OrderTokenAmount, { address: connectedAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "pay-section bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiary flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none", onClick: onSelectCryptoPaymentMethod, children: selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isConnected ? ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1", children: connectedName ? (0, utils_1.formatUsername)(connectedName) : (0, formatAddress_1.shortenAddress)(connectedAddress || "") })) : ("Connect wallet"), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.GLOBAL_WALLET ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Global Account", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Transfer crypto", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Select payment method", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) })] }), (0, jsx_runtime_1.jsx)(OrderTokenAmount_1.OrderTokenAmount, { address: connectedAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
                     setIsSrcInputDirty(true);
                     setSrcAmount(value);
                 }, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: (0, number_1.formatDisplayNumber)(anyspendQuote?.data?.currencyIn?.amountUsd, {

package/dist/cjs/anyspend/react/components/common/StepProgress.d.ts

@@ -7,5 +7,9 @@ export interface StepProgressProps {
     steps: Step[];
     currentStepIndex: number;
     className?: string;
+    /** When false, completed step checkmarks render in their static (post-animation) state.
+     *  Use false when the step was already completed in a previous render (e.g. transitioning
+     *  between sub-states within the same step). Defaults to true. */
+    animateCompletedSteps?: boolean;
 }
-export declare function StepProgress({ steps, currentStepIndex, className }: StepProgressProps): import("react/jsx-runtime").JSX.Element;
+export declare function StepProgress({ steps, currentStepIndex, className, animateCompletedSteps, }: StepProgressProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/anyspend/react/components/common/StepProgress.js

@@ -4,19 +4,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StepProgress = StepProgress;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const framer_motion_1 = require("framer-motion");
-const lucide_react_1 = require("lucide-react");
-function StepProgress({ steps, currentStepIndex, className = "" }) {
+const AnimatedCheckmark_1 = require("../icons/AnimatedCheckmark");
+function StepProgress({ steps, currentStepIndex, className = "", animateCompletedSteps = true, }) {
     const currentStep = steps[currentStepIndex];
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `flex w-full flex-col items-center gap-4 ${className}`, children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2", children: steps.map((_, index) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center", children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { scale: 0.8, opacity: 0 }, animate: { scale: 1, opacity: 1 }, transition: { delay: index * 0.2 }, className: `relative flex h-10 w-10 items-center justify-center rounded-full ${index < currentStepIndex
-                                    ? "bg-as-success-secondary" // Completed step
-                                    : index === currentStepIndex
-                                        ? "border-as-border-secondary border-[3px]" // Current step
-                                        : "border-as-border-secondary border-[3px]" // Future step
-                                } `, children: index < currentStepIndex ? (
-                                // Completed step - show check icon
-                                (0, jsx_runtime_1.jsx)(lucide_react_1.CheckIcon, { className: "text-as-content-icon-success h-6 w-6" })) : index === currentStepIndex ? (
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `flex w-full flex-col items-center gap-4 ${className}`, children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2", children: steps.map((_, index) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center", children: index < currentStepIndex ? (
+                            // Completed step - checkmark replaces the whole circle
+                            (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { scale: 0.8, opacity: 0 }, animate: { scale: 1, opacity: 1 }, transition: { delay: index * 0.2 }, children: (0, jsx_runtime_1.jsx)(AnimatedCheckmark_1.AnimatedCheckmark, { className: "h-10 w-10", strokeWidth: 2.5, static: !animateCompletedSteps }) })) : ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { scale: 0.8, opacity: 0 }, animate: { scale: 1, opacity: 1 }, transition: { delay: index * 0.2 }, className: `border-as-border-secondary relative flex h-10 w-10 items-center justify-center rounded-full border-[3px]`, children: index === currentStepIndex ? (
                                 // Current step - show spinning border and step number
                                 (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "border-t-as-primary absolute -inset-0.5 animate-spin rounded-full border-[3px] border-transparent" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary font-semibold", children: index + 1 })] })) : (
                                 // Future step - show step number with disabled styling
-                                (0, jsx_runtime_1.jsx)("span", { className: "text-as-content-disabled font-semibold", children: index + 1 })) }) }, index), index < steps.length - 1 && ((0, jsx_runtime_1.jsx)("div", { className: "flex w-8 items-center justify-center gap-1", children: Array.from({ length: 6 }).map((_, dotIndex) => ((0, jsx_runtime_1.jsx)("div", { className: "bg-as-primary/30 h-[2px] w-[2px] rounded-full" }, dotIndex))) }))] }))) }), currentStep && ((0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.3 }, className: "text-center", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-xl font-semibold", children: currentStep.title }), currentStep.description && (0, jsx_runtime_1.jsx)("p", { className: "text-as-primary/50 mt-1 text-sm", children: currentStep.description })] }))] }));
+                                (0, jsx_runtime_1.jsx)("span", { className: "text-as-content-disabled font-semibold", children: index + 1 })) })) }, index), index < steps.length - 1 && ((0, jsx_runtime_1.jsx)("div", { className: "flex w-8 items-center justify-center gap-1", children: Array.from({ length: 6 }).map((_, dotIndex) => ((0, jsx_runtime_1.jsx)("div", { className: "bg-as-primary/30 h-[2px] w-[2px] rounded-full" }, dotIndex))) }))] }))) }), currentStep && ((0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.3 }, className: "text-center", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-xl font-semibold", children: currentStep.title }), currentStep.description && (0, jsx_runtime_1.jsx)("p", { className: "text-as-tertiary mt-1 text-sm", children: currentStep.description })] }))] }));
 }

package/dist/cjs/anyspend/react/components/common/TransferCryptoDetails.js

@@ -71,5 +71,5 @@ exports.TransferCryptoDetails = (0, react_3.memo)(function TransferCryptoDetails
                                             transition: "stroke-dashoffset 1s linear",
                                         } })] }), (0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-timer-text absolute inset-0 flex items-center justify-center", children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary text-[10px] font-semibold", children: formatTime(timeLeft) }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-content flex w-full flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-cards flex items-center gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-amount-card w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: "order-transfer-crypto-amount-label text-as-content-secondary text-sm font-medium", children: "Amount" }), (0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-amount-container border-as-border-primary rounded-lg border p-2 shadow-sm", children: (0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: roundedUpSrcAmount || "", onCopy: () => {
                                                 react_1.toast.success("Amount copied to clipboard");
-                                            }, children: (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-amount-copy flex cursor-pointer items-center justify-between gap-2", children: [(0, jsx_runtime_1.jsxs)("strong", { className: "order-transfer-crypto-amount-text text-as-primary font-semibold", children: [roundedUpSrcAmount, " ", srcToken.symbol] }), (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "order-transfer-crypto-amount-copy-icon text-as-primary/50 hover:text-as-primary h-4 w-4 transition-all duration-200" })] }) }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-chain-card w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: "order-transfer-crypto-chain-label text-as-content-secondary text-sm font-medium", children: "Chain" }), (0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-chain-container border-as-border-primary rounded-lg border p-2 shadow-sm", children: (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-chain-info flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("img", { src: anyspend_1.ALL_CHAINS[order.srcChain].logoUrl, alt: (0, anyspend_1.getChainName)(order.srcChain), className: (0, utils_1.cn)("order-transfer-crypto-chain-logo h-6 rounded-full", order.srcChain === chains_1.b3.id && "h-5 rounded-none") }), (0, jsx_runtime_1.jsx)("span", { className: "order-transfer-crypto-chain-name text-as-primary text-sm font-semibold", children: (0, anyspend_1.getChainName)(order.srcChain) })] }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-qr-deposit-card border-b3-react-border bg-as-surface-secondary grid h-[220px] grid-cols-2 overflow-hidden rounded-xl border", children: [(0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-qr-section border-as-border-primary h-full w-full border-r", children: (0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-qr-wrapper flex justify-center", children: (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-qr-container bg-as-surface-secondary flex flex-col items-center rounded-lg p-6", children: [(0, jsx_runtime_1.jsx)(qrcode_react_1.QRCodeSVG, { value: (0, anyspend_1.getPaymentUrl)(order.globalAddress, BigInt(order.srcAmount), order.srcTokenAddress === anyspend_1.ZERO_ADDRESS ? "ETH" : order.srcTokenAddress, order.srcChain, srcToken?.decimals), className: "order-transfer-crypto-qr-code bg-as-surface-secondary max-h-48 max-w-48" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-wallet-hint mt-3 flex items-center justify-center gap-2 text-sm", children: [(0, jsx_runtime_1.jsx)("span", { className: "order-transfer-crypto-wallet-text text-as-brand/70 text-sm font-medium", children: "SCAN WITH" }), (0, jsx_runtime_1.jsxs)(react_1.TextLoop, { interval: 3, children: [(0, jsx_runtime_1.jsx)(react_2.WalletMetamask, { className: "order-transfer-crypto-wallet-icon h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_2.WalletCoinbase, { className: "order-transfer-crypto-wallet-icon h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_2.WalletPhantom, { className: "order-transfer-crypto-wallet-icon h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_2.WalletTrust, { className: "order-transfer-crypto-wallet-icon h-5 w-5", variant: "branded" })] })] })] }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-address-section flex h-full w-full flex-col gap-2 p-6", children: [(0, jsx_runtime_1.jsx)("span", { className: "order-transfer-crypto-address-label text-as-content-secondary text-sm font-medium", children: "Deposit address:" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-address-copy flex h-full cursor-pointer flex-col items-stretch justify-between gap-4", onClick: handleCopyAddress, children: [(0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-address-text text-as-primary break-all font-mono text-sm font-semibold leading-relaxed", children: order.globalAddress }), (0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-address-copy-icon-wrapper place-self-end", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "order-transfer-crypto-address-copy-icon group-hover:text-as-brand text-as-tertiarry h-4 w-4 cursor-pointer transition-all duration-200" }) })] })] })] }), (0, jsx_runtime_1.jsx)(OrderDetailsCollapsible_1.OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount })] }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-actions flex flex-col gap-3", children: [(0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "order-transfer-crypto-copy-btn w-full py-3", onClick: handleCopyAddress, children: "Copy deposit address" }), (0, jsx_runtime_1.jsx)(PaymentMethodSwitch_1.PaymentMethodSwitch, { currentMethod: CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO, onMethodChange: onPaymentMethodChange })] })] }));
+                                            }, children: (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-amount-copy flex cursor-pointer items-center justify-between gap-2", children: [(0, jsx_runtime_1.jsxs)("strong", { className: "order-transfer-crypto-amount-text text-as-primary font-semibold", children: [roundedUpSrcAmount, " ", srcToken.symbol] }), (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "order-transfer-crypto-amount-copy-icon text-as-primary/50 hover:text-as-primary h-4 w-4 transition-all duration-200" })] }) }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-chain-card w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: "order-transfer-crypto-chain-label text-as-content-secondary text-sm font-medium", children: "Chain" }), (0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-chain-container border-as-border-primary rounded-lg border p-2 shadow-sm", children: (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-chain-info flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("img", { src: anyspend_1.ALL_CHAINS[order.srcChain].logoUrl, alt: (0, anyspend_1.getChainName)(order.srcChain), className: (0, utils_1.cn)("order-transfer-crypto-chain-logo h-6 rounded-full", order.srcChain === chains_1.b3.id && "h-5 rounded-none") }), (0, jsx_runtime_1.jsx)("span", { className: "order-transfer-crypto-chain-name text-as-primary text-sm font-semibold", children: (0, anyspend_1.getChainName)(order.srcChain) })] }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-qr-deposit-card border-b3-react-border bg-as-surface-secondary grid h-[220px] grid-cols-2 overflow-hidden rounded-xl border", children: [(0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-qr-section border-as-border-primary h-full w-full border-r", children: (0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-qr-wrapper flex justify-center", children: (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-qr-container bg-as-surface-secondary flex flex-col items-center rounded-lg p-6", children: [(0, jsx_runtime_1.jsx)(qrcode_react_1.QRCodeSVG, { value: (0, anyspend_1.getPaymentUrl)(order.globalAddress, BigInt(order.srcAmount), order.srcTokenAddress === anyspend_1.ZERO_ADDRESS ? "ETH" : order.srcTokenAddress, order.srcChain, srcToken?.decimals), className: "order-transfer-crypto-qr-code bg-as-surface-secondary max-h-48 max-w-48" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-wallet-hint mt-3 flex items-center justify-center gap-2 text-sm", children: [(0, jsx_runtime_1.jsx)("span", { className: "order-transfer-crypto-wallet-text text-as-brand/70 text-sm font-medium", children: "SCAN WITH" }), (0, jsx_runtime_1.jsxs)(react_1.TextLoop, { interval: 3, children: [(0, jsx_runtime_1.jsx)(react_2.WalletMetamask, { className: "order-transfer-crypto-wallet-icon h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_2.WalletCoinbase, { className: "order-transfer-crypto-wallet-icon h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_2.WalletPhantom, { className: "order-transfer-crypto-wallet-icon h-5 w-5", variant: "branded" }), (0, jsx_runtime_1.jsx)(react_2.WalletTrust, { className: "order-transfer-crypto-wallet-icon h-5 w-5", variant: "branded" })] })] })] }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-address-section flex h-full w-full flex-col gap-2 p-6", children: [(0, jsx_runtime_1.jsx)("span", { className: "order-transfer-crypto-address-label text-as-content-secondary text-sm font-medium", children: "Deposit address:" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-address-copy flex h-full cursor-pointer flex-col items-stretch justify-between gap-4", onClick: handleCopyAddress, children: [(0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-address-text text-as-primary break-all font-mono text-sm font-semibold leading-relaxed", children: order.globalAddress }), (0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-address-copy-icon-wrapper place-self-end", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "order-transfer-crypto-address-copy-icon group-hover:text-as-brand text-as-tertiary h-4 w-4 cursor-pointer transition-all duration-200" }) })] })] })] }), (0, jsx_runtime_1.jsx)(OrderDetailsCollapsible_1.OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount })] }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-actions flex flex-col gap-3", children: [(0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "order-transfer-crypto-copy-btn w-full py-3", onClick: handleCopyAddress, children: "Copy deposit address" }), (0, jsx_runtime_1.jsx)(PaymentMethodSwitch_1.PaymentMethodSwitch, { currentMethod: CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO, onMethodChange: onPaymentMethodChange })] })] }));
 });

package/dist/cjs/anyspend/react/components/common/TransferResultScreen.js

@@ -5,7 +5,10 @@ exports.TransferResultScreen = TransferResultScreen;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const anyspend_1 = require("../../../../anyspend");
 const cn_1 = require("../../../../shared/utils/cn");
+const react_1 = require("../../../../global-account/react");
 const lucide_react_1 = require("lucide-react");
+const AnySpendCustomizationContext_1 = require("../context/AnySpendCustomizationContext");
+const AnimatedCheckmark_1 = require("../icons/AnimatedCheckmark");
 const ChainTokenIcon_1 = require("./ChainTokenIcon");
 /**
  * A component for displaying the result of a pure transfer (same chain, same token).
@@ -13,6 +16,7 @@ const ChainTokenIcon_1 = require("./ChainTokenIcon");
  */
 function TransferResultScreen({ mode = "modal", transferResult, token, chainId, recipientAddress, onBack, onClose, }) {
     const chain = anyspend_1.ALL_CHAINS[chainId];
+    const { content } = (0, AnySpendCustomizationContext_1.useAnySpendCustomization)();
     const handleClose = () => {
         if (onClose) {
             onClose();
@@ -21,5 +25,5 @@ function TransferResultScreen({ mode = "modal", transferResult, token, chainId,
             onBack();
         }
     };
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("anyspend-container anyspend-transfer-result font-inter bg-as-surface-primary mx-auto w-full max-w-[460px] p-6", mode === "page" && "border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl"), children: (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-transfer-result-content flex flex-col items-center gap-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "anyspend-transfer-success-icon bg-as-success-secondary flex h-16 w-16 items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { className: "text-as-content-icon-success h-10 w-10" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-transfer-success-message flex flex-col items-center gap-2", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-xl font-semibold", children: "Transfer Received!" }), (0, jsx_runtime_1.jsx)("p", { className: "text-as-secondary text-center text-sm", children: "Your transfer has been successfully received." })] }), (0, jsx_runtime_1.jsx)("div", { className: "anyspend-transfer-amount border-as-border-secondary bg-as-surface-secondary flex w-full flex-col items-center gap-3 rounded-xl border p-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(ChainTokenIcon_1.ChainTokenIcon, { chainUrl: chain?.logoUrl, tokenUrl: token.metadata?.logoURI, className: "h-10 min-h-10 w-10 min-w-10" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary text-2xl font-bold", children: [transferResult.formattedAmount, " ", token.symbol] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-secondary text-sm", children: ["on ", chain?.name ?? "Unknown Chain"] })] })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-transfer-recipient flex w-full flex-col gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-secondary text-xs", children: "Received at" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary break-all font-mono text-sm", children: recipientAddress })] }), (0, jsx_runtime_1.jsx)("button", { onClick: handleClose, className: "anyspend-transfer-close-button bg-as-brand flex w-full items-center justify-center gap-2 rounded-xl py-3.5 font-medium text-white transition-all hover:opacity-90", children: mode === "page" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Return to Home ", (0, jsx_runtime_1.jsx)(lucide_react_1.Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") })] }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("anyspend-container anyspend-transfer-result font-inter bg-as-surface-primary mx-auto w-full max-w-[460px] p-6", mode === "page" && "border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl"), children: (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-transfer-result-content flex flex-col items-center gap-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "anyspend-transfer-success-icon", children: (0, jsx_runtime_1.jsx)(AnimatedCheckmark_1.AnimatedCheckmark, { className: "h-16 w-16" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-transfer-success-message flex flex-col items-center gap-2", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-xl font-semibold", children: content.successTitle || "Transfer Received!" }), (0, jsx_runtime_1.jsx)("p", { className: "text-as-secondary text-center text-sm", children: content.successDescription || "Your transfer has been successfully received." })] }), (0, jsx_runtime_1.jsx)("div", { className: "anyspend-transfer-amount border-as-border-secondary bg-as-surface-secondary flex w-full flex-col items-center gap-3 rounded-xl border p-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(ChainTokenIcon_1.ChainTokenIcon, { chainUrl: chain?.logoUrl, tokenUrl: token.metadata?.logoURI, className: "h-10 min-h-10 w-10 min-w-10" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary text-2xl font-bold", children: [transferResult.formattedAmount, " ", token.symbol] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-secondary text-sm", children: ["on ", chain?.name ?? "Unknown Chain"] })] })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-transfer-recipient flex w-full flex-col gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-secondary text-xs", children: "Received at" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary break-all font-mono text-sm", children: recipientAddress })] }), (0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", onClick: handleClose, className: "anyspend-transfer-close-button w-full", textClassName: "text-white", children: mode === "page" ? ((0, jsx_runtime_1.jsxs)("span", { className: "flex items-center justify-center gap-2", children: ["Return to Home ", (0, jsx_runtime_1.jsx)(lucide_react_1.Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") })] }) }));
 }

package/dist/cjs/anyspend/react/components/context/AnySpendCustomizationContext.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from "react";
+import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "../types/customization";
+interface AnySpendCustomizationContextValue {
+    slots: AnySpendSlots;
+    content: AnySpendContent;
+    theme: AnySpendTheme;
+}
+export interface AnySpendCustomizationProviderProps {
+    slots?: AnySpendSlots;
+    content?: AnySpendContent;
+    theme?: AnySpendTheme;
+    children: ReactNode;
+}
+export declare function AnySpendCustomizationProvider({ slots, content, theme, children }: AnySpendCustomizationProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useAnySpendCustomization(): AnySpendCustomizationContextValue;
+export {};

package/dist/cjs/anyspend/react/components/context/AnySpendCustomizationContext.js

@@ -0,0 +1,92 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnySpendCustomizationProvider = AnySpendCustomizationProvider;
+exports.useAnySpendCustomization = useAnySpendCustomization;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const AnySpendCustomizationContext = (0, react_1.createContext)({
+    slots: {},
+    content: {},
+    theme: {},
+});
+/** Convert a hex color to HSL string (e.g. "210 50% 40%"). Supports both 3-digit (#fff) and 6-digit (#ffffff) formats. */
+function hexToHsl(hex) {
+    const hexStr = hex.replace(/^#/, "");
+    let r, g, b;
+    if (hexStr.length === 3) {
+        // 3-digit hex shorthand (e.g., #fff)
+        [r, g, b] = [0, 1, 2].map(i => parseInt(hexStr[i] + hexStr[i], 16) / 255);
+    }
+    else if (hexStr.length === 6) {
+        // 6-digit hex (e.g., #ffffff)
+        [r, g, b] = [0, 2, 4].map(i => parseInt(hexStr.substring(i, i + 2), 16) / 255);
+    }
+    else {
+        return null;
+    }
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h = 0;
+    let s = 0;
+    const l = (max + min) / 2;
+    if (max !== min) {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch (max) {
+            case r:
+                h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+                break;
+            case g:
+                h = ((b - r) / d + 2) / 6;
+                break;
+            case b:
+                h = ((r - g) / d + 4) / 6;
+                break;
+        }
+    }
+    return `${Math.round(h * 360)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`;
+}
+const CSS_VAR_MAP = {
+    primary: "--as-primary",
+    secondary: "--as-secondary",
+    tertiary: "--as-tertiary",
+    surfacePrimary: "--as-surface-primary",
+    surfaceSecondary: "--as-surface-secondary",
+    brand: "--as-brand",
+    borderPrimary: "--as-border-primary",
+    borderSecondary: "--as-border-secondary",
+};
+function AnySpendCustomizationProvider({ slots, content, theme, children }) {
+    const value = (0, react_1.useMemo)(() => ({
+        slots: slots || {},
+        content: content || {},
+        theme: theme || {},
+    }), [slots, content, theme]);
+    const cssVarOverrides = (0, react_1.useMemo)(() => {
+        const vars = {};
+        // Convert brandColor hex → HSL → --as-brand
+        if (theme?.brandColor) {
+            const hsl = hexToHsl(theme.brandColor);
+            if (hsl)
+                vars["--as-brand"] = hsl;
+        }
+        // Apply explicit color overrides (convert hex to HSL)
+        if (theme?.colors) {
+            for (const [key, val] of Object.entries(theme.colors)) {
+                const cssVar = CSS_VAR_MAP[key];
+                if (cssVar && val) {
+                    const hsl = hexToHsl(val);
+                    if (hsl)
+                        vars[cssVar] = hsl;
+                }
+            }
+        }
+        return vars;
+    }, [theme?.brandColor, theme?.colors]);
+    const hasOverrides = Object.keys(cssVarOverrides).length > 0;
+    return ((0, jsx_runtime_1.jsx)(AnySpendCustomizationContext.Provider, { value: value, children: hasOverrides ? ((0, jsx_runtime_1.jsx)("div", { style: { ...cssVarOverrides, display: "contents" }, children: children })) : (children) }));
+}
+function useAnySpendCustomization() {
+    return (0, react_1.useContext)(AnySpendCustomizationContext);
+}

package/dist/cjs/anyspend/react/components/icons/AnimatedCheckmark.d.ts

@@ -0,0 +1,23 @@
+interface AnimatedCheckmarkProps {
+    /** Circle stroke / fill color (CSS color value) */
+    color?: string;
+    /** Checkmark stroke color (defaults to white) */
+    checkColor?: string;
+    /** Stroke width for the circle and check path */
+    strokeWidth?: number;
+    /** Tailwind or custom className to control size, e.g. "h-16 w-16" */
+    className?: string;
+    /** Animation delay in seconds */
+    delay?: number;
+    /** Render in final (post-animation) state with no animation */
+    static?: boolean;
+}
+/**
+ * Animated checkmark SVG component.
+ * Circle draws in → checkmark draws → background fills → subtle scale bounce.
+ *
+ * Size is controlled via className (Tailwind classes like `h-10 w-10`, `h-16 w-16`, etc.).
+ * The SVG scales to fit its container via viewBox.
+ */
+export declare function AnimatedCheckmark({ color, checkColor, strokeWidth, className, delay, static: isStatic, }: AnimatedCheckmarkProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/anyspend/react/components/icons/AnimatedCheckmark.js

@@ -0,0 +1,71 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnimatedCheckmark = AnimatedCheckmark;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_1 = require("../../../../shared/utils/cn");
+/**
+ * Animated checkmark SVG component.
+ * Circle draws in → checkmark draws → background fills → subtle scale bounce.
+ *
+ * Size is controlled via className (Tailwind classes like `h-10 w-10`, `h-16 w-16`, etc.).
+ * The SVG scales to fit its container via viewBox.
+ */
+function AnimatedCheckmark({ color = "#22c55e", checkColor = "#fff", strokeWidth = 2, className, delay = 0, static: isStatic = false, }) {
+    const id = `ac-${(0, react_1.useId)().replace(/:/g, "")}`;
+    if (isStatic) {
+        return ((0, jsx_runtime_1.jsxs)("svg", { className: className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 52 52", style: {
+                borderRadius: "50%",
+                display: "block",
+                strokeWidth,
+                stroke: checkColor,
+                strokeMiterlimit: 10,
+                boxShadow: `inset 0px 0px 0px 100px ${color}`,
+            }, children: [(0, jsx_runtime_1.jsx)("circle", { cx: "26", cy: "26", r: "25", fill: "none", style: {
+                        strokeWidth,
+                        strokeMiterlimit: 10,
+                        stroke: color,
+                    } }), (0, jsx_runtime_1.jsx)("path", { fill: "none", d: "M14.1 27.2l7.1 7.2 16.7-16.8", style: { transformOrigin: "50% 50%" } })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: {
+                    __html: `
+@keyframes ${id}-stroke {
+  100% { stroke-dashoffset: 0; }
+}
+@keyframes ${id}-scale {
+  0%, 100% { transform: none; }
+  50% { transform: scale3d(1.1, 1.1, 1); }
+}
+@keyframes ${id}-fill {
+  100% { box-shadow: inset 0px 0px 0px 100px ${color}; }
+}
+.${id} {
+  border-radius: 50%;
+  display: block;
+  stroke-width: ${strokeWidth};
+  stroke: ${checkColor};
+  stroke-miterlimit: 10;
+  box-shadow: inset 0px 0px 0px ${color};
+  animation:
+    ${id}-fill .4s ease-in-out ${delay + 0.4}s forwards,
+    ${id}-scale .3s ease-in-out ${delay + 0.9}s both;
+}
+.${id}__circle {
+  stroke-dasharray: 166;
+  stroke-dashoffset: 166;
+  stroke-width: ${strokeWidth};
+  stroke-miterlimit: 10;
+  stroke: ${color};
+  fill: none;
+  animation: ${id}-stroke .6s cubic-bezier(0.65, 0, 0.45, 1) ${delay}s forwards;
+}
+.${id}__check {
+  transform-origin: 50% 50%;
+  stroke-dasharray: 48;
+  stroke-dashoffset: 48;
+  animation: ${id}-stroke .3s cubic-bezier(0.65, 0, 0.45, 1) ${delay + 0.8}s forwards;
+}
+`,
+                } }), (0, jsx_runtime_1.jsxs)("svg", { className: (0, cn_1.cn)(id, className), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 52 52", children: [(0, jsx_runtime_1.jsx)("circle", { className: `${id}__circle`, cx: "26", cy: "26", r: "25", fill: "none" }), (0, jsx_runtime_1.jsx)("path", { className: `${id}__check`, fill: "none", d: "M14.1 27.2l7.1 7.2 16.7-16.8" })] })] }));
+}

package/dist/cjs/anyspend/react/components/index.d.ts

@@ -1,3 +1,8 @@
+export { AnySpendCheckout } from "./checkout/AnySpendCheckout";
+export type { AnySpendCheckoutProps, CheckoutItem, CheckoutSummaryLine, AnySpendCheckoutClasses, CheckoutFormSchema, CheckoutFormComponentProps, ShippingOption, DiscountResult, AddressData, } from "./checkout/AnySpendCheckout";
+export { AnySpendCheckoutTrigger } from "./checkout/AnySpendCheckoutTrigger";
+export type { AnySpendCheckoutTriggerProps } from "./checkout/AnySpendCheckoutTrigger";
+export type { PaymentMethod } from "./checkout/CheckoutPaymentPanel";
 export { AnySpend } from "./AnySpend";
 export { AnySpendBondKit } from "./AnySpendBondKit";
 export { AnySpendBuySpin } from "./AnySpendBuySpin";
@@ -6,7 +11,9 @@ export { AnySpendCustom } from "./AnySpendCustom";
 export { AnySpendCustomExactIn } from "./AnySpendCustomExactIn";
 export { AnySpendDeposit } from "./AnySpendDeposit";
 export type { AnySpendDepositProps, ChainConfig, DepositContractConfig } from "./AnySpendDeposit";
-export type { AnySpendAllClasses, AnySpendClasses, AnySpendCustomExactInClasses, AnySpendDepositClasses, CryptoPaymentMethodClasses, CryptoPaySectionClasses, CryptoReceiveSectionClasses, FiatPaymentMethodClasses, OrderDetailsClasses, PanelOnrampClasses, QRDepositClasses, RecipientSelectionClasses, } from "./types/classes";
+export type { AnySpendAllClasses, AnySpendCheckoutClasses as AnySpendCheckoutClassesFromTypes, AnySpendClasses, AnySpendCustomExactInClasses, AnySpendDepositClasses, CryptoPaymentMethodClasses, CryptoPaySectionClasses, CryptoReceiveSectionClasses, FiatPaymentMethodClasses, OrderDetailsClasses, PanelOnrampClasses, QRDepositClasses, RecipientSelectionClasses, } from "./types/classes";
+export type { ActionButtonSlotProps, AnySpendContent, AnySpendSlots, AnySpendTheme, ConnectWalletButtonSlotProps, ErrorScreenSlotProps, SuccessScreenSlotProps, } from "./types/customization";
+export { AnySpendCustomizationProvider, useAnySpendCustomization } from "./context/AnySpendCustomizationContext";
 export { AnySpendDepositHype, HYPE_TOKEN_DETAILS } from "./AnyspendDepositHype";
 export { AnySpendWorkflowTrigger } from "./AnySpendWorkflowTrigger";
 export type { AnySpendWorkflowTriggerProps } from "./AnySpendWorkflowTrigger";

package/dist/cjs/anyspend/react/components/index.js

@@ -14,7 +14,12 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WebviewOnrampPayment = exports.WebviewOnrampOrderStatus = exports.TransferCryptoDetails = exports.TokenBalance = exports.StepProgress = exports.RecipientSelection = exports.OrderTokenAmount = exports.OrderToken = exports.OrderStatus = exports.OrderHistoryItem = exports.OrderHistory = exports.OrderDetailsCollapsible = exports.OrderDetails = exports.CryptoReceiveSection = exports.CryptoPaySection = exports.ChainTokenIcon = exports.AnySpendNFTButton = exports.AnySpendTournament = exports.AnySpendStakeUpsideExactIn = exports.AnySpendStakeUpside = exports.AnySpendStakeB3ExactIn = exports.AnySpendStakeB3 = exports.AnyspendSignatureMint = exports.AnySpendNFT = exports.AnySpendWorkflowTrigger = exports.HYPE_TOKEN_DETAILS = exports.AnySpendDepositHype = exports.AnySpendDeposit = exports.AnySpendCustomExactIn = exports.AnySpendCustom = exports.AnySpendCollectorClubPurchase = exports.AnySpendBuySpin = exports.AnySpendBondKit = exports.AnySpend = void 0;
+exports.WebviewOnrampPayment = exports.WebviewOnrampOrderStatus = exports.TransferCryptoDetails = exports.TokenBalance = exports.StepProgress = exports.RecipientSelection = exports.OrderTokenAmount = exports.OrderToken = exports.OrderStatus = exports.OrderHistoryItem = exports.OrderHistory = exports.OrderDetailsCollapsible = exports.OrderDetails = exports.CryptoReceiveSection = exports.CryptoPaySection = exports.ChainTokenIcon = exports.AnySpendNFTButton = exports.AnySpendTournament = exports.AnySpendStakeUpsideExactIn = exports.AnySpendStakeUpside = exports.AnySpendStakeB3ExactIn = exports.AnySpendStakeB3 = exports.AnyspendSignatureMint = exports.AnySpendNFT = exports.AnySpendWorkflowTrigger = exports.HYPE_TOKEN_DETAILS = exports.AnySpendDepositHype = exports.useAnySpendCustomization = exports.AnySpendCustomizationProvider = exports.AnySpendDeposit = exports.AnySpendCustomExactIn = exports.AnySpendCustom = exports.AnySpendCollectorClubPurchase = exports.AnySpendBuySpin = exports.AnySpendBondKit = exports.AnySpend = exports.AnySpendCheckoutTrigger = exports.AnySpendCheckout = void 0;
+// Checkout
+var AnySpendCheckout_1 = require("./checkout/AnySpendCheckout");
+Object.defineProperty(exports, "AnySpendCheckout", { enumerable: true, get: function () { return AnySpendCheckout_1.AnySpendCheckout; } });
+var AnySpendCheckoutTrigger_1 = require("./checkout/AnySpendCheckoutTrigger");
+Object.defineProperty(exports, "AnySpendCheckoutTrigger", { enumerable: true, get: function () { return AnySpendCheckoutTrigger_1.AnySpendCheckoutTrigger; } });
 // Components
 var AnySpend_1 = require("./AnySpend");
 Object.defineProperty(exports, "AnySpend", { enumerable: true, get: function () { return AnySpend_1.AnySpend; } });
@@ -30,6 +35,10 @@ var AnySpendCustomExactIn_1 = require("./AnySpendCustomExactIn");
 Object.defineProperty(exports, "AnySpendCustomExactIn", { enumerable: true, get: function () { return AnySpendCustomExactIn_1.AnySpendCustomExactIn; } });
 var AnySpendDeposit_1 = require("./AnySpendDeposit");
 Object.defineProperty(exports, "AnySpendDeposit", { enumerable: true, get: function () { return AnySpendDeposit_1.AnySpendDeposit; } });
+// Customization context (for advanced/nested usage)
+var AnySpendCustomizationContext_1 = require("./context/AnySpendCustomizationContext");
+Object.defineProperty(exports, "AnySpendCustomizationProvider", { enumerable: true, get: function () { return AnySpendCustomizationContext_1.AnySpendCustomizationProvider; } });
+Object.defineProperty(exports, "useAnySpendCustomization", { enumerable: true, get: function () { return AnySpendCustomizationContext_1.useAnySpendCustomization; } });
 var AnyspendDepositHype_1 = require("./AnyspendDepositHype");
 Object.defineProperty(exports, "AnySpendDepositHype", { enumerable: true, get: function () { return AnyspendDepositHype_1.AnySpendDepositHype; } });
 Object.defineProperty(exports, "HYPE_TOKEN_DETAILS", { enumerable: true, get: function () { return AnyspendDepositHype_1.HYPE_TOKEN_DETAILS; } });