@coinbase/cdp-react 0.0.49 → 0.0.51

package/README.md

@@ -81,6 +81,21 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
 );
 ```
 
+#### Analytics Opt-Out
+
+By default the SDK will emit usage analytics to help us improve the SDK. If you would like to opt-out, you can do so by setting the `disableAnalytics` configuration option to `true`.
+
+```tsx lines
+<CDPReactProvider
+  config={{
+    projectId: "your-project-id",
+    disableAnalytics: true,
+  }}
+>
+  <App />
+</CDPReactProvider>
+```
+
 ### Render a Component
 
 Now you can use the components from the library. Let's add the `AuthButton` component to your application. This component handles both sign-in and sign-out functionality.

package/dist/chunks/lite.1fxw3LjI.js

@@ -0,0 +1,7 @@
+function a() {
+  for (var n, r = 0, t = "", s = arguments.length; r < s; r++) (n = arguments[r]) && typeof n == "string" && (t += (t && " ") + n);
+  return t;
+}
+export {
+  a as c
+};

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

@@ -1,8 +1,21 @@
-import { HTMLAttributes } from 'react';
-export interface AuthButtonProps {
+import { HTMLAttributes, ReactNode } from 'react';
+import { SignInModalProps } from '../SignInModal';
+import { SignOutButtonProps } from '../SignOutButton';
+export type AuthButtonSlots = {
+    placeholder?: (props: Pick<HTMLAttributes<HTMLDivElement>, "className">) => ReactNode;
+    signOutButton?: (props: Pick<SignOutButtonProps, "onSuccess">) => ReactNode;
+    signInModal?: (props: Pick<SignInModalProps, "open" | "setIsOpen" | "onSuccess">) => ReactNode;
+};
+export interface AuthButtonProps extends AuthButtonSlots {
+    children?: (props: {
+        [key in keyof AuthButtonSlots as Capitalize<key>]: ReactNode;
+    } & {
+        isInitialized: boolean;
+        isSignedIn: boolean;
+    }) => ReactNode;
     closeOnSuccessDelay?: null | number;
     onSignInSuccess?: () => void;
     onSignInSuccessTransitionEnd?: () => void;
     onSignOutSuccess?: () => void;
 }
-export declare const AuthButton: ({ closeOnSuccessDelay, onSignInSuccess, onSignInSuccessTransitionEnd, onSignOutSuccess, ...props }: AuthButtonProps & HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const AuthButton: ({ children, closeOnSuccessDelay, onSignInSuccess, onSignInSuccessTransitionEnd, onSignOutSuccess, placeholder, signInModal, signOutButton, ...props }: AuthButtonProps & Omit<HTMLAttributes<HTMLDivElement>, "children">) => import("react/jsx-runtime").JSX.Element;

package/dist/components/AuthButton/index.js

@@ -1,58 +1,70 @@
-import { jsxs as T, jsx as l } from "react/jsx-runtime";
-import { useIsInitialized as _, useIsSignedIn as v } from "@coinbase/cdp-hooks";
-import { useState as c, useRef as w, useEffect as f } from "react";
-import { SignInModal as x } from "../SignInModal/index.js";
-import { SignOutButton as y } from "../SignOutButton/index.js";
-import { LoadingSkeleton as A } from "../ui/LoadingSkeleton/index.js";
-import '../../assets/AuthButton.css';const B = "AuthButton-module__loading___JpDqi", D = {
-  loading: B
-}, L = ({
+import { jsx as u, jsxs as k, Fragment as y } from "react/jsx-runtime";
+import { useIsInitialized as z, useIsSignedIn as D } from "@coinbase/cdp-hooks";
+import { useState as f, useRef as M, useCallback as A, useEffect as m } from "react";
+import { SignInModal as N } from "../SignInModal/index.js";
+import { SignOutButton as $ } from "../SignOutButton/index.js";
+import { LoadingSkeleton as b } from "../ui/LoadingSkeleton/index.js";
+import '../../assets/AuthButton.css';const q = "AuthButton-module__loading___JpDqi", C = {
+  loading: q
+}, G = ({
+  children: d,
   closeOnSuccessDelay: S = 800,
   onSignInSuccess: g,
-  onSignInSuccessTransitionEnd: a,
-  onSignOutSuccess: h,
-  ...p
+  onSignInSuccessTransitionEnd: h,
+  onSignOutSuccess: p,
+  placeholder: I,
+  signInModal: O,
+  signOutButton: T,
+  ...j
 }) => {
-  const { isInitialized: i } = _(), { isSignedIn: u } = v(), [m, s] = c(u), [t, d] = c(!1), [n, r] = c(void 0), o = w(!1), I = () => {
-    g?.(), r(S);
-  }, O = () => {
-    h?.(), s(!1);
-  };
-  return f(() => {
-    if (n === void 0)
+  const { isInitialized: n } = z(), { isSignedIn: r } = D(), [l, s] = f(r), [e, c] = f(!1), [i, a] = f(void 0), o = M(!1), _ = A(() => {
+    g?.(), a(S);
+  }, [S, g]), v = A(() => {
+    p?.(), s(!1);
+  }, [p]);
+  m(() => {
+    if (i === void 0)
       return;
-    if (n === null) {
+    if (i === null) {
       o.current = !0;
       return;
     }
-    const e = setTimeout(() => {
-      o.current = !0, d(!1), r(void 0);
-    }, n);
+    const t = setTimeout(() => {
+      o.current = !0, c(!1), a(void 0);
+    }, i);
     return () => {
-      e && clearTimeout(e);
+      t && clearTimeout(t);
     };
-  }, [n]), f(() => {
-    if (t)
+  }, [i]), m(() => {
+    if (e)
       return;
-    let e = null;
-    return o.current && (e = setTimeout(() => {
-      a?.(), o.current = !1, s(!0);
+    let t = null;
+    return o.current && (t = setTimeout(() => {
+      h?.(), o.current = !1, s(!0);
     }, 200)), () => {
-      e && clearTimeout(e);
+      t && clearTimeout(t);
     };
-  }, [t, a]), f(() => {
-    if (u) {
+  }, [e, h]), m(() => {
+    if (r) {
       if (o.current)
         return;
-      t ? r((e) => e === void 0 ? 0 : e) : s(!0);
+      e ? a((t) => t === void 0 ? 0 : t) : s(!0);
     } else
       s(!1);
-  }, [u, t]), /* @__PURE__ */ T("div", { ...p, children: [
-    !i && /* @__PURE__ */ l(A, { className: D.loading }),
-    i && m && /* @__PURE__ */ l(y, { onSuccess: O }),
-    i && !m && /* @__PURE__ */ l(x, { open: t, setIsOpen: d, onSuccess: I })
-  ] });
+  }, [r, e]);
+  const B = I ? I({ className: C.loading }) : /* @__PURE__ */ u(b, { className: C.loading }), w = T ? T({ onSuccess: v }) : /* @__PURE__ */ u($, { onSuccess: v }), x = O ? O({ open: e, setIsOpen: c, onSuccess: _ }) : /* @__PURE__ */ u(N, { open: e, setIsOpen: c, onSuccess: _ });
+  return /* @__PURE__ */ u("div", { ...j, children: d ? d({
+    isInitialized: n,
+    isSignedIn: l,
+    Placeholder: B,
+    SignOutButton: w,
+    SignInModal: x
+  }) : /* @__PURE__ */ k(y, { children: [
+    !n && B,
+    n && l && w,
+    n && !l && x
+  ] }) });
 };
 export {
-  L as AuthButton
+  G as AuthButton
 };

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

@@ -15,6 +15,6 @@ export type CDPReactProviderProps = {
     config: Config;
     name?: string;
 } & ThemeProviderProps;
-export declare const CDPReactProvider: ({ children, config, name, theme }: CDPReactProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CDPReactProvider: ({ children, className, config, name, style, theme, }: CDPReactProviderProps) => import("react/jsx-runtime").JSX.Element;
 export declare const useAppConfig: () => Required<AppConfig>;
 export declare const useProviderName: () => string;

package/dist/components/CDPReactProvider/index.js

@@ -1,95 +1,102 @@
-import { jsx as h, jsxs as y } from "react/jsx-runtime";
-import { OAuth2ProviderType as b, CDPContext as N, CDPHooksProvider as T } from "@coinbase/cdp-hooks";
-import { lazy as D, createContext as H, useContext as m, useMemo as O } from "react";
-import { ThemeProvider as S } from "../ThemeProvider/index.js";
-const U = D(() => import("../OAuthStatusModal/index.js")), _ = (o) => {
+import { jsx as c, jsxs as N } from "react/jsx-runtime";
+import { OAuth2ProviderType as T, CDPContext as D, CDPHooksProvider as H } from "@coinbase/cdp-hooks";
+import { lazy as S, createContext as U, useContext as m, useMemo as P } from "react";
+import { ThemeProvider as _ } from "../ThemeProvider/index.js";
+const E = S(() => import("../OAuthStatusModal/index.js")), j = (o) => {
   try {
     return JSON.stringify(o);
   } catch {
   }
   return "";
-}, E = Object.keys(b).map((o) => `oauth:${o}`), j = [
+}, F = Object.keys(T).map((o) => `oauth:${o}`), k = [
   /** Email OTP method */
   "email",
   /** SMS OTP method */
   "sms"
-], R = [...j, ...E], W = ({ children: o, config: n, name: s, theme: a }) => {
+], $ = [...k, ...F], q = ({
+  children: o,
+  className: r = "",
+  config: n,
+  name: s,
+  style: a,
+  theme: i
+}) => {
   const {
-    appName: i,
+    appName: h,
     appLogoUrl: p,
     showCoinbaseFooter: u,
-    authMethods: e,
-    projectId: c,
-    useMock: t,
-    debugging: d,
-    basePath: C,
-    ethereum: M,
-    solana: P
-  } = n, { createOnLogin: l } = M ?? {}, { createOnLogin: f } = P ?? {}, v = O(
+    authMethods: t,
+    projectId: d,
+    useMock: C,
+    debugging: l,
+    basePath: f,
+    ethereum: v,
+    solana: x
+  } = n, { createOnLogin: A } = v ?? {}, { createOnLogin: O } = x ?? {}, L = P(
     () => ({
-      projectId: c,
-      useMock: t,
-      debugging: d,
-      basePath: C,
-      ethereum: { createOnLogin: l },
-      solana: { createOnLogin: f }
+      projectId: d,
+      useMock: C,
+      debugging: l,
+      basePath: f,
+      ethereum: { createOnLogin: A },
+      solana: { createOnLogin: O }
     }),
-    [c, t, d, C, l, f]
-  ), x = { appName: i, appLogoUrl: p, showCoinbaseFooter: u, authMethods: e }, L = e?.some((w) => w.startsWith("oauth:")), A = /* @__PURE__ */ h(F, { name: s, config: x, children: /* @__PURE__ */ y(S, { theme: a, children: [
+    [d, C, l, f, A, O]
+  ), w = { appName: h, appLogoUrl: p, showCoinbaseFooter: u, authMethods: t }, y = t?.some((b) => b.startsWith("oauth:")), M = /* @__PURE__ */ c(J, { name: s, config: w, children: /* @__PURE__ */ N(_, { className: r, style: a, theme: i, children: [
     o,
-    L && /* @__PURE__ */ h(U, {})
+    y && /* @__PURE__ */ c(E, {})
   ] }) });
-  return m(N) ? A : /* @__PURE__ */ h(T, { config: v, children: A });
-}, g = H(
+  return m(D) ? M : /* @__PURE__ */ c(H, { config: L, children: M });
+}, g = U(
   void 0
-), r = {
+), e = {
   appName: "",
   appLogoUrl: "",
   showCoinbaseFooter: !0,
   authMethods: ["email"]
-}, F = ({
+}, J = ({
   children: o,
-  config: n,
-  name: s
+  config: r,
+  name: n
 }) => {
   const {
-    appName: a = r.appName,
-    appLogoUrl: i = r.appLogoUrl,
-    showCoinbaseFooter: p = r.showCoinbaseFooter,
-    authMethods: u = r.authMethods
-  } = n ?? {}, e = _(u), c = O(() => {
+    appName: s = e.appName,
+    appLogoUrl: a = e.appLogoUrl,
+    showCoinbaseFooter: i = e.showCoinbaseFooter,
+    authMethods: h = e.authMethods
+  } = r ?? {}, p = j(h), u = P(() => {
     let t = ["email"];
     try {
-      t = JSON.parse(e);
+      t = JSON.parse(p);
     } catch {
     }
     return {
       app: {
-        appName: a,
-        appLogoUrl: i,
-        showCoinbaseFooter: p,
-        authMethods: Array.isArray(t) && t?.length ? t : r.authMethods
+        appName: s,
+        appLogoUrl: a,
+        showCoinbaseFooter: i,
+        authMethods: Array.isArray(t) && t?.length ? t : e.authMethods
       },
-      name: s
+      name: n
     };
-  }, [a, i, p, e, s]);
-  return /* @__PURE__ */ h(g.Provider, { value: c, children: o });
-}, $ = () => {
+  }, [s, a, i, p, n]);
+  return /* @__PURE__ */ c(g.Provider, { value: u, children: o });
+}, B = () => {
   const o = m(g);
   if (!o)
     throw new Error("useAppConfig must be used within an AppConfigProvider");
   return o.app;
-}, q = () => {
+}, G = () => {
   const o = m(g);
   if (!o)
     throw new Error("useProviderName must be used within an AppConfigProvider");
   return o.name ?? "";
 };
 export {
-  R as ALL_AUTH_METHODS,
-  j as AUTH_METHODS,
-  W as CDPReactProvider,
-  E as OAUTH_METHODS,
-  $ as useAppConfig,
-  q as useProviderName
+  $ as ALL_AUTH_METHODS,
+  k as AUTH_METHODS,
+  q as CDPReactProvider,
+  F as OAUTH_METHODS,
+  B as useAppConfig,
+  G as useProviderName
 };

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

@@ -5,6 +5,6 @@ import { useFundContext } from './FundProvider';
 import { FundTitle, FundTitleProps } from './FundTitle';
 import { FetchBuyUrlParams } from './hooks/useBuyUrl';
 import { CamelToSnakeCase, CamelToSnakeCaseNested, FundAction, FetchBuyOptions, FetchBuyQuote, FundPaymentMethod, FundPresetAmountInputs, FundProps, FundState, FundStateError, FundStateProps, FundContextType, FundLifecycleStatus, OnrampAmount, OnrampBuyQuoteResponse, OnrampBuyOptionsResponse, OnrampBuyOptionsSnakeCaseResponse, OnrampBuyQuoteSnakeCaseResponse, OnrampError, OnrampNetwork, OnrampPaymentCurrency, OnrampPaymentMethodLimit, OnrampPurchaseCurrency, OnrampSuccessEventData } from './types';
-declare const Fund: ({ className, children, openIn, submitLabel, title, ...props }: FundProps) => import("react/jsx-runtime").JSX.Element;
+declare const Fund: ({ className, children, openIn, style, submitLabel, title, ...props }: FundProps) => import("react/jsx-runtime").JSX.Element;
 declare const FundFooter: (props: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
 export { Fund, FundFooter, FundForm, FundTitle, useFundContext, type CamelToSnakeCase, type CamelToSnakeCaseNested, type FundAction, type FetchBuyOptions, type FetchBuyQuote, type FetchBuyUrlParams, type FundContextType, type FundFormProps, type FundLifecycleStatus, type FundPaymentMethod, type FundPresetAmountInputs, type FundProps, type FundState, type FundStateError, type FundStateProps, type FundTitleProps, type InputType, type OnrampAmount, type OnrampBuyQuoteResponse, type OnrampBuyOptionsResponse, type OnrampBuyOptionsSnakeCaseResponse, type OnrampBuyQuoteSnakeCaseResponse, type OnrampError, type OnrampNetwork, type OnrampPaymentCurrency, type OnrampPaymentMethodLimit, type OnrampPurchaseCurrency, type OnrampSuccessEventData, };

package/dist/components/Fund/index.js

@@ -8,7 +8,15 @@ import { FundTitle as _ } from "./FundTitle.js";
 import { useSetupOnrampEventListeners as b } from "./hooks/useSetupOnrampEventListeners.js";
 import '../../assets/Fund.css';const x = "Fund-module__fund___6j-Og", g = {
   fund: x
-}, L = ({ className: o = "", children: r, openIn: e, submitLabel: s, title: u, ...n }) => /* @__PURE__ */ t(l, { ...n, children: /* @__PURE__ */ t("div", { className: `${g.fund} ${o}`, children: /* @__PURE__ */ t(h, { openIn: e, submitLabel: s, title: u, children: r }) }) }), h = ({
+}, L = ({
+  className: o = "",
+  children: r,
+  openIn: e,
+  style: s,
+  submitLabel: u,
+  title: n,
+  ...i
+}) => /* @__PURE__ */ t(l, { ...i, children: /* @__PURE__ */ t("div", { className: `${g.fund} ${o}`, style: s, children: /* @__PURE__ */ t(h, { openIn: e, submitLabel: u, title: n, children: r }) }) }), h = ({
   children: o,
   openIn: r,
   submitLabel: e,

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

@@ -1,4 +1,4 @@
-import { Dispatch, ReactNode } from 'react';
+import { CSSProperties, Dispatch, ReactNode } from 'react';
 import { InputType } from '../forms/ExchangeAmountInput/types';
 import { FetchBuyUrlParams } from './hooks/useBuyUrl';
 export type CamelToSnakeCase<T extends string> = T extends `${infer A}${infer B}` ? B extends Uncapitalize<B> ? `${A}${CamelToSnakeCase<B>}` : `${Uncapitalize<A>}_${CamelToSnakeCase<Uncapitalize<B>>}` : T;
@@ -111,6 +111,7 @@ export interface FundProps extends FundStateProps, FundLifecycleEvents {
     inputType?: InputType;
     openIn?: "popup" | "tab";
     redirectUrl?: string;
+    style?: CSSProperties;
     submitLabel?: ReactNode;
     title?: ReactNode;
 }

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

@@ -1,9 +1,19 @@
 import { ReactNode } from 'react';
 import { FundProps } from '../Fund';
-interface FundModalProps extends FundProps {
+import { ButtonProps } from '../ui/Button';
+import { ModalContentProps } from '../ui/Modal';
+interface FundModalTriggerProps extends Partial<Pick<ButtonProps, "className" | "fullWidth" | "size" | "style" | "variant">> {
+    children?: ReactNode;
+    label?: ReactNode;
+}
+interface FundModalContentProps extends ModalContentProps {
+}
+interface FundModalProps extends Omit<FundProps, "children"> {
     children?: ReactNode;
     open?: boolean;
     setIsOpen?: (value: boolean) => void;
 }
-declare const FundModal: ({ children, open, setIsOpen, openIn, submitLabel, title, ...fundProps }: FundModalProps) => import("react/jsx-runtime").JSX.Element;
-export { FundModal, type FundModalProps };
+declare const FundModalTrigger: ({ children, className, label, ...props }: FundModalTriggerProps) => import("react/jsx-runtime").JSX.Element;
+declare const FundModalContent: (props: FundModalContentProps) => import("react/jsx-runtime").JSX.Element;
+declare const FundModal: ({ children, open, setIsOpen, ...fundProps }: FundModalProps) => import("react/jsx-runtime").JSX.Element;
+export { FundModal, FundModalContent, FundModalTrigger, type FundModalProps, type FundModalContentProps, type FundModalTriggerProps, };

package/dist/components/FundModal/index.js

@@ -1,93 +1,103 @@
-import { jsxs as t, jsx as o, Fragment as v } from "react/jsx-runtime";
-import { useId as x, useState as O, useCallback as p } from "react";
-import { useAppConfig as T } from "../CDPReactProvider/index.js";
-import { Fund as $, FundFooter as j } from "../Fund/index.js";
-import { Button as F } from "../ui/Button/index.js";
-import { Modal as A, ModalTrigger as I, ModalContent as z, ModalTitle as S, ModalClose as k } from "../ui/Modal/index.js";
-import { VisuallyHidden as M } from "../ui/VisuallyHidden/index.js";
-import { IconXMark as w } from "../../icons/IconXMark.js";
-import { FundTitle as a } from "../Fund/FundTitle.js";
-import { FundForm as U } from "../Fund/FundForm.js";
-import '../../assets/FundModal.css';const V = "FundModal-module__trigger___2IuXj", W = "FundModal-module__fund___1AmQa", X = "FundModal-module__title___lNsoT", q = "FundModal-module__content___9f3ze", e = {
-  trigger: V,
-  fund: W,
+import { jsx as o, jsxs as i, Fragment as M } from "react/jsx-runtime";
+import { c as x } from "../../chunks/lite.1fxw3LjI.js";
+import { createContext as w, useState as j, useCallback as F, useMemo as A, useId as $, useContext as z } from "react";
+import { useAppConfig as S } from "../CDPReactProvider/index.js";
+import { Fund as V, FundFooter as k } from "../Fund/index.js";
+import { Button as v } from "../ui/Button/index.js";
+import { Modal as D, ModalContent as H, ModalTitle as L, ModalClose as R, ModalTrigger as U } from "../ui/Modal/index.js";
+import { VisuallyHidden as C } from "../ui/VisuallyHidden/index.js";
+import { IconXMark as W } from "../../icons/IconXMark.js";
+import { childrenHasComponent as g } from "../../utils/childrenHasComponent.js";
+import { FundTitle as _ } from "../Fund/FundTitle.js";
+import { FundForm as X } from "../Fund/FundForm.js";
+import '../../assets/FundModal.css';const q = "FundModal-module__trigger___2IuXj", B = "FundModal-module__fund___1AmQa", E = "FundModal-module__title___lNsoT", K = "FundModal-module__content___9f3ze", t = {
+  trigger: q,
+  fund: B,
   "no-footer": "FundModal-module__no-footer___WKV78",
   "title-buttons": "FundModal-module__title-buttons___Lctf7",
   "close-button": "FundModal-module__close-button___jzdFM",
   "close-icon": "FundModal-module__close-icon___WoA4a",
   "fund-inner": "FundModal-module__fund-inner___UuOq3",
   "tx-status": "FundModal-module__tx-status___fc-3f",
-  title: X,
-  content: q,
+  title: E,
+  content: K,
   "error-view": "FundModal-module__error-view___hR1A0"
-}, Y = ({
-  children: g,
-  open: i,
-  setIsOpen: c,
-  openIn: u,
-  submitLabel: _,
-  title: r,
-  ...m
-}) => {
-  const { showCoinbaseFooter: f } = T(), d = x(), l = i !== void 0, [C, h] = O(!1), b = l ? i : C, s = p(
-    (n) => l ? c?.(n) : h(n),
-    [l, c, h]
-  ), N = p(() => {
-    s(!1);
-  }, [s]);
-  return /* @__PURE__ */ t(A, { open: b, onOpenChange: s, children: [
-    /* @__PURE__ */ o(I, { asChild: !0, children: g || /* @__PURE__ */ t(F, { variant: "primary", className: e.trigger, children: [
-      "Deposit ",
-      m.cryptoCurrency.toUpperCase()
-    ] }) }),
-    /* @__PURE__ */ o(z, { "aria-describedby": void 0, children: /* @__PURE__ */ o(
-      $,
-      {
-        className: `${e.fund} ${f ? "" : e["no-footer"]}`,
-        openIn: u,
-        submitLabel: _,
-        title: r,
-        ...m,
-        children: /* @__PURE__ */ t(v, { children: [
-          /* @__PURE__ */ o(M, { children: /* @__PURE__ */ o(S, { asChild: !0, children: /* @__PURE__ */ o(a, { as: "span", children: r }) }) }),
-          /* @__PURE__ */ o(
-            U,
-            {
-              "aria-labelledby": d,
-              openIn: u,
-              unmountOnTransactionSuccess: !0,
-              unmount: N,
-              submitLabel: _,
-              children: ({ view: n, Content: y }) => /* @__PURE__ */ t(
-                "div",
-                {
-                  className: `${e["fund-inner"]} ${n === "transaction-status" ? e["tx-status"] : ""} ${n === "error" ? e["error-view"] : ""}`,
-                  children: [
-                    /* @__PURE__ */ t("div", { className: e["title-buttons"], children: [
-                      n === "error" ? /* @__PURE__ */ o(M, { children: /* @__PURE__ */ o(a, { id: d, children: r }) }) : /* @__PURE__ */ o(a, { className: e.title, id: d, children: r }),
-                      /* @__PURE__ */ o(k, { asChild: !0, children: /* @__PURE__ */ o(
-                        F,
-                        {
-                          className: e["close-button"],
-                          "aria-label": "Close",
-                          size: "md",
-                          variant: "transparentSecondary",
-                          children: /* @__PURE__ */ o(w, { className: e["close-icon"] })
-                        }
-                      ) })
-                    ] }),
-                    /* @__PURE__ */ o("div", { className: e.content, children: y })
-                  ]
-                }
-              )
-            }
-          ),
-          f && /* @__PURE__ */ o(j, {})
-        ] })
-      }
-    ) })
-  ] });
+}, N = w(null), y = () => {
+  const n = z(N);
+  if (!n)
+    throw new Error("useFundModalContext must be used within a FundModal");
+  return n;
+}, b = ({ children: n, className: l = "", label: e, ...s }) => {
+  const { cryptoCurrency: r } = y();
+  return /* @__PURE__ */ o(U, { asChild: !0, children: n || /* @__PURE__ */ o(v, { variant: "primary", className: x(t.trigger, l), ...s, children: e || `Deposit ${r.toUpperCase()}` }) });
+}, f = (n) => {
+  const { showCoinbaseFooter: l } = S(), e = $(), { unmount: s, ...r } = y(), { openIn: m, submitLabel: u, title: a } = r;
+  return /* @__PURE__ */ o(H, { "aria-describedby": void 0, ...n, children: /* @__PURE__ */ o(
+    V,
+    {
+      className: x(t.fund, l ? "" : t["no-footer"]),
+      ...r,
+      children: /* @__PURE__ */ i(M, { children: [
+        /* @__PURE__ */ o(C, { children: /* @__PURE__ */ o(L, { asChild: !0, children: /* @__PURE__ */ o(_, { as: "span", children: a }) }) }),
+        /* @__PURE__ */ o(
+          X,
+          {
+            "aria-labelledby": e,
+            openIn: m,
+            unmountOnTransactionSuccess: !0,
+            unmount: s,
+            submitLabel: u,
+            children: ({ view: d, Content: c }) => /* @__PURE__ */ i(
+              "div",
+              {
+                className: `${t["fund-inner"]} ${d === "transaction-status" ? t["tx-status"] : ""} ${d === "error" ? t["error-view"] : ""}`,
+                children: [
+                  /* @__PURE__ */ i("div", { className: t["title-buttons"], children: [
+                    d === "error" ? /* @__PURE__ */ o(C, { children: /* @__PURE__ */ o(_, { id: e, children: a }) }) : /* @__PURE__ */ o(_, { className: t.title, id: e, children: a }),
+                    /* @__PURE__ */ o(R, { asChild: !0, children: /* @__PURE__ */ o(
+                      v,
+                      {
+                        className: t["close-button"],
+                        "aria-label": "Close",
+                        size: "md",
+                        variant: "transparentSecondary",
+                        children: /* @__PURE__ */ o(W, { className: t["close-icon"] })
+                      }
+                    ) })
+                  ] }),
+                  /* @__PURE__ */ o("div", { className: t.content, children: c })
+                ]
+              }
+            )
+          }
+        ),
+        l && /* @__PURE__ */ o(k, {})
+      ] })
+    }
+  ) });
+}, so = ({ children: n, open: l, setIsOpen: e, ...s }) => {
+  const r = l !== void 0, [m, u] = j(!1), a = r ? l : m, d = F(
+    (p) => r ? e?.(p) : u(p),
+    [r, e, u]
+  ), c = F(() => {
+    d(!1);
+  }, [d]), T = A(
+    () => ({
+      unmount: c,
+      ...s
+    }),
+    [c, s]
+  ), I = n ? g(n, b) : !1, h = n ? g(n, f) : !1, O = !I && !h;
+  return /* @__PURE__ */ o(N.Provider, { value: T, children: /* @__PURE__ */ o(D, { open: a, onOpenChange: d, children: O ? /* @__PURE__ */ i(M, { children: [
+    /* @__PURE__ */ o(b, { children: n }),
+    /* @__PURE__ */ o(f, {})
+  ] }) : /* @__PURE__ */ i(M, { children: [
+    n,
+    !h && /* @__PURE__ */ o(f, {})
+  ] }) }) });
 };
 export {
-  Y as FundModal
+  so as FundModal,
+  f as FundModalContent,
+  b as FundModalTrigger
 };