@lukso/web-components 1.172.13 → 1.172.17

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

@@ -1,14 +1,14 @@
-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 { s as safeCustomElement } from '../../chunks/safe-custom-element-qdGIR_v6.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 { a as TailwindStyledElement, s as safeCustomElement } from '../../chunks/index-DluTRl1F.js';
 import '../lukso-icon/index.js';
-import '../../chunks/index-BBFSnMaE.js';
+import '../lukso-profile/index.js';
+import '../../chunks/index-Chs3AjPK.js';
 import '../lukso-dropdown/index.js';
 import '../lukso-dropdown-option/index.js';
-import '../../chunks/index-B_H2eYG_.js';
+import '../../chunks/index-CA_aKopU.js';
 import '../lukso-form-label/index.js';
 import '../lukso-form-description/index.js';
 import '../lukso-form-error/index.js';
@@ -48,7 +48,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 +72,7 @@ let LuksoSelect = class extends TailwindStyledElement(style) {
         }
       }
     });
-    this.counterStyles = ce({
+    this.counterStyles = tv({
       base: "border border-neutral-20",
       variants: {
         isDisabled: {
@@ -86,7 +86,7 @@ let LuksoSelect = class extends TailwindStyledElement(style) {
         }
       }
     });
-    this.iconStyles = ce({
+    this.iconStyles = tv({
       base: "absolute right-0 transition cursor-pointer",
       variants: {
         isDisabled: {
@@ -157,7 +157,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 +165,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 +176,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 +211,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 +223,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 +236,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 +251,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 +268,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 +387,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 +402,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 +410,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,9 @@
 
 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 safeCustomElement = require('../../chunks/safe-custom-element-tQ-epw6h.js');
+const lit = require('lit');
+const decorators_js = require('lit/decorators.js');
+const index = require('../../chunks/index-BBPgtFEP.js');
 
 const style = ":host {\n    display: inline-flex\n}";
 
@@ -18,7 +18,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-exports.LuksoShare = class LuksoShare extends shared_tailwindElement_index.TailwindStyledElement(style) {
+exports.LuksoShare = class LuksoShare extends index.TailwindStyledElement(style) {
   constructor() {
     super(...arguments);
     this.customStyle = "";
@@ -45,7 +45,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 +69,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,11 +78,11 @@ 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")
+  index.safeCustomElement("lukso-share")
 ], exports.LuksoShare);

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

@@ -1,6 +1,6 @@
-import { b as TailwindStyledElement, x } from '../../chunks/index-5X9ujrWL.js';
-import { n } from '../../chunks/property-DfumgIL6.js';
-import { s as safeCustomElement } from '../../chunks/safe-custom-element-qdGIR_v6.js';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { a as TailwindStyledElement, s as safeCustomElement } from '../../chunks/index-DluTRl1F.js';
 
 const style = ":host {\n    display: inline-flex\n}";
 
@@ -41,7 +41,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 +65,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 +74,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")

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

@@ -2,13 +2,13 @@
 
 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 styleMap = require('../../chunks/style-map-B7XFhSOK.js');
-const index = require('../../chunks/index-CaJky2qL.js');
-const safeCustomElement = require('../../chunks/safe-custom-element-tQ-epw6h.js');
+const lit = require('lit');
+const decorators_js = require('lit/decorators.js');
+const styleMap = require('../../chunks/style-map-AEeBQfPb.js');
+const tailwindVariants = require('tailwind-variants');
+const index = require('../../chunks/index-BBPgtFEP.js');
 const uniqId = require('../../chunks/uniq-id-Cszs24DQ.js');
-require('../../chunks/index-BHAtoIlu.js');
+require('../../chunks/index-Dh7fuono.js');
 require('../lukso-form-label/index.cjs');
 require('../lukso-form-description/index.cjs');
 require('../lukso-form-error/index.cjs');
@@ -24,7 +24,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 const DEFAULT_COLOR = "green-54";
-exports.LuksoSwitch = class LuksoSwitch extends shared_tailwindElement_index.TailwindElement {
+exports.LuksoSwitch = class LuksoSwitch extends index.TailwindElement {
   constructor() {
     super();
     this.color = DEFAULT_COLOR;
@@ -35,7 +35,7 @@ exports.LuksoSwitch = class LuksoSwitch extends shared_tailwindElement_index.Tai
     this.error = "";
     this.isChecked = false;
     this.isDisabled = false;
-    this.styles = index.ce({
+    this.styles = tailwindVariants.tv({
       slots: {
         label: "transition duration-300 ease-in block h-6 overflow-hidden rounded-full relative inline-block w-10",
         input: "absolute block w-6 h-6 rounded-full bg-white border-2 appearance-none transition duration-300 ease-in"
@@ -94,7 +94,7 @@ exports.LuksoSwitch = class LuksoSwitch extends shared_tailwindElement_index.Tai
     if (!this.color) {
       this.color = DEFAULT_COLOR;
     }
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <div>
         <lukso-form-label
           for-name=${this.name}
@@ -132,32 +132,32 @@ exports.LuksoSwitch = class LuksoSwitch extends shared_tailwindElement_index.Tai
   }
 };
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoSwitch.prototype, "color", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoSwitch.prototype, "id", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoSwitch.prototype, "name", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoSwitch.prototype, "label", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoSwitch.prototype, "description", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoSwitch.prototype, "error", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-checked" })
+  decorators_js.property({ type: Boolean, attribute: "is-checked" })
 ], exports.LuksoSwitch.prototype, "isChecked", 2);
 __decorateClass([
-  property.n({
+  decorators_js.property({
     type: Boolean,
     attribute: "is-disabled"
   })
 ], exports.LuksoSwitch.prototype, "isDisabled", 2);
 exports.LuksoSwitch = __decorateClass([
-  safeCustomElement.safeCustomElement("lukso-switch")
+  index.safeCustomElement("lukso-switch")
 ], exports.LuksoSwitch);

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

@@ -1,10 +1,10 @@
-import { T as TailwindElement, x } from '../../chunks/index-5X9ujrWL.js';
-import { n } from '../../chunks/property-DfumgIL6.js';
-import { o } from '../../chunks/style-map-BPljJihp.js';
-import { c as ce } from '../../chunks/index-B9iart53.js';
-import { s as safeCustomElement } from '../../chunks/safe-custom-element-qdGIR_v6.js';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { o } from '../../chunks/style-map-auscxO0L.js';
+import { tv } from 'tailwind-variants';
+import { T as TailwindElement, s as safeCustomElement } from '../../chunks/index-DluTRl1F.js';
 import { u as uniqId } from '../../chunks/uniq-id-CGUN-pJV.js';
-import '../../chunks/index-B_H2eYG_.js';
+import '../../chunks/index-CA_aKopU.js';
 import '../lukso-form-label/index.js';
 import '../lukso-form-description/index.js';
 import '../lukso-form-error/index.js';
@@ -31,7 +31,7 @@ let LuksoSwitch = class extends TailwindElement {
     this.error = "";
     this.isChecked = false;
     this.isDisabled = false;
-    this.styles = ce({
+    this.styles = tv({
       slots: {
         label: "transition duration-300 ease-in block h-6 overflow-hidden rounded-full relative inline-block w-10",
         input: "absolute block w-6 h-6 rounded-full bg-white border-2 appearance-none transition duration-300 ease-in"
@@ -90,7 +90,7 @@ let LuksoSwitch = class extends TailwindElement {
     if (!this.color) {
       this.color = DEFAULT_COLOR;
     }
-    return x`
+    return html`
       <div>
         <lukso-form-label
           for-name=${this.name}
@@ -128,28 +128,28 @@ let LuksoSwitch = class extends TailwindElement {
   }
 };
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoSwitch.prototype, "color", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoSwitch.prototype, "id", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoSwitch.prototype, "name", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoSwitch.prototype, "label", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoSwitch.prototype, "description", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoSwitch.prototype, "error", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-checked" })
+  property({ type: Boolean, attribute: "is-checked" })
 ], LuksoSwitch.prototype, "isChecked", 2);
 __decorateClass([
-  n({
+  property({
     type: Boolean,
     attribute: "is-disabled"
   })

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

@@ -2,11 +2,11 @@
 
 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 index = require('../../chunks/index-CaJky2qL.js');
-const safeCustomElement = require('../../chunks/safe-custom-element-tQ-epw6h.js');
-const index$1 = require('../../chunks/index-C5YyB6ug.js');
+const lit = require('lit');
+const decorators_js = require('lit/decorators.js');
+const tailwindVariants = require('tailwind-variants');
+const index = require('../../chunks/index-BBPgtFEP.js');
+const index$1 = require('../../chunks/index-DvLZWpq9.js');
 
 const style = ":host {\n    display: inline-flex\n}";
 
@@ -20,7 +20,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-exports.LuksoTag = class LuksoTag extends shared_tailwindElement_index.TailwindStyledElement(style) {
+exports.LuksoTag = class LuksoTag extends index.TailwindStyledElement(style) {
   constructor() {
     super(...arguments);
     this.size = "small";
@@ -28,7 +28,7 @@ exports.LuksoTag = class LuksoTag extends shared_tailwindElement_index.TailwindS
     this.backgroundColor = "";
     this.borderColor = "";
     this.textColor = "";
-    this.tagStyles = index.ce({
+    this.tagStyles = tailwindVariants.tv({
       base: "inline-flex items-center justify-center border border-neutral-20 text-neutral-20 px-2 whitespace-nowrap",
       variants: {
         size: {
@@ -67,7 +67,7 @@ exports.LuksoTag = class LuksoTag extends shared_tailwindElement_index.TailwindS
       size: this.size,
       isRounded: this.isRounded
     });
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <div
         data-testid="tag"
         class=${tagStyles}
@@ -83,20 +83,20 @@ exports.LuksoTag = class LuksoTag extends shared_tailwindElement_index.TailwindS
   }
 };
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoTag.prototype, "size", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-rounded" })
+  decorators_js.property({ type: Boolean, attribute: "is-rounded" })
 ], exports.LuksoTag.prototype, "isRounded", 2);
 __decorateClass([
-  property.n({ type: String, attribute: "background-color" })
+  decorators_js.property({ type: String, attribute: "background-color" })
 ], exports.LuksoTag.prototype, "backgroundColor", 2);
 __decorateClass([
-  property.n({ type: String, attribute: "border-color" })
+  decorators_js.property({ type: String, attribute: "border-color" })
 ], exports.LuksoTag.prototype, "borderColor", 2);
 __decorateClass([
-  property.n({ type: String, attribute: "text-color" })
+  decorators_js.property({ type: String, attribute: "text-color" })
 ], exports.LuksoTag.prototype, "textColor", 2);
 exports.LuksoTag = __decorateClass([
-  safeCustomElement.safeCustomElement("lukso-tag")
+  index.safeCustomElement("lukso-tag")
 ], exports.LuksoTag);

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

@@ -1,8 +1,8 @@
-import { b as TailwindStyledElement, x } from '../../chunks/index-5X9ujrWL.js';
-import { n } from '../../chunks/property-DfumgIL6.js';
-import { c as ce } from '../../chunks/index-B9iart53.js';
-import { s as safeCustomElement } from '../../chunks/safe-custom-element-qdGIR_v6.js';
-import { c as customStyleMap } from '../../chunks/index-CZGvLdJ0.js';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { tv } from 'tailwind-variants';
+import { a as TailwindStyledElement, s as safeCustomElement } from '../../chunks/index-DluTRl1F.js';
+import { c as customStyleMap } from '../../chunks/index-CqZm8OfY.js';
 
 const style = ":host {\n    display: inline-flex\n}";
 
@@ -24,7 +24,7 @@ let LuksoTag = class extends TailwindStyledElement(style) {
     this.backgroundColor = "";
     this.borderColor = "";
     this.textColor = "";
-    this.tagStyles = ce({
+    this.tagStyles = tv({
       base: "inline-flex items-center justify-center border border-neutral-20 text-neutral-20 px-2 whitespace-nowrap",
       variants: {
         size: {
@@ -63,7 +63,7 @@ let LuksoTag = class extends TailwindStyledElement(style) {
       size: this.size,
       isRounded: this.isRounded
     });
-    return x`
+    return html`
       <div
         data-testid="tag"
         class=${tagStyles}
@@ -79,19 +79,19 @@ let LuksoTag = class extends TailwindStyledElement(style) {
   }
 };
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoTag.prototype, "size", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-rounded" })
+  property({ type: Boolean, attribute: "is-rounded" })
 ], LuksoTag.prototype, "isRounded", 2);
 __decorateClass([
-  n({ type: String, attribute: "background-color" })
+  property({ type: String, attribute: "background-color" })
 ], LuksoTag.prototype, "backgroundColor", 2);
 __decorateClass([
-  n({ type: String, attribute: "border-color" })
+  property({ type: String, attribute: "border-color" })
 ], LuksoTag.prototype, "borderColor", 2);
 __decorateClass([
-  n({ type: String, attribute: "text-color" })
+  property({ type: String, attribute: "text-color" })
 ], LuksoTag.prototype, "textColor", 2);
 LuksoTag = __decorateClass([
   safeCustomElement("lukso-tag")