@adyen/bento-vue2 1.26.0 → 1.27.0

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

@@ -1,39 +1,39 @@
-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 { ref as y, watch as se, computed as c, defineComponent as D, useSlots as le, toRefs as ae, nextTick as $, useAttrs as xe, toRef as O, inject as he } from "vue";
+import { d as X, B as we } from "./index.e29a6907.js";
+import { D as P, a as ee, b as Se, c as Le, B as Oe } from "./dropdown-default-textbox.d0f17d96.js";
+import { n as M } 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 { c as d, b as K, B as z, a as De, u as Ie } from "./use-cached-selected-values.98a9ed01.js";
+import { B as C, a as Be } from "./keyboard-navigation.bbc3d15c.js";
+import { a as te } from "./index.c8621e8e.js";
+import { a as Re } from "./index.0a30d358.js";
+import { E as Te, F as Ae } from "./error-message.bdcc1020.js";
 import "../assets/dropdown.css";
-var L = /* @__PURE__ */ ((n) => (n.DEFAULT = "DropdownInputDefault", n.SMALL = "DropdownInputSmall", n))(L || {});
+var A = /* @__PURE__ */ ((n) => (n.DEFAULT = "DropdownInputDefault", n.SMALL = "DropdownInputSmall", n))(A || {});
 const Me = {
   "en-US": {
     apply: "Apply",
     cancel: "Cancel",
     noOptionsMatchThisSearch: "No options match this search"
   }
-}, Ne = (n, t, o, e) => {
+}, Ne = (n, e, o, t) => {
   const s = y(n.value), { t: a } = W();
   se(n, () => {
     s.value = n.value;
   });
-  const l = u(
+  const l = c(
     () => JSON.stringify(s.value) === JSON.stringify(n.value)
   ), r = () => {
-    e(d.SELECT, s.value), e(d.CLOSE_DROPDOWN);
+    t(d.SELECT, s.value), t(d.CLOSE_DROPDOWN);
   }, v = () => {
-    s.value = n.value, e(d.CLOSE_DROPDOWN);
+    s.value = n.value, t(d.CLOSE_DROPDOWN);
   }, p = () => {
-    o.value && t.value && (s.value = n.value);
-  }, f = u(() => [
+    o.value && e.value && (s.value = n.value);
+  }, f = c(() => [
     {
       title: a("apply"),
       event: r,
@@ -44,21 +44,21 @@ const Me = {
       event: v
     }
   ]), _ = (i) => {
-    s.value = i, t.value || e(d.SELECT, i);
-  }, O = (i) => {
-    _(i), e(d.TAB);
+    s.value = i, e.value || t(d.SELECT, i);
+  }, L = (i) => {
+    _(i), t(d.TAB);
   }, g = (i) => {
-    _(i), e(d.ENTER);
+    _(i), t(d.ENTER);
   }, h = (i) => {
-    _(i), e(d.SPACE);
+    _(i), t(d.SPACE);
   }, x = () => {
-    v(), e(d.ESCAPE);
+    v(), t(d.ESCAPE);
   }, w = () => {
-    e(d.SHOW_MORE);
+    t(d.SHOW_MORE);
   }, S = {
     [d.SELECT]: _,
     [d.SHOW_MORE]: w,
-    [d.TAB]: O,
+    [d.TAB]: L,
     [d.SPACE]: h,
     [d.ENTER]: g
   };
@@ -71,10 +71,10 @@ const Me = {
     onEscapeKey: x,
     onOutsideDropdownClick: p
   };
-}, ke = I({
+}, ke = D({
   i18n: { messages: Me },
   name: "bento-dropdown-options-container"
-}), Fe = /* @__PURE__ */ I({
+}), Fe = /* @__PURE__ */ D({
   ...ke,
   props: {
     /**
@@ -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
      *
@@ -188,63 +180,62 @@ const Me = {
       default: !1
     }
   },
-  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(() => ({
-      "b-dropdown-options-container--single": !(e != null && e.multiple)
-    })), O = u(() => ({
-      "b-dropdown-options-container__listbox--small": e.inputSize === L.SMALL,
-      "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`,
+  setup(n, { expose: e, emit: o }) {
+    const t = n, s = le(), { selectedValue: a, multiple: l } = ae(t), r = y(null), { t: v } = W(), p = c(() => t.open && !t.disabled), f = c(() => v("noOptionsMatchThisSearch")), _ = c(() => ({
+      "b-dropdown-options-container--single": !(t != null && t.multiple)
+    })), L = c(() => ({
+      "b-dropdown-options-container__listbox--single": !(t != null && t.multiple)
+    })), { actions: g, internalSelectedValue: h, listeners: x, onEscapeKey: w, onOutsideDropdownClick: S } = Ne(a, l, p, o), i = c(() => t != null && t.multiple ? Re : te), u = c(() => {
+      var N;
+      const b = {
+        "min-width": `${(N = t == null ? void 0 : t.targetElement) == null ? void 0 : N.clientWidth}px`,
         "max-width": "min(500px, 95%)"
       };
-      return e != null && e.multiple ? {
+      return t != null && t.multiple ? {
         actionsLayout: "space-between",
         actions: g.value,
         divider: !0,
         fallbackPosition: ["top-start"],
-        id: T(`dropdown-options-${e.id}`),
-        open: e.open,
+        id: T(`dropdown-options-${t.id}`),
+        open: t.open,
         position: "bottom-start",
         style: {
           width: "auto",
-          ...m
+          ...b
         },
-        targetElement: e.targetElement
+        targetElement: t.targetElement
       } : {
         fallbackPosition: ["top-start"],
         offset: [0, 8],
         position: "bottom-start",
         style: {
           display: p.value ? "block" : "none",
-          ...m
+          ...b
         },
-        targetElement: e.targetElement
+        targetElement: t.targetElement
       };
     });
-    return t({
+    return e({
       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 };
+    }), { __sfc: !0, slots: s, emit: o, props: t, selectedValue: a, multiple: l, dropdownOptionsListboxRef: r, t: v, isDropdownOpen: p, noResultsMessage: f, conditionalClasses: _, conditionalListboxClasses: L, actions: g, internalSelectedValue: h, listeners: x, onEscapeKey: w, onOutsideDropdownClick: S, popperContainerOrPopoverComponent: i, popperContainerOrPopoverProps: u, BentoListbox: z };
   }
 });
 var Pe = 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 !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) {
+  var e = this, o = e._self._c, t = e._self._setupProxy;
+  return o(t.popperContainerOrPopoverComponent, e._b({ tag: "component", staticClass: "b-dropdown-options-container", class: t.conditionalClasses }, "component", t.popperContainerOrPopoverProps, !1), [o("div", { on: { keydown: function(s) {
+    return !s.type.indexOf("key") && e._k(s.keyCode, "esc", 27, s.key, ["Esc", "Escape"]) ? null : t.onEscapeKey.apply(null, arguments);
+  } } }, [o(t.BentoListbox, e._g({ ref: "dropdownOptionsListboxRef", staticClass: "b-dropdown-options-container__listbox", class: t.conditionalListboxClasses, attrs: { id: e.id, "aria-label": e.ariaLabel, "empty-state": e.emptyState, "is-option-disabled": e.isOptionDisabled, items: e.items, "selected-value": t.internalSelectedValue, multiple: t.multiple, "static-categories": e.staticCategories, "no-results-message": t.noResultsMessage, searching: e.searching, loading: e.loading, "lazy-load-type": e.lazyLoadType, "has-more-items": e.hasMoreItems, "virtual-scroll": e.virtualScroll }, scopedSlots: e._u([e._l(t.slots, function(s, a) {
     return { key: a, fn: function(l) {
-      return [t._t(a, null, null, l)];
+      return [e._t(a, null, null, l)];
     } };
-  })], null, !0) }, e.listeners))], 1)]);
-}, Ke = [], ze = /* @__PURE__ */ A(
+  })], null, !0) }, t.listeners))], 1)]);
+}, Ke = [], ze = /* @__PURE__ */ M(
   Fe,
   Pe,
   Ke,
   !1,
   null,
-  "ee489bd3",
+  "11bd9f89",
   null,
   null
 );
@@ -256,9 +247,9 @@ const Ue = {
   }
 };
 var je = 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(
+  var e = this, o = e._self._c;
+  return o("svg", e._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? o("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._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__ */ M(
   Ue,
   je,
   qe,
@@ -276,9 +267,9 @@ const Je = {
   }
 };
 var Ye = 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(
+  var e = this, o = e._self._c;
+  return o("svg", e._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? o("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._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__ */ M(
   Je,
   Ye,
   Ze,
@@ -288,10 +279,10 @@ var Ye = function() {
   null,
   null
 );
-const Qe = Ge.exports, Xe = I({
+const Qe = Ge.exports, Xe = D({
   name: "dropdown-small-textbox",
   inheritAttrs: !1
-}), et = /* @__PURE__ */ I({
+}), et = /* @__PURE__ */ D({
   ...Xe,
   props: {
     /**
@@ -352,28 +343,28 @@ const Qe = Ge.exports, Xe = I({
     value: { type: String, default: "" }
   },
   emits: ["open", "close"],
-  setup(n, { emit: t }) {
-    const o = n, e = u(() => ({
+  setup(n, { emit: e }) {
+    const o = n, t = c(() => ({
       [`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 = () => {
-      t("open");
+    })), s = c(() => o.open && !o.disabled && !o.readonly), a = () => {
+      e("open");
     }, l = () => {
-      t("close");
+      e("close");
     }, r = {
       [ee.OPEN]: a,
       [ee.CLOSE]: l
     };
-    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: e, props: o, conditionalClasses: t, isDropdownOpen: s, openDropdown: a, closeDropdown: l, listeners: r, DropdownBaseTextbox: Se, ChevronDownSmallIcon: Ve, ChevronUpSmallIcon: Qe };
   }
 });
 var tt = 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(
+  var e = this, o = e._self._c, t = e._self._setupProxy;
+  return o("div", { staticClass: "b-dropdown-small-textbox", class: t.conditionalClasses }, [o(t.DropdownBaseTextbox, e._g(e._b({ staticClass: "b-dropdown-small-textbox__textbox", scopedSlots: e._u([{ key: "icon", fn: function() {
+    return [o("div", { staticClass: "b-dropdown-small-textbox__chevron" }, [o(t.ChevronUpSmallIcon, { directives: [{ name: "show", rawName: "v-show", value: t.isDropdownOpen, expression: "isDropdownOpen" }], attrs: { "svg-title": "opened" } }), o(t.ChevronDownSmallIcon, { directives: [{ name: "show", rawName: "v-show", value: !t.isDropdownOpen, expression: "!isDropdownOpen" }], attrs: { "svg-title": "closed" } })], 1)];
+  }, proxy: !0 }]) }, "dropdown-base-textbox", { ...e.$attrs, ...e.$props }, !1), t.listeners))], 1);
+}, ot = [], nt = /* @__PURE__ */ M(
   et,
   tt,
   ot,
@@ -383,116 +374,116 @@ var tt = function() {
   null,
   null
 );
-const st = nt.exports, lt = (n, t) => t.value.reduce((o, e) => {
-  if (e.items) {
-    const s = e.items.filter(
+const st = nt.exports, lt = (n, e) => e.value.reduce((o, t) => {
+  if (t.items) {
+    const s = t.items.filter(
       (l) => n.value.find((r) => r.value === l.value)
     );
-    s.length === e.items.length ? o.push(e.label) : s.forEach(({ label: l }) => o.push(l));
+    s.length === t.items.length ? o.push(t.label) : s.forEach(({ label: l }) => o.push(l));
   }
-  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) => {
+  return n.value.find((s) => s.value === t.value) && o.push(t.label), o;
+}, []).join(", "), at = ({ items: n, placeholder: e, selectedValues: o }) => {
+  const t = c(() => n.value.find((a) => {
     var l;
     return (l = a.items) == null ? void 0 : l.length;
   }));
-  return u(() => o.value.length ? e.value ? lt(o, n) : o.value.map(({ label: a }) => a).join(", ") : t.value || null);
+  return c(() => o.value.length ? t.value ? lt(o, n) : o.value.map(({ label: a }) => a).join(", ") : e.value || null);
 }, ie = (n) => {
-  var t;
-  (t = n.value.$children) == null || t[0].$refs.textbox.focus();
+  var e;
+  (e = n.value.$children) == null || e[0].$refs.textbox.focus();
 }, it = ({
   inputContainerRef: n,
-  optionsContainerRef: t,
+  optionsContainerRef: e,
   selectedValueIndex: o,
-  isDropdownOpen: e,
+  isDropdownOpen: t,
   isDynamicFltering: s,
   items: a,
   isMultiple: l
 }, 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(), t.value || (v(), $(() => {
+      var u, b;
+      l ? (u = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || u[0].$el.focus() : (b = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || b[o.value].$el.focus();
     }));
   }, _ = ({ detail: i }) => {
-    i.preventDefault(), e.value || (v(), E(() => {
-      var c;
-      (c = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || c[0].$el.focus();
+    i.preventDefault(), t.value || (v(), $(() => {
+      var u;
+      (u = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || u[0].$el.focus();
     }));
-  }, O = () => {
-    e.value || (v(), E(() => {
-      var i, c;
+  }, L = () => {
+    t.value || (v(), $(() => {
+      var i, u;
       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();
+        const b = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;
+        (i = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || i[b.length - 1].$children[a.length - 1].$el.focus();
       } else
-        (c = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || c[a.length - 1].$el.focus();
+        (u = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || u[a.length - 1].$el.focus();
     }));
   }, g = () => {
-    e.value && (p(), ie(n));
+    t.value && (p(), ie(n));
   }, h = () => {
-    e.value || v(), E(() => {
+    t.value || v(), $(() => {
       var i;
-      (i = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || i[0].$el.focus();
+      (i = e.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();
+    i.preventDefault(), r(), t.value && $(() => {
+      var u, b;
+      l ? (u = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || u[0].$el.focus() : (b = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || b[o.value].$el.focus();
     });
   }, w = () => {
-    r(), e.value && E(() => {
-      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();
+    r(), t.value && $(() => {
+      var i, u;
+      l ? (i = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || i[0].$el.focus() : (u = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || u[o.value].$el.focus();
     });
   };
-  return u(() => ({
-    ...s.value ? {} : { [$.SPACE]: x },
-    [$.ENTER]: w,
-    [$.ARROW_DOWN]: f,
-    [$.ARROW_UP]: _,
-    [$.END]: O,
-    [$.ESCAPE]: g,
-    [$.HOME]: h
+  return c(() => ({
+    ...s.value ? {} : { [C.SPACE]: x },
+    [C.ENTER]: w,
+    [C.ARROW_DOWN]: f,
+    [C.ARROW_UP]: _,
+    [C.END]: L,
+    [C.ESCAPE]: g,
+    [C.HOME]: h
   }));
-}, rt = ({ inputContainerRef: n, isDropdownOpen: t }, o) => {
-  const e = () => {
-    t.value && o(), E(() => {
+}, rt = ({ inputContainerRef: n, isDropdownOpen: e }, o) => {
+  const t = () => {
+    e.value && o(), $(() => {
       ie(n);
     });
   };
   return {
-    [d.ENTER]: e,
-    [d.ESCAPE]: e,
-    [d.TAB]: e,
-    [d.SPACE]: e
+    [d.ENTER]: t,
+    [d.ESCAPE]: t,
+    [d.TAB]: t,
+    [d.SPACE]: t
   };
 };
-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)] : []);
-  return se(e, () => {
-    o !== void 0 && o(e.value);
-  }), u(() => {
-    if (!e.value || o !== void 0)
+function dt(n, e, o) {
+  const t = y(n), s = y(e), a = (r, v = []) => v.flatMap((p) => p.label.toLocaleLowerCase().includes(r) ? [p, ...a(r, p.items)] : p.items ? [...a(r, p.items)] : []);
+  return se(t, () => {
+    o !== void 0 && o(t.value);
+  }), c(() => {
+    if (!t.value || o !== void 0)
       return s.value;
-    const r = e.value.toLocaleLowerCase();
+    const r = t.value.toLocaleLowerCase();
     return a(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 },
+}, ut = Symbol("input field component injection key"), pt = D({
+  i18n: { messages: ct },
   name: "b-dropdown",
   components: {
     DropdownInputDefault: Le,
     DropdownInputSmall: st
   }
-}), ft = /* @__PURE__ */ I({
+}), ft = /* @__PURE__ */ D({
   ...pt,
   props: {
     /**
@@ -621,7 +612,7 @@ const ut = {
     size: {
       type: String,
       default: null,
-      validator: (n) => Object.values(L).includes(n)
+      validator: (n) => Object.values(A).includes(n)
     },
     /**
      * If enabled, dropdown will display non-selectable, static categories
@@ -650,82 +641,82 @@ const ut = {
     }
   },
   emits: ["input", "show-more"],
-  setup(n, { emit: t }) {
+  setup(n, { emit: e }) {
     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,
+    const o = n, t = 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"), L = T("dropdown-label"), g = T("dropdown-description"), h = T("dropdown-error"), { isReadOnly: x } = $e(O(o, "readonly")), { cachedSelectedListboxOptions: w, cachedListboxSelectedValues: S, setCachedValues: i } = De(
+      O(o, "items"),
+      O(o, "value"),
+      O(o, "multiple")
+    ), u = y(t["aria-label"]), { ariaLabel: b } = ae(o), N = Ce({
+      ariaLabel: u.value,
       // TODO: take this line away when the aria-label props is removed
-      label: m,
+      label: b,
       defaultFallback: l("ariaLabelFallback")
-    }), U = o.size === L.SMALL || he(ct, !1), re = u(() => U ? L.SMALL : L.DEFAULT), de = u(() => ({
+    }), U = o.size === A.SMALL || he(ut, !1), re = c(() => U ? A.SMALL : A.DEFAULT), de = c(() => ({
       "b-dropdown--condensed": o.condensed
-    })), ue = u(() => ({
+    })), ce = c(() => ({
       "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 = y(""), I = O(o, "items"), ue = dt(E, I, (Q = o == null ? void 0 : o.search) == null ? void 0 : Q.searchEvent), F = c(() => o.dynamicFiltering && !!E.value), pe = at({
+      items: I,
+      placeholder: O(o, "placeholder"),
       selectedValues: w
-    }), fe = u(() => {
+    }), fe = c(() => {
       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(
+          (R) => R.items.some((ge) => ge.value === o.value)
         );
-        return b ? b.items.find((k) => k.value === o.value) : null;
+        return m ? m.items.find((R) => R.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));
+    }), j = c(() => {
+      const m = o.items.findIndex(({ value: B }) => o.value === B);
+      return m > 0 ? m : 0;
+    }), { isMultiLevelSelect: q, flattenedItemsList: H } = Ie(I), ve = c(() => {
+      var m;
+      if (o.multiple) {
+        const B = (m = o == null ? void 0 : o.value) == null ? void 0 : m.length, R = q.value ? H.value.length : I.value.length;
+        return !o.hasMoreItems && R === B ? l("all") : B;
       }
       return null;
-    }), be = u(
+    }), me = c(
       () => `${o.description ? g : ""} ${o.errorMessage ? h : ""}`.trim() || null
     ), V = () => {
       x.value || (f.value = !0);
-    }, N = () => {
+    }, 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);
+      x.value || (f.value = !f.value, F.value && (E.value = ""));
+    }, be = () => {
+      F.value && (E.value = ""), f.value && (f.value = !1, p.value.onOutsideDropdownClick());
+    }, Y = (m) => {
+      o.multiple || (E.value = "", f.value = !1), i(m), e("input", S.value);
     }, Z = () => {
-      t(d.SHOW_MORE);
+      e(d.SHOW_MORE);
     }, _e = it(
       {
         inputContainerRef: r,
         optionsContainerRef: p,
         selectedValueIndex: j,
         isDropdownOpen: f,
-        isDynamicFltering: C(o, "dynamicFiltering"),
+        isDynamicFltering: O(o, "dynamicFiltering"),
         items: o.items,
         isMultiple: o.multiple
       },
       J,
       V,
-      N
+      k
     ), G = rt(
       {
         inputContainerRef: r,
         isDropdownOpen: f
       },
-      N
+      k
     ), ye = {
-      [d.CLOSE_DROPDOWN]: N,
+      [d.CLOSE_DROPDOWN]: k,
       [d.SELECT]: Y,
       [d.SHOW_MORE]: Z,
       ...G
@@ -736,40 +727,40 @@ 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: t, slots: s, hasSlot: a, props: o, emit: e, t: l, inputContainerRef: r, inputContainerRefWrapper: v, optionsContainerRef: p, isDropdownOpen: f, dropdownOptionsContainerId: _, labelId: L, descriptionId: g, errorId: h, isReadOnly: x, cachedSelectedListboxOptions: w, cachedListboxSelectedValues: S, setCachedValues: i, ariaLabelAttribute: u, ariaLabel: b, computedAriaLabel: N, isInputComponent: U, size: re, conditionalClasses: de, descriptionConditionalClasses: ce, searchTerm: E, items: I, filteredItems: ue, isSearching: F, displayValue: pe, selectedValueItem: fe, selectedValueIndex: j, isMultiLevelSelect: q, flattenedItemsList: H, additionalItemsSelected: ve, ariaDescribedBy: me, openDropdown: V, closeDropdown: k, toggleDropdown: J, clickOutsideDropdown: be, onOptionSelected: Y, emitShowMoreEvent: Z, textboxKeyboardNavigationListeners: _e, listboxKeyboardNavigationListeners: G, listboxListeners: ye, BentoDropdownOptionsContainer: We, BentoTypography: we, ErrorMessage: Te, FieldLabel: Ae, vBentoClickOutsideDirective: Oe, vBentoKeyboardNavigationDirective: Be };
   }
 });
 var vt = 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) {
+  var e = this, o = e._self._c, t = e._self._setupProxy;
+  return o("div", { directives: [{ name: "bento-click-outside-directive", rawName: "v-bento-click-outside-directive", value: t.clickOutsideDropdown, expression: "clickOutsideDropdown" }], staticClass: "b-dropdown", class: t.conditionalClasses }, [e.label ? o(t.FieldLabel, { attrs: { id: t.labelId, condensed: e.condensed, label: e.label, "tooltip-text": e.tooltipText, optional: e.optional, required: e.required } }) : e._e(), o("div", e._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], ref: "inputContainerRefWrapper" }, t.textboxKeyboardNavigationListeners), [o(t.size, { ref: "inputContainerRef", tag: "component", attrs: { condensed: e.condensed, value: t.searchTerm, "additional-items-selected": t.additionalItemsSelected, ariaControls: t.dropdownOptionsContainerId, ariaExpanded: t.isDropdownOpen, "aria-labelledby": e.label ? t.labelId : null, "aria-describedby": t.ariaDescribedBy, "aria-label": t.computedAriaLabel, "aria-readonly": t.isReadOnly, readonly: t.isReadOnly, disabled: e.disabled, "display-value": t.displayValue, "dynamic-filtering": e.dynamicFiltering, "is-invalid": !!e.errorMessage || e.error, multiple: e.multiple, open: t.isDropdownOpen, "selected-value-item": t.isInputComponent ? void 0 : t.selectedValueItem, "show-slot-content-in-multiple": e.showSlotContentInMultiple }, on: { input: function(a) {
+    t.searchTerm = a;
+  }, open: t.toggleDropdown, close: t.toggleDropdown }, scopedSlots: e._u([e._l(t.slots, function(a, l) {
     return { key: l, fn: function(r) {
-      return [t._t(l, null, null, r)];
+      return [e._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, "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) {
+  })], null, !0) })], 1), t.inputContainerRef ? o(t.BentoDropdownOptionsContainer, e._g({ ref: "optionsContainerRef", attrs: { id: t.dropdownOptionsContainerId, "aria-label": t.computedAriaLabel, "empty-state": e.emptyState, "debounce-time": (s = e.search) == null ? void 0 : s.debounceTime, disabled: e.disabled, "is-option-disabled": e.isOptionDisabled, items: t.filteredItems, multiple: e.multiple, "static-categories": e.staticCategories, open: t.isDropdownOpen, "selected-value": t.cachedSelectedListboxOptions, searching: t.isSearching, "target-element": t.inputContainerRefWrapper, loading: e.loading, "has-more-items": e.hasMoreItems, "lazy-load-type": e.lazyLoadType, "virtual-scroll": e.virtualScroll }, scopedSlots: e._u([e._l(t.slots, function(a, l) {
     return { key: l, fn: function(r) {
-      return [t._t(l, null, null, r)];
+      return [e._t(l, 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(
+  })], null, !0) }, t.listboxListeners)) : e._e(), e.errorMessage ? o(t.ErrorMessage, { staticClass: "b-dropdown__error-message", attrs: { id: t.errorId, "error-message": e.errorMessage } }) : e._e(), e.description || t.hasSlot("description") ? o(t.BentoTypography, { staticClass: "b-dropdown__description", class: t.descriptionConditionalClasses, attrs: { id: t.descriptionId, el: "span" } }, [e._t("description", function() {
+    return [e._v(" " + e._s(e.description) + " ")];
+  })], 2) : e._e()], 1);
+}, mt = [], bt = /* @__PURE__ */ M(
   ft,
   vt,
-  bt,
+  mt,
   !1,
   null,
-  "b769b98e",
+  "76bdca10",
   null,
   null
 );
-const Bt = mt.exports;
+const Bt = bt.exports;
 export {
   Bt as B,
-  ct as I,
-  L as a,
+  ut as I,
+  A as a,
   dt as u
 };
-//# sourceMappingURL=dropdown.10c034aa.js.map
+//# sourceMappingURL=dropdown.a8037bca.js.map