@tempoxyz/ds 0.2.5 → 0.3.0

package/dist/web/components/Token.css

@@ -1 +1 @@
-.z-tds_2f_web-tds_2f_web_2f_token-bg-0{background-color:var(--z-tds_2f_web-color-grayAlpha-200,light-dark(#00000014,#ffffff1a))}.z-tds_2f_web-tds_2f_web_2f_token-border-radius-1{border-radius:var(--z-tds_2f_web-radius-full,9999px)}.z-tds_2f_web-tds_2f_web_2f_token-display-2{display:inline-block}.z-tds_2f_web-tds_2f_web_2f_token-flex-shrink-3{flex-shrink:0}.z-tds_2f_web-tds_2f_web_2f_token-object-fit-4{object-fit:cover}.z-tds_2f_web-tds_2f_web_2f_token-vertical-align-5{vertical-align:middle}.z-tds_2f_web-tds_2f_web_2f_token-bg-6{&[data-status=loaded]{background-color:#0000}}.z-tds_2f_web-tds_2f_web_2f_token-h-7{&:where([data-size=large]){height:var(--z-tds_2f_web-spacing-32,2rem)}}.z-tds_2f_web-tds_2f_web_2f_token-w-8{&:where([data-size=large]){width:var(--z-tds_2f_web-spacing-32,2rem)}}.z-tds_2f_web-tds_2f_web_2f_token-h-9{&:where([data-size=medium]){height:var(--z-tds_2f_web-spacing-24,1.5rem)}}.z-tds_2f_web-tds_2f_web_2f_token-w-10{&:where([data-size=medium]){width:var(--z-tds_2f_web-spacing-24,1.5rem)}}.z-tds_2f_web-tds_2f_web_2f_token-h-11{&:where([data-size=small]){height:var(--z-tds_2f_web-spacing-16,1rem)}}.z-tds_2f_web-tds_2f_web_2f_token-w-12{&:where([data-size=small]){width:var(--z-tds_2f_web-spacing-16,1rem)}}
+.z_tds_2f_web-pUsiwG0{align-items:center}.z_tds_2f_web-pUsiwG1{background-color:var(--z-tds_2f_web-color-background-elevated,light-dark(var(--z-tds_2f_web-color-neutral-000,#fff),var(--z-tds_2f_web-color-neutral-092,#141414)))}.z_tds_2f_web-pUsiwG2{border-color:var(--z-tds_2f_web-color-line-primary,light-dark(var(--z-tds_2f_web-color-neutral-shade-016,#00000029),var(--z-tds_2f_web-color-neutral-tint-024,#ffffff3d)))}.z_tds_2f_web-pUsiwG3{border-radius:var(--z-tds_2f_web-radius-full,var(--z-tds_2f_web-spacing-999,62.4375rem))}.z_tds_2f_web-pUsiwG4{border-style:solid}.z_tds_2f_web-pUsiwG5{border-width:var(--z-tds_2f_web-borderWidth-regular,var(--z-tds_2f_web-spacing-1,1px))}.z_tds_2f_web-pUsiwG6{box-sizing:border-box}.z_tds_2f_web-pUsiwG7{color:var(--z-tds_2f_web-color-content-primary,light-dark(var(--z-tds_2f_web-color-neutral-100,#000),var(--z-tds_2f_web-color-neutral-000,#fff)))}.z_tds_2f_web-pUsiwG8{column-gap:var(--z-tds_2f_web-spacing-8,.5rem)}.z_tds_2f_web-pUsiwG9{corner-shape:round}.z_tds_2f_web-pUsiwGa{display:inline-flex}.z_tds_2f_web-pUsiwGb{flex-shrink:0}.z_tds_2f_web-pUsiwGc{height:var(--z-tds_2f_web-spacing-36,2.25rem)}.z_tds_2f_web-pUsiwGd{padding-block:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-pUsiwGe{padding-inline-end:var(--z-tds_2f_web-spacing-12,.75rem)}.z_tds_2f_web-pUsiwGf{padding-inline-start:var(--z-tds_2f_web-spacing-8,.5rem)}.z_tds_2f_web-pUsiwGg{font-family:var(--z-tds_2f_web-typography-body-b2Strong-fontFamily,var(--z-tds_2f_web-fontFamily-body,Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"))}.z_tds_2f_web-pUsiwGh{font-size:var(--z-tds_2f_web-typography-body-b2Strong-fontSize,14px)}.z_tds_2f_web-pUsiwGi{font-weight:var(--z-tds_2f_web-typography-body-b2Strong-fontWeight,500)}.z_tds_2f_web-pUsiwGj{letter-spacing:var(--z-tds_2f_web-typography-body-b2Strong-letterSpacing,.14px)}.z_tds_2f_web-pUsiwGk{line-height:var(--z-tds_2f_web-typography-body-b2Strong-lineHeight,20px)}.z_tds_2f_web-pUsiwGl{vertical-align:middle}.z_tds_2f_web-pUsiwGm{white-space:nowrap}.z_tds_2f_web-pUsiwGn{&>svg{color:var(--z-tds_2f_web-color-content-tertiary,light-dark(var(--z-tds_2f_web-color-neutral-shade-040,#0006),var(--z-tds_2f_web-color-neutral-tint-040,#fff6)))}}.z_tds_2f_web-pUsiwGo{&>svg{flex-shrink:0}}.z_tds_2f_web-pUsiwGp{&>svg{font-size:var(--z-tds_2f_web-fontSize-16,1rem)}}.z_tds_2f_web-pUsiwGq{&:is(button){cursor:pointer}}.z_tds_2f_web-pUsiwGr{&:is(button){outline-color:#0000}}.z_tds_2f_web-pUsiwGs{&:is(button){outline-offset:var(--z-tds_2f_web-outlineOffset-2,2px)}}.z_tds_2f_web-pUsiwGt{&:is(button){outline-style:solid}}.z_tds_2f_web-pUsiwGu{&:is(button){outline-width:var(--z-tds_2f_web-outlineWidth-2,2px)}}.z_tds_2f_web-pUsiwGv{&:is(button){transition-duration:var(--z-tds_2f_web-transitionDuration-160,.16s)}}.z_tds_2f_web-pUsiwGw{&:is(button){transition-property:opacity,outline-color,scale}}.z_tds_2f_web-pUsiwGx{&:is(button){transition-timing-function:var(--z-tds_2f_web-ease-snappy,cubic-bezier(.23, 1, .32, 1))}}.z_tds_2f_web-pUsiwGy{&:is(button){user-select:none}}.z_tds_2f_web-pUsiwGz{&:is(button):active:not(:disabled){scale:var(--z-tds_2f_web-scale-press,.98)}}.z_tds_2f_web-pUsiwG10{&:is(button):active:not(:disabled){transition-duration:var(--z-tds_2f_web-transitionDuration-100,.1s)}}.z_tds_2f_web-pUsiwG11{&:is(button):disabled{cursor:default}}.z_tds_2f_web-pUsiwG12{&:is(button):disabled{opacity:var(--z-tds_2f_web-opacity-disabled,.4)}}.z_tds_2f_web-pUsiwG13{&:is(button):focus-visible{outline-color:var(--z-tds_2f_web-color-border-focus,light-dark(var(--z-tds_2f_web-color-neutral-shade-040,#0006),var(--z-tds_2f_web-color-neutral-tint-052,#ffffff85)))}}.z_tds_2f_web-pUsiwG14{&:is(button):hover:not(:disabled){opacity:var(--z-tds_2f_web-opacity-hover,.86)}}@media (forced-colors:active){.z_tds_2f_web-pUsiwG15{outline-style:none}.z_tds_2f_web-pUsiwG16{&:is(button):focus-visible{outline-style:solid}}}@media (prefers-reduced-motion:reduce){.z_tds_2f_web-pUsiwG17{&:is(button){transition-property:opacity,outline-color}}.z_tds_2f_web-pUsiwG18{&:is(button):active:not(:disabled){scale:none}}}

package/dist/web/components/Token.d.ts

@@ -1,109 +1,51 @@
-import type { ComponentPropsWithRef, ReactNode } from 'react';
+import type { ComponentPropsWithRef } from 'react';
 import type * as zyzz from 'zyzz';
 /**
- * A token icon rendered as an `img`, found by contract `address` or by `symbol`. A symbol resolves
- * to its address first, through the Tempo token list service unless `Token.Provider` overrides
- * it. Pass `src` to skip resolution. A gray circle shows while loading and after a failure.
+ * A pill with a token's logo and symbol. By default it renders a native `<button>`, built on Base
+ * UI Button, with a chevron that marks it as the trigger of a token picker. Set `readOnly` to
+ * render a `<span>` without the chevron, for reviews and receipts.
  *
- * - `alt` is empty unless set, which suits an icon beside the token name. Pass the name as `alt`
- *   when the icon stands alone.
- * - Wrap lists in `Token.Provider` so tokens with the same symbol share one lookup.
- * - Prefer `address` when you have it, since a symbol lookup adds a request before the image.
+ * - The symbol is the visible label and the button's accessible name. The logo is decorative.
+ * - Pass the pill to a trigger's `render`, such as
+ *   `<Dialog.Trigger render={<Token symbol="pathUSD" />} />`.
+ * - Pass `address` when you have it, so the logo loads without a symbol lookup.
+ * - The logo resolves through the nearest `TokenLogo.Provider`.
  *
  * @example
- * <Token symbol="pathUSD" />
- * <Token address={address} alt="pathUSD" size="large" />
+ * <Token address={address} onClick={openPicker} symbol="pathUSD" />
+ * <Token readOnly symbol="USDC" />
  *
- * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img | MDN img element}
- * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html | WCAG 2.2 Non-text Content}
+ * @see {@link https://base-ui.com/react/components/button | Base UI Button}
+ * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/button/ | WAI-ARIA APG Button pattern}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html | WCAG 2.2 Name, Role, Value}
  */
 export declare function Token(props: Token.Props): import("react").JSX.Element;
 export declare namespace Token {
-    type Props = Omit<ComponentPropsWithRef<'img'>, 'height' | 'width'> & zyzz.Props.Variants<typeof styles.token> & {
+    type Props = zyzz.Props.Variants<typeof styles.token> & {
+        /** Token contract address, which loads the logo directly. Without it, `symbol` resolves the logo. */
+        address?: string | undefined;
         /**
-         * Chain to resolve on. Falls back to the nearest `Token.Provider`, then Tempo mainnet.
+         * Chain to resolve the logo on. Falls back to the nearest `TokenLogo.Provider`, then Tempo mainnet.
          * @default 4217
          */
         chainId?: number | undefined;
-    } & ({
-        /** Token contract address. */
-        address: string;
-        symbol?: undefined;
-    } | {
-        address?: undefined;
-        /** Token symbol, such as `pathUSD`. Matched case-insensitively. */
+        /** Logo URL, which skips resolution. */
+        src?: string | undefined;
+        /** Token symbol, such as `pathUSD`, shown as the label. */
         symbol: string;
-    });
-    /** Finds the contract address for a symbol. Defaults to the Tempo token list service. */
-    type ResolveAddress = (options: ResolveAddress.Options) => Promise<string | undefined>;
-    namespace ResolveAddress {
-        type Options = {
-            chainId: number;
-            symbol: string;
-        };
-    }
-    /** Builds the icon URL for a token. Defaults to the Tempo token list service. */
-    type ResolveSrc = (options: ResolveSrc.Options) => string;
-    namespace ResolveSrc {
-        type Options = {
-            address: string;
-            chainId: number;
-            symbol?: string | undefined;
-        };
-    }
-    /**
-     * Sets the default `chainId` and icon sources for nested tokens. Tokens under one provider share
-     * a single lookup per symbol.
-     */
-    function Provider(props: Provider.Props): import("react").JSX.Element;
-    namespace Provider {
-        type Props = {
-            /**
-             * Chain for nested tokens without their own `chainId`.
-             * @default 4217
-             */
-            chainId?: number | undefined;
-            children?: ReactNode | undefined;
-            resolveAddress?: ResolveAddress | undefined;
-            resolveSrc?: ResolveSrc | undefined;
-        };
-    }
+    } & ((Omit<ComponentPropsWithRef<'button'>, 'children'> & {
+        /**
+         * Renders a read-only `span` without the chevron, for reviews and receipts.
+         * @default false
+         */
+        readOnly?: false | undefined;
+    }) | (Omit<ComponentPropsWithRef<'span'>, 'children'> & {
+        /** Renders a read-only `span` without the chevron, for reviews and receipts. */
+        readOnly: true;
+    }));
 }
 declare namespace styles {
-    const token: zyzz.variants.ReturnType<{
-        readonly base: {
-            readonly backgroundColor: "grayAlpha.200";
-            readonly borderRadius: "full";
-            readonly display: "inline-block";
-            readonly flexShrink: "0 !custom";
-            readonly objectFit: "cover";
-            readonly verticalAlign: "middle";
-            readonly selectors: {
-                readonly '&[data-status="loaded"]': {
-                    readonly backgroundColor: "transparent !custom";
-                };
-            };
-        };
-        readonly defaultVariants: {
-            readonly size: "medium";
-        };
-        readonly variants: {
-            readonly size: {
-                readonly large: {
-                    readonly height: "32";
-                    readonly width: "32";
-                };
-                readonly medium: {
-                    readonly height: "24";
-                    readonly width: "24";
-                };
-                readonly small: {
-                    readonly height: "16";
-                    readonly width: "16";
-                };
-            };
-        };
-    }, "react">;
+    const token: zyzz.style.ReturnType<"react">;
 }
 export {};
 //# sourceMappingURL=Token.d.ts.map

package/dist/web/components/Token.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Token.d.ts","sourceRoot":"","sources":["../../../src/web/components/Token.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE7D,OAAO,KAAK,KAAK,IAAI,MAAM,MAAM,CAAA;AAyBjC;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,+BA4DvC;AAED,yBAAiB,KAAK,CAAC;IACrB,KAAY,KAAK,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,GACxE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,KAAK,CAAC,GAAG;QACzC;;;WAGG;QACH,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;KAC7B,GAAG,CACA;QACE,8BAA8B;QAC9B,OAAO,EAAE,MAAM,CAAA;QACf,MAAM,CAAC,EAAE,SAAS,CAAA;KACnB,GACD;QACE,OAAO,CAAC,EAAE,SAAS,CAAA;QACnB,mEAAmE;QACnE,MAAM,EAAE,MAAM,CAAA;KACf,CACJ,CAAA;IAEH,yFAAyF;IACzF,KAAY,cAAc,GAAG,CAAC,OAAO,EAAE,cAAc,CAAC,OAAO,KAAK,OAAO,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IAE7F,UAAiB,cAAc,CAAC;QAC9B,KAAY,OAAO,GAAG;YAAE,OAAO,EAAE,MAAM,CAAC;YAAC,MAAM,EAAE,MAAM,CAAA;SAAE,CAAA;KAC1D;IAED,iFAAiF;IACjF,KAAY,UAAU,GAAG,CAAC,OAAO,EAAE,UAAU,CAAC,OAAO,KAAK,MAAM,CAAA;IAEhE,UAAiB,UAAU,CAAC;QAC1B,KAAY,OAAO,GAAG;YAAE,OAAO,EAAE,MAAM,CAAC;YAAC,OAAO,EAAE,MAAM,CAAC;YAAC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;SAAE,CAAA;KACxF;IAED;;;OAGG;IACH,SAAgB,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,KAAK,+BAe7C;IAED,UAAiB,QAAQ,CAAC;QACxB,KAAY,KAAK,GAAG;YAClB;;;eAGG;YACH,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;YAC5B,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;YAChC,cAAc,CAAC,EAAE,cAAc,GAAG,SAAS,CAAA;YAC3C,UAAU,CAAC,EAAE,UAAU,GAAG,SAAS,CAAA;SACpC,CAAA;KACF;CACF;AAED,kBAAU,MAAM,CAAC;IACR,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAqBjB,CAAA;CACF"}
+{"version":3,"file":"Token.d.ts","sourceRoot":"","sources":["../../../src/web/components/Token.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAA;AAClD,OAAO,KAAK,KAAK,IAAI,MAAM,MAAM,CAAA;AAKjC;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,+BAuBvC;AAED,yBAAiB,KAAK,CAAC;IACrB,KAAY,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,KAAK,CAAC,GAAG;QAC7D,qGAAqG;QACrG,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;QAC5B;;;WAGG;QACH,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;QAC5B,wCAAwC;QACxC,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;QACxB,2DAA2D;QAC3D,MAAM,EAAE,MAAM,CAAA;KACf,GAAG,CACE,CAAC,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,GAAG;QACnD;;;WAGG;QACH,QAAQ,CAAC,EAAE,KAAK,GAAG,SAAS,CAAA;KAC7B,CAAC,GACF,CAAC,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;QACjD,gFAAgF;QAChF,QAAQ,EAAE,IAAI,CAAA;KACf,CAAC,CACL,CAAA;CACJ;AAED,kBAAU,MAAM,CAAC;IAER,MAAM,KAAK,gCAmDjB,CAAA;CACF"}

package/dist/web/components/Token.js

@@ -1,104 +1,40 @@
 
-import { Recipe as __zyzzRecipe } from 'zyzz/runtime';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, use, useEffect, useState } from 'react';
-import { variants } from '../zyzz.config.js';
-const blank = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
-const defaultChainId = 4217;
-const service = 'https://tokenlist.tempo.xyz';
-const TokenContext = createContext({ chainId: defaultChainId, resolveAddress: asset, resolveSrc: url });
-async function asset(options) {
-    const response = await fetch(`${service}/asset/${options.chainId}/${options.symbol}`);
-    if (!response.ok)
-        return undefined;
-    return (await response.json()).address;
-}
-function url(options) {
-    return `${service}/icon/${options.chainId}/${options.address.toLowerCase()}`;
-}
+import { Props as __zyzzProps } from 'zyzz/runtime';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as BaseUi from '@base-ui/react/button';
+import { ChevronDown } from '../icons/ChevronDown.js';
+import { style } from '../zyzz.config.js';
+import { TokenLogo } from './TokenLogo.js';
 /**
- * A token icon rendered as an `img`, found by contract `address` or by `symbol`. A symbol resolves
- * to its address first, through the Tempo token list service unless `Token.Provider` overrides
- * it. Pass `src` to skip resolution. A gray circle shows while loading and after a failure.
+ * A pill with a token's logo and symbol. By default it renders a native `<button>`, built on Base
+ * UI Button, with a chevron that marks it as the trigger of a token picker. Set `readOnly` to
+ * render a `<span>` without the chevron, for reviews and receipts.
  *
- * - `alt` is empty unless set, which suits an icon beside the token name. Pass the name as `alt`
- *   when the icon stands alone.
- * - Wrap lists in `Token.Provider` so tokens with the same symbol share one lookup.
- * - Prefer `address` when you have it, since a symbol lookup adds a request before the image.
+ * - The symbol is the visible label and the button's accessible name. The logo is decorative.
+ * - Pass the pill to a trigger's `render`, such as
+ *   `<Dialog.Trigger render={<Token symbol="pathUSD" />} />`.
+ * - Pass `address` when you have it, so the logo loads without a symbol lookup.
+ * - The logo resolves through the nearest `TokenLogo.Provider`.
  *
  * @example
- * <Token symbol="pathUSD" />
- * <Token address={address} alt="pathUSD" size="large" />
+ * <Token address={address} onClick={openPicker} symbol="pathUSD" />
+ * <Token readOnly symbol="USDC" />
  *
- * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img | MDN img element}
- * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html | WCAG 2.2 Non-text Content}
+ * @see {@link https://base-ui.com/react/components/button | Base UI Button}
+ * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/button/ | WAI-ARIA APG Button pattern}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html | WCAG 2.2 Name, Role, Value}
  */
 export function Token(props) {
-    const { address, chainId, className, ref, size, src, symbol, vars, ...attributes } = props;
-    const inherited = use(TokenContext);
-    const chain = chainId ?? inherited.chainId;
-    const key = symbol && !src && !address ? `${chain}/${symbol.toLowerCase()}` : undefined;
-    const [lookup, setLookup] = useState();
-    const resolved = address ?? (lookup?.key === key ? lookup?.address : undefined);
-    const source = src ?? (resolved ? inherited.resolveSrc({ address: resolved, chainId: chain, symbol }) : '');
-    const [loaded, setLoaded] = useState();
-    const status = (() => {
-        if (source)
-            return loaded?.url === source ? loaded.status : 'loading';
-        return key && lookup?.key !== key ? 'loading' : 'error';
-    })();
-    useEffect(() => {
-        if (!key || !symbol)
-            return;
-        let active = true;
-        const pending = inherited.addresses?.get(key) ??
-            inherited.resolveAddress({ chainId: chain, symbol }).catch(() => undefined);
-        inherited.addresses?.set(key, pending);
-        pending.then((next) => active && setLookup({ address: next, key }));
-        return () => {
-            active = false;
-        };
-    }, [chain, inherited, key, symbol]);
-    return (_jsx("img", { alt: "", draggable: false, ...attributes, ...styles.token({ className, size, style: props.style, vars }), "data-status": status, onError: (event) => {
-            props.onError?.(event);
-            if (source)
-                setLoaded({ status: 'error', url: source });
-        }, onLoad: (event) => {
-            if (status === 'error' || !source)
-                return;
-            props.onLoad?.(event);
-            setLoaded({ status: 'loaded', url: source });
-        }, ref: (node) => {
-            if (typeof ref === 'function')
-                ref(node);
-            else if (ref)
-                ref.current = node;
-            // A cached image can finish before hydration attaches the load handlers.
-            if (source && node?.complete && loaded?.url !== source)
-                setLoaded({ status: node.naturalWidth > 0 ? 'loaded' : 'error', url: source });
-        }, 
-        // A blank image hides the browser's broken-image glyph while loading a symbol or after a failure.
-        src: status === 'error' || !source ? blank : source }));
+    const { address, chainId, className, readOnly, src, symbol, vars, ...attributes } = props;
+    const logo = address ? (_jsx(TokenLogo, { address: address, chainId: chainId, size: "medium", src: src })) : (_jsx(TokenLogo, { chainId: chainId, size: "medium", src: src, symbol: symbol }));
+    if (readOnly)
+        return (_jsxs("span", { ...attributes, ...styles.token({ className, style: props.style, vars }), children: [logo, symbol] }));
+    return (_jsxs(BaseUi.Button, { ...attributes, ...styles.token({ className, style: props.style, vars }), children: [logo, symbol, _jsx(ChevronDown, {})] }));
 }
-(function (Token) {
-    /**
-     * Sets the default `chainId` and icon sources for nested tokens. Tokens under one provider share
-     * a single lookup per symbol.
-     */
-    function Provider(props) {
-        const [addresses] = useState(() => new Map());
-        return (_jsx(TokenContext, { value: {
-                addresses,
-                chainId: props.chainId ?? defaultChainId,
-                resolveAddress: props.resolveAddress ?? asset,
-                resolveSrc: props.resolveSrc ?? url,
-            }, children: props.children }));
-    }
-    Token.Provider = Provider;
-})(Token || (Token = {}));
 var styles;
 (function (styles) {
-    styles.token = __zyzzRecipe.create({"axes":{"size":["large","medium","small"]},"defaults":{"size":"medium"},"className":"z-tds_2f_web-tds_2f_web_2f_token-bg-0 z-tds_2f_web-tds_2f_web_2f_token-border-radius-1 z-tds_2f_web-tds_2f_web_2f_token-display-2 z-tds_2f_web-tds_2f_web_2f_token-flex-shrink-3 z-tds_2f_web-tds_2f_web_2f_token-object-fit-4 z-tds_2f_web-tds_2f_web_2f_token-vertical-align-5 z-tds_2f_web-tds_2f_web_2f_token-bg-6 z-tds_2f_web-tds_2f_web_2f_token-h-7 z-tds_2f_web-tds_2f_web_2f_token-w-8 z-tds_2f_web-tds_2f_web_2f_token-h-9 z-tds_2f_web-tds_2f_web_2f_token-w-10 z-tds_2f_web-tds_2f_web_2f_token-h-11 z-tds_2f_web-tds_2f_web_2f_token-w-12"});
+    // Figma's Token pill: 36px tall, 8px leading and 12px trailing padding around a 20px logo.
+    styles.token = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-pUsiwG0 z_tds_2f_web-pUsiwG1 z_tds_2f_web-pUsiwG2 z_tds_2f_web-pUsiwG3 z_tds_2f_web-pUsiwG4 z_tds_2f_web-pUsiwG5 z_tds_2f_web-pUsiwG6 z_tds_2f_web-pUsiwG7 z_tds_2f_web-pUsiwG8 z_tds_2f_web-pUsiwG9 z_tds_2f_web-pUsiwGa z_tds_2f_web-pUsiwGb z_tds_2f_web-pUsiwGc z_tds_2f_web-pUsiwGd z_tds_2f_web-pUsiwGe z_tds_2f_web-pUsiwGf z_tds_2f_web-pUsiwGg z_tds_2f_web-pUsiwGh z_tds_2f_web-pUsiwGi z_tds_2f_web-pUsiwGj z_tds_2f_web-pUsiwGk z_tds_2f_web-pUsiwGl z_tds_2f_web-pUsiwGm z_tds_2f_web-pUsiwGn z_tds_2f_web-pUsiwGo z_tds_2f_web-pUsiwGp z_tds_2f_web-pUsiwGq z_tds_2f_web-pUsiwGr z_tds_2f_web-pUsiwGs z_tds_2f_web-pUsiwGt z_tds_2f_web-pUsiwGu z_tds_2f_web-pUsiwGv z_tds_2f_web-pUsiwGw z_tds_2f_web-pUsiwGx z_tds_2f_web-pUsiwGy z_tds_2f_web-pUsiwGz z_tds_2f_web-pUsiwG10 z_tds_2f_web-pUsiwG11 z_tds_2f_web-pUsiwG12 z_tds_2f_web-pUsiwG13 z_tds_2f_web-pUsiwG14 z_tds_2f_web-pUsiwG15 z_tds_2f_web-pUsiwG16 z_tds_2f_web-pUsiwG17 z_tds_2f_web-pUsiwG18"});
 })(styles || (styles = {}));
 //# sourceMappingURL=Token.js.map
 import './Token.css';

package/dist/web/components/Token.js.map

@@ -1 +1 @@
-{"version":3,"file":"Token.js","sourceRoot":"","sources":["../../../src/web/components/Token.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Token.js","sourceRoot":"","sources":["../../../src/web/components/Token.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,MAAM,uBAAuB,CAAA;AAG/C,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE1C;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,KAAK,CAAC,KAAkB;IACtC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAA;IACzF,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,CACrB,KAAC,SAAS,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAE,GAAG,GAAI,CAC1E,CAAC,CAAC,CAAC,CACF,KAAC,SAAS,IAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,GAAI,CACxE,CAAA;IAED,IAAI,QAAQ;QACV,OAAO,CACL,mBAAU,UAAU,KAAM,MAAM,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,aAC5E,IAAI,EACJ,MAAM,IACF,CACR,CAAA;IAEH,OAAO,CACL,MAAC,MAAM,CAAC,MAAM,OAAK,UAAU,KAAM,MAAM,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,aACrF,IAAI,EACJ,MAAM,EACP,KAAC,WAAW,KAAG,IACD,CACjB,CAAA;AACH,CAAC;AA8BD,IAAU,MAAM,CAsDf;AAtDD,WAAU,MAAM;IACd,2FAA2F;IAC9E,YAAK,GAAG,KAAK,CACxB;QACE,UAAU,EAAE,QAAQ;QACpB,eAAe,EAAE,qBAAqB;QACtC,WAAW,EAAE,cAAc;QAC3B,YAAY,EAAE,MAAM;QACpB,WAAW,EAAE,OAAO;QACpB,WAAW,EAAE,SAAS;QACtB,SAAS,EAAE,YAAY;QACvB,KAAK,EAAE,iBAAiB;QACxB,SAAS,EAAE,GAAG;QACd,WAAW,EAAE,OAAO;QACpB,OAAO,EAAE,aAAa;QACtB,UAAU,EAAE,WAAW;QACvB,MAAM,EAAE,IAAI;QACZ,YAAY,EAAE,GAAG;QACjB,gBAAgB,EAAE,IAAI;QACtB,kBAAkB,EAAE,GAAG;QACvB,UAAU,EAAE,eAAe;QAC3B,aAAa,EAAE,QAAQ;QACvB,UAAU,EAAE,QAAQ;QACpB,SAAS,EAAE;YACT,SAAS,EAAE,EAAE,KAAK,EAAE,kBAAkB,EAAE,UAAU,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,EAAE;YACjF,cAAc,EAAE;gBACd,MAAM,EAAE,SAAS;gBACjB,YAAY,EAAE,qBAAqB;gBACnC,aAAa,EAAE,GAAG;gBAClB,YAAY,EAAE,eAAe;gBAC7B,YAAY,EAAE,GAAG;gBACjB,kBAAkB,EAAE,KAAK;gBACzB,kBAAkB,EAAE,+BAA+B;gBACnD,wBAAwB,EAAE,QAAQ;gBAClC,UAAU,EAAE,MAAM;aACnB;YACD,oCAAoC,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,kBAAkB,EAAE,KAAK,EAAE;YACnF,uBAAuB,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE;YACnE,4BAA4B,EAAE,EAAE,YAAY,EAAE,cAAc,EAAE;YAC9D,mCAAmC,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;SAC1D;QACD,gCAAgC,EAAE;YAChC,YAAY,EAAE,cAAc;YAC5B,SAAS,EAAE,EAAE,4BAA4B,EAAE,EAAE,YAAY,EAAE,eAAe,EAAE,EAAE;SAC/E;QACD,yCAAyC,EAAE;YACzC,SAAS,EAAE;gBACT,cAAc,EAAE,EAAE,kBAAkB,EAAE,wBAAwB,EAAE;gBAChE,oCAAoC,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE;aAChE;SACF;KACF,EACD,EAAE,EAAE,EAAE,eAAe,EAAE,CACxB,CAAA;AACH,CAAC,EAtDS,MAAM,KAAN,MAAM,QAsDf"}