@coinbase/cdp-react 0.0.23 → 0.0.25

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"]
+}, x = u(
   ({
-    children: s,
-    className: o = "",
-    isPending: i,
-    pendingLabel: m = "Loading...",
-    size: t = "lg",
+    children: e,
+    className: i = "",
+    isPending: o,
+    pendingLabel: s = "Loading...",
+    size: m = "md",
     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 y = n === "linkPrimary" || n === "linkSecondary" ? "none" : m, l = a[n] ?? a.primary;
+    return /* @__PURE__ */ t(
+      k,
       {
-        className: `${r.btn} ${u} ${l} ${o}`,
+        className: `${r.btn} ${l} ${i}`,
         ref: d,
+        isPending: o,
+        size: y,
         ..._,
-        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";
+x.displayName = "Button";
 export {
-  h as Button
+  x 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 d } from "react/jsx-runtime";
+import { forwardRef as B, 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"
+}, _ = {
+  lg: s["size-lg"],
+  md: s["size-md"],
+  sm: s["size-sm"],
+  xs: s["size-xs"],
+  none: ""
+}, c = B(
+  ({
+    children: n,
+    className: m = "",
+    fullWidth: t = !1,
+    isPending: i,
+    size: o = "md",
+    ...u
+  }, a) => {
+    const l = r(() => {
+      const e = [s.btn];
+      return e.push(_[o] ?? _.md), t && e.push(s["full-width"]), e.join(" ");
+    }, [t, o]);
+    return /* @__PURE__ */ d(
+      "button",
+      {
+        className: `${l} ${m}`,
+        ref: a,
+        "data-pending": i,
+        ...u,
+        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/components/ui/LoadingSpinner/index.d.ts

@@ -1,3 +1,10 @@
-export declare const LoadingSpinner: ({ className }: {
+import { CSSProperties } from 'react';
+interface LoadingSpinnerProps {
     className?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+    staticStroke?: boolean;
+    staticStrokeColor?: string;
+    strokeWidth?: string | number;
+    style?: CSSProperties;
+}
+export declare const LoadingSpinner: ({ className, staticStroke, staticStrokeColor, strokeWidth, style, }: LoadingSpinnerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,8 +1,15 @@
-import { jsx as n } from "react/jsx-runtime";
-import '../../../assets/LoadingSpinner.css';const r = "LoadingSpinner-module__spinner___-zo6Y", e = {
-  spinner: r,
+import { jsx as n, jsxs as s } from "react/jsx-runtime";
+import "react";
+import '../../../assets/LoadingSpinner.css';const p = "LoadingSpinner-module__spinner___-zo6Y", i = {
+  spinner: p,
   "spinner-circle": "LoadingSpinner-module__spinner-circle___9Jfm7"
-}, o = ({ className: i }) => /* @__PURE__ */ n(
+}, g = ({
+  className: o,
+  staticStroke: c,
+  staticStrokeColor: r = "currentColor",
+  strokeWidth: e = "3",
+  style: l
+}) => /* @__PURE__ */ n(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -12,20 +19,35 @@ import '../../../assets/LoadingSpinner.css';const r = "LoadingSpinner-module__sp
     width: "24",
     height: "24",
     stroke: "currentColor",
-    className: i,
-    children: /* @__PURE__ */ n("g", { className: e.spinner, children: /* @__PURE__ */ n(
-      "circle",
-      {
-        className: e["spinner-circle"],
-        cx: "12",
-        cy: "12",
-        r: "9.5",
-        fill: "none",
-        strokeWidth: "3"
-      }
-    ) })
+    className: o,
+    style: l,
+    children: /* @__PURE__ */ s("g", { className: i.spinner, children: [
+      c && /* @__PURE__ */ n(
+        "circle",
+        {
+          cx: "12",
+          cy: "12",
+          r: "9.5",
+          fill: "none",
+          strokeWidth: e,
+          stroke: r,
+          opacity: r === "currentColor" ? "0.2" : void 0
+        }
+      ),
+      /* @__PURE__ */ n(
+        "circle",
+        {
+          className: i["spinner-circle"],
+          cx: "12",
+          cy: "12",
+          r: "9.5",
+          fill: "none",
+          strokeWidth: e
+        }
+      )
+    ] })
   }
 );
 export {
-  o as LoadingSpinner
+  g as LoadingSpinner
 };

package/dist/icons/IconAppleLogo.d.ts

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

package/dist/icons/IconAppleLogo.js

@@ -0,0 +1,10 @@
+import { jsxs as r, jsx as C } from "react/jsx-runtime";
+import "react";
+import { SvgIcon as t } from "./SvgIcon.js";
+const h = (o) => /* @__PURE__ */ r(t, { width: "14", height: "16", viewBox: "0 0 14 16", fill: "currentColor", ...o, children: [
+  /* @__PURE__ */ C("path", { d: "M10.0787 0C10.1159 0 10.1532 0 10.1925 0C10.2839 1.12836 9.85317 1.97146 9.32974 2.58201C8.81615 3.18834 8.11286 3.77641 6.97537 3.68718C6.89949 2.57498 7.33088 1.79441 7.8536 1.18527C8.33839 0.617575 9.22716 0.112414 10.0787 0Z" }),
+  /* @__PURE__ */ C("path", { d: "M13.5221 11.7446C13.5221 11.7558 13.5221 11.7657 13.5221 11.7762C13.2025 12.7444 12.7465 13.5741 12.19 14.3442C11.6821 15.0432 11.0596 15.984 9.94808 15.984C8.98765 15.984 8.3497 15.3664 7.36537 15.3496C6.32414 15.3327 5.75153 15.866 4.79952 16.0002C4.69062 16.0002 4.58172 16.0002 4.47493 16.0002C3.77585 15.899 3.21167 15.3454 2.80066 14.8465C1.5887 13.3725 0.652147 11.4685 0.477905 9.0319C0.477905 8.79302 0.477905 8.55485 0.477905 8.31597C0.551677 6.57215 1.399 5.15432 2.52525 4.46719C3.11963 4.10185 3.93674 3.7906 4.84659 3.92971C5.23653 3.99014 5.6349 4.12363 5.98408 4.25571C6.315 4.38288 6.72883 4.60841 7.12087 4.59647C7.38645 4.58874 7.65062 4.45033 7.91831 4.35267C8.7024 4.06953 9.47103 3.74493 10.4842 3.89739C11.7017 4.08147 12.5659 4.62246 13.0999 5.45714C12.0699 6.11265 11.2556 7.10049 11.3947 8.7874C11.5184 10.3197 12.4092 11.2162 13.5221 11.7446Z" })
+] });
+export {
+  h as IconAppleLogo
+};

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/IconCoinbaseMark.d.ts

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

package/dist/icons/IconCoinbaseMark.js

@@ -0,0 +1,13 @@
+import { jsx as o } from "react/jsx-runtime";
+import "react";
+import { SvgIcon as r } from "./SvgIcon.js";
+const e = (i) => /* @__PURE__ */ o(r, { width: "16", height: "17", viewBox: "0 0 16 17", fill: "none", ...i, children: /* @__PURE__ */ o(
+  "path",
+  {
+    d: "M8.01503 12.5C5.80088 12.5 4.00751 10.6354 4.00751 8.33333C4.00751 6.03125 5.80088 4.16667 8.01503 4.16667C9.99875 4.16667 11.6452 5.67014 11.9624 7.63889H16C15.6594 3.36111 12.2162 0 8.01503 0C3.59006 0 0 3.73264 0 8.33333C0 12.934 3.59006 16.6667 8.01503 16.6667C12.2162 16.6667 15.6594 13.3056 16 9.02778H11.9624C11.6452 10.9965 9.99875 12.5 8.01503 12.5Z",
+    fill: "#0052ff"
+  }
+) });
+export {
+  e as IconCoinbaseMark
+};

package/dist/icons/IconCreditCard.d.ts

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

package/dist/icons/IconCreditCard.js

@@ -0,0 +1,10 @@
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import "react";
+import { SvgIcon as i } from "./SvgIcon.js";
+const d = (o) => /* @__PURE__ */ t(i, { width: "14", height: "16", viewBox: "0 0 14 16", fill: "currentColor", ...o, children: [
+  /* @__PURE__ */ r("path", { d: "M0.477905 2.33301V12.9997H13.5221V2.33301H0.477905ZM12.1634 3.99967V5.33301H1.83668V3.99967H12.1634ZM1.83668 11.333V7.66634H12.1634V11.333H1.83668Z" }),
+  /* @__PURE__ */ r("path", { d: "M2.65195 8.66634H7.00003V9.66634H2.65195V8.66634Z" })
+] });
+export {
+  d as IconCreditCard
+};

package/dist/icons/IconExclamationTriangle.d.ts

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

package/dist/icons/IconExclamationTriangle.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: "M6.701 2.25c.577-1 2.02-1 2.598 0l5.196 9a1.5 1.5 0 0 1-1.299 2.25H2.804a1.5 1.5 0 0 1-1.3-2.25l5.197-9ZM8 4a.75.75 0 0 1 .75.75v3a.75.75 0 1 1-1.5 0v-3A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z",
+    clipRule: "evenodd"
+  }
+) });
+export {
+  n as IconExclamationTriangle
+};

package/dist/icons/index.d.ts

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

package/dist/icons/index.js

@@ -1,18 +1,24 @@
 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 { IconLock as a } from "./IconLock.js";
-import { IconPhone as k } from "./IconPhone.js";
-import { IconXMark as C } from "./IconXMark.js";
+import { IconArrowsUpDown as c } from "./IconArrowsUpDown.js";
+import { IconCheck as m } from "./IconCheck.js";
+import { IconCheckCircle as x } from "./IconCheckCircle.js";
+import { IconChevronDown as I } from "./IconChevronDown.js";
+import { IconEnvelope as l } from "./IconEnvelope.js";
+import { IconExclamationCircle as C } from "./IconExclamationCircle.js";
+import { IconExclamationTriangle as k } from "./IconExclamationTriangle.js";
+import { IconLock as E } from "./IconLock.js";
+import { IconPhone as A } from "./IconPhone.js";
+import { IconXMark as L } from "./IconXMark.js";
 export {
   e as IconArrowLeft,
-  n as IconArrowsUpDown,
-  t as IconCheckCircle,
-  m as IconEnvelope,
-  I as IconExclamationCircle,
-  a as IconLock,
-  k as IconPhone,
-  C as IconXMark
+  c as IconArrowsUpDown,
+  m as IconCheck,
+  x as IconCheckCircle,
+  I as IconChevronDown,
+  l as IconEnvelope,
+  C as IconExclamationCircle,
+  k as IconExclamationTriangle,
+  E as IconLock,
+  A as IconPhone,
+  L as IconXMark
 };

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 export * from './components/CDPReactProvider';
 export * from './components/AuthButton';
+export * from './components/Fund';
+export * from './components/FundModal';
 export * from './components/SendTransactionButton';
 export * from './components/SignIn';
 export * from './components/SignOutButton';