@lukso/web-components 1.66.1 → 1.68.0

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

@@ -1,7 +1,8 @@
-import { T as TailwindStyledElement, x } from '../../index-3527fb14.js';
+import { T as TailwindStyledElement, x } from '../../index-814bcac2.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 { i as ie } from '../../index-faa8c4ae.js';
+import { o } from '../../style-map-21f59b89.js';
 import '../../directive-2bb7789e.js';
 
 var top = 'top';
@@ -3469,9 +3470,17 @@ let LuksoTooltip = class extends TailwindStyledElement(style) {
     this.copyText = "";
     this.copyValue = "";
     this.offset = 10;
+    this.options = "";
     this.showCopy = false;
-    this.defaultTooltipStyles = "bg-neutral-20 p-4 hidden";
+    this.optionsParsed = [];
     this.tooltipInstance = void 0;
+    this.tooltipStyles = ie({
+      slots: {
+        tooltip: "hidden",
+        trigger: "cursor-pointer flex flex-col items-center",
+        options: "rounded-4 hover:bg-neutral-95"
+      }
+    });
   }
   hideOnClickCheck() {
     if (this.hideOnClick === "toggle") {
@@ -3491,7 +3500,7 @@ let LuksoTooltip = class extends TailwindStyledElement(style) {
       this.tooltipInstance.destroy();
       this.tooltipInstance = void 0;
     }
-    if (!this.text) {
+    if (!this.text && !this.options) {
       return;
     }
     this.tooltipInstance = tippy(trigger, {
@@ -3523,25 +3532,44 @@ let LuksoTooltip = class extends TailwindStyledElement(style) {
     await this.updateComplete;
     if (changedProperties.has("show") && this.trigger === "manual") {
       if (this.show) {
-        !!!this.tooltipInstance && this.initTooltip();
+        !this.tooltipInstance && this.initTooltip();
         this.tooltipInstance.show();
       } else {
         this.tooltipInstance?.hide();
       }
       return;
     }
+    if (changedProperties.has("options") && !!this.options) {
+      try {
+        this.optionsParsed = JSON.parse(this.options);
+      } catch (error) {
+        console.warn("Could not parse options", error);
+      }
+    }
     this.initTooltip();
   }
+  optionsTemplate() {
+    const { options } = this.tooltipStyles();
+    return x`<ul>
+      ${Object.entries(this.optionsParsed)?.map(
+      (option) => x`<li
+            class=${options()}
+            style=${o({
+        padding: "4px 8px",
+        cursor: "pointer"
+      })}
+            onClick="navigator.clipboard.writeText('${option[1].value}')"
+          >
+            ${option[1].text}
+          </li>`
+    )}
+    </ul>`;
+  }
   render() {
+    const { tooltip, trigger } = this.tooltipStyles();
     return x`
-      <div
-        id="tooltip"
-        role="tooltip"
-        class=${customClassMap({
-      [this.defaultTooltipStyles]: true
-    })}
-      >
-        ${this.text}
+      <div id="tooltip" role="tooltip" class=${tooltip()}>
+        ${this.options ? this.optionsTemplate() : this.text}
       </div>
       ${this.isClipboardCopy ? x`<lukso-tooltip
             variant=${this.variant}
@@ -3553,18 +3581,10 @@ let LuksoTooltip = class extends TailwindStyledElement(style) {
             ?show=${this.showCopy ? true : void 0}
             text=${this.copyText}
           >
-            <div
-              id="trigger"
-              class="cursor-pointer flex flex-col items-center"
-              @click=${this.handleClick}
-            >
+            <div id="trigger" class=${trigger()} @click=${this.handleClick}>
               <slot></slot>
             </div>
-          </lukso-tooltip>` : x`<div
-            id="trigger"
-            class="cursor-pointer flex flex-col items-center"
-            @click=${this.handleClick}
-          >
+          </lukso-tooltip>` : x`<div id="trigger" class=${trigger()} @click=${this.handleClick}>
             <slot></slot>
           </div>`}
     `;
@@ -3606,9 +3626,15 @@ __decorateClass([
 __decorateClass([
   n({ type: Number })
 ], LuksoTooltip.prototype, "offset", 2);
+__decorateClass([
+  n({ type: String })
+], LuksoTooltip.prototype, "options", 2);
 __decorateClass([
   t()
 ], LuksoTooltip.prototype, "showCopy", 2);
+__decorateClass([
+  t()
+], LuksoTooltip.prototype, "optionsParsed", 2);
 LuksoTooltip = __decorateClass([
   e("lukso-tooltip")
 ], LuksoTooltip);

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

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/web-components';
+import type { Meta } from '@storybook/web-components';
 /**  Documentation and examples of `lukso-tooltip` component. */
 declare const meta: Meta;
 export default meta;
@@ -24,4 +24,6 @@ export declare const PlacementBottom: any;
 export declare const Offset: any;
 /** Tooltip can work as clipboard copy component. For that wou need to enable `is-clipboard-copy` and set `copy-text` attribute..  */
 export declare const ClipboardCopy: any;
+/** Tooltip with `options` (copied to clipboard).  */
+export declare const OptionsTooltip: any;
 //# sourceMappingURL=lukso-tooltip.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"lukso-tooltip.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-tooltip/lukso-tooltip.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAEhD,OAAO,SAAS,CAAA;AAChB,OAAO,uBAAuB,CAAA;AAE9B,gEAAgE;AAChE,QAAA,MAAM,IAAI,EAAE,IA6KX,CAAA;AAED,eAAe,IAAI,CAAA;AAqCnB,8CAA8C;AAC9C,eAAO,MAAM,cAAc,KAA2B,CAAA;AAMtD,4CAA4C;AAC5C,eAAO,MAAM,YAAY,KAA2B,CAAA;AAOpD,sEAAsE;AACtE,eAAO,MAAM,QAAQ,KAA2B,CAAA;AAUhD,gCAAgC;AAChC,eAAO,MAAM,SAAS,KAA2B,CAAA;AASjD,mCAAmC;AACnC,eAAO,MAAM,YAAY,KAA2B,CAAA;AASpD,qCAAqC;AACrC,eAAO,MAAM,cAAc,KAA2B,CAAA;AAStD,oCAAoC;AACpC,eAAO,MAAM,aAAa,KAA2B,CAAA;AASrD,oEAAoE;AACpE,eAAO,MAAM,cAAc,KAA2B,CAAA;AAOtD,eAAO,MAAM,aAAa,KAA2B,CAAA;AAQrD,eAAO,MAAM,eAAe,KAA2B,CAAA;AASvD,8DAA8D;AAC9D,eAAO,MAAM,MAAM,KAA2B,CAAA;AAS9C,qIAAqI;AACrI,eAAO,MAAM,aAAa,KAA2B,CAAA"}
+{"version":3,"file":"lukso-tooltip.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-tooltip/lukso-tooltip.stories.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,SAAS,CAAA;AAChB,OAAO,uBAAuB,CAAA;AAE9B,gEAAgE;AAChE,QAAA,MAAM,IAAI,EAAE,IAmLX,CAAA;AAED,eAAe,IAAI,CAAA;AAuCnB,8CAA8C;AAC9C,eAAO,MAAM,cAAc,KAA2B,CAAA;AAMtD,4CAA4C;AAC5C,eAAO,MAAM,YAAY,KAA2B,CAAA;AAOpD,sEAAsE;AACtE,eAAO,MAAM,QAAQ,KAA2B,CAAA;AAUhD,gCAAgC;AAChC,eAAO,MAAM,SAAS,KAA2B,CAAA;AASjD,mCAAmC;AACnC,eAAO,MAAM,YAAY,KAA2B,CAAA;AASpD,qCAAqC;AACrC,eAAO,MAAM,cAAc,KAA2B,CAAA;AAStD,oCAAoC;AACpC,eAAO,MAAM,aAAa,KAA2B,CAAA;AASrD,oEAAoE;AACpE,eAAO,MAAM,cAAc,KAA2B,CAAA;AAOtD,eAAO,MAAM,aAAa,KAA2B,CAAA;AAQrD,eAAO,MAAM,eAAe,KAA2B,CAAA;AASvD,8DAA8D;AAC9D,eAAO,MAAM,MAAM,KAA2B,CAAA;AAS9C,qIAAqI;AACrI,eAAO,MAAM,aAAa,KAA2B,CAAA;AAUrD,qDAAqD;AACrD,eAAO,MAAM,cAAc,KAA2B,CAAA"}

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-688c3040.cjs');
+const shared_tailwindElement_index = require('../../index-5cc4a839.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
 const index = require('../../index-e9668573.cjs');
-const index$1 = require('../../index-98e8e0d5.cjs');
+const index$1 = require('../../index-0e131d65.cjs');
 require('../../directive-8278ab14.cjs');
 
 const sliceAddress = (address, startSliceBy = 6, endSliceBy) => {

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

@@ -1,7 +1,7 @@
-import { T as TailwindStyledElement, x, A } from '../../index-3527fb14.js';
+import { T as TailwindStyledElement, x, A } from '../../index-814bcac2.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
 import { c as customClassMap } from '../../index-5e194caf.js';
-import { c as customStyleMap } from '../../index-1765cfe1.js';
+import { c as customStyleMap } from '../../index-f171e7da.js';
 import '../../directive-2bb7789e.js';
 
 const sliceAddress = (address, startSliceBy = 6, endSliceBy) => {

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-688c3040.cjs');
+const shared_tailwindElement_index = require('../../index-5cc4a839.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
 const directive = require('../../directive-8278ab14.cjs');
-const index = require('../../index-e9668573.cjs');
+const index = require('../../index-66211c85.cjs');
 
 /**
  * @license
@@ -38,49 +38,72 @@ exports.LuksoWizard = class LuksoWizard extends shared_tailwindElement_index.Tai
     super(...arguments);
     this.steps = "";
     this.activeStep = 1;
-    this.isFullWidth = false;
-    this.activeStepStyles = `[&_.lukso-wizard-circle-inner]:border-2 [&_.lukso-wizard-circle-inner]:border-purple-51`;
-    this.completedStepStyles = `[&>.lukso-wizard-circle]:after:bg-purple-51
-    [&_.lukso-wizard-circle-inner]:bg-gradient-to-t
-    [&_.lukso-wizard-circle-inner]:from-gradient-3-start
-    [&_.lukso-wizard-circle-inner]:to-gradient-3-end`;
-  }
-  stepTemplate(step, index$1) {
-    return shared_tailwindElement_index.x`<li
-      class="inline-flex flex-col items-center justify-end first:-ml-12 last:-mr-12 relative
-      [&>.lukso-wizard-circle]:after:last:hidden [&>.lukso-wizard-circle]:before:last:hidden ${index.customClassMap(
-      {
-        [this.completedStepStyles]: index$1 + 1 < this.activeStep,
-        [this.activeStepStyles]: index$1 + 1 === this.activeStep,
-        ["w-full"]: this.isFullWidth,
-        ["w-[121px]"]: !this.isFullWidth
+    this.size = "medium";
+    this.stepStyles = index.ie({
+      slots: {
+        base: `inline-flex flex-col items-center justify-end first:-ml-12 last:-mr-12 relative
+    [&>.lukso-wizard-circle]:after:last:hidden [&>.lukso-wizard-circle]:before:last:hidden`,
+        circle: `lukso-wizard-circle bg-neutral-90 w-4 h-4 rounded-full shadow-wizard-step mt-2 flex items-center
+    border-[1px] border-solid border-[rgba(255,255,255,0.8)]
+    after:block after:absolute after:bottom-[7px] after:ml-[15px] after:h-[2px]
+    after:content:'' after:bg-transparent after:transition-width after:duration-300
+    before:block before:absolute before:bottom-[7px] before:ml-[15px] before:h-[2px]
+    before:content:'' before:bg-neutral-90 before:shadow-wizard-line before:w-[calc(100%-16px)]`,
+        innerCircle: "lukso-wizard-circle-inner rounded-full w-[10px] h-[10px] ml-[2px]"
+      },
+      variants: {
+        size: {
+          small: {
+            base: "w-[92px]"
+          },
+          medium: {
+            base: "w-[121px]"
+          },
+          large: {
+            base: "w-[180px]"
+          },
+          ["full-width"]: {
+            base: "w-full"
+          }
+        },
+        completed: {
+          true: {
+            base: `[&>.lukso-wizard-circle]:after:bg-purple-51
+          [&_.lukso-wizard-circle-inner]:bg-gradient-to-t
+          [&_.lukso-wizard-circle-inner]:from-gradient-3-start
+          [&_.lukso-wizard-circle-inner]:to-gradient-3-end`,
+            circle: "completed"
+          }
+        },
+        current: {
+          true: {
+            circle: "current"
+          }
+        },
+        active: {
+          true: {
+            base: `[&_.lukso-wizard-circle-inner]:border-2 [&_.lukso-wizard-circle-inner]:border-purple-51`,
+            innerCircle: "[&_.lukso-wizard-circle-inner]:border-2 [&_.lukso-wizard-circle-inner]:border-purple-51"
+          }
+        }
       }
-    )}"
-    >
+    });
+  }
+  stepTemplate(step, index) {
+    const { base, circle, innerCircle } = this.stepStyles({
+      completed: index + 1 < this.activeStep,
+      active: index + 1 === this.activeStep,
+      current: index === this.activeStep - 2,
+      size: this.size
+    });
+    return shared_tailwindElement_index.x`<li class="${base()}">
       <div
         class="text-purple-51 nav-apax-8-medium-uppercase whitespace-pre-line flex text-center break-words uppercase"
       >
         ${step.label}
       </div>
-      <div
-        class="lukso-wizard-circle bg-neutral-90 w-4 h-4 rounded-full shadow-wizard-step mt-2 flex items-center
-          border-[1px] border-solid border-[rgba(255,255,255,0.8)]
-          after:block after:absolute after:bottom-[7px] after:ml-[15px] after:h-[2px]
-          after:content:'' after:bg-transparent after:transition-width after:duration-300
-          before:block before:absolute before:bottom-[7px] before:ml-[15px] before:h-[2px]
-          before:content:'' before:bg-neutral-90 before:shadow-wizard-line before:w-[calc(100%-16px)]
-          ${index.customClassMap({
-      ["completed"]: index$1 + 1 < this.activeStep,
-      ["current"]: index$1 === this.activeStep - 2
-    })}"
-      >
-        <div
-          class="lukso-wizard-circle-inner rounded-full w-[10px] h-[10px] ml-[2px] ${index.customClassMap(
-      {
-        [this.activeStepStyles]: index$1 + 1 === this.activeStep
-      }
-    )}"
-        ></div>
+      <div class="${circle()}">
+        <div class="${innerCircle()}"></div>
       </div>
     </li>`;
   }
@@ -110,8 +133,8 @@ __decorateClass([
   queryAssignedElements.n({ type: Number, attribute: "active-step" })
 ], exports.LuksoWizard.prototype, "activeStep", 2);
 __decorateClass([
-  queryAssignedElements.n({ type: Boolean, attribute: "is-full-width" })
-], exports.LuksoWizard.prototype, "isFullWidth", 2);
+  queryAssignedElements.n({ type: String })
+], exports.LuksoWizard.prototype, "size", 2);
 exports.LuksoWizard = __decorateClass([
   queryAssignedElements.e("lukso-wizard")
 ], exports.LuksoWizard);

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

@@ -1,13 +1,13 @@
 export type WizardStep = {
     label: string;
 };
+export type WizardSize = 'small' | 'medium' | 'large' | 'full-width';
 declare const LuksoWizard_base: typeof import("lit").LitElement;
 export declare class LuksoWizard extends LuksoWizard_base {
     steps: string;
     activeStep: number;
-    isFullWidth: boolean;
-    private activeStepStyles;
-    private completedStepStyles;
+    size: WizardSize;
+    private stepStyles;
     stepTemplate(step: WizardStep, index: number): import("lit-html").TemplateResult<1>;
     render(): import("lit-html").TemplateResult<1>;
     updated(): void;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-wizard/index.ts"],"names":[],"mappings":"AAQA,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;;AAED,qBACa,WAAY,SAAQ,gBAA4B;IAE3D,KAAK,SAAK;IAGV,UAAU,SAAI;IAGd,WAAW,UAAQ;IAEnB,OAAO,CAAC,gBAAgB,CAA4F;IAEpH,OAAO,CAAC,mBAAmB,CAGwB;IAEnD,YAAY,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM;IAwC5C,MAAM;IAcN,OAAO;CAOR;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-wizard/index.ts"],"names":[],"mappings":"AAQA,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,YAAY,CAAA;;AAEpE,qBACa,WAAY,SAAQ,gBAA4B;IAE3D,KAAK,SAAK;IAGV,UAAU,SAAI;IAGd,IAAI,EAAE,UAAU,CAAW;IAE3B,OAAO,CAAC,UAAU,CAkDhB;IAEF,YAAY,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM;IAmB5C,MAAM;IAcN,OAAO;CAOR;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}

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

@@ -1,7 +1,7 @@
-import { j, b as T, T as TailwindStyledElement, x } from '../../index-3527fb14.js';
+import { j, b as T, T as TailwindStyledElement, x } from '../../index-814bcac2.js';
 import { n, e as e$1 } from '../../query-assigned-elements-5d94572f.js';
 import { e, i, t } from '../../directive-2bb7789e.js';
-import { c as customClassMap } from '../../index-5e194caf.js';
+import { i as ie } from '../../index-faa8c4ae.js';
 
 /**
  * @license
@@ -34,49 +34,72 @@ let LuksoWizard = class extends TailwindStyledElement(style) {
     super(...arguments);
     this.steps = "";
     this.activeStep = 1;
-    this.isFullWidth = false;
-    this.activeStepStyles = `[&_.lukso-wizard-circle-inner]:border-2 [&_.lukso-wizard-circle-inner]:border-purple-51`;
-    this.completedStepStyles = `[&>.lukso-wizard-circle]:after:bg-purple-51
-    [&_.lukso-wizard-circle-inner]:bg-gradient-to-t
-    [&_.lukso-wizard-circle-inner]:from-gradient-3-start
-    [&_.lukso-wizard-circle-inner]:to-gradient-3-end`;
+    this.size = "medium";
+    this.stepStyles = ie({
+      slots: {
+        base: `inline-flex flex-col items-center justify-end first:-ml-12 last:-mr-12 relative
+    [&>.lukso-wizard-circle]:after:last:hidden [&>.lukso-wizard-circle]:before:last:hidden`,
+        circle: `lukso-wizard-circle bg-neutral-90 w-4 h-4 rounded-full shadow-wizard-step mt-2 flex items-center
+    border-[1px] border-solid border-[rgba(255,255,255,0.8)]
+    after:block after:absolute after:bottom-[7px] after:ml-[15px] after:h-[2px]
+    after:content:'' after:bg-transparent after:transition-width after:duration-300
+    before:block before:absolute before:bottom-[7px] before:ml-[15px] before:h-[2px]
+    before:content:'' before:bg-neutral-90 before:shadow-wizard-line before:w-[calc(100%-16px)]`,
+        innerCircle: "lukso-wizard-circle-inner rounded-full w-[10px] h-[10px] ml-[2px]"
+      },
+      variants: {
+        size: {
+          small: {
+            base: "w-[92px]"
+          },
+          medium: {
+            base: "w-[121px]"
+          },
+          large: {
+            base: "w-[180px]"
+          },
+          ["full-width"]: {
+            base: "w-full"
+          }
+        },
+        completed: {
+          true: {
+            base: `[&>.lukso-wizard-circle]:after:bg-purple-51
+          [&_.lukso-wizard-circle-inner]:bg-gradient-to-t
+          [&_.lukso-wizard-circle-inner]:from-gradient-3-start
+          [&_.lukso-wizard-circle-inner]:to-gradient-3-end`,
+            circle: "completed"
+          }
+        },
+        current: {
+          true: {
+            circle: "current"
+          }
+        },
+        active: {
+          true: {
+            base: `[&_.lukso-wizard-circle-inner]:border-2 [&_.lukso-wizard-circle-inner]:border-purple-51`,
+            innerCircle: "[&_.lukso-wizard-circle-inner]:border-2 [&_.lukso-wizard-circle-inner]:border-purple-51"
+          }
+        }
+      }
+    });
   }
   stepTemplate(step, index) {
-    return x`<li
-      class="inline-flex flex-col items-center justify-end first:-ml-12 last:-mr-12 relative
-      [&>.lukso-wizard-circle]:after:last:hidden [&>.lukso-wizard-circle]:before:last:hidden ${customClassMap(
-      {
-        [this.completedStepStyles]: index + 1 < this.activeStep,
-        [this.activeStepStyles]: index + 1 === this.activeStep,
-        ["w-full"]: this.isFullWidth,
-        ["w-[121px]"]: !this.isFullWidth
-      }
-    )}"
-    >
+    const { base, circle, innerCircle } = this.stepStyles({
+      completed: index + 1 < this.activeStep,
+      active: index + 1 === this.activeStep,
+      current: index === this.activeStep - 2,
+      size: this.size
+    });
+    return x`<li class="${base()}">
       <div
         class="text-purple-51 nav-apax-8-medium-uppercase whitespace-pre-line flex text-center break-words uppercase"
       >
         ${step.label}
       </div>
-      <div
-        class="lukso-wizard-circle bg-neutral-90 w-4 h-4 rounded-full shadow-wizard-step mt-2 flex items-center
-          border-[1px] border-solid border-[rgba(255,255,255,0.8)]
-          after:block after:absolute after:bottom-[7px] after:ml-[15px] after:h-[2px]
-          after:content:'' after:bg-transparent after:transition-width after:duration-300
-          before:block before:absolute before:bottom-[7px] before:ml-[15px] before:h-[2px]
-          before:content:'' before:bg-neutral-90 before:shadow-wizard-line before:w-[calc(100%-16px)]
-          ${customClassMap({
-      ["completed"]: index + 1 < this.activeStep,
-      ["current"]: index === this.activeStep - 2
-    })}"
-      >
-        <div
-          class="lukso-wizard-circle-inner rounded-full w-[10px] h-[10px] ml-[2px] ${customClassMap(
-      {
-        [this.activeStepStyles]: index + 1 === this.activeStep
-      }
-    )}"
-        ></div>
+      <div class="${circle()}">
+        <div class="${innerCircle()}"></div>
       </div>
     </li>`;
   }
@@ -106,8 +129,8 @@ __decorateClass([
   n({ type: Number, attribute: "active-step" })
 ], LuksoWizard.prototype, "activeStep", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-full-width" })
-], LuksoWizard.prototype, "isFullWidth", 2);
+  n({ type: String })
+], LuksoWizard.prototype, "size", 2);
 LuksoWizard = __decorateClass([
   e$1("lukso-wizard")
 ], LuksoWizard);

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

@@ -5,6 +5,4 @@ import { Meta } from '@storybook/web-components';
 declare const meta: Meta;
 export default meta;
 export declare const BasicWizard: any;
-/** If you need button to take full width of the parent element add `is-full-width` property. */
-export declare const FullWidthWizard: any;
 //# sourceMappingURL=lukso-wizard.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"lukso-wizard.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-wizard/lukso-wizard.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAEhD,OAAO,UAAU,CAAA;AAEjB;;GAEG;AACH,QAAA,MAAM,IAAI,EAAE,IAiEX,CAAA;AAED,eAAe,IAAI,CAAA;AASnB,eAAO,MAAM,WAAW,KAAoB,CAAA;AAE5C,gGAAgG;AAChG,eAAO,MAAM,eAAe,KAAoB,CAAA"}
+{"version":3,"file":"lukso-wizard.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-wizard/lukso-wizard.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAEhD,OAAO,UAAU,CAAA;AAEjB;;GAEG;AACH,QAAA,MAAM,IAAI,EAAE,IA6DX,CAAA;AAED,eAAe,IAAI,CAAA;AASnB,eAAO,MAAM,WAAW,KAAoB,CAAA"}

package/dist/{index-98e8e0d5.cjs → index-0e131d65.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-const shared_tailwindElement_index = require('./index-688c3040.cjs');
+const shared_tailwindElement_index = require('./index-5cc4a839.cjs');
 const directive = require('./directive-8278ab14.cjs');
 
 class CustomStyleMapDirective extends directive.i {