@lukso/web-components 1.41.0 → 1.43.0

package/dist/components/index.cjs

@@ -21,12 +21,13 @@ 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-e765f94b.cjs');
-require('../directive-db00f5fb.cjs');
-require('../state-a62a7d5d.cjs');
-require('../index-7dc05ee5.cjs');
-require('../style-map-3a049df9.cjs');
-require('../directive-helpers-e70702eb.cjs');
+const shared_tailwindElement_index = require('../index-7ef6f8a1.cjs');
+require('../query-assigned-elements-5200f974.cjs');
+require('../state-51b50a6b.cjs');
+require('../index-e9668573.cjs');
+require('../directive-8278ab14.cjs');
+require('../style-map-c00f9dd9.cjs');
+require('../directive-helpers-b2851157.cjs');
 
 
 

package/dist/components/index.js

@@ -17,9 +17,10 @@ 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-9dfdafd2.js';
-import '../directive-9ec64c08.js';
-import '../state-7fde94d1.js';
-import '../index-714323c9.js';
-import '../style-map-5173bb70.js';
-import '../directive-helpers-1affe406.js';
+export { a as TailwindElement, T as TailwindStyledElement } from '../index-5b6b1166.js';
+import '../query-assigned-elements-e36df787.js';
+import '../state-02a92ffa.js';
+import '../index-5e194caf.js';
+import '../directive-2bb7789e.js';
+import '../style-map-6cdbbb8b.js';
+import '../directive-helpers-422da386.js';

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

@@ -2,10 +2,11 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-e765f94b.cjs');
-const directive = require('../../directive-db00f5fb.cjs');
-const state = require('../../state-a62a7d5d.cjs');
-const index = require('../../index-7dc05ee5.cjs');
+const shared_tailwindElement_index = require('../../index-7ef6f8a1.cjs');
+const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
+const state = require('../../state-51b50a6b.cjs');
+const index = require('../../index-e9668573.cjs');
+require('../../directive-8278ab14.cjs');
 
 const style = ":host {\n\n    display: inline-flex\n}\n\n:host([is-full-width]) {\n\n    display: flex;\n\n    width: 100%\n}";
 
@@ -183,49 +184,49 @@ exports.LuksoButton = class LuksoButton extends shared_tailwindElement_index.Tai
   }
 };
 __decorateClass([
-  directive.e({ type: String })
+  queryAssignedElements.e({ type: String })
 ], exports.LuksoButton.prototype, "variant", 2);
 __decorateClass([
-  directive.e({ type: String })
+  queryAssignedElements.e({ type: String })
 ], exports.LuksoButton.prototype, "size", 2);
 __decorateClass([
-  directive.e({ type: Boolean })
+  queryAssignedElements.e({ type: Boolean })
 ], exports.LuksoButton.prototype, "disabled", 2);
 __decorateClass([
-  directive.e({ type: Boolean, attribute: "is-full-width" })
+  queryAssignedElements.e({ type: Boolean, attribute: "is-full-width" })
 ], exports.LuksoButton.prototype, "isFullWidth", 2);
 __decorateClass([
-  directive.e({ type: Boolean, attribute: "is-long-press" })
+  queryAssignedElements.e({ type: Boolean, attribute: "is-long-press" })
 ], exports.LuksoButton.prototype, "isLongPress", 2);
 __decorateClass([
-  directive.e({ type: Boolean, attribute: "is-link" })
+  queryAssignedElements.e({ type: Boolean, attribute: "is-link" })
 ], exports.LuksoButton.prototype, "isLink", 2);
 __decorateClass([
-  directive.e({ type: Boolean, attribute: "is-loading" })
+  queryAssignedElements.e({ type: Boolean, attribute: "is-loading" })
 ], exports.LuksoButton.prototype, "isLoading", 2);
 __decorateClass([
-  directive.e({ type: String })
+  queryAssignedElements.e({ type: String })
 ], exports.LuksoButton.prototype, "type", 2);
 __decorateClass([
-  directive.e({ type: String })
+  queryAssignedElements.e({ type: String })
 ], exports.LuksoButton.prototype, "href", 2);
 __decorateClass([
-  directive.e({ type: String })
+  queryAssignedElements.e({ type: String })
 ], exports.LuksoButton.prototype, "target", 2);
 __decorateClass([
-  directive.e({ type: String })
+  queryAssignedElements.e({ type: String })
 ], exports.LuksoButton.prototype, "rel", 2);
 __decorateClass([
-  directive.e({ type: String, attribute: "loading-text" })
+  queryAssignedElements.e({ type: String, attribute: "loading-text" })
 ], exports.LuksoButton.prototype, "loadingText", 2);
 __decorateClass([
-  directive.e({ type: String, attribute: "custom-class" })
+  queryAssignedElements.e({ type: String, attribute: "custom-class" })
 ], exports.LuksoButton.prototype, "customClass", 2);
 __decorateClass([
-  directive.e({ type: Boolean, attribute: "is-active" })
+  queryAssignedElements.e({ type: Boolean, attribute: "is-active" })
 ], exports.LuksoButton.prototype, "isActive", 2);
 __decorateClass([
-  directive.e({ type: Number })
+  queryAssignedElements.e({ type: Number })
 ], exports.LuksoButton.prototype, "count", 2);
 __decorateClass([
   state.t()
@@ -237,5 +238,5 @@ __decorateClass([
   state.t()
 ], exports.LuksoButton.prototype, "timer", 2);
 exports.LuksoButton = __decorateClass([
-  directive.e$1("lukso-button")
+  queryAssignedElements.e$1("lukso-button")
 ], exports.LuksoButton);

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

@@ -1,7 +1,8 @@
-import { T as TailwindStyledElement, x } from '../../index-9dfdafd2.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 { T as TailwindStyledElement, x } from '../../index-5b6b1166.js';
+import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
+import { t } from '../../state-02a92ffa.js';
+import { c as customClassMap } from '../../index-5e194caf.js';
+import '../../directive-2bb7789e.js';
 
 const style = ":host {\n\n    display: inline-flex\n}\n\n:host([is-full-width]) {\n\n    display: flex;\n\n    width: 100%\n}";
 

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

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-e765f94b.cjs');
-const directive = require('../../directive-db00f5fb.cjs');
-const styleMap = require('../../style-map-3a049df9.cjs');
-const index = require('../../index-7dc05ee5.cjs');
+const shared_tailwindElement_index = require('../../index-7ef6f8a1.cjs');
+const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
+const styleMap = require('../../style-map-c00f9dd9.cjs');
+const index = require('../../index-e9668573.cjs');
 require('../lukso-profile/index.cjs');
+require('../../directive-8278ab14.cjs');
 
 const style = ":host {\n  display: flex;\n  width: 100%;\n}\n\n:host([is-fixed-width]) {\n  width: inherit;\n}";
 
@@ -93,17 +94,15 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
     return shared_tailwindElement_index.x`
       <div
         data-testid="card"
-        class="bg-neutral-100 grid grid-rows-[auto,1fr] overflow-hidden ${index.customClassMap(
-      {
-        [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,
-        ["w-full"]: !this.isFixedWidth,
-        ["min-h-[534px]"]: this.isFixedHeight
-      }
-    )}"
+        class="bg-neutral-100 grid grid-rows-[auto,1fr] ${index.customClassMap({
+      [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,
+      ["w-full"]: !this.isFixedWidth,
+      ["min-h-[534px]"]: this.isFixedHeight
+    })}"
       >
         <div
           style=${styleMap.o({
@@ -118,9 +117,7 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
             <slot name="header"></slot>
           </div>
         </div>
-        <div
-          class="bg-neutral-100 shadow-neutral-above-shadow-1xl rounded-24 relative"
-        >
+        <div class="bg-neutral-100 rounded-24 relative">
           <lukso-profile
             profile-url=${this.profileUrl}
             size="large"
@@ -132,8 +129,7 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
             class="overflow-hidden w-[153px] h-[70px] -top-[70px] relative mx-auto flex items-end justify-center -mb-2"
           >
             <div
-              class="bg-neutral-100 rounded-[103px_103px_0_0] w-[96px] h-[48px]
-              shadow-neutral-above-shadow-1xl"
+              class="bg-neutral-100 rounded-[103px_103px_0_0] w-[96px] h-[48px]"
             ></div>
           </div>
           <slot name="content"></slot>
@@ -145,17 +141,15 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
     return shared_tailwindElement_index.x`
       <div
         data-testid="card"
-        class="bg-neutral-100 grid grid-rows-[auto,1fr] overflow-hidden ${index.customClassMap(
-      {
-        [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,
-        ["w-full"]: !this.isFixedWidth,
-        ["min-h-[534px]"]: this.isFixedHeight
-      }
-    )}"
+        class="bg-neutral-100 grid grid-rows-[auto,1fr] ${index.customClassMap({
+      [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,
+      ["w-full"]: !this.isFixedWidth,
+      ["min-h-[534px]"]: this.isFixedHeight
+    })}"
       >
         <div
           style=${styleMap.o({
@@ -171,7 +165,7 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
           </div>
         </div>
         <div class="grid grid-rows-[max-content,auto]">
-          <div class="bg-neutral-100 shadow-neutral-drop-shadow relative">
+          <div class="bg-neutral-100 relative">
             <lukso-profile
               profile-url=${this.profileUrl}
               size="large"
@@ -188,7 +182,9 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
             </div>
             <slot name="content"></slot>
           </div>
-          <div class="bg-neutral-97 rounded-b-24">
+          <div
+            class="bg-neutral-97 rounded-b-24 shadow-neutral-inner-shadow-top"
+          >
             <slot name="bottom"></slot>
           </div>
         </div>
@@ -231,17 +227,15 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
     return shared_tailwindElement_index.x`
       <div
         data-testid="card"
-        class="bg-neutral-100 grid grid-rows-[auto,1fr] overflow-hidden ${index.customClassMap(
-      {
-        [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,
-        ["w-full"]: !this.isFixedWidth,
-        ["min-h-[534px]"]: this.isFixedHeight
-      }
-    )}"
+        class="bg-neutral-100 grid grid-rows-[auto,1fr] ${index.customClassMap({
+      [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,
+      ["w-full"]: !this.isFixedWidth,
+      ["min-h-[534px]"]: this.isFixedHeight
+    })}"
       >
         <div
           style=${styleMap.o({
@@ -279,32 +273,32 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
   }
 };
 __decorateClass([
-  directive.e({ type: String })
+  queryAssignedElements.e({ type: String })
 ], exports.LuksoCard.prototype, "variant", 2);
 __decorateClass([
-  directive.e({ type: String, attribute: "background-url" })
+  queryAssignedElements.e({ type: String, attribute: "background-url" })
 ], exports.LuksoCard.prototype, "backgroundUrl", 2);
 __decorateClass([
-  directive.e({ type: String, attribute: "profile-url" })
+  queryAssignedElements.e({ type: String, attribute: "profile-url" })
 ], exports.LuksoCard.prototype, "profileUrl", 2);
 __decorateClass([
-  directive.e({ type: String, attribute: "profile-address" })
+  queryAssignedElements.e({ type: String, attribute: "profile-address" })
 ], exports.LuksoCard.prototype, "profileAddress", 2);
 __decorateClass([
-  directive.e({ type: Boolean, attribute: "is-fixed-width" })
+  queryAssignedElements.e({ type: Boolean, attribute: "is-fixed-width" })
 ], exports.LuksoCard.prototype, "isFixedWidth", 2);
 __decorateClass([
-  directive.e({ type: Boolean, attribute: "is-fixed-height" })
+  queryAssignedElements.e({ type: Boolean, attribute: "is-fixed-height" })
 ], exports.LuksoCard.prototype, "isFixedHeight", 2);
 __decorateClass([
-  directive.e({ type: String, attribute: "custom-class" })
+  queryAssignedElements.e({ type: String, attribute: "custom-class" })
 ], exports.LuksoCard.prototype, "customClass", 2);
 __decorateClass([
-  directive.e({ type: String })
+  queryAssignedElements.e({ type: String })
 ], exports.LuksoCard.prototype, "size", 2);
 __decorateClass([
-  directive.e({ type: Boolean, attribute: "is-hoverable" })
+  queryAssignedElements.e({ type: Boolean, attribute: "is-hoverable" })
 ], exports.LuksoCard.prototype, "isHoverable", 2);
 exports.LuksoCard = __decorateClass([
-  directive.e$1("lukso-card")
+  queryAssignedElements.e$1("lukso-card")
 ], exports.LuksoCard);

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-card/index.ts"],"names":[],"mappings":"AAOA,OAAO,4BAA4B,CAAA;AAEnC,MAAM,MAAM,YAAY,GACpB,OAAO,GACP,aAAa,GACb,SAAS,GACT,WAAW,GACX,MAAM,GACN,MAAM,CAAA;AACV,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAA;;AAE1C,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;IAGrB,WAAW,SAAK;IAGhB,IAAI,EAAE,SAAS,CAAW;IAG1B,WAAW,UAAQ;IAEnB,OAAO,CAAC,YAAY,CAA8C;IAClE,OAAO,CAAC,WAAW,CAA0C;IAC7D,OAAO,CAAC,gBAAgB,CAAmE;IAE3F,OAAO,CAAC,yBAAyB;IAYjC,aAAa;IAmBb,kBAAkB;IA0BlB,eAAe;IAsDf,gBAAgB;IAwDhB,YAAY;IAkCZ,YAAY;IAmCZ,MAAM;CAgBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAA;KACxB;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-card/index.ts"],"names":[],"mappings":"AAOA,OAAO,4BAA4B,CAAA;AAEnC,MAAM,MAAM,YAAY,GACpB,OAAO,GACP,aAAa,GACb,SAAS,GACT,WAAW,GACX,MAAM,GACN,MAAM,CAAA;AACV,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAA;;AAE1C,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;IAGrB,WAAW,SAAK;IAGhB,IAAI,EAAE,SAAS,CAAW;IAG1B,WAAW,UAAQ;IAEnB,OAAO,CAAC,YAAY,CAA8C;IAClE,OAAO,CAAC,WAAW,CAA0C;IAC7D,OAAO,CAAC,gBAAgB,CAAmE;IAE3F,OAAO,CAAC,yBAAyB;IAYjC,aAAa;IAmBb,kBAAkB;IA0BlB,eAAe;IAiDf,gBAAgB;IAwDhB,YAAY;IAkCZ,YAAY;IAiCZ,MAAM;CAgBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAA;KACxB;CACF"}

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

@@ -1,8 +1,9 @@
-import { T as TailwindStyledElement, x } from '../../index-9dfdafd2.js';
-import { e, a as e$1 } from '../../directive-9ec64c08.js';
-import { o } from '../../style-map-5173bb70.js';
-import { c as customClassMap } from '../../index-714323c9.js';
+import { T as TailwindStyledElement, x } from '../../index-5b6b1166.js';
+import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
+import { o } from '../../style-map-6cdbbb8b.js';
+import { c as customClassMap } from '../../index-5e194caf.js';
 import '../lukso-profile/index.js';
+import '../../directive-2bb7789e.js';
 
 const style = ":host {\n  display: flex;\n  width: 100%;\n}\n\n:host([is-fixed-width]) {\n  width: inherit;\n}";
 
@@ -89,17 +90,15 @@ let LuksoCard = class extends TailwindStyledElement(style) {
     return x`
       <div
         data-testid="card"
-        class="bg-neutral-100 grid grid-rows-[auto,1fr] overflow-hidden ${customClassMap(
-      {
-        [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,
-        ["w-full"]: !this.isFixedWidth,
-        ["min-h-[534px]"]: this.isFixedHeight
-      }
-    )}"
+        class="bg-neutral-100 grid grid-rows-[auto,1fr] ${customClassMap({
+      [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,
+      ["w-full"]: !this.isFixedWidth,
+      ["min-h-[534px]"]: this.isFixedHeight
+    })}"
       >
         <div
           style=${o({
@@ -114,9 +113,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
             <slot name="header"></slot>
           </div>
         </div>
-        <div
-          class="bg-neutral-100 shadow-neutral-above-shadow-1xl rounded-24 relative"
-        >
+        <div class="bg-neutral-100 rounded-24 relative">
           <lukso-profile
             profile-url=${this.profileUrl}
             size="large"
@@ -128,8 +125,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
             class="overflow-hidden w-[153px] h-[70px] -top-[70px] relative mx-auto flex items-end justify-center -mb-2"
           >
             <div
-              class="bg-neutral-100 rounded-[103px_103px_0_0] w-[96px] h-[48px]
-              shadow-neutral-above-shadow-1xl"
+              class="bg-neutral-100 rounded-[103px_103px_0_0] w-[96px] h-[48px]"
             ></div>
           </div>
           <slot name="content"></slot>
@@ -141,17 +137,15 @@ let LuksoCard = class extends TailwindStyledElement(style) {
     return x`
       <div
         data-testid="card"
-        class="bg-neutral-100 grid grid-rows-[auto,1fr] overflow-hidden ${customClassMap(
-      {
-        [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,
-        ["w-full"]: !this.isFixedWidth,
-        ["min-h-[534px]"]: this.isFixedHeight
-      }
-    )}"
+        class="bg-neutral-100 grid grid-rows-[auto,1fr] ${customClassMap({
+      [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,
+      ["w-full"]: !this.isFixedWidth,
+      ["min-h-[534px]"]: this.isFixedHeight
+    })}"
       >
         <div
           style=${o({
@@ -167,7 +161,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
           </div>
         </div>
         <div class="grid grid-rows-[max-content,auto]">
-          <div class="bg-neutral-100 shadow-neutral-drop-shadow relative">
+          <div class="bg-neutral-100 relative">
             <lukso-profile
               profile-url=${this.profileUrl}
               size="large"
@@ -184,7 +178,9 @@ let LuksoCard = class extends TailwindStyledElement(style) {
             </div>
             <slot name="content"></slot>
           </div>
-          <div class="bg-neutral-97 rounded-b-24">
+          <div
+            class="bg-neutral-97 rounded-b-24 shadow-neutral-inner-shadow-top"
+          >
             <slot name="bottom"></slot>
           </div>
         </div>
@@ -227,17 +223,15 @@ let LuksoCard = class extends TailwindStyledElement(style) {
     return x`
       <div
         data-testid="card"
-        class="bg-neutral-100 grid grid-rows-[auto,1fr] overflow-hidden ${customClassMap(
-      {
-        [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,
-        ["w-full"]: !this.isFixedWidth,
-        ["min-h-[534px]"]: this.isFixedHeight
-      }
-    )}"
+        class="bg-neutral-100 grid grid-rows-[auto,1fr] ${customClassMap({
+      [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,
+      ["w-full"]: !this.isFixedWidth,
+      ["min-h-[534px]"]: this.isFixedHeight
+    })}"
       >
         <div
           style=${o({

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

@@ -2,10 +2,11 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-e765f94b.cjs');
-const directive = require('../../directive-db00f5fb.cjs');
-const state = require('../../state-a62a7d5d.cjs');
-const index = require('../../index-7dc05ee5.cjs');
+const shared_tailwindElement_index = require('../../index-7ef6f8a1.cjs');
+const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
+const state = require('../../state-51b50a6b.cjs');
+const index = require('../../index-e9668573.cjs');
+require('../../directive-8278ab14.cjs');
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -177,34 +178,34 @@ exports.LuksoCheckbox = class LuksoCheckbox extends shared_tailwindElement_index
   }
 };
 __decorateClass([
-  directive.e({ type: String })
+  queryAssignedElements.e({ type: String })
 ], exports.LuksoCheckbox.prototype, "name", 2);
 __decorateClass([
-  directive.e({ type: String })
+  queryAssignedElements.e({ type: String })
 ], exports.LuksoCheckbox.prototype, "id", 2);
 __decorateClass([
-  directive.e({ type: String })
+  queryAssignedElements.e({ type: String })
 ], exports.LuksoCheckbox.prototype, "ref", 2);
 __decorateClass([
-  directive.e({ type: String })
+  queryAssignedElements.e({ type: String })
 ], exports.LuksoCheckbox.prototype, "type", 2);
 __decorateClass([
-  directive.e({ type: String })
+  queryAssignedElements.e({ type: String })
 ], exports.LuksoCheckbox.prototype, "size", 2);
 __decorateClass([
-  directive.e({ type: String })
+  queryAssignedElements.e({ type: String })
 ], exports.LuksoCheckbox.prototype, "error", 2);
 __decorateClass([
-  directive.e({ type: Boolean })
+  queryAssignedElements.e({ type: Boolean })
 ], exports.LuksoCheckbox.prototype, "checked", 2);
 __decorateClass([
-  directive.e({ type: String, attribute: "custom-class" })
+  queryAssignedElements.e({ type: String, attribute: "custom-class" })
 ], exports.LuksoCheckbox.prototype, "customClass", 2);
 __decorateClass([
-  directive.e({ type: Boolean, attribute: "is-readonly" })
+  queryAssignedElements.e({ type: Boolean, attribute: "is-readonly" })
 ], exports.LuksoCheckbox.prototype, "isReadonly", 2);
 __decorateClass([
-  directive.e({ type: Boolean, attribute: "is-disabled" })
+  queryAssignedElements.e({ type: Boolean, attribute: "is-disabled" })
 ], exports.LuksoCheckbox.prototype, "isDisabled", 2);
 __decorateClass([
   state.t()
@@ -213,5 +214,5 @@ __decorateClass([
   state.t()
 ], exports.LuksoCheckbox.prototype, "hasHighlight", 2);
 exports.LuksoCheckbox = __decorateClass([
-  directive.e$1("lukso-checkbox")
+  queryAssignedElements.e$1("lukso-checkbox")
 ], exports.LuksoCheckbox);

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

@@ -1,7 +1,8 @@
-import { a as TailwindElement, x, A } from '../../index-9dfdafd2.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 { a as TailwindElement, x, A } from '../../index-5b6b1166.js';
+import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
+import { t } from '../../state-02a92ffa.js';
+import { c as customClassMap } from '../../index-5e194caf.js';
+import '../../directive-2bb7789e.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

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

@@ -2,10 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-e765f94b.cjs');
-const directive = require('../../directive-db00f5fb.cjs');
+const shared_tailwindElement_index = require('../../index-7ef6f8a1.cjs');
+const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
 require('../lukso-share/index.cjs');
-require('../../index-7dc05ee5.cjs');
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -19,40 +18,53 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 exports.LuksoFooter = class LuksoFooter extends shared_tailwindElement_index.TailwindElement {
+  constructor() {
+    super(...arguments);
+    this.providers = [
+      "twitter",
+      "instagram",
+      "linkedin",
+      "telegram",
+      "discord",
+      "reddit",
+      "medium",
+      "github"
+    ];
+  }
   render() {
     return shared_tailwindElement_index.x`
       <footer class="bg-neutral-100">
         <div
-          class="p-10 grid gap-12 items-center lg:grid-cols-[auto,max-content]"
-        >
-          <slot name="top"></slot>
-          <div className="flex lg:justify-end">
-            <lukso-share></lukso-share>
-          </div>
-        </div>
-        <div
-          class="grid sm:grid-cols-[max-content,auto] px-10 py-6 bg-neutral-95 gap-8"
+          class="p-10 grid gap-8 items-center lg:grid-cols-[auto,max-content]"
         >
-          <slot name="bottom"></slot>
-          <div class="flex sm:justify-end">
-            <a
-              href="https://lukso.network/"
-              target="_blank"
-              class="sm:text-right opacity-50 text-neutral-30"
-            >
-              <span class="paragraph-inter-10-semi-bold">Powered by</span>
-              <img
-                src="/assets/images/lukso-logo.svg"
-                alt="LUKSO"
-                class="h-4"
-              />
-            </a>
+          <slot name="links"></slot>
+          <div class="flex sm:justify-between gap-4 flex-col sm:flex-row">
+            <lukso-share
+              providers=${JSON.stringify(this.providers)}
+            ></lukso-share>
+            <div class="flex sm:ml-8 sm:justify-end">
+              <a
+                href="https://lukso.network/"
+                target="_blank"
+                class="flex flex-col opacity-50 text-neutral-30 transition-opacity hover:opacity-80 sm:text-right"
+              >
+                <span class="paragraph-inter-10-semi-bold">Powered by</span>
+                <img
+                  src="/assets/images/lukso-logo.svg"
+                  alt="LUKSO"
+                  class="h-4"
+                />
+              </a>
+            </div>
           </div>
         </div>
       </footer>
     `;
   }
 };
+__decorateClass([
+  queryAssignedElements.e({ type: Array })
+], exports.LuksoFooter.prototype, "providers", 2);
 exports.LuksoFooter = __decorateClass([
-  directive.e$1("lukso-footer")
+  queryAssignedElements.e$1("lukso-footer")
 ], exports.LuksoFooter);