@b3dotfun/sdk 0.1.66 → 0.1.68

package/dist/cjs/anyspend/react/components/checkout/AnySpendCheckout.js

@@ -0,0 +1,158 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnySpendCheckout = AnySpendCheckout;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("../../../../global-account/react");
+const constants_1 = require("../../../../anyspend/constants");
+const number_1 = require("../../../../shared/utils/number");
+const react_2 = require("react");
+const useAnyspendQuote_1 = require("../../hooks/useAnyspendQuote");
+const AnySpendFingerprintWrapper_1 = require("../AnySpendFingerprintWrapper");
+const CheckoutCartPanel_1 = require("./CheckoutCartPanel");
+const CheckoutFormPanel_1 = require("./CheckoutFormPanel");
+const CheckoutLayout_1 = require("./CheckoutLayout");
+const CheckoutPaymentPanel_1 = require("./CheckoutPaymentPanel");
+const AnySpendCustomizationContext_1 = require("../context/AnySpendCustomizationContext");
+const emptyAddress = { street: "", city: "", state: "", zip: "", country: "" };
+function AnySpendCheckout({ mode = "page", recipientAddress, destinationTokenAddress, destinationTokenChainId, items, totalAmount: totalAmountOverride, organizationName, organizationLogo, themeColor, buttonText = "Pay", checkoutSessionId, onSuccess, onError, returnUrl, returnLabel, classes, footer, defaultPaymentMethod, senderAddress, slots, content, theme, showPoints, showOrderId, shipping: shippingProp, tax, discount: discountProp, summaryLines, 
+// New form props
+formSchema, formComponent, onFormSubmit, 
+// New shipping props
+shippingOptions, collectShippingAddress, onShippingChange: onShippingChangeProp, 
+// New discount props
+enableDiscountCode, onDiscountApplied: onDiscountAppliedProp, validateDiscount, }) {
+    // ===== Form state =====
+    const [formData, setFormData] = (0, react_2.useState)({});
+    const [selectedShipping, setSelectedShipping] = (0, react_2.useState)(null);
+    const [appliedDiscount, setAppliedDiscount] = (0, react_2.useState)(null);
+    const [shippingAddress, setShippingAddress] = (0, react_2.useState)(emptyAddress);
+    const handleFormDataChange = (0, react_2.useCallback)((data) => {
+        setFormData(data);
+        onFormSubmit?.(data);
+    }, [onFormSubmit]);
+    const handleShippingChange = (0, react_2.useCallback)((option) => {
+        setSelectedShipping(option);
+        onShippingChangeProp?.(option);
+    }, [onShippingChangeProp]);
+    const handleDiscountApplied = (0, react_2.useCallback)((result) => {
+        setAppliedDiscount(result);
+        onDiscountAppliedProp?.(result);
+    }, [onDiscountAppliedProp]);
+    const handleDiscountRemoved = (0, react_2.useCallback)(() => {
+        setAppliedDiscount(null);
+    }, []);
+    // Merge static shipping prop with dynamic shipping selection
+    const effectiveShipping = (0, react_2.useMemo)(() => {
+        if (selectedShipping) {
+            return { amount: selectedShipping.amount, label: selectedShipping.name };
+        }
+        if (shippingProp) {
+            return typeof shippingProp === "string" ? { amount: shippingProp } : shippingProp;
+        }
+        return undefined;
+    }, [selectedShipping, shippingProp]);
+    // Merge static discount prop with dynamic discount
+    const effectiveDiscount = (0, react_2.useMemo)(() => {
+        if (appliedDiscount?.valid && appliedDiscount.discount_amount) {
+            return {
+                amount: appliedDiscount.discount_amount,
+                label: appliedDiscount.discount_type === "percentage" ? `${appliedDiscount.discount_value}% off` : "Discount",
+            };
+        }
+        if (discountProp) {
+            return typeof discountProp === "string" ? { amount: discountProp } : discountProp;
+        }
+        return undefined;
+    }, [appliedDiscount, discountProp]);
+    // Compute total from items + adjustments (including dynamic shipping/discount)
+    const computedTotal = (0, react_2.useMemo)(() => {
+        if (totalAmountOverride)
+            return totalAmountOverride;
+        let total = BigInt(0);
+        for (const item of items) {
+            total += (0, number_1.safeBigInt)(item.amount) * BigInt(item.quantity);
+        }
+        if (effectiveShipping?.amount)
+            total += (0, number_1.safeBigInt)(effectiveShipping.amount);
+        const taxAmt = typeof tax === "string" ? tax : tax?.amount;
+        if (taxAmt)
+            total += (0, number_1.safeBigInt)(taxAmt);
+        if (effectiveDiscount?.amount)
+            total -= (0, number_1.safeBigInt)(effectiveDiscount.amount);
+        if (summaryLines) {
+            for (const line of summaryLines)
+                total += (0, number_1.safeBigInt)(line.amount);
+        }
+        if (total < BigInt(0))
+            total = BigInt(0);
+        return total.toString();
+    }, [items, totalAmountOverride, effectiveShipping, tax, effectiveDiscount, summaryLines]);
+    // Get destination token metadata
+    const { data: tokenData } = (0, react_1.useTokenData)(destinationTokenChainId, destinationTokenAddress);
+    const tokenSymbol = tokenData?.symbol || "";
+    const tokenDecimals = tokenData?.decimals || 18;
+    // Resolve USD equivalent for non-stablecoin tokens (shown in cart summary)
+    const isStablecoin = (0, react_2.useMemo)(() => {
+        return [
+            "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913", // USDC Base
+            "0xdAC17F958D2ee523a2206206994597C13D831ec7", // USDT Ethereum
+        ].some(addr => addr.toLowerCase() === destinationTokenAddress.toLowerCase());
+    }, [destinationTokenAddress]);
+    const { anyspendQuote } = (0, useAnyspendQuote_1.useAnyspendQuote)({
+        type: "swap",
+        srcChain: 8453,
+        dstChain: destinationTokenChainId,
+        srcTokenAddress: constants_1.USDC_BASE.address,
+        dstTokenAddress: destinationTokenAddress,
+        tradeType: "EXACT_OUTPUT",
+        amount: computedTotal,
+    });
+    const usdEquivalent = (0, react_2.useMemo)(() => {
+        if (isStablecoin)
+            return null; // stablecoins already show USD-equivalent amounts
+        if (!anyspendQuote?.data?.currencyIn?.amount)
+            return null;
+        const raw = (0, number_1.formatUnits)(anyspendQuote.data.currencyIn.amount, constants_1.USDC_BASE.decimals);
+        return `$${parseFloat(raw).toFixed(2)}`;
+    }, [isStablecoin, anyspendQuote]);
+    const fingerprint = (0, AnySpendFingerprintWrapper_1.getFingerprintConfig)();
+    // Build callbackMetadata to include form data with the order
+    const checkoutFormMetadata = (0, react_2.useMemo)(() => {
+        const meta = {};
+        if (Object.keys(formData).length > 0)
+            meta.formData = formData;
+        if (selectedShipping)
+            meta.shippingOptionId = selectedShipping.id;
+        if (selectedShipping)
+            meta.shippingAmount = selectedShipping.amount;
+        if (shippingAddress.street)
+            meta.shippingAddress = shippingAddress;
+        if (appliedDiscount?.valid) {
+            meta.discountCode = appliedDiscount.discount_value;
+            meta.discountAmount = appliedDiscount.discount_amount;
+        }
+        // Extract common fields for customer enrichment
+        if (formData.email)
+            meta.customerEmail = formData.email;
+        if (formData.name)
+            meta.customerName = formData.name;
+        if (checkoutSessionId)
+            meta.checkoutSessionId = checkoutSessionId;
+        return Object.keys(meta).length > 0 ? meta : undefined;
+    }, [formData, selectedShipping, shippingAddress, appliedDiscount, checkoutSessionId]);
+    // Check if required form fields are filled
+    const isFormValid = (0, react_2.useMemo)(() => {
+        if (!formSchema)
+            return true;
+        return formSchema.fields.filter(f => f.required).every(f => formData[f.id] != null && formData[f.id] !== "");
+    }, [formSchema, formData]);
+    // Check if we have a form panel to show
+    const hasFormContent = (formSchema && formSchema.fields.length > 0) ||
+        formComponent ||
+        slots?.checkoutForm ||
+        (shippingOptions && shippingOptions.length > 0) ||
+        collectShippingAddress ||
+        enableDiscountCode;
+    return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprint, children: (0, jsx_runtime_1.jsx)(AnySpendCustomizationContext_1.AnySpendCustomizationProvider, { slots: slots, content: content, theme: theme, children: (0, jsx_runtime_1.jsx)(CheckoutLayout_1.CheckoutLayout, { mode: mode, paymentPanel: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [hasFormContent && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-6", children: [(0, jsx_runtime_1.jsx)(CheckoutFormPanel_1.CheckoutFormPanel, { formSchema: formSchema, formComponent: formComponent, shippingOptions: shippingOptions, collectShippingAddress: collectShippingAddress, enableDiscountCode: enableDiscountCode, validateDiscount: validateDiscount, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, classes: classes, formData: formData, onFormDataChange: handleFormDataChange, selectedShipping: selectedShipping, onShippingChange: handleShippingChange, appliedDiscount: appliedDiscount, onDiscountApplied: handleDiscountApplied, onDiscountRemoved: handleDiscountRemoved, shippingAddress: shippingAddress, onShippingAddressChange: setShippingAddress, checkoutFormSlot: slots?.checkoutForm }), (0, jsx_runtime_1.jsx)("div", { className: "mt-6 border-t border-gray-200 dark:border-neutral-700" })] })), (0, jsx_runtime_1.jsx)(CheckoutPaymentPanel_1.CheckoutPaymentPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: computedTotal, buttonText: buttonText, themeColor: themeColor, returnUrl: returnUrl, returnLabel: returnLabel, onSuccess: onSuccess, onError: onError, classes: classes, defaultPaymentMethod: defaultPaymentMethod, senderAddress: senderAddress, showPoints: showPoints, showOrderId: showOrderId, callbackMetadata: checkoutFormMetadata, isFormValid: isFormValid })] }), cartPanel: (0, jsx_runtime_1.jsx)(CheckoutCartPanel_1.CheckoutCartPanel, { items: items, totalAmount: computedTotal, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, organizationName: organizationName, organizationLogo: organizationLogo, classes: classes, footer: footer, shipping: effectiveShipping, tax: typeof tax === "string" ? { amount: tax } : tax, discount: effectiveDiscount, summaryLines: summaryLines, usdEquivalent: usdEquivalent }), classes: classes }) }) }));
+}

package/dist/cjs/anyspend/react/components/checkout/AnySpendCheckoutTrigger.d.ts

@@ -0,0 +1,81 @@
+import { type ReactNode } from "react";
+import type { AnySpendCheckoutClasses } from "../types/classes";
+import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "../types/customization";
+import type { CheckoutItem, CheckoutSummaryLine } from "./AnySpendCheckout";
+import { type PaymentMethod } from "./CheckoutPaymentPanel";
+export interface AnySpendCheckoutTriggerProps {
+    /** Payment recipient address (hex) */
+    recipientAddress: string;
+    /** Destination token address */
+    destinationTokenAddress: string;
+    /** Destination chain ID */
+    destinationTokenChainId: number;
+    /** Line items to display in the cart (optional — if omitted, only the payment panel is shown) */
+    items?: CheckoutItem[];
+    /** Total amount in wei — required when items are not provided */
+    totalAmount?: string;
+    /** Organization name */
+    organizationName?: string;
+    /** Organization logo URL */
+    organizationLogo?: string;
+    /** Theme color (hex) */
+    themeColor?: string;
+    /** Custom button text */
+    buttonText?: string;
+    /** Workflow ID to trigger on payment */
+    workflowId?: string;
+    /** Organization ID that owns the workflow */
+    orgId?: string;
+    /** Optional callback metadata merged into the order */
+    callbackMetadata?: {
+        /** Passed as trigger result inputs — accessible via {{root.result.inputs.*}} */
+        inputs?: Record<string, unknown>;
+    } & Record<string, unknown>;
+    /** Called on successful payment */
+    onSuccess?: (result: {
+        txHash?: string;
+        orderId?: string;
+    }) => void;
+    /** Called on payment error */
+    onError?: (error: Error) => void;
+    /** URL to redirect to after payment */
+    returnUrl?: string;
+    /** Label for the return button */
+    returnLabel?: string;
+    /** Custom class names */
+    classes?: AnySpendCheckoutClasses;
+    /** Display mode — set automatically when used inside B3DynamicModal */
+    mode?: "modal" | "page";
+    /** Custom footer for the order summary. Pass `null` to hide, or a ReactNode to replace the default. */
+    footer?: ReactNode | null;
+    /** Which payment method to expand initially. Defaults to none (all collapsed). */
+    defaultPaymentMethod?: PaymentMethod;
+    /** Optional sender (payer) address — pre-fills token balances in the crypto panel */
+    senderAddress?: string;
+    /** Render function overrides for replaceable UI elements */
+    slots?: AnySpendSlots;
+    /** String or ReactNode overrides for text/messages */
+    content?: AnySpendContent;
+    /** Structured color/theme configuration */
+    theme?: AnySpendTheme;
+    /** Shipping cost. String = amount in wei. Object = amount + custom label. */
+    shipping?: string | {
+        amount: string;
+        label?: string;
+    };
+    /** Tax amount. String = amount in wei. Object = amount + custom label + optional rate display. */
+    tax?: string | {
+        amount: string;
+        label?: string;
+        rate?: string;
+    };
+    /** Discount amount (displayed as negative). String = amount in wei. Object = amount + label + optional code. */
+    discount?: string | {
+        amount: string;
+        label?: string;
+        code?: string;
+    };
+    /** Additional summary line items (fees, tips, etc.) */
+    summaryLines?: CheckoutSummaryLine[];
+}
+export declare function AnySpendCheckoutTrigger({ recipientAddress, destinationTokenAddress, destinationTokenChainId, items, totalAmount: totalAmountOverride, organizationName, organizationLogo, themeColor, buttonText, workflowId, orgId, callbackMetadata, onSuccess, onError, returnUrl, returnLabel, classes, footer, defaultPaymentMethod, senderAddress, slots, content, theme, shipping, tax, discount, summaryLines, }: AnySpendCheckoutTriggerProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/anyspend/react/components/checkout/AnySpendCheckoutTrigger.js

@@ -0,0 +1,61 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnySpendCheckoutTrigger = AnySpendCheckoutTrigger;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("../../../../global-account/react");
+const number_1 = require("../../../../shared/utils/number");
+const cn_1 = require("../../../../shared/utils/cn");
+const react_2 = require("react");
+const AnySpendFingerprintWrapper_1 = require("../AnySpendFingerprintWrapper");
+const AnySpendCustomizationContext_1 = require("../context/AnySpendCustomizationContext");
+const CheckoutCartPanel_1 = require("./CheckoutCartPanel");
+const CheckoutPaymentPanel_1 = require("./CheckoutPaymentPanel");
+const PoweredByBranding_1 = require("./PoweredByBranding");
+function AnySpendCheckoutTrigger({ recipientAddress, destinationTokenAddress, destinationTokenChainId, items, totalAmount: totalAmountOverride, organizationName, organizationLogo, themeColor, buttonText = "Pay", workflowId, orgId, callbackMetadata, onSuccess, onError, returnUrl, returnLabel, classes, footer, defaultPaymentMethod, senderAddress, slots, content, theme, shipping, tax, discount, summaryLines, }) {
+    // Merge workflowId + orgId into callbackMetadata
+    const mergedMetadata = (0, react_2.useMemo)(() => {
+        if (!workflowId && !orgId && !callbackMetadata)
+            return undefined;
+        return {
+            ...(workflowId ? { workflowId } : {}),
+            ...(orgId ? { orgId } : {}),
+            ...callbackMetadata,
+        };
+    }, [workflowId, orgId, callbackMetadata]);
+    // Compute total from items + adjustments or use override
+    const computedTotal = (0, react_2.useMemo)(() => {
+        if (totalAmountOverride)
+            return totalAmountOverride;
+        if (!items || items.length === 0)
+            return "0";
+        let total = BigInt(0);
+        for (const item of items) {
+            total += (0, number_1.safeBigInt)(item.amount) * BigInt(item.quantity);
+        }
+        const shippingAmt = typeof shipping === "string" ? shipping : shipping?.amount;
+        if (shippingAmt)
+            total += (0, number_1.safeBigInt)(shippingAmt);
+        const taxAmt = typeof tax === "string" ? tax : tax?.amount;
+        if (taxAmt)
+            total += (0, number_1.safeBigInt)(taxAmt);
+        const discountAmt = typeof discount === "string" ? discount : discount?.amount;
+        if (discountAmt)
+            total -= (0, number_1.safeBigInt)(discountAmt);
+        if (summaryLines) {
+            for (const line of summaryLines)
+                total += (0, number_1.safeBigInt)(line.amount);
+        }
+        if (total < BigInt(0))
+            total = BigInt(0);
+        return total.toString();
+    }, [items, totalAmountOverride, shipping, tax, discount, summaryLines]);
+    // Get destination token metadata
+    const { data: tokenData } = (0, react_1.useTokenData)(destinationTokenChainId, destinationTokenAddress);
+    const tokenSymbol = tokenData?.symbol || "";
+    const tokenDecimals = tokenData?.decimals || 18;
+    const formattedTotal = (0, react_2.useMemo)(() => (0, number_1.formatTokenAmount)(BigInt(computedTotal || "0"), tokenDecimals), [computedTotal, tokenDecimals]);
+    const hasItems = items && items.length > 0;
+    const fingerprint = (0, AnySpendFingerprintWrapper_1.getFingerprintConfig)();
+    return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprint, children: (0, jsx_runtime_1.jsx)(AnySpendCustomizationContext_1.AnySpendCustomizationProvider, { slots: slots, content: content, theme: theme, children: (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-checkout-trigger flex flex-col", children: [hasItems && ((0, jsx_runtime_1.jsx)("div", { className: "border-b border-gray-200 p-5 dark:border-neutral-700", children: (0, jsx_runtime_1.jsx)(CheckoutCartPanel_1.CheckoutCartPanel, { items: items, totalAmount: computedTotal, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, organizationName: organizationName, organizationLogo: organizationLogo, classes: classes, footer: footer, shipping: typeof shipping === "string" ? { amount: shipping } : shipping, tax: typeof tax === "string" ? { amount: tax } : tax, discount: typeof discount === "string" ? { amount: discount } : discount, summaryLines: summaryLines }) })), !hasItems && ((0, jsx_runtime_1.jsx)("div", { className: "border-b border-gray-200 p-5 dark:border-neutral-700", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex items-center justify-between", classes?.cartSummary), children: [(0, jsx_runtime_1.jsx)("span", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: "Total" }), (0, jsx_runtime_1.jsxs)("span", { className: (0, cn_1.cn)("text-base font-semibold text-gray-900 dark:text-gray-100", classes?.cartTotal), children: [formattedTotal, " ", tokenSymbol] })] }), footer === undefined ? ((0, jsx_runtime_1.jsx)(PoweredByBranding_1.PoweredByBranding, { organizationName: organizationName, organizationLogo: organizationLogo, classes: classes })) : (footer)] }) })), (0, jsx_runtime_1.jsx)("div", { className: "px-2 py-3", children: (0, jsx_runtime_1.jsx)(CheckoutPaymentPanel_1.CheckoutPaymentPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: computedTotal, buttonText: buttonText, themeColor: themeColor, returnUrl: returnUrl, returnLabel: returnLabel, onSuccess: onSuccess, onError: onError, callbackMetadata: mergedMetadata, classes: classes, defaultPaymentMethod: defaultPaymentMethod, senderAddress: senderAddress }) })] }) }) }));
+}

package/dist/cjs/anyspend/react/components/checkout/CartItemRow.d.ts

@@ -0,0 +1,8 @@
+import type { CheckoutItem, AnySpendCheckoutClasses } from "./AnySpendCheckout";
+interface CartItemRowProps {
+    item: CheckoutItem;
+    formattedPrice: string;
+    classes?: AnySpendCheckoutClasses;
+}
+export declare function CartItemRow({ item, formattedPrice, classes }: CartItemRowProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/anyspend/react/components/checkout/CartItemRow.js

@@ -0,0 +1,9 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CartItemRow = CartItemRow;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../../../../shared/utils/cn");
+function CartItemRow({ item, formattedPrice, classes }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex items-start gap-3 py-3", classes?.cartItemRow), children: [item.imageUrl && ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("h-14 w-14 shrink-0 overflow-hidden rounded-lg bg-gray-100", classes?.cartItemImage), children: (0, jsx_runtime_1.jsx)("img", { src: item.imageUrl, alt: item.name, className: "h-full w-full object-cover" }) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-1 items-start justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "min-w-0 flex-1", children: [(0, jsx_runtime_1.jsx)("p", { className: (0, cn_1.cn)("text-sm font-medium text-gray-900 dark:text-gray-100", classes?.cartItemName), children: item.name }), item.description && ((0, jsx_runtime_1.jsx)("p", { className: (0, cn_1.cn)("mt-0.5 line-clamp-2 text-xs text-gray-500 dark:text-gray-400", classes?.cartItemDescription), children: item.description })), item.quantity > 1 && (0, jsx_runtime_1.jsxs)("p", { className: "mt-0.5 text-xs text-gray-400 dark:text-gray-500", children: ["Qty: ", item.quantity] }), item.metadata && Object.keys(item.metadata).length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("mt-1 flex flex-wrap gap-x-3 gap-y-0.5", classes?.cartItemMetadata), children: Object.entries(item.metadata).map(([key, value]) => ((0, jsx_runtime_1.jsxs)("span", { className: (0, cn_1.cn)("text-xs text-gray-400 dark:text-gray-500", classes?.cartItemMetadataLabel), children: [key, ":", " ", (0, jsx_runtime_1.jsx)("span", { className: (0, cn_1.cn)("text-gray-600 dark:text-gray-300", classes?.cartItemMetadataValue), children: value })] }, key))) }))] }), (0, jsx_runtime_1.jsx)("p", { className: (0, cn_1.cn)("ml-3 text-sm font-medium text-gray-900 dark:text-gray-100", classes?.cartItemPrice), children: formattedPrice })] })] }));
+}

package/dist/cjs/anyspend/react/components/checkout/CartSummary.d.ts

@@ -0,0 +1,30 @@
+import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
+import type { CheckoutSummaryLine } from "./AnySpendCheckout";
+interface CartSummaryProps {
+    /** Formatted total (final amount after all adjustments) */
+    total: string;
+    tokenSymbol?: string;
+    classes?: AnySpendCheckoutClasses;
+    /** Formatted subtotal (sum of items only — shown when adjustments exist) */
+    subtotal?: string;
+    tokenDecimals?: number;
+    shipping?: {
+        amount: string;
+        label?: string;
+    };
+    tax?: {
+        amount: string;
+        label?: string;
+        rate?: string;
+    };
+    discount?: {
+        amount: string;
+        label?: string;
+        code?: string;
+    };
+    summaryLines?: CheckoutSummaryLine[];
+    /** Formatted USD equivalent (e.g. "$5.56") — shown for non-stablecoin tokens */
+    usdEquivalent?: string | null;
+}
+export declare function CartSummary({ total, tokenSymbol, classes, subtotal, tokenDecimals, shipping, tax, discount, summaryLines, usdEquivalent, }: CartSummaryProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/anyspend/react/components/checkout/CartSummary.js

@@ -0,0 +1,20 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CartSummary = CartSummary;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../../../../shared/utils/cn");
+const number_1 = require("../../../../shared/utils/number");
+const react_1 = require("react");
+function CartSummary({ total, tokenSymbol, classes, subtotal, tokenDecimals = 18, shipping, tax, discount, summaryLines, usdEquivalent, }) {
+    const hasAdjustments = !!shipping?.amount || !!tax?.amount || !!discount?.amount || (summaryLines && summaryLines.length > 0);
+    const formattedShipping = (0, react_1.useMemo)(() => (shipping?.amount ? (0, number_1.formatTokenAmount)((0, number_1.safeBigInt)(shipping.amount), tokenDecimals) : null), [shipping?.amount, tokenDecimals]);
+    const formattedTax = (0, react_1.useMemo)(() => (tax?.amount ? (0, number_1.formatTokenAmount)((0, number_1.safeBigInt)(tax.amount), tokenDecimals) : null), [tax?.amount, tokenDecimals]);
+    const formattedDiscount = (0, react_1.useMemo)(() => (discount?.amount ? (0, number_1.formatTokenAmount)((0, number_1.safeBigInt)(discount.amount), tokenDecimals) : null), [discount?.amount, tokenDecimals]);
+    const formattedSummaryLines = (0, react_1.useMemo)(() => summaryLines?.map(line => ({
+        ...line,
+        formattedAmount: (0, number_1.formatTokenAmount)((0, number_1.safeBigInt)(line.amount), tokenDecimals),
+        isNegative: (0, number_1.safeBigInt)(line.amount) < BigInt(0),
+    })), [summaryLines, tokenDecimals]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("border-t border-gray-200 pt-3 dark:border-neutral-700", classes?.cartSummary), children: [hasAdjustments && subtotal && ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex items-center justify-between py-1", classes?.cartSubtotal), children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Subtotal" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: [subtotal, " ", tokenSymbol] })] })), formattedShipping && ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex items-center justify-between py-1", classes?.cartSummaryLine), children: [(0, jsx_runtime_1.jsx)("span", { className: (0, cn_1.cn)("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineLabel), children: shipping?.label || "Shipping" }), (0, jsx_runtime_1.jsxs)("span", { className: (0, cn_1.cn)("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineAmount), children: [formattedShipping, " ", tokenSymbol] })] })), formattedTax && ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex items-center justify-between py-1", classes?.cartSummaryLine), children: [(0, jsx_runtime_1.jsxs)("span", { className: (0, cn_1.cn)("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineLabel), children: [tax?.label || "Tax", tax?.rate && (0, jsx_runtime_1.jsxs)("span", { className: "ml-1 text-xs text-gray-400 dark:text-gray-500", children: ["(", tax.rate, ")"] })] }), (0, jsx_runtime_1.jsxs)("span", { className: (0, cn_1.cn)("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineAmount), children: [formattedTax, " ", tokenSymbol] })] })), formattedDiscount && ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex items-center justify-between py-1", classes?.cartDiscount), children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: [discount?.label || "Discount", discount?.code && ((0, jsx_runtime_1.jsx)("span", { className: "ml-1 rounded bg-green-50 px-1.5 py-0.5 text-xs font-medium text-green-600 dark:bg-green-900/20 dark:text-green-400", children: discount.code }))] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-sm font-medium text-green-600 dark:text-green-400", children: ["-", formattedDiscount, " ", tokenSymbol] })] })), formattedSummaryLines?.map(line => ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex items-center justify-between py-1", classes?.cartSummaryLine), children: [(0, jsx_runtime_1.jsxs)("span", { className: (0, cn_1.cn)("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineLabel), children: [line.label, line.description && ((0, jsx_runtime_1.jsxs)("span", { className: "ml-1 text-xs text-gray-400 dark:text-gray-500", children: ["(", line.description, ")"] }))] }), (0, jsx_runtime_1.jsxs)("span", { className: (0, cn_1.cn)("text-sm", line.isNegative ? "font-medium text-green-600 dark:text-green-400" : "text-gray-500 dark:text-gray-400", classes?.cartSummaryLineAmount), children: [line.formattedAmount, " ", tokenSymbol] })] }, line.label))), (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex flex-col", hasAdjustments && "mt-1 border-t border-gray-100 pt-2 dark:border-neutral-800"), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: "Total" }), (0, jsx_runtime_1.jsxs)("span", { className: (0, cn_1.cn)("text-base font-semibold text-gray-900 dark:text-gray-100", classes?.cartTotal), children: [total, " ", tokenSymbol] })] }), usdEquivalent && ((0, jsx_runtime_1.jsx)("div", { className: "flex justify-end", children: (0, jsx_runtime_1.jsxs)("span", { className: "text-xs text-gray-400 dark:text-gray-500", children: ["~", usdEquivalent, " USD"] }) }))] })] }));
+}

package/dist/cjs/anyspend/react/components/checkout/CheckoutCartPanel.d.ts

@@ -0,0 +1,32 @@
+import { type ReactNode } from "react";
+import type { CheckoutItem, CheckoutSummaryLine, AnySpendCheckoutClasses } from "./AnySpendCheckout";
+interface CheckoutCartPanelProps {
+    items: CheckoutItem[];
+    totalAmount: string;
+    tokenSymbol?: string;
+    tokenDecimals?: number;
+    organizationName?: string;
+    organizationLogo?: string;
+    classes?: AnySpendCheckoutClasses;
+    /** Custom footer. Pass `null` to hide, or a ReactNode to replace the default PoweredByBranding. */
+    footer?: ReactNode | null;
+    shipping?: {
+        amount: string;
+        label?: string;
+    };
+    tax?: {
+        amount: string;
+        label?: string;
+        rate?: string;
+    };
+    discount?: {
+        amount: string;
+        label?: string;
+        code?: string;
+    };
+    summaryLines?: CheckoutSummaryLine[];
+    /** Formatted USD equivalent (e.g. "$5.56") — shown for non-stablecoin tokens */
+    usdEquivalent?: string | null;
+}
+export declare function CheckoutCartPanel({ items, totalAmount, tokenSymbol, tokenDecimals, organizationName, organizationLogo, classes, footer, shipping, tax, discount, summaryLines, usdEquivalent, }: CheckoutCartPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/anyspend/react/components/checkout/CheckoutCartPanel.js

@@ -0,0 +1,27 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckoutCartPanel = CheckoutCartPanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../../../../shared/utils/cn");
+const number_1 = require("../../../../shared/utils/number");
+const react_1 = require("react");
+const CartItemRow_1 = require("./CartItemRow");
+const CartSummary_1 = require("./CartSummary");
+const PoweredByBranding_1 = require("./PoweredByBranding");
+function CheckoutCartPanel({ items, totalAmount, tokenSymbol = "", tokenDecimals = 18, organizationName, organizationLogo, classes, footer, shipping, tax, discount, summaryLines, usdEquivalent, }) {
+    const formattedTotal = (0, react_1.useMemo)(() => (0, number_1.formatTokenAmount)((0, number_1.safeBigInt)(totalAmount), tokenDecimals), [totalAmount, tokenDecimals]);
+    // Compute subtotal from items only (before adjustments)
+    const formattedSubtotal = (0, react_1.useMemo)(() => {
+        let subtotal = BigInt(0);
+        for (const item of items) {
+            subtotal += (0, number_1.safeBigInt)(item.amount) * BigInt(item.quantity);
+        }
+        return (0, number_1.formatTokenAmount)(subtotal, tokenDecimals);
+    }, [items, tokenDecimals]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-cart-panel flex flex-col", classes?.cartPanel), children: [(0, jsx_runtime_1.jsx)("h2", { className: (0, cn_1.cn)("anyspend-cart-title mb-4 text-lg font-semibold text-gray-900 dark:text-gray-100", classes?.cartTitle), children: "Order Summary" }), (0, jsx_runtime_1.jsx)("div", { className: "anyspend-cart-items divide-y divide-gray-100 dark:divide-gray-800", children: items.map((item, index) => {
+                    const itemTotal = (0, number_1.safeBigInt)(item.amount) * BigInt(item.quantity);
+                    const formattedPrice = `${(0, number_1.formatTokenAmount)(itemTotal, tokenDecimals)} ${tokenSymbol}`;
+                    return (0, jsx_runtime_1.jsx)(CartItemRow_1.CartItemRow, { item: item, formattedPrice: formattedPrice, classes: classes }, item.id || index);
+                }) }), (0, jsx_runtime_1.jsx)(CartSummary_1.CartSummary, { total: formattedTotal, tokenSymbol: tokenSymbol, classes: classes, subtotal: formattedSubtotal, tokenDecimals: tokenDecimals, shipping: shipping, tax: tax, discount: discount, summaryLines: summaryLines, usdEquivalent: usdEquivalent }), footer === undefined ? ((0, jsx_runtime_1.jsx)(PoweredByBranding_1.PoweredByBranding, { organizationName: organizationName, organizationLogo: organizationLogo, classes: classes })) : (footer)] }));
+}

package/dist/cjs/anyspend/react/components/checkout/CheckoutFormField.d.ts

@@ -0,0 +1,10 @@
+import type { CheckoutFormField as FormFieldType } from "../../../types/forms";
+interface CheckoutFormFieldProps {
+    field: FormFieldType;
+    value: unknown;
+    onChange: (id: string, value: unknown) => void;
+    error?: string;
+    className?: string;
+}
+export declare function CheckoutFormFieldComponent({ field, value, onChange, error, className }: CheckoutFormFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/anyspend/react/components/checkout/CheckoutFormField.js

@@ -0,0 +1,31 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckoutFormFieldComponent = CheckoutFormFieldComponent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../../../../shared/utils/cn");
+const inputBaseClass = "w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400 outline-none transition-colors focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-neutral-600 dark:bg-neutral-800 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus:border-blue-400";
+const labelClass = "mb-1 block text-xs font-medium text-gray-700 dark:text-gray-300";
+function CheckoutFormFieldComponent({ field, value, onChange, error, className }) {
+    const handleChange = (val) => {
+        onChange(field.id, val);
+    };
+    const renderField = () => {
+        switch (field.type) {
+            case "text":
+            case "email":
+            case "phone":
+            case "number":
+                return ((0, jsx_runtime_1.jsx)("input", { type: field.type === "phone" ? "tel" : field.type, value: value || "", onChange: e => handleChange(e.target.value), placeholder: field.placeholder, required: field.required, className: (0, cn_1.cn)("anyspend-form-input", inputBaseClass, error && "border-red-400 focus:border-red-500 focus:ring-red-500"), minLength: field.validation?.minLength, maxLength: field.validation?.maxLength, min: field.validation?.min, max: field.validation?.max, pattern: field.validation?.pattern }));
+            case "textarea":
+                return ((0, jsx_runtime_1.jsx)("textarea", { value: value || "", onChange: e => handleChange(e.target.value), placeholder: field.placeholder, required: field.required, rows: 3, className: (0, cn_1.cn)("anyspend-form-textarea", inputBaseClass, "resize-y", error && "border-red-400 focus:border-red-500 focus:ring-red-500"), minLength: field.validation?.minLength, maxLength: field.validation?.maxLength }));
+            case "select":
+                return ((0, jsx_runtime_1.jsxs)("select", { value: value || "", onChange: e => handleChange(e.target.value), required: field.required, className: (0, cn_1.cn)("anyspend-form-select", inputBaseClass, "cursor-pointer", error && "border-red-400"), children: [(0, jsx_runtime_1.jsx)("option", { value: "", children: field.placeholder || "Select..." }), field.options?.map(opt => ((0, jsx_runtime_1.jsx)("option", { value: opt.value, children: opt.label }, opt.value)))] }));
+            case "checkbox":
+                return ((0, jsx_runtime_1.jsxs)("label", { className: "anyspend-form-checkbox flex cursor-pointer items-center gap-2", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: !!value, onChange: e => handleChange(e.target.checked), className: "h-4 w-4 rounded border-gray-300 text-blue-500 focus:ring-blue-500" }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: field.placeholder || field.label })] }));
+            default:
+                return ((0, jsx_runtime_1.jsx)("input", { type: "text", value: value || "", onChange: e => handleChange(e.target.value), placeholder: field.placeholder, required: field.required, className: (0, cn_1.cn)("anyspend-form-input", inputBaseClass, error && "border-red-400") }));
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-form-field space-y-1", className), "data-field-id": field.id, "data-field-type": field.type, children: [field.type !== "checkbox" && ((0, jsx_runtime_1.jsxs)("label", { className: (0, cn_1.cn)("anyspend-form-label", labelClass), children: [field.label, field.required && (0, jsx_runtime_1.jsx)("span", { className: "ml-0.5 text-red-500", children: "*" })] })), renderField(), error && (0, jsx_runtime_1.jsx)("p", { className: "anyspend-form-error text-xs text-red-500", children: error })] }));
+}

package/dist/cjs/anyspend/react/components/checkout/CheckoutFormPanel.d.ts

@@ -0,0 +1,39 @@
+import type { CheckoutFormSchema, CheckoutFormComponentProps, AddressData, ShippingOption, DiscountResult } from "../../../types/forms";
+import type { AnySpendCheckoutClasses } from "../types/classes";
+interface CheckoutFormPanelProps {
+    /** JSON form definition */
+    formSchema?: CheckoutFormSchema | null;
+    /** Custom React component to render instead of schema-based form */
+    formComponent?: React.ComponentType<CheckoutFormComponentProps>;
+    /** Shipping options */
+    shippingOptions?: ShippingOption[] | null;
+    /** Whether to collect a shipping address */
+    collectShippingAddress?: boolean;
+    /** Enable discount code input */
+    enableDiscountCode?: boolean;
+    /** Validate a discount code */
+    validateDiscount?: (code: string) => Promise<DiscountResult>;
+    /** Token info for display */
+    tokenSymbol?: string;
+    tokenDecimals?: number;
+    /** CSS class overrides */
+    classes?: AnySpendCheckoutClasses;
+    /** Current form data (lifted state) */
+    formData: Record<string, unknown>;
+    /** Update form data */
+    onFormDataChange: (data: Record<string, unknown>) => void;
+    /** Shipping selection */
+    selectedShipping: ShippingOption | null;
+    onShippingChange: (option: ShippingOption) => void;
+    /** Discount state */
+    appliedDiscount: DiscountResult | null;
+    onDiscountApplied: (result: DiscountResult) => void;
+    onDiscountRemoved: () => void;
+    /** Shipping address */
+    shippingAddress: AddressData;
+    onShippingAddressChange: (address: AddressData) => void;
+    /** Slot overrides */
+    checkoutFormSlot?: (props: CheckoutFormComponentProps) => React.ReactNode;
+}
+export declare function CheckoutFormPanel({ formSchema, formComponent: FormComponent, shippingOptions, collectShippingAddress, enableDiscountCode, validateDiscount, tokenSymbol, tokenDecimals, classes, formData, onFormDataChange, selectedShipping, onShippingChange, appliedDiscount, onDiscountApplied, onDiscountRemoved, shippingAddress, onShippingAddressChange, checkoutFormSlot, }: CheckoutFormPanelProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/cjs/anyspend/react/components/checkout/CheckoutFormPanel.js

@@ -0,0 +1,75 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckoutFormPanel = CheckoutFormPanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../../../../shared/utils/cn");
+const react_1 = require("react");
+const CheckoutFormField_1 = require("./CheckoutFormField");
+const AddressForm_1 = require("./AddressForm");
+const ShippingSelector_1 = require("./ShippingSelector");
+const DiscountCodeInput_1 = require("./DiscountCodeInput");
+const emptyAddress = { street: "", city: "", state: "", zip: "", country: "" };
+function CheckoutFormPanel({ formSchema, formComponent: FormComponent, shippingOptions, collectShippingAddress, enableDiscountCode, validateDiscount, tokenSymbol, tokenDecimals, classes, formData, onFormDataChange, selectedShipping, onShippingChange, appliedDiscount, onDiscountApplied, onDiscountRemoved, shippingAddress, onShippingAddressChange, checkoutFormSlot, }) {
+    const [errors, setErrors] = (0, react_1.useState)({});
+    const hasFormFields = formSchema && formSchema.fields.length > 0;
+    const hasShipping = shippingOptions && shippingOptions.length > 0;
+    const hasAnyContent = hasFormFields || FormComponent || checkoutFormSlot || hasShipping || collectShippingAddress || enableDiscountCode;
+    // All hooks must be called before any early returns
+    const formDataRef = (0, react_1.useRef)(formData);
+    formDataRef.current = formData;
+    const handleFieldChange = (0, react_1.useCallback)((id, value) => {
+        onFormDataChange({ ...formDataRef.current, [id]: value });
+        setErrors(prev => {
+            if (!prev[id])
+                return prev;
+            const next = { ...prev };
+            delete next[id];
+            return next;
+        });
+    }, [onFormDataChange]);
+    const handleFormSubmit = (0, react_1.useCallback)((data) => {
+        onFormDataChange(data);
+    }, [onFormDataChange]);
+    const handleValidationChange = (0, react_1.useCallback)((_isValid) => {
+        // Validation is handled internally via errors state
+    }, []);
+    const handleDiscountApply = (0, react_1.useCallback)(async (code) => {
+        if (!validateDiscount) {
+            return { valid: false, error: "Discount validation not available" };
+        }
+        const result = await validateDiscount(code);
+        if (result.valid) {
+            onDiscountApplied(result);
+        }
+        return result;
+    }, [validateDiscount, onDiscountApplied]);
+    // Separate address fields from regular fields
+    const { regularFields, addressFields } = (0, react_1.useMemo)(() => {
+        if (!formSchema)
+            return { regularFields: [], addressFields: [] };
+        return {
+            regularFields: formSchema.fields.filter(f => f.type !== "address"),
+            addressFields: formSchema.fields.filter(f => f.type === "address"),
+        };
+    }, [formSchema]);
+    if (!hasAnyContent)
+        return null;
+    // Shared shipping + discount section
+    const shippingAndDiscount = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [hasShipping && shippingOptions && ((0, jsx_runtime_1.jsx)(ShippingSelector_1.ShippingSelector, { options: shippingOptions, selectedId: selectedShipping?.id || null, onSelect: onShippingChange, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals })), enableDiscountCode && validateDiscount && ((0, jsx_runtime_1.jsx)(DiscountCodeInput_1.DiscountCodeInput, { onApply: handleDiscountApply, appliedDiscount: appliedDiscount, onRemove: onDiscountRemoved, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals }))] }));
+    // Render custom form slot if provided
+    if (checkoutFormSlot) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-form-panel space-y-4", classes?.formPanel), children: [(0, jsx_runtime_1.jsx)("div", { className: "anyspend-form-slot", children: checkoutFormSlot({
+                        onSubmit: handleFormSubmit,
+                        onValidationChange: handleValidationChange,
+                        formData,
+                        setFormData: onFormDataChange,
+                    }) }), shippingAndDiscount] }));
+    }
+    // Render custom form component if provided
+    if (FormComponent) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-form-panel space-y-4", classes?.formPanel), children: [(0, jsx_runtime_1.jsx)("div", { className: "anyspend-form-component", children: (0, jsx_runtime_1.jsx)(FormComponent, { onSubmit: handleFormSubmit, onValidationChange: handleValidationChange, formData: formData, setFormData: onFormDataChange }) }), shippingAndDiscount] }));
+    }
+    // Schema-based form rendering
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-form-panel space-y-4", classes?.formPanel), children: [regularFields.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "anyspend-form-fields space-y-3", children: regularFields.map(field => ((0, jsx_runtime_1.jsx)(CheckoutFormField_1.CheckoutFormFieldComponent, { field: field, value: formData[field.id], onChange: handleFieldChange, error: errors[field.id] }, field.id))) })), addressFields.map(field => ((0, jsx_runtime_1.jsxs)("div", { className: "anyspend-form-address space-y-2", children: [(0, jsx_runtime_1.jsx)("h3", { className: "anyspend-form-address-title text-sm font-semibold text-gray-900 dark:text-gray-100", children: field.label }), (0, jsx_runtime_1.jsx)(AddressForm_1.AddressForm, { value: formData[field.id] || emptyAddress, onChange: addr => handleFieldChange(field.id, addr), required: field.required })] }, field.id))), collectShippingAddress && addressFields.length === 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "anyspend-shipping-address space-y-2", children: [(0, jsx_runtime_1.jsx)("h3", { className: "anyspend-shipping-address-title text-sm font-semibold text-gray-900 dark:text-gray-100", children: "Shipping Address" }), (0, jsx_runtime_1.jsx)(AddressForm_1.AddressForm, { value: shippingAddress, onChange: onShippingAddressChange, required: true })] })), shippingAndDiscount] }));
+}

package/dist/cjs/anyspend/react/components/checkout/CheckoutLayout.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
+interface CheckoutLayoutProps {
+    mode: "page" | "embedded";
+    paymentPanel: ReactNode;
+    cartPanel: ReactNode;
+    classes?: AnySpendCheckoutClasses;
+}
+export declare function CheckoutLayout({ mode, paymentPanel, cartPanel, classes }: CheckoutLayoutProps): import("react/jsx-runtime").JSX.Element;
+export {};