@adyen/bento-vue3 1.5.0 → 1.6.0

package/dist/chunks/{dropdown.22e51667.js → dropdown.6a484461.js}

@@ -1,18 +1,17 @@
-import { ref as $, watch as be, computed as c, defineComponent as ne, toRefs as ve, resolveComponent as R, openBlock as b, createBlock as B, resolveDynamicComponent as ye, mergeProps as A, withCtx as E, createElementVNode as U, withKeys as Ne, createVNode as z, toHandlers as x, createSlots as Z, renderList as Y, renderSlot as G, normalizeProps as Q, guardReactiveProps as X, createElementBlock as O, toDisplayString as P, createCommentVNode as L, pushScopeId as ge, popScopeId as he, normalizeClass as we, withDirectives as q, vShow as de, nextTick as I, toRef as N, resolveDirective as ue, createTextVNode as W } from "vue";
-import { a as s, B as ee, b as te } from "./listbox.4205c0de.js";
+import { ref as $, watch as be, computed as f, defineComponent as ne, toRefs as ve, resolveComponent as R, openBlock as b, createBlock as I, resolveDynamicComponent as ye, mergeProps as A, withCtx as L, createElementVNode as U, withKeys as Ne, createVNode as k, toHandlers as W, createSlots as Z, renderList as Y, renderSlot as G, normalizeProps as Q, guardReactiveProps as X, createElementBlock as E, toDisplayString as P, createCommentVNode as O, pushScopeId as ge, popScopeId as he, normalizeClass as we, withDirectives as q, vShow as de, nextTick as B, toRef as N, resolveDirective as ue, createTextVNode as x } from "vue";
+import { a as s, B as ee, b as te } from "./listbox.a7255ce1.js";
 import { B as Me } from "./directive.0408e565.js";
 import { B as D, a as Pe } from "./keyboard-navigation.ca47dfa8.js";
-import { D as Ke, a as M, b as j, c as ke } from "./dropdown-default-textbox.a1789dc7.js";
-import { _ as F } from "./_plugin-vue_export-helper.dad06003.js";
-import { B as ze, d as Fe } from "./index.32ed68b7.js";
-import { g as k } from "./unique-id.a2a2b458.js";
+import { D as Ke, a as M, b as j, c as ke } from "./dropdown-default-textbox.88a42e9b.js";
+import { _ as z } from "./_plugin-vue_export-helper.dad06003.js";
+import { B as ze, d as Fe } from "./index.9fc54b60.js";
+import { g as K } from "./unique-id.a2a2b458.js";
 import { u as le } from "./i18n.6c402773.js";
-import { u as We } from "./aria-label.ac9651a5.js";
-import { u as xe } from "./use-form-layout-loading.d03e5d48.js";
+import { u as xe } from "./aria-label.ac9651a5.js";
+import { u as We } from "./use-form-layout-loading.d03e5d48.js";
 import { PopperContainer as J } from "../popper-container.js";
 import { BentoPopover as ce } from "../popover.js";
-import { BentoButtonActionsLayout as qe } from "../button.js";
-import { E as Ue } from "./error-message.37b6c7aa.js";
+import { E as qe } from "./error-message.11e1fa1f.js";
 import "../assets/dropdown.css";
 var T = /* @__PURE__ */ ((e) => (e.DEFAULT = "DropdownInputDefault", e.SMALL = "DropdownInputSmall", e))(T || {});
 const oe = {
@@ -21,18 +20,18 @@ const oe = {
     cancel: "Cancel",
     noOptionsMatchThisSearch: "No options match this search"
   }
-}, He = (e, o, n) => {
+}, Ue = (e, o, n) => {
   const t = $(e.value), { t: a } = le({ messages: oe });
   be(e, () => {
     t.value = e.value;
   });
-  const i = c(
+  const i = f(
     () => JSON.stringify(t.value) === JSON.stringify(e.value)
   ), r = () => {
     n(s.SELECT, t.value), n(s.CLOSE_DROPDOWN);
   }, d = () => {
     t.value = e.value, n(s.CLOSE_DROPDOWN);
-  }, l = c(() => [
+  }, l = f(() => [
     {
       title: a("apply"),
       event: r,
@@ -42,24 +41,24 @@ const oe = {
       title: a("cancel"),
       event: d
     }
-  ]), f = (v) => {
+  ]), c = (v) => {
     t.value = v, o.value || n(s.SELECT, v);
   }, _ = (v) => {
-    f(v), n(s.TAB);
-  }, y = (v) => {
-    f(v), n(s.ENTER);
+    c(v), n(s.TAB);
   }, g = (v) => {
-    f(v), n(s.SPACE);
+    c(v), n(s.ENTER);
+  }, y = (v) => {
+    c(v), n(s.SPACE);
   }, m = () => {
     d(), n(s.ESCAPE);
   }, h = () => {
     n(s.SHOW_MORE);
   }, C = {
-    [s.SELECT]: f,
+    [s.SELECT]: c,
     [s.SHOW_MORE]: h,
     [s.TAB]: _,
-    [s.SPACE]: g,
-    [s.ENTER]: y
+    [s.SPACE]: y,
+    [s.ENTER]: g
   };
   return {
     // Values
@@ -69,7 +68,7 @@ const oe = {
     listeners: C,
     onEscapeKey: m
   };
-}, Ve = ne({
+}, He = ne({
   i18n: { messages: oe },
   name: "bento-dropdown-options-container",
   components: {
@@ -180,70 +179,76 @@ const oe = {
     s.TAB
   ],
   setup(e, { emit: o, slots: n }) {
-    const { selectedValue: t, multiple: a } = ve(e), i = $(null), { t: r } = le({ messages: oe }), d = c(() => e.open && !e.disabled), l = c(() => r("noOptionsMatchThisSearch")), f = c(() => ({
+    var u;
+    const { selectedValue: t, multiple: a } = ve(e), i = $(null), { t: r } = le({ messages: oe }), d = f(() => e.open && !e.disabled), l = f(() => r("noOptionsMatchThisSearch")), c = {
+      "min-width": `${(u = e == null ? void 0 : e.targetElement) == null ? void 0 : u.clientWidth}px`,
+      "max-width": "min(500px, 95%)"
+    }, _ = f(() => ({
       "b-dropdown-options-container--single": !(e != null && e.multiple)
-    })), _ = c(() => ({
+    })), g = f(() => ({
       "b-dropdown-options-container__listbox--small": e.inputSize === T.SMALL,
       "b-dropdown-options-container__listbox--single": !(e != null && e.multiple)
-    })), { actions: y, internalSelectedValue: g, listeners: m, onEscapeKey: h } = He(
+    })), { actions: y, internalSelectedValue: m, listeners: h, onEscapeKey: C } = Ue(
       t,
       a,
       o
-    ), C = c(
+    ), v = f(
       () => e != null && e.multiple ? ce : J
-    ), v = c(
-      () => {
-        var K;
-        return e != null && e.multiple ? {
-          actionsLayout: qe.SPACE_BETWEEN,
-          actions: y.value,
-          divider: !0,
-          fallbackPosition: ["top-start"],
-          id: k(`dropdown-options-${e.id}`),
-          open: e.open,
-          position: "bottom-start",
-          style: { width: `${(K = e == null ? void 0 : e.targetElement) == null ? void 0 : K.clientWidth}px` },
-          targetElement: e.targetElement
-        } : {
-          fallbackPosition: ["top-start"],
-          matchWidth: !0,
-          offset: [0, 8],
-          position: "bottom-start",
-          style: { display: d.value ? "block" : "none" },
-          targetElement: e.targetElement
-        };
+    ), F = f(
+      () => e != null && e.multiple ? {
+        actionsLayout: "space-between",
+        actions: y.value,
+        divider: !0,
+        fallbackPosition: ["top-start"],
+        id: K(`dropdown-options-${e.id}`),
+        open: e.open,
+        position: "bottom-start",
+        style: {
+          width: "auto",
+          ...c
+        },
+        targetElement: e.targetElement
+      } : {
+        fallbackPosition: ["top-start"],
+        offset: [0, 8],
+        position: "bottom-start",
+        style: {
+          display: d.value ? "block" : "none",
+          ...c
+        },
+        targetElement: e.targetElement
       }
     );
     return {
       // Values
       isDropdownOpen: d,
-      conditionalClasses: f,
-      conditionalListboxClasses: _,
+      conditionalClasses: _,
+      conditionalListboxClasses: g,
       noResultsMessage: l,
       slots: n,
       actions: y,
-      internalSelectedValue: g,
+      internalSelectedValue: m,
       // Component wrapper
-      popperContainerOrPopoverComponent: C,
-      popperContainerOrPopoverProps: v,
+      popperContainerOrPopoverComponent: v,
+      popperContainerOrPopoverProps: F,
       // Refs
       dropdownOptionsListboxRef: i,
       // Events
-      onEscapeKey: h,
-      listeners: m
+      onEscapeKey: C,
+      listeners: h
     };
   }
 });
-function je(e, o, n, t, a, i) {
+function Ve(e, o, n, t, a, i) {
   const r = R("bento-listbox");
-  return b(), B(ye(e.popperContainerOrPopoverComponent), A({
+  return b(), I(ye(e.popperContainerOrPopoverComponent), A({
     class: ["b-dropdown-options-container", e.conditionalClasses]
   }, e.popperContainerOrPopoverProps), {
-    default: E(() => [
+    default: L(() => [
       U("div", {
         onKeydown: o[0] || (o[0] = Ne((...d) => e.onEscapeKey && e.onEscapeKey(...d), ["esc"]))
       }, [
-        z(r, A({
+        k(r, A({
           id: e.id,
           ref: "dropdownOptionsListboxRef",
           "aria-label": e.ariaLabel,
@@ -257,11 +262,11 @@ function je(e, o, n, t, a, i) {
           loading: e.loading,
           "lazy-load-type": e.lazyLoadType,
           "has-more-items": e.hasMoreItems
-        }, x(e.listeners)), Z({ _: 2 }, [
+        }, W(e.listeners)), Z({ _: 2 }, [
           Y(e.slots, (d, l) => ({
             name: l,
-            fn: E((f) => [
-              G(e.$slots, l, Q(X(f)), void 0, !0)
+            fn: L((c) => [
+              G(e.$slots, l, Q(X(c)), void 0, !0)
             ])
           }))
         ]), 1040, ["id", "aria-label", "class", "is-option-disabled", "items", "selected-value", "multiple", "no-results-message", "searching", "loading", "lazy-load-type", "has-more-items"])
@@ -270,55 +275,55 @@ function je(e, o, n, t, a, i) {
     _: 3
   }, 16, ["class"]);
 }
-const Je = /* @__PURE__ */ F(Ve, [["render", je], ["__scopeId", "data-v-0b470d58"]]);
+const je = /* @__PURE__ */ z(He, [["render", Ve], ["__scopeId", "data-v-2e5620d7"]]);
 let fe = 0;
-const Ze = {
+const Je = {
   beforeCreate() {
     this.uuid = fe.toString(), fe += 1;
   }
-}, Ye = (e) => (ge("data-v-18645fe6"), e = e(), he(), e), Ge = { key: 0 }, Qe = /* @__PURE__ */ Ye(() => /* @__PURE__ */ U("path", {
+}, Ze = (e) => (ge("data-v-18645fe6"), e = e(), he(), e), Ye = { key: 0 }, Ge = /* @__PURE__ */ Ze(() => /* @__PURE__ */ U("path", {
   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"
 }, null, -1));
-function Xe(e, o, n, t, a, i) {
-  return b(), O("svg", A({ role: "img" }, e.$attrs, {
+function Qe(e, o, n, t, a, i) {
+  return b(), E("svg", A({ role: "img" }, e.$attrs, {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (b(), O("title", Ge, P(e.$attrs["svg-title"]), 1)) : L("", !0),
-    Qe
+    e.$attrs["svg-title"] ? (b(), E("title", Ye, P(e.$attrs["svg-title"]), 1)) : O("", !0),
+    Ge
   ], 16);
 }
-const et = /* @__PURE__ */ F(Ze, [["render", Xe], ["__scopeId", "data-v-18645fe6"]]);
+const Xe = /* @__PURE__ */ z(Je, [["render", Qe], ["__scopeId", "data-v-18645fe6"]]);
 let pe = 0;
-const tt = {
+const et = {
   beforeCreate() {
     this.uuid = pe.toString(), pe += 1;
   }
-}, ot = (e) => (ge("data-v-6f20d431"), e = e(), he(), e), nt = { key: 0 }, lt = /* @__PURE__ */ ot(() => /* @__PURE__ */ U("path", {
+}, tt = (e) => (ge("data-v-6f20d431"), e = e(), he(), e), ot = { key: 0 }, nt = /* @__PURE__ */ tt(() => /* @__PURE__ */ U("path", {
   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"
 }, null, -1));
-function at(e, o, n, t, a, i) {
-  return b(), O("svg", A({ role: "img" }, e.$attrs, {
+function lt(e, o, n, t, a, i) {
+  return b(), E("svg", A({ role: "img" }, e.$attrs, {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (b(), O("title", nt, P(e.$attrs["svg-title"]), 1)) : L("", !0),
-    lt
+    e.$attrs["svg-title"] ? (b(), E("title", ot, P(e.$attrs["svg-title"]), 1)) : O("", !0),
+    nt
   ], 16);
 }
-const it = /* @__PURE__ */ F(tt, [["render", at], ["__scopeId", "data-v-6f20d431"]]), st = ne({
+const at = /* @__PURE__ */ z(et, [["render", lt], ["__scopeId", "data-v-6f20d431"]]), it = ne({
   name: "dropdown-small-textbox",
-  components: { ChevronDownSmallIcon: et, ChevronUpSmallIcon: it, DropdownBaseTextbox: Ke },
+  components: { ChevronDownSmallIcon: Xe, ChevronUpSmallIcon: at, DropdownBaseTextbox: Ke },
   inheritAttrs: !1,
   props: {
     /**
@@ -392,11 +397,11 @@ const it = /* @__PURE__ */ F(tt, [["render", at], ["__scopeId", "data-v-6f20d431
   },
   emits: [M.OPEN, M.CLOSE],
   setup(e, { emit: o }) {
-    const n = c(() => ({
+    const n = f(() => ({
       [`b-dropdown-small-textbox--${j.DISABLED}`]: e.disabled,
       [`b-dropdown-small-textbox--${j.READONLY}`]: e.readonly,
       [`b-dropdown-small-textbox--${j.OPENED}`]: e.open
-    })), t = c(() => e.open && !e.disabled && !e.readonly), a = () => {
+    })), t = f(() => e.open && !e.disabled && !e.readonly), a = () => {
       o(M.OPEN);
     }, i = () => {
       o(M.CLOSE);
@@ -413,19 +418,19 @@ const it = /* @__PURE__ */ F(tt, [["render", at], ["__scopeId", "data-v-6f20d431
     };
   }
 });
-const rt = { class: "b-dropdown-small-textbox__chevron" };
-function dt(e, o, n, t, a, i) {
+const st = { class: "b-dropdown-small-textbox__chevron" };
+function rt(e, o, n, t, a, i) {
   const r = R("chevron-up-small-icon"), d = R("chevron-down-small-icon"), l = R("dropdown-base-textbox");
-  return b(), O("div", {
+  return b(), E("div", {
     class: we(["b-dropdown-small-textbox", e.conditionalClasses])
   }, [
-    z(l, A({ ...e.$attrs, ...e.$props }, { class: "b-dropdown-small-textbox__textbox" }, x(e.listeners)), {
-      icon: E(() => [
-        U("div", rt, [
-          q(z(r, { "svg-title": "opened" }, null, 512), [
+    k(l, A({ ...e.$attrs, ...e.$props }, { class: "b-dropdown-small-textbox__textbox" }, W(e.listeners)), {
+      icon: L(() => [
+        U("div", st, [
+          q(k(r, { "svg-title": "opened" }, null, 512), [
             [de, e.isDropdownOpen]
           ]),
-          q(z(d, { "svg-title": "closed" }, null, 512), [
+          q(k(d, { "svg-title": "closed" }, null, 512), [
             [de, !e.isDropdownOpen]
           ])
         ])
@@ -434,28 +439,28 @@ function dt(e, o, n, t, a, i) {
     }, 16)
   ], 2);
 }
-const ut = /* @__PURE__ */ F(st, [["render", dt], ["__scopeId", "data-v-55bc3614"]]);
-function ct(e, o, n) {
-  const t = $(e), a = $(o), i = (d, l = []) => l.flatMap((f) => f.label.toLocaleLowerCase().includes(d) ? [f, ...i(d, f.items)] : f.items ? [...i(d, f.items)] : []);
+const dt = /* @__PURE__ */ z(it, [["render", rt], ["__scopeId", "data-v-55bc3614"]]);
+function ut(e, o, n) {
+  const t = $(e), a = $(o), i = (d, l = []) => l.flatMap((c) => c.label.toLocaleLowerCase().includes(d) ? [c, ...i(d, c.items)] : c.items ? [...i(d, c.items)] : []);
   return be(t, () => {
     n !== void 0 && n(t.value);
-  }), c(() => {
+  }), f(() => {
     if (!t.value || n !== void 0)
       return a.value;
     const d = t.value.toLocaleLowerCase();
     return i(d, a.value);
   });
 }
-const ft = ({ items: e, placeholder: o, selectedValue: n }) => {
+const ct = ({ items: e, placeholder: o, selectedValue: n }) => {
   const t = e.value.find(({ value: a }) => a === n.value);
   return (t == null ? void 0 : t.label) || o.value || null;
-}, pt = ({ selectedValues: e, items: o, placeholder: n }) => {
+}, ft = ({ selectedValues: e, items: o, placeholder: n }) => {
   var t;
   return !e.value || ((t = e.value) == null ? void 0 : t.length) === 0 ? n.value || null : e.value.map((a) => {
     const { label: i } = o.value.find(({ value: r }) => r === a);
     return i;
   }).join(", ");
-}, mt = ({ selectedValues: e, items: o, placeholder: n }) => {
+}, pt = ({ selectedValues: e, items: o, placeholder: n }) => {
   var t;
   return !e.value || !((t = e.value) != null && t.length) ? n.value || null : o.value.reduce((a, i) => {
     if (i.items) {
@@ -466,12 +471,12 @@ const ft = ({ items: e, placeholder: o, selectedValue: n }) => {
     }
     return e.value.includes(i.value) && a.push(i.label), a;
   }, []).join(", ");
-}, bt = ({ items: e, placeholder: o, value: n, multiple: t }) => {
-  const a = c(() => e.value.find((r) => {
+}, mt = ({ items: e, placeholder: o, value: n, multiple: t }) => {
+  const a = f(() => e.value.find((r) => {
     var d;
     return (d = r.items) == null ? void 0 : d.length;
   }));
-  return c(() => t.value ? a.value ? mt({ selectedValues: n, placeholder: o, items: e }) : pt({ selectedValues: n, items: e, placeholder: o }) : ft({ items: e, placeholder: o, selectedValue: n }));
+  return f(() => t.value ? a.value ? pt({ selectedValues: n, placeholder: o, items: e }) : ft({ selectedValues: n, items: e, placeholder: o }) : ct({ items: e, placeholder: o, selectedValue: n }));
 }, me = {
   "en-US": {
     optional: "optional",
@@ -482,7 +487,7 @@ const ft = ({ items: e, placeholder: o, selectedValue: n }) => {
 }, $e = (e) => {
   var o;
   (o = e.value.$children) == null || o[0].$refs.textbox.focus();
-}, vt = ({
+}, bt = ({
   inputContainerRef: e,
   optionsContainerRef: o,
   selectedValueIndex: n,
@@ -490,19 +495,19 @@ const ft = ({ items: e, placeholder: o, selectedValue: n }) => {
   isDynamicFltering: a,
   items: i,
   isMultiple: r
-}, d, l, f) => {
+}, d, l, c) => {
   const _ = ({ detail: u }) => {
-    u.preventDefault(), t.value || (l(), I(() => {
+    u.preventDefault(), t.value || (l(), B(() => {
       var p, S;
       r ? (p = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || p[0].$el.focus() : (S = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || S[n.value].$el.focus();
     }));
-  }, y = ({ detail: u }) => {
-    u.preventDefault(), t.value || (l(), I(() => {
+  }, g = ({ detail: u }) => {
+    u.preventDefault(), t.value || (l(), B(() => {
       var p;
       (p = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || p[0].$el.focus();
     }));
-  }, g = () => {
-    t.value || (l(), I(() => {
+  }, y = () => {
+    t.value || (l(), B(() => {
       var u, p;
       if (r) {
         const S = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;
@@ -511,35 +516,35 @@ const ft = ({ items: e, placeholder: o, selectedValue: n }) => {
         (p = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || p[i.length - 1].$el.focus();
     }));
   }, m = () => {
-    t.value && (f(), $e(e));
+    t.value && (c(), $e(e));
   }, h = () => {
-    t.value || l(), I(() => {
+    t.value || l(), B(() => {
       var u;
       (u = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || u[0].$el.focus();
     });
   }, C = ({ detail: u }) => {
-    u.preventDefault(), d(), t.value && I(() => {
+    u.preventDefault(), d(), t.value && B(() => {
       var p, S;
       r ? (p = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || p[0].$el.focus() : (S = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || S[n.value].$el.focus();
     });
   }, v = () => {
-    d(), t.value && I(() => {
+    d(), t.value && B(() => {
       var u, p;
       r ? (u = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || u[0].$el.focus() : (p = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || p[n.value].$el.focus();
     });
   };
-  return c(() => ({
+  return f(() => ({
     ...a.value ? {} : { [D.SPACE]: C },
     [D.ENTER]: v,
     [D.ARROW_DOWN]: _,
-    [D.ARROW_UP]: y,
-    [D.END]: g,
+    [D.ARROW_UP]: g,
+    [D.END]: y,
     [D.ESCAPE]: m,
     [D.HOME]: h
   }));
-}, yt = ({ inputContainerRef: e, isDropdownOpen: o }, n) => {
+}, vt = ({ inputContainerRef: e, isDropdownOpen: o }, n) => {
   const t = () => {
-    o.value && n(), I(() => {
+    o.value && n(), B(() => {
       $e(e);
     });
   };
@@ -549,15 +554,15 @@ const ft = ({ items: e, placeholder: o, selectedValue: n }) => {
     [s.TAB]: t,
     [s.SPACE]: t
   };
-}, gt = ne({
+}, yt = ne({
   i18n: { messages: me },
   name: "b-dropdown",
   components: {
-    BentoDropdownOptionsContainer: Je,
+    BentoDropdownOptionsContainer: je,
     BentoTypography: ze,
     DropdownInputDefault: ke,
-    DropdownInputSmall: ut,
-    ErrorMessage: Ue
+    DropdownInputSmall: dt,
+    ErrorMessage: qe
   },
   directives: { BentoClickOutsideDirective: Me, BentoKeyboardNavigationDirective: Pe },
   props: {
@@ -695,47 +700,47 @@ const ft = ({ items: e, placeholder: o, selectedValue: n }) => {
   emits: ["input", s.SHOW_MORE],
   setup(e, { attrs: o, emit: n, slots: t }) {
     var re;
-    const { t: a } = le({ messages: me }), i = $(null), r = $(null), d = $(null), l = $(!1), f = k("bento-dropdown-options-container"), _ = k("dropdown-label"), y = k("dropdown-description"), g = k("dropdown-error"), { isReadOnly: m } = xe(N(e, "readonly")), h = $(o["aria-label"]), { ariaLabel: C } = ve(e), v = We({
+    const { t: a } = le({ messages: me }), i = $(null), r = $(null), d = $(null), l = $(!1), c = K("bento-dropdown-options-container"), _ = K("dropdown-label"), g = K("dropdown-description"), y = K("dropdown-error"), { isReadOnly: m } = We(N(e, "readonly")), h = $(o["aria-label"]), { ariaLabel: C } = ve(e), v = xe({
       ariaLabel: h.value,
       // TODO: take this line away when the aria-label props is removed
       label: C,
       defaultFallback: a("ariaLabelFallback")
-    }), K = c(() => ({
+    }), F = f(() => ({
       "b-dropdown__description--error": !!e.errorMessage
-    })), u = $(""), p = N(e, "items"), S = ct(u, p, (re = e == null ? void 0 : e.search) == null ? void 0 : re.searchEvent), H = c(() => e.dynamicFiltering && !!u.value), _e = bt({
+    })), u = $(""), p = N(e, "items"), S = ut(u, p, (re = e == null ? void 0 : e.search) == null ? void 0 : re.searchEvent), H = f(() => e.dynamicFiltering && !!u.value), _e = mt({
       items: p,
       multiple: N(e, "multiple"),
       placeholder: N(e, "placeholder"),
       value: N(e, "value")
-    }), Se = c(() => e.size === T.DEFAULT), Ee = c(
+    }), Se = f(() => e.size === T.DEFAULT), Le = f(
       () => e != null && e.multiple ? e.items.filter(
         ({ value: w }) => (e == null ? void 0 : e.value) && (e == null ? void 0 : e.value).includes(w)
       ) : e.items.find(({ value: w }) => w === (e == null ? void 0 : e.value))
-    ), Le = c(() => {
+    ), Oe = f(() => {
       const w = e.items.findIndex(({ value: Ae }) => e.value === Ae);
       return w > 0 ? w : 0;
-    }), Oe = c(() => {
+    }), Ee = f(() => {
       var w;
       return e.multiple ? (w = e == null ? void 0 : e.value) == null ? void 0 : w.length : null;
-    }), Ce = c(
-      () => `${e.description ? y : ""} ${e.errorMessage ? g : ""}`.trim() || null
+    }), Ce = f(
+      () => `${e.description ? g : ""} ${e.errorMessage ? y : ""}`.trim() || null
     ), De = () => {
       m.value || (l.value = !0);
     }, V = () => {
       l.value = !1;
     }, ae = () => {
       m.value || (l.value = !l.value, H.value && (u.value = ""));
-    }, Be = () => {
+    }, Ie = () => {
       H.value && (u.value = ""), l.value && (l.value = !1);
     }, ie = (w) => {
       e.multiple || (u.value = "", l.value = !1), n("input", w);
     }, se = () => {
       n(s.SHOW_MORE);
-    }, Ie = vt(
+    }, Be = bt(
       {
         inputContainerRef: i,
         optionsContainerRef: d,
-        selectedValueIndex: Le,
+        selectedValueIndex: Oe,
         isDropdownOpen: l,
         isDynamicFltering: N(e, "dynamicFiltering"),
         items: e.items,
@@ -744,7 +749,7 @@ const ft = ({ items: e, placeholder: o, selectedValue: n }) => {
       ae,
       De,
       V
-    ), Re = yt(
+    ), Re = vt(
       {
         inputContainerRef: i,
         isDropdownOpen: l
@@ -765,82 +770,82 @@ const ft = ({ items: e, placeholder: o, selectedValue: n }) => {
     ), {
       // Values
       computedAriaLabel: v,
-      additionalItemsSelected: Oe,
+      additionalItemsSelected: Ee,
       idDefaultSize: Se,
       isDropdownOpen: l,
       displayValue: _e,
-      dropdownOptionsContainerId: f,
+      dropdownOptionsContainerId: c,
       filteredItems: S,
       isSearching: H,
       isReadOnly: m,
       searchTerm: u,
       labelId: _,
-      descriptionId: y,
-      errorId: g,
+      descriptionId: g,
+      errorId: y,
       ariaDescribedBy: Ce,
-      selectedValueItem: Ee,
+      selectedValueItem: Le,
       // 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
       // respective Vue version. Source: https://github.com/vuejs/composition-api/issues/84#issuecomment-524885445
       slots: t,
-      descriptionConditionalClasses: K,
+      descriptionConditionalClasses: F,
       // Refs
       inputContainerRef: i,
       inputContainerRefWrapper: r,
       optionsContainerRef: d,
       // Events
-      closeOpenedDropdown: Be,
+      closeOpenedDropdown: Ie,
       toggleDropdown: ae,
       onOptionSelected: ie,
       emitShowMoreEvent: se,
-      textboxKeyboardNavigationListeners: Ie,
+      textboxKeyboardNavigationListeners: Be,
       listboxListeners: Te
     };
   }
 });
-const ht = { class: "b-dropdown" }, wt = ["id"];
-function $t(e, o, n, t, a, i) {
-  var y;
-  const r = R("bento-typography"), d = R("bento-dropdown-options-container"), l = R("error-message"), f = ue("bento-keyboard-navigation-directive"), _ = ue("bento-click-outside-directive");
-  return q((b(), O("div", ht, [
-    e.label ? (b(), O("div", {
+const gt = { class: "b-dropdown" }, ht = ["id"];
+function wt(e, o, n, t, a, i) {
+  var g;
+  const r = R("bento-typography"), d = R("bento-dropdown-options-container"), l = R("error-message"), c = ue("bento-keyboard-navigation-directive"), _ = ue("bento-click-outside-directive");
+  return q((b(), E("div", gt, [
+    e.label ? (b(), E("div", {
       key: 0,
       id: e.labelId,
       class: "b-dropdown__label"
     }, [
-      z(r, {
+      k(r, {
         el: "span",
         stronger: ""
       }, {
-        default: E(() => [
-          W(P(e.label), 1)
+        default: L(() => [
+          x(P(e.label), 1)
         ]),
         _: 1
       }),
-      e.optional ? (b(), B(r, {
+      e.optional ? (b(), I(r, {
         key: 0,
         class: "b-dropdown__label-requirement",
         el: "span"
       }, {
-        default: E(() => [
-          W(" (" + P(e.$t("optional")) + ") ", 1)
+        default: L(() => [
+          x(" (" + P(e.$t("optional")) + ") ", 1)
         ]),
         _: 1
-      })) : L("", !0),
-      e.required ? (b(), B(r, {
+      })) : O("", !0),
+      e.required ? (b(), I(r, {
         key: 1,
         class: "b-dropdown__label-requirement",
         el: "span"
       }, {
-        default: E(() => [
-          W(" (" + P(e.$t("required")) + ") ", 1)
+        default: L(() => [
+          x(" (" + P(e.$t("required")) + ") ", 1)
         ]),
         _: 1
-      })) : L("", !0)
-    ], 8, wt)) : L("", !0),
-    q((b(), O("div", A({ ref: "inputContainerRefWrapper" }, x(e.textboxKeyboardNavigationListeners, !0)), [
-      (b(), B(ye(e.size), {
+      })) : O("", !0)
+    ], 8, ht)) : O("", !0),
+    q((b(), E("div", A({ ref: "inputContainerRefWrapper" }, W(e.textboxKeyboardNavigationListeners, !0)), [
+      (b(), I(ye(e.size), {
         ref: "inputContainerRef",
         value: e.searchTerm,
         "additional-items-selected": e.additionalItemsSelected,
@@ -859,26 +864,26 @@ function $t(e, o, n, t, a, i) {
         open: e.isDropdownOpen,
         "selected-value-item": e.idDefaultSize ? e.selectedValueItem : void 0,
         "show-slot-content-in-multiple": e.showSlotContentInMultiple,
-        onInput: o[0] || (o[0] = (g) => e.searchTerm = g),
+        onInput: o[0] || (o[0] = (y) => e.searchTerm = y),
         onOpen: e.toggleDropdown,
         onClose: e.toggleDropdown
       }, Z({ _: 2 }, [
-        Y(e.slots, (g, m) => ({
+        Y(e.slots, (y, m) => ({
           name: m,
-          fn: E((h) => [
+          fn: L((h) => [
             G(e.$slots, m, Q(X(h)), void 0, !0)
           ])
         }))
       ]), 1064, ["value", "additional-items-selected", "ariaControls", "ariaExpanded", "aria-labelledby", "aria-describedby", "aria-label", "aria-readonly", "readonly", "disabled", "display-value", "dynamic-filtering", "is-invalid", "multiple", "open", "selected-value-item", "show-slot-content-in-multiple", "onOpen", "onClose"]))
     ], 16)), [
-      [f]
+      [c]
     ]),
-    e.inputContainerRef ? (b(), B(d, A({
+    e.inputContainerRef ? (b(), I(d, A({
       key: 1,
       id: e.dropdownOptionsContainerId,
       ref: "optionsContainerRef",
       "aria-label": e.computedAriaLabel,
-      "debounce-time": (y = e.search) == null ? void 0 : y.debounceTime,
+      "debounce-time": (g = e.search) == null ? void 0 : g.debounceTime,
       disabled: e.disabled,
       "input-size": e.size,
       "is-option-disabled": e.isOptionDisabled,
@@ -891,39 +896,39 @@ function $t(e, o, n, t, a, i) {
       loading: e.loading,
       "has-more-items": e.hasMoreItems,
       "lazy-load-type": e.lazyLoadType
-    }, x(e.listboxListeners)), Z({ _: 2 }, [
-      Y(e.slots, (g, m) => ({
+    }, W(e.listboxListeners)), Z({ _: 2 }, [
+      Y(e.slots, (y, m) => ({
         name: m,
-        fn: E((h) => [
+        fn: L((h) => [
           G(e.$slots, m, Q(X(h)), void 0, !0)
         ])
       }))
-    ]), 1040, ["id", "aria-label", "debounce-time", "disabled", "input-size", "is-option-disabled", "items", "multiple", "open", "selected-value", "searching", "target-element", "loading", "has-more-items", "lazy-load-type"])) : L("", !0),
-    e.errorMessage ? (b(), B(l, {
+    ]), 1040, ["id", "aria-label", "debounce-time", "disabled", "input-size", "is-option-disabled", "items", "multiple", "open", "selected-value", "searching", "target-element", "loading", "has-more-items", "lazy-load-type"])) : O("", !0),
+    e.errorMessage ? (b(), I(l, {
       key: 2,
       id: e.errorId,
       "error-message": e.errorMessage,
       class: "b-dropdown__error-message"
-    }, null, 8, ["id", "error-message"])) : L("", !0),
-    e.description ? (b(), B(r, {
+    }, null, 8, ["id", "error-message"])) : O("", !0),
+    e.description ? (b(), I(r, {
       key: 3,
       id: e.descriptionId,
       class: we(["b-dropdown__description", e.descriptionConditionalClasses]),
       el: "span"
     }, {
-      default: E(() => [
-        W(P(e.description), 1)
+      default: L(() => [
+        x(P(e.description), 1)
       ]),
       _: 1
-    }, 8, ["id", "class"])) : L("", !0)
+    }, 8, ["id", "class"])) : O("", !0)
   ])), [
     [_, e.closeOpenedDropdown]
   ]);
 }
-const Kt = /* @__PURE__ */ F(gt, [["render", $t], ["__scopeId", "data-v-79de8f04"]]);
+const Mt = /* @__PURE__ */ z(yt, [["render", wt], ["__scopeId", "data-v-79de8f04"]]);
 export {
-  Kt as B,
+  Mt as B,
   T as a,
-  ct as u
+  ut as u
 };
-//# sourceMappingURL=dropdown.22e51667.js.map
+//# sourceMappingURL=dropdown.6a484461.js.map