@lukso/web-components 1.51.2 → 1.51.3

package/dist/{index-87e624a1.cjs → index-340046e7.cjs}

@@ -1,20 +1,19 @@
 'use strict';
 
-const shared_tailwindElement_index = require('./index-aaa67d55.cjs');
+const shared_tailwindElement_index = require('./index-d548eac4.cjs');
 const queryAssignedElements = require('./query-assigned-elements-1d5d9d4c.cjs');
-const styleMap = require('./style-map-74906707.cjs');
-const index = require('./index-e9668573.cjs');
+const styleMap = require('./style-map-02fa5128.cjs');
 require('./components/lukso-profile/index.cjs');
 require('./color-palette.cjs');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 const style = ":host {\n  display: flex;\n  width: 100%;\n}\n\n:host([is-fixed-width]) {\n  width: inherit;\n}";
 
-(typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.src || new URL('index-87e624a1.cjs', document.baseURI).href)).replace(/^file:\/\/|\/\w+\.?[jt]s$/g, "").replace(/\/index\.[a-z]+$/g, "");
+(typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.src || new URL('index-340046e7.cjs', document.baseURI).href)).replace(/^file:\/\/|\/\w+\.?[jt]s$/g, "").replace(/\/index\.[a-z]+$/g, "");
 
-(typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.src || new URL('index-87e624a1.cjs', document.baseURI).href)).replace(/^file:\/\/|\/\w+\.?[jt]s$/g, "").replace(/\/index\.[a-z]+$/g, "");
+(typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.src || new URL('index-340046e7.cjs', document.baseURI).href)).replace(/^file:\/\/|\/\w+\.?[jt]s$/g, "").replace(/\/index\.[a-z]+$/g, "");
 
-(typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.src || new URL('index-87e624a1.cjs', document.baseURI).href)).replace(/^file:\/\/|\/\w+\.?[jt]s$/g, "").replace(/\/index\.[a-z]+$/g, "");
+(typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.src || new URL('index-340046e7.cjs', document.baseURI).href)).replace(/^file:\/\/|\/\w+\.?[jt]s$/g, "").replace(/\/index\.[a-z]+$/g, "");
 
 /**
  * The code in this file is copied from https://github.com/lukeed/clsx and modified to suit the needs of tailwind-merge better.
@@ -2559,8 +2558,8 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
     this.backgroundUrl = "";
     this.profileUrl = "";
     this.profileAddress = "";
-    this.isFixedWidth = false;
-    this.isFixedHeight = false;
+    this.width = void 0;
+    this.height = void 0;
     this.customClass = "";
     this.headerClass = "";
     this.size = "medium";
@@ -2582,15 +2581,17 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
     return shared_tailwindElement_index.x`
       <div
         data-testid="card"
-        class="bg-neutral-100 ${index.customClassMap({
+        style=${styleMap.o({
+      minHeight: `${this.height}px`,
+      width: `${this.width}px`
+    })}
+        class=${cn("bg-neutral-100", {
       [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
-    })}"
+      "w-full": !this.width
+    })}
       >
         <slot name="content"></slot>
       </div>
@@ -2600,17 +2601,17 @@ 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
-      }
-    )}"
+        style=${styleMap.o({
+      minHeight: `${this.height}px`,
+      width: `${this.width}px`
+    })}
+        class=${cn("bg-neutral-100 grid grid-rows-[auto,1fr] overflow-hidden", {
+      [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-full": !this.width
+    })}
       >
         <div class=${this.headerClass}>
           <slot name="header"></slot>
@@ -2625,48 +2626,55 @@ 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] ${index.customClassMap({
+        style=${styleMap.o({
+      minHeight: `${this.height}px`,
+      width: `${this.width}px`
+    })}
+        class=${cn("bg-neutral-100 grid", {
       [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
-    })}"
+      "w-full": !this.width
+    })}
       >
         <div
           style=${styleMap.o({
       backgroundImage: this.backgroundImageOrGradient()
     })}
           class=${cn(
-      "min-h-[90px] -mb-6 bg-center bg-cover rounded-[24px_24px_0_0] relative",
+      "row-end-1 col-span-1 col-end-1 row-span-1 h-full w-full bg-center bg-cover rounded-24 relative",
       this.headerClass
     )}
         >
           ${this.backgroundUrl && shared_tailwindElement_index.x` <div
-            class="min-h-full min-w-full rounded-[24px_24px_0_0] bg-neutral-20/10 absolute"
+            class="h-full full rounded-[24px_24px_0_0] bg-neutral-20/10 absolute"
           ></div>`}
           <div>
             <slot name="header"></slot>
           </div>
         </div>
-        <div class="bg-neutral-100 rounded-24 relative">
-          <lukso-profile
-            profile-url=${this.profileUrl}
-            size="large"
-            profile-address=${this.profileAddress}
-            has-identicon
-            class="absolute -top-[40px] left-[calc(50%_-_40px)] z-10"
-          ></lukso-profile>
-          <div
-            class="overflow-hidden w-[153px] h-[70px] -top-[70px] relative mx-auto flex items-end justify-center -mb-2"
-          >
+        <div
+          class="grid grid-rows-[1fr,auto] row-end-1 col-span-1 col-end-1 row-span-1"
+        >
+          <div></div>
+          <div class="bg-neutral-100 rounded-24 relative">
+            <lukso-profile
+              profile-url=${this.profileUrl}
+              size="large"
+              profile-address=${this.profileAddress}
+              has-identicon
+              class="absolute -top-[40px] left-[calc(50%_-_40px)] z-10"
+            ></lukso-profile>
             <div
-              class="bg-neutral-100 rounded-[103px_103px_0_0] w-[96px] h-[48px]"
-            ></div>
+              class="overflow-hidden w-[153px] h-[70px] -top-[70px] relative mx-auto flex items-end justify-center -mb-3"
+            >
+              <div
+                class="bg-neutral-100 rounded-[103px_103px_0_0] w-[96px] h-[48px]"
+              ></div>
+            </div>
+            <slot name="content"></slot>
           </div>
-          <slot name="content"></slot>
         </div>
       </div>
     `;
@@ -2675,15 +2683,17 @@ 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] ${index.customClassMap({
+        style=${styleMap.o({
+      minHeight: `${this.height}px`,
+      width: `${this.width}px`
+    })}
+        class=${cn("bg-neutral-100 grid grid-rows-[auto,1fr]", {
       [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
-    })}"
+      ["w-full"]: !this.width
+    })}
       >
         <div
           style=${styleMap.o({
@@ -2732,15 +2742,17 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
     return shared_tailwindElement_index.x`
       <div
         data-testid="card"
-        class="h-[240px] flex bg-neutral-100 ${index.customClassMap({
+        style=${styleMap.o({
+      minHeight: `${this.height}px`,
+      width: `${this.width}px`
+    })}
+        class=${cn("h-[240px] flex bg-neutral-100", {
       [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
-    })}"
+      ["w-full"]: !this.width
+    })}
       >
         <div
           style=${styleMap.o({
@@ -2764,15 +2776,17 @@ 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] ${index.customClassMap({
+        style=${styleMap.o({
+      minHeight: `${this.height}px`,
+      width: `${this.width}px`
+    })}
+        class=${cn("bg-neutral-100 grid grid-rows-[auto,1fr]", {
       [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
-    })}"
+      ["w-full"]: !this.width
+    })}
       >
         <div
           style=${styleMap.o({
@@ -2825,11 +2839,11 @@ __decorateClass([
   queryAssignedElements.n({ type: String, attribute: "profile-address" })
 ], exports.LuksoCard.prototype, "profileAddress", 2);
 __decorateClass([
-  queryAssignedElements.n({ type: Boolean, attribute: "is-fixed-width" })
-], exports.LuksoCard.prototype, "isFixedWidth", 2);
+  queryAssignedElements.n({ type: Number })
+], exports.LuksoCard.prototype, "width", 2);
 __decorateClass([
-  queryAssignedElements.n({ type: Boolean, attribute: "is-fixed-height" })
-], exports.LuksoCard.prototype, "isFixedHeight", 2);
+  queryAssignedElements.n({ type: Number })
+], exports.LuksoCard.prototype, "height", 2);
 __decorateClass([
   queryAssignedElements.n({ type: String, attribute: "custom-class" })
 ], exports.LuksoCard.prototype, "customClass", 2);

package/dist/{index-d0d67b5f.js → index-8331d2b8.js}

@@ -1,7 +1,6 @@
-import { T as TailwindStyledElement, x } from './index-2f5488b6.js';
+import { T as TailwindStyledElement, x } from './index-92b65473.js';
 import { n, e } from './query-assigned-elements-5d94572f.js';
-import { o } from './style-map-88b4d8ad.js';
-import { c as customClassMap } from './index-5e194caf.js';
+import { o } from './style-map-be0fc31f.js';
 import './components/lukso-profile/index.js';
 import './color-palette.js';
 
@@ -2556,8 +2555,8 @@ let LuksoCard = class extends TailwindStyledElement(style) {
     this.backgroundUrl = "";
     this.profileUrl = "";
     this.profileAddress = "";
-    this.isFixedWidth = false;
-    this.isFixedHeight = false;
+    this.width = void 0;
+    this.height = void 0;
     this.customClass = "";
     this.headerClass = "";
     this.size = "medium";
@@ -2579,15 +2578,17 @@ let LuksoCard = class extends TailwindStyledElement(style) {
     return x`
       <div
         data-testid="card"
-        class="bg-neutral-100 ${customClassMap({
+        style=${o({
+      minHeight: `${this.height}px`,
+      width: `${this.width}px`
+    })}
+        class=${cn("bg-neutral-100", {
       [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
-    })}"
+      "w-full": !this.width
+    })}
       >
         <slot name="content"></slot>
       </div>
@@ -2597,17 +2598,17 @@ 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
-      }
-    )}"
+        style=${o({
+      minHeight: `${this.height}px`,
+      width: `${this.width}px`
+    })}
+        class=${cn("bg-neutral-100 grid grid-rows-[auto,1fr] overflow-hidden", {
+      [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-full": !this.width
+    })}
       >
         <div class=${this.headerClass}>
           <slot name="header"></slot>
@@ -2622,48 +2623,55 @@ let LuksoCard = class extends TailwindStyledElement(style) {
     return x`
       <div
         data-testid="card"
-        class="bg-neutral-100 grid grid-rows-[auto,1fr] ${customClassMap({
+        style=${o({
+      minHeight: `${this.height}px`,
+      width: `${this.width}px`
+    })}
+        class=${cn("bg-neutral-100 grid", {
       [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
-    })}"
+      "w-full": !this.width
+    })}
       >
         <div
           style=${o({
       backgroundImage: this.backgroundImageOrGradient()
     })}
           class=${cn(
-      "min-h-[90px] -mb-6 bg-center bg-cover rounded-[24px_24px_0_0] relative",
+      "row-end-1 col-span-1 col-end-1 row-span-1 h-full w-full bg-center bg-cover rounded-24 relative",
       this.headerClass
     )}
         >
           ${this.backgroundUrl && x` <div
-            class="min-h-full min-w-full rounded-[24px_24px_0_0] bg-neutral-20/10 absolute"
+            class="h-full full rounded-[24px_24px_0_0] bg-neutral-20/10 absolute"
           ></div>`}
           <div>
             <slot name="header"></slot>
           </div>
         </div>
-        <div class="bg-neutral-100 rounded-24 relative">
-          <lukso-profile
-            profile-url=${this.profileUrl}
-            size="large"
-            profile-address=${this.profileAddress}
-            has-identicon
-            class="absolute -top-[40px] left-[calc(50%_-_40px)] z-10"
-          ></lukso-profile>
-          <div
-            class="overflow-hidden w-[153px] h-[70px] -top-[70px] relative mx-auto flex items-end justify-center -mb-2"
-          >
+        <div
+          class="grid grid-rows-[1fr,auto] row-end-1 col-span-1 col-end-1 row-span-1"
+        >
+          <div></div>
+          <div class="bg-neutral-100 rounded-24 relative">
+            <lukso-profile
+              profile-url=${this.profileUrl}
+              size="large"
+              profile-address=${this.profileAddress}
+              has-identicon
+              class="absolute -top-[40px] left-[calc(50%_-_40px)] z-10"
+            ></lukso-profile>
             <div
-              class="bg-neutral-100 rounded-[103px_103px_0_0] w-[96px] h-[48px]"
-            ></div>
+              class="overflow-hidden w-[153px] h-[70px] -top-[70px] relative mx-auto flex items-end justify-center -mb-3"
+            >
+              <div
+                class="bg-neutral-100 rounded-[103px_103px_0_0] w-[96px] h-[48px]"
+              ></div>
+            </div>
+            <slot name="content"></slot>
           </div>
-          <slot name="content"></slot>
         </div>
       </div>
     `;
@@ -2672,15 +2680,17 @@ let LuksoCard = class extends TailwindStyledElement(style) {
     return x`
       <div
         data-testid="card"
-        class="bg-neutral-100 grid grid-rows-[auto,1fr] ${customClassMap({
+        style=${o({
+      minHeight: `${this.height}px`,
+      width: `${this.width}px`
+    })}
+        class=${cn("bg-neutral-100 grid grid-rows-[auto,1fr]", {
       [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
-    })}"
+      ["w-full"]: !this.width
+    })}
       >
         <div
           style=${o({
@@ -2729,15 +2739,17 @@ let LuksoCard = class extends TailwindStyledElement(style) {
     return x`
       <div
         data-testid="card"
-        class="h-[240px] flex bg-neutral-100 ${customClassMap({
+        style=${o({
+      minHeight: `${this.height}px`,
+      width: `${this.width}px`
+    })}
+        class=${cn("h-[240px] flex bg-neutral-100", {
       [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
-    })}"
+      ["w-full"]: !this.width
+    })}
       >
         <div
           style=${o({
@@ -2761,15 +2773,17 @@ let LuksoCard = class extends TailwindStyledElement(style) {
     return x`
       <div
         data-testid="card"
-        class="bg-neutral-100 grid grid-rows-[auto,1fr] ${customClassMap({
+        style=${o({
+      minHeight: `${this.height}px`,
+      width: `${this.width}px`
+    })}
+        class=${cn("bg-neutral-100 grid grid-rows-[auto,1fr]", {
       [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
-    })}"
+      ["w-full"]: !this.width
+    })}
       >
         <div
           style=${o({
@@ -2822,11 +2836,11 @@ __decorateClass([
   n({ type: String, attribute: "profile-address" })
 ], LuksoCard.prototype, "profileAddress", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-fixed-width" })
-], LuksoCard.prototype, "isFixedWidth", 2);
+  n({ type: Number })
+], LuksoCard.prototype, "width", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-fixed-height" })
-], LuksoCard.prototype, "isFixedHeight", 2);
+  n({ type: Number })
+], LuksoCard.prototype, "height", 2);
 __decorateClass([
   n({ type: String, attribute: "custom-class" })
 ], LuksoCard.prototype, "customClass", 2);