@coinbase/cdp-react 0.0.108 → 0.0.110

package/dist/components/ExportWallet/index.js

@@ -2,7 +2,7 @@ import { u as S, A as D } from "../../chunks/useSendComponentCallOnce.BI4daEvm.j
 import { createContext as A, useContext as k, useMemo as h, useState as L, useCallback as U } from "react";
 import { VERSION as q } from "../../version.js";
 import "../AuthButton/index.js";
-import { u as b } from "../../chunks/CDPReactProvider.CFWIUvzR.js";
+import { u as b } from "../../chunks/CDPReactProvider.BWInVuNJ.js";
 import { CopyAddress as H } from "../CopyAddress/index.js";
 import { CopyEvmKeyButton as J } from "../CopyEvmKeyButton/index.js";
 import { CopySolanaKeyButton as X } from "../CopySolanaKeyButton/index.js";
@@ -36,6 +36,8 @@ import "../../theme/utils.js";
 import "../../icons/IconAppleLogo.js";
 import "../../icons/IconArrowLeft.js";
 import "../../icons/IconArrowsUpDown.js";
+import "../../icons/IconBaseColorLogo.js";
+import "../../icons/IconBaseLogo.js";
 import "../../icons/IconCheck.js";
 import "../../icons/IconCheckCircle.js";
 import "../../icons/IconChevronDown.js";
@@ -69,7 +71,7 @@ import "../EnrollMfa/EnrollMfaItems.js";
 import "../EnrollMfa/EnrollMfaTitle.js";
 import "../Fund/FundForm.js";
 import "../Fund/FundTitle.js";
-import "../../chunks/LinkAuthFlow.S1XbYaG5.js";
+import "../../chunks/LinkAuthFlow.0FnIchwa.js";
 import "../LinkAuth/LinkAuthFlowBackButton.js";
 import "../LinkAuth/LinkAuthItem.js";
 import "../LinkAuth/LinkAuthItems.js";
@@ -333,7 +335,7 @@ import '../../assets/ExportWallet.css';const at = "ExportWallet-module__footer__
       ]
     }
   ) });
-}, se = ({
+}, me = ({
   address: o,
   children: e,
   onIframeReady: r,
@@ -366,7 +368,7 @@ import '../../assets/ExportWallet.css';const at = "ExportWallet-module__footer__
 };
 D.registerPackageVersion("react", q);
 export {
-  se as E,
+  me as E,
   pt as ExportWallet,
   j as ExportWalletCopyAddress,
   B as ExportWalletCopyKeyButton,

package/dist/components/ExportWalletModal/index.js

@@ -2,7 +2,7 @@ import "react/jsx-runtime";
 import "../../chunks/useSendComponentCallOnce.BI4daEvm.js";
 import "react";
 import "../../chunks/lite.1fxw3LjI.js";
-import "../../chunks/CDPReactProvider.CFWIUvzR.js";
+import "../../chunks/CDPReactProvider.BWInVuNJ.js";
 import { E as W, a as g, b as n, c as C, d as T } from "../ExportWallet/index.js";
 import "../ui/Banner/index.js";
 import "../ui/Button/index.js";

package/dist/components/Fund/index.js

@@ -1,7 +1,7 @@
 import { jsx as n, jsxs as i, Fragment as f } from "react/jsx-runtime";
 import { u as p } from "../../chunks/useSendComponentCallOnce.BI4daEvm.js";
 import { useId as a } from "react";
-import { u as c } from "../../chunks/CDPReactProvider.CFWIUvzR.js";
+import { u as c } from "../../chunks/CDPReactProvider.BWInVuNJ.js";
 import { CoinbaseFooter as F } from "../ui/CoinbaseFooter/index.js";
 import { FundForm as l } from "./FundForm.js";
 import { FundProvider as C, useFundContext as _ } from "./FundProvider.js";

package/dist/components/FundModal/index.js

@@ -2,7 +2,7 @@ import { jsx as o, jsxs as u, Fragment as p } from "react/jsx-runtime";
 import { u as w } from "../../chunks/useSendComponentCallOnce.BI4daEvm.js";
 import { createContext as j, useState as A, useCallback as F, useMemo as S, useId as $, useContext as z } from "react";
 import { c as x } from "../../chunks/lite.1fxw3LjI.js";
-import { u as V } from "../../chunks/CDPReactProvider.CFWIUvzR.js";
+import { u as V } from "../../chunks/CDPReactProvider.BWInVuNJ.js";
 import { Fund as k, FundFooter as D } from "../Fund/index.js";
 import { Button as v } from "../ui/Button/index.js";
 import { Modal as H, ModalContent as L, ModalTitle as R, ModalClose as U, ModalTrigger as W } from "../ui/Modal/index.js";

package/dist/components/LinkAuth/LinkAuthFlow.js

@@ -1,19 +1,23 @@
 import "react/jsx-runtime";
 import "react";
-import "../../chunks/CDPReactProvider.CFWIUvzR.js";
+import "../../chunks/CDPReactProvider.BWInVuNJ.js";
 import "../SignIn/index.js";
 import "@coinbase/cdp-hooks";
-import "../ui/SwitchSlideTransition/index.js";
+import "../ui/SwitchTransition/index.js";
 import "../ui/VisuallyHidden/index.js";
-import { a as A } from "../../chunks/LinkAuthFlow.S1XbYaG5.js";
+import { a as c } from "../../chunks/LinkAuthFlow.0FnIchwa.js";
 import "./LinkAuthItems.js";
+import "./LinkAuthProvider.js";
 import "./types.js";
+import "../SiweStatusView/index.js";
+import "../ui/CoinbaseFooter/index.js";
 import "../SignIn/SignInProvider.js";
 import "../SignIn/SignInImage.js";
 import "../SignIn/SignInForm.js";
 import "../SignIn/SignInTitle.js";
 import "../SignIn/SignInDescription.js";
-import "../SignIn/SignInFooter.js";
+import "../SiweStatusView/toSiweProvider.js";
+import "../SiweStatusView/useSiweFlow.js";
 export {
-  A as LinkAuthFlow
+  c as LinkAuthFlow
 };

package/dist/components/LinkAuth/LinkAuthFlowBackButton.js

@@ -3,9 +3,9 @@ import { c as k } from "../../chunks/lite.1fxw3LjI.js";
 import "react";
 import { Button as p } from "../ui/Button/index.js";
 import { IconArrowLeft as f } from "../../icons/IconArrowLeft.js";
-import { b as w } from "../../chunks/LinkAuthFlow.S1XbYaG5.js";
+import { b as w } from "../../chunks/LinkAuthFlow.0FnIchwa.js";
 import { useLinkAuthContext as _ } from "./LinkAuthProvider.js";
-import "../../chunks/CDPReactProvider.CFWIUvzR.js";
+import "../../chunks/CDPReactProvider.BWInVuNJ.js";
 import { methodToView as b } from "./utils.js";
 import '../../assets/LinkAuthFlowBackButton.css';const h = "LinkAuthFlowBackButton-module__button___wPKfW", B = "LinkAuthFlowBackButton-module__icon___OUmzY", o = {
   button: h,

package/dist/components/LinkAuth/LinkAuthFlowProvider.d.ts

@@ -1,8 +1,8 @@
 import { ReactNode, RefObject } from 'react';
 import { AuthMethod } from '../CDPReactProvider';
-import { SwitchSlideTransitionRef } from '../ui/SwitchSlideTransition';
+import { SwitchTransitionRef } from '../ui/SwitchTransition';
 import { SignInContentRef } from './LinkAuthFlow';
-import { LinkAuthFlowView } from './types';
+import { LinkAuthFlowView, LinkTransitionName } from './types';
 /**
  * The value of the link auth flow context.
  *
@@ -11,12 +11,19 @@ import { LinkAuthFlowView } from './types';
 export interface LinkAuthFlowContextValue {
     /** A function to call when the back button is clicked. */
     back: () => void;
-    /** The direction of the flow transition. */
+    /**
+     * The direction of the flow transition.
+     *
+     * @deprecated Use `transitionName` instead; `direction` is derived from
+     * `transitionName` for backwards compatibility and no longer controls the animation.
+     */
     direction?: "left" | "right";
     /** A function to call when the user links an auth method. */
     link: (method: AuthMethod) => void;
     /** A function to call when an auth method is successfully linked. */
     linkSuccess: () => void;
+    /** The transition animation used between flow views (fade for SIWE, slide otherwise). */
+    transitionName: LinkTransitionName;
 }
 /**
  * The value of the link auth flow context for the internal use of the component.
@@ -25,7 +32,7 @@ export interface LinkAuthFlowContextValue {
  */
 export interface LinkAuthFlowContextValueInternal extends LinkAuthFlowContextValue {
     /** A ref to the flow transition. */
-    transitionRef: RefObject<SwitchSlideTransitionRef<LinkAuthFlowView> | null> | null;
+    transitionRef: RefObject<SwitchTransitionRef<LinkAuthFlowView> | null> | null;
     /** A ref that provides the ability to go back to the previous step of the sign in flow. */
     signInRef: RefObject<SignInContentRef | null> | null;
 }
@@ -37,8 +44,8 @@ export interface LinkAuthFlowContextValueInternal extends LinkAuthFlowContextVal
 interface LinkAuthFlowProviderProps {
     /** The children of the component. */
     children?: ReactNode;
-    /** The direction of the flow transition. */
-    direction?: LinkAuthFlowContextValue["direction"];
+    /** The transition animation used between flow views. Defaults to a left slide. */
+    transitionName?: LinkAuthFlowContextValueInternal["transitionName"];
     /** A function to call when the back button is clicked. */
     onBack: LinkAuthFlowContextValue["back"];
     /** A function to call when the user links an auth method. */
@@ -71,12 +78,19 @@ export declare const useLinkAuthFlowInternal: () => LinkAuthFlowContextValueInte
 export declare const useLinkAuthFlow: () => {
     /** A function to call when the back button is clicked. */
     back: () => void;
-    /** The direction of the flow transition. */
+    /**
+     * The direction of the flow transition.
+     *
+     * @deprecated Use `transitionName` instead; `direction` is derived from
+     * `transitionName` for backwards compatibility and no longer controls the animation.
+     */
     direction?: "left" | "right";
     /** A function to call when the user links an auth method. */
     link: (method: AuthMethod) => void;
     /** A function to call when an auth method is successfully linked. */
     linkSuccess: () => void;
+    /** The transition animation used between flow views (fade for SIWE, slide otherwise). */
+    transitionName: LinkTransitionName;
 };
 /**
  * A provider for the link auth flow.
@@ -89,5 +103,5 @@ export declare const useLinkAuthFlow: () => {
  *
  * @group Components
  */
-export declare const LinkAuthFlowProvider: ({ direction, children, onBack, onLink, onLinkSuccess, signInRef, transitionRef, }: LinkAuthFlowProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LinkAuthFlowProvider: ({ transitionName, children, onBack, onLink, onLinkSuccess, signInRef, transitionRef, }: LinkAuthFlowProviderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/LinkAuth/LinkAuthFlowProvider.js

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "react";
-import "../../chunks/CDPReactProvider.CFWIUvzR.js";
-import { L as e, u as n, b as s } from "../../chunks/LinkAuthFlow.S1XbYaG5.js";
+import "../../chunks/CDPReactProvider.BWInVuNJ.js";
+import { L as e, u as n, b as s } from "../../chunks/LinkAuthFlow.0FnIchwa.js";
 export {
   e as LinkAuthFlowProvider,
   n as useLinkAuthFlow,

package/dist/components/LinkAuth/LinkAuthItem.js

@@ -1,7 +1,7 @@
 import { jsx as m } from "react/jsx-runtime";
 import "react";
 import { ToggleListItem as s } from "../ui/ToggleListItem/index.js";
-import "../../chunks/CDPReactProvider.CFWIUvzR.js";
+import "../../chunks/CDPReactProvider.BWInVuNJ.js";
 const u = ({
   authMethod: n,
   userAlias: e,

package/dist/components/LinkAuth/LinkAuthItems.js

@@ -1,49 +1,56 @@
 import { jsx as e } from "react/jsx-runtime";
-import { c as b } from "../../chunks/lite.1fxw3LjI.js";
-import { useMemo as g } from "react";
-import "../../chunks/CDPReactProvider.CFWIUvzR.js";
-import { IconAppleLogo as d } from "../../icons/IconAppleLogo.js";
-import { IconEnvelope as f } from "../../icons/IconEnvelope.js";
-import { IconGoogleColorLogo as L } from "../../icons/IconGoogleColorLogo.js";
-import { IconPhone as _ } from "../../icons/IconPhone.js";
-import { IconTelegramLogo as A } from "../../icons/IconTelegramLogo.js";
+import { c as u } from "../../chunks/lite.1fxw3LjI.js";
+import { useMemo as f } from "react";
+import "../../chunks/CDPReactProvider.BWInVuNJ.js";
+import { siweConnectors as d } from "../SiweStatusView/connectors/siweConnectors.js";
+import { IconAppleLogo as g } from "../../icons/IconAppleLogo.js";
+import { IconEnvelope as L } from "../../icons/IconEnvelope.js";
+import { IconGoogleColorLogo as A } from "../../icons/IconGoogleColorLogo.js";
+import { IconPhone as M } from "../../icons/IconPhone.js";
+import { IconTelegramLogo as _ } from "../../icons/IconTelegramLogo.js";
 import { IconXLogo as P } from "../../icons/IconXLogo.js";
 import { LinkAuthItem as T } from "./LinkAuthItem.js";
 import { useLinkAuthContext as k } from "./LinkAuthProvider.js";
-import '../../assets/LinkAuthItems.css';const x = "LinkAuthItems-module__list___5AimM", M = {
+import '../../assets/LinkAuthItems.css';const x = "LinkAuthItems-module__list___5AimM", E = {
   list: x
-}, m = {
-  email: { Icon: /* @__PURE__ */ e(f, { "aria-label": "Email" }), label: "Email" },
-  sms: { Icon: /* @__PURE__ */ e(_, { "aria-label": "Phone" }), label: "Phone" },
-  "oauth:google": { Icon: /* @__PURE__ */ e(L, { "aria-label": "Google" }), label: "Google" },
-  "oauth:apple": { Icon: /* @__PURE__ */ e(d, { "aria-label": "Apple" }), label: "Apple" },
+}, w = Object.fromEntries(
+  Object.entries(d).map(([i, l]) => {
+    const t = l.colorIcon ?? l.icon;
+    return [`siwe:${i}`, { Icon: /* @__PURE__ */ e(t, { "aria-label": l.label }), label: l.label }];
+  })
+), c = {
+  email: { Icon: /* @__PURE__ */ e(L, { "aria-label": "Email" }), label: "Email" },
+  sms: { Icon: /* @__PURE__ */ e(M, { "aria-label": "Phone" }), label: "Phone" },
+  "oauth:google": { Icon: /* @__PURE__ */ e(A, { "aria-label": "Google" }), label: "Google" },
+  "oauth:apple": { Icon: /* @__PURE__ */ e(g, { "aria-label": "Apple" }), label: "Apple" },
   "oauth:x": { Icon: /* @__PURE__ */ e(P, { "aria-label": "X" }), label: "X" },
-  "oauth:telegram": { Icon: /* @__PURE__ */ e(A, { "aria-label": "Telegram" }), label: "Telegram" }
-}, O = ({ children: s, className: c = "", onLink: t, ...p }) => {
-  const { state: h, dispatch: a } = k(), { authMethods: i, isPending: r, methodToLink: n } = h, I = g(() => i.filter((o) => m[o.method]).map((o) => {
-    const { Icon: l, label: u } = m[o.method];
+  "oauth:telegram": { Icon: /* @__PURE__ */ e(_, { "aria-label": "Telegram" }), label: "Telegram" },
+  ...w
+}, q = ({ children: i, className: l = "", onLink: t, ...p }) => {
+  const { state: h, dispatch: r } = k(), { authMethods: n, isPending: m, methodToLink: s } = h, I = f(() => n.filter((o) => c[o.method]).map((o) => {
+    const { Icon: a, label: b } = c[o.method];
     return {
       ...o,
-      icon: l,
-      label: u,
+      icon: a,
+      label: b,
       onLink: async () => {
-        a({ type: "LINK_AUTH_METHOD", payload: { method: o.method } }), await t?.(o.method);
+        r({ type: "LINK_AUTH_METHOD", payload: { method: o.method } }), await t?.(o.method);
       }
     };
-  }), [i, a, t]);
-  return /* @__PURE__ */ e("ul", { className: b(M.list, c), ...p, children: I.map(({ method: o, ...l }) => /* @__PURE__ */ e("li", { children: s?.({
-    ...l,
+  }), [n, r, t]);
+  return /* @__PURE__ */ e("ul", { className: u(E.list, l), ...p, children: I.map(({ method: o, ...a }) => /* @__PURE__ */ e("li", { children: i?.({
+    ...a,
     authMethod: o,
-    isPending: r && n === o
+    isPending: m && s === o
   }) || /* @__PURE__ */ e(
     T,
     {
-      ...l,
+      ...a,
       authMethod: o,
-      isPending: r && n === o
+      isPending: m && s === o
     }
   ) }, o)) });
 };
 export {
-  O as LinkAuthItems
+  q as LinkAuthItems
 };

package/dist/components/LinkAuth/LinkAuthProvider.js

@@ -1,14 +1,21 @@
 import { jsx as m } from "react/jsx-runtime";
 import { useCurrentUser as c } from "@coinbase/cdp-hooks";
-import { createContext as M, useContext as p, useMemo as r, useReducer as A, useEffect as f } from "react";
-import { u as L } from "../../chunks/CDPReactProvider.CFWIUvzR.js";
+import { createContext as M, useContext as p, useMemo as d, useReducer as A, useEffect as f } from "react";
+import { u as L } from "../../chunks/CDPReactProvider.BWInVuNJ.js";
 import { formatPhoneNumber as k } from "../../utils/formatPhoneNumber.js";
 const g = {
   methodToLink: null,
   authMethods: [],
   error: null,
   isPending: !1
-}, d = M(void 0), T = (e, t) => {
+}, r = M(void 0), T = (e, t) => {
+  if (t.startsWith("siwe:")) {
+    const o = e.authenticationMethods.siwe?.address;
+    return {
+      userAlias: o ? `${o.slice(0, 6)}...${o.slice(-4)}` : "",
+      isLinked: !!o
+    };
+  }
   switch (t) {
     case "email":
       return {
@@ -76,33 +83,33 @@ function E(e, t) {
   }
 }
 const y = ({ children: e }) => {
-  const { currentUser: t } = c(), { authMethods: n } = L(), a = r(() => {
-    const i = [];
-    return n.forEach((s) => {
+  const { currentUser: t } = c(), { authMethods: o } = L(), i = d(() => {
+    const a = [];
+    return o.forEach((n) => {
       if (!t) {
-        i.push({
+        a.push({
           userAlias: "",
           isLinked: !1,
-          method: s
+          method: n
         });
         return;
       }
-      const u = T(t, s);
-      i.push({
+      const u = T(t, n);
+      a.push({
         userAlias: u?.userAlias ?? "",
         isLinked: u?.isLinked ?? !1,
-        method: s
+        method: n
       });
-    }), i;
-  }, [t, n]), [h, o] = A(E, {
+    }), a;
+  }, [t, o]), [h, s] = A(E, {
     ...g,
-    authMethods: a
-  }), l = r(() => ({ state: h, dispatch: o }), [h, o]);
+    authMethods: i
+  }), l = d(() => ({ state: h, dispatch: s }), [h, s]);
   return f(() => {
-    o({ type: "SET_AUTH_METHODS", payload: { methods: a } });
-  }, [o, a]), /* @__PURE__ */ m(d.Provider, { value: l, children: e });
+    s({ type: "SET_AUTH_METHODS", payload: { methods: i } });
+  }, [s, i]), /* @__PURE__ */ m(r.Provider, { value: l, children: e });
 }, C = () => {
-  const e = p(d);
+  const e = p(r);
   if (!e)
     throw new Error("useLinkAuthContext must be used within a LinkAuthProvider");
   return e;

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

@@ -7,7 +7,7 @@ import { LinkAuthItem, LinkAuthItemProps } from './LinkAuthItem';
 import { LinkAuthItems, LinkAuthItemsProps } from './LinkAuthItems';
 import { useLinkAuthContext, LinkAuthContextValue } from './LinkAuthProvider';
 import { LinkAuthTitle, LinkAuthTitleProps } from './LinkAuthTitle';
-import { LinkAuthState, LinkAuthMethod, LinkAuthAction } from './types';
+import { LinkAuthState, LinkAuthMethod, LinkAuthAction, LinkTransitionName } from './types';
 /**
  * Props for the LinkAuth component
  *
@@ -184,4 +184,4 @@ declare const LinkAuthError: ({ role, ...props }: HTMLAttributes<HTMLDivElement>
  * ```
  */
 declare const LinkAuth: (props: LinkAuthProps) => import("react/jsx-runtime").JSX.Element;
-export { LinkAuthError, LinkAuthFlow, LinkAuthFlowBackButton, LinkAuthItem, LinkAuthItems, LinkAuthTitle, LinkAuth, useLinkAuthContext, useLinkAuthFlow, type LinkAuthAction, type LinkAuthContextValue, type LinkAuthFlowBackButtonProps, type LinkAuthFlowContextValue, type LinkAuthFlowProps, type LinkAuthItemProps, type LinkAuthItemsProps, type LinkAuthMethod, type LinkAuthProps, type LinkAuthState, type LinkAuthTitleProps, };
+export { LinkAuthError, LinkAuthFlow, LinkAuthFlowBackButton, LinkAuthItem, LinkAuthItems, LinkAuthTitle, LinkAuth, useLinkAuthContext, useLinkAuthFlow, type LinkAuthAction, type LinkAuthContextValue, type LinkAuthFlowBackButtonProps, type LinkAuthFlowContextValue, type LinkAuthFlowProps, type LinkAuthItemProps, type LinkAuthItemsProps, type LinkAuthMethod, type LinkAuthProps, type LinkAuthState, type LinkAuthTitleProps, type LinkTransitionName, };

package/dist/components/LinkAuth/index.js

@@ -1,92 +1,93 @@
-import { jsx as r, jsxs as h, Fragment as I } from "react/jsx-runtime";
-import { useLinkOAuth as N } from "@coinbase/cdp-hooks";
+import { jsx as r, jsxs as d, Fragment as F } from "react/jsx-runtime";
+import { useLinkOAuth as I } from "@coinbase/cdp-hooks";
 import { u as P } from "../../chunks/useSendComponentCallOnce.BI4daEvm.js";
-import { useRef as d, useState as U, useCallback as a } from "react";
-import "../../chunks/CDPReactProvider.CFWIUvzR.js";
-import { useOauthStatusModal as D } from "../OAuthStatusModal/index.js";
-import { Banner as H } from "../ui/Banner/index.js";
-import { useTimeout as M } from "../../hooks/useTimeout.js";
-import { getMessageFromUnknownError as v } from "../../utils/getMessageFromUnknownError.js";
+import { useRef as f, useState as U, useCallback as c } from "react";
+import "../../chunks/CDPReactProvider.BWInVuNJ.js";
+import { useOauthStatusModal as H } from "../OAuthStatusModal/index.js";
+import { Banner as M } from "../ui/Banner/index.js";
+import { useTimeout as V } from "../../hooks/useTimeout.js";
+import { getMessageFromUnknownError as j } from "../../utils/getMessageFromUnknownError.js";
 import "libphonenumber-js";
-import { toOAuthProviderType as V } from "../../utils/toOAuthProviderType.js";
-import { L as j, a as K } from "../../chunks/LinkAuthFlow.S1XbYaG5.js";
-import { u as ft } from "../../chunks/LinkAuthFlow.S1XbYaG5.js";
-import { LinkAuthFlowBackButton as W } from "./LinkAuthFlowBackButton.js";
-import { LinkAuthItem as Lt } from "./LinkAuthItem.js";
-import { LinkAuthItems as _t } from "./LinkAuthItems.js";
-import { LinkAuthProvider as $, useLinkAuthContext as x } from "./LinkAuthProvider.js";
-import { LinkAuthTitle as b } from "./LinkAuthTitle.js";
+import { toOAuthProviderType as D } from "../../utils/toOAuthProviderType.js";
+import { L as K, a as W } from "../../chunks/LinkAuthFlow.0FnIchwa.js";
+import { u as pt } from "../../chunks/LinkAuthFlow.0FnIchwa.js";
+import { LinkAuthFlowBackButton as $ } from "./LinkAuthFlowBackButton.js";
+import { LinkAuthItem as At } from "./LinkAuthItem.js";
+import { LinkAuthItems as Tt } from "./LinkAuthItems.js";
+import { LinkAuthProvider as b, useLinkAuthContext as x } from "./LinkAuthProvider.js";
+import { LinkAuthTitle as G } from "./LinkAuthTitle.js";
 import { methodToView as O } from "./utils.js";
-import '../../assets/LinkAuth.css';const G = "LinkAuth-module__header___0UuxP", J = "LinkAuth-module__error___XUo4W", k = {
+import '../../assets/LinkAuth.css';const J = "LinkAuth-module__header___0UuxP", X = "LinkAuth-module__error___XUo4W", k = {
   "link-auth": "LinkAuth-module__link-auth___kPJao",
-  header: G,
-  error: J
-}, X = ({ role: o = "alert", ...c }) => {
-  const { state: i } = x(), { error: s } = i;
-  return s ? /* @__PURE__ */ r(H, { variant: "error", role: o, ...c, children: s }) : null;
-}, q = ({ children: o, className: c = "", onLinkSuccess: i, ...s }) => {
-  const { linkOAuth: f } = N(), { persistOAuthState: p, cleanupOAuthState: L } = D(), { state: u, dispatch: n } = x(), { methodToLink: E } = u, A = d(null), l = d(null), { schedule: _ } = M(), S = O(E), T = d(S), [B, m] = U("left"), e = a(
+  header: J,
+  error: X
+}, q = ({ role: e = "alert", ...l }) => {
+  const { state: s } = x(), { error: a } = s;
+  return a ? /* @__PURE__ */ r(M, { variant: "error", role: e, ...l, children: a }) : null;
+}, z = ({ children: e, className: l = "", onLinkSuccess: s, ...a }) => {
+  const { linkOAuth: p } = I(), { persistOAuthState: L, cleanupOAuthState: A } = H(), { state: u, dispatch: n } = x(), { methodToLink: E } = u, _ = f(null), m = f(null), { schedule: T } = V(), S = O(E), i = f(S), [B, h] = U("slide-left"), o = c(
     (t) => {
-      T.current !== t && (T.current = t, A.current?.transition.toggle(t), t === "list" && n({ type: "RESET_STATE" }), (t === "email" || t === "sms") && n({ type: "LINK_AUTH_METHOD", payload: { method: t } }));
+      i.current !== t && (i.current = t, _.current?.transition.toggle(t), t === "list" && n({ type: "RESET_STATE" }));
     },
     [n]
-  ), F = a(() => {
-    if (m("right"), l.current?.canGoBack) {
-      l.current.goBack();
+  ), N = c(() => {
+    if (h(i.current === "siwe" ? "fade" : "slide-right"), m.current?.canGoBack) {
+      m.current.goBack();
       return;
     }
-    e("list");
-  }, [e]), R = a(() => {
-    m("left"), i?.(u.methodToLink), _(() => e("list"), 800);
-  }, [e, u.methodToLink, i, _]), w = a(
+    o("list");
+  }, [o]), R = c(() => {
+    h(i.current === "siwe" ? "fade" : "slide-left"), s?.(u.methodToLink), T(() => o("list"), 800);
+  }, [o, u.methodToLink, s, T]), v = c(
     async (t) => {
-      if (m("left"), t?.startsWith("oauth:")) {
-        const y = V(t);
+      const w = O(t);
+      if (h(i.current === "siwe" || w === "siwe" ? "fade" : "slide-left"), n({ type: "LINK_AUTH_METHOD", payload: { method: t } }), t?.startsWith("oauth:")) {
+        const y = D(t);
         if (y)
           try {
-            p(!0), await f(y);
+            L(!0), await p(y);
           } catch (C) {
-            L(), n({
+            A(), n({
               type: "LINK_AUTH_METHOD_ERROR",
-              payload: { error: v(C) }
+              payload: { error: j(C) }
             });
           }
       } else
-        e(O(t));
+        o(w);
     },
-    [f, e, p, L, n]
-  ), g = typeof o == "function" ? o(u) : o;
-  return /* @__PURE__ */ r("div", { className: `${k["link-auth"]} ${c}`, ...s, children: /* @__PURE__ */ h(
-    j,
+    [p, o, L, A, n]
+  ), g = typeof e == "function" ? e(u) : e;
+  return /* @__PURE__ */ r("div", { className: `${k["link-auth"]} ${l}`, ...a, children: /* @__PURE__ */ d(
+    K,
     {
-      direction: B,
-      onBack: F,
-      onLink: w,
+      transitionName: B,
+      onBack: N,
+      onLink: v,
       onLinkSuccess: R,
-      signInRef: l,
-      transitionRef: A,
+      signInRef: m,
+      transitionRef: _,
       children: [
         g,
-        !g && /* @__PURE__ */ h(I, { children: [
-          /* @__PURE__ */ h("div", { className: k.header, children: [
-            /* @__PURE__ */ r(b, {}),
-            /* @__PURE__ */ r(W, {})
+        !g && /* @__PURE__ */ d(F, { children: [
+          /* @__PURE__ */ d("div", { className: k.header, children: [
+            /* @__PURE__ */ r(G, {}),
+            /* @__PURE__ */ r($, {})
           ] }),
-          /* @__PURE__ */ r("div", { className: k.error, children: /* @__PURE__ */ r(X, {}) }),
-          /* @__PURE__ */ r(K, {})
+          /* @__PURE__ */ r("div", { className: k.error, children: /* @__PURE__ */ r(q, {}) }),
+          /* @__PURE__ */ r(W, {})
         ] })
       ]
     }
   ) });
-}, ht = (o) => (P("manage_auth"), /* @__PURE__ */ r($, { children: /* @__PURE__ */ r(q, { ...o }) }));
+}, dt = (e) => (P("manage_auth"), /* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(z, { ...e }) }));
 export {
-  ht as LinkAuth,
-  X as LinkAuthError,
-  K as LinkAuthFlow,
-  W as LinkAuthFlowBackButton,
-  Lt as LinkAuthItem,
-  _t as LinkAuthItems,
-  b as LinkAuthTitle,
+  dt as LinkAuth,
+  q as LinkAuthError,
+  W as LinkAuthFlow,
+  $ as LinkAuthFlowBackButton,
+  At as LinkAuthItem,
+  Tt as LinkAuthItems,
+  G as LinkAuthTitle,
   x as useLinkAuthContext,
-  ft as useLinkAuthFlow
+  pt as useLinkAuthFlow
 };

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

@@ -1,4 +1,9 @@
 import { AuthMethod } from '../CDPReactProvider';
+import { TransitionName } from '../ui/SwitchTransition';
+/**
+ * Transition names for the LinkAuthFlow
+ */
+export { type TransitionName as LinkTransitionName };
 /**
  * Representation of auth method
  *
@@ -56,7 +61,7 @@ export type LinkAuthAction = {
 /**
  * The views of the link auth flow.
  */
-export declare const LINK_AUTH_FLOW_VIEWS: readonly ["list", "email", "sms"];
+export declare const LINK_AUTH_FLOW_VIEWS: readonly ["list", "email", "sms", "siwe"];
 /**
  * The view of the link auth flow.
  */

package/dist/components/LinkAuth/types.js

@@ -1,5 +1,7 @@
-import "../../chunks/CDPReactProvider.CFWIUvzR.js";
-const t = ["list", "email", "sms"];
+import "../../chunks/CDPReactProvider.BWInVuNJ.js";
+import "react/jsx-runtime";
+import "react";
+const o = ["list", "email", "sms", "siwe"];
 export {
-  t as LINK_AUTH_FLOW_VIEWS
+  o as LINK_AUTH_FLOW_VIEWS
 };

package/dist/components/LinkAuth/utils.js

@@ -1,7 +1,7 @@
-import "../../chunks/CDPReactProvider.CFWIUvzR.js";
+import "../../chunks/CDPReactProvider.BWInVuNJ.js";
 import { LINK_AUTH_FLOW_VIEWS as i } from "./types.js";
-const t = (r) => i.includes(r), o = (r) => r && t(r) ? r : "list";
+const t = (r) => i.includes(r), n = (r) => r ? r.startsWith("siwe:") ? "siwe" : t(r) ? r : "list" : "list";
 export {
   t as isView,
-  o as methodToView
+  n as methodToView
 };

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

@@ -56,7 +56,7 @@ declare const LinkAuthModalTrigger: ({ children, className, label, ...props }: L
  *
  * @group Components
  */
-declare const LinkAuthModalContent: (props: LinkAuthModalContentProps) => import("react/jsx-runtime").JSX.Element;
+declare const LinkAuthModalContent: ({ onInteractOutside, ...props }: LinkAuthModalContentProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * A link auth modal component that wraps the {@link LinkAuth} component.
  *