@coinbase/cdp-react 0.0.71 → 0.0.73

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

@@ -1,11 +1,11 @@
-import { jsxs as y, jsx as _ } from "react/jsx-runtime";
-import { c as S } from "../../../chunks/lite.1fxw3LjI.js";
-import { forwardRef as v, useRef as F, useMemo as T, useState as $, useEffect as I } from "react";
-import { useTheme as H } from "../../ThemeProvider/index.js";
-import { LoadingSkeleton as R } from "../LoadingSkeleton/index.js";
+import { jsxs as H, jsx as B } from "react/jsx-runtime";
+import { c as F } from "../../../chunks/lite.1fxw3LjI.js";
+import { forwardRef as R, useRef as y, useMemo as C, useState as U, useEffect as T } from "react";
+import { useTheme as L } from "../../ThemeProvider/index.js";
+import { LoadingSkeleton as W } from "../LoadingSkeleton/index.js";
 import "../../../theme/theme.js";
-import { colorsBase as l } from "../../../theme/tokens.js";
-import '../../../assets/IframeButton.css';const C = "IframeButton-module__label___Vvl8W", U = "IframeButton-module__iframe___0RBLL", L = "IframeButton-module__hidden___LcF1X", s = {
+import { colorsBase as i } from "../../../theme/tokens.js";
+import '../../../assets/IframeButton.css';const N = "IframeButton-module__label___Vvl8W", P = "IframeButton-module__iframe___0RBLL", j = "IframeButton-module__hidden___LcF1X", s = {
   "iframe-button": "IframeButton-module__iframe-button___XeAhH",
   "full-width": "IframeButton-module__full-width___lQWpM",
   "size-lg": "IframeButton-module__size-lg___HCOiF",
@@ -13,153 +13,154 @@ import '../../../assets/IframeButton.css';const C = "IframeButton-module__label_
   "size-sm": "IframeButton-module__size-sm___U8ILi",
   "size-xs": "IframeButton-module__size-xs___S2jGa",
   "loading-skeleton": "IframeButton-module__loading-skeleton___fzBol",
-  label: C,
+  label: N,
   "with-icon": "IframeButton-module__with-icon___KBiq1",
-  iframe: U,
-  hidden: L,
+  iframe: P,
+  hidden: j,
   "computed-style": "IframeButton-module__computed-style___ciB13"
-}, W = {
-  pageBg: l.white,
-  buttonBg: l.blue500,
+}, k = {
+  pageBg: i.white,
+  buttonBg: i.blue500,
   buttonBgHover: "#0748d6",
   buttonBgPressed: "#0b3eae",
-  buttonBgFocus: l.blue550,
-  buttonBorder: l.blue550,
+  buttonBgFocus: i.blue550,
+  buttonBorder: i.blue550,
   buttonBorderHover: "#0748d6",
   buttonBorderPressed: "#0b3eae",
-  buttonBorderFocus: l.blue550,
-  buttonBorderFocusInset: l.white,
-  buttonText: l.white,
-  buttonTextHover: l.white,
-  buttonTextPressed: l.white,
-  buttonTextFocus: l.white,
+  buttonBorderFocus: i.blue550,
+  buttonBorderFocusInset: i.white,
+  buttonText: i.white,
+  buttonTextHover: i.white,
+  buttonTextPressed: i.white,
+  buttonTextFocus: i.white,
   buttonBorderRadius: 99999,
   buttonFontSize: 16,
   buttonFontWeight: 500,
   buttonSize: "md",
   fontUrl: "",
   fontFamily: ""
-}, N = Object.keys(W), P = (n) => N.every(
-  (e) => e === "fontUrl" || e === "buttonSize" ? !0 : n[e] !== void 0
-), f = (n, e, t) => (e.style.backgroundColor = `var(--cdp-web-${n})`, k(getComputedStyle(e).backgroundColor, t)), k = (n, e) => {
-  if (!n || typeof n != "string")
-    return console.warn("Invalid color input:", n), "";
-  const t = n.trim();
+}, $ = Object.keys(k), q = (o) => $.every(
+  (e) => e === "fontUrl" || e === "buttonSize" ? !0 : o[e] !== void 0
+), v = (o, e) => o === e ? !0 : !o || !e ? !1 : $.every((t) => o[t] === e[t]), f = (o, e, t) => (e.style.backgroundColor = `var(--cdp-web-${o})`, A(getComputedStyle(e).backgroundColor, t)), A = (o, e) => {
+  if (!o || typeof o != "string")
+    return console.warn("Invalid color input:", o), "";
+  const t = o.trim();
   if (t.startsWith("#"))
     return /^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$/.test(t) ? t.toLowerCase() : (console.warn("Invalid hex color:", t), "");
   if (t === "transparent") return "transparent";
   if (t === "none") return "none";
-  const o = e.getContext("2d", { willReadFrequently: !0 });
-  if (!o)
+  const r = e.getContext("2d", { willReadFrequently: !0 });
+  if (!r)
     return console.warn("Could not create canvas context"), "";
-  if (o.fillStyle = t, o.fillStyle.startsWith("#"))
-    return o.fillStyle.toLowerCase();
-  o.fillRect(0, 0, 1, 1);
-  const a = o.getImageData(0, 0, 1, 1), [m, r, c, i] = a.data, d = m.toString(16).padStart(2, "0"), u = r.toString(16).padStart(2, "0"), g = c.toString(16).padStart(2, "0");
-  if (i < 255) {
-    const b = i.toString(16).padStart(2, "0");
-    return `#${d}${u}${g}${b}`;
+  if (r.fillStyle = t, r.fillStyle.startsWith("#"))
+    return r.fillStyle.toLowerCase();
+  r.fillRect(0, 0, 1, 1);
+  const a = r.getImageData(0, 0, 1, 1), [m, n, c, l] = a.data, d = m.toString(16).padStart(2, "0"), u = n.toString(16).padStart(2, "0"), _ = c.toString(16).padStart(2, "0");
+  if (l < 255) {
+    const b = l.toString(16).padStart(2, "0");
+    return `#${d}${u}${_}${b}`;
   }
-  return `#${d}${u}${g}`;
-}, j = (n, e, t, o) => {
-  const a = getComputedStyle(t), m = f("colors-page-bg-default", t, o), r = f(`colors-cta-${e}-bg-default`, t, o), c = f(`colors-cta-${e}-bg-hover`, t, o), i = f(`colors-cta-${e}-bg-pressed`, t, o), d = f(`colors-cta-${e}-text-default`, t, o);
+  return `#${d}${u}${_}`;
+}, M = (o, e, t, r) => {
+  const a = getComputedStyle(t), m = f("colors-page-bg-default", t, r), n = f(`colors-cta-${e}-bg-default`, t, r), c = f(`colors-cta-${e}-bg-hover`, t, r), l = f(`colors-cta-${e}-bg-pressed`, t, r), d = f(`colors-cta-${e}-text-default`, t, r);
   return {
     pageBg: m,
-    buttonBg: r,
+    buttonBg: n,
     buttonBgHover: c,
-    buttonBgPressed: i,
-    buttonBgFocus: r,
-    buttonBorder: r,
+    buttonBgPressed: l,
+    buttonBgFocus: n,
+    buttonBorder: n,
     buttonBorderHover: c,
-    buttonBorderPressed: i,
-    buttonBorderFocus: f(`colors-cta-${e}-border-focus`, t, o),
+    buttonBorderPressed: l,
+    buttonBorderFocus: f(`colors-cta-${e}-border-focus`, t, r),
     buttonBorderFocusInset: m,
     buttonBorderRadius: parseInt(a.borderRadius),
     buttonFontSize: parseInt(a.fontSize),
     buttonFontWeight: parseInt(a.fontWeight),
     buttonText: d,
-    buttonTextHover: f(`colors-cta-${e}-text-hover`, t, o),
+    buttonTextHover: f(`colors-cta-${e}-text-hover`, t, r),
     buttonTextPressed: d,
     buttonTextFocus: d,
-    buttonSize: n ?? "md",
+    buttonSize: o ?? "md",
     fontFamily: a.fontFamily,
     fontUrl: ""
   };
-}, A = {
+}, V = {
   xs: s["size-xs"],
   sm: s["size-sm"],
   md: s["size-md"],
   lg: s["size-lg"]
-}, M = v(
+}, D = R(
   ({
-    className: n = "",
+    className: o = "",
     isPending: e,
     label: t,
-    icon: o,
+    icon: r,
     fullWidth: a,
     size: m,
-    theme: r,
+    theme: n,
     onThemeChange: c,
-    ...i
+    ...l
   }, d) => {
-    const u = m === "none" ? "md" : m, { theme: g } = H(), b = g["font-url-iframe"], p = F(null), h = F(null), B = T(() => !!r && P(r), [r]), [x, z] = $(
-      B ? {
-        ...r,
-        fontUrl: r?.fontUrl ?? b,
+    const u = m === "none" ? "md" : m, { theme: _ } = L(), b = _["font-url-iframe"], p = y(null), x = y(null), h = C(() => !!n && q(n), [n]), [S, z] = U(
+      h ? {
+        ...n,
+        fontUrl: n?.fontUrl ?? b,
         buttonSize: u ?? "md"
       } : void 0
     );
-    return I(() => {
-      if (B) {
-        z({
-          ...r,
-          fontUrl: r?.fontUrl ?? b,
+    return T(() => {
+      if (h) {
+        const g = {
+          ...n,
+          fontUrl: n?.fontUrl ?? b,
           buttonSize: u ?? "md"
-        });
+        };
+        z((w) => v(g, w) ? w : g);
         return;
       }
-      if (!p.current || !h.current) return;
-      const w = j(
-        u ?? "md",
-        i.variant ?? "primary",
-        p.current,
-        h.current
-      );
-      z({
-        ...w,
+      if (!p.current || !x.current) return;
+      const I = {
+        ...M(
+          u ?? "md",
+          l.variant ?? "primary",
+          p.current,
+          x.current
+        ),
         fontUrl: b,
-        ...r
-      });
-    }, [i.variant, u, B, r, b]), I(() => {
-      x && c?.(x);
-    }, [x, c]), /* @__PURE__ */ y(
+        ...n
+      };
+      z((g) => v(I, g) ? g : I);
+    }, [l.variant, u, h, n, b, _]), T(() => {
+      S && c?.(S);
+    }, [S, c]), /* @__PURE__ */ H(
       "div",
       {
-        className: S(
+        className: F(
           s["iframe-button"],
-          o && s["with-icon"],
+          r && s["with-icon"],
           a && s["full-width"],
-          u && A[u]
+          u && V[u]
         ),
         "data-part": "iframe-button",
         children: [
-          /* @__PURE__ */ _("span", { className: s.label, children: t }),
-          e && /* @__PURE__ */ _(R, { className: S(s["loading-skeleton"]) }),
-          /* @__PURE__ */ _(
+          /* @__PURE__ */ B("span", { className: s.label, children: t }),
+          e && /* @__PURE__ */ B(W, { className: F(s["loading-skeleton"]) }),
+          /* @__PURE__ */ B(
             "iframe",
             {
               ref: d,
-              className: S(s.iframe, e ? s.hidden : void 0, n),
-              ...i
+              className: F(s.iframe, e ? s.hidden : void 0, o),
+              ...l
             }
           ),
-          !B && /* @__PURE__ */ _("div", { ref: p, className: s["computed-style"], children: /* @__PURE__ */ _("canvas", { ref: h }) })
+          !h && /* @__PURE__ */ B("div", { ref: p, className: s["computed-style"], children: /* @__PURE__ */ B("canvas", { ref: x }) })
         ]
       }
     );
   }
 );
-M.displayName = "IframeButton";
+D.displayName = "IframeButton";
 export {
-  M as IframeButton
+  D as IframeButton
 };

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.0.71";
+export declare const VERSION = "0.0.73";

package/dist/version.js

@@ -1,4 +1,4 @@
-const o = "0.0.71";
+const o = "0.0.73";
 export {
   o as VERSION
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cdp-react",
-  "version": "0.0.71",
+  "version": "0.0.73",
   "type": "module",
   "dependencies": {
     "@internationalized/number": "3.6.4",
@@ -15,8 +15,8 @@
   },
   "peerDependencies": {
     "react": ">=18.2.0 <19.2.0",
-    "@coinbase/cdp-core": "^0.0.71",
-    "@coinbase/cdp-hooks": "^0.0.71"
+    "@coinbase/cdp-core": "^0.0.73",
+    "@coinbase/cdp-hooks": "^0.0.73"
   },
   "devDependencies": {
     "@size-limit/preset-big-lib": "^11.2.0",
@@ -47,8 +47,8 @@
     "vite": "^7.0.4",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
-    "@coinbase/cdp-hooks": "^0.0.71",
-    "@coinbase/cdp-core": "^0.0.71"
+    "@coinbase/cdp-core": "^0.0.73",
+    "@coinbase/cdp-hooks": "^0.0.73"
   },
   "size-limit": [
     {