@lukso/web-components 1.51.5 → 1.52.0

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

@@ -1,9 +1,333 @@
-import '../../index-04d11436.js';
-import '../../query-assigned-elements-5d94572f.js';
-import '../../style-map-5be28c06.js';
-export { L as LuksoCard } from '../../index-b83c7efa.js';
+import { T as TailwindStyledElement, x } from '../../index-35ca0b42.js';
+import { n, e } from '../../query-assigned-elements-5d94572f.js';
+import { o } from '../../style-map-17f918a2.js';
 import '../lukso-profile/index.js';
-import '../../color-palette.js';
-import '../../index-ee4182e6.js';
+import '../../tailwind-config.js';
+import { c as cn } from '../../cn-1594f5ba.js';
+import { c as customStyleMap } from '../../index-739869da.js';
 import '../../directive-2bb7789e.js';
 import '../../index-5e194caf.js';
+
+const style = ":host {\n  display: inline-flex;\n  width: 100%;\n}\n\n:host([width]) {\n  width: inherit;\n}";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+let LuksoCard = class extends TailwindStyledElement(style) {
+  constructor() {
+    super(...arguments);
+    this.variant = "basic";
+    this.backgroundUrl = "";
+    this.profileUrl = "";
+    this.profileAddress = "";
+    this.width = void 0;
+    this.height = void 0;
+    this.customClass = "";
+    this.headerClass = "";
+    this.size = "medium";
+    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`;
+  }
+  backgroundImageOrGradient() {
+    const opacity = "80";
+    const gradientStart = `#${this.profileAddress.slice(2, 8)}${opacity}`;
+    const gradientEnd = `#${this.profileAddress.slice(36, 42)}${opacity}`;
+    if (this.backgroundUrl) {
+      return `url(${this.backgroundUrl})`;
+    }
+    return `linear-gradient(90deg, ${gradientStart}, ${gradientEnd})`;
+  }
+  basicTemplate() {
+    return x`
+      <div
+        data-testid="card"
+        style=${customStyleMap({
+      [`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
+    })}
+      >
+        <slot name="content"></slot>
+      </div>
+    `;
+  }
+  withHeaderTemplate() {
+    return x`
+      <div
+        data-testid="card"
+        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>
+        </div>
+        <div class="bg-neutral-100 shadow-neutral-above-shadow-1xl rounded-24">
+          <slot name="content"></slot>
+        </div>
+      </div>
+    `;
+  }
+  profileTemplate() {
+    return x`
+      <div
+        data-testid="card"
+        style=${customStyleMap({
+      [`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
+    })}
+      >
+        <div
+          style=${o({
+      backgroundImage: this.backgroundImageOrGradient()
+    })}
+          class=${cn(
+      "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="h-full full rounded-[24px_24px_0_0] bg-neutral-20/10 absolute"
+          ></div>`}
+          <div>
+            <slot name="header"></slot>
+          </div>
+        </div>
+        <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="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>
+        </div>
+      </div>
+    `;
+  }
+  profile2Template() {
+    return x`
+      <div
+        data-testid="card"
+        style=${customStyleMap({
+      [`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
+    })}
+      >
+        <div
+          style=${o({
+      backgroundImage: this.backgroundImageOrGradient()
+    })}
+          class=${cn(
+      "min-h-[129px] -mb-6 bg-center bg-cover rounded-[24px_24px_0_0] relative bg-neutral-100",
+      this.headerClass
+    )}
+        >
+          ${this.backgroundUrl && x`<div
+            class="min-h-full min-w-full rounded-[24px_24px_0_0] bg-neutral-10/10 absolute"
+          ></div>`}
+          <div>
+            <slot name="header"></slot>
+          </div>
+        </div>
+        <div class="grid grid-rows-[max-content,auto]">
+          <div class="bg-neutral-100 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="bg-neutral-100 rounded-[103px_103px_0_0] w-[96px] h-[48px]"
+              ></div>
+            </div>
+            <slot name="content"></slot>
+          </div>
+          <div
+            class="bg-neutral-97 rounded-b-24 shadow-neutral-inner-shadow-top"
+          >
+            <slot name="bottom"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  heroTemplate() {
+    return x`
+      <div
+        data-testid="card"
+        style=${customStyleMap({
+      [`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
+    })}
+      >
+        <div
+          style=${o({
+      backgroundImage: `url(${this.backgroundUrl})`
+    })}
+          class="h-full w-full -mb-6 bg-center bg-cover rounded-24 relative"
+        >
+          ${this.backgroundUrl && x`<div
+            class="h-full w-full rounded-24 bg-neutral-20/10 absolute"
+          ></div>`}
+          <div
+            class="h-full w-full flex flex-col items-center justify-center  absolute"
+          >
+            <slot name="content"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  dappTemplate() {
+    return x`
+      <div
+        data-testid="card"
+        style=${customStyleMap({
+      [`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
+    })}
+      >
+        <div
+          style=${o({
+      backgroundImage: this.backgroundImageOrGradient()
+    })}
+          class=${cn(
+      "min-h-[240px] bg-center bg-cover rounded-[24px_24px_0_0] relative",
+      this.headerClass
+    )}
+        >
+          <div>
+            <slot name="header"></slot>
+          </div>
+        </div>
+        <div
+          class="bg-neutral-100 shadow-neutral-above-shadow-1xl rounded-[0_0_24px_24px] relative"
+        >
+          <slot name="content"></slot>
+        </div>
+      </div>
+    `;
+  }
+  render() {
+    switch (this.variant) {
+      case "with-header":
+        return this.withHeaderTemplate();
+      case "profile":
+        return this.profileTemplate();
+      case "profile-2":
+        return this.profile2Template();
+      case "hero":
+        return this.heroTemplate();
+      case "dapp":
+        return this.dappTemplate();
+      default:
+        return this.basicTemplate();
+    }
+  }
+};
+__decorateClass([
+  n({ type: String })
+], LuksoCard.prototype, "variant", 2);
+__decorateClass([
+  n({ type: String, attribute: "background-url" })
+], LuksoCard.prototype, "backgroundUrl", 2);
+__decorateClass([
+  n({ type: String, attribute: "profile-url" })
+], LuksoCard.prototype, "profileUrl", 2);
+__decorateClass([
+  n({ type: String, attribute: "profile-address" })
+], LuksoCard.prototype, "profileAddress", 2);
+__decorateClass([
+  n({ type: Number })
+], LuksoCard.prototype, "width", 2);
+__decorateClass([
+  n({ type: Number })
+], LuksoCard.prototype, "height", 2);
+__decorateClass([
+  n({ type: String, attribute: "custom-class" })
+], LuksoCard.prototype, "customClass", 2);
+__decorateClass([
+  n({ type: String, attribute: "header-class" })
+], LuksoCard.prototype, "headerClass", 2);
+__decorateClass([
+  n({ type: String })
+], LuksoCard.prototype, "size", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "is-hoverable" })
+], LuksoCard.prototype, "isHoverable", 2);
+LuksoCard = __decorateClass([
+  e("lukso-card")
+], LuksoCard);
+
+export { LuksoCard };

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-997f3f0e.cjs');
+const shared_tailwindElement_index = require('../../index-f426e548.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-04d11436.js';
+import { a as TailwindElement, x, A } from '../../index-35ca0b42.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-997f3f0e.cjs');
+const shared_tailwindElement_index = require('../../index-f426e548.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-04d11436.js';
+import { a as TailwindElement, x } from '../../index-35ca0b42.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-997f3f0e.cjs');
+const shared_tailwindElement_index = require('../../index-f426e548.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
-const styleMap = require('../../style-map-671a0511.cjs');
+const styleMap = require('../../style-map-1175c018.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-04d11436.js';
+import { x, T as TailwindStyledElement } from '../../index-35ca0b42.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
-import { o } from '../../style-map-5be28c06.js';
+import { o } from '../../style-map-17f918a2.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-997f3f0e.cjs');
+const shared_tailwindElement_index = require('../../index-f426e548.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-04d11436.js';
+import { a as TailwindElement, x, A } from '../../index-35ca0b42.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-modal/index.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-997f3f0e.cjs');
+const shared_tailwindElement_index = require('../../index-f426e548.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
 const index = require('../../index-e9668573.cjs');
 require('../../directive-8278ab14.cjs');

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

@@ -1,4 +1,4 @@
-import { a as TailwindElement, x } from '../../index-04d11436.js';
+import { a as TailwindElement, x } from '../../index-35ca0b42.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
 import { c as customClassMap } from '../../index-5e194caf.js';
 import '../../directive-2bb7789e.js';

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

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-997f3f0e.cjs');
+const shared_tailwindElement_index = require('../../index-f426e548.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
 const state = require('../../state-f73a8b4f.cjs');
 const index = require('../../index-e9668573.cjs');
 require('../lukso-icon/index.cjs');
 require('../lukso-tag/index.cjs');
 require('../../directive-8278ab14.cjs');
-require('../../style-map-671a0511.cjs');
+require('../../style-map-1175c018.cjs');
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

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

@@ -1,11 +1,11 @@
-import { a as TailwindElement, x } from '../../index-04d11436.js';
+import { a as TailwindElement, x } from '../../index-35ca0b42.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
 import { t } from '../../state-0a779257.js';
 import { c as customClassMap } from '../../index-5e194caf.js';
 import '../lukso-icon/index.js';
 import '../lukso-tag/index.js';
 import '../../directive-2bb7789e.js';
-import '../../style-map-5be28c06.js';
+import '../../style-map-17f918a2.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-997f3f0e.cjs');
+const shared_tailwindElement_index = require('../../index-f426e548.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
-const styleMap = require('../../style-map-671a0511.cjs');
+const styleMap = require('../../style-map-1175c018.cjs');
 const index = require('../../index-e9668573.cjs');
 require('../../directive-8278ab14.cjs');
 

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

@@ -1,6 +1,6 @@
-import { a as TailwindElement, x } from '../../index-04d11436.js';
+import { a as TailwindElement, x } from '../../index-35ca0b42.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
-import { o } from '../../style-map-5be28c06.js';
+import { o } from '../../style-map-17f918a2.js';
 import { c as customClassMap } from '../../index-5e194caf.js';
 import '../../directive-2bb7789e.js';
 

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

@@ -2,10 +2,11 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-997f3f0e.cjs');
+const shared_tailwindElement_index = require('../../index-f426e548.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
-const styleMap = require('../../style-map-671a0511.cjs');
-const index = require('../../index-e9668573.cjs');
+const styleMap = require('../../style-map-1175c018.cjs');
+require('../../tailwind-config.cjs');
+const cn = require('../../cn-312c6e88.cjs');
 require('../../directive-8278ab14.cjs');
 
 var __defProp = Object.defineProperty;
@@ -26,6 +27,7 @@ exports.LuksoProgress = class LuksoProgress extends shared_tailwindElement_index
     this.max = 100;
     this.current = 0;
     this.variant = "success";
+    this.height = 16;
   }
   progressWidth() {
     return this.current / this.max * 100;
@@ -34,22 +36,28 @@ exports.LuksoProgress = class LuksoProgress extends shared_tailwindElement_index
     return shared_tailwindElement_index.x`
       <div
         data-testid="progress"
-        class="w-full h-[12px] rounded-24 bg-neutral-95 relative"
+        style=${styleMap.o({
+      height: this.height > 16 ? `${this.height}px` : "16px"
+    })}
+        class=${cn.cn("w-full rounded-24 bg-neutral-95 relative")}
       >
         <div
-          class="h-[12px] rounded-s-24 rounded-e-24  transition-all w-[1%] ${index.customClassMap(
+          style=${styleMap.o({
+      width: `${this.progressWidth()}%`
+    })}
+          class=${cn.cn(
+      "rounded-s-24 h-full rounded-e-24  transition-all w-[1%]",
       {
         "bg-green-85": !!this.variant || this.variant === "success",
         "bg-red-85": this.variant === "error",
         "bg-yellow-85": this.variant === "warning"
       }
-    )}"
-          style=${styleMap.o({
-      width: `${this.progressWidth()}%`
-    })}
+    )}
         ></div>
         <div
-          class="shadow-neutral-inner-shadow absolute w-full top-0 h-[12px] rounded-24"
+          class=${cn.cn(
+      "shadow-neutral-inner-shadow h-full absolute w-full top-0 rounded-24"
+    )}
         ></div>
       </div>
     `;
@@ -67,6 +75,9 @@ __decorateClass([
 __decorateClass([
   queryAssignedElements.n({ type: String })
 ], exports.LuksoProgress.prototype, "variant", 2);
+__decorateClass([
+  queryAssignedElements.n({ type: Number })
+], exports.LuksoProgress.prototype, "height", 2);
 exports.LuksoProgress = __decorateClass([
   queryAssignedElements.e("lukso-progress")
 ], exports.LuksoProgress);

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

@@ -5,6 +5,7 @@ export declare class LuksoProgress extends TailwindElement {
     max: number;
     current: number;
     variant: ProgressVariant;
+    height: number | undefined;
     private progressWidth;
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-progress/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAG3D,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAA;AAE7D,qBACa,aAAc,SAAQ,eAAe;IAEhD,GAAG,SAAI;IAGP,GAAG,SAAM;IAGT,OAAO,SAAI;IAGX,OAAO,EAAE,eAAe,CAAY;IAEpC,OAAO,CAAC,aAAa;IAIrB,MAAM;CAwBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAA;KAChC;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-progress/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAG3D,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAA;AAE7D,qBACa,aAAc,SAAQ,eAAe;IAEhD,GAAG,SAAI;IAGP,GAAG,SAAM;IAGT,OAAO,SAAI;IAGX,OAAO,EAAE,eAAe,CAAY;IAGpC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAK;IAE/B,OAAO,CAAC,aAAa;IAIrB,MAAM;CA8BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAA;KAChC;CACF"}

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

@@ -1,7 +1,8 @@
-import { a as TailwindElement, x } from '../../index-04d11436.js';
+import { a as TailwindElement, x } from '../../index-35ca0b42.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
-import { o } from '../../style-map-5be28c06.js';
-import { c as customClassMap } from '../../index-5e194caf.js';
+import { o } from '../../style-map-17f918a2.js';
+import '../../tailwind-config.js';
+import { c as cn } from '../../cn-1594f5ba.js';
 import '../../directive-2bb7789e.js';
 
 var __defProp = Object.defineProperty;
@@ -22,6 +23,7 @@ let LuksoProgress = class extends TailwindElement {
     this.max = 100;
     this.current = 0;
     this.variant = "success";
+    this.height = 16;
   }
   progressWidth() {
     return this.current / this.max * 100;
@@ -30,22 +32,28 @@ let LuksoProgress = class extends TailwindElement {
     return x`
       <div
         data-testid="progress"
-        class="w-full h-[12px] rounded-24 bg-neutral-95 relative"
+        style=${o({
+      height: this.height > 16 ? `${this.height}px` : "16px"
+    })}
+        class=${cn("w-full rounded-24 bg-neutral-95 relative")}
       >
         <div
-          class="h-[12px] rounded-s-24 rounded-e-24  transition-all w-[1%] ${customClassMap(
+          style=${o({
+      width: `${this.progressWidth()}%`
+    })}
+          class=${cn(
+      "rounded-s-24 h-full rounded-e-24  transition-all w-[1%]",
       {
         "bg-green-85": !!this.variant || this.variant === "success",
         "bg-red-85": this.variant === "error",
         "bg-yellow-85": this.variant === "warning"
       }
-    )}"
-          style=${o({
-      width: `${this.progressWidth()}%`
-    })}
+    )}
         ></div>
         <div
-          class="shadow-neutral-inner-shadow absolute w-full top-0 h-[12px] rounded-24"
+          class=${cn(
+      "shadow-neutral-inner-shadow h-full absolute w-full top-0 rounded-24"
+    )}
         ></div>
       </div>
     `;
@@ -63,6 +71,9 @@ __decorateClass([
 __decorateClass([
   n({ type: String })
 ], LuksoProgress.prototype, "variant", 2);
+__decorateClass([
+  n({ type: Number })
+], LuksoProgress.prototype, "height", 2);
 LuksoProgress = __decorateClass([
   e("lukso-progress")
 ], LuksoProgress);

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

@@ -1 +1 @@
-{"version":3,"file":"lukso-progress.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-progress/lukso-progress.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAEhD,OAAO,SAAS,CAAA;AAEhB,kEAAkE;AAClE,QAAA,MAAM,IAAI,EAAE,IA6CX,CAAA;AAED,eAAe,IAAI,CAAA;AAUnB,yCAAyC;AACzC,eAAO,MAAM,eAAe,KAAoB,CAAA;AAEhD,uCAAuC;AACvC,eAAO,MAAM,aAAa,KAAoB,CAAA"}
+{"version":3,"file":"lukso-progress.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-progress/lukso-progress.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAEhD,OAAO,SAAS,CAAA;AAEhB,kEAAkE;AAClE,QAAA,MAAM,IAAI,EAAE,IAqDX,CAAA;AAED,eAAe,IAAI,CAAA;AAWnB,yCAAyC;AACzC,eAAO,MAAM,eAAe,KAAoB,CAAA;AAEhD,uCAAuC;AACvC,eAAO,MAAM,aAAa,KAAoB,CAAA"}

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-997f3f0e.cjs');
+const shared_tailwindElement_index = require('../../index-f426e548.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
 const directive = require('../../directive-8278ab14.cjs');
 

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

@@ -1,4 +1,4 @@
-import { A, b as T, a as TailwindElement, x } from '../../index-04d11436.js';
+import { A, b as T, a as TailwindElement, x } from '../../index-35ca0b42.js';
 import { n, e as e$2 } from '../../query-assigned-elements-5d94572f.js';
 import { i, t, e as e$1 } from '../../directive-2bb7789e.js';