@coinbase/cdp-react 0.0.67 → 0.0.69

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

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

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

@@ -1,5 +1,5 @@
 import { Key } from 'react';
-import { SwitchTransitionProps, SwitchTransitionRef } from '../SwitchTransition/SwitchTransition';
+import { SwitchTransitionProps, SwitchTransitionRef } from '../SwitchTransition';
 export type SwitchFadeTransitionProps<T extends Key> = Omit<SwitchTransitionProps<T>, "transitionName" | "unmountOnExit" | "mountOnEnter" | "preEnter">;
 export type SwitchFadeTransitionRef<T extends Key> = SwitchTransitionRef<T>;
 export declare const SwitchFadeTransition: <T extends Key>({ children, className, ...props }: SwitchFadeTransitionProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,5 @@
 import { Key } from 'react';
-import { SwitchTransitionProps, SwitchTransitionRef } from '../SwitchTransition/SwitchTransition';
+import { SwitchTransitionProps, SwitchTransitionRef } from '../SwitchTransition';
 export interface SwitchSlideTransitionProps<T extends Key> extends Omit<SwitchTransitionProps<T>, "transitionName" | "unmountOnExit" | "mountOnEnter" | "preEnter"> {
     direction?: "left" | "right";
 }

package/dist/hooks/useKeyExportPostMessage.d.ts

@@ -1,27 +1,8 @@
 import { RefObject } from 'react';
-import { SecureIframeStatus, SecureIframeEventType, SecureIframeIncomingMessage, SecureIframeOutgoingMessage, SecureIframeInitMessage, IframeTheme } from '../types/secureIframe';
-export declare const SECURE_IFRAME_KEY_EXPORT_EVENT_TYPE: Readonly<{
-    GET_PRIVATE_KEY: "CDP_WEB_SECURE_IFRAME_GET_PRIVATE_KEY";
-    INIT: "CDP_WEB_SECURE_IFRAME_INIT";
-    LISTENING: "CDP_WEB_SECURE_IFRAME_LISTENING";
-    STATUS: "CDP_WEB_SECURE_IFRAME_STATUS";
-    THEME: "CDP_WEB_SECURE_IFRAME_THEME";
-}>;
-export type SecureIframeKeyExportEventType = SecureIframeEventType & typeof SECURE_IFRAME_KEY_EXPORT_EVENT_TYPE;
-export type SecureIframeGetPrivateKeyMessage = {
-    type: SecureIframeKeyExportEventType["GET_PRIVATE_KEY"];
-    payload: {
-        address: string;
-        type: "evm" | "solana";
-        authState: SecureIframeInitMessage["payload"]["authState"];
-        theme: SecureIframeInitMessage["payload"]["theme"];
-    };
-};
-export type SecureIframeKeyExportIncomingMessage = SecureIframeIncomingMessage | SecureIframeGetPrivateKeyMessage;
-export type SecureIframeKeyExportOutgoingMessage = SecureIframeOutgoingMessage;
+import { SecureIframeChainType, SecureIframeKeyExportIncomingMessage, SecureIframeKeyExportOutgoingMessage, SecureIframeStatus, IframeTheme } from '../types/secureIframe';
 export interface UseKeyExportPostMessageProps {
     address: string;
-    type: "evm" | "solana";
+    type: SecureIframeChainType;
     basePath?: string;
     projectId: string;
     label?: string;
@@ -36,5 +17,4 @@ export declare const isKeyExportMessage: (message: unknown) => message is Secure
 export declare const useKeyExportPostMessage: ({ address, basePath, copiedLabel, icon, iframeRef, label, onStatusUpdate, projectId, theme, type, }: UseKeyExportPostMessageProps) => {
     iframeUrl: string;
     isPending: boolean;
-    onThemeChange: (newTheme: Partial<IframeTheme>) => void;
 };

package/dist/hooks/useKeyExportPostMessage.js

@@ -1,90 +1,84 @@
-import { getAccessToken as R, getAccessTokenExpiration as w } from "@coinbase/cdp-core";
-import { useCurrentUser as S } from "@coinbase/cdp-hooks";
-import { useState as k, useMemo as C, useCallback as u, useEffect as K } from "react";
-import { SECURE_IFRAME_EVENT_TYPE_PREFIX as f, SECURE_IFRAME_EVENT_TYPE as x } from "../types/secureIframe.js";
+import { getAccessToken as P, getAccessTokenExpiration as C } from "@coinbase/cdp-core";
+import { useCurrentUser as K } from "@coinbase/cdp-hooks";
+import { useState as R, useRef as h, useMemo as $, useCallback as _, useEffect as w } from "react";
+import { SECURE_IFRAME_KEY_EXPORT_EVENT_TYPE as a, SECURE_IFRAME_EVENT_TYPE_PREFIX as F } from "../types/secureIframe.js";
 import "libphonenumber-js";
-import { sendIframeMessage as A } from "../utils/sendIframeMessage.js";
-const g = "https://secure-wallet.cdp.coinbase.com", n = Object.freeze({
-  ...x,
-  GET_PRIVATE_KEY: `${f}GET_PRIVATE_KEY`
-}), Y = (t, s) => {
-  A(t, s);
-}, V = (t) => typeof t == "object" && t !== null && "type" in t && typeof t.type == "string" && !!n[t.type.replace(
-  f,
+import { sendIframeMessage as I } from "../utils/sendIframeMessage.js";
+const A = "https://secure-wallet.cdp.coinbase.com", L = (r, s) => {
+  I(r, s);
+}, N = (r) => typeof r == "object" && r !== null && "type" in r && typeof r.type == "string" && !!a[r.type.replace(
+  F,
   ""
-)], H = ({
-  address: t,
-  basePath: s = g,
+)], q = ({
+  address: r,
+  basePath: s = A,
   copiedLabel: c,
-  icon: T,
+  icon: y,
   iframeRef: o,
   label: i,
-  onStatusUpdate: _,
-  projectId: E,
-  theme: m,
-  type: d
+  onStatusUpdate: f,
+  projectId: u,
+  theme: n,
+  type: l
 }) => {
-  const { currentUser: a } = S(), [I, U] = k(!0), h = C(() => {
+  const { currentUser: p } = K(), [U, M] = R(!0), [E, k] = R(!1), T = h(!1), S = $(() => {
     const e = ["fullWidth"];
-    return E && e.push(`projectId=${E.trim()}`), i && e.push(`label=${encodeURIComponent(i.trim())}`), c && e.push(`copiedLabel=${encodeURIComponent(c.trim())}`), T && e.push("icon"), `${s}?${e.join("&")}`;
-  }, [E, i, c, T, s]), y = u(async () => {
-    if (!a || !o.current) return;
-    const e = await R(), r = await w();
-    Y(o.current, {
-      type: n.GET_PRIVATE_KEY,
+    return u && e.push(`projectId=${u.trim()}`), i && e.push(`label=${encodeURIComponent(i.trim())}`), c && e.push(`copiedLabel=${encodeURIComponent(c.trim())}`), y && e.push("icon"), `${s}?${e.join("&")}`;
+  }, [u, i, c, y, s]), g = _(async () => {
+    if (!p || !o.current) return;
+    const e = await P({ forceRefresh: !0 }), t = await C();
+    L(o.current, {
+      type: a.GET_PRIVATE_KEY,
       payload: {
-        address: t,
-        type: d,
+        address: r,
+        type: l,
         authState: {
           accessToken: e || "",
-          expiresAt: r || 0,
-          user: a
+          expiresAt: t || 0,
+          user: p
         },
-        theme: m
+        theme: n
       }
     });
-  }, [a, t, d, m, o]), l = u(
-    (e, r) => {
-      _?.(e, r), U(!1);
+  }, [p, r, l, n, o]), m = _(
+    (e, t) => {
+      f?.(e, t), M(!1);
     },
-    [_]
-  ), M = u(
-    (e) => {
-      A(o.current, {
-        type: n.THEME,
-        payload: {
-          theme: e
-        }
-      });
-    },
-    [o]
+    [f]
   );
-  return K(() => {
-    const e = (r) => {
-      let p = "";
+  return w(() => {
+    const e = T.current;
+    T.current = E, e && E && n && I(o.current, {
+      type: a.THEME,
+      payload: {
+        theme: n
+      }
+    });
+  }, [n, E, o]), w(() => {
+    const e = (t) => {
+      let d = "";
       try {
-        p = new URL(s || g).origin;
-      } catch (P) {
-        console.error("Error parsing iframe origin", P);
+        d = new URL(s || A).origin;
+      } catch (x) {
+        console.error("Error parsing iframe origin", x);
       }
-      if (!(!p || r.origin !== p) && V(r.data))
-        switch (r.data?.type) {
-          case n.LISTENING:
-            y();
+      if (!(!d || t.origin !== d) && N(t.data))
+        switch (t.data?.type) {
+          case a.LISTENING:
+            k(!0), g();
             break;
-          case n.STATUS:
-            l(r.data.payload.status, r.data.payload.message);
+          case a.STATUS:
+            m(t.data.payload.status, t.data.payload.message);
             break;
         }
     };
     return window.addEventListener("message", e), () => {
       window.removeEventListener("message", e);
     };
-  }, [y, l, s]), { iframeUrl: h, isPending: I, onThemeChange: M };
+  }, [g, m, s]), { iframeUrl: S, isPending: U };
 };
 export {
-  n as SECURE_IFRAME_KEY_EXPORT_EVENT_TYPE,
-  V as isKeyExportMessage,
-  Y as sendKeyExportMessage,
-  H as useKeyExportPostMessage
+  N as isKeyExportMessage,
+  L as sendKeyExportMessage,
+  q as useKeyExportPostMessage
 };

package/dist/index.js

@@ -46,7 +46,7 @@ import { isApiError as hr } from "./utils/isApiError.js";
 import { isEmailInvalid as Sr } from "./utils/isEmailInvalid.js";
 import { parseValuesFromPhoneNumber as kr } from "./utils/parseValuesFromPhoneNumber.js";
 import { sendIframeMessage as Lr } from "./utils/sendIframeMessage.js";
-import "@coinbase/cdp-core";
+import "./types/secureIframe.js";
 import { FundForm as Wr } from "./components/Fund/FundForm.js";
 import { FundTitle as br } from "./components/Fund/FundTitle.js";
 import { useFundContext as wr } from "./components/Fund/FundProvider.js";

package/dist/theme/theme.d.ts

@@ -507,6 +507,9 @@ export declare const theme: Flattened<{
             readonly code: {
                 readonly value: "{font.family.mono}";
             };
+            readonly iframe: {
+                readonly value: "{font.family.interactive}";
+            };
             readonly mono: {
                 readonly value: "\"DM Mono\", monospace";
             };
@@ -520,6 +523,11 @@ export declare const theme: Flattened<{
                 readonly value: "{font.family.sans}";
             };
         };
+        readonly url: {
+            readonly iframe: {
+                readonly value: "";
+            };
+        };
         readonly size: {
             readonly base: {
                 readonly value: 16;

package/dist/theme/tokens.d.ts

@@ -896,6 +896,14 @@ export declare const fontComponents: {
         readonly code: {
             readonly value: "{font.family.mono}";
         };
+        readonly iframe: {
+            readonly value: "{font.family.interactive}";
+        };
+    };
+    readonly url: {
+        readonly iframe: {
+            readonly value: "";
+        };
     };
 };
 export declare const font: {
@@ -918,6 +926,9 @@ export declare const font: {
         readonly code: {
             readonly value: "{font.family.mono}";
         };
+        readonly iframe: {
+            readonly value: "{font.family.interactive}";
+        };
         readonly mono: {
             readonly value: "\"DM Mono\", monospace";
         };
@@ -931,6 +942,11 @@ export declare const font: {
             readonly value: "{font.family.sans}";
         };
     };
+    readonly url: {
+        readonly iframe: {
+            readonly value: "";
+        };
+    };
     readonly size: {
         readonly base: {
             readonly value: 16;
@@ -1578,6 +1594,9 @@ export declare const tokens: {
             readonly code: {
                 readonly value: "{font.family.mono}";
             };
+            readonly iframe: {
+                readonly value: "{font.family.interactive}";
+            };
             readonly mono: {
                 readonly value: "\"DM Mono\", monospace";
             };
@@ -1591,6 +1610,11 @@ export declare const tokens: {
                 readonly value: "{font.family.sans}";
             };
         };
+        readonly url: {
+            readonly iframe: {
+                readonly value: "";
+            };
+        };
         readonly size: {
             readonly base: {
                 readonly value: 16;

package/dist/theme/tokens.js

@@ -15,7 +15,7 @@ const e = {
   red500: "#cf202f",
   green500: "#098551",
   amber500: "#ed702f"
-}, o = {
+}, a = {
   bg: {
     default: { value: e.white },
     // background
@@ -80,7 +80,7 @@ const e = {
     negative: { value: "{colors.fg.negative}" }
     // negative line color
   }
-}, a = {
+}, r = {
   page: {
     bg: {
       default: { value: "{colors.bg.default}" }
@@ -264,9 +264,9 @@ const e = {
       default: { value: "{colors.fg.default}" }
     }
   }
-}, r = {
-  ...o,
-  ...a
+}, t = {
+  ...a,
+  ...r
 }, l = {
   family: {
     mono: {
@@ -285,7 +285,7 @@ const e = {
   size: {
     base: { value: 16 }
   }
-}, t = {
+}, o = {
   family: {
     page: {
       value: "{font.family.body}"
@@ -304,12 +304,23 @@ const e = {
     },
     code: {
       value: "{font.family.mono}"
+    },
+    iframe: {
+      value: "{font.family.interactive}"
+    }
+  },
+  url: {
+    iframe: {
+      value: ""
     }
   }
 }, u = {
   family: {
     ...l.family,
-    ...t.family
+    ...o.family
+  },
+  url: {
+    ...o.url
   },
   size: {
     ...l.size
@@ -365,24 +376,24 @@ const e = {
       value: "{borderRadius.sm}"
     }
   }
-}, c = {
+}, f = {
   ...s,
   ...i
-}, f = {
-  borderRadius: c,
-  colors: r,
+}, c = {
+  borderRadius: f,
+  colors: t,
   font: u
 };
 export {
-  c as borderRadius,
+  f as borderRadius,
   i as borderRadiusComponents,
   s as borderRadiusSemantic,
-  r as colors,
+  t as colors,
   e as colorsBase,
-  a as colorsComponents,
-  o as colorsSemantic,
+  r as colorsComponents,
+  a as colorsSemantic,
   u as font,
-  t as fontComponents,
+  o as fontComponents,
   l as fontSemantic,
-  f as tokens
+  c as tokens
 };