@coinbase/cdp-react 0.0.86 → 0.0.88

package/dist/components/SignOutButton/index.js

@@ -1,6 +1,6 @@
 import { jsx as m } from "react/jsx-runtime";
 import { useSignOut as r } from "@coinbase/cdp-hooks";
-import { u as e } from "../../chunks/useSendComponentCallOnce.BHZMuo6E.js";
+import { u as e } from "../../chunks/useSendComponentCallOnce.DGjALrnZ.js";
 import "react";
 import { c } from "../../chunks/lite.1fxw3LjI.js";
 import { Button as a } 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;

package/dist/components/VerifyMfa/VerifyMfaImage.js

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

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

@@ -0,0 +1,10 @@
+import { MouseEventHandler, ReactNode } from 'react';
+import { MfaMethod } from './types';
+export interface VerifyMfaItemProps {
+    method: MfaMethod;
+    icon?: ReactNode;
+    label: string;
+    onSelect: MouseEventHandler<HTMLButtonElement>;
+}
+declare const VerifyMfaItem: ({ icon, label, onSelect }: VerifyMfaItemProps) => import("react/jsx-runtime").JSX.Element;
+export { VerifyMfaItem };

package/dist/components/VerifyMfa/VerifyMfaItem.js

@@ -0,0 +1,27 @@
+import { jsxs as s, jsx as o } from "react/jsx-runtime";
+import "react";
+import { Button as i } from "../ui/Button/index.js";
+import "@coinbase/cdp-hooks";
+import "@coinbase/cdp-core";
+import '../../assets/VerifyMfaItem.css';const m = "VerifyMfaItem-module__btn___7ZZjy", c = "VerifyMfaItem-module__icon___gse6F", a = "VerifyMfaItem-module__text___aV6B6", t = {
+  btn: m,
+  icon: c,
+  text: a
+}, u = ({ icon: e, label: n, onSelect: r }) => /* @__PURE__ */ s(
+  i,
+  {
+    size: "md",
+    fullWidth: !0,
+    variant: "control",
+    className: t.btn,
+    onClick: r,
+    type: "button",
+    children: [
+      e && /* @__PURE__ */ o("span", { className: t.icon, children: e }),
+      /* @__PURE__ */ o("span", { className: t.text, children: n })
+    ]
+  }
+);
+export {
+  u as VerifyMfaItem
+};

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

@@ -0,0 +1,9 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { MfaMethod } from './types';
+import { VerifyMfaItemProps } from './VerifyMfaItem';
+interface VerifyMfaItemsProps extends Omit<HTMLAttributes<HTMLUListElement>, "children" | "onSelect"> {
+    children?: (props: VerifyMfaItemProps) => ReactNode;
+    onSelect?: (method: MfaMethod) => void;
+}
+declare const VerifyMfaItems: ({ children, className, onSelect, ...props }: VerifyMfaItemsProps) => import("react/jsx-runtime").JSX.Element;
+export { VerifyMfaItems, type VerifyMfaItemsProps };

package/dist/components/VerifyMfa/VerifyMfaItems.js

@@ -0,0 +1,31 @@
+import { jsx as t } from "react/jsx-runtime";
+import { c as a } from "../../chunks/lite.1fxw3LjI.js";
+import { useMemo as f } from "react";
+import { IconPhone as u } from "../../icons/IconPhone.js";
+import { IconPinCode as I } from "../../icons/IconPinCode.js";
+import "@coinbase/cdp-hooks";
+import "@coinbase/cdp-core";
+import { VerifyMfaItem as M } from "./VerifyMfaItem.js";
+import { useVerifyMfaContext as y } from "./VerifyMfaProvider.js";
+import '../../assets/VerifyMfaItems.css';const _ = "VerifyMfaItems-module__list___ITk0B", x = {
+  list: _
+}, V = {
+  totp: { Icon: /* @__PURE__ */ t(I, {}), label: "Authenticator app" },
+  sms: { Icon: /* @__PURE__ */ t(u, {}), label: "SMS" }
+}, B = ({ children: i, className: n = "", onSelect: e, ...c }) => {
+  const { state: l } = y(), { methods: m } = l, p = f(() => m.map((o) => {
+    const { Icon: r, label: s } = V[o];
+    return {
+      method: o,
+      icon: r,
+      label: s,
+      onSelect: () => e?.(o)
+    };
+  }), [m, e]);
+  return /* @__PURE__ */ t("ul", { className: a(x.list, n), ...c, children: p.map(
+    ({ method: o, ...r }, s) => s === 0 ? null : /* @__PURE__ */ t("li", { children: i?.({ ...r, method: o }) || /* @__PURE__ */ t(M, { ...r, method: o }) }, o)
+  ) });
+};
+export {
+  B as VerifyMfaItems
+};

package/dist/components/VerifyMfa/VerifyMfaProvider.js

@@ -1,28 +1,41 @@
-import { jsx as n } from "react/jsx-runtime";
-import { createContext as a, useContext as u, useMemo as c } from "react";
-import "@coinbase/cdp-hooks";
-import { useVerifyMfaReducer as m } from "./useVerifyMfaReducer.js";
-const d = {
+import { jsx as d } from "react/jsx-runtime";
+import { getEnrolledMfaMethods as u } from "@coinbase/cdp-core";
+import { useCurrentUser as c } from "@coinbase/cdp-hooks";
+import { createContext as p, useContext as l, useMemo as n, useEffect as h } from "react";
+import { useVerifyMfaReducer as M } from "./useVerifyMfaReducer.js";
+const x = {
   method: "totp",
   methods: ["totp"],
   step: "verification",
+  flowDirection: "left",
   mfaCode: "",
   error: null,
   isPending: !1,
   isSuccess: !1
-}, s = a(null), y = () => {
-  const e = u(s);
+}, a = p(null), E = () => {
+  const e = l(a);
   if (!e)
     throw new Error("useVerifyMfaContext must be used within a VerifyMfaProvider");
   return e;
-}, C = ({ children: e, onError: t, onSuccess: o }) => {
-  const [r, i] = m({ ...d }), f = c(
-    () => ({ state: r, dispatch: i, onSuccess: o, onError: t }),
-    [r, i, o, t]
+}, P = ({ children: e, onError: f, onSuccess: i }) => {
+  const { currentUser: s } = c(), t = n(
+    () => s ? u(s) : ["totp"],
+    [s]
+  ), [o, r] = M({
+    ...x,
+    methods: t,
+    method: t[0] || "totp"
+  });
+  h(() => {
+    t.join(",") !== o.methods.join(",") && r({ type: "SET_METHODS", payload: { methods: t } });
+  }, [t, r, o.methods]);
+  const m = n(
+    () => ({ state: o, dispatch: r, onSuccess: i, onError: f }),
+    [o, r, i, f]
   );
-  return /* @__PURE__ */ n(s.Provider, { value: f, children: e });
+  return /* @__PURE__ */ d(a.Provider, { value: m, children: e });
 };
 export {
-  C as VerifyMfaProvider,
-  y as useVerifyMfaContext
+  P as VerifyMfaProvider,
+  E as useVerifyMfaContext
 };

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

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

package/dist/components/VerifyMfa/VerifyMfaTitle.js

@@ -1,21 +1,31 @@
-import { jsx as s } from "react/jsx-runtime";
+import { jsx as e, Fragment as c } from "react/jsx-runtime";
 import "react";
-import { m as d } 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 h } from "./VerifyMfaProvider.js";
-import '../../assets/VerifyMfaTitle.css';const c = "VerifyMfaTitle-module__heading___18nul", l = {
-  heading: c
-}, x = ({
-  as: i = "h2",
-  children: t,
+import '../../assets/VerifyMfaTitle.css';const u = "VerifyMfaTitle-module__heading___18nul", y = {
+  heading: u
+}, C = ({
+  as: r = "h2",
+  children: o,
   className: m = "",
-  method: n,
-  step: r,
-  ...a
+  method: l,
+  step: a,
+  ...f
 }) => {
-  const { state: e } = h(), f = r || e.step, o = n || e.method, p = d[o].title;
-  return /* @__PURE__ */ s(i, { className: `${l.heading} ${m}`, ...a, children: t || /* @__PURE__ */ s(p, { step: f, method: o }) });
+  const { state: i } = h(), s = a || i.step, n = l || i.method;
+  let t;
+  if (o)
+    t = o;
+  else if (s === "list")
+    t = /* @__PURE__ */ e(c, { children: "Verify it's you" });
+  else {
+    const p = d[n].title;
+    t = /* @__PURE__ */ e(p, { step: s, method: n });
+  }
+  return t ? /* @__PURE__ */ e(r, { className: `${y.heading} ${m}`, ...f, children: t }) : null;
 };
 export {
-  x as VerifyMfaTitle
+  C as VerifyMfaTitle
 };

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

@@ -1,10 +1,14 @@
 import { APIError } from '@coinbase/cdp-hooks';
 import { HTMLAttributes, ReactNode } from 'react';
-import { VerifyMfaAction, VerifyMfaState } from './types';
+import { VerifyMfaAction, VerifyMfaState, VerifyMfaStep } from './types';
 import { VerifyMfaDescription, VerifyMfaDescriptionProps } from './VerifyMfaDescription';
 import { VerifyMfaFlow, VerifyMfaFlowProps } from './VerifyMfaFlow';
+import { VerifyMfaFlowBackButton, VerifyMfaFlowBackButtonProps } from './VerifyMfaFlowBackButton';
+import { useVerifyMfaFlow, VerifyMfaFlowContextValue } from './VerifyMfaFlowProvider';
 import { VerifyMfaFooter } from './VerifyMfaFooter';
 import { VerifyMfaImage, VerifyMfaImageProps } from './VerifyMfaImage';
+import { VerifyMfaItem, VerifyMfaItemProps } from './VerifyMfaItem';
+import { VerifyMfaItems, VerifyMfaItemsProps } from './VerifyMfaItems';
 import { useVerifyMfaContext, VerifyMfaContextValue } from './VerifyMfaProvider';
 import { VerifyMfaTitle, VerifyMfaTitleProps } from './VerifyMfaTitle';
 interface VerifyMfaProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "onSubmit" | "onError"> {
@@ -13,4 +17,4 @@ interface VerifyMfaProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"
     onError?: (error: APIError | Error) => void;
 }
 declare const VerifyMfa: ({ onSuccess, onError, ...props }: VerifyMfaProps) => import("react/jsx-runtime").JSX.Element;
-export { VerifyMfa, VerifyMfaDescription, VerifyMfaFooter, VerifyMfaFlow, VerifyMfaImage, VerifyMfaTitle, useVerifyMfaContext, type VerifyMfaProps, type VerifyMfaDescriptionProps, type VerifyMfaFlowProps, type VerifyMfaImageProps, type VerifyMfaTitleProps, type VerifyMfaAction, type VerifyMfaState, type VerifyMfaContextValue, };
+export { VerifyMfa, VerifyMfaDescription, VerifyMfaFlow, VerifyMfaFlowBackButton, VerifyMfaFooter, VerifyMfaImage, VerifyMfaItem, VerifyMfaItems, VerifyMfaTitle, useVerifyMfaContext, useVerifyMfaFlow, type VerifyMfaProps, type VerifyMfaContextValue, type VerifyMfaDescriptionProps, type VerifyMfaFlowBackButtonProps, type VerifyMfaFlowContextValue, type VerifyMfaFlowProps, type VerifyMfaImageProps, type VerifyMfaItemProps, type VerifyMfaItemsProps, type VerifyMfaTitleProps, type VerifyMfaAction, type VerifyMfaState, type VerifyMfaStep, };

package/dist/components/VerifyMfa/index.js

@@ -1,20 +1,29 @@
 import "react/jsx-runtime";
 import "@coinbase/cdp-hooks";
-import "../../chunks/useSendComponentCallOnce.BHZMuo6E.js";
+import "../../chunks/useSendComponentCallOnce.DGjALrnZ.js";
 import "react";
-import { V as m } from "../../chunks/CDPReactProvider.CIQm4C4z.js";
-import { VerifyMfaDescription as a } from "./VerifyMfaDescription.js";
-import { VerifyMfaFlow as V } from "./VerifyMfaFlow.js";
-import { VerifyMfaFooter as M } from "./VerifyMfaFooter.js";
-import { VerifyMfaImage as l } from "./VerifyMfaImage.js";
-import { useVerifyMfaContext as F } from "./VerifyMfaProvider.js";
-import { VerifyMfaTitle as g } from "./VerifyMfaTitle.js";
+import { V as p } from "../../chunks/CDPReactProvider.BkmtXUv1.js";
+import "@coinbase/cdp-core";
+import { VerifyMfaDescription as x } from "./VerifyMfaDescription.js";
+import { VerifyMfaFlow as y } from "./VerifyMfaFlow.js";
+import { VerifyMfaFlowBackButton as s } from "./VerifyMfaFlowBackButton.js";
+import { useVerifyMfaFlow as F } from "./VerifyMfaFlowProvider.js";
+import { VerifyMfaFooter as u } from "./VerifyMfaFooter.js";
+import { VerifyMfaImage as I } from "./VerifyMfaImage.js";
+import { VerifyMfaItem as B } from "./VerifyMfaItem.js";
+import { VerifyMfaItems as k } from "./VerifyMfaItems.js";
+import { useVerifyMfaContext as D } from "./VerifyMfaProvider.js";
+import { VerifyMfaTitle as b } from "./VerifyMfaTitle.js";
 export {
-  m as VerifyMfa,
-  a as VerifyMfaDescription,
-  V as VerifyMfaFlow,
-  M as VerifyMfaFooter,
-  l as VerifyMfaImage,
-  g as VerifyMfaTitle,
-  F as useVerifyMfaContext
+  p as VerifyMfa,
+  x as VerifyMfaDescription,
+  y as VerifyMfaFlow,
+  s as VerifyMfaFlowBackButton,
+  u as VerifyMfaFooter,
+  I as VerifyMfaImage,
+  B as VerifyMfaItem,
+  k as VerifyMfaItems,
+  b as VerifyMfaTitle,
+  D as useVerifyMfaContext,
+  F as useVerifyMfaFlow
 };

package/dist/components/VerifyMfa/methods/sms.d.ts

@@ -0,0 +1,6 @@
+import { MfaMethodConfig, MfaMethodContentProps, VerifyMfaMethodComponentProps } from '../types';
+export declare const SmsContent: ({ autoFocus, onError, onSuccess, children, }: MfaMethodContentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SmsTitle: (_props: VerifyMfaMethodComponentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SmsImage: (_props: VerifyMfaMethodComponentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SmsDescription: (_props: VerifyMfaMethodComponentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const smsMethodConfig: MfaMethodConfig;