@lukso/web-components 1.125.0 → 1.126.0

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

@@ -1,20 +1,18 @@
-import { T as TailwindStyledElement, E, x } from '../../index-5d8104dc.js';
-import { n, t } from '../../property-2a7bbcd8.js';
+import { T as TailwindStyledElement, E, x } from '../../index-869a59a0.js';
+import { n, t } from '../../property-ff5733e6.js';
 import { c as ce } from '../../index-d14b6a34.js';
 import '../lukso-icon/index.js';
-import '../../index-d8500104.js';
+import '../../index-da14e190.js';
 import '../lukso-username/index.js';
 import { u as uniqId } from '../../uniq-id-ce2d165c.js';
-import '../../style-map-bece8358.js';
+import '../../style-map-8a1e2472.js';
 import '../../directive-2bb7789e.js';
 import '../lukso-image/index.js';
-import '../../state-a01f91dc.js';
-import '../../index-e496b515.js';
+import '../../state-9bdaddc0.js';
+import '../../index-b74237f9.js';
 import '../../tailwind-config.js';
 import '../../cn-90c03edf.js';
 
-const style = ":host {\n    display: flex;\n    width: 100%\n}";
-
 const debounceFunction = (func, timeout = 100) => {
   let timer;
   return (...args) => {
@@ -25,6 +23,8 @@ const debounceFunction = (func, timeout = 100) => {
   };
 };
 
+const style = ":host {\n    display: flex;\n    width: 100%\n}";
+
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -47,37 +47,75 @@ let LuksoDropdown = class extends TailwindStyledElement(style) {
     this.isRight = false;
     this.isFullWidth = false;
     this.size = "medium";
+    this.trigger = "click";
     this.styles = ce({
-      base: `bg-neutral-100 border w-full border-neutral-90 shadow-1xl z-50
-      flex absolute flex-col gap-1 overflow-y-auto max-h-64 w-[max-content]`,
+      slots: {
+        wrapper: "absolute z-50",
+        dropdown: `bg-neutral-100 border border-neutral-90 shadow-1xl
+        flex flex-col gap-1 overflow-y-auto w-[max-content] animate-fade-in animation-duration-200`
+      },
       variants: {
         openTop: {
-          true: "bottom-[48px] mb-2 mt-0"
+          true: {
+            wrapper: "mt-0"
+          }
         },
         size: {
-          small: "rounded-8 p-2 mt-1 min-w-[120px] paragraph-inter-12-regular",
-          medium: "rounded-12 p-3 mt-2 min-w-[200px] paragraph-inter-14-regular"
+          small: {
+            dropdown: "rounded-8 p-2 mt-1 min-w-[120px] paragraph-inter-12-regular max-h-52"
+          },
+          medium: {
+            dropdown: "rounded-12 p-3 mt-2 min-w-[200px] paragraph-inter-14-regular max-h-64"
+          },
+          large: "rounded-12 p-3 mt-2 min-w-[200px] paragraph-inter-16-semi-bold max-h-64"
         },
         isRight: {
-          true: "right-0"
+          true: {
+            wrapper: "right-0"
+          }
         },
         isFullWidth: {
-          true: "w-full"
+          true: { wrapper: "w-full", dropdown: "w-full" }
         }
       },
       compoundVariants: [
         {
           isFullWidth: false,
           size: "small",
-          class: "max-w-[200px]"
+          class: { dropdown: "max-w-[200px]" }
         },
         {
           isFullWidth: false,
           size: "medium",
-          class: "max-w-[300px]"
+          class: { dropdown: "max-w-[300px]" }
+        },
+        {
+          isFullWidth: false,
+          size: "large",
+          class: { dropdown: "max-w-[400px]" }
+        },
+        {
+          openTop: true,
+          size: "small",
+          class: { wrapper: "bottom-7 mb-1" }
+        },
+        {
+          openTop: true,
+          size: ["medium", "large"],
+          class: { wrapper: "bottom-12 mb-2" }
         }
       ]
     });
+    this.handleMouseEnter = () => {
+      this.isOpen = true;
+    };
+    this.handleMouseLeave = (event) => {
+      const relatedTarget = event.relatedTarget;
+      if (relatedTarget?.id === this.id || relatedTarget?.id === this.triggerId) {
+        return;
+      }
+      this.isOpen = false;
+    };
     this.handleClick = debounceFunction((event) => {
       const element = event.target;
       if (element.id === this.triggerId || this.id === element.id) {
@@ -92,13 +130,40 @@ let LuksoDropdown = class extends TailwindStyledElement(style) {
       this.id = uniqId();
     }
   }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("isOpen") && this.trigger === "hover") {
+      const dropdownElement = this.shadowRoot?.getElementById(this.id);
+      if (this.isOpen && dropdownElement) {
+        dropdownElement.addEventListener("mouseenter", this.handleMouseEnter);
+        dropdownElement.addEventListener("mouseleave", this.handleMouseLeave);
+      } else if (dropdownElement) {
+        dropdownElement.removeEventListener("mouseenter", this.handleMouseEnter);
+        dropdownElement.removeEventListener("mouseleave", this.handleMouseLeave);
+      }
+    }
+  }
   connectedCallback() {
     super.connectedCallback();
     window.addEventListener("click", this.handleClick.bind(this));
+    if (this.trigger === "hover") {
+      const triggerElement = document.getElementById(this.triggerId);
+      if (triggerElement) {
+        triggerElement.addEventListener("mouseenter", this.handleMouseEnter);
+        triggerElement.addEventListener("mouseleave", this.handleMouseLeave);
+      }
+    }
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     window.removeEventListener("click", this.handleClick);
+    if (this.trigger === "hover") {
+      const triggerElement = document.getElementById(this.triggerId);
+      if (triggerElement) {
+        triggerElement.removeEventListener("mouseenter", this.handleMouseEnter);
+        triggerElement.removeEventListener("mouseleave", this.handleMouseLeave);
+      }
+    }
   }
   async willUpdate(changedProperties) {
     if (changedProperties.has("isOpen")) {
@@ -117,7 +182,7 @@ let LuksoDropdown = class extends TailwindStyledElement(style) {
     }
   }
   render() {
-    const styles = this.styles({
+    const { wrapper, dropdown } = this.styles({
       openTop: this.openTop,
       size: this.size,
       isRight: this.isRight,
@@ -126,8 +191,10 @@ let LuksoDropdown = class extends TailwindStyledElement(style) {
     if (!this.isOpen) {
       return E;
     }
-    return x`<div class="${styles} animate-fade-in animation-duration-200">
-      <slot></slot>
+    return x`<div id=${this.id} class=${wrapper()}>
+      <div class=${dropdown()}>
+        <slot></slot>
+      </div>
     </div>`;
   }
 };
@@ -155,6 +222,9 @@ __decorateClass([
 __decorateClass([
   n({ type: String })
 ], LuksoDropdown.prototype, "size", 2);
+__decorateClass([
+  n({ type: String })
+], LuksoDropdown.prototype, "trigger", 2);
 LuksoDropdown = __decorateClass([
   t("lukso-dropdown")
 ], LuksoDropdown);

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

@@ -3,7 +3,15 @@ import type { Meta } from '@storybook/web-components';
 declare const meta: Meta;
 export default meta;
 /** Example of dropdown.  */
-export declare const DefaultDropdown: any;
+export declare const Default: any;
 /** Example of `small` dropdown.  */
-export declare const SmallDropdown: any;
+export declare const SmallSize: any;
+/** Example of right side dropdown.  */
+export declare const RightSide: any;
+/** Example of dropdown that opens to the top.  */
+export declare const OpenTop: any;
+/** Example of full width dropdown.  */
+export declare const FullWidth: any;
+/** Example of dropdown triggered on hover.  */
+export declare const HoverTrigger: any;
 //# sourceMappingURL=lukso-dropdown.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"lukso-dropdown.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-dropdown/lukso-dropdown.stories.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,uBAAuB,CAAA;AAC9B,OAAO,gCAAgC,CAAA;AACvC,OAAO,SAAS,CAAA;AAEhB,iEAAiE;AACjE,QAAA,MAAM,IAAI,EAAE,IA0HX,CAAA;AAED,eAAe,IAAI,CAAA;AA+DnB,4BAA4B;AAC5B,eAAO,MAAM,eAAe,KAAoB,CAAA;AAMhD,oCAAoC;AACpC,eAAO,MAAM,aAAa,KAAoB,CAAA"}
+{"version":3,"file":"lukso-dropdown.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-dropdown/lukso-dropdown.stories.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,uBAAuB,CAAA;AAC9B,OAAO,gCAAgC,CAAA;AACvC,OAAO,SAAS,CAAA;AAEhB,iEAAiE;AACjE,QAAA,MAAM,IAAI,EAAE,IAuIX,CAAA;AAED,eAAe,IAAI,CAAA;AA+DnB,4BAA4B;AAC5B,eAAO,MAAM,OAAO,KAAoB,CAAA;AAMxC,oCAAoC;AACpC,eAAO,MAAM,SAAS,KAAoB,CAAA;AAO1C,uCAAuC;AACvC,eAAO,MAAM,SAAS,KAAoB,CAAA;AAQ1C,kDAAkD;AAClD,eAAO,MAAM,OAAO,KAAoB,CAAA;AAOxC,uCAAuC;AACvC,eAAO,MAAM,SAAS,KAAoB,CAAA;AAO1C,+CAA+C;AAC/C,eAAO,MAAM,YAAY,KAAoB,CAAA"}

package/dist/components/lukso-dropdown-option/index.cjs

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-51f597c4.cjs');
-const property = require('../../property-a2c3c430.cjs');
+const shared_tailwindElement_index = require('../../index-b44989bb.cjs');
+const property = require('../../property-65ed3fa1.cjs');
 const index = require('../../index-2b104ecb.cjs');
 
 const style = ":host {\n    display: block\n}";
@@ -43,7 +43,8 @@ exports.LuksoDropdownOption = class LuksoDropdownOption extends shared_tailwindE
         },
         size: {
           small: "paragraph-inter-12-regular rounded-4 px-2 min-h-[28px]",
-          medium: "paragraph-inter-14-regular rounded-8 px-3 min-h-[38px]"
+          medium: "paragraph-inter-14-regular rounded-8 px-3 min-h-[38px]",
+          large: "paragraph-inter-16-semi-bold rounded-8 px-3 min-h-[38px]"
         },
         isDisabled: {
           true: "opacity-60 cursor-not-allowed"
@@ -64,6 +65,11 @@ exports.LuksoDropdownOption = class LuksoDropdownOption extends shared_tailwindE
           size: "medium",
           class: "pl-4"
         },
+        {
+          isGroup: true,
+          size: "large",
+          class: "pl-4"
+        },
         {
           isReadonly: false,
           isSelected: true,

package/dist/components/lukso-dropdown-option/index.d.ts

@@ -6,7 +6,7 @@ export declare class LuksoDropdownOption extends LuksoDropdownOption_base {
     isSelected: boolean;
     isActive: boolean;
     isGroup: boolean;
-    size: InputSize;
+    size: InputSize | 'large';
     private styles;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/lukso-dropdown-option/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-dropdown-option/index.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;;AAE/C,qBACa,mBAAoB,SAAQ,wBAA4B;IAEnE,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,QAAQ,UAAQ;IAGhB,OAAO,UAAQ;IAGf,IAAI,EAAE,SAAS,CAAW;IAE1B,OAAO,CAAC,MAAM,CA0CZ;IAEF,MAAM;CAcP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,mBAAmB,CAAA;KAC7C;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-dropdown-option/index.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;;AAE/C,qBACa,mBAAoB,SAAQ,wBAA4B;IAEnE,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,QAAQ,UAAQ;IAGhB,OAAO,UAAQ;IAGf,IAAI,EAAE,SAAS,GAAG,OAAO,CAAW;IAEpC,OAAO,CAAC,MAAM,CAgDZ;IAEF,MAAM;CAcP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,mBAAmB,CAAA;KAC7C;CACF"}

package/dist/components/lukso-dropdown-option/index.js

@@ -1,5 +1,5 @@
-import { T as TailwindStyledElement, x } from '../../index-5d8104dc.js';
-import { n, t } from '../../property-2a7bbcd8.js';
+import { T as TailwindStyledElement, x } from '../../index-869a59a0.js';
+import { n, t } from '../../property-ff5733e6.js';
 import { c as ce } from '../../index-d14b6a34.js';
 
 const style = ":host {\n    display: block\n}";
@@ -39,7 +39,8 @@ let LuksoDropdownOption = class extends TailwindStyledElement(style) {
         },
         size: {
           small: "paragraph-inter-12-regular rounded-4 px-2 min-h-[28px]",
-          medium: "paragraph-inter-14-regular rounded-8 px-3 min-h-[38px]"
+          medium: "paragraph-inter-14-regular rounded-8 px-3 min-h-[38px]",
+          large: "paragraph-inter-16-semi-bold rounded-8 px-3 min-h-[38px]"
         },
         isDisabled: {
           true: "opacity-60 cursor-not-allowed"
@@ -60,6 +61,11 @@ let LuksoDropdownOption = class extends TailwindStyledElement(style) {
           size: "medium",
           class: "pl-4"
         },
+        {
+          isGroup: true,
+          size: "large",
+          class: "pl-4"
+        },
         {
           isReadonly: false,
           isSelected: true,

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-51f597c4.cjs');
-const property = require('../../property-a2c3c430.cjs');
+const shared_tailwindElement_index = require('../../index-b44989bb.cjs');
+const property = require('../../property-65ed3fa1.cjs');
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

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

@@ -1,5 +1,5 @@
-import { a as TailwindElement, x } from '../../index-5d8104dc.js';
-import { n, t } from '../../property-2a7bbcd8.js';
+import { a as TailwindElement, x } from '../../index-869a59a0.js';
+import { n, t } from '../../property-ff5733e6.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-51f597c4.cjs');
-const property = require('../../property-a2c3c430.cjs');
-const styleMap = require('../../style-map-d3b1c1d5.cjs');
+const shared_tailwindElement_index = require('../../index-b44989bb.cjs');
+const property = require('../../property-65ed3fa1.cjs');
+const styleMap = require('../../style-map-227a49cb.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-5d8104dc.js';
-import { n, t } from '../../property-2a7bbcd8.js';
-import { o } from '../../style-map-bece8358.js';
+import { x, T as TailwindStyledElement } from '../../index-869a59a0.js';
+import { n, t } from '../../property-ff5733e6.js';
+import { o } from '../../style-map-8a1e2472.js';
 import '../../directive-2bb7789e.js';
 
 const style = ":host {\n    display: inline-flex\n}";

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-51f597c4.cjs');
-const property = require('../../property-a2c3c430.cjs');
-const state = require('../../state-0d05f6ea.cjs');
-const styleMap = require('../../style-map-d3b1c1d5.cjs');
+const shared_tailwindElement_index = require('../../index-b44989bb.cjs');
+const property = require('../../property-65ed3fa1.cjs');
+const state = require('../../state-ec4491d8.cjs');
+const styleMap = require('../../style-map-227a49cb.cjs');
 const index = require('../../index-2b104ecb.cjs');
 require('../../directive-8278ab14.cjs');
 

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

@@ -1,7 +1,7 @@
-import { a as TailwindElement, x } from '../../index-5d8104dc.js';
-import { n, t } from '../../property-2a7bbcd8.js';
-import { r } from '../../state-a01f91dc.js';
-import { o } from '../../style-map-bece8358.js';
+import { a as TailwindElement, x } from '../../index-869a59a0.js';
+import { n, t } from '../../property-ff5733e6.js';
+import { r } from '../../state-9bdaddc0.js';
+import { o } from '../../style-map-8a1e2472.js';
 import { c as ce } from '../../index-d14b6a34.js';
 import '../../directive-2bb7789e.js';
 

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

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-51f597c4.cjs');
-const property = require('../../property-a2c3c430.cjs');
-const state = require('../../state-0d05f6ea.cjs');
+const shared_tailwindElement_index = require('../../index-b44989bb.cjs');
+const property = require('../../property-65ed3fa1.cjs');
+const state = require('../../state-ec4491d8.cjs');
 const index = require('../../index-2b104ecb.cjs');
+require('../lukso-icon/index.cjs');
 require('../../tailwind-config.cjs');
 const cn = require('../../cn-b6daa995.cjs');
-require('../lukso-icon/index.cjs');
-require('../../style-map-d3b1c1d5.cjs');
+require('../../style-map-227a49cb.cjs');
 require('../../directive-8278ab14.cjs');
 
 const style = ":host {\n\n    display: inline-flex\n}\n\n:host([is-full-width]) {\n\n    display: flex;\n\n    width: 100%\n}";
@@ -116,6 +116,11 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
             input: "h-[48px] px-4 py-3 paragraph-inter-14-regular rounded-12",
             unit: "h-[48px] paragraph-inter-12-regular px-3.5 rounded-r-12 before:top-[calc(50%-12px)] before:h-[24px]",
             rightIcon: "right-3"
+          },
+          large: {
+            input: "h-[70px] px-4 py-5 paragraph-inter-16-regular rounded-12",
+            unit: "h-[48px] paragraph-inter-16-semi-bold px-3.5 rounded-r-12 before:top-[calc(50%-12px)] before:h-[24px]",
+            rightIcon: "right-4"
           }
         },
         isRightIconClickable: {
@@ -148,6 +153,11 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
             unit: "border-red-65"
           }
         },
+        {
+          hasRightIcon: true,
+          size: "large",
+          class: { input: "pr-10" }
+        },
         {
           hasRightIcon: true,
           size: "medium",

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

@@ -21,7 +21,7 @@ export declare class LuksoInput extends LuksoInput_base {
     max: number | undefined;
     min: number | undefined;
     borderless: boolean;
-    size: InputSize;
+    size: InputSize | 'large';
     rightIcon: string;
     isRightIconClickable: boolean;
     keepFocusOnEscape: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-input/index.ts"],"names":[],"mappings":"AAMA,OAAO,yBAAyB,CAAA;AAGhC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;;AAI/C,qBACa,UAAW,SAAQ,eAA4B;IAE1D,KAAK,SAAK;IAGV,IAAI,SAAK;IAGT,IAAI,SAAS;IAGb,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,YAAY,SAAO;IAGnB,EAAE,SAAK;IAGP,GAAG,EAAE,MAAM,GAAG,SAAS,CAAY;IAGnC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAY;IAGtC,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,IAAI,SAAK;IAGT,WAAW,SAAK;IAGhB,WAAW,UAAQ;IAGnB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,SAAS,UAAQ;IAGjB,GAAG,EAAE,MAAM,GAAG,SAAS,CAAY;IAGnC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAY;IAGnC,UAAU,UAAQ;IAGlB,IAAI,EAAE,SAAS,CAAW;IAG1B,SAAS,SAAK;IAGd,oBAAoB,UAAQ;IAG5B,iBAAiB,UAAQ;IAGzB,OAAO,CAAC,QAAQ,CAAQ;IAGxB,OAAO,CAAC,YAAY,CAAQ;IAE5B,OAAO,CAAC,WAAW,CAwGjB;IAEF,iBAAiB;IAYjB,aAAa,CAAC,MAAM,EAAE,MAAM;IAgC5B,aAAa;IAUb,mBAAmB;IAQnB,aAAa;IAMb,YAAY,CAAC,MAAM,EAAE,MAAM;IAW3B,iBAAiB,CAAC,MAAM,EAAE,MAAM;IAShC,OAAO,CAAC,WAAW;YAOL,UAAU;YAgBV,YAAY;YAcZ,WAAW;YAeX,WAAW;YAmBX,aAAa;YAcb,cAAc;IAc5B,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,eAAe;YAaT,gBAAgB;IAc9B,OAAO,CAAC,oBAAoB;IAY5B,MAAM;CA6BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAA;KAC1B;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-input/index.ts"],"names":[],"mappings":"AAIA,OAAO,yBAAyB,CAAA;AAKhC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;;AAI/C,qBACa,UAAW,SAAQ,eAA4B;IAE1D,KAAK,SAAK;IAGV,IAAI,SAAK;IAGT,IAAI,SAAS;IAGb,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,YAAY,SAAO;IAGnB,EAAE,SAAK;IAGP,GAAG,EAAE,MAAM,GAAG,SAAS,CAAY;IAGnC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAY;IAGtC,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,IAAI,SAAK;IAGT,WAAW,SAAK;IAGhB,WAAW,UAAQ;IAGnB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,SAAS,UAAQ;IAGjB,GAAG,EAAE,MAAM,GAAG,SAAS,CAAY;IAGnC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAY;IAGnC,UAAU,UAAQ;IAGlB,IAAI,EAAE,SAAS,GAAG,OAAO,CAAW;IAGpC,SAAS,SAAK;IAGd,oBAAoB,UAAQ;IAG5B,iBAAiB,UAAQ;IAGzB,OAAO,CAAC,QAAQ,CAAQ;IAGxB,OAAO,CAAC,YAAY,CAAQ;IAE5B,OAAO,CAAC,WAAW,CAkHjB;IAEF,iBAAiB;IAYjB,aAAa,CAAC,MAAM,EAAE,MAAM;IAgC5B,aAAa;IAUb,mBAAmB;IAQnB,aAAa;IAMb,YAAY,CAAC,MAAM,EAAE,MAAM;IAW3B,iBAAiB,CAAC,MAAM,EAAE,MAAM;IAShC,OAAO,CAAC,WAAW;YAOL,UAAU;YAgBV,YAAY;YAcZ,WAAW;YAeX,WAAW;YAmBX,aAAa;YAcb,cAAc;IAc5B,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,eAAe;YAaT,gBAAgB;IAc9B,OAAO,CAAC,oBAAoB;IAY5B,MAAM;CA6BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAA;KAC1B;CACF"}

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

@@ -1,11 +1,11 @@
-import { T as TailwindStyledElement, x, E } from '../../index-5d8104dc.js';
-import { n, t } from '../../property-2a7bbcd8.js';
-import { r } from '../../state-a01f91dc.js';
+import { T as TailwindStyledElement, x, E } from '../../index-869a59a0.js';
+import { n, t } from '../../property-ff5733e6.js';
+import { r } from '../../state-9bdaddc0.js';
 import { c as ce } from '../../index-d14b6a34.js';
+import '../lukso-icon/index.js';
 import '../../tailwind-config.js';
 import { c as cn } from '../../cn-90c03edf.js';
-import '../lukso-icon/index.js';
-import '../../style-map-bece8358.js';
+import '../../style-map-8a1e2472.js';
 import '../../directive-2bb7789e.js';
 
 const style = ":host {\n\n    display: inline-flex\n}\n\n:host([is-full-width]) {\n\n    display: flex;\n\n    width: 100%\n}";
@@ -112,6 +112,11 @@ let LuksoInput = class extends TailwindStyledElement(style) {
             input: "h-[48px] px-4 py-3 paragraph-inter-14-regular rounded-12",
             unit: "h-[48px] paragraph-inter-12-regular px-3.5 rounded-r-12 before:top-[calc(50%-12px)] before:h-[24px]",
             rightIcon: "right-3"
+          },
+          large: {
+            input: "h-[70px] px-4 py-5 paragraph-inter-16-regular rounded-12",
+            unit: "h-[48px] paragraph-inter-16-semi-bold px-3.5 rounded-r-12 before:top-[calc(50%-12px)] before:h-[24px]",
+            rightIcon: "right-4"
           }
         },
         isRightIconClickable: {
@@ -144,6 +149,11 @@ let LuksoInput = class extends TailwindStyledElement(style) {
             unit: "border-red-65"
           }
         },
+        {
+          hasRightIcon: true,
+          size: "large",
+          class: { input: "pr-10" }
+        },
         {
           hasRightIcon: true,
           size: "medium",

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-51f597c4.cjs');
-const property = require('../../property-a2c3c430.cjs');
+const shared_tailwindElement_index = require('../../index-b44989bb.cjs');
+const property = require('../../property-65ed3fa1.cjs');
 const index = require('../../index-2b104ecb.cjs');
 
 var __defProp = Object.defineProperty;

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

@@ -1,5 +1,5 @@
-import { a as TailwindElement, x } from '../../index-5d8104dc.js';
-import { n, t } from '../../property-2a7bbcd8.js';
+import { a as TailwindElement, x } from '../../index-869a59a0.js';
+import { n, t } from '../../property-ff5733e6.js';
 import { c as ce } from '../../index-d14b6a34.js';
 
 var __defProp = Object.defineProperty;

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

@@ -2,15 +2,15 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-51f597c4.cjs');
-const property = require('../../property-a2c3c430.cjs');
-const state = require('../../state-0d05f6ea.cjs');
+const shared_tailwindElement_index = require('../../index-b44989bb.cjs');
+const property = require('../../property-65ed3fa1.cjs');
+const state = require('../../state-ec4491d8.cjs');
 const index = require('../../index-2b104ecb.cjs');
 require('../lukso-icon/index.cjs');
 require('../lukso-tag/index.cjs');
-require('../../style-map-d3b1c1d5.cjs');
+require('../../style-map-227a49cb.cjs');
 require('../../directive-8278ab14.cjs');
-require('../../index-65515396.cjs');
+require('../../index-2ffc105b.cjs');
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

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

@@ -1,12 +1,12 @@
-import { a as TailwindElement, x, E } from '../../index-5d8104dc.js';
-import { n, t } from '../../property-2a7bbcd8.js';
-import { r } from '../../state-a01f91dc.js';
+import { a as TailwindElement, x, E } from '../../index-869a59a0.js';
+import { n, t } from '../../property-ff5733e6.js';
+import { r } from '../../state-9bdaddc0.js';
 import { c as ce } from '../../index-d14b6a34.js';
 import '../lukso-icon/index.js';
 import '../lukso-tag/index.js';
-import '../../style-map-bece8358.js';
+import '../../style-map-8a1e2472.js';
 import '../../directive-2bb7789e.js';
-import '../../index-e496b515.js';
+import '../../index-b74237f9.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

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

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-51f597c4.cjs');
-const property = require('../../property-a2c3c430.cjs');
-const state = require('../../state-0d05f6ea.cjs');
+const shared_tailwindElement_index = require('../../index-b44989bb.cjs');
+const property = require('../../property-65ed3fa1.cjs');
+const state = require('../../state-ec4491d8.cjs');
 const index = require('../../index-2b104ecb.cjs');
 require('../lukso-icon/index.cjs');
 require('../lukso-button/index.cjs');
-require('../../style-map-d3b1c1d5.cjs');
+require('../../style-map-227a49cb.cjs');
 require('../../directive-8278ab14.cjs');
 require('../../tailwind-config.cjs');
 require('../../cn-b6daa995.cjs');

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

@@ -1,10 +1,10 @@
-import { T as TailwindStyledElement, x } from '../../index-5d8104dc.js';
-import { n, t } from '../../property-2a7bbcd8.js';
-import { r } from '../../state-a01f91dc.js';
+import { T as TailwindStyledElement, x } from '../../index-869a59a0.js';
+import { n, t } from '../../property-ff5733e6.js';
+import { r } from '../../state-9bdaddc0.js';
 import { c as ce } from '../../index-d14b6a34.js';
 import '../lukso-icon/index.js';
 import '../lukso-button/index.js';
-import '../../style-map-bece8358.js';
+import '../../style-map-8a1e2472.js';
 import '../../directive-2bb7789e.js';
 import '../../tailwind-config.js';
 import '../../cn-90c03edf.js';

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

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-require('../../index-51f597c4.cjs');
-require('../../property-a2c3c430.cjs');
-const components_luksoProfile_index = require('../../index-188719ef.cjs');
+require('../../index-b44989bb.cjs');
+require('../../property-65ed3fa1.cjs');
+const components_luksoProfile_index = require('../../index-e5b0ba18.cjs');
 require('../../index-2b104ecb.cjs');
 require('../lukso-image/index.cjs');
-require('../../state-0d05f6ea.cjs');
-require('../../style-map-d3b1c1d5.cjs');
+require('../../state-ec4491d8.cjs');
+require('../../style-map-227a49cb.cjs');
 require('../../directive-8278ab14.cjs');
 
 

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

@@ -1,8 +1,8 @@
-import '../../index-5d8104dc.js';
-import '../../property-2a7bbcd8.js';
-export { L as LuksoProfile } from '../../index-d8500104.js';
+import '../../index-869a59a0.js';
+import '../../property-ff5733e6.js';
+export { L as LuksoProfile } from '../../index-da14e190.js';
 import '../../index-d14b6a34.js';
 import '../lukso-image/index.js';
-import '../../state-a01f91dc.js';
-import '../../style-map-bece8358.js';
+import '../../state-9bdaddc0.js';
+import '../../style-map-8a1e2472.js';
 import '../../directive-2bb7789e.js';

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-51f597c4.cjs');
-const property = require('../../property-a2c3c430.cjs');
-const styleMap = require('../../style-map-d3b1c1d5.cjs');
+const shared_tailwindElement_index = require('../../index-b44989bb.cjs');
+const property = require('../../property-65ed3fa1.cjs');
+const styleMap = require('../../style-map-227a49cb.cjs');
 require('../../tailwind-config.cjs');
 const cn = require('../../cn-b6daa995.cjs');
 require('../../directive-8278ab14.cjs');

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

@@ -1,6 +1,6 @@
-import { a as TailwindElement, x } from '../../index-5d8104dc.js';
-import { n, t } from '../../property-2a7bbcd8.js';
-import { o } from '../../style-map-bece8358.js';
+import { a as TailwindElement, x } from '../../index-869a59a0.js';
+import { n, t } from '../../property-ff5733e6.js';
+import { o } from '../../style-map-8a1e2472.js';
 import '../../tailwind-config.js';
 import { c as cn } from '../../cn-90c03edf.js';
 import '../../directive-2bb7789e.js';