@lukso/web-components 1.55.0 → 1.56.0

package/dist/components/index.cjs

@@ -23,15 +23,15 @@ const components_luksoTest_index = require('./lukso-test/index.cjs');
 const components_luksoTooltip_index = require('./lukso-tooltip/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-534893a1.cjs');
+const shared_tailwindElement_index = require('../index-6da9ae7b.cjs');
 require('../cn-4ec0bd94.cjs');
 require('../query-assigned-elements-1d5d9d4c.cjs');
 require('../state-f73a8b4f.cjs');
 require('../index-e8741080.cjs');
 require('../tailwind-config.cjs');
-require('../style-map-beffabf7.cjs');
+require('../style-map-ed77e6b4.cjs');
 require('../directive-8278ab14.cjs');
-require('../index-21cb1f33.cjs');
+require('../index-4f378e44.cjs');
 require('../index-e9668573.cjs');
 
 

package/dist/components/index.js

@@ -19,13 +19,13 @@ export { LuksoTest } from './lukso-test/index.js';
 export { LuksoTooltip } from './lukso-tooltip/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-3373dd2c.js';
+export { a as TailwindElement, T as TailwindStyledElement } from '../index-3d7e2144.js';
 import '../cn-616567d4.js';
 import '../query-assigned-elements-5d94572f.js';
 import '../state-0a779257.js';
 import '../index-c55a1069.js';
 import '../tailwind-config.js';
-import '../style-map-04ec407e.js';
+import '../style-map-6fdea6cc.js';
 import '../directive-2bb7789e.js';
-import '../index-b02bfbc3.js';
+import '../index-3e1c4760.js';
 import '../index-5e194caf.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-534893a1.cjs');
+const shared_tailwindElement_index = require('../../index-6da9ae7b.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
 const state = require('../../state-f73a8b4f.cjs');
 const index = require('../../index-e8741080.cjs');

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

@@ -1,4 +1,4 @@
-import { T as TailwindStyledElement, x, A } from '../../index-3373dd2c.js';
+import { T as TailwindStyledElement, x, A } from '../../index-3d7e2144.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
 import { t } from '../../state-0a779257.js';
 import { s as se } from '../../index-c55a1069.js';

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

@@ -2,13 +2,14 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-534893a1.cjs');
+const shared_tailwindElement_index = require('../../index-6da9ae7b.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
-const styleMap = require('../../style-map-beffabf7.cjs');
+const styleMap = require('../../style-map-ed77e6b4.cjs');
+const index = require('../../index-e8741080.cjs');
 require('../lukso-profile/index.cjs');
 require('../../tailwind-config.cjs');
 const cn = require('../../cn-4ec0bd94.cjs');
-const index = require('../../index-21cb1f33.cjs');
+const index$1 = require('../../index-4f378e44.cjs');
 require('../../directive-8278ab14.cjs');
 require('../../index-e9668573.cjs');
 
@@ -37,10 +38,48 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
     this.customClass = "";
     this.headerClass = "";
     this.size = "medium";
+    this.shadow = "large";
     this.isHoverable = false;
     this.mediumStyles = `rounded-24 shadow-neutral-drop-shadow-2xl`;
     this.smallStyles = `rounded-12 shadow-neutral-drop-shadow`;
     this.smallHoverStyles = `hover:shadow-neutral-drop-shadow-1xl cursor-pointer transition`;
+    this.cardStyles = index.se({
+      base: `bg-neutral-100`,
+      variants: {
+        size: {
+          small: `rounded-12`,
+          medium: `rounded-24`
+        },
+        shadow: {
+          small: `shadow-neutral-drop-shadow`,
+          medium: `shadow-neutral-drop-shadow-1xl`,
+          large: `shadow-neutral-drop-shadow-2xl`
+        },
+        isHoverable: {
+          true: `cursor-pointer transition`
+        },
+        hasNoWidth: {
+          true: `w-full`
+        }
+      },
+      compoundVariants: [
+        {
+          shadow: "small",
+          isHoverable: true,
+          class: `hover:shadow-neutral-drop-shadow-1xl`
+        },
+        {
+          shadow: "medium",
+          isHoverable: true,
+          class: `hover:shadow-neutral-drop-shadow-2xl`
+        },
+        {
+          shadow: "large",
+          isHoverable: true,
+          class: `hover:shadow-neutral-drop-shadow-3xl`
+        }
+      ]
+    });
   }
   backgroundImageOrGradient() {
     const opacity = "80";
@@ -52,26 +91,33 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
     return `linear-gradient(90deg, ${gradientStart}, ${gradientEnd})`;
   }
   basicTemplate() {
+    const cardStyles = this.cardStyles({
+      size: this.size,
+      shadow: this.shadow,
+      isHoverable: this.isHoverable,
+      hasNoWidth: !this.width
+    });
     return shared_tailwindElement_index.x`
       <div
         data-testid="card"
-        style=${index.customStyleMap({
+        style=${index$1.customStyleMap({
       [`min-height: ${this.height}px`]: !!this.height,
       [`width: ${this.width}px`]: !!this.width
     })}
-        class=${cn.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-full": !this.width
-    })}
+        class=${cn.cn(cardStyles, this.customClass)}
       >
         <slot name="content"></slot>
       </div>
     `;
   }
   withHeaderTemplate() {
+    const cardStyles = this.cardStyles({
+      size: this.size,
+      shadow: this.shadow,
+      isHoverable: this.isHoverable,
+      hasNoWidth: !this.width,
+      class: `grid grid-rows-[auto,1fr] overflow-hidden`
+    });
     return shared_tailwindElement_index.x`
       <div
         data-testid="card"
@@ -79,13 +125,7 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
       minHeight: `${this.height}px`,
       width: `${this.width}px`
     })}
-        class=${cn.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
-    })}
+        class=${cn.cn(cardStyles, this.customClass)}
       >
         <div class=${this.headerClass}>
           <slot name="header"></slot>
@@ -97,20 +137,21 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
     `;
   }
   profileTemplate() {
+    const cardStyles = this.cardStyles({
+      size: this.size,
+      shadow: this.shadow,
+      isHoverable: this.isHoverable,
+      hasNoWidth: !this.width,
+      class: `grid`
+    });
     return shared_tailwindElement_index.x`
       <div
         data-testid="card"
-        style=${index.customStyleMap({
+        style=${index$1.customStyleMap({
       [`min-height: ${this.height}px`]: !!this.height,
       [`width: ${this.width}px`]: !!this.width
     })}
-        class=${cn.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-full": !this.width
-    })}
+        class=${cn.cn(cardStyles, this.customClass)}
       >
         <div
           style=${styleMap.o({
@@ -154,20 +195,21 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
     `;
   }
   profile2Template() {
+    const cardStyles = this.cardStyles({
+      size: this.size,
+      shadow: this.shadow,
+      isHoverable: this.isHoverable,
+      hasNoWidth: !this.width,
+      class: `grid grid-rows-[auto,1fr]`
+    });
     return shared_tailwindElement_index.x`
       <div
         data-testid="card"
-        style=${index.customStyleMap({
+        style=${index$1.customStyleMap({
       [`min-height: ${this.height}px`]: !!this.height,
       [`width: ${this.width}px`]: !!this.width
     })}
-        class=${cn.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-full"]: !this.width
-    })}
+        class=${cn.cn(cardStyles, this.customClass)}
       >
         <div
           style=${styleMap.o({
@@ -213,20 +255,21 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
     `;
   }
   heroTemplate() {
+    const cardStyles = this.cardStyles({
+      size: this.size,
+      shadow: this.shadow,
+      isHoverable: this.isHoverable,
+      hasNoWidth: !this.width,
+      class: `h-[240px] flex`
+    });
     return shared_tailwindElement_index.x`
       <div
         data-testid="card"
-        style=${index.customStyleMap({
+        style=${index$1.customStyleMap({
       [`min-height: ${this.height}px`]: !!this.height,
       [`width: ${this.width}px`]: !!this.width
     })}
-        class=${cn.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-full"]: !this.width
-    })}
+        class=${cn.cn(cardStyles, this.customClass)}
       >
         <div
           style=${styleMap.o({
@@ -247,20 +290,21 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
     `;
   }
   dappTemplate() {
+    const cardStyles = this.cardStyles({
+      size: this.size,
+      shadow: this.shadow,
+      isHoverable: this.isHoverable,
+      hasNoWidth: !this.width,
+      class: `grid grid-rows-[auto,1fr]`
+    });
     return shared_tailwindElement_index.x`
       <div
         data-testid="card"
-        style=${index.customStyleMap({
+        style=${index$1.customStyleMap({
       [`min-height: ${this.height}px`]: !!this.height,
       [`width: ${this.width}px`]: !!this.width
     })}
-        class=${cn.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-full"]: !this.width
-    })}
+        class=${cn.cn(cardStyles, this.customClass)}
       >
         <div
           style=${styleMap.o({
@@ -327,6 +371,9 @@ __decorateClass([
 __decorateClass([
   queryAssignedElements.n({ type: String })
 ], exports.LuksoCard.prototype, "size", 2);
+__decorateClass([
+  queryAssignedElements.n({ type: String })
+], exports.LuksoCard.prototype, "shadow", 2);
 __decorateClass([
   queryAssignedElements.n({ type: Boolean, attribute: "is-hoverable" })
 ], exports.LuksoCard.prototype, "isHoverable", 2);

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

@@ -1,5 +1,6 @@
 export type CardVariants = 'basic' | 'with-header' | 'profile' | 'profile-2' | 'hero' | 'dapp';
 export type CardSizes = 'small' | 'medium';
+export type CardShadows = 'small' | 'medium' | 'large';
 declare const LuksoCard_base: typeof import("lit").LitElement;
 export declare class LuksoCard extends LuksoCard_base {
     variant: CardVariants;
@@ -11,11 +12,13 @@ export declare class LuksoCard extends LuksoCard_base {
     customClass: string;
     headerClass: string;
     size: CardSizes;
+    shadow: CardShadows;
     isHoverable: boolean;
     private mediumStyles;
     private smallStyles;
     private smallHoverStyles;
     private backgroundImageOrGradient;
+    private cardStyles;
     basicTemplate(): import("lit-html").TemplateResult<1>;
     withHeaderTemplate(): import("lit-html").TemplateResult<1>;
     profileTemplate(): import("lit-html").TemplateResult<1>;

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":"AAMA,OAAO,4BAA4B,CAAA;AAInC,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,KAAK,EAAE,MAAM,GAAG,SAAS,CAAY;IAGrC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAY;IAGtC,WAAW,SAAK;IAGhB,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;IAqBb,kBAAkB;IA0BlB,eAAe;IA2Df,gBAAgB;IA6DhB,YAAY;IAoCZ,YAAY;IAsCZ,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;AAInC,MAAM,MAAM,YAAY,GACpB,OAAO,GACP,aAAa,GACb,SAAS,GACT,WAAW,GACX,MAAM,GACN,MAAM,CAAA;AAEV,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAA;AAE1C,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;;AAEtD,qBACa,SAAU,SAAQ,cAA4B;IAEzD,OAAO,EAAE,YAAY,CAAU;IAG/B,aAAa,SAAK;IAGlB,UAAU,SAAK;IAGf,cAAc,SAAK;IAGnB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAY;IAGrC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAY;IAGtC,WAAW,SAAK;IAGhB,WAAW,SAAK;IAGhB,IAAI,EAAE,SAAS,CAAW;IAG1B,MAAM,EAAE,WAAW,CAAU;IAG7B,WAAW,UAAQ;IAEnB,OAAO,CAAC,YAAY,CAA8C;IAClE,OAAO,CAAC,WAAW,CAA0C;IAC7D,OAAO,CAAC,gBAAgB,CAAmE;IAE3F,OAAO,CAAC,yBAAyB;IAYjC,OAAO,CAAC,UAAU,CAoChB;IAEF,aAAa;IAsBb,kBAAkB;IA4BlB,eAAe;IA6Df,gBAAgB;IA+DhB,YAAY;IAsCZ,YAAY;IAwCZ,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,10 +1,11 @@
-import { T as TailwindStyledElement, x } from '../../index-3373dd2c.js';
+import { T as TailwindStyledElement, x } from '../../index-3d7e2144.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
-import { o } from '../../style-map-04ec407e.js';
+import { o } from '../../style-map-6fdea6cc.js';
+import { s as se } from '../../index-c55a1069.js';
 import '../lukso-profile/index.js';
 import '../../tailwind-config.js';
 import { c as cn } from '../../cn-616567d4.js';
-import { c as customStyleMap } from '../../index-b02bfbc3.js';
+import { c as customStyleMap } from '../../index-3e1c4760.js';
 import '../../directive-2bb7789e.js';
 import '../../index-5e194caf.js';
 
@@ -33,10 +34,48 @@ let LuksoCard = class extends TailwindStyledElement(style) {
     this.customClass = "";
     this.headerClass = "";
     this.size = "medium";
+    this.shadow = "large";
     this.isHoverable = false;
     this.mediumStyles = `rounded-24 shadow-neutral-drop-shadow-2xl`;
     this.smallStyles = `rounded-12 shadow-neutral-drop-shadow`;
     this.smallHoverStyles = `hover:shadow-neutral-drop-shadow-1xl cursor-pointer transition`;
+    this.cardStyles = se({
+      base: `bg-neutral-100`,
+      variants: {
+        size: {
+          small: `rounded-12`,
+          medium: `rounded-24`
+        },
+        shadow: {
+          small: `shadow-neutral-drop-shadow`,
+          medium: `shadow-neutral-drop-shadow-1xl`,
+          large: `shadow-neutral-drop-shadow-2xl`
+        },
+        isHoverable: {
+          true: `cursor-pointer transition`
+        },
+        hasNoWidth: {
+          true: `w-full`
+        }
+      },
+      compoundVariants: [
+        {
+          shadow: "small",
+          isHoverable: true,
+          class: `hover:shadow-neutral-drop-shadow-1xl`
+        },
+        {
+          shadow: "medium",
+          isHoverable: true,
+          class: `hover:shadow-neutral-drop-shadow-2xl`
+        },
+        {
+          shadow: "large",
+          isHoverable: true,
+          class: `hover:shadow-neutral-drop-shadow-3xl`
+        }
+      ]
+    });
   }
   backgroundImageOrGradient() {
     const opacity = "80";
@@ -48,6 +87,12 @@ let LuksoCard = class extends TailwindStyledElement(style) {
     return `linear-gradient(90deg, ${gradientStart}, ${gradientEnd})`;
   }
   basicTemplate() {
+    const cardStyles = this.cardStyles({
+      size: this.size,
+      shadow: this.shadow,
+      isHoverable: this.isHoverable,
+      hasNoWidth: !this.width
+    });
     return x`
       <div
         data-testid="card"
@@ -55,19 +100,20 @@ let LuksoCard = class extends TailwindStyledElement(style) {
       [`min-height: ${this.height}px`]: !!this.height,
       [`width: ${this.width}px`]: !!this.width
     })}
-        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-full": !this.width
-    })}
+        class=${cn(cardStyles, this.customClass)}
       >
         <slot name="content"></slot>
       </div>
     `;
   }
   withHeaderTemplate() {
+    const cardStyles = this.cardStyles({
+      size: this.size,
+      shadow: this.shadow,
+      isHoverable: this.isHoverable,
+      hasNoWidth: !this.width,
+      class: `grid grid-rows-[auto,1fr] overflow-hidden`
+    });
     return x`
       <div
         data-testid="card"
@@ -75,13 +121,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
       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
-    })}
+        class=${cn(cardStyles, this.customClass)}
       >
         <div class=${this.headerClass}>
           <slot name="header"></slot>
@@ -93,6 +133,13 @@ let LuksoCard = class extends TailwindStyledElement(style) {
     `;
   }
   profileTemplate() {
+    const cardStyles = this.cardStyles({
+      size: this.size,
+      shadow: this.shadow,
+      isHoverable: this.isHoverable,
+      hasNoWidth: !this.width,
+      class: `grid`
+    });
     return x`
       <div
         data-testid="card"
@@ -100,13 +147,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
       [`min-height: ${this.height}px`]: !!this.height,
       [`width: ${this.width}px`]: !!this.width
     })}
-        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-full": !this.width
-    })}
+        class=${cn(cardStyles, this.customClass)}
       >
         <div
           style=${o({
@@ -150,6 +191,13 @@ let LuksoCard = class extends TailwindStyledElement(style) {
     `;
   }
   profile2Template() {
+    const cardStyles = this.cardStyles({
+      size: this.size,
+      shadow: this.shadow,
+      isHoverable: this.isHoverable,
+      hasNoWidth: !this.width,
+      class: `grid grid-rows-[auto,1fr]`
+    });
     return x`
       <div
         data-testid="card"
@@ -157,13 +205,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
       [`min-height: ${this.height}px`]: !!this.height,
       [`width: ${this.width}px`]: !!this.width
     })}
-        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-full"]: !this.width
-    })}
+        class=${cn(cardStyles, this.customClass)}
       >
         <div
           style=${o({
@@ -209,6 +251,13 @@ let LuksoCard = class extends TailwindStyledElement(style) {
     `;
   }
   heroTemplate() {
+    const cardStyles = this.cardStyles({
+      size: this.size,
+      shadow: this.shadow,
+      isHoverable: this.isHoverable,
+      hasNoWidth: !this.width,
+      class: `h-[240px] flex`
+    });
     return x`
       <div
         data-testid="card"
@@ -216,13 +265,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
       [`min-height: ${this.height}px`]: !!this.height,
       [`width: ${this.width}px`]: !!this.width
     })}
-        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-full"]: !this.width
-    })}
+        class=${cn(cardStyles, this.customClass)}
       >
         <div
           style=${o({
@@ -243,6 +286,13 @@ let LuksoCard = class extends TailwindStyledElement(style) {
     `;
   }
   dappTemplate() {
+    const cardStyles = this.cardStyles({
+      size: this.size,
+      shadow: this.shadow,
+      isHoverable: this.isHoverable,
+      hasNoWidth: !this.width,
+      class: `grid grid-rows-[auto,1fr]`
+    });
     return x`
       <div
         data-testid="card"
@@ -250,13 +300,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
       [`min-height: ${this.height}px`]: !!this.height,
       [`width: ${this.width}px`]: !!this.width
     })}
-        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-full"]: !this.width
-    })}
+        class=${cn(cardStyles, this.customClass)}
       >
         <div
           style=${o({
@@ -323,6 +367,9 @@ __decorateClass([
 __decorateClass([
   n({ type: String })
 ], LuksoCard.prototype, "size", 2);
+__decorateClass([
+  n({ type: String })
+], LuksoCard.prototype, "shadow", 2);
 __decorateClass([
   n({ type: Boolean, attribute: "is-hoverable" })
 ], LuksoCard.prototype, "isHoverable", 2);

package/dist/components/lukso-card/lukso-card.stories.d.ts

@@ -24,4 +24,6 @@ export declare const CustomCard: any;
 export declare const SmallCard: any;
 /** Card can be as hoverable element with `is-hoverable` property.  */
 export declare const HoverableCard: any;
+/** You can select card shadow with `shadow` property.  */
+export declare const Shadow: any;
 //# sourceMappingURL=lukso-card.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"lukso-card.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-card/lukso-card.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAEhD,OAAO,SAAS,CAAA;AAChB,OAAO,kBAAkB,CAAA;AACzB,OAAO,mBAAmB,CAAA;AAE1B,qJAAqJ;AACrJ,QAAA,MAAM,IAAI,EAAE,IAiIX,CAAA;AAED,eAAe,IAAI,CAAA;AAwInB,iDAAiD;AACjD,eAAO,MAAM,WAAW,KAA2B,CAAA;AAQnD,iHAAiH;AACjH,eAAO,MAAM,SAAS,KAA2B,CAAA;AAYjD,wCAAwC;AACxC,eAAO,MAAM,cAAc,KAA2B,CAAA;AAatD,+EAA+E;AAC/E,eAAO,MAAM,oBAAoB,KAAgC,CAAA;AAajE,sIAAsI;AACtI,eAAO,MAAM,WAAW,KAA2B,CAAA;AAmBnD,uCAAuC;AACvC,eAAO,MAAM,YAAY,KAA2B,CAAA;AAOpD,kCAAkC;AAClC,eAAO,MAAM,QAAQ,KAAwB,CAAA;AAK7C,kCAAkC;AAClC,eAAO,MAAM,QAAQ,KAA2B,CAAA;AAKhD,uGAAuG;AACvG,eAAO,MAAM,UAAU,KAA2B,CAAA;AAalD,sDAAsD;AACtD,eAAO,MAAM,SAAS,KAA2B,CAAA;AAKjD,sEAAsE;AACtE,eAAO,MAAM,aAAa,KAA2B,CAAA"}
+{"version":3,"file":"lukso-card.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-card/lukso-card.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAEhD,OAAO,SAAS,CAAA;AAChB,OAAO,kBAAkB,CAAA;AACzB,OAAO,mBAAmB,CAAA;AAE1B,qJAAqJ;AACrJ,QAAA,MAAM,IAAI,EAAE,IAyIX,CAAA;AAED,eAAe,IAAI,CAAA;AA4InB,iDAAiD;AACjD,eAAO,MAAM,WAAW,KAA2B,CAAA;AAQnD,iHAAiH;AACjH,eAAO,MAAM,SAAS,KAA2B,CAAA;AAYjD,wCAAwC;AACxC,eAAO,MAAM,cAAc,KAA2B,CAAA;AAatD,+EAA+E;AAC/E,eAAO,MAAM,oBAAoB,KAAgC,CAAA;AAajE,sIAAsI;AACtI,eAAO,MAAM,WAAW,KAA2B,CAAA;AAmBnD,uCAAuC;AACvC,eAAO,MAAM,YAAY,KAA2B,CAAA;AAOpD,kCAAkC;AAClC,eAAO,MAAM,QAAQ,KAAwB,CAAA;AAK7C,kCAAkC;AAClC,eAAO,MAAM,QAAQ,KAA2B,CAAA;AAKhD,uGAAuG;AACvG,eAAO,MAAM,UAAU,KAA2B,CAAA;AAalD,sDAAsD;AACtD,eAAO,MAAM,SAAS,KAA2B,CAAA;AAKjD,sEAAsE;AACtE,eAAO,MAAM,aAAa,KAA2B,CAAA;AAOrD,0DAA0D;AAC1D,eAAO,MAAM,MAAM,KAA2B,CAAA"}

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-534893a1.cjs');
+const shared_tailwindElement_index = require('../../index-6da9ae7b.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
 const state = require('../../state-f73a8b4f.cjs');
 const index = require('../../index-e9668573.cjs');

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

@@ -1,4 +1,4 @@
-import { a as TailwindElement, x, A } from '../../index-3373dd2c.js';
+import { a as TailwindElement, x, A } from '../../index-3d7e2144.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
 import { t } from '../../state-0a779257.js';
 import { c as customClassMap } from '../../index-5e194caf.js';

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-534893a1.cjs');
+const shared_tailwindElement_index = require('../../index-6da9ae7b.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
 
 var __defProp = Object.defineProperty;

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

@@ -1,4 +1,4 @@
-import { a as TailwindElement, x } from '../../index-3373dd2c.js';
+import { a as TailwindElement, x } from '../../index-3d7e2144.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
 
 var __defProp = Object.defineProperty;

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-534893a1.cjs');
+const shared_tailwindElement_index = require('../../index-6da9ae7b.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
-const styleMap = require('../../style-map-beffabf7.cjs');
+const styleMap = require('../../style-map-ed77e6b4.cjs');
 require('../../directive-8278ab14.cjs');
 
 const style = ":host {\n    display: inline-flex\n}";

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

@@ -1,6 +1,6 @@
-import { x, T as TailwindStyledElement } from '../../index-3373dd2c.js';
+import { x, T as TailwindStyledElement } from '../../index-3d7e2144.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
-import { o } from '../../style-map-04ec407e.js';
+import { o } from '../../style-map-6fdea6cc.js';
 import '../../directive-2bb7789e.js';
 
 const style = ":host {\n    display: inline-flex\n}";

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-534893a1.cjs');
+const shared_tailwindElement_index = require('../../index-6da9ae7b.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
 const state = require('../../state-f73a8b4f.cjs');
 const index = require('../../index-e9668573.cjs');

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

@@ -1,4 +1,4 @@
-import { a as TailwindElement, x, A } from '../../index-3373dd2c.js';
+import { a as TailwindElement, x, A } from '../../index-3d7e2144.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
 import { t } from '../../state-0a779257.js';
 import { c as customClassMap } from '../../index-5e194caf.js';