@lukso/web-components 1.29.0 → 1.30.0

package/dist/components/index.cjs

@@ -18,11 +18,11 @@ const components_luksoTerms_index = require('./lukso-terms/index.cjs');
 const components_luksoTest_index = require('./lukso-test/index.cjs');
 const components_luksoUsername_index = require('./lukso-username/index.cjs');
 const components_luksoWizard_index = require('./lukso-wizard/index.cjs');
-const shared_tailwindElement_index = require('../index-c600bfd6.cjs');
+const shared_tailwindElement_index = require('../index-c193b106.cjs');
 require('../directive-db00f5fb.cjs');
 require('../state-a62a7d5d.cjs');
 require('../index-7dc05ee5.cjs');
-require('../style-map-09c2cd24.cjs');
+require('../style-map-a3b7dea7.cjs');
 require('../style-map-ce3031bc.cjs');
 
 

package/dist/components/index.js

@@ -14,9 +14,9 @@ export { LuksoTerms } from './lukso-terms/index.js';
 export { LuksoTest } from './lukso-test/index.js';
 export { LuksoUsername } from './lukso-username/index.js';
 export { LuksoWizard } from './lukso-wizard/index.js';
-export { a as TailwindElement, T as TailwindStyledElement } from '../index-90c43338.js';
+export { a as TailwindElement, T as TailwindStyledElement } from '../index-f4ba403b.js';
 import '../directive-9ec64c08.js';
 import '../state-7fde94d1.js';
 import '../index-714323c9.js';
-import '../style-map-105316ca.js';
+import '../style-map-d2ea2813.js';
 import '../style-map-06219dec.js';

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-c600bfd6.cjs');
+const shared_tailwindElement_index = require('../../index-c193b106.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
 const state = require('../../state-a62a7d5d.cjs');
 const index = require('../../index-7dc05ee5.cjs');

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

@@ -1,4 +1,4 @@
-import { T as TailwindStyledElement, x } from '../../index-90c43338.js';
+import { T as TailwindStyledElement, x } from '../../index-f4ba403b.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';

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-c600bfd6.cjs');
+const shared_tailwindElement_index = require('../../index-c193b106.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
-const styleMap = require('../../style-map-09c2cd24.cjs');
+const styleMap = require('../../style-map-a3b7dea7.cjs');
 const index = require('../../index-7dc05ee5.cjs');
 require('../lukso-profile/index.cjs');
 
@@ -32,14 +32,20 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
     this.isFixedHeight = false;
     this.isFullWidth = false;
     this.customClass = "";
-    this.defaultStyles = `rounded-24 shadow-neutral-drop-shadow-2xl`;
+    this.size = "medium";
+    this.isHoverable = false;
+    this.mediumStyles = `rounded-24 shadow-neutral-drop-shadow-2xl`;
+    this.smallStyles = `rounded-12 shadow-neutral-drop-shadow`;
+    this.smallHoverStyles = `hover:shadow-neutral-drop-shadow-1xl cursor-pointer transition`;
   }
   basicTemplate() {
     return shared_tailwindElement_index.x`
       <div
         data-testid="card"
         class="bg-neutral-100 ${index.customClassMap({
-      [this.defaultStyles]: !this.customClass,
+      [this.mediumStyles]: !this.customClass && this.size === "medium",
+      [this.smallStyles]: !this.customClass && this.size === "small",
+      [this.smallHoverStyles]: this.isHoverable && this.size === "small",
       [this.customClass]: !!this.customClass,
       ["w-[362px]"]: this.isFixedWidth,
       ["min-h-[534px]"]: this.isFixedHeight,
@@ -55,7 +61,9 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
       <div
         data-testid="card"
         class="bg-neutral-100 grid grid-rows-[auto,1fr] ${index.customClassMap({
-      [this.defaultStyles]: !this.customClass,
+      [this.mediumStyles]: !this.customClass && this.size === "medium",
+      [this.smallStyles]: !this.customClass && this.size === "small",
+      [this.smallHoverStyles]: this.isHoverable && this.size === "small",
       [this.customClass]: !!this.customClass,
       ["w-[362px]"]: this.isFixedWidth,
       ["min-h-[534px]"]: this.isFixedHeight,
@@ -76,7 +84,9 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
       <div
         data-testid="card"
         class="bg-neutral-100 grid grid-rows-[auto,1fr] ${index.customClassMap({
-      [this.defaultStyles]: !this.customClass,
+      [this.mediumStyles]: !this.customClass && this.size === "medium",
+      [this.smallStyles]: !this.customClass && this.size === "small",
+      [this.smallHoverStyles]: this.isHoverable && this.size === "small",
       [this.customClass]: !!this.customClass,
       ["w-[362px]"]: this.isFixedWidth,
       ["min-h-[534px]"]: this.isFixedHeight,
@@ -154,6 +164,12 @@ __decorateClass([
 __decorateClass([
   directive.e({ type: String, attribute: "custom-class" })
 ], exports.LuksoCard.prototype, "customClass", 2);
+__decorateClass([
+  directive.e({ type: String })
+], exports.LuksoCard.prototype, "size", 2);
+__decorateClass([
+  directive.e({ type: Boolean, attribute: "is-hoverable" })
+], exports.LuksoCard.prototype, "isHoverable", 2);
 exports.LuksoCard = __decorateClass([
   directive.e$1("lukso-card")
 ], exports.LuksoCard);

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

@@ -1,6 +1,6 @@
-import { T as TailwindStyledElement, x } from '../../index-90c43338.js';
+import { T as TailwindStyledElement, x } from '../../index-f4ba403b.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
-import { o } from '../../style-map-105316ca.js';
+import { o } from '../../style-map-d2ea2813.js';
 import { c as customClassMap } from '../../index-714323c9.js';
 import '../lukso-profile/index.js';
 
@@ -28,14 +28,20 @@ let LuksoCard = class extends TailwindStyledElement(style) {
     this.isFixedHeight = false;
     this.isFullWidth = false;
     this.customClass = "";
-    this.defaultStyles = `rounded-24 shadow-neutral-drop-shadow-2xl`;
+    this.size = "medium";
+    this.isHoverable = false;
+    this.mediumStyles = `rounded-24 shadow-neutral-drop-shadow-2xl`;
+    this.smallStyles = `rounded-12 shadow-neutral-drop-shadow`;
+    this.smallHoverStyles = `hover:shadow-neutral-drop-shadow-1xl cursor-pointer transition`;
   }
   basicTemplate() {
     return x`
       <div
         data-testid="card"
         class="bg-neutral-100 ${customClassMap({
-      [this.defaultStyles]: !this.customClass,
+      [this.mediumStyles]: !this.customClass && this.size === "medium",
+      [this.smallStyles]: !this.customClass && this.size === "small",
+      [this.smallHoverStyles]: this.isHoverable && this.size === "small",
       [this.customClass]: !!this.customClass,
       ["w-[362px]"]: this.isFixedWidth,
       ["min-h-[534px]"]: this.isFixedHeight,
@@ -51,7 +57,9 @@ let LuksoCard = class extends TailwindStyledElement(style) {
       <div
         data-testid="card"
         class="bg-neutral-100 grid grid-rows-[auto,1fr] ${customClassMap({
-      [this.defaultStyles]: !this.customClass,
+      [this.mediumStyles]: !this.customClass && this.size === "medium",
+      [this.smallStyles]: !this.customClass && this.size === "small",
+      [this.smallHoverStyles]: this.isHoverable && this.size === "small",
       [this.customClass]: !!this.customClass,
       ["w-[362px]"]: this.isFixedWidth,
       ["min-h-[534px]"]: this.isFixedHeight,
@@ -72,7 +80,9 @@ let LuksoCard = class extends TailwindStyledElement(style) {
       <div
         data-testid="card"
         class="bg-neutral-100 grid grid-rows-[auto,1fr] ${customClassMap({
-      [this.defaultStyles]: !this.customClass,
+      [this.mediumStyles]: !this.customClass && this.size === "medium",
+      [this.smallStyles]: !this.customClass && this.size === "small",
+      [this.smallHoverStyles]: this.isHoverable && this.size === "small",
       [this.customClass]: !!this.customClass,
       ["w-[362px]"]: this.isFixedWidth,
       ["min-h-[534px]"]: this.isFixedHeight,
@@ -150,6 +160,12 @@ __decorateClass([
 __decorateClass([
   e({ type: String, attribute: "custom-class" })
 ], LuksoCard.prototype, "customClass", 2);
+__decorateClass([
+  e({ type: String })
+], LuksoCard.prototype, "size", 2);
+__decorateClass([
+  e({ type: Boolean, attribute: "is-hoverable" })
+], LuksoCard.prototype, "isHoverable", 2);
 LuksoCard = __decorateClass([
   e$1("lukso-card")
 ], LuksoCard);

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-c600bfd6.cjs');
+const shared_tailwindElement_index = require('../../index-c193b106.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
-const styleMap = require('../../style-map-09c2cd24.cjs');
+const styleMap = require('../../style-map-a3b7dea7.cjs');
 
 const style = ":host {\n    display: inline-flex\n}";
 

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

@@ -1,6 +1,6 @@
-import { x, T as TailwindStyledElement } from '../../index-90c43338.js';
+import { x, T as TailwindStyledElement } from '../../index-f4ba403b.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
-import { o } from '../../style-map-105316ca.js';
+import { o } from '../../style-map-d2ea2813.js';
 
 const style = ":host {\n    display: inline-flex\n}";
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-c600bfd6.cjs');
+const shared_tailwindElement_index = require('../../index-c193b106.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
 const state = require('../../state-a62a7d5d.cjs');
 const index = require('../../index-7dc05ee5.cjs');

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

@@ -1,4 +1,4 @@
-import { a as TailwindElement, x, A } from '../../index-90c43338.js';
+import { a as TailwindElement, x, A } from '../../index-f4ba403b.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';

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-c600bfd6.cjs');
+const shared_tailwindElement_index = require('../../index-c193b106.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
 const index = require('../../index-7dc05ee5.cjs');
 

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

@@ -1,4 +1,4 @@
-import { a as TailwindElement, x } from '../../index-90c43338.js';
+import { a as TailwindElement, x } from '../../index-f4ba403b.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
 import { c as customClassMap } from '../../index-714323c9.js';
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-c600bfd6.cjs');
+const shared_tailwindElement_index = require('../../index-c193b106.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
 const state = require('../../state-a62a7d5d.cjs');
 const index = require('../../index-7dc05ee5.cjs');

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

@@ -1,4 +1,4 @@
-import { a as TailwindElement, x } from '../../index-90c43338.js';
+import { a as TailwindElement, x } from '../../index-f4ba403b.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';

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-c600bfd6.cjs');
+const shared_tailwindElement_index = require('../../index-c193b106.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
-const styleMap = require('../../style-map-09c2cd24.cjs');
+const styleMap = require('../../style-map-a3b7dea7.cjs');
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 

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

@@ -1,6 +1,6 @@
-import { a as TailwindElement, x } from '../../index-90c43338.js';
+import { a as TailwindElement, x } from '../../index-f4ba403b.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
-import { o } from '../../style-map-105316ca.js';
+import { o } from '../../style-map-d2ea2813.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-c600bfd6.cjs');
+const shared_tailwindElement_index = require('../../index-c193b106.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
 const styleMap = require('../../style-map-ce3031bc.cjs');
 const index = require('../../index-7dc05ee5.cjs');

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

@@ -1,4 +1,4 @@
-import { a as TailwindElement, x } from '../../index-90c43338.js';
+import { a as TailwindElement, x } from '../../index-f4ba403b.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
 import { o } from '../../style-map-06219dec.js';
 import { c as customClassMap } from '../../index-714323c9.js';

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-c600bfd6.cjs');
+const shared_tailwindElement_index = require('../../index-c193b106.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
 
 /**

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

@@ -1,4 +1,4 @@
-import { A, b as T, a as TailwindElement, x } from '../../index-90c43338.js';
+import { A, b as T, a as TailwindElement, x } from '../../index-f4ba403b.js';
 import { i, t, b as e$1, e as e$2, a as e$3 } from '../../directive-9ec64c08.js';
 
 /**

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-c600bfd6.cjs');
+const shared_tailwindElement_index = require('../../index-c193b106.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
 const index = require('../../index-7dc05ee5.cjs');
 

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

@@ -1,4 +1,4 @@
-import { T as TailwindStyledElement, x } from '../../index-90c43338.js';
+import { T as TailwindStyledElement, x } from '../../index-f4ba403b.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
 import { c as customClassMap } from '../../index-714323c9.js';
 

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-c600bfd6.cjs');
+const shared_tailwindElement_index = require('../../index-c193b106.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
-const styleMap = require('../../style-map-09c2cd24.cjs');
+const styleMap = require('../../style-map-a3b7dea7.cjs');
 const index = require('../../index-7dc05ee5.cjs');
 
 var __defProp = Object.defineProperty;

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

@@ -1,6 +1,6 @@
-import { a as TailwindElement, x } from '../../index-90c43338.js';
+import { a as TailwindElement, x } from '../../index-f4ba403b.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
-import { o } from '../../style-map-105316ca.js';
+import { o } from '../../style-map-d2ea2813.js';
 import { c as customClassMap } from '../../index-714323c9.js';
 
 var __defProp = Object.defineProperty;

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

@@ -2,11 +2,13 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-c600bfd6.cjs');
+const shared_tailwindElement_index = require('../../index-c193b106.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
-const styleMap = require('../../style-map-09c2cd24.cjs');
+const styleMap = require('../../style-map-a3b7dea7.cjs');
 const index = require('../../index-7dc05ee5.cjs');
 
+const style = ":host {\n    display: inline-flex\n}";
+
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -18,7 +20,7 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-exports.LuksoTag = class LuksoTag extends shared_tailwindElement_index.TailwindElement {
+exports.LuksoTag = class LuksoTag extends shared_tailwindElement_index.TailwindStyledElement(style) {
   constructor() {
     super(...arguments);
     this.size = "small";
@@ -26,10 +28,14 @@ exports.LuksoTag = class LuksoTag extends shared_tailwindElement_index.TailwindE
     this.backgroundColor = "";
     this.textColor = "";
     this.defaultStyles = `inline-flex items-center justify-center border border-neutral-20 text-neutral-20`;
+    this.extraSmallStyles = `font-inter text-8 font-500 leading-20 h-[20px]`;
     this.smallStyles = `paragraph-inter-12-medium h-[28px]`;
     this.largeStyles = `paragraph-inter-14-medium h-[34px]`;
   }
   padding() {
+    if (this.size === "x-small" && !this.isRounded) {
+      return "px-1";
+    }
     if (this.size === "small" && this.isRounded) {
       return "px-3";
     }
@@ -46,7 +52,9 @@ exports.LuksoTag = class LuksoTag extends shared_tailwindElement_index.TailwindE
       [this.defaultStyles]: true,
       [this.padding()]: true,
       ["rounded-[56px]"]: this.isRounded,
-      ["rounded-8"]: !this.isRounded,
+      ["rounded-8"]: !this.isRounded && this.size !== "x-small",
+      ["rounded-4"]: !this.isRounded && this.size === "x-small",
+      [this.extraSmallStyles]: this.size === "x-small",
       [this.smallStyles]: this.size === "small",
       [this.largeStyles]: this.size === "large"
     })}

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

@@ -1,8 +1,10 @@
-import { a as TailwindElement, x } from '../../index-90c43338.js';
+import { T as TailwindStyledElement, x } from '../../index-f4ba403b.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
-import { o } from '../../style-map-105316ca.js';
+import { o } from '../../style-map-d2ea2813.js';
 import { c as customClassMap } from '../../index-714323c9.js';
 
+const style = ":host {\n    display: inline-flex\n}";
+
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -14,7 +16,7 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-let LuksoTag = class extends TailwindElement {
+let LuksoTag = class extends TailwindStyledElement(style) {
   constructor() {
     super(...arguments);
     this.size = "small";
@@ -22,10 +24,14 @@ let LuksoTag = class extends TailwindElement {
     this.backgroundColor = "";
     this.textColor = "";
     this.defaultStyles = `inline-flex items-center justify-center border border-neutral-20 text-neutral-20`;
+    this.extraSmallStyles = `font-inter text-8 font-500 leading-20 h-[20px]`;
     this.smallStyles = `paragraph-inter-12-medium h-[28px]`;
     this.largeStyles = `paragraph-inter-14-medium h-[34px]`;
   }
   padding() {
+    if (this.size === "x-small" && !this.isRounded) {
+      return "px-1";
+    }
     if (this.size === "small" && this.isRounded) {
       return "px-3";
     }
@@ -42,7 +48,9 @@ let LuksoTag = class extends TailwindElement {
       [this.defaultStyles]: true,
       [this.padding()]: true,
       ["rounded-[56px]"]: this.isRounded,
-      ["rounded-8"]: !this.isRounded,
+      ["rounded-8"]: !this.isRounded && this.size !== "x-small",
+      ["rounded-4"]: !this.isRounded && this.size === "x-small",
+      [this.extraSmallStyles]: this.size === "x-small",
       [this.smallStyles]: this.size === "small",
       [this.largeStyles]: this.size === "large"
     })}

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

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-c600bfd6.cjs');
+const shared_tailwindElement_index = require('../../index-c193b106.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
 const state = require('../../state-a62a7d5d.cjs');
 const index = require('../../index-7dc05ee5.cjs');
 require('../lukso-icon/index.cjs');
 require('../lukso-sanitize/index.cjs');
-require('../../style-map-09c2cd24.cjs');
+require('../../style-map-a3b7dea7.cjs');
 
 const style = ":host {\n    display: flex;\n    height: 100%\n}";
 

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

@@ -1,10 +1,10 @@
-import { T as TailwindStyledElement, x } from '../../index-90c43338.js';
+import { T as TailwindStyledElement, x } from '../../index-f4ba403b.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';
 import '../lukso-icon/index.js';
 import '../lukso-sanitize/index.js';
-import '../../style-map-105316ca.js';
+import '../../style-map-d2ea2813.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-c600bfd6.cjs');
+const shared_tailwindElement_index = require('../../index-c193b106.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
 
 /**

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

@@ -1,4 +1,4 @@
-import { b as T$1, T as TailwindStyledElement, x as x$2 } from '../../index-90c43338.js';
+import { b as T$1, T as TailwindStyledElement, x as x$2 } from '../../index-f4ba403b.js';
 import { b as e$3, i as i$3, t as t$3, e as e$4, a as e$5 } from '../../directive-9ec64c08.js';
 
 /**

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-c600bfd6.cjs');
+const shared_tailwindElement_index = require('../../index-c193b106.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
 const styleMap = require('../../style-map-ce3031bc.cjs');
 const index = require('../../index-7dc05ee5.cjs');
@@ -39,7 +39,8 @@ exports.LuksoUsername = class LuksoUsername extends shared_tailwindElement_index
     this.maxWidth = 200;
     this.size = "large";
     this.sliceBy = 8;
-    this.addressColor = "neutral-20";
+    this.addressColor = "";
+    this.nameColor = "";
     /** Width of the first 4 bytes of the address */
     this.bytesWidth = 52;
   }
@@ -48,7 +49,12 @@ exports.LuksoUsername = class LuksoUsername extends shared_tailwindElement_index
    * e.g: #1234
    */
   addressBytesTemplate() {
-    return shared_tailwindElement_index.x`<div class="inline-block text-neutral-60">
+    return shared_tailwindElement_index.x`<div
+      class="inline-block text-neutral-60 "
+      style=${styleMap.o({
+      color: `var(--${this.addressColor})`
+    })}
+    >
       #${this.address.slice(2, 6)}
     </div>`;
   }
@@ -58,10 +64,14 @@ exports.LuksoUsername = class LuksoUsername extends shared_tailwindElement_index
    */
   nameTemplate() {
     return shared_tailwindElement_index.x`<div
-      class="inline-block whitespace-nowrap overflow-hidden text-ellipsis text-transparent
-      bg-clip-text bg-gradient-to-r from-gradient-1-start to-gradient-1-end"
+      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 === ""
+      }
+    )}"
       style=${styleMap.o({
-      maxWidth: `${this.maxWidth - this.bytesWidth}px`
+      maxWidth: `${this.maxWidth - this.bytesWidth}px`,
+      color: `var(--${this.nameColor})`
     })}
     >
       @${this.name}
@@ -95,6 +105,7 @@ exports.LuksoUsername = class LuksoUsername extends shared_tailwindElement_index
     })();
     return shared_tailwindElement_index.x`<div
       class="inline-flex ${index.customClassMap({
+      "paragraph-ptmono-10-bold": this.size === "x-small",
       "paragraph-ptmono-12-bold": this.size === "small",
       "paragraph-ptmono-16-bold": this.size === "large"
     })}"
@@ -121,6 +132,9 @@ __decorateClass([
 __decorateClass([
   directive.e({ type: String, attribute: "address-color" })
 ], exports.LuksoUsername.prototype, "addressColor", 2);
+__decorateClass([
+  directive.e({ type: String, attribute: "name-color" })
+], exports.LuksoUsername.prototype, "nameColor", 2);
 exports.LuksoUsername = __decorateClass([
   directive.e$1("lukso-username")
 ], exports.LuksoUsername);

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

@@ -1,4 +1,4 @@
-import { a as TailwindElement, x } from '../../index-90c43338.js';
+import { a as TailwindElement, x } from '../../index-f4ba403b.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
 import { o } from '../../style-map-06219dec.js';
 import { c as customClassMap } from '../../index-714323c9.js';
@@ -35,7 +35,8 @@ let LuksoUsername = class extends TailwindElement {
     this.maxWidth = 200;
     this.size = "large";
     this.sliceBy = 8;
-    this.addressColor = "neutral-20";
+    this.addressColor = "";
+    this.nameColor = "";
     /** Width of the first 4 bytes of the address */
     this.bytesWidth = 52;
   }
@@ -44,7 +45,12 @@ let LuksoUsername = class extends TailwindElement {
    * e.g: #1234
    */
   addressBytesTemplate() {
-    return x`<div class="inline-block text-neutral-60">
+    return x`<div
+      class="inline-block text-neutral-60 "
+      style=${o({
+      color: `var(--${this.addressColor})`
+    })}
+    >
       #${this.address.slice(2, 6)}
     </div>`;
   }
@@ -54,10 +60,14 @@ let LuksoUsername = class extends TailwindElement {
    */
   nameTemplate() {
     return x`<div
-      class="inline-block whitespace-nowrap overflow-hidden text-ellipsis text-transparent
-      bg-clip-text bg-gradient-to-r from-gradient-1-start to-gradient-1-end"
+      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 === ""
+      }
+    )}"
       style=${o({
-      maxWidth: `${this.maxWidth - this.bytesWidth}px`
+      maxWidth: `${this.maxWidth - this.bytesWidth}px`,
+      color: `var(--${this.nameColor})`
     })}
     >
       @${this.name}
@@ -91,6 +101,7 @@ let LuksoUsername = class extends TailwindElement {
     })();
     return x`<div
       class="inline-flex ${customClassMap({
+      "paragraph-ptmono-10-bold": this.size === "x-small",
       "paragraph-ptmono-12-bold": this.size === "small",
       "paragraph-ptmono-16-bold": this.size === "large"
     })}"
@@ -117,6 +128,9 @@ __decorateClass([
 __decorateClass([
   e({ type: String, attribute: "address-color" })
 ], LuksoUsername.prototype, "addressColor", 2);
+__decorateClass([
+  e({ type: String, attribute: "name-color" })
+], LuksoUsername.prototype, "nameColor", 2);
 LuksoUsername = __decorateClass([
   e$1("lukso-username")
 ], LuksoUsername);