@adyen/bento-vue2 1.27.0 → 1.28.0

package/dist/chunks/{dropdown.a8037bca.js → dropdown.yhhQCKve.js}

@@ -1,65 +1,65 @@
-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.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 { 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 A = /* @__PURE__ */ ((n) => (n.DEFAULT = "DropdownInputDefault", n.SMALL = "DropdownInputSmall", n))(A || {});
-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, e, o, t) => {
-  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 = c(
+  const a = u(
     () => JSON.stringify(s.value) === JSON.stringify(n.value)
   ), r = () => {
-    t(d.SELECT, s.value), t(d.CLOSE_DROPDOWN);
+    e(d.SELECT, s.value), e(d.CLOSE_DROPDOWN);
   }, v = () => {
-    s.value = n.value, t(d.CLOSE_DROPDOWN);
+    s.value = n.value, e(d.CLOSE_DROPDOWN);
   }, p = () => {
-    o.value && e.value && (s.value = n.value);
-  }, f = c(() => [
+    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) => {
-    s.value = i, e.value || t(d.SELECT, i);
-  }, L = (i) => {
-    _(i), t(d.TAB);
+  ]), y = (i) => {
+    s.value = i, t.value || e(d.SELECT, i);
+  }, S = (i) => {
+    y(i), e(d.TAB);
   }, g = (i) => {
-    _(i), t(d.ENTER);
-  }, h = (i) => {
-    _(i), t(d.SPACE);
-  }, x = () => {
-    v(), t(d.ESCAPE);
+    y(i), e(d.ENTER);
+  }, x = (i) => {
+    y(i), e(d.SPACE);
+  }, h = () => {
+    v(), e(d.ESCAPE);
   }, w = () => {
-    t(d.SHOW_MORE);
-  }, S = {
-    [d.SELECT]: _,
+    e(d.SHOW_MORE);
+  }, L = {
+    [d.SELECT]: y,
     [d.SHOW_MORE]: w,
-    [d.TAB]: L,
-    [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 = D({
-  i18n: { messages: Me },
+}, Pe = D({
+  i18n: { messages: Ne },
   name: "bento-dropdown-options-container"
 }), Fe = /* @__PURE__ */ D({
-  ...ke,
+  ...Pe,
   props: {
     /**
      * Defines a string value that labels an interactive element.
@@ -180,30 +180,30 @@ const Me = {
       default: !1
     }
   },
-  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;
+  setup(n, { expose: t, emit: o }) {
+    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)
+    })), S = u(() => ({
+      "b-dropdown-options-container__listbox--single": !(e != null && e.multiple)
+    })), { 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": `${(N = t == null ? void 0 : t.targetElement) == null ? void 0 : N.clientWidth}px`,
+        "min-width": `${(B = e == null ? void 0 : e.targetElement) == null ? void 0 : B.clientWidth}px`,
         "max-width": "min(500px, 95%)"
       };
-      return t != null && t.multiple ? {
+      return e != null && e.multiple ? {
         actionsLayout: "space-between",
         actions: g.value,
         divider: !0,
         fallbackPosition: ["top-start"],
-        id: T(`dropdown-options-${t.id}`),
-        open: t.open,
+        id: A(`dropdown-options-${e.id}`),
+        open: e.open,
         position: "bottom-start",
         style: {
           width: "auto",
           ...b
         },
-        targetElement: t.targetElement
+        targetElement: e.targetElement
       } : {
         fallbackPosition: ["top-start"],
         offset: [0, 8],
@@ -212,78 +212,72 @@ const Me = {
           display: p.value ? "block" : "none",
           ...b
         },
-        targetElement: t.targetElement
+        targetElement: e.targetElement
       };
     });
-    return e({
-      onOutsideDropdownClick: S
-    }), { __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 };
+    return t({
+      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 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 [e._t(a, null, null, l)];
+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, 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, l) {
+    return { key: l, fn: function(a) {
+      return [t._t(l, null, null, a)];
     } };
-  })], null, !0) }, t.listeners))], 1)]);
-}, Ke = [], ze = /* @__PURE__ */ M(
+  })], null, !0) }, e.listeners))], 1)]);
+}, ze = [], We = /* @__PURE__ */ N(
   Fe,
-  Pe,
   Ke,
+  ze,
   !1,
   null,
-  "11bd9f89",
-  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 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(
+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" } })]);
+}, 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 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,
+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" } })]);
+}, Ge = [], Qe = /* @__PURE__ */ N(
   Ye,
   Ze,
+  Ge,
   !1,
   null,
-  null,
-  null,
   null
 );
-const Qe = Ge.exports, Xe = D({
+const Xe = Qe.exports, et = D({
   name: "dropdown-small-textbox",
   inheritAttrs: !1
-}), et = /* @__PURE__ */ D({
-  ...Xe,
+}), tt = /* @__PURE__ */ D({
+  ...et,
   props: {
     /**
      * The number of additional items that have been selected in the dropdown.
@@ -343,131 +337,129 @@ const Qe = Ge.exports, Xe = D({
     value: { type: String, default: "" }
   },
   emits: ["open", "close"],
-  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 = c(() => o.open && !o.disabled && !o.readonly), a = () => {
-      e("open");
-    }, l = () => {
-      e("close");
+  setup(n, { emit: t }) {
+    const o = n, e = u(() => ({
+      [`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");
+    }, a = () => {
+      t("close");
     }, r = {
-      [ee.OPEN]: a,
-      [ee.CLOSE]: l
+      [ee.OPEN]: l,
+      [ee.CLOSE]: a
     };
-    return { __sfc: !0, emit: e, props: o, conditionalClasses: t, 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 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,
+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);
+}, nt = [], st = /* @__PURE__ */ N(
   tt,
   ot,
+  nt,
   !1,
   null,
-  "8dbfd5fb",
-  null,
-  null
+  "8dbfd5fb"
 );
-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)
+const at = st.exports, lt = (n, t) => t.value.reduce((o, e) => {
+  if (e.items) {
+    const s = e.items.filter(
+      (a) => n.value.find((r) => r.value === a.value)
     );
-    s.length === t.items.length ? o.push(t.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 === 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 n.value.find((s) => s.value === e.value) && o.push(e.label), o;
+}, []).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 c(() => o.value.length ? t.value ? lt(o, n) : o.value.map(({ label: a }) => a).join(", ") : e.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 e;
-  (e = n.value.$children) == null || e[0].$refs.textbox.focus();
-}, it = ({
+  var t;
+  (t = n.value.$children) == null || t[0].$refs.textbox.focus();
+}, rt = ({
   inputContainerRef: n,
-  optionsContainerRef: e,
+  optionsContainerRef: t,
   selectedValueIndex: o,
-  isDropdownOpen: t,
+  isDropdownOpen: e,
   isDynamicFltering: s,
-  items: a,
-  isMultiple: l
+  items: l,
+  isMultiple: a
 }, r, v, p) => {
   const f = ({ detail: i }) => {
-    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();
+    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(), t.value || (v(), $(() => {
-      var u;
-      (u = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || u[0].$el.focus();
+  }, y = ({ detail: i }) => {
+    i.preventDefault(), e.value || (v(), $(() => {
+      var c;
+      (c = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || c[0].$el.focus();
     }));
-  }, L = () => {
-    t.value || (v(), $(() => {
-      var i, u;
-      if (l) {
-        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();
+  }, S = () => {
+    e.value || (v(), $(() => {
+      var i, c;
+      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
-        (u = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || u[a.length - 1].$el.focus();
+        (c = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || c[l.length - 1].$el.focus();
     }));
   }, g = () => {
-    t.value && (p(), ie(n));
-  }, h = () => {
-    t.value || v(), $(() => {
+    e.value && (p(), ie(n));
+  }, x = () => {
+    e.value || v(), $(() => {
       var i;
-      (i = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || i[0].$el.focus();
+      (i = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || i[0].$el.focus();
     });
-  }, x = ({ detail: i }) => {
-    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();
+  }, 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(), 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();
+    r(), e.value && $(() => {
+      var i, c;
+      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 c(() => ({
-    ...s.value ? {} : { [C.SPACE]: x },
+  return u(() => ({
+    ...s.value ? {} : { [C.SPACE]: h },
     [C.ENTER]: w,
     [C.ARROW_DOWN]: f,
-    [C.ARROW_UP]: _,
-    [C.END]: L,
+    [C.ARROW_UP]: y,
+    [C.END]: S,
     [C.ESCAPE]: g,
-    [C.HOME]: h
+    [C.HOME]: x
   }));
-}, rt = ({ inputContainerRef: n, isDropdownOpen: e }, o) => {
-  const t = () => {
-    e.value && o(), $(() => {
+}, dt = ({ inputContainerRef: n, isDropdownOpen: t }, o) => {
+  const e = () => {
+    t.value && o(), $(() => {
       ie(n);
     });
   };
   return {
-    [d.ENTER]: t,
-    [d.ESCAPE]: t,
-    [d.TAB]: t,
-    [d.SPACE]: t
+    [d.ENTER]: e,
+    [d.ESCAPE]: e,
+    [d.TAB]: e,
+    [d.SPACE]: e
   };
 };
-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)
+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 = t.value.toLocaleLowerCase();
-    return a(r, s.value);
+    const r = e.value.toLocaleLowerCase();
+    return l(r, s.value);
   });
 }
 const ct = {
@@ -476,15 +468,15 @@ const ct = {
     clearSearch: "Clear filter",
     ariaLabelFallback: "Dropdown"
   }
-}, ut = Symbol("input field component injection key"), pt = D({
+}, 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__ */ D({
-  ...pt,
+}), vt = /* @__PURE__ */ D({
+  ...ft,
   props: {
     /**
      * @deprecated from version 2.0.0. Use the aria-label attribute instead.
@@ -612,7 +604,7 @@ const ct = {
     size: {
       type: String,
       default: null,
-      validator: (n) => Object.values(A).includes(n)
+      validator: (n) => Object.values(M).includes(n)
     },
     /**
      * If enabled, dropdown will display non-selectable, static categories
@@ -641,66 +633,66 @@ const ct = {
     }
   },
   emits: ["input", "show-more"],
-  setup(n, { emit: e }) {
+  setup(n, { emit: t }) {
     var Q;
-    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(
+    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")
-    ), 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: b,
-      defaultFallback: l("ariaLabelFallback")
-    }), U = o.size === A.SMALL || he(ut, !1), re = c(() => U ? A.SMALL : A.DEFAULT), de = c(() => ({
+    ), 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
-    })), ce = c(() => ({
+    })), ce = u(() => ({
       "b-dropdown__description--error": !!o.errorMessage
-    })), 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({
+    })), 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 = c(() => {
+    }), ve = u(() => {
       if (o != null && o.multiple && Array.isArray(o.value))
         return o.items.filter(
           ({ value: m }) => (o == null ? void 0 : o.value) && (o == null ? void 0 : o.value).includes(m)
         );
       if (!o.multiple && o.staticCategories) {
         const m = o.items.find(
-          (R) => R.items.some((ge) => ge.value === o.value)
+          (T) => T.items.some((he) => he.value === o.value)
         );
-        return m ? m.items.find((R) => R.value === o.value) : null;
+        return m ? m.items.find((T) => T.value === o.value) : null;
       }
       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);
+    }), U = u(() => {
+      const m = o.items.findIndex(({ value: R }) => o.value === R);
       return m > 0 ? m : 0;
-    }), { isMultiLevelSelect: q, flattenedItemsList: H } = Ie(I), ve = c(() => {
+    }), { isMultiLevelSelect: q, flattenedItemsList: H } = Ie(I), me = u(() => {
       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;
+        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;
-    }), me = c(
-      () => `${o.description ? g : ""} ${o.errorMessage ? h : ""}`.trim() || null
+    }), be = u(
+      () => `${o.description ? g : ""} ${o.errorMessage ? x : ""}`.trim() || null
     ), V = () => {
-      x.value || (f.value = !0);
+      h.value || (f.value = !0);
     }, k = () => {
       f.value = !1;
     }, J = () => {
-      x.value || (f.value = !f.value, F.value && (E.value = ""));
-    }, be = () => {
-      F.value && (E.value = ""), f.value && (f.value = !1, p.value.onOutsideDropdownClick());
+      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), e("input", S.value);
+      o.multiple || (E.value = "", f.value = !1), i(m), t("input", L.value);
     }, Z = () => {
-      e(d.SHOW_MORE);
-    }, _e = it(
+      t(d.SHOW_MORE);
+    }, _e = rt(
       {
         inputContainerRef: r,
         optionsContainerRef: p,
-        selectedValueIndex: j,
+        selectedValueIndex: U,
         isDropdownOpen: f,
         isDynamicFltering: O(o, "dynamicFiltering"),
         items: o.items,
@@ -709,13 +701,13 @@ const ct = {
       J,
       V,
       k
-    ), G = rt(
+    ), G = dt(
       {
         inputContainerRef: r,
         isDropdownOpen: f
       },
       k
-    ), ye = {
+    ), ge = {
       [d.CLOSE_DROPDOWN]: k,
       [d.SELECT]: Y,
       [d.SHOW_MORE]: Z,
@@ -727,40 +719,38 @@ const ct = {
                         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: 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 };
+    ), 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 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 [e._t(l, null, null, r)];
+  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 }, [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), 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 [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, "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) }, 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,
+  })], 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 = [], yt = /* @__PURE__ */ N(
   vt,
   mt,
+  bt,
   !1,
   null,
-  "76bdca10",
-  null,
-  null
+  "aa06f131"
 );
-const Bt = bt.exports;
+const Rt = yt.exports;
 export {
-  Bt as B,
-  ut as I,
-  A as a,
-  dt as u
+  Rt as B,
+  pt as I,
+  M as a,
+  ut as u
 };
-//# sourceMappingURL=dropdown.a8037bca.js.map
+//# sourceMappingURL=dropdown.yhhQCKve.js.map