@coinbase/cdp-react 0.0.45 → 0.0.47

package/dist/assets/Error.css

@@ -1 +1 @@
-.Error-module__error___zeTQt{color:var(--cdp-web-colors-fg-negative);line-height:1.25em;font-family:var(--cdp-web-font-family-body);font-size:var(--cdp-web-font-size-base);display:flex;align-items:center;gap:.25em;margin:0}.Error-module__error___zeTQt span{font-size:.875em}.Error-module__icon___uwkis{width:auto;height:.875em;flex-grow:0;flex-shrink:0}
+.Error-module__error___zeTQt{color:var(--cdp-web-colors-fg-negative);line-height:1.25em;font-family:var(--cdp-web-font-family-body);font-size:var(--cdp-web-font-size-base);display:flex;gap:.25em;margin:0}.Error-module__text___wQxPI{font-size:.875em}.Error-module__icon___uwkis{width:.875em;height:1.25em;flex-grow:0;flex-shrink:0}

package/dist/assets/OAuthStatusModal.css

@@ -0,0 +1 @@
+.OAuthStatusModal-module__oauth-status-modal___I69Ii{box-sizing:border-box;font:var(--cdp-web-font-size-base) / 1.5 var(--cdp-web-font-family-body);font-size:var(--cdp-web-font-size-base);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;align-items:center;justify-content:stretch;max-width:38.25em;padding:1em 2em;overflow:hidden;width:100%;height:100dvh;max-height:27.75em}.OAuthStatusModal-module__transition-wrapper___TmPRh,.OAuthStatusModal-module__status___vU6x7{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-grow:1;text-align:center}.OAuthStatusModal-module__status___vU6x7{width:100%;height:100%}.OAuthStatusModal-module__graphic___2fKoa{display:flex;align-items:center;justify-content:center;position:relative}.OAuthStatusModal-module__pad___oooMz{padding:.5em}.OAuthStatusModal-module__spinner___Q3dYq{width:5em;height:5em;margin:-.5em;color:var(--cdp-web-colors-line-primary)}.OAuthStatusModal-module__icon___Lj5Gf{color:var(--cdp-web-colors-page-text-default);position:absolute;display:flex;align-items:center;justify-content:center;width:2em;height:2em;top:50%;left:50%;transform:translate(-50%,-50%)}.OAuthStatusModal-module__icon___Lj5Gf svg{width:100%;height:auto}.OAuthStatusModal-module__icon-success___gqMWr svg{color:var(--cdp-web-colors-fg-positive)}.OAuthStatusModal-module__icon-error___psI7m svg{color:var(--cdp-web-colors-fg-negative)}.OAuthStatusModal-module__subhead___Pg9GI{font-size:1.25em;line-height:1.2;font-weight:600;margin:1em 0 .25em}.OAuthStatusModal-module__description___0qOZY{font-size:1.125em;font-variant-numeric:tabular-nums;color:var(--cdp-web-colors-page-text-muted);line-height:1.5;font-weight:400;margin:0 0 1em}.OAuthStatusModal-module__description___0qOZY:last-child{margin-bottom:0}.OAuthStatusModal-module__ring___mKwSb{border-radius:9999em;border:3px solid transparent;display:block;width:4em;height:4em}.OAuthStatusModal-module__ring-success___unyM9{border-color:var(--cdp-web-colors-line-positive)}.OAuthStatusModal-module__ring-error___OsgqU{border-color:var(--cdp-web-colors-line-negative)}.OAuthStatusModal-module__invisible___IeRd0{visibility:hidden}

package/dist/chunks/index.Bvudzh_y.js

@@ -0,0 +1,17 @@
+import { OAuth2ProviderType as t } from "@coinbase/cdp-hooks";
+import "../components/CDPReactProvider/index.js";
+import { config as i } from "../components/SignIn/flows/SignInWithEmail.js";
+import { config as m } from "../components/SignIn/flows/SignInWithSms.js";
+import "react";
+import { config as e } from "../components/SignIn/flows/SignInWithOAuth.js";
+const s = Object.keys(t).reduce(
+  (o, r) => (o[`oauth:${r.toLowerCase()}`] = e, o),
+  {}
+), g = {
+  ...s,
+  email: i,
+  sms: m
+};
+export {
+  g as a
+};

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

@@ -1,7 +1,9 @@
-import { Config as CDPHooksConfig } from '@coinbase/cdp-hooks';
+import { Config as CDPHooksConfig, OAuth2ProviderType } from '@coinbase/cdp-hooks';
 import { ThemeProviderProps } from '../ThemeProvider';
+export declare const OAUTH_METHODS: string[];
 export declare const AUTH_METHODS: readonly ["email", "sms"];
-export type AuthMethod = (typeof AUTH_METHODS)[number];
+export declare const ALL_AUTH_METHODS: string[];
+export type AuthMethod = (typeof AUTH_METHODS)[number] | `oauth:${OAuth2ProviderType}`;
 export interface AppConfig {
     appName?: string;
     appLogoUrl?: string;
@@ -11,6 +13,8 @@ export interface AppConfig {
 export type Config = AppConfig & CDPHooksConfig;
 export type CDPReactProviderProps = {
     config: Config;
+    name?: string;
 } & ThemeProviderProps;
-export declare const CDPReactProvider: ({ children, config, theme }: CDPReactProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CDPReactProvider: ({ children, config, name, theme }: CDPReactProviderProps) => import("react/jsx-runtime").JSX.Element;
 export declare const useAppConfig: () => Required<AppConfig>;
+export declare const useProviderName: () => string;

package/dist/components/CDPReactProvider/index.js

@@ -1,77 +1,95 @@
-import { jsx as c } from "react/jsx-runtime";
-import { CDPContext as L, CDPHooksProvider as O } from "@coinbase/cdp-hooks";
-import { createContext as v, useMemo as f, useContext as l } from "react";
-import { ThemeProvider as b } from "../ThemeProvider/index.js";
-const w = (o) => {
+import { jsx as h, jsxs as y } from "react/jsx-runtime";
+import { OAuth2ProviderType as b, CDPContext as N, CDPHooksProvider as T } from "@coinbase/cdp-hooks";
+import { lazy as D, createContext as H, useContext as m, useMemo as O } from "react";
+import { ThemeProvider as S } from "../ThemeProvider/index.js";
+const U = D(() => import("../OAuthStatusModal/index.js")), _ = (o) => {
   try {
     return JSON.stringify(o);
   } catch {
   }
   return "";
-}, T = [
+}, E = Object.keys(b).map((o) => `oauth:${o}`), j = [
   /** Email OTP method */
   "email",
   /** SMS OTP method */
   "sms"
-], _ = ({ children: o, config: r, theme: n }) => {
+], R = [...j, ...E], W = ({ children: o, config: n, name: s, theme: a }) => {
   const {
-    appName: a,
-    appLogoUrl: s,
-    showCoinbaseFooter: h,
-    authMethods: i,
-    projectId: p,
-    useMock: e,
-    debugging: u,
-    basePath: g,
-    ethereum: P,
-    solana: x
-  } = r, { createOnLogin: d } = P ?? {}, { createOnLogin: C } = x ?? {}, A = f(
+    appName: i,
+    appLogoUrl: p,
+    showCoinbaseFooter: u,
+    authMethods: e,
+    projectId: c,
+    useMock: t,
+    debugging: d,
+    basePath: C,
+    ethereum: M,
+    solana: P
+  } = n, { createOnLogin: l } = M ?? {}, { createOnLogin: f } = P ?? {}, v = O(
     () => ({
-      projectId: p,
-      useMock: e,
-      debugging: u,
-      basePath: g,
-      ethereum: { createOnLogin: d },
-      solana: { createOnLogin: C }
+      projectId: c,
+      useMock: t,
+      debugging: d,
+      basePath: C,
+      ethereum: { createOnLogin: l },
+      solana: { createOnLogin: f }
     }),
-    [p, e, u, g, d, C]
-  ), m = /* @__PURE__ */ c(y, { config: { appName: a, appLogoUrl: s, showCoinbaseFooter: h, authMethods: i }, children: /* @__PURE__ */ c(b, { theme: n, children: o }) });
-  return l(L) ? m : /* @__PURE__ */ c(O, { config: A, children: m });
-}, M = v(void 0), t = {
+    [c, t, d, C, l, f]
+  ), x = { appName: i, appLogoUrl: p, showCoinbaseFooter: u, authMethods: e }, L = e?.some((w) => w.startsWith("oauth:")), A = /* @__PURE__ */ h(F, { name: s, config: x, children: /* @__PURE__ */ y(S, { theme: a, children: [
+    o,
+    L && /* @__PURE__ */ h(U, {})
+  ] }) });
+  return m(N) ? A : /* @__PURE__ */ h(T, { config: v, children: A });
+}, g = H(
+  void 0
+), r = {
   appName: "",
   appLogoUrl: "",
   showCoinbaseFooter: !0,
   authMethods: ["email"]
-}, y = ({ children: o, config: r }) => {
+}, F = ({
+  children: o,
+  config: n,
+  name: s
+}) => {
   const {
-    appName: n = t.appName,
-    appLogoUrl: a = t.appLogoUrl,
-    showCoinbaseFooter: s = t.showCoinbaseFooter,
-    authMethods: h = t.authMethods
-  } = r ?? {}, i = w(h), p = f(() => {
-    let e = ["email"];
+    appName: a = r.appName,
+    appLogoUrl: i = r.appLogoUrl,
+    showCoinbaseFooter: p = r.showCoinbaseFooter,
+    authMethods: u = r.authMethods
+  } = n ?? {}, e = _(u), c = O(() => {
+    let t = ["email"];
     try {
-      e = JSON.parse(i);
+      t = JSON.parse(e);
     } catch {
     }
     return {
       app: {
-        appName: n,
-        appLogoUrl: a,
-        showCoinbaseFooter: s,
-        authMethods: Array.isArray(e) && e?.length ? e : t.authMethods
-      }
+        appName: a,
+        appLogoUrl: i,
+        showCoinbaseFooter: p,
+        authMethods: Array.isArray(t) && t?.length ? t : r.authMethods
+      },
+      name: s
     };
-  }, [n, a, s, i]);
-  return /* @__PURE__ */ c(M.Provider, { value: p, children: o });
-}, j = () => {
-  const o = l(M);
+  }, [a, i, p, e, s]);
+  return /* @__PURE__ */ h(g.Provider, { value: c, children: o });
+}, $ = () => {
+  const o = m(g);
   if (!o)
     throw new Error("useAppConfig must be used within an AppConfigProvider");
   return o.app;
+}, q = () => {
+  const o = m(g);
+  if (!o)
+    throw new Error("useProviderName must be used within an AppConfigProvider");
+  return o.name ?? "";
 };
 export {
-  T as AUTH_METHODS,
-  _ as CDPReactProvider,
-  j as useAppConfig
+  R as ALL_AUTH_METHODS,
+  j as AUTH_METHODS,
+  W as CDPReactProvider,
+  E as OAUTH_METHODS,
+  $ as useAppConfig,
+  q as useProviderName
 };

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

@@ -0,0 +1,6 @@
+type OAuthStatusModalContentProps = {
+    handleClose: () => void;
+};
+export declare const OAuthStatusModal: () => import("react/jsx-runtime").JSX.Element;
+export declare const OAuthStatusModalContent: ({ handleClose }: OAuthStatusModalContentProps) => import("react/jsx-runtime").JSX.Element;
+export default OAuthStatusModal;

package/dist/components/OAuthStatusModal/index.js

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

package/dist/components/SignIn/SignInAuthMethodButtons.d.ts

@@ -5,6 +5,7 @@ export interface SignInAuthMethodButtonProps {
     label: string;
     ariaLabel?: string;
     icon: ReactNode;
+    isPending?: boolean;
     onClick: () => void;
 }
 export interface SignInAuthMethodButtonsProps {

package/dist/components/SignIn/SignInAuthMethodButtons.js

@@ -1,59 +1,81 @@
-import { jsx as n, jsxs as i } from "react/jsx-runtime";
-import { useMemo as c } from "react";
-import { useAppConfig as d } from "../CDPReactProvider/index.js";
-import { useSignInContext as m } from "./SignInProvider.js";
-import { Button as _ } from "../ui/Button/index.js";
-import { IconEnvelope as b } from "../../icons/IconEnvelope.js";
-import { IconPhone as p } from "../../icons/IconPhone.js";
-import '../../assets/SignInAuthMethodButtons.css';const f = "SignInAuthMethodButtons-module__divider___zphEh", o = {
+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 M } from "./SignInProvider.js";
+import { Button as C } from "../ui/Button/index.js";
+import { ServerError as k } from "../ui/ServerError/index.js";
+import { IconEnvelope as B } from "../../icons/IconEnvelope.js";
+import { IconGoogleLogo as E } from "../../icons/IconGoogleLogo.js";
+import { IconPhone as P } from "../../icons/IconPhone.js";
+import { toOAuthProviderType as _ } from "../../utils/toOAuthProviderType.js";
+import '../../assets/SignInAuthMethodButtons.css';const O = "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: f
-}, r = {
+  divider: O
+}, b = {
   email: {
     label: "Continue with email",
-    icon: /* @__PURE__ */ n(b, {})
+    icon: /* @__PURE__ */ n(B, {})
   },
   sms: {
     label: "Continue with phone",
-    icon: /* @__PURE__ */ n(p, {})
+    icon: /* @__PURE__ */ n(P, {})
+  },
+  "oauth:google": {
+    label: "Continue with Google",
+    icon: /* @__PURE__ */ n(E, {})
   }
-}, S = ({ activeMethod: a }) => {
-  const { authMethods: u } = d(), { dispatch: l } = m(), e = c(() => (u || ["email"]).map((t) => {
-    if (!r[t])
+}, z = ({ activeMethod: u }) => {
+  const { authMethods: a } = y(), {
+    signInWithOAuth: s,
+    isPending: l,
+    error: h,
+    oauthProvider: c
+  } = S(), d = I(
+    async (t) => {
+      const e = _(t);
+      e && s(e);
+    },
+    [s]
+  ), { dispatch: m } = M(), i = v(() => (a || ["email"]).map((t) => {
+    if (!b[t])
       return null;
-    const { label: s, icon: h } = r[t];
+    const { label: e, icon: g } = b[t], p = t.startsWith("oauth:"), f = p ? () => d(t) : () => m({ type: "SET_AUTH_METHOD", payload: { authMethod: t } }), A = p && c.current === _(t) && l;
     return {
       key: t,
-      label: s,
-      icon: h,
-      onClick: () => l({ type: "SET_AUTH_METHOD", payload: { authMethod: t } })
+      label: e,
+      icon: g,
+      onClick: f,
+      isPending: A
     };
-  }).filter((t) => t !== null), [u, l]);
-  return !e.length || e.length === 1 && e[0].key === a ? null : /* @__PURE__ */ i("div", { className: o["auth-method-buttons"], children: [
-    /* @__PURE__ */ i("div", { className: o.divider, children: [
+  }).filter((t) => t !== null), [a, m, d, l, 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 === a ? null : /* @__PURE__ */ i(
-      _,
+    i.map((t) => t.key === u ? null : /* @__PURE__ */ r(
+      C,
       {
         "aria-label": t.ariaLabel,
         className: o["auth-btn"],
         type: "button",
         variant: "secondary",
         onClick: t.onClick,
+        isPending: t.isPending,
         children: [
           /* @__PURE__ */ n("span", { className: o["auth-btn-icon"], children: t.icon }),
           /* @__PURE__ */ n("span", { className: o["auth-btn-label"], children: t.label })
         ]
       },
       t.key
-    ))
+    )),
+    h && /* @__PURE__ */ n(k, { error: h })
   ] });
 };
 export {
-  S as SignInAuthMethodButtons
+  z as SignInAuthMethodButtons
 };

package/dist/components/SignIn/SignInDescription.js

@@ -1,6 +1,6 @@
 import { jsx as i } from "react/jsx-runtime";
 import "react";
-import { a as d } from "../../chunks/index.BzllgVaP.js";
+import { a as d } from "../../chunks/index.Bvudzh_y.js";
 import { useSignInContext as h } from "./SignInProvider.js";
 import "@coinbase/cdp-hooks";
 import "../CDPReactProvider/index.js";

package/dist/components/SignIn/SignInForm.js

@@ -2,7 +2,7 @@ import { jsx as a } from "react/jsx-runtime";
 import { useRef as d, useState as _, useLayoutEffect as p } from "react";
 import { useAppConfig as I } from "../CDPReactProvider/index.js";
 import { SwitchFadeTransition as T } from "../ui/SwitchFadeTransition/index.js";
-import { a as y } from "../../chunks/index.BzllgVaP.js";
+import { a as y } from "../../chunks/index.Bvudzh_y.js";
 import { useSignInContext as v } from "./SignInProvider.js";
 import "@coinbase/cdp-hooks";
 import '../../assets/SignInForm.css';const E = {

package/dist/components/SignIn/SignInTitle.js

@@ -1,6 +1,6 @@
 import { jsx as n } from "react/jsx-runtime";
 import "react";
-import { a as c } from "../../chunks/index.BzllgVaP.js";
+import { a as c } from "../../chunks/index.Bvudzh_y.js";
 import { useSignInContext as d } from "./SignInProvider.js";
 import "@coinbase/cdp-hooks";
 import "../CDPReactProvider/index.js";

package/dist/components/SignIn/flows/SignInWithOAuth.d.ts

@@ -0,0 +1,5 @@
+import { SignInFlowProps, SignInFlowConfig } from '../types';
+export declare const SignInWithOAuth: ({ step, children }: SignInFlowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SignInWithOAuthTitle: () => string;
+export declare const SignInWithOAuthDescription: () => string;
+export declare const config: SignInFlowConfig;

package/dist/components/SignIn/flows/SignInWithOAuth.js

@@ -0,0 +1,34 @@
+import { jsxs as c, Fragment as l, jsx as r } from "react/jsx-runtime";
+import { useCallback as a } from "react";
+import { useAppConfig as u } from "../../CDPReactProvider/index.js";
+import { useSignInWithOAuth as A } from "../hooks/useSignInWithOAuth.js";
+import { Button as S } from "../../ui/Button/index.js";
+import { ServerError as O } from "../../ui/ServerError/index.js";
+import { capitalize as m } from "../../../utils/capitalize.js";
+import { toOAuthProviderType as p } from "../../../utils/toOAuthProviderType.js";
+import "@coinbase/cdp-hooks";
+const W = ({ step: o, children: t }) => {
+  const { authMethods: n } = u(), d = n?.[0], i = p(d), { signInWithOAuth: e, isPending: g, error: s } = A(), f = a(() => {
+    i && e(i);
+  }, [i, e]), h = /* @__PURE__ */ c(l, { children: [
+    /* @__PURE__ */ c(S, { fullWidth: !0, onClick: f, type: "submit", isPending: g, children: [
+      "Continue with ",
+      m(i)
+    ] }),
+    s && /* @__PURE__ */ r("div", { style: { marginTop: "0.5em" }, children: /* @__PURE__ */ r(O, { error: s }) })
+  ] });
+  return /* @__PURE__ */ r("div", { children: t ? t({ step: o, Form: h }) : h });
+}, v = () => "Sign in", I = () => {
+  const { authMethods: o } = u(), t = o?.[0], n = p(t);
+  return `Sign in with your ${m(n)} account.`;
+}, F = {
+  description: I,
+  forms: W,
+  title: v
+};
+export {
+  W as SignInWithOAuth,
+  I as SignInWithOAuthDescription,
+  v as SignInWithOAuthTitle,
+  F as config
+};

package/dist/components/SignIn/hooks/useSignInWithOAuth.d.ts

@@ -0,0 +1,10 @@
+import { OAuth2ProviderType, APIError } from '@coinbase/cdp-hooks';
+import { RefObject } from 'react';
+export declare const OAUTH_PROVIDER_SESSION_STORAGE_KEY = "cdp-react-sign-in-with-oauth-provider-name";
+export type UseSignInWithOAuthReturnType = {
+    error: string | APIError | null;
+    isPending: boolean;
+    oauthProvider: RefObject<OAuth2ProviderType | null>;
+    signInWithOAuth: (providerType: OAuth2ProviderType) => Promise<void>;
+};
+export declare const useSignInWithOAuth: () => UseSignInWithOAuthReturnType;

package/dist/components/SignIn/hooks/useSignInWithOAuth.js

@@ -0,0 +1,30 @@
+import { useSignInWithOAuth as h } from "@coinbase/cdp-hooks";
+import { useState as c, useRef as m, useCallback as I } from "react";
+import { useProviderName as f } from "../../CDPReactProvider/index.js";
+import { isApiError as A } from "../../../utils/isApiError.js";
+const O = "cdp-react-sign-in-with-oauth-provider-name", W = () => {
+  const { signInWithOAuth: e } = h(), [r, s] = c(!1), [g, o] = c(null), i = f(), a = m(null), u = "An error occurred while signing in. Please try again.";
+  return {
+    signInWithOAuth: I(
+      async (t) => {
+        if (!r) {
+          a.current = t, s(!0), o(null);
+          try {
+            await e(t === "apple" ? "google" : t), sessionStorage.setItem(O, i);
+          } catch (n) {
+            const l = A(n) ? n : n instanceof Error && n.message || u;
+            o(l), s(!1), console.error(n);
+          }
+        }
+      },
+      [r, e, i]
+    ),
+    oauthProvider: a,
+    isPending: r,
+    error: g
+  };
+};
+export {
+  O as OAUTH_PROVIDER_SESSION_STORAGE_KEY,
+  W as useSignInWithOAuth
+};

package/dist/components/forms/AmountInput/index.d.ts

@@ -1,3 +1,3 @@
 import { InputHTMLAttributes } from 'react';
 import { AmountInputProps } from './types';
-export declare const AmountInput: import('react').ForwardRefExoticComponent<AmountInputProps & Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "inputMode" | "onChange" | "max" | "min"> & import('react').RefAttributes<HTMLInputElement>>;
+export declare const AmountInput: import('react').ForwardRefExoticComponent<AmountInputProps & Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "max" | "min" | "onChange" | "inputMode"> & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/forms/ExchangeAmountInput/index.d.ts

@@ -1,3 +1,3 @@
 import { InputHTMLAttributes } from 'react';
 import { ExchangeAmountInputProps } from './types';
-export declare const ExchangeAmountInput: import('react').ForwardRefExoticComponent<ExchangeAmountInputProps & Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "inputMode" | "onChange" | "max" | "min"> & import('react').RefAttributes<HTMLInputElement>>;
+export declare const ExchangeAmountInput: import('react').ForwardRefExoticComponent<ExchangeAmountInputProps & Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "max" | "min" | "onChange" | "inputMode"> & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/ui/Error/index.js

@@ -1,13 +1,14 @@
-import { jsxs as m, jsx as r } from "react/jsx-runtime";
-import { forwardRef as t } from "react";
+import { jsxs as m, jsx as o } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
 import { IconExclamationCircle as a } from "../../../icons/IconExclamationCircle.js";
-import '../../../assets/Error.css';const _ = "Error-module__error___zeTQt", l = "Error-module__icon___uwkis", o = {
-  error: _,
-  icon: l
-}, p = t(
-  ({ children: e, id: s, className: c = "", ...n }, i) => /* @__PURE__ */ m("p", { id: s, className: `${o.error} ${c}`, ref: i, ...n, children: [
-    /* @__PURE__ */ r(a, { className: o.icon }),
-    /* @__PURE__ */ r("span", { children: e })
+import '../../../assets/Error.css';const i = "Error-module__error___zeTQt", l = "Error-module__text___wQxPI", x = "Error-module__icon___uwkis", r = {
+  error: i,
+  text: l,
+  icon: x
+}, p = n(
+  ({ children: e, id: t, className: s = "", ...c }, _) => /* @__PURE__ */ m("p", { id: t, className: `${r.error} ${s}`, ref: _, ...c, children: [
+    /* @__PURE__ */ o(a, { className: r.icon }),
+    /* @__PURE__ */ o("span", { className: r.text, children: e })
   ] })
 );
 p.displayName = "Error";

package/dist/components/ui/Modal/index.js

@@ -1,5 +1,5 @@
 import { jsx as o, jsxs as t } from "react/jsx-runtime";
-import { DialogPortal as i, DialogOverlay as c, DialogContent as d, Dialog as n, DialogClose as m, DialogDescription as _, DialogTitle as g, DialogTrigger as p } from "@radix-ui/react-dialog";
+import { Dialog as i, DialogTitle as c, DialogDescription as d, DialogPortal as n, DialogOverlay as m, DialogContent as _, DialogClose as g, DialogTrigger as p } from "@radix-ui/react-dialog";
 import { forwardRef as M } from "react";
 import { useTheme as D } from "../../ThemeProvider/index.js";
 import '../../../assets/Modal.css';const f = "Modal-module__modal___MUsZA", y = "Modal-module__overlay___-RqGQ", v = "Modal-module__spacer___dIfOA", l = {
@@ -9,14 +9,14 @@ import '../../../assets/Modal.css';const f = "Modal-module__modal___MUsZA", y =
 }, u = M(
   ({ children: a, ...e }, s) => {
     const { cssVariables: r } = D();
-    return /* @__PURE__ */ o(i, { children: /* @__PURE__ */ t(c, { className: l.overlay, style: r, children: [
+    return /* @__PURE__ */ o(n, { children: /* @__PURE__ */ t(m, { className: l.overlay, style: r, children: [
       /* @__PURE__ */ o("div", { className: l.spacer }),
-      /* @__PURE__ */ o(d, { ...e, ref: s, className: l.modal, children: a })
+      /* @__PURE__ */ o(_, { ...e, ref: s, className: l.modal, children: a })
     ] }) });
   }
 );
 u.displayName = "ModalContent";
-const x = n, j = m, A = _, O = g, R = p;
+const x = i, j = g, A = d, O = c, R = p;
 export {
   x as Modal,
   j as ModalClose,

package/dist/icons/IconGoogleColorLogo.d.ts

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

package/dist/icons/IconGoogleColorLogo.js

@@ -0,0 +1,44 @@
+import { jsxs as o, jsx as l } from "react/jsx-runtime";
+import "react";
+import { SvgIcon as d } from "./SvgIcon.js";
+const p = (e) => /* @__PURE__ */ o(d, { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", ...e, children: [
+  /* @__PURE__ */ l(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M32 16.3637C32 15.2292 31.8961 14.1383 31.7032 13.091H16.3265V19.2801H25.1132C24.7347 21.2801 23.5844 22.9747 21.8553 24.1092V28.1237H27.1317C30.2189 25.3383 32 21.2365 32 16.3637Z",
+      fill: "#4285F4"
+    }
+  ),
+  /* @__PURE__ */ l(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M16.3265 32C20.7347 32 24.4304 30.5674 27.1317 28.1237L21.8553 24.1092C20.3933 25.0692 18.5232 25.6364 16.3265 25.6364C12.0742 25.6364 8.47497 22.8218 7.19111 19.04H1.73656V23.1855C4.42302 28.4145 9.94436 32 16.3265 32Z",
+      fill: "#34A853"
+    }
+  ),
+  /* @__PURE__ */ l(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M7.19111 19.04C6.86458 18.08 6.67904 17.0546 6.67904 16.0001C6.67904 14.9455 6.86457 13.9201 7.1911 12.9601V8.81463H1.73655C0.630798 10.9746 0 13.4183 0 16.0001C0 18.5819 0.630805 21.0254 1.73656 23.1855L7.19111 19.04Z",
+      fill: "#FBBC05"
+    }
+  ),
+  /* @__PURE__ */ l(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M16.3265 6.36364C18.7236 6.36364 20.8757 7.17091 22.5677 8.75637L27.2505 4.16728C24.423 1.58546 20.7273 0 16.3265 0C9.94436 0 4.42301 3.58554 1.73655 8.81463L7.1911 12.9601C8.47496 9.17827 12.0742 6.36364 16.3265 6.36364Z",
+      fill: "#EA4335"
+    }
+  )
+] });
+export {
+  p as IconGoogleColorLogo
+};

package/dist/icons/IconGoogleLogo.d.ts

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

package/dist/icons/IconGoogleLogo.js

@@ -0,0 +1,13 @@
+import { jsx as o } from "react/jsx-runtime";
+import "react";
+import { SvgIcon as r } from "./SvgIcon.js";
+const n = (C) => /* @__PURE__ */ o(r, { width: "20", height: "20", viewBox: "0 0 20 20", ...C, children: /* @__PURE__ */ o(
+  "path",
+  {
+    d: "M14.0229 5.47276C12.9867 4.48185 11.6683 3.9773 10.2002 3.9773C7.59563 3.9773 5.39102 5.7364 4.60468 8.10005C4.40449 8.70007 4.29096 9.34099 4.29096 10.0001C4.29096 10.6592 4.40449 11.3001 4.60448 11.9001C5.39102 14.2636 7.59563 16.0227 10.2002 16.0227C11.5456 16.0227 12.6911 15.6682 13.5865 15.0684C14.6454 14.3593 15.35 13.3002 15.5819 12.0502H10.2V8.18197H19.6182C19.7364 8.83652 19.8001 9.51834 19.8001 10.2274C19.8001 13.2729 18.7092 15.8366 16.8183 17.5775C15.1638 19.1045 12.9002 20 10.2002 20C6.2911 20 2.90932 17.7591 1.2636 14.491C0.586306 13.141 0.199951 11.6137 0.199951 10.0001C0.199951 8.38644 0.586306 6.85915 1.2638 5.50913C2.90932 2.24092 6.2911 0 10.2002 0C12.8958 0 15.1594 0.990915 16.8911 2.60456L14.0229 5.47276Z",
+    fill: "currentColor"
+  }
+) });
+export {
+  n as IconGoogleLogo
+};

package/dist/index.js

@@ -1,101 +1,104 @@
-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 { Fund as x, FundFooter as i } from "./components/Fund/index.js";
-import { FundModal as s } from "./components/FundModal/index.js";
-import { SendEvmTransactionButton as u } from "./components/SendEvmTransactionButton/index.js";
-import { SendSolanaTransactionButton as l } from "./components/SendSolanaTransactionButton/index.js";
-import { SignIn as S } from "./components/SignIn/index.js";
-import { useSignInReducer as C } from "./components/SignIn/useSignInReducer.js";
-import { SignOutButton as F } from "./components/SignOutButton/index.js";
-import { SignInModal as k } from "./components/SignInModal/index.js";
-import { ThemeProvider as E, useTheme as b } from "./components/ThemeProvider/index.js";
-import { cssVariables as v } from "./theme/cssVariables.js";
-import { theme as w } from "./theme/theme.js";
-import { borderRadius as P, borderRadiusComponents as R, borderRadiusSemantic as O, colors as U, colorsBase as V, colorsComponents as H, colorsSemantic as L, font as j, fontComponents as N, fontSemantic as X, tokens as _ } from "./theme/tokens.js";
-import { flattenTokensObject as y, themeToCssVariables as z } from "./theme/utils.js";
-import { IconArrowLeft as J } from "./icons/IconArrowLeft.js";
-import { IconArrowsUpDown as Q } from "./icons/IconArrowsUpDown.js";
-import { IconCheck as Y } from "./icons/IconCheck.js";
-import { IconCheckCircle as $ } from "./icons/IconCheckCircle.js";
-import { IconChevronDown as ro } from "./icons/IconChevronDown.js";
-import { IconEnvelope as to } from "./icons/IconEnvelope.js";
-import { IconExclamationCircle as mo } from "./icons/IconExclamationCircle.js";
-import { IconExclamationTriangle as fo } from "./icons/IconExclamationTriangle.js";
-import { IconLock as io } from "./icons/IconLock.js";
-import { IconPhone as so } from "./icons/IconPhone.js";
-import { IconXMark as uo } from "./icons/IconXMark.js";
-import { clamp as lo } from "./utils/clamp.js";
-import { getMessageFromUnknownError as go } from "./utils/getMessageFromUnknownError.js";
-import { isApiError as ho } from "./utils/isApiError.js";
-import { isEmailInvalid as To } from "./utils/isEmailInvalid.js";
-import { parseValuesFromPhoneNumber as Bo } from "./utils/parseValuesFromPhoneNumber.js";
-import { FundForm as bo } from "./components/Fund/FundForm.js";
-import { FundTitle as vo } from "./components/Fund/FundTitle.js";
-import { useFundContext as wo } from "./components/Fund/FundProvider.js";
-import { SignInAuthMethodButtons as Po } from "./components/SignIn/SignInAuthMethodButtons.js";
-import { SignInBackButton as Oo } from "./components/SignIn/SignInBackButton.js";
+import { ALL_AUTH_METHODS as e, AUTH_METHODS as t, CDPReactProvider as n, OAUTH_METHODS as m, useAppConfig as p, useProviderName as f } from "./components/CDPReactProvider/index.js";
+import { AuthButton as i } from "./components/AuthButton/index.js";
+import { Fund as s, FundFooter as c } from "./components/Fund/index.js";
+import { FundModal as I } from "./components/FundModal/index.js";
+import { SendEvmTransactionButton as l } from "./components/SendEvmTransactionButton/index.js";
+import { SendSolanaTransactionButton as g } from "./components/SendSolanaTransactionButton/index.js";
+import { SignIn as C } from "./components/SignIn/index.js";
+import { useSignInReducer as F } from "./components/SignIn/useSignInReducer.js";
+import { SignOutButton as E } from "./components/SignOutButton/index.js";
+import { SignInModal as B } from "./components/SignInModal/index.js";
+import { ThemeProvider as b, useTheme as v } from "./components/ThemeProvider/index.js";
+import { cssVariables as H } from "./theme/cssVariables.js";
+import { theme as P } from "./theme/theme.js";
+import { borderRadius as R, borderRadiusComponents as U, borderRadiusSemantic as L, colors as _, colorsBase as V, colorsComponents as N, colorsSemantic as j, font as X, fontComponents as q, fontSemantic as y, tokens as z } from "./theme/tokens.js";
+import { flattenTokensObject as J, themeToCssVariables as K } from "./theme/utils.js";
+import { IconArrowLeft as W } from "./icons/IconArrowLeft.js";
+import { IconArrowsUpDown as Z } from "./icons/IconArrowsUpDown.js";
+import { IconCheck as oo } from "./icons/IconCheck.js";
+import { IconCheckCircle as eo } from "./icons/IconCheckCircle.js";
+import { IconChevronDown as no } from "./icons/IconChevronDown.js";
+import { IconEnvelope as po } from "./icons/IconEnvelope.js";
+import { IconExclamationCircle as xo } from "./icons/IconExclamationCircle.js";
+import { IconExclamationTriangle as ao } from "./icons/IconExclamationTriangle.js";
+import { IconLock as co } from "./icons/IconLock.js";
+import { IconPhone as Io } from "./icons/IconPhone.js";
+import { IconXMark as So } from "./icons/IconXMark.js";
+import { clamp as To } from "./utils/clamp.js";
+import { getMessageFromUnknownError as ho } from "./utils/getMessageFromUnknownError.js";
+import { isApiError as Ao } from "./utils/isApiError.js";
+import { isEmailInvalid as ko } from "./utils/isEmailInvalid.js";
+import { parseValuesFromPhoneNumber as Mo } from "./utils/parseValuesFromPhoneNumber.js";
+import { FundForm as vo } from "./components/Fund/FundForm.js";
+import { FundTitle as Ho } from "./components/Fund/FundTitle.js";
+import { useFundContext as Po } from "./components/Fund/FundProvider.js";
+import { SignInAuthMethodButtons as Ro } from "./components/SignIn/SignInAuthMethodButtons.js";
+import { SignInBackButton as Lo } from "./components/SignIn/SignInBackButton.js";
 import { SignInDescription as Vo } from "./components/SignIn/SignInDescription.js";
-import { SignInFooter as Lo } from "./components/SignIn/SignInFooter.js";
-import { SignInForm as No } from "./components/SignIn/SignInForm.js";
-import { SignInImage as _o } from "./components/SignIn/SignInImage.js";
-import { SignInTitle as yo } from "./components/SignIn/SignInTitle.js";
-import { useSignInContext as Go } from "./components/SignIn/SignInProvider.js";
+import { SignInFooter as jo } from "./components/SignIn/SignInFooter.js";
+import { SignInForm as qo } from "./components/SignIn/SignInForm.js";
+import { SignInImage as zo } from "./components/SignIn/SignInImage.js";
+import { SignInTitle as Jo } from "./components/SignIn/SignInTitle.js";
+import { useSignInContext as Qo } from "./components/SignIn/SignInProvider.js";
 export {
-  e as AUTH_METHODS,
-  p as AuthButton,
-  t as CDPReactProvider,
-  x as Fund,
-  i as FundFooter,
-  bo as FundForm,
-  s as FundModal,
-  vo as FundTitle,
-  J as IconArrowLeft,
-  Q as IconArrowsUpDown,
-  Y as IconCheck,
-  $ as IconCheckCircle,
-  ro as IconChevronDown,
-  to as IconEnvelope,
-  mo as IconExclamationCircle,
-  fo as IconExclamationTriangle,
-  io as IconLock,
-  so as IconPhone,
-  uo as IconXMark,
-  u as SendEvmTransactionButton,
-  l as SendSolanaTransactionButton,
-  S as SignIn,
-  Po as SignInAuthMethodButtons,
-  Oo as SignInBackButton,
+  e as ALL_AUTH_METHODS,
+  t as AUTH_METHODS,
+  i as AuthButton,
+  n as CDPReactProvider,
+  s as Fund,
+  c as FundFooter,
+  vo as FundForm,
+  I as FundModal,
+  Ho as FundTitle,
+  W as IconArrowLeft,
+  Z as IconArrowsUpDown,
+  oo as IconCheck,
+  eo as IconCheckCircle,
+  no as IconChevronDown,
+  po as IconEnvelope,
+  xo as IconExclamationCircle,
+  ao as IconExclamationTriangle,
+  co as IconLock,
+  Io as IconPhone,
+  So as IconXMark,
+  m as OAUTH_METHODS,
+  l as SendEvmTransactionButton,
+  g as SendSolanaTransactionButton,
+  C as SignIn,
+  Ro as SignInAuthMethodButtons,
+  Lo as SignInBackButton,
   Vo as SignInDescription,
-  Lo as SignInFooter,
-  No as SignInForm,
-  _o as SignInImage,
-  k as SignInModal,
-  yo as SignInTitle,
-  F as SignOutButton,
-  E as ThemeProvider,
-  P as borderRadius,
-  R as borderRadiusComponents,
-  O as borderRadiusSemantic,
-  lo as clamp,
-  U as colors,
+  jo as SignInFooter,
+  qo as SignInForm,
+  zo as SignInImage,
+  B as SignInModal,
+  Jo as SignInTitle,
+  E as SignOutButton,
+  b as ThemeProvider,
+  R as borderRadius,
+  U as borderRadiusComponents,
+  L as borderRadiusSemantic,
+  To as clamp,
+  _ as colors,
   V as colorsBase,
-  H as colorsComponents,
-  L as colorsSemantic,
-  v as cssVariables,
-  y as flattenTokensObject,
-  j as font,
-  N as fontComponents,
-  X as fontSemantic,
-  go as getMessageFromUnknownError,
-  ho as isApiError,
-  To as isEmailInvalid,
-  Bo as parseValuesFromPhoneNumber,
-  w as theme,
-  z as themeToCssVariables,
-  _ as tokens,
-  n as useAppConfig,
-  wo as useFundContext,
-  Go as useSignInContext,
-  C as useSignInReducer,
-  b as useTheme
+  N as colorsComponents,
+  j as colorsSemantic,
+  H as cssVariables,
+  J as flattenTokensObject,
+  X as font,
+  q as fontComponents,
+  y as fontSemantic,
+  ho as getMessageFromUnknownError,
+  Ao as isApiError,
+  ko as isEmailInvalid,
+  Mo as parseValuesFromPhoneNumber,
+  P as theme,
+  K as themeToCssVariables,
+  z as tokens,
+  p as useAppConfig,
+  Po as useFundContext,
+  f as useProviderName,
+  Qo as useSignInContext,
+  F as useSignInReducer,
+  v as useTheme
 };

package/dist/utils/capitalize.d.ts

@@ -0,0 +1 @@
+export declare function capitalize(value: string): string;

package/dist/utils/capitalize.js

@@ -0,0 +1,6 @@
+function r(t) {
+  return t.length === 0 ? t : t.charAt(0).toUpperCase() + t.slice(1);
+}
+export {
+  r as capitalize
+};

package/dist/utils/toOAuthProviderType.d.ts

@@ -0,0 +1,2 @@
+import { OAuth2ProviderType } from '@coinbase/cdp-hooks';
+export declare function toOAuthProviderType(authMethod: string): OAuth2ProviderType;

package/dist/utils/toOAuthProviderType.js

@@ -0,0 +1,8 @@
+import { OAuth2ProviderType as o } from "@coinbase/cdp-hooks";
+function p(r) {
+  const t = r.startsWith("oauth:") ? r.split(":")[1] : r;
+  return o[t];
+}
+export {
+  p as toOAuthProviderType
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cdp-react",
-  "version": "0.0.45",
+  "version": "0.0.47",
   "type": "module",
   "dependencies": {
     "@internationalized/number": "3.6.4",
@@ -13,9 +13,9 @@
     "react-transition-state": "2.3.0"
   },
   "peerDependencies": {
-    "react": ">=18.2.0",
-    "@coinbase/cdp-core": "^0.0.45",
-    "@coinbase/cdp-hooks": "^0.0.45"
+    "react": ">=18.2.0 <19.2.0",
+    "@coinbase/cdp-core": "^0.0.47",
+    "@coinbase/cdp-hooks": "^0.0.47"
   },
   "devDependencies": {
     "@size-limit/preset-big-lib": "^11.2.0",
@@ -28,15 +28,15 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/big.js": "6.2.2",
     "@types/glob": "^9.0.0",
-    "@types/react": "^19.1.0",
-    "@types/react-dom": "^19.1.0",
+    "@types/react": "~19.1.0",
+    "@types/react-dom": "~19.1.0",
     "@vitejs/plugin-react": "^4.6.0",
     "eslint-plugin-css-modules": "^2.12.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "glob": "^11.0.3",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "react": "~19.1.0",
+    "react-dom": "~19.1.0",
     "rollup-plugin-visualizer": "^6.0.3",
     "size-limit": "^11.2.0",
     "stylelint": "^16.22.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.45",
-    "@coinbase/cdp-hooks": "^0.0.45"
+    "@coinbase/cdp-core": "^0.0.47",
+    "@coinbase/cdp-hooks": "^0.0.47"
   },
   "size-limit": [
     {
@@ -54,14 +54,14 @@
       "path": "./dist/index.js",
       "import": "*",
       "running": false,
-      "limit": "100 KB"
+      "limit": "110 KB"
     },
     {
       "name": "single-component",
       "path": "./dist/components/SignIn/index.js",
       "import": "{ SignIn }",
       "running": false,
-      "limit": "80 KB"
+      "limit": "85 KB"
     }
   ],
   "files": [

package/dist/chunks/index.BzllgVaP.js

@@ -1,12 +0,0 @@
-import "../components/CDPReactProvider/index.js";
-import { config as o } from "../components/SignIn/flows/SignInWithEmail.js";
-import { config as i } from "../components/SignIn/flows/SignInWithSms.js";
-import "@coinbase/cdp-hooks";
-import "react";
-const a = {
-  email: o,
-  sms: i
-};
-export {
-  a
-};