@coinbase/cdp-react 0.0.86 → 0.0.87

package/dist/components/SignIn/SignInDescription.js

@@ -1,9 +1,9 @@
 import { jsx as i } from "react/jsx-runtime";
 import "react";
-import { a as d } from "../../chunks/index.C_DV0Ud7.js";
+import { a as d } from "../../chunks/index.BN39qScu.js";
 import { useSignInContext as h } from "./SignInProvider.js";
 import "@coinbase/cdp-hooks";
-import "../../chunks/CDPReactProvider.CIQm4C4z.js";
+import "../../chunks/CDPReactProvider.C38bKQ2x.js";
 import '../../assets/SignInDescription.css';const u = "SignInDescription-module__description___jZLc6", _ = {
   description: u
 }, M = ({

package/dist/components/SignIn/SignInForm.js

@@ -1,8 +1,8 @@
 import { jsx as a } from "react/jsx-runtime";
 import { useRef as d, useState as I, useLayoutEffect as p } from "react";
-import "../../chunks/CDPReactProvider.CIQm4C4z.js";
+import "../../chunks/CDPReactProvider.C38bKQ2x.js";
 import { SwitchFadeTransition as T } from "../ui/SwitchFadeTransition/index.js";
-import { a as y } from "../../chunks/index.C_DV0Ud7.js";
+import { a as y } from "../../chunks/index.BN39qScu.js";
 import { useSignInContext as v } from "./SignInProvider.js";
 import "@coinbase/cdp-hooks";
 import '../../assets/SignInForm.css';const E = {

package/dist/components/SignIn/SignInImage.js

@@ -1,5 +1,5 @@
 import { jsx as i } from "react/jsx-runtime";
-import { u as a } from "../../chunks/CDPReactProvider.CIQm4C4z.js";
+import { u as a } from "../../chunks/CDPReactProvider.C38bKQ2x.js";
 import '../../assets/SignInImage.css';const e = "SignInImage-module__logo___rlzt-", m = {
   logo: e
 }, p = (t) => /^https?:\/\//.test(t), f = ({ className: t = "", alt: s, src: g }) => {

package/dist/components/SignIn/SignInProvider.js

@@ -1,6 +1,6 @@
 import { jsx as h } from "react/jsx-runtime";
 import { createContext as m, useContext as l, useMemo as i } from "react";
-import { u as f } from "../../chunks/CDPReactProvider.CIQm4C4z.js";
+import { u as f } from "../../chunks/CDPReactProvider.C38bKQ2x.js";
 import "@coinbase/cdp-hooks";
 import { useSignInReducer as p } from "./useSignInReducer.js";
 const a = {

package/dist/components/SignIn/SignInTitle.js

@@ -1,9 +1,9 @@
 import { jsx as n } from "react/jsx-runtime";
 import "react";
-import { a as c } from "../../chunks/index.C_DV0Ud7.js";
+import { a as c } from "../../chunks/index.BN39qScu.js";
 import { useSignInContext as d } from "./SignInProvider.js";
 import "@coinbase/cdp-hooks";
-import "../../chunks/CDPReactProvider.CIQm4C4z.js";
+import "../../chunks/CDPReactProvider.C38bKQ2x.js";
 import '../../assets/SignInTitle.css';const l = "SignInTitle-module__heading___QJ071", g = {
   heading: l
 }, S = ({

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

@@ -8,7 +8,7 @@ import { useEmailForm as A } from "../hooks/useEmailForm.js";
 import { useOTPForm as B } from "../hooks/useOTPForm.js";
 import { SignInCredentials as G } from "../SignInCredentials.js";
 import { useSignInContext as E } from "../SignInProvider.js";
-import "../../../chunks/CDPReactProvider.CIQm4C4z.js";
+import "../../../chunks/CDPReactProvider.C38bKQ2x.js";
 const J = ["email", "otp"], N = ({
   step: n,
   autoFocus: s,

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

@@ -1,7 +1,7 @@
 import { jsxs as h, Fragment as a, jsx as e } from "react/jsx-runtime";
 import "@coinbase/cdp-hooks";
 import { useRef as A, useCallback as S, useEffect as v } from "react";
-import { u as m } from "../../../chunks/CDPReactProvider.CIQm4C4z.js";
+import { u as m } from "../../../chunks/CDPReactProvider.C38bKQ2x.js";
 import { useSignInWithOAuth as O } from "../hooks/useSignInWithOAuth.js";
 import { Button as W } from "../../ui/Button/index.js";
 import { ServerError as I } from "../../ui/ServerError/index.js";

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

@@ -1,116 +1,106 @@
-import { jsxs as a, Fragment as p, jsx as s } from "react/jsx-runtime";
-import { useIsSignedIn as H, useSignInWithSms as U, useLinkSms as q, useVerifySmsOTP as z } from "@coinbase/cdp-hooks";
-import "libphonenumber-js";
-import { useRef as N, useState as T, useEffect as A, useLayoutEffect as B, useMemo as G } from "react";
-import { OTPForm as J } from "../../forms/OTPForm/index.js";
-import { PhoneNumberForm as Q } from "../../forms/PhoneNumberForm/index.js";
-import { SwitchSlideTransition as X } from "../../ui/SwitchSlideTransition/index.js";
-import { formatPhoneNumber as Y } from "../../../utils/formatPhoneNumber.js";
-import { parseValuesFromPhoneNumber as Z } from "../../../utils/parseValuesFromPhoneNumber.js";
-import { useOTPForm as _ } from "../hooks/useOTPForm.js";
-import { usePhoneNumberForm as $ } from "../hooks/usePhoneNumberForm.js";
-import { SignInCredentials as K } from "../SignInCredentials.js";
-import { useSignInContext as O } from "../SignInProvider.js";
-import "../../../chunks/CDPReactProvider.CIQm4C4z.js";
-const ee = ["phoneNumber", "otp"], te = ({
+import { jsxs as u, Fragment as c, jsx as s } from "react/jsx-runtime";
+import { useIsSignedIn as M, useSignInWithSms as H, useLinkSms as V, useVerifySmsOTP as q } from "@coinbase/cdp-hooks";
+import { useRef as S, useLayoutEffect as z, useMemo as A } from "react";
+import { OTPForm as B } from "../../forms/OTPForm/index.js";
+import { PhoneNumberForm as G } from "../../forms/PhoneNumberForm/index.js";
+import { SwitchSlideTransition as J } from "../../ui/SwitchSlideTransition/index.js";
+import { usePhoneNumberState as Q } from "../../../hooks/usePhoneNumberState.js";
+import { formatPhoneNumber as U } from "../../../utils/formatPhoneNumber.js";
+import { useOTPForm as X } from "../hooks/useOTPForm.js";
+import { usePhoneNumberForm as Y } from "../hooks/usePhoneNumberForm.js";
+import { SignInCredentials as Z } from "../SignInCredentials.js";
+import { useSignInContext as g } from "../SignInProvider.js";
+import "../../../chunks/CDPReactProvider.C38bKQ2x.js";
+const _ = ["phoneNumber", "otp"], $ = ({
   step: o,
   autoFocus: i,
   onSuccess: m,
-  children: h
+  children: a
 }) => {
-  const d = N(null), v = 6, { isSignedIn: C } = H(), { state: t } = O(), { signInWithSms: I } = U(), { linkSms: F } = q(), { verifySmsOTP: y } = z(), [c, w] = T("US"), [u, f] = T({
-    value: "",
-    e164: ""
-  }), l = o || t.step, n = l === "credentials" ? "phoneNumber" : "otp", b = N(n), { setPhoneNumber: R, submitPhoneNumber: S } = $({
-    submit: (e) => C ? F(e) : I({ phoneNumber: e })
-  }), { resendCountdown: D, resetOTP: E, setOTP: W, startResendTimer: x, submitOtp: j } = _({
-    passwordLength: v,
-    submit: (e) => y({ flowId: t.flowId, otp: e })
-  }), L = (e) => {
-    e.value !== u.value && (f(e), R(e.e164));
-  };
-  A(() => {
-    if (t.phoneNumber === u.e164)
-      return;
-    const e = Z(t.phoneNumber, c);
-    f(e);
-  }, [t.phoneNumber, c, u.e164]);
-  const g = () => {
+  const h = S(null), P = 6, { isSignedIn: N } = M(), { state: e } = g(), { signInWithSms: T } = H(), { linkSms: C } = V(), { verifySmsOTP: O } = q(), p = o || e.step, t = p === "credentials" ? "phoneNumber" : "otp", d = S(t), { setPhoneNumber: I, submitPhoneNumber: f } = Y({
+    submit: (n) => N ? C(n) : T({ phoneNumber: n })
+  }), { phoneNumberObject: v, countryCode: y, handlePhoneNumberChange: F, handleCountryCodeChange: w } = Q({
+    phoneNumber: e.phoneNumber,
+    onPhoneNumberChange: I
+  }), { resendCountdown: R, resetOTP: D, setOTP: W, startResendTimer: x, submitOtp: E } = X({
+    passwordLength: P,
+    submit: (n) => O({ flowId: e.flowId, otp: n })
+  }), l = () => {
     x(60);
-  }, k = () => {
-    E(), S({ phoneNumber: t.phoneNumber, onSuccess: g });
-  }, M = (e) => {
-    e.preventDefault(), S({ phoneNumber: t.phoneNumber, onSuccess: g });
-  }, V = (e) => {
-    e.preventDefault();
-    const r = new FormData(e.currentTarget).get("otp") || t.otp;
-    j({ otp: r, onSuccess: m });
+  }, j = () => {
+    D(), f({ phoneNumber: e.phoneNumber, onSuccess: l });
+  }, L = (n) => {
+    n.preventDefault(), f({ phoneNumber: e.phoneNumber, onSuccess: l });
+  }, k = (n) => {
+    n.preventDefault();
+    const r = new FormData(n.currentTarget).get("otp") || e.otp;
+    E({ otp: r, onSuccess: m });
   };
-  return B(() => {
-    b.current !== n && (d.current?.transition.toggle(n), b.current = n);
-  }, [n]), /* @__PURE__ */ s(
-    X,
+  return z(() => {
+    d.current !== t && (h.current?.transition.toggle(t), d.current = t);
+  }, [t]), /* @__PURE__ */ s(
+    J,
     {
       autoFocus: i ? "input[type='tel']" : !1,
       animateHeight: !1,
-      items: ee,
+      items: _,
       initialEntered: !0,
-      direction: n === "otp" ? "left" : "right",
-      transitionRef: d,
-      children: ({ itemKey: e, ...P }) => {
+      direction: t === "otp" ? "left" : "right",
+      transitionRef: h,
+      children: ({ itemKey: n, ...b }) => {
         let r = null;
-        return e === "phoneNumber" && (r = /* @__PURE__ */ s(
-          Q,
+        return n === "phoneNumber" && (r = /* @__PURE__ */ s(
+          G,
           {
-            countryCode: c,
-            error: n === "phoneNumber" && t.error || "",
-            isPending: t.isPending,
+            countryCode: y,
+            error: t === "phoneNumber" && e.error || "",
+            isPending: e.isPending,
             onCountryCodeChange: w,
-            onPhoneNumberChange: L,
-            onSubmit: M,
-            phoneNumber: u
+            onPhoneNumberChange: F,
+            onSubmit: L,
+            phoneNumber: v
           }
-        )), e === "otp" && (r = /* @__PURE__ */ s(
-          J,
+        )), n === "otp" && (r = /* @__PURE__ */ s(
+          B,
           {
-            canResetOTP: t.canResetOTP,
-            error: n === "otp" && t.error || "",
-            isPending: t.isPending,
+            canResetOTP: e.canResetOTP,
+            error: t === "otp" && e.error || "",
+            isPending: e.isPending,
             onOTPChange: W,
-            onResendOTP: k,
-            onSubmit: V,
-            otp: t.otp,
-            resendCountdown: D,
-            successMessage: t.isSuccess ? "Success!" : void 0
+            onResendOTP: j,
+            onSubmit: k,
+            otp: e.otp,
+            resendCountdown: R,
+            successMessage: e.isSuccess ? "Success!" : void 0
           }
-        )), /* @__PURE__ */ s("div", { ...P, children: h ? h({ step: l, Form: r }) : r });
+        )), /* @__PURE__ */ s("div", { ...b, children: a ? a({ step: p, Form: r }) : r });
       }
     }
   );
-}, ne = ({ step: o }) => /* @__PURE__ */ a(p, { children: [
+}, K = ({ step: o }) => /* @__PURE__ */ u(c, { children: [
   o === "credentials" && "Sign in",
   o === "verification" && "Enter verification code"
-] }), oe = ({ step: o }) => {
-  const { state: i } = O(), m = G(
-    () => Y(i.phoneNumber),
+] }), ee = ({ step: o }) => {
+  const { state: i } = g(), m = A(
+    () => U(i.phoneNumber),
     [i.phoneNumber]
   );
-  return /* @__PURE__ */ a(p, { children: [
+  return /* @__PURE__ */ u(c, { children: [
     o === "credentials" && "We’ll send you a verification code via text.",
-    o === "verification" && /* @__PURE__ */ a(p, { children: [
+    o === "verification" && /* @__PURE__ */ u(c, { children: [
       "Enter the 6 digit code sent to",
       " ",
-      m ? /* @__PURE__ */ s(K, { children: m }) : "your phone number"
+      m ? /* @__PURE__ */ s(Z, { children: m }) : "your phone number"
     ] })
   ] });
-}, ge = {
-  description: oe,
-  forms: te,
-  title: ne
+}, fe = {
+  description: ee,
+  forms: $,
+  title: K
 };
 export {
-  te as SignInWithSms,
-  oe as SignInWithSmsDescription,
-  ne as SignInWithSmsTitle,
-  ge as config
+  $ as SignInWithSms,
+  ee as SignInWithSmsDescription,
+  K as SignInWithSmsTitle,
+  fe as config
 };

package/dist/components/SignIn/index.js

@@ -1,7 +1,7 @@
 import { jsx as n, jsxs as r, Fragment as c } from "react/jsx-runtime";
 import { u } from "../../chunks/useSendComponentCallOnce.BHZMuo6E.js";
 import "react";
-import { u as d } from "../../chunks/CDPReactProvider.CIQm4C4z.js";
+import { u as d } from "../../chunks/CDPReactProvider.C38bKQ2x.js";
 import { SignInAuthMethodButtons as f } from "./SignInAuthMethodButtons.js";
 import { SignInBackButton as I } from "./SignInBackButton.js";
 import { SignInDescription as S } from "./SignInDescription.js";

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

@@ -94,6 +94,8 @@ export type SignInAction = {
     type: "RESET_OTP";
 } | {
     type: "CLEAR_ERROR";
+} | {
+    type: "GO_TO_PREVIOUS_STEP";
 } | {
     type: "RESET_STATE";
 };

package/dist/components/SignIn/types.js

@@ -1,3 +1,3 @@
 import "@coinbase/cdp-hooks";
 import "react";
-import "../../chunks/CDPReactProvider.CIQm4C4z.js";
+import "../../chunks/CDPReactProvider.C38bKQ2x.js";

package/dist/components/SignIn/useSignInReducer.js

@@ -1,7 +1,7 @@
-import { useReducer as u } from "react";
+import { useReducer as l } from "react";
 import "@coinbase/cdp-hooks";
-import "../../chunks/CDPReactProvider.CIQm4C4z.js";
-function l(e, r) {
+import "../../chunks/CDPReactProvider.C38bKQ2x.js";
+function u(e, r) {
   switch (r.type) {
     case "SET_AUTH_METHODS":
       return {
@@ -13,8 +13,8 @@ function l(e, r) {
         ...e,
         authMethod: r.payload.authMethod,
         step: "credentials",
-        email: "",
-        phoneNumber: "",
+        phoneNumber: r.payload.authMethod === "sms" ? "" : e.phoneNumber,
+        email: r.payload.authMethod === "email" ? "" : e.email,
         error: null
       };
     case "SET_EMAIL":
@@ -74,6 +74,20 @@ function l(e, r) {
       return { ...e, error: null, canResetOTP: !1 };
     case "CLEAR_ERROR":
       return { ...e, error: null };
+    case "GO_TO_PREVIOUS_STEP":
+      return {
+        authMethod: e.authMethod,
+        authMethods: e.authMethods,
+        canResetOTP: !1,
+        error: null,
+        isPending: !1,
+        isSuccess: !1,
+        email: e.email,
+        flowId: "",
+        otp: "",
+        phoneNumber: e.phoneNumber,
+        step: "credentials"
+      };
     case "RESET_STATE":
       return {
         authMethod: e.authMethod,
@@ -92,7 +106,7 @@ function l(e, r) {
       throw new Error("Unknown action type");
   }
 }
-const s = (e) => u(l, e);
+const s = (e) => l(u, e);
 export {
   s as useSignInReducer
 };

package/dist/components/SignInModal/index.js

@@ -2,7 +2,7 @@ import { jsx as n, jsxs as t, Fragment as c } from "react/jsx-runtime";
 import { u as C } from "../../chunks/useSendComponentCallOnce.BHZMuo6E.js";
 import { createContext as b, useMemo as x, useContext as v } from "react";
 import { c as N } from "../../chunks/lite.1fxw3LjI.js";
-import { u as w } from "../../chunks/CDPReactProvider.CIQm4C4z.js";
+import { u as w } from "../../chunks/CDPReactProvider.C38bKQ2x.js";
 import { SignIn as T } from "../SignIn/index.js";
 import "@coinbase/cdp-hooks";
 import { Button as h } from "../ui/Button/index.js";

package/dist/components/VerifyMfa/VerifyMfaDescription.d.ts

@@ -3,4 +3,4 @@ import { VerifyMfaMethodComponentProps } from './types';
 export interface VerifyMfaDescriptionProps extends VerifyMfaMethodComponentProps, HTMLAttributes<HTMLElement> {
     as?: ElementType;
 }
-export declare const VerifyMfaDescription: ({ as: Component, children, className, method: methodFromProps, step: stepFromProps, ...props }: VerifyMfaDescriptionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const VerifyMfaDescription: ({ as: Component, children, className, method: methodFromProps, step: stepFromProps, ...props }: VerifyMfaDescriptionProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/VerifyMfa/VerifyMfaDescription.js

@@ -1,21 +1,31 @@
-import { jsx as s } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import "react";
-import { m as f } from "../../chunks/index.Dp-lIxM1.js";
+import { m as d } from "../../chunks/index.BX4k-ruQ.js";
 import "@coinbase/cdp-hooks";
+import "@coinbase/cdp-core";
 import { useVerifyMfaContext as a } from "./VerifyMfaProvider.js";
-import '../../assets/VerifyMfaDescription.css';const y = "VerifyMfaDescription-module__description___mDWgu", _ = {
-  description: y
-}, x = ({
-  as: i = "p",
-  children: t,
-  className: r = "",
-  method: n,
-  step: p,
-  ...m
+import '../../assets/VerifyMfaDescription.css';const u = "VerifyMfaDescription-module__description___mDWgu", y = {
+  description: u
+}, g = ({
+  as: n = "p",
+  children: e,
+  className: p = "",
+  method: m,
+  step: c,
+  ...f
 }) => {
-  const { state: o } = a(), c = p || o.step, e = n || o.method, d = f[e].description;
-  return /* @__PURE__ */ s(i, { className: `${_.description} ${r}`, ...m, children: t || /* @__PURE__ */ s(d, { step: c, method: e }) });
+  const { state: o } = a(), s = c || o.step, i = m || o.method;
+  let t;
+  if (e)
+    t = e;
+  else if (s === "list")
+    t = null;
+  else {
+    const l = d[i].description;
+    t = /* @__PURE__ */ r(l, { step: s, method: i });
+  }
+  return t ? /* @__PURE__ */ r(n, { className: `${y.description} ${p}`, ...f, children: t }) : null;
 };
 export {
-  x as VerifyMfaDescription
+  g as VerifyMfaDescription
 };

package/dist/components/VerifyMfa/VerifyMfaFlow.d.ts

@@ -1,11 +1,12 @@
 import { HTMLAttributes, ReactNode } from 'react';
-import { MfaMethod, VerifyMfaState } from './types';
+import { MfaMethod, VerifyMfaStep } from './types';
 export interface VerifyMfaFlowProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
     autoFocus?: boolean;
+    animateHeight?: boolean;
     children?: (props: {
-        step: VerifyMfaState["step"];
+        step: VerifyMfaStep;
         method: MfaMethod;
-        Form: ReactNode;
+        Content: ReactNode;
     }) => ReactNode;
 }
-export declare const VerifyMfaFlow: ({ autoFocus, children, className, ...props }: VerifyMfaFlowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const VerifyMfaFlow: ({ autoFocus, animateHeight, children, className, ...props }: VerifyMfaFlowProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/VerifyMfa/VerifyMfaFlow.js

@@ -1,19 +1,58 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as t, jsxs as y } from "react/jsx-runtime";
 import "react";
-import { m as h } from "../../chunks/index.Dp-lIxM1.js";
+import { Button as S } from "../ui/Button/index.js";
+import { SwitchSlideTransition as v } from "../ui/SwitchSlideTransition/index.js";
+import { m as F } from "../../chunks/index.BX4k-ruQ.js";
 import "@coinbase/cdp-hooks";
-import { useVerifyMfaContext as l } from "./VerifyMfaProvider.js";
-import '../../assets/VerifyMfaFlow.css';const u = {
-  "method-wrapper": "VerifyMfaFlow-module__method-wrapper___LEPzD"
-}, F = ({
-  autoFocus: s = !0,
-  children: t,
-  className: m = "",
-  ...p
+import "@coinbase/cdp-core";
+import { STEPS as $ } from "./useVerifyMfaReducer.js";
+import { useVerifyMfaFlowInternal as g } from "./VerifyMfaFlowProvider.js";
+import { VerifyMfaItems as x } from "./VerifyMfaItems.js";
+import { useVerifyMfaContext as C } from "./VerifyMfaProvider.js";
+import '../../assets/VerifyMfaFlow.css';const z = "VerifyMfaFlow-module__wrapper___lzVPg", E = "VerifyMfaFlow-module__list___-N0zn", o = {
+  wrapper: z,
+  "pad-top": "VerifyMfaFlow-module__pad-top___gF1z2",
+  list: E
+}, b = ({
+  autoFocus: n = !0,
+  animateHeight: m = !0,
+  children: s,
+  className: l = "",
+  ...a
 }) => {
-  const { state: n, onSuccess: a, onError: i } = l(), { method: o, step: c } = n, f = h[o].content;
-  return /* @__PURE__ */ r("div", { className: `${u["method-wrapper"]} ${m}`, ...p, children: /* @__PURE__ */ r(f, { autoFocus: s, step: c, onSuccess: a, onError: i, children: ({ step: d, Content: e }) => t ? t({ step: d, method: o, Form: e }) : e }) });
+  const { state: p, onSuccess: d, onError: c } = C(), { direction: h, selectMethod: _, showMethodList: u, transitionRef: w } = g(), { method: i, methods: f } = p;
+  return /* @__PURE__ */ t(
+    v,
+    {
+      autoFocus: n,
+      animateHeight: m,
+      items: $,
+      initialEntered: !0,
+      timeout: 250,
+      direction: h,
+      transitionRef: w,
+      children: ({ itemKey: r, ...M }) => {
+        let e = null;
+        if (r === "verification") {
+          const V = F[i].content;
+          e = /* @__PURE__ */ y("div", { className: `${o.wrapper} ${o["pad-top"]} ${l}`, ...a, children: [
+            /* @__PURE__ */ t(
+              V,
+              {
+                autoFocus: n,
+                step: r,
+                onSuccess: d,
+                onError: c
+              }
+            ),
+            f.length > 1 && i === f[0] && /* @__PURE__ */ t(S, { variant: "transparentPrimary", fullWidth: !0, onClick: u, children: "Use a different method" })
+          ] });
+        } else r === "list" && (e = /* @__PURE__ */ t("div", { className: `${o.wrapper} ${l}`, ...a, children: /* @__PURE__ */ t(x, { className: o.list, onSelect: _ }) }));
+        return /* @__PURE__ */ t("div", { ...M, children: s ? s({ step: r, method: i, Content: e }) : e });
+      }
+    }
+  );
 };
 export {
-  F as VerifyMfaFlow
+  b as VerifyMfaFlow
 };

package/dist/components/VerifyMfa/VerifyMfaFlowBackButton.d.ts

@@ -0,0 +1,9 @@
+import { ButtonHTMLAttributes } from 'react';
+import { ButtonProps } from '../ui/Button/Button';
+import { VerifyMfaStep } from './types';
+export interface VerifyMfaFlowBackButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    step?: VerifyMfaStep;
+    size?: ButtonProps["size"];
+    variant?: ButtonProps["variant"];
+}
+export declare const VerifyMfaFlowBackButton: ({ ["aria-label"]: ariaLabel, children, className, size, onClick, variant, step: stepFromProps, ...props }: VerifyMfaFlowBackButtonProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/VerifyMfa/VerifyMfaFlowBackButton.js

@@ -0,0 +1,40 @@
+import { jsx as o } from "react/jsx-runtime";
+import { c as p } from "../../chunks/lite.1fxw3LjI.js";
+import "react";
+import { Button as u } from "../ui/Button/index.js";
+import { IconArrowLeft as _ } from "../../icons/IconArrowLeft.js";
+import "@coinbase/cdp-hooks";
+import "@coinbase/cdp-core";
+import { useVerifyMfaFlowInternal as b } from "./VerifyMfaFlowProvider.js";
+import { useVerifyMfaContext as y } from "./VerifyMfaProvider.js";
+import '../../assets/VerifyMfaFlowBackButton.css';const B = "VerifyMfaFlowBackButton-module__button___cAv9W", d = "VerifyMfaFlowBackButton-module__icon___ezNaM", r = {
+  button: B,
+  icon: d
+}, C = ({
+  ["aria-label"]: e = "Back",
+  children: n,
+  className: a = "",
+  size: c = "md",
+  onClick: i,
+  variant: s = "transparentSecondary",
+  step: m,
+  ...f
+}) => {
+  const { back: l } = b(), { state: t } = y();
+  return (m || t.step) === "verification" && t.method === t.methods[0] ? null : /* @__PURE__ */ o(
+    u,
+    {
+      type: "button",
+      "aria-label": e,
+      className: p(r.button, a),
+      onClick: i ?? l,
+      size: c,
+      variant: s,
+      ...f,
+      children: n || /* @__PURE__ */ o(_, { className: r.icon })
+    }
+  );
+};
+export {
+  C as VerifyMfaFlowBackButton
+};

package/dist/components/VerifyMfa/VerifyMfaFlowProvider.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode, RefObject } from 'react';
+import { SwitchSlideTransitionRef } from '../ui/SwitchSlideTransition';
+import { MfaMethod, VerifyMfaStep } from './types';
+export interface VerifyMfaFlowContextValue {
+    back: () => void;
+    direction: "left" | "right";
+    selectMethod: (method: MfaMethod) => void;
+    showMethodList: () => void;
+}
+export interface VerifyMfaFlowContextValueInternal extends VerifyMfaFlowContextValue {
+    transitionRef: RefObject<SwitchSlideTransitionRef<VerifyMfaStep> | null> | null;
+}
+export interface VerifyMfaFlowProviderProps {
+    children?: ReactNode;
+    direction: VerifyMfaFlowContextValue["direction"];
+    onBack: VerifyMfaFlowContextValue["back"];
+    onSelectMethod: VerifyMfaFlowContextValue["selectMethod"];
+    onShowMethodList: VerifyMfaFlowContextValue["showMethodList"];
+    transitionRef: VerifyMfaFlowContextValueInternal["transitionRef"];
+}
+export declare const useVerifyMfaFlowInternal: () => VerifyMfaFlowContextValueInternal;
+export declare const useVerifyMfaFlow: () => VerifyMfaFlowContextValue;
+export declare const VerifyMfaFlowProvider: ({ children, direction, onBack, onSelectMethod, onShowMethodList, transitionRef, }: VerifyMfaFlowProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/VerifyMfa/VerifyMfaFlowProvider.js

@@ -0,0 +1,37 @@
+import { jsx as a } from "react/jsx-runtime";
+import { createContext as u, useContext as l, useMemo as c } from "react";
+import "@coinbase/cdp-hooks";
+import "@coinbase/cdp-core";
+const f = u(null), w = () => {
+  const e = l(f);
+  if (!e)
+    throw new Error("useVerifyMfaFlowInternal must be used within a VerifyMfaFlowProvider");
+  return e;
+}, y = () => {
+  const { transitionRef: e, ...r } = w();
+  return r;
+}, F = ({
+  children: e,
+  direction: r,
+  onBack: t,
+  onSelectMethod: o,
+  onShowMethodList: n,
+  transitionRef: s
+}) => {
+  const i = c(
+    () => ({
+      back: t,
+      direction: r,
+      selectMethod: o,
+      showMethodList: n,
+      transitionRef: s
+    }),
+    [t, r, o, n, s]
+  );
+  return /* @__PURE__ */ a(f.Provider, { value: i, children: e });
+};
+export {
+  F as VerifyMfaFlowProvider,
+  y as useVerifyMfaFlow,
+  w as useVerifyMfaFlowInternal
+};

package/dist/components/VerifyMfa/VerifyMfaImage.d.ts

@@ -3,4 +3,4 @@ import { VerifyMfaMethodComponentProps } from './types';
 export interface VerifyMfaImageProps extends VerifyMfaMethodComponentProps, HTMLAttributes<HTMLElement> {
     as?: ElementType;
 }
-export declare const VerifyMfaImage: ({ as: Component, children, className, method: methodFromProps, step: stepFromProps, ...props }: VerifyMfaImageProps) => import("react/jsx-runtime").JSX.Element;
+export declare const VerifyMfaImage: ({ as: Component, children, className, method: methodFromProps, step: stepFromProps, ...props }: VerifyMfaImageProps) => import("react/jsx-runtime").JSX.Element | null;