@lukso/web-components 1.7.3 → 1.8.0

package/dist/components/index.cjs

@@ -14,11 +14,11 @@ const components_luksoTag_index = require('./lukso-tag/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-4aafbf5c.cjs');
+const shared_tailwindElement_index = require('../index-687bd80b.cjs');
 require('../directive-db00f5fb.cjs');
 require('../state-a62a7d5d.cjs');
 require('../index-7dc05ee5.cjs');
-require('../style-map-e193a4d9.cjs');
+require('../style-map-086bae47.cjs');
 
 
 

package/dist/components/index.js

@@ -10,8 +10,8 @@ export { LuksoTag } from './lukso-tag/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-e1077e02.js';
+export { a as TailwindElement, T as TailwindStyledElement } from '../index-f9b6cb04.js';
 import '../directive-9ec64c08.js';
 import '../state-7fde94d1.js';
 import '../index-714323c9.js';
-import '../style-map-3f88f525.js';
+import '../style-map-ec9692b2.js';

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

@@ -2,11 +2,13 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-4aafbf5c.cjs');
+const shared_tailwindElement_index = require('../../index-687bd80b.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
 const state = require('../../state-a62a7d5d.cjs');
 const index = require('../../index-7dc05ee5.cjs');
 
+const style = ":host {\n\n    display: inline-flex\n}\n\n:host([is-full-width]) {\n\n    display: flex\n}";
+
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -19,7 +21,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 const LONG_PRESS_ANIMATION_DURATION_IN_MS = 2e3;
-exports.LuksoButton = class LuksoButton extends shared_tailwindElement_index.TailwindElement {
+exports.LuksoButton = class LuksoButton extends shared_tailwindElement_index.TailwindStyledElement(style) {
   constructor() {
     super(...arguments);
     this.variant = "primary";
@@ -27,6 +29,10 @@ exports.LuksoButton = class LuksoButton extends shared_tailwindElement_index.Tai
     this.disabled = false;
     this.isFullWidth = false;
     this.isLongPress = false;
+    this.isLink = false;
+    this.href = "";
+    this.target = "_blank";
+    this.rel = "";
     this.isPressed = false;
     this.noTransition = false;
     this.timer = 0;
@@ -47,17 +53,18 @@ exports.LuksoButton = class LuksoButton extends shared_tailwindElement_index.Tai
     hover:shadow-button-hover-primary hover:bg-purple-58 hover:border-purple-58
     active:shadow-button-press-primary
     before:bg-purple-51`;
-    this.linkStyles = `bg-transparent border-none text-neutral-20
+    this.textStyles = `bg-transparent border-none text-neutral-20
     hover:text-neutral-35
     active:text-neutral-35 active:scale-100
     disabled:text-neutral-90`;
+    this.linkStyles = `!p-0 active:!scale-100 underline text-purple-51 hover:text-purple-41`;
     this.longPressStyles = `relative overflow-hidden z-[1] active:outline-0
     before:absolute before:content-[''] before:top-0 before:left-0 before:w-0 before:h-[48px]
-    before:transition-all before:duration-[2000ms] before:z-[-1] before:rounded-none`;
+    before:transition-all before:duration-[2000ms] before:z-[-1] before:rounded-0`;
     this.pressedStyles = `before:w-full before:z-[-1]`;
     this.noTransitionStyles = `before:transition-none`;
-    this.mediumSize = `py-3 px-6 paragraph-16-semi-bold rounded-xl`;
-    this.smallSize = `py-1 px-3 paragraph-12-regular rounded-lg hover:shadow-none active:shadow-none`;
+    this.mediumSize = `py-3 px-6 paragraph-inter-16-semi-bold rounded-12`;
+    this.smallSize = `py-1 px-3 paragraph-inter-12-regular rounded-8 hover:shadow-none active:shadow-none`;
   }
   handleMouseDown() {
     if (this.variant !== "primary" && this.variant !== "landing") {
@@ -88,7 +95,7 @@ exports.LuksoButton = class LuksoButton extends shared_tailwindElement_index.Tai
     }, 100);
     this.timer && clearTimeout(this.timer);
   }
-  render() {
+  buttonTemplate() {
     return shared_tailwindElement_index.y`
       <button
         data-testid="button"
@@ -100,7 +107,7 @@ exports.LuksoButton = class LuksoButton extends shared_tailwindElement_index.Tai
       [this.primaryStyles]: this.variant === "primary",
       [this.secondaryStyles]: this.variant === "secondary",
       [this.landingStyles]: this.variant === "landing",
-      [this.linkStyles]: this.variant === "link",
+      [this.textStyles]: this.variant === "text",
       ["w-full"]: this.isFullWidth,
       [this.longPressStyles]: this.isLongPress,
       [this.pressedStyles]: this.isPressed,
@@ -114,6 +121,31 @@ exports.LuksoButton = class LuksoButton extends shared_tailwindElement_index.Tai
       </button>
     `;
   }
+  linkTemplate() {
+    return shared_tailwindElement_index.y`
+      <a
+        data-testid="link"
+        class=${index.customClassMap({
+      [this.defaultStyles]: true,
+      [this.mediumSize]: this.size === "medium",
+      [this.smallSize]: this.size === "small",
+      [this.primaryStyles]: this.variant === "primary",
+      [this.secondaryStyles]: this.variant === "secondary",
+      [this.landingStyles]: this.variant === "landing",
+      [this.textStyles]: this.variant === "text",
+      [this.linkStyles]: this.variant === "text"
+    })}
+        href=${this.href}
+        target=${this.target}
+        rel=${this.rel}
+      >
+        <slot></slot>
+      </a>
+    `;
+  }
+  render() {
+    return shared_tailwindElement_index.y` ${this.isLink ? this.linkTemplate() : this.buttonTemplate()} `;
+  }
 };
 __decorateClass([
   directive.e({ type: String })
@@ -130,6 +162,18 @@ __decorateClass([
 __decorateClass([
   directive.e({ type: Boolean, attribute: "is-long-press" })
 ], exports.LuksoButton.prototype, "isLongPress", 2);
+__decorateClass([
+  directive.e({ type: Boolean, attribute: "is-link" })
+], exports.LuksoButton.prototype, "isLink", 2);
+__decorateClass([
+  directive.e({ type: String })
+], exports.LuksoButton.prototype, "href", 2);
+__decorateClass([
+  directive.e({ type: String })
+], exports.LuksoButton.prototype, "target", 2);
+__decorateClass([
+  directive.e({ type: String })
+], exports.LuksoButton.prototype, "rel", 2);
 __decorateClass([
   state.t()
 ], exports.LuksoButton.prototype, "isPressed", 2);

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

@@ -1,12 +1,17 @@
-import { TailwindElement } from '../../shared/tailwind-element';
-export declare type ButtonVariants = 'primary' | 'secondary' | 'landing' | 'link';
+export declare type ButtonVariants = 'primary' | 'secondary' | 'landing' | 'text';
 export declare type ButtonSizes = 'small' | 'medium';
-export declare class LuksoButton extends TailwindElement {
+export declare type LinkTarget = '_blank' | '_self' | '_parent' | '_top';
+declare const LuksoButton_base: typeof import("lit").LitElement;
+export declare class LuksoButton extends LuksoButton_base {
     variant: ButtonVariants;
     size: ButtonSizes;
     disabled: boolean;
     isFullWidth: boolean;
     isLongPress: boolean;
+    isLink: boolean;
+    href: string;
+    target: LinkTarget;
+    rel: string;
     private isPressed;
     private noTransition;
     private timer;
@@ -14,6 +19,7 @@ export declare class LuksoButton extends TailwindElement {
     private secondaryStyles;
     private primaryStyles;
     private landingStyles;
+    private textStyles;
     private linkStyles;
     private longPressStyles;
     private pressedStyles;
@@ -22,6 +28,8 @@ export declare class LuksoButton extends TailwindElement {
     private smallSize;
     private handleMouseDown;
     private handleMouseUp;
+    buttonTemplate(): import("lit").TemplateResult<1>;
+    linkTemplate(): import("lit").TemplateResult<1>;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {
@@ -29,4 +37,5 @@ declare global {
         'lukso-button': LuksoButton;
     }
 }
+export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/lukso-button/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,cAAc,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,MAAM,CAAA;AACzE,oBAAY,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAA;AAI5C,qBACa,WAAY,SAAQ,eAAe;IAE9C,OAAO,EAAE,cAAc,CAAY;IAGnC,IAAI,EAAE,WAAW,CAAW;IAG5B,QAAQ,UAAQ;IAGhB,WAAW,UAAQ;IAGnB,WAAW,UAAQ;IAGnB,OAAO,CAAC,SAAS,CAAQ;IAGzB,OAAO,CAAC,YAAY,CAAQ;IAG5B,OAAO,CAAC,KAAK,CAAI;IAEjB,OAAO,CAAC,aAAa,CAGiD;IAEtE,OAAO,CAAC,eAAe,CAEoD;IAE3E,OAAO,CAAC,aAAa,CAIE;IAEvB,OAAO,CAAC,aAAa,CAIC;IAEtB,OAAO,CAAC,UAAU,CAGS;IAE3B,OAAO,CAAC,eAAe,CAE4D;IAEnF,OAAO,CAAC,aAAa,CAAgC;IAErD,OAAO,CAAC,kBAAkB,CAA2B;IAErD,OAAO,CAAC,UAAU,CAAgD;IAElE,OAAO,CAAC,SAAS,CAAmF;IAEpG,OAAO,CAAC,eAAe;IAuBvB,OAAO,CAAC,aAAa;IAcrB,MAAM;CA0BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAOA,oBAAY,cAAc,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,MAAM,CAAA;AACzE,oBAAY,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAA;AAC5C,oBAAY,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAA;;AAIhE,qBACa,WAAY,SAAQ,gBAA4B;IAE3D,OAAO,EAAE,cAAc,CAAY;IAGnC,IAAI,EAAE,WAAW,CAAW;IAG5B,QAAQ,UAAQ;IAGhB,WAAW,UAAQ;IAGnB,WAAW,UAAQ;IAGnB,MAAM,UAAQ;IAGd,IAAI,SAAK;IAGT,MAAM,EAAE,UAAU,CAAW;IAG7B,GAAG,SAAK;IAGR,OAAO,CAAC,SAAS,CAAQ;IAGzB,OAAO,CAAC,YAAY,CAAQ;IAG5B,OAAO,CAAC,KAAK,CAAI;IAEjB,OAAO,CAAC,aAAa,CAGiD;IAEtE,OAAO,CAAC,eAAe,CAEoD;IAE3E,OAAO,CAAC,aAAa,CAIE;IAEvB,OAAO,CAAC,aAAa,CAIC;IAEtB,OAAO,CAAC,UAAU,CAGS;IAE3B,OAAO,CAAC,UAAU,CAAyE;IAE3F,OAAO,CAAC,eAAe,CAEyD;IAEhF,OAAO,CAAC,aAAa,CAAgC;IAErD,OAAO,CAAC,kBAAkB,CAA2B;IAErD,OAAO,CAAC,UAAU,CAAsD;IAExE,OAAO,CAAC,SAAS,CAAwF;IAEzG,OAAO,CAAC,eAAe;IAuBvB,OAAO,CAAC,aAAa;IAcrB,cAAc;IA2Bd,YAAY;IAuBZ,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}

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

@@ -1,8 +1,10 @@
-import { a as TailwindElement, y } from '../../index-e1077e02.js';
+import { T as TailwindStyledElement, y } from '../../index-f9b6cb04.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';
 
+const style = ":host {\n\n    display: inline-flex\n}\n\n:host([is-full-width]) {\n\n    display: flex\n}";
+
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -15,7 +17,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 const LONG_PRESS_ANIMATION_DURATION_IN_MS = 2e3;
-let LuksoButton = class extends TailwindElement {
+let LuksoButton = class extends TailwindStyledElement(style) {
   constructor() {
     super(...arguments);
     this.variant = "primary";
@@ -23,6 +25,10 @@ let LuksoButton = class extends TailwindElement {
     this.disabled = false;
     this.isFullWidth = false;
     this.isLongPress = false;
+    this.isLink = false;
+    this.href = "";
+    this.target = "_blank";
+    this.rel = "";
     this.isPressed = false;
     this.noTransition = false;
     this.timer = 0;
@@ -43,17 +49,18 @@ let LuksoButton = class extends TailwindElement {
     hover:shadow-button-hover-primary hover:bg-purple-58 hover:border-purple-58
     active:shadow-button-press-primary
     before:bg-purple-51`;
-    this.linkStyles = `bg-transparent border-none text-neutral-20
+    this.textStyles = `bg-transparent border-none text-neutral-20
     hover:text-neutral-35
     active:text-neutral-35 active:scale-100
     disabled:text-neutral-90`;
+    this.linkStyles = `!p-0 active:!scale-100 underline text-purple-51 hover:text-purple-41`;
     this.longPressStyles = `relative overflow-hidden z-[1] active:outline-0
     before:absolute before:content-[''] before:top-0 before:left-0 before:w-0 before:h-[48px]
-    before:transition-all before:duration-[2000ms] before:z-[-1] before:rounded-none`;
+    before:transition-all before:duration-[2000ms] before:z-[-1] before:rounded-0`;
     this.pressedStyles = `before:w-full before:z-[-1]`;
     this.noTransitionStyles = `before:transition-none`;
-    this.mediumSize = `py-3 px-6 paragraph-16-semi-bold rounded-xl`;
-    this.smallSize = `py-1 px-3 paragraph-12-regular rounded-lg hover:shadow-none active:shadow-none`;
+    this.mediumSize = `py-3 px-6 paragraph-inter-16-semi-bold rounded-12`;
+    this.smallSize = `py-1 px-3 paragraph-inter-12-regular rounded-8 hover:shadow-none active:shadow-none`;
   }
   handleMouseDown() {
     if (this.variant !== "primary" && this.variant !== "landing") {
@@ -84,7 +91,7 @@ let LuksoButton = class extends TailwindElement {
     }, 100);
     this.timer && clearTimeout(this.timer);
   }
-  render() {
+  buttonTemplate() {
     return y`
       <button
         data-testid="button"
@@ -96,7 +103,7 @@ let LuksoButton = class extends TailwindElement {
       [this.primaryStyles]: this.variant === "primary",
       [this.secondaryStyles]: this.variant === "secondary",
       [this.landingStyles]: this.variant === "landing",
-      [this.linkStyles]: this.variant === "link",
+      [this.textStyles]: this.variant === "text",
       ["w-full"]: this.isFullWidth,
       [this.longPressStyles]: this.isLongPress,
       [this.pressedStyles]: this.isPressed,
@@ -110,6 +117,31 @@ let LuksoButton = class extends TailwindElement {
       </button>
     `;
   }
+  linkTemplate() {
+    return y`
+      <a
+        data-testid="link"
+        class=${customClassMap({
+      [this.defaultStyles]: true,
+      [this.mediumSize]: this.size === "medium",
+      [this.smallSize]: this.size === "small",
+      [this.primaryStyles]: this.variant === "primary",
+      [this.secondaryStyles]: this.variant === "secondary",
+      [this.landingStyles]: this.variant === "landing",
+      [this.textStyles]: this.variant === "text",
+      [this.linkStyles]: this.variant === "text"
+    })}
+        href=${this.href}
+        target=${this.target}
+        rel=${this.rel}
+      >
+        <slot></slot>
+      </a>
+    `;
+  }
+  render() {
+    return y` ${this.isLink ? this.linkTemplate() : this.buttonTemplate()} `;
+  }
 };
 __decorateClass([
   e({ type: String })
@@ -126,6 +158,18 @@ __decorateClass([
 __decorateClass([
   e({ type: Boolean, attribute: "is-long-press" })
 ], LuksoButton.prototype, "isLongPress", 2);
+__decorateClass([
+  e({ type: Boolean, attribute: "is-link" })
+], LuksoButton.prototype, "isLink", 2);
+__decorateClass([
+  e({ type: String })
+], LuksoButton.prototype, "href", 2);
+__decorateClass([
+  e({ type: String })
+], LuksoButton.prototype, "target", 2);
+__decorateClass([
+  e({ type: String })
+], LuksoButton.prototype, "rel", 2);
 __decorateClass([
   t()
 ], LuksoButton.prototype, "isPressed", 2);

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-4aafbf5c.cjs');
+const shared_tailwindElement_index = require('../../index-687bd80b.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
-const styleMap = require('../../style-map-e193a4d9.cjs');
+const styleMap = require('../../style-map-086bae47.cjs');
 const index = require('../../index-7dc05ee5.cjs');
 require('../lukso-profile/index.cjs');
 
@@ -30,7 +30,7 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
     this.profileAddress = "";
     this.isFixedWidth = false;
     this.isFixedHeight = false;
-    this.defaultStyles = `rounded-3xl  shadow-pink-drop-shadow-2xl`;
+    this.defaultStyles = `rounded-24  shadow-pink-drop-shadow-2xl`;
   }
   basicTemplate() {
     return shared_tailwindElement_index.y`
@@ -59,7 +59,7 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
         <div>
           <slot name="header"></slot>
         </div>
-        <div class="bg-neutral-100 shadow-neutral-above-shadow-1xl rounded-3xl">
+        <div class="bg-neutral-100 shadow-neutral-above-shadow-1xl rounded-24">
           <slot name="content"></slot>
         </div>
       </div>
@@ -86,7 +86,7 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
           ></div>
         </div>
         <div
-          class="bg-neutral-100 shadow-neutral-above-shadow-1xl rounded-3xl relative"
+          class="bg-neutral-100 shadow-neutral-above-shadow-1xl rounded-24 relative"
         >
           <lukso-profile
             profile-url=${this.profileUrl}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAOA,OAAO,4BAA4B,CAAA;AAEnC,oBAAY,YAAY,GAAG,OAAO,GAAG,aAAa,GAAG,SAAS,CAAA;;AAE9D,qBACa,SAAU,SAAQ,cAA4B;IAEzD,OAAO,EAAE,YAAY,CAAU;IAG/B,aAAa,SAAK;IAGlB,UAAU,SAAK;IAGf,cAAc,SAAK;IAGnB,YAAY,UAAQ;IAGpB,aAAa,UAAQ;IAErB,OAAO,CAAC,aAAa,CAA6C;IAElE,aAAa;IAeb,kBAAkB;IAoBlB,eAAe;IA6Cf,MAAM;CAWP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAA;KACxB;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAOA,OAAO,4BAA4B,CAAA;AAEnC,oBAAY,YAAY,GAAG,OAAO,GAAG,aAAa,GAAG,SAAS,CAAA;;AAE9D,qBACa,SAAU,SAAQ,cAA4B;IAEzD,OAAO,EAAE,YAAY,CAAU;IAG/B,aAAa,SAAK;IAGlB,UAAU,SAAK;IAGf,cAAc,SAAK;IAGnB,YAAY,UAAQ;IAGpB,aAAa,UAAQ;IAErB,OAAO,CAAC,aAAa,CAA4C;IAEjE,aAAa;IAeb,kBAAkB;IAoBlB,eAAe;IA6Cf,MAAM;CAWP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAA;KACxB;CACF"}

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

@@ -1,6 +1,6 @@
-import { T as TailwindStyledElement, y } from '../../index-e1077e02.js';
+import { T as TailwindStyledElement, y } from '../../index-f9b6cb04.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
-import { i } from '../../style-map-3f88f525.js';
+import { i } from '../../style-map-ec9692b2.js';
 import { c as customClassMap } from '../../index-714323c9.js';
 import '../lukso-profile/index.js';
 
@@ -26,7 +26,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
     this.profileAddress = "";
     this.isFixedWidth = false;
     this.isFixedHeight = false;
-    this.defaultStyles = `rounded-3xl  shadow-pink-drop-shadow-2xl`;
+    this.defaultStyles = `rounded-24  shadow-pink-drop-shadow-2xl`;
   }
   basicTemplate() {
     return y`
@@ -55,7 +55,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
         <div>
           <slot name="header"></slot>
         </div>
-        <div class="bg-neutral-100 shadow-neutral-above-shadow-1xl rounded-3xl">
+        <div class="bg-neutral-100 shadow-neutral-above-shadow-1xl rounded-24">
           <slot name="content"></slot>
         </div>
       </div>
@@ -82,7 +82,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
           ></div>
         </div>
         <div
-          class="bg-neutral-100 shadow-neutral-above-shadow-1xl rounded-3xl relative"
+          class="bg-neutral-100 shadow-neutral-above-shadow-1xl rounded-24 relative"
         >
           <lukso-profile
             profile-url=${this.profileUrl}

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-4aafbf5c.cjs');
+const shared_tailwindElement_index = require('../../index-687bd80b.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
-const styleMap = require('../../style-map-e193a4d9.cjs');
+const styleMap = require('../../style-map-086bae47.cjs');
 
 const style = ":host {\n    display: inline-flex\n}";
 

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

@@ -1,6 +1,6 @@
-import { y, T as TailwindStyledElement } from '../../index-e1077e02.js';
+import { y, T as TailwindStyledElement } from '../../index-f9b6cb04.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
-import { i } from '../../style-map-3f88f525.js';
+import { i } from '../../style-map-ec9692b2.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-4aafbf5c.cjs');
+const shared_tailwindElement_index = require('../../index-687bd80b.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
 const state = require('../../state-a62a7d5d.cjs');
 const index = require('../../index-7dc05ee5.cjs');
@@ -35,12 +35,12 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
     this.min = void 0;
     this.hasHocus = false;
     this.hasHighlight = false;
-    this.defaultInputStyles = `bg-neutral-100 text-neutral-20 paragraph-16-regular px-4 py-3
+    this.defaultInputStyles = `bg-neutral-100 text-neutral-20 paragraph-inter-16-regular px-4 py-3
     border border-solid h-[48px] placeholder:text-neutral-70
     outline-none transition transition-all duration-150 appearance-none`;
-    this.defaultUnitStyles = `paragraph-12-regular text-neutral-60 flex px-3.5 items-center relative
+    this.defaultUnitStyles = `paragraph-inter-12-regular text-neutral-60 flex px-3.5 items-center relative
     border border-solid h-[48px] transition transition-all duration-150
-    rounded-r-xl border-l-0 before:bg-neutral-90 before:absolute before:top-[calc(50%-12px)] before:left-0
+    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`;
   }
   inputTemplate() {
@@ -59,8 +59,8 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
       [this.defaultInputStyles]: true,
       [this.error === "" ? "border-neutral-90" : "border-red-85"]: !this.hasHighlight,
       [this.error === "" ? "border-neutral-35" : "border-red-65"]: this.hasHighlight,
-      ["rounded-l-xl border-r-0"]: this.unit !== "",
-      ["rounded-xl"]: this.unit === "",
+      ["rounded-l-12 border-r-0"]: this.unit !== "",
+      ["rounded-12"]: this.unit === "",
       ["w-full"]: this.isFullWidth,
       ["w-[350px]"]: !this.isFullWidth && this.unit === "",
       ["w-[300px]"]: !this.isFullWidth && this.unit !== ""
@@ -77,20 +77,22 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
   }
   labelTemplate() {
     return shared_tailwindElement_index.y`
-      <label for=${this.name} class="heading-h5 text-neutral-20 pb-2 block"
+      <label
+        for=${this.name}
+        class="heading-inter-14-bold text-neutral-20 pb-2 block"
         >${this.label}</label
       >
     `;
   }
   descriptionTemplate() {
     return shared_tailwindElement_index.y`
-      <div class="paragraph-12-regular text-neutral-20 pb-2">
+      <div class="paragraph-inter-12-regular text-neutral-20 pb-2">
         ${this.description ?? shared_tailwindElement_index.b}
       </div>
     `;
   }
   errorTemplate() {
-    return shared_tailwindElement_index.y`<div class="paragraph-12-regular text-red-65 pt-2">
+    return shared_tailwindElement_index.y`<div class="paragraph-inter-12-regular text-red-65 pt-2">
       ${this.error}
     </div>`;
   }

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,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,IAAI,SAAK;IAGT,WAAW,UAAQ;IAGnB,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;IAmCb,aAAa;IAQb,mBAAmB;IAQnB,aAAa;IAMb,YAAY;IAgBZ,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,UAAU;IAKlB,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":["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,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,IAAI,SAAK;IAGT,WAAW,UAAQ;IAGnB,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;IAmCb,aAAa;IAUb,mBAAmB;IAQnB,aAAa;IAMb,YAAY;IAgBZ,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,UAAU;IAKlB,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-e1077e02.js';
+import { a as TailwindElement, y, b } from '../../index-f9b6cb04.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';
@@ -31,12 +31,12 @@ let LuksoInput = class extends TailwindElement {
     this.min = void 0;
     this.hasHocus = false;
     this.hasHighlight = false;
-    this.defaultInputStyles = `bg-neutral-100 text-neutral-20 paragraph-16-regular px-4 py-3
+    this.defaultInputStyles = `bg-neutral-100 text-neutral-20 paragraph-inter-16-regular px-4 py-3
     border border-solid h-[48px] placeholder:text-neutral-70
     outline-none transition transition-all duration-150 appearance-none`;
-    this.defaultUnitStyles = `paragraph-12-regular text-neutral-60 flex px-3.5 items-center relative
+    this.defaultUnitStyles = `paragraph-inter-12-regular text-neutral-60 flex px-3.5 items-center relative
     border border-solid h-[48px] transition transition-all duration-150
-    rounded-r-xl border-l-0 before:bg-neutral-90 before:absolute before:top-[calc(50%-12px)] before:left-0
+    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`;
   }
   inputTemplate() {
@@ -55,8 +55,8 @@ let LuksoInput = class extends TailwindElement {
       [this.defaultInputStyles]: true,
       [this.error === "" ? "border-neutral-90" : "border-red-85"]: !this.hasHighlight,
       [this.error === "" ? "border-neutral-35" : "border-red-65"]: this.hasHighlight,
-      ["rounded-l-xl border-r-0"]: this.unit !== "",
-      ["rounded-xl"]: this.unit === "",
+      ["rounded-l-12 border-r-0"]: this.unit !== "",
+      ["rounded-12"]: this.unit === "",
       ["w-full"]: this.isFullWidth,
       ["w-[350px]"]: !this.isFullWidth && this.unit === "",
       ["w-[300px]"]: !this.isFullWidth && this.unit !== ""
@@ -73,20 +73,22 @@ let LuksoInput = class extends TailwindElement {
   }
   labelTemplate() {
     return y`
-      <label for=${this.name} class="heading-h5 text-neutral-20 pb-2 block"
+      <label
+        for=${this.name}
+        class="heading-inter-14-bold text-neutral-20 pb-2 block"
         >${this.label}</label
       >
     `;
   }
   descriptionTemplate() {
     return y`
-      <div class="paragraph-12-regular text-neutral-20 pb-2">
+      <div class="paragraph-inter-12-regular text-neutral-20 pb-2">
         ${this.description ?? b}
       </div>
     `;
   }
   errorTemplate() {
-    return y`<div class="paragraph-12-regular text-red-65 pt-2">
+    return y`<div class="paragraph-inter-12-regular text-red-65 pt-2">
       ${this.error}
     </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-4aafbf5c.cjs');
+const shared_tailwindElement_index = require('../../index-687bd80b.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
 const index = require('../../index-7dc05ee5.cjs');
 
@@ -25,7 +25,7 @@ exports.LuksoModal = class LuksoModal extends shared_tailwindElement_index.Tailw
     this.wrapperStyles = `opacity-0 fixed z-[1000] transition-opacity top-0 left-0 p-6 animate-fade-in animation-duration-200`;
     this.openStyles = `flex opacity-100 visible items-center justify-center w-[100vw] h-[100vh]`;
     this.overlayStyles = `bg-[rgba(36,53,66,0.8)] backdrop-blur-sm fixed top-0 left-0 w-[100vw] h-[100vh] z-[999]`;
-    this.dialogStyles = `bg-neutral-98 rounded-xl shadow-neutral-drop-shadow-3xl z-[1001]`;
+    this.dialogStyles = `bg-neutral-98 rounded-12 shadow-neutral-drop-shadow-3xl z-[1001]`;
   }
   close() {
     this.isOpen = false;

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

@@ -1,4 +1,4 @@
-import { a as TailwindElement, y } from '../../index-e1077e02.js';
+import { a as TailwindElement, y } from '../../index-f9b6cb04.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
 import { c as customClassMap } from '../../index-714323c9.js';
 
@@ -21,7 +21,7 @@ let LuksoModal = class extends TailwindElement {
     this.wrapperStyles = `opacity-0 fixed z-[1000] transition-opacity top-0 left-0 p-6 animate-fade-in animation-duration-200`;
     this.openStyles = `flex opacity-100 visible items-center justify-center w-[100vw] h-[100vh]`;
     this.overlayStyles = `bg-[rgba(36,53,66,0.8)] backdrop-blur-sm fixed top-0 left-0 w-[100vw] h-[100vh] z-[999]`;
-    this.dialogStyles = `bg-neutral-98 rounded-xl shadow-neutral-drop-shadow-3xl z-[1001]`;
+    this.dialogStyles = `bg-neutral-98 rounded-12 shadow-neutral-drop-shadow-3xl z-[1001]`;
   }
   close() {
     this.isOpen = false;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-4aafbf5c.cjs');
+const shared_tailwindElement_index = require('../../index-687bd80b.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
 const index = require('../../index-7dc05ee5.cjs');
 
@@ -45,12 +45,13 @@ exports.LuksoNavbar = class LuksoNavbar extends shared_tailwindElement_index.Tai
     })}
       >
         <div
-          class="flex items-center px-10 h-full cursor-pointer"
+          class="flex items-center px-7 h-full cursor-pointer sm:px-10"
           @click=${this._onBrandClick}
         >
           <img src="/assets/images/lukso-logo.svg" class="mr-4" />
           <div
-            class="text-purple-51 heading-h4-medium-uppercase-apax whitespace-pre-line flex leading-none"
+            class="text-purple-51 nav-apax-14-medium-uppercase whitespace-pre-line flex leading-none
+              hover:text-purple-41"
           >
             ${this.title}
           </div>

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;IAEhB,OAAO,CAAC,aAAa,CAAqD;IAE1E,OAAO,CAAC,YAAY,CAAmB;IAEvC,OAAO,CAAC,YAAY,CAA0B;IAE9C,aAAa;IAQb,MAAM;CAyBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}
+{"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;IAEhB,OAAO,CAAC,aAAa,CAAqD;IAE1E,OAAO,CAAC,YAAY,CAAmB;IAEvC,OAAO,CAAC,YAAY,CAA0B;IAE9C,aAAa;IAQb,MAAM;CA0BP;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-e1077e02.js';
+import { a as TailwindElement, y } from '../../index-f9b6cb04.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
 import { c as customClassMap } from '../../index-714323c9.js';
 
@@ -41,12 +41,13 @@ let LuksoNavbar = class extends TailwindElement {
     })}
       >
         <div
-          class="flex items-center px-10 h-full cursor-pointer"
+          class="flex items-center px-7 h-full cursor-pointer sm:px-10"
           @click=${this._onBrandClick}
         >
           <img src="/assets/images/lukso-logo.svg" class="mr-4" />
           <div
-            class="text-purple-51 heading-h4-medium-uppercase-apax whitespace-pre-line flex leading-none"
+            class="text-purple-51 nav-apax-14-medium-uppercase whitespace-pre-line flex leading-none
+              hover:text-purple-41"
           >
             ${this.title}
           </div>