@coinbase/cdp-react 0.0.37 → 0.0.38

package/dist/index.js

@@ -1,94 +1,99 @@
 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 { Fund as x, FundFooter as i } from "./components/Fund/index.js";
-import { FundModal as s } from "./components/FundModal/index.js";
-import { SendTransactionButton as I } from "./components/SendTransactionButton/index.js";
+import { FundModal as c } from "./components/FundModal/index.js";
+import { SendTransactionButton as u } from "./components/SendTransactionButton/index.js";
 import { SignIn as l } from "./components/SignIn/index.js";
-import { useSignInReducer as S } from "./components/SignIn/useSignInReducer.js";
-import { SignOutButton as h } from "./components/SignOutButton/index.js";
-import { SignInModal as C } from "./components/SignInModal/index.js";
-import { ThemeProvider as k, useTheme as A } from "./components/ThemeProvider/index.js";
-import { cssVariables as E } from "./theme/cssVariables.js";
-import { theme as v } from "./theme/theme.js";
-import { colors as D, colorsBase as P, colorsComponents as b, colorsSemantic as O, font as U, tokens as V } from "./theme/tokens.js";
-import { flattenTokensObject as L, themeToCssVariables as R } from "./theme/utils.js";
-import { IconArrowLeft as N } from "./icons/IconArrowLeft.js";
-import { IconArrowsUpDown as _ } from "./icons/IconArrowsUpDown.js";
-import { IconCheck as y } from "./icons/IconCheck.js";
-import { IconCheckCircle as G } from "./icons/IconCheckCircle.js";
-import { IconChevronDown as K } from "./icons/IconChevronDown.js";
-import { IconEnvelope as W } from "./icons/IconEnvelope.js";
-import { IconExclamationCircle as Z } from "./icons/IconExclamationCircle.js";
-import { IconExclamationTriangle as oo } from "./icons/IconExclamationTriangle.js";
-import { IconLock as eo } from "./icons/IconLock.js";
-import { IconPhone as no } from "./icons/IconPhone.js";
-import { IconXMark as po } from "./icons/IconXMark.js";
-import { clamp as xo } from "./utils/clamp.js";
-import { getMessageFromUnknownError as co } from "./utils/getMessageFromUnknownError.js";
-import { isApiError as ao } from "./utils/isApiError.js";
-import { isEmailInvalid as uo } from "./utils/isEmailInvalid.js";
-import { parseValuesFromPhoneNumber as go } from "./utils/parseValuesFromPhoneNumber.js";
-import { FundForm as ho } from "./components/Fund/FundForm.js";
-import { FundTitle as Co } from "./components/Fund/FundTitle.js";
-import { useFundContext as ko } from "./components/Fund/FundProvider.js";
-import { SignInAuthMethodButtons as Bo } from "./components/SignIn/SignInAuthMethodButtons.js";
-import { SignInBackButton as Mo } from "./components/SignIn/SignInBackButton.js";
-import { SignInDescription as wo } from "./components/SignIn/SignInDescription.js";
-import { SignInFooter as Po } from "./components/SignIn/SignInFooter.js";
-import { SignInForm as Oo } from "./components/SignIn/SignInForm.js";
-import { SignInImage as Vo } from "./components/SignIn/SignInImage.js";
-import { SignInTitle as Lo } from "./components/SignIn/SignInTitle.js";
-import { useSignInContext as jo } from "./components/SignIn/SignInProvider.js";
+import { useSignInReducer as g } from "./components/SignIn/useSignInReducer.js";
+import { SignOutButton as C } from "./components/SignOutButton/index.js";
+import { SignInModal as F } from "./components/SignInModal/index.js";
+import { ThemeProvider as k, useTheme as b } from "./components/ThemeProvider/index.js";
+import { cssVariables as B } from "./theme/cssVariables.js";
+import { theme as M } from "./theme/theme.js";
+import { borderRadius as w, borderRadiusComponents as D, borderRadiusSemantic as P, colors as R, colorsBase as O, colorsComponents as U, colorsSemantic as V, font as H, fontComponents as L, fontSemantic as j, tokens as N } from "./theme/tokens.js";
+import { flattenTokensObject as _, themeToCssVariables as q } from "./theme/utils.js";
+import { IconArrowLeft as z } from "./icons/IconArrowLeft.js";
+import { IconArrowsUpDown as J } from "./icons/IconArrowsUpDown.js";
+import { IconCheck as Q } from "./icons/IconCheck.js";
+import { IconCheckCircle as Y } from "./icons/IconCheckCircle.js";
+import { IconChevronDown as $ } from "./icons/IconChevronDown.js";
+import { IconEnvelope as ro } from "./icons/IconEnvelope.js";
+import { IconExclamationCircle as to } from "./icons/IconExclamationCircle.js";
+import { IconExclamationTriangle as mo } from "./icons/IconExclamationTriangle.js";
+import { IconLock as fo } from "./icons/IconLock.js";
+import { IconPhone as io } from "./icons/IconPhone.js";
+import { IconXMark as co } from "./icons/IconXMark.js";
+import { clamp as uo } from "./utils/clamp.js";
+import { getMessageFromUnknownError as lo } from "./utils/getMessageFromUnknownError.js";
+import { isApiError as So } from "./utils/isApiError.js";
+import { isEmailInvalid as ho } from "./utils/isEmailInvalid.js";
+import { parseValuesFromPhoneNumber as To } from "./utils/parseValuesFromPhoneNumber.js";
+import { FundForm as bo } from "./components/Fund/FundForm.js";
+import { FundTitle as Bo } from "./components/Fund/FundTitle.js";
+import { useFundContext as Mo } from "./components/Fund/FundProvider.js";
+import { SignInAuthMethodButtons as wo } from "./components/SignIn/SignInAuthMethodButtons.js";
+import { SignInBackButton as Po } from "./components/SignIn/SignInBackButton.js";
+import { SignInDescription as Oo } from "./components/SignIn/SignInDescription.js";
+import { SignInFooter as Vo } from "./components/SignIn/SignInFooter.js";
+import { SignInForm as Lo } from "./components/SignIn/SignInForm.js";
+import { SignInImage as No } from "./components/SignIn/SignInImage.js";
+import { SignInTitle as _o } from "./components/SignIn/SignInTitle.js";
+import { useSignInContext as yo } from "./components/SignIn/SignInProvider.js";
 export {
   e as AUTH_METHODS,
   p as AuthButton,
   t as CDPReactProvider,
   x as Fund,
   i as FundFooter,
-  ho as FundForm,
-  s as FundModal,
-  Co as FundTitle,
-  N as IconArrowLeft,
-  _ as IconArrowsUpDown,
-  y as IconCheck,
-  G as IconCheckCircle,
-  K as IconChevronDown,
-  W as IconEnvelope,
-  Z as IconExclamationCircle,
-  oo as IconExclamationTriangle,
-  eo as IconLock,
-  no as IconPhone,
-  po as IconXMark,
-  I as SendTransactionButton,
+  bo as FundForm,
+  c as FundModal,
+  Bo as FundTitle,
+  z as IconArrowLeft,
+  J as IconArrowsUpDown,
+  Q as IconCheck,
+  Y as IconCheckCircle,
+  $ as IconChevronDown,
+  ro as IconEnvelope,
+  to as IconExclamationCircle,
+  mo as IconExclamationTriangle,
+  fo as IconLock,
+  io as IconPhone,
+  co as IconXMark,
+  u as SendTransactionButton,
   l as SignIn,
-  Bo as SignInAuthMethodButtons,
-  Mo as SignInBackButton,
-  wo as SignInDescription,
-  Po as SignInFooter,
-  Oo as SignInForm,
-  Vo as SignInImage,
-  C as SignInModal,
-  Lo as SignInTitle,
-  h as SignOutButton,
+  wo as SignInAuthMethodButtons,
+  Po as SignInBackButton,
+  Oo as SignInDescription,
+  Vo as SignInFooter,
+  Lo as SignInForm,
+  No as SignInImage,
+  F as SignInModal,
+  _o as SignInTitle,
+  C as SignOutButton,
   k as ThemeProvider,
-  xo as clamp,
-  D as colors,
-  P as colorsBase,
-  b as colorsComponents,
-  O as colorsSemantic,
-  E as cssVariables,
-  L as flattenTokensObject,
-  U as font,
-  co as getMessageFromUnknownError,
-  ao as isApiError,
-  uo as isEmailInvalid,
-  go as parseValuesFromPhoneNumber,
-  v as theme,
-  R as themeToCssVariables,
-  V as tokens,
+  w as borderRadius,
+  D as borderRadiusComponents,
+  P as borderRadiusSemantic,
+  uo as clamp,
+  R as colors,
+  O as colorsBase,
+  U as colorsComponents,
+  V as colorsSemantic,
+  B as cssVariables,
+  _ as flattenTokensObject,
+  H as font,
+  L as fontComponents,
+  j as fontSemantic,
+  lo as getMessageFromUnknownError,
+  So as isApiError,
+  ho as isEmailInvalid,
+  To as parseValuesFromPhoneNumber,
+  M as theme,
+  q as themeToCssVariables,
+  N as tokens,
   n as useAppConfig,
-  ko as useFundContext,
-  jo as useSignInContext,
-  S as useSignInReducer,
-  A as useTheme
+  Mo as useFundContext,
+  yo as useSignInContext,
+  g as useSignInReducer,
+  b as useTheme
 };

package/dist/theme/index.js

@@ -1,16 +1,21 @@
 import { cssVariables as r } from "./cssVariables.js";
 import { theme as t } from "./theme.js";
-import { colors as a, colorsBase as c, colorsComponents as l, colorsSemantic as n, font as f, tokens as p } from "./tokens.js";
-import { flattenTokensObject as b, themeToCssVariables as i } from "./utils.js";
+import { borderRadius as a, borderRadiusComponents as m, borderRadiusSemantic as c, colors as f, colorsBase as i, colorsComponents as l, colorsSemantic as p, font as b, fontComponents as d, fontSemantic as x, tokens as C } from "./tokens.js";
+import { flattenTokensObject as R, themeToCssVariables as S } from "./utils.js";
 export {
-  a as colors,
-  c as colorsBase,
+  a as borderRadius,
+  m as borderRadiusComponents,
+  c as borderRadiusSemantic,
+  f as colors,
+  i as colorsBase,
   l as colorsComponents,
-  n as colorsSemantic,
+  p as colorsSemantic,
   r as cssVariables,
-  b as flattenTokensObject,
-  f as font,
+  R as flattenTokensObject,
+  b as font,
+  d as fontComponents,
+  x as fontSemantic,
   t as theme,
-  i as themeToCssVariables,
-  p as tokens
+  S as themeToCssVariables,
+  C as tokens
 };

package/dist/theme/theme.d.ts

@@ -1,6 +1,69 @@
-import { colorsSemantic, colorsComponents, font } from './tokens';
+import { borderRadiusSemantic, borderRadiusComponents, colorsSemantic, colorsComponents, fontSemantic, fontComponents } from './tokens';
 import { Flattened } from './utils';
 export declare const theme: Flattened<{
+    borderRadius: {
+        readonly cta: {
+            readonly value: "{borderRadius.full}";
+        };
+        readonly input: {
+            readonly value: "{borderRadius.sm}";
+        };
+        readonly link: {
+            readonly value: "{borderRadius.full}";
+        };
+        readonly modal: {
+            readonly value: "{borderRadius.sm}";
+        };
+        readonly select: {
+            readonly trigger: {
+                readonly value: "{borderRadius.sm}";
+            };
+            readonly list: {
+                readonly value: "{borderRadius.sm}";
+            };
+        };
+        readonly none: {
+            readonly value: 0;
+        };
+        readonly xs: {
+            readonly value: "{font.size.base}";
+            readonly modify: {
+                readonly type: "multiply";
+                readonly value: 0.25;
+            };
+        };
+        readonly sm: {
+            readonly value: "{font.size.base}";
+            readonly modify: {
+                readonly type: "multiply";
+                readonly value: 0.5;
+            };
+        };
+        readonly md: {
+            readonly value: "{font.size.base}";
+            readonly modify: {
+                readonly type: "multiply";
+                readonly value: 0.75;
+            };
+        };
+        readonly lg: {
+            readonly value: "{font.size.base}";
+            readonly modify: {
+                readonly type: "multiply";
+                readonly value: 1;
+            };
+        };
+        readonly xl: {
+            readonly value: "{font.size.base}";
+            readonly modify: {
+                readonly type: "multiply";
+                readonly value: 1.5;
+            };
+        };
+        readonly full: {
+            readonly value: 99999;
+        };
+    };
     colors: {
         readonly page: {
             readonly bg: {
@@ -31,14 +94,14 @@ export declare const theme: Flattened<{
                     readonly hover: {
                         readonly value: "{colors.bg.primary}";
                         readonly modify: {
-                            readonly type: "mix";
+                            readonly type: "color-mix";
                             readonly value: readonly [readonly ["{colors.bg.contrast}", "15%"]];
                         };
                     };
                     readonly pressed: {
                         readonly value: "{colors.bg.primary}";
                         readonly modify: {
-                            readonly type: "mix";
+                            readonly type: "color-mix";
                             readonly value: readonly [readonly ["{colors.bg.contrast}", "30%"]];
                         };
                     };
@@ -65,14 +128,14 @@ export declare const theme: Flattened<{
                     readonly hover: {
                         readonly value: "{colors.bg.secondary}";
                         readonly modify: {
-                            readonly type: "mix";
+                            readonly type: "color-mix";
                             readonly value: readonly [readonly ["{colors.bg.contrast}", "10%"]];
                         };
                     };
                     readonly pressed: {
                         readonly value: "{colors.bg.secondary}";
                         readonly modify: {
-                            readonly type: "mix";
+                            readonly type: "color-mix";
                             readonly value: readonly [readonly ["{colors.bg.contrast}", "20%"]];
                         };
                     };
@@ -101,14 +164,14 @@ export declare const theme: Flattened<{
                     readonly hover: {
                         readonly value: "{colors.fg.primary}";
                         readonly modify: {
-                            readonly type: "mix";
+                            readonly type: "color-mix";
                             readonly value: readonly [readonly ["{colors.bg.contrast}", "15%"]];
                         };
                     };
                     readonly pressed: {
                         readonly value: "{colors.fg.primary}";
                         readonly modify: {
-                            readonly type: "mix";
+                            readonly type: "color-mix";
                             readonly value: readonly [readonly ["{colors.bg.contrast}", "30%"]];
                         };
                     };
@@ -122,14 +185,14 @@ export declare const theme: Flattened<{
                     readonly hover: {
                         readonly value: "{colors.fg.default}";
                         readonly modify: {
-                            readonly type: "mix";
+                            readonly type: "color-mix";
                             readonly value: readonly [readonly ["{colors.bg.contrast}", "10%"]];
                         };
                     };
                     readonly pressed: {
                         readonly value: "{colors.fg.default}";
                         readonly modify: {
-                            readonly type: "mix";
+                            readonly type: "color-mix";
                             readonly value: readonly [readonly ["{colors.bg.contrast}", "20%"]];
                         };
                     };
@@ -196,14 +259,14 @@ export declare const theme: Flattened<{
                     readonly hover: {
                         readonly value: "{colors.bg.default}";
                         readonly modify: {
-                            readonly type: "mix";
+                            readonly type: "color-mix";
                             readonly value: readonly [readonly ["{colors.bg.contrast}", "5%"]];
                         };
                     };
                     readonly pressed: {
                         readonly value: "{colors.bg.default}";
                         readonly modify: {
-                            readonly type: "mix";
+                            readonly type: "color-mix";
                             readonly value: readonly [readonly ["{colors.bg.contrast}", "7%"]];
                         };
                     };
@@ -271,7 +334,7 @@ export declare const theme: Flattened<{
                         readonly highlight: {
                             readonly value: "{colors.bg.default}";
                             readonly modify: {
-                                readonly type: "mix";
+                                readonly type: "color-mix";
                                 readonly value: readonly [readonly ["{colors.bg.contrast}", "10%"]];
                             };
                         };
@@ -323,14 +386,14 @@ export declare const theme: Flattened<{
             readonly overlay: {
                 readonly value: "{colors.bg.alternate}";
                 readonly modify: {
-                    readonly type: "alpha";
+                    readonly type: "color-alpha";
                     readonly value: 0.33;
                 };
             };
             readonly skeleton: {
                 readonly value: "{colors.fg.default}";
                 readonly modify: {
-                    readonly type: "alpha";
+                    readonly type: "color-alpha";
                     readonly value: 0.1;
                 };
             };
@@ -387,12 +450,36 @@ export declare const theme: Flattened<{
     };
     font: {
         readonly family: {
+            readonly page: {
+                readonly value: "{font.family.body}";
+            };
+            readonly cta: {
+                readonly value: "{font.family.interactive}";
+            };
+            readonly link: {
+                readonly value: "{font.family.interactive}";
+            };
+            readonly input: {
+                readonly value: "{font.family.interactive}";
+            };
+            readonly select: {
+                readonly value: "{font.family.interactive}";
+            };
+            readonly code: {
+                readonly value: "{font.family.mono}";
+            };
             readonly mono: {
                 readonly value: "\"DM Mono\", monospace";
             };
             readonly sans: {
                 readonly value: "\"Rethink Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
             };
+            readonly body: {
+                readonly value: "{font.family.sans}";
+            };
+            readonly interactive: {
+                readonly value: "{font.family.sans}";
+            };
         };
         readonly size: {
             readonly base: {
@@ -407,11 +494,22 @@ export type SemanticColors = Flattened<{
 export type ComponentColors = Flattened<{
     colors: typeof colorsComponents;
 }>;
-export type FontTokens = Flattened<{
-    font: typeof font;
-}>;
 export type ColorTokens = SemanticColors & ComponentColors;
-export type Theme = ColorTokens & FontTokens;
+export type SemanticFonts = Flattened<{
+    font: typeof fontSemantic;
+}>;
+export type ComponentFonts = Flattened<{
+    font: typeof fontComponents;
+}>;
+export type FontTokens = SemanticFonts & ComponentFonts;
+export type SemanticBorderRadius = Flattened<{
+    borderRadius: typeof borderRadiusSemantic;
+}>;
+export type ComponentBorderRadius = Flattened<{
+    borderRadius: typeof borderRadiusComponents;
+}>;
+export type BorderRadiusTokens = SemanticBorderRadius & ComponentBorderRadius;
+export type Theme = ColorTokens & FontTokens & BorderRadiusTokens;
 export type ButtonVariant = "primary" | "secondary" | "linkPrimary" | "linkSecondary" | "transparentPrimary" | "transparentSecondary" | "control";
 export type Size = "lg" | "md" | "sm" | "xs";
 export type ButtonSize = Size | "none";