@coinbase/cdp-react 0.0.37 → 0.0.39

package/dist/components/SendSolanaTransactionButton/index.d.ts

@@ -0,0 +1,13 @@
+import { APIError, SendSolanaTransactionOptions } from '@coinbase/cdp-hooks';
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+import { ButtonVariant } from '../../theme/theme';
+export interface SendSolanaTransactionButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onError"> {
+    account: SendSolanaTransactionOptions["solanaAccount"];
+    network: SendSolanaTransactionOptions["network"];
+    onError?: (error: APIError | Error) => void;
+    onSuccess?: (signature: string) => void;
+    pendingLabel?: ReactNode;
+    transaction: SendSolanaTransactionOptions["transaction"];
+    variant?: ButtonVariant;
+}
+export declare const SendSolanaTransactionButton: ({ account, children, className, network, onClick, onError, onSuccess, pendingLabel, transaction, variant, ...props }: SendSolanaTransactionButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SendSolanaTransactionButton/index.js

@@ -0,0 +1,67 @@
+import { jsx as y } from "react/jsx-runtime";
+import { useSendSolanaTransaction as T, APIError as _ } from "@coinbase/cdp-hooks";
+import { useState as w, useCallback as B } from "react";
+import { Button as E } from "../ui/Button/index.js";
+import "../../theme/theme.js";
+import { getMessageFromUnknownError as x } from "../../utils/getMessageFromUnknownError.js";
+import '../../assets/SendSolanaTransactionButton.css';const P = {
+  "send-solana-transaction-button": "SendSolanaTransactionButton-module__send-solana-transaction-button___OxwvB"
+}, q = ({
+  account: t,
+  children: d,
+  className: f = "",
+  network: s,
+  onClick: r,
+  onError: e,
+  onSuccess: i,
+  pendingLabel: u,
+  transaction: o,
+  variant: p = "primary",
+  ...S
+}) => {
+  const [g, l] = w(!1), { sendSolanaTransaction: c } = T(), h = B(
+    async (m) => {
+      m.preventDefault(), r?.(m);
+      try {
+        if (!t || !s || !o) {
+          const n = [];
+          throw t || n.push("account"), s || n.push("network"), o || n.push("transaction"), new Error(`Missing required parameters: ${n.join(", ")}`);
+        }
+        l(!0);
+        const { transactionSignature: a } = await c({
+          transaction: o,
+          solanaAccount: t,
+          network: s
+        });
+        i?.(a);
+      } catch (a) {
+        let n;
+        if (a instanceof _ || a instanceof Error)
+          n = a;
+        else {
+          const b = x(a);
+          n = new Error(b);
+        }
+        e?.(n);
+      } finally {
+        l(!1);
+      }
+    },
+    [t, s, r, e, i, c, o]
+  );
+  return /* @__PURE__ */ y(
+    E,
+    {
+      className: `${P["send-solana-transaction-button"]} ${f}`,
+      isPending: g,
+      pendingLabel: u || "Sending transaction...",
+      onClick: h,
+      variant: p,
+      ...S,
+      children: d || "Send transaction"
+    }
+  );
+};
+export {
+  q as SendSolanaTransactionButton
+};

package/dist/components/SignIn/SignInForm.js

@@ -1,37 +1,51 @@
-import { jsx as e } from "react/jsx-runtime";
-import { useRef as s, useLayoutEffect as g } from "react";
-import { useAppConfig as M } from "../CDPReactProvider/index.js";
-import { SwitchFadeTransition as w } from "../ui/SwitchFadeTransition/index.js";
-import { a as _ } from "../../chunks/index.BzllgVaP.js";
-import { useSignInContext as F } from "./SignInProvider.js";
+import { jsx as a } from "react/jsx-runtime";
+import { useRef as d, useState as _, useLayoutEffect as p } from "react";
+import { useAppConfig as I } from "../CDPReactProvider/index.js";
+import { SwitchFadeTransition as T } from "../ui/SwitchFadeTransition/index.js";
+import { a as y } from "../../chunks/index.BzllgVaP.js";
+import { useSignInContext as v } from "./SignInProvider.js";
 import "@coinbase/cdp-hooks";
-import '../../assets/SignInForm.css';const I = {
+import '../../assets/SignInForm.css';const E = {
   "auth-method-wrapper": "SignInForm-module__auth-method-wrapper___uIOAB"
-}, T = ({
-  onSuccess: a,
-  step: u,
-  children: h,
-  ...m
+}, B = ({
+  onSuccess: l,
+  step: f,
+  children: M,
+  ...g
 }) => {
-  const { state: t } = F(), { authMethods: p } = M(), c = u || t.step, o = s(t.authMethod), r = s(null);
-  return g(() => {
-    o.current !== t.authMethod && (r.current?.transition.toggle(t.authMethod), o.current = t.authMethod);
-  }, [t.authMethod]), /* @__PURE__ */ e(
-    w,
+  const { state: o, dispatch: c } = v(), { authMethods: e } = I(), S = f || o.step, m = d(o.authMethod), i = d(e), u = d(null), [w, A] = _(e || []);
+  return p(() => {
+    let t = o.authMethod;
+    const r = !e?.includes(o.authMethod), n = i.current && i.current.length === e?.length && i.current.some((h, s) => h !== e?.[s]);
+    if ((r || n) && (t = e?.[0]), t && t !== o.authMethod) {
+      c({
+        type: "SET_AUTH_METHOD",
+        payload: { authMethod: t }
+      });
+      return;
+    }
+    u.current?.transition && t && m.current !== t && (u.current.transition.toggle(t), m.current = t);
+  }, [e, c, o.authMethod]), p(() => {
+    i.current = e, A((t) => {
+      const r = e?.filter((n) => !t.includes(n)) || [];
+      return r.length ? [...t, ...r] : t;
+    });
+  }, [e]), /* @__PURE__ */ a(
+    T,
     {
       animateHeight: !0,
       timeout: 250,
-      items: p || ["email"],
+      items: w,
       initialEntered: !0,
-      transitionRef: r,
-      ...m,
-      children: ({ itemKey: n, ...d }) => {
-        const f = _[n].forms;
-        return /* @__PURE__ */ e("div", { ...d, className: I["auth-method-wrapper"], children: /* @__PURE__ */ e(f, { step: c, onSuccess: a, children: ({ step: l, Form: i }) => h?.({ step: l, authMethod: n, Form: i }) || i }) });
+      transitionRef: u,
+      ...g,
+      children: ({ itemKey: t, ...r }) => {
+        const n = y[t].forms;
+        return /* @__PURE__ */ a("div", { ...r, className: E["auth-method-wrapper"], children: /* @__PURE__ */ a(n, { step: S, onSuccess: l, children: ({ step: h, Form: s }) => M?.({ step: h, authMethod: t, Form: s }) || s }) });
       }
     }
   );
 };
 export {
-  T as SignInForm
+  B as SignInForm
 };

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

@@ -1,106 +1,106 @@
-import { jsx as m, Fragment as B } from "react/jsx-runtime";
-import { useId as D, useState as R, useRef as F, useImperativeHandle as G, useLayoutEffect as _, useEffect as H } from "react";
-import { useTransitionMap as J } from "react-transition-state";
-import '../../../assets/SwitchTransition.css';const P = {
+import { jsx as h, Fragment as G } from "react/jsx-runtime";
+import { useRef as R, useId as H, useState as _, useImperativeHandle as J, useLayoutEffect as j, useEffect as P } from "react";
+import { useTransitionMap as Q } from "react-transition-state";
+import '../../../assets/SwitchTransition.css';const U = {
   "transition-wrapper": "SwitchTransition-module__transition-wrapper___jrI35"
-}, Q = (h) => {
+}, V = (b) => {
   const {
-    children: r,
+    children: n,
     index: d,
-    itemKey: i,
+    itemKey: r,
     initialEntered: l,
     setItem: u,
     deleteItem: f,
-    stateMap: b,
-    transitionName: v,
-    parentKey: y
-  } = h;
-  H(() => (u(i, { initialEntered: l }), () => {
-    f(i);
-  }), [i, l, u, f]);
-  const { isEnter: p, isMounted: I, isResolved: w, status: x } = b.get(i) || {};
-  return I ? r({
+    stateMap: v,
+    transitionName: y,
+    parentKey: p
+  } = b;
+  P(() => (u(r, { initialEntered: l }), () => {
+    f(r);
+  }), [r, l, u, f]);
+  const { isEnter: m, isMounted: I, isResolved: w, status: x } = v.get(r) || {};
+  return I ? n({
     "data-index": d,
-    inert: !p,
-    itemKey: i,
-    "data-transition": v,
+    inert: !m,
+    itemKey: r,
+    "data-transition": y,
     "data-status": x,
-    "data-is-enter": p,
+    "data-is-enter": m,
     "data-is-resolved": w,
-    "data-parent": y
+    "data-parent": p
   }) : null;
-}, X = ({
-  allowMultiple: h,
-  animateHeight: r,
+}, Z = ({
+  allowMultiple: b,
+  animateHeight: n,
   autoFocus: d,
-  initialEntered: i,
+  initialEntered: r,
   as: l = "div",
   children: u,
   className: f = "",
-  enter: b,
-  exit: v,
-  items: y,
-  mountOnEnter: p,
+  enter: v,
+  exit: y,
+  items: p,
+  mountOnEnter: m,
   onStateChange: I,
   preEnter: w,
   preExit: x,
-  style: j,
+  style: q,
   timeout: e = 200,
   transitionName: T,
-  transitionRef: q,
-  unmountOnExit: z,
+  transitionRef: z,
+  unmountOnExit: L,
   ...$
 }) => {
-  const L = D(), s = $.id || L, [E, N] = R(null), [S, C] = R(null), g = F(null), o = J({
-    allowMultiple: h,
+  const N = R(p[0]), O = H(), s = $.id || O, [E, A] = _(null), [S, C] = _(null), g = R(null), o = Q({
+    allowMultiple: b,
     initialEntered: !1,
-    mountOnEnter: p,
-    unmountOnExit: z,
+    mountOnEnter: m,
+    unmountOnExit: L,
     preEnter: w,
     preExit: x,
-    enter: b,
-    exit: v,
+    enter: v,
+    exit: y,
     timeout: e,
     onStateChange: I
   });
-  G(q, () => ({
-    transition: r || d ? {
+  J(z, () => ({
+    transition: n || d ? {
       ...o,
       toggle: (t) => {
-        o.toggle(t), N(t);
+        o.toggle(t), A(t);
       }
     } : o
-  })), _(() => {
-    if (!r)
+  })), j(() => {
+    if (!n)
       return;
     let t = null;
-    const n = g.current;
-    if (!n)
+    const i = g.current;
+    if (!i)
       return;
     const c = setTimeout(() => {
-      const a = n.querySelector(
+      const a = i.querySelector(
         `[data-is-enter="true"][data-parent="${s}"]`
       );
       if (!a)
         return;
       const M = a?.scrollHeight ?? null;
-      M !== null && C(M), t = new ResizeObserver((O) => {
-        for (const k of O) {
-          const A = k.contentRect.height;
-          C(A);
+      M !== null && C(M), t = new ResizeObserver((B) => {
+        for (const D of B) {
+          const F = D.contentRect.height;
+          C(F);
         }
       }), t.observe(a);
     }, 0);
     return () => {
       c && clearTimeout(c), t?.disconnect();
     };
-  }, [r, E, s]), _(() => {
+  }, [n, E, s]), j(() => {
     if (!d)
       return;
     const t = typeof e == "number" ? e : e.enter;
     if (t === void 0)
       return;
-    const n = setTimeout(() => {
+    const i = setTimeout(() => {
       const c = g.current?.querySelector(
         `[data-is-enter="true"][data-parent="${s}"]`
       );
@@ -112,44 +112,44 @@ import '../../../assets/SwitchTransition.css';const P = {
       a && a.focus();
     }, t);
     return () => {
-      n && clearTimeout(n);
+      i && clearTimeout(i);
     };
   }, [d, E, s, e]);
-  const K = /* @__PURE__ */ m(B, { children: y.map((t, n) => /* @__PURE__ */ m(
-    Q,
+  const K = /* @__PURE__ */ h(G, { children: p.map((t, i) => /* @__PURE__ */ h(
+    V,
     {
-      index: n,
+      index: i,
       itemKey: t,
       setItem: o.setItem,
       deleteItem: o.deleteItem,
       stateMap: o.stateMap,
-      initialEntered: i ? n === 0 : void 0,
+      initialEntered: r ? N.current === t : void 0,
       transitionName: T,
       parentKey: s,
       children: u
     },
-    n
+    t
   )) });
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ h(
     l,
     {
       ...$,
       id: s,
       ref: g,
       "data-transition": T || void 0,
-      "data-animate-height": r,
-      className: `${P["transition-wrapper"]} ${f}`,
+      "data-animate-height": n,
+      className: `${U["transition-wrapper"]} ${f}`,
       style: {
-        ...j,
+        ...q,
         "--cdp-web-transition-enter-timeout": typeof e == "object" ? `${e.enter ?? 200}ms` : void 0,
         "--cdp-web-transition-exit-timeout": typeof e == "object" ? `${e.exit ?? 200}ms` : void 0,
         "--cdp-web-transition-timeout": typeof e == "number" ? `${e}ms` : void 0,
-        "--cdp-web-transition-height": r && S ? `${S}px` : void 0
+        "--cdp-web-transition-height": n && S ? `${S}px` : void 0
       },
-      children: r ? /* @__PURE__ */ m("div", { children: K }) : K
+      children: n ? /* @__PURE__ */ h("div", { children: K }) : K
     }
   );
 };
 export {
-  X as SwitchTransition
+  Z as SwitchTransition
 };

package/dist/index.d.ts

@@ -2,7 +2,8 @@ export * from './components/CDPReactProvider';
 export * from './components/AuthButton';
 export * from './components/Fund';
 export * from './components/FundModal';
-export * from './components/SendTransactionButton';
+export * from './components/SendEvmTransactionButton';
+export * from './components/SendSolanaTransactionButton';
 export * from './components/SignIn';
 export * from './components/SignOutButton';
 export * from './components/SignInModal';

package/dist/index.js

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

package/dist/theme/index.js

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