@lukso/web-components 1.172.13 → 1.172.14

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

@@ -1,17 +1,20 @@
-import '../../chunks/index-BDyLu6M0.js';
-import '../../chunks/index-5X9ujrWL.js';
-import '../../chunks/property-DfumgIL6.js';
-import '../../chunks/state-CaelFSbE.js';
-import '../../chunks/index-B9iart53.js';
+import 'ethereum-blockies-base64';
+import 'lit';
+import 'lit/decorators.js';
+import 'tailwind-variants';
 import '../../chunks/safe-custom-element-qdGIR_v6.js';
 import '../lukso-dropdown/index.js';
 import '../lukso-dropdown-option/index.js';
 import '../lukso-icon/index.js';
 import '../lukso-input/index.js';
+import '../lukso-profile/index.js';
 import '../lukso-tag/index.js';
-import '../../chunks/index-BBFSnMaE.js';
+import '../../chunks/index-BNt_JinF.js';
 import '../lukso-tooltip/index.js';
+import '../../shared/tailwind-element/index.js';
 import '../../tailwind-config.js';
-import '../../chunks/axe-DJKac19y.js';
-export { L as LuksoSearch } from '../../chunks/index-Dn2DJhID.js';
+import '../../chunks/cn-LM_JlZIN.js';
+import 'viem';
+import 'axe-core';
+export { L as LuksoSearch } from '../../chunks/index-Ds-r8fCt.js';
 import '../../chunks/uniq-id-CGUN-pJV.js';

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

@@ -2,17 +2,18 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../chunks/index-BxQ_0s_1.js');
-const property = require('../../chunks/property-D6IL6zax.js');
-const state = require('../../chunks/state-CFjY89m3.js');
-const index = require('../../chunks/index-CaJky2qL.js');
-const components_luksoProfile_index = require('../../chunks/index-BAf8Hzhe.js');
+const lit = require('lit');
+const decorators_js = require('lit/decorators.js');
+const tailwindVariants = require('tailwind-variants');
+const makeBlockie = require('ethereum-blockies-base64');
 const safeCustomElement = require('../../chunks/safe-custom-element-tQ-epw6h.js');
+const shared_tailwindElement_index = require('../../shared/tailwind-element/index.cjs');
 require('../lukso-icon/index.cjs');
-require('../../chunks/index-glHBylgQ.js');
+require('../lukso-profile/index.cjs');
+require('../../chunks/index-Cy2_2lFt.js');
 require('../lukso-dropdown/index.cjs');
 require('../lukso-dropdown-option/index.cjs');
-require('../../chunks/index-BHAtoIlu.js');
+require('../../chunks/index-cakeic-M.js');
 require('../lukso-form-label/index.cjs');
 require('../lukso-form-description/index.cjs');
 require('../lukso-form-error/index.cjs');
@@ -52,7 +53,7 @@ exports.LuksoSelect = class LuksoSelect extends shared_tailwindElement_index.Tai
     this.showSelectionCounter = false;
     this.optionsParsed = [];
     this.valueParsed = void 0;
-    this.inputStyles = index.ce({
+    this.inputStyles = tailwindVariants.tv({
       base: `bg-neutral-100
       border border-solid placeholder:text-neutral-70 select-none whitespace-nowrap
       outline-none transition transition-all duration-150 appearance-none
@@ -76,7 +77,7 @@ exports.LuksoSelect = class LuksoSelect extends shared_tailwindElement_index.Tai
         }
       }
     });
-    this.counterStyles = index.ce({
+    this.counterStyles = tailwindVariants.tv({
       base: "border border-neutral-20",
       variants: {
         isDisabled: {
@@ -90,7 +91,7 @@ exports.LuksoSelect = class LuksoSelect extends shared_tailwindElement_index.Tai
         }
       }
     });
-    this.iconStyles = index.ce({
+    this.iconStyles = tailwindVariants.tv({
       base: "absolute right-0 transition cursor-pointer",
       variants: {
         isDisabled: {
@@ -161,7 +162,7 @@ exports.LuksoSelect = class LuksoSelect extends shared_tailwindElement_index.Tai
       borderless: this.borderless,
       size: this.size
     });
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <div
         id=${this.id}
         data-testid=${this.id ? `select-${this.id}` : "select"}
@@ -169,9 +170,9 @@ exports.LuksoSelect = class LuksoSelect extends shared_tailwindElement_index.Tai
         @blur=${this.handleBlur}
         @click=${this.handleClick}
       >
-        ${this.placeholder ? this.placeholder : shared_tailwindElement_index.E}
-        ${!this.placeholder && this.valueParsed?.length ? this.selectedValueTemplate() : shared_tailwindElement_index.E}
-        ${this.showSelectionCounter && this.valueParsed?.length ? this.selectedOptionsCounterTemplate() : shared_tailwindElement_index.E}
+        ${this.placeholder ? this.placeholder : lit.nothing}
+        ${!this.placeholder && this.valueParsed?.length ? this.selectedValueTemplate() : lit.nothing}
+        ${this.showSelectionCounter && this.valueParsed?.length ? this.selectedOptionsCounterTemplate() : lit.nothing}
       </div>
     `;
   }
@@ -180,7 +181,7 @@ exports.LuksoSelect = class LuksoSelect extends shared_tailwindElement_index.Tai
       isDisabled: this.isDisabled,
       size: this.size
     });
-    return shared_tailwindElement_index.x`<div class=${counterStyles}>${this.valueParsed?.length}</div>`;
+    return lit.html`<div class=${counterStyles}>${this.valueParsed?.length}</div>`;
   }
   optionsTemplate() {
     const optionTemplates = [];
@@ -215,7 +216,7 @@ exports.LuksoSelect = class LuksoSelect extends shared_tailwindElement_index.Tai
         console.error("Unknown option type", option);
       }
     }
-    return shared_tailwindElement_index.x`<lukso-dropdown
+    return lit.html`<lukso-dropdown
       size=${this.size}
       is-open
       is-open-on-outside-click
@@ -227,7 +228,7 @@ exports.LuksoSelect = class LuksoSelect extends shared_tailwindElement_index.Tai
     >`;
   }
   optionGroupedStringTemplate(option, index) {
-    return shared_tailwindElement_index.x`<div
+    return lit.html`<div
         class="paragraph-inter-10-bold-uppercase text-neutral-20 p-1 text-left"
       >
         ${option.group}
@@ -240,7 +241,7 @@ exports.LuksoSelect = class LuksoSelect extends shared_tailwindElement_index.Tai
     })}`;
   }
   optionStringTemplate(option, index) {
-    return shared_tailwindElement_index.x`<lukso-dropdown-option
+    return lit.html`<lukso-dropdown-option
       data-id="${option.id}"
       data-index="${index + 1}"
       ?is-selected=${!!this.valueParsed?.find((value) => value.id === option.id)}
@@ -255,7 +256,7 @@ exports.LuksoSelect = class LuksoSelect extends shared_tailwindElement_index.Tai
     </lukso-dropdown-option>`;
   }
   optionProfileTemplate(option, index) {
-    return shared_tailwindElement_index.x`<lukso-dropdown-option
+    return lit.html`<lukso-dropdown-option
       data-id="${option.id}"
       data-index="${index + 1}"
       ?is-selected=${!!this.valueParsed?.find((value) => value.id === option.id)}
@@ -272,19 +273,19 @@ exports.LuksoSelect = class LuksoSelect extends shared_tailwindElement_index.Tai
     return option.value;
   }
   optionProfileValue(option) {
-    const eoaProfilePicture = shared_tailwindElement_index.x`<lukso-profile
+    const eoaProfilePicture = lit.html`<lukso-profile
       profile-address="${option.address}"
-      profile-url="${option.address ? components_luksoProfile_index.makeBlockie(option.address) : ""}"
+      profile-url="${option.address ? makeBlockie(option.address) : ""}"
       size="x-small"
     ></lukso-profile>`;
-    const lsp3ProfilePicture = shared_tailwindElement_index.x`<lukso-profile
+    const lsp3ProfilePicture = lit.html`<lukso-profile
       profile-address="${option.address}"
       profile-url="${option.image}"
       size="x-small"
       has-identicon
     ></lukso-profile>`;
     const profilePicture = option.isEOA ? eoaProfilePicture : lsp3ProfilePicture;
-    return shared_tailwindElement_index.x`${profilePicture}
+    return lit.html`${profilePicture}
       <lukso-username
         name="${option.name?.toLowerCase()}"
         address="${option.address}"
@@ -391,7 +392,7 @@ exports.LuksoSelect = class LuksoSelect extends shared_tailwindElement_index.Tai
       isOpen: this.isOpen,
       size: this.size
     });
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <div class="relative w-[inherit]">
         <lukso-form-label label=${this.label}></lukso-form-label>
         <lukso-form-description
@@ -406,7 +407,7 @@ exports.LuksoSelect = class LuksoSelect extends shared_tailwindElement_index.Tai
             ></lukso-icon>
           </div>
           <!-- options dropdown -->
-          ${this.isOpen && this.optionsParsed.length > 0 ? this.optionsTemplate() : shared_tailwindElement_index.E}
+          ${this.isOpen && this.optionsParsed.length > 0 ? this.optionsTemplate() : lit.nothing}
         </div>
         <lukso-form-error error=${this.error}></lukso-form-error>
       </div>
@@ -414,67 +415,67 @@ exports.LuksoSelect = class LuksoSelect extends shared_tailwindElement_index.Tai
   }
 };
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoSelect.prototype, "value", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoSelect.prototype, "placeholder", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoSelect.prototype, "label", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoSelect.prototype, "id", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoSelect.prototype, "description", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoSelect.prototype, "error", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-full-width" })
+  decorators_js.property({ type: Boolean, attribute: "is-full-width" })
 ], exports.LuksoSelect.prototype, "isFullWidth", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-readonly" })
+  decorators_js.property({ type: Boolean, attribute: "is-readonly" })
 ], exports.LuksoSelect.prototype, "isReadonly", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-disabled" })
+  decorators_js.property({ type: Boolean, attribute: "is-disabled" })
 ], exports.LuksoSelect.prototype, "isDisabled", 2);
 __decorateClass([
-  property.n({ type: Boolean })
+  decorators_js.property({ type: Boolean })
 ], exports.LuksoSelect.prototype, "borderless", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoSelect.prototype, "options", 2);
 __decorateClass([
-  property.n({ type: Number })
+  decorators_js.property({ type: Number })
 ], exports.LuksoSelect.prototype, "selected", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-open" })
+  decorators_js.property({ type: Boolean, attribute: "is-open" })
 ], exports.LuksoSelect.prototype, "isOpen", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "open-top" })
+  decorators_js.property({ type: Boolean, attribute: "open-top" })
 ], exports.LuksoSelect.prototype, "openTop", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-large-icon" })
+  decorators_js.property({ type: Boolean, attribute: "is-large-icon" })
 ], exports.LuksoSelect.prototype, "isLargeIcon", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-right" })
+  decorators_js.property({ type: Boolean, attribute: "is-right" })
 ], exports.LuksoSelect.prototype, "isRight", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoSelect.prototype, "size", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "show-selection-counter" })
+  decorators_js.property({ type: Boolean, attribute: "show-selection-counter" })
 ], exports.LuksoSelect.prototype, "showSelectionCounter", 2);
 __decorateClass([
-  property.n({ type: Number, attribute: "max-height", reflect: true })
+  decorators_js.property({ type: Number, attribute: "max-height", reflect: true })
 ], exports.LuksoSelect.prototype, "maxHeight", 2);
 __decorateClass([
-  state.r()
+  decorators_js.state()
 ], exports.LuksoSelect.prototype, "optionsParsed", 2);
 __decorateClass([
-  state.r()
+  decorators_js.state()
 ], exports.LuksoSelect.prototype, "valueParsed", 2);
 exports.LuksoSelect = __decorateClass([
   safeCustomElement.safeCustomElement("lukso-select")

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

@@ -1,14 +1,15 @@
-import { b as TailwindStyledElement, E, x } from '../../chunks/index-5X9ujrWL.js';
-import { n } from '../../chunks/property-DfumgIL6.js';
-import { r } from '../../chunks/state-CaelFSbE.js';
-import { c as ce } from '../../chunks/index-B9iart53.js';
-import { m as makeBlockie } from '../../chunks/index-BDyLu6M0.js';
+import { nothing, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { tv } from 'tailwind-variants';
+import makeBlockie from 'ethereum-blockies-base64';
 import { s as safeCustomElement } from '../../chunks/safe-custom-element-qdGIR_v6.js';
+import { TailwindStyledElement } from '../../shared/tailwind-element/index.js';
 import '../lukso-icon/index.js';
-import '../../chunks/index-BBFSnMaE.js';
+import '../lukso-profile/index.js';
+import '../../chunks/index-BNt_JinF.js';
 import '../lukso-dropdown/index.js';
 import '../lukso-dropdown-option/index.js';
-import '../../chunks/index-B_H2eYG_.js';
+import '../../chunks/index-CA6SrfZ-.js';
 import '../lukso-form-label/index.js';
 import '../lukso-form-description/index.js';
 import '../lukso-form-error/index.js';
@@ -48,7 +49,7 @@ let LuksoSelect = class extends TailwindStyledElement(style) {
     this.showSelectionCounter = false;
     this.optionsParsed = [];
     this.valueParsed = void 0;
-    this.inputStyles = ce({
+    this.inputStyles = tv({
       base: `bg-neutral-100
       border border-solid placeholder:text-neutral-70 select-none whitespace-nowrap
       outline-none transition transition-all duration-150 appearance-none
@@ -72,7 +73,7 @@ let LuksoSelect = class extends TailwindStyledElement(style) {
         }
       }
     });
-    this.counterStyles = ce({
+    this.counterStyles = tv({
       base: "border border-neutral-20",
       variants: {
         isDisabled: {
@@ -86,7 +87,7 @@ let LuksoSelect = class extends TailwindStyledElement(style) {
         }
       }
     });
-    this.iconStyles = ce({
+    this.iconStyles = tv({
       base: "absolute right-0 transition cursor-pointer",
       variants: {
         isDisabled: {
@@ -157,7 +158,7 @@ let LuksoSelect = class extends TailwindStyledElement(style) {
       borderless: this.borderless,
       size: this.size
     });
-    return x`
+    return html`
       <div
         id=${this.id}
         data-testid=${this.id ? `select-${this.id}` : "select"}
@@ -165,9 +166,9 @@ let LuksoSelect = class extends TailwindStyledElement(style) {
         @blur=${this.handleBlur}
         @click=${this.handleClick}
       >
-        ${this.placeholder ? this.placeholder : E}
-        ${!this.placeholder && this.valueParsed?.length ? this.selectedValueTemplate() : E}
-        ${this.showSelectionCounter && this.valueParsed?.length ? this.selectedOptionsCounterTemplate() : E}
+        ${this.placeholder ? this.placeholder : nothing}
+        ${!this.placeholder && this.valueParsed?.length ? this.selectedValueTemplate() : nothing}
+        ${this.showSelectionCounter && this.valueParsed?.length ? this.selectedOptionsCounterTemplate() : nothing}
       </div>
     `;
   }
@@ -176,7 +177,7 @@ let LuksoSelect = class extends TailwindStyledElement(style) {
       isDisabled: this.isDisabled,
       size: this.size
     });
-    return x`<div class=${counterStyles}>${this.valueParsed?.length}</div>`;
+    return html`<div class=${counterStyles}>${this.valueParsed?.length}</div>`;
   }
   optionsTemplate() {
     const optionTemplates = [];
@@ -211,7 +212,7 @@ let LuksoSelect = class extends TailwindStyledElement(style) {
         console.error("Unknown option type", option);
       }
     }
-    return x`<lukso-dropdown
+    return html`<lukso-dropdown
       size=${this.size}
       is-open
       is-open-on-outside-click
@@ -223,7 +224,7 @@ let LuksoSelect = class extends TailwindStyledElement(style) {
     >`;
   }
   optionGroupedStringTemplate(option, index) {
-    return x`<div
+    return html`<div
         class="paragraph-inter-10-bold-uppercase text-neutral-20 p-1 text-left"
       >
         ${option.group}
@@ -236,7 +237,7 @@ let LuksoSelect = class extends TailwindStyledElement(style) {
     })}`;
   }
   optionStringTemplate(option, index) {
-    return x`<lukso-dropdown-option
+    return html`<lukso-dropdown-option
       data-id="${option.id}"
       data-index="${index + 1}"
       ?is-selected=${!!this.valueParsed?.find((value) => value.id === option.id)}
@@ -251,7 +252,7 @@ let LuksoSelect = class extends TailwindStyledElement(style) {
     </lukso-dropdown-option>`;
   }
   optionProfileTemplate(option, index) {
-    return x`<lukso-dropdown-option
+    return html`<lukso-dropdown-option
       data-id="${option.id}"
       data-index="${index + 1}"
       ?is-selected=${!!this.valueParsed?.find((value) => value.id === option.id)}
@@ -268,19 +269,19 @@ let LuksoSelect = class extends TailwindStyledElement(style) {
     return option.value;
   }
   optionProfileValue(option) {
-    const eoaProfilePicture = x`<lukso-profile
+    const eoaProfilePicture = html`<lukso-profile
       profile-address="${option.address}"
       profile-url="${option.address ? makeBlockie(option.address) : ""}"
       size="x-small"
     ></lukso-profile>`;
-    const lsp3ProfilePicture = x`<lukso-profile
+    const lsp3ProfilePicture = html`<lukso-profile
       profile-address="${option.address}"
       profile-url="${option.image}"
       size="x-small"
       has-identicon
     ></lukso-profile>`;
     const profilePicture = option.isEOA ? eoaProfilePicture : lsp3ProfilePicture;
-    return x`${profilePicture}
+    return html`${profilePicture}
       <lukso-username
         name="${option.name?.toLowerCase()}"
         address="${option.address}"
@@ -387,7 +388,7 @@ let LuksoSelect = class extends TailwindStyledElement(style) {
       isOpen: this.isOpen,
       size: this.size
     });
-    return x`
+    return html`
       <div class="relative w-[inherit]">
         <lukso-form-label label=${this.label}></lukso-form-label>
         <lukso-form-description
@@ -402,7 +403,7 @@ let LuksoSelect = class extends TailwindStyledElement(style) {
             ></lukso-icon>
           </div>
           <!-- options dropdown -->
-          ${this.isOpen && this.optionsParsed.length > 0 ? this.optionsTemplate() : E}
+          ${this.isOpen && this.optionsParsed.length > 0 ? this.optionsTemplate() : nothing}
         </div>
         <lukso-form-error error=${this.error}></lukso-form-error>
       </div>
@@ -410,67 +411,67 @@ let LuksoSelect = class extends TailwindStyledElement(style) {
   }
 };
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoSelect.prototype, "value", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoSelect.prototype, "placeholder", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoSelect.prototype, "label", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoSelect.prototype, "id", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoSelect.prototype, "description", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoSelect.prototype, "error", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-full-width" })
+  property({ type: Boolean, attribute: "is-full-width" })
 ], LuksoSelect.prototype, "isFullWidth", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-readonly" })
+  property({ type: Boolean, attribute: "is-readonly" })
 ], LuksoSelect.prototype, "isReadonly", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-disabled" })
+  property({ type: Boolean, attribute: "is-disabled" })
 ], LuksoSelect.prototype, "isDisabled", 2);
 __decorateClass([
-  n({ type: Boolean })
+  property({ type: Boolean })
 ], LuksoSelect.prototype, "borderless", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoSelect.prototype, "options", 2);
 __decorateClass([
-  n({ type: Number })
+  property({ type: Number })
 ], LuksoSelect.prototype, "selected", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-open" })
+  property({ type: Boolean, attribute: "is-open" })
 ], LuksoSelect.prototype, "isOpen", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "open-top" })
+  property({ type: Boolean, attribute: "open-top" })
 ], LuksoSelect.prototype, "openTop", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-large-icon" })
+  property({ type: Boolean, attribute: "is-large-icon" })
 ], LuksoSelect.prototype, "isLargeIcon", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-right" })
+  property({ type: Boolean, attribute: "is-right" })
 ], LuksoSelect.prototype, "isRight", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoSelect.prototype, "size", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "show-selection-counter" })
+  property({ type: Boolean, attribute: "show-selection-counter" })
 ], LuksoSelect.prototype, "showSelectionCounter", 2);
 __decorateClass([
-  n({ type: Number, attribute: "max-height", reflect: true })
+  property({ type: Number, attribute: "max-height", reflect: true })
 ], LuksoSelect.prototype, "maxHeight", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoSelect.prototype, "optionsParsed", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoSelect.prototype, "valueParsed", 2);
 LuksoSelect = __decorateClass([
   safeCustomElement("lukso-select")

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

@@ -2,9 +2,10 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../chunks/index-BxQ_0s_1.js');
-const property = require('../../chunks/property-D6IL6zax.js');
+const lit = require('lit');
+const decorators_js = require('lit/decorators.js');
 const safeCustomElement = require('../../chunks/safe-custom-element-tQ-epw6h.js');
+const shared_tailwindElement_index = require('../../shared/tailwind-element/index.cjs');
 
 const style = ":host {\n    display: inline-flex\n}";
 
@@ -45,7 +46,7 @@ exports.LuksoShare = class LuksoShare extends shared_tailwindElement_index.Tailw
     };
   }
   linkTemplate(name, url) {
-    return shared_tailwindElement_index.x`<a
+    return lit.html`<a
       href=${url}
       target="_blank"
       class="transition-all duration-300 rounded-full opacity-50 hover:opacity-80 hover:shadow-button-medium-hover-primary h-7 w-7"
@@ -69,7 +70,7 @@ exports.LuksoShare = class LuksoShare extends shared_tailwindElement_index.Tailw
         linkTemplates.push(this.linkTemplate(provider.name, provider.url));
       }
     }
-    return shared_tailwindElement_index.x`<div
+    return lit.html`<div
       class="grid gap-2 sm:gap-4"
       style="grid-template-columns: repeat(${providers.length}, max-content); ${this.customStyle}"
     >
@@ -78,10 +79,10 @@ exports.LuksoShare = class LuksoShare extends shared_tailwindElement_index.Tailw
   }
 };
 __decorateClass([
-  property.n({ type: String, attribute: "custom-style" })
+  decorators_js.property({ type: String, attribute: "custom-style" })
 ], exports.LuksoShare.prototype, "customStyle", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoShare.prototype, "providers", 2);
 exports.LuksoShare = __decorateClass([
   safeCustomElement.safeCustomElement("lukso-share")

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

@@ -1,6 +1,7 @@
-import { b as TailwindStyledElement, x } from '../../chunks/index-5X9ujrWL.js';
-import { n } from '../../chunks/property-DfumgIL6.js';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
 import { s as safeCustomElement } from '../../chunks/safe-custom-element-qdGIR_v6.js';
+import { TailwindStyledElement } from '../../shared/tailwind-element/index.js';
 
 const style = ":host {\n    display: inline-flex\n}";
 
@@ -41,7 +42,7 @@ let LuksoShare = class extends TailwindStyledElement(style) {
     };
   }
   linkTemplate(name, url) {
-    return x`<a
+    return html`<a
       href=${url}
       target="_blank"
       class="transition-all duration-300 rounded-full opacity-50 hover:opacity-80 hover:shadow-button-medium-hover-primary h-7 w-7"
@@ -65,7 +66,7 @@ let LuksoShare = class extends TailwindStyledElement(style) {
         linkTemplates.push(this.linkTemplate(provider.name, provider.url));
       }
     }
-    return x`<div
+    return html`<div
       class="grid gap-2 sm:gap-4"
       style="grid-template-columns: repeat(${providers.length}, max-content); ${this.customStyle}"
     >
@@ -74,10 +75,10 @@ let LuksoShare = class extends TailwindStyledElement(style) {
   }
 };
 __decorateClass([
-  n({ type: String, attribute: "custom-style" })
+  property({ type: String, attribute: "custom-style" })
 ], LuksoShare.prototype, "customStyle", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoShare.prototype, "providers", 2);
 LuksoShare = __decorateClass([
   safeCustomElement("lukso-share")