@lukso/web-components 1.110.0 → 1.112.0

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-6457c2f8.cjs');
+const shared_tailwindElement_index = require('../../index-4c212653.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
 const state = require('../../state-d9fb972b.cjs');
-const styleMap = require('../../style-map-54c139bb.cjs');
+const styleMap = require('../../style-map-2f57cddf.cjs');
 const index = require('../../index-1d3f4a5a.cjs');
 require('../../directive-8278ab14.cjs');
 require('../../bundle-mjs-d58a83c6.cjs');

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

@@ -1,7 +1,7 @@
-import { a as TailwindElement, x } from '../../index-0590cf31.js';
+import { a as TailwindElement, x } from '../../index-a7ef4df5.js';
 import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
 import { t } from '../../state-b9ca4e74.js';
-import { o } from '../../style-map-7a555e98.js';
+import { o } from '../../style-map-cca13c1d.js';
 import { c as ce } from '../../index-ca8e900d.js';
 import '../../directive-2bb7789e.js';
 import '../../bundle-mjs-fbc6e2a8.js';

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-6457c2f8.cjs');
+const shared_tailwindElement_index = require('../../index-4c212653.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
 const state = require('../../state-d9fb972b.cjs');
 const index = require('../../index-1d3f4a5a.cjs');
@@ -10,7 +10,7 @@ require('../../tailwind-config.cjs');
 const cn = require('../../cn-5ceac001.cjs');
 require('../lukso-icon/index.cjs');
 require('../../bundle-mjs-d58a83c6.cjs');
-require('../../style-map-54c139bb.cjs');
+require('../../style-map-2f57cddf.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}";

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

@@ -1,4 +1,4 @@
-import { T as TailwindStyledElement, x, A } from '../../index-0590cf31.js';
+import { T as TailwindStyledElement, x, A } from '../../index-a7ef4df5.js';
 import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
 import { t } from '../../state-b9ca4e74.js';
 import { c as ce } from '../../index-ca8e900d.js';
@@ -6,7 +6,7 @@ import '../../tailwind-config.js';
 import { c as cn } from '../../cn-b54dcc61.js';
 import '../lukso-icon/index.js';
 import '../../bundle-mjs-fbc6e2a8.js';
-import '../../style-map-7a555e98.js';
+import '../../style-map-cca13c1d.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}";

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-6457c2f8.cjs');
+const shared_tailwindElement_index = require('../../index-4c212653.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
 const index = require('../../index-1d3f4a5a.cjs');
 require('../../bundle-mjs-d58a83c6.cjs');

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

@@ -1,4 +1,4 @@
-import { a as TailwindElement, x } from '../../index-0590cf31.js';
+import { a as TailwindElement, x } from '../../index-a7ef4df5.js';
 import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
 import { c as ce } from '../../index-ca8e900d.js';
 import '../../bundle-mjs-fbc6e2a8.js';

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

@@ -2,16 +2,16 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-6457c2f8.cjs');
+const shared_tailwindElement_index = require('../../index-4c212653.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
 const state = require('../../state-d9fb972b.cjs');
 const index = require('../../index-1d3f4a5a.cjs');
 require('../lukso-icon/index.cjs');
 require('../lukso-tag/index.cjs');
 require('../../bundle-mjs-d58a83c6.cjs');
-require('../../style-map-54c139bb.cjs');
+require('../../style-map-2f57cddf.cjs');
 require('../../directive-8278ab14.cjs');
-require('../../index-0917a814.cjs');
+require('../../index-09e32e34.cjs');
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

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

@@ -1,13 +1,13 @@
-import { a as TailwindElement, x, A } from '../../index-0590cf31.js';
+import { a as TailwindElement, x, A } from '../../index-a7ef4df5.js';
 import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
 import { t } from '../../state-b9ca4e74.js';
 import { c as ce } from '../../index-ca8e900d.js';
 import '../lukso-icon/index.js';
 import '../lukso-tag/index.js';
 import '../../bundle-mjs-fbc6e2a8.js';
-import '../../style-map-7a555e98.js';
+import '../../style-map-cca13c1d.js';
 import '../../directive-2bb7789e.js';
-import '../../index-adf2fc92.js';
+import '../../index-4f97c98a.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

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

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-6457c2f8.cjs');
+const shared_tailwindElement_index = require('../../index-4c212653.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
 const state = require('../../state-d9fb972b.cjs');
 const index = require('../../index-1d3f4a5a.cjs');
 require('../lukso-icon/index.cjs');
 require('../lukso-button/index.cjs');
 require('../../bundle-mjs-d58a83c6.cjs');
-require('../../style-map-54c139bb.cjs');
+require('../../style-map-2f57cddf.cjs');
 require('../../directive-8278ab14.cjs');
 require('../../tailwind-config.cjs');
 require('../../cn-5ceac001.cjs');

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

@@ -1,11 +1,11 @@
-import { T as TailwindStyledElement, x } from '../../index-0590cf31.js';
+import { T as TailwindStyledElement, x } from '../../index-a7ef4df5.js';
 import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
 import { t } from '../../state-b9ca4e74.js';
 import { c as ce } from '../../index-ca8e900d.js';
 import '../lukso-icon/index.js';
 import '../lukso-button/index.js';
 import '../../bundle-mjs-fbc6e2a8.js';
-import '../../style-map-7a555e98.js';
+import '../../style-map-cca13c1d.js';
 import '../../directive-2bb7789e.js';
 import '../../tailwind-config.js';
 import '../../cn-b54dcc61.js';

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

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-6457c2f8.cjs');
+const shared_tailwindElement_index = require('../../index-4c212653.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
 const index = require('../../index-1d3f4a5a.cjs');
 require('../lukso-image/index.cjs');
 require('../../bundle-mjs-d58a83c6.cjs');
 require('../../state-d9fb972b.cjs');
-require('../../style-map-54c139bb.cjs');
+require('../../style-map-2f57cddf.cjs');
 require('../../directive-8278ab14.cjs');
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};

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

@@ -1,10 +1,10 @@
-import { a as TailwindElement, x } from '../../index-0590cf31.js';
+import { a as TailwindElement, x } from '../../index-a7ef4df5.js';
 import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
 import { c as ce } from '../../index-ca8e900d.js';
 import '../lukso-image/index.js';
 import '../../bundle-mjs-fbc6e2a8.js';
 import '../../state-b9ca4e74.js';
-import '../../style-map-7a555e98.js';
+import '../../style-map-cca13c1d.js';
 import '../../directive-2bb7789e.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-6457c2f8.cjs');
+const shared_tailwindElement_index = require('../../index-4c212653.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
-const styleMap = require('../../style-map-54c139bb.cjs');
+const styleMap = require('../../style-map-2f57cddf.cjs');
 require('../../tailwind-config.cjs');
 const cn = require('../../cn-5ceac001.cjs');
 require('../../directive-8278ab14.cjs');

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

@@ -1,6 +1,6 @@
-import { a as TailwindElement, x } from '../../index-0590cf31.js';
+import { a as TailwindElement, x } from '../../index-a7ef4df5.js';
 import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
-import { o } from '../../style-map-7a555e98.js';
+import { o } from '../../style-map-cca13c1d.js';
 import '../../tailwind-config.js';
 import { c as cn } from '../../cn-b54dcc61.js';
 import '../../directive-2bb7789e.js';

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-6457c2f8.cjs');
+const shared_tailwindElement_index = require('../../index-4c212653.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-d5e45650.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-0590cf31.js';
+import { A, b as T, a as TailwindElement, x } from '../../index-a7ef4df5.js';
 import { n, e as e$2 } from '../../query-assigned-elements-1c8c9e90.js';
 import { i, t, e as e$1 } from '../../directive-2bb7789e.js';
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-6457c2f8.cjs');
+const shared_tailwindElement_index = require('../../index-4c212653.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
 const state = require('../../state-d9fb972b.cjs');
 const index = require('../../index-1d3f4a5a.cjs');
@@ -10,13 +10,13 @@ require('../lukso-icon/index.cjs');
 require('../lukso-profile/index.cjs');
 require('../lukso-username/index.cjs');
 require('../lukso-input/index.cjs');
-require('../../index-abeb568f.cjs');
+require('../../index-71b9ef80.cjs');
 require('../lukso-dropdown-option/index.cjs');
 require('../../bundle-mjs-d58a83c6.cjs');
-require('../../style-map-54c139bb.cjs');
+require('../../style-map-2f57cddf.cjs');
 require('../../directive-8278ab14.cjs');
 require('../lukso-image/index.cjs');
-require('../../index-0917a814.cjs');
+require('../../index-09e32e34.cjs');
 require('../../tailwind-config.cjs');
 require('../../cn-5ceac001.cjs');
 

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

@@ -1,4 +1,4 @@
-import { T as TailwindStyledElement, x, A } from '../../index-0590cf31.js';
+import { T as TailwindStyledElement, x, A } from '../../index-a7ef4df5.js';
 import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
 import { t } from '../../state-b9ca4e74.js';
 import { c as ce } from '../../index-ca8e900d.js';
@@ -6,13 +6,13 @@ import '../lukso-icon/index.js';
 import '../lukso-profile/index.js';
 import '../lukso-username/index.js';
 import '../lukso-input/index.js';
-import '../../index-58d4add3.js';
+import '../../index-c026f363.js';
 import '../lukso-dropdown-option/index.js';
 import '../../bundle-mjs-fbc6e2a8.js';
-import '../../style-map-7a555e98.js';
+import '../../style-map-cca13c1d.js';
 import '../../directive-2bb7789e.js';
 import '../lukso-image/index.js';
-import '../../index-adf2fc92.js';
+import '../../index-4f97c98a.js';
 import '../../tailwind-config.js';
 import '../../cn-b54dcc61.js';
 

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

@@ -2,20 +2,20 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-6457c2f8.cjs');
+const shared_tailwindElement_index = require('../../index-4c212653.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
 const state = require('../../state-d9fb972b.cjs');
 const index = require('../../index-1d3f4a5a.cjs');
 require('../lukso-icon/index.cjs');
 require('../lukso-profile/index.cjs');
 require('../lukso-username/index.cjs');
-const components_luksoDropdown_index = require('../../index-abeb568f.cjs');
+const components_luksoDropdown_index = require('../../index-71b9ef80.cjs');
 require('../lukso-dropdown-option/index.cjs');
 require('../../bundle-mjs-d58a83c6.cjs');
-require('../../style-map-54c139bb.cjs');
+require('../../style-map-2f57cddf.cjs');
 require('../../directive-8278ab14.cjs');
 require('../lukso-image/index.cjs');
-require('../../index-0917a814.cjs');
+require('../../index-09e32e34.cjs');
 require('../../tailwind-config.cjs');
 require('../../cn-5ceac001.cjs');
 
@@ -33,84 +33,84 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 exports.LuksoSelect = class LuksoSelect extends shared_tailwindElement_index.TailwindStyledElement(style) {
-  value = "";
-  placeholder = "";
-  label = "";
-  id = "";
-  description = "";
-  error = "";
-  isFullWidth = false;
-  isReadonly = false;
-  isDisabled = false;
-  borderless = false;
-  options = "";
-  selected = void 0;
-  isOpen = false;
-  openTop = false;
-  isLargeIcon = false;
-  isRight = false;
-  size = "medium";
-  showSelectionCounter = false;
-  optionsParsed = [];
-  valueParsed = void 0;
   constructor() {
     super();
-    if (!this.id) {
-      this.id = components_luksoDropdown_index.uniqId();
-    }
-  }
-  inputStyles = index.ce({
-    base: `bg-neutral-100
+    this.value = "";
+    this.placeholder = "";
+    this.label = "";
+    this.id = "";
+    this.description = "";
+    this.error = "";
+    this.isFullWidth = false;
+    this.isReadonly = false;
+    this.isDisabled = false;
+    this.borderless = false;
+    this.options = "";
+    this.selected = void 0;
+    this.isOpen = false;
+    this.openTop = false;
+    this.isLargeIcon = false;
+    this.isRight = false;
+    this.size = "medium";
+    this.showSelectionCounter = false;
+    this.optionsParsed = [];
+    this.valueParsed = void 0;
+    this.inputStyles = index.ce({
+      base: `bg-neutral-100
       border border-solid placeholder:text-neutral-70 select-none whitespace-nowrap
       outline-none transition transition-all duration-150 appearance-none
       text-neutral-20 cursor-pointer border-neutral-90 group-hover:border-neutral-35
       flex items-center`,
-    variants: {
-      isFullWidth: {
-        true: "w-full"
-      },
-      isDisabled: {
-        true: "cursor-not-allowed text-neutral-60 group-hover:border-neutral-90"
-      },
-      hasError: {
-        true: "border-red-85 group-hover:border-red-65"
-      },
-      borderless: {
-        true: "border-0"
-      },
-      size: {
-        small: "h-[28px] px-3 py-2 pr-8 paragraph-inter-12-regular rounded-8",
-        medium: "h-[48px] px-4 py-3 pr-11 paragraph-inter-14-regular rounded-12"
+      variants: {
+        isFullWidth: {
+          true: "w-full"
+        },
+        isDisabled: {
+          true: "cursor-not-allowed text-neutral-60 group-hover:border-neutral-90"
+        },
+        hasError: {
+          true: "border-red-85 group-hover:border-red-65"
+        },
+        borderless: {
+          true: "border-0"
+        },
+        size: {
+          small: "h-[28px] px-3 py-2 pr-8 paragraph-inter-12-regular rounded-8",
+          medium: "h-[48px] px-4 py-3 pr-11 paragraph-inter-14-regular rounded-12"
+        }
       }
-    }
-  });
-  counterStyles = index.ce({
-    base: "border border-neutral-20",
-    variants: {
-      isDisabled: {
-        true: "opacity-60 cursor-not-allowed"
-      },
-      size: {
-        small: "paragraph-inter-10-semi-bold rounded-4 py-[1px] px-[5px] ml-1.5",
-        medium: "paragraph-inter-14-semi-bold rounded-8 py-[2px] px-[10px] ml-3"
+    });
+    this.counterStyles = index.ce({
+      base: "border border-neutral-20",
+      variants: {
+        isDisabled: {
+          true: "opacity-60 cursor-not-allowed"
+        },
+        size: {
+          small: "paragraph-inter-10-semi-bold rounded-4 py-[1px] px-[5px] ml-1.5",
+          medium: "paragraph-inter-14-semi-bold rounded-8 py-[2px] px-[10px] ml-3"
+        }
       }
-    }
-  });
-  iconStyles = index.ce({
-    base: "absolute right-0 transition cursor-pointer",
-    variants: {
-      isDisabled: {
-        true: "opacity-60 cursor-not-allowed"
-      },
-      isOpen: {
-        true: "rotate-180"
-      },
-      size: {
-        small: "mr-2",
-        medium: "mr-3"
+    });
+    this.iconStyles = index.ce({
+      base: "absolute right-0 transition cursor-pointer",
+      variants: {
+        isDisabled: {
+          true: "opacity-60 cursor-not-allowed"
+        },
+        isOpen: {
+          true: "rotate-180"
+        },
+        size: {
+          small: "mr-2",
+          medium: "mr-3"
+        }
       }
+    });
+    if (!this.id) {
+      this.id = components_luksoDropdown_index.uniqId();
     }
-  });
+  }
   connectedCallback() {
     super.connectedCallback();
     window.addEventListener("click", this.handleOutsideDropdownClick.bind(this));

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

@@ -1,17 +1,17 @@
-import { T as TailwindStyledElement, x, A } from '../../index-0590cf31.js';
+import { T as TailwindStyledElement, x, A } from '../../index-a7ef4df5.js';
 import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
 import { t } from '../../state-b9ca4e74.js';
 import { c as ce } from '../../index-ca8e900d.js';
 import '../lukso-icon/index.js';
 import '../lukso-profile/index.js';
 import '../lukso-username/index.js';
-import { u as uniqId } from '../../index-58d4add3.js';
+import { u as uniqId } from '../../index-c026f363.js';
 import '../lukso-dropdown-option/index.js';
 import '../../bundle-mjs-fbc6e2a8.js';
-import '../../style-map-7a555e98.js';
+import '../../style-map-cca13c1d.js';
 import '../../directive-2bb7789e.js';
 import '../lukso-image/index.js';
-import '../../index-adf2fc92.js';
+import '../../index-4f97c98a.js';
 import '../../tailwind-config.js';
 import '../../cn-b54dcc61.js';
 
@@ -29,84 +29,84 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 let LuksoSelect = class extends TailwindStyledElement(style) {
-  value = "";
-  placeholder = "";
-  label = "";
-  id = "";
-  description = "";
-  error = "";
-  isFullWidth = false;
-  isReadonly = false;
-  isDisabled = false;
-  borderless = false;
-  options = "";
-  selected = void 0;
-  isOpen = false;
-  openTop = false;
-  isLargeIcon = false;
-  isRight = false;
-  size = "medium";
-  showSelectionCounter = false;
-  optionsParsed = [];
-  valueParsed = void 0;
   constructor() {
     super();
-    if (!this.id) {
-      this.id = uniqId();
-    }
-  }
-  inputStyles = ce({
-    base: `bg-neutral-100
+    this.value = "";
+    this.placeholder = "";
+    this.label = "";
+    this.id = "";
+    this.description = "";
+    this.error = "";
+    this.isFullWidth = false;
+    this.isReadonly = false;
+    this.isDisabled = false;
+    this.borderless = false;
+    this.options = "";
+    this.selected = void 0;
+    this.isOpen = false;
+    this.openTop = false;
+    this.isLargeIcon = false;
+    this.isRight = false;
+    this.size = "medium";
+    this.showSelectionCounter = false;
+    this.optionsParsed = [];
+    this.valueParsed = void 0;
+    this.inputStyles = ce({
+      base: `bg-neutral-100
       border border-solid placeholder:text-neutral-70 select-none whitespace-nowrap
       outline-none transition transition-all duration-150 appearance-none
       text-neutral-20 cursor-pointer border-neutral-90 group-hover:border-neutral-35
       flex items-center`,
-    variants: {
-      isFullWidth: {
-        true: "w-full"
-      },
-      isDisabled: {
-        true: "cursor-not-allowed text-neutral-60 group-hover:border-neutral-90"
-      },
-      hasError: {
-        true: "border-red-85 group-hover:border-red-65"
-      },
-      borderless: {
-        true: "border-0"
-      },
-      size: {
-        small: "h-[28px] px-3 py-2 pr-8 paragraph-inter-12-regular rounded-8",
-        medium: "h-[48px] px-4 py-3 pr-11 paragraph-inter-14-regular rounded-12"
+      variants: {
+        isFullWidth: {
+          true: "w-full"
+        },
+        isDisabled: {
+          true: "cursor-not-allowed text-neutral-60 group-hover:border-neutral-90"
+        },
+        hasError: {
+          true: "border-red-85 group-hover:border-red-65"
+        },
+        borderless: {
+          true: "border-0"
+        },
+        size: {
+          small: "h-[28px] px-3 py-2 pr-8 paragraph-inter-12-regular rounded-8",
+          medium: "h-[48px] px-4 py-3 pr-11 paragraph-inter-14-regular rounded-12"
+        }
       }
-    }
-  });
-  counterStyles = ce({
-    base: "border border-neutral-20",
-    variants: {
-      isDisabled: {
-        true: "opacity-60 cursor-not-allowed"
-      },
-      size: {
-        small: "paragraph-inter-10-semi-bold rounded-4 py-[1px] px-[5px] ml-1.5",
-        medium: "paragraph-inter-14-semi-bold rounded-8 py-[2px] px-[10px] ml-3"
+    });
+    this.counterStyles = ce({
+      base: "border border-neutral-20",
+      variants: {
+        isDisabled: {
+          true: "opacity-60 cursor-not-allowed"
+        },
+        size: {
+          small: "paragraph-inter-10-semi-bold rounded-4 py-[1px] px-[5px] ml-1.5",
+          medium: "paragraph-inter-14-semi-bold rounded-8 py-[2px] px-[10px] ml-3"
+        }
       }
-    }
-  });
-  iconStyles = ce({
-    base: "absolute right-0 transition cursor-pointer",
-    variants: {
-      isDisabled: {
-        true: "opacity-60 cursor-not-allowed"
-      },
-      isOpen: {
-        true: "rotate-180"
-      },
-      size: {
-        small: "mr-2",
-        medium: "mr-3"
+    });
+    this.iconStyles = ce({
+      base: "absolute right-0 transition cursor-pointer",
+      variants: {
+        isDisabled: {
+          true: "opacity-60 cursor-not-allowed"
+        },
+        isOpen: {
+          true: "rotate-180"
+        },
+        size: {
+          small: "mr-2",
+          medium: "mr-3"
+        }
       }
+    });
+    if (!this.id) {
+      this.id = uniqId();
     }
-  });
+  }
   connectedCallback() {
     super.connectedCallback();
     window.addEventListener("click", this.handleOutsideDropdownClick.bind(this));