@lukso/web-components 1.53.2 → 1.55.0

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-f25fc3ea.cjs');
+const shared_tailwindElement_index = require('../../index-534893a1.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
-const styleMap = require('../../style-map-a31b1d87.cjs');
+const styleMap = require('../../style-map-beffabf7.cjs');
 require('../../tailwind-config.cjs');
 const cn = require('../../cn-4ec0bd94.cjs');
 require('../../directive-8278ab14.cjs');

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

@@ -1,6 +1,6 @@
-import { a as TailwindElement, x } from '../../index-122da399.js';
+import { a as TailwindElement, x } from '../../index-3373dd2c.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
-import { o } from '../../style-map-d0fa91c8.js';
+import { o } from '../../style-map-04ec407e.js';
 import '../../tailwind-config.js';
 import { c as cn } from '../../cn-616567d4.js';
 import '../../directive-2bb7789e.js';

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-f25fc3ea.cjs');
+const shared_tailwindElement_index = require('../../index-534893a1.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
 const directive = require('../../directive-8278ab14.cjs');
 

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

@@ -1,4 +1,4 @@
-import { A, b as T, a as TailwindElement, x } from '../../index-122da399.js';
+import { A, b as T, a as TailwindElement, x } from '../../index-3373dd2c.js';
 import { n, e as e$2 } from '../../query-assigned-elements-5d94572f.js';
 import { i, t, e as e$1 } from '../../directive-2bb7789e.js';
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-f25fc3ea.cjs');
+const shared_tailwindElement_index = require('../../index-534893a1.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
 const state = require('../../state-f73a8b4f.cjs');
 const index = require('../../index-e9668573.cjs');
@@ -10,8 +10,8 @@ require('../lukso-icon/index.cjs');
 require('../lukso-profile/index.cjs');
 require('../lukso-username/index.cjs');
 require('../../directive-8278ab14.cjs');
-require('../../style-map-a31b1d87.cjs');
-require('../../index-97f126f3.cjs');
+require('../../style-map-beffabf7.cjs');
+require('../../index-21cb1f33.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}";
 

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

@@ -1,4 +1,4 @@
-import { T as TailwindStyledElement, x, A } from '../../index-122da399.js';
+import { T as TailwindStyledElement, x, A } from '../../index-3373dd2c.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
 import { t } from '../../state-0a779257.js';
 import { c as customClassMap } from '../../index-5e194caf.js';
@@ -6,8 +6,8 @@ import '../lukso-icon/index.js';
 import '../lukso-profile/index.js';
 import '../lukso-username/index.js';
 import '../../directive-2bb7789e.js';
-import '../../style-map-d0fa91c8.js';
-import '../../index-9c2f800a.js';
+import '../../style-map-04ec407e.js';
+import '../../index-b02bfbc3.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}";
 

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

@@ -2,16 +2,17 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-f25fc3ea.cjs');
+const shared_tailwindElement_index = require('../../index-534893a1.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
 const state = require('../../state-f73a8b4f.cjs');
-const index = require('../../index-e9668573.cjs');
+const index = require('../../index-e8741080.cjs');
 require('../lukso-icon/index.cjs');
 require('../lukso-profile/index.cjs');
 require('../lukso-username/index.cjs');
+require('../../style-map-beffabf7.cjs');
 require('../../directive-8278ab14.cjs');
-require('../../style-map-a31b1d87.cjs');
-require('../../index-97f126f3.cjs');
+require('../../index-e9668573.cjs');
+require('../../index-21cb1f33.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}";
 
@@ -43,11 +44,62 @@ exports.LuksoSelect = class LuksoSelect extends shared_tailwindElement_index.Tai
     this.selected = void 0;
     this.isOpen = false;
     this.openTop = false;
+    this.isLargeIcon = false;
     this.optionsParsed = [];
     this.valueParsed = void 0;
-    this.defaultInputStyles = `bg-neutral-100 paragraph-inter-14-regular px-4 py-3 pr-11
-    border-solid h-[48px] placeholder:text-neutral-70 select-none whitespace-nowrap
-    outline-none transition transition-all duration-150 appearance-none rounded-12`;
+    this.inputStyles = index.se({
+      base: `bg-neutral-100 paragraph-inter-14-regular px-4 py-3 pr-11
+      border border-solid h-[48px] placeholder:text-neutral-70 select-none whitespace-nowrap
+      outline-none transition transition-all duration-150 appearance-none rounded-12
+      text-neutral-20 cursor-pointer border-neutral-90 group-hover:border-neutral-35
+      flex items-center`,
+      variants: {
+        isFullWidth: {
+          true: `w-full`
+        },
+        isDisabled: {
+          true: `cursor-not-allowed text-neutral-60 group-hover:border-neutral-90`
+        },
+        hasError: {
+          true: `border-red-85 group-hover:border-red-65`
+        },
+        borderless: {
+          true: `border-0`
+        }
+      }
+    });
+    this.dropdownWrapperStyles = index.se({
+      base: `bg-neutral-100 border w-full border-neutral-90 shadow-1xl rounded-12 p-3 z-50
+      flex absolute flex-col gap-1 overflow-y-auto max-h-64 mt-2`,
+      variants: {
+        openTop: {
+          true: `bottom-[48px] mb-2 mt-0`
+        }
+      }
+    });
+    this.optionsStyles = index.se({
+      base: `paragraph-inter-14-regular text-neutral-20 cursor-pointer rounded-8 p-2
+      whitespace-nowrap hover:bg-neutral-98 flex items-center`,
+      variants: {
+        isSelected: {
+          true: `bg-neutral-95 hover:bg-neutral-95`
+        },
+        isActive: {
+          true: `bg-neutral-98`
+        }
+      }
+    });
+    this.iconStyles = index.se({
+      base: `absolute right-0 mr-3 transition cursor-pointer`,
+      variants: {
+        isDisabled: {
+          true: `opacity-60 cursor-not-allowed`
+        },
+        isOpen: {
+          true: `rotate-180`
+        }
+      }
+    });
   }
   connectedCallback() {
     super.connectedCallback();
@@ -91,19 +143,17 @@ exports.LuksoSelect = class LuksoSelect extends shared_tailwindElement_index.Tai
     }
   }
   inputTemplate() {
+    const inputStyles = this.inputStyles({
+      isFullWidth: this.isFullWidth,
+      isDisabled: this.isDisabled,
+      hasError: !!this.error,
+      borderless: this.borderless
+    });
     return shared_tailwindElement_index.x`
       <div
         id=${this.id}
         data-testid=${this.id ? `select-${this.id}` : "select"}
-        class=${index.customClassMap({
-      [this.defaultInputStyles]: true,
-      ["border-neutral-90 group-hover:border-neutral-35"]: !!!this.error && !this.isDisabled,
-      ["border-red-85 group-hover:border-red-65"]: !!this.error,
-      ["w-full"]: this.isFullWidth,
-      ["cursor-not-allowed text-neutral-60"]: this.isDisabled,
-      ["text-neutral-20 cursor-pointer"]: !this.isDisabled,
-      [this.borderless ? "border-0" : "border"]: true
-    })}
+        class=${inputStyles}
         @blur=${this.handleBlur}
         @click=${this.handleClick}
       >
@@ -136,6 +186,8 @@ exports.LuksoSelect = class LuksoSelect extends shared_tailwindElement_index.Tai
       const index = Number(option[0]);
       if ("value" in option[1]) {
         optionTemplates.push(this.optionStringTemplate(option[1], index));
+      } else if ("address" in option[1]) {
+        optionTemplates.push(this.optionProfileTemplate(option[1], index));
       } else {
         console.error("Unknown option type", option);
       }
@@ -143,40 +195,71 @@ exports.LuksoSelect = class LuksoSelect extends shared_tailwindElement_index.Tai
     return shared_tailwindElement_index.x`${this.dropdownWrapperTemplate(optionTemplates)}`;
   }
   dropdownWrapperTemplate(innerTemplate) {
+    const dropdownWrapperStyles = this.dropdownWrapperStyles({
+      openTop: this.openTop
+    });
+    return shared_tailwindElement_index.x`<div class="${dropdownWrapperStyles}">${innerTemplate}</div>`;
+  }
+  optionStringTemplate(option, index) {
+    const optionsStyles = this.optionsStyles({
+      isSelected: this.valueParsed?.id === option.id,
+      isActive: this.selected === index + 1 && this.valueParsed?.id !== option.id
+    });
     return shared_tailwindElement_index.x`<div
-      class="bg-neutral-100 border w-full border-neutral-90 shadow-1xl rounded-12 p-3 z-50 flex absolute flex-col gap-1 overflow-y-auto max-h-64 ${index.customClassMap(
-      {
-        ["bottom-[48px] mb-2"]: this.openTop,
-        ["mt-2"]: !this.openTop
-      }
-    )}
-      )}"
+      data-id="${option.id}"
+      data-index="${index + 1}"
+      class="${optionsStyles}"
+      @click=${() => this.handleSelect(option)}
     >
-      ${innerTemplate}
+      ${this.optionStringValue(option)}
     </div>`;
   }
-  optionStringTemplate(option, index$1) {
+  optionProfileTemplate(option, index) {
+    const optionsStyles = this.optionsStyles({
+      isSelected: this.valueParsed?.id === option.id,
+      isActive: this.selected === index + 1 && this.valueParsed?.id !== option.id
+    });
     return shared_tailwindElement_index.x`<div
       data-id="${option.id}"
-      data-index="${index$1 + 1}"
-      class="paragraph-inter-14-regular text-neutral-20 cursor-pointer rounded-8 p-2 whitespace-nowrap ${index.customClassMap(
-      {
-        ["bg-neutral-95 hover:bg-neutral-95"]: this.valueParsed?.id === option.id,
-        ["bg-neutral-98"]: this.selected === index$1 + 1 && this.valueParsed?.id !== option.id,
-        ["hover:bg-neutral-98"]: this.valueParsed?.id !== option.id
-      }
-    )}"
+      data-index="${index + 1}"
+      class="${optionsStyles}"
       @click=${() => this.handleSelect(option)}
     >
-      ${option.value}
+      ${this.optionProfileValue(option)}
     </div>`;
   }
+  optionStringValue(option) {
+    return option.value;
+  }
+  optionProfileValue(option) {
+    return shared_tailwindElement_index.x`<lukso-profile
+        profile-address="${option.address}"
+        profile-url="${option.image}"
+        size="x-small"
+        has-identicon
+        class="mr-2"
+      ></lukso-profile>
+      <lukso-username
+        name="${option.name?.toLowerCase()}"
+        address="${option.address}"
+        name-color="neutral-20"
+        max-width="150"
+        slice-by="4"
+        size="medium"
+      ></lukso-username>`;
+  }
   selectedValue() {
     const foundValue = this.optionsParsed.find(
       (option) => option.id === this.valueParsed?.id
     );
     if (foundValue) {
-      return foundValue.value;
+      if ("value" in foundValue) {
+        return this.optionStringValue(foundValue);
+      } else if ("address" in foundValue) {
+        return this.optionProfileValue(foundValue);
+      } else {
+        console.error("Unknown value type", foundValue);
+      }
     }
     return "";
   }
@@ -242,6 +325,10 @@ exports.LuksoSelect = class LuksoSelect extends shared_tailwindElement_index.Tai
     this.isOpen = !this.isOpen;
   }
   render() {
+    const iconStyles = this.iconStyles({
+      isDisabled: this.isDisabled,
+      isOpen: this.isOpen
+    });
     return shared_tailwindElement_index.x`
       <div class="relative w-[inherit]">
         ${this.label ? this.labelTemplate() : shared_tailwindElement_index.A}
@@ -249,12 +336,8 @@ exports.LuksoSelect = class LuksoSelect extends shared_tailwindElement_index.Tai
         <div class="group">
           <div class="flex relative items-center">
             ${this.inputTemplate()}<lukso-icon
-              name=${this.isFullWidth ? "arrow-down-lg" : "arrow-down-sm"}
-              class="absolute right-0 mr-3 transition ${index.customClassMap({
-      ["opacity-60 cursor-not-allowed"]: this.isDisabled,
-      ["cursor-pointer"]: !this.isDisabled,
-      ["rotate-180"]: this.isOpen
-    })}"
+              name=${this.isLargeIcon ? "arrow-down-lg" : "arrow-down-sm"}
+              class="${iconStyles}"
               @click=${this.handleClick}
             ></lukso-icon>
           </div>
@@ -309,6 +392,9 @@ __decorateClass([
 __decorateClass([
   queryAssignedElements.n({ type: Boolean, attribute: "open-top" })
 ], exports.LuksoSelect.prototype, "openTop", 2);
+__decorateClass([
+  queryAssignedElements.n({ type: Boolean, attribute: "is-large-icon" })
+], exports.LuksoSelect.prototype, "isLargeIcon", 2);
 __decorateClass([
   state.t()
 ], exports.LuksoSelect.prototype, "optionsParsed", 2);

package/dist/components/lukso-select/index.d.ts

@@ -1,9 +1,16 @@
 import { PropertyValues, TemplateResult } from 'lit';
+import { Address } from '../../shared/types';
 export type SelectStringOption = {
     id?: string;
     value: string;
 };
-export type SelectOption = SelectStringOption;
+export type SelectProfileOption = {
+    id: string;
+    address: Address;
+    image?: string;
+    name?: string;
+};
+export type SelectOption = SelectStringOption | SelectProfileOption;
 declare const LuksoSelect_base: typeof import("lit").LitElement;
 export declare class LuksoSelect extends LuksoSelect_base {
     value: string;
@@ -20,9 +27,13 @@ export declare class LuksoSelect extends LuksoSelect_base {
     selected: any;
     isOpen: boolean;
     openTop: boolean;
+    isLargeIcon: boolean;
     private optionsParsed;
     private valueParsed;
-    private defaultInputStyles;
+    private inputStyles;
+    private dropdownWrapperStyles;
+    private optionsStyles;
+    private iconStyles;
     connectedCallback(): void;
     disconnectedCallback(): void;
     willUpdate(changedProperties: PropertyValues<this>): void;
@@ -33,6 +44,9 @@ export declare class LuksoSelect extends LuksoSelect_base {
     optionsTemplate(): TemplateResult<1>;
     dropdownWrapperTemplate(innerTemplate: TemplateResult<1> | TemplateResult<1>[]): TemplateResult<1>;
     optionStringTemplate(option: SelectStringOption, index: number): TemplateResult<1>;
+    optionProfileTemplate(option: SelectProfileOption, index: number): TemplateResult<1>;
+    private optionStringValue;
+    private optionProfileValue;
     private selectedValue;
     private handleOutsideDropdownClick;
     private handleDropdownKeydown;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,cAAc,EAAiB,MAAM,KAAK,CAAA;AAMnE,OAAO,yBAAyB,CAAA;AAChC,OAAO,4BAA4B,CAAA;AACnC,OAAO,6BAA6B,CAAA;AAEpC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,kBAAkB,CAAA;;AAE7C,qBACa,WAAY,SAAQ,gBAA4B;IAE3D,KAAK,SAAK;IAGV,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,EAAE,SAAK;IAGP,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,WAAW,UAAQ;IAGnB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,OAAO,SAAK;IAGZ,QAAQ,MAAY;IAGpB,MAAM,EAAE,OAAO,CAAQ;IAGvB,OAAO,EAAE,OAAO,CAAQ;IAGxB,OAAO,CAAC,aAAa,CAAqB;IAG1C,OAAO,CAAC,WAAW,CAAsC;IAEzD,OAAO,CAAC,kBAAkB,CAEuD;IAEjF,iBAAiB;IAKjB,oBAAoB;IAMpB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAwClD,aAAa;IAuBb,aAAa;IAQb,mBAAmB;IAQnB,aAAa;IAMb,eAAe;IAgBf,uBAAuB,CACrB,aAAa,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,EAAE;IAexD,oBAAoB,CAAC,MAAM,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM;IAmB9D,OAAO,CAAC,aAAa;IAYrB,OAAO,CAAC,0BAA0B;YAUpB,qBAAqB;YAiCrB,YAAY;YAiBZ,UAAU;IAcxB,OAAO,CAAC,WAAW;IAQnB,MAAM;CA2BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,cAAc,EAAiB,MAAM,KAAK,CAAA;AAMnE,OAAO,yBAAyB,CAAA;AAChC,OAAO,4BAA4B,CAAA;AACnC,OAAO,6BAA6B,CAAA;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAExC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,OAAO,EAAE,OAAO,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAAG,mBAAmB,CAAA;;AAEnE,qBACa,WAAY,SAAQ,gBAA4B;IAE3D,KAAK,SAAK;IAGV,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,EAAE,SAAK;IAGP,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,WAAW,UAAQ;IAGnB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,OAAO,SAAK;IAGZ,QAAQ,MAAY;IAGpB,MAAM,EAAE,OAAO,CAAQ;IAGvB,OAAO,EAAE,OAAO,CAAQ;IAGxB,WAAW,EAAE,OAAO,CAAQ;IAG5B,OAAO,CAAC,aAAa,CAAqB;IAG1C,OAAO,CAAC,WAAW,CAAsC;IAEzD,OAAO,CAAC,WAAW,CAoBjB;IAEF,OAAO,CAAC,qBAAqB,CAQ3B;IAEF,OAAO,CAAC,aAAa,CAWnB;IAEF,OAAO,CAAC,UAAU,CAUhB;IAEF,iBAAiB;IAKjB,oBAAoB;IAMpB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAwClD,aAAa;IAqBb,aAAa;IAQb,mBAAmB;IAQnB,aAAa;IAMb,eAAe;IAkBf,uBAAuB,CACrB,aAAa,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,EAAE;IASxD,oBAAoB,CAAC,MAAM,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM;IAiB9D,qBAAqB,CAAC,MAAM,EAAE,mBAAmB,EAAE,KAAK,EAAE,MAAM;IAiBhE,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,kBAAkB;IAkB1B,OAAO,CAAC,aAAa;IAkBrB,OAAO,CAAC,0BAA0B;YAUpB,qBAAqB;YAiCrB,YAAY;YAiBZ,UAAU;IAcxB,OAAO,CAAC,WAAW;IAQnB,MAAM;CA4BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}

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

@@ -1,13 +1,14 @@
-import { T as TailwindStyledElement, x, A } from '../../index-122da399.js';
+import { T as TailwindStyledElement, x, A } from '../../index-3373dd2c.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
 import { t } from '../../state-0a779257.js';
-import { c as customClassMap } from '../../index-5e194caf.js';
+import { s as se } from '../../index-c55a1069.js';
 import '../lukso-icon/index.js';
 import '../lukso-profile/index.js';
 import '../lukso-username/index.js';
+import '../../style-map-04ec407e.js';
 import '../../directive-2bb7789e.js';
-import '../../style-map-d0fa91c8.js';
-import '../../index-9c2f800a.js';
+import '../../index-5e194caf.js';
+import '../../index-b02bfbc3.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}";
 
@@ -39,11 +40,62 @@ let LuksoSelect = class extends TailwindStyledElement(style) {
     this.selected = void 0;
     this.isOpen = false;
     this.openTop = false;
+    this.isLargeIcon = false;
     this.optionsParsed = [];
     this.valueParsed = void 0;
-    this.defaultInputStyles = `bg-neutral-100 paragraph-inter-14-regular px-4 py-3 pr-11
-    border-solid h-[48px] placeholder:text-neutral-70 select-none whitespace-nowrap
-    outline-none transition transition-all duration-150 appearance-none rounded-12`;
+    this.inputStyles = se({
+      base: `bg-neutral-100 paragraph-inter-14-regular px-4 py-3 pr-11
+      border border-solid h-[48px] placeholder:text-neutral-70 select-none whitespace-nowrap
+      outline-none transition transition-all duration-150 appearance-none rounded-12
+      text-neutral-20 cursor-pointer border-neutral-90 group-hover:border-neutral-35
+      flex items-center`,
+      variants: {
+        isFullWidth: {
+          true: `w-full`
+        },
+        isDisabled: {
+          true: `cursor-not-allowed text-neutral-60 group-hover:border-neutral-90`
+        },
+        hasError: {
+          true: `border-red-85 group-hover:border-red-65`
+        },
+        borderless: {
+          true: `border-0`
+        }
+      }
+    });
+    this.dropdownWrapperStyles = se({
+      base: `bg-neutral-100 border w-full border-neutral-90 shadow-1xl rounded-12 p-3 z-50
+      flex absolute flex-col gap-1 overflow-y-auto max-h-64 mt-2`,
+      variants: {
+        openTop: {
+          true: `bottom-[48px] mb-2 mt-0`
+        }
+      }
+    });
+    this.optionsStyles = se({
+      base: `paragraph-inter-14-regular text-neutral-20 cursor-pointer rounded-8 p-2
+      whitespace-nowrap hover:bg-neutral-98 flex items-center`,
+      variants: {
+        isSelected: {
+          true: `bg-neutral-95 hover:bg-neutral-95`
+        },
+        isActive: {
+          true: `bg-neutral-98`
+        }
+      }
+    });
+    this.iconStyles = se({
+      base: `absolute right-0 mr-3 transition cursor-pointer`,
+      variants: {
+        isDisabled: {
+          true: `opacity-60 cursor-not-allowed`
+        },
+        isOpen: {
+          true: `rotate-180`
+        }
+      }
+    });
   }
   connectedCallback() {
     super.connectedCallback();
@@ -87,19 +139,17 @@ let LuksoSelect = class extends TailwindStyledElement(style) {
     }
   }
   inputTemplate() {
+    const inputStyles = this.inputStyles({
+      isFullWidth: this.isFullWidth,
+      isDisabled: this.isDisabled,
+      hasError: !!this.error,
+      borderless: this.borderless
+    });
     return x`
       <div
         id=${this.id}
         data-testid=${this.id ? `select-${this.id}` : "select"}
-        class=${customClassMap({
-      [this.defaultInputStyles]: true,
-      ["border-neutral-90 group-hover:border-neutral-35"]: !!!this.error && !this.isDisabled,
-      ["border-red-85 group-hover:border-red-65"]: !!this.error,
-      ["w-full"]: this.isFullWidth,
-      ["cursor-not-allowed text-neutral-60"]: this.isDisabled,
-      ["text-neutral-20 cursor-pointer"]: !this.isDisabled,
-      [this.borderless ? "border-0" : "border"]: true
-    })}
+        class=${inputStyles}
         @blur=${this.handleBlur}
         @click=${this.handleClick}
       >
@@ -132,6 +182,8 @@ let LuksoSelect = class extends TailwindStyledElement(style) {
       const index = Number(option[0]);
       if ("value" in option[1]) {
         optionTemplates.push(this.optionStringTemplate(option[1], index));
+      } else if ("address" in option[1]) {
+        optionTemplates.push(this.optionProfileTemplate(option[1], index));
       } else {
         console.error("Unknown option type", option);
       }
@@ -139,40 +191,71 @@ let LuksoSelect = class extends TailwindStyledElement(style) {
     return x`${this.dropdownWrapperTemplate(optionTemplates)}`;
   }
   dropdownWrapperTemplate(innerTemplate) {
+    const dropdownWrapperStyles = this.dropdownWrapperStyles({
+      openTop: this.openTop
+    });
+    return x`<div class="${dropdownWrapperStyles}">${innerTemplate}</div>`;
+  }
+  optionStringTemplate(option, index) {
+    const optionsStyles = this.optionsStyles({
+      isSelected: this.valueParsed?.id === option.id,
+      isActive: this.selected === index + 1 && this.valueParsed?.id !== option.id
+    });
     return x`<div
-      class="bg-neutral-100 border w-full border-neutral-90 shadow-1xl rounded-12 p-3 z-50 flex absolute flex-col gap-1 overflow-y-auto max-h-64 ${customClassMap(
-      {
-        ["bottom-[48px] mb-2"]: this.openTop,
-        ["mt-2"]: !this.openTop
-      }
-    )}
-      )}"
+      data-id="${option.id}"
+      data-index="${index + 1}"
+      class="${optionsStyles}"
+      @click=${() => this.handleSelect(option)}
     >
-      ${innerTemplate}
+      ${this.optionStringValue(option)}
     </div>`;
   }
-  optionStringTemplate(option, index) {
+  optionProfileTemplate(option, index) {
+    const optionsStyles = this.optionsStyles({
+      isSelected: this.valueParsed?.id === option.id,
+      isActive: this.selected === index + 1 && this.valueParsed?.id !== option.id
+    });
     return x`<div
       data-id="${option.id}"
       data-index="${index + 1}"
-      class="paragraph-inter-14-regular text-neutral-20 cursor-pointer rounded-8 p-2 whitespace-nowrap ${customClassMap(
-      {
-        ["bg-neutral-95 hover:bg-neutral-95"]: this.valueParsed?.id === option.id,
-        ["bg-neutral-98"]: this.selected === index + 1 && this.valueParsed?.id !== option.id,
-        ["hover:bg-neutral-98"]: this.valueParsed?.id !== option.id
-      }
-    )}"
+      class="${optionsStyles}"
       @click=${() => this.handleSelect(option)}
     >
-      ${option.value}
+      ${this.optionProfileValue(option)}
     </div>`;
   }
+  optionStringValue(option) {
+    return option.value;
+  }
+  optionProfileValue(option) {
+    return x`<lukso-profile
+        profile-address="${option.address}"
+        profile-url="${option.image}"
+        size="x-small"
+        has-identicon
+        class="mr-2"
+      ></lukso-profile>
+      <lukso-username
+        name="${option.name?.toLowerCase()}"
+        address="${option.address}"
+        name-color="neutral-20"
+        max-width="150"
+        slice-by="4"
+        size="medium"
+      ></lukso-username>`;
+  }
   selectedValue() {
     const foundValue = this.optionsParsed.find(
       (option) => option.id === this.valueParsed?.id
     );
     if (foundValue) {
-      return foundValue.value;
+      if ("value" in foundValue) {
+        return this.optionStringValue(foundValue);
+      } else if ("address" in foundValue) {
+        return this.optionProfileValue(foundValue);
+      } else {
+        console.error("Unknown value type", foundValue);
+      }
     }
     return "";
   }
@@ -238,6 +321,10 @@ let LuksoSelect = class extends TailwindStyledElement(style) {
     this.isOpen = !this.isOpen;
   }
   render() {
+    const iconStyles = this.iconStyles({
+      isDisabled: this.isDisabled,
+      isOpen: this.isOpen
+    });
     return x`
       <div class="relative w-[inherit]">
         ${this.label ? this.labelTemplate() : A}
@@ -245,12 +332,8 @@ let LuksoSelect = class extends TailwindStyledElement(style) {
         <div class="group">
           <div class="flex relative items-center">
             ${this.inputTemplate()}<lukso-icon
-              name=${this.isFullWidth ? "arrow-down-lg" : "arrow-down-sm"}
-              class="absolute right-0 mr-3 transition ${customClassMap({
-      ["opacity-60 cursor-not-allowed"]: this.isDisabled,
-      ["cursor-pointer"]: !this.isDisabled,
-      ["rotate-180"]: this.isOpen
-    })}"
+              name=${this.isLargeIcon ? "arrow-down-lg" : "arrow-down-sm"}
+              class="${iconStyles}"
               @click=${this.handleClick}
             ></lukso-icon>
           </div>
@@ -305,6 +388,9 @@ __decorateClass([
 __decorateClass([
   n({ type: Boolean, attribute: "open-top" })
 ], LuksoSelect.prototype, "openTop", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "is-large-icon" })
+], LuksoSelect.prototype, "isLargeIcon", 2);
 __decorateClass([
   t()
 ], LuksoSelect.prototype, "optionsParsed", 2);

package/dist/components/lukso-select/lukso-select.stories.d.ts

@@ -6,4 +6,6 @@ export default meta;
 export declare const DefaultSelect: any;
 /** Example of select that open top.  */
 export declare const OpenTop: any;
+/** Example of select with `profile` values.  */
+export declare const ProfileSelect: any;
 //# sourceMappingURL=lukso-select.stories.d.ts.map

package/dist/components/lukso-select/lukso-select.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lukso-select.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-select/lukso-select.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAGhD,OAAO,SAAS,CAAA;AAEhB,+DAA+D;AAC/D,QAAA,MAAM,IAAI,EAAE,IAiLX,CAAA;AAED,eAAe,IAAI,CAAA;AAgDnB,+CAA+C;AAC/C,eAAO,MAAM,aAAa,KAAoB,CAAA;AAK9C,wCAAwC;AACxC,eAAO,MAAM,OAAO,KAAoB,CAAA"}
+{"version":3,"file":"lukso-select.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-select/lukso-select.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAGhD,OAAO,SAAS,CAAA;AAEhB,+DAA+D;AAC/D,QAAA,MAAM,IAAI,EAAE,IAiMX,CAAA;AAED,eAAe,IAAI,CAAA;AAkDnB,+CAA+C;AAC/C,eAAO,MAAM,aAAa,KAAoB,CAAA;AAK9C,wCAAwC;AACxC,eAAO,MAAM,OAAO,KAAoB,CAAA;AAMxC,gDAAgD;AAChD,eAAO,MAAM,aAAa,KAAoB,CAAA"}

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-f25fc3ea.cjs');
+const shared_tailwindElement_index = require('../../index-534893a1.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
 
 const style = ":host {\n    display: inline-flex\n}";

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

@@ -1,4 +1,4 @@
-import { T as TailwindStyledElement, x } from '../../index-122da399.js';
+import { T as TailwindStyledElement, x } from '../../index-3373dd2c.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
 
 const style = ":host {\n    display: inline-flex\n}";