@coinbase/cdp-react 0.0.41 → 0.0.43

package/dist/assets/CountrySelect.css

@@ -0,0 +1 @@
+.CountrySelect-module__country-select-trigger___xGSAp{--cdp-web-button-ring-inset-color: var(--cdp-web-colors-input-border-default);--cdp-web-button-ring-inset-width: 1px;background-color:var(--cdp-web-colors-input-bg-default);border-radius:var(--cdp-web-borderRadius-input);color:var(--cdp-web-colors-input-text-default);font-family:var(--cdp-web-font-family-input);font-weight:500;text-align:left;justify-content:space-between}.CountrySelect-module__select-icon___wEQVx{transform:rotate(180deg);transition:transform .15s ease-in-out}.CountrySelect-module__country-select-trigger___xGSAp[data-state=open] .CountrySelect-module__select-icon___wEQVx{transform:rotate(0)}.CountrySelect-module__country-select-trigger___xGSAp:focus{outline:none}.CountrySelect-module__country-select-trigger___xGSAp:focus-visible{--cdp-web-button-ring-inset-color: var(--cdp-web-colors-input-border-focus);--cdp-web-button-ring-inset-width: 2px;outline:none}.CountrySelect-module__country-select-content___WSd9-{width:auto}.CountrySelect-module__country-select-item___Mr6JZ{display:flex;align-items:center;gap:.25em}.CountrySelect-module__flag___bNBsn{transform:translateY(.05em)}.CountrySelect-module__country-select-content___WSd9- .CountrySelect-module__country-select-item___Mr6JZ{gap:.5em}.CountrySelect-module__country-calling-code___d61ih{color:var(--cdp-web-colors-select-list-item-text-muted)}

package/dist/assets/PhoneNumberForm.css

@@ -1 +1 @@
-.PhoneNumberForm-module__form___ExO8G{display:flex;flex-direction:column;gap:1em}.PhoneNumberForm-module__server-error___AQcMg{justify-content:center}
+.PhoneNumberForm-module__form___ExO8G{display:flex;flex-direction:column;gap:1em}.PhoneNumberForm-module__server-error___AQcMg{justify-content:center}.PhoneNumberForm-module__phone-number-fieldset___0TsSH{border:0;padding:0;margin:0;min-width:0}

package/dist/assets/PhoneNumberInput.css

@@ -1 +1 @@
-.PhoneNumberInput-module__phone-number-input___mYty2{--cdp-web-input-ring-width: 1px;--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-default);box-sizing:border-box;display:flex;align-items:stretch;font-family:var(--cdp-web-font-family-input);font-size:var(--cdp-web-font-size-base);line-height:1.5;padding-left:1em;border-radius:var(--cdp-web-borderRadius-input);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:box-shadow .15s ease-in-out;width:100%}.PhoneNumberInput-module__phone-number-input___mYty2.PhoneNumberInput-module__invalid___zDA2p,.PhoneNumberInput-module__phone-number-input___mYty2:focus-within.PhoneNumberInput-module__invalid___zDA2p{--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-error)}.PhoneNumberInput-module__phone-number-input___mYty2.PhoneNumberInput-module__success___uPjMx{--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-success)}.PhoneNumberInput-module__phone-number-input___mYty2:focus-within{--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-focus);--cdp-web-input-ring-width: 2px}.PhoneNumberInput-module__phone-number-input___mYty2 .PhoneNumberInput-module__input___H-XG-{--cdp-web-input-ring-width: 0px;background-color:transparent;padding-left:.75em}.PhoneNumberInput-module__country-calling-code___N6zDW{display:flex;align-items:center;gap:.25rem}
+.PhoneNumberInput-module__phone-number-input___mYty2{--cdp-web-input-ring-width: 1px;--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-default);box-sizing:border-box;display:flex;gap:.5em;align-items:stretch;font-family:var(--cdp-web-font-family-input);font-size:var(--cdp-web-font-size-base);line-height:1.5;color:var(--cdp-web-colors-input-text-default);transition:box-shadow .15s ease-in-out;width:100%}.PhoneNumberInput-module__phone-number-input___mYty2.PhoneNumberInput-module__inline-country-calling-code___FFgtI{padding-left:1em;border-radius:var(--cdp-web-borderRadius-input);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;gap:0}.PhoneNumberInput-module__phone-number-input___mYty2.PhoneNumberInput-module__invalid___zDA2p,.PhoneNumberInput-module__phone-number-input___mYty2:focus-within.PhoneNumberInput-module__invalid___zDA2p{--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-error)}.PhoneNumberInput-module__phone-number-input___mYty2.PhoneNumberInput-module__success___uPjMx{--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-success)}.PhoneNumberInput-module__phone-number-input___mYty2:focus-within{--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-focus);--cdp-web-input-ring-width: 2px}.PhoneNumberInput-module__phone-number-input___mYty2.PhoneNumberInput-module__inline-country-calling-code___FFgtI .PhoneNumberInput-module__input___H-XG-{--cdp-web-input-ring-width: 0px;background-color:transparent;padding-left:.75em}.PhoneNumberInput-module__country-calling-code___N6zDW{display:flex;align-items:center;gap:.25em}

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

@@ -6,11 +6,11 @@ export interface AppConfig {
     appName?: string;
     appLogoUrl?: string;
     showCoinbaseFooter?: boolean;
-    authMethods?: AuthMethod[];
+    authMethods?: [AuthMethod, ...AuthMethod[]];
 }
 export type Config = AppConfig & CDPHooksConfig;
 export type CDPReactProviderProps = {
     config: Config;
 } & ThemeProviderProps;
 export declare const CDPReactProvider: ({ children, config, theme }: CDPReactProviderProps) => import("react/jsx-runtime").JSX.Element;
-export declare const useAppConfig: () => AppConfig;
+export declare const useAppConfig: () => Required<AppConfig>;

package/dist/components/CDPReactProvider/index.js

@@ -1,63 +1,77 @@
-import { jsx as t } from "react/jsx-runtime";
-import { CDPContext as A, CDPHooksProvider as O } from "@coinbase/cdp-hooks";
-import { createContext as b, useMemo as r, useContext as f } from "react";
-import { ThemeProvider as w } from "../ThemeProvider/index.js";
-const E = [
+import { jsx as c } from "react/jsx-runtime";
+import { CDPContext as L, CDPHooksProvider as O } from "@coinbase/cdp-hooks";
+import { createContext as v, useMemo as f, useContext as l } from "react";
+import { ThemeProvider as b } from "../ThemeProvider/index.js";
+const w = (o) => {
+  try {
+    return JSON.stringify(o);
+  } catch {
+  }
+  return "";
+}, T = [
   /** Email OTP method */
   "email",
   /** SMS OTP method */
   "sms"
-], F = ({ children: o, config: e, theme: n }) => {
+], _ = ({ children: o, config: r, theme: n }) => {
   const {
-    appName: i,
+    appName: a,
     appLogoUrl: s,
-    showCoinbaseFooter: a,
-    authMethods: p,
-    projectId: c,
-    useMock: C,
+    showCoinbaseFooter: h,
+    authMethods: i,
+    projectId: p,
+    useMock: e,
     debugging: u,
-    basePath: d,
+    basePath: g,
     ethereum: P,
     solana: x
-  } = e, { createOnLogin: m } = P ?? {}, { createOnLogin: g } = x ?? {}, v = r(
+  } = r, { createOnLogin: d } = P ?? {}, { createOnLogin: C } = x ?? {}, A = f(
     () => ({
-      projectId: c,
-      useMock: C,
+      projectId: p,
+      useMock: e,
       debugging: u,
-      basePath: d,
-      ethereum: { createOnLogin: m },
-      solana: { createOnLogin: g }
+      basePath: g,
+      ethereum: { createOnLogin: d },
+      solana: { createOnLogin: C }
     }),
-    [c, C, u, d, m, g]
-  ), L = r(
-    () => ({ appName: i, appLogoUrl: s, showCoinbaseFooter: a, authMethods: p }),
-    [i, s, a, p]
-  ), h = /* @__PURE__ */ t(M, { config: L, children: /* @__PURE__ */ t(w, { theme: n, children: o }) });
-  return f(A) ? h : /* @__PURE__ */ t(O, { config: v, children: h });
-}, l = b(void 0), D = {
+    [p, e, u, g, d, C]
+  ), m = /* @__PURE__ */ c(y, { config: { appName: a, appLogoUrl: s, showCoinbaseFooter: h, authMethods: i }, children: /* @__PURE__ */ c(b, { theme: n, children: o }) });
+  return l(L) ? m : /* @__PURE__ */ c(O, { config: A, children: m });
+}, M = v(void 0), t = {
   appName: "",
   appLogoUrl: "",
   showCoinbaseFooter: !0,
   authMethods: ["email"]
-}, M = ({ children: o, config: e }) => {
-  const n = r(
-    () => ({
+}, y = ({ children: o, config: r }) => {
+  const {
+    appName: n = t.appName,
+    appLogoUrl: a = t.appLogoUrl,
+    showCoinbaseFooter: s = t.showCoinbaseFooter,
+    authMethods: h = t.authMethods
+  } = r ?? {}, i = w(h), p = f(() => {
+    let e = ["email"];
+    try {
+      e = JSON.parse(i);
+    } catch {
+    }
+    return {
       app: {
-        ...D,
-        ...e
+        appName: n,
+        appLogoUrl: a,
+        showCoinbaseFooter: s,
+        authMethods: Array.isArray(e) && e?.length ? e : t.authMethods
       }
-    }),
-    [e]
-  );
-  return /* @__PURE__ */ t(l.Provider, { value: n, children: o });
-}, N = () => {
-  const o = f(l);
+    };
+  }, [n, a, s, i]);
+  return /* @__PURE__ */ c(M.Provider, { value: p, children: o });
+}, j = () => {
+  const o = l(M);
   if (!o)
     throw new Error("useAppConfig must be used within an AppConfigProvider");
   return o.app;
 };
 export {
-  E as AUTH_METHODS,
-  F as CDPReactProvider,
-  N as useAppConfig
+  T as AUTH_METHODS,
+  _ as CDPReactProvider,
+  j as useAppConfig
 };

package/dist/components/SignIn/flows/SignInWithSms.js

@@ -2942,7 +2942,7 @@ const Sd = ["phoneNumber", "otp"], Fd = ({ step: e, onSuccess: r, children: t })
   }, [f]), /* @__PURE__ */ S(
     be,
     {
-      autoFocus: !0,
+      autoFocus: "input[type='tel']",
       animateHeight: !1,
       items: Sd,
       initialEntered: !0,

package/dist/components/forms/CountrySelect/index.d.ts

@@ -0,0 +1,10 @@
+import { CountryCode } from '../../../data/countries';
+import { InputSize } from '../../../theme/theme';
+export interface CountrySelectProps {
+    className?: string;
+    size?: InputSize;
+    defaultValue?: CountryCode;
+    value?: CountryCode;
+    onValueChange?: (value: CountryCode) => void;
+}
+export declare const CountrySelect: ({ className, size, defaultValue, value, onValueChange, }: CountrySelectProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/CountrySelect/index.js

@@ -0,0 +1,57 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { SelectValue as m, SelectIcon as u } from "@radix-ui/react-select";
+import { Select as _, SelectTrigger as y, SelectContent as g, SelectItem as h } from "../Select/index.js";
+import { ButtonBase as p } from "../../ui/ButtonBase/index.js";
+import { VisuallyHidden as C } from "../../ui/VisuallyHidden/index.js";
+import { countries as s } from "../../../data/countries.js";
+import { IconChevronDown as S } from "../../../icons/IconChevronDown.js";
+import "../../../theme/theme.js";
+import '../../../assets/CountrySelect.css';const f = "CountrySelect-module__flag___bNBsn", c = {
+  "country-select-trigger": "CountrySelect-module__country-select-trigger___xGSAp",
+  "select-icon": "CountrySelect-module__select-icon___wEQVx",
+  "country-select-content": "CountrySelect-module__country-select-content___WSd9-",
+  "country-select-item": "CountrySelect-module__country-select-item___Mr6JZ",
+  flag: f,
+  "country-calling-code": "CountrySelect-module__country-calling-code___d61ih"
+}, N = s.sort((r, o) => r.name.localeCompare(o.name)), v = ({
+  className: r = "",
+  size: o,
+  defaultValue: a,
+  value: i,
+  onValueChange: d
+}) => {
+  const n = s.find((t) => t.code === (i ?? a));
+  return /* @__PURE__ */ l(
+    _,
+    {
+      name: "country-code",
+      defaultValue: a,
+      value: i,
+      onValueChange: d,
+      children: [
+        /* @__PURE__ */ e(y, { "aria-label": "Country / region", placeholder: "+1", children: /* @__PURE__ */ l(p, { className: `${c["country-select-trigger"]} ${r}`, size: o, children: [
+          /* @__PURE__ */ e(m, { "aria-label": n?.name ?? "Select a country", children: n && /* @__PURE__ */ l("span", { className: c["country-select-item"], children: [
+            /* @__PURE__ */ e("span", { "aria-hidden": "true", className: c.flag, children: n.flag }),
+            /* @__PURE__ */ e(C, { children: n.name }),
+            /* @__PURE__ */ l("span", { children: [
+              "+",
+              n.callingCode
+            ] })
+          ] }) }),
+          /* @__PURE__ */ e(u, { asChild: !0, children: /* @__PURE__ */ e(S, { className: c["select-icon"] }) })
+        ] }) }),
+        /* @__PURE__ */ e(g, { className: c["country-select-content"], children: N.map((t) => /* @__PURE__ */ e(h, { indicator: !0, value: t.code, children: /* @__PURE__ */ l("span", { className: c["country-select-item"], children: [
+          /* @__PURE__ */ e("span", { "aria-hidden": "true", className: c.flag, children: t.flag }),
+          /* @__PURE__ */ e("span", { children: t.name }),
+          /* @__PURE__ */ l("span", { className: c["country-calling-code"], children: [
+            "+",
+            t.callingCode
+          ] })
+        ] }) }, t.code)) })
+      ]
+    }
+  );
+};
+export {
+  v as CountrySelect
+};

package/dist/components/forms/PhoneNumberForm/index.d.ts

@@ -3,6 +3,7 @@ import { FormHTMLAttributes, ReactNode } from 'react';
 import { PhoneNumberInputProps } from '../PhoneNumberInput/PhoneNumberInput';
 export interface PhoneNumberFormProps extends Omit<FormHTMLAttributes<HTMLFormElement>, "children"> {
     countryCode: PhoneNumberInputProps["countryCode"];
+    countryOptions?: PhoneNumberInputProps["countryOptions"];
     error?: string | APIError;
     isPending?: boolean;
     onClearServerErrors?: () => void;
@@ -11,4 +12,4 @@ export interface PhoneNumberFormProps extends Omit<FormHTMLAttributes<HTMLFormEl
     phoneNumber: PhoneNumberInputProps["phoneNumber"];
     submitLabel?: ReactNode;
 }
-export declare const PhoneNumberForm: ({ className, countryCode, error, isPending, onCountryCodeChange, onPhoneNumberChange, phoneNumber, submitLabel, ...props }: PhoneNumberFormProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PhoneNumberForm: ({ className, countryCode, countryOptions, error, isPending, onCountryCodeChange, onPhoneNumberChange, phoneNumber, submitLabel, ...props }: PhoneNumberFormProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/PhoneNumberForm/index.js

@@ -1,68 +1,75 @@
-import { jsxs as _, jsx as e } from "react/jsx-runtime";
+import { jsxs as u, jsx as e } from "react/jsx-runtime";
 import "@coinbase/cdp-hooks";
-import { Form as g, FormSubmit as F } from "@radix-ui/react-form";
-import { useMemo as I } from "react";
-import { Field as E } from "../Field/index.js";
-import { PhoneNumberInput as S } from "../PhoneNumberInput/index.js";
-import { Button as x } from "../../ui/Button/index.js";
-import { ServerError as C } from "../../ui/ServerError/index.js";
-import { usePhoneNumberValidators as M } from "../../../hooks/usePhoneNumberValidators.js";
-import '../../../assets/PhoneNumberForm.css';const U = "PhoneNumberForm-module__form___ExO8G", s = {
-  form: U,
-  "server-error": "PhoneNumberForm-module__server-error___AQcMg"
-}, G = ({
-  className: t = "",
-  countryCode: n = "US",
+import { Form as I, FormSubmit as S } from "@radix-ui/react-form";
+import { useMemo as C, Fragment as E } from "react";
+import { Field as x } from "../Field/index.js";
+import { PhoneNumberInput as y } from "../PhoneNumberInput/index.js";
+import { Button as M } from "../../ui/Button/index.js";
+import { ServerError as U } from "../../ui/ServerError/index.js";
+import { VisuallyHidden as w } from "../../ui/VisuallyHidden/index.js";
+import { usePhoneNumberValidators as T } from "../../../hooks/usePhoneNumberValidators.js";
+import '../../../assets/PhoneNumberForm.css';const j = "PhoneNumberForm-module__form___ExO8G", m = {
+  form: j,
+  "server-error": "PhoneNumberForm-module__server-error___AQcMg",
+  "phone-number-fieldset": "PhoneNumberForm-module__phone-number-fieldset___0TsSH"
+}, q = ({ children: n }) => /* @__PURE__ */ u("fieldset", { className: m["phone-number-fieldset"], children: [
+  /* @__PURE__ */ e("legend", { children: /* @__PURE__ */ e(w, { children: "International phone number" }) }),
+  n
+] }), D = ({
+  className: n = "",
+  countryCode: t = "US",
+  countryOptions: o = !0,
   error: r,
-  isPending: u,
-  onCountryCodeChange: l,
-  onPhoneNumberChange: a,
-  phoneNumber: h,
-  submitLabel: d = "Continue",
-  ...p
+  isPending: h,
+  onCountryCodeChange: a,
+  onPhoneNumberChange: d,
+  phoneNumber: p,
+  submitLabel: b = "Continue",
+  ...v
 }) => {
   const {
-    isInvalidCountry: v,
-    isInvalidLength: b,
-    isInvalidNumber: c,
-    isInvalidTooShort: f,
-    isInvalidTooLong: P,
-    isInvalidPhoneNumberError: i
-  } = M({ countryCode: n }), o = I(() => r && i(r) ? "Use a valid phone number" : "", [r, i]), N = !!r && !o;
-  return /* @__PURE__ */ _(g, { className: `${s.form} ${t}`, ...p, children: [
-    /* @__PURE__ */ e(
-      E,
+    isInvalidCountry: f,
+    isInvalidLength: c,
+    isInvalidNumber: _,
+    isInvalidTooShort: P,
+    isInvalidTooLong: N,
+    isInvalidPhoneNumberError: s
+  } = T({ countryCode: t }), i = C(() => r && s(r) ? "Use a valid phone number" : "", [r, s]), g = !!r && !i, F = (typeof o == "boolean" ? o : o.length > 0) ? q : E;
+  return /* @__PURE__ */ u(I, { className: `${m.form} ${n}`, ...v, children: [
+    /* @__PURE__ */ e(F, { children: /* @__PURE__ */ e(
+      x,
       {
         label: "Phone number",
         name: "phone",
-        inlineError: o,
+        inlineError: i,
         validators: [
           ["valueMissing", "Phone number is required"],
           ["typeMismatch", "Use a valid phone number"],
-          [c, "Use a valid phone number"],
-          [v, "Country is not supported"],
-          [f, "Phone number is too short"],
-          [P, "Phone number is too long"],
-          [b, "Phone number is the wrong length"]
+          [_, "Use a valid phone number"],
+          [f, "Country is not supported"],
+          [P, "Phone number is too short"],
+          [N, "Phone number is too long"],
+          [c, "Phone number is the wrong length"]
         ],
-        children: (m) => /* @__PURE__ */ e(
-          S,
+        children: (l) => /* @__PURE__ */ e(
+          y,
           {
-            "aria-invalid": !(m === void 0 || m.valid) || !!o,
+            "aria-invalid": !(l === void 0 || l.valid) || !!i,
             autoComplete: "tel-national",
-            phoneNumber: h,
-            onPhoneNumberChange: a,
-            countryCode: n,
-            onCountryCodeChange: l,
+            countryOptions: o,
+            phoneNumber: p,
+            onPhoneNumberChange: d,
+            countryCode: t,
+            onCountryCodeChange: a,
             required: !0
           }
         )
       }
-    ),
-    N && /* @__PURE__ */ e(C, { error: r, className: s["server-error"] }),
-    /* @__PURE__ */ e(F, { asChild: !0, children: /* @__PURE__ */ e(x, { type: "submit", isPending: u, children: d }) })
+    ) }),
+    g && /* @__PURE__ */ e(U, { error: r, className: m["server-error"] }),
+    /* @__PURE__ */ e(S, { asChild: !0, children: /* @__PURE__ */ e(M, { type: "submit", isPending: h, children: b }) })
   ] });
 };
 export {
-  G as PhoneNumberForm
+  D as PhoneNumberForm
 };

package/dist/components/forms/PhoneNumberInput/index.d.ts

@@ -1,10 +1,12 @@
 import { CountryCode } from 'libphonenumber-js';
 import { InputProps } from '../Input/Input';
+import { CountryOption } from '../../../data/countries';
 import { PhoneNumber } from '../../../utils/parseValuesFromPhoneNumber';
 export interface PhoneNumberInputProps extends Omit<InputProps, "value" | "onChange"> {
-    onCountryCodeChange: (newCountry: CountryCode) => void;
+    onCountryCodeChange?: (newCountry: CountryCode) => void;
     countryCode?: CountryCode;
+    countryOptions?: boolean | CountryOption[];
     onPhoneNumberChange: (phoneNumber: PhoneNumber) => void;
     phoneNumber: PhoneNumber;
 }
-export declare const PhoneNumberInput: ({ autoComplete, className, countryCode, onCountryCodeChange, onPhoneNumberChange, phoneNumber, ...props }: PhoneNumberInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PhoneNumberInput: import('react').ForwardRefExoticComponent<PhoneNumberInputProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/forms/PhoneNumberInput/index.js

@@ -1,76 +1,100 @@
-import { jsxs as o, jsx as c } from "react/jsx-runtime";
+import { jsxs as _, jsx as i } from "react/jsx-runtime";
 import "libphonenumber-js";
-import { useCallback as f, useEffect as y } from "react";
-import { Input as C } from "../Input/index.js";
-import { VisuallyHidden as x } from "../../ui/VisuallyHidden/index.js";
-import { countries as D } from "../../../data/countries.js";
-import { usePhoneNumberFormatter as $ } from "./usePhoneNumberFormatter.js";
-import '../../../assets/PhoneNumberInput.css';const j = "PhoneNumberInput-module__invalid___zDA2p", V = "PhoneNumberInput-module__success___uPjMx", z = "PhoneNumberInput-module__input___H-XG-", l = {
+import { forwardRef as R, useRef as S, useCallback as d, useMemo as w, useEffect as z } from "react";
+import { CountrySelect as B } from "../CountrySelect/index.js";
+import { Input as H } from "../Input/index.js";
+import { VisuallyHidden as M } from "../../ui/VisuallyHidden/index.js";
+import { countries as W } from "../../../data/countries.js";
+import { usePhoneNumberFormatter as k } from "./usePhoneNumberFormatter.js";
+import '../../../assets/PhoneNumberInput.css';const A = "PhoneNumberInput-module__invalid___zDA2p", E = "PhoneNumberInput-module__success___uPjMx", G = "PhoneNumberInput-module__input___H-XG-", l = {
   "phone-number-input": "PhoneNumberInput-module__phone-number-input___mYty2",
-  invalid: j,
-  success: V,
-  input: z,
+  "inline-country-calling-code": "PhoneNumberInput-module__inline-country-calling-code___FFgtI",
+  invalid: A,
+  success: E,
+  input: G,
   "country-calling-code": "PhoneNumberInput-module__country-calling-code___N6zDW"
-}, G = ({
-  autoComplete: a = "tel-national",
-  className: h = "",
-  countryCode: s = "US",
-  onCountryCodeChange: r,
-  onPhoneNumberChange: i,
-  phoneNumber: u,
-  ...t
-}) => {
-  const {
-    formatBeforePhoneNumberChange: m,
-    formatBeforeCountryCodeChange: d,
-    placeholder: v,
-    formattedDisplayNumber: b
-  } = $(u.value, s), g = f(
-    (e) => {
-      let n = e.target.value.replace(/\D/g, "");
-      n === u.value && (n = n.slice(0, -1));
-      const P = m(n);
-      i?.(P);
-    },
-    [m, i, u]
-  ), _ = f(
-    (e) => {
-      const n = d(e);
-      r(e), i?.(n);
-    },
-    [d, r, i]
-  ), p = D.find((e) => e.code === s), N = t["aria-invalid"] && t["aria-invalid"] !== "false", I = t["data-success"] && t["data-success"] !== "false";
-  return y(() => {
-    _(s);
-  }, [s, _]), /* @__PURE__ */ o(
-    "div",
-    {
-      className: `${l["phone-number-input"]} ${N ? l.invalid : ""} ${I ? l.success : ""} ${h}`,
-      children: [
-        p && /* @__PURE__ */ c(B, { country: p }),
-        /* @__PURE__ */ c(
-          C,
-          {
-            ...t,
-            className: l.input,
-            autoComplete: a,
-            onChange: g,
-            placeholder: v,
-            type: "tel",
-            value: b
-          }
-        )
-      ]
-    }
-  );
-}, B = ({ country: a }) => /* @__PURE__ */ o("span", { className: l["country-calling-code"], children: [
-  /* @__PURE__ */ c("span", { "aria-hidden": "true", children: a.flag }),
-  /* @__PURE__ */ c(x, { children: a.name }),
-  /* @__PURE__ */ o("span", { children: [
+}, T = R(
+  ({
+    autoComplete: u = "tel-national",
+    className: h = "",
+    countryCode: n = "US",
+    countryOptions: p = !0,
+    onCountryCodeChange: g,
+    onPhoneNumberChange: c,
+    phoneNumber: f,
+    ...a
+  }, o) => {
+    const b = S(null), C = d(
+      (e) => {
+        b.current = e, o && (typeof o == "function" ? o(e) : o.current = e);
+      },
+      [o]
+    ), {
+      formatBeforePhoneNumberChange: v,
+      formatBeforeCountryCodeChange: N,
+      placeholder: P,
+      formattedDisplayNumber: V
+    } = k(f.value, n), j = d(
+      (e) => {
+        let t = e.target.value.replace(/\D/g, "");
+        t === f.value && (t = t.slice(0, -1));
+        const F = v(t);
+        c?.(F);
+      },
+      [v, c, f]
+    ), r = d(
+      (e) => {
+        const t = N(e);
+        g?.(e), c?.(t);
+      },
+      [N, g, c]
+    ), x = d(
+      (e) => {
+        r(e), setTimeout(() => {
+          b.current?.focus();
+        }, 0);
+      },
+      [r]
+    ), s = typeof p == "boolean" ? p : p.length > 0, m = !s && n ? W.find((e) => e.code === n) : void 0, y = a["aria-invalid"] && a["aria-invalid"] !== "false", I = a["data-success"] && a["data-success"] !== "false", D = w(() => {
+      const e = [l["phone-number-input"], h];
+      return y && e.push(l.invalid), I && e.push(l.success), !s && m && e.push(l["inline-country-calling-code"]), e.join(" ");
+    }, [y, I, h, m, s]);
+    return z(() => {
+      r(n);
+    }, [n, r]), /* @__PURE__ */ _("div", { className: D, children: [
+      !s && m && /* @__PURE__ */ i(U, { country: m }),
+      s && /* @__PURE__ */ i(
+        B,
+        {
+          defaultValue: n,
+          onValueChange: x
+        }
+      ),
+      /* @__PURE__ */ i(
+        H,
+        {
+          ...a,
+          ref: C,
+          className: l.input,
+          autoComplete: u,
+          onChange: j,
+          placeholder: P,
+          type: "tel",
+          value: V
+        }
+      )
+    ] });
+  }
+);
+T.displayName = "PhoneNumberInput";
+const U = ({ country: u }) => /* @__PURE__ */ _("span", { className: l["country-calling-code"], children: [
+  /* @__PURE__ */ i("span", { "aria-hidden": "true", children: u.flag }),
+  /* @__PURE__ */ i(M, { children: u.name }),
+  /* @__PURE__ */ _("span", { children: [
     "+",
-    a.callingCode
+    u.callingCode
   ] })
 ] });
 export {
-  G as PhoneNumberInput
+  T as PhoneNumberInput
 };

package/dist/components/forms/PhoneNumberInput/maskOverride.js

@@ -49,6 +49,16 @@ const n = (r) => r.startsWith("1") ? r.slice(1) : r, i = {
      */
     prefix: "0",
     maxLength: 11
+  },
+  91: {
+    /**
+     * India phone number validation:
+     *
+     * Indian phone numbers must be exactly 10 digits (excluding country code).
+     * libphonenumber-js allows 8-12 digits, but Indian mobile numbers are always 10 digits.
+     * This override ensures the input is limited to exactly 10 digits.
+     */
+    maxLength: 10
   }
 }, a = (r) => {
   if (!r)

package/dist/components/ui/SwitchTransition/index.d.ts

@@ -3,9 +3,9 @@ import { TransitionMapOptions, TransitionMapResult, TransitionState } from 'reac
 export interface SwitchTransitionRef<T extends Key> {
     transition: TransitionMapResult<T>;
 }
-export interface SwitchTransitionProps<T extends Key> extends Omit<HTMLAttributes<HTMLElement>, "children">, TransitionMapOptions<T> {
+export interface SwitchTransitionProps<T extends Key> extends Omit<HTMLAttributes<HTMLElement>, "children" | "autoFocus">, TransitionMapOptions<T> {
     animateHeight?: boolean;
-    autoFocus?: boolean;
+    autoFocus?: boolean | string;
     as?: ElementType;
     children: (props: {
         "data-index": number;

package/dist/components/ui/SwitchTransition/index.js

@@ -1,155 +1,153 @@
-import { jsx as h, Fragment as G } from "react/jsx-runtime";
-import { useRef as R, useId as H, useState as _, useImperativeHandle as J, useLayoutEffect as j, useEffect as P } from "react";
-import { useTransitionMap as Q } from "react-transition-state";
-import '../../../assets/SwitchTransition.css';const U = {
+import { jsx as b, Fragment as H } from "react/jsx-runtime";
+import { useRef as R, useId as J, useState as _, useImperativeHandle as P, useLayoutEffect as j, useEffect as Q } from "react";
+import { useTransitionMap as U } from "react-transition-state";
+import '../../../assets/SwitchTransition.css';const V = {
   "transition-wrapper": "SwitchTransition-module__transition-wrapper___jrI35"
-}, V = (b) => {
+}, W = (v) => {
   const {
     children: n,
-    index: d,
-    itemKey: r,
-    initialEntered: l,
-    setItem: u,
-    deleteItem: f,
-    stateMap: v,
-    transitionName: y,
-    parentKey: p
-  } = b;
-  P(() => (u(r, { initialEntered: l }), () => {
-    f(r);
-  }), [r, l, u, f]);
-  const { isEnter: m, isMounted: I, isResolved: w, status: x } = v.get(r) || {};
-  return I ? n({
-    "data-index": d,
-    inert: !m,
-    itemKey: r,
-    "data-transition": y,
-    "data-status": x,
-    "data-is-enter": m,
-    "data-is-resolved": w,
-    "data-parent": p
+    index: r,
+    itemKey: i,
+    initialEntered: u,
+    setItem: f,
+    deleteItem: p,
+    stateMap: y,
+    transitionName: I,
+    parentKey: m
+  } = v;
+  Q(() => (f(i, { initialEntered: u }), () => {
+    p(i);
+  }), [i, u, f, p]);
+  const { isEnter: h, isMounted: w, isResolved: x, status: g } = y.get(i) || {};
+  return w ? n({
+    "data-index": r,
+    inert: !h,
+    itemKey: i,
+    "data-transition": I,
+    "data-status": g,
+    "data-is-enter": h,
+    "data-is-resolved": x,
+    "data-parent": m
   }) : null;
-}, Z = ({
-  allowMultiple: b,
+}, k = ({
+  allowMultiple: v,
   animateHeight: n,
-  autoFocus: d,
-  initialEntered: r,
-  as: l = "div",
-  children: u,
-  className: f = "",
-  enter: v,
-  exit: y,
-  items: p,
-  mountOnEnter: m,
-  onStateChange: I,
-  preEnter: w,
-  preExit: x,
+  autoFocus: r,
+  initialEntered: i,
+  as: u = "div",
+  children: f,
+  className: p = "",
+  enter: y,
+  exit: I,
+  items: m,
+  mountOnEnter: h,
+  onStateChange: w,
+  preEnter: x,
+  preExit: g,
   style: q,
   timeout: e = 200,
-  transitionName: T,
+  transitionName: $,
   transitionRef: z,
   unmountOnExit: L,
-  ...$
+  ...E
 }) => {
-  const N = R(p[0]), O = H(), s = $.id || O, [E, A] = _(null), [S, C] = _(null), g = R(null), o = Q({
-    allowMultiple: b,
+  const N = R(m[0]), O = J(), o = E.id || O, [S, A] = _(null), [C, K] = _(null), T = R(null), a = U({
+    allowMultiple: v,
     initialEntered: !1,
-    mountOnEnter: m,
+    mountOnEnter: h,
     unmountOnExit: L,
-    preEnter: w,
-    preExit: x,
-    enter: v,
-    exit: y,
+    preEnter: x,
+    preExit: g,
+    enter: y,
+    exit: I,
     timeout: e,
-    onStateChange: I
+    onStateChange: w
   });
-  J(z, () => ({
-    transition: n || d ? {
-      ...o,
+  P(z, () => ({
+    transition: n || r ? {
+      ...a,
       toggle: (t) => {
-        o.toggle(t), A(t);
+        a.toggle(t), A(t);
       }
-    } : o
+    } : a
   })), j(() => {
     if (!n)
       return;
     let t = null;
-    const i = g.current;
-    if (!i)
+    const s = T.current;
+    if (!s)
       return;
-    const c = setTimeout(() => {
-      const a = i.querySelector(
-        `[data-is-enter="true"][data-parent="${s}"]`
+    const d = setTimeout(() => {
+      const c = s.querySelector(
+        `[data-is-enter="true"][data-parent="${o}"]`
       );
-      if (!a)
+      if (!c)
         return;
-      const M = a?.scrollHeight ?? null;
-      M !== null && C(M), t = new ResizeObserver((B) => {
+      const l = c?.scrollHeight ?? null;
+      l !== null && K(l), t = new ResizeObserver((B) => {
         for (const D of B) {
-          const F = D.contentRect.height;
-          C(F);
+          const G = D.contentRect.height;
+          K(G);
         }
-      }), t.observe(a);
+      }), t.observe(c);
     }, 0);
     return () => {
-      c && clearTimeout(c), t?.disconnect();
+      d && clearTimeout(d), t?.disconnect();
     };
-  }, [n, E, s]), j(() => {
-    if (!d)
+  }, [n, S, o]), j(() => {
+    if (!r)
       return;
     const t = typeof e == "number" ? e : e.enter;
     if (t === void 0)
       return;
-    const i = setTimeout(() => {
-      const c = g.current?.querySelector(
-        `[data-is-enter="true"][data-parent="${s}"]`
+    const s = setTimeout(() => {
+      const d = T.current?.querySelector(
+        `[data-is-enter="true"][data-parent="${o}"]`
       );
-      if (!c)
+      if (!d)
         return;
-      const a = c.querySelector(
-        'input, textarea, select, button, [tabindex]:not([tabindex="-1"])'
-      );
-      a && a.focus();
+      const c = typeof r == "string" ? r : 'input, textarea, select, button, [tabindex]:not([tabindex="-1"])', l = d.querySelector(c);
+      l && l.focus();
     }, t);
     return () => {
-      i && clearTimeout(i);
+      s && clearTimeout(s);
     };
-  }, [d, E, s, e]);
-  const K = /* @__PURE__ */ h(G, { children: p.map((t, i) => /* @__PURE__ */ h(
-    V,
+  }, [r, S, o, e]);
+  const M = /* @__PURE__ */ b(H, { children: m.map((t, s) => /* @__PURE__ */ b(
+    W,
     {
-      index: i,
+      index: s,
       itemKey: t,
-      setItem: o.setItem,
-      deleteItem: o.deleteItem,
-      stateMap: o.stateMap,
-      initialEntered: r ? N.current === t : void 0,
-      transitionName: T,
-      parentKey: s,
-      children: u
+      setItem: a.setItem,
+      deleteItem: a.deleteItem,
+      stateMap: a.stateMap,
+      initialEntered: i ? N.current === t : void 0,
+      transitionName: $,
+      parentKey: o,
+      children: f
     },
     t
   )) });
-  return /* @__PURE__ */ h(
-    l,
+  return /* @__PURE__ */ b(
+    u,
     {
-      ...$,
-      id: s,
-      ref: g,
-      "data-transition": T || void 0,
+      ...E,
+      id: o,
+      ref: T,
+      "data-transition": $ || void 0,
       "data-animate-height": n,
-      className: `${U["transition-wrapper"]} ${f}`,
+      className: `${V["transition-wrapper"]} ${p}`,
       style: {
         ...q,
         "--cdp-web-transition-enter-timeout": typeof e == "object" ? `${e.enter ?? 200}ms` : void 0,
         "--cdp-web-transition-exit-timeout": typeof e == "object" ? `${e.exit ?? 200}ms` : void 0,
         "--cdp-web-transition-timeout": typeof e == "number" ? `${e}ms` : void 0,
-        "--cdp-web-transition-height": n && S ? `${S}px` : void 0
+        "--cdp-web-transition-height": n && C ? `${C}px` : void 0
       },
-      children: n ? /* @__PURE__ */ h("div", { children: K }) : K
+      children: n ? /* @__PURE__ */ b("div", { children: M }) : M
     }
   );
 };
 export {
-  Z as SwitchTransition
+  k as SwitchTransition
 };

package/dist/data/countries.js

@@ -1,17 +1,26 @@
-import { getCountries as e, getCountryCallingCode as a } from "libphonenumber-js";
+import { getCountries as a, getCountryCallingCode as C } from "libphonenumber-js";
 import { countryNames as r } from "./countryNames.js";
-const l = ["CU", "ET", "IR", "KP", "KZ", "MM", "RU", "SY"], i = "US", o = {
+const e = ["CU", "ET", "IR", "KP", "KZ", "MM", "RU", "SY"], i = "US", o = {
+  AE: "🇦🇪",
+  BR: "🇧🇷",
+  CA: "🇨🇦",
+  CO: "🇨🇴",
+  GB: "🇬🇧",
+  IN: "🇮🇳",
+  KE: "🇰🇪",
+  MX: "🇲🇽",
+  PH: "🇵🇭",
   US: "🇺🇸"
 }, s = (n) => {
   try {
-    return a(n);
+    return C(n);
   } catch {
     return;
   }
-}, u = e().map((n) => {
-  const t = l.includes(n);
+}, u = a().map((n) => {
+  const t = e.includes(n);
   return {
-    callingCode: a(n),
+    callingCode: C(n),
     code: n,
     flag: t || !o[n] ? "" : o[n],
     name: t || !r[`language${n}`] ? "" : r[`language${n}`]
@@ -19,7 +28,7 @@ const l = ["CU", "ET", "IR", "KP", "KZ", "MM", "RU", "SY"], i = "US", o = {
 }).filter((n) => !!n.flag && !!n.name);
 export {
   i as DEFAULT_COUNTRY_CODE,
-  l as OFAC_BLOCKED_COUNTRIES,
+  e as OFAC_BLOCKED_COUNTRIES,
   u as countries,
   s as nonThrowingGetCountryCallingCode
 };

package/dist/data/countryNames.js

@@ -1,6 +1,15 @@
-const t = {
+const a = {
+  languageAE: "United Arab Emirates",
+  languageBR: "Brazil",
+  languageCA: "Canada",
+  languageCO: "Colombia",
+  languageGB: "United Kingdom",
+  languageIN: "India",
+  languageKE: "Kenya",
+  languageMX: "Mexico",
+  languagePH: "Philippines",
   languageUS: "United States"
 };
 export {
-  t as countryNames
+  a as countryNames
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cdp-react",
-  "version": "0.0.41",
+  "version": "0.0.43",
   "type": "module",
   "dependencies": {
     "@internationalized/number": "3.6.4",
@@ -14,8 +14,8 @@
   },
   "peerDependencies": {
     "react": ">=18.2.0",
-    "@coinbase/cdp-core": "^0.0.41",
-    "@coinbase/cdp-hooks": "^0.0.41"
+    "@coinbase/cdp-core": "^0.0.43",
+    "@coinbase/cdp-hooks": "^0.0.43"
   },
   "devDependencies": {
     "@size-limit/preset-big-lib": "^11.2.0",
@@ -45,8 +45,8 @@
     "vite": "^7.0.4",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
-    "@coinbase/cdp-core": "^0.0.41",
-    "@coinbase/cdp-hooks": "^0.0.41"
+    "@coinbase/cdp-hooks": "^0.0.43",
+    "@coinbase/cdp-core": "^0.0.43"
   },
   "size-limit": [
     {
@@ -61,7 +61,7 @@
       "path": "./dist/components/SignIn/index.js",
       "import": "{ SignIn }",
       "running": false,
-      "limit": "65 KB"
+      "limit": "80 KB"
     }
   ],
   "files": [
@@ -119,7 +119,8 @@
         "types": "./dist/theme/*.d.ts",
         "default": "./dist/theme/*.js"
       }
-    }
+    },
+    "./package.json": "./package.json"
   },
   "scripts": {
     "build": "pnpm run check:types && vite build",