@reown/appkit-ui 0.0.3

package/dist/esm/src/composites/wui-tabs/index.js

@@ -0,0 +1,130 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js';
+import '../../components/wui-icon/index.js';
+import { customElement } from '../../utils/WebComponentsUtil.js';
+import styles from './styles.js';
+let WuiTabs = class WuiTabs extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.tabs = [];
+        this.onTabChange = () => null;
+        this.buttons = [];
+        this.disabled = false;
+        this.localTabWidth = '100px';
+        this.activeTab = 0;
+        this.isDense = false;
+    }
+    render() {
+        this.isDense = this.tabs.length > 3;
+        this.style.cssText = `
+      --local-tab: ${this.activeTab};
+      --local-tab-width: ${this.localTabWidth};
+    `;
+        this.dataset['type'] = this.isDense ? 'flex' : 'block';
+        return this.tabs.map((tab, index) => {
+            const isActive = index === this.activeTab;
+            return html `
+        <button
+          ?disabled=${this.disabled}
+          @click=${() => this.onTabClick(index)}
+          data-active=${isActive}
+          data-testid="tab-${tab.label?.toLowerCase()}"
+        >
+          ${this.iconTemplate(tab)}
+          <wui-text variant="small-600" color="inherit"> ${tab.label} </wui-text>
+        </button>
+      `;
+        });
+    }
+    firstUpdated() {
+        if (this.shadowRoot && this.isDense) {
+            this.buttons = [...this.shadowRoot.querySelectorAll('button')];
+            setTimeout(() => {
+                this.animateTabs(0, true);
+            }, 0);
+        }
+    }
+    iconTemplate(tab) {
+        if (tab.icon) {
+            return html `<wui-icon size="xs" color="inherit" name=${tab.icon}></wui-icon>`;
+        }
+        return null;
+    }
+    onTabClick(index) {
+        if (this.buttons) {
+            this.animateTabs(index, false);
+        }
+        this.activeTab = index;
+        this.onTabChange(index);
+    }
+    animateTabs(index, initialAnimation) {
+        const passiveBtn = this.buttons[this.activeTab];
+        const activeBtn = this.buttons[index];
+        const passiveBtnText = passiveBtn?.querySelector('wui-text');
+        const activeBtnText = activeBtn?.querySelector('wui-text');
+        const activeBtnBounds = activeBtn?.getBoundingClientRect();
+        const activeBtnTextBounds = activeBtnText?.getBoundingClientRect();
+        if (passiveBtn && passiveBtnText && !initialAnimation && index !== this.activeTab) {
+            passiveBtnText.animate([{ opacity: 0 }], {
+                duration: 50,
+                easing: 'ease',
+                fill: 'forwards'
+            });
+            passiveBtn.animate([{ width: `34px` }], {
+                duration: 500,
+                easing: 'ease',
+                fill: 'forwards'
+            });
+        }
+        if (activeBtn && activeBtnBounds && activeBtnTextBounds && activeBtnText) {
+            if (index !== this.activeTab || initialAnimation) {
+                this.localTabWidth = `${Math.round(activeBtnBounds.width + activeBtnTextBounds.width) + 6}px`;
+                activeBtn.animate([{ width: `${activeBtnBounds.width + activeBtnTextBounds.width}px` }], {
+                    duration: initialAnimation ? 0 : 500,
+                    fill: 'forwards',
+                    easing: 'ease'
+                });
+                activeBtnText.animate([{ opacity: 1 }], {
+                    duration: initialAnimation ? 0 : 125,
+                    delay: initialAnimation ? 0 : 200,
+                    fill: 'forwards',
+                    easing: 'ease'
+                });
+            }
+        }
+    }
+};
+WuiTabs.styles = [resetStyles, elementStyles, styles];
+__decorate([
+    property({ type: Array })
+], WuiTabs.prototype, "tabs", void 0);
+__decorate([
+    property()
+], WuiTabs.prototype, "onTabChange", void 0);
+__decorate([
+    property({ type: Array })
+], WuiTabs.prototype, "buttons", void 0);
+__decorate([
+    property({ type: Boolean })
+], WuiTabs.prototype, "disabled", void 0);
+__decorate([
+    property()
+], WuiTabs.prototype, "localTabWidth", void 0);
+__decorate([
+    state()
+], WuiTabs.prototype, "activeTab", void 0);
+__decorate([
+    state()
+], WuiTabs.prototype, "isDense", void 0);
+WuiTabs = __decorate([
+    customElement('wui-tabs')
+], WuiTabs);
+export { WuiTabs };
+//# sourceMappingURL=index.js.map

package/dist/esm/src/composites/wui-tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/composites/wui-tabs/index.ts"],"names":[],"mappings":"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"}

package/dist/esm/src/composites/wui-tabs/styles.js

@@ -0,0 +1,114 @@
+import { css } from 'lit';
+export default css `
+  :host {
+    display: inline-flex;
+    background-color: var(--wui-color-gray-glass-002);
+    border-radius: var(--wui-border-radius-3xl);
+    padding: var(--wui-spacing-3xs);
+    position: relative;
+    height: 36px;
+    min-height: 36px;
+    overflow: hidden;
+  }
+
+  :host::before {
+    content: '';
+    position: absolute;
+    pointer-events: none;
+    top: 4px;
+    left: 4px;
+    display: block;
+    width: var(--local-tab-width);
+    height: 28px;
+    border-radius: var(--wui-border-radius-3xl);
+    background-color: var(--wui-color-gray-glass-002);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-002);
+    transform: translateX(calc(var(--local-tab) * var(--local-tab-width)));
+    transition: transform var(--wui-ease-out-power-1) var(--wui-duration-md);
+    will-change: background-color, opacity;
+  }
+
+  :host([data-type='flex'])::before {
+    left: 3px;
+    transform: translateX(calc((var(--local-tab) * 34px) + (var(--local-tab) * 4px)));
+  }
+
+  :host([data-type='flex']) {
+    display: flex;
+    padding: 0px 0px 0px 12px;
+    gap: 4px;
+  }
+
+  :host([data-type='flex']) > button > wui-text {
+    position: absolute;
+    left: 18px;
+    opacity: 0;
+  }
+
+  button[data-active='true'] > wui-icon,
+  button[data-active='true'] > wui-text {
+    color: var(--wui-color-fg-100);
+  }
+
+  button[data-active='false'] > wui-icon,
+  button[data-active='false'] > wui-text {
+    color: var(--wui-color-fg-200);
+  }
+
+  button[data-active='true']:disabled,
+  button[data-active='false']:disabled {
+    background-color: transparent;
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  button[data-active='true']:disabled > wui-text {
+    color: var(--wui-color-fg-200);
+  }
+
+  button[data-active='false']:disabled > wui-text {
+    color: var(--wui-color-fg-300);
+  }
+
+  button > wui-icon,
+  button > wui-text {
+    pointer-events: none;
+    transition: color var(--wui-e ase-out-power-1) var(--wui-duration-md);
+    will-change: color;
+  }
+
+  button {
+    width: var(--local-tab-width);
+    transition: background-color var(--wui-ease-out-power-1) var(--wui-duration-md);
+    will-change: background-color;
+  }
+
+  :host([data-type='flex']) > button {
+    width: 34px;
+    position: relative;
+    display: flex;
+    justify-content: flex-start;
+  }
+
+  button:hover:enabled,
+  button:active:enabled {
+    background-color: transparent !important;
+  }
+
+  button:hover:enabled > wui-icon,
+  button:active:enabled > wui-icon {
+    transition: all var(--wui-ease-out-power-1) var(--wui-duration-lg);
+    color: var(--wui-color-fg-125);
+  }
+
+  button:hover:enabled > wui-text,
+  button:active:enabled > wui-text {
+    transition: all var(--wui-ease-out-power-1) var(--wui-duration-lg);
+    color: var(--wui-color-fg-125);
+  }
+
+  button {
+    border-radius: var(--wui-border-radius-3xl);
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/src/composites/wui-tabs/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/composites/wui-tabs/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+GjB,CAAA"}

package/dist/esm/src/composites/wui-tag/index.js

@@ -0,0 +1,41 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import '../../components/wui-text/index.js';
+import { resetStyles } from '../../utils/ThemeUtil.js';
+import { customElement } from '../../utils/WebComponentsUtil.js';
+import styles from './styles.js';
+let WuiTag = class WuiTag extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.variant = 'main';
+        this.size = 'lg';
+    }
+    render() {
+        this.dataset['variant'] = this.variant;
+        this.dataset['size'] = this.size;
+        const textVariant = this.size === 'md' ? 'mini-700' : 'micro-700';
+        return html `
+      <wui-text data-variant=${this.variant} variant=${textVariant} color="inherit">
+        <slot></slot>
+      </wui-text>
+    `;
+    }
+};
+WuiTag.styles = [resetStyles, styles];
+__decorate([
+    property()
+], WuiTag.prototype, "variant", void 0);
+__decorate([
+    property()
+], WuiTag.prototype, "size", void 0);
+WuiTag = __decorate([
+    customElement('wui-tag')
+], WuiTag);
+export { WuiTag };
+//# sourceMappingURL=index.js.map

package/dist/esm/src/composites/wui-tag/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/composites/wui-tag/index.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,oCAAoC,CAAA;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAA;AAChE,OAAO,MAAM,MAAM,aAAa,CAAA;AAGzB,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QAIc,YAAO,GAAY,MAAM,CAAA;QAEzB,SAAI,GAAgB,IAAI,CAAA;IAc7C,CAAC;IAXiB,MAAM;QACpB,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,OAAO,CAAA;QACtC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,CAAA;QAChC,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAA;QAEjE,OAAO,IAAI,CAAA;+BACgB,IAAI,CAAC,OAAO,YAAY,WAAW;;;KAG7D,CAAA;IACH,CAAC;;AAlBsB,aAAM,GAAG,CAAC,WAAW,EAAE,MAAM,CAAC,AAAxB,CAAwB;AAGlC;IAAlB,QAAQ,EAAE;uCAAiC;AAEzB;IAAlB,QAAQ,EAAE;oCAAgC;AANhC,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAoBlB"}

package/dist/esm/src/composites/wui-tag/styles.js

@@ -0,0 +1,44 @@
+import { css } from 'lit';
+export default css `
+  :host {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: var(--wui-spacing-m);
+    padding: 0 var(--wui-spacing-3xs) !important;
+    border-radius: var(--wui-border-radius-5xs);
+  }
+
+  :host > wui-text {
+    transform: translateY(5%);
+  }
+
+  :host([data-variant='main']) {
+    background-color: var(--wui-color-accent-glass-015);
+    color: var(--wui-color-accent-100);
+  }
+
+  :host([data-variant='shade']) {
+    background-color: var(--wui-color-gray-glass-010);
+    color: var(--wui-color-fg-200);
+  }
+
+  :host([data-variant='success']) {
+    background-color: var(--wui-icon-box-bg-success-100);
+    color: var(--wui-color-success-100);
+  }
+
+  :host([data-variant='error']) {
+    background-color: var(--wui-icon-box-bg-error-100);
+    color: var(--wui-color-error-100);
+  }
+
+  :host([data-size='lg']) {
+    padding: 11px 5px !important;
+  }
+
+  :host([data-size='lg']) > wui-text {
+    transform: translateY(2%);
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/src/composites/wui-tag/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/composites/wui-tag/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCjB,CAAA"}

package/dist/esm/src/composites/wui-token-button/index.js

@@ -0,0 +1,53 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { customElement } from '../../utils/WebComponentsUtil.js';
+import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js';
+import '../../components/wui-text/index.js';
+import '../../components/wui-image/index.js';
+import '../wui-icon-box/index.js';
+import styles from './styles.js';
+let WuiTokenButton = class WuiTokenButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.text = '';
+    }
+    render() {
+        return html `
+      <button ontouchstart>
+        ${this.tokenTemplate()}
+        <wui-text variant="paragraph-600" color="fg-100">${this.text}</wui-text>
+      </button>
+    `;
+    }
+    tokenTemplate() {
+        if (this.imageSrc) {
+            return html `<wui-image src=${this.imageSrc}></wui-image>`;
+        }
+        return html `
+      <wui-icon-box
+        size="sm"
+        iconColor="fg-200"
+        backgroundColor="fg-300"
+        icon="networkPlaceholder"
+      ></wui-icon-box>
+    `;
+    }
+};
+WuiTokenButton.styles = [resetStyles, elementStyles, styles];
+__decorate([
+    property()
+], WuiTokenButton.prototype, "imageSrc", void 0);
+__decorate([
+    property()
+], WuiTokenButton.prototype, "text", void 0);
+WuiTokenButton = __decorate([
+    customElement('wui-token-button')
+], WuiTokenButton);
+export { WuiTokenButton };
+//# sourceMappingURL=index.js.map

package/dist/esm/src/composites/wui-token-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/composites/wui-token-button/index.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAA;AAChE,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACrE,OAAO,oCAAoC,CAAA;AAC3C,OAAO,qCAAqC,CAAA;AAC5C,OAAO,0BAA0B,CAAA;AACjC,OAAO,MAAM,MAAM,aAAa,CAAA;AAGzB,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QAMc,SAAI,GAAG,EAAE,CAAA;IA2B9B,CAAC;IAxBiB,MAAM;QACpB,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,aAAa,EAAE;2DAC6B,IAAI,CAAC,IAAI;;KAE/D,CAAA;IACH,CAAC;IAGO,aAAa;QACnB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAO,IAAI,CAAA,kBAAkB,IAAI,CAAC,QAAQ,eAAe,CAAA;QAC3D,CAAC;QAED,OAAO,IAAI,CAAA;;;;;;;KAOV,CAAA;IACH,CAAC;;AA/BsB,qBAAM,GAAG,CAAC,WAAW,EAAE,aAAa,EAAE,MAAM,CAAC,AAAvC,CAAuC;AAGjD;IAAlB,QAAQ,EAAE;gDAAyB;AAEjB;IAAlB,QAAQ,EAAE;4CAAiB;AANjB,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAiC1B"}

package/dist/esm/src/composites/wui-token-button/styles.js

@@ -0,0 +1,25 @@
+import { css } from 'lit';
+export default css `
+  :host {
+    display: block;
+  }
+
+  :host > button {
+    gap: var(--wui-spacing-xxs);
+    padding: var(--wui-spacing-xs);
+    padding-right: var(--wui-spacing-1xs);
+    height: 40px;
+    border-radius: var(--wui-border-radius-l);
+    background: var(--wui-color-gray-glass-002);
+    border-width: 0px;
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-002);
+  }
+
+  :host > button wui-image {
+    width: 24px;
+    height: 24px;
+    border-radius: var(--wui-border-radius-s);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/src/composites/wui-token-button/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/composites/wui-token-button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;CAsBjB,CAAA"}

package/dist/esm/src/composites/wui-token-list-item/index.js

@@ -0,0 +1,122 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import '../../components/wui-image/index.js';
+import '../../components/wui-text/index.js';
+import '../../layout/wui-flex/index.js';
+import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js';
+import { customElement } from '../../utils/WebComponentsUtil.js';
+import styles from './styles.js';
+import { UiHelperUtil } from '../../utils/UiHelperUtil.js';
+import { NumberUtil } from '@reown/appkit-common';
+let WuiTokenListItem = class WuiTokenListItem extends LitElement {
+    constructor() {
+        super();
+        this.observer = new IntersectionObserver(() => undefined);
+        this.imageSrc = undefined;
+        this.name = undefined;
+        this.symbol = undefined;
+        this.price = undefined;
+        this.amount = undefined;
+        this.visible = false;
+        this.imageError = false;
+        this.observer = new IntersectionObserver(entries => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    this.visible = true;
+                }
+                else {
+                    this.visible = false;
+                }
+            });
+        }, { threshold: 0.1 });
+    }
+    firstUpdated() {
+        this.observer.observe(this);
+    }
+    disconnectedCallback() {
+        this.observer.disconnect();
+    }
+    render() {
+        if (!this.visible) {
+            return null;
+        }
+        const value = this.amount && this.price ? NumberUtil.multiply(this.price, this.amount)?.toFixed(3) : null;
+        return html `
+      <wui-flex alignItems="center">
+        ${this.visualTemplate()}
+        <wui-flex flexDirection="column" gap="3xs">
+          <wui-flex justifyContent="space-between">
+            <wui-text variant="paragraph-500" color="fg-100" lineClamp="1">${this.name}</wui-text>
+            ${value
+            ? html `
+                  <wui-text variant="paragraph-500" color="fg-100">
+                    $${UiHelperUtil.formatNumberToLocalString(value, 3)}
+                  </wui-text>
+                `
+            : null}
+          </wui-flex>
+          <wui-flex justifyContent="space-between">
+            <wui-text variant="small-400" color="fg-200" lineClamp="1">${this.symbol}</wui-text>
+            ${this.amount
+            ? html `<wui-text variant="small-400" color="fg-200">
+                  ${UiHelperUtil.formatNumberToLocalString(this.amount, 4)}
+                </wui-text>`
+            : null}
+          </wui-flex>
+        </wui-flex>
+      </wui-flex>
+    `;
+    }
+    visualTemplate() {
+        if (this.imageError) {
+            return html `<wui-flex class="token-item-image-placeholder">
+        <wui-icon name="image" color="inherit"></wui-icon>
+      </wui-flex>`;
+        }
+        if (this.imageSrc) {
+            return html `<wui-image
+        width="40"
+        height="40"
+        src=${this.imageSrc}
+        @onLoadError=${this.imageLoadError}
+      ></wui-image>`;
+        }
+        return null;
+    }
+    imageLoadError() {
+        this.imageError = true;
+    }
+};
+WuiTokenListItem.styles = [resetStyles, elementStyles, styles];
+__decorate([
+    property()
+], WuiTokenListItem.prototype, "imageSrc", void 0);
+__decorate([
+    property()
+], WuiTokenListItem.prototype, "name", void 0);
+__decorate([
+    property()
+], WuiTokenListItem.prototype, "symbol", void 0);
+__decorate([
+    property()
+], WuiTokenListItem.prototype, "price", void 0);
+__decorate([
+    property()
+], WuiTokenListItem.prototype, "amount", void 0);
+__decorate([
+    state()
+], WuiTokenListItem.prototype, "visible", void 0);
+__decorate([
+    state()
+], WuiTokenListItem.prototype, "imageError", void 0);
+WuiTokenListItem = __decorate([
+    customElement('wui-token-list-item')
+], WuiTokenListItem);
+export { WuiTokenListItem };
+//# sourceMappingURL=index.js.map

package/dist/esm/src/composites/wui-token-list-item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/composites/wui-token-list-item/index.ts"],"names":[],"mappings":"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"}

package/dist/esm/src/composites/wui-token-list-item/styles.js

@@ -0,0 +1,79 @@
+import { css } from 'lit';
+export default css `
+  :host {
+    height: 60px;
+    min-height: 60px;
+  }
+
+  :host > wui-flex {
+    cursor: pointer;
+    height: 100%;
+    display: flex;
+    column-gap: var(--wui-spacing-s);
+    padding: var(--wui-spacing-xs);
+    padding-right: var(--wui-spacing-l);
+    width: 100%;
+    background-color: transparent;
+    border-radius: var(--wui-border-radius-xs);
+    color: var(--wui-color-fg-250);
+    transition:
+      background-color var(--wui-ease-out-power-1) var(--wui-duration-lg),
+      opacity var(--wui-ease-out-power-1) var(--wui-duration-lg);
+    will-change: background-color, opacity;
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    :host > wui-flex:hover {
+      background-color: var(--wui-color-gray-glass-002);
+    }
+
+    :host > wui-flex:active {
+      background-color: var(--wui-color-gray-glass-005);
+    }
+  }
+
+  :host([disabled]) > wui-flex {
+    opacity: 0.6;
+  }
+
+  :host([disabled]) > wui-flex:hover {
+    background-color: transparent;
+  }
+
+  :host > wui-flex > wui-flex {
+    flex: 1;
+  }
+
+  :host > wui-flex > wui-image,
+  :host > wui-flex > .token-item-image-placeholder {
+    width: 40px;
+    max-width: 40px;
+    height: 40px;
+    border-radius: var(--wui-border-radius-3xl);
+    position: relative;
+  }
+
+  :host > wui-flex > .token-item-image-placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  :host > wui-flex > wui-image::after,
+  :host > wui-flex > .token-item-image-placeholder::after {
+    position: absolute;
+    content: '';
+    inset: 0;
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
+    border-radius: var(--wui-border-radius-l);
+  }
+
+  button > wui-icon-box[data-variant='square-blue'] {
+    border-radius: var(--wui-border-radius-3xs);
+    position: relative;
+    border: none;
+    width: 36px;
+    height: 36px;
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/src/composites/wui-token-list-item/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/composites/wui-token-list-item/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4EjB,CAAA"}