@lukso/web-components 1.75.0 → 1.77.0

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-9b930f6a.cjs');
+const shared_tailwindElement_index = require('../../index-1663e4e9.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
 const state = require('../../state-d9fb972b.cjs');
 const index = require('../../index-1d3f4a5a.cjs');
@@ -11,11 +11,10 @@ require('../lukso-profile/index.cjs');
 require('../lukso-username/index.cjs');
 require('../lukso-input/index.cjs');
 require('../../bundle-mjs-d58a83c6.cjs');
-require('../../style-map-ebf3a8d2.cjs');
+require('../../style-map-8748e444.cjs');
 require('../../directive-8278ab14.cjs');
 require('../lukso-image/index.cjs');
-require('../../index-e9668573.cjs');
-require('../../index-a1e4b7d4.cjs');
+require('../../index-c87cbae4.cjs');
 require('../../tailwind-config.cjs');
 require('../../cn-5ceac001.cjs');
 

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

@@ -1,4 +1,4 @@
-import { T as TailwindStyledElement, x, A } from '../../index-09db75ee.js';
+import { T as TailwindStyledElement, x, A } from '../../index-cc6befe7.js';
 import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
 import { t } from '../../state-b9ca4e74.js';
 import { c as ce } from '../../index-ca8e900d.js';
@@ -7,11 +7,10 @@ import '../lukso-profile/index.js';
 import '../lukso-username/index.js';
 import '../lukso-input/index.js';
 import '../../bundle-mjs-fbc6e2a8.js';
-import '../../style-map-3669b30c.js';
+import '../../style-map-c427baa7.js';
 import '../../directive-2bb7789e.js';
 import '../lukso-image/index.js';
-import '../../index-5e194caf.js';
-import '../../index-dfdfb6fe.js';
+import '../../index-8c5bb33e.js';
 import '../../tailwind-config.js';
 import '../../cn-b54dcc61.js';
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-9b930f6a.cjs');
+const shared_tailwindElement_index = require('../../index-1663e4e9.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
 const state = require('../../state-d9fb972b.cjs');
 const index = require('../../index-1d3f4a5a.cjs');
@@ -10,11 +10,12 @@ require('../lukso-icon/index.cjs');
 require('../lukso-profile/index.cjs');
 require('../lukso-username/index.cjs');
 require('../../bundle-mjs-d58a83c6.cjs');
-require('../../style-map-ebf3a8d2.cjs');
+require('../../style-map-8748e444.cjs');
 require('../../directive-8278ab14.cjs');
 require('../lukso-image/index.cjs');
-require('../../index-e9668573.cjs');
-require('../../index-a1e4b7d4.cjs');
+require('../../index-c87cbae4.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}";
 

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

@@ -1,4 +1,4 @@
-import { T as TailwindStyledElement, x, A } from '../../index-09db75ee.js';
+import { T as TailwindStyledElement, x, A } from '../../index-cc6befe7.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,12 @@ import '../lukso-icon/index.js';
 import '../lukso-profile/index.js';
 import '../lukso-username/index.js';
 import '../../bundle-mjs-fbc6e2a8.js';
-import '../../style-map-3669b30c.js';
+import '../../style-map-c427baa7.js';
 import '../../directive-2bb7789e.js';
 import '../lukso-image/index.js';
-import '../../index-5e194caf.js';
-import '../../index-dfdfb6fe.js';
+import '../../index-8c5bb33e.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}";
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-9b930f6a.cjs');
+const shared_tailwindElement_index = require('../../index-1663e4e9.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-09db75ee.js';
+import { T as TailwindStyledElement, x } from '../../index-cc6befe7.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-9b930f6a.cjs');
+const shared_tailwindElement_index = require('../../index-1663e4e9.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
-const styleMap = require('../../style-map-ebf3a8d2.cjs');
+const styleMap = require('../../style-map-8748e444.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-09db75ee.js';
+import { a as TailwindElement, x } from '../../index-cc6befe7.js';
 import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
-import { o } from '../../style-map-3669b30c.js';
+import { o } from '../../style-map-c427baa7.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-9b930f6a.cjs');
+const shared_tailwindElement_index = require('../../index-1663e4e9.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
 const index = require('../../index-1d3f4a5a.cjs');
-const index$1 = require('../../index-a1e4b7d4.cjs');
+const index$1 = require('../../index-c87cbae4.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-09db75ee.js';
+import { T as TailwindStyledElement, x } from '../../index-cc6befe7.js';
 import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
 import { c as ce } from '../../index-ca8e900d.js';
-import { c as customStyleMap } from '../../index-dfdfb6fe.js';
+import { c as customStyleMap } from '../../index-8c5bb33e.js';
 import '../../bundle-mjs-fbc6e2a8.js';
 import '../../directive-2bb7789e.js';
 

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

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-9b930f6a.cjs');
+const shared_tailwindElement_index = require('../../index-1663e4e9.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
 const state = require('../../state-d9fb972b.cjs');
 const index = require('../../index-e9668573.cjs');
 require('../lukso-icon/index.cjs');
 require('../lukso-sanitize/index.cjs');
 require('../../directive-8278ab14.cjs');
-require('../../style-map-ebf3a8d2.cjs');
+require('../../style-map-8748e444.cjs');
 
 const style = ":host {\n    display: flex;\n    height: 100%\n}";
 

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

@@ -1,11 +1,11 @@
-import { T as TailwindStyledElement, x } from '../../index-09db75ee.js';
+import { T as TailwindStyledElement, x } from '../../index-cc6befe7.js';
 import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
 import { t } from '../../state-b9ca4e74.js';
 import { c as customClassMap } from '../../index-5e194caf.js';
 import '../lukso-icon/index.js';
 import '../lukso-sanitize/index.js';
 import '../../directive-2bb7789e.js';
-import '../../style-map-3669b30c.js';
+import '../../style-map-c427baa7.js';
 
 const style = ":host {\n    display: flex;\n    height: 100%\n}";
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-9b930f6a.cjs');
+const shared_tailwindElement_index = require('../../index-1663e4e9.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
 const directive = require('../../directive-8278ab14.cjs');
 

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

@@ -1,4 +1,4 @@
-import { b as T$1, T as TailwindStyledElement, x as x$1 } from '../../index-09db75ee.js';
+import { b as T$1, T as TailwindStyledElement, x as x$1 } from '../../index-cc6befe7.js';
 import { n as n$3, e as e$3 } from '../../query-assigned-elements-1c8c9e90.js';
 import { e as e$2, i as i$3, t as t$3 } from '../../directive-2bb7789e.js';
 

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

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-9b930f6a.cjs');
+const shared_tailwindElement_index = require('../../index-1663e4e9.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
 const state = require('../../state-d9fb972b.cjs');
 const index = require('../../index-1d3f4a5a.cjs');
-const styleMap = require('../../style-map-ebf3a8d2.cjs');
+const styleMap = require('../../style-map-8748e444.cjs');
 require('../../bundle-mjs-d58a83c6.cjs');
 require('../../directive-8278ab14.cjs');
 

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

@@ -1,8 +1,8 @@
-import { T as TailwindStyledElement, x } from '../../index-09db75ee.js';
+import { T as TailwindStyledElement, x } from '../../index-cc6befe7.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 { o } from '../../style-map-3669b30c.js';
+import { o } from '../../style-map-c427baa7.js';
 import '../../bundle-mjs-fbc6e2a8.js';
 import '../../directive-2bb7789e.js';
 

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

@@ -2,10 +2,13 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-9b930f6a.cjs');
+const shared_tailwindElement_index = require('../../index-1663e4e9.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
-const index = require('../../index-e9668573.cjs');
-const index$1 = require('../../index-a1e4b7d4.cjs');
+const index = require('../../index-1d3f4a5a.cjs');
+const index$1 = require('../../index-c87cbae4.cjs');
+require('../../tailwind-config.cjs');
+const cn = require('../../cn-5ceac001.cjs');
+require('../../bundle-mjs-d58a83c6.cjs');
 require('../../directive-8278ab14.cjs');
 
 const sliceAddress = (address, startSliceBy = 6, endSliceBy) => {
@@ -49,12 +52,48 @@ exports.LuksoUsername = class LuksoUsername extends shared_tailwindElement_index
     this.prefix = "@";
     /** Width of the first 4 bytes of the address */
     this.bytesWidth = 52;
+    this.styles = index.ce({
+      slots: {
+        wrapper: "inline-flex",
+        name: "inline-block whitespace-nowrap overflow-hidden text-ellipsis",
+        address: "inline-block",
+        bytes: "inline-block"
+      },
+      variants: {
+        size: {
+          "x-small": {
+            wrapper: "paragraph-ptmono-10-bold"
+          },
+          small: {
+            wrapper: "paragraph-ptmono-12-bold"
+          },
+          medium: {
+            wrapper: "paragraph-ptmono-14-bold"
+          },
+          large: {
+            wrapper: "paragraph-ptmono-16-bold"
+          },
+          "x-large": {
+            wrapper: "paragraph-ptmono-24-bold"
+          }
+        },
+        hasNameColor: {
+          false: {
+            name: "text-transparent bg-clip-text bg-gradient-to-r from-gradient-1-start to-gradient-1-end"
+          }
+        },
+        hasAddressColor: {
+          false: {
+            address: "text-neutral-20",
+            bytes: "text-neutral-60"
+          }
+        }
+      }
+    });
   }
-  addressBytesTemplate() {
+  addressBytesTemplate(styles) {
     return shared_tailwindElement_index.x`<div
-      class="inline-block ${index.customClassMap({
-      ["text-neutral-60"]: this.addressColor === ""
-    })}"
+      class=${styles}
       style=${index$1.customStyleMap({
       [`color: var(--${this.addressColor})`]: this.addressColor !== ""
     })}
@@ -62,13 +101,9 @@ exports.LuksoUsername = class LuksoUsername extends shared_tailwindElement_index
       #${this.address.slice(2, 6)}
     </div>`;
   }
-  nameTemplate() {
+  nameTemplate(styles) {
     return shared_tailwindElement_index.x`<div
-      class="inline-block whitespace-nowrap overflow-hidden text-ellipsis ${index.customClassMap(
-      {
-        ["text-transparent bg-clip-text bg-gradient-to-r from-gradient-1-start to-gradient-1-end"]: this.nameColor === ""
-      }
-    )}"
+      class=${styles}
       style=${index$1.customStyleMap({
       [`max-width: ${this.maxWidth - this.bytesWidth}px`]: true,
       [`color: var(--${this.nameColor})`]: this.nameColor !== ""
@@ -77,39 +112,36 @@ exports.LuksoUsername = class LuksoUsername extends shared_tailwindElement_index
       ${this.hidePrefix ? shared_tailwindElement_index.A : this.prefix}${this.name}
     </div>`;
   }
-  addressTemplate() {
+  addressTemplate(styles) {
     return shared_tailwindElement_index.x`<div
-      class="inline-block ${index.customClassMap({
-      ["text-" + this.addressColor]: this.addressColor !== "",
-      ["text-neutral-20"]: this.addressColor === ""
-    })}"
+      class=${styles}
+      style=${index$1.customStyleMap({
+      [`color: var(--${this.addressColor})`]: this.addressColor !== ""
+    })}
     >
       ${sliceAddress(this.address, this.sliceBy, this.sliceBy)}
     </div>`;
   }
   render() {
+    const { wrapper, name, address, bytes } = this.styles({
+      size: this.size,
+      hasNameColor: this.nameColor !== "",
+      hasAddressColor: this.addressColor !== ""
+    });
     const template = (() => {
       if (this.name && this.address) {
-        return shared_tailwindElement_index.x`${this.nameTemplate()}${this.addressBytesTemplate()}`;
+        return shared_tailwindElement_index.x`${this.nameTemplate(name())}${this.addressBytesTemplate(
+          bytes()
+        )}`;
       }
       if (this.name) {
-        return this.nameTemplate();
+        return this.nameTemplate(name());
       }
       if (this.address) {
-        return this.addressTemplate();
+        return this.addressTemplate(address());
       }
     })();
-    return shared_tailwindElement_index.x`<div
-      class="inline-flex ${index.customClassMap({
-      [this.customClass]: true,
-      "paragraph-ptmono-10-bold": this.size === "x-small",
-      "paragraph-ptmono-12-bold": this.size === "small",
-      "paragraph-ptmono-14-bold": this.size === "medium",
-      "paragraph-ptmono-16-bold": this.size === "large"
-    })}"
-    >
-      ${template}
-    </div>`;
+    return shared_tailwindElement_index.x`<div class=${cn.cn(wrapper(), this.customClass)}>${template}</div>`;
   }
 };
 __decorateClass([

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

@@ -1,4 +1,4 @@
-export type UsernameSize = 'x-small' | 'small' | 'medium' | 'large';
+export type UsernameSize = 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
 declare const LuksoUsername_base: typeof import("lit").LitElement;
 export declare class LuksoUsername extends LuksoUsername_base {
     name: string;
@@ -13,6 +13,7 @@ export declare class LuksoUsername extends LuksoUsername_base {
     prefix: string;
     /** Width of the first 4 bytes of the address */
     private bytesWidth;
+    private styles;
     private addressBytesTemplate;
     private nameTemplate;
     private addressTemplate;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-username/index.ts"],"names":[],"mappings":"AASA,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;;AAEnE,qBACa,aAAc,SAAQ,kBAA4B;IAE7D,IAAI,SAAK;IAGT,OAAO,SAAK;IAGZ,QAAQ,SAAM;IAGd,IAAI,EAAE,YAAY,CAAU;IAG5B,OAAO,SAAI;IAGX,YAAY,SAAK;IAGjB,SAAS,SAAK;IAGd,WAAW,SAAK;IAGhB,UAAU,UAAQ;IAGlB,MAAM,SAAM;IAEZ,gDAAgD;IAChD,OAAO,CAAC,UAAU,CAAK;IAEvB,OAAO,CAAC,oBAAoB;IAa5B,OAAO,CAAC,YAAY;IAiBpB,OAAO,CAAC,eAAe;IAWvB,MAAM;CA2BP;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-username/index.ts"],"names":[],"mappings":"AAWA,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAA;;AAE/E,qBACa,aAAc,SAAQ,kBAA4B;IAE7D,IAAI,SAAK;IAGT,OAAO,SAAK;IAGZ,QAAQ,SAAM;IAGd,IAAI,EAAE,YAAY,CAAU;IAG5B,OAAO,SAAI;IAGX,YAAY,SAAK;IAGjB,SAAS,SAAK;IAGd,WAAW,SAAK;IAGhB,UAAU,UAAQ;IAGlB,MAAM,SAAM;IAEZ,gDAAgD;IAChD,OAAO,CAAC,UAAU,CAAK;IAEvB,OAAO,CAAC,MAAM,CAqCZ;IAEF,OAAO,CAAC,oBAAoB;IAW5B,OAAO,CAAC,YAAY;IAYpB,OAAO,CAAC,eAAe;IAWvB,MAAM;CAyBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAA;KAChC;CACF"}

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

@@ -1,7 +1,10 @@
-import { T as TailwindStyledElement, x, A } from '../../index-09db75ee.js';
+import { T as TailwindStyledElement, x, A } from '../../index-cc6befe7.js';
 import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
-import { c as customClassMap } from '../../index-5e194caf.js';
-import { c as customStyleMap } from '../../index-dfdfb6fe.js';
+import { c as ce } from '../../index-ca8e900d.js';
+import { c as customStyleMap } from '../../index-8c5bb33e.js';
+import '../../tailwind-config.js';
+import { c as cn } from '../../cn-b54dcc61.js';
+import '../../bundle-mjs-fbc6e2a8.js';
 import '../../directive-2bb7789e.js';
 
 const sliceAddress = (address, startSliceBy = 6, endSliceBy) => {
@@ -45,12 +48,48 @@ let LuksoUsername = class extends TailwindStyledElement(style) {
     this.prefix = "@";
     /** Width of the first 4 bytes of the address */
     this.bytesWidth = 52;
+    this.styles = ce({
+      slots: {
+        wrapper: "inline-flex",
+        name: "inline-block whitespace-nowrap overflow-hidden text-ellipsis",
+        address: "inline-block",
+        bytes: "inline-block"
+      },
+      variants: {
+        size: {
+          "x-small": {
+            wrapper: "paragraph-ptmono-10-bold"
+          },
+          small: {
+            wrapper: "paragraph-ptmono-12-bold"
+          },
+          medium: {
+            wrapper: "paragraph-ptmono-14-bold"
+          },
+          large: {
+            wrapper: "paragraph-ptmono-16-bold"
+          },
+          "x-large": {
+            wrapper: "paragraph-ptmono-24-bold"
+          }
+        },
+        hasNameColor: {
+          false: {
+            name: "text-transparent bg-clip-text bg-gradient-to-r from-gradient-1-start to-gradient-1-end"
+          }
+        },
+        hasAddressColor: {
+          false: {
+            address: "text-neutral-20",
+            bytes: "text-neutral-60"
+          }
+        }
+      }
+    });
   }
-  addressBytesTemplate() {
+  addressBytesTemplate(styles) {
     return x`<div
-      class="inline-block ${customClassMap({
-      ["text-neutral-60"]: this.addressColor === ""
-    })}"
+      class=${styles}
       style=${customStyleMap({
       [`color: var(--${this.addressColor})`]: this.addressColor !== ""
     })}
@@ -58,13 +97,9 @@ let LuksoUsername = class extends TailwindStyledElement(style) {
       #${this.address.slice(2, 6)}
     </div>`;
   }
-  nameTemplate() {
+  nameTemplate(styles) {
     return x`<div
-      class="inline-block whitespace-nowrap overflow-hidden text-ellipsis ${customClassMap(
-      {
-        ["text-transparent bg-clip-text bg-gradient-to-r from-gradient-1-start to-gradient-1-end"]: this.nameColor === ""
-      }
-    )}"
+      class=${styles}
       style=${customStyleMap({
       [`max-width: ${this.maxWidth - this.bytesWidth}px`]: true,
       [`color: var(--${this.nameColor})`]: this.nameColor !== ""
@@ -73,39 +108,36 @@ let LuksoUsername = class extends TailwindStyledElement(style) {
       ${this.hidePrefix ? A : this.prefix}${this.name}
     </div>`;
   }
-  addressTemplate() {
+  addressTemplate(styles) {
     return x`<div
-      class="inline-block ${customClassMap({
-      ["text-" + this.addressColor]: this.addressColor !== "",
-      ["text-neutral-20"]: this.addressColor === ""
-    })}"
+      class=${styles}
+      style=${customStyleMap({
+      [`color: var(--${this.addressColor})`]: this.addressColor !== ""
+    })}
     >
       ${sliceAddress(this.address, this.sliceBy, this.sliceBy)}
     </div>`;
   }
   render() {
+    const { wrapper, name, address, bytes } = this.styles({
+      size: this.size,
+      hasNameColor: this.nameColor !== "",
+      hasAddressColor: this.addressColor !== ""
+    });
     const template = (() => {
       if (this.name && this.address) {
-        return x`${this.nameTemplate()}${this.addressBytesTemplate()}`;
+        return x`${this.nameTemplate(name())}${this.addressBytesTemplate(
+          bytes()
+        )}`;
       }
       if (this.name) {
-        return this.nameTemplate();
+        return this.nameTemplate(name());
       }
       if (this.address) {
-        return this.addressTemplate();
+        return this.addressTemplate(address());
       }
     })();
-    return x`<div
-      class="inline-flex ${customClassMap({
-      [this.customClass]: true,
-      "paragraph-ptmono-10-bold": this.size === "x-small",
-      "paragraph-ptmono-12-bold": this.size === "small",
-      "paragraph-ptmono-14-bold": this.size === "medium",
-      "paragraph-ptmono-16-bold": this.size === "large"
-    })}"
-    >
-      ${template}
-    </div>`;
+    return x`<div class=${cn(wrapper(), this.customClass)}>${template}</div>`;
   }
 };
 __decorateClass([

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

@@ -8,7 +8,7 @@ export declare const DefaultUsername: any;
 export declare const LongName: any;
 /** Example of component that has only `name` attribute. */
 export declare const OnlyName: any;
-/** Example of component that has only `address` attribute and `small` size. */
+/** Example of component that has only `address` attribute. */
 export declare const OnlyAddress: any;
 /** You can specify amount of sliced characters in the address with `slice-by` attribute. */
 export declare const SliceAddressBy4: any;
@@ -18,4 +18,14 @@ export declare const CustomColor: any;
 export declare const CustomPrefix: any;
 /** You can hide prefix completely by adding `hide-prefix` attribute. */
 export declare const HidePrefix: any;
+/** Example of `x-small` size with 10px font.  */
+export declare const XSmall: any;
+/** Example of `small` size with 12px font. */
+export declare const Small: any;
+/** Example of `medium` size with 14px font. */
+export declare const Medium: any;
+/** Example of `large` size with 16px font. */
+export declare const Large: any;
+/** Example of `x-large` size with 24px font. */
+export declare const XLarge: any;
 //# sourceMappingURL=lukso-username.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"lukso-username.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-username/lukso-username.stories.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,SAAS,CAAA;AAEhB,iIAAiI;AACjI,QAAA,MAAM,IAAI,EAAE,IA2HX,CAAA;AAED,eAAe,IAAI,CAAA;AA2BnB,uGAAuG;AACvG,eAAO,MAAM,eAAe,KAAoB,CAAA;AAEhD,mGAAmG;AACnG,eAAO,MAAM,QAAQ,KAAoB,CAAA;AAKzC,2DAA2D;AAC3D,eAAO,MAAM,QAAQ,KAAoB,CAAA;AAKzC,+EAA+E;AAC/E,eAAO,MAAM,WAAW,KAAoB,CAAA;AAO5C,4FAA4F;AAC5F,eAAO,MAAM,eAAe,KAAoB,CAAA;AAOhD,mGAAmG;AACnG,eAAO,MAAM,WAAW,KAAoB,CAAA;AAM5C,wDAAwD;AACxD,eAAO,MAAM,YAAY,KAAoB,CAAA;AAK7C,wEAAwE;AACxE,eAAO,MAAM,UAAU,KAAoB,CAAA"}
+{"version":3,"file":"lukso-username.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-username/lukso-username.stories.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,SAAS,CAAA;AAEhB,iIAAiI;AACjI,QAAA,MAAM,IAAI,EAAE,IA2HX,CAAA;AAED,eAAe,IAAI,CAAA;AA2BnB,uGAAuG;AACvG,eAAO,MAAM,eAAe,KAAoB,CAAA;AAEhD,mGAAmG;AACnG,eAAO,MAAM,QAAQ,KAAoB,CAAA;AAKzC,2DAA2D;AAC3D,eAAO,MAAM,QAAQ,KAAoB,CAAA;AAKzC,8DAA8D;AAC9D,eAAO,MAAM,WAAW,KAAoB,CAAA;AAK5C,4FAA4F;AAC5F,eAAO,MAAM,eAAe,KAAoB,CAAA;AAMhD,mGAAmG;AACnG,eAAO,MAAM,WAAW,KAAoB,CAAA;AAM5C,wDAAwD;AACxD,eAAO,MAAM,YAAY,KAAoB,CAAA;AAK7C,wEAAwE;AACxE,eAAO,MAAM,UAAU,KAAoB,CAAA;AAQ3C,iDAAiD;AACjD,eAAO,MAAM,MAAM,KAAoB,CAAA;AAKvC,8CAA8C;AAC9C,eAAO,MAAM,KAAK,KAAoB,CAAA;AAKtC,+CAA+C;AAC/C,eAAO,MAAM,MAAM,KAAoB,CAAA;AAKvC,8CAA8C;AAC9C,eAAO,MAAM,KAAK,KAAoB,CAAA;AAKtC,gDAAgD;AAChD,eAAO,MAAM,MAAM,KAAoB,CAAA"}

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-9b930f6a.cjs');
+const shared_tailwindElement_index = require('../../index-1663e4e9.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
 const directive = require('../../directive-8278ab14.cjs');
 const index = require('../../index-1d3f4a5a.cjs');

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

@@ -1,4 +1,4 @@
-import { j, b as T, T as TailwindStyledElement, x } from '../../index-09db75ee.js';
+import { j, b as T, T as TailwindStyledElement, x } from '../../index-cc6befe7.js';
 import { n, e as e$1 } from '../../query-assigned-elements-1c8c9e90.js';
 import { e, i, t } from '../../directive-2bb7789e.js';
 import { c as ce } from '../../index-ca8e900d.js';