@lukso/web-components 1.172.13 → 1.172.17

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

@@ -1,23 +1,18 @@
-import { m as makeBlockie } from '../../chunks/index-BDyLu6M0.js';
-import { b as TailwindStyledElement, x, E } from '../../chunks/index-5X9ujrWL.js';
-import { n } from '../../chunks/property-DfumgIL6.js';
-import { r } from '../../chunks/state-CaelFSbE.js';
-import { e } from '../../chunks/base-Cl6v8-BZ.js';
-import { o as o$1 } from '../../chunks/style-map-BPljJihp.js';
-import { c as ce } from '../../chunks/index-B9iart53.js';
-import { s as safeCustomElement } from '../../chunks/safe-custom-element-qdGIR_v6.js';
+import makeBlockie from 'ethereum-blockies-base64';
+import { html, nothing } from 'lit';
+import { property, queryAssignedElements, state } from 'lit/decorators.js';
+import { o } from '../../chunks/style-map-auscxO0L.js';
+import { tv } from 'tailwind-variants';
+import { a as TailwindStyledElement, s as safeCustomElement } from '../../chunks/index-DluTRl1F.js';
+import '../lukso-profile/index.js';
 import '../../tailwind-config.js';
-import { c as cn } from '../../chunks/axe-DJKac19y.js';
-import { i as isAddress } from '../../chunks/isAddress-BUdSrCaY.js';
-import { c as customStyleMap } from '../../chunks/index-CZGvLdJ0.js';
+import '../../chunks/index-CSnDkMHN.js';
+import { c as cn } from '../../chunks/cn-Df_5FiGi.js';
+import { isAddress } from 'viem';
+import 'axe-core';
+import { c as customStyleMap } from '../../chunks/index-CqZm8OfY.js';
 import '../lukso-image/index.js';
 
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */function o(o){return (e$1,n)=>{const{slot:r,selector:s}=o??{},c="slot"+(r?`[name=${r}]`:":not([name])");return e(e$1,n,{get(){const t=this.renderRoot?.querySelector(c),e=t?.assignedElements(o)??[];return void 0===s?e:e.filter((t=>t.matches(s)))}})}}
-
 const backgroundGradient = (address) => {
   let gradientStart = "#24354210";
   let gradientEnd = "#24354220";
@@ -56,7 +51,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
     this.hasOverlay = false;
     this.isEoa = false;
     this.hasBottom = false;
-    this.cardStyles = ce({
+    this.cardStyles = tv({
       base: "bg-neutral-100",
       variants: {
         borderRadius: {
@@ -105,7 +100,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
       isHoverable: this.isHoverable,
       hasNoWidth: !this.width
     });
-    return x`
+    return html`
       <div
         data-testid="card"
         style=${customStyleMap({
@@ -126,10 +121,10 @@ let LuksoCard = class extends TailwindStyledElement(style) {
       hasNoWidth: !this.width,
       class: "grid grid-rows-[auto,1fr] overflow-hidden"
     });
-    return x`
+    return html`
       <div
         data-testid="card"
-        style=${o$1({
+        style=${o({
       minHeight: `${this.height}px`,
       width: `${this.width}px`
     })}
@@ -154,7 +149,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
       hasNoWidth: !this.width,
       class: "grid grid-rows-[1fr,auto]"
     });
-    return x`
+    return html`
       <div
         data-testid="card"
         style=${customStyleMap({
@@ -164,7 +159,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
         class=${cn(cardStyles, this.customClass)}
       >
         <div
-          style=${o$1({
+          style=${o({
       backgroundImage: backgroundGradient(this.profileAddress)
     })}
           class=${cn(
@@ -172,14 +167,14 @@ let LuksoCard = class extends TailwindStyledElement(style) {
       this.headerClass
     )}
         >
-          ${this.backgroundUrl && x`<div
+          ${this.backgroundUrl && html`<div
             class="rounded-t-[inherit] overflow-hidden absolute inset-0"
           >
             <lukso-image src=${this.backgroundUrl}></lukso-image>
           </div>`}
-          ${this.hasOverlay ? x`<div
+          ${this.hasOverlay ? html`<div
                 class="h-full full rounded-t-[inherit] rounded-b-0 bg-neutral-20/10 absolute"
-              ></div>` : E}
+              ></div>` : nothing}
           <div class="relative h-full">
             <slot name="header"></slot>
           </div>
@@ -218,7 +213,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
       hasNoWidth: !this.width,
       class: "grid grid-rows-[auto,1fr]"
     });
-    return x`
+    return html`
       <div
         data-testid="card"
         style=${customStyleMap({
@@ -228,7 +223,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
         class=${cn(cardStyles, this.customClass)}
       >
         <div
-          style=${o$1({
+          style=${o({
       backgroundImage: backgroundGradient(this.profileAddress)
     })}
           class=${cn(
@@ -236,7 +231,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
       this.headerClass
     )}
         >
-          ${this.backgroundUrl && x`<div
+          ${this.backgroundUrl && html`<div
               class="rounded-t-[inherit] overflow-hidden absolute inset-0"
             >
               <lukso-image src=${this.backgroundUrl}></lukso-image>
@@ -287,7 +282,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
       hasNoWidth: !this.width,
       class: "grid grid-rows-[auto,1fr]"
     });
-    return x`
+    return html`
       <div
         data-testid="card"
         style=${customStyleMap({
@@ -297,7 +292,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
         class=${cn(cardStyles, this.customClass)}
       >
         <div
-          style=${o$1({
+          style=${o({
       backgroundImage: backgroundGradient(this.profileAddress)
     })}
           class=${cn(
@@ -305,7 +300,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
       this.headerClass
     )}
         >
-          ${this.backgroundUrl && x`<div
+          ${this.backgroundUrl && html`<div
               class="rounded-t-[inherit] overflow-hidden absolute inset-0"
             >
               <lukso-image src=${this.backgroundUrl}></lukso-image>
@@ -342,7 +337,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
       hasNoWidth: !this.width,
       class: "flex"
     });
-    return x`
+    return html`
       <div
         data-testid="card"
         style=${customStyleMap({
@@ -355,12 +350,12 @@ let LuksoCard = class extends TailwindStyledElement(style) {
         <div
           class="h-full w-full -mb-6 bg-center bg-cover rounded-[inherit] relative"
         >
-          ${this.backgroundUrl && x`<div class="rounded-[inherit] overflow-hidden absolute inset-0">
+          ${this.backgroundUrl && html`<div class="rounded-[inherit] overflow-hidden absolute inset-0">
             <lukso-image src=${this.backgroundUrl}></lukso-image>
           </div>`}
-          ${this.hasOverlay && this.backgroundUrl ? x`<div
+          ${this.hasOverlay && this.backgroundUrl ? html`<div
                 class="h-full w-full rounded-[inherit] bg-neutral-20/10 absolute"
-              ></div>` : E}
+              ></div>` : nothing}
           <div
             class="h-full w-full flex flex-col items-center justify-center absolute"
           >
@@ -378,7 +373,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
       hasNoWidth: !this.width,
       class: "grid grid-rows-[auto,1fr]"
     });
-    return x`
+    return html`
       <div
         data-testid="card"
         style=${customStyleMap({
@@ -388,7 +383,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
         class=${cn(cardStyles, this.customClass)}
       >
         <div
-          style=${o$1({
+          style=${o({
       backgroundImage: backgroundGradient(this.profileAddress)
     })}
           class=${cn(
@@ -396,7 +391,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
       this.headerClass
     )}
         >
-          ${this.backgroundUrl && x`
+          ${this.backgroundUrl && html`
             <div class="rounded-t-[inherit] overflow-hidden absolute inset-0">
               <lukso-image src=${this.backgroundUrl}></lukso-image>
             </div>
@@ -431,49 +426,49 @@ let LuksoCard = class extends TailwindStyledElement(style) {
   }
 };
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoCard.prototype, "variant", 2);
 __decorateClass([
-  n({ type: String, attribute: "background-url" })
+  property({ type: String, attribute: "background-url" })
 ], LuksoCard.prototype, "backgroundUrl", 2);
 __decorateClass([
-  n({ type: String, attribute: "profile-url" })
+  property({ type: String, attribute: "profile-url" })
 ], LuksoCard.prototype, "profileUrl", 2);
 __decorateClass([
-  n({ type: String, attribute: "profile-address" })
+  property({ type: String, attribute: "profile-address" })
 ], LuksoCard.prototype, "profileAddress", 2);
 __decorateClass([
-  n({ type: Number })
+  property({ type: Number })
 ], LuksoCard.prototype, "width", 2);
 __decorateClass([
-  n({ type: Number })
+  property({ type: Number })
 ], LuksoCard.prototype, "height", 2);
 __decorateClass([
-  n({ type: String, attribute: "custom-class" })
+  property({ type: String, attribute: "custom-class" })
 ], LuksoCard.prototype, "customClass", 2);
 __decorateClass([
-  n({ type: String, attribute: "header-class" })
+  property({ type: String, attribute: "header-class" })
 ], LuksoCard.prototype, "headerClass", 2);
 __decorateClass([
-  n({ type: String, attribute: "border-radius" })
+  property({ type: String, attribute: "border-radius" })
 ], LuksoCard.prototype, "borderRadius", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoCard.prototype, "shadow", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-hoverable" })
+  property({ type: Boolean, attribute: "is-hoverable" })
 ], LuksoCard.prototype, "isHoverable", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "has-overlay" })
+  property({ type: Boolean, attribute: "has-overlay" })
 ], LuksoCard.prototype, "hasOverlay", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-eoa" })
+  property({ type: Boolean, attribute: "is-eoa" })
 ], LuksoCard.prototype, "isEoa", 2);
 __decorateClass([
-  o({ slot: "bottom", flatten: true })
+  queryAssignedElements({ slot: "bottom", flatten: true })
 ], LuksoCard.prototype, "bottomNodes", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoCard.prototype, "hasBottom", 2);
 LuksoCard = __decorateClass([
   safeCustomElement("lukso-card")

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

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../chunks/index-BxQ_0s_1.js');
-const property = require('../../chunks/property-D6IL6zax.js');
-const state = require('../../chunks/state-CFjY89m3.js');
-const safeCustomElement = require('../../chunks/safe-custom-element-tQ-epw6h.js');
-const index = require('../../chunks/index-DG4rMUh3.js');
+const lit = require('lit');
+const decorators_js = require('lit/decorators.js');
+const index = require('../../chunks/index-BBPgtFEP.js');
+const index$1 = require('../../chunks/index-BOEPqh0N.js');
+require('../../chunks/directive-CY66atYi.js');
 require('../lukso-form-description/index.cjs');
 require('../lukso-form-error/index.cjs');
 
@@ -20,7 +20,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-exports.LuksoCheckbox = class LuksoCheckbox extends shared_tailwindElement_index.TailwindElement {
+exports.LuksoCheckbox = class LuksoCheckbox extends index.TailwindElement {
   constructor() {
     super(...arguments);
     this.name = "";
@@ -58,9 +58,9 @@ exports.LuksoCheckbox = class LuksoCheckbox extends shared_tailwindElement_index
     outline-none transition transition-all duration-150 appearance-none shrink-0`;
   }
   checkedIconTemplate() {
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <lukso-icon
-        class=${index.customClassMap({
+        class=${index$1.customClassMap({
       hidden: !this.checked
     })}
         name="tick"
@@ -69,9 +69,9 @@ exports.LuksoCheckbox = class LuksoCheckbox extends shared_tailwindElement_index
     `;
   }
   checkboxTemplate() {
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <div
-        class=${index.customClassMap({
+        class=${index$1.customClassMap({
       [this.defaultCheckboxStyles]: true,
       [!this.error ? "border-neutral-90" : "border-red-85"]: !this.hasHighlight,
       [!this.error ? "border-neutral-35" : "border-red-65"]: this.hasHighlight,
@@ -88,12 +88,12 @@ exports.LuksoCheckbox = class LuksoCheckbox extends shared_tailwindElement_index
   }
   inputTemplate() {
     const id = this.id || this.name;
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <input
         name=${this.name}
         ?checked=${this.checked ? "checked" : void 0}
         type="checkbox"
-        class=${index.customClassMap({
+        class=${index$1.customClassMap({
       [this.defaultInputStyles]: true,
       ["text-neutral-60"]: this.isDisabled
     })}
@@ -107,9 +107,9 @@ exports.LuksoCheckbox = class LuksoCheckbox extends shared_tailwindElement_index
     `;
   }
   labelTemplate() {
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <span
-        class=${index.customClassMap({
+        class=${index$1.customClassMap({
       [this.defaultLabelStyles]: true,
       "paragraph-inter-16-regular": this.size === "medium" || this.size === "small",
       "paragraph-inter-12-semi-bold": this.size === "x-small",
@@ -122,14 +122,14 @@ exports.LuksoCheckbox = class LuksoCheckbox extends shared_tailwindElement_index
     `;
   }
   profileUsernameTemplate() {
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <div class="flex items-center text-neutral-20 gap-2 justify-center">
         <slot></slot>
       </div>
     `;
   }
   render() {
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <div>
         <lukso-form-label label=${this.label}></lukso-form-label>
         <lukso-form-description
@@ -137,7 +137,7 @@ exports.LuksoCheckbox = class LuksoCheckbox extends shared_tailwindElement_index
         ></lukso-form-description>
         <label
           for=${this.name}
-          class=${index.customClassMap({
+          class=${index$1.customClassMap({
       [this.defaultContainerStyles]: true,
       ["cursor-not-allowed"]: this.isDisabled || this.isReadonly
     })}
@@ -145,8 +145,8 @@ exports.LuksoCheckbox = class LuksoCheckbox extends shared_tailwindElement_index
           @mouseleave=${this.handleMouseOut}
         >
           ${this.inputTemplate()} ${this.checkboxTemplate()}
-          ${this.type === "text" ? this.labelTemplate() : shared_tailwindElement_index.E}
-          ${this.type === "profile" ? this.profileUsernameTemplate() : shared_tailwindElement_index.E}
+          ${this.type === "text" ? this.labelTemplate() : lit.nothing}
+          ${this.type === "profile" ? this.profileUsernameTemplate() : lit.nothing}
         </label>
         <lukso-form-error error=${this.error}></lukso-form-error>
       </div>
@@ -180,47 +180,47 @@ exports.LuksoCheckbox = class LuksoCheckbox extends shared_tailwindElement_index
   }
 };
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoCheckbox.prototype, "name", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoCheckbox.prototype, "id", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoCheckbox.prototype, "ref", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoCheckbox.prototype, "type", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoCheckbox.prototype, "size", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoCheckbox.prototype, "label", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoCheckbox.prototype, "description", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoCheckbox.prototype, "error", 2);
 __decorateClass([
-  property.n({ type: Boolean })
+  decorators_js.property({ type: Boolean })
 ], exports.LuksoCheckbox.prototype, "checked", 2);
 __decorateClass([
-  property.n({ type: String, attribute: "custom-class" })
+  decorators_js.property({ type: String, attribute: "custom-class" })
 ], exports.LuksoCheckbox.prototype, "customClass", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-readonly" })
+  decorators_js.property({ type: Boolean, attribute: "is-readonly" })
 ], exports.LuksoCheckbox.prototype, "isReadonly", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-disabled" })
+  decorators_js.property({ type: Boolean, attribute: "is-disabled" })
 ], exports.LuksoCheckbox.prototype, "isDisabled", 2);
 __decorateClass([
-  state.r()
+  decorators_js.state()
 ], exports.LuksoCheckbox.prototype, "hasFocus", 2);
 __decorateClass([
-  state.r()
+  decorators_js.state()
 ], exports.LuksoCheckbox.prototype, "hasHighlight", 2);
 exports.LuksoCheckbox = __decorateClass([
-  safeCustomElement.safeCustomElement("lukso-checkbox")
+  index.safeCustomElement("lukso-checkbox")
 ], exports.LuksoCheckbox);

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

@@ -1,8 +1,8 @@
-import { T as TailwindElement, x, E } from '../../chunks/index-5X9ujrWL.js';
-import { n } from '../../chunks/property-DfumgIL6.js';
-import { r } from '../../chunks/state-CaelFSbE.js';
-import { s as safeCustomElement } from '../../chunks/safe-custom-element-qdGIR_v6.js';
-import { c as customClassMap } from '../../chunks/index-F8ll4iy2.js';
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { T as TailwindElement, s as safeCustomElement } from '../../chunks/index-DluTRl1F.js';
+import { c as customClassMap } from '../../chunks/index-C5S-_QDF.js';
+import '../../chunks/directive-DUHAbymA.js';
 import '../lukso-form-description/index.js';
 import '../lukso-form-error/index.js';
 
@@ -54,7 +54,7 @@ let LuksoCheckbox = class extends TailwindElement {
     outline-none transition transition-all duration-150 appearance-none shrink-0`;
   }
   checkedIconTemplate() {
-    return x`
+    return html`
       <lukso-icon
         class=${customClassMap({
       hidden: !this.checked
@@ -65,7 +65,7 @@ let LuksoCheckbox = class extends TailwindElement {
     `;
   }
   checkboxTemplate() {
-    return x`
+    return html`
       <div
         class=${customClassMap({
       [this.defaultCheckboxStyles]: true,
@@ -84,7 +84,7 @@ let LuksoCheckbox = class extends TailwindElement {
   }
   inputTemplate() {
     const id = this.id || this.name;
-    return x`
+    return html`
       <input
         name=${this.name}
         ?checked=${this.checked ? "checked" : void 0}
@@ -103,7 +103,7 @@ let LuksoCheckbox = class extends TailwindElement {
     `;
   }
   labelTemplate() {
-    return x`
+    return html`
       <span
         class=${customClassMap({
       [this.defaultLabelStyles]: true,
@@ -118,14 +118,14 @@ let LuksoCheckbox = class extends TailwindElement {
     `;
   }
   profileUsernameTemplate() {
-    return x`
+    return html`
       <div class="flex items-center text-neutral-20 gap-2 justify-center">
         <slot></slot>
       </div>
     `;
   }
   render() {
-    return x`
+    return html`
       <div>
         <lukso-form-label label=${this.label}></lukso-form-label>
         <lukso-form-description
@@ -141,8 +141,8 @@ let LuksoCheckbox = class extends TailwindElement {
           @mouseleave=${this.handleMouseOut}
         >
           ${this.inputTemplate()} ${this.checkboxTemplate()}
-          ${this.type === "text" ? this.labelTemplate() : E}
-          ${this.type === "profile" ? this.profileUsernameTemplate() : E}
+          ${this.type === "text" ? this.labelTemplate() : nothing}
+          ${this.type === "profile" ? this.profileUsernameTemplate() : nothing}
         </label>
         <lukso-form-error error=${this.error}></lukso-form-error>
       </div>
@@ -176,46 +176,46 @@ let LuksoCheckbox = class extends TailwindElement {
   }
 };
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoCheckbox.prototype, "name", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoCheckbox.prototype, "id", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoCheckbox.prototype, "ref", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoCheckbox.prototype, "type", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoCheckbox.prototype, "size", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoCheckbox.prototype, "label", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoCheckbox.prototype, "description", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoCheckbox.prototype, "error", 2);
 __decorateClass([
-  n({ type: Boolean })
+  property({ type: Boolean })
 ], LuksoCheckbox.prototype, "checked", 2);
 __decorateClass([
-  n({ type: String, attribute: "custom-class" })
+  property({ type: String, attribute: "custom-class" })
 ], LuksoCheckbox.prototype, "customClass", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-readonly" })
+  property({ type: Boolean, attribute: "is-readonly" })
 ], LuksoCheckbox.prototype, "isReadonly", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-disabled" })
+  property({ type: Boolean, attribute: "is-disabled" })
 ], LuksoCheckbox.prototype, "isDisabled", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoCheckbox.prototype, "hasFocus", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoCheckbox.prototype, "hasHighlight", 2);
 LuksoCheckbox = __decorateClass([
   safeCustomElement("lukso-checkbox")