@avail-project/widgets 0.0.1

package/dist/nexus-widget/components/recipient-input.d.ts

@@ -0,0 +1,10 @@
+export interface RecipientInputProps {
+    hasError?: boolean;
+    label?: string | null;
+    onChange: (val: string) => void;
+    onClear?: () => void;
+    placeholder?: string;
+    value: string;
+}
+export declare function RecipientInput({ value, onChange, onClear, placeholder, label, hasError, }: RecipientInputProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=recipient-input.d.ts.map

package/dist/nexus-widget/components/recipient-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"recipient-input.d.ts","sourceRoot":"","sources":["../../../.build-src/nexus-widget/components/recipient-input.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,OAAO,EACP,WAAyB,EACzB,KAAY,EACZ,QAAgB,GACjB,EAAE,mBAAmB,2CA2ErB"}

package/dist/nexus-widget/components/recipient-input.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// biome-ignore-all lint: NexusWidget registry component from shadcn registry.
+import { X } from "lucide-react";
+import React from "react";
+export function RecipientInput({ value, onChange, onClear, placeholder = "Search...", label = "To", hasError = false, }) {
+    return (_jsxs("div", { className: "flex items-center w-full px-4 overflow-hidden outline-none transition-all placeholder:text-[var(--foreground-muted, #848483)] text-[var(--foreground-primary, #161615)]", style: {
+            background: "#FFFFFE",
+            height: "38px",
+            borderRadius: "7px",
+            borderWidth: "1px",
+            borderStyle: "solid",
+            borderColor: hasError ? "#E35454" : "var(--foreground-brand)",
+            gap: "8px",
+            paddingTop: "8px",
+            paddingBottom: "8px",
+        }, children: [label && (_jsx("div", { className: "shrink-0 font-geist select-none flex items-center", style: {
+                    color: "var(--foreground-primary, var(--foreground-primary, #161615))",
+                    fontSize: "14px",
+                    fontWeight: 400,
+                    lineHeight: "17px",
+                }, children: label })), _jsx("style", { children: `
+          .nexus-widget-recipient-input::placeholder {
+            color: #9E9E9C;
+            -webkit-text-fill-color: #9E9E9C;
+            opacity: 1;
+          }
+        ` }), _jsx("input", { className: "nexus-widget-recipient-input flex-1 bg-transparent border-none outline-none focus:ring-0 font-geist placeholder:text-[var(--foreground-muted, #848483)]", onChange: (e) => onChange(e.target.value), placeholder: placeholder, style: {
+                    color: "#161615",
+                    caretColor: "var(--foreground-brand)",
+                    fontSize: "14px",
+                    fontWeight: 500,
+                    WebkitTextFillColor: "#161615",
+                    lineHeight: "17px",
+                }, value: value }), value && onClear && (_jsx("button", { "aria-label": "Clear recipient", onClick: onClear, style: {
+                    alignItems: "center",
+                    backgroundColor: "transparent",
+                    border: "none",
+                    cursor: "pointer",
+                    display: "flex",
+                    flexShrink: 0,
+                    justifyContent: "center",
+                    padding: 0,
+                }, type: "button", children: _jsx(X, { style: { color: "#9E9E9C", height: "16px", width: "16px" } }) }))] }));
+}

package/dist/nexus-widget/components/send-idle-form.d.ts

@@ -0,0 +1,29 @@
+import { type SwapTokenOption } from "./swap-asset-selector";
+interface SendIdleFormProps {
+    amount: string;
+    calculatingPercent?: number | null;
+    fromTokens: SwapTokenOption[];
+    isAmountReadOnly?: boolean;
+    isAssetPickerDisabled?: boolean;
+    isCalculatingMax?: boolean;
+    isQuoteRefreshing?: boolean;
+    isRecipientLocked?: boolean;
+    hideDestinationTokenDropdownIcon?: boolean;
+    isSourcePickerDisabled?: boolean;
+    onAmountChange: (val: string) => void;
+    onOpenAssetPicker: () => void;
+    onOpenRecipientPicker: () => void;
+    onOpenSourcePicker: () => void;
+    onSetPercent: (pct: number) => void;
+    recipientAddress: string;
+    reserveSourceRows?: boolean;
+    routeMessage?: string;
+    routeStatus?: "loading" | "insufficient";
+    showAutoBadge?: boolean;
+    toToken?: SwapTokenOption;
+    totalBalance: string;
+    usdValue: string;
+}
+export declare function SendIdleForm({ amount, onAmountChange, toToken, fromTokens, totalBalance, usdValue, onOpenAssetPicker, onOpenSourcePicker, onOpenRecipientPicker, recipientAddress, onSetPercent, routeStatus, routeMessage, isAmountReadOnly, isAssetPickerDisabled, isCalculatingMax, calculatingPercent, isQuoteRefreshing, isRecipientLocked, hideDestinationTokenDropdownIcon, showAutoBadge, isSourcePickerDisabled, reserveSourceRows, }: SendIdleFormProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=send-idle-form.d.ts.map

package/dist/nexus-widget/components/send-idle-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"send-idle-form.d.ts","sourceRoot":"","sources":["../../../.build-src/nexus-widget/components/send-idle-form.tsx"],"names":[],"mappings":"AAMA,OAAO,EAEL,KAAK,eAAe,EACrB,MAAM,uBAAuB,CAAC;AAE/B,UAAU,iBAAiB;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,UAAU,EAAE,eAAe,EAAE,CAAC;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,gCAAgC,CAAC,EAAE,OAAO,CAAC;IAC3C,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,qBAAqB,EAAE,MAAM,IAAI,CAAC;IAClC,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,gBAAgB,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,SAAS,GAAG,cAAc,CAAC;IACzC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAogBD,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,cAAc,EACd,OAAO,EACP,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,iBAAiB,EACjB,kBAAkB,EAClB,qBAAqB,EACrB,gBAAgB,EAChB,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,gBAAwB,EACxB,qBAA6B,EAC7B,gBAAgB,EAChB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAyB,EACzB,gCAAwC,EACxC,aAAoB,EACpB,sBAA8B,EAC9B,iBAAyB,GAC1B,EAAE,iBAAiB,2CAwbnB"}

package/dist/nexus-widget/components/send-idle-form.js

@@ -0,0 +1,548 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// biome-ignore-all lint: NexusWidget registry component from shadcn registry.
+import Decimal from "decimal.js";
+import { AlertCircle, ChevronDown, Loader2 } from "lucide-react";
+import React, { useRef, useState } from "react";
+import { PayWithSources as SharedPayWithSources } from "./pay-with-sources";
+import { formatSelectedTokenBalanceLabel, } from "./swap-asset-selector";
+const uiFont = '"Geist", system-ui, sans-serif';
+const primary = "#161615";
+const muted = "#848483";
+const border = "#E8E8E7";
+const brand = "var(--foreground-brand)";
+const parseDecimal = (value) => {
+    if (value === null || value === undefined || value === "")
+        return undefined;
+    if (Decimal.isDecimal(value))
+        return value;
+    const cleaned = String(value).replace(/[^0-9.-]/g, "");
+    if (!cleaned || cleaned === "-" || cleaned === "." || cleaned === "-.") {
+        return undefined;
+    }
+    try {
+        const parsed = new Decimal(cleaned);
+        return parsed.isFinite() ? parsed : undefined;
+    }
+    catch {
+        return undefined;
+    }
+};
+const formatToken = (value) => {
+    const amount = parseDecimal(value) ?? new Decimal(0);
+    return amount.toDecimalPlaces(8).toFixed();
+};
+const formatUsd = (value) => {
+    const amount = parseDecimal(value) ?? new Decimal(0);
+    if (amount.gt(0) && amount.lt(0.01))
+        return "<$0.01";
+    return `$${amount.toDecimalPlaces(2).toFixed()}`;
+};
+const MAX_AMOUNT_DISPLAY_DECIMALS = 8;
+const getTokenInputDecimals = (token) => {
+    const decimals = Number(token?.decimals);
+    return Number.isFinite(decimals) && decimals >= 0 ? Math.floor(decimals) : 18;
+};
+const formatAmountInputDisplay = (value) => {
+    if (!value)
+        return "";
+    try {
+        return new Decimal(value)
+            .toDecimalPlaces(MAX_AMOUNT_DISPLAY_DECIMALS, Decimal.ROUND_DOWN)
+            .toFixed();
+    }
+    catch {
+        return value;
+    }
+};
+const sanitizeAmountInput = (raw, maxDecimals) => {
+    let next = raw.replaceAll(/[^0-9.]/g, "");
+    const parts = next.split(".");
+    if (parts.length > 2)
+        next = parts[0] + "." + parts.slice(1).join("");
+    const [integerPart, decimalPart] = next.split(".");
+    if (decimalPart !== undefined) {
+        next = `${integerPart}.${decimalPart.slice(0, Math.max(0, maxDecimals))}`;
+    }
+    if (next === ".")
+        next = "0.";
+    return next;
+};
+function TokenLogo({ src, label, size = 30, fontSize = 12, style, }) {
+    const [failed, setFailed] = useState(!src);
+    React.useEffect(() => {
+        setFailed(!src);
+    }, [src]);
+    if (!failed && src) {
+        return (_jsx("img", { alt: label || "", onError: () => setFailed(true), src: src, style: {
+                backgroundColor: "#FFFFFE",
+                borderRadius: "999px",
+                height: size,
+                objectFit: "cover",
+                width: size,
+                ...style,
+            } }));
+    }
+    return (_jsx("div", { style: {
+            alignItems: "center",
+            backgroundColor: "#E8F0FF",
+            borderRadius: "999px",
+            color: brand,
+            display: "flex",
+            fontFamily: uiFont,
+            fontSize,
+            fontWeight: 700,
+            height: size,
+            justifyContent: "center",
+            width: size,
+            ...style,
+        }, children: (label || "?").slice(0, 1).toUpperCase() }));
+}
+function SourceLogoPair({ token }) {
+    return (_jsxs("div", { style: { flexShrink: 0, height: 32, position: "relative", width: 32 }, children: [_jsx(TokenLogo, { label: token.symbol, size: 32, src: token.logo }), token.chainLogo && (_jsx(TokenLogo, { label: token.chainName, size: 14, src: token.chainLogo, style: {
+                    bottom: -2,
+                    outline: "1px solid #FFFFFE",
+                    position: "absolute",
+                    right: -2,
+                } }))] }));
+}
+function ExactOutPercentButtons({ visible, onSelect, }) {
+    return (_jsx("div", { style: {
+            alignItems: "center",
+            boxSizing: "border-box",
+            display: "flex",
+            gap: "6px",
+            opacity: visible ? 1 : 0,
+            pointerEvents: visible ? "auto" : "none",
+            transition: "opacity 0.18s ease-out",
+            width: "100%",
+        }, children: [25, 50, 75, 100].map((pct) => {
+            const isMax = pct === 100;
+            return (_jsx("button", { onClick: (e) => {
+                    e.stopPropagation();
+                    onSelect(pct);
+                }, onMouseDown: (e) => {
+                    e.preventDefault();
+                }, style: {
+                    alignItems: "center",
+                    backgroundColor: isMax ? "#E8F0FF" : "#F4F4F3",
+                    border: "none",
+                    borderRadius: "8px",
+                    boxSizing: "border-box",
+                    color: isMax ? brand : "#363635",
+                    cursor: "pointer",
+                    display: "flex",
+                    flex: "1 1 0%",
+                    fontFamily: '"Geist", system-ui, sans-serif',
+                    fontSize: "12px",
+                    fontWeight: 500,
+                    justifyContent: "center",
+                    lineHeight: "20px",
+                    minWidth: 0,
+                    paddingBlock: "5px",
+                    paddingInline: "10px",
+                }, tabIndex: -1, type: "button", children: isMax ? "MAX" : `${pct}%` }, pct));
+        }) }));
+}
+function SkeletonRow() {
+    return (_jsxs("div", { style: {
+            alignItems: "center",
+            display: "flex",
+            justifyContent: "space-between",
+        }, children: [_jsx("div", { className: "animate-pulse", style: {
+                    background: "linear-gradient(90deg, #F0F0EF 0%, #F7F7F6 48%, #F0F0EF 100%)",
+                    backgroundSize: "200% 100%",
+                    borderRadius: "6px",
+                    height: "32px",
+                    width: "128px",
+                } }), _jsx("div", { className: "animate-pulse", style: {
+                    background: "linear-gradient(90deg, #F0F0EF 0%, #F7F7F6 48%, #F0F0EF 100%)",
+                    backgroundSize: "200% 100%",
+                    borderRadius: "999px",
+                    height: "32px",
+                    width: "108px",
+                } })] }));
+}
+function PayWithSources({ fromTokens, onOpenSourcePicker, routeStatus, routeMessage, }) {
+    const scrollRef = useRef(null);
+    const isRouteLoading = routeStatus === "loading";
+    const shouldShowSourceSummary = !isRouteLoading && fromTokens.length > 0;
+    const shouldScroll = shouldShowSourceSummary && fromTokens.length > 3;
+    const autoBadge = (_jsx("span", { style: {
+            border: `1px solid ${brand}`,
+            borderRadius: "999px",
+            color: brand,
+            fontFamily: uiFont,
+            fontSize: "9px",
+            fontWeight: 600,
+            letterSpacing: "0.04em",
+            lineHeight: "14px",
+            padding: "1px 5px",
+        }, children: "AUTO" }));
+    return (_jsxs("div", { style: {
+            backgroundColor: "#FFFFFE",
+            border: `1px solid ${border}`,
+            borderRadius: "12px",
+            boxShadow: "#1616150A 0px 1px 2px",
+            boxSizing: "border-box",
+            display: "flex",
+            flexDirection: "column",
+            gap: "10px",
+            padding: "14px",
+        }, children: [_jsxs("div", { style: {
+                    alignItems: "center",
+                    display: "flex",
+                    justifyContent: "space-between",
+                }, children: [_jsxs("div", { style: {
+                            alignItems: "center",
+                            color: muted,
+                            display: "flex",
+                            fontFamily: uiFont,
+                            fontSize: "14px",
+                            fontWeight: 500,
+                            gap: "6px",
+                            letterSpacing: "0.08em",
+                            lineHeight: "20px",
+                            textTransform: "uppercase",
+                        }, children: [_jsxs("span", { children: ["Pay With", shouldShowSourceSummary ? ` · ${fromTokens.length} assets` : ""] }), autoBadge] }), shouldShowSourceSummary && (_jsx("button", { onClick: onOpenSourcePicker, style: {
+                            backgroundColor: "#F4F7FE",
+                            border: "none",
+                            borderRadius: "6px",
+                            color: brand,
+                            cursor: "pointer",
+                            fontFamily: uiFont,
+                            fontSize: "14px",
+                            fontWeight: 500,
+                            lineHeight: "16px",
+                            padding: "7px 10px",
+                        }, type: "button", children: "Edit tokens" }))] }), isRouteLoading ? (_jsxs(_Fragment, { children: [_jsx(SkeletonRow, {}), _jsxs("div", { style: {
+                            alignItems: "center",
+                            color: brand,
+                            display: "flex",
+                            fontFamily: uiFont,
+                            fontSize: "15px",
+                            gap: "6px",
+                        }, children: [_jsx(Loader2, { className: "animate-spin", style: { height: 13, width: 13 } }), "Calculating best route..."] })] })) : shouldShowSourceSummary ? (_jsxs("div", { style: { position: "relative" }, children: [_jsx("div", { ref: scrollRef, style: {
+                            display: "flex",
+                            flexDirection: "column",
+                            maxHeight: shouldScroll ? "184px" : undefined,
+                            overflowY: shouldScroll ? "auto" : undefined,
+                            paddingRight: shouldScroll ? "6px" : 0,
+                        }, children: fromTokens.map((token, index) => (_jsxs("div", { style: {
+                                alignItems: "center",
+                                borderTop: index === 0 ? "none" : "1px solid #F0F0EF",
+                                display: "flex",
+                                justifyContent: "space-between",
+                                minHeight: "52px",
+                                padding: "6px 0",
+                            }, children: [_jsxs("div", { style: {
+                                        alignItems: "center",
+                                        display: "flex",
+                                        gap: "10px",
+                                        minWidth: 0,
+                                    }, children: [_jsx(SourceLogoPair, { token: token }), _jsxs("div", { style: {
+                                                display: "flex",
+                                                flexDirection: "column",
+                                                gap: "3px",
+                                                minWidth: 0,
+                                            }, children: [_jsx("span", { style: {
+                                                        color: primary,
+                                                        fontFamily: uiFont,
+                                                        fontSize: "16px",
+                                                        fontWeight: 600,
+                                                    }, children: token.symbol }), _jsx("span", { style: {
+                                                        color: muted,
+                                                        fontFamily: uiFont,
+                                                        fontSize: "14px",
+                                                        overflow: "hidden",
+                                                        textOverflow: "ellipsis",
+                                                        whiteSpace: "nowrap",
+                                                    }, children: token.isUnified
+                                                        ? "Unified balance"
+                                                        : `on ${token.chainName || "Unknown chain"}` })] })] }), _jsxs("div", { style: {
+                                        display: "flex",
+                                        flexDirection: "column",
+                                        gap: "3px",
+                                        textAlign: "right",
+                                    }, children: [_jsxs("span", { style: {
+                                                color: primary,
+                                                fontFamily: uiFont,
+                                                fontSize: "15px",
+                                            }, children: [formatToken(token.userAmount || token.balance), " ", token.symbol] }), _jsx("span", { style: {
+                                                color: muted,
+                                                fontFamily: uiFont,
+                                                fontSize: "14px",
+                                            }, children: formatUsd(token.userAmountUsd || token.balanceInFiat) })] })] }, `${token.contractAddress}-${token.chainId ?? "unified"}-${index}`))) }), shouldScroll && (_jsx("button", { "aria-label": "Scroll payment sources", onClick: () => scrollRef.current?.scrollBy({ behavior: "smooth", top: 64 }), style: {
+                            alignItems: "center",
+                            background: "#FFFFFE",
+                            border: `1px solid ${border}`,
+                            borderRadius: "999px",
+                            bottom: "4px",
+                            boxShadow: "0 2px 8px rgba(22,22,21,0.08)",
+                            cursor: "pointer",
+                            display: "flex",
+                            height: "22px",
+                            justifyContent: "center",
+                            left: "50%",
+                            padding: 0,
+                            position: "absolute",
+                            transform: "translateX(-50%)",
+                            width: "22px",
+                        }, type: "button", children: _jsx(ChevronDown, { style: { color: muted, height: 14, width: 14 } }) }))] })) : (_jsx("div", { style: {
+                    color: primary,
+                    fontFamily: uiFont,
+                    fontSize: "15px",
+                    lineHeight: "20px",
+                }, children: "Sources will be auto selected" })), routeStatus === "insufficient" && routeMessage && (_jsxs("div", { style: {
+                    alignItems: "center",
+                    color: "#D32F2F",
+                    display: "flex",
+                    fontFamily: uiFont,
+                    fontSize: "15px",
+                    gap: "8px",
+                    lineHeight: "20px",
+                }, children: [_jsx(AlertCircle, { style: { flexShrink: 0, height: 15, width: 15 } }), routeMessage] }))] }));
+}
+export function SendIdleForm({ amount, onAmountChange, toToken, fromTokens, totalBalance, usdValue, onOpenAssetPicker, onOpenSourcePicker, onOpenRecipientPicker, recipientAddress, onSetPercent, routeStatus, routeMessage, isAmountReadOnly = false, isAssetPickerDisabled = false, isCalculatingMax, calculatingPercent, isQuoteRefreshing, isRecipientLocked = false, hideDestinationTokenDropdownIcon = false, showAutoBadge = true, isSourcePickerDisabled = false, reserveSourceRows = false, }) {
+    const [pendingPercent, setPendingPercent] = useState(null);
+    const [isAmountFocused, setIsAmountFocused] = useState(false);
+    React.useEffect(() => {
+        if (!isCalculatingMax)
+            setPendingPercent(null);
+    }, [isCalculatingMax]);
+    const handlePercentSelect = (pct) => {
+        setPendingPercent(pct);
+        onSetPercent(pct);
+    };
+    const handleInput = (e) => {
+        if (isAmountReadOnly)
+            return;
+        onAmountChange(sanitizeAmountInput(e.target.value, getTokenInputDecimals(toToken)));
+    };
+    const amountDisplayValue = isAmountFocused
+        ? amount
+        : formatAmountInputDisplay(amount);
+    const activePendingPercent = calculatingPercent ?? (isCalculatingMax ? pendingPercent : null);
+    const isMaxCalculating = Boolean(isCalculatingMax && activePendingPercent === 100);
+    const destinationBalanceLabel = formatSelectedTokenBalanceLabel(toToken) ||
+        `0 ${toToken?.symbol || ""}`.trim();
+    return (_jsxs("div", { style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: "10px",
+            width: "100%",
+        }, children: [_jsx("div", { style: {
+                    alignItems: "start",
+                    backgroundColor: "#FFFFFE",
+                    borderColor: border,
+                    borderRadius: "14px",
+                    borderStyle: "solid",
+                    borderWidth: "1px",
+                    boxShadow: "#1616150A 0px 1px 2px",
+                    boxSizing: "border-box",
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "10px",
+                    justifyContent: "center",
+                    padding: "16px",
+                }, children: _jsxs("div", { style: {
+                        alignSelf: "stretch",
+                        boxSizing: "border-box",
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: "10px",
+                    }, children: [_jsx("div", { style: {
+                                boxSizing: "border-box",
+                                color: muted,
+                                fontFamily: uiFont,
+                                fontSize: "12px",
+                                fontWeight: 500,
+                                letterSpacing: "0.08em",
+                                lineHeight: "20px",
+                                textTransform: "uppercase",
+                            }, children: "Recipient" }), _jsxs("div", { style: {
+                                alignItems: "center",
+                                alignSelf: "stretch",
+                                boxSizing: "border-box",
+                                display: "flex",
+                                gap: "10px",
+                                justifyContent: "space-between",
+                                width: "100%",
+                            }, children: [_jsx("div", { style: {
+                                        boxSizing: "border-box",
+                                        color: brand,
+                                        fontFamily: uiFont,
+                                        fontSize: "16px",
+                                        fontVariantNumeric: "tabular-nums",
+                                        fontWeight: 500,
+                                        lineHeight: "20px",
+                                    }, children: recipientAddress
+                                        ? `${recipientAddress.slice(0, 6)}…${recipientAddress.slice(-4)}`
+                                        : "Select recipient" }), _jsx("button", { disabled: isRecipientLocked, onClick: onOpenRecipientPicker, style: {
+                                        alignItems: "center",
+                                        backgroundColor: "#E8F0FF",
+                                        border: "none",
+                                        borderRadius: "4px",
+                                        boxSizing: "border-box",
+                                        cursor: isRecipientLocked ? "default" : "pointer",
+                                        display: "flex",
+                                        gap: "4px",
+                                        paddingBlock: "8px",
+                                        paddingInline: "12px",
+                                    }, type: "button", children: _jsx("div", { style: {
+                                            boxSizing: "border-box",
+                                            color: isRecipientLocked ? "#6C756F" : brand,
+                                            fontFamily: uiFont,
+                                            fontSize: "12px",
+                                            fontWeight: 500,
+                                            lineHeight: "20px",
+                                        }, children: isRecipientLocked ? "Locked" : "Edit" }) })] })] }) }), _jsxs("div", { className: "nexus-focus-container", style: {
+                    backgroundColor: "#FFFFFE",
+                    borderColor: border,
+                    borderRadius: "14px",
+                    borderStyle: "solid",
+                    borderWidth: "1px",
+                    boxShadow: "#1616150A 0px 1px 2px",
+                    boxSizing: "border-box",
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "14px",
+                    padding: "16px",
+                }, children: [_jsxs("div", { style: {
+                            alignItems: "center",
+                            display: "flex",
+                            justifyContent: "space-between",
+                        }, children: [_jsx("div", { style: {
+                                    color: muted,
+                                    fontFamily: uiFont,
+                                    fontSize: "12px",
+                                    fontWeight: 600,
+                                    letterSpacing: "0.08em",
+                                    lineHeight: "20px",
+                                    textTransform: "uppercase",
+                                }, children: "Amount" }), _jsxs("div", { style: { alignItems: "center", display: "flex", gap: "4px" }, children: [_jsx("span", { style: {
+                                            color: muted,
+                                            fontFamily: uiFont,
+                                            fontSize: "14px",
+                                            lineHeight: "20px",
+                                        }, children: "Total Balance:" }), _jsxs("span", { style: {
+                                            color: primary,
+                                            fontFamily: uiFont,
+                                            fontSize: "14px",
+                                            fontWeight: 600,
+                                            lineHeight: "20px",
+                                        }, children: ["$", totalBalance] })] })] }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "10px" }, children: [_jsxs("div", { style: {
+                                    alignItems: "center",
+                                    display: "flex",
+                                    gap: "12px",
+                                    justifyContent: "space-between",
+                                    width: "100%",
+                                }, children: [isMaxCalculating ? (_jsx("div", { "aria-label": "Calculating max amount", className: "animate-pulse", style: {
+                                            backgroundColor: "#F0F0EF",
+                                            borderRadius: "8px",
+                                            flex: "1 1 0%",
+                                            height: "44px",
+                                            maxWidth: "220px",
+                                            minWidth: "132px",
+                                        } })) : (_jsx("input", { "aria-readonly": isAmountReadOnly, onBlur: () => setIsAmountFocused(false), onChange: handleInput, onFocus: () => setIsAmountFocused(true), placeholder: "0", style: {
+                                            background: "transparent",
+                                            border: "none",
+                                            boxSizing: "border-box",
+                                            color: amount ? primary : "#C8C8C6",
+                                            cursor: isAmountReadOnly ? "default" : "text",
+                                            flex: "1 1 0%",
+                                            fontFamily: '"Delight-Medium", "Delight", system-ui, sans-serif',
+                                            fontSize: "36px",
+                                            fontWeight: 500,
+                                            lineHeight: "44px",
+                                            minWidth: 0,
+                                            outline: "none",
+                                            padding: 0,
+                                        }, readOnly: isAmountReadOnly, type: "text", value: amountDisplayValue })), isCalculatingMax && !isMaxCalculating && (_jsx(Loader2, { className: "animate-spin", style: {
+                                            color: brand,
+                                            flexShrink: 0,
+                                            height: 18,
+                                            width: 18,
+                                        } })), _jsxs("button", { disabled: isAssetPickerDisabled, onClick: onOpenAssetPicker, style: {
+                                            alignItems: "center",
+                                            backgroundColor: "#FFFFFE",
+                                            borderColor: toToken ? border : "#C8C8C6",
+                                            borderRadius: "999px",
+                                            borderStyle: toToken ? "solid" : "dashed",
+                                            borderWidth: "1px",
+                                            boxShadow: "#1616150A 0px 1px 2px",
+                                            boxSizing: "border-box",
+                                            cursor: isAssetPickerDisabled ? "default" : "pointer",
+                                            display: "inline-flex",
+                                            flexShrink: 0,
+                                            gap: "8px",
+                                            paddingBottom: "5px",
+                                            paddingLeft: toToken ? "5px" : "10px",
+                                            paddingRight: "10px",
+                                            paddingTop: "5px",
+                                        }, type: "button", children: [toToken ? (_jsxs("div", { style: {
+                                                    flexShrink: 0,
+                                                    height: "26px",
+                                                    position: "relative",
+                                                    width: "26px",
+                                                }, children: [_jsx(TokenLogo, { label: toToken.symbol, size: 26, src: toToken.logo }), toToken.chainLogo && (_jsx(TokenLogo, { label: toToken.chainName, size: 12, src: toToken.chainLogo, style: {
+                                                            bottom: -2,
+                                                            outline: "1px solid #FFFFFE",
+                                                            position: "absolute",
+                                                            right: -2,
+                                                        } }))] })) : (_jsx("div", { style: {
+                                                    borderColor: "#C8C8C6",
+                                                    borderRadius: "999px",
+                                                    borderStyle: "dashed",
+                                                    borderWidth: "1.5px",
+                                                    boxSizing: "border-box",
+                                                    flexShrink: 0,
+                                                    height: "18px",
+                                                    width: "18px",
+                                                } })), _jsx("div", { style: {
+                                                    color: primary,
+                                                    fontFamily: uiFont,
+                                                    fontSize: "16px",
+                                                    fontWeight: 500,
+                                                    lineHeight: "24px",
+                                                }, children: toToken ? toToken.symbol : "Assets" }), !hideDestinationTokenDropdownIcon && (_jsx(ChevronDown, { style: {
+                                                    color: isAssetPickerDisabled ? "#A8A8A6" : "#5B5B5A",
+                                                    height: 16,
+                                                    width: 16,
+                                                } }))] })] }), _jsxs("div", { style: {
+                                    alignItems: "center",
+                                    display: "flex",
+                                    justifyContent: "space-between",
+                                    width: "100%",
+                                    minHeight: "20px",
+                                }, children: [_jsx("div", { style: {
+                                            display: "flex",
+                                            justifyContent: "flex-start",
+                                            alignItems: "center",
+                                            flex: 1,
+                                        }, children: _jsxs("div", { style: {
+                                                color: muted,
+                                                fontFamily: uiFont,
+                                                fontSize: "14px",
+                                                lineHeight: "20px",
+                                            }, children: ["\u2248 $", usdValue || "0"] }) }), _jsx("div", { style: {
+                                            alignItems: "center",
+                                            display: "flex",
+                                            justifyContent: "flex-end",
+                                            gap: "5px",
+                                            flex: 1,
+                                            minWidth: 0,
+                                        }, children: toToken && (_jsxs(_Fragment, { children: [_jsx("span", { style: {
+                                                        color: "#7C7C7A",
+                                                        fontFamily: uiFont,
+                                                        fontSize: "14px",
+                                                        lineHeight: "20px",
+                                                        whiteSpace: "nowrap",
+                                                    }, children: "Balance:" }), _jsx("span", { style: {
+                                                        color: primary,
+                                                        fontFamily: uiFont,
+                                                        fontSize: "14px",
+                                                        fontWeight: 500,
+                                                        lineHeight: "20px",
+                                                        whiteSpace: "nowrap",
+                                                    }, children: destinationBalanceLabel })] })) })] }), _jsx(ExactOutPercentButtons, { onSelect: handlePercentSelect, visible: Boolean(toToken) && !isAmountReadOnly })] })] }), _jsx(SharedPayWithSources, { fromTokens: fromTokens, isSourcePickerDisabled: isSourcePickerDisabled, onOpenSourcePicker: onOpenSourcePicker, reserveSourceRows: reserveSourceRows, routeMessage: routeMessage, routeStatus: routeStatus, showAutoBadge: showAutoBadge })] }));
+}

package/dist/nexus-widget/components/status-alerts.d.ts

@@ -0,0 +1,7 @@
+export type AlertType = "error" | "info" | "warning";
+export declare function StatusAlert({ type, message, className, }: Readonly<{
+    type: AlertType;
+    message: React.ReactNode;
+    className?: string;
+}>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=status-alerts.d.ts.map