@adyen/bento-vue2 1.26.0 → 1.28.0

package/dist/chunks/{dropdown.10c034aa.js → dropdown.yhhQCKve.js}

@@ -1,31 +1,31 @@
-import { ref as y, watch as se, computed as u, defineComponent as I, useSlots as le, toRefs as ae, nextTick as E, useAttrs as xe, toRef as C, inject as he } from "vue";
-import { d as X, B as we } from "./index.dd30e538.js";
-import { D as P, a as ee, b as Se, c as Le, B as Oe } from "./dropdown-default-textbox.54ca1b18.js";
-import { n as A } from "./_plugin-vue2_normalizer.71e2aa87.js";
-import { g as T } from "./unique-id.a2a2b458.js";
-import { u as Ce } from "./aria-label.ac9651a5.js";
-import { u as W } from "./i18n.eb5b985b.js";
-import { u as $e } from "./use-form-layout-loading.d03e5d48.js";
-import { u as Ee } from "./use-has-slot.fbeb19ec.js";
-import { c as d, b as K, B as z, a as De, u as Ie } from "./use-cached-selected-values.69297473.js";
-import { B as $, a as Be } from "./keyboard-navigation.ca47dfa8.js";
-import { a as te } from "./index.671768a1.js";
-import { a as Re } from "./index.15b088b9.js";
-import { E as Te, F as Ae } from "./error-message.31ec12b7.js";
+import { ref as _, watch as se, computed as u, defineComponent as D, useSlots as ae, toRefs as le, nextTick as $, useAttrs as xe, toRef as O, inject as we } from "vue";
+import { d as X, B as Le } from "./typography.Bjtu3Gca.js";
+import { a as F, b as ee, c as Se, D as Oe, B as Ce } from "./dropdown-default-textbox.CKOkl_Qa.js";
+import { n as N } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { g as A } from "./unique-id.XFfoKuc2.js";
+import { u as $e } from "./aria-label.CaUURpnB.js";
+import { u as W } from "./i18n.BQkEbtPM.js";
+import { u as Ee } from "./use-form-layout-loading.D3lALhtC.js";
+import { u as De } from "./use-has-slot.C9lQZ6nz.js";
+import { a as d, B as K, b as z, c as Be, u as Ie } from "./use-cached-selected-values.CVLzxvTi.js";
+import { B as C, a as Re } from "./keyboard-navigation.Clz1jOaA.js";
+import { P as te } from "./popper-container.Bt02N3o1.js";
+import { B as Te } from "./popover.B8YH92W8.js";
+import { E as Ae, F as Me } from "./error-message.BSxUoE3_.js";
 import "../assets/dropdown.css";
-var L = /* @__PURE__ */ ((n) => (n.DEFAULT = "DropdownInputDefault", n.SMALL = "DropdownInputSmall", n))(L || {});
-const Me = {
+var M = /* @__PURE__ */ ((n) => (n.DEFAULT = "DropdownInputDefault", n.SMALL = "DropdownInputSmall", n))(M || {});
+const Ne = {
   "en-US": {
     apply: "Apply",
     cancel: "Cancel",
     noOptionsMatchThisSearch: "No options match this search"
   }
-}, Ne = (n, t, o, e) => {
-  const s = y(n.value), { t: a } = W();
+}, ke = (n, t, o, e) => {
+  const s = _(n.value), { t: l } = W();
   se(n, () => {
     s.value = n.value;
   });
-  const l = u(
+  const a = u(
     () => JSON.stringify(s.value) === JSON.stringify(n.value)
   ), r = () => {
     e(d.SELECT, s.value), e(d.CLOSE_DROPDOWN);
@@ -35,31 +35,31 @@ const Me = {
     o.value && t.value && (s.value = n.value);
   }, f = u(() => [
     {
-      title: a("apply"),
+      title: l("apply"),
       event: r,
-      disabled: l.value
+      disabled: a.value
     },
     {
-      title: a("cancel"),
+      title: l("cancel"),
       event: v
     }
-  ]), _ = (i) => {
+  ]), y = (i) => {
     s.value = i, t.value || e(d.SELECT, i);
-  }, O = (i) => {
-    _(i), e(d.TAB);
+  }, S = (i) => {
+    y(i), e(d.TAB);
   }, g = (i) => {
-    _(i), e(d.ENTER);
-  }, h = (i) => {
-    _(i), e(d.SPACE);
-  }, x = () => {
+    y(i), e(d.ENTER);
+  }, x = (i) => {
+    y(i), e(d.SPACE);
+  }, h = () => {
     v(), e(d.ESCAPE);
   }, w = () => {
     e(d.SHOW_MORE);
-  }, S = {
-    [d.SELECT]: _,
+  }, L = {
+    [d.SELECT]: y,
     [d.SHOW_MORE]: w,
-    [d.TAB]: O,
-    [d.SPACE]: h,
+    [d.TAB]: S,
+    [d.SPACE]: x,
     [d.ENTER]: g
   };
   return {
@@ -67,15 +67,15 @@ const Me = {
     actions: f,
     internalSelectedValue: s,
     // Methods
-    listeners: S,
-    onEscapeKey: x,
+    listeners: L,
+    onEscapeKey: h,
     onOutsideDropdownClick: p
   };
-}, ke = I({
-  i18n: { messages: Me },
+}, Pe = D({
+  i18n: { messages: Ne },
   name: "bento-dropdown-options-container"
-}), Fe = /* @__PURE__ */ I({
-  ...ke,
+}), Fe = /* @__PURE__ */ D({
+  ...Pe,
   props: {
     /**
      * Defines a string value that labels an interactive element.
@@ -100,14 +100,6 @@ const Me = {
      *  Identifies the listbox whose contents are controlled by the the combobox on which the aria-controls attribute is set.
      */
     id: { type: String, required: !0 },
-    /**
-     * Dropdown input size
-     */
-    inputSize: {
-      type: String,
-      default: L.DEFAULT,
-      validator: (n) => Object.values(L).includes(n)
-    },
     /**
      * Function that allows the options to be disabled
      *
@@ -189,15 +181,14 @@ const Me = {
     }
   },
   setup(n, { expose: t, emit: o }) {
-    const e = n, s = le(), { selectedValue: a, multiple: l } = ae(e), r = y(null), { t: v } = W(), p = u(() => e.open && !e.disabled), f = u(() => v("noOptionsMatchThisSearch")), _ = u(() => ({
+    const e = n, s = ae(), { selectedValue: l, multiple: a } = le(e), r = _(null), { t: v } = W(), p = u(() => e.open && !e.disabled), f = u(() => v("noOptionsMatchThisSearch")), y = u(() => ({
       "b-dropdown-options-container--single": !(e != null && e.multiple)
-    })), O = u(() => ({
-      "b-dropdown-options-container__listbox--small": e.inputSize === L.SMALL,
+    })), S = u(() => ({
       "b-dropdown-options-container__listbox--single": !(e != null && e.multiple)
-    })), { actions: g, internalSelectedValue: h, listeners: x, onEscapeKey: w, onOutsideDropdownClick: S } = Ne(a, l, p, o), i = u(() => e != null && e.multiple ? Re : te), c = u(() => {
-      var M;
-      const m = {
-        "min-width": `${(M = e == null ? void 0 : e.targetElement) == null ? void 0 : M.clientWidth}px`,
+    })), { actions: g, internalSelectedValue: x, listeners: h, onEscapeKey: w, onOutsideDropdownClick: L } = ke(l, a, p, o), i = u(() => e != null && e.multiple ? Te : te), c = u(() => {
+      var B;
+      const b = {
+        "min-width": `${(B = e == null ? void 0 : e.targetElement) == null ? void 0 : B.clientWidth}px`,
         "max-width": "min(500px, 95%)"
       };
       return e != null && e.multiple ? {
@@ -205,12 +196,12 @@ const Me = {
         actions: g.value,
         divider: !0,
         fallbackPosition: ["top-start"],
-        id: T(`dropdown-options-${e.id}`),
+        id: A(`dropdown-options-${e.id}`),
         open: e.open,
         position: "bottom-start",
         style: {
           width: "auto",
-          ...m
+          ...b
         },
         targetElement: e.targetElement
       } : {
@@ -219,80 +210,74 @@ const Me = {
         position: "bottom-start",
         style: {
           display: p.value ? "block" : "none",
-          ...m
+          ...b
         },
         targetElement: e.targetElement
       };
     });
     return t({
-      onOutsideDropdownClick: S
-    }), { __sfc: !0, slots: s, emit: o, props: e, selectedValue: a, multiple: l, dropdownOptionsListboxRef: r, t: v, isDropdownOpen: p, noResultsMessage: f, conditionalClasses: _, conditionalListboxClasses: O, actions: g, internalSelectedValue: h, listeners: x, onEscapeKey: w, onOutsideDropdownClick: S, popperContainerOrPopoverComponent: i, popperContainerOrPopoverProps: c, BentoListbox: z };
+      onOutsideDropdownClick: L
+    }), { __sfc: !0, slots: s, emit: o, props: e, selectedValue: l, multiple: a, dropdownOptionsListboxRef: r, t: v, isDropdownOpen: p, noResultsMessage: f, conditionalClasses: y, conditionalListboxClasses: S, actions: g, internalSelectedValue: x, listeners: h, onEscapeKey: w, onOutsideDropdownClick: L, popperContainerOrPopoverComponent: i, popperContainerOrPopoverProps: c, BentoListbox: z };
   }
 });
-var Pe = function() {
+var Ke = function() {
   var t = this, o = t._self._c, e = t._self._setupProxy;
-  return o(e.popperContainerOrPopoverComponent, t._b({ tag: "component", staticClass: "b-dropdown-options-container", class: e.conditionalClasses }, "component", e.popperContainerOrPopoverProps, !1), [o("div", { on: { keydown: function(s) {
+  return o(e.popperContainerOrPopoverComponent, t._b({ tag: "component", staticClass: "b-dropdown-options-container", class: e.conditionalClasses, attrs: { "aria-label": t.ariaLabel } }, "component", e.popperContainerOrPopoverProps, !1), [o("div", { on: { keydown: function(s) {
     return !s.type.indexOf("key") && t._k(s.keyCode, "esc", 27, s.key, ["Esc", "Escape"]) ? null : e.onEscapeKey.apply(null, arguments);
-  } } }, [o(e.BentoListbox, t._g({ ref: "dropdownOptionsListboxRef", staticClass: "b-dropdown-options-container__listbox", class: e.conditionalListboxClasses, attrs: { id: t.id, "aria-label": t.ariaLabel, "empty-state": t.emptyState, "is-option-disabled": t.isOptionDisabled, items: t.items, "selected-value": e.internalSelectedValue, multiple: e.multiple, "static-categories": t.staticCategories, "no-results-message": e.noResultsMessage, searching: t.searching, loading: t.loading, "lazy-load-type": t.lazyLoadType, "has-more-items": t.hasMoreItems, "virtual-scroll": t.virtualScroll }, scopedSlots: t._u([t._l(e.slots, function(s, a) {
-    return { key: a, fn: function(l) {
-      return [t._t(a, null, null, l)];
+  } } }, [o(e.BentoListbox, t._g({ ref: "dropdownOptionsListboxRef", staticClass: "b-dropdown-options-container__listbox", class: e.conditionalListboxClasses, attrs: { id: t.id, "aria-label": t.ariaLabel, "empty-state": t.emptyState, "is-option-disabled": t.isOptionDisabled, items: t.items, "selected-value": e.internalSelectedValue, multiple: e.multiple, "static-categories": t.staticCategories, "no-results-message": e.noResultsMessage, searching: t.searching, loading: t.loading, "lazy-load-type": t.lazyLoadType, "has-more-items": t.hasMoreItems, "virtual-scroll": t.virtualScroll }, scopedSlots: t._u([t._l(e.slots, function(s, l) {
+    return { key: l, fn: function(a) {
+      return [t._t(l, null, null, a)];
     } };
   })], null, !0) }, e.listeners))], 1)]);
-}, Ke = [], ze = /* @__PURE__ */ A(
+}, ze = [], We = /* @__PURE__ */ N(
   Fe,
-  Pe,
   Ke,
+  ze,
   !1,
   null,
-  "ee489bd3",
-  null,
-  null
+  "9f73038d"
 );
-const We = ze.exports;
+const je = We.exports;
 let oe = 0;
 const Ue = {
   beforeCreate() {
     this.uuid = oe.toString(), oe += 1;
   }
 };
-var je = function() {
+var qe = function() {
   var t = this, o = t._self._c;
   return o("svg", t._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", t.$attrs, !1), [t.$attrs["svg-title"] ? o("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), o("path", { attrs: { fill: "#00112C", d: "M5.00011 5.43922L8.00011 8.43922L11.0001 5.43922L12.0608 6.49988L8.00011 10.5605L3.93945 6.49988L5.00011 5.43922Z" } })]);
-}, qe = [], He = /* @__PURE__ */ A(
+}, He = [], Ve = /* @__PURE__ */ N(
   Ue,
-  je,
   qe,
+  He,
   !1,
   null,
-  null,
-  null,
   null
 );
-const Ve = He.exports;
+const Je = Ve.exports;
 let ne = 0;
-const Je = {
+const Ye = {
   beforeCreate() {
     this.uuid = ne.toString(), ne += 1;
   }
 };
-var Ye = function() {
+var Ze = function() {
   var t = this, o = t._self._c;
   return o("svg", t._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", t.$attrs, !1), [t.$attrs["svg-title"] ? o("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), o("path", { attrs: { fill: "#00112C", d: "M10.9999 10.5608L7.9999 7.56077L4.9999 10.5608L3.93924 9.50011L7.9999 5.43945L12.0606 9.50011L10.9999 10.5608Z" } })]);
-}, Ze = [], Ge = /* @__PURE__ */ A(
-  Je,
+}, Ge = [], Qe = /* @__PURE__ */ N(
   Ye,
   Ze,
+  Ge,
   !1,
   null,
-  null,
-  null,
   null
 );
-const Qe = Ge.exports, Xe = I({
+const Xe = Qe.exports, et = D({
   name: "dropdown-small-textbox",
   inheritAttrs: !1
-}), et = /* @__PURE__ */ I({
-  ...Xe,
+}), tt = /* @__PURE__ */ D({
+  ...et,
   props: {
     /**
      * The number of additional items that have been selected in the dropdown.
@@ -354,110 +339,108 @@ const Qe = Ge.exports, Xe = I({
   emits: ["open", "close"],
   setup(n, { emit: t }) {
     const o = n, e = u(() => ({
-      [`b-dropdown-small-textbox--${P.DISABLED}`]: o.disabled,
-      [`b-dropdown-small-textbox--${P.READONLY}`]: o.readonly,
-      [`b-dropdown-small-textbox--${P.OPENED}`]: o.open
-    })), s = u(() => o.open && !o.disabled && !o.readonly), a = () => {
+      [`b-dropdown-small-textbox--${F.DISABLED}`]: o.disabled,
+      [`b-dropdown-small-textbox--${F.READONLY}`]: o.readonly,
+      [`b-dropdown-small-textbox--${F.OPENED}`]: o.open
+    })), s = u(() => o.open && !o.disabled && !o.readonly), l = () => {
       t("open");
-    }, l = () => {
+    }, a = () => {
       t("close");
     }, r = {
-      [ee.OPEN]: a,
-      [ee.CLOSE]: l
+      [ee.OPEN]: l,
+      [ee.CLOSE]: a
     };
-    return { __sfc: !0, emit: t, props: o, conditionalClasses: e, isDropdownOpen: s, openDropdown: a, closeDropdown: l, listeners: r, DropdownBaseTextbox: Se, ChevronDownSmallIcon: Ve, ChevronUpSmallIcon: Qe };
+    return { __sfc: !0, emit: t, props: o, conditionalClasses: e, isDropdownOpen: s, openDropdown: l, closeDropdown: a, listeners: r, DropdownBaseTextbox: Se, ChevronDownSmallIcon: Je, ChevronUpSmallIcon: Xe };
   }
 });
-var tt = function() {
+var ot = function() {
   var t = this, o = t._self._c, e = t._self._setupProxy;
   return o("div", { staticClass: "b-dropdown-small-textbox", class: e.conditionalClasses }, [o(e.DropdownBaseTextbox, t._g(t._b({ staticClass: "b-dropdown-small-textbox__textbox", scopedSlots: t._u([{ key: "icon", fn: function() {
     return [o("div", { staticClass: "b-dropdown-small-textbox__chevron" }, [o(e.ChevronUpSmallIcon, { directives: [{ name: "show", rawName: "v-show", value: e.isDropdownOpen, expression: "isDropdownOpen" }], attrs: { "svg-title": "opened" } }), o(e.ChevronDownSmallIcon, { directives: [{ name: "show", rawName: "v-show", value: !e.isDropdownOpen, expression: "!isDropdownOpen" }], attrs: { "svg-title": "closed" } })], 1)];
   }, proxy: !0 }]) }, "dropdown-base-textbox", { ...t.$attrs, ...t.$props }, !1), e.listeners))], 1);
-}, ot = [], nt = /* @__PURE__ */ A(
-  et,
+}, nt = [], st = /* @__PURE__ */ N(
   tt,
   ot,
+  nt,
   !1,
   null,
-  "8dbfd5fb",
-  null,
-  null
+  "8dbfd5fb"
 );
-const st = nt.exports, lt = (n, t) => t.value.reduce((o, e) => {
+const at = st.exports, lt = (n, t) => t.value.reduce((o, e) => {
   if (e.items) {
     const s = e.items.filter(
-      (l) => n.value.find((r) => r.value === l.value)
+      (a) => n.value.find((r) => r.value === a.value)
     );
-    s.length === e.items.length ? o.push(e.label) : s.forEach(({ label: l }) => o.push(l));
+    s.length === e.items.length ? o.push(e.label) : s.forEach(({ label: a }) => o.push(a));
   }
   return n.value.find((s) => s.value === e.value) && o.push(e.label), o;
-}, []).join(", "), at = ({ items: n, placeholder: t, selectedValues: o }) => {
-  const e = u(() => n.value.find((a) => {
-    var l;
-    return (l = a.items) == null ? void 0 : l.length;
+}, []).join(", "), it = ({ items: n, placeholder: t, selectedValues: o }) => {
+  const e = u(() => n.value.find((l) => {
+    var a;
+    return (a = l.items) == null ? void 0 : a.length;
   }));
-  return u(() => o.value.length ? e.value ? lt(o, n) : o.value.map(({ label: a }) => a).join(", ") : t.value || null);
+  return u(() => o.value.length ? e.value ? lt(o, n) : o.value.map(({ label: l }) => l).join(", ") : t.value || null);
 }, ie = (n) => {
   var t;
   (t = n.value.$children) == null || t[0].$refs.textbox.focus();
-}, it = ({
+}, rt = ({
   inputContainerRef: n,
   optionsContainerRef: t,
   selectedValueIndex: o,
   isDropdownOpen: e,
   isDynamicFltering: s,
-  items: a,
-  isMultiple: l
+  items: l,
+  isMultiple: a
 }, r, v, p) => {
   const f = ({ detail: i }) => {
-    i.preventDefault(), e.value || (v(), E(() => {
-      var c, m;
-      l ? (c = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || c[0].$el.focus() : (m = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || m[o.value].$el.focus();
+    i.preventDefault(), e.value || (v(), $(() => {
+      var c, b;
+      a ? (c = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || c[0].$el.focus() : (b = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || b[o.value].$el.focus();
     }));
-  }, _ = ({ detail: i }) => {
-    i.preventDefault(), e.value || (v(), E(() => {
+  }, y = ({ detail: i }) => {
+    i.preventDefault(), e.value || (v(), $(() => {
       var c;
       (c = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || c[0].$el.focus();
     }));
-  }, O = () => {
-    e.value || (v(), E(() => {
+  }, S = () => {
+    e.value || (v(), $(() => {
       var i, c;
-      if (l) {
-        const m = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;
-        (i = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || i[m.length - 1].$children[a.length - 1].$el.focus();
+      if (a) {
+        const b = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;
+        (i = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || i[b.length - 1].$children[l.length - 1].$el.focus();
       } else
-        (c = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || c[a.length - 1].$el.focus();
+        (c = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || c[l.length - 1].$el.focus();
     }));
   }, g = () => {
     e.value && (p(), ie(n));
-  }, h = () => {
-    e.value || v(), E(() => {
+  }, x = () => {
+    e.value || v(), $(() => {
       var i;
       (i = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || i[0].$el.focus();
     });
-  }, x = ({ detail: i }) => {
-    i.preventDefault(), r(), e.value && E(() => {
-      var c, m;
-      l ? (c = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || c[0].$el.focus() : (m = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || m[o.value].$el.focus();
+  }, h = ({ detail: i }) => {
+    i.preventDefault(), r(), e.value && $(() => {
+      var c, b;
+      a ? (c = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || c[0].$el.focus() : (b = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || b[o.value].$el.focus();
     });
   }, w = () => {
-    r(), e.value && E(() => {
+    r(), e.value && $(() => {
       var i, c;
-      l ? (i = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || i[0].$el.focus() : (c = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || c[o.value].$el.focus();
+      a ? (i = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || i[0].$el.focus() : (c = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || c[o.value].$el.focus();
     });
   };
   return u(() => ({
-    ...s.value ? {} : { [$.SPACE]: x },
-    [$.ENTER]: w,
-    [$.ARROW_DOWN]: f,
-    [$.ARROW_UP]: _,
-    [$.END]: O,
-    [$.ESCAPE]: g,
-    [$.HOME]: h
+    ...s.value ? {} : { [C.SPACE]: h },
+    [C.ENTER]: w,
+    [C.ARROW_DOWN]: f,
+    [C.ARROW_UP]: y,
+    [C.END]: S,
+    [C.ESCAPE]: g,
+    [C.HOME]: x
   }));
-}, rt = ({ inputContainerRef: n, isDropdownOpen: t }, o) => {
+}, dt = ({ inputContainerRef: n, isDropdownOpen: t }, o) => {
   const e = () => {
-    t.value && o(), E(() => {
+    t.value && o(), $(() => {
       ie(n);
     });
   };
@@ -468,32 +451,32 @@ const st = nt.exports, lt = (n, t) => t.value.reduce((o, e) => {
     [d.SPACE]: e
   };
 };
-function dt(n, t, o) {
-  const e = y(n), s = y(t), a = (r, v = []) => v.flatMap((p) => p.label.toLocaleLowerCase().includes(r) ? [p, ...a(r, p.items)] : p.items ? [...a(r, p.items)] : []);
+function ut(n, t, o) {
+  const e = _(n), s = _(t), l = (r, v = []) => v.flatMap((p) => p.label.toLocaleLowerCase().includes(r) ? [p, ...l(r, p.items)] : p.items ? [...l(r, p.items)] : []);
   return se(e, () => {
     o !== void 0 && o(e.value);
   }), u(() => {
     if (!e.value || o !== void 0)
       return s.value;
     const r = e.value.toLocaleLowerCase();
-    return a(r, s.value);
+    return l(r, s.value);
   });
 }
-const ut = {
+const ct = {
   "en-US": {
     all: "All",
     clearSearch: "Clear filter",
     ariaLabelFallback: "Dropdown"
   }
-}, ct = Symbol("input field component injection key"), pt = I({
-  i18n: { messages: ut },
+}, pt = Symbol("input field component injection key"), ft = D({
+  i18n: { messages: ct },
   name: "b-dropdown",
   components: {
-    DropdownInputDefault: Le,
-    DropdownInputSmall: st
+    DropdownInputDefault: Oe,
+    DropdownInputSmall: at
   }
-}), ft = /* @__PURE__ */ I({
-  ...pt,
+}), vt = /* @__PURE__ */ D({
+  ...ft,
   props: {
     /**
      * @deprecated from version 2.0.0. Use the aria-label attribute instead.
@@ -621,7 +604,7 @@ const ut = {
     size: {
       type: String,
       default: null,
-      validator: (n) => Object.values(L).includes(n)
+      validator: (n) => Object.values(M).includes(n)
     },
     /**
      * If enabled, dropdown will display non-selectable, static categories
@@ -652,80 +635,80 @@ const ut = {
   emits: ["input", "show-more"],
   setup(n, { emit: t }) {
     var Q;
-    const o = n, e = xe(), s = le(), a = Ee(s), { t: l } = W(), r = y(null), v = y(null), p = y(null), f = y(!1), _ = T("bento-dropdown-options-container"), O = T("dropdown-label"), g = T("dropdown-description"), h = T("dropdown-error"), { isReadOnly: x } = $e(C(o, "readonly")), { cachedSelectedListboxOptions: w, cachedListboxSelectedValues: S, setCachedValues: i } = De(
-      C(o, "items"),
-      C(o, "value"),
-      C(o, "multiple")
-    ), c = y(e["aria-label"]), { ariaLabel: m } = ae(o), M = Ce({
-      ariaLabel: c.value,
-      // TODO: take this line away when the aria-label props is removed
-      label: m,
-      defaultFallback: l("ariaLabelFallback")
-    }), U = o.size === L.SMALL || he(ct, !1), re = u(() => U ? L.SMALL : L.DEFAULT), de = u(() => ({
+    const o = n, e = xe(), s = ae(), l = De(s), { t: a } = W(), r = _(null), v = _(null), p = _(null), f = _(!1), y = A("bento-dropdown-options-container"), S = A("dropdown-label"), g = A("dropdown-description"), x = A("dropdown-error"), { isReadOnly: h } = Ee(O(o, "readonly")), { cachedSelectedListboxOptions: w, cachedListboxSelectedValues: L, setCachedValues: i } = Be(
+      O(o, "items"),
+      O(o, "value"),
+      O(o, "multiple")
+    ), c = _(e["aria-label"]), { ariaLabel: b, label: B } = le(o), re = $e({
+      // TODO: take ariaLabel ref away when aria-label prop is removed
+      ariaLabel: b || c,
+      label: B,
+      defaultFallback: a("ariaLabelFallback")
+    }), j = o.size === M.SMALL || we(pt, !1), de = u(() => j ? M.SMALL : M.DEFAULT), ue = u(() => ({
       "b-dropdown--condensed": o.condensed
-    })), ue = u(() => ({
+    })), ce = u(() => ({
       "b-dropdown__description--error": !!o.errorMessage
-    })), D = y(""), B = C(o, "items"), ce = dt(D, B, (Q = o == null ? void 0 : o.search) == null ? void 0 : Q.searchEvent), F = u(() => o.dynamicFiltering && !!D.value), pe = at({
-      items: B,
-      placeholder: C(o, "placeholder"),
+    })), E = _(""), I = O(o, "items"), pe = ut(E, I, (Q = o == null ? void 0 : o.search) == null ? void 0 : Q.searchEvent), P = u(() => o.dynamicFiltering && !!E.value), fe = it({
+      items: I,
+      placeholder: O(o, "placeholder"),
       selectedValues: w
-    }), fe = u(() => {
+    }), ve = u(() => {
       if (o != null && o.multiple && Array.isArray(o.value))
         return o.items.filter(
-          ({ value: b }) => (o == null ? void 0 : o.value) && (o == null ? void 0 : o.value).includes(b)
+          ({ value: m }) => (o == null ? void 0 : o.value) && (o == null ? void 0 : o.value).includes(m)
         );
       if (!o.multiple && o.staticCategories) {
-        const b = o.items.find(
-          (k) => k.items.some((ge) => ge.value === o.value)
+        const m = o.items.find(
+          (T) => T.items.some((he) => he.value === o.value)
         );
-        return b ? b.items.find((k) => k.value === o.value) : null;
+        return m ? m.items.find((T) => T.value === o.value) : null;
       }
-      return o.items.find(({ value: b }) => b === (o == null ? void 0 : o.value));
-    }), j = u(() => {
-      const b = o.items.findIndex(({ value: R }) => o.value === R);
-      return b > 0 ? b : 0;
-    }), { isMultiLevelSelect: q, flattenedItemsList: H } = Ie(B), ve = u(() => {
-      var b;
-      if (o.multiple && !o.hasMoreItems) {
-        const R = (b = o == null ? void 0 : o.value) == null ? void 0 : b.length;
-        return (q.value ? H.value.length : B.value.length) === R ? l("all") : R;
+      return o.items.find(({ value: m }) => m === (o == null ? void 0 : o.value));
+    }), U = u(() => {
+      const m = o.items.findIndex(({ value: R }) => o.value === R);
+      return m > 0 ? m : 0;
+    }), { isMultiLevelSelect: q, flattenedItemsList: H } = Ie(I), me = u(() => {
+      var m;
+      if (o.multiple) {
+        const R = (m = o == null ? void 0 : o.value) == null ? void 0 : m.length, T = q.value ? H.value.length : I.value.length;
+        return !o.hasMoreItems && T === R ? a("all") : R;
       }
       return null;
     }), be = u(
-      () => `${o.description ? g : ""} ${o.errorMessage ? h : ""}`.trim() || null
+      () => `${o.description ? g : ""} ${o.errorMessage ? x : ""}`.trim() || null
     ), V = () => {
-      x.value || (f.value = !0);
-    }, N = () => {
+      h.value || (f.value = !0);
+    }, k = () => {
       f.value = !1;
     }, J = () => {
-      x.value || (f.value = !f.value, F.value && (D.value = ""));
-    }, me = () => {
-      F.value && (D.value = ""), f.value && (f.value = !1, p.value.onOutsideDropdownClick());
-    }, Y = (b) => {
-      o.multiple || (D.value = "", f.value = !1), i(b), t("input", S.value);
+      h.value || (f.value = !f.value, P.value && (E.value = ""));
+    }, ye = () => {
+      P.value && (E.value = ""), f.value && (f.value = !1, p.value.onOutsideDropdownClick());
+    }, Y = (m) => {
+      o.multiple || (E.value = "", f.value = !1), i(m), t("input", L.value);
     }, Z = () => {
       t(d.SHOW_MORE);
-    }, _e = it(
+    }, _e = rt(
       {
         inputContainerRef: r,
         optionsContainerRef: p,
-        selectedValueIndex: j,
+        selectedValueIndex: U,
         isDropdownOpen: f,
-        isDynamicFltering: C(o, "dynamicFiltering"),
+        isDynamicFltering: O(o, "dynamicFiltering"),
         items: o.items,
         isMultiple: o.multiple
       },
       J,
       V,
-      N
-    ), G = rt(
+      k
+    ), G = dt(
       {
         inputContainerRef: r,
         isDropdownOpen: f
       },
-      N
-    ), ye = {
-      [d.CLOSE_DROPDOWN]: N,
+      k
+    ), ge = {
+      [d.CLOSE_DROPDOWN]: k,
       [d.SELECT]: Y,
       [d.SHOW_MORE]: Z,
       ...G
@@ -736,40 +719,38 @@ const ut = {
                         Having the field as "undefined" will hide/remove the error.
                         <bento-dropdown errorMessage="Error message text" />`,
       "2.0.0"
-    ), o.size && X('BentoDropdown "size" property', "Do not use. Only 'default' size should be used.", "2.0.0"), { __sfc: !0, attrs: e, slots: s, hasSlot: a, props: o, emit: t, t: l, inputContainerRef: r, inputContainerRefWrapper: v, optionsContainerRef: p, isDropdownOpen: f, dropdownOptionsContainerId: _, labelId: O, descriptionId: g, errorId: h, isReadOnly: x, cachedSelectedListboxOptions: w, cachedListboxSelectedValues: S, setCachedValues: i, ariaLabelAttribute: c, ariaLabel: m, computedAriaLabel: M, isInputComponent: U, size: re, conditionalClasses: de, descriptionConditionalClasses: ue, searchTerm: D, items: B, filteredItems: ce, isSearching: F, displayValue: pe, selectedValueItem: fe, selectedValueIndex: j, isMultiLevelSelect: q, flattenedItemsList: H, additionalItemsSelected: ve, ariaDescribedBy: be, openDropdown: V, closeDropdown: N, toggleDropdown: J, clickOutsideDropdown: me, onOptionSelected: Y, emitShowMoreEvent: Z, textboxKeyboardNavigationListeners: _e, listboxKeyboardNavigationListeners: G, listboxListeners: ye, BentoDropdownOptionsContainer: We, BentoTypography: we, ErrorMessage: Te, FieldLabel: Ae, vBentoClickOutsideDirective: Oe, vBentoKeyboardNavigationDirective: Be };
+    ), o.size && X('BentoDropdown "size" property', "Do not use. Only 'default' size should be used.", "2.0.0"), { __sfc: !0, attrs: e, slots: s, hasSlot: l, props: o, emit: t, t: a, inputContainerRef: r, inputContainerRefWrapper: v, optionsContainerRef: p, isDropdownOpen: f, dropdownOptionsContainerId: y, labelId: S, descriptionId: g, errorId: x, isReadOnly: h, cachedSelectedListboxOptions: w, cachedListboxSelectedValues: L, setCachedValues: i, ariaLabelAttribute: c, ariaLabel: b, label: B, computedAriaLabel: re, isInputComponent: j, size: de, conditionalClasses: ue, descriptionConditionalClasses: ce, searchTerm: E, items: I, filteredItems: pe, isSearching: P, displayValue: fe, selectedValueItem: ve, selectedValueIndex: U, isMultiLevelSelect: q, flattenedItemsList: H, additionalItemsSelected: me, ariaDescribedBy: be, openDropdown: V, closeDropdown: k, toggleDropdown: J, clickOutsideDropdown: ye, onOptionSelected: Y, emitShowMoreEvent: Z, textboxKeyboardNavigationListeners: _e, listboxKeyboardNavigationListeners: G, listboxListeners: ge, BentoDropdownOptionsContainer: je, BentoTypography: Le, ErrorMessage: Ae, FieldLabel: Me, vBentoClickOutsideDirective: Ce, vBentoKeyboardNavigationDirective: Re };
   }
 });
-var vt = function() {
+var mt = function() {
   var s;
   var t = this, o = t._self._c, e = t._self._setupProxy;
-  return o("div", { directives: [{ name: "bento-click-outside-directive", rawName: "v-bento-click-outside-directive", value: e.clickOutsideDropdown, expression: "clickOutsideDropdown" }], staticClass: "b-dropdown", class: e.conditionalClasses }, [t.label ? o(e.FieldLabel, { attrs: { id: e.labelId, condensed: t.condensed, label: t.label, "tooltip-text": t.tooltipText, optional: t.optional, required: t.required } }) : t._e(), o("div", t._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], ref: "inputContainerRefWrapper" }, e.textboxKeyboardNavigationListeners), [o(e.size, { ref: "inputContainerRef", tag: "component", attrs: { condensed: t.condensed, value: e.searchTerm, "additional-items-selected": e.additionalItemsSelected, ariaControls: e.dropdownOptionsContainerId, ariaExpanded: e.isDropdownOpen, "aria-labelledby": t.label ? e.labelId : null, "aria-describedby": e.ariaDescribedBy, "aria-label": e.computedAriaLabel, "aria-readonly": e.isReadOnly, readonly: e.isReadOnly, disabled: t.disabled, "display-value": e.displayValue, "dynamic-filtering": t.dynamicFiltering, "is-invalid": !!t.errorMessage || t.error, multiple: t.multiple, open: e.isDropdownOpen, "selected-value-item": e.isInputComponent ? void 0 : e.selectedValueItem, "show-slot-content-in-multiple": t.showSlotContentInMultiple }, on: { input: function(a) {
-    e.searchTerm = a;
-  }, open: e.toggleDropdown, close: e.toggleDropdown }, scopedSlots: t._u([t._l(e.slots, function(a, l) {
-    return { key: l, fn: function(r) {
-      return [t._t(l, null, null, r)];
+  return o("div", { directives: [{ name: "bento-click-outside-directive", rawName: "v-bento-click-outside-directive", value: e.clickOutsideDropdown, expression: "clickOutsideDropdown" }], staticClass: "b-dropdown", class: e.conditionalClasses }, [e.label ? o(e.FieldLabel, { attrs: { id: e.labelId, condensed: t.condensed, label: e.label, "tooltip-text": t.tooltipText, optional: t.optional, required: t.required } }) : t._e(), o("div", t._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], ref: "inputContainerRefWrapper" }, e.textboxKeyboardNavigationListeners), [o(e.size, { ref: "inputContainerRef", tag: "component", attrs: { condensed: t.condensed, value: e.searchTerm, "additional-items-selected": e.additionalItemsSelected, ariaControls: e.dropdownOptionsContainerId, ariaExpanded: e.isDropdownOpen, "aria-labelledby": e.label ? e.labelId : null, "aria-describedby": e.ariaDescribedBy, "aria-label": e.computedAriaLabel, "aria-readonly": e.isReadOnly, readonly: e.isReadOnly, disabled: t.disabled, "display-value": e.displayValue, "dynamic-filtering": t.dynamicFiltering, "is-invalid": !!t.errorMessage || t.error, multiple: t.multiple, open: e.isDropdownOpen, "selected-value-item": e.isInputComponent ? void 0 : e.selectedValueItem, "show-slot-content-in-multiple": t.showSlotContentInMultiple }, on: { input: function(l) {
+    e.searchTerm = l;
+  }, open: e.toggleDropdown, close: e.toggleDropdown }, scopedSlots: t._u([t._l(e.slots, function(l, a) {
+    return { key: a, fn: function(r) {
+      return [t._t(a, null, null, r)];
     } };
-  })], null, !0) })], 1), e.inputContainerRef ? o(e.BentoDropdownOptionsContainer, t._g({ ref: "optionsContainerRef", attrs: { id: e.dropdownOptionsContainerId, "aria-label": e.computedAriaLabel, "empty-state": t.emptyState, "debounce-time": (s = t.search) == null ? void 0 : s.debounceTime, disabled: t.disabled, "input-size": e.size, "is-option-disabled": t.isOptionDisabled, items: e.filteredItems, multiple: t.multiple, "static-categories": t.staticCategories, open: e.isDropdownOpen, "selected-value": e.cachedSelectedListboxOptions, searching: e.isSearching, "target-element": e.inputContainerRefWrapper, loading: t.loading, "has-more-items": t.hasMoreItems, "lazy-load-type": t.lazyLoadType, "virtual-scroll": t.virtualScroll }, scopedSlots: t._u([t._l(e.slots, function(a, l) {
-    return { key: l, fn: function(r) {
-      return [t._t(l, null, null, r)];
+  })], null, !0) })], 1), e.inputContainerRef ? o(e.BentoDropdownOptionsContainer, t._g({ ref: "optionsContainerRef", attrs: { id: e.dropdownOptionsContainerId, "aria-label": e.computedAriaLabel, "empty-state": t.emptyState, "debounce-time": (s = t.search) == null ? void 0 : s.debounceTime, disabled: t.disabled, "is-option-disabled": t.isOptionDisabled, items: e.filteredItems, multiple: t.multiple, "static-categories": t.staticCategories, open: e.isDropdownOpen, "selected-value": e.cachedSelectedListboxOptions, searching: e.isSearching, "target-element": e.inputContainerRefWrapper, loading: t.loading, "has-more-items": t.hasMoreItems, "lazy-load-type": t.lazyLoadType, "virtual-scroll": t.virtualScroll }, scopedSlots: t._u([t._l(e.slots, function(l, a) {
+    return { key: a, fn: function(r) {
+      return [t._t(a, null, null, r)];
     } };
   })], null, !0) }, e.listboxListeners)) : t._e(), t.errorMessage ? o(e.ErrorMessage, { staticClass: "b-dropdown__error-message", attrs: { id: e.errorId, "error-message": t.errorMessage } }) : t._e(), t.description || e.hasSlot("description") ? o(e.BentoTypography, { staticClass: "b-dropdown__description", class: e.descriptionConditionalClasses, attrs: { id: e.descriptionId, el: "span" } }, [t._t("description", function() {
     return [t._v(" " + t._s(t.description) + " ")];
   })], 2) : t._e()], 1);
-}, bt = [], mt = /* @__PURE__ */ A(
-  ft,
+}, bt = [], yt = /* @__PURE__ */ N(
   vt,
+  mt,
   bt,
   !1,
   null,
-  "b769b98e",
-  null,
-  null
+  "aa06f131"
 );
-const Bt = mt.exports;
+const Rt = yt.exports;
 export {
-  Bt as B,
-  ct as I,
-  L as a,
-  dt as u
+  Rt as B,
+  pt as I,
+  M as a,
+  ut as u
 };
-//# sourceMappingURL=dropdown.10c034aa.js.map
+//# sourceMappingURL=dropdown.yhhQCKve.js.map