@lukso/web-components 1.129.0 → 1.131.0

package/dist/components/lukso-input/index.js

@@ -1,12 +1,12 @@
-import { T as TailwindStyledElement, x, E } from '../../index-869a59a0.js';
-import { n, t } from '../../property-ff5733e6.js';
-import { r } from '../../state-9bdaddc0.js';
+import { T as TailwindStyledElement, x, E } from '../../index-2d057f81.js';
+import { n, t } from '../../property-5367c26a.js';
+import { r } from '../../state-bdfaec36.js';
 import { c as ce } from '../../index-d14b6a34.js';
 import '../lukso-icon/index.js';
+import '../lukso-sanitize/index.js';
 import '../../tailwind-config.js';
 import { c as cn } from '../../cn-90c03edf.js';
-import '../lukso-sanitize/index.js';
-import '../../style-map-8a1e2472.js';
+import '../../style-map-9e6bb4a6.js';
 import '../../directive-2bb7789e.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}";
@@ -46,7 +46,7 @@ let LuksoInput = class extends TailwindStyledElement(style) {
     this.max = void 0;
     this.min = void 0;
     this.borderless = false;
-    this.size = "medium";
+    this.size = "large";
     this.rightIcon = "";
     this.isRightIconClickable = false;
     this.keepFocusOnEscape = false;
@@ -105,18 +105,23 @@ let LuksoInput = class extends TailwindStyledElement(style) {
         },
         size: {
           small: {
-            input: "h-[28px] px-2 py-1 paragraph-inter-12-regular rounded-8",
-            unit: "h-[28px] paragraph-inter-10-regular px-2 rounded-r-8 before:top-[calc(50%-6px)] before:h-[12px]",
-            rightIcon: "right-2"
+            input: "h-[28px] px-3 py-1 paragraph-inter-12-regular rounded-8",
+            unit: "h-[28px] paragraph-inter-12-regular px-2 rounded-r-8 before:top-[calc(50%-6px)] before:h-[12px]",
+            rightIcon: "right-3"
           },
           medium: {
-            input: "h-[48px] px-4 py-3 paragraph-inter-14-regular rounded-12",
-            unit: "h-[48px] paragraph-inter-12-regular px-3.5 rounded-r-12 before:top-[calc(50%-12px)] before:h-[24px]",
-            rightIcon: "right-3"
+            input: "h-[40px] px-3.5 py-2 paragraph-inter-14-regular rounded-[10px]",
+            unit: "h-[40px] paragraph-inter-12-regular px-3 rounded-r-[10px] before:top-[calc(50%-12px)] before:h-[24px]",
+            rightIcon: "right-4"
           },
           large: {
-            input: "h-[70px] px-4 py-5 paragraph-inter-16-regular rounded-12",
-            unit: "h-[48px] paragraph-inter-16-semi-bold px-3.5 rounded-r-12 before:top-[calc(50%-12px)] before:h-[24px]",
+            input: "h-[48px] px-4 py-2 paragraph-inter-14-regular rounded-12",
+            unit: "h-[48px] paragraph-inter-12-regular pl-3 pr-4 rounded-r-12 before:top-[calc(50%-12px)] before:h-[24px]",
+            rightIcon: "right-4"
+          },
+          "x-large": {
+            input: "h-[68px] px-5 py-5 paragraph-inter-16-regular rounded-[14px]",
+            unit: "h-[68px] paragraph-inter-16-regular pl-3 pr-4 rounded-r-[14px] before:top-[calc(50%-12px)] before:h-[24px]",
             rightIcon: "right-4"
           }
         },
@@ -152,12 +157,7 @@ let LuksoInput = class extends TailwindStyledElement(style) {
         },
         {
           hasRightIcon: true,
-          size: "large",
-          class: { input: "pr-10" }
-        },
-        {
-          hasRightIcon: true,
-          size: "medium",
+          size: ["medium", "large", "x-large"],
           class: { input: "pr-10" }
         },
         {
@@ -241,9 +241,10 @@ let LuksoInput = class extends TailwindStyledElement(style) {
     </div>`;
   }
   rightIconTemplate(styles) {
+    const iconSize = this.size === "small" ? "small" : "medium";
     return x`<lukso-icon
       name=${this.rightIcon}
-      size=${this.size}
+      size=${iconSize}
       class=${styles}
       @click=${this.handleRightIconClick}
     ></lukso-icon>`;

package/dist/components/lukso-modal/index.cjs

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-b44989bb.cjs');
-const property = require('../../property-65ed3fa1.cjs');
+const shared_tailwindElement_index = require('../../index-96bba619.cjs');
+const property = require('../../property-98f7e05b.cjs');
 const index = require('../../index-2b104ecb.cjs');
 
 var __defProp = Object.defineProperty;
@@ -25,14 +25,14 @@ exports.LuksoModal = class LuksoModal extends shared_tailwindElement_index.Tailw
     this.size = "small";
     this.styles = index.ce({
       slots: {
-        wrapper: "opacity-0 fixed z-[1011] transition-opacity top-0 left-0 p-6 overflow-y-auto",
-        overlay: "bg-[rgba(196,202,206,0.6)] backdrop-blur-sm fixed top-0 left-0 w-[100vw] h-[100vh] z-[1010]",
-        dialog: "bg-neutral-98 rounded-12 shadow-neutral-shadow-round-3xl z-[1012]"
+        wrapper: "opacity-0 fixed z-[1011] transition-opacity inset-0 w-screen h-screen overflow-y-auto overscroll-none touch-none",
+        overlay: "bg-[rgba(196,202,206,0.6)] backdrop-blur-sm fixed inset-0 w-[100vw] h-[100vh] z-[1010]",
+        dialog: "bg-neutral-98 rounded-12 shadow-neutral-shadow-round-3xl z-[1012] mx-auto"
       },
       variants: {
         isOpen: {
           true: {
-            wrapper: "grid opacity-100 visible items-center justify-center w-[100vw] h-[100vh]"
+            wrapper: "opacity-100 visible w-[100vw] h-[100vh]"
           },
           false: {
             wrapper: "hidden"
@@ -52,7 +52,7 @@ exports.LuksoModal = class LuksoModal extends shared_tailwindElement_index.Tailw
         },
         disableAnimations: {
           false: {
-            wrapper: "animation-duration-300 delay-300 ",
+            wrapper: "animation-duration-300 delay-300",
             overlay: "animation-duration-300"
           }
         }
@@ -88,9 +88,13 @@ exports.LuksoModal = class LuksoModal extends shared_tailwindElement_index.Tailw
     });
     return shared_tailwindElement_index.x`
       <div data-testid="modal" class=${wrapper()}>
-        <div class=${overlay()} @click=${this.handleBackdropClick}></div>
-        <div class=${dialog()}>
-          <slot></slot>
+        <div
+          class="min-h-screen flex items-center justify-center pt-6 pb-[120px] sm:pb-6 px-6 w-full"
+        >
+          <div class=${overlay()} @click=${this.handleBackdropClick}></div>
+          <div class=${dialog()}>
+            <slot></slot>
+          </div>
         </div>
       </div>
     `;

package/dist/components/lukso-modal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-modal/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAE3D,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAA;AAE7D,qBACa,UAAW,SAAQ,eAAe;IAE7C,MAAM,UAAQ;IAGd,iBAAiB,UAAQ;IAGzB,IAAI,EAAE,UAAU,CAAU;IAE1B,OAAO,CAAC,MAAM,CAgDZ;IAEF,OAAO,CAAC,KAAK;YAIC,mBAAmB;IASjC,MAAM;CAgBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAA;KAC1B;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-modal/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAE3D,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAA;AAE7D,qBACa,UAAW,SAAQ,eAAe;IAE7C,MAAM,UAAQ;IAGd,iBAAiB,UAAQ;IAGzB,IAAI,EAAE,UAAU,CAAU;IAE1B,OAAO,CAAC,MAAM,CA+CZ;IAEF,OAAO,CAAC,KAAK;YAIC,mBAAmB;IASjC,MAAM;CAoBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAA;KAC1B;CACF"}

package/dist/components/lukso-modal/index.js

@@ -1,5 +1,5 @@
-import { a as TailwindElement, x } from '../../index-869a59a0.js';
-import { n, t } from '../../property-ff5733e6.js';
+import { a as TailwindElement, x } from '../../index-2d057f81.js';
+import { n, t } from '../../property-5367c26a.js';
 import { c as ce } from '../../index-d14b6a34.js';
 
 var __defProp = Object.defineProperty;
@@ -21,14 +21,14 @@ let LuksoModal = class extends TailwindElement {
     this.size = "small";
     this.styles = ce({
       slots: {
-        wrapper: "opacity-0 fixed z-[1011] transition-opacity top-0 left-0 p-6 overflow-y-auto",
-        overlay: "bg-[rgba(196,202,206,0.6)] backdrop-blur-sm fixed top-0 left-0 w-[100vw] h-[100vh] z-[1010]",
-        dialog: "bg-neutral-98 rounded-12 shadow-neutral-shadow-round-3xl z-[1012]"
+        wrapper: "opacity-0 fixed z-[1011] transition-opacity inset-0 w-screen h-screen overflow-y-auto overscroll-none touch-none",
+        overlay: "bg-[rgba(196,202,206,0.6)] backdrop-blur-sm fixed inset-0 w-[100vw] h-[100vh] z-[1010]",
+        dialog: "bg-neutral-98 rounded-12 shadow-neutral-shadow-round-3xl z-[1012] mx-auto"
       },
       variants: {
         isOpen: {
           true: {
-            wrapper: "grid opacity-100 visible items-center justify-center w-[100vw] h-[100vh]"
+            wrapper: "opacity-100 visible w-[100vw] h-[100vh]"
           },
           false: {
             wrapper: "hidden"
@@ -48,7 +48,7 @@ let LuksoModal = class extends TailwindElement {
         },
         disableAnimations: {
           false: {
-            wrapper: "animation-duration-300 delay-300 ",
+            wrapper: "animation-duration-300 delay-300",
             overlay: "animation-duration-300"
           }
         }
@@ -84,9 +84,13 @@ let LuksoModal = class extends TailwindElement {
     });
     return x`
       <div data-testid="modal" class=${wrapper()}>
-        <div class=${overlay()} @click=${this.handleBackdropClick}></div>
-        <div class=${dialog()}>
-          <slot></slot>
+        <div
+          class="min-h-screen flex items-center justify-center pt-6 pb-[120px] sm:pb-6 px-6 w-full"
+        >
+          <div class=${overlay()} @click=${this.handleBackdropClick}></div>
+          <div class=${dialog()}>
+            <slot></slot>
+          </div>
         </div>
       </div>
     `;

package/dist/components/lukso-navbar/index.cjs

@@ -2,15 +2,15 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-b44989bb.cjs');
-const property = require('../../property-65ed3fa1.cjs');
-const state = require('../../state-ec4491d8.cjs');
+const shared_tailwindElement_index = require('../../index-96bba619.cjs');
+const property = require('../../property-98f7e05b.cjs');
+const state = require('../../state-eba8ded5.cjs');
 const index = require('../../index-2b104ecb.cjs');
 require('../lukso-icon/index.cjs');
 require('../lukso-tag/index.cjs');
-require('../../style-map-227a49cb.cjs');
+require('../../style-map-b13b92c1.cjs');
 require('../../directive-8278ab14.cjs');
-require('../../index-2ffc105b.cjs');
+require('../../index-5df012eb.cjs');
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/dist/components/lukso-navbar/index.js

@@ -1,12 +1,12 @@
-import { a as TailwindElement, x, E } from '../../index-869a59a0.js';
-import { n, t } from '../../property-ff5733e6.js';
-import { r } from '../../state-9bdaddc0.js';
+import { a as TailwindElement, x, E } from '../../index-2d057f81.js';
+import { n, t } from '../../property-5367c26a.js';
+import { r } from '../../state-bdfaec36.js';
 import { c as ce } from '../../index-d14b6a34.js';
 import '../lukso-icon/index.js';
 import '../lukso-tag/index.js';
-import '../../style-map-8a1e2472.js';
+import '../../style-map-9e6bb4a6.js';
 import '../../directive-2bb7789e.js';
-import '../../index-b74237f9.js';
+import '../../index-5387057e.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/dist/components/lukso-pagination/index.cjs

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-b44989bb.cjs');
-const property = require('../../property-65ed3fa1.cjs');
-const state = require('../../state-ec4491d8.cjs');
+const shared_tailwindElement_index = require('../../index-96bba619.cjs');
+const property = require('../../property-98f7e05b.cjs');
+const state = require('../../state-eba8ded5.cjs');
 const index = require('../../index-2b104ecb.cjs');
 require('../lukso-icon/index.cjs');
 require('../lukso-button/index.cjs');
-require('../../style-map-227a49cb.cjs');
+require('../../style-map-b13b92c1.cjs');
 require('../../directive-8278ab14.cjs');
 require('../../tailwind-config.cjs');
 require('../../cn-b6daa995.cjs');

package/dist/components/lukso-pagination/index.js

@@ -1,10 +1,10 @@
-import { T as TailwindStyledElement, x } from '../../index-869a59a0.js';
-import { n, t } from '../../property-ff5733e6.js';
-import { r } from '../../state-9bdaddc0.js';
+import { T as TailwindStyledElement, x } from '../../index-2d057f81.js';
+import { n, t } from '../../property-5367c26a.js';
+import { r } from '../../state-bdfaec36.js';
 import { c as ce } from '../../index-d14b6a34.js';
 import '../lukso-icon/index.js';
 import '../lukso-button/index.js';
-import '../../style-map-8a1e2472.js';
+import '../../style-map-9e6bb4a6.js';
 import '../../directive-2bb7789e.js';
 import '../../tailwind-config.js';
 import '../../cn-90c03edf.js';

package/dist/components/lukso-profile/index.cjs

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-require('../../index-b44989bb.cjs');
-require('../../property-65ed3fa1.cjs');
-const components_luksoProfile_index = require('../../index-e5b0ba18.cjs');
+require('../../index-96bba619.cjs');
+require('../../property-98f7e05b.cjs');
+const components_luksoProfile_index = require('../../index-9c39357d.cjs');
 require('../../index-2b104ecb.cjs');
 require('../lukso-image/index.cjs');
-require('../../state-ec4491d8.cjs');
-require('../../style-map-227a49cb.cjs');
+require('../../state-eba8ded5.cjs');
+require('../../style-map-b13b92c1.cjs');
 require('../../directive-8278ab14.cjs');
 
 

package/dist/components/lukso-profile/index.js

@@ -1,8 +1,8 @@
-import '../../index-869a59a0.js';
-import '../../property-ff5733e6.js';
-export { L as LuksoProfile } from '../../index-da14e190.js';
+import '../../index-2d057f81.js';
+import '../../property-5367c26a.js';
+export { L as LuksoProfile } from '../../index-38990f38.js';
 import '../../index-d14b6a34.js';
 import '../lukso-image/index.js';
-import '../../state-9bdaddc0.js';
-import '../../style-map-8a1e2472.js';
+import '../../state-bdfaec36.js';
+import '../../style-map-9e6bb4a6.js';
 import '../../directive-2bb7789e.js';

package/dist/components/lukso-progress/index.cjs

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-b44989bb.cjs');
-const property = require('../../property-65ed3fa1.cjs');
-const styleMap = require('../../style-map-227a49cb.cjs');
+const shared_tailwindElement_index = require('../../index-96bba619.cjs');
+const property = require('../../property-98f7e05b.cjs');
+const styleMap = require('../../style-map-b13b92c1.cjs');
 require('../../tailwind-config.cjs');
 const cn = require('../../cn-b6daa995.cjs');
 require('../../directive-8278ab14.cjs');

package/dist/components/lukso-progress/index.js

@@ -1,6 +1,6 @@
-import { a as TailwindElement, x } from '../../index-869a59a0.js';
-import { n, t } from '../../property-ff5733e6.js';
-import { o } from '../../style-map-8a1e2472.js';
+import { a as TailwindElement, x } from '../../index-2d057f81.js';
+import { n, t } from '../../property-5367c26a.js';
+import { o } from '../../style-map-9e6bb4a6.js';
 import '../../tailwind-config.js';
 import { c as cn } from '../../cn-90c03edf.js';
 import '../../directive-2bb7789e.js';

package/dist/components/lukso-sanitize/index.cjs

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-b44989bb.cjs');
-const property = require('../../property-65ed3fa1.cjs');
+const shared_tailwindElement_index = require('../../index-96bba619.cjs');
+const property = require('../../property-98f7e05b.cjs');
 const directive = require('../../directive-8278ab14.cjs');
 
 /**

package/dist/components/lukso-sanitize/index.js

@@ -1,5 +1,5 @@
-import { E, b as T, a as TailwindElement, x } from '../../index-869a59a0.js';
-import { n, t as t$1 } from '../../property-ff5733e6.js';
+import { E, b as T, a as TailwindElement, x } from '../../index-2d057f81.js';
+import { n, t as t$1 } from '../../property-5367c26a.js';
 import { i, t, e as e$1 } from '../../directive-2bb7789e.js';
 
 /**

package/dist/components/lukso-search/index.cjs

@@ -2,24 +2,25 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const components_luksoProfile_index = require('../../index-e5b0ba18.cjs');
-const shared_tailwindElement_index = require('../../index-b44989bb.cjs');
-const property = require('../../property-65ed3fa1.cjs');
-const state = require('../../state-ec4491d8.cjs');
+const components_luksoProfile_index = require('../../index-9c39357d.cjs');
+const shared_tailwindElement_index = require('../../index-96bba619.cjs');
+const property = require('../../property-98f7e05b.cjs');
+const state = require('../../state-eba8ded5.cjs');
 const index = require('../../index-2b104ecb.cjs');
 require('../lukso-dropdown/index.cjs');
 require('../lukso-dropdown-option/index.cjs');
 require('../lukso-icon/index.cjs');
 require('../lukso-input/index.cjs');
-require('../lukso-username/index.cjs');
+require('../lukso-tag/index.cjs');
+const components_luksoUsername_index = require('../../index-ba49f23a.cjs');
+require('../../tailwind-config.cjs');
+require('../../cn-b6daa995.cjs');
 require('../lukso-image/index.cjs');
-require('../../style-map-227a49cb.cjs');
+require('../../style-map-b13b92c1.cjs');
 require('../../directive-8278ab14.cjs');
 require('../../uniq-id-f0b18085.cjs');
-require('../../tailwind-config.cjs');
-require('../../cn-b6daa995.cjs');
 require('../lukso-sanitize/index.cjs');
-require('../../index-2ffc105b.cjs');
+require('../../index-5df012eb.cjs');
 
 const style = ":host {\n\n    display: inline-flex\n}\n\n:host([is-full-width]) {\n\n    display: flex;\n\n    width: 100%\n}";
 
@@ -34,6 +35,12 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
+var SearchProfileType = /* @__PURE__ */ ((SearchProfileType2) => {
+  SearchProfileType2["UP"] = "up";
+  SearchProfileType2["EOA"] = "eoa";
+  SearchProfileType2["SmartContract"] = "sc";
+  return SearchProfileType2;
+})(SearchProfileType || {});
 exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.TailwindStyledElement(style) {
   constructor() {
     super(...arguments);
@@ -41,6 +48,8 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
     this.name = "";
     this.placeholder = "";
     this.label = "";
+    this.availableText = "Available";
+    this.unavailableText = "Registered";
     this.autocomplete = "off";
     this.id = "";
     this.description = "";
@@ -61,10 +70,9 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
     this.hasReset = false;
     this.keepValueOnEscapeHit = false;
     this.selected = void 0;
-    this.size = "medium";
+    this.size = "large";
     this.isDebouncing = false;
     this.resultsParsed = [];
-    this.searchTerm = "";
     this.styles = index.ce({
       slots: {
         loading: "bg-neutral-95 w-full animate-pulse animation-delay-none"
@@ -78,6 +86,9 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
             loading: "h-10 rounded-8"
           },
           large: {
+            loading: "h-10 rounded-8"
+          },
+          "x-large": {
             loading: "h-12 rounded-8"
           }
         }
@@ -111,21 +122,34 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
       }
     }
   }
+  sizeDropdown() {
+    const dropdownSize = this.size === "large" || this.size === "x-large" ? "medium" : this.size;
+    return dropdownSize;
+  }
   resultsTemplate() {
     const resultTemplates = [];
     this.resultsParsed = JSON.parse(this.results);
     for (const result of Object.entries(this.resultsParsed)) {
       const index = Number(result[0]);
-      if ("value" in result[1]) {
-        resultTemplates.push(this.resultStringTemplate(result[1], index));
+      if ("value" in result[1] && "status" in result[1]) {
+        resultTemplates.push(
+          this.resultUniversalNameTemplate(
+            result[1],
+            index
+          )
+        );
+      } else if ("value" in result[1]) {
+        resultTemplates.push(
+          this.resultStringTemplate(result[1], index)
+        );
       } else if ("address" in result[1]) {
         resultTemplates.push(this.resultProfileTemplate(result[1], index));
-      } else {
+      } else if ("value" in result[1]) ; else {
         console.error("Unknown result type", result);
       }
     }
     return shared_tailwindElement_index.x`<lukso-dropdown
-      size=${this.size}
+      size=${this.sizeDropdown()}
       is-open
       is-open-on-outside-click
       is-full-width
@@ -134,7 +158,7 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
   }
   noResultsTemplate() {
     return shared_tailwindElement_index.x`<lukso-dropdown
-      size=${this.size}
+      size=${this.sizeDropdown()}
       is-open
       is-open-on-outside-click
       is-full-width
@@ -149,7 +173,7 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
     });
     if (this.showNoResults) {
       return shared_tailwindElement_index.x`<lukso-dropdown
-        size=${this.size}
+        size=${this.sizeDropdown()}
         is-open
         is-open-on-outside-click
         is-full-width
@@ -162,7 +186,7 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
     }
     if (this.resultsParsed.length === 0 || this.resultsParsed.length > 5) {
       return shared_tailwindElement_index.x`<lukso-dropdown
-        size=${this.size}
+        size=${this.sizeDropdown()}
         is-open
         is-open-on-outside-click
         is-full-width
@@ -174,7 +198,7 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
       >`;
     }
     return shared_tailwindElement_index.x`<lukso-dropdown
-      size=${this.size}
+      size=${this.sizeDropdown()}
       is-open
       is-open-on-outside-click
       is-full-width
@@ -186,16 +210,37 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
     >`;
   }
   resultStringTemplate(result, index) {
+    const dropdownSize = this.size === "large" || this.size === "x-large" ? "medium" : this.size;
     return shared_tailwindElement_index.x`<lukso-dropdown-option
       data-id="${result.id}"
       data-index="${index + 1}"
       ?is-selected=${this.selected === index + 1}
-      size=${this.size}
+      size=${dropdownSize}
       @click=${() => this.handleSelect(result)}
     >
       ${result.value}
     </lukso-dropdown-option>`;
   }
+  resultUniversalNameTemplate(result, index) {
+    const tag = shared_tailwindElement_index.x`<lukso-tag
+      is-rounded
+      background-color="${result.status ? "green-90" : "neutral-95"}"
+      text-color="${result.status ? "green-45" : "neutral-60"}"
+      >${!!result.status ? this.availableText : this.unavailableText}</lukso-tag
+    >`;
+    return shared_tailwindElement_index.x`<lukso-dropdown-option
+      data-id="${result.id}"
+      data-index="${index + 1}"
+      ?is-selected=${this.selected === index + 1}
+      size=${this.sizeDropdown()}
+      @click=${() => this.handleSelect(result)}
+    >
+      <div class="flex flex-row items-center justify-between w-full">
+        <div class="paragraph-inter-14-semi-bold">${result.value}</div>
+        ${tag}
+      </div>
+    </lukso-dropdown-option>`;
+  }
   resultProfileTemplate(result, index) {
     const eoaProfilePicture = shared_tailwindElement_index.x`<lukso-profile
       profile-address="${result.address}"
@@ -208,23 +253,49 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
       size="x-small"
       has-identicon
     ></lukso-profile>`;
-    const profilePicture = result.isEOA ? eoaProfilePicture : lsp3ProfilePicture;
+    const type = result.type || "up" /* UP */;
+    const profilePicture = type !== "up" /* UP */ ? eoaProfilePicture : lsp3ProfilePicture;
+    const upProfileUsername = shared_tailwindElement_index.x`<lukso-username
+      name="${result.name?.toLowerCase() || "anonymous-profile"}"
+      address="${result.address}"
+      name-color="neutral-20"
+      max-width="300"
+      size="medium"
+      ?hide-prefix="${!result.name}"
+      class="ml-1"
+    ></lukso-username> `;
+    const eoaUsername = shared_tailwindElement_index.x`<lukso-username
+      name="${components_luksoUsername_index.sliceAddress(result.address, 8)}"
+      address="__EOA"
+      name-color="neutral-20"
+      max-width="300"
+      size="medium"
+      hide-prefix
+      class="ml-1"
+    ></lukso-username>`;
+    const scUsername = shared_tailwindElement_index.x`<lukso-username
+      name=""
+      address="${components_luksoUsername_index.sliceAddress(result.address, 8)}"
+      name-color="neutral-20"
+      max-width="300"
+      size="medium"
+      hide-prefix
+      class="ml-1"
+    ></lukso-username>`;
+    let profileName = scUsername;
+    if (type === "eoa" /* EOA */) {
+      profileName = eoaUsername;
+    } else if (type === "up" /* UP */) {
+      profileName = upProfileUsername;
+    }
     return shared_tailwindElement_index.x`<lukso-dropdown-option
       data-id="${result.address}"
       data-index="${index + 1}"
       ?is-selected=${this.selected === index + 1}
-      size=${this.size}
+      size=${this.sizeDropdown()}
       @click=${() => this.handleSelect(result)}
     >
-      ${profilePicture}
-      <lukso-username
-        name="${result.name?.toLowerCase()}"
-        address="${result.address}"
-        name-color="neutral-20"
-        max-width="300"
-        size="medium"
-        class="ml-1"
-      ></lukso-username>
+      ${profilePicture} ${profileName}
     </lukso-dropdown-option>`;
   }
   async handleOutsideDropdownClick(event) {
@@ -406,6 +477,12 @@ __decorateClass([
 __decorateClass([
   property.n({ type: String })
 ], exports.LuksoSearch.prototype, "label", 2);
+__decorateClass([
+  property.n({ type: String, attribute: "available-text" })
+], exports.LuksoSearch.prototype, "availableText", 2);
+__decorateClass([
+  property.n({ type: String, attribute: "unavailable-text" })
+], exports.LuksoSearch.prototype, "unavailableText", 2);
 __decorateClass([
   property.n({ type: String })
 ], exports.LuksoSearch.prototype, "autocomplete", 2);
@@ -478,9 +555,8 @@ __decorateClass([
 __decorateClass([
   state.r()
 ], exports.LuksoSearch.prototype, "resultsParsed", 2);
-__decorateClass([
-  state.r()
-], exports.LuksoSearch.prototype, "searchTerm", 2);
 exports.LuksoSearch = __decorateClass([
   property.t("lukso-search")
 ], exports.LuksoSearch);
+
+exports.SearchProfileType = SearchProfileType;