@nylas/react 2.0.4 → 2.1.0

package/dist/{multi-select-dropdown.entry-15e887be.js → multi-select-dropdown.entry-9c9d05c1.js}

@@ -1,15 +1,18 @@
-import { r as d, a as c, b as i, h as s, H as p, g as b } from "./index-2084ffd9.js";
+import { r as d, c, h as l, H as p, g as b } from "./index-025be398.js";
+import { b as i } from "./utils-31933f5d-15041585.js";
+import "@nylas/web-elements";
 import "react";
+import "@nylas/connect";
 import "react/jsx-runtime";
 import "react-dom";
-const f = ':host{display:block;width:inherit;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-50:#ffeae8;--nylas-error-100:#ffc5bf;--nylas-error-200:#fecaca;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-color-blue-100:#e0e6f9;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:"Inter", sans-serif;--nylas-color-black:#000000;--nylas-color-grey-900:#2c2c2c;--nylas-color-grey-800:#4b4b4b;--nylas-color-grey-700:#6e6e6e;--nylas-color-grey-600:#8e8e8e;--nylas-color-grey-500:#b3b3b3;--nylas-color-grey-400:#cacaca;--nylas-color-grey-300:#e1e1e1;--nylas-color-grey-200:#eaeaea;--nylas-color-grey-100:#f5f5f5;--nylas-color-grey-50:#fbfcfe;--nylas-color-white:#ffffff;--nylas-color-red-900:#992222;--nylas-color-red-700:#cc4841;--nylas-color-red-500:#ff786a;--nylas-color-red-300:#ffa79e;--nylas-color-red-100:#ffc5bf;--nylas-color-red-50:#ffeae8;--nylas-color-blue-900:#213571;--nylas-color-blue-700:#314fa9;--nylas-color-blue-500:#4169e1;--nylas-color-blue-300:#bdccf9;--nylas-color-blue-100:#e0e6f9;--nylas-color-blue-50:#f6f8fd;--nylas-color-yellow-900:#7c6506;--nylas-color-yellow-700:#c29f09;--nylas-color-yellow-500:#f7c90b;--nylas-color-yellow-300:#f9de70;--nylas-color-yellow-100:#fceba9;--nylas-color-yellow-50:#fdf4ce;--nylas-color-green-900:#0e6b60;--nylas-color-green-700:#16a392;--nylas-color-green-500:#17c3b2;--nylas-color-green-300:#74dbd1;--nylas-color-green-100:#a2e7e0;--nylas-color-green-50:#d1f3f0;--nylas-color-purple-900:#643554;--nylas-color-purple-700:#954f7d;--nylas-color-purple-500:#c769a7;--nylas-color-purple-300:#dda5ca;--nylas-color-purple-100:#e0bdd6;--nylas-color-purple-50:#e9dde5;--nylas-color-sky-900:#20698f;--nylas-color-sky-700:#2b8fc2;--nylas-color-sky-500:#6dceff;--nylas-color-sky-300:#8fdaff;--nylas-color-sky-100:#b8e7ff;--nylas-color-sky-50:#d9f2ff}.dropdown{display:inline-block;width:100%;position:relative}.dropdown .dropdown-label{display:flex;align-items:center;gap:0.25rem;color:var(--nylas-base-800)}.dropdown .dropdown-label p{margin:0}.dropdown .dropdown-label span.required{color:var(--nylas-error);padding:0 0.25rem}.dropdown span.error{color:var(--nylas-error);font-size:14px}.dropbtn{width:inherit;height:48px;color:var(--nylas-base-900);padding:0.5rem;font-size:16px;cursor:pointer;display:flex;gap:0.5rem;justify-content:space-between;align-items:center;background:transparent;border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x)}.dropbtn.focus{background:transparent}.dropbtn.error{border:1px solid var(--nylas-error)}.dropbtn:hover,.dropbtn:active{border:1px solid var(--nylas-primary)}.dropbtn:active{outline:2px solid var(--nylas-primary)}.dropbtn:disabled{cursor:not-allowed;background:var(--nylas-base-100)}.dropbtn span.open{transform:rotate(90deg)}.dropbtn span.closed{transform:rotate(270deg)}.dropdown-content{display:block;margin-top:0.5rem;background-color:var(--nylas-base-0);width:100%;max-height:336px;overflow:auto;z-index:1;border-radius:4px;position:absolute;top:72px;box-shadow:0px 4px 6px -2px rgba(0, 0, 0, 0.0509803922);box-shadow:0px 10px 15px -3px rgba(0, 0, 0, 0.1019607843)}.dropdown-content ul{padding:0;list-style-type:none;color:var(--nylas-base-900);max-height:336px}.dropdown-content ul li{padding:16px, 12px, 16px, 12px;color:var(--nylas-base-900);padding:12px 16px;text-decoration:none;display:block;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px;text-align:left;cursor:pointer}.dropdown-content ul li:hover,.dropdown-content ul li:focus{background-color:var(--nylas-base-100)}.dropdown-content ul li label{display:flex;align-items:center;gap:0.5rem}.dropdown-content ul li label input{margin:0}.dropdown-content ul li.disabled{cursor:not-allowed;opacity:0.5}.dropdown-content ul li.disabled label{cursor:not-allowed}.dropdown-content ul li.disabled label input{cursor:not-allowed}.selected-options{display:flex;flex-wrap:wrap;gap:0.5rem;padding:0.5rem 0;margin-top:0.25rem;background:var(--nylas-base-0)}.selected-options .selected-option{display:flex;align-items:center;gap:0.5rem;padding:4px 8px;border-radius:var(--nylas-border-radius-2x);background:var(--nylas-base-100);color:var(--nylas-base-800);font-size:16px;font-weight:500;line-height:1.5rem;letter-spacing:0.5px}.selected-options .selected-option button{background:transparent;border:none;cursor:pointer;padding:0}.selected-options .selected-option button:hover{color:var(--nylas-primary)}.selected-options .selected-option button:disabled{cursor:not-allowed;background:var(--nylas-base-100)}', y = f, h = class {
+const f = ':host{display:block;width:inherit;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-50:#ffeae8;--nylas-error-100:#ffc5bf;--nylas-error-200:#fecaca;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-color-blue-100:#e0e6f9;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:"Inter", sans-serif;--nylas-color-black:#000000;--nylas-color-grey-900:#2c2c2c;--nylas-color-grey-800:#4b4b4b;--nylas-color-grey-700:#6e6e6e;--nylas-color-grey-600:#8e8e8e;--nylas-color-grey-500:#b3b3b3;--nylas-color-grey-400:#cacaca;--nylas-color-grey-300:#e1e1e1;--nylas-color-grey-200:#eaeaea;--nylas-color-grey-100:#f5f5f5;--nylas-color-grey-50:#fbfcfe;--nylas-color-white:#ffffff;--nylas-color-red-900:#992222;--nylas-color-red-700:#cc4841;--nylas-color-red-500:#ff786a;--nylas-color-red-300:#ffa79e;--nylas-color-red-100:#ffc5bf;--nylas-color-red-50:#ffeae8;--nylas-color-blue-900:#213571;--nylas-color-blue-700:#314fa9;--nylas-color-blue-500:#4169e1;--nylas-color-blue-300:#bdccf9;--nylas-color-blue-100:#e0e6f9;--nylas-color-blue-50:#f6f8fd;--nylas-color-yellow-900:#7c6506;--nylas-color-yellow-700:#c29f09;--nylas-color-yellow-500:#f7c90b;--nylas-color-yellow-300:#f9de70;--nylas-color-yellow-100:#fceba9;--nylas-color-yellow-50:#fdf4ce;--nylas-color-green-900:#0e6b60;--nylas-color-green-700:#16a392;--nylas-color-green-500:#17c3b2;--nylas-color-green-300:#74dbd1;--nylas-color-green-100:#a2e7e0;--nylas-color-green-50:#d1f3f0;--nylas-color-purple-900:#643554;--nylas-color-purple-700:#954f7d;--nylas-color-purple-500:#c769a7;--nylas-color-purple-300:#dda5ca;--nylas-color-purple-100:#e0bdd6;--nylas-color-purple-50:#e9dde5;--nylas-color-sky-900:#20698f;--nylas-color-sky-700:#2b8fc2;--nylas-color-sky-500:#6dceff;--nylas-color-sky-300:#8fdaff;--nylas-color-sky-100:#b8e7ff;--nylas-color-sky-50:#d9f2ff}.dropdown{display:inline-block;width:100%;position:relative}.dropdown .dropdown-label{display:flex;align-items:center;gap:0.25rem;color:var(--nylas-base-800)}.dropdown .dropdown-label p{margin:0}.dropdown .dropdown-label span.required{color:var(--nylas-error);padding:0 0.25rem}.dropdown span.error{color:var(--nylas-error);font-size:14px}.dropbtn{width:inherit;height:48px;color:var(--nylas-base-900);padding:0.5rem;font-size:16px;cursor:pointer;display:flex;gap:0.5rem;justify-content:space-between;align-items:center;background:var(--nylas-base-0);border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x)}.dropbtn.focus{background:var(--nylas-base-0)}.dropbtn.error{border:1px solid var(--nylas-error)}.dropbtn:hover,.dropbtn:active{border:1px solid var(--nylas-primary)}.dropbtn:active{outline:2px solid var(--nylas-primary)}.dropbtn:disabled{cursor:not-allowed;background:var(--nylas-base-100)}.dropbtn span.open{transform:rotate(90deg)}.dropbtn span.closed{transform:rotate(270deg)}.dropdown-content{display:block;margin-top:0.5rem;background-color:var(--nylas-base-0);width:100%;max-height:336px;overflow:auto;z-index:1;border-radius:4px;position:absolute;top:72px;box-shadow:0px 4px 6px -2px rgba(0, 0, 0, 0.0509803922);box-shadow:0px 10px 15px -3px rgba(0, 0, 0, 0.1019607843)}.dropdown-content ul{padding:0;list-style-type:none;color:var(--nylas-base-900);max-height:336px}.dropdown-content ul li{padding:16px, 12px, 16px, 12px;color:var(--nylas-base-900);padding:12px 16px;text-decoration:none;display:block;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px;text-align:left;cursor:pointer}.dropdown-content ul li:hover,.dropdown-content ul li:focus{background-color:var(--nylas-base-100)}.dropdown-content ul li label{display:flex;align-items:center;gap:0.5rem}.dropdown-content ul li label input{margin:0}.dropdown-content ul li.disabled{cursor:not-allowed;opacity:0.5}.dropdown-content ul li.disabled label{cursor:not-allowed}.dropdown-content ul li.disabled label input{cursor:not-allowed}.selected-options{display:flex;flex-wrap:wrap;gap:0.5rem;padding:0.5rem 0;margin-top:0.25rem}.selected-options .selected-option{display:flex;align-items:center;gap:0.5rem;padding:4px 8px;border-radius:var(--nylas-border-radius-2x);background:var(--nylas-base-100);color:var(--nylas-base-800);font-size:16px;font-weight:500;line-height:1.5rem;letter-spacing:0.5px}.selected-options .selected-option button{background:transparent;border:none;cursor:pointer;padding:0}.selected-options .selected-option button:hover{color:var(--nylas-primary)}.selected-options .selected-option button:disabled{cursor:not-allowed;background:var(--nylas-base-100)}', h = f, y = class {
   constructor(e) {
-    d(this, e), this.selectedOptionsChanged = c(this, "selectedOptionsChanged", 7), this.name = void 0, this.label = void 0, this.options = [], this.error = "", this.required = !1, this.readOnly = !1, this.multipleOptionsSelectedLabel = "Multiple options selected", this.selectAtLeastOneOptionLabel = "Please select at least one option", this.availableOptions = this.options, this.isOpen = !1, this.ariaActivedescendant = "", this.shouldFocusFirstOption = !1;
+    d(this, e), this.selectedOptionsChanged = c(this, "selectedOptionsChanged", 7), this.name = void 0, this.label = void 0, this.options = [], this.error = "", this.required = !1, this.readOnly = !1, this.multipleOptionsSelectedLabel = "Multiple options selected", this.selectAtLeastOneOptionLabel = "Please select at least one option", this.themeConfig = void 0, this.errorMessage = "Please select at least one option.", this.availableOptions = this.options, this.isOpen = !1, this.ariaActivedescendant = "", this.shouldFocusFirstOption = !1;
   }
-  areOptionsEqual(e, l) {
-    if (e.length !== l.length)
+  areOptionsEqual(e, s) {
+    if (e.length !== s.length)
       return !1;
-    const a = [...e].sort((o, n) => o.label.localeCompare(n.label) || o.value.localeCompare(n.value)), t = [...l].sort((o, n) => o.label.localeCompare(n.label) || o.value.localeCompare(n.value));
+    const a = [...e].sort((o, n) => o.label.localeCompare(n.label) || o.value.localeCompare(n.value)), t = [...s].sort((o, n) => o.label.localeCompare(n.label) || o.value.localeCompare(n.value));
     return a.every((o, n) => {
       const r = t[n];
       return o.label === r.label && o.value === r.value;
@@ -18,8 +21,16 @@ const f = ':host{display:block;width:inherit;--nylas-primary:#2563eb;--nylas-err
   optionsChangedHandler(e) {
     this.areOptionsEqual(e, this.availableOptions) || (this.availableOptions = e);
   }
+  themeConfigChangedHandler(e, s) {
+    this.applyThemeConfig(e);
+  }
+  applyThemeConfig(e) {
+    if (e)
+      for (const [s, a] of Object.entries(e))
+        this.el.style.setProperty(`${s}`, a);
+  }
   componentDidLoad() {
-    i("multi-select-dropdown", "componentDidLoad"), this.options && (this.availableOptions = this.options);
+    i("multi-select-dropdown", "componentDidLoad"), this.options && (this.availableOptions = this.options), this.applyThemeConfig(this.themeConfig);
   }
   componentDidRender() {
     var e;
@@ -29,14 +40,14 @@ const f = ':host{display:block;width:inherit;--nylas-primary:#2563eb;--nylas-err
     !e.composedPath().includes(this.el) && this.isOpen && (this.isOpen = !1);
   }
   handleBookingFormSubmitted(e) {
-    const l = this.availableOptions.filter((a) => a.selected).map((a) => a.value);
-    this.required && (!l || l.length <= 0) && (this.error = "Please select at least one option"), this.error && e.preventDefault();
+    const s = this.availableOptions.filter((a) => a.selected).map((a) => a.value);
+    this.required && (!s || s.length <= 0) && (this.error = this.errorMessage || this.selectAtLeastOneOptionLabel), this.error && e.preventDefault();
   }
   selectOption(e) {
     this.availableOptions = this.availableOptions.map((a) => (a.value === e.value && (a.selected = !e.selected, a.selected && (this.error = "")), a));
-    const l = this.availableOptions.filter((a) => a.selected).map((a) => a.value);
+    const s = this.availableOptions.filter((a) => a.selected).map((a) => a.value);
     this.selectedOptionsChanged.emit({
-      value: l,
+      value: s,
       name: this.name
     });
   }
@@ -55,29 +66,29 @@ const f = ':host{display:block;width:inherit;--nylas-primary:#2563eb;--nylas-err
     }
   }
   handleListboxKeydown(e) {
-    const l = this.availableOptions, a = l.findIndex((t) => t.value === this.ariaActivedescendant);
+    const s = this.availableOptions, a = s.findIndex((t) => t.value === this.ariaActivedescendant);
     switch (e.key) {
       case "ArrowDown":
       case "Tab": {
         if (e.shiftKey) {
           e.preventDefault();
-          const t = a - 1 >= 0 ? a - 1 : l.length - 1;
-          this.ariaActivedescendant = l[t].value, this.focusOption(t);
+          const t = a - 1 >= 0 ? a - 1 : s.length - 1;
+          this.ariaActivedescendant = s[t].value, this.focusOption(t);
         } else {
           e.preventDefault();
-          const t = a + 1 < l.length ? a + 1 : 0;
-          this.ariaActivedescendant = l[t].value, this.focusOption(t);
+          const t = a + 1 < s.length ? a + 1 : 0;
+          this.ariaActivedescendant = s[t].value, this.focusOption(t);
         }
         break;
       }
       case "ArrowUp": {
         e.preventDefault();
-        const t = a - 1 >= 0 ? a - 1 : l.length - 1;
-        this.ariaActivedescendant = l[t].value, this.focusOption(t);
+        const t = a - 1 >= 0 ? a - 1 : s.length - 1;
+        this.ariaActivedescendant = s[t].value, this.focusOption(t);
         break;
       }
       case "Enter": {
-        e.preventDefault(), this.ariaActivedescendant && this.selectOption(l[a]);
+        e.preventDefault(), this.ariaActivedescendant && this.selectOption(s[a]);
         break;
       }
       case "Escape": {
@@ -88,34 +99,35 @@ const f = ':host{display:block;width:inherit;--nylas-primary:#2563eb;--nylas-err
   }
   focusOption(e) {
     var o;
-    const l = this.availableOptions[e];
-    if (!l)
+    const s = this.availableOptions[e];
+    if (!s)
       return;
-    const a = l.value, t = (o = this.el.shadowRoot) == null ? void 0 : o.getElementById(a);
+    const a = s.value, t = (o = this.el.shadowRoot) == null ? void 0 : o.getElementById(a);
     t && (t.focus(), t.scrollIntoView({ behavior: "smooth", block: "nearest" }));
   }
   getSelectedOptions() {
     return this.availableOptions.filter((e) => e.selected);
   }
   renderOption(e) {
-    return s("li", { key: e.value, id: e.value, role: "option", tabindex: "0", "aria-selected": e.selected ? "true" : "false", onClick: (l) => {
-      l.stopImmediatePropagation(), e != null && e.disabled || this.selectOption(e);
-    }, class: { selected: !!e.selected, disabled: !!e.disabled } }, s("label", { htmlFor: e.value }, s("input", { "aria-hidden": "true", id: e.value, type: "checkbox", checked: e.selected, disabled: !!(e != null && e.disabled) }), s("span", null, e.label)));
+    return l("li", { key: e.value, id: e.value, role: "option", tabindex: "0", "aria-selected": e.selected ? "true" : "false", onClick: (s) => {
+      s.stopImmediatePropagation(), e != null && e.disabled || this.selectOption(e);
+    }, class: { selected: !!e.selected, disabled: !!e.disabled } }, l("label", { htmlFor: e.value }, l("input", { "aria-hidden": "true", id: e.value, type: "checkbox", checked: e.selected, disabled: !!(e != null && e.disabled) }), l("span", null, e.label)));
   }
   render() {
-    var e, l;
-    return s(p, { key: "d0b2dba51e53ebd85e26eb55798f868e78353c9b" }, s("div", { key: "734ddac426729d6428ba7876b4fce2af038c8693", class: "dropdown", part: "msd_dropdown" }, s("label", { key: "f59ac5c52d91b4f3c1250e2294517e543e04e2e3", class: "dropdown-label", part: "msd_dropdown-label" }, s("p", { key: "35d11a9d8a07e6e6dc47a3be18687a2296ec3364" }, s("span", { key: "6a5f3510cff852df33adea9dadf138f7bea6c5c8", class: "label" }, this.label), this.required && s("span", { class: "required" }, "*")), s("slot", { key: "7e2547b4767fe67f752cae7ffd0ba5e776455c8c", name: "label-icon", "aria-hidden": "true" })), s("button", { key: "24579f516264491ac90cf72d32f256107000c0b7", name: this.name, part: `msd_dropdown-button ${this.error ? "msd_dropdown-button--error" : ""}`, class: { dropbtn: !0, open: this.isOpen, error: !!this.error }, onClick: () => this.toggleDropdown(), disabled: this.readOnly, title: this.readOnly ? "read-only field" : void 0, "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? "true" : "false", "aria-label": this.name, onKeyDown: (a) => this.handleSelectButtonKeyDown(a) }, s("slot", { key: "e50db39a7e6d2e31605ce2377f99c36da5e847b5", name: "select-icon", "aria-hidden": "true" }), s("span", { key: "a7f18b098f7bc573e91ef9e5b2348ff8de95c13a", class: "selected-option", part: "msd_dropdown-button-selected-label" }, this.getSelectedOptions().length > 1 ? this.multipleOptionsSelectedLabel : ((e = this.availableOptions.filter((a) => a.selected)[0]) == null ? void 0 : e.label) ?? this.selectAtLeastOneOptionLabel ?? ((l = this.availableOptions[0]) == null ? void 0 : l.label)), s("span", { key: "f2b00f9e55299d48161910627a7d6f5a646f5a44", class: this.isOpen ? "open" : "closed", "aria-hidden": "true" }, s("chevron-icon", { key: "6d1a184975ac00bbbe79632eda290590a2f2744d", width: "16", height: "16" }))), this.error ? s("span", { class: "error", part: "msd_dropdown_error" }, this.error) : null, s("div", { key: "34cfb8ded6c549a7d8b0ce38c0093cc94a7aa2a3", class: "selected-options" }, this.getSelectedOptions().map((a) => s("span", { class: "selected-option" }, a.label, s("button", { disabled: this.readOnly || !!(a != null && a.disabled), key: a.label, onClick: () => this.selectOption(a) }, s("close-icon", null))))), this.isOpen ? s("div", { class: "dropdown-content", part: "msd_dropdown-content" }, s("ul", { tabindex: "-1", role: "listbox", "aria-label": this.name, "aria-multiselectable": !0, "aria-activedescendant": this.ariaActivedescendant, onKeyDown: (a) => this.handleListboxKeydown(a) }, this.availableOptions.map((a) => this.renderOption(a)))) : null));
+    var e, s;
+    return l(p, { key: "e4f66d6e4f3e49f65b722c076a0deffc120f5cb3" }, l("div", { key: "72968ead813ef5de4ee88e8fe5e80aad16316276", class: "dropdown", part: "msd_dropdown" }, l("label", { key: "38ccbcb168ae2b33937ee727924ab3254cbd2ace", class: "dropdown-label", part: "msd_dropdown-label" }, l("p", { key: "b199001842df7d90ef1c0d1b32a6df7e2190a4b3" }, l("span", { key: "bda03991df2c144888978078f0b47412375bc55e", class: "label" }, this.label), this.required && l("span", { class: "required" }, "*")), l("slot", { key: "fa8101533463adf2c59db98417935b10f8a4d1a6", name: "label-icon", "aria-hidden": "true" })), l("button", { key: "5c5562eb21673f5ac6c33871b718c78a38b7a5e3", name: this.name, part: `msd_dropdown-button ${this.error ? "msd_dropdown-button--error" : ""}`, class: { dropbtn: !0, open: this.isOpen, error: !!this.error }, onClick: () => this.toggleDropdown(), disabled: this.readOnly, title: this.readOnly ? "read-only field" : void 0, "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? "true" : "false", "aria-label": this.name, onKeyDown: (a) => this.handleSelectButtonKeyDown(a) }, l("slot", { key: "af26de659dbee075636ce569e081178711156e67", name: "select-icon", "aria-hidden": "true" }), l("span", { key: "d007e56a574375c7693d2d54d74dd30d4a9318d6", class: "selected-option", part: "msd_dropdown-button-selected-label" }, this.getSelectedOptions().length > 1 ? this.multipleOptionsSelectedLabel : ((e = this.availableOptions.filter((a) => a.selected)[0]) == null ? void 0 : e.label) ?? this.selectAtLeastOneOptionLabel ?? ((s = this.availableOptions[0]) == null ? void 0 : s.label)), l("span", { key: "9934861780c8cee62383aa15894c294bca270754", class: this.isOpen ? "open" : "closed", "aria-hidden": "true" }, l("chevron-icon", { key: "20a893a1f92dd27484376cc406fd7a0232074dfe", width: "16", height: "16" }))), this.error ? l("span", { class: "error", part: "msd_dropdown_error" }, this.error) : null, l("div", { key: "bee6d2bad669e20f058a6fb9f02d5d9cc8c9ab6f", class: "selected-options" }, this.getSelectedOptions().map((a) => l("span", { class: "selected-option" }, a.label, l("button", { disabled: this.readOnly || !!(a != null && a.disabled), key: a.label, onClick: () => this.selectOption(a) }, l("close-icon", null))))), this.isOpen ? l("div", { class: "dropdown-content", part: "msd_dropdown-content" }, l("ul", { tabindex: "-1", role: "listbox", "aria-label": this.name, "aria-multiselectable": !0, "aria-activedescendant": this.ariaActivedescendant, onKeyDown: (a) => this.handleListboxKeydown(a) }, this.availableOptions.map((a) => this.renderOption(a)))) : null));
   }
   get el() {
     return b(this);
   }
   static get watchers() {
     return {
-      options: ["optionsChangedHandler"]
+      options: ["optionsChangedHandler"],
+      themeConfig: ["themeConfigChangedHandler"]
     };
   }
 };
-h.style = y;
+y.style = h;
 export {
-  h as multi_select_dropdown
+  y as multi_select_dropdown
 };