@lukso/web-components 1.85.0 → 1.86.0

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

@@ -1,4 +1,4 @@
-import { T as TailwindStyledElement, x, A } from '../../index-f72579d6.js';
+import { T as TailwindStyledElement, x, A } from '../../index-b2b49383.js';
 import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
 import { t } from '../../state-b9ca4e74.js';
 import { c as ce } from '../../index-ca8e900d.js';
@@ -6,11 +6,13 @@ import '../lukso-icon/index.js';
 import '../lukso-profile/index.js';
 import '../lukso-username/index.js';
 import '../lukso-input/index.js';
+import '../../index-30881141.js';
+import '../lukso-dropdown-option/index.js';
 import '../../bundle-mjs-fbc6e2a8.js';
-import '../../style-map-ad97bcc3.js';
+import '../../style-map-6e8b083a.js';
 import '../../directive-2bb7789e.js';
 import '../lukso-image/index.js';
-import '../../index-8043be8a.js';
+import '../../index-f1acf332.js';
 import '../../tailwind-config.js';
 import '../../cn-b54dcc61.js';
 
@@ -57,48 +59,21 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
     this.isDebouncing = false;
     this.resultsParsed = [];
     this.searchTerm = "";
-    this.inputStyles = ce({
+    this.styles = ce({
       slots: {
-        dropdownWrapper: "bg-neutral-100 border border-neutral-90 shadow-1xl z-50 flex absolute w-full flex-col gap-1 overflow-y-auto max-h-64",
         loading: "bg-neutral-95 w-full animate-pulse animation-delay-none"
       },
       variants: {
         size: {
           small: {
-            dropdownWrapper: "rounded-8 p-2 mt-1",
             loading: "h-7 rounded-4"
           },
           medium: {
-            dropdownWrapper: "rounded-12 p-3 mt-2",
             loading: "h-10 rounded-8"
           }
         }
       }
     });
-    this.resultStyles = ce({
-      slots: {
-        resultString: "text-neutral-20 cursor-pointer hover:bg-neutral-98",
-        resultProfile: "cursor-pointer hover:bg-neutral-98 flex gap-2 items-center"
-      },
-      variants: {
-        selected: {
-          true: {
-            resultString: "bg-neutral-98",
-            resultProfile: "bg-neutral-98"
-          }
-        },
-        size: {
-          small: {
-            resultString: "paragraph-inter-12-regular rounded-4 py-1 px-2",
-            resultProfile: "rounded-4 py-1 px-2"
-          },
-          medium: {
-            resultString: "paragraph-inter-14-regular rounded-8 p-2",
-            resultProfile: "rounded-8 p-2"
-          }
-        }
-      }
-    });
   }
   connectedCallback() {
     super.connectedCallback();
@@ -140,68 +115,84 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
         console.error("Unknown result type", result);
       }
     }
-    return x`${this.dropdownWrapperTemplate(resultTemplates)}`;
+    return x`<lukso-dropdown
+      size=${this.size}
+      is-open
+      is-open-on-outside-click
+      is-full-width
+      >${resultTemplates}</lukso-dropdown
+    >`;
   }
   noResultsTemplate() {
-    return x`${this.dropdownWrapperTemplate(
-      x`<div class="paragraph-inter-14-semi-bold text-neutral-20 pl-1">
+    return x`<lukso-dropdown
+      size=${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">
         ${this.noResultsText}
-      </div>`
-    )}`;
+      </div>`}</lukso-dropdown
+    >`;
   }
   loadingTemplate() {
-    const { loading } = this.inputStyles({
+    const { loading } = this.styles({
       size: this.size
     });
     if (this.showNoResults) {
-      return x`${this.dropdownWrapperTemplate(x`
-        <div role="status" class="flex flex-col gap-1">
-          <div class=${loading()}></div>
-        </div>
-      `)}`;
+      return x`<lukso-dropdown
+        size=${this.size}
+        is-open
+        is-open-on-outside-click
+        is-full-width
+        >${x`
+          <div role="status" class="flex flex-col gap-1">
+            <div class=${loading()}></div>
+          </div>
+        `}</lukso-dropdown
+      >`;
     }
     if (this.resultsParsed.length === 0 || this.resultsParsed.length > 5) {
-      return x`${this.dropdownWrapperTemplate(x`
+      return x`<lukso-dropdown
+        size=${this.size}
+        is-open
+        is-open-on-outside-click
+        is-full-width
+        >${x`
+          <div role="status" class="flex flex-col gap-1">
+            ${[...Array(5)].map(() => x`<div class=${loading()}></div>`)}
+          </div>
+        `}</lukso-dropdown
+      >`;
+    }
+    return x`<lukso-dropdown
+      size=${this.size}
+      is-open
+      is-open-on-outside-click
+      is-full-width
+      >${x`
         <div role="status" class="flex flex-col gap-1">
-          ${[...Array(5)].map(() => x`<div class=${loading()}></div>`)}
+          ${this.resultsParsed.map(() => x`<div class=${loading()}></div>`)}
         </div>
-      `)}`;
-    }
-    return x`${this.dropdownWrapperTemplate(x`
-      <div role="status" class="flex flex-col gap-1">
-        ${this.resultsParsed.map(() => x`<div class=${loading()}></div>`)}
-      </div>
-    `)}`;
-  }
-  dropdownWrapperTemplate(innerTemplate) {
-    const { dropdownWrapper } = this.inputStyles({
-      size: this.size
-    });
-    return x`<div class=${dropdownWrapper()}>${innerTemplate}</div>`;
+      `}</lukso-dropdown
+    >`;
   }
   resultStringTemplate(result, index) {
-    const { resultString } = this.resultStyles({
-      selected: this.selected === index + 1,
-      size: this.size
-    });
-    return x`<div
+    return x`<lukso-dropdown-option
       data-id="${result.id}"
       data-index="${index + 1}"
-      class=${resultString()}
+      ?is-selected=${this.selected === index + 1}
+      size=${this.size}
       @click=${() => this.handleSelect(result)}
     >
       ${result.value}
-    </div>`;
+    </lukso-dropdown-option>`;
   }
   resultProfileTemplate(result, index) {
-    const { resultProfile } = this.resultStyles({
-      selected: this.selected === index + 1,
-      size: this.size
-    });
-    return x`<div
+    return x`<lukso-dropdown-option
       data-id="${result.address}"
       data-index="${index + 1}"
-      class=${resultProfile()}
+      ?is-selected=${this.selected === index + 1}
+      size=${this.size}
       @click=${() => this.handleSelect(result)}
     >
       <lukso-profile
@@ -217,7 +208,7 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
         max-width="300"
         size="medium"
       ></lukso-username>
-    </div>`;
+    </lukso-dropdown-option>`;
   }
   async handleOutsideDropdownClick(event) {
     const element = event.target;

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

@@ -2,28 +2,25 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-e653a9ff.cjs');
+const shared_tailwindElement_index = require('../../index-df36fb06.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
 const state = require('../../state-d9fb972b.cjs');
 const index = require('../../index-1d3f4a5a.cjs');
 require('../lukso-icon/index.cjs');
 require('../lukso-profile/index.cjs');
 require('../lukso-username/index.cjs');
+const components_luksoDropdown_index = require('../../index-abf15ef1.cjs');
+require('../lukso-dropdown-option/index.cjs');
 require('../../bundle-mjs-d58a83c6.cjs');
-require('../../style-map-a6d61d04.cjs');
+require('../../style-map-7ce21e2c.cjs');
 require('../../directive-8278ab14.cjs');
 require('../lukso-image/index.cjs');
-require('../../index-3b498928.cjs');
+require('../../index-bf97dd78.cjs');
 require('../../tailwind-config.cjs');
 require('../../cn-5ceac001.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}";
 
-const uniqId = () => {
-  const s4 = () => ((1 + Math.random()) * 65536 | 0).toString(16).substring(1);
-  return `${s4() + s4()}-${s4()}-${s4()}-${s4()}-${s4()}${s4()}${s4()}`;
-};
-
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -95,65 +92,6 @@ exports.LuksoSelect = class LuksoSelect extends shared_tailwindElement_index.Tai
         }
       }
     });
-    this.dropdownWrapperStyles = index.ce({
-      base: `bg-neutral-100 border w-auto border-neutral-90 shadow-1xl z-50
-      flex absolute flex-col gap-1 overflow-y-auto max-h-64 `,
-      variants: {
-        openTop: {
-          true: "bottom-[48px] mb-2 mt-0"
-        },
-        size: {
-          small: "rounded-8 p-2 mt-1 max-w-[200px] min-w-[120px]",
-          medium: "rounded-12 p-3 mt-2 max-w-[300px] min-w-[200px]"
-        },
-        isRight: {
-          true: "right-0"
-        }
-      }
-    });
-    this.optionsStyles = index.ce({
-      base: `text-neutral-20 cursor-pointer
-      whitespace-nowrap flex items-center truncate`,
-      variants: {
-        isSelected: {
-          true: "bg-neutral-95"
-        },
-        isActive: {
-          true: "bg-neutral-98"
-        },
-        isGroup: {
-          true: ""
-        },
-        size: {
-          small: "paragraph-inter-12-regular rounded-4 py-1 px-2 min-h-[28px]",
-          medium: "paragraph-inter-14-regular rounded-8 p-2 min-h-[38px]"
-        },
-        isDisabled: {
-          true: "opacity-60 cursor-not-allowed"
-        },
-        isReadonly: {
-          true: "cursor-not-allowed",
-          false: "hover:bg-neutral-98"
-        }
-      },
-      compoundVariants: [
-        {
-          isGroup: true,
-          size: "small",
-          class: "pl-3"
-        },
-        {
-          isGroup: true,
-          size: "medium",
-          class: "pl-4"
-        },
-        {
-          isReadonly: false,
-          isSelected: true,
-          class: "hover:bg-neutral-95"
-        }
-      ]
-    });
     this.iconStyles = index.ce({
       base: "absolute right-0 transition cursor-pointer",
       variants: {
@@ -170,7 +108,7 @@ exports.LuksoSelect = class LuksoSelect extends shared_tailwindElement_index.Tai
       }
     });
     if (!this.id) {
-      this.id = uniqId();
+      this.id = components_luksoDropdown_index.uniqId();
     }
   }
   connectedCallback() {
@@ -278,15 +216,14 @@ exports.LuksoSelect = class LuksoSelect extends shared_tailwindElement_index.Tai
         console.error("Unknown option type", option);
       }
     }
-    return shared_tailwindElement_index.x`${this.dropdownWrapperTemplate(optionTemplates)}`;
-  }
-  dropdownWrapperTemplate(innerTemplate) {
-    const dropdownWrapperStyles = this.dropdownWrapperStyles({
-      openTop: this.openTop,
-      size: this.size,
-      isRight: this.isRight
-    });
-    return shared_tailwindElement_index.x`<div class="${dropdownWrapperStyles}">${innerTemplate}</div>`;
+    return shared_tailwindElement_index.x`<lukso-dropdown
+      size=${this.size}
+      is-open
+      is-open-on-outside-click
+      ?is-right=${this.isRight}
+      ?open-top=${this.openTop}
+      >${optionTemplates}</lukso-dropdown
+    >`;
   }
   optionGroupedStringTemplate(option, index) {
     return shared_tailwindElement_index.x`<div
@@ -302,39 +239,33 @@ exports.LuksoSelect = class LuksoSelect extends shared_tailwindElement_index.Tai
     })}`;
   }
   optionStringTemplate(option, index) {
-    const optionsStyles = this.optionsStyles({
-      isSelected: !!this.valueParsed?.find((value) => value.id === option.id),
-      isActive: this.selected === index + 1 && !this.valueParsed?.find((value) => value.id === option.id),
-      size: this.size,
-      isGroup: !!option.group,
-      isDisabled: this.isDisabled,
-      isReadonly: this.isReadonly
-    });
-    return shared_tailwindElement_index.x`<div
+    return shared_tailwindElement_index.x`<lukso-dropdown-option
       data-id="${option.id}"
       data-index="${index + 1}"
-      class="${optionsStyles}"
+      ?is-selected=${!!this.valueParsed?.find((value) => value.id === option.id)}
+      ?is-active=${this.selected === index + 1 && !this.valueParsed?.find((value) => value.id === option.id)}
+      size=${this.size}
+      ?is-group=${!!option.group}
+      ?is-disabled=${this.isDisabled}
+      ?is-readonly=${this.isReadonly}
       @click=${() => this.handleSelect(option)}
     >
       ${this.optionStringValue(option)}
-    </div>`;
+    </lukso-dropdown-option>`;
   }
   optionProfileTemplate(option, index) {
-    const optionsStyles = this.optionsStyles({
-      isSelected: !!this.valueParsed?.find((value) => value.id === option.id),
-      isActive: this.selected === index + 1 && !this.valueParsed?.find((value) => value.id === option.id),
-      size: this.size,
-      isDisabled: this.isDisabled,
-      isReadonly: this.isReadonly
-    });
-    return shared_tailwindElement_index.x`<div
+    return shared_tailwindElement_index.x`<lukso-dropdown-option
       data-id="${option.id}"
       data-index="${index + 1}"
-      class="${optionsStyles}"
+      ?is-selected=${!!this.valueParsed?.find((value) => value.id === option.id)}
+      ?is-active=${this.selected === index + 1 && !this.valueParsed?.find((value) => value.id === option.id)}
+      size=${this.size}
+      ?is-disabled=${this.isDisabled}
+      ?is-readonly=${this.isReadonly}
       @click=${() => this.handleSelect(option)}
     >
       ${this.optionProfileValue(option)}
-    </div>`;
+    </lukso-dropdown-option>`;
   }
   optionStringValue(option) {
     return option.value;

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

@@ -42,8 +42,6 @@ export declare class LuksoSelect extends LuksoSelect_base {
     constructor();
     private inputStyles;
     private counterStyles;
-    private dropdownWrapperStyles;
-    private optionsStyles;
     private iconStyles;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -54,7 +52,6 @@ export declare class LuksoSelect extends LuksoSelect_base {
     descriptionTemplate(): TemplateResult<1>;
     errorTemplate(): TemplateResult<1>;
     optionsTemplate(): TemplateResult<1>;
-    dropdownWrapperTemplate(innerTemplate: TemplateResult<1> | TemplateResult<1>[]): TemplateResult<1>;
     optionGroupedStringTemplate(option: SelectGroupedStringOption, index: number): TemplateResult<1>;
     optionStringTemplate(option: SelectStringOption, index: number): TemplateResult<1>;
     optionProfileTemplate(option: SelectProfileOption, index: number): TemplateResult<1>;

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,KAAK,cAAc,EAAE,KAAK,cAAc,EAAiB,MAAM,KAAK,CAAA;AAK7E,OAAO,yBAAyB,CAAA;AAChC,OAAO,4BAA4B,CAAA;AACnC,OAAO,6BAA6B,CAAA;AAIpC,OAAO,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAExD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,EAAE,OAAO,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,yBAAyB,GAAG;IACtC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,EAAE,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,YAAY,GACpB,kBAAkB,GAClB,mBAAmB,GACnB,yBAAyB,CAAA;;AAE7B,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,UAAQ;IAGd,OAAO,UAAQ;IAGf,WAAW,UAAQ;IAGnB,OAAO,UAAQ;IAGf,IAAI,EAAE,SAAS,CAAW;IAG1B,oBAAoB,UAAQ;IAG5B,OAAO,CAAC,aAAa,CAAqB;IAG1C,OAAO,CAAC,WAAW,CAAwC;;IAU3D,OAAO,CAAC,WAAW,CAyBjB;IAEF,OAAO,CAAC,aAAa,CAanB;IAEF,OAAO,CAAC,qBAAqB,CAe3B;IAEF,OAAO,CAAC,aAAa,CA0CnB;IAEF,OAAO,CAAC,UAAU,CAchB;IAEF,iBAAiB;IAMjB,oBAAoB;IAMpB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IA0ClD,aAAa;IA4Bb,8BAA8B;IAS9B,aAAa;IAQb,mBAAmB;IAQnB,aAAa;IAMb,eAAe;IAoBf,uBAAuB,CACrB,aAAa,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,EAAE;IAWxD,2BAA2B,CACzB,MAAM,EAAE,yBAAyB,EACjC,KAAK,EAAE,MAAM;IAef,oBAAoB,CAAC,MAAM,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM;IAsB9D,qBAAqB,CAAC,MAAM,EAAE,mBAAmB,EAAE,KAAK,EAAE,MAAM;IAqBhE,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,kBAAkB;IAkB1B,OAAO,CAAC,qBAAqB;IA2D7B,OAAO,CAAC,0BAA0B;YAUpB,qBAAqB;YAqCrB,YAAY;YAiBZ,UAAU;IAcxB,OAAO,CAAC,WAAW;IAQnB,MAAM;CA6BP;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,KAAK,cAAc,EAAE,KAAK,cAAc,EAAiB,MAAM,KAAK,CAAA;AAK7E,OAAO,yBAAyB,CAAA;AAChC,OAAO,4BAA4B,CAAA;AACnC,OAAO,6BAA6B,CAAA;AACpC,OAAO,6BAA6B,CAAA;AACpC,OAAO,oCAAoC,CAAA;AAI3C,OAAO,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAExD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,EAAE,OAAO,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,yBAAyB,GAAG;IACtC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,EAAE,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,YAAY,GACpB,kBAAkB,GAClB,mBAAmB,GACnB,yBAAyB,CAAA;;AAE7B,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,UAAQ;IAGd,OAAO,UAAQ;IAGf,WAAW,UAAQ;IAGnB,OAAO,UAAQ;IAGf,IAAI,EAAE,SAAS,CAAW;IAG1B,oBAAoB,UAAQ;IAG5B,OAAO,CAAC,aAAa,CAAqB;IAG1C,OAAO,CAAC,WAAW,CAAwC;;IAU3D,OAAO,CAAC,WAAW,CAyBjB;IAEF,OAAO,CAAC,aAAa,CAanB;IAEF,OAAO,CAAC,UAAU,CAchB;IAEF,iBAAiB;IAMjB,oBAAoB;IAMpB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IA0ClD,aAAa;IA4Bb,8BAA8B;IAS9B,aAAa;IAQb,mBAAmB;IAQnB,aAAa;IAMb,eAAe;IA2Bf,2BAA2B,CACzB,MAAM,EAAE,yBAAyB,EACjC,KAAK,EAAE,MAAM;IAef,oBAAoB,CAAC,MAAM,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM;IAiB9D,qBAAqB,CAAC,MAAM,EAAE,mBAAmB,EAAE,KAAK,EAAE,MAAM;IAgBhE,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,kBAAkB;IAkB1B,OAAO,CAAC,qBAAqB;IA2D7B,OAAO,CAAC,0BAA0B;YAUpB,qBAAqB;YAqCrB,YAAY;YAiBZ,UAAU;IAcxB,OAAO,CAAC,WAAW;IAQnB,MAAM;CA6BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}

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

@@ -1,25 +1,22 @@
-import { T as TailwindStyledElement, x, A } from '../../index-f72579d6.js';
+import { T as TailwindStyledElement, x, A } from '../../index-b2b49383.js';
 import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
 import { t } from '../../state-b9ca4e74.js';
 import { c as ce } from '../../index-ca8e900d.js';
 import '../lukso-icon/index.js';
 import '../lukso-profile/index.js';
 import '../lukso-username/index.js';
+import { u as uniqId } from '../../index-30881141.js';
+import '../lukso-dropdown-option/index.js';
 import '../../bundle-mjs-fbc6e2a8.js';
-import '../../style-map-ad97bcc3.js';
+import '../../style-map-6e8b083a.js';
 import '../../directive-2bb7789e.js';
 import '../lukso-image/index.js';
-import '../../index-8043be8a.js';
+import '../../index-f1acf332.js';
 import '../../tailwind-config.js';
 import '../../cn-b54dcc61.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}";
 
-const uniqId = () => {
-  const s4 = () => ((1 + Math.random()) * 65536 | 0).toString(16).substring(1);
-  return `${s4() + s4()}-${s4()}-${s4()}-${s4()}-${s4()}${s4()}${s4()}`;
-};
-
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -91,65 +88,6 @@ let LuksoSelect = class extends TailwindStyledElement(style) {
         }
       }
     });
-    this.dropdownWrapperStyles = ce({
-      base: `bg-neutral-100 border w-auto border-neutral-90 shadow-1xl z-50
-      flex absolute flex-col gap-1 overflow-y-auto max-h-64 `,
-      variants: {
-        openTop: {
-          true: "bottom-[48px] mb-2 mt-0"
-        },
-        size: {
-          small: "rounded-8 p-2 mt-1 max-w-[200px] min-w-[120px]",
-          medium: "rounded-12 p-3 mt-2 max-w-[300px] min-w-[200px]"
-        },
-        isRight: {
-          true: "right-0"
-        }
-      }
-    });
-    this.optionsStyles = ce({
-      base: `text-neutral-20 cursor-pointer
-      whitespace-nowrap flex items-center truncate`,
-      variants: {
-        isSelected: {
-          true: "bg-neutral-95"
-        },
-        isActive: {
-          true: "bg-neutral-98"
-        },
-        isGroup: {
-          true: ""
-        },
-        size: {
-          small: "paragraph-inter-12-regular rounded-4 py-1 px-2 min-h-[28px]",
-          medium: "paragraph-inter-14-regular rounded-8 p-2 min-h-[38px]"
-        },
-        isDisabled: {
-          true: "opacity-60 cursor-not-allowed"
-        },
-        isReadonly: {
-          true: "cursor-not-allowed",
-          false: "hover:bg-neutral-98"
-        }
-      },
-      compoundVariants: [
-        {
-          isGroup: true,
-          size: "small",
-          class: "pl-3"
-        },
-        {
-          isGroup: true,
-          size: "medium",
-          class: "pl-4"
-        },
-        {
-          isReadonly: false,
-          isSelected: true,
-          class: "hover:bg-neutral-95"
-        }
-      ]
-    });
     this.iconStyles = ce({
       base: "absolute right-0 transition cursor-pointer",
       variants: {
@@ -274,15 +212,14 @@ let LuksoSelect = class extends TailwindStyledElement(style) {
         console.error("Unknown option type", option);
       }
     }
-    return x`${this.dropdownWrapperTemplate(optionTemplates)}`;
-  }
-  dropdownWrapperTemplate(innerTemplate) {
-    const dropdownWrapperStyles = this.dropdownWrapperStyles({
-      openTop: this.openTop,
-      size: this.size,
-      isRight: this.isRight
-    });
-    return x`<div class="${dropdownWrapperStyles}">${innerTemplate}</div>`;
+    return x`<lukso-dropdown
+      size=${this.size}
+      is-open
+      is-open-on-outside-click
+      ?is-right=${this.isRight}
+      ?open-top=${this.openTop}
+      >${optionTemplates}</lukso-dropdown
+    >`;
   }
   optionGroupedStringTemplate(option, index) {
     return x`<div
@@ -298,39 +235,33 @@ let LuksoSelect = class extends TailwindStyledElement(style) {
     })}`;
   }
   optionStringTemplate(option, index) {
-    const optionsStyles = this.optionsStyles({
-      isSelected: !!this.valueParsed?.find((value) => value.id === option.id),
-      isActive: this.selected === index + 1 && !this.valueParsed?.find((value) => value.id === option.id),
-      size: this.size,
-      isGroup: !!option.group,
-      isDisabled: this.isDisabled,
-      isReadonly: this.isReadonly
-    });
-    return x`<div
+    return x`<lukso-dropdown-option
       data-id="${option.id}"
       data-index="${index + 1}"
-      class="${optionsStyles}"
+      ?is-selected=${!!this.valueParsed?.find((value) => value.id === option.id)}
+      ?is-active=${this.selected === index + 1 && !this.valueParsed?.find((value) => value.id === option.id)}
+      size=${this.size}
+      ?is-group=${!!option.group}
+      ?is-disabled=${this.isDisabled}
+      ?is-readonly=${this.isReadonly}
       @click=${() => this.handleSelect(option)}
     >
       ${this.optionStringValue(option)}
-    </div>`;
+    </lukso-dropdown-option>`;
   }
   optionProfileTemplate(option, index) {
-    const optionsStyles = this.optionsStyles({
-      isSelected: !!this.valueParsed?.find((value) => value.id === option.id),
-      isActive: this.selected === index + 1 && !this.valueParsed?.find((value) => value.id === option.id),
-      size: this.size,
-      isDisabled: this.isDisabled,
-      isReadonly: this.isReadonly
-    });
-    return x`<div
+    return x`<lukso-dropdown-option
       data-id="${option.id}"
       data-index="${index + 1}"
-      class="${optionsStyles}"
+      ?is-selected=${!!this.valueParsed?.find((value) => value.id === option.id)}
+      ?is-active=${this.selected === index + 1 && !this.valueParsed?.find((value) => value.id === option.id)}
+      size=${this.size}
+      ?is-disabled=${this.isDisabled}
+      ?is-readonly=${this.isReadonly}
       @click=${() => this.handleSelect(option)}
     >
       ${this.optionProfileValue(option)}
-    </div>`;
+    </lukso-dropdown-option>`;
   }
   optionStringValue(option) {
     return option.value;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-e653a9ff.cjs');
+const shared_tailwindElement_index = require('../../index-df36fb06.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-d5e45650.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-f72579d6.js';
+import { T as TailwindStyledElement, x } from '../../index-b2b49383.js';
 import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
 
 const style = ":host {\n    display: inline-flex\n}";

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-e653a9ff.cjs');
+const shared_tailwindElement_index = require('../../index-df36fb06.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
-const styleMap = require('../../style-map-a6d61d04.cjs');
+const styleMap = require('../../style-map-7ce21e2c.cjs');
 const index = require('../../index-e9668573.cjs');
 require('../../directive-8278ab14.cjs');
 

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

@@ -1,6 +1,6 @@
-import { a as TailwindElement, x } from '../../index-f72579d6.js';
+import { a as TailwindElement, x } from '../../index-b2b49383.js';
 import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
-import { o } from '../../style-map-ad97bcc3.js';
+import { o } from '../../style-map-6e8b083a.js';
 import { c as customClassMap } from '../../index-5e194caf.js';
 import '../../directive-2bb7789e.js';
 

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-e653a9ff.cjs');
+const shared_tailwindElement_index = require('../../index-df36fb06.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
 const index = require('../../index-1d3f4a5a.cjs');
-const index$1 = require('../../index-3b498928.cjs');
+const index$1 = require('../../index-bf97dd78.cjs');
 require('../../bundle-mjs-d58a83c6.cjs');
 require('../../directive-8278ab14.cjs');
 

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

@@ -1,7 +1,7 @@
-import { T as TailwindStyledElement, x } from '../../index-f72579d6.js';
+import { T as TailwindStyledElement, x } from '../../index-b2b49383.js';
 import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
 import { c as ce } from '../../index-ca8e900d.js';
-import { c as customStyleMap } from '../../index-8043be8a.js';
+import { c as customStyleMap } from '../../index-f1acf332.js';
 import '../../bundle-mjs-fbc6e2a8.js';
 import '../../directive-2bb7789e.js';