@coinbase/cdp-react 0.0.28 → 0.0.29

package/dist/assets/AmountInput.css

@@ -1 +1 @@
-.AmountInput-module__amount-input___24NlC{box-sizing:border-box;color:var(--cdp-web-colors-page-text-default);font-family:var(--cdp-web-font-family-sans);font-size:var(--cdp-web-font-size-base);line-height:1.2;display:flex;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;position:relative;width:100%}.AmountInput-module__input___Af-R1{appearance:textfield;background-color:transparent;color:var(--cdp-web-colors-page-text-default);border:0;font-size:1em;font-family:var(--cdp-web-font-family-sans);font-weight:600;margin:0;outline:0;padding:0;width:1em}.AmountInput-module__input___Af-R1::placeholder{color:var(--cdp-web-colors-page-text-muted)}.AmountInput-module__amount-unit___48d60{font-size:3.75em;font-weight:600;display:flex;align-items:center;justify-content:flex-start}.AmountInput-module__amount-unit___48d60.AmountInput-module__visible___qmvT0{cursor:text;transform-origin:left center}.AmountInput-module__hidden___cO0sQ{visibility:hidden;position:absolute;pointer-events:none}.AmountInput-module__unit___-zmGz{color:var(--cdp-web-colors-page-text-muted);text-transform:uppercase}
+.AmountInput-module__amount-input___24NlC{box-sizing:border-box;color:var(--cdp-web-colors-page-text-default);font-family:var(--cdp-web-font-family-sans);font-size:var(--cdp-web-font-size-base);line-height:1.2;display:flex;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;position:relative;width:100%}.AmountInput-module__input___Af-R1{appearance:textfield;background-color:transparent;color:var(--cdp-web-colors-page-text-default);border:0;font-size:1em;font-family:var(--cdp-web-font-family-sans);font-weight:500;margin:0;outline:0;padding:0;width:1em}.AmountInput-module__input___Af-R1::placeholder{color:var(--cdp-web-colors-page-text-muted)}.AmountInput-module__amount-unit___48d60{font-size:3.75em;font-weight:500;display:flex;align-items:center;justify-content:flex-start}.AmountInput-module__amount-unit___48d60.AmountInput-module__visible___qmvT0{cursor:text;transform-origin:left center}.AmountInput-module__hidden___cO0sQ{visibility:hidden;position:absolute;pointer-events:none}.AmountInput-module__unit___-zmGz{color:var(--cdp-web-colors-page-text-muted)}

package/dist/assets/Button.css

@@ -1 +1 @@
-.Button-module__btn___Wj6Dr{--cdp-web-button-ring-color: transparent;--cdp-web-button-ring-width: 2px;--cdp-web-button-ring-inset-color: transparent;--cdp-web-button-ring-inset-width: 2px;border-radius:9999em}.Button-module__link-primary___6Zgkh,.Button-module__link-secondary___S0Qdo{padding:0 .25em}.Button-module__primary___WGT--{background-color:var(--cdp-web-colors-cta-primary-bg-default);color:var(--cdp-web-colors-cta-primary-text-default)}.Button-module__primary___WGT--:hover{background-color:var(--cdp-web-colors-cta-primary-bg-hover);color:var(--cdp-web-colors-cta-primary-text-hover)}.Button-module__primary___WGT--:focus{outline:none}.Button-module__primary___WGT--:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-cta-primary-border-focus);--cdp-web-button-ring-inset-color: var(--cdp-web-colors-page-bg-default);outline:none}.Button-module__secondary___Fx0LJ{background-color:var(--cdp-web-colors-cta-secondary-bg-default);color:var(--cdp-web-colors-cta-secondary-text-default)}.Button-module__secondary___Fx0LJ:hover{background-color:var(--cdp-web-colors-cta-secondary-bg-hover);color:var(--cdp-web-colors-cta-secondary-text-hover)}.Button-module__secondary___Fx0LJ:focus{outline:none}.Button-module__secondary___Fx0LJ:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-cta-secondary-border-focus);--cdp-web-button-ring-inset-color: var(--cdp-web-colors-page-bg-default);outline:none}.Button-module__link-primary___6Zgkh,.Button-module__transparent-primary___iwWv5{background-color:transparent;color:var(--cdp-web-colors-link-primary-text-default)}.Button-module__link-primary___6Zgkh:hover,.Button-module__transparent-primary___iwWv5:hover{color:var(--cdp-web-colors-link-primary-text-hover)}.Button-module__link-primary___6Zgkh:focus,.Button-module__transparent-primary___iwWv5:focus{outline:none}.Button-module__link-primary___6Zgkh:focus-visible,.Button-module__transparent-primary___iwWv5:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-link-primary-text-default);outline:none}.Button-module__link-secondary___S0Qdo,.Button-module__transparent-secondary___GfRXu{background-color:transparent;color:var(--cdp-web-colors-link-secondary-text-default)}.Button-module__link-secondary___S0Qdo:hover,.Button-module__transparent-secondary___GfRXu:hover{color:var(--cdp-web-colors-link-secondary-text-hover)}.Button-module__link-secondary___S0Qdo:focus,.Button-module__transparent-secondary___GfRXu:focus{outline:none}.Button-module__link-secondary___S0Qdo:focus-visible,.Button-module__transparent-secondary___GfRXu:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-link-secondary-text-default);outline:none}.Button-module__control-btn___9Gkoz{--cdp-web-button-ring-inset-color: var(--cdp-web-colors-input-border-default);--cdp-web-button-ring-inset-width: 1px;background-color:var(--cdp-web-colors-input-bg-default);border-radius:.5em;color:var(--cdp-web-colors-input-text-default);font-weight:400}.Button-module__control-btn___9Gkoz:focus{outline:none}.Button-module__control-btn___9Gkoz:focus-visible{--cdp-web-button-ring-inset-color: var(--cdp-web-colors-input-border-focus);--cdp-web-button-ring-inset-width: 2px;outline:none}
+.Button-module__btn___Wj6Dr{--cdp-web-button-ring-color: transparent;--cdp-web-button-ring-width: 2px;--cdp-web-button-ring-inset-color: transparent;--cdp-web-button-ring-inset-width: 2px;border-radius:9999em}.Button-module__link-primary___6Zgkh,.Button-module__link-secondary___S0Qdo{padding:0 .25em}.Button-module__primary___WGT--{background-color:var(--cdp-web-colors-cta-primary-bg-default);color:var(--cdp-web-colors-cta-primary-text-default)}.Button-module__primary___WGT--:hover{background-color:var(--cdp-web-colors-cta-primary-bg-hover);color:var(--cdp-web-colors-cta-primary-text-hover)}.Button-module__primary___WGT--:focus{outline:none}.Button-module__primary___WGT--:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-cta-primary-border-focus);--cdp-web-button-ring-inset-color: var(--cdp-web-colors-page-bg-default);outline:none}.Button-module__secondary___Fx0LJ{background-color:var(--cdp-web-colors-cta-secondary-bg-default);color:var(--cdp-web-colors-cta-secondary-text-default)}.Button-module__secondary___Fx0LJ:hover{background-color:var(--cdp-web-colors-cta-secondary-bg-hover);color:var(--cdp-web-colors-cta-secondary-text-hover)}.Button-module__secondary___Fx0LJ:focus{outline:none}.Button-module__secondary___Fx0LJ:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-cta-secondary-border-focus);--cdp-web-button-ring-inset-color: var(--cdp-web-colors-page-bg-default);outline:none}.Button-module__link-primary___6Zgkh,.Button-module__transparent-primary___iwWv5{background-color:transparent;color:var(--cdp-web-colors-link-primary-text-default)}.Button-module__link-primary___6Zgkh:hover,.Button-module__transparent-primary___iwWv5:hover{color:var(--cdp-web-colors-link-primary-text-hover)}.Button-module__link-primary___6Zgkh:focus,.Button-module__transparent-primary___iwWv5:focus{outline:none}.Button-module__link-primary___6Zgkh:focus-visible,.Button-module__transparent-primary___iwWv5:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-link-primary-text-default);outline:none}.Button-module__link-secondary___S0Qdo,.Button-module__transparent-secondary___GfRXu{background-color:transparent;color:var(--cdp-web-colors-link-secondary-text-default)}.Button-module__link-secondary___S0Qdo:hover,.Button-module__transparent-secondary___GfRXu:hover{color:var(--cdp-web-colors-link-secondary-text-hover)}.Button-module__link-secondary___S0Qdo:focus,.Button-module__transparent-secondary___GfRXu:focus{outline:none}.Button-module__link-secondary___S0Qdo:focus-visible,.Button-module__transparent-secondary___GfRXu:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-link-secondary-text-default);outline:none}.Button-module__control-btn___9Gkoz{--cdp-web-button-ring-inset-color: var(--cdp-web-colors-select-trigger-border-default);--cdp-web-button-ring-inset-width: 1px;background-color:var(--cdp-web-colors-select-trigger-bg-default);border-radius:.5em;color:var(--cdp-web-colors-select-trigger-text-default);font-weight:400}.Button-module__control-btn___9Gkoz:focus{outline:none}.Button-module__control-btn___9Gkoz:focus-visible{--cdp-web-button-ring-inset-color: var(--cdp-web-colors-input-border-focus);--cdp-web-button-ring-inset-width: 2px;outline:none}

package/dist/components/Fund/FundForm.js

@@ -1,68 +1,64 @@
 import { jsx as r, jsxs as H } from "react/jsx-runtime";
-import { useRef as f, useState as p, useCallback as a, useEffect as h, useMemo as J } from "react";
+import { useRef as c, useState as h, useCallback as s, useEffect as y, useMemo as J } from "react";
 import { Button as Y } from "../ui/Button/index.js";
 import { SwitchFadeTransition as Q } from "../ui/SwitchFadeTransition/index.js";
 import { useTimer as X } from "../../hooks/useTimer.js";
 import { formatFiat as w } from "../../utils/formatFiat.js";
 import { openPopup as Z } from "../../utils/openPopup.js";
-import { FundAmountInput as O } from "./components/FundAmountInput.js";
-import { FundErrorScreen as tt } from "./components/FundErrorScreen.js";
-import { FundPaymentMethods as et } from "./components/FundPaymentMethods.js";
-import { FundPresetAmountInputs as rt } from "./components/FundPresetAmountInputs.js";
-import { FundTransactionStatus as nt } from "./components/FundTransactionStatus.js";
-import { useFundContext as ot } from "./FundProvider.js";
+import { FundAmountInput as tt } from "./components/FundAmountInput.js";
+import { FundErrorScreen as et } from "./components/FundErrorScreen.js";
+import { FundPaymentMethods as rt } from "./components/FundPaymentMethods.js";
+import { FundPresetAmountInputs as nt } from "./components/FundPresetAmountInputs.js";
+import { FundTransactionStatus as ot } from "./components/FundTransactionStatus.js";
+import { useFundContext as st } from "./FundProvider.js";
 import { usePopupMonitor as it } from "./hooks/usePopupMonitor.js";
-import '../../assets/FundForm.css';const at = "FundForm-module__view___5V1qO", st = "FundForm-module__form___TIzVJ", B = {
+import '../../assets/FundForm.css';const at = "FundForm-module__view___5V1qO", ut = "FundForm-module__form___TIzVJ", B = {
   view: at,
-  form: st
-}, mt = ["form", "error", "transaction-status"], _t = ({
-  className: E = "",
-  children: y,
-  onPopupClose: A,
-  onPopupOpen: M,
+  form: ut
+}, mt = ["form", "error", "transaction-status"], Ft = ({
+  className: T = "",
+  children: A,
+  onPopupClose: N,
+  onPopupOpen: S,
   onSubmit: I,
   openIn: V,
   submitLabel: D,
-  unmountOnTransactionError: s = !1,
-  unmountOnTransactionSuccess: m = !1,
-  unmount: u,
-  ...T
+  unmountOnTransactionError: d = !1,
+  unmountOnTransactionSuccess: p = !1,
+  unmount: a,
+  ...$
 }) => {
-  const { state: t, dispatch: N, fetchBuyUrl: P } = ot(), g = f(t.fiatAmount === void 0 ? NaN : t.fiatAmount), [$, S] = p(!1), [k, _] = p(!1), F = f(null), [j, K] = p(null), v = f(null), C = f(null), o = f(null), {
-    timeRemaining: d,
-    start: R,
-    reset: U
-  } = X(), n = a((e) => {
-    C.current !== e && (C.current = e, v.current?.transition.toggle(e));
-  }, []), l = a(() => {
-    u && (o.current === "transactionSuccess" && m || o.current === "error" && s) ? u() : n("form"), o.current = null, N({
+  const { state: t, dispatch: M, fetchBuyUrl: P } = st(), g = c(t.fiatAmount === void 0 ? NaN : t.fiatAmount), [k, _] = h(!1), [j, F] = h(!1), E = c(null), [K, L] = h(null), b = c(null), U = c(null), u = c(null), l = s(
+    (e) => (e === "transactionSuccess" || e === "transactionSubmitted") && p || e === "error" && d,
+    [p, d]
+  ), {
+    timeRemaining: f,
+    start: v,
+    reset: C
+  } = X(), n = s((e) => {
+    U.current !== e && (U.current = e, b.current?.transition.toggle(e));
+  }, []), m = s(() => {
+    a && l(u.current) ? a() : n("form"), u.current = null, M({
       type: "SET_TRANSACTION_STATUS",
       payload: { transactionStatus: { statusName: "init", statusData: null } }
     });
-  }, [n, N, u, m, s]), L = a(() => {
-    u && (o.current === "transactionSuccess" && m || o.current === "error" && s) ? R(3) : o.current === null && l(), A?.();
-  }, [
-    R,
-    A,
-    l,
-    u,
-    m,
-    s
-  ]);
-  h(() => {
-    d !== null && d <= 0 && (l(), U());
-  }, [d, l, U]), h(() => {
-    (t.transactionStatus.statusName === "transactionSuccess" || t.transactionStatus.statusName === "error") && (o.current = t.transactionStatus.statusName);
-  }, [t.transactionStatus.statusName]), h(() => {
+  }, [n, M, a, l]), O = s(() => {
+    a && l(u.current) ? v(3) : u.current === null && m(), N?.();
+  }, [v, N, m, a, l]);
+  y(() => {
+    f !== null && f <= 0 && (m(), C());
+  }, [f, m, C]), y(() => {
+    (t.transactionStatus.statusName === "transactionSubmitted" || t.transactionStatus.statusName === "transactionSuccess" || t.transactionStatus.statusName === "error") && (u.current = t.transactionStatus.statusName);
+  }, [t.transactionStatus.statusName]), y(() => {
     t.paymentMethodsError?.message && n("error");
   }, [t.paymentMethodsError?.message, n]);
-  const { startPopupMonitor: b } = it(L), W = a(
+  const { startPopupMonitor: R } = it(O), W = s(
     (e) => {
-      e && (n("transaction-status"), b(e), M?.(e));
+      e && (n("transaction-status"), R(e), S?.(e));
     },
-    [M, b, n]
-  ), q = a(() => {
-    (t.fiatAmount === void 0 || isNaN(t.fiatAmount)) && isNaN(g.current) || t.fiatAmount === g.current || S(!0);
+    [S, R, n]
+  ), q = s(() => {
+    (t.fiatAmount === void 0 || isNaN(t.fiatAmount)) && isNaN(g.current) || t.fiatAmount === g.current || _(!0);
   }, [t.fiatAmount]), x = J(() => {
     if (t.fiatAmount === void 0 || isNaN(t.fiatAmount))
       return "Enter an amount";
@@ -77,7 +73,7 @@ import '../../assets/FundForm.css';const at = "FundForm-module__view___5V1qO", s
     t.locale,
     t.selectedPaymentMethod?.minAmount,
     t.selectedPaymentMethod?.maxAmount
-  ]), z = a(async () => {
+  ]), z = s(async () => {
     if (!(t.fiatAmount === void 0 || isNaN(t.fiatAmount) || !t.selectedPaymentMethod?.id))
       return P(
         {
@@ -85,7 +81,7 @@ import '../../assets/FundForm.css';const at = "FundForm-module__view___5V1qO", s
           paymentAmount: t.fiatAmount
         },
         (e) => {
-          K({
+          L({
             code: e?.code || "UNKNOWN_BUY_URL_ERROR",
             message: e?.debugMessage || "Something went wrong fetching the buy url"
           }), n("error");
@@ -93,17 +89,17 @@ import '../../assets/FundForm.css';const at = "FundForm-module__view___5V1qO", s
       );
   }, [t.fiatAmount, t.selectedPaymentMethod?.id, P, n]), G = async (e) => {
     if (e.preventDefault(), x) {
-      S(!0), F.current?.focus();
+      _(!0), E.current?.focus();
       return;
     }
-    I?.(e), _(!0);
-    const c = await z();
-    if (_(!1), c)
+    I?.(e), F(!0);
+    const i = await z();
+    if (F(!1), i)
       if (V === "tab")
-        window.open(c, "_blank");
+        window.open(i, "_blank");
       else {
-        const i = Z({ url: c, width: 460, height: 720 });
-        W(i);
+        const o = Z({ url: i, width: 460, height: 720 });
+        W(o);
       }
   };
   return /* @__PURE__ */ r(
@@ -113,44 +109,44 @@ import '../../assets/FundForm.css';const at = "FundForm-module__view___5V1qO", s
       timeout: 250,
       items: mt,
       initialEntered: !0,
-      transitionRef: v,
-      children: ({ itemKey: e, ...c }) => {
-        let i = null;
-        return e === "form" && (i = /* @__PURE__ */ H("form", { className: `${B.form} ${E}`, onSubmit: G, ...T, children: [
+      transitionRef: b,
+      children: ({ itemKey: e, ...i }) => {
+        let o = null;
+        return e === "form" && (o = /* @__PURE__ */ H("form", { className: `${B.form} ${T}`, onSubmit: G, ...$, children: [
           /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
-            O,
+            tt,
             {
-              ref: F,
-              error: $ ? x : void 0,
+              ref: E,
+              error: k ? x : void 0,
               onBlur: q
             }
           ) }),
+          /* @__PURE__ */ r(nt, {}),
           /* @__PURE__ */ r(rt, {}),
-          /* @__PURE__ */ r(et, {}),
           /* @__PURE__ */ r(
             Y,
             {
               variant: "primary",
               type: "submit",
-              isPending: k,
+              isPending: j,
               pendingLabel: "Getting purchase link",
               children: D || "Deposit"
             }
           )
-        ] })), e === "error" && (i = /* @__PURE__ */ r(tt, { error: t.paymentMethodsError || j })), e === "transaction-status" && (i = /* @__PURE__ */ r(
-          nt,
+        ] })), e === "error" && (o = /* @__PURE__ */ r(et, { error: t.paymentMethodsError || K })), e === "transaction-status" && (o = /* @__PURE__ */ r(
+          ot,
           {
-            unmountOnSuccess: m,
-            unmountOnError: s,
-            reset: l,
-            timeRemaining: d
+            unmountOnSuccess: p,
+            unmountOnError: d,
+            reset: m,
+            timeRemaining: f
           }
-        )), /* @__PURE__ */ r("div", { ...c, className: B.view, children: y ? y({ view: e, Content: i }) : i });
+        )), /* @__PURE__ */ r("div", { ...i, className: B.view, children: A ? A({ view: e, Content: o }) : o });
       }
     }
   );
 };
 export {
-  _t as FundForm,
+  Ft as FundForm,
   mt as VIEWS
 };

package/dist/components/Fund/components/FundTransactionStatus.js

@@ -1,106 +1,125 @@
-import { jsx as s, jsxs as r, Fragment as i } from "react/jsx-runtime";
-import { useRef as d, useCallback as h, useEffect as S, useMemo as g } from "react";
-import { Button as l } from "../../ui/Button/index.js";
-import { LoadingSpinner as T } from "../../ui/LoadingSpinner/index.js";
-import { SwitchFadeTransition as N } from "../../ui/SwitchFadeTransition/index.js";
+import { jsx as t, jsxs as c, Fragment as i } from "react/jsx-runtime";
+import { useRef as l, useCallback as _, useEffect as S, useMemo as g } from "react";
+import { Button as o } from "../../ui/Button/index.js";
+import { LoadingSpinner as N } from "../../ui/LoadingSpinner/index.js";
+import { SwitchFadeTransition as T } from "../../ui/SwitchFadeTransition/index.js";
 import { IconCheck as f } from "../../../icons/IconCheck.js";
-import { IconXMark as F } from "../../../icons/IconXMark.js";
+import { IconCurrencies as $ } from "../../../icons/IconCurrencies.js";
+import { IconXMark as w } from "../../../icons/IconXMark.js";
 import { useFundContext as m } from "../FundProvider.js";
-import '../../../assets/FundTransactionStatus.css';const y = "FundTransactionStatus-module__graphic___cam38", $ = "FundTransactionStatus-module__status___2zKJu", k = "FundTransactionStatus-module__pad___-9rGO", w = "FundTransactionStatus-module__spinner___94rMk", C = "FundTransactionStatus-module__icon___0hBQO", b = "FundTransactionStatus-module__subhead___0sHIM", M = "FundTransactionStatus-module__description___W7kK2", v = "FundTransactionStatus-module__ring___1vnCu", t = {
+import '../../../assets/FundTransactionStatus.css';const y = "FundTransactionStatus-module__graphic___cam38", b = "FundTransactionStatus-module__status___2zKJu", C = "FundTransactionStatus-module__pad___-9rGO", F = "FundTransactionStatus-module__spinner___94rMk", k = "FundTransactionStatus-module__icon___0hBQO", v = "FundTransactionStatus-module__subhead___0sHIM", M = "FundTransactionStatus-module__description___W7kK2", W = "FundTransactionStatus-module__ring___1vnCu", s = {
   graphic: y,
-  status: $,
-  pad: k,
-  spinner: w,
-  icon: C,
+  status: b,
+  pad: C,
+  spinner: F,
+  icon: k,
   "icon-success": "FundTransactionStatus-module__icon-success___893VG",
   "icon-error": "FundTransactionStatus-module__icon-error___-aQvD",
-  subhead: b,
+  subhead: v,
   description: M,
-  ring: v,
+  ring: W,
   "ring-success": "FundTransactionStatus-module__ring-success___Bxudq",
   "ring-error": "FundTransactionStatus-module__ring-error___WmTaE"
-}, W = ["waiting", "transactionSuccess", "error"], q = (a) => {
-  const { state: n } = m(), e = d(null), o = d(null), u = h((c) => {
-    o.current !== c && (o.current = c, e.current?.transition.toggle(c));
+}, P = ["waiting", "transactionSubmitted", "transactionSuccess", "error"], D = (n) => {
+  const { state: a } = m(), r = l(null), u = l(null), d = _((e) => {
+    u.current !== e && (u.current = e, r.current?.transition.toggle(e));
   }, []);
   return S(() => {
-    (n.transactionStatus.statusName === "transactionSuccess" || n.transactionStatus.statusName === "error") && u(n.transactionStatus.statusName);
-  }, [n.transactionStatus.statusName, u]), /* @__PURE__ */ s(
-    N,
+    (a.transactionStatus.statusName === "transactionSubmitted" || a.transactionStatus.statusName === "transactionSuccess" || a.transactionStatus.statusName === "error") && d(a.transactionStatus.statusName);
+  }, [a.transactionStatus.statusName, d]), /* @__PURE__ */ t(
+    T,
     {
       animateHeight: !1,
       timeout: 250,
-      items: W,
+      items: P,
       initialEntered: !0,
-      transitionRef: e,
-      children: ({ itemKey: c, ..._ }) => {
-        const p = E[c];
-        return /* @__PURE__ */ s("div", { ..._, className: t.status, children: /* @__PURE__ */ s(p, { ...a }) });
+      transitionRef: r,
+      children: ({ itemKey: e, ...p }) => {
+        const h = E[e];
+        return /* @__PURE__ */ t("div", { ...p, className: s.status, children: /* @__PURE__ */ t(h, { ...n }) });
       }
     }
   );
 }, x = () => {
-  const { state: a } = m(), n = g(
-    () => a.paymentMethods?.find((e) => e.id === a.selectedPaymentMethod?.id),
-    [a.paymentMethods, a.selectedPaymentMethod?.id]
+  const { state: n } = m(), a = g(
+    () => n.paymentMethods?.find((r) => r.id === n.selectedPaymentMethod?.id),
+    [n.paymentMethods, n.selectedPaymentMethod?.id]
   );
-  return /* @__PURE__ */ r(i, { children: [
-    /* @__PURE__ */ r("div", { className: t.graphic, children: [
-      /* @__PURE__ */ s(
-        T,
+  return /* @__PURE__ */ c(i, { children: [
+    /* @__PURE__ */ c("div", { className: s.graphic, children: [
+      /* @__PURE__ */ t(
+        N,
         {
           strokeWidth: "5%",
           staticStroke: !0,
           staticStrokeColor: "var(--cdp-web-colors-line-default)",
-          className: t.spinner
+          className: s.spinner
         }
       ),
-      n && /* @__PURE__ */ s("span", { className: t.icon, children: n.icon })
+      a && /* @__PURE__ */ t("span", { className: s.icon, children: a.icon })
     ] }),
-    /* @__PURE__ */ s("p", { className: t.subhead, children: "Waiting" }),
-    /* @__PURE__ */ r("p", { className: t.description, children: [
-      "Deposit ",
-      a.cryptoAmount,
-      " ",
-      a.cryptoCurrency,
-      n ? ` via ${n.name}` : ""
+    /* @__PURE__ */ t("p", { className: s.subhead, children: "Waiting" }),
+    /* @__PURE__ */ c("p", { className: s.description, children: [
+      "Purchase ",
+      n.cryptoCurrency.toUpperCase(),
+      " with ",
+      n.fiatCurrency.toUpperCase(),
+      a ? ` via ${a.name}` : ""
     ] })
   ] });
-}, P = ({
-  reset: a,
-  timeRemaining: n,
-  unmountOnSuccess: e
-}) => /* @__PURE__ */ r(i, { children: [
-  /* @__PURE__ */ r("div", { className: `${t.graphic} ${t.pad}`, children: [
-    /* @__PURE__ */ s("span", { className: `${t.ring} ${t["ring-success"]}` }),
-    /* @__PURE__ */ s("span", { className: `${t.icon} ${t["icon-success"]}`, children: /* @__PURE__ */ s(f, {}) })
+}, G = ({
+  reset: n,
+  timeRemaining: a,
+  unmountOnSuccess: r
+}) => /* @__PURE__ */ c(i, { children: [
+  /* @__PURE__ */ c("div", { className: `${s.graphic} ${s.pad}`, children: [
+    /* @__PURE__ */ t("span", { className: `${s.ring} ${s["ring-success"]}` }),
+    /* @__PURE__ */ t("span", { className: `${s.icon} ${s["icon-success"]}`, children: /* @__PURE__ */ t($, {}) })
   ] }),
-  /* @__PURE__ */ s("p", { className: t.subhead, children: "Success" }),
-  e && /* @__PURE__ */ r("p", { className: t.description, children: [
+  /* @__PURE__ */ t("p", { className: s.subhead, children: "Your funds are on the way" }),
+  r && /* @__PURE__ */ c("p", { className: s.description, children: [
     "This window will automatically close",
     " ",
-    n === null ? "soon" : `in ${n}`
+    a === null ? "soon" : `in ${a}`
   ] }),
-  !e && /* @__PURE__ */ s("p", { className: t.description, children: "Your transaction was successful." }),
-  !e && a !== void 0 && /* @__PURE__ */ s(l, { fullWidth: !0, onClick: a, children: "Go back" })
-] }), B = ({ reset: a, timeRemaining: n, unmountOnError: e }) => /* @__PURE__ */ r(i, { children: [
-  /* @__PURE__ */ r("div", { className: `${t.graphic} ${t.pad}`, children: [
-    /* @__PURE__ */ s("span", { className: `${t.ring} ${t["ring-error"]}` }),
-    /* @__PURE__ */ s("span", { className: `${t.icon} ${t["icon-error"]}`, children: /* @__PURE__ */ s(F, {}) })
+  !r && /* @__PURE__ */ t("p", { className: s.description, children: "Your transaction was submitted." }),
+  !r && n !== void 0 && /* @__PURE__ */ t(o, { fullWidth: !0, onClick: n, children: "Go back" })
+] }), I = ({
+  reset: n,
+  timeRemaining: a,
+  unmountOnSuccess: r
+}) => /* @__PURE__ */ c(i, { children: [
+  /* @__PURE__ */ c("div", { className: `${s.graphic} ${s.pad}`, children: [
+    /* @__PURE__ */ t("span", { className: `${s.ring} ${s["ring-success"]}` }),
+    /* @__PURE__ */ t("span", { className: `${s.icon} ${s["icon-success"]}`, children: /* @__PURE__ */ t(f, {}) })
   ] }),
-  /* @__PURE__ */ s("p", { className: t.subhead, children: "Payment failed" }),
-  e && /* @__PURE__ */ r("p", { className: t.description, children: [
+  /* @__PURE__ */ t("p", { className: s.subhead, children: "Success" }),
+  r && /* @__PURE__ */ c("p", { className: s.description, children: [
     "This window will automatically close",
     " ",
-    n === null ? "soon" : `in ${n}`
+    a === null ? "soon" : `in ${a}`
   ] }),
-  !e && /* @__PURE__ */ s("p", { className: t.description, children: "Something went wrong. Please try again." }),
-  !e && a !== void 0 && /* @__PURE__ */ s(l, { fullWidth: !0, onClick: a, children: "Try again" })
+  !r && /* @__PURE__ */ t("p", { className: s.description, children: "Your transaction was successful." }),
+  !r && n !== void 0 && /* @__PURE__ */ t(o, { fullWidth: !0, onClick: n, children: "Go back" })
+] }), B = ({ reset: n, timeRemaining: a, unmountOnError: r }) => /* @__PURE__ */ c(i, { children: [
+  /* @__PURE__ */ c("div", { className: `${s.graphic} ${s.pad}`, children: [
+    /* @__PURE__ */ t("span", { className: `${s.ring} ${s["ring-error"]}` }),
+    /* @__PURE__ */ t("span", { className: `${s.icon} ${s["icon-error"]}`, children: /* @__PURE__ */ t(w, {}) })
+  ] }),
+  /* @__PURE__ */ t("p", { className: s.subhead, children: "Payment failed" }),
+  r && /* @__PURE__ */ c("p", { className: s.description, children: [
+    "This window will automatically close",
+    " ",
+    a === null ? "soon" : `in ${a}`
+  ] }),
+  !r && /* @__PURE__ */ t("p", { className: s.description, children: "Something went wrong. Please try again." }),
+  !r && n !== void 0 && /* @__PURE__ */ t(o, { fullWidth: !0, onClick: n, children: "Try again" })
 ] }), E = {
   waiting: x,
-  transactionSuccess: P,
+  transactionSubmitted: G,
+  transactionSuccess: I,
   error: B
 };
 export {
-  q as FundTransactionStatus
+  D as FundTransactionStatus
 };

package/dist/components/Fund/hooks/useBuyUrl.js

@@ -1,37 +1,37 @@
-import { useCallback as f, useMemo as y } from "react";
-const R = ({
-  country: a,
-  cryptoCurrency: n,
+import { useCallback as y, useMemo as _ } from "react";
+const N = ({
+  country: t,
+  cryptoCurrency: a,
   destinationAddress: o,
-  fetchBuyQuote: s,
-  fiatCurrency: t,
+  fetchBuyQuote: c,
+  fiatCurrency: n,
   network: u,
-  onError: c,
-  subdivision: d
+  onError: s,
+  subdivision: p
 }) => {
-  const l = f(
-    async ({ paymentMethod: m, paymentAmount: p }, U) => {
-      if (isNaN(p) || !o || !m)
+  const U = y(
+    async ({ paymentMethod: d, paymentAmount: i }, l) => {
+      if (isNaN(i) || !o || !d)
         return "";
       try {
-        const e = (await s({
-          purchaseCurrency: n,
-          purchaseNetwork: u,
-          paymentCurrency: t,
-          paymentAmount: p.toFixed(),
-          paymentMethod: m.replace("_GUEST", ""),
+        const e = (await c({
+          purchaseCurrency: a.toUpperCase(),
+          purchaseNetwork: u.toLowerCase(),
+          paymentCurrency: n.toUpperCase(),
+          paymentAmount: i.toFixed(),
+          paymentMethod: d.replace("_GUEST", ""),
           // remove "_GUEST" from the payment method since it is not valid in the Buy Quote API
-          country: a,
-          subdivision: d,
+          country: t.toUpperCase(),
+          subdivision: p?.toUpperCase(),
           destinationAddress: o
         })).onrampUrl;
         if (!e) {
-          const _ = {
+          const m = {
             errorType: "handled_error",
             code: "NO_ONRAMP_URL",
             debugMessage: "No payment methods found for the selected country and currency. See docs for more information: https://docs.cdp.coinbase.com/onramp/docs/api-configurations"
           };
-          return U?.(_), c?.(_), "";
+          return l?.(m), s?.(m), "";
         }
         return e;
       } catch (r) {
@@ -44,22 +44,22 @@ const R = ({
           errorType: "unknown_error",
           code: "UNKNOWN_BUY_URL_ERROR",
           debugMessage: JSON.stringify(r)
-        }, U?.(e), c?.(e), "";
+        }, l?.(e), s?.(e), "";
       }
     },
     [
+      t,
       a,
-      n,
       o,
-      s,
-      t,
-      u,
       c,
-      d
+      n,
+      u,
+      s,
+      p
     ]
   );
-  return y(() => ({ fetchBuyUrl: l }), [l]);
+  return _(() => ({ fetchBuyUrl: U }), [U]);
 };
 export {
-  R as useBuyUrl
+  N as useBuyUrl
 };

package/dist/components/Fund/hooks/useSetupOnrampEventListeners.js

@@ -1,53 +1,58 @@
-import { useCallback as n, useEffect as u } from "react";
-import { useFundContext as c } from "../FundProvider.js";
-import { setupOnrampEventListeners as i } from "../utils/setupOnrampEventListeners.js";
-const e = (t) => ({
+import { useCallback as n, useEffect as o } from "react";
+import { useFundContext as i } from "../FundProvider.js";
+import { setupOnrampEventListeners as c } from "../utils/setupOnrampEventListeners.js";
+const s = (t) => ({
   type: "SET_TRANSACTION_STATUS",
   payload: {
     transactionStatus: t
   }
 }), S = () => {
-  const { dispatch: t } = c(), a = n(
-    (s) => {
-      s.eventName === "transition_view" ? t(
-        e({
+  const { dispatch: t } = i(), a = n(
+    (e) => {
+      e.eventName === "transition_view" ? e.pageRoute.endsWith("/order-submitted") ? t(
+        s({
+          statusName: "transactionSubmitted",
+          statusData: null
+        })
+      ) : t(
+        s({
           statusName: "transactionPending",
           statusData: null
         })
-      ) : s.eventName === "error" && t(
-        e({
+      ) : e.eventName === "error" && t(
+        s({
           statusName: "error",
-          statusData: s.error
+          statusData: e.error
         })
       );
     },
     [t]
   ), r = n(
-    (s) => {
+    (e) => {
       t(
-        e({
+        s({
           statusName: "transactionSuccess",
-          statusData: s || null
+          statusData: e || null
         })
       );
     },
     [t]
-  ), o = n(() => {
+  ), u = n(() => {
     t(
-      e({
+      s({
         statusName: "exit",
         statusData: null
       })
     );
   }, [t]);
-  u(() => {
-    const s = i({
+  o(() => {
+    const e = c({
       onEvent: a,
-      onExit: o,
+      onExit: u,
       onSuccess: r
     });
     return () => {
-      s();
+      e();
     };
   }, []);
 };

package/dist/components/Fund/types.d.ts

@@ -59,6 +59,9 @@ export type FundLifecycleStatus = {
 } | {
     statusName: "error";
     statusData: OnrampError;
+} | {
+    statusName: "transactionSubmitted";
+    statusData: null;
 } | {
     statusName: "transactionSuccess";
     statusData: OnrampSuccessEventData | null;
@@ -66,6 +69,7 @@ export type FundLifecycleStatus = {
     statusName: "transactionPending";
     statusData: null;
 };
+export type FundTxResolution = Extract<FundLifecycleStatus["statusName"], "transactionSubmitted" | "transactionSuccess" | "error"> | null;
 export type FundLifecycleEvents = {
     onError?: (e: OnrampError | undefined) => void;
     onStatus?: (lifecycleStatus: FundLifecycleStatus) => void;

package/dist/components/Fund/utils/buildPaymentMethods.js

@@ -2,20 +2,20 @@ import { jsx as r } from "react/jsx-runtime";
 import { IconAppleLogo as u } from "../../../icons/IconAppleLogo.js";
 import { IconCoinbaseMark as A } from "../../../icons/IconCoinbaseMark.js";
 import { IconCreditCard as C } from "../../../icons/IconCreditCard.js";
-const s = 2, c = 500, M = (n) => [
+const s = 2, c = 500, b = (n) => [
   // Check API-provided methods
   n.some((e) => e.id === "ACH_BANK_ACCOUNT") && "ACH",
   n.some((e) => e.id === "CARD") && "debit",
   n.some((e) => e.id === "FIAT_WALLET") && "cash",
   // Always include these methods
   "crypto balance"
-].filter(Boolean).join(", "), b = ({ limits: n }) => {
+].filter(Boolean).join(", "), M = ({ limits: n }) => {
   const o = n.flatMap((t) => t.min ? [Number(t.min)] : []), e = n.flatMap((t) => t.max ? [Number(t.max)] : []);
   return {
     id: n[0].id,
     // use the first limit id as the coinbase payment method id to avoid passing in an invalid option
     name: "Coinbase",
-    description: M(n),
+    description: b(n),
     icon: /* @__PURE__ */ r(A, {}),
     minAmount: o.length > 0 ? Math.min(...o) : s,
     maxAmount: e.length > 0 ? Math.max(...e) : c
@@ -33,25 +33,25 @@ const s = 2, c = 500, M = (n) => [
   }
 ].map((e) => {
   const t = n.limits.find(
-    (a) => a.id === e.id.replace("_GUEST", "")
+    (i) => i.id === e.id.replace("_GUEST", "")
   );
   return {
     ...e,
-    description: "Up to $500/week. No sign up required.",
+    description: `Up to $500/week. No sign up required.${e.id === "APPLE_PAY_GUEST" ? " Debit only." : ""}`,
     minAmount: Number(t?.min) || s,
     maxAmount: Number(t?.max) || c
   };
-}), N = (n, o, e) => {
-  const t = o.toUpperCase(), a = e.toUpperCase(), i = n.paymentCurrencies.find(
+}), f = (n, o, e) => {
+  const t = o.toUpperCase(), i = e.toUpperCase(), a = n.paymentCurrencies.find(
     (p) => p.id.toUpperCase() === t
   );
-  if (!i)
+  if (!a)
     return [];
-  const d = b(i);
+  const d = M(a);
   let m = [];
-  return a === "US" && t === "USD" && (m = l(i)), [d, ...m];
+  return i === "US" && t === "USD" && (m = l(a)), [d, ...m];
 };
 export {
-  M as buildCoinbasePaymentMethodDescription,
-  N as buildPaymentMethods
+  b as buildCoinbasePaymentMethodDescription,
+  f as buildPaymentMethods
 };

package/dist/components/forms/AmountInput/index.js

@@ -1,92 +1,92 @@
 import { jsxs as s, jsx as a } from "react/jsx-runtime";
-import { forwardRef as g, useRef as u, useCallback as j, useEffect as f } from "react";
-import { useAmountInput as q } from "./useAmountInput.js";
-import { useInputScale as z } from "./useInputScale.js";
-import '../../../assets/AmountInput.css';const w = "AmountInput-module__input___Af-R1", E = "AmountInput-module__visible___qmvT0", G = "AmountInput-module__hidden___cO0sQ", M = "AmountInput-module__unit___-zmGz", n = {
+import { forwardRef as g, useRef as u, useMemo as j, useCallback as q, useEffect as h } from "react";
+import { useAmountInput as z } from "./useAmountInput.js";
+import { useInputScale as M } from "./useInputScale.js";
+import '../../../assets/AmountInput.css';const w = "AmountInput-module__input___Af-R1", E = "AmountInput-module__visible___qmvT0", G = "AmountInput-module__hidden___cO0sQ", O = "AmountInput-module__unit___-zmGz", n = {
   "amount-input": "AmountInput-module__amount-input___24NlC",
   input: w,
   "amount-unit": "AmountInput-module__amount-unit___48d60",
   visible: E,
   hidden: G,
-  unit: M
-}, O = g(
+  unit: O
+}, P = g(
   ({
-    amount: h,
-    className: I = "",
-    unit: t,
-    decimalPlaces: p = 2,
-    locale: A,
-    max: R,
-    min: v,
+    amount: I,
+    className: A = "",
+    unit: p,
+    decimalPlaces: r = 2,
+    locale: R,
+    max: v,
+    min: C,
     setAmount: N,
     onBlur: y,
-    onPaste: C,
-    placeholder: r = "0",
-    ...$
-  }, e) => {
-    const o = u(null), l = u(null), c = u(null), m = u(null), d = u(null), { handleBlur: b, handleChange: x, handleBeforeInput: B, handlePaste: k, inputValue: i } = q(
+    onPaste: $,
+    placeholder: c = "0",
+    ...b
+  }, t) => {
+    const o = u(null), i = u(null), m = u(null), d = u(null), _ = u(null), e = j(() => p?.toUpperCase(), [p]), { handleBlur: x, handleChange: B, handleBeforeInput: k, handlePaste: S, inputValue: l } = z(
       {
-        amount: h,
-        decimalPlaces: p,
-        locale: A,
-        max: R,
-        min: v,
+        amount: I,
+        decimalPlaces: r,
+        locale: R,
+        max: v,
+        min: C,
         setAmount: N,
         onBlur: y,
-        onPaste: C
+        onPaste: $
       }
-    ), { updateScale: _ } = z({
-      containerRef: l,
-      measureRef: c,
-      valueRef: m,
+    ), { updateScale: f } = M({
+      containerRef: i,
+      measureRef: m,
+      valueRef: d,
       inputRef: o,
-      scaleWrapperRef: d
-    }), S = j(() => {
-      l.current?.querySelector("input[type='text']")?.focus();
+      scaleWrapperRef: _
+    }), U = q(() => {
+      i.current?.querySelector("input[type='text']")?.focus();
     }, []);
-    return f(() => {
-      _();
-    }, [i, t, p, _]), f(() => {
-      e && (typeof e == "function" ? e(o.current) : e.current = o.current);
-    }, [e]), /* @__PURE__ */ s("span", { ref: l, className: n["amount-input"], children: [
-      /* @__PURE__ */ s("span", { ref: d, className: `${n["amount-unit"]} ${n.visible}`, children: [
+    return h(() => {
+      f();
+    }, [l, e, r, f]), h(() => {
+      t && (typeof t == "function" ? t(o.current) : t.current = o.current);
+    }, [t]), /* @__PURE__ */ s("span", { ref: i, className: n["amount-input"], children: [
+      /* @__PURE__ */ s("span", { ref: _, className: `${n["amount-unit"]} ${n.visible}`, children: [
         /* @__PURE__ */ a(
           "input",
           {
-            className: `${n.input} ${I}`,
+            className: `${n.input} ${A}`,
             inputMode: "decimal",
-            onBlur: b,
-            onChange: x,
-            onBeforeInput: B,
-            onPaste: k,
-            placeholder: r,
+            onBlur: x,
+            onChange: B,
+            onBeforeInput: k,
+            onPaste: S,
+            placeholder: c,
             ref: o,
             type: "text",
-            value: i,
-            ...$
+            value: l,
+            ...b
           }
         ),
-        t && /* @__PURE__ */ a("span", { className: n.unit, onClick: S, children: t })
+        e && /* @__PURE__ */ a("span", { className: n.unit, onClick: U, children: e })
       ] }),
       /* @__PURE__ */ s(
         "span",
         {
-          ref: c,
+          ref: m,
           "aria-hidden": "true",
           className: `${n["amount-unit"]} ${n.hidden}`,
           children: [
-            /* @__PURE__ */ s("span", { ref: m, children: [
-              i || r,
+            /* @__PURE__ */ s("span", { ref: d, children: [
+              l || c,
               " "
             ] }),
-            t && /* @__PURE__ */ a("span", { children: t })
+            e && /* @__PURE__ */ a("span", { children: e })
           ]
         }
       )
     ] });
   }
 );
-O.displayName = "AmountInput";
+P.displayName = "AmountInput";
 export {
-  O as AmountInput
+  P as AmountInput
 };

package/dist/icons/IconCurrencies.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export declare const IconCurrencies: (props: Omit<SVGProps<SVGSVGElement>, "viewBox">) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/IconCurrencies.js

@@ -0,0 +1,11 @@
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import "react";
+import { SvgIcon as t } from "./SvgIcon.js";
+const h = (C) => /* @__PURE__ */ o(t, { width: "25", height: "24", viewBox: "0 0 25 24", fill: "currentColor", ...C, children: [
+  /* @__PURE__ */ r("path", { d: "M10.4523 10.6689L9.48873 8.35229L8.52518 10.6689L6.02417 10.8694L7.92968 12.5017L7.34752 14.9423L9.48873 13.6344L11.63 14.9423L11.0478 12.5017L12.9533 10.8694L10.4523 10.6689Z" }),
+  /* @__PURE__ */ r("path", { d: "M9.48877 20.4951C14.1832 20.4951 17.9888 16.6895 17.9888 11.9951C17.9888 7.3007 14.1832 3.49512 9.48877 3.49512C4.79435 3.49512 0.98877 7.3007 0.98877 11.9951C0.98877 16.6895 4.79435 20.4951 9.48877 20.4951ZM9.48877 18.4951C5.89892 18.4951 2.98877 15.585 2.98877 11.9951C2.98877 8.40527 5.89892 5.49512 9.48877 5.49512C13.0786 5.49512 15.9888 8.40527 15.9888 11.9951C15.9888 15.585 13.0786 18.4951 9.48877 18.4951Z" }),
+  /* @__PURE__ */ r("path", { d: "M18.9888 20.1215C22.4631 19.0539 24.9888 15.8194 24.9888 11.9951C24.9888 8.17069 22.4631 4.93622 18.9888 3.86865V5.99322C21.3377 6.97278 22.9888 9.2911 22.9888 11.9951C22.9888 14.699 21.3377 17.0173 18.9888 17.9969V20.1215Z" })
+] });
+export {
+  h as IconCurrencies
+};

package/dist/theme/theme.d.ts

@@ -168,7 +168,7 @@ export declare const theme: Flattened<{
                 };
                 readonly border: {
                     readonly default: {
-                        readonly value: "{colors.line.heavy}";
+                        readonly value: "{colors.line.default}";
                     };
                     readonly focus: {
                         readonly value: "{colors.line.primary}";
@@ -209,7 +209,7 @@ export declare const theme: Flattened<{
                 };
                 readonly border: {
                     readonly default: {
-                        readonly value: "{colors.line.heavy}";
+                        readonly value: "{colors.line.default}";
                     };
                     readonly focus: {
                         readonly value: "{colors.line.primary}";

package/dist/theme/tokens.d.ts

@@ -253,7 +253,7 @@ export declare const colorsComponents: {
             };
             readonly border: {
                 readonly default: {
-                    readonly value: "{colors.line.heavy}";
+                    readonly value: "{colors.line.default}";
                 };
                 readonly focus: {
                     readonly value: "{colors.line.primary}";
@@ -294,7 +294,7 @@ export declare const colorsComponents: {
             };
             readonly border: {
                 readonly default: {
-                    readonly value: "{colors.line.heavy}";
+                    readonly value: "{colors.line.default}";
                 };
                 readonly focus: {
                     readonly value: "{colors.line.primary}";
@@ -517,7 +517,7 @@ export declare const colors: {
             };
             readonly border: {
                 readonly default: {
-                    readonly value: "{colors.line.heavy}";
+                    readonly value: "{colors.line.default}";
                 };
                 readonly focus: {
                     readonly value: "{colors.line.primary}";
@@ -558,7 +558,7 @@ export declare const colors: {
             };
             readonly border: {
                 readonly default: {
-                    readonly value: "{colors.line.heavy}";
+                    readonly value: "{colors.line.default}";
                 };
                 readonly focus: {
                     readonly value: "{colors.line.primary}";
@@ -868,7 +868,7 @@ export declare const tokens: {
                 };
                 readonly border: {
                     readonly default: {
-                        readonly value: "{colors.line.heavy}";
+                        readonly value: "{colors.line.default}";
                     };
                     readonly focus: {
                         readonly value: "{colors.line.primary}";
@@ -909,7 +909,7 @@ export declare const tokens: {
                 };
                 readonly border: {
                     readonly default: {
-                        readonly value: "{colors.line.heavy}";
+                        readonly value: "{colors.line.default}";
                     };
                     readonly focus: {
                         readonly value: "{colors.line.primary}";

package/dist/theme/tokens.js

@@ -153,7 +153,7 @@ const e = {
         default: { value: "{colors.bg.default}" }
       },
       border: {
-        default: { value: "{colors.line.heavy}" },
+        default: { value: "{colors.line.default}" },
         focus: { value: "{colors.line.primary}" },
         error: { value: "{colors.line.negative}" },
         success: { value: "{colors.line.positive}" }
@@ -176,7 +176,7 @@ const e = {
         default: { value: "{colors.bg.default}" }
       },
       border: {
-        default: { value: "{colors.line.heavy}" },
+        default: { value: "{colors.line.default}" },
         focus: { value: "{colors.line.primary}" },
         error: { value: "{colors.line.negative}" },
         success: { value: "{colors.line.positive}" }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cdp-react",
-  "version": "0.0.28",
+  "version": "0.0.29",
   "type": "module",
   "dependencies": {
     "@internationalized/number": "3.6.4",
@@ -14,8 +14,8 @@
   },
   "peerDependencies": {
     "react": ">=18.2.0",
-    "@coinbase/cdp-core": "^0.0.28",
-    "@coinbase/cdp-hooks": "^0.0.28"
+    "@coinbase/cdp-core": "^0.0.29",
+    "@coinbase/cdp-hooks": "^0.0.29"
   },
   "devDependencies": {
     "@size-limit/preset-big-lib": "^11.2.0",
@@ -45,8 +45,8 @@
     "vite": "^7.0.4",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
-    "@coinbase/cdp-core": "^0.0.28",
-    "@coinbase/cdp-hooks": "^0.0.28"
+    "@coinbase/cdp-core": "^0.0.29",
+    "@coinbase/cdp-hooks": "^0.0.29"
   },
   "size-limit": [
     {