@coinbase/cdp-react 0.0.48 → 0.0.50

package/dist/components/OAuthStatusModal/index.js

@@ -1,82 +1,83 @@
 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 { useState as I, 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 S } 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 { IconAppleLogo as k } from "../../icons/IconAppleLogo.js";
+import { IconCheck as U } from "../../icons/IconCheck.js";
+import { IconGoogleColorLogo as q } from "../../icons/IconGoogleColorLogo.js";
+import { IconXMark as x } 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 = {
+import '../../assets/OAuthStatusModal.css';const G = "OAuthStatusModal-module__status___vU6x7", H = "OAuthStatusModal-module__graphic___2fKoa", K = "OAuthStatusModal-module__pad___oooMz", L = "OAuthStatusModal-module__spinner___Q3dYq", j = "OAuthStatusModal-module__icon___Lj5Gf", D = "OAuthStatusModal-module__subhead___Pg9GI", F = "OAuthStatusModal-module__description___0qOZY", Y = "OAuthStatusModal-module__ring___mKwSb", z = "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,
+  status: G,
+  graphic: H,
+  pad: K,
+  spinner: L,
   icon: j,
   "icon-success": "OAuthStatusModal-module__icon-success___gqMWr",
   "icon-error": "OAuthStatusModal-module__icon-error___psI7m",
   subhead: D,
   description: F,
-  ring: L,
+  ring: Y,
   "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();
+  invisible: z
+}, V = ["pending", "success", "error"], St = () => {
+  const [n, e] = I(!1), { oauthState: r } = O(), a = v();
   return u(() => {
-    if (a?.status === "pending") {
-      const c = sessionStorage.getItem(g);
-      if (c === null || c !== r)
+    if (r?.status === "pending" || r?.status === "error" || r?.status === "success") {
+      const c = sessionStorage.getItem(S);
+      if (c === null || c !== a)
         return;
-      sessionStorage.removeItem(g), e(!0);
+      sessionStorage.removeItem(S), e(!0);
     }
-  }, [a, r]), /* @__PURE__ */ s($, { open: n, onOpenChange: e, children: /* @__PURE__ */ o(w, { children: [
+  }, [r?.status, a]), /* @__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),
+      d(a),
       " ",
-      a?.status ? `${a?.status === "success" ? "successful" : a?.status === "error" ? "failed" : "pending"}` : ""
+      r?.status ? `${r?.status === "success" ? "successful" : r?.status === "error" ? "failed" : "pending"}` : ""
     ] }) }),
-    /* @__PURE__ */ s(V, { handleClose: () => e(!1) })
+    /* @__PURE__ */ s(W, { 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) => {
+}, W = ({ handleClose: n }) => {
+  const { oauthState: e } = O(), r = e?.providerType || "google", { timeRemaining: a, start: c, reset: m } = y(), _ = g(null), h = g(null), A = 250, p = b((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: [
+    a !== null && a <= 0 && (m(), n());
+  }, [a, m, n]), /* @__PURE__ */ o("div", { className: t["oauth-status-modal"], children: [
     /* @__PURE__ */ s(
       R,
       {
         animateHeight: !1,
         timeout: A,
-        items: z,
-        initialEntered: !0,
+        items: V,
+        initialEntered: !1,
         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 }) });
+          const N = Z[i];
+          return /* @__PURE__ */ s("div", { ...M, className: t.status, children: /* @__PURE__ */ s(N, { timeRemaining: a, provider: r }) });
         }
       }
     ),
     /* @__PURE__ */ s(C, {})
   ] });
-}, W = ({ provider: n }) => {
-  const e = Z[n];
+}, J = ({ provider: n }) => {
+  const e = B[n];
   return /* @__PURE__ */ o(l, { children: [
     /* @__PURE__ */ o("div", { className: t.graphic, children: [
       /* @__PURE__ */ s(
@@ -96,10 +97,10 @@ import '../../assets/OAuthStatusModal.css';const x = "OAuthStatusModal-module__s
     ] }),
     /* @__PURE__ */ s("p", { className: t.description, children: "Just a moment..." })
   ] });
-}, J = ({ timeRemaining: n, provider: e }) => /* @__PURE__ */ o(l, { children: [
+}, Q = ({ 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__ */ s("span", { className: `${t.icon} ${t["icon-success"]}`, children: /* @__PURE__ */ s(U, {}) })
   ] }),
   /* @__PURE__ */ o("p", { className: t.subhead, children: [
     "Signed in with ",
@@ -109,22 +110,23 @@ import '../../assets/OAuthStatusModal.css';const x = "OAuthStatusModal-module__s
     "This window will automatically close in ",
     n ?? "soon"
   ] })
-] }), Q = () => /* @__PURE__ */ o(l, { children: [
+] }), X = () => /* @__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("span", { className: `${t.icon} ${t["icon-error"]}`, children: /* @__PURE__ */ s(x, {}) })
   ] }),
   /* @__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
+] }), Z = {
+  pending: J,
+  success: Q,
+  error: X
+}, B = {
+  google: q,
+  apple: k
 };
 export {
-  pt as OAuthStatusModal,
-  V as OAuthStatusModalContent,
-  pt as default
+  St as OAuthStatusModal,
+  W as OAuthStatusModalContent,
+  St as default
 };

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

@@ -1,13 +1,10 @@
 import { APIError, SendEvmTransactionOptions } from '@coinbase/cdp-hooks';
-import { ButtonHTMLAttributes, ReactNode } from 'react';
-import { ButtonVariant } from '../../theme/theme';
-export interface SendEvmTransactionButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onError"> {
+import { ButtonProps } from '../ui/Button';
+export interface SendEvmTransactionButtonProps extends Omit<ButtonProps, "onError"> {
     account: SendEvmTransactionOptions["evmAccount"];
     network: SendEvmTransactionOptions["network"];
     onError?: (error: APIError | Error) => void;
     onSuccess?: (hash: string) => void;
-    pendingLabel?: ReactNode;
     transaction: SendEvmTransactionOptions["transaction"];
-    variant?: ButtonVariant;
 }
-export declare const SendEvmTransactionButton: ({ account, children, className, network, onClick, onError, onSuccess, pendingLabel, transaction, variant, ...props }: SendEvmTransactionButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SendEvmTransactionButton: ({ account, children, className, network, onClick, onError, onSuccess, pendingLabel, transaction, ...props }: SendEvmTransactionButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SendEvmTransactionButton/index.js

@@ -1,64 +1,62 @@
-import { jsx as S } from "react/jsx-runtime";
-import { useSendEvmTransaction as b, APIError as y } from "@coinbase/cdp-hooks";
-import { useState as T, useCallback as _ } from "react";
+import { jsx as E } from "react/jsx-runtime";
+import { useSendEvmTransaction as S, APIError as b } from "@coinbase/cdp-hooks";
+import { c as T } from "../../chunks/lite.1fxw3LjI.js";
+import { useState as _, useCallback as y } from "react";
 import { Button as w } from "../ui/Button/index.js";
-import "../../theme/theme.js";
-import { getMessageFromUnknownError as B } from "../../utils/getMessageFromUnknownError.js";
-import '../../assets/SendEvmTransactionButton.css';const P = {
+import { getMessageFromUnknownError as x } from "../../utils/getMessageFromUnknownError.js";
+import '../../assets/SendEvmTransactionButton.css';const B = {
   "send-evm-transaction-button": "SendEvmTransactionButton-module__send-evm-transaction-button___74m57"
 }, q = ({
-  account: e,
-  children: f,
-  className: l = "",
-  network: s,
+  account: s,
+  children: l,
+  className: u = "",
+  network: e,
   onClick: o,
   onError: a,
   onSuccess: i,
-  pendingLabel: u,
+  pendingLabel: p,
   transaction: r,
-  variant: p = "primary",
-  ...g
+  ...m
 }) => {
-  const [v, m] = T(!1), { sendEvmTransaction: c } = b(), h = _(
-    async (d) => {
-      d.preventDefault(), o?.(d);
+  const [g, c] = _(!1), { sendEvmTransaction: d } = S(), h = y(
+    async (f) => {
+      f.preventDefault(), o?.(f);
       try {
-        if (!e || !s || !r) {
+        if (!s || !e || !r) {
           const n = [];
-          throw e || n.push("account"), s || n.push("network"), r || n.push("transaction"), new Error(`Missing required parameters: ${n.join(", ")}`);
+          throw s || n.push("account"), e || n.push("network"), r || n.push("transaction"), new Error(`Missing required parameters: ${n.join(", ")}`);
         }
-        m(!0);
-        const { transactionHash: t } = await c({
+        c(!0);
+        const { transactionHash: t } = await d({
           transaction: r,
-          evmAccount: e,
-          network: s
+          evmAccount: s,
+          network: e
         });
         i?.(t);
       } catch (t) {
         let n;
-        if (t instanceof y || t instanceof Error)
+        if (t instanceof b || t instanceof Error)
           n = t;
         else {
-          const E = B(t);
-          n = new Error(E);
+          const v = x(t);
+          n = new Error(v);
         }
         a?.(n);
       } finally {
-        m(!1);
+        c(!1);
       }
     },
-    [e, s, o, a, i, c, r]
+    [s, e, o, a, i, d, r]
   );
-  return /* @__PURE__ */ S(
+  return /* @__PURE__ */ E(
     w,
     {
-      className: `${P["send-evm-transaction-button"]} ${l}`,
-      isPending: v,
-      pendingLabel: u || "Sending transaction...",
+      className: m.asChild ? "" : T(B["send-evm-transaction-button"], u),
+      isPending: g,
+      pendingLabel: p || "Sending transaction...",
       onClick: h,
-      variant: p,
-      ...g,
-      children: f || "Send transaction"
+      ...m,
+      children: l || "Send transaction"
     }
   );
 };

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

@@ -1,13 +1,10 @@
 import { APIError, SendSolanaTransactionOptions } from '@coinbase/cdp-hooks';
-import { ButtonHTMLAttributes, ReactNode } from 'react';
-import { ButtonVariant } from '../../theme/theme';
-export interface SendSolanaTransactionButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onError"> {
+import { ButtonProps } from '../ui/Button';
+export interface SendSolanaTransactionButtonProps extends Omit<ButtonProps, "onError"> {
     account: SendSolanaTransactionOptions["solanaAccount"];
     network: SendSolanaTransactionOptions["network"];
     onError?: (error: APIError | Error) => void;
     onSuccess?: (signature: string) => void;
-    pendingLabel?: ReactNode;
     transaction: SendSolanaTransactionOptions["transaction"];
-    variant?: ButtonVariant;
 }
-export declare const SendSolanaTransactionButton: ({ account, children, className, network, onClick, onError, onSuccess, pendingLabel, transaction, variant, ...props }: SendSolanaTransactionButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SendSolanaTransactionButton: ({ account, children, className, network, onClick, onError, onSuccess, pendingLabel, transaction, ...props }: SendSolanaTransactionButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SendSolanaTransactionButton/index.js

@@ -1,34 +1,33 @@
-import { jsx as y } from "react/jsx-runtime";
+import { jsx as b } from "react/jsx-runtime";
 import { useSendSolanaTransaction as T, APIError as _ } from "@coinbase/cdp-hooks";
-import { useState as w, useCallback as B } from "react";
-import { Button as E } from "../ui/Button/index.js";
-import "../../theme/theme.js";
-import { getMessageFromUnknownError as x } from "../../utils/getMessageFromUnknownError.js";
+import { c as w } from "../../chunks/lite.1fxw3LjI.js";
+import { useState as x, useCallback as y } from "react";
+import { Button as B } from "../ui/Button/index.js";
+import { getMessageFromUnknownError as E } from "../../utils/getMessageFromUnknownError.js";
 import '../../assets/SendSolanaTransactionButton.css';const P = {
   "send-solana-transaction-button": "SendSolanaTransactionButton-module__send-solana-transaction-button___OxwvB"
 }, q = ({
   account: t,
-  children: d,
-  className: f = "",
+  children: f,
+  className: u = "",
   network: s,
-  onClick: r,
-  onError: e,
+  onClick: e,
+  onError: r,
   onSuccess: i,
-  pendingLabel: u,
+  pendingLabel: p,
   transaction: o,
-  variant: p = "primary",
-  ...S
+  ...l
 }) => {
-  const [g, l] = w(!1), { sendSolanaTransaction: c } = T(), h = B(
+  const [S, c] = x(!1), { sendSolanaTransaction: d } = T(), g = y(
     async (m) => {
-      m.preventDefault(), r?.(m);
+      m.preventDefault(), e?.(m);
       try {
         if (!t || !s || !o) {
           const n = [];
           throw t || n.push("account"), s || n.push("network"), o || n.push("transaction"), new Error(`Missing required parameters: ${n.join(", ")}`);
         }
-        l(!0);
-        const { transactionSignature: a } = await c({
+        c(!0);
+        const { transactionSignature: a } = await d({
           transaction: o,
           solanaAccount: t,
           network: s
@@ -39,26 +38,25 @@ import '../../assets/SendSolanaTransactionButton.css';const P = {
         if (a instanceof _ || a instanceof Error)
           n = a;
         else {
-          const b = x(a);
-          n = new Error(b);
+          const h = E(a);
+          n = new Error(h);
         }
-        e?.(n);
+        r?.(n);
       } finally {
-        l(!1);
+        c(!1);
       }
     },
-    [t, s, r, e, i, c, o]
+    [t, s, e, r, i, d, o]
   );
-  return /* @__PURE__ */ y(
-    E,
+  return /* @__PURE__ */ b(
+    B,
     {
-      className: `${P["send-solana-transaction-button"]} ${f}`,
-      isPending: g,
-      pendingLabel: u || "Sending transaction...",
-      onClick: h,
-      variant: p,
-      ...S,
-      children: d || "Send transaction"
+      className: l.asChild ? "" : w(P["send-solana-transaction-button"], u),
+      isPending: S,
+      pendingLabel: p || "Sending transaction...",
+      onClick: g,
+      ...l,
+      children: f || "Send transaction"
     }
   );
 };

package/dist/components/SignIn/SignInAuthMethodButtons.js

@@ -2,63 +2,68 @@ 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 { useSignInContext as C } from "./SignInProvider.js";
+import { Button as M } 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 { 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 { toOAuthProviderType as _ } from "../../utils/toOAuthProviderType.js";
-import '../../assets/SignInAuthMethodButtons.css';const O = "SignInAuthMethodButtons-module__divider___zphEh", o = {
+import '../../assets/SignInAuthMethodButtons.css';const N = "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: O
+  divider: N
 }, b = {
   email: {
     label: "Continue with email",
-    icon: /* @__PURE__ */ n(B, {})
+    icon: /* @__PURE__ */ n(E, {})
   },
   sms: {
     label: "Continue with phone",
-    icon: /* @__PURE__ */ n(P, {})
+    icon: /* @__PURE__ */ n(O, {})
   },
   "oauth:google": {
     label: "Continue with Google",
-    icon: /* @__PURE__ */ n(E, {})
+    icon: /* @__PURE__ */ n(P, {})
+  },
+  "oauth:apple": {
+    label: "Continue with Apple",
+    icon: /* @__PURE__ */ n(B, {})
   }
-}, z = ({ activeMethod: u }) => {
+}, U = ({ activeMethod: u }) => {
   const { authMethods: a } = y(), {
-    signInWithOAuth: s,
-    isPending: l,
+    signInWithOAuth: l,
+    isPending: s,
     error: h,
     oauthProvider: c
-  } = S(), d = I(
+  } = S(), p = I(
     async (t) => {
-      const e = _(t);
-      e && s(e);
+      const i = _(t);
+      i && l(i);
     },
-    [s]
-  ), { dispatch: m } = M(), i = v(() => (a || ["email"]).map((t) => {
+    [l]
+  ), { dispatch: d } = C(), e = v(() => (a || ["email"]).map((t) => {
     if (!b[t])
       return null;
-    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;
+    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;
     return {
       key: t,
-      label: e,
+      label: i,
       icon: g,
       onClick: f,
       isPending: A
     };
-  }).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: [
+  }).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: [
     /* @__PURE__ */ r("div", { className: o.divider, children: [
       /* @__PURE__ */ n("hr", {}),
       /* @__PURE__ */ n("span", { children: "or" })
     ] }),
-    i.map((t) => t.key === u ? null : /* @__PURE__ */ r(
-      C,
+    e.map((t) => t.key === u ? null : /* @__PURE__ */ r(
+      M,
       {
         "aria-label": t.ariaLabel,
         className: o["auth-btn"],
@@ -77,5 +82,5 @@ import '../../assets/SignInAuthMethodButtons.css';const O = "SignInAuthMethodBut
   ] });
 };
 export {
-  z as SignInAuthMethodButtons
+  U as SignInAuthMethodButtons
 };

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

@@ -1,26 +1,26 @@
-import { useSignInWithOAuth as h } from "@coinbase/cdp-hooks";
+import { useSignInWithOAuth as l } 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.";
+  const { signInWithOAuth: t } = l(), [n, e] = c(!1), [g, s] = c(null), o = f(), i = m(null), a = "An error occurred while signing in. Please try again.";
   return {
     signInWithOAuth: I(
-      async (t) => {
-        if (!r) {
-          a.current = t, s(!0), o(null);
+      async (u) => {
+        if (!n) {
+          i.current = u, e(!0), s(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);
+            await t(u), sessionStorage.setItem(O, o);
+          } catch (r) {
+            const h = A(r) ? r : r instanceof Error && r.message || a;
+            s(h), e(!1), console.error(r);
           }
         }
       },
-      [r, e, i]
+      [n, t, o]
     ),
-    oauthProvider: a,
-    isPending: r,
+    oauthProvider: i,
+    isPending: n,
     error: g
   };
 };

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 import { SignInAuthMethodButtons, SignInAuthMethodButtonsProps } from './SignInAuthMethodButtons';
 import { SignInBackButton, SignInBackButtonProps } from './SignInBackButton';
 import { SignInDescription, SignInDescriptionProps } from './SignInDescription';
@@ -8,9 +8,8 @@ import { SignInImage, SignInImageProps } from './SignInImage';
 import { useSignInContext } from './SignInProvider';
 import { SignInTitle, SignInTitleProps } from './SignInTitle';
 import { SignInState, SignInAction } from './types';
-export interface SignInProps {
+export interface SignInProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
     children?: ReactNode | ((state: SignInState) => ReactNode);
-    className?: string;
     onSuccess?: () => void;
 }
 export declare const SignIn: (props: SignInProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SignIn/index.js

@@ -1,48 +1,48 @@
 import { jsx as n, jsxs as t, Fragment as s } from "react/jsx-runtime";
 import "react";
-import { useAppConfig as l } from "../CDPReactProvider/index.js";
-import { SignInAuthMethodButtons as d } from "./SignInAuthMethodButtons.js";
-import { SignInBackButton as f } from "./SignInBackButton.js";
-import { SignInDescription as u } from "./SignInDescription.js";
-import { SignInFooter as I } from "./SignInFooter.js";
-import { SignInForm as S } from "./SignInForm.js";
-import { SignInImage as b } from "./SignInImage.js";
-import { SignInProvider as k, useSignInContext as w } from "./SignInProvider.js";
-import { SignInTitle as h } from "./SignInTitle.js";
+import { useAppConfig as d } from "../CDPReactProvider/index.js";
+import { SignInAuthMethodButtons as f } from "./SignInAuthMethodButtons.js";
+import { SignInBackButton as u } from "./SignInBackButton.js";
+import { SignInDescription as I } from "./SignInDescription.js";
+import { SignInFooter as S } from "./SignInFooter.js";
+import { SignInForm as b } from "./SignInForm.js";
+import { SignInImage as k } from "./SignInImage.js";
+import { SignInProvider as w, useSignInContext as h } from "./SignInProvider.js";
+import { SignInTitle as v } from "./SignInTitle.js";
 import "@coinbase/cdp-hooks";
-import '../../assets/SignIn.css';const v = "SignIn-module__footer___3Gkbc", o = {
+import '../../assets/SignIn.css';const F = "SignIn-module__footer___3Gkbc", o = {
   "sign-in": "SignIn-module__sign-in___cYpee",
   "title-desc-wrapper": "SignIn-module__title-desc-wrapper___VpPcA",
   "back-button": "SignIn-module__back-button___bmE-y",
   "back-button-wrapper": "SignIn-module__back-button-wrapper___Q9FA1",
-  footer: v
-}, F = ({ className: r = "", children: i, onSuccess: p }) => {
-  const { state: a } = w(), { showCoinbaseFooter: _ } = l(), c = typeof i == "function" ? i(a) : i;
-  return /* @__PURE__ */ t("div", { className: `${o["sign-in"]} ${r}`, children: [
+  footer: F
+}, N = ({ className: r = "", children: i, onSuccess: p, ...a }) => {
+  const { state: _ } = h(), { showCoinbaseFooter: g } = d(), c = typeof i == "function" ? i(_) : i;
+  return /* @__PURE__ */ t("div", { className: `${o["sign-in"]} ${r}`, ...a, children: [
     c,
     !c && /* @__PURE__ */ t(s, { children: [
-      /* @__PURE__ */ n("div", { className: o["back-button-wrapper"], children: /* @__PURE__ */ n(f, { className: o["back-button"] }) }),
-      /* @__PURE__ */ n(b, {}),
-      /* @__PURE__ */ n(S, { onSuccess: p, children: ({ authMethod: e, step: m, Form: g }) => /* @__PURE__ */ t(s, { children: [
+      /* @__PURE__ */ n("div", { className: o["back-button-wrapper"], children: /* @__PURE__ */ n(u, { className: o["back-button"] }) }),
+      /* @__PURE__ */ n(k, {}),
+      /* @__PURE__ */ n(b, { onSuccess: p, children: ({ authMethod: e, step: m, Form: l }) => /* @__PURE__ */ t(s, { children: [
         /* @__PURE__ */ t("div", { className: o["title-desc-wrapper"], children: [
-          /* @__PURE__ */ n(h, { step: m, authMethod: e }),
-          /* @__PURE__ */ n(u, { step: m, authMethod: e })
+          /* @__PURE__ */ n(v, { step: m, authMethod: e }),
+          /* @__PURE__ */ n(I, { step: m, authMethod: e })
         ] }),
-        g,
-        m === "credentials" && /* @__PURE__ */ n(d, { activeMethod: e })
+        l,
+        m === "credentials" && /* @__PURE__ */ n(f, { activeMethod: e })
       ] }) }),
-      _ && /* @__PURE__ */ n(I, { className: o.footer })
+      g && /* @__PURE__ */ n(S, { className: o.footer })
     ] })
   ] });
-}, Q = (r) => /* @__PURE__ */ n(k, { children: /* @__PURE__ */ n(F, { ...r }) });
+}, T = (r) => /* @__PURE__ */ n(w, { children: /* @__PURE__ */ n(N, { ...r }) });
 export {
-  Q as SignIn,
-  d as SignInAuthMethodButtons,
-  f as SignInBackButton,
-  u as SignInDescription,
-  I as SignInFooter,
-  S as SignInForm,
-  b as SignInImage,
-  h as SignInTitle,
-  w as useSignInContext
+  T as SignIn,
+  f as SignInAuthMethodButtons,
+  u as SignInBackButton,
+  I as SignInDescription,
+  S as SignInFooter,
+  b as SignInForm,
+  k as SignInImage,
+  v as SignInTitle,
+  h as useSignInContext
 };