@adyen/bento-vue2 1.2.0 → 1.3.0

package/dist/chunks/{dropdown.368486b1.js → dropdown.c05678d0.js}

@@ -1,25 +1,26 @@
-import { ref as b, watch as j, computed as d, defineComponent as A, toRefs as oe, nextTick as S, toRef as C } from "vue";
-import { D as le, a as O, b as T, c as ae } from "./dropdown-default-textbox.a5eca928.js";
+import { ref as b, watch as j, computed as d, defineComponent as A, toRefs as le, nextTick as S, toRef as O } from "vue";
+import { D as ae, a as C, b as R, c as se } from "./dropdown-default-textbox.819e43f7.js";
 import { n as $ } from "./_plugin-vue2_normalizer.71e2aa87.js";
-import { B as se, d as ie, a as re } from "./index.175f9e2d.js";
+import { B as ie, d as re, a as de } from "./index.56858f4e.js";
 import { g as L } from "./unique-id.a2a2b458.js";
-import { a as i, B as I, b as D } from "./listbox.f51e92cd.js";
-import { B as w, a as de } from "./debounce.f8d92e44.js";
-import { PopperContainer as R, PopperContainerPosition as W } from "../popper-container.js";
+import { a as i, B as I, b as D } from "./listbox.116ed0c1.js";
+import { B as w, a as ue } from "./debounce.f8d92e44.js";
+import { u as ce } from "./use-form-layout-loading.d03e5d48.js";
+import { PopperContainer as T, PopperContainerPosition as W } from "../popper-container.js";
 import { u as V } from "./i18n.155748d6.js";
 import { BentoPopover as k, BentoPopoverPositions as z } from "../popover.js";
-import { c as q } from "./button-actions.cf73ed47.js";
-import { E as ue } from "./error-message.a581a172.js";
-import { B as ce } from "./directive.0408e565.js";
+import { c as q } from "./button-actions.bd397c79.js";
+import { E as fe } from "./error-message.0433b539.js";
+import { B as pe } from "./directive.0408e565.js";
 import "../assets/dropdown.css";
 var E = /* @__PURE__ */ ((t) => (t.DEFAULT = "DropdownInputDefault", t.SMALL = "DropdownInputSmall", t))(E || {});
-const fe = {
+const ve = {
   "en-US": {
     apply: "Apply",
     cancel: "Cancel",
     noOptionsMatchThisSearch: "No options match this search"
   }
-}, pe = (t, e, n) => {
+}, _e = (t, e, n) => {
   const o = b(t.value), { t: l } = V();
   j(t, () => {
     o.value = t.value;
@@ -44,35 +45,35 @@ const fe = {
     o.value = f, e.value || n(i.SELECT, f);
   }, _ = (f) => {
     c(f), n(i.TAB);
-  }, x = (f) => {
+  }, m = (f) => {
     c(f), n(i.ENTER);
-  }, p = (f) => {
+  }, x = (f) => {
     c(f), n(i.SPACE);
-  }, g = () => {
+  }, p = () => {
     r(), n(i.ESCAPE);
-  }, h = () => {
+  }, g = () => {
     n(i.SHOW_MORE);
-  }, m = {
+  }, h = {
     [i.SELECT]: c,
-    [i.SHOW_MORE]: h,
+    [i.SHOW_MORE]: g,
     [i.TAB]: _,
-    [i.SPACE]: p,
-    [i.ENTER]: x
+    [i.SPACE]: x,
+    [i.ENTER]: m
   };
   return {
     // Values
     actions: u,
     internalSelectedValue: o,
     // Methods
-    listeners: m,
-    onEscapeKey: g
+    listeners: h,
+    onEscapeKey: p
   };
-}, ve = A({
-  i18n: { messages: fe },
+}, me = A({
+  i18n: { messages: ve },
   name: "bento-dropdown-options-container",
   components: {
     BentoListbox: I,
-    PopperContainer: R,
+    PopperContainer: T,
     BentoPopover: k
   },
   props: {
@@ -167,7 +168,7 @@ const fe = {
      * Reference to the DOM element or Vue component for positioning
      * the Dropdown container.
      */
-    targetElement: { type: R.props.targetElement.type, required: !0 }
+    targetElement: { type: T.props.targetElement.type, required: !0 }
   },
   emits: [
     i.CLOSE_DROPDOWN,
@@ -179,16 +180,16 @@ const fe = {
     i.TAB
   ],
   setup(t, { emit: e, slots: n }) {
-    const { selectedValue: o, multiple: l } = oe(t), a = b(null), { t: s } = V(), r = d(() => t.open && !t.disabled), u = d(() => s("noOptionsMatchThisSearch")), c = d(() => ({
+    const { selectedValue: o, multiple: l } = le(t), a = b(null), { t: s } = V(), r = d(() => t.open && !t.disabled), u = d(() => s("noOptionsMatchThisSearch")), c = d(() => ({
       "b-dropdown-options-container__listbox--small": t.inputSize === E.SMALL,
       "b-dropdown-options-container__listbox--single": !(t != null && t.multiple)
-    })), { actions: _, internalSelectedValue: x, listeners: p, onEscapeKey: g } = pe(
+    })), { actions: _, internalSelectedValue: m, listeners: x, onEscapeKey: p } = _e(
       o,
       l,
       e
+    ), g = d(
+      () => t != null && t.multiple ? k : T
     ), h = d(
-      () => t != null && t.multiple ? k : R
-    ), m = d(
       () => {
         var f;
         return t != null && t.multiple ? {
@@ -216,10 +217,10 @@ const fe = {
       noResultsMessage: u,
       slots: n,
       actions: _,
-      internalSelectedValue: x,
+      internalSelectedValue: m,
       // Component wrapper
-      popperContainerOrPopoverComponent: h,
-      popperContainerOrPopoverProps: m,
+      popperContainerOrPopoverComponent: g,
+      popperContainerOrPopoverProps: h,
       // Refs
       dropdownOptionsListboxRef: a,
       // Enums
@@ -227,12 +228,12 @@ const fe = {
       BentoPopoverPositions: z,
       PopperContainerPosition: W,
       // Events
-      onEscapeKey: g,
-      listeners: p
+      onEscapeKey: p,
+      listeners: x
     };
   }
 });
-var _e = function() {
+var ye = function() {
   var e = this, n = e._self._c;
   return e._self._setupProxy, n(e.popperContainerOrPopoverComponent, e._b({ tag: "component", staticClass: "b-dropdown-options-container" }, "component", e.popperContainerOrPopoverProps, !1), [n("div", { on: { keydown: function(o) {
     return !o.type.indexOf("key") && e._k(o.keyCode, "esc", 27, o.key, ["Esc", "Escape"]) ? null : e.onEscapeKey.apply(null, arguments);
@@ -241,59 +242,60 @@ var _e = function() {
       return [e._t(l, null, null, a)];
     } };
   })], null, !0) }, e.listeners))], 1)]);
-}, me = [], ye = /* @__PURE__ */ $(
-  ve,
-  _e,
+}, be = [], ge = /* @__PURE__ */ $(
   me,
+  ye,
+  be,
   !1,
   null,
   "5fc31fae",
   null,
   null
 );
-const be = ye.exports;
+const xe = ge.exports;
 let U = 0;
-const ge = {
+const he = {
   beforeCreate() {
     this.uuid = U.toString(), U += 1;
   }
 };
-var xe = function() {
+var we = function() {
   var e = this, n = e._self._c;
   return n("svg", e._b({ attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? n("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), n("path", { attrs: { fill: "#00112C", "fill-rule": "evenodd", d: "M4.4697 5.96967C4.76259 5.67678 5.23747 5.67678 5.53036 5.96967L8.00003 8.43934L10.4697 5.96967C10.7626 5.67678 11.2375 5.67678 11.5304 5.96967C11.8233 6.26256 11.8233 6.73744 11.5304 7.03033L8.53036 10.0303C8.23747 10.3232 7.76259 10.3232 7.4697 10.0303L4.4697 7.03033C4.17681 6.73744 4.17681 6.26256 4.4697 5.96967Z", "clip-rule": "evenodd" } })]);
-}, he = [], we = /* @__PURE__ */ $(
-  ge,
-  xe,
+}, Se = [], Ee = /* @__PURE__ */ $(
   he,
+  we,
+  Se,
   !1,
   null,
   "18645fe6",
   null,
   null
 );
-const Se = we.exports;
+const Oe = Ee.exports;
 let H = 0;
-const Ee = {
+const Ce = {
   beforeCreate() {
     this.uuid = H.toString(), H += 1;
   }
 };
-var Oe = function() {
+var Le = function() {
   var e = this, n = e._self._c;
   return n("svg", e._b({ attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? n("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), n("path", { attrs: { fill: "#00112C", "fill-rule": "evenodd", d: "M11.5303 10.0303C11.2374 10.3232 10.7626 10.3232 10.4697 10.0303L8 7.56066L5.53033 10.0303C5.23744 10.3232 4.76256 10.3232 4.46967 10.0303C4.17678 9.73744 4.17678 9.26256 4.46967 8.96967L7.46967 5.96967C7.61032 5.82902 7.80109 5.75 8 5.75C8.19891 5.75 8.38968 5.82902 8.53033 5.96967L11.5303 8.96967C11.8232 9.26256 11.8232 9.73744 11.5303 10.0303Z", "clip-rule": "evenodd" } })]);
-}, Ce = [], Le = /* @__PURE__ */ $(
-  Ee,
-  Oe,
+}, $e = [], De = /* @__PURE__ */ $(
   Ce,
+  Le,
+  $e,
   !1,
   null,
   "6f20d431",
   null,
   null
 );
-const $e = Le.exports, De = A({
+const Be = De.exports, Re = A({
   name: "dropdown-small-textbox",
-  components: { ChevronDownSmallIcon: Se, ChevronUpSmallIcon: $e, DropdownBaseTextbox: le },
+  components: { ChevronDownSmallIcon: Oe, ChevronUpSmallIcon: Be, DropdownBaseTextbox: ae },
+  inheritAttrs: !1,
   props: {
     /**
      * The number of additional items that have been selected in the dropdown.
@@ -364,19 +366,19 @@ const $e = Le.exports, De = A({
      */
     value: { type: String, default: "" }
   },
-  emits: [O.OPEN, O.CLOSE],
+  emits: [C.OPEN, C.CLOSE],
   setup(t, { emit: e }) {
     const n = d(() => ({
-      [`b-dropdown-small-textbox--${T.DISABLED}`]: t.disabled,
-      [`b-dropdown-small-textbox--${T.READONLY}`]: t.readonly,
-      [`b-dropdown-small-textbox--${T.OPENED}`]: t.open
+      [`b-dropdown-small-textbox--${R.DISABLED}`]: t.disabled,
+      [`b-dropdown-small-textbox--${R.READONLY}`]: t.readonly,
+      [`b-dropdown-small-textbox--${R.OPENED}`]: t.open
     })), o = d(() => t.open && !t.disabled && !t.readonly), l = () => {
-      e(O.OPEN);
+      e(C.OPEN);
     }, a = () => {
-      e(O.CLOSE);
+      e(C.CLOSE);
     }, s = {
-      [O.OPEN]: l,
-      [O.CLOSE]: a
+      [C.OPEN]: l,
+      [C.CLOSE]: a
     };
     return {
       // Values
@@ -387,23 +389,23 @@ const $e = Le.exports, De = A({
     };
   }
 });
-var Be = function() {
+var Te = function() {
   var e = this, n = e._self._c;
   return e._self._setupProxy, n("div", { staticClass: "b-dropdown-small-textbox", class: e.conditionalClasses }, [n("dropdown-base-textbox", e._g(e._b({ staticClass: "b-dropdown-small-textbox__textbox", scopedSlots: e._u([{ key: "icon", fn: function() {
     return [n("div", { staticClass: "b-dropdown-small-textbox__chevron" }, [n("chevron-up-small-icon", { directives: [{ name: "show", rawName: "v-show", value: e.isDropdownOpen, expression: "isDropdownOpen" }], attrs: { "svg-title": "opened" } }), n("chevron-down-small-icon", { directives: [{ name: "show", rawName: "v-show", value: !e.isDropdownOpen, expression: "!isDropdownOpen" }], attrs: { "svg-title": "closed" } })], 1)];
   }, proxy: !0 }]) }, "dropdown-base-textbox", { ...e.$attrs, ...e.$props }, !1), e.listeners))], 1);
-}, Te = [], Re = /* @__PURE__ */ $(
-  De,
-  Be,
+}, Ie = [], Ae = /* @__PURE__ */ $(
+  Re,
   Te,
+  Ie,
   !1,
   null,
-  "125f949e",
+  "d9e6eff4",
   null,
   null
 );
-const Ie = Re.exports;
-function Ae(t, e, n) {
+const Ne = Ae.exports;
+function Pe(t, e, n) {
   const o = b(t), l = b(e), a = (r, u = []) => u.flatMap((c) => c.label.toLocaleLowerCase().includes(r) ? [c, ...a(r, c.items)] : c.items ? [...a(r, c.items)] : []);
   return j(o, () => {
     n !== void 0 && n(o.value);
@@ -414,13 +416,13 @@ function Ae(t, e, n) {
     return a(r, l.value);
   });
 }
-const Ne = ({ items: t, placeholder: e, selectedValue: n }) => {
+const Me = ({ items: t, placeholder: e, selectedValue: n }) => {
   const o = t.value.find(({ value: l }) => l === n.value);
   return (o == null ? void 0 : o.label) || e.value || null;
-}, Pe = ({ selectedValues: t, items: e, placeholder: n }) => t.value ? t.value.map((o) => {
+}, Fe = ({ selectedValues: t, items: e, placeholder: n }) => t.value ? t.value.map((o) => {
   const { label: l } = e.value.find(({ value: a }) => a === o);
   return l;
-}).join(", ") : n.value || null, Me = ({ selectedValues: t, items: e, placeholder: n }) => {
+}).join(", ") : n.value || null, Ke = ({ selectedValues: t, items: e, placeholder: n }) => {
   var o;
   return (o = t.value) != null && o.length ? e.value.reduce((l, a) => {
     if (a.items) {
@@ -431,13 +433,13 @@ const Ne = ({ items: t, placeholder: e, selectedValue: n }) => {
     }
     return t.value.includes(a.value) && l.push(a.label), l;
   }, []).join(", ") : n.value || null;
-}, Ke = ({ items: t, placeholder: e, value: n, multiple: o }) => {
+}, We = ({ items: t, placeholder: e, value: n, multiple: o }) => {
   const l = d(() => t.value.find((s) => {
     var r;
     return (r = s.items) == null ? void 0 : r.length;
   }));
-  return d(() => o.value ? l.value ? Me({ selectedValues: n, placeholder: e, items: t }) : Pe({ selectedValues: n, items: t, placeholder: e }) : Ne({ items: t, placeholder: e, selectedValue: n }));
-}, Fe = {
+  return d(() => o.value ? l.value ? Ke({ selectedValues: n, placeholder: e, items: t }) : Fe({ selectedValues: n, items: t, placeholder: e }) : Me({ items: t, placeholder: e, selectedValue: n }));
+}, ke = {
   "en-US": {
     optional: "optional",
     required: "required",
@@ -445,7 +447,7 @@ const Ne = ({ items: t, placeholder: e, selectedValue: n }) => {
   }
 }, J = (t) => {
   t.value.$children[0].$refs.textbox.focus();
-}, We = ({
+}, ze = ({
   inputContainerRef: t,
   optionsContainerRef: e,
   selectedValueIndex: n,
@@ -458,11 +460,11 @@ const Ne = ({ items: t, placeholder: e, selectedValue: n }) => {
     y.preventDefault(), o.value || (u(), S(() => {
       s ? e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[0].$el.focus() : e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[n.value].$el.focus();
     }));
-  }, x = ({ detail: y }) => {
+  }, m = ({ detail: y }) => {
     y.preventDefault(), o.value || (u(), S(() => {
       e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[0].$el.focus();
     }));
-  }, p = () => {
+  }, x = () => {
     o.value || (u(), S(() => {
       if (s) {
         const y = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;
@@ -470,13 +472,13 @@ const Ne = ({ items: t, placeholder: e, selectedValue: n }) => {
       } else
         e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[a.length - 1].$el.focus();
     }));
-  }, g = () => {
+  }, p = () => {
     o.value && (c(), J(t));
-  }, h = () => {
+  }, g = () => {
     o.value || u(), S(() => {
       e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[0].$el.focus();
     });
-  }, m = ({ detail: y }) => {
+  }, h = ({ detail: y }) => {
     y.preventDefault(), r(), o.value && S(() => {
       s ? e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[0].$el.focus() : e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[n.value].$el.focus();
     });
@@ -486,15 +488,15 @@ const Ne = ({ items: t, placeholder: e, selectedValue: n }) => {
     });
   };
   return d(() => ({
-    ...l.value ? {} : { [w.SPACE]: m },
+    ...l.value ? {} : { [w.SPACE]: h },
     [w.ENTER]: f,
     [w.ARROW_DOWN]: _,
-    [w.ARROW_UP]: x,
-    [w.END]: p,
-    [w.ESCAPE]: g,
-    [w.HOME]: h
+    [w.ARROW_UP]: m,
+    [w.END]: x,
+    [w.ESCAPE]: p,
+    [w.HOME]: g
   }));
-}, ke = ({ inputContainerRef: t, isDropdownOpen: e }, n) => {
+}, qe = ({ inputContainerRef: t, isDropdownOpen: e }, n) => {
   const o = () => {
     e.value && n(), S(() => {
       J(t);
@@ -506,17 +508,17 @@ const Ne = ({ items: t, placeholder: e, selectedValue: n }) => {
     [i.TAB]: o,
     [i.SPACE]: o
   };
-}, ze = A({
-  i18n: { messages: Fe },
+}, Ue = A({
+  i18n: { messages: ke },
   name: "b-dropdown",
   components: {
-    BentoDropdownOptionsContainer: be,
-    BentoTypography: se,
-    DropdownInputDefault: ae,
-    DropdownInputSmall: Ie,
-    ErrorMessage: ue
+    BentoDropdownOptionsContainer: xe,
+    BentoTypography: ie,
+    DropdownInputDefault: se,
+    DropdownInputSmall: Ne,
+    ErrorMessage: fe
   },
-  directives: { BentoClickOutsideDirective: ce, BentoKeyboardNavigationDirective: de },
+  directives: { BentoClickOutsideDirective: pe, BentoKeyboardNavigationDirective: ue },
   props: {
     /**
      * Defines a string value that labels an interactive element.
@@ -648,64 +650,64 @@ const Ne = ({ items: t, placeholder: e, selectedValue: n }) => {
   },
   emits: ["input", i.SHOW_MORE],
   setup(t, { emit: e, slots: n }) {
-    var F;
-    const o = b(null), l = b(null), a = b(null), s = b(!1), r = L("bento-dropdown-options-container"), u = L("dropdown-label"), c = L("dropdown-description"), _ = L("dropdown-error"), x = d(() => ({
+    var K;
+    const o = b(null), l = b(null), a = b(null), s = b(!1), r = L("bento-dropdown-options-container"), u = L("dropdown-label"), c = L("dropdown-description"), _ = L("dropdown-error"), { isReadOnly: m } = ce(O(t, "readonly")), x = d(() => ({
       "b-dropdown__description--error": !!t.errorMessage
-    })), p = b(""), g = C(t, "items"), h = Ae(p, g, (F = t == null ? void 0 : t.search) == null ? void 0 : F.searchEvent), m = d(() => t.dynamicFiltering && !!p.value), f = Ke({
+    })), p = b(""), g = O(t, "items"), h = Pe(p, g, (K = t == null ? void 0 : t.search) == null ? void 0 : K.searchEvent), f = d(() => t.dynamicFiltering && !!p.value), N = We({
       items: g,
-      multiple: C(t, "multiple"),
-      placeholder: C(t, "placeholder"),
-      value: C(t, "value")
-    }), N = d(
+      multiple: O(t, "multiple"),
+      placeholder: O(t, "placeholder"),
+      value: O(t, "value")
+    }), y = d(
       () => t != null && t.multiple ? t.items.filter(
         ({ value: v }) => (t == null ? void 0 : t.value) && (t == null ? void 0 : t.value).includes(v)
       ) : t.items.find(({ value: v }) => v === (t == null ? void 0 : t.value))
-    ), y = d(() => {
-      const v = t.items.findIndex(({ value: ne }) => t.value === ne);
+    ), Z = d(() => {
+      const v = t.items.findIndex(({ value: oe }) => t.value === oe);
       return v > 0 ? v : 0;
-    }), Z = d(() => {
+    }), Y = d(() => {
       var v;
       return t.multiple ? (v = t == null ? void 0 : t.value) == null ? void 0 : v.length : null;
-    }), Y = d(
+    }), G = d(
       () => `${t.description ? c : ""} ${t.errorMessage ? _ : ""}`.trim() || null
-    ), G = () => {
-      t.readonly || (s.value = !0);
+    ), Q = () => {
+      m.value || (s.value = !0);
     }, B = () => {
       s.value = !1;
     }, P = () => {
-      t.readonly || (s.value = !s.value, m.value && (p.value = ""));
-    }, Q = () => {
-      m.value && (p.value = ""), s.value && (s.value = !1);
+      m.value || (s.value = !s.value, f.value && (p.value = ""));
+    }, X = () => {
+      f.value && (p.value = ""), s.value && (s.value = !1);
     }, M = (v) => {
       t.multiple || (p.value = "", s.value = !1), e("input", v);
-    }, K = () => {
+    }, F = () => {
       e(i.SHOW_MORE);
-    }, X = We(
+    }, ee = ze(
       {
         inputContainerRef: o,
         optionsContainerRef: a,
-        selectedValueIndex: y,
+        selectedValueIndex: Z,
         isDropdownOpen: s,
-        isDynamicFltering: C(t, "dynamicFiltering"),
+        isDynamicFltering: O(t, "dynamicFiltering"),
         items: t.items,
         isMultiple: t.multiple
       },
       P,
-      G,
+      Q,
       B
-    ), ee = ke(
+    ), te = qe(
       {
         inputContainerRef: o,
         isDropdownOpen: s
       },
       B
-    ), te = {
+    ), ne = {
       [i.CLOSE_DROPDOWN]: B,
       [i.SELECT]: M,
-      [i.SHOW_MORE]: K,
-      ...ee
+      [i.SHOW_MORE]: F,
+      ...te
     };
-    return t.error && ie(
+    return t.error && re(
       'BentoDropdown "error" property',
       `Use the BentoDropdown "errorMessage" property instead to indicate that there is a modifier error.
                     Having the field as "undefined" will hide/remove the error.
@@ -713,18 +715,19 @@ const Ne = ({ items: t, placeholder: e, selectedValue: n }) => {
       "2.0.0"
     ), {
       // Values
-      additionalItemsSelected: Z,
+      additionalItemsSelected: Y,
       isDropdownOpen: s,
-      displayValue: f,
+      displayValue: N,
       dropdownOptionsContainerId: r,
       filteredItems: h,
-      isSearching: m,
+      isSearching: f,
+      isReadOnly: m,
       searchTerm: p,
       labelId: u,
       descriptionId: c,
       errorId: _,
-      ariaDescribedBy: Y,
-      selectedValueItem: N,
+      ariaDescribedBy: G,
+      selectedValueItem: y,
       // Conciliation of Vue2 $scopedSlots and Vue3 $scopes.
       // The setup method and the "useSlots" composible define
       // { slots } as a proxy of $scopedSlots and $scopes in their
@@ -736,23 +739,23 @@ const Ne = ({ items: t, placeholder: e, selectedValue: n }) => {
       inputContainerRefWrapper: l,
       optionsContainerRef: a,
       // Events
-      closeOpenedDropdown: Q,
+      closeOpenedDropdown: X,
       toggleDropdown: P,
       onOptionSelected: M,
-      emitShowMoreEvent: K,
-      textboxKeyboardNavigationListeners: X,
-      listboxListeners: te,
+      emitShowMoreEvent: F,
+      textboxKeyboardNavigationListeners: ee,
+      listboxListeners: ne,
       // Enums
-      BentoTypographyElement: re,
+      BentoTypographyElement: de,
       BentoDropdownSize: E,
       BentoDropdownLazyLoadType: D
     };
   }
 });
-var qe = function() {
+var He = function() {
   var o;
   var e = this, n = e._self._c;
-  return e._self._setupProxy, n("div", { directives: [{ name: "bento-click-outside-directive", rawName: "v-bento-click-outside-directive", value: e.closeOpenedDropdown, expression: "closeOpenedDropdown" }], staticClass: "b-dropdown" }, [e.label ? n("div", { staticClass: "b-dropdown__label", attrs: { id: e.labelId } }, [n("bento-typography", { attrs: { el: e.BentoTypographyElement.SPAN, stronger: "" } }, [e._v(e._s(e.label))]), e.optional ? n("bento-typography", { staticClass: "b-dropdown__label-requirement", attrs: { el: e.BentoTypographyElement.SPAN } }, [e._v(" (" + e._s(e.$t("optional")) + ") ")]) : e._e(), e.required ? n("bento-typography", { staticClass: "b-dropdown__label-requirement", attrs: { el: e.BentoTypographyElement.SPAN } }, [e._v(" (" + e._s(e.$t("required")) + ") ")]) : e._e()], 1) : e._e(), n("div", e._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], ref: "inputContainerRefWrapper" }, e.textboxKeyboardNavigationListeners), [n(e.size, { ref: "inputContainerRef", tag: "component", attrs: { 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.ariaLabel ? e.ariaLabel : null, "aria-readonly": e.readonly, readonly: e.readonly, disabled: e.disabled, "display-value": e.displayValue, "dynamic-filtering": e.dynamicFiltering, "is-invalid": !!e.errorMessage || e.error, multiple: e.multiple, open: e.isDropdownOpen, "selected-value-item": e.size === e.BentoDropdownSize.DEFAULT ? e.selectedValueItem : void 0, "show-slot-content-in-multiple": e.showSlotContentInMultiple }, on: { input: function(l) {
+  return e._self._setupProxy, n("div", { directives: [{ name: "bento-click-outside-directive", rawName: "v-bento-click-outside-directive", value: e.closeOpenedDropdown, expression: "closeOpenedDropdown" }], staticClass: "b-dropdown" }, [e.label ? n("div", { staticClass: "b-dropdown__label", attrs: { id: e.labelId } }, [n("bento-typography", { attrs: { el: e.BentoTypographyElement.SPAN, stronger: "" } }, [e._v(e._s(e.label))]), e.optional ? n("bento-typography", { staticClass: "b-dropdown__label-requirement", attrs: { el: e.BentoTypographyElement.SPAN } }, [e._v(" (" + e._s(e.$t("optional")) + ") ")]) : e._e(), e.required ? n("bento-typography", { staticClass: "b-dropdown__label-requirement", attrs: { el: e.BentoTypographyElement.SPAN } }, [e._v(" (" + e._s(e.$t("required")) + ") ")]) : e._e()], 1) : e._e(), n("div", e._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], ref: "inputContainerRefWrapper" }, e.textboxKeyboardNavigationListeners), [n(e.size, { ref: "inputContainerRef", tag: "component", attrs: { 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.ariaLabel ? e.ariaLabel : null, "aria-readonly": e.isReadOnly, readonly: e.isReadOnly, disabled: e.disabled, "display-value": e.displayValue, "dynamic-filtering": e.dynamicFiltering, "is-invalid": !!e.errorMessage || e.error, multiple: e.multiple, open: e.isDropdownOpen, "selected-value-item": e.size === e.BentoDropdownSize.DEFAULT ? e.selectedValueItem : void 0, "show-slot-content-in-multiple": e.showSlotContentInMultiple }, on: { input: function(l) {
     e.searchTerm = l;
   }, open: e.toggleDropdown, close: e.toggleDropdown }, scopedSlots: e._u([e._l(e.slots, function(l, a) {
     return { key: a, fn: function(s) {
@@ -763,20 +766,20 @@ var qe = function() {
       return [e._t(a, null, null, s)];
     } };
   })], null, !0) }, e.listboxListeners)) : e._e(), e.errorMessage ? n("error-message", { staticClass: "b-dropdown__error-message", attrs: { id: e.errorId, "error-message": e.errorMessage } }) : e._e(), e.description ? n("bento-typography", { staticClass: "b-dropdown__description", class: e.descriptionConditionalClasses, attrs: { id: e.descriptionId, el: e.BentoTypographyElement.SPAN } }, [e._v(" " + e._s(e.description) + " ")]) : e._e()], 1);
-}, Ue = [], He = /* @__PURE__ */ $(
-  ze,
-  qe,
+}, je = [], Ve = /* @__PURE__ */ $(
   Ue,
+  He,
+  je,
   !1,
   null,
-  "2ef084df",
+  "ad005bba",
   null,
   null
 );
-const at = He.exports;
+const rt = Ve.exports;
 export {
-  at as B,
+  rt as B,
   E as a,
-  Ae as u
+  Pe as u
 };
-//# sourceMappingURL=dropdown.368486b1.js.map
+//# sourceMappingURL=dropdown.c05678d0.js.map