@lukso/web-components 1.11.0 → 1.13.0

package/dist/components/index.cjs

@@ -15,11 +15,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-d6d4e98e.cjs');
+const shared_tailwindElement_index = require('../index-65ac952c.cjs');
 require('../directive-db00f5fb.cjs');
 require('../state-a62a7d5d.cjs');
 require('../index-7dc05ee5.cjs');
-require('../style-map-1d5d29da.cjs');
+require('../style-map-9f53097b.cjs');
 
 
 

package/dist/components/index.js

@@ -11,8 +11,8 @@ 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-29538039.js';
+export { a as TailwindElement, T as TailwindStyledElement } from '../index-bd97c2c3.js';
 import '../directive-9ec64c08.js';
 import '../state-7fde94d1.js';
 import '../index-714323c9.js';
-import '../style-map-6fd59df5.js';
+import '../style-map-8b1b8545.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-d6d4e98e.cjs');
+const shared_tailwindElement_index = require('../../index-65ac952c.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
 const state = require('../../state-a62a7d5d.cjs');
 const index = require('../../index-7dc05ee5.cjs');
@@ -30,9 +30,11 @@ exports.LuksoButton = class LuksoButton extends shared_tailwindElement_index.Tai
     this.isFullWidth = false;
     this.isLongPress = false;
     this.isLink = false;
+    this.isLoading = false;
     this.href = "";
     this.target = "_blank";
     this.rel = "";
+    this.loadingText = "";
     this.isPressed = false;
     this.noTransition = false;
     this.timer = 0;
@@ -94,11 +96,22 @@ exports.LuksoButton = class LuksoButton extends shared_tailwindElement_index.Tai
     }, 100);
     this.timer && clearTimeout(this.timer);
   }
+  loadingTemplate() {
+    return shared_tailwindElement_index.y`<lukso-icon
+        name="spinner"
+        color=${this.variant === "secondary" || this.variant === "text" ? "neutral-20" : "neutral-100"}
+        class=${index.customClassMap({
+      "animate-spin": true,
+      "mr-2": !!this.loadingText
+    })}
+      ></lukso-icon>
+      ${this.loadingText}`;
+  }
   buttonTemplate() {
     return shared_tailwindElement_index.y`
       <button
         data-testid="button"
-        ?disabled=${this.disabled}
+        ?disabled=${this.disabled || this.isLoading}
         class=${index.customClassMap({
       [this.defaultStyles]: true,
       [this.mediumSize]: this.size === "medium",
@@ -116,7 +129,7 @@ exports.LuksoButton = class LuksoButton extends shared_tailwindElement_index.Tai
         @mouseup=${this.handleMouseUp}
         @mouseleave=${this.handleMouseUp}
       >
-        <slot></slot>
+        ${this.isLoading ? this.loadingTemplate() : shared_tailwindElement_index.y`<slot></slot>`}
       </button>
     `;
   }
@@ -165,6 +178,9 @@ __decorateClass([
 __decorateClass([
   directive.e({ type: Boolean, attribute: "is-link" })
 ], exports.LuksoButton.prototype, "isLink", 2);
+__decorateClass([
+  directive.e({ type: Boolean, attribute: "is-loading" })
+], exports.LuksoButton.prototype, "isLoading", 2);
 __decorateClass([
   directive.e({ type: String })
 ], exports.LuksoButton.prototype, "href", 2);
@@ -174,6 +190,9 @@ __decorateClass([
 __decorateClass([
   directive.e({ type: String })
 ], exports.LuksoButton.prototype, "rel", 2);
+__decorateClass([
+  directive.e({ type: String, attribute: "loading-text" })
+], exports.LuksoButton.prototype, "loadingText", 2);
 __decorateClass([
   state.t()
 ], exports.LuksoButton.prototype, "isPressed", 2);

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

@@ -9,9 +9,11 @@ export declare class LuksoButton extends LuksoButton_base {
     isFullWidth: boolean;
     isLongPress: boolean;
     isLink: boolean;
+    isLoading: boolean;
     href: string;
     target: LinkTarget;
     rel: string;
+    loadingText: string;
     private isPressed;
     private noTransition;
     private timer;
@@ -28,6 +30,7 @@ export declare class LuksoButton extends LuksoButton_base {
     private smallSize;
     private handleMouseDown;
     private handleMouseUp;
+    loadingTemplate(): unknown;
     buttonTemplate(): import("lit").TemplateResult<1>;
     linkTemplate(): import("lit").TemplateResult<1>;
     render(): import("lit").TemplateResult<1>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAOA,oBAAY,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,MAAM,CAAA;AACxE,oBAAY,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAA;AAC3C,oBAAY,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAA;;AAIhE,qBACa,WAAY,SAAQ,gBAA4B;IAE3D,OAAO,EAAE,aAAa,CAAY;IAGlC,IAAI,EAAE,UAAU,CAAW;IAG3B,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,CAGqE;IAE1F,OAAO,CAAC,eAAe,CACoD;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;IA2BvB,OAAO,CAAC,aAAa;IAcrB,cAAc;IA2Bd,YAAY;IAwBZ,MAAM;CAGP;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,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,MAAM,CAAA;AACxE,oBAAY,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAA;AAC3C,oBAAY,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAA;;AAIhE,qBACa,WAAY,SAAQ,gBAA4B;IAE3D,OAAO,EAAE,aAAa,CAAY;IAGlC,IAAI,EAAE,UAAU,CAAW;IAG3B,QAAQ,UAAQ;IAGhB,WAAW,UAAQ;IAGnB,WAAW,UAAQ;IAGnB,MAAM,UAAQ;IAGd,SAAS,UAAQ;IAGjB,IAAI,SAAK;IAGT,MAAM,EAAE,UAAU,CAAW;IAG7B,GAAG,SAAK;IAGR,WAAW,SAAK;IAGhB,OAAO,CAAC,SAAS,CAAQ;IAGzB,OAAO,CAAC,YAAY,CAAQ;IAG5B,OAAO,CAAC,KAAK,CAAI;IAEjB,OAAO,CAAC,aAAa,CAGqE;IAE1F,OAAO,CAAC,eAAe,CACoD;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;IA2BvB,OAAO,CAAC,aAAa;IAcrB,eAAe,IAAI,OAAO;IAc1B,cAAc;IA2Bd,YAAY;IAwBZ,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,4 +1,4 @@
-import { T as TailwindStyledElement, y } from '../../index-29538039.js';
+import { T as TailwindStyledElement, y } from '../../index-bd97c2c3.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';
@@ -26,9 +26,11 @@ let LuksoButton = class extends TailwindStyledElement(style) {
     this.isFullWidth = false;
     this.isLongPress = false;
     this.isLink = false;
+    this.isLoading = false;
     this.href = "";
     this.target = "_blank";
     this.rel = "";
+    this.loadingText = "";
     this.isPressed = false;
     this.noTransition = false;
     this.timer = 0;
@@ -90,11 +92,22 @@ let LuksoButton = class extends TailwindStyledElement(style) {
     }, 100);
     this.timer && clearTimeout(this.timer);
   }
+  loadingTemplate() {
+    return y`<lukso-icon
+        name="spinner"
+        color=${this.variant === "secondary" || this.variant === "text" ? "neutral-20" : "neutral-100"}
+        class=${customClassMap({
+      "animate-spin": true,
+      "mr-2": !!this.loadingText
+    })}
+      ></lukso-icon>
+      ${this.loadingText}`;
+  }
   buttonTemplate() {
     return y`
       <button
         data-testid="button"
-        ?disabled=${this.disabled}
+        ?disabled=${this.disabled || this.isLoading}
         class=${customClassMap({
       [this.defaultStyles]: true,
       [this.mediumSize]: this.size === "medium",
@@ -112,7 +125,7 @@ let LuksoButton = class extends TailwindStyledElement(style) {
         @mouseup=${this.handleMouseUp}
         @mouseleave=${this.handleMouseUp}
       >
-        <slot></slot>
+        ${this.isLoading ? this.loadingTemplate() : y`<slot></slot>`}
       </button>
     `;
   }
@@ -161,6 +174,9 @@ __decorateClass([
 __decorateClass([
   e({ type: Boolean, attribute: "is-link" })
 ], LuksoButton.prototype, "isLink", 2);
+__decorateClass([
+  e({ type: Boolean, attribute: "is-loading" })
+], LuksoButton.prototype, "isLoading", 2);
 __decorateClass([
   e({ type: String })
 ], LuksoButton.prototype, "href", 2);
@@ -170,6 +186,9 @@ __decorateClass([
 __decorateClass([
   e({ type: String })
 ], LuksoButton.prototype, "rel", 2);
+__decorateClass([
+  e({ type: String, attribute: "loading-text" })
+], LuksoButton.prototype, "loadingText", 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-d6d4e98e.cjs');
+const shared_tailwindElement_index = require('../../index-65ac952c.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
-const styleMap = require('../../style-map-1d5d29da.cjs');
+const styleMap = require('../../style-map-9f53097b.cjs');
 const index = require('../../index-7dc05ee5.cjs');
 require('../lukso-profile/index.cjs');
 

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

@@ -1,6 +1,6 @@
-import { T as TailwindStyledElement, y } from '../../index-29538039.js';
+import { T as TailwindStyledElement, y } from '../../index-bd97c2c3.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
-import { i } from '../../style-map-6fd59df5.js';
+import { i } from '../../style-map-8b1b8545.js';
 import { c as customClassMap } from '../../index-714323c9.js';
 import '../lukso-profile/index.js';
 

package/dist/components/lukso-icon/icons/contract-signed.d.ts

@@ -0,0 +1,3 @@
+import { IconOptions } from '../../../components/lukso-icon/index.js';
+export declare const contractSigned: (options: IconOptions) => import("lit").TemplateResult<1>;
+//# sourceMappingURL=contract-signed.d.ts.map

package/dist/components/lukso-icon/icons/contract-signed.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"contract-signed.d.ts","sourceRoot":"","sources":["contract-signed.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAA;AAE9D,eAAO,MAAM,cAAc,YAAa,WAAW,oCA4DlD,CAAA"}

package/dist/components/lukso-icon/icons/spinner.d.ts

@@ -0,0 +1,3 @@
+import { IconOptions } from '../../../components/lukso-icon/index.js';
+export declare const spinner: (options: IconOptions) => import("lit").TemplateResult<1>;
+//# sourceMappingURL=spinner.d.ts.map

package/dist/components/lukso-icon/icons/spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["spinner.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAA;AAE9D,eAAO,MAAM,OAAO,YAAa,WAAW,oCAmB3C,CAAA"}

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-d6d4e98e.cjs');
+const shared_tailwindElement_index = require('../../index-65ac952c.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
-const styleMap = require('../../style-map-1d5d29da.cjs');
+const styleMap = require('../../style-map-9f53097b.cjs');
 
 const style = ":host {\n    display: inline-flex\n}";
 
@@ -642,6 +642,68 @@ const contractLock = (options) => {
   </svg> `;
 };
 
+const contractSigned = (options) => {
+  return shared_tailwindElement_index.y`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${styleMap.i({
+    width: `${options.width}px`,
+    height: `${options.height}px`
+  })}
+  >
+    <path
+      d="M2 10.1211V19.25C2 19.8467 2.23705 20.419 2.65901 20.841C3.08097 21.2629 3.65326 21.5 4.25 21.5H14.75C15.3467 21.5 15.919 21.2629 16.341 20.841C16.7629 20.419 17 19.8467 17 19.25V4.25C17 3.65326 16.7629 3.08097 16.341 2.65901C15.919 2.23705 15.3467 2 14.75 2H10.1211C9.72341 2.00006 9.34202 2.15804 9.06078 2.43922L2.43922 9.06078C2.15804 9.34202 2.00006 9.72341 2 10.1211Z"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M11 13H5"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M8 16H5"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M11 16H10"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M9.5 2.13501V8.00001C9.5 8.39783 9.34196 8.77936 9.06066 9.06067C8.77936 9.34197 8.39782 9.50001 8 9.50001H2.135"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M21.25 12C21.25 14.3472 19.3472 16.25 17 16.25C14.6528 16.25 12.75 14.3472 12.75 12C12.75 9.65279 14.6528 7.75 17 7.75C19.3472 7.75 21.25 9.65279 21.25 12Z"
+      fill="var(--${options.secondaryColor})"
+      stroke="var(--${options.secondaryColor})"
+      stroke-width="${options.strokeWidth}"
+    />
+    <path
+      d="M15 12.0714L16.4 13.5L19 11"
+      stroke="white"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg> `;
+};
+
 const connect = (options) => {
   return shared_tailwindElement_index.y`<svg
     width="24"
@@ -3057,6 +3119,27 @@ const smartContract = (options) => {
   </svg> `;
 };
 
+const spinner = (options) => {
+  return shared_tailwindElement_index.y`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${styleMap.i({
+    width: `${options.width}px`,
+    height: `${options.height}px`
+  })}
+  >
+    <path
+      d="M20.25 12C20.25 13.6317 19.7661 15.2267 18.8596 16.5835C17.9531 17.9402 16.6646 18.9976 15.1571 19.622C13.6496 20.2464 11.9908 20.4098 10.3905 20.0915C8.79016 19.7732 7.32015 18.9874 6.16637 17.8336C5.01259 16.6798 4.22685 15.2098 3.90852 13.6095C3.59019 12.0092 3.75357 10.3504 4.37799 8.84286C5.00242 7.33537 6.05984 6.0469 7.41655 5.14038C8.77325 4.23385 10.3683 3.75 12 3.75"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+    />
+  </svg> `;
+};
+
 const starFilled = (options) => {
   return shared_tailwindElement_index.y`<svg
     width="24"
@@ -4376,6 +4459,7 @@ const iconMap = {
   connect,
   connections,
   "contract-lock": contractLock,
+  "contract-signed": contractSigned,
   controller,
   copy,
   "cross-outline": crossOutline,
@@ -4441,6 +4525,7 @@ const iconMap = {
   settings,
   "smart-contract-doc": smartContractDoc,
   "smart-contract": smartContract,
+  spinner,
   "star-filled": starFilled,
   "star-outline": starOutline,
   "step-dot": stepDot,

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAyHA,oBAAY,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,oBAAY,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAAA;;AA8H5E,qBACa,SAAU,SAAQ,cAA4B;IAEzD,IAAI,SAAK;IAGT,IAAI,SAAW;IAGf,KAAK,SAAe;IAGpB,cAAc,SAAK;IAEnB,OAAO,CAAC,KAAK,CA0BZ;IAED,MAAM;CAuBP;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":"AA2HA,oBAAY,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,oBAAY,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAAA;;AAgI5E,qBACa,SAAU,SAAQ,cAA4B;IAEzD,IAAI,SAAK;IAGT,IAAI,SAAW;IAGf,KAAK,SAAe;IAGpB,cAAc,SAAK;IAEnB,OAAO,CAAC,KAAK,CA0BZ;IAED,MAAM;CAuBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAA;KACxB;CACF"}

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

@@ -1,6 +1,6 @@
-import { y, T as TailwindStyledElement } from '../../index-29538039.js';
+import { y, T as TailwindStyledElement } from '../../index-bd97c2c3.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
-import { i } from '../../style-map-6fd59df5.js';
+import { i } from '../../style-map-8b1b8545.js';
 
 const style = ":host {\n    display: inline-flex\n}";
 
@@ -638,6 +638,68 @@ const contractLock = (options) => {
   </svg> `;
 };
 
+const contractSigned = (options) => {
+  return y`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${i({
+    width: `${options.width}px`,
+    height: `${options.height}px`
+  })}
+  >
+    <path
+      d="M2 10.1211V19.25C2 19.8467 2.23705 20.419 2.65901 20.841C3.08097 21.2629 3.65326 21.5 4.25 21.5H14.75C15.3467 21.5 15.919 21.2629 16.341 20.841C16.7629 20.419 17 19.8467 17 19.25V4.25C17 3.65326 16.7629 3.08097 16.341 2.65901C15.919 2.23705 15.3467 2 14.75 2H10.1211C9.72341 2.00006 9.34202 2.15804 9.06078 2.43922L2.43922 9.06078C2.15804 9.34202 2.00006 9.72341 2 10.1211Z"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M11 13H5"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M8 16H5"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M11 16H10"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M9.5 2.13501V8.00001C9.5 8.39783 9.34196 8.77936 9.06066 9.06067C8.77936 9.34197 8.39782 9.50001 8 9.50001H2.135"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M21.25 12C21.25 14.3472 19.3472 16.25 17 16.25C14.6528 16.25 12.75 14.3472 12.75 12C12.75 9.65279 14.6528 7.75 17 7.75C19.3472 7.75 21.25 9.65279 21.25 12Z"
+      fill="var(--${options.secondaryColor})"
+      stroke="var(--${options.secondaryColor})"
+      stroke-width="${options.strokeWidth}"
+    />
+    <path
+      d="M15 12.0714L16.4 13.5L19 11"
+      stroke="white"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg> `;
+};
+
 const connect = (options) => {
   return y`<svg
     width="24"
@@ -3053,6 +3115,27 @@ const smartContract = (options) => {
   </svg> `;
 };
 
+const spinner = (options) => {
+  return y`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${i({
+    width: `${options.width}px`,
+    height: `${options.height}px`
+  })}
+  >
+    <path
+      d="M20.25 12C20.25 13.6317 19.7661 15.2267 18.8596 16.5835C17.9531 17.9402 16.6646 18.9976 15.1571 19.622C13.6496 20.2464 11.9908 20.4098 10.3905 20.0915C8.79016 19.7732 7.32015 18.9874 6.16637 17.8336C5.01259 16.6798 4.22685 15.2098 3.90852 13.6095C3.59019 12.0092 3.75357 10.3504 4.37799 8.84286C5.00242 7.33537 6.05984 6.0469 7.41655 5.14038C8.77325 4.23385 10.3683 3.75 12 3.75"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+    />
+  </svg> `;
+};
+
 const starFilled = (options) => {
   return y`<svg
     width="24"
@@ -4372,6 +4455,7 @@ const iconMap = {
   connect,
   connections,
   "contract-lock": contractLock,
+  "contract-signed": contractSigned,
   controller,
   copy,
   "cross-outline": crossOutline,
@@ -4437,6 +4521,7 @@ const iconMap = {
   settings,
   "smart-contract-doc": smartContractDoc,
   "smart-contract": smartContract,
+  spinner,
   "star-filled": starFilled,
   "star-outline": starOutline,
   "step-dot": stepDot,

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-d6d4e98e.cjs');
+const shared_tailwindElement_index = require('../../index-65ac952c.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, y, b } from '../../index-29538039.js';
+import { a as TailwindElement, y, b } from '../../index-bd97c2c3.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-d6d4e98e.cjs');
+const shared_tailwindElement_index = require('../../index-65ac952c.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, y } from '../../index-29538039.js';
+import { a as TailwindElement, y } from '../../index-bd97c2c3.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-d6d4e98e.cjs');
+const shared_tailwindElement_index = require('../../index-65ac952c.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
 const index = require('../../index-7dc05ee5.cjs');
 
@@ -23,9 +23,11 @@ exports.LuksoNavbar = class LuksoNavbar extends shared_tailwindElement_index.Tai
     this.title = "";
     this.isCenter = false;
     this.isSticky = false;
+    this.isTransparent = false;
     this.defaultStyles = `bg-neutral-100 shadow-pink-drop-shadow h-78 flex`;
     this.centerStyles = `justify-center`;
     this.stickyStyles = `sticky top-0 z-[1000]`;
+    this.transparentStyles = `!bg-transparent !shadow-none`;
   }
   handleBrandClick() {
     const event = new CustomEvent("on-brand-click", {
@@ -41,7 +43,8 @@ exports.LuksoNavbar = class LuksoNavbar extends shared_tailwindElement_index.Tai
         class=${index.customClassMap({
       [this.defaultStyles]: true,
       [this.centerStyles]: this.isCenter,
-      [this.stickyStyles]: this.isSticky
+      [this.stickyStyles]: this.isSticky,
+      [this.transparentStyles]: this.isTransparent
     })}
       >
         <div
@@ -70,6 +73,9 @@ __decorateClass([
 __decorateClass([
   directive.e({ type: Boolean, attribute: "is-sticky" })
 ], exports.LuksoNavbar.prototype, "isSticky", 2);
+__decorateClass([
+  directive.e({ type: Boolean, attribute: "is-transparent" })
+], exports.LuksoNavbar.prototype, "isTransparent", 2);
 exports.LuksoNavbar = __decorateClass([
   directive.e$1("lukso-navbar")
 ], exports.LuksoNavbar);

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

@@ -3,9 +3,11 @@ export declare class LuksoNavbar extends TailwindElement {
     title: string;
     isCenter: boolean;
     isSticky: boolean;
+    isTransparent: boolean;
     private defaultStyles;
     private centerStyles;
     private stickyStyles;
+    private transparentStyles;
     private handleBrandClick;
     render(): import("lit").TemplateResult<1>;
 }

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,OAAO,CAAC,gBAAgB;IAQxB,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":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAG3D,qBACa,WAAY,SAAQ,eAAe;IAE9C,KAAK,SAAK;IAGV,QAAQ,UAAQ;IAGhB,QAAQ,UAAQ;IAGhB,aAAa,UAAQ;IAErB,OAAO,CAAC,aAAa,CAAqD;IAE1E,OAAO,CAAC,YAAY,CAAmB;IAEvC,OAAO,CAAC,YAAY,CAA0B;IAE9C,OAAO,CAAC,iBAAiB,CAAiC;IAE1D,OAAO,CAAC,gBAAgB;IAQxB,MAAM;CA2BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}

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

@@ -1,4 +1,4 @@
-import { a as TailwindElement, y } from '../../index-29538039.js';
+import { a as TailwindElement, y } from '../../index-bd97c2c3.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
 import { c as customClassMap } from '../../index-714323c9.js';
 
@@ -19,9 +19,11 @@ let LuksoNavbar = class extends TailwindElement {
     this.title = "";
     this.isCenter = false;
     this.isSticky = false;
+    this.isTransparent = false;
     this.defaultStyles = `bg-neutral-100 shadow-pink-drop-shadow h-78 flex`;
     this.centerStyles = `justify-center`;
     this.stickyStyles = `sticky top-0 z-[1000]`;
+    this.transparentStyles = `!bg-transparent !shadow-none`;
   }
   handleBrandClick() {
     const event = new CustomEvent("on-brand-click", {
@@ -37,7 +39,8 @@ let LuksoNavbar = class extends TailwindElement {
         class=${customClassMap({
       [this.defaultStyles]: true,
       [this.centerStyles]: this.isCenter,
-      [this.stickyStyles]: this.isSticky
+      [this.stickyStyles]: this.isSticky,
+      [this.transparentStyles]: this.isTransparent
     })}
       >
         <div
@@ -66,6 +69,9 @@ __decorateClass([
 __decorateClass([
   e({ type: Boolean, attribute: "is-sticky" })
 ], LuksoNavbar.prototype, "isSticky", 2);
+__decorateClass([
+  e({ type: Boolean, attribute: "is-transparent" })
+], LuksoNavbar.prototype, "isTransparent", 2);
 LuksoNavbar = __decorateClass([
   e$1("lukso-navbar")
 ], LuksoNavbar);

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-d6d4e98e.cjs');
+const shared_tailwindElement_index = require('../../index-65ac952c.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
-const styleMap = require('../../style-map-1d5d29da.cjs');
+const styleMap = require('../../style-map-9f53097b.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, y } from '../../index-29538039.js';
+import { a as TailwindElement, y } from '../../index-bd97c2c3.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
-import { i } from '../../style-map-6fd59df5.js';
+import { i } from '../../style-map-8b1b8545.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 

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

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