@b3dotfun/sdk 0.1.2 → 0.1.5

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

@@ -17,7 +17,7 @@ function PanelOnrampPayment(props) {
     return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: (0, jsx_runtime_1.jsx)(PanelOnrampPaymentInner, { ...props }) }));
 }
 function PanelOnrampPaymentInner(props) {
-    const { srcAmountOnRamp, recipientAddress, isBuyMode, destinationTokenChainId, destinationTokenAddress, selectedDstChainId, selectedDstToken, anyspendQuote, globalAddress, onOrderCreated, onBack, orderType, nft, tournament, payload, recipientEnsName, recipientImageUrl, } = props;
+    const { srcAmountOnRamp, recipientAddress, isBuyMode, destinationTokenChainId, destinationTokenAddress, selectedDstChainId, selectedDstToken, anyspendQuote, globalAddress, onOrderCreated, onBack, orderType, nft, tournament, payload, recipientEnsName, recipientImageUrl, classes, } = props;
     const { geoData, coinbaseOnrampOptions, coinbaseAvailablePaymentMethods, stripeOnrampSupport, stripeWeb2Support, isLoading: isLoadingGeoOnramp, } = (0, react_1.useGeoOnrampOptions)(srcAmountOnRamp);
     const isLoading = isLoadingGeoOnramp;
     const { createOrder, isCreatingOrder } = (0, react_1.useAnyspendCreateOnrampOrder)({
@@ -87,20 +87,24 @@ function PanelOnrampPaymentInner(props) {
             react_2.toast.error("Failed to create order: " + err.message);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-full max-w-[460px] flex-col gap-6 px-5 pt-5", children: [(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { className: "-mb-3 text-lg font-semibold", children: "Order summary" }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-background border-b3-react-border flex flex-col gap-3 rounded-lg border p-4", children: [recipientAddress && ((0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: false, animate: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: classes?.container || "mx-auto flex w-full max-w-[460px] flex-col gap-6 px-5 pt-5", children: [(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { className: classes?.summaryTitle || "-mb-3 text-lg font-semibold", children: "Order summary" }), (0, jsx_runtime_1.jsxs)("div", { className: classes?.summaryCard ||
+                            "bg-b3-react-background border-b3-react-border flex flex-col gap-3 rounded-lg border p-4", children: [recipientAddress && ((0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: false, animate: {
                                     opacity: 1,
                                     y: 0,
                                     filter: "blur(0px)",
-                                }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-b3-react-foreground/60", children: orderType === "swap"
+                                }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: classes?.summaryRow || "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("p", { className: classes?.summaryLabel || "text-b3-react-foreground/60", children: orderType === "swap"
                                             ? "Recipient"
                                             : orderType === "mint_nft"
                                                 ? "Receive NFT at"
                                                 : orderType === "join_tournament"
                                                     ? "Join for"
-                                                    : "Recipient" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [recipientImageUrl && ((0, jsx_runtime_1.jsx)("img", { src: recipientImageUrl, alt: recipientImageUrl, className: "bg-b3-react-foreground size-7 rounded-full object-cover opacity-100" })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-end gap-1", children: [recipientEnsName && (0, jsx_runtime_1.jsxs)("span", { className: "text-b3-react-foreground/80", children: ["@", recipientEnsName] }), (0, jsx_runtime_1.jsx)("span", { className: "text-b3-react-foreground/80", children: (0, centerTruncate_1.default)(recipientAddress) })] })] })] })), (0, jsx_runtime_1.jsx)("div", { className: "border-b3-react-border border-t pt-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-b3-react-foreground font-semibold", children: "Amount" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-end gap-0.5", children: [(0, jsx_runtime_1.jsxs)("p", { className: "text-b3-react-foreground hover:text-b3-react-foreground/80 cursor-pointer text-xl font-semibold transition-colors", onClick: onBack, children: ["$", parseFloat(srcAmountOnRamp).toFixed(2)] }), anyspendQuote?.data?.fee?.type === "standard_fee" &&
+                                                    : "Recipient" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [recipientImageUrl && ((0, jsx_runtime_1.jsx)("img", { src: recipientImageUrl, alt: recipientImageUrl, className: "bg-b3-react-foreground size-7 rounded-full object-cover opacity-100" })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-end gap-1", children: [recipientEnsName && ((0, jsx_runtime_1.jsxs)("span", { className: classes?.summaryValue || "text-b3-react-foreground/80", children: ["@", recipientEnsName] })), (0, jsx_runtime_1.jsx)("span", { className: classes?.summaryValue || "text-b3-react-foreground/80", children: (0, centerTruncate_1.default)(recipientAddress) })] })] })] })), (0, jsx_runtime_1.jsx)("div", { className: classes?.summaryDivider || "border-b3-react-border border-t pt-3", children: (0, jsx_runtime_1.jsxs)("div", { className: classes?.amountRow || "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("p", { className: classes?.summaryLabel || "text-b3-react-foreground font-semibold", children: "Amount" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-end gap-0.5", children: [(0, jsx_runtime_1.jsxs)("p", { className: classes?.amountValue ||
+                                                        "text-b3-react-foreground hover:text-b3-react-foreground/80 cursor-pointer text-xl font-semibold transition-colors", onClick: onBack, children: ["$", parseFloat(srcAmountOnRamp).toFixed(2)] }), anyspendQuote?.data?.fee?.type === "standard_fee" &&
                                                     anyspendQuote.data.currencyIn?.amountUsd &&
                                                     anyspendQuote.data.fee.finalFeeBps > 0 && ((0, jsx_runtime_1.jsxs)("p", { className: "text-b3-react-foreground/60 text-xs", children: ["incl. $", ((Number(anyspendQuote.data.currencyIn.amountUsd) * anyspendQuote.data.fee.finalFeeBps) /
-                                                            10000).toFixed(2), " ", "fee"] }))] })] }) })] })] }), isCreatingOrder ? ((0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-background border-b3-react-border flex items-center justify-center gap-3 rounded-lg border p-6", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/70", children: "Creating onramp order..." })] })) : isLoading ? ((0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-background border-b3-react-border flex items-center justify-center gap-3 rounded-lg border p-6", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/70", children: "Loading payment options..." })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-3 flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-lg font-semibold", children: "Payment method" }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1", children: coinbaseAvailablePaymentMethods.length > 0 &&
+                                                            10000).toFixed(2), " ", "fee"] }))] })] }) })] })] }), isCreatingOrder ? ((0, jsx_runtime_1.jsxs)("div", { className: classes?.loadingContainer ||
+                    "bg-b3-react-background border-b3-react-border flex items-center justify-center gap-3 rounded-lg border p-6", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: classes?.loadingSpinner || "h-4 w-4 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { className: classes?.loadingText || "text-as-primary/70", children: "Creating onramp order..." })] })) : isLoading ? ((0, jsx_runtime_1.jsxs)("div", { className: classes?.loadingContainer ||
+                    "bg-b3-react-background border-b3-react-border flex items-center justify-center gap-3 rounded-lg border p-6", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: classes?.loadingSpinner || "h-4 w-4 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { className: classes?.loadingText || "text-as-primary/70", children: "Loading payment options..." })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-3 flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("h2", { className: classes?.paymentMethodTitle || "text-lg font-semibold", children: "Payment method" }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1", children: coinbaseAvailablePaymentMethods.length > 0 &&
                                     (() => {
                                         const hasCard = coinbaseAvailablePaymentMethods.some(m => m.id === "CARD");
                                         const hasApplePay = coinbaseAvailablePaymentMethods.some(m => m.id === "APPLE_PAY");
@@ -109,6 +113,15 @@ function PanelOnrampPaymentInner(props) {
                                     })() })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3", children: [coinbaseAvailablePaymentMethods.length > 0 &&
                                 (() => {
                                     const method = coinbaseAvailablePaymentMethods[0];
-                                    return ((0, jsx_runtime_1.jsxs)("button", { onClick: () => handlePaymentMethodClick("coinbase", method.id), disabled: isCreatingOrder, className: "bg-b3-react-background border-b3-react-border hover:border-as-brand disabled:hover:border-b3-react-border group flex w-full items-center justify-between gap-4 rounded-xl border p-5 transition-all duration-200 hover:shadow-md disabled:cursor-not-allowed disabled:opacity-50", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-blue-50", children: (0, jsx_runtime_1.jsx)("img", { src: "https://cdn.b3.fun/coinbase-wordmark-blue.svg", alt: "Coinbase", className: "h-6" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start text-left", children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-b3-react-foreground text-lg font-semibold", children: "Coinbase Pay" }), (0, jsx_runtime_1.jsxs)("p", { className: "text-b3-react-foreground/60 text-sm", children: [method.id === "CARD" && "Debit card, bank account, or Coinbase Account", method.id === "FIAT_WALLET" && "Pay with your Coinbase account balance", method.id === "APPLE_PAY" && "Quick payment with Apple Pay", method.id === "ACH_BANK_ACCOUNT" && "Direct bank account transfer"] }), (0, jsx_runtime_1.jsx)("div", { className: "mt-1 flex items-center gap-1", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium text-green-600", children: "Free" }) })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "text-b3-react-foreground/40 group-hover:text-b3-react-foreground/60 h-5 w-5 transition-colors" })] }));
-                                })(), stripeOnrampSupport && ((0, jsx_runtime_1.jsxs)("button", { onClick: () => handlePaymentMethodClick("stripe"), className: "bg-b3-react-background border-b3-react-border hover:border-as-brand group flex w-full items-center justify-between gap-4 rounded-xl border p-5 transition-all duration-200 hover:shadow-md", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-purple-50", children: (0, jsx_runtime_1.jsx)("img", { src: "https://raw.githubusercontent.com/stripe/stripe.github.io/455f506a628dc3f6c505e3001db45a64e29e9fc3/images/stripe-logo.svg", alt: "Stripe", className: "h-5" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start text-left", children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-b3-react-foreground text-lg font-semibold", children: "Credit/Debit Card" }), (0, jsx_runtime_1.jsx)("p", { className: "text-b3-react-foreground/60 text-sm", children: "Pay via Stripe checkout" }), stripeWeb2Support?.isSupport && stripeWeb2Support.formattedFeeUsd && ((0, jsx_runtime_1.jsx)("div", { className: "mt-1", children: (0, jsx_runtime_1.jsxs)("span", { className: "text-xs text-gray-500", children: ["$", Number(stripeWeb2Support.formattedFeeUsd).toFixed(2), " fee"] }) }))] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "text-b3-react-foreground/40 group-hover:text-b3-react-foreground/60 h-5 w-5 transition-colors" })] })), stripeWeb2Support.isSupport && ((0, jsx_runtime_1.jsxs)("button", { onClick: () => handlePaymentMethodClick("stripe-web2"), className: "bg-b3-react-background border-b3-react-border hover:border-as-brand group flex w-full items-center justify-between gap-4 rounded-xl border p-5 transition-all duration-200 hover:shadow-md", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-purple-50", children: (0, jsx_runtime_1.jsx)("img", { src: "https://raw.githubusercontent.com/stripe/stripe.github.io/455f506a628dc3f6c505e3001db45a64e29e9fc3/images/stripe-logo.svg", alt: "Stripe", className: "h-5" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start text-left", children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-b3-react-foreground text-lg font-semibold", children: "Quick Pay" }), (0, jsx_runtime_1.jsx)("p", { className: "text-b3-react-foreground/60 text-sm", children: "Credit or debit card" }), stripeWeb2Support.formattedFeeUsd && ((0, jsx_runtime_1.jsx)("div", { className: "mt-1", children: (0, jsx_runtime_1.jsxs)("span", { className: "text-xs text-gray-500", children: ["$", Number(stripeWeb2Support.formattedFeeUsd).toFixed(2), " fee"] }) }))] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "text-b3-react-foreground/40 group-hover:text-b3-react-foreground/60 h-5 w-5 transition-colors" })] })), (0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "link", onClick: onBack, className: "text-b3-react-foreground/70 hover:text-b3-react-foreground/90 mt-2 w-full", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "mr-2 h-4 w-4" }), "Back"] })] })] }))] }));
+                                    return ((0, jsx_runtime_1.jsxs)("button", { onClick: () => handlePaymentMethodClick("coinbase", method.id), disabled: isCreatingOrder, className: classes?.paymentOption ||
+                                            "bg-b3-react-background border-b3-react-border hover:border-as-brand disabled:hover:border-b3-react-border group flex w-full items-center justify-between gap-4 rounded-xl border p-5 transition-all duration-200 hover:shadow-md disabled:cursor-not-allowed disabled:opacity-50", children: [(0, jsx_runtime_1.jsxs)("div", { className: classes?.paymentOptionContent || "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: classes?.paymentOptionIcon ||
+                                                            "flex h-12 w-12 items-center justify-center rounded-full bg-blue-50", children: (0, jsx_runtime_1.jsx)("img", { src: "https://cdn.b3.fun/coinbase-wordmark-blue.svg", alt: "Coinbase", className: "h-6" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start text-left", children: [(0, jsx_runtime_1.jsx)("h4", { className: classes?.paymentOptionTitle || "text-b3-react-foreground text-lg font-semibold", children: "Coinbase Pay" }), (0, jsx_runtime_1.jsxs)("p", { className: classes?.paymentOptionDescription || "text-b3-react-foreground/60 text-sm", children: [method.id === "CARD" && "Debit card, bank account, or Coinbase Account", method.id === "FIAT_WALLET" && "Pay with your Coinbase account balance", method.id === "APPLE_PAY" && "Quick payment with Apple Pay", method.id === "ACH_BANK_ACCOUNT" && "Direct bank account transfer"] }), (0, jsx_runtime_1.jsx)("div", { className: "mt-1 flex items-center gap-1", children: (0, jsx_runtime_1.jsx)("span", { className: classes?.paymentOptionFee || "text-xs font-medium text-green-600", children: "Free" }) })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: classes?.paymentOptionChevron ||
+                                                    "text-b3-react-foreground/40 group-hover:text-b3-react-foreground/60 h-5 w-5 transition-colors" })] }));
+                                })(), stripeOnrampSupport && ((0, jsx_runtime_1.jsxs)("button", { onClick: () => handlePaymentMethodClick("stripe"), className: classes?.paymentOption ||
+                                    "bg-b3-react-background border-b3-react-border hover:border-as-brand group flex w-full items-center justify-between gap-4 rounded-xl border p-5 transition-all duration-200 hover:shadow-md", children: [(0, jsx_runtime_1.jsxs)("div", { className: classes?.paymentOptionContent || "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: classes?.paymentOptionIcon ||
+                                                    "flex h-12 w-12 items-center justify-center rounded-full bg-purple-50", children: (0, jsx_runtime_1.jsx)("img", { src: "https://raw.githubusercontent.com/stripe/stripe.github.io/455f506a628dc3f6c505e3001db45a64e29e9fc3/images/stripe-logo.svg", alt: "Stripe", className: "h-5" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start text-left", children: [(0, jsx_runtime_1.jsx)("h4", { className: classes?.paymentOptionTitle || "text-b3-react-foreground text-lg font-semibold", children: "Credit/Debit Card" }), (0, jsx_runtime_1.jsx)("p", { className: classes?.paymentOptionDescription || "text-b3-react-foreground/60 text-sm", children: "Pay via Stripe checkout" }), stripeWeb2Support?.isSupport && stripeWeb2Support.formattedFeeUsd && ((0, jsx_runtime_1.jsx)("div", { className: "mt-1", children: (0, jsx_runtime_1.jsxs)("span", { className: classes?.paymentOptionFee || "text-xs text-gray-500", children: ["$", Number(stripeWeb2Support.formattedFeeUsd).toFixed(2), " fee"] }) }))] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: classes?.paymentOptionChevron ||
+                                            "text-b3-react-foreground/40 group-hover:text-b3-react-foreground/60 h-5 w-5 transition-colors" })] })), stripeWeb2Support.isSupport && ((0, jsx_runtime_1.jsxs)("button", { onClick: () => handlePaymentMethodClick("stripe-web2"), className: classes?.paymentOption ||
+                                    "bg-b3-react-background border-b3-react-border hover:border-as-brand group flex w-full items-center justify-between gap-4 rounded-xl border p-5 transition-all duration-200 hover:shadow-md", children: [(0, jsx_runtime_1.jsxs)("div", { className: classes?.paymentOptionContent || "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: classes?.paymentOptionIcon ||
+                                                    "flex h-12 w-12 items-center justify-center rounded-full bg-purple-50", children: (0, jsx_runtime_1.jsx)("img", { src: "https://raw.githubusercontent.com/stripe/stripe.github.io/455f506a628dc3f6c505e3001db45a64e29e9fc3/images/stripe-logo.svg", alt: "Stripe", className: "h-5" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start text-left", children: [(0, jsx_runtime_1.jsx)("h4", { className: classes?.paymentOptionTitle || "text-b3-react-foreground text-lg font-semibold", children: "Quick Pay" }), (0, jsx_runtime_1.jsx)("p", { className: classes?.paymentOptionDescription || "text-b3-react-foreground/60 text-sm", children: "Credit or debit card" }), stripeWeb2Support.formattedFeeUsd && ((0, jsx_runtime_1.jsx)("div", { className: "mt-1", children: (0, jsx_runtime_1.jsxs)("span", { className: classes?.paymentOptionFee || "text-xs text-gray-500", children: ["$", Number(stripeWeb2Support.formattedFeeUsd).toFixed(2), " fee"] }) }))] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: classes?.paymentOptionChevron ||
+                                            "text-b3-react-foreground/40 group-hover:text-b3-react-foreground/60 h-5 w-5 transition-colors" })] })), (0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "link", onClick: onBack, className: classes?.backButton || "text-b3-react-foreground/70 hover:text-b3-react-foreground/90 mt-2 w-full", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "mr-2 h-4 w-4" }), "Back"] })] })] }))] }));
 }

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

@@ -1,6 +1,8 @@
+import type { PointsDetailPanelClasses } from "../types/classes";
 interface PointsDetailPanelProps {
     pointsAmount?: number;
     onBack: () => void;
+    classes?: PointsDetailPanelClasses;
 }
-export declare function PointsDetailPanel({ pointsAmount, onBack }: PointsDetailPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function PointsDetailPanel({ pointsAmount, onBack, classes }: PointsDetailPanelProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -8,6 +8,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("../../../../global-account/react");
 const cn_1 = require("../../../../shared/utils/cn");
 const link_1 = __importDefault(require("next/link"));
-function PointsDetailPanel({ pointsAmount = 0, onBack }) {
-    return ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-4 px-5", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-4 text-center", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-as-primary text-xl font-bold", children: "Earn Points with Every Swap" }), (0, jsx_runtime_1.jsxs)("p", { className: "text-as-primary/70 text-balance text-sm leading-relaxed", children: ["You'll earn ", (0, jsx_runtime_1.jsxs)("span", { className: "text-as-brand font-semibold", children: ["+", pointsAmount.toLocaleString(), " points"] }), " ", "towards the", " ", (0, jsx_runtime_1.jsx)(link_1.default, { href: "https://anyspend.com/points", target: "_blank", className: "text-as-brand underline", children: "next AnySpend airdrop" }), " ", "when you complete this transaction."] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-surface-primary border-as-border-secondary mt-2 w-full rounded-lg border p-4 text-left", children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-as-primary mb-2 font-semibold", children: "How it works:" }), (0, jsx_runtime_1.jsxs)("ul", { className: "text-as-primary/70 space-y-1 text-sm", children: [(0, jsx_runtime_1.jsx)("li", { children: "\u2022 Points are earned based on transaction volume" }), (0, jsx_runtime_1.jsx)("li", { children: "\u2022 Higher volume = more points" }), (0, jsx_runtime_1.jsx)("li", { children: "\u2022 Points contribute to future airdrops" }), (0, jsx_runtime_1.jsx)("li", { children: "\u2022 Keep swapping to maximize your rewards" })] })] }), (0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", onClick: onBack, className: (0, cn_1.cn)("as-main-button !bg-as-brand relative w-full"), textClassName: (0, cn_1.cn)("text-white"), children: "Back to Swap" })] }) }));
+function PointsDetailPanel({ pointsAmount = 0, onBack, classes }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: classes?.container || "mx-auto flex w-[460px] max-w-full flex-col items-center gap-4 px-5", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-4 text-center", children: [(0, jsx_runtime_1.jsx)("h3", { className: classes?.title || "text-as-primary text-xl font-bold", children: "Earn Points with Every Swap" }), (0, jsx_runtime_1.jsxs)("p", { className: classes?.description || "text-as-primary/70 text-balance text-sm leading-relaxed", children: ["You'll earn", " ", (0, jsx_runtime_1.jsxs)("span", { className: classes?.highlightText || "text-as-brand font-semibold", children: ["+", pointsAmount.toLocaleString(), " points"] }), " ", "towards the", " ", (0, jsx_runtime_1.jsx)(link_1.default, { href: "https://anyspend.com/points", target: "_blank", className: classes?.link || "text-as-brand underline", children: "next AnySpend airdrop" }), " ", "when you complete this transaction."] }), (0, jsx_runtime_1.jsxs)("div", { className: classes?.infoCard ||
+                        "bg-as-surface-primary border-as-border-secondary mt-2 w-full rounded-lg border p-4 text-left", children: [(0, jsx_runtime_1.jsx)("h4", { className: classes?.infoCardTitle || "text-as-primary mb-2 font-semibold", children: "How it works:" }), (0, jsx_runtime_1.jsxs)("ul", { className: classes?.infoList || "text-as-primary/70 space-y-1 text-sm", children: [(0, jsx_runtime_1.jsx)("li", { className: classes?.infoListItem, children: "\u2022 Points are earned based on transaction volume" }), (0, jsx_runtime_1.jsx)("li", { className: classes?.infoListItem, children: "\u2022 Higher volume = more points" }), (0, jsx_runtime_1.jsx)("li", { className: classes?.infoListItem, children: "\u2022 Points contribute to future airdrops" }), (0, jsx_runtime_1.jsx)("li", { className: classes?.infoListItem, children: "\u2022 Keep swapping to maximize your rewards" })] })] }), (0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", onClick: onBack, className: classes?.backButton || (0, cn_1.cn)("as-main-button !bg-as-brand relative w-full"), textClassName: (0, cn_1.cn)("text-white"), children: "Back to Swap" })] }) }));
 }

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

@@ -1,3 +1,4 @@
+import type { RecipientSelectionClasses } from "../types/classes";
 export interface RecipientSelectionProps {
     /**
      * Initial recipient address value
@@ -38,5 +39,9 @@ export interface RecipientSelectionProps {
      * @returns true if valid, false otherwise
      */
     validateAddress?: (address: string) => boolean;
+    /**
+     * Custom classes for styling
+     */
+    classes?: RecipientSelectionClasses;
 }
-export declare function RecipientSelection({ initialValue, placeholder, title, description, confirmText, onBack, onConfirm, autoFocus, validateAddress, }: RecipientSelectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function RecipientSelection({ initialValue, placeholder, title, description, confirmText, onBack, onConfirm, autoFocus, validateAddress, classes, }: RecipientSelectionProps): import("react/jsx-runtime").JSX.Element;

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

@@ -5,7 +5,7 @@ exports.RecipientSelection = RecipientSelection;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
 const react_1 = require("react");
-function RecipientSelection({ initialValue = "", placeholder = "Enter recipient address", title = "Add recipient address or ENS", description = "Swap and send tokens to another address", confirmText = "Confirm recipient address", onBack, onConfirm, autoFocus = true, validateAddress, }) {
+function RecipientSelection({ initialValue = "", placeholder = "Enter recipient address", title = "Add recipient address or ENS", description = "Swap and send tokens to another address", confirmText = "Confirm recipient address", onBack, onConfirm, autoFocus = true, validateAddress, classes, }) {
     const [recipientAddress, setRecipientAddress] = (0, react_1.useState)(initialValue);
     // Update internal state when initialValue changes
     (0, react_1.useEffect)(() => {
@@ -32,5 +32,8 @@ function RecipientSelection({ initialValue = "", placeholder = "Enter recipient
     };
     const isAddressValid = !validateAddress || !recipientAddress || validateAddress(recipientAddress);
     const canConfirm = recipientAddress && isAddressValid;
-    return ((0, jsx_runtime_1.jsx)("div", { className: "recipient-selection mx-auto w-[460px] max-w-full p-5", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-around", children: [(0, jsx_runtime_1.jsx)("button", { onClick: onBack, className: "text-as-quaternary hover:text-as-primary flex h-8 w-8 items-center justify-center rounded-lg transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "h-6 w-6" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 text-center", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-lg font-semibold", children: title }), (0, jsx_runtime_1.jsx)("p", { className: "text-as-primary/60 text-sm", children: description })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-as-surface-secondary border-as-border-secondary flex h-12 w-full overflow-hidden rounded-xl border", children: [(0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: placeholder, value: recipientAddress, onChange: e => setRecipientAddress(e.target.value), onKeyDown: handleKeyDown, className: "text-as-primary placeholder:text-as-primary/50 flex-1 bg-transparent px-4 text-base focus:outline-none", autoFocus: autoFocus }), (0, jsx_runtime_1.jsx)("div", { className: "border-as-border-secondary border-l", children: (0, jsx_runtime_1.jsx)("button", { onClick: handlePaste, className: "text-as-primary/70 hover:text-as-primary hover:bg-as-surface-primary h-full px-4 font-semibold transition-colors", children: "Paste" }) })] }), recipientAddress && !isAddressValid && ((0, jsx_runtime_1.jsx)("div", { className: "text-as-red text-sm", children: "Please enter a valid address" })), (0, jsx_runtime_1.jsx)("button", { onClick: handleConfirm, disabled: !canConfirm, className: "bg-as-brand hover:bg-as-brand/90 disabled:bg-as-on-surface-2 disabled:text-as-secondary h-12 w-full rounded-xl font-medium text-white transition-colors disabled:cursor-not-allowed", children: confirmText })] })] }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: classes?.container || "recipient-selection mx-auto w-[460px] max-w-full p-5", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: classes?.header || "flex justify-around", children: [(0, jsx_runtime_1.jsx)("button", { onClick: onBack, className: classes?.backButton ||
+                                "text-as-quaternary hover:text-as-primary flex h-8 w-8 items-center justify-center rounded-lg transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "h-6 w-6" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 text-center", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-lg font-semibold", children: title }), (0, jsx_runtime_1.jsx)("p", { className: "text-as-primary/60 text-sm", children: description })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-as-surface-secondary border-as-border-secondary flex h-12 w-full overflow-hidden rounded-xl border", children: [(0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: placeholder, value: recipientAddress, onChange: e => setRecipientAddress(e.target.value), onKeyDown: handleKeyDown, className: classes?.searchInput ||
+                                        "text-as-primary placeholder:text-as-primary/50 flex-1 bg-transparent px-4 text-base focus:outline-none", autoFocus: autoFocus }), (0, jsx_runtime_1.jsx)("div", { className: "border-as-border-secondary border-l", children: (0, jsx_runtime_1.jsx)("button", { onClick: handlePaste, className: "text-as-primary/70 hover:text-as-primary hover:bg-as-surface-primary h-full px-4 font-semibold transition-colors", children: "Paste" }) })] }), recipientAddress && !isAddressValid && ((0, jsx_runtime_1.jsx)("div", { className: "text-as-red text-sm", children: "Please enter a valid address" })), (0, jsx_runtime_1.jsx)("button", { onClick: handleConfirm, disabled: !canConfirm, className: classes?.confirmButton ||
+                                "bg-as-brand hover:bg-as-brand/90 disabled:bg-as-on-surface-2 disabled:text-as-secondary h-12 w-full rounded-xl font-medium text-white transition-colors disabled:cursor-not-allowed", children: confirmText })] })] }) }));
 }

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

@@ -1,10 +1,12 @@
 import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
 import { FiatPaymentMethod } from "./FiatPaymentMethod";
+import type { TabSectionClasses } from "../types/classes";
 interface TabSectionProps {
     activeTab: "crypto" | "fiat";
     setActiveTab: (tab: "crypto" | "fiat") => void;
     setSelectedCryptoPaymentMethod: (method: CryptoPaymentMethodType) => void;
     setSelectedFiatPaymentMethod: (method: FiatPaymentMethod) => void;
+    classes?: TabSectionClasses;
 }
-export declare function TabSection({ activeTab, setActiveTab, setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod, }: TabSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function TabSection({ activeTab, setActiveTab, setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod, classes, }: TabSectionProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -5,14 +5,23 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const cn_1 = require("../../../../shared/utils/cn");
 const CryptoPaymentMethod_1 = require("./CryptoPaymentMethod");
 const FiatPaymentMethod_1 = require("./FiatPaymentMethod");
-function TabSection({ activeTab, setActiveTab, setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod, }) {
-    return ((0, jsx_runtime_1.jsx)("div", { className: "tab-section w-full", children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-surface-secondary relative mb-4 grid h-10 grid-cols-2 rounded-xl", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("bg-as-brand absolute bottom-0 left-0 top-0 z-0 rounded-xl transition-transform duration-100", "h-full w-1/2", activeTab === "fiat" ? "translate-x-full" : "translate-x-0"), style: { willChange: "transform" } }), (0, jsx_runtime_1.jsx)("button", { className: (0, cn_1.cn)("relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100", activeTab === "crypto" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent"), onClick: () => {
+function TabSection({ activeTab, setActiveTab, setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod, classes, }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: classes?.root || "tab-section w-full", children: (0, jsx_runtime_1.jsxs)("div", { className: classes?.container || "bg-as-surface-secondary relative mb-4 grid h-10 grid-cols-2 rounded-xl", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(classes?.tabIndicator ||
+                        "bg-as-brand absolute bottom-0 left-0 top-0 z-0 h-full w-1/2 rounded-xl transition-transform duration-100", activeTab === "fiat" ? "translate-x-full" : "translate-x-0"), style: { willChange: "transform" } }), (0, jsx_runtime_1.jsx)("button", { className: (0, cn_1.cn)(activeTab === "crypto"
+                        ? classes?.tabButtonActive ||
+                            "relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium text-white transition-colors duration-100"
+                        : classes?.tabButton ||
+                            "text-as-primary/70 hover:bg-as-on-surface-2 relative z-10 h-full w-full rounded-xl bg-transparent px-3 text-sm font-medium transition-colors duration-100"), onClick: () => {
                         setActiveTab("crypto");
-                        setSelectedCryptoPaymentMethod(CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE); // Reset payment method when switching to crypto
-                        setSelectedFiatPaymentMethod(FiatPaymentMethod_1.FiatPaymentMethod.NONE); // Reset fiat payment method when switching to crypto
-                    }, children: "Pay with crypto" }), (0, jsx_runtime_1.jsx)("button", { className: (0, cn_1.cn)("relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100", activeTab === "fiat" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent"), onClick: () => {
+                        setSelectedCryptoPaymentMethod(CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE);
+                        setSelectedFiatPaymentMethod(FiatPaymentMethod_1.FiatPaymentMethod.NONE);
+                    }, children: "Pay with crypto" }), (0, jsx_runtime_1.jsx)("button", { className: (0, cn_1.cn)(activeTab === "fiat"
+                        ? classes?.tabButtonActive ||
+                            "relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium text-white transition-colors duration-100"
+                        : classes?.tabButton ||
+                            "text-as-primary/70 hover:bg-as-on-surface-2 relative z-10 h-full w-full rounded-xl bg-transparent px-3 text-sm font-medium transition-colors duration-100"), onClick: () => {
                         setActiveTab("fiat");
-                        setSelectedCryptoPaymentMethod(CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE); // Reset crypto payment method when switching to fiat
-                        setSelectedFiatPaymentMethod(FiatPaymentMethod_1.FiatPaymentMethod.NONE); // Reset fiat payment method when switching to fiat
+                        setSelectedCryptoPaymentMethod(CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE);
+                        setSelectedFiatPaymentMethod(FiatPaymentMethod_1.FiatPaymentMethod.NONE);
                     }, children: "Pay with Fiat" })] }) }));
 }

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

@@ -1,5 +1,6 @@
 import { components } from "../../../../anyspend/types/api";
 import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
+import type { TransferCryptoDetailsClasses } from "../types/classes";
 type Order = components["schemas"]["Order"];
 type Token = components["schemas"]["Token"];
 type Tournament = components["schemas"]["Tournament"];
@@ -13,6 +14,7 @@ interface TransferCryptoDetailsProps {
     onBack: () => void;
     recipientName?: string;
     onPaymentMethodChange?: (method: CryptoPaymentMethodType) => void;
+    classes?: TransferCryptoDetailsClasses;
 }
 export declare const TransferCryptoDetails: import("react").NamedExoticComponent<TransferCryptoDetailsProps>;
 export {};

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

@@ -15,7 +15,7 @@ const chains_1 = require("viem/chains");
 const CryptoPaymentMethod_1 = require("./CryptoPaymentMethod");
 const OrderDetailsCollapsible_1 = require("./OrderDetailsCollapsible");
 const PaymentMethodSwitch_1 = require("./PaymentMethodSwitch");
-exports.TransferCryptoDetails = (0, react_3.memo)(function TransferCryptoDetails({ order, srcToken, dstToken, tournament, nft, onBack, recipientName, onPaymentMethodChange, }) {
+exports.TransferCryptoDetails = (0, react_3.memo)(function TransferCryptoDetails({ order, srcToken, dstToken, tournament, nft, onBack, recipientName, onPaymentMethodChange, classes, }) {
     const [timeLeft, setTimeLeft] = (0, react_3.useState)(0);
     (0, react_3.useEffect)(() => {
         const calculateTimeLeft = () => {
@@ -66,7 +66,8 @@ exports.TransferCryptoDetails = (0, react_3.memo)(function TransferCryptoDetails
         navigator.clipboard.writeText(order.globalAddress);
         react_1.toast.success("Deposit address copied to clipboard");
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto flex w-full flex-col gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-header flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("button", { onClick: onBack, className: "order-transfer-crypto-back-btn text-as-primary/60 hover:text-as-primary flex h-10 w-10 items-center justify-center rounded-full transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 24, className: "text-as-quaternary" }) }), (0, jsx_runtime_1.jsx)("h2", { className: "order-transfer-crypto-title text-as-primary text-lg font-semibold", children: "Transfer crypto" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-timer relative flex h-11 w-11 items-center justify-center", children: [(0, jsx_runtime_1.jsxs)("svg", { className: "order-transfer-crypto-timer-svg h-11 w-11 -rotate-90", viewBox: "0 0 44 44", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "22", cy: "22", r: "18", stroke: "currentColor", strokeWidth: "3", fill: "none", className: "order-transfer-crypto-timer-bg text-gray-200" }), (0, jsx_runtime_1.jsx)("circle", { cx: "22", cy: "22", r: "18", stroke: "currentColor", strokeWidth: "3", fill: "none", strokeLinecap: "round", className: "order-transfer-crypto-timer-progress text-blue-500", strokeDasharray: `${2 * Math.PI * 18}`, strokeDashoffset: `${2 * Math.PI * 18 * (1 - timeLeft / totalTime)}`, style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: classes?.container || "order-transfer-crypto flex w-full flex-col gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: classes?.header || "order-transfer-crypto-header flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("button", { onClick: onBack, className: classes?.backButton ||
+                            "order-transfer-crypto-back-btn text-as-primary/60 hover:text-as-primary flex h-10 w-10 items-center justify-center rounded-full transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 24, className: "text-as-quaternary" }) }), (0, jsx_runtime_1.jsx)("h2", { className: classes?.title || "order-transfer-crypto-title text-as-primary text-lg font-semibold", children: "Transfer crypto" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-timer relative flex h-11 w-11 items-center justify-center", children: [(0, jsx_runtime_1.jsxs)("svg", { className: "order-transfer-crypto-timer-svg h-11 w-11 -rotate-90", viewBox: "0 0 44 44", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "22", cy: "22", r: "18", stroke: "currentColor", strokeWidth: "3", fill: "none", className: "order-transfer-crypto-timer-bg text-gray-200" }), (0, jsx_runtime_1.jsx)("circle", { cx: "22", cy: "22", r: "18", stroke: "currentColor", strokeWidth: "3", fill: "none", strokeLinecap: "round", className: "order-transfer-crypto-timer-progress text-blue-500", strokeDasharray: `${2 * Math.PI * 18}`, strokeDashoffset: `${2 * Math.PI * 18 * (1 - timeLeft / totalTime)}`, style: {
                                             transition: "stroke-dashoffset 1s linear",
                                         } })] }), (0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-timer-text absolute inset-0 flex items-center justify-center", children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary text-[10px] font-semibold", children: formatTime(timeLeft) }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-content flex w-full flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-cards flex items-center gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-amount-card w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: "order-transfer-crypto-amount-label text-as-content-secondary text-sm font-medium", children: "Amount" }), (0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-amount-container border-as-border-primary rounded-lg border p-2 shadow-sm", children: (0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: roundedUpSrcAmount || "", onCopy: () => {
                                                 react_1.toast.success("Amount copied to clipboard");

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

@@ -1,8 +1,9 @@
+import type { ChainWarningTextClasses, WarningTextClasses } from "../types/classes";
 export interface WarningTextProps {
     /** The warning message content */
     children: React.ReactNode;
-    /** Additional CSS classes */
-    className?: string;
+    /** Custom classes for styling */
+    classes?: WarningTextClasses;
 }
 /**
  * A generic warning text component with consistent styling.
@@ -12,12 +13,12 @@ export interface WarningTextProps {
  *   Custom warning message
  * </WarningText>
  */
-export declare function WarningText({ children, className }: WarningTextProps): import("react/jsx-runtime").JSX.Element;
+export declare function WarningText({ children, classes }: WarningTextProps): import("react/jsx-runtime").JSX.Element;
 export interface ChainWarningTextProps {
     /** The chain ID to display warning for */
     chainId: number;
-    /** Additional CSS classes */
-    className?: string;
+    /** Custom classes for styling */
+    classes?: ChainWarningTextClasses;
 }
 /**
  * A chain-aware warning text component that displays chain-specific warnings.
@@ -27,6 +28,6 @@ export interface ChainWarningTextProps {
  * <ChainWarningText chainId={HYPERLIQUID_CHAIN_ID} />
  *
  * @example
- * <ChainWarningText chainId={destinationChainId} className="mt-4" />
+ * <ChainWarningText chainId={destinationChainId} classes={{ root: "my-custom-class" }} />
  */
-export declare function ChainWarningText({ chainId, className }: ChainWarningTextProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ChainWarningText({ chainId, classes }: ChainWarningTextProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -4,7 +4,6 @@ exports.WarningText = WarningText;
 exports.ChainWarningText = ChainWarningText;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const anyspend_1 = require("../../../../anyspend");
-const cn_1 = require("../../../../shared/utils/cn");
 /**
  * A generic warning text component with consistent styling.
  *
@@ -13,8 +12,8 @@ const cn_1 = require("../../../../shared/utils/cn");
  *   Custom warning message
  * </WarningText>
  */
-function WarningText({ children, className }) {
-    return (0, jsx_runtime_1.jsx)("p", { className: (0, cn_1.cn)("anyspend-warning text-center text-xs italic text-red-500", className), children: children });
+function WarningText({ children, classes }) {
+    return (0, jsx_runtime_1.jsx)("p", { className: classes?.root || "anyspend-warning text-center text-xs italic text-red-500", children: children });
 }
 /**
  * A chain-aware warning text component that displays chain-specific warnings.
@@ -24,12 +23,12 @@ function WarningText({ children, className }) {
  * <ChainWarningText chainId={HYPERLIQUID_CHAIN_ID} />
  *
  * @example
- * <ChainWarningText chainId={destinationChainId} className="mt-4" />
+ * <ChainWarningText chainId={destinationChainId} classes={{ root: "my-custom-class" }} />
  */
-function ChainWarningText({ chainId, className }) {
+function ChainWarningText({ chainId, classes }) {
     // Chain-specific warning messages
     if (chainId === anyspend_1.HYPERLIQUID_CHAIN_ID) {
-        return ((0, jsx_runtime_1.jsxs)(WarningText, { className: className, children: ["Minimum deposit amount: ", (0, jsx_runtime_1.jsx)("b", { children: "$1" })] }));
+        return ((0, jsx_runtime_1.jsxs)(WarningText, { classes: classes, children: ["Minimum deposit amount: ", (0, jsx_runtime_1.jsx)("b", { children: "$1" })] }));
     }
     // No warning for this chain
     return null;

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

@@ -6,6 +6,7 @@ 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 { AnySpendDepositHype, HYPE_TOKEN_DETAILS } from "./AnyspendDepositHype";
 export * from "./AnySpendFingerprintWrapper";
 export { AnySpendNFT } from "./AnySpendNFT";