@coinbase/cdp-react 0.0.86 → 0.0.88

package/dist/components/VerifyMfa/methods/sms.js

@@ -0,0 +1,90 @@
+import { jsx as r, Fragment as p } from "react/jsx-runtime";
+import { useIsInitialized as V, useCurrentUser as N, useInitiateMfaVerification as v, useSubmitMfaVerification as P } from "@coinbase/cdp-hooks";
+import { useRef as w, useState as M, useEffect as S, useCallback as b } from "react";
+import { OTPForm as B } from "../../forms/OTPForm/index.js";
+import { Badge as L } from "../../ui/Badge/index.js";
+import { useTimer as x } from "../../../hooks/useTimer.js";
+import { IconPhone as z } from "../../../icons/IconPhone.js";
+import "@coinbase/cdp-core";
+import { useVerifyMfaContext as j } from "../VerifyMfaProvider.js";
+const T = 60, k = ({
+  autoFocus: o = !0,
+  onError: h,
+  onSuccess: g,
+  children: u
+}) => {
+  const { isInitialized: l } = V(), { currentUser: F } = N(), { state: s, dispatch: t } = j(), { initiateMfaVerification: i } = v(), C = w(!1), { submitMfaVerification: R } = P(), {
+    timeRemaining: d,
+    start: a,
+    reset: f
+  } = x(), [m, I] = M(!1), [A, E] = M(!1), y = !!F;
+  S(() => {
+    if (!l || !y || C.current) return;
+    C.current = !0, requestAnimationFrame(async () => {
+      a(T);
+      try {
+        await i({ mfaMethod: "sms" });
+      } catch (e) {
+        const c = e instanceof Error ? e.message : "Failed to send verification code";
+        t({ type: "INITIATE_MFA_VERIFICATION_FAILURE", payload: { error: c } });
+      }
+    });
+  }, [l, i, y, a, t]), S(() => {
+    d === 0 && !m && (I(!0), f());
+  }, [d, m, f]);
+  const O = b(async () => {
+    t({ type: "SET_MFA_CODE", payload: { mfaCode: "" } }), I(!1), E(!0);
+    try {
+      await i({ mfaMethod: "sms" });
+    } catch (n) {
+      const e = n instanceof Error ? n.message : "Failed to resend verification code";
+      t({ type: "INITIATE_MFA_VERIFICATION_FAILURE", payload: { error: e } });
+    } finally {
+      a(T), E(!1);
+    }
+  }, [t, i, a]), U = (n) => {
+    t({ type: "SET_MFA_CODE", payload: { mfaCode: n } });
+  }, D = async (n) => {
+    n.preventDefault(), t({ type: "SUBMIT_MFA_CODE", payload: { mfaCode: s.mfaCode } });
+    try {
+      const e = s.mfaCode;
+      await R({ mfaMethod: "sms", mfaCode: e }), t({ type: "SUBMIT_MFA_CODE_SUCCESS" }), f(), g?.(e);
+    } catch (e) {
+      const c = e instanceof Error ? e : new Error(typeof e == "string" ? e : "Verification failed");
+      h?.(c), t({
+        type: "SUBMIT_MFA_CODE_FAILURE",
+        payload: {
+          error: c.message
+        }
+      });
+    }
+  }, _ = /* @__PURE__ */ r(
+    B,
+    {
+      autoFocus: o,
+      otp: s.mfaCode,
+      error: s.error || void 0,
+      isPending: s.isPending || A,
+      onOTPChange: U,
+      onResendOTP: O,
+      onSubmit: D,
+      passwordLength: 6,
+      canResetOTP: m,
+      resendCountdown: d,
+      successMessage: s.isSuccess ? "Verified!" : void 0
+    }
+  );
+  return u ? /* @__PURE__ */ r(p, { children: u({ step: s.step, Content: _ }) }) : _;
+}, q = (o) => /* @__PURE__ */ r(p, { children: "Enter verification code" }), W = (o) => /* @__PURE__ */ r(L, { variant: "secondary", children: /* @__PURE__ */ r(z, {}) }), G = (o) => /* @__PURE__ */ r(p, { children: "Enter the 6-digit code sent to your phone." }), te = {
+  content: k,
+  title: q,
+  description: G,
+  image: W
+};
+export {
+  k as SmsContent,
+  G as SmsDescription,
+  W as SmsImage,
+  q as SmsTitle,
+  te as smsMethodConfig
+};

package/dist/components/VerifyMfa/methods/totp.js

@@ -1,69 +1,70 @@
-import { jsx as o, Fragment as a } from "react/jsx-runtime";
-import { useIsInitialized as g, useCurrentUser as _, useInitiateMfaVerification as E, useSubmitMfaVerification as S } from "@coinbase/cdp-hooks";
-import { useRef as I, useEffect as T } from "react";
-import { OTPForm as F } from "../../forms/OTPForm/index.js";
-import { Badge as A } from "../../ui/Badge/index.js";
-import { IconSmartPhone as U } from "../../../icons/IconSmartPhone.js";
-import { useVerifyMfaContext as V } from "../VerifyMfaProvider.js";
+import { jsx as r, Fragment as s } from "react/jsx-runtime";
+import { useIsInitialized as E, useCurrentUser as _, useInitiateMfaVerification as g, useSubmitMfaVerification as T } from "@coinbase/cdp-hooks";
+import { useRef as F, useEffect as S } from "react";
+import { OTPForm as A } from "../../forms/OTPForm/index.js";
+import { Badge as U } from "../../ui/Badge/index.js";
+import { IconSmartPhone as V } from "../../../icons/IconSmartPhone.js";
+import "@coinbase/cdp-core";
+import { useVerifyMfaContext as O } from "../VerifyMfaProvider.js";
 const v = ({
-  autoFocus: r = !0,
-  onError: u,
-  onSuccess: C,
-  children: s
+  autoFocus: i = !0,
+  onError: C,
+  onSuccess: M,
+  children: c
 }) => {
-  const { isInitialized: c } = g(), { currentUser: M } = _(), { state: e, dispatch: i } = V(), { initiateMfaVerification: f } = E(), p = I(!1), { submitMfaVerification: l } = S();
-  T(() => {
-    if (!c || p.current) return;
-    requestAnimationFrame(async () => {
-      p.current = !0;
+  const { isInitialized: f } = E(), { currentUser: l } = _(), { state: e, dispatch: o } = O(), { initiateMfaVerification: p } = g(), d = F(!1), { submitMfaVerification: I } = T(), m = !!l;
+  S(() => {
+    if (!f || !m || d.current) return;
+    d.current = !0, requestAnimationFrame(async () => {
       try {
-        await f({ mfaMethod: "totp" });
+        await p({ mfaMethod: "totp" });
       } catch (t) {
-        console.error("Failed to initiate MFA verification", t);
+        const a = t instanceof Error ? t.message : "Failed to send verification code";
+        o({ type: "INITIATE_MFA_VERIFICATION_FAILURE", payload: { error: a } });
       }
     });
-  }, [c, f, M]);
-  const h = (n) => {
-    i({ type: "SET_MFA_CODE", payload: { mfaCode: n } });
-  }, y = async (n) => {
-    n.preventDefault(), i({ type: "SUBMIT_MFA_CODE", payload: { mfaCode: e.mfaCode } });
+  }, [f, p, m, o]);
+  const y = (n) => {
+    o({ type: "SET_MFA_CODE", payload: { mfaCode: n } });
+  }, h = async (n) => {
+    n.preventDefault(), o({ type: "SUBMIT_MFA_CODE", payload: { mfaCode: e.mfaCode } });
     try {
       const t = e.mfaCode;
-      await l({ mfaMethod: "totp", mfaCode: t }), i({ type: "SUBMIT_MFA_CODE_SUCCESS" }), C?.(t);
+      await I({ mfaMethod: "totp", mfaCode: t }), o({ type: "SUBMIT_MFA_CODE_SUCCESS" }), M?.(t);
     } catch (t) {
-      const m = t instanceof Error ? t : new Error(typeof t == "string" ? t : "Verification failed");
-      u?.(m), i({
+      const a = t instanceof Error ? t : new Error(typeof t == "string" ? t : "Verification failed");
+      C?.(a), o({
         type: "SUBMIT_MFA_CODE_FAILURE",
         payload: {
-          error: m.message
+          error: a.message
         }
       });
     }
-  }, d = /* @__PURE__ */ o(
-    F,
+  }, u = /* @__PURE__ */ r(
+    A,
     {
-      autoFocus: r,
+      autoFocus: i,
       otp: e.mfaCode,
       error: e.error || void 0,
       isPending: e.isPending,
-      onOTPChange: h,
-      onSubmit: y,
+      onOTPChange: y,
+      onSubmit: h,
       passwordLength: 6,
       resendCountdown: null,
       successMessage: e.isSuccess ? "Verified!" : void 0
     }
   );
-  return s ? /* @__PURE__ */ o(a, { children: s({ step: e.step, Content: d }) }) : d;
-}, D = (r) => /* @__PURE__ */ o(a, { children: "Enter verification code" }), O = (r) => /* @__PURE__ */ o(A, { variant: "secondary", children: /* @__PURE__ */ o(U, {}) }), w = (r) => /* @__PURE__ */ o(a, { children: "Enter the 6-digit code from your authenticator app." }), j = {
+  return c ? /* @__PURE__ */ r(s, { children: c({ step: e.step, Content: u }) }) : u;
+}, D = (i) => /* @__PURE__ */ r(s, { children: "Enter verification code" }), w = (i) => /* @__PURE__ */ r(U, { variant: "secondary", children: /* @__PURE__ */ r(V, {}) }), P = (i) => /* @__PURE__ */ r(s, { children: "Enter the 6-digit code from your authenticator app." }), q = {
   content: v,
   title: D,
-  description: w,
-  image: O
+  description: P,
+  image: w
 };
 export {
   v as TotpContent,
-  w as TotpDescription,
-  O as TotpImage,
+  P as TotpDescription,
+  w as TotpImage,
   D as TotpTitle,
-  j as totpMethodConfig
+  q as totpMethodConfig
 };

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

@@ -2,20 +2,29 @@ import { APIError } from '@coinbase/cdp-hooks';
 import { FC, ReactNode } from 'react';
 import { MfaMethod } from '../EnrollMfa/types';
 export { type MfaMethod };
+export type VerifyMfaStep = "verification" | "list";
 export interface VerifyMfaMethodComponentProps {
     method?: MfaMethod;
-    step?: VerifyMfaState["step"];
+    step?: VerifyMfaStep;
 }
 export interface VerifyMfaState {
     method: MfaMethod;
     methods: MfaMethod[];
-    step: "verification";
+    step: VerifyMfaStep;
+    flowDirection: "left" | "right";
     mfaCode: string;
     error: string | APIError | null;
     isPending: boolean;
     isSuccess: boolean;
 }
 export type VerifyMfaAction = {
+    type: "SET_STEP";
+    payload: {
+        step: VerifyMfaStep;
+        flowDirection?: "left" | "right";
+        method?: MfaMethod;
+    };
+} | {
     type: "SET_METHOD";
     payload: {
         method: MfaMethod;
@@ -37,6 +46,16 @@ export type VerifyMfaAction = {
     payload: {
         error: string | APIError;
     };
+} | {
+    type: "INITIATE_MFA_VERIFICATION_FAILURE";
+    payload: {
+        error: string | APIError;
+    };
+} | {
+    type: "SET_METHODS";
+    payload: {
+        methods: MfaMethod[];
+    };
 } | {
     type: "CLEAR_ERROR";
 } | {

package/dist/components/VerifyMfa/types.js

@@ -1,2 +1,3 @@
 import "@coinbase/cdp-hooks";
 import "react";
+import "@coinbase/cdp-core";

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

@@ -1,2 +1,3 @@
-import { VerifyMfaAction, VerifyMfaState } from './types';
+import { VerifyMfaAction, VerifyMfaState, VerifyMfaStep } from './types';
+export declare const STEPS: readonly VerifyMfaStep[];
 export declare const useVerifyMfaReducer: (initialState: VerifyMfaState) => [VerifyMfaState, import('react').ActionDispatch<[action: VerifyMfaAction]>];

package/dist/components/VerifyMfa/useVerifyMfaReducer.js

@@ -1,11 +1,24 @@
 import { useReducer as o } from "react";
 import "@coinbase/cdp-hooks";
-function n(e, r) {
+import "@coinbase/cdp-core";
+const u = ["verification", "list"];
+function l(e, r) {
   switch (r.type) {
+    case "SET_STEP":
+      return {
+        ...e,
+        step: r.payload.step,
+        flowDirection: r.payload.flowDirection || e.flowDirection,
+        method: r.payload.method || e.method,
+        mfaCode: "",
+        error: null
+      };
     case "SET_METHOD":
       return {
         ...e,
         method: r.payload.method,
+        step: "verification",
+        flowDirection: "left",
         mfaCode: "",
         error: null
       };
@@ -36,6 +49,16 @@ function n(e, r) {
         isSuccess: !1,
         error: r.payload.error
       };
+    case "INITIATE_MFA_VERIFICATION_FAILURE":
+      return {
+        ...e,
+        error: r.payload.error
+      };
+    case "SET_METHODS":
+      return {
+        ...e,
+        methods: r.payload.methods
+      };
     case "CLEAR_ERROR":
       return {
         ...e,
@@ -43,9 +66,10 @@ function n(e, r) {
       };
     case "RESET_STATE":
       return {
-        method: e.method,
+        method: e.methods[0] || e.method,
         methods: e.methods,
         step: "verification",
+        flowDirection: "left",
         mfaCode: "",
         error: null,
         isPending: !1,
@@ -55,7 +79,8 @@ function n(e, r) {
       throw new Error("Unknown action type");
   }
 }
-const d = (e) => o(n, e);
+const i = (e) => o(l, e);
 export {
-  d as useVerifyMfaReducer
+  u as STEPS,
+  i as useVerifyMfaReducer
 };

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

@@ -34,7 +34,7 @@ interface VerifyMfaInlineBackButtonProps extends ButtonHTMLAttributes<HTMLButton
     size?: ButtonSize;
     variant?: ButtonVariant;
 }
-declare const VerifyMfaInlineBackButton: ({ children, onClick, size, variant, ["aria-label"]: ariaLabel, ...props }: VerifyMfaInlineBackButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const VerifyMfaInlineBackButton: ({ children, onClick, size, variant, ["aria-label"]: ariaLabel, className, ...props }: VerifyMfaInlineBackButtonProps) => import("react/jsx-runtime").JSX.Element | null;
 declare const VerifyMfaInlineFlow: ({ children, className, animateHeight, autoFocus, transition, }: VerifyMfaInlineFlowProps) => import("react/jsx-runtime").JSX.Element;
 declare const VerifyMfaInline: ({ children, verifyFirst, onVerified, onCancel, successDelay, className, ...props }: VerifyMfaInlineProps) => import("react/jsx-runtime").JSX.Element;
 export { VerifyMfaInline, VerifyMfaInlineBackButton, VerifyMfaInlineFlow, useVerifyMfaInlineContext, type VerifyMfaInlineBackButtonProps, type VerifyMfaInlineContextValue, type VerifyMfaInlineDirection, type VerifyMfaInlineFlowProps, type VerifyMfaInlineProps, type VerifyMfaInlineView, };

package/dist/components/VerifyMfaInline/index.js

@@ -1,175 +1,192 @@
-import { jsx as n, jsxs as R } from "react/jsx-runtime";
-import { isMfaRequired as E } from "@coinbase/cdp-core";
-import { useCancelMfaVerification as j, useIsInitialized as q, useRegisterMfaListener as F } from "@coinbase/cdp-hooks";
-import { u as L } from "../../chunks/useSendComponentCallOnce.BHZMuo6E.js";
-import { createContext as A, useMemo as h, useRef as x, useState as b, useCallback as w, useContext as O } from "react";
-import { c as P } from "../../chunks/lite.1fxw3LjI.js";
-import { Button as W } from "../ui/Button/index.js";
-import { SwitchFadeTransition as X } from "../ui/SwitchFadeTransition/index.js";
-import { SwitchSlideTransition as Y } from "../ui/SwitchSlideTransition/index.js";
-import { V as G } from "../../chunks/CDPReactProvider.CIQm4C4z.js";
-import { IconArrowLeft as J } from "../../icons/IconArrowLeft.js";
+import { jsx as t, jsxs as E } from "react/jsx-runtime";
+import { isMfaRequired as q } from "@coinbase/cdp-core";
+import { useCancelMfaVerification as L, useIsInitialized as A, useRegisterMfaListener as O } from "@coinbase/cdp-hooks";
+import { u as P } from "../../chunks/useSendComponentCallOnce.DGjALrnZ.js";
+import { createContext as W, useMemo as h, useRef as k, useState as R, useCallback as C, useContext as X, useEffect as Y } from "react";
+import { c as j } from "../../chunks/lite.1fxw3LjI.js";
+import { Button as H } from "../ui/Button/index.js";
+import { SwitchFadeTransition as J } from "../ui/SwitchFadeTransition/index.js";
+import { SwitchSlideTransition as Q } from "../ui/SwitchSlideTransition/index.js";
+import { V as U } from "../../chunks/CDPReactProvider.BkmtXUv1.js";
+import { IconArrowLeft as Z } from "../../icons/IconArrowLeft.js";
 import "../../theme/theme.js";
-import { VerifyMfaImage as Q } from "../VerifyMfa/VerifyMfaImage.js";
-import { VerifyMfaTitle as U } from "../VerifyMfa/VerifyMfaTitle.js";
-import { VerifyMfaDescription as Z } from "../VerifyMfa/VerifyMfaDescription.js";
-import { VerifyMfaFlow as $ } from "../VerifyMfa/VerifyMfaFlow.js";
-import '../../assets/VerifyMfaInline.css';const H = "VerifyMfaInline-module__icon___pezMX", C = {
+import { useVerifyMfaContext as $ } from "../VerifyMfa/VerifyMfaProvider.js";
+import { useVerifyMfaFlow as K } from "../VerifyMfa/VerifyMfaFlowProvider.js";
+import { VerifyMfaFlow as ee } from "../VerifyMfa/VerifyMfaFlow.js";
+import { VerifyMfaImage as ne } from "../VerifyMfa/VerifyMfaImage.js";
+import { VerifyMfaTitle as te } from "../VerifyMfa/VerifyMfaTitle.js";
+import { VerifyMfaDescription as ie } from "../VerifyMfa/VerifyMfaDescription.js";
+import '../../assets/VerifyMfaInline.css';const oe = "VerifyMfaInline-module__icon___pezMX", re = "VerifyMfaInline-module__button___-gTjp", I = {
   "verify-mfa-inline": "VerifyMfaInline-module__verify-mfa-inline___mn38o",
-  icon: H,
+  icon: oe,
+  button: re,
   "mfa-verification": "VerifyMfaInline-module__mfa-verification___WyY76",
-  "mfa-verification-content": "VerifyMfaInline-module__mfa-verification-content___M4fq0",
-  "mfa-verification-form": "VerifyMfaInline-module__mfa-verification-form___8h2u-"
-}, z = A(null), S = () => {
-  const e = O(z);
+  "mfa-verification-content": "VerifyMfaInline-module__mfa-verification-content___M4fq0"
+}, z = W(null), B = () => {
+  const e = X(z);
   if (!e)
     throw new Error("VerifyMfaInline compound components must be used within VerifyMfaInline");
   return e;
-}, ve = () => {
-  const { view: e, goToContent: t, goToVerify: i, goBack: o } = S();
+}, he = () => {
+  const { view: e, goToContent: n, goToVerify: i, goBack: o } = B();
   return h(
-    () => ({ view: e, goToVerify: i, goToContent: t, goBack: o }),
-    [e, i, t, o]
+    () => ({ view: e, goToVerify: i, goToContent: n, goBack: o }),
+    [e, i, n, o]
   );
-}, Ve = ({
+}, Be = ({
   children: e,
-  onClick: t,
+  onClick: n,
   size: i = "md",
   variant: o = "transparentSecondary",
-  ["aria-label"]: d = "Back",
+  ["aria-label"]: f = "Back",
+  className: r = "",
   ...s
 }) => {
-  const { goBack: M, verifyFirst: y, needsMfa: l, view: r } = S(), m = (f) => {
-    t?.(f), M();
+  const { goBack: u, verifyFirst: d, needsMfa: c, view: y, canGoBack: l } = B(), V = (M) => {
+    n?.(M), u();
   };
-  return y || !l || r === "content" ? null : /* @__PURE__ */ n(
-    W,
+  return !c || y === "content" || d && !l ? null : /* @__PURE__ */ t(
+    H,
     {
       type: "button",
-      "aria-label": d,
-      onClick: m,
+      "aria-label": f,
+      onClick: V,
       size: i,
       variant: o,
+      className: j(I.button, r),
       ...s,
-      children: e || /* @__PURE__ */ n(J, { className: C.icon })
+      children: e || /* @__PURE__ */ t(Z, { className: I.icon })
     }
   );
-}, N = ({ onSuccess: e }) => /* @__PURE__ */ n(G, { className: C["mfa-verification"], onSuccess: e, children: /* @__PURE__ */ R("div", { className: C["mfa-verification-content"], children: [
-  /* @__PURE__ */ n(Q, {}),
-  /* @__PURE__ */ R("div", { children: [
-    /* @__PURE__ */ n(U, {}),
-    /* @__PURE__ */ n(Z, {})
-  ] }),
-  /* @__PURE__ */ n($, { className: C["mfa-verification-form"] })
-] }) }), Me = ({
+}, fe = () => {
+  const { state: e } = $(), { back: n } = K(), { setCanGoBack: i, mfaFlowBackRef: o } = B(), f = e.step === "list" || e.step === "verification" && e.method !== e.methods[0];
+  return Y(() => (i(f), o.current = f ? n : null, () => {
+    i(!1), o.current = null;
+  }), [f, n, i, o]), /* @__PURE__ */ t(ee, { animateHeight: !1, children: ({ step: r, method: s, Content: u }) => /* @__PURE__ */ E("div", { className: I["mfa-verification-content"], children: [
+    /* @__PURE__ */ t(ne, { step: r, method: s }),
+    /* @__PURE__ */ E("div", { children: [
+      /* @__PURE__ */ t(te, { step: r, method: s }),
+      /* @__PURE__ */ t(ie, { step: r, method: s })
+    ] }),
+    u
+  ] }) });
+}, N = ({ onSuccess: e }) => /* @__PURE__ */ t(U, { className: I["mfa-verification"], onSuccess: e, children: /* @__PURE__ */ t(fe, {}) }), be = ({
   children: e,
-  className: t = "",
+  className: n = "",
   animateHeight: i = !0,
   autoFocus: o = !0,
-  transition: d = "slide"
+  transition: f = "slide"
 }) => {
   const {
-    goToContent: s,
-    initialView: M,
-    direction: y,
-    transitionRef: l,
-    verifyFirst: r,
-    onVerified: m,
-    successDelay: f
-  } = S(), _ = w(() => {
-    m?.(), r && (f > 0 ? setTimeout(() => s(), f) : s());
-  }, [s, r, m, f]), v = M === "verify" ? ["verify", "content"] : ["content", "verify"], I = typeof e == "function", V = ({ itemKey: u, ...p }) => {
-    let c = null;
-    return I ? c = e(
-      u === "content" ? { view: "content", Content: null } : { view: u, Content: u === "verify" ? /* @__PURE__ */ n(N, { onSuccess: _ }) : void 0 }
-    ) : c = u === "verify" ? /* @__PURE__ */ n(N, { onSuccess: _ }) : e, /* @__PURE__ */ n("div", { ...p, children: c });
+    goToContent: r,
+    initialView: s,
+    direction: u,
+    transitionRef: d,
+    verifyFirst: c,
+    onVerified: y,
+    successDelay: l
+  } = B(), V = C(() => {
+    y?.(), c && (l > 0 ? setTimeout(() => r(), l) : r());
+  }, [r, c, y, l]), M = s === "verify" ? ["verify", "content"] : ["content", "verify"], p = typeof e == "function", w = ({ itemKey: m, ...g }) => {
+    let v = null;
+    return p ? v = e(
+      m === "content" ? { view: "content", Content: null } : { view: m, Content: m === "verify" ? /* @__PURE__ */ t(N, { onSuccess: V }) : void 0 }
+    ) : v = m === "verify" ? /* @__PURE__ */ t(N, { onSuccess: V }) : e, /* @__PURE__ */ t("div", { ...g, children: v });
   };
-  return d === "fade" ? /* @__PURE__ */ n(
-    X,
+  return f === "fade" ? /* @__PURE__ */ t(
+    J,
     {
       autoFocus: o,
       animateHeight: i,
-      items: v,
+      items: M,
       initialEntered: !0,
-      transitionRef: l,
-      className: t,
-      children: V
+      transitionRef: d,
+      className: n,
+      children: w
     }
-  ) : /* @__PURE__ */ n(
-    Y,
+  ) : /* @__PURE__ */ t(
+    Q,
     {
       autoFocus: o,
       animateHeight: i,
-      items: v,
+      items: M,
       initialEntered: !0,
-      direction: y,
-      transitionRef: l,
-      className: t,
-      children: V
+      direction: u,
+      transitionRef: d,
+      className: n,
+      children: w
     }
   );
-}, _e = ({
+}, xe = ({
   children: e,
-  verifyFirst: t = !0,
+  verifyFirst: n = !0,
   onVerified: i,
   onCancel: o,
-  successDelay: d = 500,
-  className: s = "",
-  ...M
+  successDelay: f = 500,
+  className: r = "",
+  ...s
 }) => {
-  L("verify_mfa_inline");
-  const { cancelMfaVerification: y } = j(), { isInitialized: l } = q(), r = h(() => l ? E() : !1, [l]), m = x(null), f = h(() => r && t ? "verify" : "content", [r, t]), [_, v] = b(f), [I, V] = b("left"), u = x(null), p = x(f), c = w((a) => {
-    p.current !== a && (p.current = a, u.current?.transition.toggle(a));
-  }, []), g = w(
+  P("verify_mfa_inline");
+  const { cancelMfaVerification: u } = L(), { isInitialized: d } = A(), c = h(() => d ? q() : !1, [d]), y = k(null), l = k(null), [V, M] = R(!1), p = h(() => c && n ? "verify" : "content", [c, n]), [w, m] = R(p), [g, v] = R("left"), b = k(null), x = k(p), _ = C((a) => {
+    x.current !== a && (x.current = a, b.current?.transition.toggle(a));
+  }, []), T = C(
     (a = "left") => {
-      V(a), v("verify"), c("verify");
+      v(a), m("verify"), _("verify");
     },
-    [c]
-  ), T = w(
+    [_]
+  ), S = C(
     (a = "left") => {
-      V(a), v("content"), c("content");
+      v(a), m("content"), _("content");
     },
-    [c]
-  ), k = w(() => {
-    const a = p.current === "verify", B = a ? "content" : "verify";
-    V("right"), v(B), c(B), a && (y(), o?.());
-  }, [c, o, y]);
-  F(() => g(), {
-    scope: m,
-    enabled: r
+    [_]
+  ), F = C(() => {
+    if (v("right"), l.current) {
+      l.current();
+      return;
+    }
+    const a = x.current === "verify", G = a ? "content" : "verify";
+    m(G), _(G), a && (u(), o?.());
+  }, [_, o, u]);
+  O(() => T(), {
+    scope: y,
+    enabled: c
   });
   const D = h(
     () => ({
-      view: _,
-      goToVerify: g,
-      goToContent: T,
-      goBack: k,
-      needsMfa: r,
-      verifyFirst: t,
-      initialView: f,
-      direction: I,
-      transitionRef: u,
+      view: w,
+      goToVerify: T,
+      goToContent: S,
+      goBack: F,
+      needsMfa: c,
+      verifyFirst: n,
+      initialView: p,
+      direction: g,
+      transitionRef: b,
+      mfaFlowBackRef: l,
+      canGoBack: V,
+      setCanGoBack: M,
       onVerified: i,
-      successDelay: d
+      successDelay: f
     }),
     [
-      _,
-      g,
+      w,
       T,
-      k,
-      r,
-      t,
-      f,
-      I,
+      S,
+      F,
+      c,
+      n,
+      p,
+      g,
+      V,
       i,
-      d
+      f
     ]
   );
-  return /* @__PURE__ */ n(z.Provider, { value: D, children: /* @__PURE__ */ n("div", { ref: m, className: P(C["verify-mfa-inline"], s), ...M, children: e }) });
+  return /* @__PURE__ */ t(z.Provider, { value: D, children: /* @__PURE__ */ t("div", { ref: y, className: j(I["verify-mfa-inline"], r), ...s, children: e }) });
 };
 export {
-  _e as VerifyMfaInline,
-  Ve as VerifyMfaInlineBackButton,
-  Me as VerifyMfaInlineFlow,
-  ve as useVerifyMfaInlineContext
+  xe as VerifyMfaInline,
+  Be as VerifyMfaInlineBackButton,
+  be as VerifyMfaInlineFlow,
+  he as useVerifyMfaInlineContext
 };