@coinbase/cdp-react 0.0.11 → 0.0.12

package/dist/components/SignIn/SignInForm.js

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

package/dist/components/SignIn/SignInImage.js

@@ -1,21 +1,23 @@
 import { jsx as e } from "react/jsx-runtime";
-import { useAppConfig as u } from "../CDPReactProvider/index.js";
+import { useAppConfig as p } from "../CDPReactProvider/index.js";
 import { IconCheckCircle as a } from "../../icons/IconCheckCircle.js";
-import { s as c } from "../../chunks/SignIn.module.Dl3CqKQ_.js";
-import { useSignInContext as f } from "./SignInProvider.js";
-const i = (o) => /^https?:\/\//.test(o), x = ({ className: o = "", alt: l, src: s }) => {
-  const { state: m } = f(), { step: r } = m, t = u(), g = t.logoUrl && i(t.logoUrl) ? t.logoUrl : void 0, n = s && i(s) ? s : g, p = l || t.name;
-  return r !== "success" && n ? /* @__PURE__ */ e(
+import { useSignInContext as _ } from "./SignInProvider.js";
+import '../../assets/SignInImage.css';const f = "SignInImage-module__logo___rlzt-", i = {
+  logo: f,
+  "success-icon": "SignInImage-module__success-icon___avUF9"
+}, l = (o) => /^https?:\/\//.test(o), S = ({ className: o = "", alt: r, src: t }) => {
+  const { state: g } = _(), { step: n } = g, s = p(), m = s.logoUrl && l(s.logoUrl) ? s.logoUrl : void 0, c = t && l(t) ? t : m, u = r || s.name;
+  return n !== "success" && c ? /* @__PURE__ */ e(
     "img",
     {
-      src: n,
-      alt: p || "",
-      className: `${c.logo} ${o}`,
+      src: c,
+      alt: u || "",
+      className: `${i.logo} ${o}`,
       width: 64,
       height: 64
     }
-  ) : r === "success" ? /* @__PURE__ */ e(a, { className: `${c.successIcon} ${o}` }) : null;
+  ) : n === "success" ? /* @__PURE__ */ e(a, { className: `${i["success-icon"]} ${o}` }) : null;
 };
 export {
-  x as SignInImage
+  S as SignInImage
 };

package/dist/components/SignIn/SignInTitle.js

@@ -1,16 +1,17 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import { useMemo as c } from "react";
-import { s as m } from "../../chunks/SignIn.module.Dl3CqKQ_.js";
-import { useSignInContext as p } from "./SignInProvider.js";
-const d = ({
-  as: e = "h2",
-  children: s,
-  className: r = "",
-  ...n
+import { useSignInContext as a } from "./SignInProvider.js";
+import '../../assets/SignInTitle.css';const u = "SignInTitle-module__heading___QJ071", m = {
+  heading: u
+}, p = ({
+  as: t = "h2",
+  children: n,
+  className: s = "",
+  ...i
 }) => {
-  const { state: t } = p(), i = c(() => t.step === "success" ? "Success" : t.step === "otp" ? "Enter verification code" : "Sign in", [t.step]);
-  return /* @__PURE__ */ o(e, { className: `${m.heading} ${r}`, ...n, children: s || i });
+  const { state: e } = a(), o = c(() => e.step === "success" ? "Success" : e.step === "otp" ? "Enter verification code" : "Sign in", [e.step]);
+  return /* @__PURE__ */ r(t, { className: `${m.heading} ${s}`, ...i, children: n || o });
 };
 export {
-  d as SignInTitle
+  p as SignInTitle
 };

package/dist/components/SignIn/index.js

@@ -1,28 +1,29 @@
-import { jsx as n, jsxs as i, Fragment as s } from "react/jsx-runtime";
+import { jsx as n, jsxs as r, Fragment as s } from "react/jsx-runtime";
 import "react";
-import { s as g } from "../../chunks/SignIn.module.Dl3CqKQ_.js";
-import { SignInDescription as p } from "./SignInDescription.js";
-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 { state: e } = S(), r = typeof o == "function" ? o(e) : o;
-  return /* @__PURE__ */ i("div", { className: `${g.signIn} ${t}`, children: [
-    r,
-    !r && /* @__PURE__ */ i(s, { children: [
-      /* @__PURE__ */ n(c, {}),
-      /* @__PURE__ */ n(a, {}),
+import { SignInDescription as g } from "./SignInDescription.js";
+import { SignInForm as c } from "./SignInForm.js";
+import { SignInImage as p } from "./SignInImage.js";
+import { SignInProvider as I, useSignInContext as S } from "./SignInProvider.js";
+import { SignInTitle as f } from "./SignInTitle.js";
+import '../../assets/SignIn.css';const a = {
+  "sign-in": "SignIn-module__sign-in___cYpee"
+}, l = ({ className: i = "", children: t, onSuccess: e }) => {
+  const { state: m } = S(), o = typeof t == "function" ? t(m) : t;
+  return /* @__PURE__ */ r("div", { className: `${a["sign-in"]} ${i}`, children: [
+    o,
+    !o && /* @__PURE__ */ r(s, { children: [
       /* @__PURE__ */ n(p, {}),
-      /* @__PURE__ */ n(I, { onSuccess: m })
+      /* @__PURE__ */ n(f, {}),
+      /* @__PURE__ */ n(g, {}),
+      /* @__PURE__ */ n(c, { onSuccess: e })
     ] })
   ] });
-}, $ = (t) => /* @__PURE__ */ n(f, { children: /* @__PURE__ */ n(l, { ...t }) });
+}, C = (i) => /* @__PURE__ */ n(I, { children: /* @__PURE__ */ n(l, { ...i }) });
 export {
-  $ as SignIn,
-  p as SignInDescription,
-  I as SignInForm,
-  c as SignInImage,
-  a as SignInTitle,
+  C as SignIn,
+  g as SignInDescription,
+  c as SignInForm,
+  p as SignInImage,
+  f as SignInTitle,
   S as useSignInContext
 };

package/dist/components/SignInModal/index.js

@@ -1,50 +1,50 @@
-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 { 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 "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 { useTheme as f } from "../ThemeProvider/index.js";
 import { SignInImage as M } from "../SignIn/SignInImage.js";
-import { SignInTitle as f } from "../SignIn/SignInTitle.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 '../../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 = {
+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: T,
-  signIn: C,
-  signInForm: x,
-  signInTitle: B,
-  signInDescription: F,
-  signInImage: W,
-  closeWrapper: j,
-  closeButton: X,
-  overlay: Z,
+  modal: C,
+  "sign-in": "SignInModal-module__sign-in___n05-5",
+  "sign-in-form": "SignInModal-module__sign-in-form___Jzx1-",
+  "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",
+  "close-button": "SignInModal-module__close-button___k1I5Q",
+  overlay: x,
   spacer: b
-}, V = ({ children: l, open: s, setIsOpen: a, onSuccess: e }) => {
-  const { cssVariables: t } = D();
-  return /* @__PURE__ */ o(g, { open: s, onOpenChange: a, children: [
-    /* @__PURE__ */ n(c, { asChild: !0, children: l || /* @__PURE__ */ n(r, { variant: "primary", className: i.trigger, children: "Sign In" }) }),
-    /* @__PURE__ */ n(m, { children: /* @__PURE__ */ o(_, { className: i.overlay, style: t, children: [
-      /* @__PURE__ */ n("div", { className: i.spacer }),
-      /* @__PURE__ */ n(d, { className: i.modal, children: /* @__PURE__ */ o(S, { onSuccess: e, className: i.signIn, children: [
-        /* @__PURE__ */ n("div", { className: i.closeWrapper, children: /* @__PURE__ */ n(I, { asChild: !0, children: /* @__PURE__ */ n(
+}, 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: [
+      /* @__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(
           r,
           {
             "aria-label": "Close",
             variant: "transparentSecondary",
-            className: `${i.closeButton}`,
-            children: /* @__PURE__ */ n(h, {})
+            className: `${n["close-button"]}`,
+            children: /* @__PURE__ */ i(h, {})
           }
         ) }) }),
-        /* @__PURE__ */ n("div", { className: i.signInImage, children: /* @__PURE__ */ n(M, {}) }),
-        /* @__PURE__ */ n("div", { className: i.signInTitle, children: /* @__PURE__ */ n(p, { asChild: !0, children: /* @__PURE__ */ n(f, {}) }) }),
-        /* @__PURE__ */ n(u, { asChild: !0, children: /* @__PURE__ */ n(v, { className: i.signInDescription }) }),
-        /* @__PURE__ */ n(N, { className: i.signInForm, onSuccess: e })
+        /* @__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(N, { className: n["sign-in-form"], onSuccess: e })
       ] }) })
     ] }) })
   ] });
 };
 export {
-  V as SignInModal
+  F as SignInModal
 };

package/dist/components/SignOutButton/index.js

@@ -3,14 +3,14 @@ import { useSignOut as r } from "@coinbase/cdp-hooks";
 import "react";
 import { Button as m } from "../Button/index.js";
 import "../../theme/theme.js";
-import '../../assets/SignOutButton.css';const g = "SignOutButton-module__signOutButton___WNhmy", c = {
-  signOutButton: g
-}, l = ({ children: t, variant: n = "primary", onSuccess: o }) => {
-  const u = r(), i = async () => {
-    await u(), o?.();
+import '../../assets/SignOutButton.css';const e = {
+  "sign-out-button": "SignOutButton-module__sign-out-button___qiybe"
+}, O = ({ children: t, variant: o = "primary", onSuccess: n }) => {
+  const i = r(), u = async () => {
+    await i(), n?.();
   };
-  return /* @__PURE__ */ s(m, { variant: n, className: c.signOutButton, onClick: i, children: t || "Sign out" });
+  return /* @__PURE__ */ s(m, { variant: o, className: e["sign-out-button"], onClick: u, children: t || "Sign out" });
 };
 export {
-  l as SignOutButton
+  O as SignOutButton
 };

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

@@ -5,9 +5,7 @@ export type ThemeProviderProps = {
     children: ReactNode;
     className?: string;
     style?: CSSProperties;
-    theme?: Partial<{
-        [K in keyof Theme]: Theme[K];
-    }>;
+    theme?: Partial<Theme>;
 };
 export interface ThemeContextValue {
     theme: Theme;

package/dist/components/ThemeProvider/index.js

@@ -1,10 +1,10 @@
 import { jsx as m } from "react/jsx-runtime";
-import { createContext as h, useMemo as s, useContext as u } from "react";
-import { flattenedTheme as n } from "../../theme/theme.js";
+import { createContext as p, useMemo as s, useContext as u } from "react";
+import { theme as n } from "../../theme/theme.js";
 import { themeToCssVariables as l } from "../../theme/utils.js";
-import '../../assets/ThemeProvider.css';const d = "ThemeProvider-module__wrapper___aXwhZ", w = {
-  wrapper: d
-}, a = h(void 0), _ = ({
+import '../../assets/ThemeProvider.css';const w = "ThemeProvider-module__wrapper___aXwhZ", d = {
+  wrapper: w
+}, a = p(void 0), _ = ({
   children: e,
   className: c = "",
   style: i,
@@ -13,14 +13,14 @@ import '../../assets/ThemeProvider.css';const d = "ThemeProvider-module__wrapper
   const t = s(
     () => o ? { ...n, ...o } : n,
     [o]
-  ), r = s(() => l(t), [t]), p = s(
+  ), r = s(() => l(t), [t]), h = s(
     () => ({
       theme: t,
       cssVariables: r
     }),
     [t, r]
   );
-  return /* @__PURE__ */ m(a.Provider, { value: p, children: /* @__PURE__ */ m("div", { className: `${w.wrapper} ${c}`, style: { ...i, ...r }, children: e }) });
+  return /* @__PURE__ */ m(a.Provider, { value: h, children: /* @__PURE__ */ m("div", { className: `${d.wrapper} ${c}`, style: { ...i, ...r }, children: e }) });
 }, C = () => {
   const e = u(a);
   if (!e)

package/dist/components/VisuallyHidden/index.js

@@ -1,8 +1,8 @@
 import { jsx as i } from "react/jsx-runtime";
 import "react";
-import '../../assets/VisuallyHidden.css';const d = "VisuallyHidden-module__visuallyHidden___KiAzg", n = {
-  visuallyHidden: d
-}, u = ({ as: s = "span", children: l }) => l ? /* @__PURE__ */ i(s, { className: n.visuallyHidden, children: l }) : null;
+import '../../assets/VisuallyHidden.css';const d = {
+  "visually-hidden": "VisuallyHidden-module__visually-hidden___qdUPg"
+}, a = ({ as: s = "span", children: l }) => l ? /* @__PURE__ */ i(s, { className: d["visually-hidden"], children: l }) : null;
 export {
-  u as VisuallyHidden
+  a as VisuallyHidden
 };