@coinbase/cdp-react 0.0.13 → 0.0.14

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-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-page-text-default);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-cta-primary-bg-default);color:var(--cdp-web-colors-cta-primary-text-default)}.Button-module__primary___s1sM6:hover{background-color:var(--cdp-web-colors-cta-primary-bg-hover);color:var(--cdp-web-colors-cta-primary-text-hover)}.Button-module__primary___s1sM6:focus{outline:none}.Button-module__primary___s1sM6:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-cta-primary-border-focus);--cdp-web-button-ring-inset-color: var(--cdp-web-colors-page-bg-default);outline:none}.Button-module__secondary___R0waJ{background-color:var(--cdp-web-colors-cta-secondary-bg-default);color:var(--cdp-web-colors-cta-secondary-text-default)}.Button-module__secondary___R0waJ:hover{background-color:var(--cdp-web-colors-cta-secondary-bg-hover);color:var(--cdp-web-colors-cta-secondary-text-hover)}.Button-module__secondary___R0waJ:focus{outline:none}.Button-module__secondary___R0waJ:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-cta-secondary-border-focus);--cdp-web-button-ring-inset-color: var(--cdp-web-colors-page-bg-default);outline:none}.Button-module__transparent-primary___Ah0yM{background-color:transparent;color:var(--cdp-web-colors-link-primary-text-default)}.Button-module__transparent-primary___Ah0yM:hover{color:var(--cdp-web-colors-link-primary-text-hover)}.Button-module__transparent-primary___Ah0yM:focus{outline:none}.Button-module__transparent-primary___Ah0yM:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-link-primary-text-default);outline:none}.Button-module__transparent-secondary___kk5sZ{background-color:transparent;color:var(--cdp-web-colors-link-secondary-text-default)}.Button-module__transparent-secondary___kk5sZ:hover{color:var(--cdp-web-colors-link-secondary-text-hover)}.Button-module__transparent-secondary___kk5sZ:focus{outline:none}.Button-module__transparent-secondary___kk5sZ:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-link-secondary-text-default);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-page-text-default);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__link-primary___wROmv,.Button-module__link-secondary___5VErP{padding:0 .25em}.Button-module__primary___s1sM6{background-color:var(--cdp-web-colors-cta-primary-bg-default);color:var(--cdp-web-colors-cta-primary-text-default)}.Button-module__primary___s1sM6:hover{background-color:var(--cdp-web-colors-cta-primary-bg-hover);color:var(--cdp-web-colors-cta-primary-text-hover)}.Button-module__primary___s1sM6:focus{outline:none}.Button-module__primary___s1sM6:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-cta-primary-border-focus);--cdp-web-button-ring-inset-color: var(--cdp-web-colors-page-bg-default);outline:none}.Button-module__secondary___R0waJ{background-color:var(--cdp-web-colors-cta-secondary-bg-default);color:var(--cdp-web-colors-cta-secondary-text-default)}.Button-module__secondary___R0waJ:hover{background-color:var(--cdp-web-colors-cta-secondary-bg-hover);color:var(--cdp-web-colors-cta-secondary-text-hover)}.Button-module__secondary___R0waJ:focus{outline:none}.Button-module__secondary___R0waJ:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-cta-secondary-border-focus);--cdp-web-button-ring-inset-color: var(--cdp-web-colors-page-bg-default);outline:none}.Button-module__link-primary___wROmv,.Button-module__transparent-primary___Ah0yM{background-color:transparent;color:var(--cdp-web-colors-link-primary-text-default)}.Button-module__link-primary___wROmv:hover,.Button-module__transparent-primary___Ah0yM:hover{color:var(--cdp-web-colors-link-primary-text-hover)}.Button-module__link-primary___wROmv:focus,.Button-module__transparent-primary___Ah0yM:focus{outline:none}.Button-module__link-primary___wROmv:focus-visible,.Button-module__transparent-primary___Ah0yM:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-link-primary-text-default);outline:none}.Button-module__link-secondary___5VErP,.Button-module__transparent-secondary___kk5sZ{background-color:transparent;color:var(--cdp-web-colors-link-secondary-text-default)}.Button-module__link-secondary___5VErP:hover,.Button-module__transparent-secondary___kk5sZ:hover{color:var(--cdp-web-colors-link-secondary-text-hover)}.Button-module__link-secondary___5VErP:focus,.Button-module__transparent-secondary___kk5sZ:focus{outline:none}.Button-module__link-secondary___5VErP:focus-visible,.Button-module__transparent-secondary___kk5sZ:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-link-secondary-text-default);outline:none}

package/dist/assets/Error.css

@@ -1 +1 @@
-.Error-module__error___mRFLG{color:var(--cdp-web-colors-fg-negative);font-size:.875em;line-height:1.43;display:flex;align-items:center;gap:.25em;margin:0}.Error-module__icon___web4F{width:1em;height:1em}
+.Error-module__error___mRFLG{color:var(--cdp-web-colors-fg-negative);line-height:1.25em;display:flex;align-items:center;gap:.25em;margin:0}.Error-module__error___mRFLG span{font-size:.875em}.Error-module__icon___web4F{width:1em;height:1em;flex-grow:0;flex-shrink:0}

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-input-border-default);box-sizing:border-box;font-size:1em;padding:.75em;border-radius:.5em;border:1px solid transparent;background-color:var(--cdp-web-colors-input-bg-default);box-shadow:0 0 0 var(--cdp-web-input-ring-width) var(--cdp-web-input-ring-color);color:var(--cdp-web-colors-input-text-default);transition:all .15s ease-in-out;width:100%}.Input-module__input___WjT81::placeholder{color:var(--cdp-web-colors-input-placeholder-default)}.Input-module__input___WjT81:focus-visible{outline:none;--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-focus);--cdp-web-input-ring-width: 2px}.Input-module__input___WjT81[aria-invalid=true]{--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-error)}
+.Input-module__input___WjT81{--cdp-web-input-ring-width: 1px;--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-default);box-sizing:border-box;font-size:1em;line-height:1.5;padding:1em .75em;border-radius:.5em;border:0;background-color:var(--cdp-web-colors-input-bg-default);box-shadow:0 0 0 var(--cdp-web-input-ring-width) var(--cdp-web-input-ring-color) inset;color:var(--cdp-web-colors-input-text-default);transition:all .15s ease-in-out;width:100%}.Input-module__input___WjT81::placeholder{color:var(--cdp-web-colors-input-placeholder-default)}.Input-module__input___WjT81:focus-visible{outline:none;--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-focus);--cdp-web-input-ring-width: 2px}.Input-module__input___WjT81[aria-invalid=true]{--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-error)}

package/dist/assets/SignInForm.css

@@ -1 +1 @@
-.SignInForm-module__form___8Mc3V{display:flex;flex-direction:column;gap:1em}.SignInForm-module__form-footer___PqM2J{display:flex;flex-flow:column nowrap;align-items:stretch;justify-content:center;gap:.5em;min-height:1.5em}.SignInForm-module__server-state-wrapper___QVsXy{min-height:1.5em}.SignInForm-module__loading-spinner___W6gZo{color:var(--cdp-web-colors-link-primary-text-default);display:block;margin:0 auto}.SignInForm-module__form-footer___PqM2J button{width:100%}.SignInForm-module__server-error___dD9VE{justify-content:center}.SignInForm-module__reset-timer___Ms2YZ{color:var(--cdp-web-colors-page-text-muted);font-size:.875em;font-weight:500;line-height:1em;padding:1.5em 0;text-align:center}.SignInForm-module__reset-timer___Ms2YZ p{margin:0}.SignInForm-module__footer___6Lo9w{color:var(--cdp-web-colors-page-text-muted);display:flex;align-items:center;justify-content:center;gap:.5em;font-size:.75em;line-height:1;padding:.5em 2em 1em}.SignInForm-module__coinbase-icon___vGv7u{height:1em;width:auto}.SignInForm-module__footer___6Lo9w p{display:flex;align-items:center;gap:.25em;margin:0}.SignInForm-module__hr___fOcy4{border:0;border-top:1px solid var(--cdp-web-colors-page-border-default);width:100%}.SignInForm-module__icon___qkJnq{height:auto;width:1em}
+.SignInForm-module__form-wrapper___SlQkZ{display:flex;flex-direction:column}.SignInForm-module__form___8Mc3V{display:flex;flex-direction:column;gap:1em;padding-bottom:2em}.SignInForm-module__form-footer___PqM2J{display:flex;flex-flow:column nowrap;align-items:stretch;justify-content:center;min-height:1.5em;padding-top:1.5em}.SignInForm-module__server-state-wrapper___QVsXy{margin-top:-1.5em;min-height:1.5em;position:relative;top:-.25em}.SignInForm-module__loading-spinner___W6gZo{color:var(--cdp-web-colors-link-primary-text-default);display:block;margin:0 auto}.SignInForm-module__server-error___dD9VE{justify-content:center}.SignInForm-module__resend-wrapper___ODSQA{display:flex;align-items:center;justify-content:center;text-align:center;min-height:1.5em}.SignInForm-module__reset-timer___Ms2YZ{color:var(--cdp-web-colors-page-text-muted);font-weight:500;line-height:1em;min-height:1em;display:flex;align-items:center;justify-content:center}.SignInForm-module__reset-timer___Ms2YZ p{font-size:.875em;line-height:1;margin:0}.SignInForm-module__footer___6Lo9w{color:var(--cdp-web-colors-page-text-muted);display:flex;align-items:center;justify-content:center;gap:.5em;line-height:1;padding:1em 2em 1.5em}.SignInForm-module__coinbase-icon___vGv7u{height:1em;width:auto}.SignInForm-module__footer___6Lo9w p{display:flex;align-items:center;font-size:.75em;gap:.25em;margin:0}.SignInForm-module__hr___fOcy4{border:0;border-top:1px solid var(--cdp-web-colors-page-border-default);width:100%}.SignInForm-module__icon___qkJnq{height:auto;width:.75em}

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 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);box-sizing:border-box;box-shadow:var(--shadow-md);width:100%;max-width:38.25em;background:var(--cdp-web-colors-page-bg-default);border-radius:.5em;outline:1px solid var(--cdp-web-colors-page-border-default);position:relative}.SignInModal-module__modal___PErrT[data-state=open]{animation:SignInModal-module__slide-in___eayZg .2s ease-out,SignInModal-module__fade-in___YW32x .2s ease-out}.SignInModal-module__modal___PErrT[data-state=closed]{animation:SignInModal-module__slide-out___fY2xG .2s ease-in,SignInModal-module__fade-out___WE6g4 .2s ease-in}.SignInModal-module__sign-in___n05-5{height:100%}.SignInModal-module__sign-in-form___Jzx1-,.SignInModal-module__sign-in-form___Jzx1- form{flex-grow:1}.SignInModal-module__sign-in-title___cju2s,.SignInModal-module__sign-in-description___-Oi9q{text-align:center}.SignInModal-module__sign-in-image___DGg7B{display:flex;justify-content:center;align-items:center;flex-grow:1;margin:2em 0}.SignInModal-module__close-wrapper___zuxDu{display:flex;justify-content:flex-end;align-items:center}.SignInModal-module__close-button___k1I5Q{position:relative;left:1em;width:3em}.SignInModal-module__close-button___k1I5Q svg{height:1em;width:1em}.SignInModal-module__overlay___-0rmi{background:var(--cdp-web-colors-bg-overlay);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__fade-in___YW32x .2s ease-out}.SignInModal-module__overlay___-0rmi[data-state=closed]{animation:SignInModal-module__fade-out___WE6g4 .2s ease-in}.SignInModal-module__spacer___x-lRH{height:1em}@keyframes SignInModal-module__fade-in___YW32x{0%{opacity:0}to{opacity:1}}@keyframes SignInModal-module__fade-out___WE6g4{0%{opacity:1}to{opacity:0}}@keyframes SignInModal-module__slide-in___eayZg{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes SignInModal-module__slide-out___fY2xG{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__sign-in___n05-5{padding-left:0;padding-right:0}.SignInModal-module__close-wrapper___zuxDu,.SignInModal-module__sign-in-image___DGg7B,.SignInModal-module__sign-in-title___cju2s,.SignInModal-module__sign-in-description___-Oi9q,.SignInModal-module__sign-in-form___Jzx1->form,.SignInModal-module__sign-in-form___Jzx1->div{padding-left:2.5em;padding-right:2.5em}.SignInModal-module__sign-in-image___DGg7B{align-self:flex-start;margin:0}.SignInModal-module__sign-in-title___cju2s,.SignInModal-module__sign-in-description___-Oi9q{text-align:left}@keyframes SignInModal-module__slide-in___eayZg{0%{transform:translateY(10%)}to{transform:translateY(0)}}@keyframes SignInModal-module__slide-out___fY2xG{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 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);box-sizing:border-box;box-shadow:var(--shadow-md);width:100%;max-width:29.375em;background:var(--cdp-web-colors-page-bg-default);border-radius:.5em;outline:1px solid var(--cdp-web-colors-page-border-default);position:relative}.SignInModal-module__modal___PErrT[data-state=open]{animation:SignInModal-module__slide-in___eayZg .2s ease-out,SignInModal-module__fade-in___YW32x .2s ease-out}.SignInModal-module__modal___PErrT[data-state=closed]{animation:SignInModal-module__slide-out___fY2xG .2s ease-in,SignInModal-module__fade-out___WE6g4 .2s ease-in}.SignInModal-module__sign-in___n05-5{height:100%;padding:2em 0 0}.SignInModal-module__sign-in-image___DGg7B,.SignInModal-module__sign-in-title___cju2s,.SignInModal-module__sign-in-description___-Oi9q,.SignInModal-module__sign-in-form___Jzx1->form,.SignInModal-module__sign-in-form___Jzx1->div{padding-left:2em;padding-right:2em}.SignInModal-module__sign-in-form___Jzx1-,.SignInModal-module__sign-in-form___Jzx1- form{flex-grow:1}.SignInModal-module__sign-in-title___cju2s,.SignInModal-module__sign-in-description___-Oi9q{text-align:center}.SignInModal-module__sign-in-image___DGg7B{display:flex;justify-content:center;align-items:center;flex-grow:1;margin:2em 0}.SignInModal-module__close-button___k1I5Q{position:absolute;top:1.5em;right:1.5em;width:3em}.SignInModal-module__close-button___k1I5Q svg{height:1em;width:1em}.SignInModal-module__overlay___-0rmi{background:var(--cdp-web-colors-bg-overlay);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__fade-in___YW32x .2s ease-out}.SignInModal-module__overlay___-0rmi[data-state=closed]{animation:SignInModal-module__fade-out___WE6g4 .2s ease-in}.SignInModal-module__spacer___x-lRH{height:1em}@keyframes SignInModal-module__fade-in___YW32x{0%{opacity:0}to{opacity:1}}@keyframes SignInModal-module__fade-out___WE6g4{0%{opacity:1}to{opacity:0}}@keyframes SignInModal-module__slide-in___eayZg{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes SignInModal-module__slide-out___fY2xG{0%{transform:translateY(0)}to{transform:translateY(100%)}}@media (min-width: 400px){.SignInModal-module__overlay___-0rmi{padding:.5rem}}@media (min-width: 470px){.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__sign-in___n05-5{padding-top:2.5em}.SignInModal-module__sign-in-image___DGg7B,.SignInModal-module__sign-in-title___cju2s,.SignInModal-module__sign-in-description___-Oi9q,.SignInModal-module__sign-in-form___Jzx1->form,.SignInModal-module__sign-in-form___Jzx1->div{padding-left:2.5em;padding-right:2.5em}.SignInModal-module__sign-in-image___DGg7B{align-self:flex-start;margin:0}.SignInModal-module__sign-in-image___DGg7B:empty{display:none}.SignInModal-module__sign-in-title___cju2s,.SignInModal-module__sign-in-description___-Oi9q{text-align:left}@keyframes SignInModal-module__slide-in___eayZg{0%{transform:translateY(10%)}to{transform:translateY(0)}}@keyframes SignInModal-module__slide-out___fY2xG{0%{transform:translateY(0)}to{transform:translateY(10%)}}}

package/dist/components/Button/index.js

@@ -1,29 +1,35 @@
-import { jsx as n, jsxs as p, Fragment as _ } from "react/jsx-runtime";
-import { forwardRef as c, useMemo as y } from "react";
+import { jsx as n, jsxs as d, Fragment as y } from "react/jsx-runtime";
+import { forwardRef as c, useMemo as p } from "react";
 import "../../theme/theme.js";
 import { LoadingSpinner as u } from "../LoadingSpinner/index.js";
 import { VisuallyHidden as l } from "../VisuallyHidden/index.js";
-import '../../assets/Button.css';const f = "Button-module__btn___Fx11X", B = "Button-module__primary___s1sM6", h = "Button-module__secondary___R0waJ", r = {
-  btn: f,
+import '../../assets/Button.css';const k = "Button-module__btn___Fx11X", B = "Button-module__primary___s1sM6", f = "Button-module__secondary___R0waJ", r = {
+  btn: k,
+  "link-primary": "Button-module__link-primary___wROmv",
+  "link-secondary": "Button-module__link-secondary___5VErP",
   primary: B,
-  secondary: h,
+  secondary: f,
   "transparent-primary": "Button-module__transparent-primary___Ah0yM",
   "transparent-secondary": "Button-module__transparent-secondary___kk5sZ"
-}, b = c(
+}, h = c(
   ({
-    children: a,
+    children: t,
     className: e = "",
     isPending: o,
     pendingLabel: s = "Loading...",
-    variant: t = "primary",
-    ...m
-  }, i) => {
-    const d = y(() => {
-      switch (t) {
+    variant: a = "primary",
+    ...i
+  }, m) => {
+    const _ = p(() => {
+      switch (a) {
         case "primary":
           return r.primary;
         case "secondary":
           return r.secondary;
+        case "linkPrimary":
+          return r["link-primary"];
+        case "linkSecondary":
+          return r["link-secondary"];
         case "transparentPrimary":
           return r["transparent-primary"];
         case "transparentSecondary":
@@ -31,14 +37,14 @@ import '../../assets/Button.css';const f = "Button-module__btn___Fx11X", B = "Bu
         default:
           return r.primary;
       }
-    }, [t]);
-    return /* @__PURE__ */ n("button", { className: `${r.btn} ${d} ${e}`, ref: i, ...m, children: o ? /* @__PURE__ */ p(_, { children: [
+    }, [a]);
+    return /* @__PURE__ */ n("button", { className: `${r.btn} ${_} ${e}`, ref: m, ...i, children: o ? /* @__PURE__ */ d(y, { children: [
       /* @__PURE__ */ n(u, { "aria-hidden": "true" }),
       /* @__PURE__ */ n(l, { children: s })
-    ] }) : a });
+    ] }) : t });
   }
 );
-b.displayName = "Button";
+h.displayName = "Button";
 export {
-  b as Button
+  h as Button
 };

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

@@ -3,6 +3,7 @@ import { ThemeProviderProps } from '../ThemeProvider';
 export interface AppConfig {
     name: string;
     logoUrl?: string;
+    showCoinbaseFooter?: boolean;
 }
 export type CDPReactProviderProps = {
     app?: AppConfig;

package/dist/components/CDPReactProvider/index.js

@@ -1,20 +1,32 @@
 import { jsx as t } from "react/jsx-runtime";
-import { CDPContext as s, CDPHooksProvider as C } from "@coinbase/cdp-hooks";
-import { createContext as d, useContext as i, useMemo as m } from "react";
-import { ThemeProvider as u } from "../ThemeProvider/index.js";
-const l = ({ children: o, config: e, theme: r, app: c }) => {
-  const n = /* @__PURE__ */ t(f, { app: c, children: /* @__PURE__ */ t(u, { theme: r, children: o }) });
-  return i(s) ? n : /* @__PURE__ */ t(C, { config: e, children: n });
-}, p = d(void 0), f = ({ children: o, app: e }) => {
-  const r = m(() => ({ app: e || { name: "", logoUrl: "" } }), [e]);
+import { CDPContext as c, CDPHooksProvider as C } from "@coinbase/cdp-hooks";
+import { createContext as d, useContext as i, useMemo as u } from "react";
+import { ThemeProvider as m } from "../ThemeProvider/index.js";
+const g = ({ children: o, config: e, theme: r, app: s }) => {
+  const n = /* @__PURE__ */ t(x, { app: s, children: /* @__PURE__ */ t(m, { theme: r, children: o }) });
+  return i(c) ? n : /* @__PURE__ */ t(C, { config: e, children: n });
+}, p = d(void 0), f = {
+  name: "",
+  logoUrl: "",
+  showCoinbaseFooter: !0
+}, x = ({ children: o, app: e }) => {
+  const r = u(
+    () => ({
+      app: {
+        ...f,
+        ...e
+      }
+    }),
+    [e]
+  );
   return /* @__PURE__ */ t(p.Provider, { value: r, children: o });
-}, g = () => {
+}, A = () => {
   const o = i(p);
   if (!o)
     throw new Error("useAppConfig must be used within an AppConfigProvider");
   return o.app;
 };
 export {
-  l as CDPReactProvider,
-  g as useAppConfig
+  g as CDPReactProvider,
+  A as useAppConfig
 };

package/dist/components/OTP/index.js

@@ -1,4 +1,4 @@
-import { jsxs as a, jsx as o } from "react/jsx-runtime";
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
 import { OneTimePasswordField as _, OneTimePasswordFieldInput as f, OneTimePasswordFieldHiddenInput as P } from "@radix-ui/react-one-time-password-field";
 import { forwardRef as O, useId as T, useRef as h, useEffect as y } from "react";
 import { Input as I } from "../Input/index.js";
@@ -9,18 +9,18 @@ import '../../assets/OTP.css';const w = "OTP-module__otp___EUcSo", N = "OTP-modu
   "input-container": "OTP-module__input-container___-yRBL",
   input: N
 }, R = O(
-  ({ error: i, passwordLength: s = 6, className: d = "", ...p }, t) => {
-    const u = T(), c = h(/* @__PURE__ */ new Map()), l = (e, n) => {
-      e ? c.current.set(n, e) : c.current.delete(n);
+  ({ error: i, passwordLength: s = 6, className: l = "", ...c }, n) => {
+    const u = T(), a = h(/* @__PURE__ */ new Map()), p = (e, t) => {
+      e ? a.current.set(t, e) : a.current.delete(t);
     };
     return y(() => {
-      const e = Array.from(c.current.values());
-      typeof t == "function" ? t(e) : t && (t.current = e);
-    }, [s, t]), /* @__PURE__ */ a("div", { className: `${r.otp} ${d}`, children: [
-      /* @__PURE__ */ a(
+      const e = Array.from(a.current.values());
+      typeof n == "function" ? n(e) : n && (n.current = e);
+    }, [s, n]), /* @__PURE__ */ d("div", { className: `${r.otp} ${l}`, children: [
+      /* @__PURE__ */ d(
         _,
         {
-          ...p,
+          ...c,
           className: r["group-container"],
           "aria-invalid": !!i,
           "aria-describedby": i ? u : void 0,
@@ -28,7 +28,14 @@ import '../../assets/OTP.css';const w = "OTP-module__otp___EUcSo", N = "OTP-modu
             "--cdp-web-otp-input-width": `${Math.floor(100 / s)}%`
           },
           children: [
-            Array.from({ length: s }, (e, n) => /* @__PURE__ */ o("div", { className: r["input-container"], children: /* @__PURE__ */ o(f, { asChild: !0, children: /* @__PURE__ */ o(I, { ref: (m) => l(m, n), className: r.input }) }) }, n)),
+            Array.from({ length: s }, (e, t) => /* @__PURE__ */ o("div", { className: r["input-container"], children: /* @__PURE__ */ o(f, { asChild: !0, children: /* @__PURE__ */ o(
+              I,
+              {
+                name: `${c.name || "otp"}-${t}`,
+                ref: (m) => p(m, t),
+                className: r.input
+              }
+            ) }) }, t)),
             /* @__PURE__ */ o(P, {})
           ]
         }

package/dist/components/SignIn/SignInForm.js

@@ -1,76 +1,80 @@
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
-import { useSignInWithEmail as N, useVerifyEmailOTP as U } from "@coinbase/cdp-hooks";
+import { jsxs as s, jsx as o, Fragment as A } from "react/jsx-runtime";
+import { useSignInWithEmail as U, useVerifyEmailOTP as V } from "@coinbase/cdp-hooks";
 import { Form as P, FormSubmit as R } from "@radix-ui/react-form";
-import { useState as v, useEffect as y, useRef as A } from "react";
-import { Field as V } from "../Field/index.js";
-import { withValidityState as B } from "../Input/index.js";
-import { LoadingSpinner as x } from "../LoadingSpinner/index.js";
-import { OTP as q } from "../OTP/index.js";
-import { ServerError as C } from "../ServerError/index.js";
-import { VisuallyHidden as k } from "../VisuallyHidden/index.js";
-import { IconCoinbaseWordmark as D } from "../../icons/IconCoinbaseWordmark.js";
-import { IconLock as W } from "../../icons/IconLock.js";
+import { useState as v, useEffect as y, useRef as B } from "react";
+import { Button as C } from "../Button/index.js";
+import { useAppConfig as k } from "../CDPReactProvider/index.js";
+import { Field as x } from "../Field/index.js";
+import { withValidityState as q } from "../Input/index.js";
+import { OTP as D } from "../OTP/index.js";
+import { ServerError as O } from "../ServerError/index.js";
+import { IconCoinbaseWordmark as W } from "../../icons/IconCoinbaseWordmark.js";
+import { IconLock as Q } from "../../icons/IconLock.js";
 import { isApiError as T } from "../../utils/isApiError.js";
-import { isEmailInvalid as $ } from "../../utils/isEmailInvalid.js";
+import { isEmailInvalid as Z } from "../../utils/isEmailInvalid.js";
 import { useSignInContext as E } from "./SignInProvider.js";
-import { Button as O } from "../Button/index.js";
-import '../../assets/SignInForm.css';const j = "SignInForm-module__form___8Mc3V", J = "SignInForm-module__footer___6Lo9w", Z = "SignInForm-module__hr___fOcy4", G = "SignInForm-module__icon___qkJnq", n = {
-  form: j,
+import { LoadingSpinner as $ } from "../LoadingSpinner/index.js";
+import { VisuallyHidden as j } from "../VisuallyHidden/index.js";
+import '../../assets/SignInForm.css';const J = "SignInForm-module__form___8Mc3V", G = "SignInForm-module__footer___6Lo9w", H = "SignInForm-module__hr___fOcy4", X = "SignInForm-module__icon___qkJnq", n = {
+  "form-wrapper": "SignInForm-module__form-wrapper___SlQkZ",
+  form: J,
   "form-footer": "SignInForm-module__form-footer___PqM2J",
   "server-state-wrapper": "SignInForm-module__server-state-wrapper___QVsXy",
   "loading-spinner": "SignInForm-module__loading-spinner___W6gZo",
   "server-error": "SignInForm-module__server-error___dD9VE",
+  "resend-wrapper": "SignInForm-module__resend-wrapper___ODSQA",
   "reset-timer": "SignInForm-module__reset-timer___Ms2YZ",
-  footer: J,
+  footer: G,
   "coinbase-icon": "SignInForm-module__coinbase-icon___vGv7u",
-  hr: Z,
-  icon: G
-}, H = ({ submit: u }) => {
-  const { state: s, dispatch: d } = E(), e = () => d({ type: "CLEAR_ERROR" }), _ = (p) => (p.preventDefault(), u(s.email));
-  return /* @__PURE__ */ i(
+  hr: H,
+  icon: X
+}, Y = ({ submit: _ }) => {
+  const { state: i, dispatch: d } = E(), e = () => d({ type: "CLEAR_ERROR" }), u = (p) => (p.preventDefault(), _(i.email));
+  return /* @__PURE__ */ s(
     P,
     {
       className: n.form,
       onClearServerErrors: e,
-      onSubmit: _,
+      onSubmit: u,
       children: [
         /* @__PURE__ */ o(
-          V,
+          x,
           {
             label: "Email address",
             name: "email",
             validators: [
               ["valueMissing", "Email is required"],
               ["typeMismatch", "Use a valid email address"],
-              [$, "Use a valid email address"]
+              [Z, "Use a valid email address"]
             ],
-            children: B({
+            children: q({
+              autoComplete: "email",
               type: "email",
               placeholder: "name@example.com",
               required: !0,
-              value: s.email,
+              value: i.email,
               onChange: (p) => {
                 d({ type: "SET_EMAIL", payload: { email: p.target.value } });
               }
             })
           }
         ),
-        s.error && /* @__PURE__ */ o(C, { error: s.error, className: n["server-error"] }),
-        /* @__PURE__ */ o(R, { asChild: !0, children: /* @__PURE__ */ o(O, { type: "submit", isPending: s.isPending, children: "Continue with email" }) })
+        i.error && /* @__PURE__ */ o(O, { error: i.error, className: n["server-error"] }),
+        /* @__PURE__ */ o(R, { asChild: !0, children: /* @__PURE__ */ o(C, { type: "submit", isPending: i.isPending, children: "Continue with email" }) })
       ]
     }
   );
-}, Q = ({
-  reset: u,
-  resetCountdown: s,
+}, z = ({
+  reset: _,
+  resetCountdown: i,
   submit: d
 }) => {
-  const { state: e, dispatch: _ } = E(), p = () => _({ type: "CLEAR_ERROR" }), l = A([]), f = (c) => (c.preventDefault(), d(e.otp)), h = () => {
-    u(), l.current[0]?.focus();
+  const { state: e, dispatch: u } = E(), p = () => u({ type: "CLEAR_ERROR" }), l = B([]), f = (c) => (c.preventDefault(), d(e.otp)), S = () => {
+    _(), l.current[0]?.focus();
   };
   return y(() => {
     e.step === "otp" && l.current[0]?.focus();
-  }, [e.step]), /* @__PURE__ */ i(
+  }, [e.step]), /* @__PURE__ */ s(
     P,
     {
       className: `${n.form}`,
@@ -78,7 +82,7 @@ import '../../assets/SignInForm.css';const j = "SignInForm-module__form___8Mc3V"
       onSubmit: f,
       children: [
         /* @__PURE__ */ o(
-          q,
+          D,
           {
             ref: l,
             name: "otp",
@@ -87,37 +91,37 @@ import '../../assets/SignInForm.css';const j = "SignInForm-module__form___8Mc3V"
             value: e.otp,
             onChange: (c) => c.preventDefault(),
             onValueChange: (c) => {
-              _({ type: "SET_OTP", payload: { otp: c } });
+              u({ type: "SET_OTP", payload: { otp: c } });
             },
             autoSubmit: !0
           }
         ),
-        /* @__PURE__ */ i("div", { className: n["form-footer"], children: [
-          (e.isPending && !e.canResetOTP || e.error) && /* @__PURE__ */ i("div", { className: n["server-state-wrapper"], children: [
-            e.isPending && !e.canResetOTP && /* @__PURE__ */ o(x, { className: n["loading-spinner"] }),
-            e.error && /* @__PURE__ */ o(C, { error: e.error, className: n["server-error"] })
+        /* @__PURE__ */ s("div", { className: n["form-footer"], children: [
+          (e.isPending && !e.canResetOTP || e.error) && /* @__PURE__ */ s("div", { className: n["server-state-wrapper"], children: [
+            e.isPending && !e.canResetOTP && /* @__PURE__ */ o($, { className: n["loading-spinner"] }),
+            e.error && /* @__PURE__ */ o(O, { error: e.error, className: n["server-error"] })
           ] }),
-          /* @__PURE__ */ i("div", { children: [
+          /* @__PURE__ */ s("div", { className: n["resend-wrapper"], children: [
             e.canResetOTP && /* @__PURE__ */ o(R, { asChild: !0, children: /* @__PURE__ */ o(
-              O,
+              C,
               {
                 type: "button",
-                onClick: h,
+                onClick: S,
                 isPending: e.isPending,
-                variant: "transparentPrimary",
+                variant: "linkPrimary",
                 children: "Resend code"
               }
             ) }),
-            !e.canResetOTP && /* @__PURE__ */ o("div", { className: n["reset-timer"], children: /* @__PURE__ */ i("p", { children: [
+            !e.canResetOTP && /* @__PURE__ */ o("div", { className: n["reset-timer"], children: /* @__PURE__ */ s("p", { children: [
               "Resend code in ",
-              /* @__PURE__ */ i("span", { "aria-hidden": "true", children: [
-                s,
+              /* @__PURE__ */ s("span", { "aria-hidden": "true", children: [
+                i,
                 "s"
               ] }),
-              /* @__PURE__ */ i(k, { children: [
-                s,
+              /* @__PURE__ */ s(j, { children: [
+                i,
                 " ",
-                s === 1 ? "second" : "seconds"
+                i === 1 ? "second" : "seconds"
               ] })
             ] }) })
           ] })
@@ -125,20 +129,20 @@ import '../../assets/SignInForm.css';const j = "SignInForm-module__form___8Mc3V"
       ]
     }
   );
-}, pe = ({
-  as: u = "div",
-  className: s = "",
+}, Se = ({
+  as: _ = "div",
+  className: i = "",
   onSuccess: d,
   ...e
 }) => {
-  const l = "An error occurred while signing in. Please try again.", [f, h] = v(0), [c, S] = v(!1), b = N(), F = U(), { state: a, dispatch: m } = E(), w = (t) => {
-    h(t), S(!0);
+  const l = "An error occurred while signing in. Please try again.", [f, S] = v(0), [c, h] = v(!1), w = U(), b = V(), { state: a, dispatch: m } = E(), { showCoinbaseFooter: F } = k(), L = (t) => {
+    S(t), h(!0);
   };
   y(() => {
     if (!c)
       return;
     const t = setInterval(() => {
-      h((r) => r > 1 ? r - 1 : (S(!1), 0));
+      S((r) => r > 1 ? r - 1 : (h(!1), 0));
     }, 1e3);
     return () => clearInterval(t);
   }, [c]), y(() => {
@@ -148,16 +152,16 @@ import '../../assets/SignInForm.css';const j = "SignInForm-module__form___8Mc3V"
     if (!a.isPending) {
       m({ type: "SUBMIT_EMAIL", payload: { email: t } });
       try {
-        const { flowId: r } = await b({
+        const { flowId: r } = await w({
           email: t
         });
-        m({ type: "SUBMIT_EMAIL_SUCCESS", payload: { flowId: r } }), w(60);
+        m({ type: "SUBMIT_EMAIL_SUCCESS", payload: { flowId: r } }), L(60);
       } catch (r) {
         const g = T(r) ? r : r instanceof Error && r.message || l;
         m({ type: "SUBMIT_EMAIL_FAILURE", payload: { error: g } }), console.error(r);
       }
     }
-  }, L = async (t) => {
+  }, M = async (t) => {
     if (!a.isPending) {
       if (t.length !== 6) {
         m({ type: "SET_OTP", payload: { otp: t } });
@@ -165,7 +169,7 @@ import '../../assets/SignInForm.css';const j = "SignInForm-module__form___8Mc3V"
       }
       m({ type: "SUBMIT_OTP", payload: { otp: t } });
       try {
-        await F({
+        await b({
           flowId: a.flowId,
           otp: t
         }), m({ type: "SUBMIT_OTP_SUCCESS", payload: { otp: t } }), d?.();
@@ -174,23 +178,25 @@ import '../../assets/SignInForm.css';const j = "SignInForm-module__form___8Mc3V"
         m({ type: "SUBMIT_OTP_FAILURE", payload: { error: g } }), console.error(r);
       }
     }
-  }, M = () => {
-    m({ type: "RESET_OTP" }), S(!1), I(a.email);
+  }, N = () => {
+    m({ type: "RESET_OTP" }), h(!1), I(a.email);
   };
-  return /* @__PURE__ */ i(u, { className: `${n.form} ${s}`, ...e, children: [
-    a.step === "email" && /* @__PURE__ */ o(H, { submit: I }),
-    a.step === "otp" && /* @__PURE__ */ o(Q, { submit: L, reset: M, resetCountdown: f }),
-    /* @__PURE__ */ o("hr", { className: n.hr }),
-    /* @__PURE__ */ i("div", { className: n.footer, children: [
-      /* @__PURE__ */ o(W, { className: n.icon }),
-      /* @__PURE__ */ i("p", { children: [
-        "Secured by",
-        " ",
-        /* @__PURE__ */ o(D, { className: n["coinbase-icon"], "aria-label": "Coinbase" })
+  return /* @__PURE__ */ s(_, { className: `${n["form-wrapper"]} ${i}`, ...e, children: [
+    a.step === "email" && /* @__PURE__ */ o(Y, { submit: I }),
+    a.step === "otp" && /* @__PURE__ */ o(z, { submit: M, reset: N, resetCountdown: f }),
+    F && /* @__PURE__ */ s(A, { children: [
+      /* @__PURE__ */ o("hr", { className: n.hr }),
+      /* @__PURE__ */ s("div", { className: n.footer, children: [
+        /* @__PURE__ */ o(Q, { className: n.icon }),
+        /* @__PURE__ */ s("p", { children: [
+          "Secured by",
+          " ",
+          /* @__PURE__ */ o(W, { className: n["coinbase-icon"], "aria-label": "Coinbase" })
+        ] })
       ] })
     ] })
   ] });
 };
 export {
-  pe as SignInForm
+  Se as SignInForm
 };

package/dist/components/SignInModal/index.js

@@ -1,34 +1,33 @@
 import { jsxs as o, jsx as i } from "react/jsx-runtime";
-import { Dialog as t, DialogTrigger as g, DialogPortal as _, DialogOverlay as d, DialogContent as c, DialogClose as p, DialogTitle as u, DialogDescription as I } from "@radix-ui/react-dialog";
+import { Dialog as g, DialogTrigger as m, DialogPortal as _, DialogOverlay as d, DialogContent as c, DialogClose as p, DialogTitle as I, 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 f } from "../ThemeProvider/index.js";
 import { SignInImage as M } from "../SignIn/SignInImage.js";
 import { SignInTitle as D } 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", C = "SignInModal-module__modal___PErrT", x = "SignInModal-module__overlay___-0rmi", b = "SignInModal-module__spacer___x-lRH", n = {
   trigger: y,
   modal: C,
   "sign-in": "SignInModal-module__sign-in___n05-5",
-  "sign-in-form": "SignInModal-module__sign-in-form___Jzx1-",
+  "sign-in-image": "SignInModal-module__sign-in-image___DGg7B",
   "sign-in-title": "SignInModal-module__sign-in-title___cju2s",
   "sign-in-description": "SignInModal-module__sign-in-description___-Oi9q",
-  "sign-in-image": "SignInModal-module__sign-in-image___DGg7B",
-  "close-wrapper": "SignInModal-module__close-wrapper___zuxDu",
+  "sign-in-form": "SignInModal-module__sign-in-form___Jzx1-",
   "close-button": "SignInModal-module__close-button___k1I5Q",
   overlay: x,
   spacer: b
-}, F = ({ children: l, open: a, setIsOpen: s, onSuccess: e }) => {
-  const { cssVariables: m } = f();
-  return /* @__PURE__ */ o(t, { open: a, onOpenChange: s, children: [
-    /* @__PURE__ */ i(g, { asChild: !0, children: l || /* @__PURE__ */ i(r, { variant: "primary", className: n.trigger, children: "Sign In" }) }),
-    /* @__PURE__ */ i(_, { children: /* @__PURE__ */ o(d, { className: n.overlay, style: m, children: [
+}, G = ({ children: l, open: a, setIsOpen: s, onSuccess: e }) => {
+  const { cssVariables: t } = f();
+  return /* @__PURE__ */ o(g, { open: a, onOpenChange: s, children: [
+    /* @__PURE__ */ i(m, { asChild: !0, children: l || /* @__PURE__ */ i(r, { variant: "primary", className: n.trigger, children: "Sign In" }) }),
+    /* @__PURE__ */ i(_, { children: /* @__PURE__ */ o(d, { className: n.overlay, style: t, children: [
       /* @__PURE__ */ i("div", { className: n.spacer }),
       /* @__PURE__ */ i(c, { className: n.modal, children: /* @__PURE__ */ o(S, { onSuccess: e, className: n["sign-in"], children: [
-        /* @__PURE__ */ i("div", { className: n["close-wrapper"], children: /* @__PURE__ */ i(p, { asChild: !0, children: /* @__PURE__ */ i(
+        /* @__PURE__ */ i(p, { asChild: !0, children: /* @__PURE__ */ i(
           r,
           {
             "aria-label": "Close",
@@ -36,15 +35,15 @@ import '../../assets/SignInModal.css';const y = "SignInModal-module__trigger___I
             className: `${n["close-button"]}`,
             children: /* @__PURE__ */ i(h, {})
           }
-        ) }) }),
+        ) }),
         /* @__PURE__ */ i("div", { className: n["sign-in-image"], children: /* @__PURE__ */ i(M, {}) }),
-        /* @__PURE__ */ i("div", { className: n["sign-in-title"], children: /* @__PURE__ */ i(u, { asChild: !0, children: /* @__PURE__ */ i(D, {}) }) }),
-        /* @__PURE__ */ i(I, { asChild: !0, children: /* @__PURE__ */ i(v, { className: n["sign-in-description"] }) }),
+        /* @__PURE__ */ i("div", { className: n["sign-in-title"], children: /* @__PURE__ */ i(I, { asChild: !0, children: /* @__PURE__ */ i(D, {}) }) }),
+        /* @__PURE__ */ i(u, { asChild: !0, children: /* @__PURE__ */ i(v, { className: n["sign-in-description"] }) }),
         /* @__PURE__ */ i(N, { className: n["sign-in-form"], onSuccess: e })
       ] }) })
     ] }) })
   ] });
 };
 export {
-  F as SignInModal
+  G as SignInModal
 };

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 "../../theme/theme.js";
 import { Button as m } from "../Button/index.js";
+import "../../theme/theme.js";
 import '../../assets/SignOutButton.css';const e = {
   "sign-out-button": "SignOutButton-module__sign-out-button___qiybe"
 }, O = ({ children: t, variant: o = "primary", onSuccess: n }) => {

package/dist/theme/theme.d.ts

@@ -239,4 +239,4 @@ export type FontTokens = Flattened<{
 }>;
 export type ColorTokens = SemanticColors | ComponentColors;
 export type Theme = ColorTokens & FontTokens;
-export type ButtonVariant = "primary" | "secondary" | "transparentPrimary" | "transparentSecondary";
+export type ButtonVariant = "primary" | "secondary" | "linkPrimary" | "linkSecondary" | "transparentPrimary" | "transparentSecondary";

package/package.json

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