@coinbase/cdp-react 0.0.3 → 0.0.5

package/dist/assets/AuthButton.css

@@ -0,0 +1 @@
+.AuthButton-module__loading___JpDqi{border-radius:9999em;height:3.5em;width:7.5em}

package/dist/assets/Button.css

@@ -1 +1 @@
-.Button-module__btn___Fx11X{--cdp-web-button-ring-color: transparent;--cdp-web-button-ring-width: 2px;--cdp-web-button-ring-inset-color: transparent;--cdp-web-button-ring-inset-width: 2px;box-shadow:inset 0 0 0 var(--cdp-web-button-ring-inset-width) var(--cdp-web-button-ring-inset-color),0 0 0 var(--cdp-web-button-ring-width) var(--cdp-web-button-ring-color);display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:1em;border-radius:9999em;border:0;background-color:transparent;color:var(--cdp-web-colors-text);font-size:1em;font-weight:500;line-height:1.5;text-decoration:none;cursor:pointer;transition:all .15s ease-in-out;-webkit-user-select:none;user-select:none}.Button-module__primary___s1sM6{background-color:var(--cdp-web-colors-primary);color:var(--cdp-web-colors-primaryText)}.Button-module__primary___s1sM6:hover{background-color:var(--cdp-web-colors-primaryHoverBackground);color:var(--cdp-web-colors-primaryHoverText)}.Button-module__primary___s1sM6:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-primaryFocusRing);--cdp-web-button-ring-inset-color: var(--cdp-web-colors-background);outline:none}.Button-module__secondary___R0waJ{background-color:var(--cdp-web-colors-secondary);color:var(--cdp-web-colors-secondaryText)}.Button-module__secondary___R0waJ:hover{background-color:var(--cdp-web-colors-secondaryHoverBackground);color:var(--cdp-web-colors-secondaryHoverText)}.Button-module__secondary___R0waJ:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-secondaryFocusRing);--cdp-web-button-ring-inset-color: var(--cdp-web-colors-background);outline:none}.Button-module__transparentPrimary___o7JPs{background-color:transparent;color:var(--cdp-web-colors-linkText)}.Button-module__transparentPrimary___o7JPs:hover{color:var(--cdp-web-colors-linkHover)}.Button-module__transparentPrimary___o7JPs:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-linkText);outline:none}.Button-module__transparentSecondary___4ehOz{background-color:transparent;color:var(--cdp-web-colors-linkSecondaryText)}.Button-module__transparentSecondary___4ehOz:hover{color:var(--cdp-web-colors-linkSecondaryHover)}.Button-module__transparentSecondary___4ehOz:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-linkSecondaryText);outline:none}
+.Button-module__btn___Fx11X{--cdp-web-button-ring-color: transparent;--cdp-web-button-ring-width: 2px;--cdp-web-button-ring-inset-color: transparent;--cdp-web-button-ring-inset-width: 2px;box-sizing:border-box;box-shadow:inset 0 0 0 var(--cdp-web-button-ring-inset-width) var(--cdp-web-button-ring-inset-color),0 0 0 var(--cdp-web-button-ring-width) var(--cdp-web-button-ring-color);display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:1em;border-radius:9999em;border:0;background-color:transparent;color:var(--cdp-web-colors-text);font-size:1em;font-weight:500;line-height:1.5;text-decoration:none;cursor:pointer;transition:all .15s ease-in-out;-webkit-user-select:none;user-select:none}.Button-module__primary___s1sM6{background-color:var(--cdp-web-colors-primary);color:var(--cdp-web-colors-primaryText)}.Button-module__primary___s1sM6:hover{background-color:var(--cdp-web-colors-primaryHoverBackground);color:var(--cdp-web-colors-primaryHoverText)}.Button-module__primary___s1sM6:focus{outline:none}.Button-module__primary___s1sM6:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-primaryFocusRing);--cdp-web-button-ring-inset-color: var(--cdp-web-colors-background);outline:none}.Button-module__secondary___R0waJ{background-color:var(--cdp-web-colors-secondary);color:var(--cdp-web-colors-secondaryText)}.Button-module__secondary___R0waJ:hover{background-color:var(--cdp-web-colors-secondaryHoverBackground);color:var(--cdp-web-colors-secondaryHoverText)}.Button-module__secondary___R0waJ:focus{outline:none}.Button-module__secondary___R0waJ:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-secondaryFocusRing);--cdp-web-button-ring-inset-color: var(--cdp-web-colors-background);outline:none}.Button-module__transparentPrimary___o7JPs{background-color:transparent;color:var(--cdp-web-colors-linkText)}.Button-module__transparentPrimary___o7JPs:hover{color:var(--cdp-web-colors-linkHover)}.Button-module__transparentPrimary___o7JPs:focus{outline:none}.Button-module__transparentPrimary___o7JPs:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-linkText);outline:none}.Button-module__transparentSecondary___4ehOz{background-color:transparent;color:var(--cdp-web-colors-linkSecondaryText)}.Button-module__transparentSecondary___4ehOz:hover{color:var(--cdp-web-colors-linkSecondaryHover)}.Button-module__transparentSecondary___4ehOz:focus{outline:none}.Button-module__transparentSecondary___4ehOz:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-linkSecondaryText);outline:none}

package/dist/assets/Input.css

@@ -1 +1 @@
-.Input-module__input___WjT81{--cdp-web-input-ring-width: 1px;--cdp-web-input-ring-color: var(--cdp-web-colors-inputBorder);font-size:1em;padding:.75em;border-radius:.5em;border:1px solid transparent;background-color:var(--cdp-web-colors-inputBackground);box-shadow:0 0 0 var(--cdp-web-input-ring-width) var(--cdp-web-input-ring-color);color:var(--cdp-web-colors-inputText);transition:all .15s ease-in-out;width:100%}.Input-module__input___WjT81::placeholder{color:var(--cdp-web-colors-inputPlaceholder)}.Input-module__input___WjT81:focus-visible{outline:none;--cdp-web-input-ring-color: var(--cdp-web-colors-inputFocusBorder);--cdp-web-input-ring-width: 2px}.Input-module__input___WjT81[aria-invalid=true]{--cdp-web-input-ring-color: var(--cdp-web-colors-error)}
+.Input-module__input___WjT81{--cdp-web-input-ring-width: 1px;--cdp-web-input-ring-color: var(--cdp-web-colors-inputBorder);box-sizing:border-box;font-size:1em;padding:.75em;border-radius:.5em;border:1px solid transparent;background-color:var(--cdp-web-colors-inputBackground);box-shadow:0 0 0 var(--cdp-web-input-ring-width) var(--cdp-web-input-ring-color);color:var(--cdp-web-colors-inputText);transition:all .15s ease-in-out;width:100%}.Input-module__input___WjT81::placeholder{color:var(--cdp-web-colors-inputPlaceholder)}.Input-module__input___WjT81:focus-visible{outline:none;--cdp-web-input-ring-color: var(--cdp-web-colors-inputFocusBorder);--cdp-web-input-ring-width: 2px}.Input-module__input___WjT81[aria-invalid=true]{--cdp-web-input-ring-color: var(--cdp-web-colors-error)}

package/dist/assets/LoadingSkeleton.css

@@ -0,0 +1 @@
+.LoadingSkeleton-module__loading___ezIkq{animation:LoadingSkeleton-module__pulse___a9tGO 2s cubic-bezier(.4,0,.6,1) infinite;background-color:var(--cdp-web-colors-backgroundSkeleton);cursor:progress}@keyframes LoadingSkeleton-module__pulse___a9tGO{50%{opacity:.5}}

package/dist/assets/SignIn.css

@@ -1 +1 @@
-.SignIn-module__signIn___cS7KU{border-radius:.75em;font:var(--cdp-web-fontSizeBase) / 1.5 var(--cdp-web-fontFamily-sans);background-color:var(--cdp-web-colors-background);color:var(--cdp-web-colors-text);display:flex;flex-direction:column;gap:1em;max-width:38.25em;padding:1em 2em;width:100%}.SignIn-module__heading___nzF-H{font-size:1.75em;line-height:1.29;margin:0}.SignIn-module__description___6bRpF{color:var(--cdp-web-colors-textSecondary);margin:0}.SignIn-module__medium___rfGKj{font-weight:500}.SignIn-module__form___MXCq6{display:flex;flex-direction:column;gap:1em}.SignIn-module__logo___9j5Y-{display:block;margin:0;width:64px;height:64px;border-radius:9999em;object-fit:cover}.SignIn-module__formFooter___Rasrs{display:flex;flex-flow:column nowrap;align-items:stretch;justify-content:center;gap:.5em;min-height:1.5em}.SignIn-module__serverStateWrapper___GML6w{min-height:1.5em}.SignIn-module__loadingSpinner___JnMDX{color:var(--cdp-web-colors-linkText);display:block;margin:0 auto}.SignIn-module__formFooter___Rasrs button{width:100%}.SignIn-module__serverError___p4Z3K{justify-content:center}.SignIn-module__resetTimer___s-bUu{color:var(--cdp-web-colors-textSecondary);font-size:.875em;font-weight:500;line-height:1em;padding:1.5em 0;text-align:center}.SignIn-module__resetTimer___s-bUu p{margin:0}.SignIn-module__successIcon___2a7me{color:var(--cdp-web-colors-success);display:block;height:4em;width:4em}.SignIn-module__footer___3Gkbc{color:var(--cdp-web-colors-textSecondary);display:flex;align-items:center;justify-content:center;gap:.5em;font-size:.75em;line-height:1;padding:.5em 2em 1em}.SignIn-module__coinbaseIcon___cOnQb{color:var(--cdp-web-colors-linkText);height:1em;width:auto}.SignIn-module__footer___3Gkbc p{display:flex;align-items:center;gap:.25em;margin:0}.SignIn-module__hr___WFRgK{border:0;border-top:1px solid var(--cdp-web-colors-border);width:100%}
+.SignIn-module__signIn___cS7KU{border-radius:.75em;box-sizing:border-box;font:var(--cdp-web-fontSizeBase) / 1.5 var(--cdp-web-fontFamily-sans);background-color:var(--cdp-web-colors-background);color:var(--cdp-web-colors-text);display:flex;flex-direction:column;gap:1em;max-width:38.25em;padding:1em 2em;width:100%}.SignIn-module__signIn___cS7KU *{box-sizing:border-box}.SignIn-module__heading___nzF-H{font-size:1.75em;line-height:1.29;margin:0}.SignIn-module__description___6bRpF{color:var(--cdp-web-colors-textSecondary);margin:0}.SignIn-module__medium___rfGKj{font-weight:500}.SignIn-module__form___MXCq6{display:flex;flex-direction:column;gap:1em}.SignIn-module__logo___9j5Y-{display:block;margin:0;width:64px;height:64px;border-radius:9999em;object-fit:cover}.SignIn-module__formFooter___Rasrs{display:flex;flex-flow:column nowrap;align-items:stretch;justify-content:center;gap:.5em;min-height:1.5em}.SignIn-module__serverStateWrapper___GML6w{min-height:1.5em}.SignIn-module__loadingSpinner___JnMDX{color:var(--cdp-web-colors-linkText);display:block;margin:0 auto}.SignIn-module__formFooter___Rasrs button{width:100%}.SignIn-module__serverError___p4Z3K{justify-content:center}.SignIn-module__resetTimer___s-bUu{color:var(--cdp-web-colors-textSecondary);font-size:.875em;font-weight:500;line-height:1em;padding:1.5em 0;text-align:center}.SignIn-module__resetTimer___s-bUu p{margin:0}.SignIn-module__successIcon___2a7me{color:var(--cdp-web-colors-success);display:block;height:4em;width:4em}.SignIn-module__footer___3Gkbc{color:var(--cdp-web-colors-textSecondary);display:flex;align-items:center;justify-content:center;gap:.5em;font-size:.75em;line-height:1;padding:.5em 2em 1em}.SignIn-module__coinbaseIcon___cOnQb{color:var(--cdp-web-colors-linkText);height:1em;width:auto}.SignIn-module__footer___3Gkbc p{display:flex;align-items:center;gap:.25em;margin:0}.SignIn-module__hr___WFRgK{border:0;border-top:1px solid var(--cdp-web-colors-border);width:100%}

package/dist/assets/SignInModal.css

@@ -1 +1 @@
-.SignInModal-module__trigger___IcJ8x{padding-left:2em;padding-right:2em}.SignInModal-module__modal___PErrT{--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);box-shadow:var(--shadow-md);width:100%;max-width:38.25em;background:var(--cdp-web-colors-background);border-radius:.5em;outline:1px solid var(--cdp-web-colors-border);position:relative}.SignInModal-module__modal___PErrT[data-state=open]{animation:SignInModal-module__slideIn___7GyWR .2s ease-out,SignInModal-module__fadeIn___-TaAT .2s ease-out}.SignInModal-module__modal___PErrT[data-state=closed]{animation:SignInModal-module__slideOut___Ntrrb .2s ease-in,SignInModal-module__fadeOut___bzuhB .2s ease-in}.SignInModal-module__signIn___hQuJk{height:100%}.SignInModal-module__signInForm___6-UdI,.SignInModal-module__signInForm___6-UdI form{flex-grow:1}.SignInModal-module__signInTitle___AF-XA,.SignInModal-module__signInDescription___SZjXu{text-align:center}.SignInModal-module__signInImage___hMBda{display:flex;justify-content:center;align-items:center;flex-grow:1;margin:2em 0}.SignInModal-module__closeWrapper___cx8Zq{display:flex;justify-content:flex-end;align-items:center}.SignInModal-module__closeButton___yf-ZW{position:relative;left:1em;width:3em}.SignInModal-module__closeButton___yf-ZW svg{height:1em;width:1em}.SignInModal-module__overlay___-0rmi{background:var(--cdp-web-colors-backgroundOverlay);-webkit-backdrop-filter:blur(.5em);backdrop-filter:blur(.5em);display:grid;grid-template-rows:auto 1fr;inset:0;overflow-y:auto;place-items:end center;position:fixed;z-index:1000}.SignInModal-module__overlay___-0rmi[data-state=open]{animation:SignInModal-module__fadeIn___-TaAT .2s ease-out}.SignInModal-module__overlay___-0rmi[data-state=closed]{animation:SignInModal-module__fadeOut___bzuhB .2s ease-in}.SignInModal-module__spacer___x-lRH{height:1em}@keyframes SignInModal-module__fadeIn___-TaAT{0%{opacity:0}to{opacity:1}}@keyframes SignInModal-module__fadeOut___bzuhB{0%{opacity:1}to{opacity:0}}@keyframes SignInModal-module__slideIn___7GyWR{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes SignInModal-module__slideOut___Ntrrb{0%{transform:translateY(0)}to{transform:translateY(100%)}}@media (min-width: 400px){.SignInModal-module__overlay___-0rmi{padding:.5rem}}@media (min-width: 600px){.SignInModal-module__overlay___-0rmi{place-items:center;padding:1rem;grid-template-rows:1fr}.SignInModal-module__modal___PErrT{height:auto}.SignInModal-module__spacer___x-lRH{display:none}.SignInModal-module__signIn___hQuJk{padding-left:0;padding-right:0}.SignInModal-module__closeWrapper___cx8Zq,.SignInModal-module__signInImage___hMBda,.SignInModal-module__signInTitle___AF-XA,.SignInModal-module__signInDescription___SZjXu,.SignInModal-module__signInForm___6-UdI>form,.SignInModal-module__signInForm___6-UdI>div{padding-left:2.5em;padding-right:2.5em}.SignInModal-module__signInImage___hMBda{align-self:flex-start;margin:0}.SignInModal-module__signInTitle___AF-XA,.SignInModal-module__signInDescription___SZjXu{text-align:left}@keyframes SignInModal-module__slideIn___7GyWR{0%{transform:translateY(10%)}to{transform:translateY(0)}}@keyframes SignInModal-module__slideOut___Ntrrb{0%{transform:translateY(0)}to{transform:translateY(10%)}}}
+.SignInModal-module__trigger___IcJ8x{padding-left:2em;padding-right:2em}.SignInModal-module__modal___PErrT{--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);box-sizing:border-box;box-shadow:var(--shadow-md);width:100%;max-width:38.25em;background:var(--cdp-web-colors-background);border-radius:.5em;outline:1px solid var(--cdp-web-colors-border);position:relative}.SignInModal-module__modal___PErrT[data-state=open]{animation:SignInModal-module__slideIn___7GyWR .2s ease-out,SignInModal-module__fadeIn___-TaAT .2s ease-out}.SignInModal-module__modal___PErrT[data-state=closed]{animation:SignInModal-module__slideOut___Ntrrb .2s ease-in,SignInModal-module__fadeOut___bzuhB .2s ease-in}.SignInModal-module__signIn___hQuJk{height:100%}.SignInModal-module__signInForm___6-UdI,.SignInModal-module__signInForm___6-UdI form{flex-grow:1}.SignInModal-module__signInTitle___AF-XA,.SignInModal-module__signInDescription___SZjXu{text-align:center}.SignInModal-module__signInImage___hMBda{display:flex;justify-content:center;align-items:center;flex-grow:1;margin:2em 0}.SignInModal-module__closeWrapper___cx8Zq{display:flex;justify-content:flex-end;align-items:center}.SignInModal-module__closeButton___yf-ZW{position:relative;left:1em;width:3em}.SignInModal-module__closeButton___yf-ZW svg{height:1em;width:1em}.SignInModal-module__overlay___-0rmi{background:var(--cdp-web-colors-backgroundOverlay);box-sizing:border-box;-webkit-backdrop-filter:blur(.5em);backdrop-filter:blur(.5em);display:grid;grid-template-rows:auto 1fr;inset:0;overflow-y:auto;place-items:end center;position:fixed;z-index:1000}.SignInModal-module__overlay___-0rmi[data-state=open]{animation:SignInModal-module__fadeIn___-TaAT .2s ease-out}.SignInModal-module__overlay___-0rmi[data-state=closed]{animation:SignInModal-module__fadeOut___bzuhB .2s ease-in}.SignInModal-module__spacer___x-lRH{height:1em}@keyframes SignInModal-module__fadeIn___-TaAT{0%{opacity:0}to{opacity:1}}@keyframes SignInModal-module__fadeOut___bzuhB{0%{opacity:1}to{opacity:0}}@keyframes SignInModal-module__slideIn___7GyWR{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes SignInModal-module__slideOut___Ntrrb{0%{transform:translateY(0)}to{transform:translateY(100%)}}@media (min-width: 400px){.SignInModal-module__overlay___-0rmi{padding:.5rem}}@media (min-width: 600px){.SignInModal-module__overlay___-0rmi{place-items:center;padding:1rem;grid-template-rows:1fr}.SignInModal-module__modal___PErrT{height:auto}.SignInModal-module__spacer___x-lRH{display:none}.SignInModal-module__signIn___hQuJk{padding-left:0;padding-right:0}.SignInModal-module__closeWrapper___cx8Zq,.SignInModal-module__signInImage___hMBda,.SignInModal-module__signInTitle___AF-XA,.SignInModal-module__signInDescription___SZjXu,.SignInModal-module__signInForm___6-UdI>form,.SignInModal-module__signInForm___6-UdI>div{padding-left:2.5em;padding-right:2.5em}.SignInModal-module__signInImage___hMBda{align-self:flex-start;margin:0}.SignInModal-module__signInTitle___AF-XA,.SignInModal-module__signInDescription___SZjXu{text-align:left}@keyframes SignInModal-module__slideIn___7GyWR{0%{transform:translateY(10%)}to{transform:translateY(0)}}@keyframes SignInModal-module__slideOut___Ntrrb{0%{transform:translateY(0)}to{transform:translateY(10%)}}}

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

@@ -1 +1,2 @@
-export declare const AuthButton: () => import("react/jsx-runtime").JSX.Element;
+import { HTMLAttributes } from 'react';
+export declare const AuthButton: (props: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/AuthButton/index.js

@@ -1,20 +1,38 @@
-import { jsx as s } from "react/jsx-runtime";
-import { useIsSignedIn as m, useEvmAddress as f } from "@coinbase/cdp-hooks";
-import { useState as n } from "react";
-import { SignInModal as h } from "../SignInModal/index.js";
-import { SignOutButton as l } from "../SignOutButton/index.js";
-const A = () => {
-  const o = m(), i = f(), u = o && !!i, [r, t] = n(u), [c, e] = n(!1), S = () => {
-    setTimeout(() => {
-      e(!1);
-    }, 300), setTimeout(() => {
-      t(!0);
-    }, 500);
-  }, d = () => {
-    t(!1);
+import { jsxs as I, jsx as i } from "react/jsx-runtime";
+import { useIsInitialized as O, useIsSignedIn as T, useEvmAddress as A } from "@coinbase/cdp-hooks";
+import { useMemo as _, useState as d, useRef as f, useCallback as w, useEffect as S } from "react";
+import { LoadingSkeleton as v } from "../LoadingSkeleton/index.js";
+import { SignInModal as x } from "../SignInModal/index.js";
+import { SignOutButton as B } from "../SignOutButton/index.js";
+import '../../assets/AuthButton.css';const M = "AuthButton-module__loading___JpDqi", R = {
+  loading: M
+}, y = (g) => {
+  const s = O(), c = T(), l = A(), o = _(() => c && !!l, [c, l]), [a, n] = d(o), [u, m] = d(!1), e = f(null), t = f(null), r = w(() => {
+    m(!1), e.current && clearTimeout(e.current), e.current = setTimeout(() => {
+      n(!0);
+    }, 200);
+  }, []), h = () => {
+    t.current && clearTimeout(t.current), t.current = setTimeout(() => {
+      r();
+    }, 300);
+  }, p = () => {
+    n(!1);
   };
-  return r ? /* @__PURE__ */ s("div", { children: /* @__PURE__ */ s(l, { onSuccess: d }) }) : /* @__PURE__ */ s(h, { open: c, setIsOpen: e, onSuccess: S });
+  return S(() => {
+    if (o) {
+      if (e.current || t.current)
+        return;
+      u ? r() : n(!0);
+    } else
+      n(!1);
+  }, [o, u, r]), S(() => () => {
+    e.current && clearTimeout(e.current), t.current && clearTimeout(t.current);
+  }, []), /* @__PURE__ */ I("div", { ...g, children: [
+    !s && /* @__PURE__ */ i(v, { className: R.loading }),
+    s && a && /* @__PURE__ */ i(B, { onSuccess: p }),
+    s && !a && /* @__PURE__ */ i(x, { open: u, setIsOpen: m, onSuccess: h })
+  ] });
 };
 export {
-  A as AuthButton
+  y as AuthButton
 };

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

@@ -0,0 +1,8 @@
+import { CSSProperties, ElementType } from 'react';
+interface LoadingSkeletonProps {
+    as?: ElementType;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare const LoadingSkeleton: ({ as: Component, className, style, }: LoadingSkeletonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/LoadingSkeleton/index.js

@@ -0,0 +1,19 @@
+import { jsx as a } from "react/jsx-runtime";
+import "react";
+import '../../assets/LoadingSkeleton.css';const i = "LoadingSkeleton-module__loading___ezIkq", t = {
+  loading: i
+}, s = ({
+  as: o = "div",
+  className: n = "",
+  style: e
+}) => /* @__PURE__ */ a(
+  o,
+  {
+    "aria-hidden": "true",
+    className: `${t.loading} ${n}`,
+    style: e
+  }
+);
+export {
+  s as LoadingSkeleton
+};

package/dist/components/SignIn/SignInForm.js

@@ -1,40 +1,40 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import { useSignInWithEmail as N, useVerifyEmailOTP as M } from "@coinbase/cdp-hooks";
-import { Form as I, FormSubmit as P } from "@radix-ui/react-form";
-import { useRef as R, useState as U, useEffect as A } from "react";
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { useSignInWithEmail as U, useVerifyEmailOTP as A } from "@coinbase/cdp-hooks";
+import { Form as R, FormSubmit as C } from "@radix-ui/react-form";
+import { useState as I, useEffect as T, useRef as F } from "react";
+import { Field as B } from "../Field/index.js";
+import { withValidityState as x } from "../Input/index.js";
+import { LoadingSpinner as V } from "../LoadingSpinner/index.js";
+import { OTP as k } from "../OTP/index.js";
+import { ServerError as O } from "../ServerError/index.js";
+import { VisuallyHidden as W } from "../VisuallyHidden/index.js";
+import { IconCoinbaseWordmark as D } from "../../icons/IconCoinbaseWordmark.js";
+import { IconLock as $ } from "../../icons/IconLock.js";
+import { isApiError as P } from "../../utils/isApiError.js";
+import { isEmailInvalid as j } from "../../utils/isEmailInvalid.js";
+import { s } from "../../chunks/SignIn.module.Dl3CqKQ_.js";
+import { useSignInContext as g } from "./SignInProvider.js";
 import { Button as b } from "../Button/index.js";
-import { Field as x } from "../Field/index.js";
-import { OTP as F } from "../OTP/index.js";
-import { ServerError as C } from "../ServerError/index.js";
-import { IconCoinbaseWordmark as B } from "../../icons/IconCoinbaseWordmark.js";
-import { IconLock as V } from "../../icons/IconLock.js";
-import { isApiError as T } from "../../utils/isApiError.js";
-import { isEmailInvalid as k } from "../../utils/isEmailInvalid.js";
-import { s as a } from "../../chunks/SignIn.module.Dl3CqKQ_.js";
-import { useSignInContext as S } from "./SignInProvider.js";
-import { withValidityState as W } from "../Input/index.js";
-import { LoadingSpinner as D } from "../LoadingSpinner/index.js";
-import { VisuallyHidden as $ } from "../VisuallyHidden/index.js";
-const j = ({ submit: f }) => {
-  const { state: n, dispatch: d } = S(), e = () => d({ type: "CLEAR_ERROR" }), h = (p) => (p.preventDefault(), f(n.email));
-  return /* @__PURE__ */ i(
-    I,
+const q = ({ submit: u }) => {
+  const { state: n, dispatch: d } = g(), e = () => d({ type: "CLEAR_ERROR" }), f = (p) => (p.preventDefault(), u(n.email));
+  return /* @__PURE__ */ o(
+    R,
     {
-      className: a.form,
+      className: s.form,
       onClearServerErrors: e,
-      onSubmit: h,
+      onSubmit: f,
       children: [
         /* @__PURE__ */ t(
-          x,
+          B,
           {
             label: "Email address",
             name: "email",
             validators: [
               ["valueMissing", "Email is required"],
               ["typeMismatch", "Use a valid email address"],
-              [k, "Use a valid email address"]
+              [j, "Use a valid email address"]
             ],
-            children: W({
+            children: x({
               type: "email",
               placeholder: "name@example.com",
               required: !0,
@@ -45,50 +45,50 @@ const j = ({ submit: f }) => {
             })
           }
         ),
-        n.error && /* @__PURE__ */ t(C, { error: n.error, className: a.serverError }),
-        /* @__PURE__ */ t(P, { asChild: !0, children: /* @__PURE__ */ t(b, { type: "submit", isPending: n.isPending, children: "Continue with email" }) })
+        n.error && /* @__PURE__ */ t(O, { error: n.error, className: s.serverError }),
+        /* @__PURE__ */ t(C, { asChild: !0, children: /* @__PURE__ */ t(b, { type: "submit", isPending: n.isPending, children: "Continue with email" }) })
       ]
     }
   );
-}, q = ({
-  reset: f,
+}, H = ({
+  reset: u,
   resetCountdown: n,
   submit: d
 }) => {
-  const { state: e, dispatch: h } = S(), p = () => h({ type: "CLEAR_ERROR" }), l = R([]), m = (c) => (c.preventDefault(), d(e.otp)), E = () => {
-    f(), l.current[0]?.focus();
+  const { state: e, dispatch: f } = g(), p = () => f({ type: "CLEAR_ERROR" }), c = F([]), h = (m) => (m.preventDefault(), d(e.otp)), E = () => {
+    u(), c.current[0]?.focus();
   };
-  return A(() => {
-    e.step === "otp" && l.current[0]?.focus();
-  }, [e.step]), /* @__PURE__ */ i(
-    I,
+  return T(() => {
+    e.step === "otp" && c.current[0]?.focus();
+  }, [e.step]), /* @__PURE__ */ o(
+    R,
     {
-      className: `${a.form}`,
+      className: `${s.form}`,
       onClearServerErrors: p,
-      onSubmit: m,
+      onSubmit: h,
       children: [
         /* @__PURE__ */ t(
-          F,
+          k,
           {
-            ref: l,
+            ref: c,
             name: "otp",
             "aria-label": "Six-digit Verification Code",
             passwordLength: 6,
             value: e.otp,
-            onChange: (c) => c.preventDefault(),
-            onValueChange: (c) => {
-              h({ type: "SET_OTP", payload: { otp: c } });
+            onChange: (m) => m.preventDefault(),
+            onValueChange: (m) => {
+              f({ type: "SET_OTP", payload: { otp: m } });
             },
             autoSubmit: !0
           }
         ),
-        /* @__PURE__ */ i("div", { className: a.formFooter, children: [
-          (e.isPending && !e.canResetOTP || e.error) && /* @__PURE__ */ i("div", { className: a.serverStateWrapper, children: [
-            e.isPending && !e.canResetOTP && /* @__PURE__ */ t(D, { className: a.loadingSpinner }),
-            e.error && /* @__PURE__ */ t(C, { error: e.error, className: a.serverError })
+        /* @__PURE__ */ o("div", { className: s.formFooter, children: [
+          (e.isPending && !e.canResetOTP || e.error) && /* @__PURE__ */ o("div", { className: s.serverStateWrapper, children: [
+            e.isPending && !e.canResetOTP && /* @__PURE__ */ t(V, { className: s.loadingSpinner }),
+            e.error && /* @__PURE__ */ t(O, { error: e.error, className: s.serverError })
           ] }),
-          /* @__PURE__ */ i("div", { children: [
-            e.canResetOTP && /* @__PURE__ */ t(P, { asChild: !0, children: /* @__PURE__ */ t(
+          /* @__PURE__ */ o("div", { children: [
+            e.canResetOTP && /* @__PURE__ */ t(C, { asChild: !0, children: /* @__PURE__ */ t(
               b,
               {
                 type: "button",
@@ -98,13 +98,13 @@ const j = ({ submit: f }) => {
                 children: "Resend code"
               }
             ) }),
-            !e.canResetOTP && /* @__PURE__ */ t("div", { className: a.resetTimer, children: /* @__PURE__ */ i("p", { children: [
+            !e.canResetOTP && /* @__PURE__ */ t("div", { className: s.resetTimer, children: /* @__PURE__ */ o("p", { children: [
               "Resend code in ",
-              /* @__PURE__ */ i("span", { "aria-hidden": "true", children: [
+              /* @__PURE__ */ o("span", { "aria-hidden": "true", children: [
                 n,
                 "s"
               ] }),
-              /* @__PURE__ */ i($, { children: [
+              /* @__PURE__ */ o(W, { children: [
                 n,
                 " ",
                 n === 1 ? "second" : "seconds"
@@ -115,63 +115,72 @@ const j = ({ submit: f }) => {
       ]
     }
   );
-}, le = ({
-  as: f = "div",
+}, ce = ({
+  as: u = "div",
   className: n = "",
   onSuccess: d,
   ...e
 }) => {
-  const l = "An error occurred while signing in. Please try again.", m = R(null), [E, c] = U(0), O = N(), _ = M(), { state: u, dispatch: s } = S(), g = async (o) => {
-    if (!u.isPending) {
-      s({ type: "SUBMIT_EMAIL", payload: { email: o } });
+  const c = "An error occurred while signing in. Please try again.", [h, E] = I(0), [m, y] = I(!1), _ = U(), w = A(), { state: i, dispatch: l } = g(), L = (a) => {
+    E(a), y(!0);
+  };
+  T(() => {
+    if (!m)
+      return;
+    const a = setInterval(() => {
+      E((r) => r > 1 ? r - 1 : (y(!1), 0));
+    }, 1e3);
+    return () => clearInterval(a);
+  }, [m]), T(() => {
+    h === 0 && i.step === "otp" && !i.canResetOTP && l({ type: "ALLOW_RESET_OTP" });
+  }, [h, i.step, i.canResetOTP, l]);
+  const v = async (a) => {
+    if (!i.isPending) {
+      l({ type: "SUBMIT_EMAIL", payload: { email: a } });
       try {
-        const { flowId: r } = await O({
-          email: o
+        const { flowId: r } = await _({
+          email: a
         });
-        s({ type: "SUBMIT_EMAIL_SUCCESS", payload: { flowId: r } }), v(60);
+        l({ type: "SUBMIT_EMAIL_SUCCESS", payload: { flowId: r } }), L(60);
       } catch (r) {
-        const y = T(r) ? r : r instanceof Error && r.message || l;
-        s({ type: "SUBMIT_EMAIL_FAILURE", payload: { error: y } }), console.error(r);
+        const S = P(r) ? r : r instanceof Error && r.message || c;
+        l({ type: "SUBMIT_EMAIL_FAILURE", payload: { error: S } }), console.error(r);
       }
     }
-  }, L = async (o) => {
-    if (!u.isPending) {
-      if (o.length !== 6) {
-        s({ type: "SET_OTP", payload: { otp: o } });
+  }, N = async (a) => {
+    if (!i.isPending) {
+      if (a.length !== 6) {
+        l({ type: "SET_OTP", payload: { otp: a } });
         return;
       }
-      s({ type: "SUBMIT_OTP", payload: { otp: o } });
+      l({ type: "SUBMIT_OTP", payload: { otp: a } });
       try {
-        await _({
-          flowId: u.flowId,
-          otp: o
-        }), s({ type: "SUBMIT_OTP_SUCCESS", payload: { otp: o } }), d?.();
+        await w({
+          flowId: i.flowId,
+          otp: a
+        }), l({ type: "SUBMIT_OTP_SUCCESS", payload: { otp: a } }), d?.();
       } catch (r) {
-        const y = T(r) ? r : r instanceof Error && r.message || l;
-        s({ type: "SUBMIT_OTP_FAILURE", payload: { error: y } }), console.error(r);
+        const S = P(r) ? r : r instanceof Error && r.message || c;
+        l({ type: "SUBMIT_OTP_FAILURE", payload: { error: S } }), console.error(r);
       }
     }
-  }, v = (o) => {
-    c(o), m.current && clearInterval(m.current), m.current = setInterval(() => {
-      c((r) => r === 1 ? (m.current && clearInterval(m.current), s({ type: "ALLOW_RESET_OTP" }), 0) : r - 1);
-    }, 1e3);
-  }, w = () => {
-    s({ type: "RESET_OTP" }), g(u.email), v(60);
+  }, M = () => {
+    l({ type: "RESET_OTP" }), y(!1), v(i.email);
   };
-  return /* @__PURE__ */ i(f, { className: `${a.form} ${n}`, ...e, children: [
-    u.step === "email" && /* @__PURE__ */ t(j, { submit: g }),
-    u.step === "otp" && /* @__PURE__ */ t(q, { submit: L, reset: w, resetCountdown: E }),
-    /* @__PURE__ */ t("hr", { className: a.hr }),
-    /* @__PURE__ */ i("div", { className: a.footer, children: [
-      /* @__PURE__ */ t(V, { className: a.icon }),
-      /* @__PURE__ */ i("p", { children: [
+  return /* @__PURE__ */ o(u, { className: `${s.form} ${n}`, ...e, children: [
+    i.step === "email" && /* @__PURE__ */ t(q, { submit: v }),
+    i.step === "otp" && /* @__PURE__ */ t(H, { submit: N, reset: M, resetCountdown: h }),
+    /* @__PURE__ */ t("hr", { className: s.hr }),
+    /* @__PURE__ */ o("div", { className: s.footer, children: [
+      /* @__PURE__ */ t($, { className: s.icon }),
+      /* @__PURE__ */ o("p", { children: [
         "Secured by",
         " ",
-        /* @__PURE__ */ t("a", { href: "https://www.coinbase.com/security", target: "_blank", rel: "noreferrer", children: /* @__PURE__ */ t(B, { className: a.coinbaseIcon, "aria-label": "Coinbase" }) })
+        /* @__PURE__ */ t("a", { href: "https://www.coinbase.com/security", target: "_blank", rel: "noreferrer", children: /* @__PURE__ */ t(D, { className: s.coinbaseIcon, "aria-label": "Coinbase" }) })
       ] })
     ] })
   ] });
 };
 export {
-  le as SignInForm
+  ce as SignInForm
 };

package/dist/components/SignIn/index.js

@@ -6,7 +6,7 @@ import { SignInForm as I } from "./SignInForm.js";
 import { SignInImage as c } from "./SignInImage.js";
 import { SignInProvider as f, useSignInContext as S } from "./SignInProvider.js";
 import { SignInTitle as a } from "./SignInTitle.js";
-const l = ({ className: t, children: o, onSuccess: m }) => {
+const l = ({ className: t = "", children: o, onSuccess: m }) => {
   const { state: e } = S(), r = typeof o == "function" ? o(e) : o;
   return /* @__PURE__ */ i("div", { className: `${g.signIn} ${t}`, children: [
     r,

package/dist/components/SignInModal/index.js

@@ -2,13 +2,13 @@ import { jsxs as o, jsx as n } from "react/jsx-runtime";
 import { Dialog as g, DialogTrigger as c, DialogPortal as m, DialogOverlay as _, DialogContent as d, DialogClose as I, DialogTitle as p, DialogDescription as u } from "@radix-ui/react-dialog";
 import "react";
 import { IconXMark as h } from "../../icons/IconXMark.js";
-import { Button as r } from "../Button/index.js";
 import { SignIn as S } from "../SignIn/index.js";
 import { useTheme as D } from "../ThemeProvider/index.js";
 import { SignInImage as M } from "../SignIn/SignInImage.js";
 import { SignInTitle as f } from "../SignIn/SignInTitle.js";
 import { SignInDescription as v } from "../SignIn/SignInDescription.js";
 import { SignInForm as N } from "../SignIn/SignInForm.js";
+import { Button as r } from "../Button/index.js";
 import '../../assets/SignInModal.css';const y = "SignInModal-module__trigger___IcJ8x", T = "SignInModal-module__modal___PErrT", C = "SignInModal-module__signIn___hQuJk", x = "SignInModal-module__signInForm___6-UdI", B = "SignInModal-module__signInTitle___AF-XA", F = "SignInModal-module__signInDescription___SZjXu", W = "SignInModal-module__signInImage___hMBda", j = "SignInModal-module__closeWrapper___cx8Zq", X = "SignInModal-module__closeButton___yf-ZW", Z = "SignInModal-module__overlay___-0rmi", b = "SignInModal-module__spacer___x-lRH", i = {
   trigger: y,
   modal: T,

package/dist/components/SignOutButton/index.js

@@ -1,8 +1,8 @@
 import { jsx as s } from "react/jsx-runtime";
 import { useSignOut as r } from "@coinbase/cdp-hooks";
 import "react";
-import { Button as m } from "../Button/index.js";
 import "../../theme/theme.js";
+import { Button as m } from "../Button/index.js";
 import '../../assets/SignOutButton.css';const g = "SignOutButton-module__signOutButton___WNhmy", c = {
   signOutButton: g
 }, l = ({ children: t, variant: n = "primary", onSuccess: o }) => {

package/dist/theme/theme.d.ts

@@ -4,6 +4,7 @@ export declare const flattenedTheme: import('./utils').Flattened<{
         success: string;
         background: string;
         backgroundOverlay: string;
+        backgroundSkeleton: string;
         text: string;
         textSecondary: string;
         primary: string;

package/dist/theme/tokens.d.ts

@@ -18,6 +18,7 @@ export declare const tokens: {
         success: string;
         background: string;
         backgroundOverlay: string;
+        backgroundSkeleton: string;
         text: string;
         textSecondary: string;
         primary: string;

package/dist/theme/tokens.js

@@ -22,6 +22,7 @@ const e = {
     // Background
     background: e.white,
     backgroundOverlay: "rgba(255,255,255,0.5)",
+    backgroundSkeleton: e.gray100,
     // Foreground
     text: e.black,
     textSecondary: e.gray700,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cdp-react",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "type": "module",
   "dependencies": {
     "@radix-ui/react-dialog": "^1.1.14",
@@ -9,8 +9,8 @@
   },
   "peerDependencies": {
     "react": ">=18.2.0",
-    "@coinbase/cdp-hooks": "^0.0.3",
-    "@coinbase/cdp-core": "^0.0.3"
+    "@coinbase/cdp-core": "^0.0.5",
+    "@coinbase/cdp-hooks": "^0.0.5"
   },
   "devDependencies": {
     "@size-limit/preset-big-lib": "^11.2.0",
@@ -34,8 +34,8 @@
     "vite": "^7.0.4",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
-    "@coinbase/cdp-core": "^0.0.3",
-    "@coinbase/cdp-hooks": "^0.0.3"
+    "@coinbase/cdp-core": "^0.0.5",
+    "@coinbase/cdp-hooks": "^0.0.5"
   },
   "size-limit": [
     {