@lukso/transaction-view-core 0.4.1 → 0.5.0-dev.5ea12c5

package/dist/index.js

@@ -16,7 +16,7 @@ import {
   useImageLoader
 } from "@lukso/transaction-view-headless";
 import { css, html, LitElement } from "lit";
-import { property, state } from "lit/decorators.js";
+import { property } from "lit/decorators.js";
 
 // src/shared/safe-custom-element.ts
 function safeCustomElement(tagName) {
@@ -36,13 +36,13 @@ var AddressDisplay = class extends LitElement {
     this.showCopyButton = false;
     this.nameOnly = false;
     this.maxWidth = 200;
-    this.isLoadingImage = false;
     // Composables
     this.imageLoader = useImageLoader();
     this.addressResolver = useAddressResolver();
+    this.isLoadingImage = false;
     // Task for loading profile image
     this.imageTask = new Task(this, {
-      task: async ([resolved], { signal }) => {
+      task: async ([resolved]) => {
         if (!resolved) return null;
         this.isLoadingImage = true;
         try {
@@ -297,12 +297,6 @@ __decorateClass([
 __decorateClass([
   property({ type: Number, attribute: "max-width" })
 ], AddressDisplay.prototype, "maxWidth", 2);
-__decorateClass([
-  state()
-], AddressDisplay.prototype, "imageData", 2);
-__decorateClass([
-  state()
-], AddressDisplay.prototype, "isLoadingImage", 2);
 AddressDisplay = __decorateClass([
   safeCustomElement("address-display")
 ], AddressDisplay);
@@ -312,12 +306,12 @@ import { Task as Task2 } from "@lit/task";
 import { useAddressResolver as useAddressResolver2 } from "@lukso/transaction-view-headless";
 import makeBlockie from "ethereum-blockies-base64";
 import { html as html2 } from "lit";
-import { property as property2, state as state2 } from "lit/decorators.js";
+import { property as property2, state } from "lit/decorators.js";
 
 // src/shared/load-web-components.ts
 var originalDefine = typeof customElements !== "undefined" ? customElements.define.bind(customElements) : null;
 if (typeof customElements !== "undefined" && originalDefine) {
-  customElements.define = function(name, constructor, options) {
+  customElements.define = (name, constructor, options) => {
     if (!customElements.get(name)) {
       originalDefine(name, constructor, options);
     }
@@ -369,14 +363,14 @@ var AddressView = class extends CoreLitElement {
     this.addressResolver = useAddressResolver2();
     // Task for resolving address data
     this.addressTask = new Task2(this, {
-      task: async ([address], { signal }) => {
+      task: async ([address]) => {
         if (!address) return null;
         this.isLoadingAddress = true;
         try {
           const resolved = await this.addressResolver.resolveAddress(address);
           this.requestUpdate();
           return resolved;
-        } catch (error) {
+        } catch (_error) {
           return null;
         } finally {
           this.isLoadingAddress = false;
@@ -403,20 +397,6 @@ var AddressView = class extends CoreLitElement {
     const computedName = this.addressResolver.formatDisplayName(resolved);
     return this.label || computedName || "Anonymous";
   }
-  /**
-   * Check if this is a contract address (non-profile)
-   */
-  get isContract() {
-    const resolved = this.addressTask.value;
-    return resolved ? resolved.__gqltype !== "Profile" : false;
-  }
-  /**
-   * Check if this should show the address hash (profiles show hash, contracts don't)
-   */
-  get shouldShowAddressHash() {
-    const resolved = this.addressTask.value;
-    return resolved ? resolved.__gqltype === "Profile" : true;
-  }
   /**
    * Get prefix for the address display
    */
@@ -657,10 +637,10 @@ __decorateClass([
   property2({ type: String, attribute: "name-color" })
 ], AddressView.prototype, "nameColor", 2);
 __decorateClass([
-  state2()
+  state()
 ], AddressView.prototype, "isLoadingAddress", 2);
 __decorateClass([
-  state2()
+  state()
 ], AddressView.prototype, "identicon", 2);
 AddressView = __decorateClass([
   safeCustomElement("address-view")
@@ -995,7 +975,7 @@ var GasProviderView = class extends CoreLitElement {
   }
   displayRelayerResetDate() {
     const date = new Date(this.relayerResetDate);
-    return isNaN(date.getTime()) ? "N/A" : date.toLocaleDateString();
+    return Number.isNaN(date.getTime()) ? "N/A" : date.toLocaleDateString();
   }
   render() {
     const formatted = this.formatToken(this.balance);
@@ -1014,9 +994,9 @@ var GasProviderView = class extends CoreLitElement {
     const options = [...relayerOptions, ...controllerOption];
     const selectedValue = this.selectedGasProvider ? this.selectedGasProvider.type === "controller" ? this.controllerAddress : (() => {
       const r = this.allRelayers.find(
-        (x) => x.id === this.selectedGasProvider.id
+        (x) => x.id === this.selectedGasProvider?.id
       );
-      return r?.website || r?.apiUrl || `relayer:${this.selectedGasProvider.id}`;
+      return r?.website || r?.apiUrl || `relayer:${this.selectedGasProvider?.id}`;
     })() : void 0;
     return html5`
       <div class="w-full">
@@ -1079,7 +1059,7 @@ import {
   useImageLoader as useImageLoader2
 } from "@lukso/transaction-view-headless";
 import { html as html6 } from "lit";
-import { property as property6, state as state5 } from "lit/decorators.js";
+import { property as property6 } from "lit/decorators.js";
 var IconView = class extends CoreLitElement {
   constructor() {
     super(...arguments);
@@ -1090,14 +1070,14 @@ var IconView = class extends CoreLitElement {
     this.showIconIdenticon = true;
     this.showLabelIdenticon = false;
     this.forceUnresolved = false;
-    this.isLoadingImage = false;
-    this.isLoadingAddress = false;
     // Composables
     this.imageLoader = useImageLoader2();
     this.addressResolver = useAddressResolver3();
+    this.isLoadingAddress = false;
+    this.isLoadingImage = false;
     // Task for resolving address data
     this.addressTask = new Task3(this, {
-      task: async ([address], { signal }) => {
+      task: async ([address]) => {
         if (!address) return null;
         this.isLoadingAddress = true;
         try {
@@ -1115,11 +1095,11 @@ var IconView = class extends CoreLitElement {
     });
     // Task for loading profile image
     this.imageTask = new Task3(this, {
-      task: async ([resolved], { signal }) => {
+      task: async ([resolved]) => {
         if (!resolved) return null;
         this.isLoadingImage = true;
         try {
-          let image;
+          let image = null;
           if (this.imageHint && resolved[this.imageHint]) {
             const imageArray = resolved[this.imageHint];
             if (Array.isArray(imageArray) && imageArray.length > 0) {
@@ -1257,15 +1237,6 @@ __decorateClass([
 __decorateClass([
   property6({ type: Number, attribute: "image-index" })
 ], IconView.prototype, "imageIndex", 2);
-__decorateClass([
-  state5()
-], IconView.prototype, "imageData", 2);
-__decorateClass([
-  state5()
-], IconView.prototype, "isLoadingImage", 2);
-__decorateClass([
-  state5()
-], IconView.prototype, "isLoadingAddress", 2);
 IconView = __decorateClass([
   safeCustomElement("icon-view")
 ], IconView);
@@ -1374,7 +1345,7 @@ function useImageLoader3(host) {
 
 // src/shared/notification-view.ts
 import { html as html7 } from "lit";
-import { property as property7, state as state6 } from "lit/decorators.js";
+import { property as property7, state as state2 } from "lit/decorators.js";
 var NotificationView = class extends CoreLitElement {
   constructor() {
     super(...arguments);
@@ -1484,7 +1455,7 @@ __decorateClass([
   property7({ attribute: "acknowledge-text" })
 ], NotificationView.prototype, "acknowledgeText", 2);
 __decorateClass([
-  state6()
+  state2()
 ], NotificationView.prototype, "acknowledged", 2);
 __decorateClass([
   property7({ type: Boolean, reflect: true })
@@ -1513,14 +1484,6 @@ var ProgressView = class extends CoreLitElement {
         `}
     `;
   }
-  renderAddressLabel() {
-    return html8`
-      <value-view
-        .value=${this.address}
-        .unit=${this.unit}
-      ></value-view>
-    `;
-  }
   render() {
     const isError = (this.className || "").split(/\s+/).includes("error");
     return html8`
@@ -1666,7 +1629,9 @@ var MultiSignalController = class {
     });
   }
   hostDisconnected() {
-    this.unsubscribes.forEach((unsubscribe) => unsubscribe());
+    this.unsubscribes.forEach((unsubscribe) => {
+      unsubscribe();
+    });
     this.unsubscribes = [];
   }
   getValue(index) {
@@ -1913,7 +1878,7 @@ function useTransactionSignal(host, signal) {
 
 // src/shared/url-view.ts
 import { html as html10 } from "lit";
-import { property as property10, state as state7 } from "lit/decorators.js";
+import { property as property10, state as state3 } from "lit/decorators.js";
 var UrlView = class extends CoreLitElement {
   constructor() {
     super(...arguments);
@@ -1943,14 +1908,14 @@ var UrlView = class extends CoreLitElement {
       this.favicon = this.faviconCandidates[this.faviconIndex];
       const hostname = u.hostname.replace(/^www\./, "");
       const hostnamePretty = hostname.split(".").filter(Boolean).slice(-2).join(" ").replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
-      if (this.label && this.label.trim()) {
+      if (this.label?.trim()) {
         this.displayName = this.label.trim();
       } else {
         this.displayName = hostnamePretty || this.url;
       }
     } catch {
       this.favicon = void 0;
-      this.displayName = this.label && this.label.trim() ? this.label : this.url;
+      this.displayName = this.label?.trim() ? this.label : this.url;
     }
   }
   handleImageError() {
@@ -2015,10 +1980,10 @@ __decorateClass([
   property10({ type: Number, attribute: "max-width" })
 ], UrlView.prototype, "maxWidth", 2);
 __decorateClass([
-  state7()
+  state3()
 ], UrlView.prototype, "favicon", 2);
 __decorateClass([
-  state7()
+  state3()
 ], UrlView.prototype, "displayName", 2);
 UrlView = __decorateClass([
   safeCustomElement("url-view")
@@ -2028,7 +1993,7 @@ UrlView = __decorateClass([
 import { Task as Task4 } from "@lit/task";
 import { useAddressResolver as useAddressResolver4 } from "@lukso/transaction-view-headless";
 import { html as html11 } from "lit";
-import { property as property11, state as state8 } from "lit/decorators.js";
+import { property as property11, state as state4 } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
 function formatUnits(value, decimals = 18) {
   const divisor = 10n ** BigInt(decimals);
@@ -2137,14 +2102,15 @@ var ValueView = class extends CoreLitElement {
     if (value === null) return "null";
     if (value === void 0) return "undefined";
     switch (effectiveType) {
-      case "currency":
+      case "currency": {
         const { numeric, symbol } = this.getCurrencyParts();
         return `${numeric} ${symbol}`;
+      }
       case "bigint":
         if (typeof value === "bigint") {
-          return value.toString() + "n";
+          return `${value.toString()}n`;
         }
-        return String(value) + "n";
+        return `${String(value)}n`;
       case "boolean":
         return value ? "true" : "false";
       case "number":
@@ -2172,7 +2138,7 @@ var ValueView = class extends CoreLitElement {
     try {
       if (typeof value === "bigint") {
         numeric = formatUnits(value, effectiveDecimals);
-      } else if (typeof value === "string" && !isNaN(Number(value))) {
+      } else if (typeof value === "string" && !Number.isNaN(Number(value))) {
         const bigintValue = BigInt(value);
         numeric = formatUnits(bigintValue, effectiveDecimals);
       }
@@ -2402,10 +2368,7 @@ __decorateClass([
   property11()
 ], ValueView.prototype, "address", 2);
 __decorateClass([
-  state8()
-], ValueView.prototype, "resolvedMetadata", 2);
-__decorateClass([
-  state8()
+  state4()
 ], ValueView.prototype, "_hasSlotContent", 2);
 ValueView = __decorateClass([
   safeCustomElement("value-view")
@@ -2415,7 +2378,7 @@ ValueView = __decorateClass([
 import { Task as Task5 } from "@lit/task";
 import { useAddressResolver as useAddressResolver5 } from "@lukso/transaction-view-headless";
 import { html as html12 } from "lit";
-import { property as property12, state as state9 } from "lit/decorators.js";
+import { property as property12, state as state5 } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
 var ImageList = class extends CoreLitElement {
   constructor() {
@@ -2427,7 +2390,7 @@ var ImageList = class extends CoreLitElement {
     this.addressResolver = useAddressResolver5();
     // Task for resolving address data
     this.addressTask = new Task5(this, {
-      task: async ([address], { signal }) => {
+      task: async ([address]) => {
         if (!address) return null;
         this.isLoading = true;
         try {
@@ -2484,7 +2447,7 @@ var ImageList = class extends CoreLitElement {
    * Render a single image item
    */
   renderImageItem(item, index) {
-    const itemIndex = item.index !== void 0 ? item.index : index;
+    const _itemIndex = item.index !== void 0 ? item.index : index;
     const isImage = this.isImageFile(item);
     if (isImage) {
       const imageSrc = item.src || item.url;
@@ -2590,19 +2553,15 @@ __decorateClass([
   property12({ type: Boolean, attribute: "is-card-view" })
 ], ImageList.prototype, "isCardView", 2);
 __decorateClass([
-  state9()
+  state5()
 ], ImageList.prototype, "isLoading", 2);
 ImageList = __decorateClass([
   safeCustomElement("image-list")
 ], ImageList);
 
 // src/components/info-panel.ts
-import { Task as Task6 } from "@lit/task";
-import {
-  useAddressResolver as useAddressResolver6
-} from "@lukso/transaction-view-headless";
-import { css as css4, html as html13, LitElement as LitElement3 } from "lit";
-import { property as property13, state as state10 } from "lit/decorators.js";
+import { css as css3, html as html13, LitElement as LitElement3 } from "lit";
+import { property as property13, state as state6 } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { repeat as repeat2 } from "lit/directives/repeat.js";
 import { when as when2 } from "lit/directives/when.js";
@@ -2613,17 +2572,6 @@ var InfoPanel = class extends LitElement3 {
     this.open = false;
     this.standard = "";
     this.type = "transfer";
-    this._isAnimating = false;
-    this._resolutionTask = new Task6(this, {
-      task: async ([address]) => {
-        if (!address) return null;
-        const { resolveAddress } = useAddressResolver6();
-        const data = await resolveAddress(address);
-        this._resolvedData = data;
-        return data;
-      },
-      args: () => [this.address]
-    });
   }
   _extractBaseAddress(addressOrComposite) {
     return addressOrComposite.split("-")[0];
@@ -2800,7 +2748,7 @@ var InfoPanel = class extends LitElement3 {
     `;
   }
 };
-InfoPanel.styles = css4`
+InfoPanel.styles = css3`
     :host {
       display: block;
       position: relative;
@@ -2985,10 +2933,7 @@ __decorateClass([
   property13({ type: String })
 ], InfoPanel.prototype, "type", 2);
 __decorateClass([
-  state10()
-], InfoPanel.prototype, "_isAnimating", 2);
-__decorateClass([
-  state10()
+  state6()
 ], InfoPanel.prototype, "_resolvedData", 2);
 InfoPanel = __decorateClass([
   safeCustomElement("info-panel")
@@ -2996,13 +2941,13 @@ InfoPanel = __decorateClass([
 
 // src/components/asset-card.ts
 import { html as html14 } from "lit";
-import { property as property14, state as state11 } from "lit/decorators.js";
+import { property as property14, state as state7 } from "lit/decorators.js";
 import { repeat as repeat3 } from "lit/directives/repeat.js";
 import { when as when3 } from "lit/directives/when.js";
 import "@lukso/web-components";
-import { Task as Task7 } from "@lit/task";
+import { Task as Task6 } from "@lit/task";
 import {
-  useAddressResolver as useAddressResolver7
+  useAddressResolver as useAddressResolver6
 } from "@lukso/transaction-view-headless";
 function formatUnits2(value, decimals = 18) {
   const divisor = 10n ** BigInt(decimals);
@@ -3023,10 +2968,9 @@ var AssetCard = class extends CoreLitElement {
     this.showInfoButton = true;
     this.showCreator = true;
     this.displayDetails = false;
-    this._imageError = false;
     // Composables
-    this.addressResolver = useAddressResolver7();
-    this._resolutionTask = new Task7(this, {
+    this.addressResolver = useAddressResolver6();
+    this._resolutionTask = new Task6(this, {
       task: async ([address]) => {
         if (!address) return null;
         const { resolveAddress } = this.addressResolver;
@@ -3037,25 +2981,12 @@ var AssetCard = class extends CoreLitElement {
       args: () => [this.address]
     });
   }
-  _handleImageError() {
-    this._imageError = true;
-  }
   _handleInfoClick() {
     this.displayDetails = !this.displayDetails;
   }
   _extractBaseAddress(addressOrComposite) {
     return addressOrComposite.split("-")[0];
   }
-  _extractTokenId(addressOrComposite) {
-    const parts = addressOrComposite.split("-");
-    return parts.length > 1 ? parts[1] : void 0;
-  }
-  _copyToClipboard(text) {
-    if (navigator.clipboard) {
-      navigator.clipboard.writeText(text);
-      this.dispatchEvent(new CustomEvent("copied", { detail: { text } }));
-    }
-  }
   _renderAddressSection() {
     const data = this._resolutionTask.value;
     if (!data) return "";
@@ -3305,7 +3236,7 @@ var AssetCard = class extends CoreLitElement {
             ${when3(
       this.amount,
       () => html14`
-                <span class="">${formatUnits2(BigInt(this.amount), this._resolvedData?.decimals)}</span>
+                <span class="">${formatUnits2(BigInt(this.amount || 0), this._resolvedData?.decimals)}</span>
                 <span class="ml-1 text-neutral-60 max-w-[60px] whitespace-nowrap overflow-hidden text-ellipsis text-[14px] font-semibold">${this._resolvedData?.lsp4TokenSymbol || ""}</span>
               `,
       () => html14`${this._resolvedData?.lsp4TokenSymbol || ""}`
@@ -3356,20 +3287,17 @@ __decorateClass([
   property14({ type: Boolean, attribute: "show-creator" })
 ], AssetCard.prototype, "showCreator", 2);
 __decorateClass([
-  state11()
+  state7()
 ], AssetCard.prototype, "displayDetails", 2);
 __decorateClass([
-  state11()
+  state7()
 ], AssetCard.prototype, "_resolvedData", 2);
-__decorateClass([
-  state11()
-], AssetCard.prototype, "_imageError", 2);
 AssetCard = __decorateClass([
   safeCustomElement("asset-card")
 ], AssetCard);
 
 // src/components/description-view.ts
-import { css as css5, html as html15, LitElement as LitElement4 } from "lit";
+import { css as css4, html as html15, LitElement as LitElement4 } from "lit";
 import { property as property15 } from "lit/decorators.js";
 import { repeat as repeat4 } from "lit/directives/repeat.js";
 import { when as when4 } from "lit/directives/when.js";
@@ -3576,7 +3504,7 @@ var DescriptionView = class extends LitElement4 {
     `;
   }
 };
-DescriptionView.styles = css5`
+DescriptionView.styles = css4`
     :host {
       display: block;
       font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
@@ -3868,8 +3796,8 @@ DescriptionView = __decorateClass([
 ], DescriptionView);
 
 // src/components/universal-token-view.ts
-import { css as css6, html as html16, LitElement as LitElement5 } from "lit";
-import { property as property16, state as state12 } from "lit/decorators.js";
+import { css as css5, html as html16, LitElement as LitElement5 } from "lit";
+import { property as property16, state as state8 } from "lit/decorators.js";
 import { when as when5 } from "lit/directives/when.js";
 var UniversalTokenView = class extends LitElement5 {
   constructor() {
@@ -3965,7 +3893,7 @@ var UniversalTokenView = class extends LitElement5 {
     `;
   }
 };
-UniversalTokenView.styles = css6`
+UniversalTokenView.styles = css5`
     :host {
       display: block;
       font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
@@ -4077,20 +4005,15 @@ __decorateClass([
   property16({ type: Object })
 ], UniversalTokenView.prototype, "data", 2);
 __decorateClass([
-  state12()
+  state8()
 ], UniversalTokenView.prototype, "_infoPanelOpen", 2);
 UniversalTokenView = __decorateClass([
   safeCustomElement("universal-token-view")
 ], UniversalTokenView);
 
 // src/components/contract-card.ts
-import { Task as Task8 } from "@lit/task";
-import {
-  useAddressResolver as useAddressResolver8,
-  useImageLoader as useImageLoader4
-} from "@lukso/transaction-view-headless";
-import { css as css7, html as html17, LitElement as LitElement6 } from "lit";
-import { property as property17, state as state13 } from "lit/decorators.js";
+import { css as css6, html as html17, LitElement as LitElement6 } from "lit";
+import { property as property17, state as state9 } from "lit/decorators.js";
 var ContractCard = class extends LitElement6 {
   constructor() {
     super(...arguments);
@@ -4101,54 +4024,6 @@ var ContractCard = class extends LitElement6 {
     this.hasOverlay = false;
     this.customClass = "";
     this.headerClass = "";
-    this._resolutionTask = new Task8(this, {
-      task: async ([address, resolved]) => {
-        if (resolved) {
-          this._resolvedData = resolved;
-          return resolved;
-        }
-        const { resolveAddress } = useAddressResolver8();
-        const baseAddress = this._extractBaseAddress(address);
-        const data = await resolveAddress(baseAddress);
-        this._resolvedData = data;
-        return data;
-      },
-      args: () => [this.address, this.resolved]
-    });
-    this._profileImageTask = new Task8(this, {
-      task: async ([resolved]) => {
-        const { loadProfileImage } = useImageLoader4();
-        const data = resolved || this._resolvedData;
-        if (!data) return null;
-        const image = await loadProfileImage(data, {
-          width: 256,
-          height: 256,
-          dpr: window.devicePixelRatio || 1
-        });
-        if (image?.src) {
-          this._profileImageUrl = image.src;
-        }
-        return image;
-      },
-      args: () => [this._resolvedData]
-    });
-    this._backgroundImageTask = new Task8(this, {
-      task: async ([resolved]) => {
-        const { loadBackgroundImage } = useImageLoader4();
-        const data = resolved || this._resolvedData;
-        if (!data) return null;
-        const image = await loadBackgroundImage(data, {
-          width: 800,
-          height: 200,
-          dpr: window.devicePixelRatio || 1
-        });
-        if (image?.src) {
-          this._backgroundImageUrl = image.src;
-        }
-        return image;
-      },
-      args: () => [this._resolvedData]
-    });
   }
   _extractBaseAddress(addressOrComposite) {
     return addressOrComposite.split("-")[0];
@@ -4193,7 +4068,7 @@ var ContractCard = class extends LitElement6 {
     `;
   }
 };
-ContractCard.styles = css7`
+ContractCard.styles = css6`
     :host {
       display: block;
     }
@@ -4232,20 +4107,20 @@ __decorateClass([
   property17({ attribute: "header-class" })
 ], ContractCard.prototype, "headerClass", 2);
 __decorateClass([
-  state13()
+  state9()
 ], ContractCard.prototype, "_resolvedData", 2);
 __decorateClass([
-  state13()
+  state9()
 ], ContractCard.prototype, "_profileImageUrl", 2);
 __decorateClass([
-  state13()
+  state9()
 ], ContractCard.prototype, "_backgroundImageUrl", 2);
 ContractCard = __decorateClass([
   safeCustomElement("contract-card")
 ], ContractCard);
 
 // src/components/permissions-block.ts
-import { html as html18, nothing as nothing2 } from "lit";
+import { html as html18, nothing } from "lit";
 import { property as property18 } from "lit/decorators.js";
 var PermissionsBlock = class extends CoreLitElement {
   constructor() {
@@ -4268,13 +4143,13 @@ var PermissionsBlock = class extends CoreLitElement {
 								name=${this.icon}
 								size="x-small"
 								color=${this.color}
-							></lukso-icon>` : nothing2}
+							></lukso-icon>` : nothing}
 					<div class="ml-2 heading-inter-14-bold">${this.title}</div>
 				</div>
 
 				${this.description ? html18`<div class="text-[var(--neutral-40)] paragraph-inter-12-regular">
 							${this.description}
-						</div>` : nothing2}
+						</div>` : nothing}
 
 				<div class="h-px w-full bg-[var(--neutral-90)] mt-4"></div>