@lukso/web-components 1.119.0 → 1.119.1

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

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-68c61387.cjs');
-const property = require('../../property-bf2eee83.cjs');
-const state = require('../../state-375dfffc.cjs');
+const shared_tailwindElement_index = require('../../index-11ee2a36.cjs');
+const property = require('../../property-c2b27afb.cjs');
+const state = require('../../state-88ac4aa9.cjs');
 const index = require('../../index-2b104ecb.cjs');
 require('../../tailwind-config.cjs');
 const cn = require('../../cn-b6daa995.cjs');
 require('../lukso-icon/index.cjs');
-require('../../style-map-8e54f508.cjs');
+require('../../style-map-6e0d4ef7.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,11 +1,11 @@
-import { T as TailwindStyledElement, x, E } from '../../index-92dc158d.js';
-import { n, t } from '../../property-eaa52bd9.js';
-import { r } from '../../state-1fc9a224.js';
+import { T as TailwindStyledElement, x, E } from '../../index-be30d9db.js';
+import { n, t } from '../../property-23ddd718.js';
+import { r } from '../../state-f46a7e17.js';
 import { c as ce } from '../../index-d14b6a34.js';
 import '../../tailwind-config.js';
 import { c as cn } from '../../cn-90c03edf.js';
 import '../lukso-icon/index.js';
-import '../../style-map-5aef4b6f.js';
+import '../../style-map-129fa2d5.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,8 +2,8 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-68c61387.cjs');
-const property = require('../../property-bf2eee83.cjs');
+const shared_tailwindElement_index = require('../../index-11ee2a36.cjs');
+const property = require('../../property-c2b27afb.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-92dc158d.js';
-import { n, t } from '../../property-eaa52bd9.js';
+import { a as TailwindElement, x } from '../../index-be30d9db.js';
+import { n, t } from '../../property-23ddd718.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-68c61387.cjs');
-const property = require('../../property-bf2eee83.cjs');
-const state = require('../../state-375dfffc.cjs');
+const shared_tailwindElement_index = require('../../index-11ee2a36.cjs');
+const property = require('../../property-c2b27afb.cjs');
+const state = require('../../state-88ac4aa9.cjs');
 const index = require('../../index-2b104ecb.cjs');
 require('../lukso-icon/index.cjs');
 require('../lukso-tag/index.cjs');
-require('../../style-map-8e54f508.cjs');
+require('../../style-map-6e0d4ef7.cjs');
 require('../../directive-8278ab14.cjs');
-require('../../index-3926da18.cjs');
+require('../../index-28b795be.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-92dc158d.js';
-import { n, t } from '../../property-eaa52bd9.js';
-import { r } from '../../state-1fc9a224.js';
+import { a as TailwindElement, x, E } from '../../index-be30d9db.js';
+import { n, t } from '../../property-23ddd718.js';
+import { r } from '../../state-f46a7e17.js';
 import { c as ce } from '../../index-d14b6a34.js';
 import '../lukso-icon/index.js';
 import '../lukso-tag/index.js';
-import '../../style-map-5aef4b6f.js';
+import '../../style-map-129fa2d5.js';
 import '../../directive-2bb7789e.js';
-import '../../index-7bb28a79.js';
+import '../../index-5e0baae9.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-68c61387.cjs');
-const property = require('../../property-bf2eee83.cjs');
-const state = require('../../state-375dfffc.cjs');
+const shared_tailwindElement_index = require('../../index-11ee2a36.cjs');
+const property = require('../../property-c2b27afb.cjs');
+const state = require('../../state-88ac4aa9.cjs');
 const index = require('../../index-2b104ecb.cjs');
 require('../lukso-icon/index.cjs');
 require('../lukso-button/index.cjs');
-require('../../style-map-8e54f508.cjs');
+require('../../style-map-6e0d4ef7.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-92dc158d.js';
-import { n, t } from '../../property-eaa52bd9.js';
-import { r } from '../../state-1fc9a224.js';
+import { T as TailwindStyledElement, x } from '../../index-be30d9db.js';
+import { n, t } from '../../property-23ddd718.js';
+import { r } from '../../state-f46a7e17.js';
 import { c as ce } from '../../index-d14b6a34.js';
 import '../lukso-icon/index.js';
 import '../lukso-button/index.js';
-import '../../style-map-5aef4b6f.js';
+import '../../style-map-129fa2d5.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-68c61387.cjs');
-require('../../property-bf2eee83.cjs');
-const components_luksoProfile_index = require('../../index-67915f32.cjs');
+require('../../index-11ee2a36.cjs');
+require('../../property-c2b27afb.cjs');
+const components_luksoProfile_index = require('../../index-d95aa803.cjs');
 require('../../index-2b104ecb.cjs');
 require('../lukso-image/index.cjs');
-require('../../state-375dfffc.cjs');
-require('../../style-map-8e54f508.cjs');
+require('../../state-88ac4aa9.cjs');
+require('../../style-map-6e0d4ef7.cjs');
 require('../../directive-8278ab14.cjs');
 
 

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

@@ -1,8 +1,8 @@
-import '../../index-92dc158d.js';
-import '../../property-eaa52bd9.js';
-export { L as LuksoProfile } from '../../index-ff8d75cd.js';
+import '../../index-be30d9db.js';
+import '../../property-23ddd718.js';
+export { L as LuksoProfile } from '../../index-6e86d3a6.js';
 import '../../index-d14b6a34.js';
 import '../lukso-image/index.js';
-import '../../state-1fc9a224.js';
-import '../../style-map-5aef4b6f.js';
+import '../../state-f46a7e17.js';
+import '../../style-map-129fa2d5.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-68c61387.cjs');
-const property = require('../../property-bf2eee83.cjs');
-const styleMap = require('../../style-map-8e54f508.cjs');
+const shared_tailwindElement_index = require('../../index-11ee2a36.cjs');
+const property = require('../../property-c2b27afb.cjs');
+const styleMap = require('../../style-map-6e0d4ef7.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-92dc158d.js';
-import { n, t } from '../../property-eaa52bd9.js';
-import { o } from '../../style-map-5aef4b6f.js';
+import { a as TailwindElement, x } from '../../index-be30d9db.js';
+import { n, t } from '../../property-23ddd718.js';
+import { o } from '../../style-map-129fa2d5.js';
 import '../../tailwind-config.js';
 import { c as cn } from '../../cn-90c03edf.js';
 import '../../directive-2bb7789e.js';

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-68c61387.cjs');
-const property = require('../../property-bf2eee83.cjs');
+const shared_tailwindElement_index = require('../../index-11ee2a36.cjs');
+const property = require('../../property-c2b27afb.cjs');
 const directive = require('../../directive-8278ab14.cjs');
 
 /**

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

@@ -1,5 +1,5 @@
-import { E, b as T, a as TailwindElement, x } from '../../index-92dc158d.js';
-import { n, t as t$1 } from '../../property-eaa52bd9.js';
+import { E, b as T, a as TailwindElement, x } from '../../index-be30d9db.js';
+import { n, t as t$1 } from '../../property-23ddd718.js';
 import { i, t, e as e$1 } from '../../directive-2bb7789e.js';
 
 /**

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

@@ -2,22 +2,23 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const components_luksoProfile_index = require('../../index-67915f32.cjs');
-const shared_tailwindElement_index = require('../../index-68c61387.cjs');
-const property = require('../../property-bf2eee83.cjs');
-const state = require('../../state-375dfffc.cjs');
+const components_luksoProfile_index = require('../../index-d95aa803.cjs');
+const shared_tailwindElement_index = require('../../index-11ee2a36.cjs');
+const property = require('../../property-c2b27afb.cjs');
+const state = require('../../state-88ac4aa9.cjs');
 const index = require('../../index-2b104ecb.cjs');
-require('../../index-104cf124.cjs');
+require('../lukso-dropdown/index.cjs');
 require('../lukso-dropdown-option/index.cjs');
 require('../lukso-icon/index.cjs');
 require('../lukso-input/index.cjs');
 require('../lukso-username/index.cjs');
 require('../lukso-image/index.cjs');
-require('../../style-map-8e54f508.cjs');
+require('../../style-map-6e0d4ef7.cjs');
 require('../../directive-8278ab14.cjs');
+require('../../uniq-id-f0b18085.cjs');
 require('../../tailwind-config.cjs');
 require('../../cn-b6daa995.cjs');
-require('../../index-3926da18.cjs');
+require('../../index-28b795be.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-search/index.js

@@ -1,19 +1,20 @@
-import { m as makeBlockie } from '../../index-ff8d75cd.js';
-import { T as TailwindStyledElement, x, E } from '../../index-92dc158d.js';
-import { n, t } from '../../property-eaa52bd9.js';
-import { r } from '../../state-1fc9a224.js';
+import { m as makeBlockie } from '../../index-6e86d3a6.js';
+import { T as TailwindStyledElement, x, E } from '../../index-be30d9db.js';
+import { n, t } from '../../property-23ddd718.js';
+import { r } from '../../state-f46a7e17.js';
 import { c as ce } from '../../index-d14b6a34.js';
-import '../../index-12775596.js';
+import '../lukso-dropdown/index.js';
 import '../lukso-dropdown-option/index.js';
 import '../lukso-icon/index.js';
 import '../lukso-input/index.js';
 import '../lukso-username/index.js';
 import '../lukso-image/index.js';
-import '../../style-map-5aef4b6f.js';
+import '../../style-map-129fa2d5.js';
 import '../../directive-2bb7789e.js';
+import '../../uniq-id-ce2d165c.js';
 import '../../tailwind-config.js';
 import '../../cn-90c03edf.js';
-import '../../index-7bb28a79.js';
+import '../../index-5e0baae9.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-select/index.cjs

@@ -2,19 +2,20 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-68c61387.cjs');
-const property = require('../../property-bf2eee83.cjs');
-const state = require('../../state-375dfffc.cjs');
+const shared_tailwindElement_index = require('../../index-11ee2a36.cjs');
+const property = require('../../property-c2b27afb.cjs');
+const state = require('../../state-88ac4aa9.cjs');
 const index = require('../../index-2b104ecb.cjs');
-const components_luksoProfile_index = require('../../index-67915f32.cjs');
+const components_luksoProfile_index = require('../../index-d95aa803.cjs');
 require('../lukso-icon/index.cjs');
 require('../lukso-username/index.cjs');
-const components_luksoDropdown_index = require('../../index-104cf124.cjs');
+require('../lukso-dropdown/index.cjs');
 require('../lukso-dropdown-option/index.cjs');
+const uniqId = require('../../uniq-id-f0b18085.cjs');
 require('../lukso-image/index.cjs');
-require('../../style-map-8e54f508.cjs');
+require('../../style-map-6e0d4ef7.cjs');
 require('../../directive-8278ab14.cjs');
-require('../../index-3926da18.cjs');
+require('../../index-28b795be.cjs');
 require('../../tailwind-config.cjs');
 require('../../cn-b6daa995.cjs');
 
@@ -32,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();
-    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
+    if (!this.id) {
+      this.id = uniqId.uniqId();
+    }
+  }
+  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"
       }
-    });
-    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"
-        }
+    }
+  });
+  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.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"
-        }
+    }
+  });
+  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,16 +1,17 @@
-import { T as TailwindStyledElement, x, E } from '../../index-92dc158d.js';
-import { n, t } from '../../property-eaa52bd9.js';
-import { r } from '../../state-1fc9a224.js';
+import { T as TailwindStyledElement, x, E } from '../../index-be30d9db.js';
+import { n, t } from '../../property-23ddd718.js';
+import { r } from '../../state-f46a7e17.js';
 import { c as ce } from '../../index-d14b6a34.js';
-import { m as makeBlockie } from '../../index-ff8d75cd.js';
+import { m as makeBlockie } from '../../index-6e86d3a6.js';
 import '../lukso-icon/index.js';
 import '../lukso-username/index.js';
-import { u as uniqId } from '../../index-12775596.js';
+import '../lukso-dropdown/index.js';
 import '../lukso-dropdown-option/index.js';
+import { u as uniqId } from '../../uniq-id-ce2d165c.js';
 import '../lukso-image/index.js';
-import '../../style-map-5aef4b6f.js';
+import '../../style-map-129fa2d5.js';
 import '../../directive-2bb7789e.js';
-import '../../index-7bb28a79.js';
+import '../../index-5e0baae9.js';
 import '../../tailwind-config.js';
 import '../../cn-90c03edf.js';
 
@@ -28,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();
-    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
+    if (!this.id) {
+      this.id = uniqId();
+    }
+  }
+  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"
       }
-    });
-    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"
-        }
+    }
+  });
+  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.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"
-        }
+    }
+  });
+  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));