@coinbase/cdp-react 0.0.23 → 0.0.24

package/dist/assets/Button.css

@@ -1 +1 @@
-.Button-module__btn___Wj6Dr{--cdp-web-button-ring-color: transparent;--cdp-web-button-ring-width: 2px;--cdp-web-button-ring-inset-color: transparent;--cdp-web-button-ring-inset-width: 2px;box-sizing:border-box;box-shadow:inset 0 0 0 var(--cdp-web-button-ring-inset-width) var(--cdp-web-button-ring-inset-color),0 0 0 var(--cdp-web-button-ring-width) var(--cdp-web-button-ring-color);display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:1em;border-radius:9999em;border:0;background-color:transparent;color:var(--cdp-web-colors-page-text-default);font-size:var(--cdp-web-font-size-base);font-family:var(--cdp-web-font-family-sans);font-weight:500;line-height:1.5;text-decoration:none;cursor:pointer;transition:all .15s ease-in-out;-webkit-user-select:none;user-select:none}.Button-module__size-lg___WlcVE{padding:1em}.Button-module__size-md___-SMmD{padding:.75em}.Button-module__size-sm___Vnrq6{padding:.5em}.Button-module__link-primary___6Zgkh,.Button-module__link-secondary___S0Qdo{padding:0 .25em}.Button-module__primary___WGT--{background-color:var(--cdp-web-colors-cta-primary-bg-default);color:var(--cdp-web-colors-cta-primary-text-default)}.Button-module__primary___WGT--:hover{background-color:var(--cdp-web-colors-cta-primary-bg-hover);color:var(--cdp-web-colors-cta-primary-text-hover)}.Button-module__primary___WGT--:focus{outline:none}.Button-module__primary___WGT--:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-cta-primary-border-focus);--cdp-web-button-ring-inset-color: var(--cdp-web-colors-page-bg-default);outline:none}.Button-module__secondary___Fx0LJ{background-color:var(--cdp-web-colors-cta-secondary-bg-default);color:var(--cdp-web-colors-cta-secondary-text-default)}.Button-module__secondary___Fx0LJ:hover{background-color:var(--cdp-web-colors-cta-secondary-bg-hover);color:var(--cdp-web-colors-cta-secondary-text-hover)}.Button-module__secondary___Fx0LJ:focus{outline:none}.Button-module__secondary___Fx0LJ:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-cta-secondary-border-focus);--cdp-web-button-ring-inset-color: var(--cdp-web-colors-page-bg-default);outline:none}.Button-module__link-primary___6Zgkh,.Button-module__transparent-primary___iwWv5{background-color:transparent;color:var(--cdp-web-colors-link-primary-text-default)}.Button-module__link-primary___6Zgkh:hover,.Button-module__transparent-primary___iwWv5:hover{color:var(--cdp-web-colors-link-primary-text-hover)}.Button-module__link-primary___6Zgkh:focus,.Button-module__transparent-primary___iwWv5:focus{outline:none}.Button-module__link-primary___6Zgkh:focus-visible,.Button-module__transparent-primary___iwWv5:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-link-primary-text-default);outline:none}.Button-module__link-secondary___S0Qdo,.Button-module__transparent-secondary___GfRXu{background-color:transparent;color:var(--cdp-web-colors-link-secondary-text-default)}.Button-module__link-secondary___S0Qdo:hover,.Button-module__transparent-secondary___GfRXu:hover{color:var(--cdp-web-colors-link-secondary-text-hover)}.Button-module__link-secondary___S0Qdo:focus,.Button-module__transparent-secondary___GfRXu:focus{outline:none}.Button-module__link-secondary___S0Qdo:focus-visible,.Button-module__transparent-secondary___GfRXu:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-link-secondary-text-default);outline:none}
+.Button-module__btn___Wj6Dr{--cdp-web-button-ring-color: transparent;--cdp-web-button-ring-width: 2px;--cdp-web-button-ring-inset-color: transparent;--cdp-web-button-ring-inset-width: 2px;border-radius:9999em}.Button-module__link-primary___6Zgkh,.Button-module__link-secondary___S0Qdo{padding:0 .25em}.Button-module__primary___WGT--{background-color:var(--cdp-web-colors-cta-primary-bg-default);color:var(--cdp-web-colors-cta-primary-text-default)}.Button-module__primary___WGT--:hover{background-color:var(--cdp-web-colors-cta-primary-bg-hover);color:var(--cdp-web-colors-cta-primary-text-hover)}.Button-module__primary___WGT--:focus{outline:none}.Button-module__primary___WGT--:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-cta-primary-border-focus);--cdp-web-button-ring-inset-color: var(--cdp-web-colors-page-bg-default);outline:none}.Button-module__secondary___Fx0LJ{background-color:var(--cdp-web-colors-cta-secondary-bg-default);color:var(--cdp-web-colors-cta-secondary-text-default)}.Button-module__secondary___Fx0LJ:hover{background-color:var(--cdp-web-colors-cta-secondary-bg-hover);color:var(--cdp-web-colors-cta-secondary-text-hover)}.Button-module__secondary___Fx0LJ:focus{outline:none}.Button-module__secondary___Fx0LJ:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-cta-secondary-border-focus);--cdp-web-button-ring-inset-color: var(--cdp-web-colors-page-bg-default);outline:none}.Button-module__link-primary___6Zgkh,.Button-module__transparent-primary___iwWv5{background-color:transparent;color:var(--cdp-web-colors-link-primary-text-default)}.Button-module__link-primary___6Zgkh:hover,.Button-module__transparent-primary___iwWv5:hover{color:var(--cdp-web-colors-link-primary-text-hover)}.Button-module__link-primary___6Zgkh:focus,.Button-module__transparent-primary___iwWv5:focus{outline:none}.Button-module__link-primary___6Zgkh:focus-visible,.Button-module__transparent-primary___iwWv5:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-link-primary-text-default);outline:none}.Button-module__link-secondary___S0Qdo,.Button-module__transparent-secondary___GfRXu{background-color:transparent;color:var(--cdp-web-colors-link-secondary-text-default)}.Button-module__link-secondary___S0Qdo:hover,.Button-module__transparent-secondary___GfRXu:hover{color:var(--cdp-web-colors-link-secondary-text-hover)}.Button-module__link-secondary___S0Qdo:focus,.Button-module__transparent-secondary___GfRXu:focus{outline:none}.Button-module__link-secondary___S0Qdo:focus-visible,.Button-module__transparent-secondary___GfRXu:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-link-secondary-text-default);outline:none}.Button-module__control-btn___9Gkoz{--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:.5em;color:var(--cdp-web-colors-input-text-default);font-weight:400}.Button-module__control-btn___9Gkoz:focus{outline:none}.Button-module__control-btn___9Gkoz:focus-visible{--cdp-web-button-ring-inset-color: var(--cdp-web-colors-input-border-focus);--cdp-web-button-ring-inset-width: 2px;outline:none}

package/dist/assets/ButtonBase.css

@@ -0,0 +1 @@
+.ButtonBase-module__btn___9S8PJ{--cdp-web-button-ring-color: transparent;--cdp-web-button-ring-width: 2px;--cdp-web-button-ring-inset-color: transparent;--cdp-web-button-ring-inset-width: 2px;box-sizing:border-box;box-shadow:inset 0 0 0 var(--cdp-web-button-ring-inset-width) var(--cdp-web-button-ring-inset-color),0 0 0 var(--cdp-web-button-ring-width) var(--cdp-web-button-ring-color);display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:1em;border:0;background-color:transparent;color:var(--cdp-web-colors-page-text-default);font-size:var(--cdp-web-font-size-base);font-family:var(--cdp-web-font-family-sans);font-weight:500;line-height:1.5;text-decoration:none;cursor:pointer;transition:all .15s ease-in-out;transition-property:color,background-color,border-color,box-shadow,transform;-webkit-user-select:none;user-select:none}.ButtonBase-module__full-width___vLJsn{display:flex;width:100%}.ButtonBase-module__size-lg___569jT{padding:1em}.ButtonBase-module__size-md___sAsBJ{padding:.75em}.ButtonBase-module__size-sm___xHCtU{padding:.5em .75em}.ButtonBase-module__size-xs___LiiO7{padding:.25em .75em}

package/dist/assets/CoinbaseFooter.css

@@ -0,0 +1 @@
+.CoinbaseFooter-module__footer___d0ToM{color:var(--cdp-web-colors-page-text-muted);display:flex;align-items:center;justify-content:center;gap:.5em;line-height:1;padding:1em 2em 0}.CoinbaseFooter-module__text___dmxyS{display:flex;align-items:center;font-size:.75em;gap:.25em;margin:0}.CoinbaseFooter-module__icon___3-qMm{height:auto;width:.75em}.CoinbaseFooter-module__coinbase-icon___Ws6HN{height:1em;width:auto}

package/dist/assets/Select.css

@@ -0,0 +1 @@
+.Select-module__select-trigger___yqioM{--cdp-web-button-ring-inset-color: var(--cdp-web-colors-select-trigger-border-default);--cdp-web-button-ring-inset-width: 1px;background-color:var(--cdp-web-colors-select-trigger-bg-default);border-radius:.5em;color:var(--cdp-web-colors-select-trigger-text-default);font-weight:500;text-align:left;justify-content:space-between}.Select-module__select-trigger___yqioM:focus{outline:none}.Select-module__select-trigger___yqioM:focus-visible{--cdp-web-button-ring-inset-color: var(--cdp-web-colors-select-trigger-border-focus);--cdp-web-button-ring-inset-width: 2px;outline:none}.Select-module__select-icon___hE7Wy{transition:transform .2s ease-in-out}.Select-module__select-trigger___yqioM[data-state=open] .Select-module__select-icon___hE7Wy{transform:rotate(0)}.Select-module__select-trigger___yqioM[data-state=closed] .Select-module__select-icon___hE7Wy{transform:rotate(-90deg)}.Select-module__select-content___6R8J9{--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px -1px rgb(0 0 0 / 10%);background-color:var(--cdp-web-colors-select-list-bg-default);border:1px solid var(--cdp-web-colors-select-list-border-default);border-radius:.5em;box-sizing:border-box;box-shadow:var(--shadow-sm);font-size:var(--cdp-web-font-size-base);max-height:var(--radix-select-content-available-height);padding:.5em;text-align:left;width:var(--radix-select-trigger-width)}.Select-module__select-content___6R8J9[data-state=open]{animation:Select-module__slide-down-and-fade___66mDK .2s cubic-bezier(.4,0,.2,1)}.Select-module__select-content___6R8J9[data-side=top][data-state=open]{animation:Select-module__slide-up-and-fade___0H9hX .2s cubic-bezier(.4,0,.2,1)}.Select-module__select-item___12l2C{background-color:var(--cdp-web-colors-select-list-item-bg-default);border-radius:.5em;color:var(--cdp-web-colors-select-list-item-text-default);cursor:pointer;font-size:.875em;display:flex;align-items:center;justify-content:space-between;gap:.5em;padding:.5em;transition:background-color .2s cubic-bezier(.4,0,.2,1)}.Select-module__select-item___12l2C[data-highlighted]{background-color:var(--cdp-web-colors-select-list-item-bg-highlight);color:var(--cdp-web-colors-select-list-item-text-onHighlight);outline:none}.Select-module__rotate-180___KuvGV{transform:rotate(180deg)}@keyframes Select-module__slide-down-and-fade___66mDK{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes Select-module__slide-up-and-fade___0H9hX{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

package/dist/components/SignIn/SignInFooter.d.ts

@@ -1,2 +1,2 @@
 import { HTMLAttributes } from 'react';
-export declare const SignInFooter: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const SignInFooter: (props: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SignIn/SignInFooter.js

@@ -1,18 +1,7 @@
-import { jsxs as e, jsx as o } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import "react";
-import { IconCoinbaseWordmark as c } from "../../icons/IconCoinbaseWordmark.js";
-import { IconLock as s } from "../../icons/IconLock.js";
-import '../../assets/SignInFooter.css';const t = "SignInFooter-module__footer___DLNrl", a = "SignInFooter-module__icon___hFhfx", n = {
-  footer: t,
-  icon: a,
-  "coinbase-icon": "SignInFooter-module__coinbase-icon___NeFOp"
-}, f = ({ className: r = "", ...i }) => /* @__PURE__ */ e("div", { className: `${n.footer} ${r}`, ...i, children: [
-  /* @__PURE__ */ o(s, { className: n.icon }),
-  /* @__PURE__ */ e("p", { children: [
-    /* @__PURE__ */ o("span", { children: "Secured by " }),
-    /* @__PURE__ */ o(c, { className: n["coinbase-icon"], "aria-label": "Coinbase" })
-  ] })
-] });
+import { CoinbaseFooter as t } from "../ui/CoinbaseFooter/index.js";
+const n = (o) => /* @__PURE__ */ r(t, { ...o });
 export {
-  f as SignInFooter
+  n as SignInFooter
 };

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

@@ -0,0 +1,21 @@
+import { SelectProps as SelectPropsPrimitive, SelectContentProps as SelectContentPropsPrimitive, SelectItemProps as SelectItemPropsPrimitive, SelectTriggerProps as SelectTriggerPropsPrimitive, SelectValueProps } from '@radix-ui/react-select';
+import { ReactNode } from 'react';
+import { InputSize } from '../../../theme/theme';
+export interface SelectProps extends SelectPropsPrimitive {
+    className?: string;
+}
+export interface SelectTriggerProps extends SelectTriggerPropsPrimitive {
+    className?: string;
+    placeholder?: SelectValueProps["placeholder"];
+    size?: InputSize;
+}
+export interface SelectContentProps extends SelectContentPropsPrimitive {
+    className?: string;
+}
+export interface SelectItemProps extends SelectItemPropsPrimitive {
+    indicator?: boolean | ReactNode;
+}
+export declare const Select: ({ children, ...props }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectTrigger: import('react').ForwardRefExoticComponent<SelectTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const SelectContent: import('react').ForwardRefExoticComponent<SelectContentProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const SelectItem: import('react').ForwardRefExoticComponent<SelectItemProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,74 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { SelectTrigger as u, SelectValue as p, SelectIcon as h, SelectPortal as f, SelectContent as g, SelectScrollUpButton as C, SelectViewport as I, SelectScrollDownButton as N, SelectItem as $, SelectItemText as y, SelectItemIndicator as T, Select as w } from "@radix-ui/react-select";
+import { forwardRef as a } from "react";
+import { useTheme as x } from "../../ThemeProvider/index.js";
+import { ButtonBase as B } from "../../ui/ButtonBase/index.js";
+import { IconCheck as V } from "../../../icons/IconCheck.js";
+import { IconChevronDown as m } from "../../../icons/IconChevronDown.js";
+import "../../../theme/theme.js";
+import '../../../assets/Select.css';const o = {
+  "select-trigger": "Select-module__select-trigger___yqioM",
+  "select-icon": "Select-module__select-icon___hE7Wy",
+  "select-content": "Select-module__select-content___6R8J9",
+  "select-item": "Select-module__select-item___12l2C",
+  "rotate-180": "Select-module__rotate-180___KuvGV"
+}, K = ({ children: l, ...t }) => /* @__PURE__ */ e(w, { ...t, children: l }), b = a(
+  ({ children: l, className: t = "", placeholder: c = "Select an option", size: r = "md", ...s }, n) => /* @__PURE__ */ e(u, { ...s, asChild: !0, children: l || /* @__PURE__ */ i(
+    B,
+    {
+      className: `${o["select-trigger"]} ${t}`,
+      fullWidth: !0,
+      ref: n,
+      size: r,
+      children: [
+        /* @__PURE__ */ e(p, { placeholder: c }),
+        /* @__PURE__ */ e(h, { asChild: !0, children: /* @__PURE__ */ e(m, { className: o["select-icon"] }) })
+      ]
+    }
+  ) })
+);
+b.displayName = "SelectTrigger";
+const j = a(
+  ({
+    children: l,
+    className: t = "",
+    style: c,
+    position: r = "popper",
+    side: s = "bottom",
+    sideOffset: n = 1,
+    ..._
+  }, d) => {
+    const { cssVariables: S } = x();
+    return /* @__PURE__ */ e(f, { children: /* @__PURE__ */ i(
+      g,
+      {
+        position: r,
+        side: s,
+        sideOffset: n,
+        className: `${o["select-content"]} ${t}`,
+        ref: d,
+        style: c ? { ...S, ...c } : S,
+        ..._,
+        children: [
+          /* @__PURE__ */ e(C, { children: /* @__PURE__ */ e(m, { className: o["rotate-180"] }) }),
+          /* @__PURE__ */ e(I, { children: l }),
+          /* @__PURE__ */ e(N, { children: /* @__PURE__ */ e(m, {}) })
+        ]
+      }
+    ) });
+  }
+);
+j.displayName = "SelectContent";
+const v = a(
+  ({ children: l, indicator: t, ...c }, r) => /* @__PURE__ */ i($, { ...c, ref: r, className: o["select-item"], children: [
+    /* @__PURE__ */ e(y, { children: l }),
+    t && /* @__PURE__ */ e(T, { asChild: !0, children: typeof t == "boolean" ? /* @__PURE__ */ e(V, {}) : t })
+  ] })
+);
+v.displayName = "SelectItem";
+export {
+  K as Select,
+  j as SelectContent,
+  v as SelectItem,
+  b as SelectTrigger
+};

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

@@ -1,9 +1,8 @@
-import { ButtonHTMLAttributes, ReactNode } from 'react';
-import { ButtonSize, ButtonVariant } from '../../../theme/theme';
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    isPending?: boolean;
+import { ReactNode } from 'react';
+import { ButtonBaseProps } from '../ButtonBase';
+import { ButtonVariant } from '../../../theme/theme';
+export interface ButtonProps extends ButtonBaseProps {
     pendingLabel?: ReactNode;
-    size?: ButtonSize;
     variant?: ButtonVariant;
 }
 export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

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

@@ -1,75 +1,54 @@
-import { jsx as e, jsxs as c, Fragment as y } from "react/jsx-runtime";
-import { forwardRef as p, useMemo as a } from "react";
+import { jsx as t, jsxs as c, Fragment as p } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import { ButtonBase as k } from "../ButtonBase/index.js";
 import { LoadingSpinner as B } from "../LoadingSpinner/index.js";
-import { VisuallyHidden as k } from "../VisuallyHidden/index.js";
+import { VisuallyHidden as b } from "../VisuallyHidden/index.js";
 import "../../../theme/theme.js";
-import '../../../assets/Button.css';const f = "Button-module__btn___Wj6Dr", g = "Button-module__primary___WGT--", z = "Button-module__secondary___Fx0LJ", r = {
+import '../../../assets/Button.css';const f = "Button-module__btn___Wj6Dr", S = "Button-module__primary___WGT--", h = "Button-module__secondary___Fx0LJ", r = {
   btn: f,
-  "size-lg": "Button-module__size-lg___WlcVE",
-  "size-md": "Button-module__size-md___-SMmD",
-  "size-sm": "Button-module__size-sm___Vnrq6",
   "link-primary": "Button-module__link-primary___6Zgkh",
   "link-secondary": "Button-module__link-secondary___S0Qdo",
-  primary: g,
-  secondary: z,
+  primary: S,
+  secondary: h,
   "transparent-primary": "Button-module__transparent-primary___iwWv5",
-  "transparent-secondary": "Button-module__transparent-secondary___GfRXu"
-}, h = p(
+  "transparent-secondary": "Button-module__transparent-secondary___GfRXu",
+  "control-btn": "Button-module__control-btn___9Gkoz"
+}, a = {
+  primary: r.primary,
+  secondary: r.secondary,
+  linkPrimary: r["link-primary"],
+  linkSecondary: r["link-secondary"],
+  transparentPrimary: r["transparent-primary"],
+  transparentSecondary: r["transparent-secondary"],
+  control: r["control-btn"]
+}, g = u(
   ({
-    children: s,
-    className: o = "",
-    isPending: i,
-    pendingLabel: m = "Loading...",
-    size: t = "lg",
+    children: e,
+    className: i = "",
+    isPending: o,
+    pendingLabel: s = "Loading...",
+    size: m = "lg",
     variant: n = "primary",
     ..._
   }, d) => {
-    const u = a(() => {
-      if (n === "linkPrimary" || n === "linkSecondary")
-        return "";
-      switch (t) {
-        case "lg":
-          return r["size-lg"];
-        case "md":
-          return r["size-md"];
-        case "sm":
-          return r["size-sm"];
-        default:
-          return r["size-lg"];
-      }
-    }, [t, n]), l = a(() => {
-      switch (n) {
-        case "primary":
-          return r.primary;
-        case "secondary":
-          return r.secondary;
-        case "linkPrimary":
-          return r["link-primary"];
-        case "linkSecondary":
-          return r["link-secondary"];
-        case "transparentPrimary":
-          return r["transparent-primary"];
-        case "transparentSecondary":
-          return r["transparent-secondary"];
-        default:
-          return r.primary;
-      }
-    }, [n]);
-    return /* @__PURE__ */ e(
-      "button",
+    const l = n === "linkPrimary" || n === "linkSecondary" ? "none" : m, y = a[n] ?? a.primary;
+    return /* @__PURE__ */ t(
+      k,
       {
-        className: `${r.btn} ${u} ${l} ${o}`,
+        className: `${r.btn} ${y} ${i}`,
         ref: d,
+        isPending: o,
+        size: l,
         ..._,
-        children: i ? /* @__PURE__ */ c(y, { children: [
-          /* @__PURE__ */ e(B, { "aria-hidden": "true" }),
-          /* @__PURE__ */ e(k, { children: m })
-        ] }) : s
+        children: o ? /* @__PURE__ */ c(p, { children: [
+          /* @__PURE__ */ t(B, { "aria-hidden": "true" }),
+          /* @__PURE__ */ t(b, { children: s })
+        ] }) : e
       }
     );
   }
 );
-h.displayName = "Button";
+g.displayName = "Button";
 export {
-  h as Button
+  g as Button
 };

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

@@ -0,0 +1,8 @@
+import { ButtonHTMLAttributes } from 'react';
+import { ButtonSize } from '../../../theme/theme';
+export interface ButtonBaseProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    fullWidth?: boolean;
+    isPending?: boolean;
+    size?: ButtonSize;
+}
+export declare const ButtonBase: import('react').ForwardRefExoticComponent<ButtonBaseProps & import('react').RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,45 @@
+import { jsx as B } from "react/jsx-runtime";
+import { forwardRef as d, useMemo as r } from "react";
+import "../../../theme/theme.js";
+import '../../../assets/ButtonBase.css';const z = "ButtonBase-module__btn___9S8PJ", s = {
+  btn: z,
+  "full-width": "ButtonBase-module__full-width___vLJsn",
+  "size-lg": "ButtonBase-module__size-lg___569jT",
+  "size-md": "ButtonBase-module__size-md___sAsBJ",
+  "size-sm": "ButtonBase-module__size-sm___xHCtU",
+  "size-xs": "ButtonBase-module__size-xs___LiiO7"
+}, c = d(
+  ({
+    children: n,
+    className: m = "",
+    fullWidth: t = !1,
+    isPending: i,
+    size: o = "lg",
+    ...l
+  }, u) => {
+    const a = r(() => {
+      const e = [s.btn], _ = {
+        lg: s["size-lg"],
+        md: s["size-md"],
+        sm: s["size-sm"],
+        xs: s["size-xs"],
+        none: ""
+      };
+      return e.push(_[o] ?? _.lg), t && e.push(s["full-width"]), e.join(" ");
+    }, [t, o]);
+    return /* @__PURE__ */ B(
+      "button",
+      {
+        className: `${a} ${m}`,
+        ref: u,
+        "data-pending": i,
+        ...l,
+        children: n
+      }
+    );
+  }
+);
+c.displayName = "ButtonBase";
+export {
+  c as ButtonBase
+};

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

@@ -0,0 +1,2 @@
+import { HTMLAttributes } from 'react';
+export declare const CoinbaseFooter: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,19 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import "react";
+import { IconCoinbaseWordmark as c } from "../../../icons/IconCoinbaseWordmark.js";
+import { IconLock as i } from "../../../icons/IconLock.js";
+import '../../../assets/CoinbaseFooter.css';const r = "CoinbaseFooter-module__footer___d0ToM", a = "CoinbaseFooter-module__text___dmxyS", _ = "CoinbaseFooter-module__icon___3-qMm", o = {
+  footer: r,
+  text: a,
+  icon: _,
+  "coinbase-icon": "CoinbaseFooter-module__coinbase-icon___Ws6HN"
+}, x = ({ className: n = "", ...t }) => /* @__PURE__ */ s("div", { className: `${o.footer} ${n}`, ...t, children: [
+  /* @__PURE__ */ e(i, { className: o.icon }),
+  /* @__PURE__ */ s("p", { className: o.text, children: [
+    /* @__PURE__ */ e("span", { children: "Secured by " }),
+    /* @__PURE__ */ e(c, { className: o["coinbase-icon"], "aria-label": "Coinbase" })
+  ] })
+] });
+export {
+  x as CoinbaseFooter
+};

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

@@ -1,8 +1,9 @@
-import { CSSProperties, ElementType } from 'react';
+import { CSSProperties, ElementType, ReactNode } from 'react';
 interface LoadingSkeletonProps {
     as?: ElementType;
     className?: string;
     style?: CSSProperties;
+    children?: ReactNode;
 }
-export declare const LoadingSkeleton: ({ as: Component, className, style, }: LoadingSkeletonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LoadingSkeleton: ({ as: Component, children, className, style, }: LoadingSkeletonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,19 +1,13 @@
-import { jsx as d } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import "react";
-import '../../../assets/LoadingSkeleton.css';const e = "LoadingSkeleton-module__loading___kqndV", i = {
-  loading: e
-}, s = ({
+import '../../../assets/LoadingSkeleton.css';const i = "LoadingSkeleton-module__loading___kqndV", t = {
+  loading: i
+}, r = ({
   as: o = "div",
-  className: n = "",
-  style: a
-}) => /* @__PURE__ */ d(
-  o,
-  {
-    "aria-hidden": "true",
-    className: `${i.loading} ${n}`,
-    style: a
-  }
-);
+  children: n,
+  className: a = "",
+  style: d
+}) => /* @__PURE__ */ e(o, { "aria-hidden": "true", className: `${t.loading} ${a}`, style: d, children: n });
 export {
-  s as LoadingSkeleton
+  r as LoadingSkeleton
 };

package/dist/icons/IconCheck.d.ts

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

package/dist/icons/IconCheck.js

@@ -0,0 +1,14 @@
+import { jsx as o } from "react/jsx-runtime";
+import "react";
+import { SvgIcon as l } from "./SvgIcon.js";
+const n = (e) => /* @__PURE__ */ o(l, { viewBox: "0 0 16 16", width: "16", height: "16", fill: "currentColor", ...e, children: /* @__PURE__ */ o(
+  "path",
+  {
+    fillRule: "evenodd",
+    d: "M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z",
+    clipRule: "evenodd"
+  }
+) });
+export {
+  n as IconCheck
+};

package/dist/icons/IconChevronDown.d.ts

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

package/dist/icons/IconChevronDown.js

@@ -0,0 +1,14 @@
+import { jsx as o } from "react/jsx-runtime";
+import "react";
+import { SvgIcon as r } from "./SvgIcon.js";
+const t = (e) => /* @__PURE__ */ o(r, { viewBox: "0 0 16 16", fill: "currentColor", width: "16", height: "16", ...e, children: /* @__PURE__ */ o(
+  "path",
+  {
+    fillRule: "evenodd",
+    d: "M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z",
+    clipRule: "evenodd"
+  }
+) });
+export {
+  t as IconChevronDown
+};

package/dist/icons/index.d.ts

@@ -1,6 +1,8 @@
 export * from './IconArrowLeft';
 export * from './IconArrowsUpDown';
+export * from './IconCheck';
 export * from './IconCheckCircle';
+export * from './IconChevronDown';
 export * from './IconEnvelope';
 export * from './IconExclamationCircle';
 export * from './IconLock';

package/dist/icons/index.js

@@ -1,18 +1,22 @@
 import { IconArrowLeft as e } from "./IconArrowLeft.js";
 import { IconArrowsUpDown as n } from "./IconArrowsUpDown.js";
-import { IconCheckCircle as t } from "./IconCheckCircle.js";
-import { IconEnvelope as m } from "./IconEnvelope.js";
-import { IconExclamationCircle as I } from "./IconExclamationCircle.js";
+import { IconCheck as t } from "./IconCheck.js";
+import { IconCheckCircle as m } from "./IconCheckCircle.js";
+import { IconChevronDown as I } from "./IconChevronDown.js";
+import { IconEnvelope as h } from "./IconEnvelope.js";
+import { IconExclamationCircle as l } from "./IconExclamationCircle.js";
 import { IconLock as a } from "./IconLock.js";
-import { IconPhone as k } from "./IconPhone.js";
-import { IconXMark as C } from "./IconXMark.js";
+import { IconPhone as v } from "./IconPhone.js";
+import { IconXMark as D } from "./IconXMark.js";
 export {
   e as IconArrowLeft,
   n as IconArrowsUpDown,
-  t as IconCheckCircle,
-  m as IconEnvelope,
-  I as IconExclamationCircle,
+  t as IconCheck,
+  m as IconCheckCircle,
+  I as IconChevronDown,
+  h as IconEnvelope,
+  l as IconExclamationCircle,
   a as IconLock,
-  k as IconPhone,
-  C as IconXMark
+  v as IconPhone,
+  D as IconXMark
 };

package/dist/index.js

@@ -1,77 +1,81 @@
 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 a } from "./components/SignIn/useSignInReducer.js";
+import { SignIn as c } from "./components/SignIn/index.js";
+import { useSignInReducer as I } from "./components/SignIn/useSignInReducer.js";
 import { SignOutButton as l } from "./components/SignOutButton/index.js";
 import { SignInModal as u } 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 { cssVariables as T } from "./theme/cssVariables.js";
 import { theme as A } from "./theme/theme.js";
-import { colors as E, colorsBase as M, colorsComponents as P, colorsSemantic as b, font as v, tokens as w } from "./theme/tokens.js";
+import { colors as E, colorsBase as v, colorsComponents as w, colorsSemantic as D, font as M, tokens as P } from "./theme/tokens.js";
 import { flattenTokensObject as F, themeToCssVariables as O } from "./theme/utils.js";
 import { IconArrowLeft as V } from "./icons/IconArrowLeft.js";
 import { IconArrowsUpDown as L } from "./icons/IconArrowsUpDown.js";
-import { IconCheckCircle as j } from "./icons/IconCheckCircle.js";
-import { IconEnvelope as X } from "./icons/IconEnvelope.js";
-import { IconExclamationCircle as q } from "./icons/IconExclamationCircle.js";
-import { IconLock as z } from "./icons/IconLock.js";
-import { IconPhone as J } from "./icons/IconPhone.js";
-import { IconXMark as Q } from "./icons/IconXMark.js";
-import { clamp as Y } from "./utils/clamp.js";
-import { getMessageFromUnknownError as $ } from "./utils/getMessageFromUnknownError.js";
-import { isApiError as ro } from "./utils/isApiError.js";
-import { isEmailInvalid as to } from "./utils/isEmailInvalid.js";
-import { parseValuesFromPhoneNumber as mo } from "./utils/parseValuesFromPhoneNumber.js";
-import { SignInAuthMethodButtons as fo } from "./components/SignIn/SignInAuthMethodButtons.js";
-import { SignInBackButton as io } from "./components/SignIn/SignInBackButton.js";
-import { SignInDescription as co } from "./components/SignIn/SignInDescription.js";
-import { SignInFooter as Io } from "./components/SignIn/SignInFooter.js";
-import { SignInForm as go } from "./components/SignIn/SignInForm.js";
-import { SignInImage as So } from "./components/SignIn/SignInImage.js";
-import { SignInTitle as Co } from "./components/SignIn/SignInTitle.js";
-import { useSignInContext as ko } from "./components/SignIn/SignInProvider.js";
+import { IconCheck as j } from "./icons/IconCheck.js";
+import { IconCheckCircle as X } from "./icons/IconCheckCircle.js";
+import { IconChevronDown as q } from "./icons/IconChevronDown.js";
+import { IconEnvelope as z } from "./icons/IconEnvelope.js";
+import { IconExclamationCircle as J } from "./icons/IconExclamationCircle.js";
+import { IconLock as Q } from "./icons/IconLock.js";
+import { IconPhone as Y } from "./icons/IconPhone.js";
+import { IconXMark as $ } from "./icons/IconXMark.js";
+import { clamp as ro } from "./utils/clamp.js";
+import { getMessageFromUnknownError as to } from "./utils/getMessageFromUnknownError.js";
+import { isApiError as mo } from "./utils/isApiError.js";
+import { isEmailInvalid as fo } from "./utils/isEmailInvalid.js";
+import { parseValuesFromPhoneNumber as io } from "./utils/parseValuesFromPhoneNumber.js";
+import { SignInAuthMethodButtons as so } from "./components/SignIn/SignInAuthMethodButtons.js";
+import { SignInBackButton as ao } from "./components/SignIn/SignInBackButton.js";
+import { SignInDescription as go } from "./components/SignIn/SignInDescription.js";
+import { SignInFooter as So } from "./components/SignIn/SignInFooter.js";
+import { SignInForm as Co } from "./components/SignIn/SignInForm.js";
+import { SignInImage as To } from "./components/SignIn/SignInImage.js";
+import { SignInTitle as Bo } from "./components/SignIn/SignInTitle.js";
+import { useSignInContext as vo } from "./components/SignIn/SignInProvider.js";
 export {
   e as AUTH_METHODS,
   p as AuthButton,
   t as CDPReactProvider,
   V as IconArrowLeft,
   L as IconArrowsUpDown,
-  j as IconCheckCircle,
-  X as IconEnvelope,
-  q as IconExclamationCircle,
-  z as IconLock,
-  J as IconPhone,
-  Q as IconXMark,
+  j as IconCheck,
+  X as IconCheckCircle,
+  q as IconChevronDown,
+  z as IconEnvelope,
+  J as IconExclamationCircle,
+  Q as IconLock,
+  Y as IconPhone,
+  $ as IconXMark,
   x as SendTransactionButton,
-  s as SignIn,
-  fo as SignInAuthMethodButtons,
-  io as SignInBackButton,
-  co as SignInDescription,
-  Io as SignInFooter,
-  go as SignInForm,
-  So as SignInImage,
+  c as SignIn,
+  so as SignInAuthMethodButtons,
+  ao as SignInBackButton,
+  go as SignInDescription,
+  So as SignInFooter,
+  Co as SignInForm,
+  To as SignInImage,
   u as SignInModal,
-  Co as SignInTitle,
+  Bo as SignInTitle,
   l as SignOutButton,
   h as ThemeProvider,
-  Y as clamp,
+  ro as clamp,
   E as colors,
-  M as colorsBase,
-  P as colorsComponents,
-  b as colorsSemantic,
-  d as cssVariables,
+  v as colorsBase,
+  w as colorsComponents,
+  D as colorsSemantic,
+  T as cssVariables,
   F as flattenTokensObject,
-  v as font,
-  $ as getMessageFromUnknownError,
-  ro as isApiError,
-  to as isEmailInvalid,
-  mo as parseValuesFromPhoneNumber,
+  M as font,
+  to as getMessageFromUnknownError,
+  mo as isApiError,
+  fo as isEmailInvalid,
+  io as parseValuesFromPhoneNumber,
   A as theme,
   O as themeToCssVariables,
-  w as tokens,
+  P as tokens,
   n as useAppConfig,
-  ko as useSignInContext,
-  a as useSignInReducer,
+  vo as useSignInContext,
+  I as useSignInReducer,
   C as useTheme
 };

package/dist/theme/theme.d.ts

@@ -154,6 +154,99 @@ export declare const theme: Flattened<{
                 };
             };
         };
+        readonly select: {
+            readonly label: {
+                readonly default: {
+                    readonly value: "{colors.fg.default}";
+                };
+            };
+            readonly trigger: {
+                readonly bg: {
+                    readonly default: {
+                        readonly value: "{colors.bg.default}";
+                    };
+                };
+                readonly border: {
+                    readonly default: {
+                        readonly value: "{colors.line.heavy}";
+                    };
+                    readonly focus: {
+                        readonly value: "{colors.line.primary}";
+                    };
+                    readonly error: {
+                        readonly value: "{colors.line.negative}";
+                    };
+                    readonly success: {
+                        readonly value: "{colors.line.positive}";
+                    };
+                };
+                readonly placeholder: {
+                    readonly default: {
+                        readonly value: "{colors.fg.muted}";
+                    };
+                };
+                readonly text: {
+                    readonly default: {
+                        readonly value: "{colors.fg.default}";
+                    };
+                };
+                readonly errorText: {
+                    readonly default: {
+                        readonly value: "{colors.fg.negative}";
+                    };
+                };
+                readonly successText: {
+                    readonly default: {
+                        readonly value: "{colors.fg.positive}";
+                    };
+                };
+            };
+            readonly list: {
+                readonly bg: {
+                    readonly default: {
+                        readonly value: "{colors.bg.default}";
+                    };
+                };
+                readonly border: {
+                    readonly default: {
+                        readonly value: "{colors.line.heavy}";
+                    };
+                    readonly focus: {
+                        readonly value: "{colors.line.primary}";
+                    };
+                    readonly error: {
+                        readonly value: "{colors.line.negative}";
+                    };
+                    readonly success: {
+                        readonly value: "{colors.line.positive}";
+                    };
+                };
+                readonly item: {
+                    readonly bg: {
+                        readonly default: {
+                            readonly value: "{colors.bg.default}";
+                        };
+                        readonly highlight: {
+                            readonly value: "{colors.bg.secondary}";
+                        };
+                    };
+                    readonly text: {
+                        readonly default: {
+                            readonly value: "{colors.fg.default}";
+                        };
+                        readonly muted: {
+                            readonly value: "{colors.fg.muted}";
+                        };
+                        readonly onHighlight: {
+                            readonly value: "{colors.fg.default}";
+                        };
+                        readonly mutedOnHighlight: {
+                            readonly value: "{colors.fg.muted}";
+                        };
+                    };
+                };
+            };
+        };
         readonly bg: {
             readonly default: {
                 readonly value: "#ffffff";
@@ -247,5 +340,7 @@ 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";
+export type ButtonVariant = "primary" | "secondary" | "linkPrimary" | "linkSecondary" | "transparentPrimary" | "transparentSecondary" | "control";
+export type Size = "lg" | "md" | "sm" | "xs";
+export type ButtonSize = Size | "none";
+export type InputSize = Size;

package/dist/theme/tokens.d.ts

@@ -235,6 +235,99 @@ export declare const colorsComponents: {
             };
         };
     };
+    readonly select: {
+        readonly label: {
+            readonly default: {
+                readonly value: "{colors.fg.default}";
+            };
+        };
+        readonly trigger: {
+            readonly bg: {
+                readonly default: {
+                    readonly value: "{colors.bg.default}";
+                };
+            };
+            readonly border: {
+                readonly default: {
+                    readonly value: "{colors.line.heavy}";
+                };
+                readonly focus: {
+                    readonly value: "{colors.line.primary}";
+                };
+                readonly error: {
+                    readonly value: "{colors.line.negative}";
+                };
+                readonly success: {
+                    readonly value: "{colors.line.positive}";
+                };
+            };
+            readonly placeholder: {
+                readonly default: {
+                    readonly value: "{colors.fg.muted}";
+                };
+            };
+            readonly text: {
+                readonly default: {
+                    readonly value: "{colors.fg.default}";
+                };
+            };
+            readonly errorText: {
+                readonly default: {
+                    readonly value: "{colors.fg.negative}";
+                };
+            };
+            readonly successText: {
+                readonly default: {
+                    readonly value: "{colors.fg.positive}";
+                };
+            };
+        };
+        readonly list: {
+            readonly bg: {
+                readonly default: {
+                    readonly value: "{colors.bg.default}";
+                };
+            };
+            readonly border: {
+                readonly default: {
+                    readonly value: "{colors.line.heavy}";
+                };
+                readonly focus: {
+                    readonly value: "{colors.line.primary}";
+                };
+                readonly error: {
+                    readonly value: "{colors.line.negative}";
+                };
+                readonly success: {
+                    readonly value: "{colors.line.positive}";
+                };
+            };
+            readonly item: {
+                readonly bg: {
+                    readonly default: {
+                        readonly value: "{colors.bg.default}";
+                    };
+                    readonly highlight: {
+                        readonly value: "{colors.bg.secondary}";
+                    };
+                };
+                readonly text: {
+                    readonly default: {
+                        readonly value: "{colors.fg.default}";
+                    };
+                    readonly muted: {
+                        readonly value: "{colors.fg.muted}";
+                    };
+                    readonly onHighlight: {
+                        readonly value: "{colors.fg.default}";
+                    };
+                    readonly mutedOnHighlight: {
+                        readonly value: "{colors.fg.muted}";
+                    };
+                };
+            };
+        };
+    };
 };
 export declare const colors: {
     readonly page: {
@@ -389,6 +482,99 @@ export declare const colors: {
             };
         };
     };
+    readonly select: {
+        readonly label: {
+            readonly default: {
+                readonly value: "{colors.fg.default}";
+            };
+        };
+        readonly trigger: {
+            readonly bg: {
+                readonly default: {
+                    readonly value: "{colors.bg.default}";
+                };
+            };
+            readonly border: {
+                readonly default: {
+                    readonly value: "{colors.line.heavy}";
+                };
+                readonly focus: {
+                    readonly value: "{colors.line.primary}";
+                };
+                readonly error: {
+                    readonly value: "{colors.line.negative}";
+                };
+                readonly success: {
+                    readonly value: "{colors.line.positive}";
+                };
+            };
+            readonly placeholder: {
+                readonly default: {
+                    readonly value: "{colors.fg.muted}";
+                };
+            };
+            readonly text: {
+                readonly default: {
+                    readonly value: "{colors.fg.default}";
+                };
+            };
+            readonly errorText: {
+                readonly default: {
+                    readonly value: "{colors.fg.negative}";
+                };
+            };
+            readonly successText: {
+                readonly default: {
+                    readonly value: "{colors.fg.positive}";
+                };
+            };
+        };
+        readonly list: {
+            readonly bg: {
+                readonly default: {
+                    readonly value: "{colors.bg.default}";
+                };
+            };
+            readonly border: {
+                readonly default: {
+                    readonly value: "{colors.line.heavy}";
+                };
+                readonly focus: {
+                    readonly value: "{colors.line.primary}";
+                };
+                readonly error: {
+                    readonly value: "{colors.line.negative}";
+                };
+                readonly success: {
+                    readonly value: "{colors.line.positive}";
+                };
+            };
+            readonly item: {
+                readonly bg: {
+                    readonly default: {
+                        readonly value: "{colors.bg.default}";
+                    };
+                    readonly highlight: {
+                        readonly value: "{colors.bg.secondary}";
+                    };
+                };
+                readonly text: {
+                    readonly default: {
+                        readonly value: "{colors.fg.default}";
+                    };
+                    readonly muted: {
+                        readonly value: "{colors.fg.muted}";
+                    };
+                    readonly onHighlight: {
+                        readonly value: "{colors.fg.default}";
+                    };
+                    readonly mutedOnHighlight: {
+                        readonly value: "{colors.fg.muted}";
+                    };
+                };
+            };
+        };
+    };
     readonly bg: {
         readonly default: {
             readonly value: "#ffffff";
@@ -624,6 +810,99 @@ export declare const tokens: {
                 };
             };
         };
+        readonly select: {
+            readonly label: {
+                readonly default: {
+                    readonly value: "{colors.fg.default}";
+                };
+            };
+            readonly trigger: {
+                readonly bg: {
+                    readonly default: {
+                        readonly value: "{colors.bg.default}";
+                    };
+                };
+                readonly border: {
+                    readonly default: {
+                        readonly value: "{colors.line.heavy}";
+                    };
+                    readonly focus: {
+                        readonly value: "{colors.line.primary}";
+                    };
+                    readonly error: {
+                        readonly value: "{colors.line.negative}";
+                    };
+                    readonly success: {
+                        readonly value: "{colors.line.positive}";
+                    };
+                };
+                readonly placeholder: {
+                    readonly default: {
+                        readonly value: "{colors.fg.muted}";
+                    };
+                };
+                readonly text: {
+                    readonly default: {
+                        readonly value: "{colors.fg.default}";
+                    };
+                };
+                readonly errorText: {
+                    readonly default: {
+                        readonly value: "{colors.fg.negative}";
+                    };
+                };
+                readonly successText: {
+                    readonly default: {
+                        readonly value: "{colors.fg.positive}";
+                    };
+                };
+            };
+            readonly list: {
+                readonly bg: {
+                    readonly default: {
+                        readonly value: "{colors.bg.default}";
+                    };
+                };
+                readonly border: {
+                    readonly default: {
+                        readonly value: "{colors.line.heavy}";
+                    };
+                    readonly focus: {
+                        readonly value: "{colors.line.primary}";
+                    };
+                    readonly error: {
+                        readonly value: "{colors.line.negative}";
+                    };
+                    readonly success: {
+                        readonly value: "{colors.line.positive}";
+                    };
+                };
+                readonly item: {
+                    readonly bg: {
+                        readonly default: {
+                            readonly value: "{colors.bg.default}";
+                        };
+                        readonly highlight: {
+                            readonly value: "{colors.bg.secondary}";
+                        };
+                    };
+                    readonly text: {
+                        readonly default: {
+                            readonly value: "{colors.fg.default}";
+                        };
+                        readonly muted: {
+                            readonly value: "{colors.fg.muted}";
+                        };
+                        readonly onHighlight: {
+                            readonly value: "{colors.fg.default}";
+                        };
+                        readonly mutedOnHighlight: {
+                            readonly value: "{colors.fg.muted}";
+                        };
+                    };
+                };
+            };
+        };
         readonly bg: {
             readonly default: {
                 readonly value: "#ffffff";

package/dist/theme/tokens.js

@@ -14,7 +14,7 @@ const e = {
   // contextual
   red500: "#cf202f",
   green500: "#098551"
-}, a = {
+}, l = {
   bg: {
     default: { value: e.white },
     // background
@@ -57,7 +57,7 @@ const e = {
     negative: { value: "{colors.fg.negative}" }
     // negative line color
   }
-}, l = {
+}, a = {
   page: {
     bg: {
       default: { value: "{colors.bg.default}" }
@@ -140,10 +140,61 @@ const e = {
     successText: {
       default: { value: "{colors.fg.positive}" }
     }
+  },
+  select: {
+    label: {
+      default: { value: "{colors.fg.default}" }
+    },
+    trigger: {
+      bg: {
+        default: { value: "{colors.bg.default}" }
+      },
+      border: {
+        default: { value: "{colors.line.heavy}" },
+        focus: { value: "{colors.line.primary}" },
+        error: { value: "{colors.line.negative}" },
+        success: { value: "{colors.line.positive}" }
+      },
+      placeholder: {
+        default: { value: "{colors.fg.muted}" }
+      },
+      text: {
+        default: { value: "{colors.fg.default}" }
+      },
+      errorText: {
+        default: { value: "{colors.fg.negative}" }
+      },
+      successText: {
+        default: { value: "{colors.fg.positive}" }
+      }
+    },
+    list: {
+      bg: {
+        default: { value: "{colors.bg.default}" }
+      },
+      border: {
+        default: { value: "{colors.line.heavy}" },
+        focus: { value: "{colors.line.primary}" },
+        error: { value: "{colors.line.negative}" },
+        success: { value: "{colors.line.positive}" }
+      },
+      item: {
+        bg: {
+          default: { value: "{colors.bg.default}" },
+          highlight: { value: "{colors.bg.secondary}" }
+        },
+        text: {
+          default: { value: "{colors.fg.default}" },
+          muted: { value: "{colors.fg.muted}" },
+          onHighlight: { value: "{colors.fg.default}" },
+          mutedOnHighlight: { value: "{colors.fg.muted}" }
+        }
+      }
+    }
   }
 }, o = {
-  ...a,
-  ...l
+  ...l,
+  ...a
 }, r = {
   family: {
     sans: {
@@ -160,8 +211,8 @@ const e = {
 export {
   o as colors,
   e as colorsBase,
-  l as colorsComponents,
-  a as colorsSemantic,
+  a as colorsComponents,
+  l as colorsSemantic,
   r as font,
   u as tokens
 };

package/package.json

@@ -1,20 +1,21 @@
 {
   "name": "@coinbase/cdp-react",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "type": "module",
   "dependencies": {
     "@internationalized/number": "3.6.4",
     "@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-select": "^2.2.6",
     "big.js": "7.0.1",
     "libphonenumber-js": "^1.12.10",
     "react-transition-state": "2.3.0"
   },
   "peerDependencies": {
     "react": ">=18.2.0",
-    "@coinbase/cdp-core": "^0.0.23",
-    "@coinbase/cdp-hooks": "^0.0.23"
+    "@coinbase/cdp-core": "^0.0.24",
+    "@coinbase/cdp-hooks": "^0.0.24"
   },
   "devDependencies": {
     "@size-limit/preset-big-lib": "^11.2.0",
@@ -44,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.23",
-    "@coinbase/cdp-hooks": "^0.0.23"
+    "@coinbase/cdp-core": "^0.0.24",
+    "@coinbase/cdp-hooks": "^0.0.24"
   },
   "size-limit": [
     {

package/dist/assets/SignInFooter.css

@@ -1 +0,0 @@
-.SignInFooter-module__footer___DLNrl{color:var(--cdp-web-colors-page-text-muted);display:flex;align-items:center;justify-content:center;gap:.5em;line-height:1;padding:1em 2em 0}.SignInFooter-module__footer___DLNrl:first-child{border-top:0}.SignInFooter-module__footer___DLNrl p{display:flex;align-items:center;font-size:.75em;gap:.25em;margin:0}.SignInFooter-module__icon___hFhfx{height:auto;width:.75em}.SignInFooter-module__coinbase-icon___NeFOp{height:1em;width:auto}