@lukso/web-components 1.17.1 → 1.19.0

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-17cdeaed.cjs');
+const shared_tailwindElement_index = require('../../index-f230a866.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
 const state = require('../../state-a62a7d5d.cjs');
 const index = require('../../index-7dc05ee5.cjs');
@@ -50,8 +50,9 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
     rounded-r-12 border-l-0 before:bg-neutral-90 before:absolute before:top-[calc(50%-12px)] before:left-0
     before:w-[1px] before:h-[24px] whitespace-nowrap`;
   }
+  // @input works better in vue
   inputTemplate() {
-    return shared_tailwindElement_index.y`
+    return shared_tailwindElement_index.x`
       <input
         name=${this.name}
         type=${this.type}
@@ -79,7 +80,7 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
       [this.customClass]: !!this.customClass
     })}
         @focus=${this.handleFocus}
-        @change=${this.handleChange}
+        @input=${this.handleChange}
         @blur=${this.handleBlur}
         @keyup=${this.handleKeyUp}
         @keydown=${this.handleKeyDown}
@@ -90,7 +91,7 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
     `;
   }
   labelTemplate() {
-    return shared_tailwindElement_index.y`
+    return shared_tailwindElement_index.x`
       <label
         for=${this.name}
         class="heading-inter-14-bold text-neutral-20 pb-2 block"
@@ -99,19 +100,19 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
     `;
   }
   descriptionTemplate() {
-    return shared_tailwindElement_index.y`
+    return shared_tailwindElement_index.x`
       <div class="paragraph-inter-12-regular text-neutral-20 pb-2">
-        ${this.description ?? shared_tailwindElement_index.b}
+        ${this.description ?? shared_tailwindElement_index.A}
       </div>
     `;
   }
   errorTemplate() {
-    return shared_tailwindElement_index.y`<div class="paragraph-inter-12-regular text-red-65 pt-2">
+    return shared_tailwindElement_index.x`<div class="paragraph-inter-12-regular text-red-65 pt-2">
       ${this.error}
     </div>`;
   }
   unitTemplate() {
-    return shared_tailwindElement_index.y`<div
+    return shared_tailwindElement_index.x`<div
       class=${index.customClassMap({
       [this.defaultUnitStyles]: true,
       [this.error === "" ? "border-neutral-90" : "border-red-85"]: !this.hasHighlight,
@@ -198,14 +199,14 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
     }
   }
   render() {
-    return shared_tailwindElement_index.y`
+    return shared_tailwindElement_index.x`
       <div>
-        ${this.label ? this.labelTemplate() : shared_tailwindElement_index.b}
-        ${this.description ? this.descriptionTemplate() : shared_tailwindElement_index.b}
+        ${this.label ? this.labelTemplate() : shared_tailwindElement_index.A}
+        ${this.description ? this.descriptionTemplate() : shared_tailwindElement_index.A}
         <div class="flex">
-          ${this.inputTemplate()} ${this.unit ? this.unitTemplate() : shared_tailwindElement_index.b}
+          ${this.inputTemplate()} ${this.unit ? this.unitTemplate() : shared_tailwindElement_index.A}
         </div>
-        ${this.error ? this.errorTemplate() : shared_tailwindElement_index.b}
+        ${this.error ? this.errorTemplate() : shared_tailwindElement_index.A}
       </div>
     `;
   }

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

@@ -23,11 +23,11 @@ export declare class LuksoInput extends TailwindElement {
     private hasHighlight;
     private defaultInputStyles;
     private defaultUnitStyles;
-    inputTemplate(): import("lit").TemplateResult<1>;
-    labelTemplate(): import("lit").TemplateResult<1>;
-    descriptionTemplate(): import("lit").TemplateResult<1>;
-    errorTemplate(): import("lit").TemplateResult<1>;
-    unitTemplate(): import("lit").TemplateResult<1>;
+    inputTemplate(): import("lit-html").TemplateResult<1>;
+    labelTemplate(): import("lit-html").TemplateResult<1>;
+    descriptionTemplate(): import("lit-html").TemplateResult<1>;
+    errorTemplate(): import("lit-html").TemplateResult<1>;
+    unitTemplate(): import("lit-html").TemplateResult<1>;
     private handleFocus;
     private handleBlur;
     private handleChange;
@@ -36,7 +36,7 @@ export declare class LuksoInput extends TailwindElement {
     private handleKeyPress;
     private handleMouseOver;
     private handleMouseOut;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAG3D,qBACa,UAAW,SAAQ,eAAe;IAE7C,KAAK,SAAK;IAGV,IAAI,SAAK;IAGT,IAAI,SAAS;IAGb,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,YAAY,SAAO;IAGnB,EAAE,SAAK;IAGP,GAAG,MAAY;IAGf,MAAM,MAAY;IAGlB,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,IAAI,SAAK;IAGT,WAAW,SAAK;IAGhB,WAAW,UAAQ;IAGnB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,SAAS,UAAQ;IAGjB,GAAG,EAAE,MAAM,GAAG,SAAS,CAAY;IAGnC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAY;IAGnC,OAAO,CAAC,QAAQ,CAAQ;IAGxB,OAAO,CAAC,YAAY,CAAQ;IAE5B,OAAO,CAAC,kBAAkB,CAE4C;IAEtE,OAAO,CAAC,iBAAiB,CAG0B;IAEnD,aAAa;IA0Cb,aAAa;IAUb,mBAAmB;IAQnB,aAAa;IAMb,YAAY;IAgBZ,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,UAAU;IAelB,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,aAAa;IAarB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,cAAc;IAMtB,MAAM;CAYP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAA;KAC1B;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-input/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAG3D,qBACa,UAAW,SAAQ,eAAe;IAE7C,KAAK,SAAK;IAGV,IAAI,SAAK;IAGT,IAAI,SAAS;IAGb,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,YAAY,SAAO;IAGnB,EAAE,SAAK;IAGP,GAAG,MAAY;IAGf,MAAM,MAAY;IAGlB,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,IAAI,SAAK;IAGT,WAAW,SAAK;IAGhB,WAAW,UAAQ;IAGnB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,SAAS,UAAQ;IAGjB,GAAG,EAAE,MAAM,GAAG,SAAS,CAAY;IAGnC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAY;IAGnC,OAAO,CAAC,QAAQ,CAAQ;IAGxB,OAAO,CAAC,YAAY,CAAQ;IAE5B,OAAO,CAAC,kBAAkB,CAE4C;IAEtE,OAAO,CAAC,iBAAiB,CAG0B;IAGnD,aAAa;IA0Cb,aAAa;IAUb,mBAAmB;IAQnB,aAAa;IAMb,YAAY;IAgBZ,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,UAAU;IAelB,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,aAAa;IAarB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,cAAc;IAMtB,MAAM;CAYP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAA;KAC1B;CACF"}

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

@@ -1,4 +1,4 @@
-import { a as TailwindElement, y, b } from '../../index-84bddb70.js';
+import { a as TailwindElement, x, A } from '../../index-8d1ad2d4.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
 import { t } from '../../state-7fde94d1.js';
 import { c as customClassMap } from '../../index-714323c9.js';
@@ -46,8 +46,9 @@ let LuksoInput = class extends TailwindElement {
     rounded-r-12 border-l-0 before:bg-neutral-90 before:absolute before:top-[calc(50%-12px)] before:left-0
     before:w-[1px] before:h-[24px] whitespace-nowrap`;
   }
+  // @input works better in vue
   inputTemplate() {
-    return y`
+    return x`
       <input
         name=${this.name}
         type=${this.type}
@@ -75,7 +76,7 @@ let LuksoInput = class extends TailwindElement {
       [this.customClass]: !!this.customClass
     })}
         @focus=${this.handleFocus}
-        @change=${this.handleChange}
+        @input=${this.handleChange}
         @blur=${this.handleBlur}
         @keyup=${this.handleKeyUp}
         @keydown=${this.handleKeyDown}
@@ -86,7 +87,7 @@ let LuksoInput = class extends TailwindElement {
     `;
   }
   labelTemplate() {
-    return y`
+    return x`
       <label
         for=${this.name}
         class="heading-inter-14-bold text-neutral-20 pb-2 block"
@@ -95,19 +96,19 @@ let LuksoInput = class extends TailwindElement {
     `;
   }
   descriptionTemplate() {
-    return y`
+    return x`
       <div class="paragraph-inter-12-regular text-neutral-20 pb-2">
-        ${this.description ?? b}
+        ${this.description ?? A}
       </div>
     `;
   }
   errorTemplate() {
-    return y`<div class="paragraph-inter-12-regular text-red-65 pt-2">
+    return x`<div class="paragraph-inter-12-regular text-red-65 pt-2">
       ${this.error}
     </div>`;
   }
   unitTemplate() {
-    return y`<div
+    return x`<div
       class=${customClassMap({
       [this.defaultUnitStyles]: true,
       [this.error === "" ? "border-neutral-90" : "border-red-85"]: !this.hasHighlight,
@@ -194,14 +195,14 @@ let LuksoInput = class extends TailwindElement {
     }
   }
   render() {
-    return y`
+    return x`
       <div>
-        ${this.label ? this.labelTemplate() : b}
-        ${this.description ? this.descriptionTemplate() : b}
+        ${this.label ? this.labelTemplate() : A}
+        ${this.description ? this.descriptionTemplate() : A}
         <div class="flex">
-          ${this.inputTemplate()} ${this.unit ? this.unitTemplate() : b}
+          ${this.inputTemplate()} ${this.unit ? this.unitTemplate() : A}
         </div>
-        ${this.error ? this.errorTemplate() : b}
+        ${this.error ? this.errorTemplate() : A}
       </div>
     `;
   }

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-17cdeaed.cjs');
+const shared_tailwindElement_index = require('../../index-f230a866.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
 const index = require('../../index-7dc05ee5.cjs');
 
@@ -31,7 +31,7 @@ exports.LuksoModal = class LuksoModal extends shared_tailwindElement_index.Tailw
     this.isOpen = false;
   }
   render() {
-    return shared_tailwindElement_index.y`
+    return shared_tailwindElement_index.x`
       <div
         data-testid="modal"
         class=${index.customClassMap({

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

@@ -1,5 +1,5 @@
 import { TailwindElement } from '../../shared/tailwind-element';
-export declare type ModalSizes = 'small' | 'medium' | 'full';
+export type ModalSizes = 'small' | 'medium' | 'full';
 export declare class LuksoModal extends TailwindElement {
     isOpen: boolean;
     size: ModalSizes;
@@ -8,7 +8,7 @@ export declare class LuksoModal extends TailwindElement {
     private overlayStyles;
     private dialogStyles;
     private close;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAG3D,oBAAY,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;AAEpD,qBACa,UAAW,SAAQ,eAAe;IAE7C,MAAM,UAAQ;IAGd,IAAI,EAAE,UAAU,CAAU;IAE1B,OAAO,CAAC,aAAa,CAAwG;IAC7H,OAAO,CAAC,UAAU,CAA6E;IAC/F,OAAO,CAAC,aAAa,CAA4F;IACjH,OAAO,CAAC,YAAY,CAAqE;IAEzF,OAAO,CAAC,KAAK;IAIb,MAAM;CA4BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAA;KAC1B;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-modal/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAG3D,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;AAEpD,qBACa,UAAW,SAAQ,eAAe;IAE7C,MAAM,UAAQ;IAGd,IAAI,EAAE,UAAU,CAAU;IAE1B,OAAO,CAAC,aAAa,CAAwG;IAC7H,OAAO,CAAC,UAAU,CAA6E;IAC/F,OAAO,CAAC,aAAa,CAA4F;IACjH,OAAO,CAAC,YAAY,CAAqE;IAEzF,OAAO,CAAC,KAAK;IAIb,MAAM;CA4BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAA;KAC1B;CACF"}

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

@@ -1,4 +1,4 @@
-import { a as TailwindElement, y } from '../../index-84bddb70.js';
+import { a as TailwindElement, x } from '../../index-8d1ad2d4.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
 import { c as customClassMap } from '../../index-714323c9.js';
 
@@ -27,7 +27,7 @@ let LuksoModal = class extends TailwindElement {
     this.isOpen = false;
   }
   render() {
-    return y`
+    return x`
       <div
         data-testid="modal"
         class=${customClassMap({

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-17cdeaed.cjs');
+const shared_tailwindElement_index = require('../../index-f230a866.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
 const state = require('../../state-a62a7d5d.cjs');
 const index = require('../../index-7dc05ee5.cjs');
@@ -41,14 +41,14 @@ exports.LuksoNavbar = class LuksoNavbar extends shared_tailwindElement_index.Tai
     this.isMenuOpen = !this.isMenuOpen;
   }
   desktopMenuTemplate() {
-    return shared_tailwindElement_index.y`<div
+    return shared_tailwindElement_index.x`<div
       class="w-full items-center justify-end pr-10 no-underline hidden md:flex"
     >
       <slot name="desktop"></slot>
     </div>`;
   }
   mobileMenuTemplate() {
-    return shared_tailwindElement_index.y`<div
+    return shared_tailwindElement_index.x`<div
       class="w-full items-center justify-end pr-6 flex md:hidden"
     >
       <div
@@ -79,7 +79,7 @@ exports.LuksoNavbar = class LuksoNavbar extends shared_tailwindElement_index.Tai
     </div>`;
   }
   render() {
-    return shared_tailwindElement_index.y`
+    return shared_tailwindElement_index.x`
       <nav
         data-testid="navbar"
         class="bg-neutral-100 shadow-pink-drop-shadow h-78 flex

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

@@ -10,9 +10,9 @@ export declare class LuksoNavbar extends TailwindElement {
     private transparentStyles;
     private handleBrandClick;
     private handleMenuToggle;
-    desktopMenuTemplate(): import("lit").TemplateResult<1>;
-    mobileMenuTemplate(): import("lit").TemplateResult<1>;
-    render(): import("lit").TemplateResult<1>;
+    desktopMenuTemplate(): import("lit-html").TemplateResult<1>;
+    mobileMenuTemplate(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAG3D,qBACa,WAAY,SAAQ,eAAe;IAE9C,KAAK,SAAK;IAGV,QAAQ,UAAQ;IAGhB,QAAQ,UAAQ;IAGhB,aAAa,UAAQ;IAGrB,OAAO,CAAC,UAAU,CAAQ;IAE1B,OAAO,CAAC,YAAY,CAAmB;IAEvC,OAAO,CAAC,YAAY,CAA0B;IAE9C,OAAO,CAAC,iBAAiB,CAAiC;IAE1D,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,gBAAgB;IAIxB,mBAAmB;IAQnB,kBAAkB;IAiClB,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-navbar/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAG3D,qBACa,WAAY,SAAQ,eAAe;IAE9C,KAAK,SAAK;IAGV,QAAQ,UAAQ;IAGhB,QAAQ,UAAQ;IAGhB,aAAa,UAAQ;IAGrB,OAAO,CAAC,UAAU,CAAQ;IAE1B,OAAO,CAAC,YAAY,CAAmB;IAEvC,OAAO,CAAC,YAAY,CAA0B;IAE9C,OAAO,CAAC,iBAAiB,CAAiC;IAE1D,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,gBAAgB;IAIxB,mBAAmB;IAQnB,kBAAkB;IAiClB,MAAM;CA2BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}

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

@@ -1,4 +1,4 @@
-import { a as TailwindElement, y } from '../../index-84bddb70.js';
+import { a as TailwindElement, x } from '../../index-8d1ad2d4.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
 import { t } from '../../state-7fde94d1.js';
 import { c as customClassMap } from '../../index-714323c9.js';
@@ -37,14 +37,14 @@ let LuksoNavbar = class extends TailwindElement {
     this.isMenuOpen = !this.isMenuOpen;
   }
   desktopMenuTemplate() {
-    return y`<div
+    return x`<div
       class="w-full items-center justify-end pr-10 no-underline hidden md:flex"
     >
       <slot name="desktop"></slot>
     </div>`;
   }
   mobileMenuTemplate() {
-    return y`<div
+    return x`<div
       class="w-full items-center justify-end pr-6 flex md:hidden"
     >
       <div
@@ -75,7 +75,7 @@ let LuksoNavbar = class extends TailwindElement {
     </div>`;
   }
   render() {
-    return y`
+    return x`
       <nav
         data-testid="navbar"
         class="bg-neutral-100 shadow-pink-drop-shadow h-78 flex

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-17cdeaed.cjs');
+const shared_tailwindElement_index = require('../../index-f230a866.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
-const styleMap = require('../../style-map-b44b10d1.cjs');
+const styleMap = require('../../style-map-2cb404ff.cjs');
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -496,10 +496,10 @@ exports.LuksoProfile = class LuksoProfile extends shared_tailwindElement_index.T
     return this.hasIdenticon && this.profileAddress && this.identiconSize() ? mainExports(this.profileAddress) : "";
   }
   render() {
-    return shared_tailwindElement_index.y`
+    return shared_tailwindElement_index.x`
       <div
         data-testid="profile"
-        style=${styleMap.i({
+        style=${styleMap.o({
       backgroundImage: `url(${this.defaultProfileUrl})`,
       width: `${this.profileImageSize()}px`,
       height: `${this.profileImageSize()}px`
@@ -508,7 +508,7 @@ exports.LuksoProfile = class LuksoProfile extends shared_tailwindElement_index.T
           outline outline-2 outline-neutral-100"
       >
         <div
-          style=${styleMap.i({
+          style=${styleMap.o({
       backgroundImage: `url(${this.profileUrl})`,
       width: `${this.profileImageSize()}px`,
       height: `${this.profileImageSize()}px`
@@ -516,11 +516,11 @@ exports.LuksoProfile = class LuksoProfile extends shared_tailwindElement_index.T
           class="rounded-full bg-[50%] bg-no-repeat bg-cover relative
           "
         >
-          ${this.identicon() ? shared_tailwindElement_index.y`<img
+          ${this.identicon() ? shared_tailwindElement_index.x`<img
                 src=${this.identicon()}
                 class="absolute shadow-shadow-1xl rounded-full
                   outline outline-2 outline-neutral-100 right-0 bottom-0"
-                style=${styleMap.i({
+                style=${styleMap.o({
       width: `${this.identiconSize()}px`,
       height: `${this.identiconSize()}px`
     })}

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

@@ -1,6 +1,6 @@
 import { TailwindElement } from '../../shared/tailwind-element';
-export declare type ProfileSize = 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
-declare type SizeDef = {
+export type ProfileSize = 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
+type SizeDef = {
     identiconSize?: number;
     profileImageSize: number;
 };
@@ -14,7 +14,7 @@ export declare class LuksoProfile extends TailwindElement {
     private identiconSize;
     private defaultProfileUrl;
     private identicon;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAE3D,oBAAY,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAA;AAC9E,aAAK,OAAO,GAAG;IAAE,aAAa,CAAC,EAAE,MAAM,CAAC;IAAC,gBAAgB,EAAE,MAAM,CAAA;CAAE,CAAA;AAEnE,qBACa,YAAa,SAAQ,eAAe;IAE/C,UAAU,SAAK;IAGf,cAAc,SAAK;IAGnB,YAAY,UAAQ;IAGpB,IAAI,EAAE,WAAW,CAAU;IAE3B,KAAK,EAAE,MAAM,CAAC,WAAW,EAAE,OAAO,CAAC,CAqBlC;IAED,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,iBAAiB,CAAuC;IAEhE,OAAO,CAAC,SAAS;IAMjB,MAAM;CAoCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAA;KAC9B;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-profile/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAE3D,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAA;AAC9E,KAAK,OAAO,GAAG;IAAE,aAAa,CAAC,EAAE,MAAM,CAAC;IAAC,gBAAgB,EAAE,MAAM,CAAA;CAAE,CAAA;AAEnE,qBACa,YAAa,SAAQ,eAAe;IAE/C,UAAU,SAAK;IAGf,cAAc,SAAK;IAGnB,YAAY,UAAQ;IAGpB,IAAI,EAAE,WAAW,CAAU;IAE3B,KAAK,EAAE,MAAM,CAAC,WAAW,EAAE,OAAO,CAAC,CAqBlC;IAED,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,iBAAiB,CAAuC;IAEhE,OAAO,CAAC,SAAS;IAMjB,MAAM;CAoCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAA;KAC9B;CACF"}

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

@@ -1,6 +1,6 @@
-import { a as TailwindElement, y } from '../../index-84bddb70.js';
+import { a as TailwindElement, x } from '../../index-8d1ad2d4.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
-import { i } from '../../style-map-290d218c.js';
+import { o } from '../../style-map-d0125823.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -492,10 +492,10 @@ let LuksoProfile = class extends TailwindElement {
     return this.hasIdenticon && this.profileAddress && this.identiconSize() ? mainExports(this.profileAddress) : "";
   }
   render() {
-    return y`
+    return x`
       <div
         data-testid="profile"
-        style=${i({
+        style=${o({
       backgroundImage: `url(${this.defaultProfileUrl})`,
       width: `${this.profileImageSize()}px`,
       height: `${this.profileImageSize()}px`
@@ -504,7 +504,7 @@ let LuksoProfile = class extends TailwindElement {
           outline outline-2 outline-neutral-100"
       >
         <div
-          style=${i({
+          style=${o({
       backgroundImage: `url(${this.profileUrl})`,
       width: `${this.profileImageSize()}px`,
       height: `${this.profileImageSize()}px`
@@ -512,11 +512,11 @@ let LuksoProfile = class extends TailwindElement {
           class="rounded-full bg-[50%] bg-no-repeat bg-cover relative
           "
         >
-          ${this.identicon() ? y`<img
+          ${this.identicon() ? x`<img
                 src=${this.identicon()}
                 class="absolute shadow-shadow-1xl rounded-full
                   outline outline-2 outline-neutral-100 right-0 bottom-0"
-                style=${i({
+                style=${o({
       width: `${this.identiconSize()}px`,
       height: `${this.identiconSize()}px`
     })}

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-17cdeaed.cjs');
+const shared_tailwindElement_index = require('../../index-f230a866.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
-const styleMap = require('../../style-map-b44b10d1.cjs');
+const styleMap = require('../../style-map-2cb404ff.cjs');
 const index = require('../../index-7dc05ee5.cjs');
 
 var __defProp = Object.defineProperty;
@@ -30,7 +30,7 @@ exports.LuksoProgress = class LuksoProgress extends shared_tailwindElement_index
     return this.current / this.max * 100;
   }
   render() {
-    return shared_tailwindElement_index.y`
+    return shared_tailwindElement_index.x`
       <div
         data-testid="progress"
         class='w-full h-[12px] shadow-neutral-inner-shadow rounded-24 bg-neutral-95'
@@ -42,7 +42,7 @@ exports.LuksoProgress = class LuksoProgress extends shared_tailwindElement_index
         "bg-red-85 border-red-65": this.variant === "error"
       }
     )}"
-          style=${styleMap.i({
+          style=${styleMap.o({
       width: `${this.progressWidth()}%`
     })}
         >

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

@@ -1,12 +1,12 @@
 import { TailwindElement } from '../../shared/tailwind-element';
-export declare type ProgressVariant = 'success' | 'error';
+export type ProgressVariant = 'success' | 'error';
 export declare class LuksoProgress extends TailwindElement {
     min: number;
     max: number;
     current: number;
     variant: ProgressVariant;
     private progressWidth;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAG3D,oBAAY,eAAe,GAAG,SAAS,GAAG,OAAO,CAAA;AAEjD,qBACa,aAAc,SAAQ,eAAe;IAEhD,GAAG,SAAI;IAGP,GAAG,SAAM;IAGT,OAAO,SAAI;IAGX,OAAO,EAAE,eAAe,CAAY;IAEpC,OAAO,CAAC,aAAa;IAIrB,MAAM;CAuBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAA;KAChC;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-progress/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAG3D,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,OAAO,CAAA;AAEjD,qBACa,aAAc,SAAQ,eAAe;IAEhD,GAAG,SAAI;IAGP,GAAG,SAAM;IAGT,OAAO,SAAI;IAGX,OAAO,EAAE,eAAe,CAAY;IAEpC,OAAO,CAAC,aAAa;IAIrB,MAAM;CAuBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAA;KAChC;CACF"}

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

@@ -1,6 +1,6 @@
-import { a as TailwindElement, y } from '../../index-84bddb70.js';
+import { a as TailwindElement, x } from '../../index-8d1ad2d4.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
-import { i } from '../../style-map-290d218c.js';
+import { o } from '../../style-map-d0125823.js';
 import { c as customClassMap } from '../../index-714323c9.js';
 
 var __defProp = Object.defineProperty;
@@ -26,7 +26,7 @@ let LuksoProgress = class extends TailwindElement {
     return this.current / this.max * 100;
   }
   render() {
-    return y`
+    return x`
       <div
         data-testid="progress"
         class='w-full h-[12px] shadow-neutral-inner-shadow rounded-24 bg-neutral-95'
@@ -38,7 +38,7 @@ let LuksoProgress = class extends TailwindElement {
         "bg-red-85 border-red-65": this.variant === "error"
       }
     )}"
-          style=${i({
+          style=${o({
       width: `${this.progressWidth()}%`
     })}
         >