@coinbase/cdp-react 0.0.53 → 0.0.55

package/dist/assets/ManageAuth.css

@@ -0,0 +1 @@
+.ManageAuth-module__manage-auth___4Hpt3{box-sizing:border-box;font:var(--cdp-web-font-size-base) / 1.5 var(--cdp-web-font-family-body);font-optical-sizing:auto;background-color:var(--cdp-web-colors-page-bg-default);color:var(--cdp-web-colors-page-text-default);display:flex;flex-direction:column;max-width:38.25em;overflow:hidden;width:100%;padding-bottom:1.5em}.ManageAuth-module__manage-auth___4Hpt3 *{box-sizing:border-box}.ManageAuth-module__list___lVrdU{display:flex;flex-direction:column;gap:.5em;list-style:none;margin:0;padding:0}.ManageAuth-module__error-wrapper___a9Edn{padding:.5em;background-color:var(--cdp-web-colors-bg-negativeWash);border-radius:.5em;margin:.5em 1.5em}.ManageAuth-module__error-text___43EOm{color:var(--cdp-web-colors-fg-onNegativeWash)}

package/dist/assets/ManageAuthItem.css

@@ -0,0 +1 @@
+.ManageAuthItem-module__item___a8mWi{display:flex;align-items:center;justify-content:space-between;height:3em;padding:.5em 1em;margin:0 1.5em;border:1px solid var(--cdp-web-colors-page-border-default);border-radius:.75em;transition:all .2s}.ManageAuthItem-module__item-content___dNkjt{display:flex;align-items:center;gap:.75em;flex:1}.ManageAuthItem-module__item-icon___-uLZ2{display:flex;align-items:center;justify-content:center;width:1.5em;height:1.5em;color:var(--cdp-web-colors-page-text-default)}.ManageAuthItem-module__item-text___kwvK6{display:flex;flex-direction:column;gap:.125em}.ManageAuthItem-module__item-label___u6HnP{font-weight:400;font-size:1em;color:var(--cdp-web-colors-page-text-default)}.ManageAuthItem-module__item-value___YnTDg{font-size:.875em;color:var(--cdp-web-colors-page-text-default)}.ManageAuthItem-module__item-action___JObQh{display:flex;align-items:center}.ManageAuthItem-module__button___NngMz{width:1.5em;height:1.5em;padding:0;font-size:1.25em}.ManageAuthItem-module__button___NngMz:disabled{opacity:.5;cursor:not-allowed}

package/dist/assets/ManageAuthModal.css

@@ -0,0 +1 @@
+.ManageAuthModal-module__header___irbw4{display:flex;align-items:center;justify-content:space-between;margin-bottom:1em;padding:1.5em 1.5em 0}.ManageAuthModal-module__title___2Z3vb{font-size:1.25em;font-weight:600;margin:0;color:var(--cdp-web-colors-page-text-default)}.ManageAuthModal-module__close-icon___WnVrd{width:1.25em;height:1.25em}

package/dist/components/ManageAuth/ManageAuthItem.d.ts

@@ -0,0 +1,9 @@
+import { AuthMethod as ConfiguredAuthMethod } from '../CDPReactProvider';
+interface ManageAuthItemProps {
+    authMethod: ConfiguredAuthMethod;
+    displayValue: string;
+    isLinked: boolean;
+    onLink: (method: ConfiguredAuthMethod) => void;
+}
+declare const ManageAuthItem: ({ authMethod, displayValue, isLinked, onLink }: ManageAuthItemProps) => import("react/jsx-runtime").JSX.Element;
+export { ManageAuthItem as unstable_ManageAuthItem, type ManageAuthItemProps as unstable_ManageAuthItemProps, };

package/dist/components/ManageAuth/ManageAuthItem.js

@@ -0,0 +1,77 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { useCallback as s } from "react";
+import { Button as m } from "../ui/Button/index.js";
+import { IconAppleLogo as _ } from "../../icons/IconAppleLogo.js";
+import { IconEnvelope as d } from "../../icons/IconEnvelope.js";
+import { IconGoogleLogo as h } from "../../icons/IconGoogleLogo.js";
+import { IconPhone as g } from "../../icons/IconPhone.js";
+import { IconMinus as p } from "../../icons/IconMinus.js";
+import { IconPlus as b } from "../../icons/IconPlus.js";
+import '../../assets/ManageAuthItem.css';const I = "ManageAuthItem-module__item___a8mWi", A = "ManageAuthItem-module__button___NngMz", t = {
+  item: I,
+  "item-content": "ManageAuthItem-module__item-content___dNkjt",
+  "item-icon": "ManageAuthItem-module__item-icon___-uLZ2",
+  "item-text": "ManageAuthItem-module__item-text___kwvK6",
+  "item-label": "ManageAuthItem-module__item-label___u6HnP",
+  "item-value": "ManageAuthItem-module__item-value___YnTDg",
+  "item-action": "ManageAuthItem-module__item-action___JObQh",
+  button: A
+}, v = (a) => {
+  switch (a) {
+    case "email":
+      return /* @__PURE__ */ e(d, { "aria-label": "Email" });
+    case "sms":
+      return /* @__PURE__ */ e(g, { "aria-label": "Phone" });
+    case "oauth:google":
+      return /* @__PURE__ */ e(h, { "aria-label": "Google" });
+    case "oauth:apple":
+      return /* @__PURE__ */ e(_, { "aria-label": "Apple" });
+    default:
+      return null;
+  }
+}, f = (a) => {
+  switch (a) {
+    case "email":
+      return "Email";
+    case "sms":
+      return "Phone";
+    case "oauth:google":
+      return "Google";
+    case "oauth:apple":
+      return "Apple";
+    default:
+      return null;
+  }
+}, G = ({ authMethod: a, displayValue: o, isLinked: r, onLink: i }) => {
+  const c = v(a), n = f(a), u = s(() => {
+    i(a);
+  }, [a, i]);
+  return /* @__PURE__ */ l("div", { className: t.item, children: [
+    /* @__PURE__ */ l("div", { className: t["item-content"], children: [
+      /* @__PURE__ */ e("div", { className: t["item-icon"], children: c }),
+      /* @__PURE__ */ e("div", { className: t["item-text"], children: o ? /* @__PURE__ */ e("div", { className: t["item-value"], children: o }) : /* @__PURE__ */ e("div", { className: t["item-label"], children: n }) })
+    ] }),
+    /* @__PURE__ */ e("div", { className: t["item-action"], children: r ? /* @__PURE__ */ e(
+      m,
+      {
+        variant: "secondary",
+        className: t.button,
+        disabled: !0,
+        "aria-label": `Unlink ${n}`,
+        children: /* @__PURE__ */ e(p, { "aria-hidden": "true" })
+      }
+    ) : /* @__PURE__ */ e(
+      m,
+      {
+        variant: "primary",
+        className: t.button,
+        onClick: u,
+        "aria-label": `Link ${n}`,
+        children: /* @__PURE__ */ e(b, { "aria-hidden": "true" })
+      }
+    ) })
+  ] });
+};
+export {
+  G as unstable_ManageAuthItem
+};

package/dist/components/ManageAuth/ManageAuthProvider.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { unstable_ManageAuthState as ManageAuthState } from './types';
+interface ManageAuthProviderProps {
+    children: ReactNode;
+}
+declare const ManageAuthProvider: ({ children }: ManageAuthProviderProps) => import("react/jsx-runtime").JSX.Element;
+declare const useManageAuthContext: () => ManageAuthState;
+export { ManageAuthProvider as unstable_ManageAuthProvider, useManageAuthContext as unstable_useManageAuthContext, type ManageAuthProviderProps as unstable_ManageAuthProviderProps, };

package/dist/components/ManageAuth/ManageAuthProvider.js

@@ -0,0 +1,64 @@
+import { jsx as m } from "react/jsx-runtime";
+import { useCurrentUser as p } from "@coinbase/cdp-hooks";
+import { createContext as c, useState as r, useMemo as g, useContext as M } from "react";
+import { useAppConfig as f } from "../CDPReactProvider/index.js";
+const l = c(void 0), y = ({ children: t }) => {
+  const [o, s] = r(null), [n, i] = r(null), { currentUser: e } = p(), { authMethods: h } = f(), u = h.map((a) => {
+    switch (a) {
+      case "email":
+        return e?.authenticationMethods.email ? {
+          isLinked: !0,
+          displayValue: e.authenticationMethods.email.email,
+          method: "email"
+        } : {
+          isLinked: !1,
+          displayValue: "",
+          method: "email"
+        };
+      case "sms":
+        return e?.authenticationMethods.sms ? {
+          isLinked: !0,
+          displayValue: e.authenticationMethods.sms.phoneNumber,
+          method: "sms"
+        } : {
+          isLinked: !1,
+          displayValue: "",
+          method: "sms"
+        };
+      case "oauth:google":
+        return e?.authenticationMethods.google ? {
+          isLinked: !0,
+          displayValue: e.authenticationMethods.google.email ?? "",
+          method: "oauth:google"
+        } : {
+          isLinked: !1,
+          displayValue: "",
+          method: "oauth:google"
+        };
+      case "oauth:apple":
+        return e?.authenticationMethods.apple ? {
+          isLinked: !0,
+          displayValue: e.authenticationMethods.apple.email ?? "",
+          method: "oauth:apple"
+        } : {
+          isLinked: !1,
+          displayValue: "",
+          method: "oauth:apple"
+        };
+    }
+    return null;
+  }).filter((a) => a !== null), d = g(
+    () => ({ error: n, setError: i, manageAuthMethods: u, methodToLink: o, setMethodToLink: s }),
+    [n, i, u, o, s]
+  );
+  return /* @__PURE__ */ m(l.Provider, { value: d, children: t });
+}, C = () => {
+  const t = M(l);
+  if (!t)
+    throw new Error("useManageAuthContext must be used within a ManageAuthProvider");
+  return t;
+};
+export {
+  y as unstable_ManageAuthProvider,
+  C as unstable_useManageAuthContext
+};

package/dist/components/ManageAuth/index.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { unstable_ManageAuthState as ManageAuthState } from './types';
+interface ManageAuthProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    children?: ReactNode | ((state: ManageAuthState) => ReactNode);
+    onLinkSuccess?: (method: string) => void;
+}
+declare const ManageAuthContent: ({ className, onLinkSuccess, ...props }: ManageAuthProps) => import("react/jsx-runtime").JSX.Element;
+declare const ManageAuth: (props: ManageAuthProps) => import("react/jsx-runtime").JSX.Element;
+export { ManageAuthContent as unstable_ManageAuthContent, ManageAuth as unstable_ManageAuth, type ManageAuthProps as unstable_ManageAuthProps, };

package/dist/components/ManageAuth/index.js

@@ -0,0 +1,51 @@
+import { jsx as r, jsxs as p, Fragment as _ } from "react/jsx-runtime";
+import { useLinkOAuth as d } from "@coinbase/cdp-hooks";
+import { u as g } from "../../chunks/useSendComponentCallOnce.CUgcsUye.js";
+import { useCallback as A } from "react";
+import { Error as f } from "../ui/Error/index.js";
+import { unstable_ManageAuthItem as k } from "./ManageAuthItem.js";
+import { unstable_useManageAuthContext as x, unstable_ManageAuthProvider as M } from "./ManageAuthProvider.js";
+import "../CDPReactProvider/index.js";
+import '../../assets/ManageAuth.css';const C = "ManageAuth-module__list___lVrdU", t = {
+  "manage-auth": "ManageAuth-module__manage-auth___4Hpt3",
+  list: C,
+  "error-wrapper": "ManageAuth-module__error-wrapper___a9Edn",
+  "error-text": "ManageAuth-module__error-text___43EOm"
+}, E = ({ className: n = "", onLinkSuccess: o, ...u }) => {
+  const { manageAuthMethods: c, setMethodToLink: s, error: l, setError: i } = x(), { linkOAuth: m } = d(), h = A(
+    (e) => {
+      try {
+        if (e === "email")
+          s("email");
+        else if (e === "sms")
+          s("sms");
+        else if (e.startsWith("oauth:")) {
+          const a = e.replace("oauth:", "");
+          m(a);
+        } else
+          throw new Error(`Unsupported auth method: ${e}`);
+        o?.(e);
+      } catch (a) {
+        i(a instanceof Error ? a.message : "An unknown error occurred");
+      }
+    },
+    [m, o, i, s]
+  );
+  return /* @__PURE__ */ r("div", { className: `${t["manage-auth"]} ${n}`, ...u, children: /* @__PURE__ */ p(_, { children: [
+    l && /* @__PURE__ */ r("div", { className: t["error-wrapper"], children: /* @__PURE__ */ r(f, { role: "alert", children: /* @__PURE__ */ r("span", { className: t["error-text"], children: l }) }) }),
+    /* @__PURE__ */ r("ul", { className: t.list, children: c.map((e) => /* @__PURE__ */ r("li", { children: /* @__PURE__ */ r(
+      k,
+      {
+        authMethod: e.method,
+        displayValue: e.displayValue,
+        isLinked: e.isLinked,
+        onLink: h
+      },
+      e.method
+    ) }, e.method)) })
+  ] }) });
+}, V = (n) => (g("manage_auth"), /* @__PURE__ */ r(M, { children: /* @__PURE__ */ r(E, { ...n }) }));
+export {
+  V as unstable_ManageAuth,
+  E as unstable_ManageAuthContent
+};

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

@@ -0,0 +1,13 @@
+import { AuthMethod as ConfiguredAuthMethod } from '../CDPReactProvider';
+export type unstable_ManageAuthMethod = {
+    isLinked: boolean;
+    displayValue: string;
+    method: ConfiguredAuthMethod;
+};
+export interface unstable_ManageAuthState {
+    methodToLink: ConfiguredAuthMethod | null;
+    setMethodToLink: (method: ConfiguredAuthMethod) => void;
+    manageAuthMethods: unstable_ManageAuthMethod[];
+    error: string | null;
+    setError: (error: string | null) => void;
+}

package/dist/components/ManageAuth/types.js

@@ -0,0 +1 @@
+import "../CDPReactProvider/index.js";

package/dist/components/ManageAuthModal/index.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { ButtonProps } from '../ui/Button';
+import { ModalContentProps } from '../ui/Modal';
+interface ManageAuthModalTriggerProps extends Partial<Pick<ButtonProps, "className" | "fullWidth" | "size" | "style" | "variant">> {
+    children?: ReactNode;
+    label?: ReactNode;
+}
+interface ManageAuthModalContentProps extends ModalContentProps {
+    onLinkSuccess?: (method: string) => void;
+}
+interface ManageAuthModalProps {
+    children?: ReactNode;
+    open?: boolean;
+    setIsOpen?: (value: boolean) => void;
+    onLinkSuccess?: (method: string) => void;
+}
+declare const ManageAuthModalTrigger: ({ children, className, label, ...props }: ManageAuthModalTriggerProps) => import("react/jsx-runtime").JSX.Element;
+declare const ManageAuthModalContent: (props: ManageAuthModalContentProps) => import("react/jsx-runtime").JSX.Element;
+declare const ManageAuthModal: ({ children, open, setIsOpen, onLinkSuccess }: ManageAuthModalProps) => import("react/jsx-runtime").JSX.Element;
+export { ManageAuthModal as unstable_ManageAuthModal, ManageAuthModalContent as unstable_ManageAuthModalContent, ManageAuthModalTrigger as unstable_ManageAuthModalTrigger, type ManageAuthModalProps as unstable_ManageAuthModalProps, type ManageAuthModalContentProps as unstable_ManageAuthModalContentProps, type ManageAuthModalTriggerProps as unstable_ManageAuthModalTriggerProps, };

package/dist/components/ManageAuthModal/index.js

@@ -0,0 +1,53 @@
+import { jsx as e, jsxs as o, Fragment as d } from "react/jsx-runtime";
+import { u as p } from "../../chunks/useSendComponentCallOnce.CUgcsUye.js";
+import { createContext as A, useMemo as C, useContext as f } from "react";
+import { unstable_ManageAuth as x } from "../ManageAuth/index.js";
+import { Button as h } from "../ui/Button/index.js";
+import { IconXMark as b } from "../../icons/IconXMark.js";
+import "../CDPReactProvider/index.js";
+import { Modal as T, ModalContent as k, ModalClose as v, ModalTrigger as w, ModalTitle as y, ModalDescription as L } from "../ui/Modal/index.js";
+import { VisuallyHidden as D } from "../ui/VisuallyHidden/index.js";
+import { childrenHasComponent as u } from "../../utils/childrenHasComponent.js";
+import '../../assets/ManageAuthModal.css';const N = "ManageAuthModal-module__header___irbw4", V = "ManageAuthModal-module__title___2Z3vb", l = {
+  header: N,
+  title: V,
+  "close-icon": "ManageAuthModal-module__close-icon___WnVrd"
+}, M = A(null), j = () => {
+  const a = f(M);
+  if (!a)
+    throw new Error("useManageAuthModalContext must be used within a ManageAuthModal");
+  return a;
+}, c = ({
+  children: a,
+  className: t = "",
+  label: r,
+  ...n
+}) => /* @__PURE__ */ e(w, { asChild: !0, children: a || /* @__PURE__ */ e(h, { className: t, ...n, children: r || "Link accounts" }) }), s = (a) => {
+  const { onLinkSuccess: t } = j();
+  return /* @__PURE__ */ o(k, { ...a, children: [
+    /* @__PURE__ */ e(H, {}),
+    /* @__PURE__ */ o("div", { className: l.header, children: [
+      /* @__PURE__ */ e("h2", { className: l.title, children: "Link a profile" }),
+      /* @__PURE__ */ e(v, { asChild: !0, children: /* @__PURE__ */ e(h, { "aria-label": "Close", size: "md", variant: "transparentSecondary", children: /* @__PURE__ */ e(b, { className: l["close-icon"] }) }) })
+    ] }),
+    /* @__PURE__ */ e(x, { onLinkSuccess: t })
+  ] });
+}, X = ({ children: a, open: t, setIsOpen: r, onLinkSuccess: n }) => {
+  p("manage_auth_modal");
+  const m = a ? u(a, c) : !1, i = a ? u(a, s) : !1, g = !m && !i, _ = C(() => ({ onLinkSuccess: n }), [n]);
+  return /* @__PURE__ */ e(M.Provider, { value: _, children: /* @__PURE__ */ e(T, { open: t, onOpenChange: r, children: g ? /* @__PURE__ */ o(d, { children: [
+    /* @__PURE__ */ e(c, { children: a }),
+    /* @__PURE__ */ e(s, {})
+  ] }) : /* @__PURE__ */ o(d, { children: [
+    a,
+    !i && /* @__PURE__ */ e(s, {})
+  ] }) }) });
+}, H = () => /* @__PURE__ */ o(D, { children: [
+  /* @__PURE__ */ e(y, { children: "Link a profile" }),
+  /* @__PURE__ */ e(L, { children: "Link additional authentication methods to your account" })
+] });
+export {
+  X as unstable_ManageAuthModal,
+  s as unstable_ManageAuthModalContent,
+  c as unstable_ManageAuthModalTrigger
+};

package/dist/components/OAuthStatusModal/index.js

@@ -1,77 +1,78 @@
-import { jsx as s, jsxs as o, Fragment as l } from "react/jsx-runtime";
+import { jsx as s, jsxs as e, Fragment as l } from "react/jsx-runtime";
 import "@coinbase/cdp-core";
 import { useOAuthState as O } from "@coinbase/cdp-hooks";
-import { u as C } from "../../chunks/useSendComponentCallOnce.CUgcsUye.js";
-import { useState as I, useEffect as u, useRef as S, useCallback as b } from "react";
+import { u as I } from "../../chunks/useSendComponentCallOnce.CUgcsUye.js";
+import { useState as C, useEffect as u, useRef as g, useCallback as b } from "react";
 import { useProviderName as v } from "../CDPReactProvider/index.js";
-import { OAUTH_PROVIDER_SESSION_STORAGE_KEY as g } from "../SignIn/hooks/useSignInWithOAuth.js";
+import { OAUTH_PROVIDER_SESSION_STORAGE_KEY as S } from "../SignIn/hooks/useSignInWithOAuth.js";
 import { CoinbaseFooter as T } from "../ui/CoinbaseFooter/index.js";
 import { LoadingSpinner as $ } from "../ui/LoadingSpinner/index.js";
 import { Modal as w, ModalContent as E, ModalTitle as P, ModalDescription as R } from "../ui/Modal/index.js";
 import { SwitchFadeTransition as y } from "../ui/SwitchFadeTransition/index.js";
 import { VisuallyHidden as f } from "../ui/VisuallyHidden/index.js";
 import { useTimer as k } from "../../hooks/useTimer.js";
-import { IconAppleLogo as U } from "../../icons/IconAppleLogo.js";
-import { IconCheck as q } from "../../icons/IconCheck.js";
-import { IconGoogleColorLogo as x } from "../../icons/IconGoogleColorLogo.js";
+import { IconAppleLogo as x } from "../../icons/IconAppleLogo.js";
+import { IconCheck as L } from "../../icons/IconCheck.js";
+import { IconGoogleColorLogo as U } from "../../icons/IconGoogleColorLogo.js";
+import { IconXLogo as q } from "../../icons/IconXLogo.js";
 import { IconXMark as G } from "../../icons/IconXMark.js";
 import { capitalize as d } from "../../utils/capitalize.js";
-import '../../assets/OAuthStatusModal.css';const H = "OAuthStatusModal-module__status___vU6x7", K = "OAuthStatusModal-module__graphic___2fKoa", L = "OAuthStatusModal-module__pad___oooMz", j = "OAuthStatusModal-module__spinner___Q3dYq", D = "OAuthStatusModal-module__icon___Lj5Gf", F = "OAuthStatusModal-module__subhead___Pg9GI", Y = "OAuthStatusModal-module__description___0qOZY", z = "OAuthStatusModal-module__ring___mKwSb", V = "OAuthStatusModal-module__invisible___IeRd0", t = {
+import '../../assets/OAuthStatusModal.css';const H = "OAuthStatusModal-module__status___vU6x7", K = "OAuthStatusModal-module__graphic___2fKoa", j = "OAuthStatusModal-module__pad___oooMz", D = "OAuthStatusModal-module__spinner___Q3dYq", F = "OAuthStatusModal-module__icon___Lj5Gf", Y = "OAuthStatusModal-module__subhead___Pg9GI", z = "OAuthStatusModal-module__description___0qOZY", V = "OAuthStatusModal-module__ring___mKwSb", W = "OAuthStatusModal-module__invisible___IeRd0", t = {
   "oauth-status-modal": "OAuthStatusModal-module__oauth-status-modal___I69Ii",
   "transition-wrapper": "OAuthStatusModal-module__transition-wrapper___TmPRh",
   status: H,
   graphic: K,
-  pad: L,
-  spinner: j,
-  icon: D,
+  pad: j,
+  spinner: D,
+  icon: F,
   "icon-success": "OAuthStatusModal-module__icon-success___gqMWr",
   "icon-error": "OAuthStatusModal-module__icon-error___psI7m",
-  subhead: F,
-  description: Y,
-  ring: z,
+  subhead: Y,
+  description: z,
+  ring: V,
   "ring-success": "OAuthStatusModal-module__ring-success___unyM9",
   "ring-error": "OAuthStatusModal-module__ring-error___OsgqU",
-  invisible: V
-}, W = ["pending", "success", "error"], Ot = () => {
-  C("oauth_status_modal");
-  const [n, e] = I(!1), { oauthState: r } = O(), a = v();
+  invisible: W
+}, X = ["pending", "success", "error"], Mt = () => {
+  I("oauth_status_modal");
+  const [n, o] = C(!1), { oauthState: r } = O(), a = v();
   return u(() => {
     if (r?.status === "pending" || r?.status === "error" || r?.status === "success") {
-      const c = sessionStorage.getItem(g);
+      const c = sessionStorage.getItem(S);
       if (c === null || c !== a)
         return;
-      sessionStorage.removeItem(g), e(!0);
+      sessionStorage.removeItem(S), o(!0);
     }
-  }, [r?.status, a]), /* @__PURE__ */ s(w, { open: n, onOpenChange: e, children: /* @__PURE__ */ o(E, { children: [
+  }, [r?.status, a]), /* @__PURE__ */ s(w, { open: n, onOpenChange: o, children: /* @__PURE__ */ e(E, { children: [
     /* @__PURE__ */ s(f, { children: /* @__PURE__ */ s(P, { children: "OAuth Status" }) }),
-    /* @__PURE__ */ s(f, { children: /* @__PURE__ */ o(R, { children: [
+    /* @__PURE__ */ s(f, { children: /* @__PURE__ */ e(R, { children: [
       "Sign in with ",
       d(a),
       " ",
       r?.status ? `${r?.status === "success" ? "successful" : r?.status === "error" ? "failed" : "pending"}` : ""
     ] }) }),
-    /* @__PURE__ */ s(J, { handleClose: () => e(!1) })
+    /* @__PURE__ */ s(J, { handleClose: () => o(!1) })
   ] }) });
 }, J = ({ handleClose: n }) => {
-  const { oauthState: e } = O(), r = e?.providerType || "google", { timeRemaining: a, start: c, reset: m } = k(), _ = S(null), h = S(null), A = 250, p = b((i) => {
-    h.current === i || i === void 0 || (h.current = i, _.current?.transition.toggle(i));
+  const { oauthState: o } = O(), r = o?.providerType || "google", { timeRemaining: a, start: c, reset: m } = k(), _ = g(null), p = g(null), A = 250, h = b((i) => {
+    p.current === i || i === void 0 || (p.current = i, _.current?.transition.toggle(i));
   }, []);
   return u(() => {
-    p(e?.status), e?.status === "success" && c(3);
-  }, [e?.status, p, c]), u(() => {
+    h(o?.status), o?.status === "success" && c(3);
+  }, [o?.status, h, c]), u(() => {
     a !== null && a <= 0 && (m(), n());
-  }, [a, m, n]), /* @__PURE__ */ o("div", { className: t["oauth-status-modal"], children: [
+  }, [a, m, n]), /* @__PURE__ */ e("div", { className: t["oauth-status-modal"], children: [
     /* @__PURE__ */ s(
       y,
       {
         animateHeight: !1,
         timeout: A,
-        items: W,
+        items: X,
         initialEntered: !1,
         transitionRef: _,
         className: t["transition-wrapper"],
         children: ({ itemKey: i, ...M }) => {
-          const N = B[i];
+          const N = tt[i];
           return /* @__PURE__ */ s("div", { ...M, className: t.status, children: /* @__PURE__ */ s(N, { timeRemaining: a, provider: r }) });
         }
       }
@@ -79,9 +80,9 @@ import '../../assets/OAuthStatusModal.css';const H = "OAuthStatusModal-module__s
     /* @__PURE__ */ s(T, {})
   ] });
 }, Q = ({ provider: n }) => {
-  const e = tt[n];
-  return /* @__PURE__ */ o(l, { children: [
-    /* @__PURE__ */ o("div", { className: t.graphic, children: [
+  const o = st[n];
+  return /* @__PURE__ */ e(l, { children: [
+    /* @__PURE__ */ e("div", { className: t.graphic, children: [
       /* @__PURE__ */ s(
         $,
         {
@@ -91,44 +92,45 @@ import '../../assets/OAuthStatusModal.css';const H = "OAuthStatusModal-module__s
           className: t.spinner
         }
       ),
-      e && /* @__PURE__ */ s("span", { className: t.icon, children: /* @__PURE__ */ s(e, {}) })
+      o && /* @__PURE__ */ s("span", { className: t.icon, children: /* @__PURE__ */ s(o, {}) })
     ] }),
-    /* @__PURE__ */ o("p", { className: t.subhead, children: [
+    /* @__PURE__ */ e("p", { className: t.subhead, children: [
       "Signing in with ",
       d(n)
     ] }),
     /* @__PURE__ */ s("p", { className: t.description, children: "Just a moment..." })
   ] });
-}, X = ({ timeRemaining: n, provider: e }) => /* @__PURE__ */ o(l, { children: [
-  /* @__PURE__ */ o("div", { className: t.graphic, children: [
+}, Z = ({ timeRemaining: n, provider: o }) => /* @__PURE__ */ e(l, { children: [
+  /* @__PURE__ */ e("div", { className: t.graphic, children: [
     /* @__PURE__ */ s("span", { className: `${t.ring} ${t["ring-success"]}` }),
-    /* @__PURE__ */ s("span", { className: `${t.icon} ${t["icon-success"]}`, children: /* @__PURE__ */ s(q, {}) })
+    /* @__PURE__ */ s("span", { className: `${t.icon} ${t["icon-success"]}`, children: /* @__PURE__ */ s(L, {}) })
   ] }),
-  /* @__PURE__ */ o("p", { className: t.subhead, children: [
+  /* @__PURE__ */ e("p", { className: t.subhead, children: [
     "Signed in with ",
-    d(e)
+    d(o)
   ] }),
-  /* @__PURE__ */ o("p", { className: `${t.description} ${n === null ? t.invisible : ""}`, children: [
+  /* @__PURE__ */ e("p", { className: `${t.description} ${n === null ? t.invisible : ""}`, children: [
     "This window will automatically close in ",
     n ?? "soon"
   ] })
-] }), Z = () => /* @__PURE__ */ o(l, { children: [
-  /* @__PURE__ */ o("div", { className: `${t.graphic} ${t.pad}`, children: [
+] }), B = () => /* @__PURE__ */ e(l, { children: [
+  /* @__PURE__ */ e("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(G, {}) })
   ] }),
   /* @__PURE__ */ s("p", { className: t.subhead, children: "Sign in failed" }),
   /* @__PURE__ */ s("p", { className: t.description, children: "Something went wrong. Please try again." })
-] }), B = {
+] }), tt = {
   pending: Q,
-  success: X,
-  error: Z
-}, tt = {
-  google: x,
-  apple: U
+  success: Z,
+  error: B
+}, st = {
+  google: U,
+  apple: x,
+  x: q
 };
 export {
-  Ot as OAuthStatusModal,
+  Mt as OAuthStatusModal,
   J as OAuthStatusModalContent,
-  Ot as default
+  Mt as default
 };

package/dist/components/SignIn/SignInAuthMethodButtons.js

@@ -1,21 +1,22 @@
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 import { useCallback as I, useMemo as v } from "react";
 import { useAppConfig as y } from "../CDPReactProvider/index.js";
-import { useSignInWithOAuth as S } from "./hooks/useSignInWithOAuth.js";
-import { useSignInContext as C } from "./SignInProvider.js";
+import { useSignInWithOAuth as C } from "./hooks/useSignInWithOAuth.js";
+import { useSignInContext as S } from "./SignInProvider.js";
 import { Button as M } from "../ui/Button/index.js";
 import { ServerError as k } from "../ui/ServerError/index.js";
 import { IconAppleLogo as B } from "../../icons/IconAppleLogo.js";
 import { IconEnvelope as E } from "../../icons/IconEnvelope.js";
 import { IconGoogleLogo as P } from "../../icons/IconGoogleLogo.js";
 import { IconPhone as O } from "../../icons/IconPhone.js";
+import { IconXLogo as w } from "../../icons/IconXLogo.js";
 import { toOAuthProviderType as _ } from "../../utils/toOAuthProviderType.js";
-import '../../assets/SignInAuthMethodButtons.css';const N = "SignInAuthMethodButtons-module__divider___zphEh", o = {
+import '../../assets/SignInAuthMethodButtons.css';const x = "SignInAuthMethodButtons-module__divider___zphEh", o = {
   "auth-method-buttons": "SignInAuthMethodButtons-module__auth-method-buttons___jYEH7",
   "auth-btn": "SignInAuthMethodButtons-module__auth-btn___o1a09",
   "auth-btn-icon": "SignInAuthMethodButtons-module__auth-btn-icon___VjvFY",
   "auth-btn-label": "SignInAuthMethodButtons-module__auth-btn-label___mEWd3",
-  divider: N
+  divider: x
 }, b = {
   email: {
     label: "Continue with email",
@@ -32,37 +33,41 @@ import '../../assets/SignInAuthMethodButtons.css';const N = "SignInAuthMethodBut
   "oauth:apple": {
     label: "Continue with Apple",
     icon: /* @__PURE__ */ n(B, {})
+  },
+  "oauth:x": {
+    label: "Continue with X",
+    icon: /* @__PURE__ */ n(w, {})
   }
-}, U = ({ activeMethod: u }) => {
+}, V = ({ activeMethod: u }) => {
   const { authMethods: a } = y(), {
     signInWithOAuth: l,
     isPending: s,
     error: h,
     oauthProvider: c
-  } = S(), p = I(
+  } = C(), m = I(
     async (t) => {
-      const i = _(t);
-      i && l(i);
+      const e = _(t);
+      e && l(e);
     },
     [l]
-  ), { dispatch: d } = C(), e = v(() => (a || ["email"]).map((t) => {
+  ), { dispatch: p } = S(), i = v(() => (a || ["email"]).map((t) => {
     if (!b[t])
       return null;
-    const { label: i, icon: g } = b[t], m = t.startsWith("oauth:"), f = m ? () => p(t) : () => d({ type: "SET_AUTH_METHOD", payload: { authMethod: t } }), A = m && c.current === _(t) && s;
+    const { label: e, icon: g } = b[t], d = t.startsWith("oauth:"), f = d ? () => m(t) : () => p({ type: "SET_AUTH_METHOD", payload: { authMethod: t } }), A = d && c.current === _(t) && s;
     return {
       key: t,
-      label: i,
+      label: e,
       icon: g,
       onClick: f,
       isPending: A
     };
-  }).filter((t) => t !== null), [a, d, p, s, c]);
-  return !e.length || e.length === 1 && e[0].key === u ? null : /* @__PURE__ */ r("div", { className: o["auth-method-buttons"], children: [
+  }).filter((t) => t !== null), [a, p, m, s, c]);
+  return !i.length || i.length === 1 && i[0].key === u ? null : /* @__PURE__ */ r("div", { className: o["auth-method-buttons"], children: [
     /* @__PURE__ */ r("div", { className: o.divider, children: [
       /* @__PURE__ */ n("hr", {}),
       /* @__PURE__ */ n("span", { children: "or" })
     ] }),
-    e.map((t) => t.key === u ? null : /* @__PURE__ */ r(
+    i.map((t) => t.key === u ? null : /* @__PURE__ */ r(
       M,
       {
         "aria-label": t.ariaLabel,
@@ -82,5 +87,5 @@ import '../../assets/SignInAuthMethodButtons.css';const N = "SignInAuthMethodBut
   ] });
 };
 export {
-  U as SignInAuthMethodButtons
+  V as SignInAuthMethodButtons
 };

package/dist/icons/IconMinus.d.ts

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

package/dist/icons/IconMinus.js

@@ -0,0 +1,7 @@
+import { jsx as o } from "react/jsx-runtime";
+import "react";
+import { SvgIcon as i } from "./SvgIcon.js";
+const l = (r) => /* @__PURE__ */ o(i, { width: "12", height: "2", viewBox: "0 0 12 2", fill: "currentColor", ...r, children: /* @__PURE__ */ o("path", { d: "M12 1.2H0V0H12V1.2Z", fill: "#5B616E" }) });
+export {
+  l as IconMinus
+};

package/dist/icons/IconPlus.d.ts

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

package/dist/icons/IconPlus.js

@@ -0,0 +1,7 @@
+import { jsx as o } from "react/jsx-runtime";
+import "react";
+import { SvgIcon as t } from "./SvgIcon.js";
+const H = (r) => /* @__PURE__ */ o(t, { width: "10", height: "10", viewBox: "0 0 10 10", fill: "currentColor", ...r, children: /* @__PURE__ */ o("path", { d: "M4.19995 5.79995V10H5.79995V5.79995H10V4.19995H5.79995V0H4.19995V4.19995H0V5.79995H4.19995Z" }) });
+export {
+  H as IconPlus
+};

package/dist/icons/IconXLogo.d.ts

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

package/dist/icons/IconXLogo.js

@@ -0,0 +1,13 @@
+import { jsx as o } from "react/jsx-runtime";
+import "react";
+import { SvgIcon as r } from "./SvgIcon.js";
+const e = (L) => /* @__PURE__ */ o(r, { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", ...L, children: /* @__PURE__ */ o(
+  "path",
+  {
+    fill: "currentColor",
+    d: "M8.92704 6.34822L14.5111 0H13.1879L8.33921 5.51207L4.4666 0H0L5.85615 8.33522L0 14.9923H1.32333L6.44364 9.17137L10.5334 14.9923H15L8.92671 6.34822H8.92704ZM7.11456 8.40866L6.52121 7.57866L1.80014 0.974259H3.83269L7.64265 6.30422L8.236 7.13422L13.1885 14.0623H11.156L7.11456 8.40897V8.40866Z"
+  }
+) });
+export {
+  e as IconXLogo
+};

package/dist/icons/index.d.ts

@@ -1,3 +1,4 @@
+export * from './IconAppleLogo';
 export * from './IconArrowLeft';
 export * from './IconArrowsUpDown';
 export * from './IconCheck';
@@ -6,6 +7,9 @@ export * from './IconChevronDown';
 export * from './IconEnvelope';
 export * from './IconExclamationCircle';
 export * from './IconExclamationTriangle';
+export * from './IconGoogleLogo';
 export * from './IconLock';
 export * from './IconPhone';
 export * from './IconXMark';
+export * from './IconMinus';
+export * from './IconPlus';

package/dist/icons/index.js

@@ -1,24 +1,32 @@
-import { IconArrowLeft as e } from "./IconArrowLeft.js";
-import { IconArrowsUpDown as c } from "./IconArrowsUpDown.js";
-import { IconCheck as m } from "./IconCheck.js";
-import { IconCheckCircle as x } from "./IconCheckCircle.js";
-import { IconChevronDown as I } from "./IconChevronDown.js";
-import { IconEnvelope as l } from "./IconEnvelope.js";
-import { IconExclamationCircle as C } from "./IconExclamationCircle.js";
-import { IconExclamationTriangle as k } from "./IconExclamationTriangle.js";
+import { IconAppleLogo as e } from "./IconAppleLogo.js";
+import { IconArrowLeft as c } from "./IconArrowLeft.js";
+import { IconArrowsUpDown as t } from "./IconArrowsUpDown.js";
+import { IconCheck as x } from "./IconCheck.js";
+import { IconCheckCircle as I } from "./IconCheckCircle.js";
+import { IconChevronDown as a } from "./IconChevronDown.js";
+import { IconEnvelope as C } from "./IconEnvelope.js";
+import { IconExclamationCircle as h } from "./IconExclamationCircle.js";
+import { IconExclamationTriangle as w } from "./IconExclamationTriangle.js";
+import { IconGoogleLogo as s } from "./IconGoogleLogo.js";
 import { IconLock as E } from "./IconLock.js";
-import { IconPhone as A } from "./IconPhone.js";
-import { IconXMark as L } from "./IconXMark.js";
+import { IconPhone as v } from "./IconPhone.js";
+import { IconXMark as M } from "./IconXMark.js";
+import { IconMinus as G } from "./IconMinus.js";
+import { IconPlus as U } from "./IconPlus.js";
 export {
-  e as IconArrowLeft,
-  c as IconArrowsUpDown,
-  m as IconCheck,
-  x as IconCheckCircle,
-  I as IconChevronDown,
-  l as IconEnvelope,
-  C as IconExclamationCircle,
-  k as IconExclamationTriangle,
+  e as IconAppleLogo,
+  c as IconArrowLeft,
+  t as IconArrowsUpDown,
+  x as IconCheck,
+  I as IconCheckCircle,
+  a as IconChevronDown,
+  C as IconEnvelope,
+  h as IconExclamationCircle,
+  w as IconExclamationTriangle,
+  s as IconGoogleLogo,
   E as IconLock,
-  A as IconPhone,
-  L as IconXMark
+  G as IconMinus,
+  v as IconPhone,
+  U as IconPlus,
+  M as IconXMark
 };

package/dist/index.d.ts

@@ -2,6 +2,8 @@ export * from './components/AuthButton';
 export * from './components/CDPReactProvider';
 export * from './components/Fund';
 export * from './components/FundModal';
+export * from './components/ManageAuth';
+export * from './components/ManageAuthModal';
 export * from './components/SendEvmTransactionButton';
 export * from './components/SendSolanaTransactionButton';
 export * from './components/SignIn';

package/dist/index.js

@@ -1,117 +1,134 @@
 import { AuthButton as e } from "./components/AuthButton/index.js";
-import { ALL_AUTH_METHODS as n, AUTH_METHODS as m, CDPReactProvider as p, OAUTH_METHODS as f, useAppConfig as i, useProviderName as x } from "./components/CDPReactProvider/index.js";
-import { Fund as s, FundFooter as c } from "./components/Fund/index.js";
-import { FundModal as l, FundModalContent as u, FundModalTrigger as I } from "./components/FundModal/index.js";
-import { SendEvmTransactionButton as S } from "./components/SendEvmTransactionButton/index.js";
-import { SendSolanaTransactionButton as M } from "./components/SendSolanaTransactionButton/index.js";
-import { SignIn as F } from "./components/SignIn/index.js";
-import { useSignInReducer as A } from "./components/SignIn/useSignInReducer.js";
-import { SignInModal as B, SignInModalContent as k, SignInModalTrigger as D } from "./components/SignInModal/index.js";
-import { SignOutButton as v } from "./components/SignOutButton/index.js";
-import { ThemeProvider as O, useTheme as P } from "./components/ThemeProvider/index.js";
-import { Button as R } from "./components/ui/Button/index.js";
-import { Modal as L, ModalClose as _, ModalContent as V, ModalDescription as N, ModalTitle as j, ModalTrigger as X } from "./components/ui/Modal/index.js";
-import { cssVariables as y } from "./theme/cssVariables.js";
-import { theme as G } from "./theme/theme.js";
-import { borderRadius as K, borderRadiusComponents as Q, borderRadiusSemantic as W, colors as Y, colorsBase as Z, colorsComponents as $, colorsSemantic as oo, font as ro, fontComponents as eo, fontSemantic as to, tokens as no } from "./theme/tokens.js";
-import { flattenTokensObject as po, themeToCssVariables as fo } from "./theme/utils.js";
-import { IconArrowLeft as xo } from "./icons/IconArrowLeft.js";
-import { IconArrowsUpDown as so } from "./icons/IconArrowsUpDown.js";
-import { IconCheck as lo } from "./icons/IconCheck.js";
-import { IconCheckCircle as Io } from "./icons/IconCheckCircle.js";
-import { IconChevronDown as So } from "./icons/IconChevronDown.js";
-import { IconEnvelope as Mo } from "./icons/IconEnvelope.js";
-import { IconExclamationCircle as Fo } from "./icons/IconExclamationCircle.js";
-import { IconExclamationTriangle as Ao } from "./icons/IconExclamationTriangle.js";
-import { IconLock as Bo } from "./icons/IconLock.js";
-import { IconPhone as Do } from "./icons/IconPhone.js";
-import { IconXMark as vo } from "./icons/IconXMark.js";
-import { clamp as Oo } from "./utils/clamp.js";
-import { getMessageFromUnknownError as wo } from "./utils/getMessageFromUnknownError.js";
-import { isApiError as Uo } from "./utils/isApiError.js";
-import { isEmailInvalid as _o } from "./utils/isEmailInvalid.js";
-import { parseValuesFromPhoneNumber as No } from "./utils/parseValuesFromPhoneNumber.js";
-import { FundForm as Xo } from "./components/Fund/FundForm.js";
-import { FundTitle as yo } from "./components/Fund/FundTitle.js";
-import { useFundContext as Go } from "./components/Fund/FundProvider.js";
-import { SignInAuthMethodButtons as Ko } from "./components/SignIn/SignInAuthMethodButtons.js";
-import { SignInBackButton as Wo } from "./components/SignIn/SignInBackButton.js";
-import { SignInDescription as Zo } from "./components/SignIn/SignInDescription.js";
-import { SignInFooter as or } from "./components/SignIn/SignInFooter.js";
-import { SignInForm as er } from "./components/SignIn/SignInForm.js";
-import { SignInImage as nr } from "./components/SignIn/SignInImage.js";
-import { SignInTitle as pr } from "./components/SignIn/SignInTitle.js";
-import { useSignInContext as ir } from "./components/SignIn/SignInProvider.js";
+import { ALL_AUTH_METHODS as n, AUTH_METHODS as m, CDPReactProvider as a, OAUTH_METHODS as p, useAppConfig as f, useProviderName as x } from "./components/CDPReactProvider/index.js";
+import { Fund as l, FundFooter as s } from "./components/Fund/index.js";
+import { FundModal as c, FundModalContent as d, FundModalTrigger as g } from "./components/FundModal/index.js";
+import { unstable_ManageAuth as M, unstable_ManageAuthContent as S } from "./components/ManageAuth/index.js";
+import { unstable_ManageAuthItem as C } from "./components/ManageAuth/ManageAuthItem.js";
+import { unstable_ManageAuthModal as A, unstable_ManageAuthModalContent as F, unstable_ManageAuthModalTrigger as b } from "./components/ManageAuthModal/index.js";
+import { SendEvmTransactionButton as _ } from "./components/SendEvmTransactionButton/index.js";
+import { SendSolanaTransactionButton as k } from "./components/SendSolanaTransactionButton/index.js";
+import { SignIn as v } from "./components/SignIn/index.js";
+import { useSignInReducer as H } from "./components/SignIn/useSignInReducer.js";
+import { SignInModal as O, SignInModalContent as w, SignInModalTrigger as R } from "./components/SignInModal/index.js";
+import { SignOutButton as V } from "./components/SignOutButton/index.js";
+import { ThemeProvider as j, useTheme as G } from "./components/ThemeProvider/index.js";
+import { Button as q } from "./components/ui/Button/index.js";
+import { Modal as z, ModalClose as J, ModalContent as K, ModalDescription as Q, ModalTitle as W, ModalTrigger as Y } from "./components/ui/Modal/index.js";
+import { cssVariables as $ } from "./theme/cssVariables.js";
+import { theme as ro } from "./theme/theme.js";
+import { borderRadius as to, borderRadiusComponents as no, borderRadiusSemantic as mo, colors as ao, colorsBase as po, colorsComponents as fo, colorsSemantic as xo, font as io, fontComponents as lo, fontSemantic as so, tokens as uo } from "./theme/tokens.js";
+import { flattenTokensObject as go, themeToCssVariables as Io } from "./theme/utils.js";
+import { IconAppleLogo as So } from "./icons/IconAppleLogo.js";
+import { IconArrowLeft as Co } from "./icons/IconArrowLeft.js";
+import { IconArrowsUpDown as Ao } from "./icons/IconArrowsUpDown.js";
+import { IconCheck as bo } from "./icons/IconCheck.js";
+import { IconCheckCircle as _o } from "./icons/IconCheckCircle.js";
+import { IconChevronDown as ko } from "./icons/IconChevronDown.js";
+import { IconEnvelope as vo } from "./icons/IconEnvelope.js";
+import { IconExclamationCircle as Ho } from "./icons/IconExclamationCircle.js";
+import { IconExclamationTriangle as Oo } from "./icons/IconExclamationTriangle.js";
+import { IconGoogleLogo as Ro } from "./icons/IconGoogleLogo.js";
+import { IconLock as Vo } from "./icons/IconLock.js";
+import { IconPhone as jo } from "./icons/IconPhone.js";
+import { IconXMark as Xo } from "./icons/IconXMark.js";
+import { IconMinus as yo } from "./icons/IconMinus.js";
+import { IconPlus as Jo } from "./icons/IconPlus.js";
+import { clamp as Qo } from "./utils/clamp.js";
+import { getMessageFromUnknownError as Yo } from "./utils/getMessageFromUnknownError.js";
+import { isApiError as $o } from "./utils/isApiError.js";
+import { isEmailInvalid as rr } from "./utils/isEmailInvalid.js";
+import { parseValuesFromPhoneNumber as tr } from "./utils/parseValuesFromPhoneNumber.js";
+import { FundForm as mr } from "./components/Fund/FundForm.js";
+import { FundTitle as pr } from "./components/Fund/FundTitle.js";
+import { useFundContext as xr } from "./components/Fund/FundProvider.js";
+import { SignInAuthMethodButtons as lr } from "./components/SignIn/SignInAuthMethodButtons.js";
+import { SignInBackButton as ur } from "./components/SignIn/SignInBackButton.js";
+import { SignInDescription as dr } from "./components/SignIn/SignInDescription.js";
+import { SignInFooter as Ir } from "./components/SignIn/SignInFooter.js";
+import { SignInForm as Sr } from "./components/SignIn/SignInForm.js";
+import { SignInImage as Cr } from "./components/SignIn/SignInImage.js";
+import { SignInTitle as Ar } from "./components/SignIn/SignInTitle.js";
+import { useSignInContext as br } from "./components/SignIn/SignInProvider.js";
 export {
   n as ALL_AUTH_METHODS,
   m as AUTH_METHODS,
   e as AuthButton,
-  R as Button,
-  p as CDPReactProvider,
-  s as Fund,
-  c as FundFooter,
-  Xo as FundForm,
-  l as FundModal,
-  u as FundModalContent,
-  I as FundModalTrigger,
-  yo as FundTitle,
-  xo as IconArrowLeft,
-  so as IconArrowsUpDown,
-  lo as IconCheck,
-  Io as IconCheckCircle,
-  So as IconChevronDown,
-  Mo as IconEnvelope,
-  Fo as IconExclamationCircle,
-  Ao as IconExclamationTriangle,
-  Bo as IconLock,
-  Do as IconPhone,
-  vo as IconXMark,
-  L as Modal,
-  _ as ModalClose,
-  V as ModalContent,
-  N as ModalDescription,
-  j as ModalTitle,
-  X as ModalTrigger,
-  f as OAUTH_METHODS,
-  S as SendEvmTransactionButton,
-  M as SendSolanaTransactionButton,
-  F as SignIn,
-  Ko as SignInAuthMethodButtons,
-  Wo as SignInBackButton,
-  Zo as SignInDescription,
-  or as SignInFooter,
-  er as SignInForm,
-  nr as SignInImage,
-  B as SignInModal,
-  k as SignInModalContent,
-  D as SignInModalTrigger,
-  pr as SignInTitle,
-  v as SignOutButton,
-  O as ThemeProvider,
-  K as borderRadius,
-  Q as borderRadiusComponents,
-  W as borderRadiusSemantic,
-  Oo as clamp,
-  Y as colors,
-  Z as colorsBase,
-  $ as colorsComponents,
-  oo as colorsSemantic,
-  y as cssVariables,
-  po as flattenTokensObject,
-  ro as font,
-  eo as fontComponents,
-  to as fontSemantic,
-  wo as getMessageFromUnknownError,
-  Uo as isApiError,
-  _o as isEmailInvalid,
-  No as parseValuesFromPhoneNumber,
-  G as theme,
-  fo as themeToCssVariables,
-  no as tokens,
-  i as useAppConfig,
-  Go as useFundContext,
+  q as Button,
+  a as CDPReactProvider,
+  l as Fund,
+  s as FundFooter,
+  mr as FundForm,
+  c as FundModal,
+  d as FundModalContent,
+  g as FundModalTrigger,
+  pr as FundTitle,
+  So as IconAppleLogo,
+  Co as IconArrowLeft,
+  Ao as IconArrowsUpDown,
+  bo as IconCheck,
+  _o as IconCheckCircle,
+  ko as IconChevronDown,
+  vo as IconEnvelope,
+  Ho as IconExclamationCircle,
+  Oo as IconExclamationTriangle,
+  Ro as IconGoogleLogo,
+  Vo as IconLock,
+  yo as IconMinus,
+  jo as IconPhone,
+  Jo as IconPlus,
+  Xo as IconXMark,
+  z as Modal,
+  J as ModalClose,
+  K as ModalContent,
+  Q as ModalDescription,
+  W as ModalTitle,
+  Y as ModalTrigger,
+  p as OAUTH_METHODS,
+  _ as SendEvmTransactionButton,
+  k as SendSolanaTransactionButton,
+  v as SignIn,
+  lr as SignInAuthMethodButtons,
+  ur as SignInBackButton,
+  dr as SignInDescription,
+  Ir as SignInFooter,
+  Sr as SignInForm,
+  Cr as SignInImage,
+  O as SignInModal,
+  w as SignInModalContent,
+  R as SignInModalTrigger,
+  Ar as SignInTitle,
+  V as SignOutButton,
+  j as ThemeProvider,
+  to as borderRadius,
+  no as borderRadiusComponents,
+  mo as borderRadiusSemantic,
+  Qo as clamp,
+  ao as colors,
+  po as colorsBase,
+  fo as colorsComponents,
+  xo as colorsSemantic,
+  $ as cssVariables,
+  go as flattenTokensObject,
+  io as font,
+  lo as fontComponents,
+  so as fontSemantic,
+  Yo as getMessageFromUnknownError,
+  $o as isApiError,
+  rr as isEmailInvalid,
+  tr as parseValuesFromPhoneNumber,
+  ro as theme,
+  Io as themeToCssVariables,
+  uo as tokens,
+  M as unstable_ManageAuth,
+  S as unstable_ManageAuthContent,
+  C as unstable_ManageAuthItem,
+  A as unstable_ManageAuthModal,
+  F as unstable_ManageAuthModalContent,
+  b as unstable_ManageAuthModalTrigger,
+  f as useAppConfig,
+  xr as useFundContext,
   x as useProviderName,
-  ir as useSignInContext,
-  A as useSignInReducer,
-  P as useTheme
+  br as useSignInContext,
+  H as useSignInReducer,
+  G as useTheme
 };

package/dist/theme/theme.d.ts

@@ -403,6 +403,13 @@ export declare const theme: Flattened<{
             readonly secondary: {
                 readonly value: "#eef0f3";
             };
+            readonly negativeWash: {
+                readonly value: "{colors.fg.negative}";
+                readonly modify: {
+                    readonly type: "color-mix";
+                    readonly value: readonly [readonly ["{colors.bg.default}", "90%"]];
+                };
+            };
         };
         readonly fg: {
             readonly default: {
@@ -420,6 +427,9 @@ export declare const theme: Flattened<{
             readonly onSecondary: {
                 readonly value: "#0a0b0d";
             };
+            readonly onNegativeWash: {
+                readonly value: "{colors.fg.default}";
+            };
             readonly positive: {
                 readonly value: "#098551";
             };

package/dist/theme/tokens.d.ts

@@ -44,6 +44,13 @@ export declare const colorsSemantic: {
         readonly secondary: {
             readonly value: "#eef0f3";
         };
+        readonly negativeWash: {
+            readonly value: "{colors.fg.negative}";
+            readonly modify: {
+                readonly type: "color-mix";
+                readonly value: readonly [readonly ["{colors.bg.default}", "90%"]];
+            };
+        };
     };
     readonly fg: {
         readonly default: {
@@ -61,6 +68,9 @@ export declare const colorsSemantic: {
         readonly onSecondary: {
             readonly value: "#0a0b0d";
         };
+        readonly onNegativeWash: {
+            readonly value: "{colors.fg.default}";
+        };
         readonly positive: {
             readonly value: "#098551";
         };
@@ -738,6 +748,13 @@ export declare const colors: {
         readonly secondary: {
             readonly value: "#eef0f3";
         };
+        readonly negativeWash: {
+            readonly value: "{colors.fg.negative}";
+            readonly modify: {
+                readonly type: "color-mix";
+                readonly value: readonly [readonly ["{colors.bg.default}", "90%"]];
+            };
+        };
     };
     readonly fg: {
         readonly default: {
@@ -755,6 +772,9 @@ export declare const colors: {
         readonly onSecondary: {
             readonly value: "#0a0b0d";
         };
+        readonly onNegativeWash: {
+            readonly value: "{colors.fg.default}";
+        };
         readonly positive: {
             readonly value: "#098551";
         };
@@ -1396,6 +1416,13 @@ export declare const tokens: {
             readonly secondary: {
                 readonly value: "#eef0f3";
             };
+            readonly negativeWash: {
+                readonly value: "{colors.fg.negative}";
+                readonly modify: {
+                    readonly type: "color-mix";
+                    readonly value: readonly [readonly ["{colors.bg.default}", "90%"]];
+                };
+            };
         };
         readonly fg: {
             readonly default: {
@@ -1413,6 +1440,9 @@ export declare const tokens: {
             readonly onSecondary: {
                 readonly value: "#0a0b0d";
             };
+            readonly onNegativeWash: {
+                readonly value: "{colors.fg.default}";
+            };
             readonly positive: {
                 readonly value: "#098551";
             };

package/dist/theme/tokens.js

@@ -29,8 +29,12 @@ const e = {
     // skeleton background
     primary: { value: e.blue500 },
     // primary color background
-    secondary: { value: e.gray100 }
+    secondary: { value: e.gray100 },
     // secondary color background
+    negativeWash: {
+      value: "{colors.fg.negative}",
+      modify: { type: "color-mix", value: [["{colors.bg.default}", "90%"]] }
+    }
   },
   fg: {
     default: { value: e.black },
@@ -43,6 +47,8 @@ const e = {
     // text on primary color
     onSecondary: { value: e.black },
     // text on secondary color
+    onNegativeWash: { value: "{colors.fg.default}" },
+    // text on negative wash color
     positive: { value: e.green500 },
     // positive color text
     negative: { value: e.red500 },

package/package.json

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