@coinbase/cdp-react 0.0.17 → 0.0.19

package/dist/icons/IconPhone.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export declare const IconPhone: (props: Omit<SVGProps<SVGSVGElement>, "viewBox">) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/IconPhone.js

@@ -0,0 +1,7 @@
+import { jsx as o } from "react/jsx-runtime";
+import "react";
+import { SvgIcon as L } from "./SvgIcon.js";
+const e = (r) => /* @__PURE__ */ o(L, { width: "20", height: "20", viewBox: "1 1 20 18", fill: "currentColor", ...r, children: /* @__PURE__ */ o("path", { d: "M1.1491 -0.00488281H8.45971L9.66658 6.37031L4.99795 10.1828C6.38698 12.6261 8.42293 14.6527 10.8728 16.0291L14.6205 11.4246L20.9883 12.6341V19.8006L19.7231 19.9414L19.7044 19.9428C19.2823 19.9737 18.8499 19.9951 18.4114 19.9951C8.78359 19.9951 0.988281 12.1853 0.988281 2.55472C0.988281 2.00318 1.00905 1.45404 1.06228 0.899562L1.1491 -0.00488281ZM12.7308 16.9147C14.4886 17.6119 16.4051 17.9951 18.4114 17.9951C18.6019 17.9951 18.794 17.9904 18.9883 17.982V14.2899L15.4189 13.612L12.7308 16.9147ZM4.10333 8.33119L7.48023 5.57357L6.8028 1.99512H2.99675C2.99096 2.17961 2.98828 2.36593 2.98828 2.55472C2.98828 4.59716 3.38415 6.54689 4.10333 8.33119Z" }) });
+export {
+  e as IconPhone
+};

package/dist/icons/IconXMark.js

@@ -1,11 +1,12 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import "react";
-import { SvgIcon as L } from "./SvgIcon.js";
-const n = (o) => /* @__PURE__ */ r(L, { width: "15", height: "14", viewBox: "0 0 15 14", ...o, children: /* @__PURE__ */ r(
+import { SvgIcon as e } from "./SvgIcon.js";
+const n = (r) => /* @__PURE__ */ o(e, { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", ...r, children: /* @__PURE__ */ o(
   "path",
   {
-    d: "M6.85395 6.99516L0.98877 1.12998L2.12364 -0.00488281L7.98881 5.86029L13.854 -0.00488281L14.9889 1.12998L9.12368 6.99516L14.9888 12.8602L13.8539 13.9951L7.98881 8.13003L2.12372 13.9951L0.988857 12.8602L6.85395 6.99516Z",
-    fill: "currentColor"
+    fillRule: "evenodd",
+    d: "M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z",
+    clipRule: "evenodd"
   }
 ) });
 export {

package/dist/icons/index.d.ts

@@ -1,4 +1,7 @@
+export * from './IconArrowLeft';
 export * from './IconCheckCircle';
+export * from './IconEnvelope';
 export * from './IconExclamationCircle';
 export * from './IconLock';
+export * from './IconPhone';
 export * from './IconXMark';

package/dist/icons/index.js

@@ -1,10 +1,16 @@
-import { IconCheckCircle as c } from "./IconCheckCircle.js";
-import { IconExclamationCircle as m } from "./IconExclamationCircle.js";
-import { IconLock as t } from "./IconLock.js";
-import { IconXMark as f } from "./IconXMark.js";
+import { IconArrowLeft as e } from "./IconArrowLeft.js";
+import { IconCheckCircle as n } from "./IconCheckCircle.js";
+import { IconEnvelope as f } from "./IconEnvelope.js";
+import { IconExclamationCircle as p } from "./IconExclamationCircle.js";
+import { IconLock as I } from "./IconLock.js";
+import { IconPhone as a } from "./IconPhone.js";
+import { IconXMark as k } from "./IconXMark.js";
 export {
-  c as IconCheckCircle,
-  m as IconExclamationCircle,
-  t as IconLock,
-  f as IconXMark
+  e as IconArrowLeft,
+  n as IconCheckCircle,
+  f as IconEnvelope,
+  p as IconExclamationCircle,
+  I as IconLock,
+  a as IconPhone,
+  k as IconXMark
 };

package/dist/index.js

@@ -1,58 +1,71 @@
-import { CDPReactProvider as e, useAppConfig as t } from "./components/CDPReactProvider/index.js";
-import { AuthButton as m } from "./components/AuthButton/index.js";
-import { SendTransactionButton as f } from "./components/SendTransactionButton/index.js";
-import { SignIn as x } from "./components/SignIn/index.js";
-import { useSignInReducer as c } from "./components/SignIn/useSignInReducer.js";
-import { SignOutButton as l } from "./components/SignOutButton/index.js";
-import { SignInModal as g } from "./components/SignInModal/index.js";
-import { ThemeProvider as u, useTheme as C } from "./components/ThemeProvider/index.js";
-import { cssVariables as h } from "./theme/cssVariables.js";
-import { theme as T } from "./theme/theme.js";
-import { colors as E, colorsBase as b, colorsComponents as v, colorsSemantic as A, font as M, tokens as P } from "./theme/tokens.js";
-import { flattenTokensObject as F, themeToCssVariables as O } from "./theme/utils.js";
-import { IconCheckCircle as V } from "./icons/IconCheckCircle.js";
-import { IconExclamationCircle as w } from "./icons/IconExclamationCircle.js";
-import { IconLock as U } from "./icons/IconLock.js";
-import { IconXMark as q } from "./icons/IconXMark.js";
-import { getMessageFromUnknownError as z } from "./utils/getMessageFromUnknownError.js";
-import { isApiError as H } from "./utils/isApiError.js";
-import { isEmailInvalid as K } from "./utils/isEmailInvalid.js";
-import { SignInDescription as Q } from "./components/SignIn/SignInDescription.js";
-import { SignInForm as Y } from "./components/SignIn/SignInForm.js";
-import { SignInImage as _ } from "./components/SignIn/SignInImage.js";
-import { SignInTitle as oo } from "./components/SignIn/SignInTitle.js";
-import { useSignInContext as eo } from "./components/SignIn/SignInProvider.js";
+import { AUTH_METHODS as e, CDPReactProvider as t, useAppConfig as n } from "./components/CDPReactProvider/index.js";
+import { AuthButton as p } from "./components/AuthButton/index.js";
+import { SendTransactionButton as x } from "./components/SendTransactionButton/index.js";
+import { SignIn as s } from "./components/SignIn/index.js";
+import { useSignInReducer as I } from "./components/SignIn/useSignInReducer.js";
+import { SignOutButton as g } from "./components/SignOutButton/index.js";
+import { SignInModal as S } from "./components/SignInModal/index.js";
+import { ThemeProvider as h, useTheme as C } from "./components/ThemeProvider/index.js";
+import { cssVariables as d } from "./theme/cssVariables.js";
+import { theme as B } from "./theme/theme.js";
+import { colors as E, colorsBase as M, colorsComponents as v, colorsSemantic as P, font as b, tokens as D } from "./theme/tokens.js";
+import { flattenTokensObject as O, themeToCssVariables as w } from "./theme/utils.js";
+import { IconArrowLeft as L } from "./icons/IconArrowLeft.js";
+import { IconCheckCircle as U } from "./icons/IconCheckCircle.js";
+import { IconEnvelope as j } from "./icons/IconEnvelope.js";
+import { IconExclamationCircle as _ } from "./icons/IconExclamationCircle.js";
+import { IconLock as y } from "./icons/IconLock.js";
+import { IconPhone as G } from "./icons/IconPhone.js";
+import { IconXMark as K } from "./icons/IconXMark.js";
+import { getMessageFromUnknownError as Q } from "./utils/getMessageFromUnknownError.js";
+import { isApiError as Y } from "./utils/isApiError.js";
+import { isEmailInvalid as $ } from "./utils/isEmailInvalid.js";
+import { SignInAuthMethodButtons as ro } from "./components/SignIn/SignInAuthMethodButtons.js";
+import { SignInBackButton as to } from "./components/SignIn/SignInBackButton.js";
+import { SignInDescription as mo } from "./components/SignIn/SignInDescription.js";
+import { SignInFooter as fo } from "./components/SignIn/SignInFooter.js";
+import { SignInForm as io } from "./components/SignIn/SignInForm.js";
+import { SignInImage as co } from "./components/SignIn/SignInImage.js";
+import { SignInTitle as ao } from "./components/SignIn/SignInTitle.js";
+import { useSignInContext as lo } from "./components/SignIn/SignInProvider.js";
 export {
-  m as AuthButton,
-  e as CDPReactProvider,
-  V as IconCheckCircle,
-  w as IconExclamationCircle,
-  U as IconLock,
-  q as IconXMark,
-  f as SendTransactionButton,
-  x as SignIn,
-  Q as SignInDescription,
-  Y as SignInForm,
-  _ as SignInImage,
-  g as SignInModal,
-  oo as SignInTitle,
-  l as SignOutButton,
-  u as ThemeProvider,
+  e as AUTH_METHODS,
+  p as AuthButton,
+  t as CDPReactProvider,
+  L as IconArrowLeft,
+  U as IconCheckCircle,
+  j as IconEnvelope,
+  _ as IconExclamationCircle,
+  y as IconLock,
+  G as IconPhone,
+  K as IconXMark,
+  x as SendTransactionButton,
+  s as SignIn,
+  ro as SignInAuthMethodButtons,
+  to as SignInBackButton,
+  mo as SignInDescription,
+  fo as SignInFooter,
+  io as SignInForm,
+  co as SignInImage,
+  S as SignInModal,
+  ao as SignInTitle,
+  g as SignOutButton,
+  h as ThemeProvider,
   E as colors,
-  b as colorsBase,
+  M as colorsBase,
   v as colorsComponents,
-  A as colorsSemantic,
-  h as cssVariables,
-  F as flattenTokensObject,
-  M as font,
-  z as getMessageFromUnknownError,
-  H as isApiError,
-  K as isEmailInvalid,
-  T as theme,
-  O as themeToCssVariables,
-  P as tokens,
-  t as useAppConfig,
-  eo as useSignInContext,
-  c as useSignInReducer,
+  P as colorsSemantic,
+  d as cssVariables,
+  O as flattenTokensObject,
+  b as font,
+  Q as getMessageFromUnknownError,
+  Y as isApiError,
+  $ as isEmailInvalid,
+  B as theme,
+  w as themeToCssVariables,
+  D as tokens,
+  n as useAppConfig,
+  lo as useSignInContext,
+  I as useSignInReducer,
   C as useTheme
 };

package/dist/theme/theme.d.ts

@@ -124,6 +124,9 @@ export declare const theme: Flattened<{
                 readonly error: {
                     readonly value: "{colors.line.negative}";
                 };
+                readonly success: {
+                    readonly value: "{colors.line.positive}";
+                };
             };
             readonly label: {
                 readonly default: {
@@ -145,6 +148,11 @@ export declare const theme: Flattened<{
                     readonly value: "{colors.fg.negative}";
                 };
             };
+            readonly successText: {
+                readonly default: {
+                    readonly value: "{colors.fg.positive}";
+                };
+            };
         };
         readonly bg: {
             readonly default: {
@@ -191,7 +199,7 @@ export declare const theme: Flattened<{
                 readonly value: "#0a0b0d";
             };
             readonly positive: {
-                readonly value: "#008531";
+                readonly value: "#098551";
             };
             readonly negative: {
                 readonly value: "#cf202f";
@@ -218,7 +226,7 @@ export declare const theme: Flattened<{
     font: {
         readonly family: {
             readonly sans: {
-                readonly value: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+                readonly value: "\"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
             };
         };
         readonly size: {
@@ -240,3 +248,4 @@ export type FontTokens = Flattened<{
 export type ColorTokens = SemanticColors | ComponentColors;
 export type Theme = ColorTokens & FontTokens;
 export type ButtonVariant = "primary" | "secondary" | "linkPrimary" | "linkSecondary" | "transparentPrimary" | "transparentSecondary";
+export type ButtonSize = "lg" | "md" | "sm";

package/dist/theme/tokens.d.ts

@@ -10,7 +10,7 @@ export declare const colorsBase: {
     readonly gray700: "#5b616e";
     readonly gray900: "#1a1d21";
     readonly red500: "#cf202f";
-    readonly green500: "#008531";
+    readonly green500: "#098551";
 };
 export declare const colorsSemantic: {
     readonly bg: {
@@ -58,7 +58,7 @@ export declare const colorsSemantic: {
             readonly value: "#0a0b0d";
         };
         readonly positive: {
-            readonly value: "#008531";
+            readonly value: "#098551";
         };
         readonly negative: {
             readonly value: "#cf202f";
@@ -205,6 +205,9 @@ export declare const colorsComponents: {
             readonly error: {
                 readonly value: "{colors.line.negative}";
             };
+            readonly success: {
+                readonly value: "{colors.line.positive}";
+            };
         };
         readonly label: {
             readonly default: {
@@ -226,6 +229,11 @@ export declare const colorsComponents: {
                 readonly value: "{colors.fg.negative}";
             };
         };
+        readonly successText: {
+            readonly default: {
+                readonly value: "{colors.fg.positive}";
+            };
+        };
     };
 };
 export declare const colors: {
@@ -351,6 +359,9 @@ export declare const colors: {
             readonly error: {
                 readonly value: "{colors.line.negative}";
             };
+            readonly success: {
+                readonly value: "{colors.line.positive}";
+            };
         };
         readonly label: {
             readonly default: {
@@ -372,6 +383,11 @@ export declare const colors: {
                 readonly value: "{colors.fg.negative}";
             };
         };
+        readonly successText: {
+            readonly default: {
+                readonly value: "{colors.fg.positive}";
+            };
+        };
     };
     readonly bg: {
         readonly default: {
@@ -418,7 +434,7 @@ export declare const colors: {
             readonly value: "#0a0b0d";
         };
         readonly positive: {
-            readonly value: "#008531";
+            readonly value: "#098551";
         };
         readonly negative: {
             readonly value: "#cf202f";
@@ -445,7 +461,7 @@ export declare const colors: {
 export declare const font: {
     readonly family: {
         readonly sans: {
-            readonly value: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+            readonly value: "\"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
         };
     };
     readonly size: {
@@ -578,6 +594,9 @@ export declare const tokens: {
                 readonly error: {
                     readonly value: "{colors.line.negative}";
                 };
+                readonly success: {
+                    readonly value: "{colors.line.positive}";
+                };
             };
             readonly label: {
                 readonly default: {
@@ -599,6 +618,11 @@ export declare const tokens: {
                     readonly value: "{colors.fg.negative}";
                 };
             };
+            readonly successText: {
+                readonly default: {
+                    readonly value: "{colors.fg.positive}";
+                };
+            };
         };
         readonly bg: {
             readonly default: {
@@ -645,7 +669,7 @@ export declare const tokens: {
                 readonly value: "#0a0b0d";
             };
             readonly positive: {
-                readonly value: "#008531";
+                readonly value: "#098551";
             };
             readonly negative: {
                 readonly value: "#cf202f";
@@ -672,7 +696,7 @@ export declare const tokens: {
     font: {
         readonly family: {
             readonly sans: {
-                readonly value: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+                readonly value: "\"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
             };
         };
         readonly size: {

package/dist/theme/tokens.js

@@ -13,7 +13,7 @@ const e = {
   gray900: "#1a1d21",
   // contextual
   red500: "#cf202f",
-  green500: "#008531"
+  green500: "#098551"
 }, a = {
   bg: {
     default: { value: e.white },
@@ -122,7 +122,8 @@ const e = {
     border: {
       default: { value: "{colors.line.heavy}" },
       focus: { value: "{colors.line.primary}" },
-      error: { value: "{colors.line.negative}" }
+      error: { value: "{colors.line.negative}" },
+      success: { value: "{colors.line.positive}" }
     },
     label: {
       default: { value: "{colors.fg.default}" }
@@ -135,6 +136,9 @@ const e = {
     },
     errorText: {
       default: { value: "{colors.fg.negative}" }
+    },
+    successText: {
+      default: { value: "{colors.fg.positive}" }
     }
   }
 }, o = {
@@ -143,7 +147,7 @@ const e = {
 }, r = {
   family: {
     sans: {
-      value: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
+      value: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
     }
   },
   size: {

package/dist/utils/parseValuesFromPhoneNumber.d.ts

@@ -0,0 +1,6 @@
+import { CountryCode } from 'libphonenumber-js';
+export interface PhoneNumber {
+    value: string;
+    e164: string;
+}
+export declare const parseValuesFromPhoneNumber: (phoneNumber: string, countryCode?: CountryCode) => PhoneNumber;

package/dist/utils/parseValuesFromPhoneNumber.js

@@ -0,0 +1,16 @@
+import { parsePhoneNumberWithError as n } from "libphonenumber-js";
+const a = (r, o) => {
+  const e = {
+    value: r,
+    e164: ""
+  };
+  try {
+    const t = n(r, o);
+    e.e164 = t.number;
+  } catch {
+  }
+  return e;
+};
+export {
+  a as parseValuesFromPhoneNumber
+};

package/dist/utils/validatePhoneNumber.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/validatePhoneNumber.js

@@ -0,0 +1 @@
+

package/package.json

@@ -1,16 +1,18 @@
 {
   "name": "@coinbase/cdp-react",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "type": "module",
   "dependencies": {
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-form": "^0.1.7",
-    "@radix-ui/react-one-time-password-field": "^0.1.7"
+    "@radix-ui/react-one-time-password-field": "^0.1.7",
+    "react-transition-state": "2.3.0",
+    "libphonenumber-js": "^1.12.10"
   },
   "peerDependencies": {
     "react": ">=18.2.0",
-    "@coinbase/cdp-core": "^0.0.17",
-    "@coinbase/cdp-hooks": "^0.0.17"
+    "@coinbase/cdp-core": "^0.0.19",
+    "@coinbase/cdp-hooks": "^0.0.19"
   },
   "devDependencies": {
     "@size-limit/preset-big-lib": "^11.2.0",
@@ -31,6 +33,7 @@
     "glob": "^11.0.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "rollup-plugin-visualizer": "^6.0.3",
     "size-limit": "^11.2.0",
     "stylelint": "^16.22.0",
     "stylelint-config-standard": "^38.0.0",
@@ -38,8 +41,8 @@
     "vite": "^7.0.4",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
-    "@coinbase/cdp-core": "^0.0.17",
-    "@coinbase/cdp-hooks": "^0.0.17"
+    "@coinbase/cdp-core": "^0.0.19",
+    "@coinbase/cdp-hooks": "^0.0.19"
   },
   "size-limit": [
     {
@@ -47,7 +50,7 @@
       "path": "./dist/index.js",
       "import": "*",
       "running": false,
-      "limit": "65 KB"
+      "limit": "70 KB"
     },
     {
       "name": "single-component",
@@ -105,6 +108,7 @@
   "scripts": {
     "build": "pnpm run check:types && vite build",
     "build:watch": "vite build --watch",
+    "analyze": "vite build --config vite-analyze.config.ts",
     "check:types": "tsc --noEmit",
     "clean": "rm -rf dist",
     "clean:all": "pnpm clean && rm -rf node_modules",