@coinbase/cdp-react 0.0.80 → 0.0.82

package/dist/assets/CountrySelect.css

@@ -1 +1 @@
-.CountrySelect-module__country-select-trigger___xGSAp{--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:var(--cdp-web-borderRadius-input);color:var(--cdp-web-colors-input-text-default);font-family:var(--cdp-web-font-family-input);font-weight:500;text-align:left;justify-content:space-between}.CountrySelect-module__select-icon___wEQVx{transform:rotate(180deg);transition:transform .15s ease-in-out}.CountrySelect-module__country-select-trigger___xGSAp[data-state=open] .CountrySelect-module__select-icon___wEQVx{transform:rotate(0)}.CountrySelect-module__country-select-trigger___xGSAp:focus{outline:none}.CountrySelect-module__country-select-trigger___xGSAp:focus-visible{--cdp-web-button-ring-inset-color: var(--cdp-web-colors-input-border-focus);--cdp-web-button-ring-inset-width: 2px;outline:none}.CountrySelect-module__country-select-content___WSd9-{width:auto}.CountrySelect-module__country-select-item___Mr6JZ{display:flex;align-items:center;gap:.25em}.CountrySelect-module__flag___bNBsn{transform:translateY(.05em)}.CountrySelect-module__country-select-content___WSd9- .CountrySelect-module__country-select-item___Mr6JZ{gap:.5em}.CountrySelect-module__country-calling-code___d61ih{color:var(--cdp-web-colors-select-list-item-text-muted)}
+.CountrySelect-module__country-select-trigger___xGSAp{--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:var(--cdp-web-borderRadius-input);color:var(--cdp-web-colors-input-text-default);font-family:var(--cdp-web-font-family-input);font-weight:500;text-align:left;justify-content:space-between}.CountrySelect-module__select-icon___wEQVx{transform:rotate(0);transition:transform .15s ease-in-out}.CountrySelect-module__country-select-trigger___xGSAp[data-state=open] .CountrySelect-module__select-icon___wEQVx{transform:rotate(180deg)}.CountrySelect-module__country-select-trigger___xGSAp:focus{outline:none}.CountrySelect-module__country-select-trigger___xGSAp:focus-visible{--cdp-web-button-ring-inset-color: var(--cdp-web-colors-input-border-focus);--cdp-web-button-ring-inset-width: 2px;outline:none}.CountrySelect-module__country-select-content___WSd9-{width:auto}.CountrySelect-module__country-select-item___Mr6JZ{display:flex;align-items:center;gap:.25em}.CountrySelect-module__flag___bNBsn{transform:translateY(.05em)}.CountrySelect-module__country-select-content___WSd9- .CountrySelect-module__country-select-item___Mr6JZ{gap:.5em}.CountrySelect-module__country-calling-code___d61ih{color:var(--cdp-web-colors-select-list-item-text-muted)}

package/dist/assets/Modal.css

@@ -1 +1 @@
-.Modal-module__modal___MUsZA{--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);box-sizing:border-box;box-shadow:var(--shadow-md);width:100%;max-width:28.125em;min-width:0;background:var(--cdp-web-colors-page-bg-default);border-radius:var(--cdp-web-borderRadius-modal);outline:1px solid var(--cdp-web-colors-page-border-default);overflow:hidden;position:relative}.Modal-module__modal___MUsZA[data-state=open]{animation:Modal-module__slide-in___p-A8u .2s ease-out,Modal-module__fade-in___NfUjS .2s ease-out}.Modal-module__modal___MUsZA[data-state=closed]{animation:Modal-module__slide-out___hrRK1 .2s ease-in,Modal-module__fade-out___LpBNV .2s ease-in}.Modal-module__overlay___-RqGQ{background:var(--cdp-web-colors-bg-overlay);box-sizing:border-box;-webkit-backdrop-filter:blur(.5em);backdrop-filter:blur(.5em);display:grid;grid-template-rows:auto 1fr;inset:0;overflow-y:auto;place-items:end center;position:fixed;z-index:auto}.Modal-module__overlay___-RqGQ[data-state=open]{animation:Modal-module__fade-in___NfUjS .2s ease-out}.Modal-module__overlay___-RqGQ[data-state=closed]{animation:Modal-module__fade-out___LpBNV .2s ease-in}.Modal-module__spacer___dIfOA{height:1em}@keyframes Modal-module__fade-in___NfUjS{0%{opacity:0}to{opacity:1}}@keyframes Modal-module__fade-out___LpBNV{0%{opacity:1}to{opacity:0}}@keyframes Modal-module__slide-in___p-A8u{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes Modal-module__slide-out___hrRK1{0%{transform:translateY(0)}to{transform:translateY(100%)}}@media (min-width: 400px){.Modal-module__overlay___-RqGQ{padding:.5rem}}@media (min-width: 450px){.Modal-module__overlay___-RqGQ{place-items:center;padding:1rem;grid-template-rows:1fr}.Modal-module__modal___MUsZA{height:auto}.Modal-module__spacer___dIfOA{display:none}@keyframes Modal-module__slide-in___p-A8u{0%{transform:translateY(10%)}to{transform:translateY(0)}}@keyframes Modal-module__slide-out___hrRK1{0%{transform:translateY(0)}to{transform:translateY(10%)}}}
+.Modal-module__theme-override___tz6IM{display:contents}.Modal-module__modal___MUsZA{--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);box-sizing:border-box;box-shadow:var(--shadow-md);width:100%;max-width:28.125em;min-width:0;background:var(--cdp-web-colors-page-bg-default);border-radius:var(--cdp-web-borderRadius-modal);outline:1px solid var(--cdp-web-colors-page-border-default);overflow:hidden;position:relative;z-index:var(--cdp-web-zIndex-modal-dialog)}.Modal-module__modal___MUsZA[data-state=open]{animation:Modal-module__slide-in___p-A8u .2s ease-out,Modal-module__fade-in___NfUjS .2s ease-out}.Modal-module__modal___MUsZA[data-state=closed]{animation:Modal-module__slide-out___hrRK1 .2s ease-in,Modal-module__fade-out___LpBNV .2s ease-in}.Modal-module__overlay___-RqGQ{background:var(--cdp-web-colors-bg-overlay);box-sizing:border-box;-webkit-backdrop-filter:blur(.5em);backdrop-filter:blur(.5em);display:grid;grid-template-rows:auto 1fr;inset:0;overflow-y:auto;place-items:end center;position:fixed;z-index:var(--cdp-web-zIndex-modal-overlay)}.Modal-module__overlay___-RqGQ[data-state=open]{animation:Modal-module__fade-in___NfUjS .2s ease-out}.Modal-module__overlay___-RqGQ[data-state=closed]{animation:Modal-module__fade-out___LpBNV .2s ease-in}.Modal-module__spacer___dIfOA{height:1em}@keyframes Modal-module__fade-in___NfUjS{0%{opacity:0}to{opacity:1}}@keyframes Modal-module__fade-out___LpBNV{0%{opacity:1}to{opacity:0}}@keyframes Modal-module__slide-in___p-A8u{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes Modal-module__slide-out___hrRK1{0%{transform:translateY(0)}to{transform:translateY(100%)}}@media (min-width: 400px){.Modal-module__overlay___-RqGQ{padding:.5rem}}@media (min-width: 450px){.Modal-module__overlay___-RqGQ{place-items:center;padding:1rem;grid-template-rows:1fr}.Modal-module__modal___MUsZA{height:auto}.Modal-module__spacer___dIfOA{display:none}@keyframes Modal-module__slide-in___p-A8u{0%{transform:translateY(10%)}to{transform:translateY(0)}}@keyframes Modal-module__slide-out___hrRK1{0%{transform:translateY(0)}to{transform:translateY(10%)}}}

package/dist/assets/Select.css

@@ -1 +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:var(--cdp-web-borderRadius-select-trigger);color:var(--cdp-web-colors-select-trigger-text-default);font-family:var(--cdp-web-font-family-select);font-weight:500;text-align:left;justify-content:space-between}.Select-module__select-trigger___yqioM:hover{background-color:var(--cdp-web-colors-select-trigger-bg-hover)}.Select-module__select-trigger___yqioM:active{background-color:var(--cdp-web-colors-select-trigger-bg-pressed)}.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:var(--cdp-web-borderRadius-select-list);box-sizing:border-box;box-shadow:var(--shadow-sm);font-size:var(--cdp-web-font-size-base);font-family:var(--cdp-web-font-family-select);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:var(--cdp-web-borderRadius-select-list);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)}}
+.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:var(--cdp-web-borderRadius-select-trigger);color:var(--cdp-web-colors-select-trigger-text-default);font-family:var(--cdp-web-font-family-select);font-weight:500;text-align:left;justify-content:space-between}.Select-module__select-trigger___yqioM:hover{background-color:var(--cdp-web-colors-select-trigger-bg-hover)}.Select-module__select-trigger___yqioM:active{background-color:var(--cdp-web-colors-select-trigger-bg-pressed)}.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:var(--cdp-web-borderRadius-select-list);box-sizing:border-box;box-shadow:var(--shadow-sm);font-size:var(--cdp-web-font-size-base);font-family:var(--cdp-web-font-family-select);max-height:var(--radix-select-content-available-height);padding:.5em;text-align:left;width:var(--radix-select-trigger-width);z-index:var(--cdp-web-zIndex-select-list)}.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:var(--cdp-web-borderRadius-select-list);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/ThemeProvider/index.js

@@ -1,44 +1,47 @@
-import { jsx as a } from "react/jsx-runtime";
-import { createContext as v, useContext as w, useMemo as s, useId as x } from "react";
-import { theme as m } from "../../theme/theme.js";
-import { themeToCssVariables as T } from "../../theme/utils.js";
-import '../../assets/ThemeProvider.css';const f = "ThemeProvider-module__wrapper___aXwhZ", _ = {
-  wrapper: f
-}, n = v(void 0), V = ({
-  children: e,
-  className: c = "",
-  style: p,
-  theme: t,
-  "data-cdp-provider": i,
-  ...d
+import { jsx as c, Fragment as v } from "react/jsx-runtime";
+import { createContext as C, useContext as u, useMemo as s, useId as _ } from "react";
+import { theme as N } from "../../theme/theme.js";
+import { themeToCssVariables as i } from "../../theme/utils.js";
+import '../../assets/ThemeProvider.css';const P = "ThemeProvider-module__wrapper___aXwhZ", V = {
+  wrapper: P
+}, m = C(void 0), k = ({
+  children: o,
+  className: d = "",
+  style: h,
+  theme: e,
+  "data-cdp-provider": l,
+  ...w
 }) => {
-  const r = s(
-    () => t ? { ...m, ...t } : m,
-    [t]
-  ), h = x(), u = i ?? h, o = s(() => T(r), [r]), l = s(
+  const n = u(m), t = !!n, r = s(() => {
+    const p = t ? n.theme : N;
+    return e ? { ...p, ...e } : p;
+  }, [t, n?.theme, e]), x = _(), T = l ?? x, a = s(() => i(r), [r]), f = s(
+    () => t && e ? i(e) : {},
+    [t, e]
+  ), b = s(
     () => ({
       theme: r,
-      cssVariables: o
+      cssVariables: a
     }),
-    [r, o]
+    [r, a]
   );
-  return /* @__PURE__ */ a(n.Provider, { value: l, children: /* @__PURE__ */ a(
+  return t && !e ? /* @__PURE__ */ c(v, { children: o }) : /* @__PURE__ */ c(m.Provider, { value: b, children: /* @__PURE__ */ c(
     "div",
     {
-      className: `${_.wrapper} ${c}`,
-      style: { ...p, ...o },
-      ...d,
-      "data-cdp-provider": u,
-      children: e
+      className: `${V.wrapper} ${d}`,
+      style: { ...h, ...t ? f : a },
+      ...w,
+      "data-cdp-provider": T,
+      children: o
     }
   ) });
-}, $ = () => {
-  const e = w(n);
-  if (!e)
+}, E = () => {
+  const o = u(m);
+  if (!o)
     throw new Error("useTheme must be used within a ThemeProvider");
-  return e;
+  return o;
 };
 export {
-  V as ThemeProvider,
-  $ as useTheme
+  k as ThemeProvider,
+  E as useTheme
 };

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

@@ -1,31 +1,34 @@
 import { jsx as o, jsxs as n } from "react/jsx-runtime";
-import { DialogPortal as _, DialogOverlay as p, DialogContent as g, Dialog as M, DialogTitle as D, DialogDescription as f, DialogClose as u, DialogTrigger as y } from "@radix-ui/react-dialog";
-import { c as e } from "../../../chunks/lite.1fxw3LjI.js";
-import { forwardRef as v, useMemo as C } from "react";
-import { useTheme as T } from "../../ThemeProvider/index.js";
-import '../../../assets/Modal.css';const x = "Modal-module__modal___MUsZA", N = "Modal-module__overlay___-RqGQ", h = "Modal-module__spacer___dIfOA", a = {
-  modal: x,
+import { DialogPortal as _, DialogOverlay as p, DialogContent as M, Dialog as g, DialogTitle as h, DialogDescription as v, DialogClose as D, DialogTrigger as f } from "@radix-ui/react-dialog";
+import { c as r } from "../../../chunks/lite.1fxw3LjI.js";
+import { forwardRef as u, useMemo as T } from "react";
+import { useTheme as x, ThemeProvider as y } from "../../ThemeProvider/index.js";
+import '../../../assets/Modal.css';const C = "Modal-module__modal___MUsZA", N = "Modal-module__overlay___-RqGQ", I = "Modal-module__spacer___dIfOA", e = {
+  "theme-override": "Modal-module__theme-override___tz6IM",
+  modal: C,
   overlay: N,
-  spacer: h
-}, j = v(
-  ({ children: r, className: t = "", overlayClassName: c = "", overlayStyle: l, ...i }, d) => {
-    const { cssVariables: s } = T(), m = C(
-      () => ({ ...s, ...l }),
-      [s, l]
+  spacer: I
+}, z = {
+  "zIndex-popup": "calc(var(--cdp-web-zIndex-modal-dialog) + 1)"
+}, b = u(
+  ({ children: s, className: t = "", overlayClassName: d = "", overlayStyle: a, ...m }, c) => {
+    const { cssVariables: l } = x(), i = T(
+      () => ({ ...l, ...a }),
+      [l, a]
     );
-    return /* @__PURE__ */ o(_, { children: /* @__PURE__ */ n(p, { className: e(a.overlay, c), style: m, children: [
-      /* @__PURE__ */ o("div", { className: a.spacer }),
-      /* @__PURE__ */ o(g, { ...i, ref: d, className: e(a.modal, t), children: r })
+    return /* @__PURE__ */ o(_, { children: /* @__PURE__ */ n(p, { className: r(e.overlay, d), style: i, children: [
+      /* @__PURE__ */ o("div", { className: e.spacer }),
+      /* @__PURE__ */ o(M, { ...m, ref: c, className: r(e.modal, t), children: /* @__PURE__ */ o(y, { theme: z, className: e["theme-override"], children: s }) })
     ] }) });
   }
 );
-j.displayName = "ModalContent";
-const w = M, G = u, I = f, P = D, Q = y;
+b.displayName = "ModalContent";
+const R = g, q = D, G = v, Q = h, U = f;
 export {
-  w as Modal,
-  G as ModalClose,
-  j as ModalContent,
-  I as ModalDescription,
-  P as ModalTitle,
-  Q as ModalTrigger
+  R as Modal,
+  q as ModalClose,
+  b as ModalContent,
+  G as ModalDescription,
+  Q as ModalTitle,
+  U as ModalTrigger
 };

package/dist/index.js

@@ -2,15 +2,15 @@ import "./chunks/useSendComponentCallOnce.BHZMuo6E.js";
 import "react";
 import "./version.js";
 import { AuthButton as a } from "./components/AuthButton/index.js";
-import { c as p, A as m, C as x, O as i, V as s, d as M, e as u, f as d, u as c, a as I, b as g } from "./chunks/CDPReactProvider.CIQm4C4z.js";
+import { c as p, A as m, C as x, O as i, V as s, d as M, e as d, f as u, u as c, a as I, b as g } from "./chunks/CDPReactProvider.CIQm4C4z.js";
 import { CopyAddress as C } from "./components/CopyAddress/index.js";
-import { CopyEvmKeyButton as h } from "./components/CopyEvmKeyButton/index.js";
-import { CopySolanaKeyButton as S } from "./components/CopySolanaKeyButton/index.js";
+import { CopyEvmKeyButton as S } from "./components/CopyEvmKeyButton/index.js";
+import { CopySolanaKeyButton as A } from "./components/CopySolanaKeyButton/index.js";
 import { EnrollMfa as y, EnrollMfaError as k } from "./components/EnrollMfa/index.js";
 import { EnrollMfaModal as B, EnrollMfaModalContent as L, EnrollMfaModalTrigger as w } from "./components/EnrollMfaModal/index.js";
-import { ExportWallet as D, ExportWalletCopyAddress as b, ExportWalletCopyKeyButton as P, ExportWalletFooter as v, E as O, a as H, b as R, c as U, d as _, ExportWalletTitle as K, ExportWalletWarning as N } from "./components/ExportWallet/index.js";
-import { Fund as G, FundFooter as X } from "./components/Fund/index.js";
-import { FundModal as z, FundModalContent as J, FundModalTrigger as Q } from "./components/FundModal/index.js";
+import { ExportWallet as D, ExportWalletCopyAddress as b, ExportWalletCopyKeyButton as P, ExportWalletFooter as v, E as O, a as H, b as R, c as U, d as _, ExportWalletTitle as z, ExportWalletWarning as K } from "./components/ExportWallet/index.js";
+import { Fund as j, FundFooter as G } from "./components/Fund/index.js";
+import { FundModal as q, FundModalContent as J, FundModalTrigger as Q } from "./components/FundModal/index.js";
 import { LinkAuth as Z, LinkAuthError as $ } from "./components/LinkAuth/index.js";
 import { LinkAuthModal as ro, LinkAuthModalContent as eo, LinkAuthModalTrigger as to } from "./components/LinkAuthModal/index.js";
 import { SendEvmTransactionButton as fo } from "./components/SendEvmTransactionButton/index.js";
@@ -20,72 +20,72 @@ import { useSignInReducer as io } from "./components/SignIn/useSignInReducer.js"
 import { SignInModal as Mo, SignInModalContent as uo, SignInModalTrigger as co } from "./components/SignInModal/index.js";
 import { SignOutButton as go } from "./components/SignOutButton/index.js";
 import { ThemeProvider as Co, useTheme as To } from "./components/ThemeProvider/index.js";
-import { VerifyMfaInline as Ao, VerifyMfaInlineBackButton as So, VerifyMfaInlineFlow as Fo, useVerifyMfaInlineContext as yo } from "./components/VerifyMfaInline/index.js";
+import { VerifyMfaInline as ho, VerifyMfaInlineBackButton as Ao, VerifyMfaInlineFlow as Fo, useVerifyMfaInlineContext as yo } from "./components/VerifyMfaInline/index.js";
 import { Button as Vo } from "./components/ui/Button/index.js";
 import { Modal as Lo, ModalClose as wo, ModalContent as Wo, ModalDescription as Do, ModalTitle as bo, ModalTrigger as Po } from "./components/ui/Modal/index.js";
 import { cssVariables as Oo } from "./theme/cssVariables.js";
 import { theme as Ro } from "./theme/theme.js";
-import { borderRadius as _o, borderRadiusComponents as Ko, borderRadiusSemantic as No, colors as jo, colorsBase as Go, colorsComponents as Xo, colorsSemantic as qo, font as zo, fontComponents as Jo, fontSemantic as Qo, tokens as Yo } from "./theme/tokens.js";
-import { flattenTokensObject as $o, themeToCssVariables as or } from "./theme/utils.js";
-import { IconAppleLogo as er } from "./icons/IconAppleLogo.js";
-import { IconArrowLeft as nr } from "./icons/IconArrowLeft.js";
-import { IconArrowsUpDown as ar } from "./icons/IconArrowsUpDown.js";
-import { IconCheck as pr } from "./icons/IconCheck.js";
-import { IconCheckCircle as xr } from "./icons/IconCheckCircle.js";
-import { IconChevronDown as sr } from "./icons/IconChevronDown.js";
-import { IconCopy as ur } from "./icons/IconCopy.js";
-import { IconEnvelope as cr } from "./icons/IconEnvelope.js";
-import { IconExclamationCircle as gr } from "./icons/IconExclamationCircle.js";
-import { IconExclamationTriangle as Cr } from "./icons/IconExclamationTriangle.js";
-import { IconGoogleLogo as hr } from "./icons/IconGoogleLogo.js";
-import { IconLock as Sr } from "./icons/IconLock.js";
-import { IconMinus as yr } from "./icons/IconMinus.js";
-import { IconPhone as Vr } from "./icons/IconPhone.js";
-import { IconPinCode as Lr } from "./icons/IconPinCode.js";
-import { IconPlus as Wr } from "./icons/IconPlus.js";
-import { IconShield as br } from "./icons/IconShield.js";
-import { IconSmartPhone as vr } from "./icons/IconSmartPhone.js";
-import { IconXMark as Hr } from "./icons/IconXMark.js";
-import { clamp as Ur } from "./utils/clamp.js";
-import { getMessageFromUnknownError as Kr } from "./utils/getMessageFromUnknownError.js";
-import { isApiError as jr } from "./utils/isApiError.js";
-import { isEmailInvalid as Xr } from "./utils/isEmailInvalid.js";
-import { parseValuesFromPhoneNumber as zr } from "./utils/parseValuesFromPhoneNumber.js";
-import { sendIframeMessage as Qr } from "./utils/sendIframeMessage.js";
+import { borderRadius as _o, borderRadiusComponents as zo, borderRadiusSemantic as Ko, colors as No, colorsBase as jo, colorsComponents as Go, colorsSemantic as Xo, font as qo, fontComponents as Jo, fontSemantic as Qo, tokens as Yo, zIndex as Zo, zIndexComponents as $o, zIndexSemantic as or } from "./theme/tokens.js";
+import { flattenTokensObject as er, themeToCssVariables as tr } from "./theme/utils.js";
+import { IconAppleLogo as fr } from "./icons/IconAppleLogo.js";
+import { IconArrowLeft as lr } from "./icons/IconArrowLeft.js";
+import { IconArrowsUpDown as mr } from "./icons/IconArrowsUpDown.js";
+import { IconCheck as ir } from "./icons/IconCheck.js";
+import { IconCheckCircle as Mr } from "./icons/IconCheckCircle.js";
+import { IconChevronDown as ur } from "./icons/IconChevronDown.js";
+import { IconCopy as Ir } from "./icons/IconCopy.js";
+import { IconEnvelope as Er } from "./icons/IconEnvelope.js";
+import { IconExclamationCircle as Tr } from "./icons/IconExclamationCircle.js";
+import { IconExclamationTriangle as hr } from "./icons/IconExclamationTriangle.js";
+import { IconGoogleLogo as Fr } from "./icons/IconGoogleLogo.js";
+import { IconLock as kr } from "./icons/IconLock.js";
+import { IconMinus as Br } from "./icons/IconMinus.js";
+import { IconPhone as wr } from "./icons/IconPhone.js";
+import { IconPinCode as Dr } from "./icons/IconPinCode.js";
+import { IconPlus as Pr } from "./icons/IconPlus.js";
+import { IconShield as Or } from "./icons/IconShield.js";
+import { IconSmartPhone as Rr } from "./icons/IconSmartPhone.js";
+import { IconXMark as _r } from "./icons/IconXMark.js";
+import { clamp as Kr } from "./utils/clamp.js";
+import { getMessageFromUnknownError as jr } from "./utils/getMessageFromUnknownError.js";
+import { isApiError as Xr } from "./utils/isApiError.js";
+import { isEmailInvalid as Jr } from "./utils/isEmailInvalid.js";
+import { parseValuesFromPhoneNumber as Yr } from "./utils/parseValuesFromPhoneNumber.js";
+import { sendIframeMessage as $r } from "./utils/sendIframeMessage.js";
 import "@coinbase/cdp-core";
-import { EnrollMfaDescription as Zr } from "./components/EnrollMfa/EnrollMfaDescription.js";
-import { EnrollMfaFlow as oe } from "./components/EnrollMfa/EnrollMfaFlow.js";
-import { EnrollMfaFlowBackButton as ee } from "./components/EnrollMfa/EnrollMfaFlowBackButton.js";
-import { EnrollMfaFooter as ne } from "./components/EnrollMfa/EnrollMfaFooter.js";
-import { EnrollMfaImage as ae } from "./components/EnrollMfa/EnrollMfaImage.js";
-import { EnrollMfaItem as pe } from "./components/EnrollMfa/EnrollMfaItem.js";
-import { EnrollMfaItems as xe } from "./components/EnrollMfa/EnrollMfaItems.js";
-import { EnrollMfaTitle as se } from "./components/EnrollMfa/EnrollMfaTitle.js";
-import { useEnrollMfaContext as ue } from "./components/EnrollMfa/EnrollMfaProvider.js";
-import { useEnrollMfaFlow as ce } from "./components/EnrollMfa/EnrollMfaFlowProvider.js";
-import { FundForm as ge } from "./components/Fund/FundForm.js";
-import { FundTitle as Ce } from "./components/Fund/FundTitle.js";
-import { useFundContext as he } from "./components/Fund/FundProvider.js";
-import { a as Se, u as Fe } from "./chunks/LinkAuthFlow.BaUSMzGH.js";
-import { LinkAuthFlowBackButton as ke } from "./components/LinkAuth/LinkAuthFlowBackButton.js";
-import { LinkAuthItem as Be } from "./components/LinkAuth/LinkAuthItem.js";
-import { LinkAuthItems as we } from "./components/LinkAuth/LinkAuthItems.js";
-import { LinkAuthTitle as De } from "./components/LinkAuth/LinkAuthTitle.js";
-import { useLinkAuthContext as Pe } from "./components/LinkAuth/LinkAuthProvider.js";
-import { SignInAuthMethodButtons as Oe } from "./components/SignIn/SignInAuthMethodButtons.js";
-import { SignInBackButton as Re } from "./components/SignIn/SignInBackButton.js";
-import { SignInDescription as _e } from "./components/SignIn/SignInDescription.js";
-import { SignInFooter as Ne } from "./components/SignIn/SignInFooter.js";
-import { SignInForm as Ge } from "./components/SignIn/SignInForm.js";
-import { SignInImage as qe } from "./components/SignIn/SignInImage.js";
-import { SignInTitle as Je } from "./components/SignIn/SignInTitle.js";
-import { useSignInContext as Ye } from "./components/SignIn/SignInProvider.js";
-import { VerifyMfaDescription as $e } from "./components/VerifyMfa/VerifyMfaDescription.js";
-import { VerifyMfaFooter as rt } from "./components/VerifyMfa/VerifyMfaFooter.js";
-import { VerifyMfaFlow as tt } from "./components/VerifyMfa/VerifyMfaFlow.js";
-import { VerifyMfaImage as ft } from "./components/VerifyMfa/VerifyMfaImage.js";
-import { VerifyMfaTitle as lt } from "./components/VerifyMfa/VerifyMfaTitle.js";
-import { useVerifyMfaContext as mt } from "./components/VerifyMfa/VerifyMfaProvider.js";
+import { EnrollMfaDescription as re } from "./components/EnrollMfa/EnrollMfaDescription.js";
+import { EnrollMfaFlow as te } from "./components/EnrollMfa/EnrollMfaFlow.js";
+import { EnrollMfaFlowBackButton as fe } from "./components/EnrollMfa/EnrollMfaFlowBackButton.js";
+import { EnrollMfaFooter as le } from "./components/EnrollMfa/EnrollMfaFooter.js";
+import { EnrollMfaImage as me } from "./components/EnrollMfa/EnrollMfaImage.js";
+import { EnrollMfaItem as ie } from "./components/EnrollMfa/EnrollMfaItem.js";
+import { EnrollMfaItems as Me } from "./components/EnrollMfa/EnrollMfaItems.js";
+import { EnrollMfaTitle as ue } from "./components/EnrollMfa/EnrollMfaTitle.js";
+import { useEnrollMfaContext as Ie } from "./components/EnrollMfa/EnrollMfaProvider.js";
+import { useEnrollMfaFlow as Ee } from "./components/EnrollMfa/EnrollMfaFlowProvider.js";
+import { FundForm as Te } from "./components/Fund/FundForm.js";
+import { FundTitle as he } from "./components/Fund/FundTitle.js";
+import { useFundContext as Fe } from "./components/Fund/FundProvider.js";
+import { a as ke, u as Ve } from "./chunks/LinkAuthFlow.BaUSMzGH.js";
+import { LinkAuthFlowBackButton as Le } from "./components/LinkAuth/LinkAuthFlowBackButton.js";
+import { LinkAuthItem as We } from "./components/LinkAuth/LinkAuthItem.js";
+import { LinkAuthItems as be } from "./components/LinkAuth/LinkAuthItems.js";
+import { LinkAuthTitle as ve } from "./components/LinkAuth/LinkAuthTitle.js";
+import { useLinkAuthContext as He } from "./components/LinkAuth/LinkAuthProvider.js";
+import { SignInAuthMethodButtons as Ue } from "./components/SignIn/SignInAuthMethodButtons.js";
+import { SignInBackButton as ze } from "./components/SignIn/SignInBackButton.js";
+import { SignInDescription as Ne } from "./components/SignIn/SignInDescription.js";
+import { SignInFooter as Ge } from "./components/SignIn/SignInFooter.js";
+import { SignInForm as qe } from "./components/SignIn/SignInForm.js";
+import { SignInImage as Qe } from "./components/SignIn/SignInImage.js";
+import { SignInTitle as Ze } from "./components/SignIn/SignInTitle.js";
+import { useSignInContext as ot } from "./components/SignIn/SignInProvider.js";
+import { VerifyMfaDescription as et } from "./components/VerifyMfa/VerifyMfaDescription.js";
+import { VerifyMfaFooter as nt } from "./components/VerifyMfa/VerifyMfaFooter.js";
+import { VerifyMfaFlow as at } from "./components/VerifyMfa/VerifyMfaFlow.js";
+import { VerifyMfaImage as pt } from "./components/VerifyMfa/VerifyMfaImage.js";
+import { VerifyMfaTitle as xt } from "./components/VerifyMfa/VerifyMfaTitle.js";
+import { useVerifyMfaContext as st } from "./components/VerifyMfa/VerifyMfaProvider.js";
 export {
   p as ALL_AUTH_METHODS,
   m as AUTH_METHODS,
@@ -93,21 +93,21 @@ export {
   Vo as Button,
   x as CDPReactProvider,
   C as CopyAddress,
-  h as CopyEvmKeyButton,
-  S as CopySolanaKeyButton,
+  S as CopyEvmKeyButton,
+  A as CopySolanaKeyButton,
   y as EnrollMfa,
-  Zr as EnrollMfaDescription,
+  re as EnrollMfaDescription,
   k as EnrollMfaError,
-  oe as EnrollMfaFlow,
-  ee as EnrollMfaFlowBackButton,
-  ne as EnrollMfaFooter,
-  ae as EnrollMfaImage,
-  pe as EnrollMfaItem,
-  xe as EnrollMfaItems,
+  te as EnrollMfaFlow,
+  fe as EnrollMfaFlowBackButton,
+  le as EnrollMfaFooter,
+  me as EnrollMfaImage,
+  ie as EnrollMfaItem,
+  Me as EnrollMfaItems,
   B as EnrollMfaModal,
   L as EnrollMfaModalContent,
   w as EnrollMfaModalTrigger,
-  se as EnrollMfaTitle,
+  ue as EnrollMfaTitle,
   D as ExportWallet,
   b as ExportWalletCopyAddress,
   P as ExportWalletCopyKeyButton,
@@ -117,44 +117,44 @@ export {
   R as ExportWalletModalContent,
   U as ExportWalletModalTitle,
   _ as ExportWalletModalTrigger,
-  K as ExportWalletTitle,
-  N as ExportWalletWarning,
-  G as Fund,
-  X as FundFooter,
-  ge as FundForm,
-  z as FundModal,
+  z as ExportWalletTitle,
+  K as ExportWalletWarning,
+  j as Fund,
+  G as FundFooter,
+  Te as FundForm,
+  q as FundModal,
   J as FundModalContent,
   Q as FundModalTrigger,
-  Ce as FundTitle,
-  er as IconAppleLogo,
-  nr as IconArrowLeft,
-  ar as IconArrowsUpDown,
-  pr as IconCheck,
-  xr as IconCheckCircle,
-  sr as IconChevronDown,
-  ur as IconCopy,
-  cr as IconEnvelope,
-  gr as IconExclamationCircle,
-  Cr as IconExclamationTriangle,
-  hr as IconGoogleLogo,
-  Sr as IconLock,
-  yr as IconMinus,
-  Vr as IconPhone,
-  Lr as IconPinCode,
-  Wr as IconPlus,
-  br as IconShield,
-  vr as IconSmartPhone,
-  Hr as IconXMark,
+  he as FundTitle,
+  fr as IconAppleLogo,
+  lr as IconArrowLeft,
+  mr as IconArrowsUpDown,
+  ir as IconCheck,
+  Mr as IconCheckCircle,
+  ur as IconChevronDown,
+  Ir as IconCopy,
+  Er as IconEnvelope,
+  Tr as IconExclamationCircle,
+  hr as IconExclamationTriangle,
+  Fr as IconGoogleLogo,
+  kr as IconLock,
+  Br as IconMinus,
+  wr as IconPhone,
+  Dr as IconPinCode,
+  Pr as IconPlus,
+  Or as IconShield,
+  Rr as IconSmartPhone,
+  _r as IconXMark,
   Z as LinkAuth,
   $ as LinkAuthError,
-  Se as LinkAuthFlow,
-  ke as LinkAuthFlowBackButton,
-  Be as LinkAuthItem,
-  we as LinkAuthItems,
+  ke as LinkAuthFlow,
+  Le as LinkAuthFlowBackButton,
+  We as LinkAuthItem,
+  be as LinkAuthItems,
   ro as LinkAuthModal,
   eo as LinkAuthModalContent,
   to as LinkAuthModalTrigger,
-  De as LinkAuthTitle,
+  ve as LinkAuthTitle,
   Lo as Modal,
   wo as ModalClose,
   Wo as ModalContent,
@@ -165,62 +165,65 @@ export {
   fo as SendEvmTransactionButton,
   lo as SendSolanaTransactionButton,
   mo as SignIn,
-  Oe as SignInAuthMethodButtons,
-  Re as SignInBackButton,
-  _e as SignInDescription,
-  Ne as SignInFooter,
-  Ge as SignInForm,
-  qe as SignInImage,
+  Ue as SignInAuthMethodButtons,
+  ze as SignInBackButton,
+  Ne as SignInDescription,
+  Ge as SignInFooter,
+  qe as SignInForm,
+  Qe as SignInImage,
   Mo as SignInModal,
   uo as SignInModalContent,
   co as SignInModalTrigger,
-  Je as SignInTitle,
+  Ze as SignInTitle,
   go as SignOutButton,
   Co as ThemeProvider,
   s as VerifyMfa,
-  $e as VerifyMfaDescription,
-  tt as VerifyMfaFlow,
-  rt as VerifyMfaFooter,
-  ft as VerifyMfaImage,
-  Ao as VerifyMfaInline,
-  So as VerifyMfaInlineBackButton,
+  et as VerifyMfaDescription,
+  at as VerifyMfaFlow,
+  nt as VerifyMfaFooter,
+  pt as VerifyMfaImage,
+  ho as VerifyMfaInline,
+  Ao as VerifyMfaInlineBackButton,
   Fo as VerifyMfaInlineFlow,
   M as VerifyMfaModal,
-  u as VerifyMfaModalContent,
-  d as VerifyMfaModalTrigger,
-  lt as VerifyMfaTitle,
+  d as VerifyMfaModalContent,
+  u as VerifyMfaModalTrigger,
+  xt as VerifyMfaTitle,
   _o as borderRadius,
-  Ko as borderRadiusComponents,
-  No as borderRadiusSemantic,
-  Ur as clamp,
-  jo as colors,
-  Go as colorsBase,
-  Xo as colorsComponents,
-  qo as colorsSemantic,
+  zo as borderRadiusComponents,
+  Ko as borderRadiusSemantic,
+  Kr as clamp,
+  No as colors,
+  jo as colorsBase,
+  Go as colorsComponents,
+  Xo as colorsSemantic,
   Oo as cssVariables,
-  $o as flattenTokensObject,
-  zo as font,
+  er as flattenTokensObject,
+  qo as font,
   Jo as fontComponents,
   Qo as fontSemantic,
-  Kr as getMessageFromUnknownError,
-  jr as isApiError,
-  Xr as isEmailInvalid,
-  zr as parseValuesFromPhoneNumber,
-  Qr as sendIframeMessage,
+  jr as getMessageFromUnknownError,
+  Xr as isApiError,
+  Jr as isEmailInvalid,
+  Yr as parseValuesFromPhoneNumber,
+  $r as sendIframeMessage,
   Ro as theme,
-  or as themeToCssVariables,
+  tr as themeToCssVariables,
   Yo as tokens,
   c as useAppConfig,
-  ue as useEnrollMfaContext,
-  ce as useEnrollMfaFlow,
-  he as useFundContext,
-  Pe as useLinkAuthContext,
-  Fe as useLinkAuthFlow,
+  Ie as useEnrollMfaContext,
+  Ee as useEnrollMfaFlow,
+  Fe as useFundContext,
+  He as useLinkAuthContext,
+  Ve as useLinkAuthFlow,
   I as useProviderName,
-  Ye as useSignInContext,
+  ot as useSignInContext,
   io as useSignInReducer,
   To as useTheme,
-  mt as useVerifyMfaContext,
+  st as useVerifyMfaContext,
   yo as useVerifyMfaInlineContext,
-  g as useVerifyMfaModal
+  g as useVerifyMfaModal,
+  Zo as zIndex,
+  $o as zIndexComponents,
+  or as zIndexSemantic
 };

package/dist/theme/index.js

@@ -1,21 +1,24 @@
-import { cssVariables as r } from "./cssVariables.js";
-import { theme as t } from "./theme.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";
+import { cssVariables as n } from "./cssVariables.js";
+import { theme as r } from "./theme.js";
+import { borderRadius as m, borderRadiusComponents as a, borderRadiusSemantic as c, colors as d, colorsBase as i, colorsComponents as f, colorsSemantic as p, font as l, fontComponents as x, fontSemantic as b, tokens as C, zIndex as S, zIndexComponents as u, zIndexSemantic as z } from "./tokens.js";
+import { flattenTokensObject as R, themeToCssVariables as h } from "./utils.js";
 export {
-  a as borderRadius,
-  m as borderRadiusComponents,
+  m as borderRadius,
+  a as borderRadiusComponents,
   c as borderRadiusSemantic,
-  f as colors,
+  d as colors,
   i as colorsBase,
-  l as colorsComponents,
+  f as colorsComponents,
   p as colorsSemantic,
-  r as cssVariables,
+  n as cssVariables,
   R as flattenTokensObject,
-  b as font,
-  d as fontComponents,
-  x as fontSemantic,
-  t as theme,
-  S as themeToCssVariables,
-  C as tokens
+  l as font,
+  x as fontComponents,
+  b as fontSemantic,
+  r as theme,
+  h as themeToCssVariables,
+  C as tokens,
+  S as zIndex,
+  u as zIndexComponents,
+  z as zIndexSemantic
 };

package/dist/theme/theme.d.ts

@@ -1,4 +1,4 @@
-import { borderRadiusSemantic, borderRadiusComponents, colorsSemantic, colorsComponents, fontSemantic, fontComponents } from './tokens';
+import { borderRadiusSemantic, borderRadiusComponents, colorsSemantic, colorsComponents, fontSemantic, fontComponents, zIndexSemantic, zIndexComponents } from './tokens';
 import { Flattened } from './utils';
 export declare const theme: Flattened<{
     borderRadius: {
@@ -638,6 +638,41 @@ export declare const theme: Flattened<{
             };
         };
     };
+    zIndex: {
+        readonly select: {
+            readonly list: {
+                readonly value: "{zIndex.popup}";
+            };
+        };
+        readonly modal: {
+            readonly overlay: {
+                readonly value: "{zIndex.scrim}";
+            };
+            readonly dialog: {
+                readonly value: "{zIndex.floating}";
+            };
+        };
+        readonly base: {
+            readonly value: 0;
+            readonly unit: "none";
+        };
+        readonly raised: {
+            readonly value: 1;
+            readonly unit: "none";
+        };
+        readonly popup: {
+            readonly value: 200;
+            readonly unit: "none";
+        };
+        readonly scrim: {
+            readonly value: 400;
+            readonly unit: "none";
+        };
+        readonly floating: {
+            readonly value: 500;
+            readonly unit: "none";
+        };
+    };
 }>;
 export type SemanticColors = Flattened<{
     colors: typeof colorsSemantic;
@@ -660,7 +695,14 @@ export type ComponentBorderRadius = Flattened<{
     borderRadius: typeof borderRadiusComponents;
 }>;
 export type BorderRadiusTokens = SemanticBorderRadius & ComponentBorderRadius;
-export type Theme = ColorTokens & FontTokens & BorderRadiusTokens;
+export type SemanticZIndex = Flattened<{
+    zIndex: typeof zIndexSemantic;
+}>;
+export type ComponentZIndex = Flattened<{
+    zIndex: typeof zIndexComponents;
+}>;
+export type ZIndexTokens = SemanticZIndex & ComponentZIndex;
+export type Theme = ColorTokens & FontTokens & BorderRadiusTokens & ZIndexTokens;
 export type ButtonVariant = "primary" | "secondary" | "linkPrimary" | "linkSecondary" | "transparentPrimary" | "transparentSecondary" | "control";
 export type Size = "lg" | "md" | "sm" | "xs";
 export type ButtonSize = Size | "none";

package/dist/theme/tokens.d.ts

@@ -1295,6 +1295,78 @@ export declare const borderRadius: {
         readonly value: 99999;
     };
 };
+export declare const zIndexSemantic: {
+    readonly base: {
+        readonly value: 0;
+        readonly unit: "none";
+    };
+    readonly raised: {
+        readonly value: 1;
+        readonly unit: "none";
+    };
+    readonly popup: {
+        readonly value: 200;
+        readonly unit: "none";
+    };
+    readonly scrim: {
+        readonly value: 400;
+        readonly unit: "none";
+    };
+    readonly floating: {
+        readonly value: 500;
+        readonly unit: "none";
+    };
+};
+export declare const zIndexComponents: {
+    readonly select: {
+        readonly list: {
+            readonly value: "{zIndex.popup}";
+        };
+    };
+    readonly modal: {
+        readonly overlay: {
+            readonly value: "{zIndex.scrim}";
+        };
+        readonly dialog: {
+            readonly value: "{zIndex.floating}";
+        };
+    };
+};
+export declare const zIndex: {
+    readonly select: {
+        readonly list: {
+            readonly value: "{zIndex.popup}";
+        };
+    };
+    readonly modal: {
+        readonly overlay: {
+            readonly value: "{zIndex.scrim}";
+        };
+        readonly dialog: {
+            readonly value: "{zIndex.floating}";
+        };
+    };
+    readonly base: {
+        readonly value: 0;
+        readonly unit: "none";
+    };
+    readonly raised: {
+        readonly value: 1;
+        readonly unit: "none";
+    };
+    readonly popup: {
+        readonly value: 200;
+        readonly unit: "none";
+    };
+    readonly scrim: {
+        readonly value: 400;
+        readonly unit: "none";
+    };
+    readonly floating: {
+        readonly value: 500;
+        readonly unit: "none";
+    };
+};
 export declare const tokens: {
     borderRadius: {
         readonly badge: {
@@ -1933,5 +2005,40 @@ export declare const tokens: {
             };
         };
     };
+    zIndex: {
+        readonly select: {
+            readonly list: {
+                readonly value: "{zIndex.popup}";
+            };
+        };
+        readonly modal: {
+            readonly overlay: {
+                readonly value: "{zIndex.scrim}";
+            };
+            readonly dialog: {
+                readonly value: "{zIndex.floating}";
+            };
+        };
+        readonly base: {
+            readonly value: 0;
+            readonly unit: "none";
+        };
+        readonly raised: {
+            readonly value: 1;
+            readonly unit: "none";
+        };
+        readonly popup: {
+            readonly value: 200;
+            readonly unit: "none";
+        };
+        readonly scrim: {
+            readonly value: 400;
+            readonly unit: "none";
+        };
+        readonly floating: {
+            readonly value: 500;
+            readonly unit: "none";
+        };
+    };
 };
 export type Tokens = typeof tokens;

package/dist/theme/tokens.js

@@ -446,16 +446,55 @@ const e = {
       value: "{borderRadius.sm}"
     }
   }
-}, f = {
+}, c = {
   ...s,
   ...i
-}, c = {
-  borderRadius: f,
+}, f = {
+  base: {
+    value: 0,
+    unit: "none"
+  },
+  raised: {
+    value: 1,
+    unit: "none"
+  },
+  popup: {
+    value: 200,
+    unit: "none"
+  },
+  scrim: {
+    value: 400,
+    unit: "none"
+  },
+  floating: {
+    value: 500,
+    unit: "none"
+  }
+}, v = {
+  select: {
+    list: {
+      value: "{zIndex.popup}"
+    }
+  },
+  modal: {
+    overlay: {
+      value: "{zIndex.scrim}"
+    },
+    dialog: {
+      value: "{zIndex.floating}"
+    }
+  }
+}, n = {
+  ...f,
+  ...v
+}, d = {
+  borderRadius: c,
   colors: t,
-  font: u
+  font: u,
+  zIndex: n
 };
 export {
-  f as borderRadius,
+  c as borderRadius,
   i as borderRadiusComponents,
   s as borderRadiusSemantic,
   t as colors,
@@ -465,5 +504,8 @@ export {
   u as font,
   o as fontComponents,
   l as fontSemantic,
-  c as tokens
+  d as tokens,
+  n as zIndex,
+  v as zIndexComponents,
+  f as zIndexSemantic
 };

package/dist/theme/utils.d.ts

@@ -8,6 +8,7 @@ export type Flattened<T extends Record<string, unknown>> = {
 };
 export type TokenValue = {
     value: string | number;
+    unit?: "px" | "none";
     modify?: {
         type: "color-alpha";
         value: number | string;

package/dist/theme/utils.js

@@ -1,22 +1,22 @@
 function u(t) {
   return typeof t == "object" && t !== null && "value" in t && (typeof t.value == "string" || typeof t.value == "number");
 }
-function p(t, e = "cdp-web") {
+function $(t, e = "cdp-web") {
   const o = {};
   function n(r, c) {
-    for (const l in r)
-      if (Object.prototype.hasOwnProperty.call(r, l)) {
-        const f = [...c, l], i = r[l];
-        if (u(i)) {
+    for (const i in r)
+      if (Object.prototype.hasOwnProperty.call(r, i)) {
+        const f = [...c, i], l = r[i];
+        if (u(l)) {
           const y = f.join("-");
-          o[y] = a(i, e);
-        } else typeof i == "object" && i !== null && n(i, f);
+          o[y] = p(l, e);
+        } else typeof l == "object" && l !== null && n(l, f);
       }
   }
   return n(t, []), o;
 }
-const s = (t, e) => t.startsWith("{") && t.endsWith("}") ? `var(--${e ? `${e}-` : ""}${t.slice(1, -1).replace(/\./g, "-")})` : t, a = (t, e) => {
-  const o = typeof t.value == "number" ? `${t.value}px` : s(t.value, e);
+const s = (t, e) => t.startsWith("{") && t.endsWith("}") ? `var(--${e ? `${e}-` : ""}${t.slice(1, -1).replace(/\./g, "-")})` : t, p = (t, e) => {
+  const o = typeof t.value == "number" ? t.unit === "none" ? `${t.value}` : `${t.value}${t.unit ?? "px"}` : s(t.value, e);
   if (t.modify?.type === "color-alpha")
     return `color(from ${o} srgb r g b / ${t.modify.value ?? 1})`;
   if (t.modify?.type === "color-hsl") {
@@ -29,14 +29,14 @@ const s = (t, e) => t.startsWith("{") && t.endsWith("}") ? `var(--${e ? `${e}-`
       if (typeof r == "string")
         n += `, ${s(r, e)}`;
       else {
-        const [c, l] = r;
-        n += `, ${s(c, e)} ${l}`;
+        const [c, i] = r;
+        n += `, ${s(c, e)} ${i}`;
       }
     }), `color-mix(in oklab, ${n})`;
   }
   return t.modify?.type === "multiply" ? `calc(${o} * ${t.modify.value})` : o;
 }, m = (t) => Object.entries(t).reduce((e, [o, n]) => (e[`--cdp-web-${o}`] = n, e), {});
 export {
-  p as flattenTokensObject,
+  $ as flattenTokensObject,
   m as themeToCssVariables
 };

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.0.80";
+export declare const VERSION = "0.0.82";

package/dist/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cdp-react",
-  "version": "0.0.80",
+  "version": "0.0.82",
   "type": "module",
   "dependencies": {
     "@internationalized/number": "3.6.4",
@@ -16,8 +16,8 @@
   },
   "peerDependencies": {
     "react": ">=18.2.0 <19.2.0",
-    "@coinbase/cdp-hooks": "^0.0.80",
-    "@coinbase/cdp-core": "^0.0.80"
+    "@coinbase/cdp-core": "^0.0.82",
+    "@coinbase/cdp-hooks": "^0.0.82"
   },
   "devDependencies": {
     "@size-limit/preset-big-lib": "^11.2.0",
@@ -49,8 +49,8 @@
     "vite": "^7.0.4",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
-    "@coinbase/cdp-core": "^0.0.80",
-    "@coinbase/cdp-hooks": "^0.0.80"
+    "@coinbase/cdp-core": "^0.0.82",
+    "@coinbase/cdp-hooks": "^0.0.82"
   },
   "size-limit": [
     {
@@ -65,7 +65,7 @@
       "path": "./dist/components/SignIn/index.js",
       "import": "{ SignIn }",
       "running": false,
-      "limit": "89 KB"
+      "limit": "92 KB"
     }
   ],
   "files": [