@b3dotfun/sdk 0.1.66 → 0.1.67-alpha.0

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

@@ -75,20 +75,20 @@ export function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPayme
     const handleQuickAmount = (value) => {
         setSrcAmountOnRamp(value);
     };
-    return (_jsxs("div", { className: classes?.container || "panel-onramp bg-as-surface-primary flex w-full flex-col", children: [_jsxs("div", { className: "border-as-border-secondary bg-as-surface-secondary relative flex w-full flex-col rounded-2xl border p-4", children: [_jsxs("div", { className: "flex h-7 w-full items-center justify-between", children: [_jsx("span", { className: "text-as-tertiarry flex items-center text-sm font-bold", children: "Pay" }), _jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm", onClick: () => setActivePanel(fiatPaymentMethodIndex), children: (() => {
+    return (_jsxs("div", { className: classes?.container || "panel-onramp bg-as-surface-primary flex w-full flex-col", children: [_jsxs("div", { className: "border-as-border-secondary bg-as-surface-secondary relative flex w-full flex-col rounded-2xl border p-4", children: [_jsxs("div", { className: "flex h-7 w-full items-center justify-between", children: [_jsx("span", { className: "text-as-tertiary flex items-center text-sm font-bold", children: "Pay" }), _jsx("button", { className: "text-as-tertiary flex h-7 items-center gap-1 text-sm", onClick: () => setActivePanel(fiatPaymentMethodIndex), children: (() => {
                                     const config = selectedPaymentMethod ? FIAT_PAYMENT_METHOD_DISPLAY[selectedPaymentMethod] : null;
                                     if (config) {
                                         return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: config.icon }) }), config.label] }), _jsx(ChevronRight, { className: "h-4 w-4" })] }));
                                     }
                                     return (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] }));
-                                })() })] }), _jsx("div", { className: "flex items-center justify-center pb-2 pt-8", children: _jsxs("div", { className: "flex gap-1", children: [_jsx("span", { className: "text-as-tertiarry text-2xl font-bold", children: "$" }), _jsx(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: {
+                                })() })] }), _jsx("div", { className: "flex items-center justify-center pb-2 pt-8", children: _jsxs("div", { className: "flex gap-1", children: [_jsx("span", { className: "text-as-tertiary text-2xl font-bold", children: "$" }), _jsx(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`,
                                     } })] }) }), _jsx("div", { className: cn("mx-auto mb-6 flex justify-center gap-2", hideDstToken && "mb-0"), children: customUsdInputValues
                             .filter(v => !isNaN(Number(v)))
                             .map(value => (_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 && (_jsx(OrderTokenAmountFiat, { address: _recipientAddress, context: "to", inputValue: destinationAmount || "0", onChangeInput: () => { }, chainId: destinationChainId, setChainId: onDestinationChainChange || (() => { }), token: destinationToken, setToken: onDestinationTokenChange || (() => { }) }))] }), _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: [_jsxs("div", { className: "flex w-full items-center justify-between gap-2", children: [_jsx("span", { className: "text-as-tertiarry flex items-center text-sm", children: "Recipient" }), _recipientAddress ? (_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: [_jsx("span", { className: "text-sm", children: customRecipientLabel ||
-                                            (recipientName ? formatUsername(recipientName) : formatAddress(_recipientAddress)) }), _jsx(ChevronRight, { size: 16 })] })) : (_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: [_jsx(Wallet, { className: "text-as-brand", size: 16 }), "Select recipient", _jsx(ChevronRight, { size: 16 })] }))] }), _jsx("div", { className: "divider w-full" }), _jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsx("span", { className: "text-as-tertiarry text-sm", children: "Expected to receive" }), _jsxs("div", { className: "flex flex-wrap items-center justify-end gap-1", children: [_jsxs("span", { className: "text-as-primary font-semibold", children: [destinationAmount || "0", " ", dstTokenSymbol || destinationToken?.symbol || ""] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsxs("span", { className: "text-as-tertiarry text-sm", children: ["on ", destinationChainId ? ALL_CHAINS[destinationChainId]?.name : ""] }), destinationToken && destinationChainId && destinationToken.metadata?.logoURI && (_jsx("img", { src: ALL_CHAINS[destinationChainId]?.logoUrl, alt: "Chain", className: "h-4 w-4 rounded-full" }))] })] })] }), _jsx("div", { className: "divider w-full" }), _jsx("div", { className: "", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "text-as-tertiarry text-sm", children: "Total" }), anyspendQuote?.data?.fee && onShowFeeDetail && (_jsx("button", { onClick: onShowFeeDetail, className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: _jsx(Info, { className: "h-4 w-4" }) })), anyspendQuote?.data?.pointsAmount && anyspendQuote?.data?.pointsAmount > 0 && (_jsx(PointsBadge, { pointsAmount: anyspendQuote.data.pointsAmount, pointsMultiplier: anyspendQuote.data.pointsMultiplier, onClick: () => onShowPointsDetail?.() }))] }), _jsxs("div", { className: "flex flex-col items-end gap-0.5", children: [_jsxs("span", { className: "text-as-primary font-semibold", children: ["$", getTotalAmount(selectedPaymentMethod || FiatPaymentMethod.NONE).toFixed(2)] }), (() => {
+                                : "bg-as-surface-secondary hover:bg-as-surface-secondary"}`, children: ["$", value] }, value))) }), destinationToken && destinationChainId && !hideDstToken && (_jsx(OrderTokenAmountFiat, { address: _recipientAddress, context: "to", inputValue: destinationAmount || "0", onChangeInput: () => { }, chainId: destinationChainId, setChainId: onDestinationChainChange || (() => { }), token: destinationToken, setToken: onDestinationTokenChange || (() => { }) }))] }), _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: [_jsxs("div", { className: "flex w-full items-center justify-between gap-2", children: [_jsx("span", { className: "text-as-tertiary flex items-center text-sm", children: "Recipient" }), _recipientAddress ? (_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: [_jsx("span", { className: "text-sm", children: customRecipientLabel ||
+                                            (recipientName ? formatUsername(recipientName) : formatAddress(_recipientAddress)) }), _jsx(ChevronRight, { size: 16 })] })) : (_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: [_jsx(Wallet, { className: "text-as-brand", size: 16 }), "Select recipient", _jsx(ChevronRight, { size: 16 })] }))] }), _jsx("div", { className: "divider w-full" }), _jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsx("span", { className: "text-as-tertiary text-sm", children: "Expected to receive" }), _jsxs("div", { className: "flex flex-wrap items-center justify-end gap-1", children: [_jsxs("span", { className: "text-as-primary font-semibold", children: [destinationAmount || "0", " ", dstTokenSymbol || destinationToken?.symbol || ""] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsxs("span", { className: "text-as-tertiary text-sm", children: ["on ", destinationChainId ? ALL_CHAINS[destinationChainId]?.name : ""] }), destinationToken && destinationChainId && destinationToken.metadata?.logoURI && (_jsx("img", { src: ALL_CHAINS[destinationChainId]?.logoUrl, alt: "Chain", className: "h-4 w-4 rounded-full" }))] })] })] }), _jsx("div", { className: "divider w-full" }), _jsx("div", { className: "", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "text-as-tertiary text-sm", children: "Total" }), anyspendQuote?.data?.fee && onShowFeeDetail && (_jsx("button", { onClick: onShowFeeDetail, className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: _jsx(Info, { className: "h-4 w-4" }) })), anyspendQuote?.data?.pointsAmount && anyspendQuote?.data?.pointsAmount > 0 && (_jsx(PointsBadge, { pointsAmount: anyspendQuote.data.pointsAmount, pointsMultiplier: anyspendQuote.data.pointsMultiplier, onClick: () => onShowPointsDetail?.() }))] }), _jsxs("div", { className: "flex flex-col items-end gap-0.5", children: [_jsxs("span", { className: "text-as-primary font-semibold", children: ["$", getTotalAmount(selectedPaymentMethod || FiatPaymentMethod.NONE).toFixed(2)] }), (() => {
                                             // For fiat payments, show the fee from the payment method
                                             const fiatFee = getFeeFromApi(selectedPaymentMethod || FiatPaymentMethod.NONE);
                                             if (fiatFee !== null && fiatFee > 0) {

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

@@ -39,7 +39,7 @@ export function CryptoPaySection({ selectedSrcChainId, setSelectedSrcChainId, se
     useEffect(() => {
         appliedSrcMetadataRef.current = false;
     }, [selectedSrcToken.address, selectedSrcToken.chainId]);
-    return (_jsxs(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: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), _jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none", onClick: onSelectCryptoPaymentMethod, children: selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (_jsxs(_Fragment, { children: [isConnected ? (_jsx("div", { className: "flex items-center gap-1", children: connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "") })) : ("Connect wallet"), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET ? (_jsxs(_Fragment, { children: ["Global Account", _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (_jsxs(_Fragment, { children: ["Transfer crypto", _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) })] }), _jsx(OrderTokenAmount, { address: connectedAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
+    return (_jsxs(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: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), _jsx("button", { className: "text-as-tertiary flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none", onClick: onSelectCryptoPaymentMethod, children: selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (_jsxs(_Fragment, { children: [isConnected ? (_jsx("div", { className: "flex items-center gap-1", children: connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "") })) : ("Connect wallet"), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET ? (_jsxs(_Fragment, { children: ["Global Account", _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (_jsxs(_Fragment, { children: ["Transfer crypto", _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) })] }), _jsx(OrderTokenAmount, { address: connectedAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
                     setIsSrcInputDirty(true);
                     setSrcAmount(value);
                 }, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: formatDisplayNumber(anyspendQuote?.data?.currencyIn?.amountUsd, {

package/dist/esm/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/esm/anyspend/react/components/common/StepProgress.js

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

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

@@ -68,5 +68,5 @@ export const TransferCryptoDetails = memo(function TransferCryptoDetails({ order
                                             transition: "stroke-dashoffset 1s linear",
                                         } })] }), _jsx("div", { className: "order-transfer-crypto-timer-text absolute inset-0 flex items-center justify-center", children: _jsx("span", { className: "text-as-primary text-[10px] font-semibold", children: formatTime(timeLeft) }) })] })] }), _jsxs("div", { className: "order-transfer-crypto-content flex w-full flex-col gap-4", children: [_jsxs("div", { className: "order-transfer-crypto-cards flex items-center gap-4", children: [_jsxs("div", { className: "order-transfer-crypto-amount-card w-full", children: [_jsx("span", { className: "order-transfer-crypto-amount-label text-as-content-secondary text-sm font-medium", children: "Amount" }), _jsx("div", { className: "order-transfer-crypto-amount-container border-as-border-primary rounded-lg border p-2 shadow-sm", children: _jsx(CopyToClipboard, { text: roundedUpSrcAmount || "", onCopy: () => {
                                                 toast.success("Amount copied to clipboard");
-                                            }, children: _jsxs("div", { className: "order-transfer-crypto-amount-copy flex cursor-pointer items-center justify-between gap-2", children: [_jsxs("strong", { className: "order-transfer-crypto-amount-text text-as-primary font-semibold", children: [roundedUpSrcAmount, " ", srcToken.symbol] }), _jsx(Copy, { className: "order-transfer-crypto-amount-copy-icon text-as-primary/50 hover:text-as-primary h-4 w-4 transition-all duration-200" })] }) }) })] }), _jsxs("div", { className: "order-transfer-crypto-chain-card w-full", children: [_jsx("span", { className: "order-transfer-crypto-chain-label text-as-content-secondary text-sm font-medium", children: "Chain" }), _jsx("div", { className: "order-transfer-crypto-chain-container border-as-border-primary rounded-lg border p-2 shadow-sm", children: _jsxs("div", { className: "order-transfer-crypto-chain-info flex items-center gap-2", children: [_jsx("img", { src: ALL_CHAINS[order.srcChain].logoUrl, alt: getChainName(order.srcChain), className: cn("order-transfer-crypto-chain-logo h-6 rounded-full", order.srcChain === b3.id && "h-5 rounded-none") }), _jsx("span", { className: "order-transfer-crypto-chain-name text-as-primary text-sm font-semibold", children: getChainName(order.srcChain) })] }) })] })] }), _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: [_jsx("div", { className: "order-transfer-crypto-qr-section border-as-border-primary h-full w-full border-r", children: _jsx("div", { className: "order-transfer-crypto-qr-wrapper flex justify-center", children: _jsxs("div", { className: "order-transfer-crypto-qr-container bg-as-surface-secondary flex flex-col items-center rounded-lg p-6", children: [_jsx(QRCodeSVG, { value: getPaymentUrl(order.globalAddress, BigInt(order.srcAmount), order.srcTokenAddress === 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" }), _jsxs("div", { className: "order-transfer-crypto-wallet-hint mt-3 flex items-center justify-center gap-2 text-sm", children: [_jsx("span", { className: "order-transfer-crypto-wallet-text text-as-brand/70 text-sm font-medium", children: "SCAN WITH" }), _jsxs(TextLoop, { interval: 3, children: [_jsx(WalletMetamask, { className: "order-transfer-crypto-wallet-icon h-5 w-5", variant: "branded" }), _jsx(WalletCoinbase, { className: "order-transfer-crypto-wallet-icon h-5 w-5", variant: "branded" }), _jsx(WalletPhantom, { className: "order-transfer-crypto-wallet-icon h-5 w-5", variant: "branded" }), _jsx(WalletTrust, { className: "order-transfer-crypto-wallet-icon h-5 w-5", variant: "branded" })] })] })] }) }) }), _jsxs("div", { className: "order-transfer-crypto-address-section flex h-full w-full flex-col gap-2 p-6", children: [_jsx("span", { className: "order-transfer-crypto-address-label text-as-content-secondary text-sm font-medium", children: "Deposit address:" }), _jsxs("div", { className: "order-transfer-crypto-address-copy flex h-full cursor-pointer flex-col items-stretch justify-between gap-4", onClick: handleCopyAddress, children: [_jsx("div", { className: "order-transfer-crypto-address-text text-as-primary break-all font-mono text-sm font-semibold leading-relaxed", children: order.globalAddress }), _jsx("div", { className: "order-transfer-crypto-address-copy-icon-wrapper place-self-end", children: _jsx(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" }) })] })] })] }), _jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount })] }), _jsxs("div", { className: "order-transfer-crypto-actions flex flex-col gap-3", children: [_jsx(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" }), _jsx(PaymentMethodSwitch, { currentMethod: CryptoPaymentMethodType.TRANSFER_CRYPTO, onMethodChange: onPaymentMethodChange })] })] }));
+                                            }, children: _jsxs("div", { className: "order-transfer-crypto-amount-copy flex cursor-pointer items-center justify-between gap-2", children: [_jsxs("strong", { className: "order-transfer-crypto-amount-text text-as-primary font-semibold", children: [roundedUpSrcAmount, " ", srcToken.symbol] }), _jsx(Copy, { className: "order-transfer-crypto-amount-copy-icon text-as-primary/50 hover:text-as-primary h-4 w-4 transition-all duration-200" })] }) }) })] }), _jsxs("div", { className: "order-transfer-crypto-chain-card w-full", children: [_jsx("span", { className: "order-transfer-crypto-chain-label text-as-content-secondary text-sm font-medium", children: "Chain" }), _jsx("div", { className: "order-transfer-crypto-chain-container border-as-border-primary rounded-lg border p-2 shadow-sm", children: _jsxs("div", { className: "order-transfer-crypto-chain-info flex items-center gap-2", children: [_jsx("img", { src: ALL_CHAINS[order.srcChain].logoUrl, alt: getChainName(order.srcChain), className: cn("order-transfer-crypto-chain-logo h-6 rounded-full", order.srcChain === b3.id && "h-5 rounded-none") }), _jsx("span", { className: "order-transfer-crypto-chain-name text-as-primary text-sm font-semibold", children: getChainName(order.srcChain) })] }) })] })] }), _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: [_jsx("div", { className: "order-transfer-crypto-qr-section border-as-border-primary h-full w-full border-r", children: _jsx("div", { className: "order-transfer-crypto-qr-wrapper flex justify-center", children: _jsxs("div", { className: "order-transfer-crypto-qr-container bg-as-surface-secondary flex flex-col items-center rounded-lg p-6", children: [_jsx(QRCodeSVG, { value: getPaymentUrl(order.globalAddress, BigInt(order.srcAmount), order.srcTokenAddress === 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" }), _jsxs("div", { className: "order-transfer-crypto-wallet-hint mt-3 flex items-center justify-center gap-2 text-sm", children: [_jsx("span", { className: "order-transfer-crypto-wallet-text text-as-brand/70 text-sm font-medium", children: "SCAN WITH" }), _jsxs(TextLoop, { interval: 3, children: [_jsx(WalletMetamask, { className: "order-transfer-crypto-wallet-icon h-5 w-5", variant: "branded" }), _jsx(WalletCoinbase, { className: "order-transfer-crypto-wallet-icon h-5 w-5", variant: "branded" }), _jsx(WalletPhantom, { className: "order-transfer-crypto-wallet-icon h-5 w-5", variant: "branded" }), _jsx(WalletTrust, { className: "order-transfer-crypto-wallet-icon h-5 w-5", variant: "branded" })] })] })] }) }) }), _jsxs("div", { className: "order-transfer-crypto-address-section flex h-full w-full flex-col gap-2 p-6", children: [_jsx("span", { className: "order-transfer-crypto-address-label text-as-content-secondary text-sm font-medium", children: "Deposit address:" }), _jsxs("div", { className: "order-transfer-crypto-address-copy flex h-full cursor-pointer flex-col items-stretch justify-between gap-4", onClick: handleCopyAddress, children: [_jsx("div", { className: "order-transfer-crypto-address-text text-as-primary break-all font-mono text-sm font-semibold leading-relaxed", children: order.globalAddress }), _jsx("div", { className: "order-transfer-crypto-address-copy-icon-wrapper place-self-end", children: _jsx(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" }) })] })] })] }), _jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount })] }), _jsxs("div", { className: "order-transfer-crypto-actions flex flex-col gap-3", children: [_jsx(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" }), _jsx(PaymentMethodSwitch, { currentMethod: CryptoPaymentMethodType.TRANSFER_CRYPTO, onMethodChange: onPaymentMethodChange })] })] }));
 });

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

@@ -1,8 +1,11 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ALL_CHAINS } from "../../../../anyspend/index.js";
 import { cn } from "../../../../shared/utils/cn.js";
-import { CheckCircle2, Home } from "lucide-react";
+import { ShinyButton } from "../../../../global-account/react/index.js";
+import { Home } from "lucide-react";
+import { useAnySpendCustomization } from "../context/AnySpendCustomizationContext.js";
+import { AnimatedCheckmark } from "../icons/AnimatedCheckmark.js";
 import { ChainTokenIcon } from "./ChainTokenIcon.js";
 /**
  * A component for displaying the result of a pure transfer (same chain, same token).
@@ -10,6 +13,7 @@ import { ChainTokenIcon } from "./ChainTokenIcon.js";
  */
 export function TransferResultScreen({ mode = "modal", transferResult, token, chainId, recipientAddress, onBack, onClose, }) {
     const chain = ALL_CHAINS[chainId];
+    const { content } = useAnySpendCustomization();
     const handleClose = () => {
         if (onClose) {
             onClose();
@@ -18,5 +22,5 @@ export function TransferResultScreen({ mode = "modal", transferResult, token, ch
             onBack();
         }
     };
-    return (_jsx("div", { className: 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: _jsxs("div", { className: "anyspend-transfer-result-content flex flex-col items-center gap-6", children: [_jsx("div", { className: "anyspend-transfer-success-icon bg-as-success-secondary flex h-16 w-16 items-center justify-center rounded-full", children: _jsx(CheckCircle2, { className: "text-as-content-icon-success h-10 w-10" }) }), _jsxs("div", { className: "anyspend-transfer-success-message flex flex-col items-center gap-2", children: [_jsx("h2", { className: "text-as-primary text-xl font-semibold", children: "Transfer Received!" }), _jsx("p", { className: "text-as-secondary text-center text-sm", children: "Your transfer has been successfully received." })] }), _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: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(ChainTokenIcon, { chainUrl: chain?.logoUrl, tokenUrl: token.metadata?.logoURI, className: "h-10 min-h-10 w-10 min-w-10" }), _jsxs("div", { className: "flex flex-col", children: [_jsxs("span", { className: "text-as-primary text-2xl font-bold", children: [transferResult.formattedAmount, " ", token.symbol] }), _jsxs("span", { className: "text-as-secondary text-sm", children: ["on ", chain?.name ?? "Unknown Chain"] })] })] }) }), _jsxs("div", { className: "anyspend-transfer-recipient flex w-full flex-col gap-1", children: [_jsx("span", { className: "text-as-secondary text-xs", children: "Received at" }), _jsx("span", { className: "text-as-primary break-all font-mono text-sm", children: recipientAddress })] }), _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" ? (_jsxs(_Fragment, { children: ["Return to Home ", _jsx(Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") })] }) }));
+    return (_jsx("div", { className: 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: _jsxs("div", { className: "anyspend-transfer-result-content flex flex-col items-center gap-6", children: [_jsx("div", { className: "anyspend-transfer-success-icon", children: _jsx(AnimatedCheckmark, { className: "h-16 w-16" }) }), _jsxs("div", { className: "anyspend-transfer-success-message flex flex-col items-center gap-2", children: [_jsx("h2", { className: "text-as-primary text-xl font-semibold", children: content.successTitle || "Transfer Received!" }), _jsx("p", { className: "text-as-secondary text-center text-sm", children: content.successDescription || "Your transfer has been successfully received." })] }), _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: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(ChainTokenIcon, { chainUrl: chain?.logoUrl, tokenUrl: token.metadata?.logoURI, className: "h-10 min-h-10 w-10 min-w-10" }), _jsxs("div", { className: "flex flex-col", children: [_jsxs("span", { className: "text-as-primary text-2xl font-bold", children: [transferResult.formattedAmount, " ", token.symbol] }), _jsxs("span", { className: "text-as-secondary text-sm", children: ["on ", chain?.name ?? "Unknown Chain"] })] })] }) }), _jsxs("div", { className: "anyspend-transfer-recipient flex w-full flex-col gap-1", children: [_jsx("span", { className: "text-as-secondary text-xs", children: "Received at" }), _jsx("span", { className: "text-as-primary break-all font-mono text-sm", children: recipientAddress })] }), _jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", onClick: handleClose, className: "anyspend-transfer-close-button w-full", textClassName: "text-white", children: mode === "page" ? (_jsxs("span", { className: "flex items-center justify-center gap-2", children: ["Return to Home ", _jsx(Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") })] }) }));
 }

package/dist/esm/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/esm/anyspend/react/components/context/AnySpendCustomizationContext.js

@@ -0,0 +1,88 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from "react";
+const AnySpendCustomizationContext = 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",
+};
+export function AnySpendCustomizationProvider({ slots, content, theme, children }) {
+    const value = useMemo(() => ({
+        slots: slots || {},
+        content: content || {},
+        theme: theme || {},
+    }), [slots, content, theme]);
+    const cssVarOverrides = 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 (_jsx(AnySpendCustomizationContext.Provider, { value: value, children: hasOverrides ? (_jsx("div", { style: { ...cssVarOverrides, display: "contents" }, children: children })) : (children) }));
+}
+export function useAnySpendCustomization() {
+    return useContext(AnySpendCustomizationContext);
+}

package/dist/esm/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/esm/anyspend/react/components/icons/AnimatedCheckmark.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId } from "react";
+import { cn } from "../../../../shared/utils/cn.js";
+/**
+ * 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 function AnimatedCheckmark({ color = "#22c55e", checkColor = "#fff", strokeWidth = 2, className, delay = 0, static: isStatic = false, }) {
+    const id = `ac-${useId().replace(/:/g, "")}`;
+    if (isStatic) {
+        return (_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: [_jsx("circle", { cx: "26", cy: "26", r: "25", fill: "none", style: {
+                        strokeWidth,
+                        strokeMiterlimit: 10,
+                        stroke: color,
+                    } }), _jsx("path", { fill: "none", d: "M14.1 27.2l7.1 7.2 16.7-16.8", style: { transformOrigin: "50% 50%" } })] }));
+    }
+    return (_jsxs(_Fragment, { children: [_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;
+}
+`,
+                } }), _jsxs("svg", { className: cn(id, className), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 52 52", children: [_jsx("circle", { className: `${id}__circle`, cx: "26", cy: "26", r: "25", fill: "none" }), _jsx("path", { className: `${id}__check`, fill: "none", d: "M14.1 27.2l7.1 7.2 16.7-16.8" })] })] }));
+}

package/dist/esm/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/esm/anyspend/react/components/index.js

@@ -1,3 +1,6 @@
+// Checkout
+export { AnySpendCheckout } from "./checkout/AnySpendCheckout.js";
+export { AnySpendCheckoutTrigger } from "./checkout/AnySpendCheckoutTrigger.js";
 // Components
 export { AnySpend } from "./AnySpend.js";
 export { AnySpendBondKit } from "./AnySpendBondKit.js";
@@ -6,6 +9,8 @@ export { AnySpendCollectorClubPurchase } from "./AnySpendCollectorClubPurchase.j
 export { AnySpendCustom } from "./AnySpendCustom.js";
 export { AnySpendCustomExactIn } from "./AnySpendCustomExactIn.js";
 export { AnySpendDeposit } from "./AnySpendDeposit.js";
+// Customization context (for advanced/nested usage)
+export { AnySpendCustomizationProvider, useAnySpendCustomization } from "./context/AnySpendCustomizationContext.js";
 export { AnySpendDepositHype, HYPE_TOKEN_DETAILS } from "./AnyspendDepositHype.js";
 export { AnySpendWorkflowTrigger } from "./AnySpendWorkflowTrigger.js";
 export * from "./AnySpendFingerprintWrapper.js";

package/dist/esm/anyspend/react/components/types/classes.d.ts

@@ -366,11 +366,61 @@ export interface QRDepositClasses {
     orderDetailsContainer?: string;
     orderDetailsContent?: string;
 }
+/** Classes for AnySpendCheckout component */
+export interface AnySpendCheckoutClasses {
+    root?: string;
+    layout?: string;
+    paymentColumn?: string;
+    cartColumn?: string;
+    paymentPanel?: string;
+    paymentTitle?: string;
+    paymentMethodSelector?: string;
+    paymentMethodButton?: string;
+    cryptoPanel?: string;
+    tokenSelector?: string;
+    quoteDisplay?: string;
+    payButton?: string;
+    fiatPanel?: string;
+    stripeForm?: string;
+    stripeSubmitButton?: string;
+    coinbasePanel?: string;
+    cartPanel?: string;
+    cartTitle?: string;
+    cartItemRow?: string;
+    cartItemImage?: string;
+    cartItemName?: string;
+    cartItemDescription?: string;
+    cartItemPrice?: string;
+    cartSummary?: string;
+    cartTotal?: string;
+    cartSubtotal?: string;
+    cartSummaryLine?: string;
+    cartSummaryLineLabel?: string;
+    cartSummaryLineAmount?: string;
+    cartDiscount?: string;
+    cartItemMetadata?: string;
+    cartItemMetadataLabel?: string;
+    cartItemMetadataValue?: string;
+    formPanel?: string;
+    formField?: string;
+    formFieldLabel?: string;
+    formFieldInput?: string;
+    shippingSelector?: string;
+    discountInput?: string;
+    addressForm?: string;
+    poweredBy?: string;
+    successPanel?: string;
+    returnButton?: string;
+    orderStatusPanel?: string;
+    retryButton?: string;
+    transactionLink?: string;
+}
 /** Combined classes for all AnySpend-related components */
 export interface AnySpendAllClasses {
     deposit?: AnySpendDepositClasses;
     anySpend?: AnySpendClasses;
     customExactIn?: AnySpendCustomExactInClasses;
+    checkout?: AnySpendCheckoutClasses;
     cryptoPaySection?: CryptoPaySectionClasses;
     cryptoReceiveSection?: CryptoReceiveSectionClasses;
     panelOnramp?: PanelOnrampClasses;

package/dist/esm/anyspend/react/components/types/customization.d.ts

@@ -0,0 +1,75 @@
+import type { ReactNode } from "react";
+import type { CheckoutFormComponentProps, ShippingSelectorSlotProps, DiscountInputSlotProps } from "../../../types/forms";
+export interface ActionButtonSlotProps {
+    onClick: () => void;
+    disabled: boolean;
+    loading: boolean;
+    text: string;
+}
+export interface ConnectWalletButtonSlotProps {
+    onPayment: () => void;
+    txLoading: boolean;
+    connectedAddress?: string;
+    paymentLabel: string;
+}
+export interface SuccessScreenSlotProps {
+    title: string;
+    description: string;
+    txHash?: string;
+    orderId?: string;
+    explorerUrl?: string;
+    onDone: () => void;
+    returnUrl?: string;
+    returnLabel?: string;
+}
+export interface ErrorScreenSlotProps {
+    title: string;
+    description: string;
+    errorType: "failure" | "expired" | "refunded";
+    orderId?: string;
+    onRetry?: () => void;
+    onDone?: () => void;
+}
+export interface AnySpendSlots {
+    actionButton?: (props: ActionButtonSlotProps) => ReactNode;
+    connectWalletButton?: (props: ConnectWalletButtonSlotProps) => ReactNode;
+    header?: (props: {
+        mode: "page" | "modal";
+    }) => ReactNode;
+    footer?: ReactNode;
+    successScreen?: (props: SuccessScreenSlotProps) => ReactNode;
+    errorScreen?: (props: ErrorScreenSlotProps) => ReactNode;
+    /** Replace the entire checkout form panel with a custom component */
+    checkoutForm?: (props: CheckoutFormComponentProps) => ReactNode;
+    /** Replace the shipping method selector */
+    shippingSelector?: (props: ShippingSelectorSlotProps) => ReactNode;
+    /** Replace the discount code input */
+    discountInput?: (props: DiscountInputSlotProps) => ReactNode;
+}
+export interface AnySpendContent {
+    successTitle?: string | ReactNode;
+    successDescription?: string | ReactNode;
+    failureTitle?: string | ReactNode;
+    failureDescription?: string | ReactNode;
+    expiredTitle?: string | ReactNode;
+    expiredDescription?: string | ReactNode;
+    refundedTitle?: string | ReactNode;
+    refundedDescription?: string | ReactNode;
+    processingTitle?: string | ReactNode;
+    processingDescription?: string | ReactNode;
+    returnButtonLabel?: string;
+    retryButtonLabel?: string;
+}
+export interface AnySpendTheme {
+    brandColor?: string;
+    colors?: Partial<{
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        surfacePrimary: string;
+        surfaceSecondary: string;
+        brand: string;
+        borderPrimary: string;
+        borderSecondary: string;
+    }>;
+}

package/dist/esm/anyspend/react/components/types/customization.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/anyspend/react/hooks/useAnyspendCreateOnrampOrder.d.ts

@@ -1,4 +1,5 @@
 import { components } from "../../../anyspend/types/api";
+import { CreateOrderResponse } from "../../../anyspend/types/api_req_res";
 import { CreateOrderParams } from "./useAnyspendCreateOrder";
 export type OnrampOptions = {
     vendor: components["schemas"]["OnrampMetadata"]["vendor"];
@@ -11,7 +12,7 @@ export type CreateOnrampOrderParams = Omit<CreateOrderParams, "srcChain" | "srcT
     onramp: OnrampOptions;
 };
 export type UseAnyspendCreateOnrampOrderProps = {
-    onSuccess?: (data: any) => void;
+    onSuccess?: (data: CreateOrderResponse) => void;
     onError?: (error: Error) => void;
 };
 /**
@@ -19,6 +20,11 @@ export type UseAnyspendCreateOnrampOrderProps = {
  * Specifically handles orders that involve fiat-to-crypto onramp functionality
  */
 export declare function useAnyspendCreateOnrampOrder({ onSuccess, onError }?: UseAnyspendCreateOnrampOrderProps): {
-    createOrder: import("@tanstack/react-query").UseMutateFunction<any, Error, CreateOnrampOrderParams, unknown>;
+    createOrder: import("@tanstack/react-query").UseMutateFunction<{
+        success: boolean;
+        message: string;
+        data: components["schemas"]["Order"];
+        statusCode: number;
+    }, Error, CreateOnrampOrderParams, unknown>;
     isCreatingOrder: boolean;
 };

package/dist/esm/anyspend/react/hooks/useAnyspendCreateOrder.d.ts

@@ -1,4 +1,5 @@
 import { components } from "../../../anyspend/types/api";
+import { CreateOrderResponse } from "../../../anyspend/types/api_req_res";
 export type CreateOrderParams = {
     recipientAddress: string;
     orderType: components["schemas"]["Order"]["type"];
@@ -21,7 +22,7 @@ export type CreateOrderParams = {
     callbackMetadata?: Record<string, unknown>;
 };
 export type UseAnyspendCreateOrderProps = {
-    onSuccess?: (data: any) => void;
+    onSuccess?: (data: CreateOrderResponse) => void;
     onError?: (error: Error) => void;
 };
 /**
@@ -30,6 +31,11 @@ export type UseAnyspendCreateOrderProps = {
  * For onramp orders, use useAnyspendCreateOnrampOrder instead.
  */
 export declare function useAnyspendCreateOrder({ onSuccess, onError }?: UseAnyspendCreateOrderProps): {
-    createOrder: import("@tanstack/react-query").UseMutateFunction<any, Error, CreateOrderParams, unknown>;
+    createOrder: import("@tanstack/react-query").UseMutateFunction<{
+        success: boolean;
+        message: string;
+        data: components["schemas"]["Order"];
+        statusCode: number;
+    }, Error, CreateOrderParams, unknown>;
     isCreatingOrder: boolean;
 };