@lukso/web-components 1.162.0 → 1.163.0

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

@@ -1,6 +1,6 @@
-import { a as TailwindElement, x } from '../../index-CQq_Eyeu.js';
-import { n, s as safeCustomElement } from '../../safe-custom-element-BODySN1j.js';
-import { r } from '../../state-n75qAK0V.js';
+import { a as TailwindElement, x, E } from '../../index-C4AqmOTg.js';
+import { n, s as safeCustomElement } from '../../safe-custom-element-BuFHdvWD.js';
+import { r } from '../../state-D-OZ3KEf.js';
 import { e } from '../../query-CHb9Ft_d.js';
 import { c as ce } from '../../index-B9iart53.js';
 import '../../tailwind-config.js';
@@ -21,7 +21,10 @@ let LuksoCollapse = class extends TailwindElement {
   constructor() {
     super(...arguments);
     this.label = "";
-    this.secondaryLabel = {
+    this.description = "";
+    this.error = "";
+    this.triggerLabel = "";
+    this.toggleLabel = {
       open: "",
       close: ""
     };
@@ -29,6 +32,7 @@ let LuksoCollapse = class extends TailwindElement {
     this.customClass = "";
     this.isDisabled = false;
     this.icon = "";
+    this.size = "large";
     this.maxHeight = "0px";
     this.observedHeight = 0;
     this.onTransitionEnd = (e) => {
@@ -39,11 +43,11 @@ let LuksoCollapse = class extends TailwindElement {
     };
     this.collapseStyles = ce({
       slots: {
-        base: "hover:border-neutral-35 transition transition-all duration-150",
-        header: "flex items-center justify-between cursor-pointer ml-3 py-2",
-        label: "text-neutral-45 paragraph-inter-14-semi-bold",
-        secondary: "text-neutral-45 paragraph-inter-14-semi-bold",
-        icon: "transition cursor-pointer mr-3",
+        base: "transition transition-all duration-150 border bg-neutral-100",
+        header: "flex items-center justify-between cursor-pointer overflow-hidden",
+        triggerLabel: "",
+        toggleLabel: "",
+        icon: "transition cursor-pointer",
         content: "transition-all duration-250 ease-in-out"
       },
       variants: {
@@ -62,8 +66,59 @@ let LuksoCollapse = class extends TailwindElement {
             header: "cursor-not-allowed",
             icon: "opacity-60 cursor-not-allowed"
           }
+        },
+        size: {
+          small: {
+            base: "rounded-8",
+            header: "h-7 pl-2",
+            triggerLabel: "paragraph-inter-12-semi-bold",
+            toggleLabel: "paragraph-inter-12-semi-bold",
+            icon: "mr-1"
+          },
+          medium: {
+            base: "rounded-10",
+            header: "h-10 pl-3",
+            triggerLabel: "paragraph-inter-14-semi-bold",
+            toggleLabel: "paragraph-inter-14-semi-bold",
+            icon: "mr-2"
+          },
+          large: {
+            base: "rounded-12",
+            header: "h-12 pl-4",
+            triggerLabel: "paragraph-inter-14-semi-bold",
+            toggleLabel: "paragraph-inter-14-semi-bold",
+            icon: "mr-3"
+          },
+          "x-large": {
+            base: "rounded-14",
+            header: "h-17 pl-5",
+            triggerLabel: "paragraph-inter-16-semi-bold",
+            toggleLabel: "paragraph-inter-16-semi-bold",
+            icon: "mr-4"
+          }
+        },
+        hasError: {
+          true: {
+            base: "border-red-85 hover:border-red-65",
+            triggerLabel: "text-red-65",
+            toggleLabel: "text-red-65"
+          },
+          false: {
+            base: "border-neutral-90",
+            triggerLabel: "text-neutral-45",
+            toggleLabel: "text-neutral-45"
+          }
         }
-      }
+      },
+      compoundVariants: [
+        {
+          isDisabled: false,
+          hasError: false,
+          class: {
+            base: "hover:border-neutral-35"
+          }
+        }
+      ]
     });
   }
   firstUpdated() {
@@ -95,7 +150,9 @@ let LuksoCollapse = class extends TailwindElement {
       }
     } else {
       this.maxHeight = `${height}px`;
-      requestAnimationFrame(() => this.maxHeight = "0px");
+      requestAnimationFrame(() => {
+        this.maxHeight = "0px";
+      });
     }
   }
   toggle() {
@@ -104,40 +161,66 @@ let LuksoCollapse = class extends TailwindElement {
       new CustomEvent("toggle", { detail: { open: this.isOpen } })
     );
   }
+  labelTemplate() {
+    return x`
+      <label class="heading-inter-14-bold text-neutral-20 pb-2 block"
+        >${this.label}</label
+      >
+    `;
+  }
+  descriptionTemplate() {
+    return x`
+      <div class="paragraph-inter-12-regular text-neutral-20 pb-2">
+        <lukso-sanitize html-content=${this.description}></lukso-sanitize>
+      </div>
+    `;
+  }
+  errorTemplate() {
+    return x`<div class="paragraph-inter-12-regular text-red-65 pt-2">
+      ${this.error}
+    </div>`;
+  }
   render() {
-    const { base, header, label, secondary, icon, content } = this.collapseStyles({
+    const { base, header, triggerLabel, toggleLabel, icon, content } = this.collapseStyles({
       isOpen: this.isOpen,
-      isDisabled: this.isDisabled
+      isDisabled: this.isDisabled,
+      size: this.size,
+      hasError: this.error !== ""
     });
     return x`
-      <div class=${cn(base(), this.customClass)}>
-        <!-- Header -->
-        <div
-          class=${header()}
-          @click=${() => !this.isDisabled && this.toggle()}
-        >
-          <span class=${label()}>${this.label}</span>
-          <div class="flex items-center">
-            ${this.secondaryLabel ? x`<span class=${secondary()}>
-                  ${this.isOpen ? this.secondaryLabel.close : this.secondaryLabel.open}
-                </span>` : null}
-            ${this.icon ? x`<lukso-icon
-                  name=${this.icon}
-                  class=${icon()}
-                ></lukso-icon>` : null}
+      <div class="w-[inherit]">
+        ${this.label ? this.labelTemplate() : E}
+        ${this.description ? this.descriptionTemplate() : E}
+        <div class=${cn(base(), this.customClass)}>
+          <!-- Header -->
+          <div
+            class=${header()}
+            @click=${() => !this.isDisabled && this.toggle()}
+          >
+            <span class=${triggerLabel()}>${this.triggerLabel}</span>
+            <div class="flex items-center">
+              ${this.toggleLabel ? x`<span class=${toggleLabel()}>
+                    ${this.isOpen ? this.toggleLabel?.close : this.toggleLabel?.open}
+                  </span>` : E}
+              ${this.icon ? x`<lukso-icon
+                    name=${this.icon}
+                    class=${icon()}
+                  ></lukso-icon>` : E}
+            </div>
           </div>
-        </div>
 
-        <!-- Content -->
-        <div
-          class=${content()}
-          style="max-height:${this.maxHeight};"
-          @transitionend=${this.onTransitionEnd}
-        >
-          <div class="collapse-content">
-            <slot @slotchange=${() => this.syncHeight()}></slot>
+          <!-- Content -->
+          <div
+            class=${content()}
+            style="max-height:${this.maxHeight};"
+            @transitionend=${this.onTransitionEnd}
+          >
+            <div class="collapse-content">
+              <slot @slotchange=${() => this.syncHeight()}></slot>
+            </div>
           </div>
         </div>
+        ${this.error ? this.errorTemplate() : E}
       </div>
     `;
   }
@@ -146,8 +229,17 @@ __decorateClass([
   n({ type: String })
 ], LuksoCollapse.prototype, "label", 2);
 __decorateClass([
-  n({ type: Object, attribute: "secondary-label" })
-], LuksoCollapse.prototype, "secondaryLabel", 2);
+  n({ type: String })
+], LuksoCollapse.prototype, "description", 2);
+__decorateClass([
+  n({ type: String })
+], LuksoCollapse.prototype, "error", 2);
+__decorateClass([
+  n({ type: String, attribute: "trigger-label" })
+], LuksoCollapse.prototype, "triggerLabel", 2);
+__decorateClass([
+  n({ type: Object, attribute: "toggle-label" })
+], LuksoCollapse.prototype, "toggleLabel", 2);
 __decorateClass([
   n({ type: Boolean, attribute: "is-open" })
 ], LuksoCollapse.prototype, "isOpen", 2);
@@ -160,6 +252,9 @@ __decorateClass([
 __decorateClass([
   n({ type: String, attribute: "icon" })
 ], LuksoCollapse.prototype, "icon", 2);
+__decorateClass([
+  n({ type: String })
+], LuksoCollapse.prototype, "size", 2);
 __decorateClass([
   r()
 ], LuksoCollapse.prototype, "maxHeight", 2);

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

@@ -2,8 +2,22 @@ import { Meta } from '@storybook/web-components-vite';
 /**  Documentation and examples of `lukso-collapse` component. */
 declare const meta: Meta;
 export default meta;
-/** Example of `lukso-collapse` */
-export declare const LuksoCollapse: any;
+/** Example of `small` size */
+export declare const CollapseSmall: any;
+/** Example of `medium` size */
+export declare const CollapseMedium: any;
+/** Example of `large` size */
+export declare const CollapseLarge: any;
+/** Example of `x-large` size */
+export declare const CollapseXLarge: any;
+/** Example of custom labels and icon */
+export declare const CustomLabels: any;
+/** Example of collapse with `label` */
+export declare const CollapseLabel: any;
+/** Example of collapse with `description` */
+export declare const CollapseDescription: any;
+/** Example of collapse with `error` */
+export declare const CollapseError: any;
 /** Example of lukso-collapse `open` by default */
 export declare const CollapseOpen: any;
 /** Example of lukso-collapse `disabled` */

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

@@ -1 +1 @@
-{"version":3,"file":"lukso-collapse.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-collapse/lukso-collapse.stories.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAA;AAC1D,OAAO,SAAS,CAAA;AAChB,OAAO,uBAAuB,CAAA;AAE9B,iEAAiE;AACjE,QAAA,MAAM,IAAI,EAAE,IA+FX,CAAA;AAED,eAAe,IAAI,CAAA;AA4BnB,kCAAkC;AAClC,eAAO,MAAM,aAAa,KAAoB,CAAA;AAS9C,kDAAkD;AAClD,eAAO,MAAM,YAAY,KAAoB,CAAA;AAa7C,2CAA2C;AAC3C,eAAO,MAAM,gBAAgB,KAAoB,CAAA;AAUjD,0DAA0D;AAC1D,eAAO,MAAM,uBAAuB,KAAoB,CAAA;AAYxD,sDAAsD;AACtD,eAAO,MAAM,uBAAuB,KAAoB,CAAA;AAqBxD,6DAA6D;AAC7D,eAAO,MAAM,oBAAoB,KAAoB,CAAA"}
+{"version":3,"file":"lukso-collapse.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-collapse/lukso-collapse.stories.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAA;AAC1D,OAAO,SAAS,CAAA;AAChB,OAAO,uBAAuB,CAAA;AAE9B,iEAAiE;AACjE,QAAA,MAAM,IAAI,EAAE,IA2HX,CAAA;AAED,eAAe,IAAI,CAAA;AAiCnB,8BAA8B;AAC9B,eAAO,MAAM,aAAa,KAAoB,CAAA;AAK9C,+BAA+B;AAC/B,eAAO,MAAM,cAAc,KAAoB,CAAA;AAK/C,8BAA8B;AAC9B,eAAO,MAAM,aAAa,KAAoB,CAAA;AAK9C,gCAAgC;AAChC,eAAO,MAAM,cAAc,KAAoB,CAAA;AAK/C,wCAAwC;AACxC,eAAO,MAAM,YAAY,KAAoB,CAAA;AAO7C,uCAAuC;AACvC,eAAO,MAAM,aAAa,KAAoB,CAAA;AAK9C,6CAA6C;AAC7C,eAAO,MAAM,mBAAmB,KAAoB,CAAA;AAKpD,uCAAuC;AACvC,eAAO,MAAM,aAAa,KAAoB,CAAA;AAK9C,kDAAkD;AAClD,eAAO,MAAM,YAAY,KAAoB,CAAA;AAU7C,2CAA2C;AAC3C,eAAO,MAAM,gBAAgB,KAAoB,CAAA;AAKjD,0DAA0D;AAC1D,eAAO,MAAM,uBAAuB,KAAoB,CAAA;AAUxD,sDAAsD;AACtD,eAAO,MAAM,uBAAuB,KAAoB,CAAA;AAkBxD,6DAA6D;AAC7D,eAAO,MAAM,oBAAoB,KAAoB,CAAA"}

package/dist/components/lukso-color-picker/index.cjs

@@ -2,15 +2,15 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-BFqOU6o6.cjs');
-const safeCustomElement = require('../../safe-custom-element-DTADBI4I.cjs');
-const state = require('../../state-ClR8ink7.cjs');
+const shared_tailwindElement_index = require('../../index-CE4mgetK.cjs');
+const safeCustomElement = require('../../safe-custom-element-CEr2QRTr.cjs');
+const state = require('../../state-DE9RNbPD.cjs');
 const index = require('../../index-CaJky2qL.cjs');
-const styleMap = require('../../style-map-DhbNG03r.cjs');
+const styleMap = require('../../style-map-CTRp4AN8.cjs');
 require('../../tailwind-config.cjs');
 const axe = require('../../axe-C-H1UVi1.cjs');
 require('../lukso-icon/index.cjs');
-require('../../index-0s--O024.cjs');
+require('../../index-CX03Xr6x.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}";
 
@@ -91,18 +91,18 @@ exports.LuksoColorPicker = class LuksoColorPicker extends shared_tailwindElement
         size: {
           small: {
             wrapper: "grid-cols-[28px,auto] rounded-8",
-            input: "h-[28px] px-2 py-1 paragraph-inter-12-regular rounded-r-8",
-            color: "h-[28px] w-[28px]"
+            input: "h-7 px-2 py-1 paragraph-inter-12-regular rounded-r-8",
+            color: "h-7 w-[28px]"
           },
           medium: {
             wrapper: "grid-cols-[40px,auto] rounded-12",
-            input: "h-[40px] px-3 py-2 paragraph-inter-14-regular rounded-r-10",
-            color: "h-[40px] w-[40px]"
+            input: "h-10 px-3 py-2 paragraph-inter-14-regular rounded-r-10",
+            color: "h-10 w-[40px]"
           },
           large: {
             wrapper: "grid-cols-[48px,auto] rounded-12",
-            input: "h-[48px] px-4 py-3 paragraph-inter-14-regular rounded-r-12",
-            color: "h-[48px] w-[48px]"
+            input: "h-12 px-4 py-3 paragraph-inter-14-regular rounded-r-12",
+            color: "h-12 w-[48px]"
           },
           "x-large": {}
         }

package/dist/components/lukso-color-picker/index.js

@@ -1,12 +1,12 @@
-import { T as TailwindStyledElement, E, x } from '../../index-CQq_Eyeu.js';
-import { n, s as safeCustomElement } from '../../safe-custom-element-BODySN1j.js';
-import { r } from '../../state-n75qAK0V.js';
+import { T as TailwindStyledElement, E, x } from '../../index-C4AqmOTg.js';
+import { n, s as safeCustomElement } from '../../safe-custom-element-BuFHdvWD.js';
+import { r } from '../../state-D-OZ3KEf.js';
 import { c as ce } from '../../index-B9iart53.js';
-import { o } from '../../style-map-BBz25umN.js';
+import { o } from '../../style-map-CNeYTqXM.js';
 import '../../tailwind-config.js';
 import { c as cn } from '../../axe-BK9JSROP.js';
 import '../lukso-icon/index.js';
-import '../../index-DZXmXufN.js';
+import '../../index-BEawLNoE.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}";
 
@@ -87,18 +87,18 @@ let LuksoColorPicker = class extends TailwindStyledElement(style) {
         size: {
           small: {
             wrapper: "grid-cols-[28px,auto] rounded-8",
-            input: "h-[28px] px-2 py-1 paragraph-inter-12-regular rounded-r-8",
-            color: "h-[28px] w-[28px]"
+            input: "h-7 px-2 py-1 paragraph-inter-12-regular rounded-r-8",
+            color: "h-7 w-[28px]"
           },
           medium: {
             wrapper: "grid-cols-[40px,auto] rounded-12",
-            input: "h-[40px] px-3 py-2 paragraph-inter-14-regular rounded-r-10",
-            color: "h-[40px] w-[40px]"
+            input: "h-10 px-3 py-2 paragraph-inter-14-regular rounded-r-10",
+            color: "h-10 w-[40px]"
           },
           large: {
             wrapper: "grid-cols-[48px,auto] rounded-12",
-            input: "h-[48px] px-4 py-3 paragraph-inter-14-regular rounded-r-12",
-            color: "h-[48px] w-[48px]"
+            input: "h-12 px-4 py-3 paragraph-inter-14-regular rounded-r-12",
+            color: "h-12 w-[48px]"
           },
           "x-large": {}
         }

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

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-BFqOU6o6.cjs');
-const safeCustomElement = require('../../safe-custom-element-DTADBI4I.cjs');
+const shared_tailwindElement_index = require('../../index-CE4mgetK.cjs');
+const safeCustomElement = require('../../safe-custom-element-CEr2QRTr.cjs');
 const index = require('../../index-CaJky2qL.cjs');
 require('../lukso-icon/index.cjs');
-require('../../index-BYDwEmQd.cjs');
-require('../../index-GXU76s80.cjs');
+require('../../index-Dv9A3Ltm.cjs');
+require('../../index-D1tHxVU9.cjs');
 const uniqId = require('../../uniq-id-Cszs24DQ.cjs');
 
 const debounceFunction = (func, timeout = 100) => {

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

@@ -1,9 +1,9 @@
-import { T as TailwindStyledElement, E, x } from '../../index-CQq_Eyeu.js';
-import { n, s as safeCustomElement } from '../../safe-custom-element-BODySN1j.js';
+import { T as TailwindStyledElement, E, x } from '../../index-C4AqmOTg.js';
+import { n, s as safeCustomElement } from '../../safe-custom-element-BuFHdvWD.js';
 import { c as ce } from '../../index-B9iart53.js';
 import '../lukso-icon/index.js';
-import '../../index-DvdeX3K2.js';
-import '../../index-CIvb8Rdb.js';
+import '../../index-1J-jqsT9.js';
+import '../../index-B0BrUQTX.js';
 import { u as uniqId } from '../../uniq-id-CGUN-pJV.js';
 
 const debounceFunction = (func, timeout = 100) => {

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-BFqOU6o6.cjs');
-const safeCustomElement = require('../../safe-custom-element-DTADBI4I.cjs');
+const shared_tailwindElement_index = require('../../index-CE4mgetK.cjs');
+const safeCustomElement = require('../../safe-custom-element-CEr2QRTr.cjs');
 const index = require('../../index-CaJky2qL.cjs');
 
 const style = ":host {\n    display: block\n}";
@@ -41,7 +41,7 @@ exports.LuksoDropdownOption = class LuksoDropdownOption extends shared_tailwindE
           true: ""
         },
         size: {
-          small: "paragraph-inter-12-regular rounded-4 px-2 min-h-[28px]",
+          small: "paragraph-inter-12-regular rounded-4 px-2 min-h-7",
           medium: "paragraph-inter-14-regular rounded-8 px-3 min-h-[38px]",
           large: "paragraph-inter-14-regular rounded-8 px-3 min-h-[38px]",
           "x-large": ""

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

@@ -1,5 +1,5 @@
-import { T as TailwindStyledElement, x } from '../../index-CQq_Eyeu.js';
-import { n, s as safeCustomElement } from '../../safe-custom-element-BODySN1j.js';
+import { T as TailwindStyledElement, x } from '../../index-C4AqmOTg.js';
+import { n, s as safeCustomElement } from '../../safe-custom-element-BuFHdvWD.js';
 import { c as ce } from '../../index-B9iart53.js';
 
 const style = ":host {\n    display: block\n}";
@@ -37,7 +37,7 @@ let LuksoDropdownOption = class extends TailwindStyledElement(style) {
           true: ""
         },
         size: {
-          small: "paragraph-inter-12-regular rounded-4 px-2 min-h-[28px]",
+          small: "paragraph-inter-12-regular rounded-4 px-2 min-h-7",
           medium: "paragraph-inter-14-regular rounded-8 px-3 min-h-[38px]",
           large: "paragraph-inter-14-regular rounded-8 px-3 min-h-[38px]",
           "x-large": ""

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-BFqOU6o6.cjs');
-const safeCustomElement = require('../../safe-custom-element-DTADBI4I.cjs');
+const shared_tailwindElement_index = require('../../index-CE4mgetK.cjs');
+const safeCustomElement = require('../../safe-custom-element-CEr2QRTr.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-CQq_Eyeu.js';
-import { n, s as safeCustomElement } from '../../safe-custom-element-BODySN1j.js';
+import { a as TailwindElement, x } from '../../index-C4AqmOTg.js';
+import { n, s as safeCustomElement } from '../../safe-custom-element-BuFHdvWD.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-BFqOU6o6.cjs');
-const safeCustomElement = require('../../safe-custom-element-DTADBI4I.cjs');
-const unsafeHtml = require('../../unsafe-html-Cb1yjpJn.cjs');
-const styleMap = require('../../style-map-DhbNG03r.cjs');
+const shared_tailwindElement_index = require('../../index-CE4mgetK.cjs');
+const safeCustomElement = require('../../safe-custom-element-CEr2QRTr.cjs');
+const unsafeHtml = require('../../unsafe-html-DA2kPIsd.cjs');
+const styleMap = require('../../style-map-CTRp4AN8.cjs');
 
 const style = ":host {\n  position: relative;\n  display: inline-flex;\n  line-height: 0;\n}\n:host svg {\n  display: block !important;\n}";
 

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

@@ -1,7 +1,7 @@
-import { x, T as TailwindStyledElement } from '../../index-CQq_Eyeu.js';
-import { n, s as safeCustomElement } from '../../safe-custom-element-BODySN1j.js';
-import { o as o$1 } from '../../unsafe-html-DTE5r2A7.js';
-import { o } from '../../style-map-BBz25umN.js';
+import { x, T as TailwindStyledElement } from '../../index-C4AqmOTg.js';
+import { n, s as safeCustomElement } from '../../safe-custom-element-BuFHdvWD.js';
+import { o as o$1 } from '../../unsafe-html-bTQk6t7a.js';
+import { o } from '../../style-map-CNeYTqXM.js';
 
 const style = ":host {\n  position: relative;\n  display: inline-flex;\n  line-height: 0;\n}\n:host svg {\n  display: block !important;\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-BFqOU6o6.cjs');
-const safeCustomElement = require('../../safe-custom-element-DTADBI4I.cjs');
-const state = require('../../state-ClR8ink7.cjs');
-const styleMap = require('../../style-map-DhbNG03r.cjs');
+const shared_tailwindElement_index = require('../../index-CE4mgetK.cjs');
+const safeCustomElement = require('../../safe-custom-element-CEr2QRTr.cjs');
+const state = require('../../state-DE9RNbPD.cjs');
+const styleMap = require('../../style-map-CTRp4AN8.cjs');
 const index = require('../../index-CaJky2qL.cjs');
 
 var __defProp = Object.defineProperty;

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

@@ -1,7 +1,7 @@
-import { a as TailwindElement, x } from '../../index-CQq_Eyeu.js';
-import { n, s as safeCustomElement } from '../../safe-custom-element-BODySN1j.js';
-import { r } from '../../state-n75qAK0V.js';
-import { o } from '../../style-map-BBz25umN.js';
+import { a as TailwindElement, x } from '../../index-C4AqmOTg.js';
+import { n, s as safeCustomElement } from '../../safe-custom-element-BuFHdvWD.js';
+import { r } from '../../state-D-OZ3KEf.js';
+import { o } from '../../style-map-CNeYTqXM.js';
 import { c as ce } from '../../index-B9iart53.js';
 
 var __defProp = Object.defineProperty;

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

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-BFqOU6o6.cjs');
-const safeCustomElement = require('../../safe-custom-element-DTADBI4I.cjs');
-const state = require('../../state-ClR8ink7.cjs');
+const shared_tailwindElement_index = require('../../index-CE4mgetK.cjs');
+const safeCustomElement = require('../../safe-custom-element-CEr2QRTr.cjs');
+const state = require('../../state-DE9RNbPD.cjs');
 const index = require('../../index-CaJky2qL.cjs');
 require('../lukso-icon/index.cjs');
-require('../../index-0s--O024.cjs');
+require('../../index-CX03Xr6x.cjs');
 require('../../tailwind-config.cjs');
 const axe = require('../../axe-C-H1UVi1.cjs');
 
@@ -58,7 +58,7 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
         wrapper: "group flex",
         input: `bg-neutral-100 border-solid placeholder:text-neutral-70 w-full
         outline-none transition transition-all duration-150 appearance-none`,
-        unit: `text-neutral-60 flex items-center relative border-solid transition
+        unit: `bg-neutral-100 text-neutral-60 flex items-center relative border-solid transition
         transition-all duration-150 before:bg-neutral-90 before:absolute
         before:left-0 before:w-[1px] whitespace-nowrap cursor-pointer`,
         rightIcon: "absolute top-1/2 transform -translate-y-1/2"
@@ -106,23 +106,23 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
         },
         size: {
           small: {
-            input: "h-[28px] px-3 py-1 paragraph-inter-12-regular rounded-8",
-            unit: "h-[28px] paragraph-inter-12-regular px-2 rounded-r-8 before:top-[calc(50%-6px)] before:h-[12px]",
+            input: "h-7 px-3 py-1 paragraph-inter-12-regular rounded-8",
+            unit: "h-7 paragraph-inter-12-regular px-2 rounded-r-8 before:top-[calc(50%-6px)] before:h-[12px]",
             rightIcon: "right-3"
           },
           medium: {
-            input: "h-[40px] px-3.5 py-2 paragraph-inter-14-regular rounded-[10px]",
-            unit: "h-[40px] paragraph-inter-12-regular px-3 rounded-r-[10px] before:top-[calc(50%-12px)] before:h-[24px]",
+            input: "h-10 px-3.5 py-2 paragraph-inter-14-regular rounded-[10px]",
+            unit: "h-10 paragraph-inter-12-regular px-3 rounded-r-[10px] before:top-[calc(50%-12px)] before:h-6",
             rightIcon: "right-4"
           },
           large: {
-            input: "h-[48px] px-4 py-2 paragraph-inter-14-regular rounded-12",
-            unit: "h-[48px] paragraph-inter-12-regular pl-3 pr-4 rounded-r-12 before:top-[calc(50%-12px)] before:h-[24px]",
+            input: "h-12 px-4 py-2 paragraph-inter-14-regular rounded-12",
+            unit: "h-12 paragraph-inter-12-regular pl-3 pr-4 rounded-r-12 before:top-[calc(50%-12px)] before:h-6",
             rightIcon: "right-4"
           },
           "x-large": {
-            input: "h-[68px] px-5 py-5 paragraph-inter-16-regular rounded-[14px]",
-            unit: "h-[68px] paragraph-inter-16-regular pl-3 pr-4 rounded-r-[14px] before:top-[calc(50%-12px)] before:h-[24px]",
+            input: "h-17 px-5 py-5 paragraph-inter-16-regular rounded-[14px]",
+            unit: "h-17 paragraph-inter-16-regular pl-3 pr-4 rounded-r-[14px] before:top-[calc(50%-12px)] before:h-6",
             rightIcon: "right-4"
           }
         },

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":"AAKA,OAAO,yBAAyB,CAAA;AAChC,OAAO,6BAA6B,CAAA;AAKpC,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,CAAU;IAGzB,SAAS,SAAK;IAGd,oBAAoB,UAAQ;IAG5B,iBAAiB,UAAQ;IAGzB,OAAO,CAAC,QAAQ,CAAQ;IAGxB,OAAO,CAAC,YAAY,CAAQ;IAE5B,OAAO,CAAC,WAAW,CAmHjB;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;IAUhC,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":"AAKA,OAAO,yBAAyB,CAAA;AAChC,OAAO,6BAA6B,CAAA;AAKpC,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,CAAU;IAGzB,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;IAUhC,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,9 +1,9 @@
-import { T as TailwindStyledElement, E, x } from '../../index-CQq_Eyeu.js';
-import { n, s as safeCustomElement } from '../../safe-custom-element-BODySN1j.js';
-import { r } from '../../state-n75qAK0V.js';
+import { T as TailwindStyledElement, E, x } from '../../index-C4AqmOTg.js';
+import { n, s as safeCustomElement } from '../../safe-custom-element-BuFHdvWD.js';
+import { r } from '../../state-D-OZ3KEf.js';
 import { c as ce } from '../../index-B9iart53.js';
 import '../lukso-icon/index.js';
-import '../../index-DZXmXufN.js';
+import '../../index-BEawLNoE.js';
 import '../../tailwind-config.js';
 import { c as cn } from '../../axe-BK9JSROP.js';
 
@@ -54,7 +54,7 @@ let LuksoInput = class extends TailwindStyledElement(style) {
         wrapper: "group flex",
         input: `bg-neutral-100 border-solid placeholder:text-neutral-70 w-full
         outline-none transition transition-all duration-150 appearance-none`,
-        unit: `text-neutral-60 flex items-center relative border-solid transition
+        unit: `bg-neutral-100 text-neutral-60 flex items-center relative border-solid transition
         transition-all duration-150 before:bg-neutral-90 before:absolute
         before:left-0 before:w-[1px] whitespace-nowrap cursor-pointer`,
         rightIcon: "absolute top-1/2 transform -translate-y-1/2"
@@ -102,23 +102,23 @@ let LuksoInput = class extends TailwindStyledElement(style) {
         },
         size: {
           small: {
-            input: "h-[28px] px-3 py-1 paragraph-inter-12-regular rounded-8",
-            unit: "h-[28px] paragraph-inter-12-regular px-2 rounded-r-8 before:top-[calc(50%-6px)] before:h-[12px]",
+            input: "h-7 px-3 py-1 paragraph-inter-12-regular rounded-8",
+            unit: "h-7 paragraph-inter-12-regular px-2 rounded-r-8 before:top-[calc(50%-6px)] before:h-[12px]",
             rightIcon: "right-3"
           },
           medium: {
-            input: "h-[40px] px-3.5 py-2 paragraph-inter-14-regular rounded-[10px]",
-            unit: "h-[40px] paragraph-inter-12-regular px-3 rounded-r-[10px] before:top-[calc(50%-12px)] before:h-[24px]",
+            input: "h-10 px-3.5 py-2 paragraph-inter-14-regular rounded-[10px]",
+            unit: "h-10 paragraph-inter-12-regular px-3 rounded-r-[10px] before:top-[calc(50%-12px)] before:h-6",
             rightIcon: "right-4"
           },
           large: {
-            input: "h-[48px] px-4 py-2 paragraph-inter-14-regular rounded-12",
-            unit: "h-[48px] paragraph-inter-12-regular pl-3 pr-4 rounded-r-12 before:top-[calc(50%-12px)] before:h-[24px]",
+            input: "h-12 px-4 py-2 paragraph-inter-14-regular rounded-12",
+            unit: "h-12 paragraph-inter-12-regular pl-3 pr-4 rounded-r-12 before:top-[calc(50%-12px)] before:h-6",
             rightIcon: "right-4"
           },
           "x-large": {
-            input: "h-[68px] px-5 py-5 paragraph-inter-16-regular rounded-[14px]",
-            unit: "h-[68px] paragraph-inter-16-regular pl-3 pr-4 rounded-r-[14px] before:top-[calc(50%-12px)] before:h-[24px]",
+            input: "h-17 px-5 py-5 paragraph-inter-16-regular rounded-[14px]",
+            unit: "h-17 paragraph-inter-16-regular pl-3 pr-4 rounded-r-[14px] before:top-[calc(50%-12px)] before:h-6",
             rightIcon: "right-4"
           }
         },