@coinbase/cdp-react 0.0.57 → 0.0.60

package/dist/components/LinkAuth/index.js

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

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

@@ -0,0 +1,32 @@
+import { AuthMethod } from '../CDPReactProvider';
+export type LinkAuthMethod = {
+    isLinked: boolean;
+    method: AuthMethod;
+    userAlias: string;
+};
+export interface LinkAuthState {
+    authMethods: LinkAuthMethod[];
+    error: string | null;
+    isPending: boolean;
+    methodToLink: AuthMethod | null;
+}
+export type LinkAuthAction = {
+    type: "LINK_AUTH_METHOD";
+    payload: {
+        method: LinkAuthState["methodToLink"];
+    };
+} | {
+    type: "LINK_AUTH_METHOD_ERROR";
+    payload: {
+        error: LinkAuthState["error"];
+    };
+} | {
+    type: "SET_AUTH_METHODS";
+    payload: {
+        methods: LinkAuthState["authMethods"];
+    };
+} | {
+    type: "RESET_STATE";
+};
+export declare const LINK_AUTH_FLOW_VIEWS: readonly ["list", "email", "sms"];
+export type LinkAuthFlowView = (typeof LINK_AUTH_FLOW_VIEWS)[number];

package/dist/components/LinkAuth/types.js

@@ -0,0 +1,5 @@
+import "../CDPReactProvider/index.js";
+const t = ["list", "email", "sms"];
+export {
+  t as LINK_AUTH_FLOW_VIEWS
+};

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

@@ -0,0 +1,4 @@
+import { AuthMethod } from '../CDPReactProvider';
+import { LinkAuthFlowView } from './types';
+export declare const isView: (view: string) => view is LinkAuthFlowView;
+export declare const methodToView: (method: AuthMethod | null) => LinkAuthFlowView;

package/dist/components/LinkAuth/utils.js

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

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

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { AuthMethod } from '../CDPReactProvider';
+import { ButtonProps } from '../ui/Button';
+import { ModalContentProps } from '../ui/Modal';
+interface LinkAuthModalTriggerProps extends Partial<Pick<ButtonProps, "className" | "fullWidth" | "size" | "style" | "variant">> {
+    children?: ReactNode;
+    label?: ReactNode;
+}
+interface LinkAuthModalContentProps extends ModalContentProps {
+    onLinkSuccess?: (method: string) => void;
+}
+interface LinkAuthModalProps {
+    children?: ReactNode;
+    open?: boolean;
+    setIsOpen?: (value: boolean) => void;
+    onLinkSuccess?: (method: AuthMethod | null) => void;
+}
+declare const LinkAuthModalTrigger: ({ children, className, label, ...props }: LinkAuthModalTriggerProps) => import("react/jsx-runtime").JSX.Element;
+declare const LinkAuthModalContent: (props: LinkAuthModalContentProps) => import("react/jsx-runtime").JSX.Element;
+declare const LinkAuthModal: ({ children, open, setIsOpen, onLinkSuccess }: LinkAuthModalProps) => import("react/jsx-runtime").JSX.Element;
+export { LinkAuthModal, LinkAuthModalContent, LinkAuthModalTrigger, type LinkAuthModalProps, type LinkAuthModalContentProps, type LinkAuthModalTriggerProps, };

package/dist/components/LinkAuthModal/index.js

@@ -0,0 +1,69 @@
+import { jsx as o, jsxs as n, Fragment as d } from "react/jsx-runtime";
+import { u as p } from "../../chunks/useSendComponentCallOnce.BHZMuo6E.js";
+import { createContext as L, useMemo as f, useContext as g } from "react";
+import { c as A } from "../../chunks/lite.1fxw3LjI.js";
+import "../CDPReactProvider/index.js";
+import { LinkAuth as C, LinkAuthError as x } from "../LinkAuth/index.js";
+import { Button as m } from "../ui/Button/index.js";
+import { Modal as b, ModalContent as v, ModalTitle as w, ModalClose as N, ModalTrigger as T } from "../ui/Modal/index.js";
+import { VisuallyHidden as y } from "../ui/VisuallyHidden/index.js";
+import { IconXMark as F } from "../../icons/IconXMark.js";
+import { childrenHasComponent as c } from "../../utils/childrenHasComponent.js";
+import { LinkAuthTitle as H } from "../LinkAuth/LinkAuthTitle.js";
+import { LinkAuthFlowBackButton as j } from "../LinkAuth/LinkAuthFlowBackButton.js";
+import { L as B } from "../../chunks/LinkAuthFlow.BZtyaLN-.js";
+import '../../assets/LinkAuthModal.css';const S = "LinkAuthModal-module__header___qoco6", D = "LinkAuthModal-module__error___Srl7H", E = "LinkAuthModal-module__trigger___aHDfG", r = {
+  header: S,
+  error: D,
+  "close-icon": "LinkAuthModal-module__close-icon___Fe02C",
+  "close-button": "LinkAuthModal-module__close-button___x6j3c",
+  trigger: E
+}, h = L(null), O = () => {
+  const e = g(h);
+  if (!e)
+    throw new Error("useLinkAuthModalContext must be used within a LinkAuthModal");
+  return e;
+}, u = ({
+  children: e,
+  className: t = "",
+  label: l,
+  ...i
+}) => /* @__PURE__ */ o(T, { asChild: !0, children: e || /* @__PURE__ */ o(m, { className: A(r.trigger, t), ...i, children: l || "Link accounts" }) }), a = (e) => {
+  const { onLinkSuccess: t } = O();
+  return /* @__PURE__ */ n(v, { "aria-describedby": void 0, ...e, children: [
+    /* @__PURE__ */ o(y, { children: /* @__PURE__ */ o(w, { children: "Link a profile" }) }),
+    /* @__PURE__ */ n(C, { onLinkSuccess: t, children: [
+      /* @__PURE__ */ n("div", { className: r.header, children: [
+        /* @__PURE__ */ o(H, {}),
+        /* @__PURE__ */ o(j, {}),
+        /* @__PURE__ */ o(N, { asChild: !0, children: /* @__PURE__ */ o(
+          m,
+          {
+            className: r["close-button"],
+            "aria-label": "Close",
+            size: "md",
+            variant: "transparentSecondary",
+            children: /* @__PURE__ */ o(F, { className: r["close-icon"] })
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ o("div", { className: r.error, children: /* @__PURE__ */ o(x, {}) }),
+      /* @__PURE__ */ o(B, {})
+    ] })
+  ] });
+}, Z = ({ children: e, open: t, setIsOpen: l, onLinkSuccess: i }) => {
+  p("manage_auth_modal");
+  const _ = e ? c(e, u) : !1, s = e ? c(e, a) : !1, k = !_ && !s, M = f(() => ({ onLinkSuccess: i }), [i]);
+  return /* @__PURE__ */ o(h.Provider, { value: M, children: /* @__PURE__ */ o(b, { open: t, onOpenChange: l, children: k ? /* @__PURE__ */ n(d, { children: [
+    /* @__PURE__ */ o(u, { children: e }),
+    /* @__PURE__ */ o(a, {})
+  ] }) : /* @__PURE__ */ n(d, { children: [
+    e,
+    !s && /* @__PURE__ */ o(a, {})
+  ] }) }) });
+};
+export {
+  Z as LinkAuthModal,
+  a as LinkAuthModalContent,
+  u as LinkAuthModalTrigger
+};

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

@@ -1,6 +1,12 @@
+export declare const OAUTH_PROVIDER_SESSION_STORAGE_KEY = "cdp-react-sign-in-with-oauth-provider-name";
+export declare const OAUTH_IS_ACCOUNT_LINK_SESSION_STORAGE_KEY = "cdp-react-sign-in-with-oauth-is-account-link";
 type OAuthStatusModalContentProps = {
+    isAccountLink?: boolean;
     handleClose: () => void;
 };
+export declare const useOauthStatusModal: () => {
+    persistOAuthState: (isAccountLink?: boolean) => void;
+};
 export declare const OAuthStatusModal: () => import("react/jsx-runtime").JSX.Element;
-export declare const OAuthStatusModalContent: ({ handleClose }: OAuthStatusModalContentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const OAuthStatusModalContent: ({ isAccountLink, handleClose, }: OAuthStatusModalContentProps) => import("react/jsx-runtime").JSX.Element;
 export default OAuthStatusModal;

package/dist/components/OAuthStatusModal/index.js

@@ -1,90 +1,111 @@
-import { jsx as s, jsxs as e, Fragment as l } from "react/jsx-runtime";
+import { jsx as s, jsxs as r, Fragment as S } from "react/jsx-runtime";
 import "@coinbase/cdp-core";
-import { useOAuthState as O } from "@coinbase/cdp-hooks";
-import { u as I } from "../../chunks/useSendComponentCallOnce.BHZMuo6E.js";
-import { useState as C, useEffect as u, useRef as g, useCallback as b } from "react";
-import { useProviderName as v } from "../CDPReactProvider/index.js";
-import { OAUTH_PROVIDER_SESSION_STORAGE_KEY as S } from "../SignIn/hooks/useSignInWithOAuth.js";
-import { CoinbaseFooter as T } from "../ui/CoinbaseFooter/index.js";
-import { LoadingSpinner as $ } from "../ui/LoadingSpinner/index.js";
-import { Modal as w, ModalContent as E, ModalTitle as P, ModalDescription as R } from "../ui/Modal/index.js";
-import { SwitchFadeTransition as y } from "../ui/SwitchFadeTransition/index.js";
-import { VisuallyHidden as f } from "../ui/VisuallyHidden/index.js";
-import { useTimer as k } from "../../hooks/useTimer.js";
-import { IconAppleLogo as x } from "../../icons/IconAppleLogo.js";
-import { IconCheck as L } from "../../icons/IconCheck.js";
-import { IconGoogleColorLogo as U } from "../../icons/IconGoogleColorLogo.js";
-import { IconXLogo as q } from "../../icons/IconXLogo.js";
-import { IconXMark as G } from "../../icons/IconXMark.js";
-import { capitalize as d } from "../../utils/capitalize.js";
-import '../../assets/OAuthStatusModal.css';const H = "OAuthStatusModal-module__status___vU6x7", K = "OAuthStatusModal-module__graphic___2fKoa", j = "OAuthStatusModal-module__pad___oooMz", D = "OAuthStatusModal-module__spinner___Q3dYq", F = "OAuthStatusModal-module__icon___Lj5Gf", Y = "OAuthStatusModal-module__subhead___Pg9GI", z = "OAuthStatusModal-module__description___0qOZY", V = "OAuthStatusModal-module__ring___mKwSb", W = "OAuthStatusModal-module__invisible___IeRd0", t = {
+import { useOAuthState as I } from "@coinbase/cdp-hooks";
+import { u as b } from "../../chunks/useSendComponentCallOnce.BHZMuo6E.js";
+import { useCallback as N, useState as O, useEffect as h, useRef as A } from "react";
+import { useProviderName as $ } from "../CDPReactProvider/index.js";
+import { CoinbaseFooter as k } from "../ui/CoinbaseFooter/index.js";
+import { LoadingSpinner as w } from "../ui/LoadingSpinner/index.js";
+import { Modal as E, ModalContent as L, ModalTitle as y, ModalDescription as R } from "../ui/Modal/index.js";
+import { SwitchFadeTransition as P } from "../ui/SwitchFadeTransition/index.js";
+import { VisuallyHidden as M } from "../ui/VisuallyHidden/index.js";
+import { useTimer as U } from "../../hooks/useTimer.js";
+import { IconAppleLogo as K } from "../../icons/IconAppleLogo.js";
+import { IconCheck as x } from "../../icons/IconCheck.js";
+import { IconGoogleColorLogo as G } from "../../icons/IconGoogleColorLogo.js";
+import { IconXLogo as H } from "../../icons/IconXLogo.js";
+import { IconXMark as q } from "../../icons/IconXMark.js";
+import { capitalize as _ } from "../../utils/capitalize.js";
+import '../../assets/OAuthStatusModal.css';const Y = "OAuthStatusModal-module__status___vU6x7", j = "OAuthStatusModal-module__graphic___2fKoa", D = "OAuthStatusModal-module__pad___oooMz", F = "OAuthStatusModal-module__spinner___Q3dYq", z = "OAuthStatusModal-module__icon___Lj5Gf", V = "OAuthStatusModal-module__subhead___Pg9GI", W = "OAuthStatusModal-module__description___0qOZY", X = "OAuthStatusModal-module__ring___mKwSb", J = "OAuthStatusModal-module__invisible___IeRd0", t = {
   "oauth-status-modal": "OAuthStatusModal-module__oauth-status-modal___I69Ii",
   "transition-wrapper": "OAuthStatusModal-module__transition-wrapper___TmPRh",
-  status: H,
-  graphic: K,
-  pad: j,
-  spinner: D,
-  icon: F,
+  status: Y,
+  graphic: j,
+  pad: D,
+  spinner: F,
+  icon: z,
   "icon-success": "OAuthStatusModal-module__icon-success___gqMWr",
   "icon-error": "OAuthStatusModal-module__icon-error___psI7m",
-  subhead: Y,
-  description: z,
-  ring: V,
+  subhead: V,
+  description: W,
+  ring: X,
   "ring-success": "OAuthStatusModal-module__ring-success___unyM9",
   "ring-error": "OAuthStatusModal-module__ring-error___OsgqU",
-  invisible: W
-}, X = ["pending", "success", "error"], Mt = () => {
-  I("oauth_status_modal");
-  const [n, o] = C(!1), { oauthState: r } = O(), a = v();
-  return u(() => {
-    if (r?.status === "pending" || r?.status === "error" || r?.status === "success") {
-      const c = sessionStorage.getItem(S);
-      if (c === null || c !== a)
+  invisible: J
+}, p = "cdp-react-sign-in-with-oauth-provider-name", g = "cdp-react-sign-in-with-oauth-is-account-link", Q = ["pending", "success", "error"], It = () => {
+  const n = $() || "";
+  return { persistOAuthState: N(
+    (e) => {
+      sessionStorage.setItem(p, n), sessionStorage.setItem(
+        g,
+        e ? "true" : "false"
+      );
+    },
+    [n]
+  ) };
+}, Nt = () => {
+  b("oauth_status_modal");
+  const [n, o] = O(!1), { oauthState: e } = I(), [d, a] = O(!1), c = $(), u = e?.providerType || "google";
+  return h(() => {
+    if (e?.status === "pending" || e?.status === "error" || e?.status === "success") {
+      const l = sessionStorage.getItem(p);
+      if (l === null || l !== c)
         return;
-      sessionStorage.removeItem(S), o(!0);
+      sessionStorage.removeItem(p), o(!0);
+      const m = sessionStorage.getItem(g) === "true";
+      sessionStorage.removeItem(g), a(m);
     }
-  }, [r?.status, a]), /* @__PURE__ */ s(w, { open: n, onOpenChange: o, children: /* @__PURE__ */ e(E, { children: [
-    /* @__PURE__ */ s(f, { children: /* @__PURE__ */ s(P, { children: "OAuth Status" }) }),
-    /* @__PURE__ */ s(f, { children: /* @__PURE__ */ e(R, { children: [
-      "Sign in with ",
-      d(a),
+  }, [e?.status, c]), /* @__PURE__ */ s(E, { open: n, onOpenChange: o, children: /* @__PURE__ */ r(L, { children: [
+    /* @__PURE__ */ s(M, { children: /* @__PURE__ */ s(y, { children: "OAuth Status" }) }),
+    /* @__PURE__ */ s(M, { children: /* @__PURE__ */ r(R, { children: [
+      d ? `Linking your ${u} account` : `Signing in with ${u}`,
       " ",
-      r?.status ? `${r?.status === "success" ? "successful" : r?.status === "error" ? "failed" : "pending"}` : ""
+      e?.status ? `${e?.status === "success" ? "successful" : e?.status === "error" ? "failed" : "pending"}` : ""
     ] }) }),
-    /* @__PURE__ */ s(J, { handleClose: () => o(!1) })
+    /* @__PURE__ */ s(Z, { isAccountLink: d, handleClose: () => o(!1) })
   ] }) });
-}, J = ({ handleClose: n }) => {
-  const { oauthState: o } = O(), r = o?.providerType || "google", { timeRemaining: a, start: c, reset: m } = k(), _ = g(null), p = g(null), A = 250, h = b((i) => {
-    p.current === i || i === void 0 || (p.current = i, _.current?.transition.toggle(i));
+}, Z = ({
+  isAccountLink: n,
+  handleClose: o
+}) => {
+  const { oauthState: e } = I(), d = e?.providerType || "google", { timeRemaining: a, start: c, reset: u } = U(), l = A(null), m = A(null), v = 250, f = N((i) => {
+    m.current === i || i === void 0 || (m.current = i, l.current?.transition.toggle(i));
   }, []);
-  return u(() => {
-    h(o?.status), o?.status === "success" && c(3);
-  }, [o?.status, h, c]), u(() => {
-    a !== null && a <= 0 && (m(), n());
-  }, [a, m, n]), /* @__PURE__ */ e("div", { className: t["oauth-status-modal"], children: [
+  return h(() => {
+    f(e?.status), e?.status === "success" && c(3);
+  }, [e?.status, f, c]), h(() => {
+    a !== null && a <= 0 && (u(), o());
+  }, [a, u, o]), /* @__PURE__ */ r("div", { className: t["oauth-status-modal"], children: [
     /* @__PURE__ */ s(
-      y,
+      P,
       {
         animateHeight: !1,
-        timeout: A,
-        items: X,
+        timeout: v,
+        items: Q,
         initialEntered: !1,
-        transitionRef: _,
+        transitionRef: l,
         className: t["transition-wrapper"],
-        children: ({ itemKey: i, ...M }) => {
-          const N = tt[i];
-          return /* @__PURE__ */ s("div", { ...M, className: t.status, children: /* @__PURE__ */ s(N, { timeRemaining: a, provider: r }) });
+        children: ({ itemKey: i, ...C }) => {
+          const T = et[i];
+          return /* @__PURE__ */ s("div", { ...C, className: t.status, children: /* @__PURE__ */ s(
+            T,
+            {
+              isAccountLink: n,
+              timeRemaining: a,
+              provider: d
+            }
+          ) });
         }
       }
     ),
-    /* @__PURE__ */ s(T, {})
+    /* @__PURE__ */ s(k, {})
   ] });
-}, Q = ({ provider: n }) => {
-  const o = st[n];
-  return /* @__PURE__ */ e(l, { children: [
-    /* @__PURE__ */ e("div", { className: t.graphic, children: [
+}, B = ({ isAccountLink: n, provider: o }) => {
+  const e = ot[o];
+  return /* @__PURE__ */ r(S, { children: [
+    /* @__PURE__ */ r("div", { className: t.graphic, children: [
       /* @__PURE__ */ s(
-        $,
+        w,
         {
           strokeWidth: "5%",
           staticStroke: !0,
@@ -92,45 +113,46 @@ import '../../assets/OAuthStatusModal.css';const H = "OAuthStatusModal-module__s
           className: t.spinner
         }
       ),
-      o && /* @__PURE__ */ s("span", { className: t.icon, children: /* @__PURE__ */ s(o, {}) })
-    ] }),
-    /* @__PURE__ */ e("p", { className: t.subhead, children: [
-      "Signing in with ",
-      d(n)
+      e && /* @__PURE__ */ s("span", { className: t.icon, children: /* @__PURE__ */ s(e, {}) })
     ] }),
+    /* @__PURE__ */ s("p", { className: t.subhead, children: n ? `Linking your ${_(o)} account` : `Signing in with ${_(o)}` }),
     /* @__PURE__ */ s("p", { className: t.description, children: "Just a moment..." })
   ] });
-}, Z = ({ timeRemaining: n, provider: o }) => /* @__PURE__ */ e(l, { children: [
-  /* @__PURE__ */ e("div", { className: t.graphic, children: [
+}, tt = ({
+  isAccountLink: n,
+  timeRemaining: o,
+  provider: e
+}) => /* @__PURE__ */ r(S, { children: [
+  /* @__PURE__ */ r("div", { className: t.graphic, children: [
     /* @__PURE__ */ s("span", { className: `${t.ring} ${t["ring-success"]}` }),
-    /* @__PURE__ */ s("span", { className: `${t.icon} ${t["icon-success"]}`, children: /* @__PURE__ */ s(L, {}) })
-  ] }),
-  /* @__PURE__ */ e("p", { className: t.subhead, children: [
-    "Signed in with ",
-    d(o)
+    /* @__PURE__ */ s("span", { className: `${t.icon} ${t["icon-success"]}`, children: /* @__PURE__ */ s(x, {}) })
   ] }),
-  /* @__PURE__ */ e("p", { className: `${t.description} ${n === null ? t.invisible : ""}`, children: [
+  /* @__PURE__ */ s("p", { className: t.subhead, children: n ? `${_(e)} account linked` : `Signed in with ${_(e)}` }),
+  /* @__PURE__ */ r("p", { className: `${t.description} ${o === null ? t.invisible : ""}`, children: [
     "This window will automatically close in ",
-    n ?? "soon"
+    o ?? "soon"
   ] })
-] }), B = () => /* @__PURE__ */ e(l, { children: [
-  /* @__PURE__ */ e("div", { className: `${t.graphic} ${t.pad}`, children: [
+] }), st = ({ isAccountLink: n }) => /* @__PURE__ */ r(S, { children: [
+  /* @__PURE__ */ r("div", { className: `${t.graphic} ${t.pad}`, children: [
     /* @__PURE__ */ s("span", { className: `${t.ring} ${t["ring-error"]}` }),
-    /* @__PURE__ */ s("span", { className: `${t.icon} ${t["icon-error"]}`, children: /* @__PURE__ */ s(G, {}) })
+    /* @__PURE__ */ s("span", { className: `${t.icon} ${t["icon-error"]}`, children: /* @__PURE__ */ s(q, {}) })
   ] }),
-  /* @__PURE__ */ s("p", { className: t.subhead, children: "Sign in failed" }),
+  /* @__PURE__ */ s("p", { className: t.subhead, children: n ? "Account linking failed" : "Sign in failed" }),
   /* @__PURE__ */ s("p", { className: t.description, children: "Something went wrong. Please try again." })
-] }), tt = {
-  pending: Q,
-  success: Z,
-  error: B
-}, st = {
-  google: U,
-  apple: x,
-  x: q
+] }), et = {
+  pending: B,
+  success: tt,
+  error: st
+}, ot = {
+  google: G,
+  apple: K,
+  x: H
 };
 export {
-  Mt as OAuthStatusModal,
-  J as OAuthStatusModalContent,
-  Mt as default
+  g as OAUTH_IS_ACCOUNT_LINK_SESSION_STORAGE_KEY,
+  p as OAUTH_PROVIDER_SESSION_STORAGE_KEY,
+  Nt as OAuthStatusModal,
+  Z as OAuthStatusModalContent,
+  Nt as default,
+  It as useOauthStatusModal
 };

package/dist/components/SignIn/SignInAuthMethodButtons.js

@@ -1,74 +1,76 @@
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { useCallback as I, useMemo as v } from "react";
-import { useAppConfig as y } from "../CDPReactProvider/index.js";
-import { useSignInWithOAuth as C } from "./hooks/useSignInWithOAuth.js";
-import { useSignInContext as S } from "./SignInProvider.js";
-import { Button as M } from "../ui/Button/index.js";
-import { ServerError as k } from "../ui/ServerError/index.js";
-import { IconAppleLogo as B } from "../../icons/IconAppleLogo.js";
-import { IconEnvelope as E } from "../../icons/IconEnvelope.js";
-import { IconGoogleLogo as P } from "../../icons/IconGoogleLogo.js";
-import { IconPhone as O } from "../../icons/IconPhone.js";
-import { IconXLogo as w } from "../../icons/IconXLogo.js";
-import { toOAuthProviderType as _ } from "../../utils/toOAuthProviderType.js";
-import '../../assets/SignInAuthMethodButtons.css';const x = "SignInAuthMethodButtons-module__divider___zphEh", o = {
+import { useCallback as v, useMemo as y } from "react";
+import "../CDPReactProvider/index.js";
+import { useSignInWithOAuth as S } from "./hooks/useSignInWithOAuth.js";
+import { useSignInContext as _ } from "./SignInProvider.js";
+import { Button as C } from "../ui/Button/index.js";
+import { ServerError as M } from "../ui/ServerError/index.js";
+import { IconAppleLogo as k } from "../../icons/IconAppleLogo.js";
+import { IconEnvelope as B } from "../../icons/IconEnvelope.js";
+import { IconGoogleLogo as E } from "../../icons/IconGoogleLogo.js";
+import { IconPhone as P } from "../../icons/IconPhone.js";
+import { IconXLogo as O } from "../../icons/IconXLogo.js";
+import { toOAuthProviderType as b } from "../../utils/toOAuthProviderType.js";
+import '../../assets/SignInAuthMethodButtons.css';const w = "SignInAuthMethodButtons-module__divider___zphEh", o = {
   "auth-method-buttons": "SignInAuthMethodButtons-module__auth-method-buttons___jYEH7",
   "auth-btn": "SignInAuthMethodButtons-module__auth-btn___o1a09",
   "auth-btn-icon": "SignInAuthMethodButtons-module__auth-btn-icon___VjvFY",
   "auth-btn-label": "SignInAuthMethodButtons-module__auth-btn-label___mEWd3",
-  divider: x
-}, b = {
+  divider: w
+}, g = {
   email: {
     label: "Continue with email",
-    icon: /* @__PURE__ */ n(E, {})
+    icon: /* @__PURE__ */ n(B, {})
   },
   sms: {
     label: "Continue with phone",
-    icon: /* @__PURE__ */ n(O, {})
+    icon: /* @__PURE__ */ n(P, {})
   },
   "oauth:google": {
     label: "Continue with Google",
-    icon: /* @__PURE__ */ n(P, {})
+    icon: /* @__PURE__ */ n(E, {})
   },
   "oauth:apple": {
     label: "Continue with Apple",
-    icon: /* @__PURE__ */ n(B, {})
+    icon: /* @__PURE__ */ n(k, {})
   },
   "oauth:x": {
     label: "Continue with X",
-    icon: /* @__PURE__ */ n(w, {})
+    icon: /* @__PURE__ */ n(O, {})
   }
-}, V = ({ activeMethod: u }) => {
-  const { authMethods: a } = y(), {
+}, U = ({ activeMethod: u }) => {
+  const {
+    state: { authMethods: a }
+  } = _(), {
     signInWithOAuth: l,
     isPending: s,
     error: h,
     oauthProvider: c
-  } = C(), m = I(
+  } = S(), m = v(
     async (t) => {
-      const e = _(t);
+      const e = b(t);
       e && l(e);
     },
     [l]
-  ), { dispatch: p } = S(), i = v(() => (a || ["email"]).map((t) => {
-    if (!b[t])
+  ), { dispatch: d } = _(), i = y(() => (a || ["email"]).map((t) => {
+    if (!g[t])
       return null;
-    const { label: e, icon: g } = b[t], d = t.startsWith("oauth:"), f = d ? () => m(t) : () => p({ type: "SET_AUTH_METHOD", payload: { authMethod: t } }), A = d && c.current === _(t) && s;
+    const { label: e, icon: f } = g[t], p = t.startsWith("oauth:"), A = p ? () => m(t) : () => d({ type: "SET_AUTH_METHOD", payload: { authMethod: t } }), I = p && c.current === b(t) && s;
     return {
       key: t,
       label: e,
-      icon: g,
-      onClick: f,
-      isPending: A
+      icon: f,
+      onClick: A,
+      isPending: I
     };
-  }).filter((t) => t !== null), [a, p, m, s, c]);
+  }).filter((t) => t !== null), [a, d, m, s, c]);
   return !i.length || i.length === 1 && i[0].key === u ? null : /* @__PURE__ */ r("div", { className: o["auth-method-buttons"], children: [
     /* @__PURE__ */ r("div", { className: o.divider, children: [
       /* @__PURE__ */ n("hr", {}),
       /* @__PURE__ */ n("span", { children: "or" })
     ] }),
     i.map((t) => t.key === u ? null : /* @__PURE__ */ r(
-      M,
+      C,
       {
         "aria-label": t.ariaLabel,
         className: o["auth-btn"],
@@ -83,9 +85,9 @@ import '../../assets/SignInAuthMethodButtons.css';const x = "SignInAuthMethodBut
       },
       t.key
     )),
-    h && /* @__PURE__ */ n(k, { error: h })
+    h && /* @__PURE__ */ n(M, { error: h })
   ] });
 };
 export {
-  V as SignInAuthMethodButtons
+  U as SignInAuthMethodButtons
 };