@coinbase/cdp-react 0.0.78 → 0.0.80

package/dist/components/EnrollMfa/index.js

@@ -0,0 +1,171 @@
+import { jsx as o, jsxs as a, Fragment as d } from "react/jsx-runtime";
+import { useIsInitialized as O, useCurrentUser as B, useInitiateMfaEnrollment as P, useSubmitMfaEnrollment as b, useRecordMfaEnrollmentPrompted as D } from "@coinbase/cdp-hooks";
+import { u as $ } from "../../chunks/useSendComponentCallOnce.BHZMuo6E.js";
+import { useMemo as k, useRef as p, useEffect as L, useCallback as E, useLayoutEffect as V } from "react";
+import { c as j } from "../../chunks/lite.1fxw3LjI.js";
+import { u as z } from "../../chunks/CDPReactProvider.CIQm4C4z.js";
+import { isApiError as J } from "../../utils/isApiError.js";
+import "libphonenumber-js";
+import { EnrollMfaDescription as R } from "./EnrollMfaDescription.js";
+import { EnrollMfaFlow as K } from "./EnrollMfaFlow.js";
+import { EnrollMfaFlowBackButton as q } from "./EnrollMfaFlowBackButton.js";
+import { EnrollMfaFlowProvider as G } from "./EnrollMfaFlowProvider.js";
+import { useEnrollMfaFlow as ge } from "./EnrollMfaFlowProvider.js";
+import { EnrollMfaFooter as X } from "./EnrollMfaFooter.js";
+import { EnrollMfaImage as Y } from "./EnrollMfaImage.js";
+import { EnrollMfaItem as Re } from "./EnrollMfaItem.js";
+import { EnrollMfaItems as Ce } from "./EnrollMfaItems.js";
+import { EnrollMfaProvider as Z, useEnrollMfaContext as C } from "./EnrollMfaProvider.js";
+import { EnrollMfaTitle as x } from "./EnrollMfaTitle.js";
+import { Banner as H } from "../ui/Banner/index.js";
+import '../../assets/EnrollMfa.css';const Q = "EnrollMfa-module__img___JmjV1", W = "EnrollMfa-module__centered___YxB8I", ee = "EnrollMfa-module__footer___Zro3u", l = {
+  "mfa-enrollment": "EnrollMfa-module__mfa-enrollment___80xnL",
+  img: Q,
+  "flex-container": "EnrollMfa-module__flex-container___9Dazs",
+  "gap-2": "EnrollMfa-module__gap-2___BKEqR",
+  "gap-3": "EnrollMfa-module__gap-3___JKVyF",
+  centered: W,
+  footer: ee
+}, te = 5 * 60 * 1e3, re = ({ role: c = "alert", ...i }) => {
+  const { state: s } = C(), { error: m } = s;
+  return m ? /* @__PURE__ */ o(H, { variant: "error", role: c, ...i, children: J(m) ? m.message : m }) : null;
+}, oe = ({
+  className: c = "",
+  children: i,
+  resetOnSuccess: s = !0,
+  ...m
+}) => {
+  const { isInitialized: f } = O(), { currentUser: u } = B(), { state: e, dispatch: n, onEnrollSuccess: _ } = C(), { initiateMfaEnrollment: M } = P(), { submitMfaEnrollment: h } = b(), { recordMfaEnrollmentPrompted: I } = D(), { showCoinbaseFooter: U } = z(), N = p(!1);
+  L(() => {
+    !f || !u || N.current || (I(), N.current = !0);
+  }, [I, f, u]), L(() => {
+    if (!e.initiatedAt) return;
+    const t = () => {
+      e.initiatedAt && Date.now() - e.initiatedAt >= te && n({ type: "ENROLLMENT_SESSION_EXPIRED" });
+    };
+    t();
+    const r = setInterval(t, 1e3);
+    return () => clearInterval(r);
+  }, [e.initiatedAt, n]);
+  const S = p(e.step), T = p(null), y = E((t) => {
+    S.current !== t && (S.current = t, T.current?.transition.toggle(t));
+  }, []), v = E(() => {
+    n({ type: "GO_TO_PREVIOUS_STEP" });
+  }, [n]), F = E(
+    async (t) => {
+      if (f) {
+        n({ type: "INITIATE_ENROLLMENT", payload: { method: t } });
+        try {
+          const r = await M({ mfaMethod: t });
+          if ("authUrl" in r && "secret" in r)
+            n({
+              type: "INITIATE_ENROLLMENT_SUCCESS",
+              payload: { authUrl: r.authUrl, secret: r.secret }
+            });
+          else
+            throw new Error("Failed to initiate enrollment");
+        } catch (r) {
+          n({
+            type: "INITIATE_ENROLLMENT_FAILURE",
+            payload: {
+              error: r instanceof Error ? r.message : "Failed to initiate enrollment"
+            }
+          });
+        }
+      }
+    },
+    [n, M, f]
+  ), w = E(
+    async (t) => {
+      t.preventDefault(), n({ type: "SUBMIT_ENROLLMENT" });
+      try {
+        await h({
+          mfaMethod: e.method,
+          mfaCode: e.mfaCode
+        }), n({ type: "SUBMIT_ENROLLMENT_SUCCESS" }), _?.(), s && setTimeout(() => {
+          n({ type: "SET_STEP", payload: { step: "list", flowDirection: "left" } });
+        }, 800);
+      } catch (r) {
+        n({
+          type: "SUBMIT_ENROLLMENT_FAILURE",
+          payload: {
+            error: r instanceof Error ? r.message : "Verification failed"
+          }
+        });
+      }
+    },
+    [n, e.method, e.mfaCode, h, _, s]
+  );
+  V(() => {
+    y(e.step);
+  }, [e.step, y]);
+  const g = typeof i == "function" ? i(e) : i;
+  return /* @__PURE__ */ o(
+    G,
+    {
+      onBack: v,
+      onStartEnrollment: F,
+      onSubmit: w,
+      transitionRef: T,
+      children: /* @__PURE__ */ a("div", { className: `${l["mfa-enrollment"]} ${c}`, ...m, children: [
+        g,
+        !g && /* @__PURE__ */ a(d, { children: [
+          /* @__PURE__ */ a(
+            "div",
+            {
+              className: j(
+                l["flex-container"],
+                e.step === "list" ? l["gap-3"] : ""
+              ),
+              children: [
+                e.step === "list" ? /* @__PURE__ */ a(d, { children: [
+                  /* @__PURE__ */ a("div", { children: [
+                    /* @__PURE__ */ o(x, { step: "list", method: e.method }),
+                    /* @__PURE__ */ o(R, { step: "list", method: e.method })
+                  ] }),
+                  /* @__PURE__ */ o(re, {})
+                ] }) : /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(q, { step: e.step }) }),
+                /* @__PURE__ */ o(K, { children: ({ step: t, method: r, Content: A }) => /* @__PURE__ */ a("div", { className: `${l["flex-container"]} ${l["gap-2"]}`, children: [
+                  t !== "list" && /* @__PURE__ */ a(d, { children: [
+                    /* @__PURE__ */ o(
+                      Y,
+                      {
+                        className: `${l.img} ${l.centered}`,
+                        step: t,
+                        method: r
+                      }
+                    ),
+                    /* @__PURE__ */ a("div", { className: l.centered, children: [
+                      /* @__PURE__ */ o(x, { step: t, method: r }),
+                      /* @__PURE__ */ o(R, { step: t, method: r })
+                    ] })
+                  ] }),
+                  A
+                ] }) })
+              ]
+            }
+          ),
+          U && /* @__PURE__ */ o(X, { className: l.footer })
+        ] })
+      ] })
+    }
+  );
+}, Se = ({ onEnrollSuccess: c, ...i }) => {
+  $("enroll_mfa");
+  const s = k(() => ["totp"], []);
+  return /* @__PURE__ */ o(Z, { methods: s, onEnrollSuccess: c, children: /* @__PURE__ */ o(oe, { ...i }) });
+};
+export {
+  Se as EnrollMfa,
+  R as EnrollMfaDescription,
+  re as EnrollMfaError,
+  K as EnrollMfaFlow,
+  q as EnrollMfaFlowBackButton,
+  X as EnrollMfaFooter,
+  Y as EnrollMfaImage,
+  Re as EnrollMfaItem,
+  Ce as EnrollMfaItems,
+  x as EnrollMfaTitle,
+  C as useEnrollMfaContext,
+  ge as useEnrollMfaFlow
+};

package/dist/components/EnrollMfa/methods/totp.d.ts

@@ -0,0 +1,6 @@
+import { EnrollMfaMethodConfig, EnrollMfaMethodContentProps, EnrollMfaMethodComponentProps } from '../types';
+export declare const TotpContent: ({ autoFocus, step, onSubmit, children, }: EnrollMfaMethodContentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TotpTitle: ({ step }: EnrollMfaMethodComponentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TotpDescription: ({ step }: EnrollMfaMethodComponentProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const TotpImage: ({ step }: EnrollMfaMethodComponentProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const totpMethodConfig: EnrollMfaMethodConfig;

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

@@ -0,0 +1,120 @@
+import { jsx as t, jsxs as l, Fragment as i } from "react/jsx-runtime";
+import { c as u } from "../../../chunks/lite.1fxw3LjI.js";
+import { useCallback as a } from "react";
+import { OTPForm as E } from "../../forms/OTPForm/index.js";
+import { Badge as C } from "../../ui/Badge/index.js";
+import { Button as m } from "../../ui/Button/index.js";
+import { CopyTextField as T } from "../../ui/CopyTextField/index.js";
+import { Error as f } from "../../ui/Error/index.js";
+import { QRCode as v } from "../../ui/QRCode/index.js";
+import { IconSmartPhone as k } from "../../../icons/IconSmartPhone.js";
+import { useEnrollMfaFlow as S } from "../EnrollMfaFlowProvider.js";
+import { useEnrollMfaContext as w } from "../EnrollMfaProvider.js";
+import "@coinbase/cdp-hooks";
+import '../../../assets/totp.css';const P = "totp-module__expired___SKiyj", F = "totp-module__container___1aL5H", o = {
+  "qr-code": "totp-module__qr-code___qyK1k",
+  expired: P,
+  container: F,
+  "copy-key": "totp-module__copy-key___iwzZf",
+  "otp-form": "totp-module__otp-form___OzooV"
+}, M = ({
+  autoFocus: r = !0,
+  step: c,
+  onSubmit: h,
+  children: p
+}) => {
+  const { state: e, dispatch: n } = w(), { startEnrollment: d } = S(), _ = a(() => {
+    d(e.method);
+  }, [d, e.method]), y = a(() => {
+    n({ type: "SET_STEP", payload: { step: "setup-verification", flowDirection: "left" } });
+  }, [n]), g = a(
+    (x) => {
+      n({ type: "SET_MFA_CODE", payload: { mfaCode: x } });
+    },
+    [n]
+  );
+  let s;
+  switch (c) {
+    case "setup":
+      s = /* @__PURE__ */ l("div", { className: o.container, children: [
+        /* @__PURE__ */ t("div", { className: u(o["qr-code"], e.isExpired ? o.expired : ""), children: /* @__PURE__ */ t(v, { value: e.authUrl || "", size: 128, ecl: "L" }) }),
+        /* @__PURE__ */ l("div", { className: u(o["copy-key"], e.isExpired ? o.expired : ""), children: [
+          /* @__PURE__ */ t(
+            T,
+            {
+              value: e.secret || "",
+              "aria-disabled": e.isExpired,
+              label: "Setup key"
+            }
+          ),
+          e.isExpired && /* @__PURE__ */ t(f, { children: "Verification timed out. For your security, try again." }),
+          !e.isExpired && !!e.error && e.step === "setup" && /* @__PURE__ */ t(f, { children: "isApiError(state.error) ? state.error.message : state.error" })
+        ] }),
+        e.isExpired ? /* @__PURE__ */ t(
+          m,
+          {
+            fullWidth: !0,
+            isPending: e.isPending,
+            pendingLabel: "Restarting enrollment",
+            onClick: _,
+            children: "Try again"
+          }
+        ) : /* @__PURE__ */ t(m, { fullWidth: !0, onClick: y, children: "Continue" })
+      ] });
+      break;
+    case "setup-verification":
+      s = /* @__PURE__ */ t(
+        E,
+        {
+          className: o["otp-form"],
+          autoFocus: r,
+          otp: e.mfaCode,
+          error: e.error && e.step === "setup-verification" ? e.error : void 0,
+          isPending: e.isPending,
+          onOTPChange: g,
+          onSubmit: h,
+          passwordLength: 6,
+          successMessage: e.isSuccess ? "Enrolled!" : void 0
+        }
+      );
+      break;
+  }
+  return p ? /* @__PURE__ */ t(i, { children: p({ step: c, Content: s }) }) : s;
+}, b = ({ step: r }) => {
+  switch (r) {
+    case "setup":
+      return /* @__PURE__ */ t(i, { children: "Set up authenticator" });
+    case "setup-verification":
+      return /* @__PURE__ */ t(i, { children: "Enter 6-digit code from your authenticator" });
+    default:
+      return /* @__PURE__ */ t(i, { children: "Set up MFA" });
+  }
+}, q = ({ step: r }) => {
+  switch (r) {
+    case "setup":
+      return /* @__PURE__ */ t(i, { children: "Scan the QR code or copy the setup key to create your authenticator code." });
+    case "setup-verification":
+      return /* @__PURE__ */ t(i, { children: "This links the authenticator app to your account." });
+    default:
+      return null;
+  }
+}, A = ({ step: r }) => {
+  switch (r) {
+    case "setup-verification":
+      return /* @__PURE__ */ t(C, { variant: "secondary", children: /* @__PURE__ */ t(k, {}) });
+    default:
+      return null;
+  }
+}, H = {
+  content: M,
+  title: b,
+  description: q,
+  image: A
+};
+export {
+  M as TotpContent,
+  q as TotpDescription,
+  A as TotpImage,
+  b as TotpTitle,
+  H as totpMethodConfig
+};

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

@@ -0,0 +1,83 @@
+import { APIError } from '@coinbase/cdp-hooks';
+import { FC, FormEvent, ReactNode } from 'react';
+export type MfaMethod = "totp";
+export type EnrollMfaStep = "list" | "setup" | "setup-verification";
+export type EnrollMfaMethodStep = Exclude<EnrollMfaStep, "list">;
+export interface EnrollMfaMethodComponentProps {
+    method?: MfaMethod;
+    step?: EnrollMfaStep;
+}
+export interface EnrollMfaState {
+    method: MfaMethod;
+    methods: MfaMethod[];
+    step: EnrollMfaStep;
+    flowDirection: "left" | "right";
+    mfaCode: string;
+    authUrl: string | null;
+    secret: string | null;
+    initiatedAt: number | null;
+    isExpired: boolean;
+    error: string | APIError | null;
+    isPending: boolean;
+    isSuccess: boolean;
+}
+export type EnrollMfaAction = {
+    type: "SET_STEP";
+    payload: {
+        step: EnrollMfaStep;
+        flowDirection?: "left" | "right";
+    };
+} | {
+    type: "SET_MFA_CODE";
+    payload: {
+        mfaCode: string;
+    };
+} | {
+    type: "INITIATE_ENROLLMENT";
+    payload: {
+        method: MfaMethod;
+    };
+} | {
+    type: "INITIATE_ENROLLMENT_SUCCESS";
+    payload: {
+        authUrl: string;
+        secret: string;
+    };
+} | {
+    type: "INITIATE_ENROLLMENT_FAILURE";
+    payload: {
+        error: string | APIError;
+    };
+} | {
+    type: "ENROLLMENT_SESSION_EXPIRED";
+} | {
+    type: "SUBMIT_ENROLLMENT";
+} | {
+    type: "SUBMIT_ENROLLMENT_SUCCESS";
+} | {
+    type: "SUBMIT_ENROLLMENT_FAILURE";
+    payload: {
+        error: string | APIError;
+    };
+} | {
+    type: "CLEAR_ERROR";
+} | {
+    type: "GO_TO_PREVIOUS_STEP";
+} | {
+    type: "RESET_STATE";
+};
+export interface EnrollMfaMethodContentProps {
+    step: EnrollMfaMethodStep;
+    autoFocus?: boolean;
+    onSubmit?: (e: FormEvent<HTMLFormElement>) => void;
+    children?: (props: {
+        step: EnrollMfaMethodStep;
+        Content: ReactNode;
+    }) => ReactNode;
+}
+export interface EnrollMfaMethodConfig {
+    content: FC<EnrollMfaMethodContentProps>;
+    description: FC<EnrollMfaMethodComponentProps>;
+    image: FC<EnrollMfaMethodComponentProps>;
+    title: FC<EnrollMfaMethodComponentProps>;
+}

package/dist/components/EnrollMfa/types.js

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

package/dist/components/EnrollMfa/useEnrollMfaReducer.d.ts

@@ -0,0 +1,3 @@
+import { EnrollMfaAction, EnrollMfaState, MfaMethod } from './types';
+export declare const STEPS: readonly ["list", "setup", "setup-verification"];
+export declare const useEnrollMfaReducer: (methods?: MfaMethod[]) => [EnrollMfaState, import('react').ActionDispatch<[action: EnrollMfaAction]>];

package/dist/components/EnrollMfa/useEnrollMfaReducer.js

@@ -0,0 +1,111 @@
+import { useReducer as n } from "react";
+import "@coinbase/cdp-hooks";
+import { isApiError as t } from "../../utils/isApiError.js";
+import "libphonenumber-js";
+const l = ["list", "setup", "setup-verification"], i = (r) => ({
+  method: r[0] || "totp",
+  methods: r,
+  step: "list",
+  flowDirection: "left",
+  mfaCode: "",
+  authUrl: null,
+  secret: null,
+  initiatedAt: null,
+  isExpired: !1,
+  error: null,
+  isPending: !1,
+  isSuccess: !1
+}), u = (r, e) => {
+  switch (e.type) {
+    case "SET_STEP":
+      return {
+        ...r,
+        step: e.payload.step,
+        flowDirection: e.payload.flowDirection || r.flowDirection,
+        error: null
+      };
+    case "SET_MFA_CODE":
+      return {
+        ...r,
+        mfaCode: e.payload.mfaCode,
+        error: null
+      };
+    case "INITIATE_ENROLLMENT":
+      return {
+        ...r,
+        method: e.payload.method,
+        isPending: !0,
+        error: null,
+        flowDirection: "left"
+      };
+    case "INITIATE_ENROLLMENT_SUCCESS":
+      return {
+        ...r,
+        isPending: !1,
+        authUrl: e.payload.authUrl,
+        secret: e.payload.secret,
+        initiatedAt: Date.now(),
+        isExpired: !1,
+        step: "setup"
+      };
+    case "INITIATE_ENROLLMENT_FAILURE":
+      return {
+        ...r,
+        isPending: !1,
+        error: e.payload.error,
+        step: "list",
+        flowDirection: "right"
+      };
+    case "ENROLLMENT_SESSION_EXPIRED":
+      return {
+        ...r,
+        mfaCode: "",
+        isExpired: !0
+      };
+    case "SUBMIT_ENROLLMENT":
+      return {
+        ...r,
+        isPending: !0,
+        error: null,
+        flowDirection: "left"
+      };
+    case "SUBMIT_ENROLLMENT_SUCCESS":
+      return {
+        ...r,
+        isPending: !1,
+        isSuccess: !0
+      };
+    case "SUBMIT_ENROLLMENT_FAILURE":
+      return {
+        ...r,
+        isPending: !1,
+        error: e.payload.error,
+        isExpired: t(e.payload.error) ? e.payload.error.errorType === "mfa_flow_expired" : e.payload.error.toLowerCase().startsWith("mfa flow not found or expired")
+      };
+    case "CLEAR_ERROR":
+      return {
+        ...r,
+        error: null
+      };
+    case "GO_TO_PREVIOUS_STEP": {
+      const o = l.indexOf(r.step), s = o > 0 ? l[o - 1] : r.step;
+      return {
+        ...r,
+        flowDirection: "right",
+        step: s,
+        error: null,
+        isExpired: !1,
+        mfaCode: ""
+        // Clear MFA code when going back
+      };
+    }
+    case "RESET_STATE":
+      return i(r.methods);
+    default:
+      return r;
+  }
+}, f = (r = ["totp"]) => n(u, r, i);
+export {
+  l as STEPS,
+  f as useEnrollMfaReducer
+};

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

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { EnrollMfaProps } from '../EnrollMfa';
+import { ButtonProps } from '../ui/Button';
+import { ModalContentProps } from '../ui/Modal';
+interface EnrollMfaModalTriggerProps extends Partial<Pick<ButtonProps, "className" | "fullWidth" | "size" | "style" | "variant">> {
+    children?: ReactNode;
+    label?: ReactNode;
+}
+interface EnrollMfaModalProps extends Pick<EnrollMfaProps, "onEnrollSuccess" | "resetOnSuccess"> {
+    children?: ReactNode;
+    open?: boolean;
+    setIsOpen?: (value: boolean) => void;
+}
+interface EnrollMfaModalContentProps extends Omit<ModalContentProps, "children"> {
+    children?: EnrollMfaProps["children"];
+}
+declare const EnrollMfaModalTrigger: ({ children, className, label, ...props }: EnrollMfaModalTriggerProps) => import("react/jsx-runtime").JSX.Element;
+declare const EnrollMfaModalContent: ({ children, ...props }: EnrollMfaModalContentProps) => import("react/jsx-runtime").JSX.Element;
+declare const EnrollMfaModal: ({ children, open, setIsOpen, onEnrollSuccess, resetOnSuccess, }: EnrollMfaModalProps) => import("react/jsx-runtime").JSX.Element;
+export { EnrollMfaModal, EnrollMfaModalContent, EnrollMfaModalTrigger, type EnrollMfaModalProps, type EnrollMfaModalContentProps, type EnrollMfaModalTriggerProps, };

package/dist/components/EnrollMfaModal/index.js

@@ -0,0 +1,144 @@
+import { jsx as o, jsxs as r, Fragment as s } from "react/jsx-runtime";
+import { u as v } from "../../chunks/useSendComponentCallOnce.BHZMuo6E.js";
+import { createContext as b, useMemo as w, useContext as y } from "react";
+import { c as p } from "../../chunks/lite.1fxw3LjI.js";
+import { u as F } from "../../chunks/CDPReactProvider.CIQm4C4z.js";
+import { EnrollMfa as T, EnrollMfaError as B } from "../EnrollMfa/index.js";
+import { Button as h } from "../ui/Button/index.js";
+import { Modal as A, ModalContent as O, ModalTitle as S, ModalDescription as $, ModalClose as E, ModalTrigger as D } from "../ui/Modal/index.js";
+import { VisuallyHidden as I } from "../ui/VisuallyHidden/index.js";
+import { IconXMark as g } from "../../icons/IconXMark.js";
+import { childrenHasComponent as C } from "../../utils/childrenHasComponent.js";
+import { EnrollMfaTitle as _ } from "../EnrollMfa/EnrollMfaTitle.js";
+import { EnrollMfaDescription as M } from "../EnrollMfa/EnrollMfaDescription.js";
+import { EnrollMfaFlowBackButton as P } from "../EnrollMfa/EnrollMfaFlowBackButton.js";
+import { EnrollMfaFlow as j } from "../EnrollMfa/EnrollMfaFlow.js";
+import { EnrollMfaImage as k } from "../EnrollMfa/EnrollMfaImage.js";
+import { EnrollMfaFooter as z } from "../EnrollMfa/EnrollMfaFooter.js";
+import '../../assets/EnrollMfaModal.css';const H = "EnrollMfaModal-module__enroll___RFMmp", J = "EnrollMfaModal-module__header___ZotIP", L = "EnrollMfaModal-module__trigger___AxlwE", R = "EnrollMfaModal-module__img___bTKfB", V = "EnrollMfaModal-module__centered___LhCxM", Z = "EnrollMfaModal-module__footer___Adcfg", e = {
+  enroll: H,
+  "no-footer": "EnrollMfaModal-module__no-footer___EMCyT",
+  header: J,
+  "close-icon": "EnrollMfaModal-module__close-icon___L9an5",
+  "close-button": "EnrollMfaModal-module__close-button___-qa5Z",
+  trigger: L,
+  img: R,
+  "flex-container": "EnrollMfaModal-module__flex-container___O6xYx",
+  "gap-2": "EnrollMfaModal-module__gap-2___NBJPS",
+  "gap-3": "EnrollMfaModal-module__gap-3___Jp1Oy",
+  centered: V,
+  footer: Z
+}, N = b(null), q = () => {
+  const l = y(N);
+  if (!l)
+    throw new Error("useEnrollMfaModalContext must be used within a EnrollMfaModal");
+  return l;
+}, x = ({
+  children: l,
+  className: d = "",
+  label: i,
+  ...t
+}) => /* @__PURE__ */ o(D, { asChild: !0, children: l || /* @__PURE__ */ o(h, { className: p(e.trigger, d), ...t, children: i || "Manage MFA" }) }), u = ({ children: l, ...d }) => {
+  const { onEnrollSuccess: i, resetOnSuccess: t } = q(), { showCoinbaseFooter: c } = F();
+  return /* @__PURE__ */ o(O, { ...d, children: /* @__PURE__ */ o(
+    T,
+    {
+      className: p(e.enroll, c ? "" : e["no-footer"]),
+      onEnrollSuccess: i,
+      resetOnSuccess: t,
+      children: (n) => /* @__PURE__ */ r(s, { children: [
+        /* @__PURE__ */ r(I, { children: [
+          /* @__PURE__ */ o(S, { asChild: !0, children: /* @__PURE__ */ o(_, { as: "span" }) }),
+          /* @__PURE__ */ o($, { asChild: !0, children: /* @__PURE__ */ o(M, { as: "span" }) })
+        ] }),
+        l ? typeof l == "function" ? l(n) : l : null,
+        !l && /* @__PURE__ */ r(s, { children: [
+          /* @__PURE__ */ r(
+            "div",
+            {
+              className: p(
+                e["flex-container"],
+                n.step === "list" ? e["gap-3"] : ""
+              ),
+              children: [
+                n.step === "list" ? /* @__PURE__ */ r(s, { children: [
+                  /* @__PURE__ */ r("div", { children: [
+                    /* @__PURE__ */ r("div", { className: e.header, children: [
+                      /* @__PURE__ */ o(_, { step: "list", method: n.method }),
+                      /* @__PURE__ */ o(E, { asChild: !0, children: /* @__PURE__ */ o(
+                        h,
+                        {
+                          className: e["close-button"],
+                          "aria-label": "Close",
+                          size: "md",
+                          variant: "transparentSecondary",
+                          children: /* @__PURE__ */ o(g, { className: e["close-icon"] })
+                        }
+                      ) })
+                    ] }),
+                    /* @__PURE__ */ o(M, { step: "list", method: n.method })
+                  ] }),
+                  /* @__PURE__ */ o(B, {})
+                ] }) : /* @__PURE__ */ r("div", { className: e.header, children: [
+                  /* @__PURE__ */ o(P, { step: n.step }),
+                  /* @__PURE__ */ o(E, { asChild: !0, children: /* @__PURE__ */ o(
+                    h,
+                    {
+                      className: e["close-button"],
+                      "aria-label": "Close",
+                      size: "md",
+                      variant: "transparentSecondary",
+                      children: /* @__PURE__ */ o(g, { className: e["close-icon"] })
+                    }
+                  ) })
+                ] }),
+                /* @__PURE__ */ o(j, { children: ({ step: a, method: m, Content: f }) => /* @__PURE__ */ r("div", { className: `${e["flex-container"]} ${e["gap-2"]}`, children: [
+                  a !== "list" && /* @__PURE__ */ r(s, { children: [
+                    /* @__PURE__ */ o(
+                      k,
+                      {
+                        className: `${e.img} ${e.centered}`,
+                        step: a,
+                        method: m
+                      }
+                    ),
+                    /* @__PURE__ */ r("div", { className: e.centered, children: [
+                      /* @__PURE__ */ o(_, { step: a, method: m }),
+                      /* @__PURE__ */ o(M, { step: a, method: m })
+                    ] })
+                  ] }),
+                  f
+                ] }) })
+              ]
+            }
+          ),
+          c && /* @__PURE__ */ o(z, { className: e.footer })
+        ] })
+      ] })
+    }
+  ) });
+}, mo = ({
+  children: l,
+  open: d,
+  setIsOpen: i,
+  onEnrollSuccess: t,
+  resetOnSuccess: c
+}) => {
+  v("enroll_mfa_modal");
+  const n = l ? C(l, x) : !1, a = l ? C(l, u) : !1, m = !n && !a, f = w(
+    () => ({ onEnrollSuccess: t, resetOnSuccess: c }),
+    [t, c]
+  );
+  return /* @__PURE__ */ o(N.Provider, { value: f, children: /* @__PURE__ */ o(A, { open: d, onOpenChange: i, children: m ? /* @__PURE__ */ r(s, { children: [
+    /* @__PURE__ */ o(x, { children: l }),
+    /* @__PURE__ */ o(u, {})
+  ] }) : /* @__PURE__ */ r(s, { children: [
+    l,
+    !a && /* @__PURE__ */ o(u, {})
+  ] }) }) });
+};
+export {
+  mo as EnrollMfaModal,
+  u as EnrollMfaModalContent,
+  x as EnrollMfaModalTrigger
+};