@lukso/web-components 1.172.13 → 1.172.17

package/dist/chunks/{index-Dn2DJhID.js → index-DsmwLJjR.js}

@@ -1,18 +1,21 @@
-import { m as makeBlockie } from './index-BDyLu6M0.js';
-import { b as TailwindStyledElement, x, E } from './index-5X9ujrWL.js';
-import { n } from './property-DfumgIL6.js';
-import { r } from './state-CaelFSbE.js';
-import { c as ce } from './index-B9iart53.js';
-import { s as safeCustomElement } from './safe-custom-element-qdGIR_v6.js';
+import makeBlockie from 'ethereum-blockies-base64';
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { tv } from 'tailwind-variants';
+import { a as TailwindStyledElement, s as safeCustomElement } from './index-DluTRl1F.js';
 import '../components/lukso-dropdown/index.js';
 import '../components/lukso-dropdown-option/index.js';
 import '../components/lukso-icon/index.js';
 import '../components/lukso-input/index.js';
+import '../components/lukso-profile/index.js';
 import '../components/lukso-tag/index.js';
-import { s as sliceAddress } from './index-BBFSnMaE.js';
+import { s as sliceAddress } from './index-Chs3AjPK.js';
 import '../components/lukso-tooltip/index.js';
 import '../tailwind-config.js';
-import './axe-DJKac19y.js';
+import './index-CSnDkMHN.js';
+import './cn-Df_5FiGi.js';
+import 'viem';
+import 'axe-core';
 import { u as uniqId } from './uniq-id-CGUN-pJV.js';
 
 const style = ":host {\n\n    display: inline-flex\n}\n\n:host([is-full-width]) {\n\n    display: flex;\n\n    width: 100%\n}";
@@ -87,7 +90,7 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
     this.withGroupLabels = false;
     this.isDebouncing = false;
     this.resultsParsed = [];
-    this.styles = ce({
+    this.styles = tv({
       slots: {
         loading: "bg-neutral-95 w-full animate-pulse animation-delay-none"
       },
@@ -195,7 +198,7 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
               break;
           }
           resultTemplates.push(
-            x`<div
+            html`<div
               class="${index === 0 ? "mb-1 pb-1" : "my-1 py-1"} text-neutral-35 paragraph-inter-12-medium tracking-wider border-b border-b-neutral-95 text-left"
             >
               ${headerText}
@@ -232,22 +235,22 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
           break;
       }
     }
-    return x`<lukso-dropdown
+    return html`<lukso-dropdown
       size=${this.dropdownSize[this.size]}
       is-open=${this.resultsParsed.length > 0}
       is-open-on-outside-click
       is-full-width
-      max-height=${this.maxHeight || E}
+      max-height=${this.maxHeight || nothing}
       >${resultTemplates}</lukso-dropdown
     >`;
   }
   noResultsTemplate() {
-    return x`<lukso-dropdown
+    return html`<lukso-dropdown
       size=${this.dropdownSize[this.size]}
       is-open
       is-open-on-outside-click
       is-full-width
-      >${x`<div class="paragraph-inter-14-semi-bold text-neutral-20 pl-1">
+      >${html`<div class="paragraph-inter-14-semi-bold text-neutral-20 pl-1">
         ${this.noResultsText}
       </div>`}</lukso-dropdown
     >`;
@@ -257,12 +260,12 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
       size: this.size
     });
     if (this.showNoResults) {
-      return x`<lukso-dropdown
+      return html`<lukso-dropdown
         size=${this.dropdownSize[this.size]}
         is-open
         is-open-on-outside-click
         is-full-width
-        >${x`
+        >${html`
           <div role="status" class="flex flex-col gap-1">
             <div class=${loading()}></div>
           </div>
@@ -270,33 +273,33 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
       >`;
     }
     if (this.resultsParsed.length === 0 || this.resultsParsed.length > 5) {
-      return x`<lukso-dropdown
+      return html`<lukso-dropdown
         size=${this.dropdownSize[this.size]}
         is-open
         is-open-on-outside-click
         is-full-width
-        >${x`
+        >${html`
           <div role="status" class="flex flex-col gap-1">
-            ${[...Array(5)].map(() => x`<div class=${loading()}></div>`)}
+            ${[...Array(5)].map(() => html`<div class=${loading()}></div>`)}
           </div>
         `}</lukso-dropdown
       >`;
     }
-    return x`<lukso-dropdown
+    return html`<lukso-dropdown
       size=${this.dropdownSize[this.size]}
       is-open
       is-open-on-outside-click
       is-full-width
-      >${x`
+      >${html`
         <div role="status" class="flex flex-col gap-1">
-          ${this.resultsParsed.map(() => x`<div class=${loading()}></div>`)}
+          ${this.resultsParsed.map(() => html`<div class=${loading()}></div>`)}
         </div>
       `}</lukso-dropdown
     >`;
   }
   resultStringTemplate(result, index) {
     const dropdownSize = this.size === "large" || this.size === "x-large" ? "medium" : this.size;
-    return x`<lukso-dropdown-option
+    return html`<lukso-dropdown-option
       data-id="${result.id}"
       data-index="${index + 1}"
       ?is-selected=${this.selected === index + 1}
@@ -307,13 +310,13 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
     </lukso-dropdown-option>`;
   }
   resultUniversalNameTemplate(result, index) {
-    const tag = x`<lukso-tag
+    const tag = html`<lukso-tag
       is-rounded
       background-color="${result.status ? "green-95" : "neutral-95"}"
       text-color="${result.status ? "green-45" : "neutral-60"}"
       >${!!result.status ? this.availableText : this.unavailableText}</lukso-tag
     >`;
-    return x`<lukso-dropdown-option
+    return html`<lukso-dropdown-option
       data-id="${result.id}"
       data-index="${index + 1}"
       ?is-selected=${this.selected === index + 1}
@@ -327,12 +330,12 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
     </lukso-dropdown-option>`;
   }
   resultProfileTemplate(result, index) {
-    const eoaProfilePicture = x`<lukso-profile
+    const eoaProfilePicture = html`<lukso-profile
       profile-address="${result.address}"
       profile-url="${result.address ? makeBlockie(result.address) : ""}"
       size=${this.profileSize[this.size]}
     ></lukso-profile>`;
-    const lsp3ProfilePicture = x`<lukso-profile
+    const lsp3ProfilePicture = html`<lukso-profile
       profile-address="${result.address}"
       profile-url="${result.image}"
       size=${this.profileSize[this.size]}
@@ -340,7 +343,7 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
     ></lukso-profile>`;
     const standard = result.standard || STANDARDS.LSP3;
     const profilePicture = standard !== STANDARDS.LSP3 ? eoaProfilePicture : lsp3ProfilePicture;
-    const upProfileUsername = x`<lukso-username
+    const upProfileUsername = html`<lukso-username
       name="${result.name?.toLowerCase() || "anonymous-profile"}"
       address="${result.address}"
       name-color="neutral-20"
@@ -349,7 +352,7 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
       ?hide-prefix="${!result.name}"
       class="ml-1"
     ></lukso-username>`;
-    const eoaUsername = x`<lukso-username
+    const eoaUsername = html`<lukso-username
       name="${sliceAddress(result.address, 8)}"
       address="__EOA"
       name-color="neutral-20"
@@ -358,7 +361,7 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
       hide-prefix
       class="ml-1"
     ></lukso-username>`;
-    const scUsername = x`<lukso-username
+    const scUsername = html`<lukso-username
       name="${sliceAddress(result.address, 8)}"
       address=""
       name-color="neutral-20"
@@ -373,7 +376,7 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
     } else if (standard === STANDARDS.LSP3) {
       profileName = upProfileUsername;
     }
-    return x`<lukso-dropdown-option
+    return html`<lukso-dropdown-option
       data-id="${result.address}"
       data-index="${index + 1}"
       ?is-selected=${this.selected === index + 1}
@@ -384,7 +387,7 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
     </lukso-dropdown-option>`;
   }
   resultAssetTemplate(result, index) {
-    return x`<lukso-dropdown-option
+    return html`<lukso-dropdown-option
       data-id="${result.address}"
       data-index="${index + 1}"
       ?is-selected=${this.selected === index + 1}
@@ -407,7 +410,7 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
     </lukso-dropdown-option>`;
   }
   resultAppTemplate(result, index) {
-    return x`<lukso-dropdown-option
+    return html`<lukso-dropdown-option
       data-id="${result.address}"
       data-index="${index + 1}"
       ?is-selected=${this.selected === index + 1}
@@ -429,7 +432,7 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
     for (const recentSearch of result.value) {
       switch (recentSearch.type) {
         case SEARCH_RESULT_TYPES.PROFILE: {
-          const eoaProfilePicture = x`<lukso-tooltip
+          const eoaProfilePicture = html`<lukso-tooltip
             show-delay="2000"
             class="flex"
           >
@@ -452,7 +455,7 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
               @click=${() => this.handleSelect(recentSearch)}
             ></lukso-profile
           ></lukso-tooltip>`;
-          const lsp3ProfilePicture = x`<lukso-tooltip
+          const lsp3ProfilePicture = html`<lukso-tooltip
             show-delay="2000"
             class="flex"
           >
@@ -482,7 +485,7 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
           break;
         }
         case SEARCH_RESULT_TYPES.ASSET: {
-          const asset = x`<lukso-tooltip show-delay="2000" class="flex">
+          const asset = html`<lukso-tooltip show-delay="2000" class="flex">
             <div slot="text">
               <span class="font-600"
                 >${recentSearch.name}
@@ -504,7 +507,7 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
           break;
         }
         case SEARCH_RESULT_TYPES.APP: {
-          const app = x`<lukso-tooltip show-delay="2000" class="flex">
+          const app = html`<lukso-tooltip show-delay="2000" class="flex">
             <div slot="text">
               <span class="font-600">${recentSearch.name}</span>
             </div>
@@ -521,7 +524,7 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
         }
       }
     }
-    return x`<div class="flex gap-4 mx-3 my-2">
+    return html`<div class="flex gap-4 mx-3 my-2">
       ${recentSearchTemplates}
     </div>`;
   }
@@ -669,7 +672,7 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
     this.searchDebounce(target.value);
   }
   render() {
-    return x`
+    return html`
       <div class="relative w-full">
         <lukso-input
           name=${this.name}
@@ -698,113 +701,113 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
           @on-key-up=${this.handleKeyUp}
         ></lukso-input>
         <!-- results dropdown -->
-        ${this.results && !(this.isSearching || this.isDebouncing) ? this.resultsTemplate() : E}
+        ${this.results && !(this.isSearching || this.isDebouncing) ? this.resultsTemplate() : nothing}
         <!-- no results dropdown -->
-        ${this.showNoResults && !(this.isSearching || this.isDebouncing) ? this.noResultsTemplate() : E}
+        ${this.showNoResults && !(this.isSearching || this.isDebouncing) ? this.noResultsTemplate() : nothing}
         <!-- loading dropdown -->
-        ${!this.hideLoading && this.value && (this.isSearching || this.isDebouncing) ? this.loadingTemplate() : E}
+        ${!this.hideLoading && this.value && (this.isSearching || this.isDebouncing) ? this.loadingTemplate() : nothing}
       </div>
     `;
   }
 };
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoSearch.prototype, "value", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoSearch.prototype, "name", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoSearch.prototype, "placeholder", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoSearch.prototype, "label", 2);
 __decorateClass([
-  n({ type: String, attribute: "group-labels" })
+  property({ type: String, attribute: "group-labels" })
 ], LuksoSearch.prototype, "groupLabels", 2);
 __decorateClass([
-  n({ type: String, attribute: "available-text" })
+  property({ type: String, attribute: "available-text" })
 ], LuksoSearch.prototype, "availableText", 2);
 __decorateClass([
-  n({ type: String, attribute: "unavailable-text" })
+  property({ type: String, attribute: "unavailable-text" })
 ], LuksoSearch.prototype, "unavailableText", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoSearch.prototype, "autocomplete", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoSearch.prototype, "id", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoSearch.prototype, "description", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoSearch.prototype, "error", 2);
 __decorateClass([
-  n({ type: String, attribute: "custom-class" })
+  property({ type: String, attribute: "custom-class" })
 ], LuksoSearch.prototype, "customClass", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-full-width" })
+  property({ type: Boolean, attribute: "is-full-width" })
 ], LuksoSearch.prototype, "isFullWidth", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-readonly" })
+  property({ type: Boolean, attribute: "is-readonly" })
 ], LuksoSearch.prototype, "isReadonly", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-disabled" })
+  property({ type: Boolean, attribute: "is-disabled" })
 ], LuksoSearch.prototype, "isDisabled", 2);
 __decorateClass([
-  n({ type: Boolean })
+  property({ type: Boolean })
 ], LuksoSearch.prototype, "autofocus", 2);
 __decorateClass([
-  n({ type: Boolean })
+  property({ type: Boolean })
 ], LuksoSearch.prototype, "borderless", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoSearch.prototype, "results", 2);
 __decorateClass([
-  n({ type: String, attribute: "right-icon" })
+  property({ type: String, attribute: "right-icon" })
 ], LuksoSearch.prototype, "rightIcon", 2);
 __decorateClass([
-  n({ type: Number })
+  property({ type: Number })
 ], LuksoSearch.prototype, "debounce", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-searching" })
+  property({ type: Boolean, attribute: "is-searching" })
 ], LuksoSearch.prototype, "isSearching", 2);
 __decorateClass([
-  n({ type: String, attribute: "no-results-text" })
+  property({ type: String, attribute: "no-results-text" })
 ], LuksoSearch.prototype, "noResultsText", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "show-no-results" })
+  property({ type: Boolean, attribute: "show-no-results" })
 ], LuksoSearch.prototype, "showNoResults", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "hide-loading" })
+  property({ type: Boolean, attribute: "hide-loading" })
 ], LuksoSearch.prototype, "hideLoading", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "has-reset" })
+  property({ type: Boolean, attribute: "has-reset" })
 ], LuksoSearch.prototype, "hasReset", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "keep-value-on-escape-hit" })
+  property({ type: Boolean, attribute: "keep-value-on-escape-hit" })
 ], LuksoSearch.prototype, "keepValueOnEscapeHit", 2);
 __decorateClass([
-  n({ type: Number })
+  property({ type: Number })
 ], LuksoSearch.prototype, "selected", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoSearch.prototype, "size", 2);
 __decorateClass([
-  n({ type: Number, attribute: "max-height" })
+  property({ type: Number, attribute: "max-height" })
 ], LuksoSearch.prototype, "maxHeight", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "with-group-labels" })
+  property({ type: Boolean, attribute: "with-group-labels" })
 ], LuksoSearch.prototype, "withGroupLabels", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoSearch.prototype, "isDebouncing", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoSearch.prototype, "debounceTimer", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoSearch.prototype, "resultsParsed", 2);
 LuksoSearch = __decorateClass([
   safeCustomElement("lukso-search")

package/dist/chunks/{index-C5YyB6ug.js → index-DvLZWpq9.js}

@@ -1,7 +1,6 @@
 'use strict';
 
-const shared_tailwindElement_index = require('./index-BxQ_0s_1.js');
-const directive = require('./directive-DT5Y-Nw0.js');
+const directive = require('./directive-CY66atYi.js');
 
 class CustomStyleMapDirective extends directive.i {
   constructor(partInfo) {
@@ -15,7 +14,7 @@ class CustomStyleMapDirective extends directive.i {
   render(styleInfoList) {
     const styles = Object.keys(styleInfoList).filter((key) => styleInfoList[key]);
     if (styles.length === 0) {
-      return shared_tailwindElement_index.E;
+      return directive.E;
     }
     return ` ${styles.join("; ")} `;
   }

package/dist/chunks/index-N2DggpF2.js

@@ -0,0 +1,3 @@
+import './index-CSnDkMHN.js';
+
+import.meta.url.replace(/^file:\/\/|\/\w+\.?[jt]s$/g, "").replace(/\/index\.[a-z]+$/g, "");

package/dist/chunks/index-oDo-wiUs.js

@@ -0,0 +1,8 @@
+'use strict';
+
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
+(typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('chunks/index-oDo-wiUs.js', document.baseURI).href)).replace(/^file:\/\/|\/\w+\.?[jt]s$/g, "").replace(/\/index\.[a-z]+$/g, "");
+
+(typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('chunks/index-oDo-wiUs.js', document.baseURI).href)).replace(/^file:\/\/|\/\w+\.?[jt]s$/g, "").replace(/\/index\.[a-z]+$/g, "");
+
+(typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('chunks/index-oDo-wiUs.js', document.baseURI).href)).replace(/^file:\/\/|\/\w+\.?[jt]s$/g, "").replace(/\/index\.[a-z]+$/g, "");

package/dist/chunks/index-y7UFhQ9u.js

@@ -0,0 +1,214 @@
+'use strict';
+
+const lit = require('lit');
+const decorators_js = require('lit/decorators.js');
+const directive = require('./directive-CY66atYi.js');
+const tailwindVariants = require('tailwind-variants');
+const web3Utils = require('web3-utils');
+const viem = require('viem');
+const index = require('./index-BBPgtFEP.js');
+const index$1 = require('./index-DvLZWpq9.js');
+require('../tailwind-config.cjs');
+require('./index-oDo-wiUs.js');
+const cn = require('./cn-JMx_imgS.js');
+require('axe-core');
+
+const sliceAddress = (address, startSliceBy = 6, endSliceBy) => {
+  if (!address || typeof address !== "string") {
+    return "";
+  }
+  let sliceAddress2 = "";
+  const effectiveEndSliceBy = endSliceBy || startSliceBy;
+  if (address.length < startSliceBy + effectiveEndSliceBy) {
+    return address;
+  }
+  sliceAddress2 = address.length > startSliceBy + 2 ? `${address.slice(0, startSliceBy + 2)}...${address.slice(
+    -effectiveEndSliceBy
+  )}` : address;
+  return sliceAddress2;
+};
+
+const style = ":host {\n    display: inline-flex\n}";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+exports.LuksoUsername = class LuksoUsername extends index.TailwindStyledElement(style) {
+  constructor() {
+    super(...arguments);
+    this.name = "";
+    this.address = "";
+    this.maxWidth = 200;
+    this.size = "large";
+    this.sliceBy = 8;
+    this.addressColor = "";
+    this.nameColor = "";
+    this.customClass = "";
+    this.hidePrefix = false;
+    this.prefix = "@";
+    this.noTransform = false;
+    /** Width of the first 4 bytes of the address */
+    this.bytesWidth = 52;
+    this.styles = tailwindVariants.tv({
+      slots: {
+        wrapper: "inline-flex",
+        name: "inline-block whitespace-nowrap overflow-hidden text-ellipsis",
+        address: "inline-block",
+        bytes: "inline-block"
+      },
+      variants: {
+        size: {
+          "2x-small": {
+            wrapper: "paragraph-ptmono-10-bold"
+          },
+          "x-small": {
+            wrapper: "paragraph-ptmono-10-bold"
+          },
+          small: {
+            wrapper: "paragraph-ptmono-12-bold"
+          },
+          medium: {
+            wrapper: "paragraph-ptmono-14-bold"
+          },
+          large: {
+            wrapper: "paragraph-ptmono-16-bold"
+          },
+          "x-large": {
+            wrapper: "paragraph-ptmono-24-bold"
+          },
+          "2x-large": {
+            wrapper: "paragraph-ptmono-24-bold"
+          }
+        },
+        hasNameColor: {
+          false: {
+            name: "text-transparent bg-clip-text bg-gradient-to-r from-gradient-1-start to-gradient-1-end"
+          }
+        },
+        hasAddressColor: {
+          false: {
+            address: "text-neutral-20",
+            bytes: "text-neutral-60"
+          }
+        }
+      }
+    });
+  }
+  transformName(name) {
+    if (this.noTransform) {
+      return name;
+    }
+    return name?.toLowerCase();
+  }
+  transformAddress(address) {
+    if (this.noTransform || !viem.isAddress(address)) {
+      return address;
+    }
+    try {
+      return web3Utils.toChecksumAddress(address);
+    } catch (error) {
+      console.warn(error);
+      return address;
+    }
+  }
+  addressBytesTemplate(styles) {
+    const address = this.transformAddress(this.address);
+    return lit.html`<div
+      class=${styles}
+      style=${index$1.customStyleMap({
+      [`color: var(--${this.addressColor})`]: this.addressColor !== ""
+    })}
+    >
+      #${address.slice(2, 6)}
+    </div>`;
+  }
+  nameTemplate(styles) {
+    const name = this.transformName(this.name);
+    return lit.html`<div
+      class=${styles}
+      style=${index$1.customStyleMap({
+      [`max-width: ${this.maxWidth - (this.address ? this.bytesWidth : 0)}px`]: true,
+      [`color: var(--${this.nameColor})`]: this.nameColor !== ""
+    })}
+    >
+      ${this.hidePrefix ? directive.E : this.prefix}${name}
+    </div>`;
+  }
+  addressTemplate(styles) {
+    const address = this.transformAddress(this.address);
+    return lit.html`<div
+      class=${styles}
+      style=${index$1.customStyleMap({
+      [`color: var(--${this.addressColor})`]: this.addressColor !== ""
+    })}
+    >
+      ${sliceAddress(address, this.sliceBy, this.sliceBy)}
+    </div>`;
+  }
+  render() {
+    const { wrapper, name, address, bytes } = this.styles({
+      size: this.size,
+      hasNameColor: this.nameColor !== "",
+      hasAddressColor: this.addressColor !== ""
+    });
+    const template = (() => {
+      if (this.name && this.address) {
+        return lit.html`${this.nameTemplate(name())}${this.addressBytesTemplate(
+          bytes()
+        )}`;
+      }
+      if (this.name) {
+        return this.nameTemplate(name());
+      }
+      if (this.address) {
+        return this.addressTemplate(address());
+      }
+    })();
+    return lit.html`<div class=${cn.cn(wrapper(), this.customClass)}>${template}</div>`;
+  }
+};
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.LuksoUsername.prototype, "name", 2);
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.LuksoUsername.prototype, "address", 2);
+__decorateClass([
+  decorators_js.property({ type: Number, attribute: "max-width" })
+], exports.LuksoUsername.prototype, "maxWidth", 2);
+__decorateClass([
+  decorators_js.property({ type: "string" })
+], exports.LuksoUsername.prototype, "size", 2);
+__decorateClass([
+  decorators_js.property({ type: Number, attribute: "slice-by" })
+], exports.LuksoUsername.prototype, "sliceBy", 2);
+__decorateClass([
+  decorators_js.property({ type: String, attribute: "address-color" })
+], exports.LuksoUsername.prototype, "addressColor", 2);
+__decorateClass([
+  decorators_js.property({ type: String, attribute: "name-color" })
+], exports.LuksoUsername.prototype, "nameColor", 2);
+__decorateClass([
+  decorators_js.property({ type: String, attribute: "custom-class" })
+], exports.LuksoUsername.prototype, "customClass", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, attribute: "hide-prefix" })
+], exports.LuksoUsername.prototype, "hidePrefix", 2);
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.LuksoUsername.prototype, "prefix", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, attribute: "no-transform" })
+], exports.LuksoUsername.prototype, "noTransform", 2);
+exports.LuksoUsername = __decorateClass([
+  index.safeCustomElement("lukso-username")
+], exports.LuksoUsername);
+
+exports.sliceAddress = sliceAddress;