@coinbase/cdp-react 0.0.18 → 0.0.19

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

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { AuthMethod } from '../CDPReactProvider/CDPReactProvider';
+export interface SignInAuthMethodButtonProps {
+    key: AuthMethod;
+    label: string;
+    ariaLabel?: string;
+    icon: ReactNode;
+    onClick: () => void;
+}
+export interface SignInAuthMethodButtonsProps {
+    activeMethod?: AuthMethod;
+}
+export declare const SignInAuthMethodButtons: ({ activeMethod }: SignInAuthMethodButtonsProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/SignIn/SignInAuthMethodButtons.js

@@ -0,0 +1,57 @@
+import { jsx as n, jsxs as i } from "react/jsx-runtime";
+import { useMemo as c } from "react";
+import { Button as d } from "../Button/index.js";
+import { useAppConfig as m } from "../CDPReactProvider/index.js";
+import { useSignInContext as p } from "./SignInProvider.js";
+import { IconEnvelope as _ } from "../../icons/IconEnvelope.js";
+import { IconPhone as b } from "../../icons/IconPhone.js";
+import '../../assets/SignInAuthMethodButtons.css';const f = "SignInAuthMethodButtons-module__divider___zphEh", e = {
+  "auth-method-buttons": "SignInAuthMethodButtons-module__auth-method-buttons___jYEH7",
+  "auth-btn-icon": "SignInAuthMethodButtons-module__auth-btn-icon___VjvFY",
+  "auth-btn-label": "SignInAuthMethodButtons-module__auth-btn-label___mEWd3",
+  divider: f
+}, r = {
+  email: {
+    label: "Continue with email",
+    icon: /* @__PURE__ */ n(_, {})
+  },
+  sms: {
+    label: "Continue with phone",
+    icon: /* @__PURE__ */ n(b, {})
+  }
+}, B = ({ activeMethod: l }) => {
+  const { authMethods: a } = m(), { dispatch: u } = p(), o = c(() => (a || ["email"]).map((t) => {
+    if (!r[t])
+      return null;
+    const { label: s, icon: h } = r[t];
+    return {
+      key: t,
+      label: s,
+      icon: h,
+      onClick: () => u({ type: "SET_AUTH_METHOD", payload: { authMethod: t } })
+    };
+  }).filter((t) => t !== null), [a, u]);
+  return !o.length || o.length === 1 && o[0].key === l ? null : /* @__PURE__ */ i("div", { className: e["auth-method-buttons"], children: [
+    /* @__PURE__ */ i("div", { className: e.divider, children: [
+      /* @__PURE__ */ n("hr", {}),
+      /* @__PURE__ */ n("span", { children: "or" })
+    ] }),
+    o.map((t) => t.key === l ? null : /* @__PURE__ */ i(
+      d,
+      {
+        "aria-label": t.ariaLabel,
+        type: "button",
+        variant: "secondary",
+        onClick: t.onClick,
+        children: [
+          /* @__PURE__ */ n("span", { className: e["auth-btn-icon"], children: t.icon }),
+          /* @__PURE__ */ n("span", { className: e["auth-btn-label"], children: t.label })
+        ]
+      },
+      t.key
+    ))
+  ] });
+};
+export {
+  B as SignInAuthMethodButtons
+};

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

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from 'react';
+import { ButtonSize, ButtonVariant } from '../../theme/theme';
+import { SignInState } from './types';
+export interface SignInBackButtonProps extends HTMLAttributes<HTMLButtonElement> {
+    step?: SignInState["step"];
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+}
+export declare const SignInBackButton: ({ step: stepFromProps, children, onClick, size, variant, ["aria-label"]: ariaLabel, ...props }: SignInBackButtonProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/SignIn/SignInBackButton.js

@@ -0,0 +1,38 @@
+import { jsx as n } from "react/jsx-runtime";
+import { useMemo as f } from "react";
+import { Button as S } from "../Button/index.js";
+import { IconArrowLeft as d } from "../../icons/IconArrowLeft.js";
+import "../../theme/theme.js";
+import { useSignInContext as B } from "./SignInProvider.js";
+import "@coinbase/cdp-hooks";
+import "../CDPReactProvider/index.js";
+import '../../assets/SignInBackButton.css';const _ = "SignInBackButton-module__icon___stNFS", k = {
+  icon: _
+}, T = ({
+  step: t,
+  children: i,
+  onClick: r,
+  size: e = "md",
+  variant: c = "transparentSecondary",
+  ["aria-label"]: s = "Back",
+  ...a
+}) => {
+  const { state: o, dispatch: m } = B(), p = f(() => t || o.step, [t, o.step]), l = (u) => {
+    r?.(u), m({ type: "RESET_STATE" });
+  };
+  return p !== "verification" ? null : /* @__PURE__ */ n(
+    S,
+    {
+      type: "button",
+      "aria-label": s,
+      onClick: l,
+      size: e,
+      variant: c,
+      ...a,
+      children: i || /* @__PURE__ */ n(d, { className: k.icon })
+    }
+  );
+};
+export {
+  T as SignInBackButton
+};

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

@@ -0,0 +1,2 @@
+import { HTMLAttributes } from 'react';
+export declare const SignInCredentials: ({ children, ...props }: HTMLAttributes<HTMLSpanElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SignIn/SignInCredentials.js

@@ -0,0 +1,8 @@
+import { jsx as s } from "react/jsx-runtime";
+import "react";
+import '../../assets/SignInCredentials.css';const t = "SignInCredentials-module__credentials___LE04y", r = {
+  credentials: t
+}, l = ({ children: e, ...n }) => /* @__PURE__ */ s("span", { className: r.credentials, ...n, children: e });
+export {
+  l as SignInCredentials
+};

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

@@ -1,5 +1,6 @@
 import { ElementType, HTMLAttributes } from 'react';
-export type SignInDescriptionProps = {
+import { SignInTitleAndDescriptionProps } from './types';
+export interface SignInDescriptionProps extends SignInTitleAndDescriptionProps, HTMLAttributes<HTMLElement> {
     as?: ElementType;
-} & HTMLAttributes<HTMLElement>;
-export declare const SignInDescription: ({ as: Component, children, className, ...props }: SignInDescriptionProps) => import("react/jsx-runtime").JSX.Element;
+}
+export declare const SignInDescription: ({ as: Component, authMethod: authMethodFromProps, children, className, step: stepFromProps, ...props }: SignInDescriptionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SignIn/SignInDescription.js

@@ -1,29 +1,22 @@
-import { jsxs as t, Fragment as i, jsx as e } from "react/jsx-runtime";
+import { jsx as i } from "react/jsx-runtime";
 import "react";
-import { useSignInContext as l } from "./SignInProvider.js";
-import '../../assets/SignInDescription.css';const u = "SignInDescription-module__description___jZLc6", a = "SignInDescription-module__medium___NGpLf", o = {
-  description: u,
-  medium: a
-}, _ = () => /* @__PURE__ */ e(i, { children: "We’ll send you a verification code via email." }), g = ({ email: n }) => /* @__PURE__ */ t(i, { children: [
-  "We’ve sent a 6 digit code to ",
-  /* @__PURE__ */ e("span", { className: o.medium, children: n }),
-  "."
-] }), D = () => /* @__PURE__ */ e(i, { children: "You’ve successfully signed in." }), v = ({
+import { a as d } from "../../chunks/index.BzllgVaP.js";
+import { useSignInContext as h } from "./SignInProvider.js";
+import "@coinbase/cdp-hooks";
+import "../CDPReactProvider/index.js";
+import '../../assets/SignInDescription.css';const u = "SignInDescription-module__description___jZLc6", _ = {
+  description: u
+}, M = ({
   as: n = "p",
-  children: c,
-  className: r = "",
-  ...m
+  authMethod: e,
+  children: t,
+  className: p = "",
+  step: r,
+  ...c
 }) => {
-  const { state: d } = l(), { step: s, email: p } = d;
-  return /* @__PURE__ */ t(n, { className: `${o.description} ${r}`, ...m, children: [
-    c,
-    !c && /* @__PURE__ */ t(i, { children: [
-      s === "otp" && /* @__PURE__ */ e(g, { email: p }),
-      s === "success" && /* @__PURE__ */ e(D, {}),
-      s === "email" && /* @__PURE__ */ e(_, {})
-    ] })
-  ] });
+  const { state: o } = h(), m = r || o.step, s = e || o.authMethod, a = d[s].description;
+  return /* @__PURE__ */ i(n, { className: `${_.description} ${p}`, ...c, children: t || /* @__PURE__ */ i(a, { step: m, authMethod: s }) });
 };
 export {
-  v as SignInDescription
+  M as SignInDescription
 };

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

@@ -0,0 +1,2 @@
+import { HTMLAttributes } from 'react';
+export declare const SignInFooter: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SignIn/SignInFooter.js

@@ -0,0 +1,18 @@
+import { jsxs as e, jsx as o } from "react/jsx-runtime";
+import "react";
+import { IconCoinbaseWordmark as c } from "../../icons/IconCoinbaseWordmark.js";
+import { IconLock as s } from "../../icons/IconLock.js";
+import '../../assets/SignInFooter.css';const t = "SignInFooter-module__footer___DLNrl", a = "SignInFooter-module__icon___hFhfx", n = {
+  footer: t,
+  icon: a,
+  "coinbase-icon": "SignInFooter-module__coinbase-icon___NeFOp"
+}, f = ({ className: r = "", ...i }) => /* @__PURE__ */ e("div", { className: `${n.footer} ${r}`, ...i, children: [
+  /* @__PURE__ */ o(s, { className: n.icon }),
+  /* @__PURE__ */ e("p", { children: [
+    /* @__PURE__ */ o("span", { children: "Secured by " }),
+    /* @__PURE__ */ o(c, { className: n["coinbase-icon"], "aria-label": "Coinbase" })
+  ] })
+] });
+export {
+  f as SignInFooter
+};

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

@@ -1,6 +1,14 @@
-import { ElementType, HTMLAttributes } from 'react';
-export type SignInFormProps = {
+import { ElementType, HTMLAttributes, ReactNode } from 'react';
+import { AuthMethod } from '../CDPReactProvider/CDPReactProvider';
+import { SignInState } from './types';
+export interface SignInFormProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
     as?: ElementType;
     onSuccess?: () => void;
-} & HTMLAttributes<HTMLElement>;
-export declare const SignInForm: ({ as: Component, className, onSuccess, ...props }: SignInFormProps) => import("react/jsx-runtime").JSX.Element;
+    step?: SignInState["step"];
+    children?: (props: {
+        step: SignInState["step"];
+        authMethod: AuthMethod;
+        Form: ReactNode;
+    }) => ReactNode;
+}
+export declare const SignInForm: ({ onSuccess, step: stepFromProps, children }: SignInFormProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SignIn/SignInForm.js

@@ -1,202 +1,31 @@
-import { jsxs as i, jsx as o, Fragment as A } from "react/jsx-runtime";
-import { useSignInWithEmail as U, useVerifyEmailOTP as V } from "@coinbase/cdp-hooks";
-import { Form as P, FormSubmit as R } from "@radix-ui/react-form";
-import { useState as v, useEffect as y, useRef as B } from "react";
-import { Button as C } from "../Button/index.js";
-import { useAppConfig as k } from "../CDPReactProvider/index.js";
-import { Field as x } from "../Field/index.js";
-import { OTP as q } from "../OTP/index.js";
-import { ServerError as O } from "../ServerError/index.js";
-import { IconCoinbaseWordmark as D } from "../../icons/IconCoinbaseWordmark.js";
-import { IconLock as W } from "../../icons/IconLock.js";
-import { isApiError as T } from "../../utils/isApiError.js";
-import { isEmailInvalid as Q } from "../../utils/isEmailInvalid.js";
-import { useSignInContext as E } from "./SignInProvider.js";
-import { withValidityState as Z } from "../Input/index.js";
-import { LoadingSpinner as $ } from "../LoadingSpinner/index.js";
-import { VisuallyHidden as j } from "../VisuallyHidden/index.js";
-import '../../assets/SignInForm.css';const J = "SignInForm-module__form___8Mc3V", G = "SignInForm-module__footer___6Lo9w", H = "SignInForm-module__hr___fOcy4", X = "SignInForm-module__icon___qkJnq", n = {
-  "form-wrapper": "SignInForm-module__form-wrapper___SlQkZ",
-  form: J,
-  "form-footer": "SignInForm-module__form-footer___PqM2J",
-  "server-state-wrapper": "SignInForm-module__server-state-wrapper___QVsXy",
-  "loading-spinner": "SignInForm-module__loading-spinner___W6gZo",
-  "server-error": "SignInForm-module__server-error___dD9VE",
-  "resend-wrapper": "SignInForm-module__resend-wrapper___ODSQA",
-  "reset-timer": "SignInForm-module__reset-timer___Ms2YZ",
-  footer: G,
-  "coinbase-icon": "SignInForm-module__coinbase-icon___vGv7u",
-  hr: H,
-  icon: X
-}, Y = ({ submit: _ }) => {
-  const { state: s, dispatch: d } = E(), e = () => d({ type: "CLEAR_ERROR" }), u = (p) => (p.preventDefault(), _(s.email));
-  return /* @__PURE__ */ i(
-    P,
+import { jsx as e } from "react/jsx-runtime";
+import { useRef as s, useLayoutEffect as l } from "react";
+import { useAppConfig as g } from "../CDPReactProvider/index.js";
+import { SwitchFadeTransition as M } from "../SwitchFadeTransition/index.js";
+import { a as w } from "../../chunks/index.BzllgVaP.js";
+import { useSignInContext as _ } from "./SignInProvider.js";
+import "@coinbase/cdp-hooks";
+import '../../assets/SignInForm.css';const F = {
+  "auth-method-wrapper": "SignInForm-module__auth-method-wrapper___uIOAB"
+}, E = ({ onSuccess: a, step: u, children: h }) => {
+  const { state: t } = _(), { authMethods: m } = g(), p = u || t.step, o = s(t.authMethod), r = s(null);
+  return l(() => {
+    o.current !== t.authMethod && (r.current?.transition.toggle(t.authMethod), o.current = t.authMethod);
+  }, [t.authMethod]), /* @__PURE__ */ e(
+    M,
     {
-      className: n.form,
-      onClearServerErrors: e,
-      onSubmit: u,
-      children: [
-        /* @__PURE__ */ o(
-          x,
-          {
-            label: "Email address",
-            name: "email",
-            validators: [
-              ["valueMissing", "Email is required"],
-              ["typeMismatch", "Use a valid email address"],
-              [Q, "Use a valid email address"]
-            ],
-            children: Z({
-              autoComplete: "email",
-              type: "email",
-              placeholder: "name@example.com",
-              required: !0,
-              value: s.email,
-              onChange: (p) => {
-                d({ type: "SET_EMAIL", payload: { email: p.target.value } });
-              }
-            })
-          }
-        ),
-        s.error && /* @__PURE__ */ o(O, { error: s.error, className: n["server-error"] }),
-        /* @__PURE__ */ o(R, { asChild: !0, children: /* @__PURE__ */ o(C, { type: "submit", isPending: s.isPending, children: "Continue with email" }) })
-      ]
-    }
-  );
-}, z = ({
-  reset: _,
-  resetCountdown: s,
-  submit: d
-}) => {
-  const { state: e, dispatch: u } = E(), p = () => u({ type: "CLEAR_ERROR" }), l = B([]), f = (c) => (c.preventDefault(), d(e.otp)), h = () => {
-    _(), l.current[0]?.focus();
-  };
-  return y(() => {
-    e.step === "otp" && l.current[0]?.focus();
-  }, [e.step]), /* @__PURE__ */ i(
-    P,
-    {
-      className: `${n.form}`,
-      onClearServerErrors: p,
-      onSubmit: f,
-      children: [
-        /* @__PURE__ */ o(
-          q,
-          {
-            ref: l,
-            name: "otp",
-            "aria-label": "Six-digit Verification Code",
-            passwordLength: 6,
-            value: e.otp,
-            onChange: (c) => c.preventDefault(),
-            onValueChange: (c) => {
-              u({ type: "SET_OTP", payload: { otp: c } });
-            },
-            autoSubmit: !0
-          }
-        ),
-        /* @__PURE__ */ i("div", { className: n["form-footer"], children: [
-          (e.isPending && !e.canResetOTP || e.error) && /* @__PURE__ */ i("div", { className: n["server-state-wrapper"], children: [
-            e.isPending && !e.canResetOTP && /* @__PURE__ */ o($, { className: n["loading-spinner"] }),
-            e.error && /* @__PURE__ */ o(O, { error: e.error, className: n["server-error"] })
-          ] }),
-          /* @__PURE__ */ i("div", { className: n["resend-wrapper"], children: [
-            e.canResetOTP && /* @__PURE__ */ o(R, { asChild: !0, children: /* @__PURE__ */ o(
-              C,
-              {
-                type: "button",
-                onClick: h,
-                isPending: e.isPending,
-                variant: "linkPrimary",
-                children: "Resend code"
-              }
-            ) }),
-            !e.canResetOTP && /* @__PURE__ */ o("div", { className: n["reset-timer"], children: /* @__PURE__ */ i("p", { children: [
-              "Resend code in ",
-              /* @__PURE__ */ i("span", { "aria-hidden": "true", children: [
-                s,
-                "s"
-              ] }),
-              /* @__PURE__ */ i(j, { children: [
-                s,
-                " ",
-                s === 1 ? "second" : "seconds"
-              ] })
-            ] }) })
-          ] })
-        ] })
-      ]
-    }
-  );
-}, he = ({
-  as: _ = "div",
-  className: s = "",
-  onSuccess: d,
-  ...e
-}) => {
-  const l = "An error occurred while signing in. Please try again.", [f, h] = v(0), [c, S] = v(!1), { signInWithEmail: w } = U(), { verifyEmailOTP: b } = V(), { state: a, dispatch: m } = E(), { showCoinbaseFooter: F } = k(), L = (t) => {
-    h(t), S(!0);
-  };
-  y(() => {
-    if (!c)
-      return;
-    const t = setInterval(() => {
-      h((r) => r > 1 ? r - 1 : (S(!1), 0));
-    }, 1e3);
-    return () => clearInterval(t);
-  }, [c]), y(() => {
-    f === 0 && a.step === "otp" && !a.canResetOTP && m({ type: "ALLOW_RESET_OTP" });
-  }, [f, a.step, a.canResetOTP, m]);
-  const I = async (t) => {
-    if (!a.isPending) {
-      m({ type: "SUBMIT_EMAIL", payload: { email: t } });
-      try {
-        const { flowId: r } = await w({
-          email: t
-        });
-        m({ type: "SUBMIT_EMAIL_SUCCESS", payload: { flowId: r } }), L(60);
-      } catch (r) {
-        const g = T(r) ? r : r instanceof Error && r.message || l;
-        m({ type: "SUBMIT_EMAIL_FAILURE", payload: { error: g } }), console.error(r);
+      animateHeight: !0,
+      timeout: 250,
+      items: m || ["email"],
+      initialEntered: !0,
+      transitionRef: r,
+      children: ({ itemKey: n, ...c }) => {
+        const d = w[n].forms;
+        return /* @__PURE__ */ e("div", { ...c, className: F["auth-method-wrapper"], children: /* @__PURE__ */ e(d, { step: p, onSuccess: a, children: ({ step: f, Form: i }) => h?.({ step: f, authMethod: n, Form: i }) || i }) });
       }
     }
-  }, M = async (t) => {
-    if (!a.isPending) {
-      if (t.length !== 6) {
-        m({ type: "SET_OTP", payload: { otp: t } });
-        return;
-      }
-      m({ type: "SUBMIT_OTP", payload: { otp: t } });
-      try {
-        await b({
-          flowId: a.flowId,
-          otp: t
-        }), m({ type: "SUBMIT_OTP_SUCCESS", payload: { otp: t } }), d?.();
-      } catch (r) {
-        const g = T(r) ? r : r instanceof Error && r.message || l;
-        m({ type: "SUBMIT_OTP_FAILURE", payload: { error: g } }), console.error(r);
-      }
-    }
-  }, N = () => {
-    m({ type: "RESET_OTP" }), S(!1), I(a.email);
-  };
-  return /* @__PURE__ */ i(_, { className: `${n["form-wrapper"]} ${s}`, ...e, children: [
-    a.step === "email" && /* @__PURE__ */ o(Y, { submit: I }),
-    a.step === "otp" && /* @__PURE__ */ o(z, { submit: M, reset: N, resetCountdown: f }),
-    F && /* @__PURE__ */ i(A, { children: [
-      /* @__PURE__ */ o("hr", { className: n.hr }),
-      /* @__PURE__ */ i("div", { className: n.footer, children: [
-        /* @__PURE__ */ o(W, { className: n.icon }),
-        /* @__PURE__ */ i("p", { children: [
-          "Secured by",
-          " ",
-          /* @__PURE__ */ o(D, { className: n["coinbase-icon"], "aria-label": "Coinbase" })
-        ] })
-      ] })
-    ] })
-  ] });
+  );
 };
 export {
-  he as SignInForm
+  E as SignInForm
 };

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

@@ -1,6 +1,6 @@
-export type SignInImageProps = {
+export interface SignInImageProps {
     className?: string;
     alt?: string;
     src?: string;
-};
+}
 export declare const SignInImage: ({ className, alt, src }: SignInImageProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/SignIn/SignInImage.js

@@ -1,23 +1,20 @@
 import { jsx as e } from "react/jsx-runtime";
-import { useAppConfig as p } from "../CDPReactProvider/index.js";
-import { IconCheckCircle as a } from "../../icons/IconCheckCircle.js";
-import { useSignInContext as _ } from "./SignInProvider.js";
-import '../../assets/SignInImage.css';const f = "SignInImage-module__logo___rlzt-", i = {
-  logo: f,
-  "success-icon": "SignInImage-module__success-icon___avUF9"
-}, l = (o) => /^https?:\/\//.test(o), S = ({ className: o = "", alt: r, src: t }) => {
-  const { state: g } = _(), { step: n } = g, s = p(), m = s.logoUrl && l(s.logoUrl) ? s.logoUrl : void 0, c = t && l(t) ? t : m, u = r || s.name;
-  return n !== "success" && c ? /* @__PURE__ */ e(
+import { useAppConfig as m } from "../CDPReactProvider/index.js";
+import '../../assets/SignInImage.css';const p = "SignInImage-module__logo___rlzt-", c = {
+  logo: p
+}, n = (t) => /^https?:\/\//.test(t), f = ({ className: t = "", alt: s, src: l }) => {
+  const o = m(), r = o.logoUrl && n(o.logoUrl) ? o.logoUrl : void 0, g = l && n(l) ? l : r, i = s || o.name;
+  return g ? /* @__PURE__ */ e(
     "img",
     {
-      src: c,
-      alt: u || "",
-      className: `${i.logo} ${o}`,
+      src: g,
+      alt: i || "",
+      className: `${c.logo} ${t}`,
       width: 64,
       height: 64
     }
-  ) : n === "success" ? /* @__PURE__ */ e(a, { className: `${i["success-icon"]} ${o}` }) : null;
+  ) : null;
 };
 export {
-  S as SignInImage
+  f as SignInImage
 };

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

@@ -1,5 +1,5 @@
 import { Dispatch, ReactNode } from 'react';
-import { SignInAction, SignInState } from './useSignInReducer';
+import { SignInAction, SignInState } from './types';
 export declare const SignInContext: import('react').Context<{
     state: SignInState;
     dispatch: Dispatch<SignInAction>;

package/dist/components/SignIn/SignInProvider.js

@@ -1,29 +1,37 @@
-import { jsx as i } from "react/jsx-runtime";
-import { createContext as a, useContext as c, useMemo as u } from "react";
-import { useSignInReducer as d } from "./useSignInReducer.js";
-const o = {
+import { jsx as a } from "react/jsx-runtime";
+import { createContext as u, useContext as c, useMemo as m } from "react";
+import { useAppConfig as d } from "../CDPReactProvider/index.js";
+import "@coinbase/cdp-hooks";
+import { useSignInReducer as p } from "./useSignInReducer.js";
+const n = {
+  authMethod: "email",
+  canResetOTP: !1,
   email: "",
   error: null,
   flowId: "",
-  canResetOTP: !1,
   isPending: !1,
+  isSuccess: !1,
   otp: "",
-  step: "email"
-}, r = a({
-  state: o,
+  phoneNumber: "",
+  step: "credentials"
+}, s = u({
+  state: n,
   dispatch: () => {
   }
-}), p = () => {
-  const t = c(r);
+}), S = () => {
+  const t = c(s);
   if (!t)
     throw new Error("useSignInContext must be used within a SignInProvider");
   return t;
-}, x = ({ children: t }) => {
-  const [e, n] = d(o), s = u(() => ({ state: e, dispatch: n }), [e, n]);
-  return /* @__PURE__ */ i(r.Provider, { value: s, children: t });
+}, I = ({ children: t }) => {
+  const { authMethods: r } = d(), [e, o] = p({
+    ...n,
+    authMethod: r?.[0] || "email"
+  }), i = m(() => ({ state: e, dispatch: o }), [e, o]);
+  return /* @__PURE__ */ a(s.Provider, { value: i, children: t });
 };
 export {
-  r as SignInContext,
-  x as SignInProvider,
-  p as useSignInContext
+  s as SignInContext,
+  I as SignInProvider,
+  S as useSignInContext
 };

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

@@ -1,5 +1,6 @@
 import { ElementType, HTMLAttributes } from 'react';
-export type SignInTitleProps = {
+import { SignInTitleAndDescriptionProps } from './types';
+export interface SignInTitleProps extends SignInTitleAndDescriptionProps, HTMLAttributes<HTMLElement> {
     as?: ElementType;
-} & HTMLAttributes<HTMLElement>;
-export declare const SignInTitle: ({ as: Component, children, className, ...props }: SignInTitleProps) => import("react/jsx-runtime").JSX.Element;
+}
+export declare const SignInTitle: ({ as: Component, children, className, authMethod: authMethodFromProps, step: stepFromProps, ...props }: SignInTitleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SignIn/SignInTitle.js

@@ -1,17 +1,22 @@
-import { jsx as r } from "react/jsx-runtime";
-import { useMemo as c } from "react";
-import { useSignInContext as a } from "./SignInProvider.js";
-import '../../assets/SignInTitle.css';const u = "SignInTitle-module__heading___QJ071", m = {
-  heading: u
-}, p = ({
-  as: t = "h2",
-  children: n,
-  className: s = "",
-  ...i
+import { jsx as n } from "react/jsx-runtime";
+import "react";
+import { a as c } from "../../chunks/index.BzllgVaP.js";
+import { useSignInContext as d } from "./SignInProvider.js";
+import "@coinbase/cdp-hooks";
+import "../CDPReactProvider/index.js";
+import '../../assets/SignInTitle.css';const l = "SignInTitle-module__heading___QJ071", g = {
+  heading: l
+}, S = ({
+  as: s = "h2",
+  children: t,
+  className: i = "",
+  authMethod: a,
+  step: h,
+  ...m
 }) => {
-  const { state: e } = a(), o = c(() => e.step === "success" ? "Success" : e.step === "otp" ? "Enter verification code" : "Sign in", [e.step]);
-  return /* @__PURE__ */ r(t, { className: `${m.heading} ${s}`, ...i, children: n || o });
+  const { state: o } = d(), r = h || o.step, e = a || o.authMethod, p = c[e].title;
+  return /* @__PURE__ */ n(s, { className: `${g.heading} ${i}`, ...m, children: t || /* @__PURE__ */ n(p, { step: r, authMethod: e }) });
 };
 export {
-  p as SignInTitle
+  S as SignInTitle
 };

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

@@ -0,0 +1,5 @@
+import { SignInFlowProps, SignInTitleAndDescriptionProps, SignInFlowConfig } from '../types';
+export declare const SignInWithEmail: ({ step: stepFromProps, onSuccess, children }: SignInFlowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SignInWithEmailTitle: ({ step }: SignInTitleAndDescriptionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SignInWithEmailDescription: ({ step }: SignInTitleAndDescriptionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const config: SignInFlowConfig;