@coinbase/cdp-react 0.0.58 → 0.0.61

package/dist/theme/theme.d.ts

@@ -2,6 +2,9 @@ import { borderRadiusSemantic, borderRadiusComponents, colorsSemantic, colorsCom
 import { Flattened } from './utils';
 export declare const theme: Flattened<{
     borderRadius: {
+        readonly banner: {
+            readonly value: "{borderRadius.lg}";
+        };
         readonly cta: {
             readonly value: "{borderRadius.full}";
         };
@@ -204,6 +207,9 @@ export declare const theme: Flattened<{
                 readonly default: {
                     readonly value: "{colors.bg.default}";
                 };
+                readonly readonly: {
+                    readonly value: "{colors.bg.alternate}";
+                };
             };
             readonly border: {
                 readonly default: {
@@ -233,6 +239,9 @@ export declare const theme: Flattened<{
                 readonly default: {
                     readonly value: "{colors.fg.default}";
                 };
+                readonly readonly: {
+                    readonly value: "{colors.fg.muted}";
+                };
             };
             readonly errorText: {
                 readonly default: {
@@ -403,11 +412,25 @@ export declare const theme: Flattened<{
             readonly secondary: {
                 readonly value: "#eef0f3";
             };
+            readonly positiveWash: {
+                readonly value: "{colors.fg.positive}";
+                readonly modify: {
+                    readonly type: "color-mix";
+                    readonly value: readonly [readonly ["{colors.bg.default}", "92%"]];
+                };
+            };
             readonly negativeWash: {
                 readonly value: "{colors.fg.negative}";
                 readonly modify: {
                     readonly type: "color-mix";
-                    readonly value: readonly [readonly ["{colors.bg.default}", "90%"]];
+                    readonly value: readonly [readonly ["{colors.bg.default}", "92%"]];
+                };
+            };
+            readonly warningWash: {
+                readonly value: "{colors.fg.warning}";
+                readonly modify: {
+                    readonly type: "color-mix";
+                    readonly value: readonly [readonly ["{colors.bg.default}", "92%"]];
                 };
             };
         };
@@ -427,9 +450,6 @@ export declare const theme: Flattened<{
             readonly onSecondary: {
                 readonly value: "#0a0b0d";
             };
-            readonly onNegativeWash: {
-                readonly value: "{colors.fg.default}";
-            };
             readonly positive: {
                 readonly value: "#098551";
             };
@@ -439,6 +459,15 @@ export declare const theme: Flattened<{
             readonly warning: {
                 readonly value: "#ed702f";
             };
+            readonly onPositiveWash: {
+                readonly value: "{colors.fg.default}";
+            };
+            readonly onNegativeWash: {
+                readonly value: "{colors.fg.default}";
+            };
+            readonly onWarningWash: {
+                readonly value: "{colors.fg.default}";
+            };
         };
         readonly line: {
             readonly default: {

package/dist/theme/tokens.d.ts

@@ -44,11 +44,25 @@ export declare const colorsSemantic: {
         readonly secondary: {
             readonly value: "#eef0f3";
         };
+        readonly positiveWash: {
+            readonly value: "{colors.fg.positive}";
+            readonly modify: {
+                readonly type: "color-mix";
+                readonly value: readonly [readonly ["{colors.bg.default}", "92%"]];
+            };
+        };
         readonly negativeWash: {
             readonly value: "{colors.fg.negative}";
             readonly modify: {
                 readonly type: "color-mix";
-                readonly value: readonly [readonly ["{colors.bg.default}", "90%"]];
+                readonly value: readonly [readonly ["{colors.bg.default}", "92%"]];
+            };
+        };
+        readonly warningWash: {
+            readonly value: "{colors.fg.warning}";
+            readonly modify: {
+                readonly type: "color-mix";
+                readonly value: readonly [readonly ["{colors.bg.default}", "92%"]];
             };
         };
     };
@@ -68,9 +82,6 @@ export declare const colorsSemantic: {
         readonly onSecondary: {
             readonly value: "#0a0b0d";
         };
-        readonly onNegativeWash: {
-            readonly value: "{colors.fg.default}";
-        };
         readonly positive: {
             readonly value: "#098551";
         };
@@ -80,6 +91,15 @@ export declare const colorsSemantic: {
         readonly warning: {
             readonly value: "#ed702f";
         };
+        readonly onPositiveWash: {
+            readonly value: "{colors.fg.default}";
+        };
+        readonly onNegativeWash: {
+            readonly value: "{colors.fg.default}";
+        };
+        readonly onWarningWash: {
+            readonly value: "{colors.fg.default}";
+        };
     };
     readonly line: {
         readonly default: {
@@ -239,6 +259,9 @@ export declare const colorsComponents: {
             readonly default: {
                 readonly value: "{colors.bg.default}";
             };
+            readonly readonly: {
+                readonly value: "{colors.bg.alternate}";
+            };
         };
         readonly border: {
             readonly default: {
@@ -268,6 +291,9 @@ export declare const colorsComponents: {
             readonly default: {
                 readonly value: "{colors.fg.default}";
             };
+            readonly readonly: {
+                readonly value: "{colors.fg.muted}";
+            };
         };
         readonly errorText: {
             readonly default: {
@@ -549,6 +575,9 @@ export declare const colors: {
             readonly default: {
                 readonly value: "{colors.bg.default}";
             };
+            readonly readonly: {
+                readonly value: "{colors.bg.alternate}";
+            };
         };
         readonly border: {
             readonly default: {
@@ -578,6 +607,9 @@ export declare const colors: {
             readonly default: {
                 readonly value: "{colors.fg.default}";
             };
+            readonly readonly: {
+                readonly value: "{colors.fg.muted}";
+            };
         };
         readonly errorText: {
             readonly default: {
@@ -748,11 +780,25 @@ export declare const colors: {
         readonly secondary: {
             readonly value: "#eef0f3";
         };
+        readonly positiveWash: {
+            readonly value: "{colors.fg.positive}";
+            readonly modify: {
+                readonly type: "color-mix";
+                readonly value: readonly [readonly ["{colors.bg.default}", "92%"]];
+            };
+        };
         readonly negativeWash: {
             readonly value: "{colors.fg.negative}";
             readonly modify: {
                 readonly type: "color-mix";
-                readonly value: readonly [readonly ["{colors.bg.default}", "90%"]];
+                readonly value: readonly [readonly ["{colors.bg.default}", "92%"]];
+            };
+        };
+        readonly warningWash: {
+            readonly value: "{colors.fg.warning}";
+            readonly modify: {
+                readonly type: "color-mix";
+                readonly value: readonly [readonly ["{colors.bg.default}", "92%"]];
             };
         };
     };
@@ -772,9 +818,6 @@ export declare const colors: {
         readonly onSecondary: {
             readonly value: "#0a0b0d";
         };
-        readonly onNegativeWash: {
-            readonly value: "{colors.fg.default}";
-        };
         readonly positive: {
             readonly value: "#098551";
         };
@@ -784,6 +827,15 @@ export declare const colors: {
         readonly warning: {
             readonly value: "#ed702f";
         };
+        readonly onPositiveWash: {
+            readonly value: "{colors.fg.default}";
+        };
+        readonly onNegativeWash: {
+            readonly value: "{colors.fg.default}";
+        };
+        readonly onWarningWash: {
+            readonly value: "{colors.fg.default}";
+        };
     };
     readonly line: {
         readonly default: {
@@ -929,6 +981,9 @@ export declare const borderRadiusSemantic: {
     };
 };
 export declare const borderRadiusComponents: {
+    readonly banner: {
+        readonly value: "{borderRadius.lg}";
+    };
     readonly cta: {
         readonly value: "{borderRadius.full}";
     };
@@ -951,6 +1006,9 @@ export declare const borderRadiusComponents: {
     };
 };
 export declare const borderRadius: {
+    readonly banner: {
+        readonly value: "{borderRadius.lg}";
+    };
     readonly cta: {
         readonly value: "{borderRadius.full}";
     };
@@ -1015,6 +1073,9 @@ export declare const borderRadius: {
 };
 export declare const tokens: {
     borderRadius: {
+        readonly banner: {
+            readonly value: "{borderRadius.lg}";
+        };
         readonly cta: {
             readonly value: "{borderRadius.full}";
         };
@@ -1217,6 +1278,9 @@ export declare const tokens: {
                 readonly default: {
                     readonly value: "{colors.bg.default}";
                 };
+                readonly readonly: {
+                    readonly value: "{colors.bg.alternate}";
+                };
             };
             readonly border: {
                 readonly default: {
@@ -1246,6 +1310,9 @@ export declare const tokens: {
                 readonly default: {
                     readonly value: "{colors.fg.default}";
                 };
+                readonly readonly: {
+                    readonly value: "{colors.fg.muted}";
+                };
             };
             readonly errorText: {
                 readonly default: {
@@ -1416,11 +1483,25 @@ export declare const tokens: {
             readonly secondary: {
                 readonly value: "#eef0f3";
             };
+            readonly positiveWash: {
+                readonly value: "{colors.fg.positive}";
+                readonly modify: {
+                    readonly type: "color-mix";
+                    readonly value: readonly [readonly ["{colors.bg.default}", "92%"]];
+                };
+            };
             readonly negativeWash: {
                 readonly value: "{colors.fg.negative}";
                 readonly modify: {
                     readonly type: "color-mix";
-                    readonly value: readonly [readonly ["{colors.bg.default}", "90%"]];
+                    readonly value: readonly [readonly ["{colors.bg.default}", "92%"]];
+                };
+            };
+            readonly warningWash: {
+                readonly value: "{colors.fg.warning}";
+                readonly modify: {
+                    readonly type: "color-mix";
+                    readonly value: readonly [readonly ["{colors.bg.default}", "92%"]];
                 };
             };
         };
@@ -1440,9 +1521,6 @@ export declare const tokens: {
             readonly onSecondary: {
                 readonly value: "#0a0b0d";
             };
-            readonly onNegativeWash: {
-                readonly value: "{colors.fg.default}";
-            };
             readonly positive: {
                 readonly value: "#098551";
             };
@@ -1452,6 +1530,15 @@ export declare const tokens: {
             readonly warning: {
                 readonly value: "#ed702f";
             };
+            readonly onPositiveWash: {
+                readonly value: "{colors.fg.default}";
+            };
+            readonly onNegativeWash: {
+                readonly value: "{colors.fg.default}";
+            };
+            readonly onWarningWash: {
+                readonly value: "{colors.fg.default}";
+            };
         };
         readonly line: {
             readonly default: {

package/dist/theme/tokens.js

@@ -31,9 +31,17 @@ const e = {
     // primary color background
     secondary: { value: e.gray100 },
     // secondary color background
+    positiveWash: {
+      value: "{colors.fg.positive}",
+      modify: { type: "color-mix", value: [["{colors.bg.default}", "92%"]] }
+    },
     negativeWash: {
       value: "{colors.fg.negative}",
-      modify: { type: "color-mix", value: [["{colors.bg.default}", "90%"]] }
+      modify: { type: "color-mix", value: [["{colors.bg.default}", "92%"]] }
+    },
+    warningWash: {
+      value: "{colors.fg.warning}",
+      modify: { type: "color-mix", value: [["{colors.bg.default}", "92%"]] }
     }
   },
   fg: {
@@ -47,14 +55,18 @@ const e = {
     // text on primary color
     onSecondary: { value: e.black },
     // text on secondary color
-    onNegativeWash: { value: "{colors.fg.default}" },
-    // text on negative wash color
     positive: { value: e.green500 },
     // positive color text
     negative: { value: e.red500 },
     // negative color text
-    warning: { value: e.amber500 }
+    warning: { value: e.amber500 },
     // warning color text
+    onPositiveWash: { value: "{colors.fg.default}" },
+    // text on positive wash color
+    onNegativeWash: { value: "{colors.fg.default}" },
+    // text on negative wash color
+    onWarningWash: { value: "{colors.fg.default}" }
+    // text on warning wash color
   },
   line: {
     default: { value: e.gray200 },
@@ -153,7 +165,8 @@ const e = {
   },
   input: {
     bg: {
-      default: { value: "{colors.bg.default}" }
+      default: { value: "{colors.bg.default}" },
+      readonly: { value: "{colors.bg.alternate}" }
     },
     border: {
       default: { value: "{colors.line.heavy}" },
@@ -168,7 +181,8 @@ const e = {
       default: { value: "{colors.fg.muted}" }
     },
     text: {
-      default: { value: "{colors.fg.default}" }
+      default: { value: "{colors.fg.default}" },
+      readonly: { value: "{colors.fg.muted}" }
     },
     errorText: {
       default: { value: "{colors.fg.negative}" }
@@ -327,7 +341,10 @@ const e = {
   full: {
     value: 99999
   }
-}, c = {
+}, i = {
+  banner: {
+    value: "{borderRadius.lg}"
+  },
   cta: {
     value: "{borderRadius.full}"
   },
@@ -348,17 +365,17 @@ const e = {
       value: "{borderRadius.sm}"
     }
   }
-}, i = {
+}, c = {
   ...s,
-  ...c
+  ...i
 }, f = {
-  borderRadius: i,
+  borderRadius: c,
   colors: r,
   font: u
 };
 export {
-  i as borderRadius,
-  c as borderRadiusComponents,
+  c as borderRadius,
+  i as borderRadiusComponents,
   s as borderRadiusSemantic,
   r as colors,
   e as colorsBase,

package/dist/types/secureIframe.d.ts

@@ -0,0 +1,30 @@
+import { AuthManager } from '@coinbase/cdp-core';
+import { Theme } from '../theme';
+export type SecureIframeAuthState = Parameters<AuthManager["setAuthState"]>[0];
+export declare const SECURE_IFRAME_EVENT_TYPE_PREFIX = "CDP_WEB_SECURE_IFRAME_";
+export declare const SECURE_IFRAME_EVENT_TYPE: {
+    readonly INIT: "CDP_WEB_SECURE_IFRAME_INIT";
+    readonly LISTENING: "CDP_WEB_SECURE_IFRAME_LISTENING";
+    readonly STATUS: "CDP_WEB_SECURE_IFRAME_STATUS";
+};
+export type SecureIframeEventType = typeof SECURE_IFRAME_EVENT_TYPE;
+export type SecureIframeInitMessage = {
+    type: SecureIframeEventType["INIT"];
+    payload: {
+        authState: SecureIframeAuthState;
+        theme: Theme;
+    };
+};
+export type SecureIframeIncomingMessage = SecureIframeInitMessage;
+export type SecureIframeListeningMessage = {
+    type: SecureIframeEventType["LISTENING"];
+};
+export type SecureIframeStatus = "ready" | "success" | "error";
+export type SecureIframeStatusMessage = {
+    type: SecureIframeEventType["STATUS"];
+    payload: {
+        status: SecureIframeStatus;
+        message?: string;
+    };
+};
+export type SecureIframeOutgoingMessage = SecureIframeListeningMessage | SecureIframeStatusMessage;

package/dist/types/secureIframe.js

@@ -0,0 +1,13 @@
+import "@coinbase/cdp-core";
+import "../theme/cssVariables.js";
+import "../theme/theme.js";
+import "../theme/tokens.js";
+const E = "CDP_WEB_SECURE_IFRAME_", N = {
+  INIT: `${E}INIT`,
+  LISTENING: `${E}LISTENING`,
+  STATUS: `${E}STATUS`
+};
+export {
+  N as SECURE_IFRAME_EVENT_TYPE,
+  E as SECURE_IFRAME_EVENT_TYPE_PREFIX
+};

package/dist/utils/childrenHasComponent.d.ts

@@ -1,2 +1,2 @@
 import { JSXElementConstructor, ReactNode } from 'react';
-export declare const childrenHasComponent: <T = unknown>(children: ReactNode | ReactNode[], component: string | JSXElementConstructor<T>, depth?: number) => any;
+export declare const childrenHasComponent: <T = unknown>(children: ReactNode | ReactNode[], component: string | JSXElementConstructor<T>, depth?: number) => boolean;

package/dist/utils/formatPhoneNumber.d.ts

@@ -0,0 +1 @@
+export declare const formatPhoneNumber: (phoneNumber: string) => string;