@coinbase/cdp-react 0.0.28 → 0.0.30

package/dist/components/Fund/index.js

@@ -1,30 +1,30 @@
-import { jsx as t, jsxs as m, Fragment as a } from "react/jsx-runtime";
-import { useId as F } from "react";
-import { useAppConfig as f } from "../CDPReactProvider/index.js";
-import { CoinbaseFooter as l } from "../ui/CoinbaseFooter/index.js";
-import { FundForm as p } from "./FundForm.js";
-import { FundProvider as c, useFundContext as _ } from "./FundProvider.js";
-import { FundTitle as b } from "./FundTitle.js";
-import { useSetupOnrampEventListeners as C } from "./hooks/useSetupOnrampEventListeners.js";
+import { jsx as t, jsxs as m, Fragment as f } from "react/jsx-runtime";
+import { useId as p } from "react";
+import { useAppConfig as F } from "../CDPReactProvider/index.js";
+import { CoinbaseFooter as c } from "../ui/CoinbaseFooter/index.js";
+import { FundForm as a } from "./FundForm.js";
+import { FundProvider as l, useFundContext as C } from "./FundProvider.js";
+import { FundTitle as _ } from "./FundTitle.js";
+import { useSetupOnrampEventListeners as b } from "./hooks/useSetupOnrampEventListeners.js";
 import '../../assets/Fund.css';const x = "Fund-module__fund___6j-Og", g = {
   fund: x
-}, E = ({ className: n = "", children: e, openIn: r, submitLabel: s, title: u, ...o }) => /* @__PURE__ */ t(c, { ...o, children: /* @__PURE__ */ t("div", { className: `${g.fund} ${n}`, children: /* @__PURE__ */ t(h, { openIn: r, submitLabel: s, title: u, children: e }) }) }), h = ({
-  children: n,
-  openIn: e,
-  submitLabel: r,
+}, L = ({ className: o = "", children: r, openIn: e, submitLabel: s, title: u, ...n }) => /* @__PURE__ */ t(l, { ...n, children: /* @__PURE__ */ t("div", { className: `${g.fund} ${o}`, children: /* @__PURE__ */ t(h, { openIn: e, submitLabel: s, title: u, children: r }) }) }), h = ({
+  children: o,
+  openIn: r,
+  submitLabel: e,
   title: s
 }) => {
-  const { state: u } = _(), o = F(), { showCoinbaseFooter: d } = f();
-  return C(), n ? typeof n == "function" ? n(u) : n : /* @__PURE__ */ t(p, { "aria-labelledby": o, openIn: e, submitLabel: r, children: ({ Content: i }) => /* @__PURE__ */ m(a, { children: [
-    /* @__PURE__ */ t(b, { id: o, children: s }),
-    i,
-    d && /* @__PURE__ */ t(j, {})
+  const { state: u } = C(), n = p(), { showCoinbaseFooter: i } = F();
+  return b(), o ? typeof o == "function" ? o(u) : o : /* @__PURE__ */ t(a, { "aria-labelledby": n, openIn: r, submitLabel: e, children: ({ Content: d }) => /* @__PURE__ */ m(f, { children: [
+    /* @__PURE__ */ t(_, { id: n, children: s }),
+    d,
+    i && /* @__PURE__ */ t(j, {})
   ] }) });
-}, j = (n) => /* @__PURE__ */ t(l, { ...n });
+}, j = (o) => /* @__PURE__ */ t(c, { ...o });
 export {
-  E as unstable_Fund,
-  j as unstable_FundFooter,
-  p as unstable_FundForm,
-  b as unstable_FundTitle,
-  _ as unstable_useFundContext
+  L as Fund,
+  j as FundFooter,
+  a as FundForm,
+  _ as FundTitle,
+  C as useFundContext
 };

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/FundModal/index.d.ts

@@ -1,9 +1,9 @@
 import { ReactNode } from 'react';
-import { unstable_FundProps as FundProps } from '../Fund';
+import { FundProps } from '../Fund';
 interface FundModalProps extends FundProps {
     children?: ReactNode;
     open?: boolean;
     setIsOpen?: (value: boolean) => void;
 }
 declare const FundModal: ({ children, open, setIsOpen, openIn, submitLabel, title, ...fundProps }: FundModalProps) => import("react/jsx-runtime").JSX.Element;
-export { FundModal as unstable_FundModal, type FundModalProps as unstable_FundModalProps };
+export { FundModal, type FundModalProps };

package/dist/components/FundModal/index.js

@@ -1,8 +1,8 @@
 import { jsxs as t, jsx as o, Fragment as x } from "react/jsx-runtime";
-import { useId as O, useState as v, useCallback as h } from "react";
+import { useId as O, useState as v, useCallback as p } from "react";
 import { useAppConfig as T } from "../CDPReactProvider/index.js";
-import { unstable_Fund as j, unstable_FundFooter as I } from "../Fund/index.js";
-import { Button as p } from "../ui/Button/index.js";
+import { Fund as j, FundFooter as I } from "../Fund/index.js";
+import { Button as F } from "../ui/Button/index.js";
 import { Modal as $, ModalTrigger as z, ModalContent as A, ModalTitle as S, ModalClose as k } from "../ui/Modal/index.js";
 import { VisuallyHidden as M } from "../ui/VisuallyHidden/index.js";
 import { IconXMark as U } from "../../icons/IconXMark.js";
@@ -20,7 +20,7 @@ import '../../assets/FundModal.css';const W = "FundModal-module__trigger___2IuXj
   title: q,
   content: B
 }, Y = ({
-  children: b,
+  children: g,
   open: i,
   setIsOpen: c,
   openIn: u,
@@ -28,14 +28,14 @@ import '../../assets/FundModal.css';const W = "FundModal-module__trigger___2IuXj
   title: d,
   ...m
 }) => {
-  const { showCoinbaseFooter: f } = T(), l = O(), r = i !== void 0, [g, F] = v(!1), C = r ? i : g, s = h(
-    (e) => r ? c?.(e) : F(e),
-    [r, c, F]
-  ), N = h(() => {
+  const { showCoinbaseFooter: f } = T(), r = O(), l = i !== void 0, [C, h] = v(!1), b = l ? i : C, s = p(
+    (e) => l ? c?.(e) : h(e),
+    [l, c, h]
+  ), N = p(() => {
     s(!1);
   }, [s]);
-  return /* @__PURE__ */ t($, { open: C, onOpenChange: s, children: [
-    /* @__PURE__ */ o(z, { asChild: !0, children: b || /* @__PURE__ */ t(p, { variant: "primary", className: n.trigger, children: [
+  return /* @__PURE__ */ t($, { open: b, onOpenChange: s, children: [
+    /* @__PURE__ */ o(z, { asChild: !0, children: g || /* @__PURE__ */ t(F, { variant: "primary", className: n.trigger, children: [
       "Deposit ",
       m.cryptoCurrency.toUpperCase()
     ] }) }),
@@ -52,7 +52,7 @@ import '../../assets/FundModal.css';const W = "FundModal-module__trigger___2IuXj
           /* @__PURE__ */ o(
             V,
             {
-              "aria-labelledby": l,
+              "aria-labelledby": r,
               openIn: u,
               unmountOnTransactionSuccess: !0,
               unmount: N,
@@ -63,9 +63,9 @@ import '../../assets/FundModal.css';const W = "FundModal-module__trigger___2IuXj
                   className: `${n["fund-inner"]} ${e === "transaction-status" ? n["tx-status"] : ""}`,
                   children: [
                     /* @__PURE__ */ t("div", { className: n["title-buttons"], children: [
-                      e === "error" ? /* @__PURE__ */ o(M, { children: /* @__PURE__ */ o(a, { id: l, children: d }) }) : /* @__PURE__ */ o(a, { className: n.title, id: l, children: d }),
+                      e === "error" ? /* @__PURE__ */ o(M, { children: /* @__PURE__ */ o(a, { id: r, children: d }) }) : /* @__PURE__ */ o(a, { className: n.title, id: r, children: d }),
                       /* @__PURE__ */ o(k, { asChild: !0, children: /* @__PURE__ */ o(
-                        p,
+                        F,
                         {
                           className: n["close-button"],
                           "aria-label": "Close",
@@ -88,5 +88,5 @@ import '../../assets/FundModal.css';const W = "FundModal-module__trigger___2IuXj
   ] });
 };
 export {
-  Y as unstable_FundModal
+  Y as FundModal
 };

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/index.js

@@ -1,19 +1,19 @@
 import { AUTH_METHODS as e, CDPReactProvider as t, useAppConfig as n } from "./components/CDPReactProvider/index.js";
 import { AuthButton as p } from "./components/AuthButton/index.js";
-import { unstable_Fund as f, unstable_FundFooter as s } from "./components/Fund/index.js";
-import { unstable_FundModal as i } from "./components/FundModal/index.js";
-import { SendTransactionButton as c } from "./components/SendTransactionButton/index.js";
-import { SignIn as I } from "./components/SignIn/index.js";
-import { useSignInReducer as g } from "./components/SignIn/useSignInReducer.js";
-import { SignOutButton as S } from "./components/SignOutButton/index.js";
+import { Fund as x, FundFooter as i } from "./components/Fund/index.js";
+import { FundModal as s } from "./components/FundModal/index.js";
+import { SendTransactionButton as I } from "./components/SendTransactionButton/index.js";
+import { SignIn as l } from "./components/SignIn/index.js";
+import { useSignInReducer as S } from "./components/SignIn/useSignInReducer.js";
+import { SignOutButton as h } from "./components/SignOutButton/index.js";
 import { SignInModal as C } from "./components/SignInModal/index.js";
-import { ThemeProvider as b, useTheme as k } from "./components/ThemeProvider/index.js";
-import { cssVariables as B } from "./theme/cssVariables.js";
-import { theme as _ } from "./theme/theme.js";
-import { colors as v, colorsBase as w, colorsComponents as D, colorsSemantic as P, font as O, tokens as U } from "./theme/tokens.js";
-import { flattenTokensObject as H, themeToCssVariables as L } from "./theme/utils.js";
-import { IconArrowLeft as j } from "./icons/IconArrowLeft.js";
-import { IconArrowsUpDown as X } from "./icons/IconArrowsUpDown.js";
+import { ThemeProvider as k, useTheme as A } from "./components/ThemeProvider/index.js";
+import { cssVariables as E } from "./theme/cssVariables.js";
+import { theme as v } from "./theme/theme.js";
+import { colors as D, colorsBase as P, colorsComponents as b, colorsSemantic as O, font as U, tokens as V } from "./theme/tokens.js";
+import { flattenTokensObject as L, themeToCssVariables as R } from "./theme/utils.js";
+import { IconArrowLeft as N } from "./icons/IconArrowLeft.js";
+import { IconArrowsUpDown as _ } from "./icons/IconArrowsUpDown.js";
 import { IconCheck as y } from "./icons/IconCheck.js";
 import { IconCheckCircle as G } from "./icons/IconCheckCircle.js";
 import { IconChevronDown as K } from "./icons/IconChevronDown.js";
@@ -23,28 +23,33 @@ import { IconExclamationTriangle as oo } from "./icons/IconExclamationTriangle.j
 import { IconLock as eo } from "./icons/IconLock.js";
 import { IconPhone as no } from "./icons/IconPhone.js";
 import { IconXMark as po } from "./icons/IconXMark.js";
-import { clamp as fo } from "./utils/clamp.js";
-import { getMessageFromUnknownError as ao } from "./utils/getMessageFromUnknownError.js";
-import { isApiError as uo } from "./utils/isApiError.js";
-import { isEmailInvalid as lo } from "./utils/isEmailInvalid.js";
+import { clamp as xo } from "./utils/clamp.js";
+import { getMessageFromUnknownError as co } from "./utils/getMessageFromUnknownError.js";
+import { isApiError as ao } from "./utils/isApiError.js";
+import { isEmailInvalid as uo } from "./utils/isEmailInvalid.js";
 import { parseValuesFromPhoneNumber as go } from "./utils/parseValuesFromPhoneNumber.js";
-import { FundForm as So } from "./components/Fund/FundForm.js";
+import { FundForm as ho } from "./components/Fund/FundForm.js";
 import { FundTitle as Co } from "./components/Fund/FundTitle.js";
-import { useFundContext as bo } from "./components/Fund/FundProvider.js";
-import { SignInAuthMethodButtons as Ao } from "./components/SignIn/SignInAuthMethodButtons.js";
-import { SignInBackButton as Eo } from "./components/SignIn/SignInBackButton.js";
-import { SignInDescription as Mo } from "./components/SignIn/SignInDescription.js";
-import { SignInFooter as wo } from "./components/SignIn/SignInFooter.js";
-import { SignInForm as Po } from "./components/SignIn/SignInForm.js";
-import { SignInImage as Uo } from "./components/SignIn/SignInImage.js";
-import { SignInTitle as Ho } from "./components/SignIn/SignInTitle.js";
-import { useSignInContext as Ro } from "./components/SignIn/SignInProvider.js";
+import { useFundContext as ko } from "./components/Fund/FundProvider.js";
+import { SignInAuthMethodButtons as Bo } from "./components/SignIn/SignInAuthMethodButtons.js";
+import { SignInBackButton as Mo } from "./components/SignIn/SignInBackButton.js";
+import { SignInDescription as wo } from "./components/SignIn/SignInDescription.js";
+import { SignInFooter as Po } from "./components/SignIn/SignInFooter.js";
+import { SignInForm as Oo } from "./components/SignIn/SignInForm.js";
+import { SignInImage as Vo } from "./components/SignIn/SignInImage.js";
+import { SignInTitle as Lo } from "./components/SignIn/SignInTitle.js";
+import { useSignInContext as jo } from "./components/SignIn/SignInProvider.js";
 export {
   e as AUTH_METHODS,
   p as AuthButton,
   t as CDPReactProvider,
-  j as IconArrowLeft,
-  X as IconArrowsUpDown,
+  x as Fund,
+  i as FundFooter,
+  ho as FundForm,
+  s as FundModal,
+  Co as FundTitle,
+  N as IconArrowLeft,
+  _ as IconArrowsUpDown,
   y as IconCheck,
   G as IconCheckCircle,
   K as IconChevronDown,
@@ -54,41 +59,36 @@ export {
   eo as IconLock,
   no as IconPhone,
   po as IconXMark,
-  c as SendTransactionButton,
-  I as SignIn,
-  Ao as SignInAuthMethodButtons,
-  Eo as SignInBackButton,
-  Mo as SignInDescription,
-  wo as SignInFooter,
-  Po as SignInForm,
-  Uo as SignInImage,
+  I as SendTransactionButton,
+  l as SignIn,
+  Bo as SignInAuthMethodButtons,
+  Mo as SignInBackButton,
+  wo as SignInDescription,
+  Po as SignInFooter,
+  Oo as SignInForm,
+  Vo as SignInImage,
   C as SignInModal,
-  Ho as SignInTitle,
-  S as SignOutButton,
-  b as ThemeProvider,
-  fo as clamp,
-  v as colors,
-  w as colorsBase,
-  D as colorsComponents,
-  P as colorsSemantic,
-  B as cssVariables,
-  H as flattenTokensObject,
-  O as font,
-  ao as getMessageFromUnknownError,
-  uo as isApiError,
-  lo as isEmailInvalid,
+  Lo as SignInTitle,
+  h as SignOutButton,
+  k as ThemeProvider,
+  xo as clamp,
+  D as colors,
+  P as colorsBase,
+  b as colorsComponents,
+  O as colorsSemantic,
+  E as cssVariables,
+  L as flattenTokensObject,
+  U as font,
+  co as getMessageFromUnknownError,
+  ao as isApiError,
+  uo as isEmailInvalid,
   go as parseValuesFromPhoneNumber,
-  _ as theme,
-  L as themeToCssVariables,
-  U as tokens,
-  f as unstable_Fund,
-  s as unstable_FundFooter,
-  So as unstable_FundForm,
-  i as unstable_FundModal,
-  Co as unstable_FundTitle,
-  bo as unstable_useFundContext,
+  v as theme,
+  R as themeToCssVariables,
+  V as tokens,
   n as useAppConfig,
-  Ro as useSignInContext,
-  g as useSignInReducer,
-  k as useTheme
+  ko as useFundContext,
+  jo as useSignInContext,
+  S as useSignInReducer,
+  A as useTheme
 };

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}" }