@adyen/bento-vue3 1.8.0 → 1.9.0

package/dist/chunks/{dropdown.502e1f5c.js → dropdown.63de9aac.js}

@@ -1,37 +1,37 @@
-import { ref as $, watch as me, computed as c, defineComponent as te, toRefs as be, resolveComponent as E, openBlock as y, createBlock as A, resolveDynamicComponent as ve, mergeProps as I, withCtx as M, createElementVNode as W, withKeys as Ae, createVNode as F, toHandlers as z, createSlots as V, renderList as J, renderSlot as Z, normalizeProps as Y, guardReactiveProps as G, createElementBlock as B, toDisplayString as oe, createCommentVNode as N, pushScopeId as ye, popScopeId as ge, normalizeClass as he, withDirectives as x, vShow as re, nextTick as C, toRef as R, resolveDirective as de, createTextVNode as Ne } from "vue";
-import { B as Me, d as Pe } from "./index.75f3672e.js";
+import { ref as L, watch as be, computed as u, defineComponent as oe, toRefs as ve, resolveComponent as E, openBlock as y, createBlock as A, resolveDynamicComponent as ye, mergeProps as B, withCtx as M, createElementVNode as x, withKeys as Te, createVNode as F, toHandlers as z, createSlots as V, renderList as J, renderSlot as Z, normalizeProps as Y, guardReactiveProps as G, createElementBlock as R, toDisplayString as ne, createCommentVNode as N, normalizeClass as Q, withDirectives as W, vShow as de, nextTick as _, toRef as I, resolveDirective as ue, createTextVNode as Ae } from "vue";
+import { B as Ne, d as Me } from "./index.75f3672e.js";
 import { g as K } from "./unique-id.a2a2b458.js";
-import { u as Ke } from "./aria-label.ac9651a5.js";
-import { u as ne } from "./i18n.6c402773.js";
-import { u as ke } from "./use-form-layout-loading.d03e5d48.js";
-import { B as _, a as Fe } from "./keyboard-navigation.ca47dfa8.js";
-import { a as s, B as Q, b as X } from "./listbox.d07c24e6.js";
-import { B as ze } from "./directive.0408e565.js";
-import { a as H } from "./index.7262642e.js";
-import { a as ue } from "./index.726e2f3c.js";
+import { u as Pe } from "./aria-label.ac9651a5.js";
+import { u as le } from "./i18n.6c402773.js";
+import { u as Ke } from "./use-form-layout-loading.d03e5d48.js";
+import { B as C, a as ke } from "./keyboard-navigation.ca47dfa8.js";
+import { a as s, B as X, b as ee } from "./listbox.ac43f8ab.js";
+import { B as Fe } from "./directive.0408e565.js";
+import { a as H } from "./index.85832db5.js";
+import { a as ce } from "./index.98174339.js";
 import { _ as k } from "./_plugin-vue_export-helper.dad06003.js";
-import { D as xe, a as T, b as q, c as We } from "./dropdown-default-textbox.74c4584a.js";
-import { E as Ue, F as je } from "./field-label.61679178.js";
+import { D as ze, a as T, b as q, c as We } from "./dropdown-default-textbox.4108b289.js";
+import { E as xe, F as Ue } from "./field-label.3c19a29a.js";
 import "../assets/dropdown.css";
 var D = /* @__PURE__ */ ((e) => (e.DEFAULT = "DropdownInputDefault", e.SMALL = "DropdownInputSmall", e))(D || {});
-const ee = {
+const te = {
   "en-US": {
     apply: "Apply",
     cancel: "Cancel",
     noOptionsMatchThisSearch: "No options match this search"
   }
-}, He = (e, o, n) => {
-  const t = $(e.value), { t: a } = ne({ messages: ee });
-  me(e, () => {
+}, je = (e, o, n) => {
+  const t = L(e.value), { t: a } = le({ messages: te });
+  be(e, () => {
     t.value = e.value;
   });
-  const i = c(
+  const i = u(
     () => JSON.stringify(t.value) === JSON.stringify(e.value)
   ), d = () => {
     n(s.SELECT, t.value), n(s.CLOSE_DROPDOWN);
   }, r = () => {
     t.value = e.value, n(s.CLOSE_DROPDOWN);
-  }, l = c(() => [
+  }, l = u(() => [
     {
       title: a("apply"),
       event: d,
@@ -41,20 +41,20 @@ const ee = {
       title: a("cancel"),
       event: r
     }
-  ]), p = (m) => {
+  ]), f = (m) => {
     t.value = m, o.value || n(s.SELECT, m);
   }, O = (m) => {
-    p(m), n(s.TAB);
+    f(m), n(s.TAB);
   }, g = (m) => {
-    p(m), n(s.ENTER);
+    f(m), n(s.ENTER);
   }, h = (m) => {
-    p(m), n(s.SPACE);
+    f(m), n(s.SPACE);
   }, b = () => {
     r(), n(s.ESCAPE);
   }, v = () => {
     n(s.SHOW_MORE);
   }, w = {
-    [s.SELECT]: p,
+    [s.SELECT]: f,
     [s.SHOW_MORE]: v,
     [s.TAB]: O,
     [s.SPACE]: h,
@@ -68,13 +68,13 @@ const ee = {
     listeners: w,
     onEscapeKey: b
   };
-}, qe = te({
-  i18n: { messages: ee },
+}, He = oe({
+  i18n: { messages: te },
   name: "bento-dropdown-options-container",
   components: {
-    BentoListbox: Q,
+    BentoListbox: X,
     PopperContainer: H,
-    BentoPopover: ue
+    BentoPopover: ce
   },
   props: {
     /**
@@ -142,8 +142,8 @@ const ee = {
      */
     lazyLoadType: {
       type: String,
-      default: X.AUTOMATIC,
-      validator: (e) => Object.values(X).includes(e)
+      default: ee.AUTOMATIC,
+      validator: (e) => Object.values(ee).includes(e)
     },
     /**
      * If enabled, the user will be able to select multiple items.
@@ -169,7 +169,7 @@ const ee = {
      *
      * If enabled, hides the "Select all" checkbox in "multiple" mode.
      */
-    searching: Q.props.searching,
+    searching: X.props.searching,
     /**
      * Reference to the DOM element or Vue component for positioning
      * the Dropdown container.
@@ -194,21 +194,21 @@ const ee = {
     s.TAB
   ],
   setup(e, { emit: o, slots: n }) {
-    const { selectedValue: t, multiple: a } = be(e), i = $(null), { t: d } = ne({ messages: ee }), r = c(() => e.open && !e.disabled), l = c(() => d("noOptionsMatchThisSearch")), p = c(() => ({
+    const { selectedValue: t, multiple: a } = ve(e), i = L(null), { t: d } = le({ messages: te }), r = u(() => e.open && !e.disabled), l = u(() => d("noOptionsMatchThisSearch")), f = u(() => ({
       "b-dropdown-options-container--single": !(e != null && e.multiple)
-    })), O = c(() => ({
+    })), O = u(() => ({
       "b-dropdown-options-container__listbox--small": e.inputSize === D.SMALL,
       "b-dropdown-options-container__listbox--single": !(e != null && e.multiple)
-    })), { actions: g, internalSelectedValue: h, listeners: b, onEscapeKey: v } = He(
+    })), { actions: g, internalSelectedValue: h, listeners: b, onEscapeKey: v } = je(
       t,
       a,
       o
-    ), w = c(
-      () => e != null && e.multiple ? ue : H
-    ), m = c(() => {
-      var u;
+    ), w = u(
+      () => e != null && e.multiple ? ce : H
+    ), m = u(() => {
+      var p;
       const P = {
-        "min-width": `${(u = e == null ? void 0 : e.targetElement) == null ? void 0 : u.clientWidth}px`,
+        "min-width": `${(p = e == null ? void 0 : e.targetElement) == null ? void 0 : p.clientWidth}px`,
         "max-width": "min(500px, 95%)"
       };
       return e != null && e.multiple ? {
@@ -238,7 +238,7 @@ const ee = {
     return {
       // Values
       isDropdownOpen: r,
-      conditionalClasses: p,
+      conditionalClasses: f,
       conditionalListboxClasses: O,
       noResultsMessage: l,
       slots: n,
@@ -255,16 +255,16 @@ const ee = {
     };
   }
 });
-function Ve(e, o, n, t, a, i) {
+function qe(e, o, n, t, a, i) {
   const d = E("bento-listbox");
-  return y(), A(ve(e.popperContainerOrPopoverComponent), I({
+  return y(), A(ye(e.popperContainerOrPopoverComponent), B({
     class: ["b-dropdown-options-container", e.conditionalClasses]
   }, e.popperContainerOrPopoverProps), {
     default: M(() => [
-      W("div", {
-        onKeydown: o[0] || (o[0] = Ae((...r) => e.onEscapeKey && e.onEscapeKey(...r), ["esc"]))
+      x("div", {
+        onKeydown: o[0] || (o[0] = Te((...r) => e.onEscapeKey && e.onEscapeKey(...r), ["esc"]))
       }, [
-        F(d, I({
+        F(d, B({
           id: e.id,
           ref: "dropdownOptionsListboxRef",
           "aria-label": e.ariaLabel,
@@ -283,8 +283,8 @@ function Ve(e, o, n, t, a, i) {
         }, z(e.listeners)), V({ _: 2 }, [
           J(e.slots, (r, l) => ({
             name: l,
-            fn: M((p) => [
-              Z(e.$slots, l, Y(G(p)), void 0, !0)
+            fn: M((f) => [
+              Z(e.$slots, l, Y(G(f)), void 0, !0)
             ])
           }))
         ]), 1040, ["id", "aria-label", "class", "empty-state", "is-option-disabled", "items", "selected-value", "multiple", "no-results-message", "searching", "loading", "lazy-load-type", "has-more-items", "virtual-scroll"])
@@ -293,55 +293,53 @@ function Ve(e, o, n, t, a, i) {
     _: 3
   }, 16, ["class"]);
 }
-const Je = /* @__PURE__ */ k(qe, [["render", Ve], ["__scopeId", "data-v-470172b0"]]);
-let ce = 0;
-const Ze = {
+const Ve = /* @__PURE__ */ k(He, [["render", qe], ["__scopeId", "data-v-470172b0"]]);
+let fe = 0;
+const Je = {
   beforeCreate() {
-    this.uuid = ce.toString(), ce += 1;
+    this.uuid = fe.toString(), fe += 1;
   }
-}, Ye = (e) => (ye("data-v-18645fe6"), e = e(), ge(), e), Ge = { key: 0 }, Qe = /* @__PURE__ */ Ye(() => /* @__PURE__ */ W("path", {
+}, Ze = { key: 0 }, Ye = /* @__PURE__ */ x("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 y(), B("svg", I({ role: "img" }, e.$attrs, {
+  d: "M5.00011 5.43922L8.00011 8.43922L11.0001 5.43922L12.0608 6.49988L8.00011 10.5605L3.93945 6.49988L5.00011 5.43922Z"
+}, null, -1);
+function Ge(e, o, n, t, a, i) {
+  return y(), R("svg", B({ role: "img" }, e.$attrs, {
+    class: "ui-assets-icons-16",
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (y(), B("title", Ge, oe(e.$attrs["svg-title"]), 1)) : N("", !0),
-    Qe
+    e.$attrs["svg-title"] ? (y(), R("title", Ze, ne(e.$attrs["svg-title"]), 1)) : N("", !0),
+    Ye
   ], 16);
 }
-const et = /* @__PURE__ */ k(Ze, [["render", Xe], ["__scopeId", "data-v-18645fe6"]]);
+const Qe = /* @__PURE__ */ k(Je, [["render", Ge]]);
 let pe = 0;
-const tt = {
+const Xe = {
   beforeCreate() {
     this.uuid = pe.toString(), pe += 1;
   }
-}, ot = (e) => (ye("data-v-6f20d431"), e = e(), ge(), e), nt = { key: 0 }, lt = /* @__PURE__ */ ot(() => /* @__PURE__ */ W("path", {
+}, et = { key: 0 }, tt = /* @__PURE__ */ x("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 y(), B("svg", I({ role: "img" }, e.$attrs, {
+  d: "M10.9999 10.5608L7.9999 7.56077L4.9999 10.5608L3.93924 9.50011L7.9999 5.43945L12.0606 9.50011L10.9999 10.5608Z"
+}, null, -1);
+function ot(e, o, n, t, a, i) {
+  return y(), R("svg", B({ role: "img" }, e.$attrs, {
+    class: "ui-assets-icons-16",
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (y(), B("title", nt, oe(e.$attrs["svg-title"]), 1)) : N("", !0),
-    lt
+    e.$attrs["svg-title"] ? (y(), R("title", et, ne(e.$attrs["svg-title"]), 1)) : N("", !0),
+    tt
   ], 16);
 }
-const it = /* @__PURE__ */ k(tt, [["render", at], ["__scopeId", "data-v-6f20d431"]]), st = te({
+const nt = /* @__PURE__ */ k(Xe, [["render", ot]]), lt = oe({
   name: "dropdown-small-textbox",
-  components: { ChevronDownSmallIcon: et, ChevronUpSmallIcon: it, DropdownBaseTextbox: xe },
+  components: { ChevronDownSmallIcon: Qe, ChevronUpSmallIcon: nt, DropdownBaseTextbox: ze },
   inheritAttrs: !1,
   props: {
     /**
@@ -415,11 +413,11 @@ const it = /* @__PURE__ */ k(tt, [["render", at], ["__scopeId", "data-v-6f20d431
   },
   emits: [T.OPEN, T.CLOSE],
   setup(e, { emit: o }) {
-    const n = c(() => ({
+    const n = u(() => ({
       [`b-dropdown-small-textbox--${q.DISABLED}`]: e.disabled,
       [`b-dropdown-small-textbox--${q.READONLY}`]: e.readonly,
       [`b-dropdown-small-textbox--${q.OPENED}`]: e.open
-    })), t = c(() => e.open && !e.disabled && !e.readonly), a = () => {
+    })), t = u(() => e.open && !e.disabled && !e.readonly), a = () => {
       o(T.OPEN);
     }, i = () => {
       o(T.CLOSE);
@@ -436,20 +434,20 @@ const it = /* @__PURE__ */ k(tt, [["render", at], ["__scopeId", "data-v-6f20d431
     };
   }
 });
-const rt = { class: "b-dropdown-small-textbox__chevron" };
-function dt(e, o, n, t, a, i) {
+const at = { class: "b-dropdown-small-textbox__chevron" };
+function it(e, o, n, t, a, i) {
   const d = E("chevron-up-small-icon"), r = E("chevron-down-small-icon"), l = E("dropdown-base-textbox");
-  return y(), B("div", {
-    class: he(["b-dropdown-small-textbox", e.conditionalClasses])
+  return y(), R("div", {
+    class: Q(["b-dropdown-small-textbox", e.conditionalClasses])
   }, [
-    F(l, I({ ...e.$attrs, ...e.$props }, { class: "b-dropdown-small-textbox__textbox" }, z(e.listeners)), {
+    F(l, B({ ...e.$attrs, ...e.$props }, { class: "b-dropdown-small-textbox__textbox" }, z(e.listeners)), {
       icon: M(() => [
-        W("div", rt, [
-          x(F(d, { "svg-title": "opened" }, null, 512), [
-            [re, e.isDropdownOpen]
+        x("div", at, [
+          W(F(d, { "svg-title": "opened" }, null, 512), [
+            [de, e.isDropdownOpen]
           ]),
-          x(F(r, { "svg-title": "closed" }, null, 512), [
-            [re, !e.isDropdownOpen]
+          W(F(r, { "svg-title": "closed" }, null, 512), [
+            [de, !e.isDropdownOpen]
           ])
         ])
       ]),
@@ -457,16 +455,16 @@ function dt(e, o, n, t, a, i) {
     }, 16)
   ], 2);
 }
-const ut = /* @__PURE__ */ k(st, [["render", dt], ["__scopeId", "data-v-55bc3614"]]), ct = ({ items: e, placeholder: o, selectedValue: n }) => {
+const st = /* @__PURE__ */ k(lt, [["render", it], ["__scopeId", "data-v-55bc3614"]]), rt = ({ 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 }) => {
+}, dt = ({ 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: d }) => d === a);
     return i;
   }).join(", ");
-}, ft = ({ selectedValues: e, items: o, placeholder: n }) => {
+}, ut = ({ 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) {
@@ -477,16 +475,16 @@ const ut = /* @__PURE__ */ k(st, [["render", dt], ["__scopeId", "data-v-55bc3614
     }
     return e.value.includes(i.value) && a.push(i.label), a;
   }, []).join(", ");
-}, mt = ({ items: e, placeholder: o, value: n, multiple: t }) => {
-  const a = c(() => e.value.find((d) => {
+}, ct = ({ items: e, placeholder: o, value: n, multiple: t }) => {
+  const a = u(() => e.value.find((d) => {
     var r;
     return (r = d.items) == null ? void 0 : r.length;
   }));
-  return c(() => t.value ? a.value ? ft({ selectedValues: n, placeholder: o, items: e }) : pt({ selectedValues: n, items: e, placeholder: o }) : ct({ items: e, placeholder: o, selectedValue: n }));
-}, we = (e) => {
+  return u(() => t.value ? a.value ? ut({ selectedValues: n, placeholder: o, items: e }) : dt({ selectedValues: n, items: e, placeholder: o }) : rt({ items: e, placeholder: o, selectedValue: n }));
+}, ge = (e) => {
   var o;
   (o = e.value.$children) == null || o[0].$refs.textbox.focus();
-}, bt = ({
+}, ft = ({
   inputContainerRef: e,
   optionsContainerRef: o,
   selectedValueIndex: n,
@@ -494,57 +492,57 @@ const ut = /* @__PURE__ */ k(st, [["render", dt], ["__scopeId", "data-v-55bc3614
   isDynamicFltering: a,
   items: i,
   isMultiple: d
-}, r, l, p) => {
-  const O = ({ detail: u }) => {
-    u.preventDefault(), t.value || (l(), C(() => {
-      var f, L;
-      d ? (f = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || f[0].$el.focus() : (L = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || L[n.value].$el.focus();
+}, r, l, f) => {
+  const O = ({ detail: p }) => {
+    p.preventDefault(), t.value || (l(), _(() => {
+      var c, $;
+      d ? (c = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || c[0].$el.focus() : ($ = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || $[n.value].$el.focus();
     }));
-  }, g = ({ detail: u }) => {
-    u.preventDefault(), t.value || (l(), C(() => {
-      var f;
-      (f = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || f[0].$el.focus();
+  }, g = ({ detail: p }) => {
+    p.preventDefault(), t.value || (l(), _(() => {
+      var c;
+      (c = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || c[0].$el.focus();
     }));
   }, h = () => {
-    t.value || (l(), C(() => {
-      var u, f;
+    t.value || (l(), _(() => {
+      var p, c;
       if (d) {
-        const L = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;
-        (u = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || u[L.length - 1].$children[i.length - 1].$el.focus();
+        const $ = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;
+        (p = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || p[$.length - 1].$children[i.length - 1].$el.focus();
       } else
-        (f = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || f[i.length - 1].$el.focus();
+        (c = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || c[i.length - 1].$el.focus();
     }));
   }, b = () => {
-    t.value && (p(), we(e));
+    t.value && (f(), ge(e));
   }, v = () => {
-    t.value || l(), C(() => {
-      var u;
-      (u = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || u[0].$el.focus();
+    t.value || l(), _(() => {
+      var p;
+      (p = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || p[0].$el.focus();
     });
-  }, w = ({ detail: u }) => {
-    u.preventDefault(), r(), t.value && C(() => {
-      var f, L;
-      d ? (f = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || f[0].$el.focus() : (L = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || L[n.value].$el.focus();
+  }, w = ({ detail: p }) => {
+    p.preventDefault(), r(), t.value && _(() => {
+      var c, $;
+      d ? (c = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || c[0].$el.focus() : ($ = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || $[n.value].$el.focus();
     });
   }, m = () => {
-    r(), t.value && C(() => {
-      var u, f;
-      d ? (u = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || u[0].$el.focus() : (f = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || f[n.value].$el.focus();
+    r(), t.value && _(() => {
+      var p, c;
+      d ? (p = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || p[0].$el.focus() : (c = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || c[n.value].$el.focus();
     });
   };
-  return c(() => ({
-    ...a.value ? {} : { [_.SPACE]: w },
-    [_.ENTER]: m,
-    [_.ARROW_DOWN]: O,
-    [_.ARROW_UP]: g,
-    [_.END]: h,
-    [_.ESCAPE]: b,
-    [_.HOME]: v
+  return u(() => ({
+    ...a.value ? {} : { [C.SPACE]: w },
+    [C.ENTER]: m,
+    [C.ARROW_DOWN]: O,
+    [C.ARROW_UP]: g,
+    [C.END]: h,
+    [C.ESCAPE]: b,
+    [C.HOME]: v
   }));
-}, vt = ({ inputContainerRef: e, isDropdownOpen: o }, n) => {
+}, pt = ({ inputContainerRef: e, isDropdownOpen: o }, n) => {
   const t = () => {
-    o.value && n(), C(() => {
-      we(e);
+    o.value && n(), _(() => {
+      ge(e);
     });
   };
   return {
@@ -554,34 +552,34 @@ const ut = /* @__PURE__ */ k(st, [["render", dt], ["__scopeId", "data-v-55bc3614
     [s.SPACE]: t
   };
 };
-function yt(e, o, n) {
-  const t = $(e), a = $(o), i = (r, l = []) => l.flatMap((p) => p.label.toLocaleLowerCase().includes(r) ? [p, ...i(r, p.items)] : p.items ? [...i(r, p.items)] : []);
-  return me(t, () => {
+function mt(e, o, n) {
+  const t = L(e), a = L(o), i = (r, l = []) => l.flatMap((f) => f.label.toLocaleLowerCase().includes(r) ? [f, ...i(r, f.items)] : f.items ? [...i(r, f.items)] : []);
+  return be(t, () => {
     n !== void 0 && n(t.value);
-  }), c(() => {
+  }), u(() => {
     if (!t.value || n !== void 0)
       return a.value;
     const r = t.value.toLocaleLowerCase();
     return i(r, a.value);
   });
 }
-const fe = {
+const me = {
   "en-US": {
     clearSearch: "Clear filter",
     ariaLabelFallback: "Dropdown"
   }
-}, gt = te({
-  i18n: { messages: fe },
+}, bt = oe({
+  i18n: { messages: me },
   name: "b-dropdown",
   components: {
-    BentoDropdownOptionsContainer: Je,
-    BentoTypography: Me,
+    BentoDropdownOptionsContainer: Ve,
+    BentoTypography: Ne,
     DropdownInputDefault: We,
-    DropdownInputSmall: ut,
-    ErrorMessage: Ue,
-    FieldLabel: je
+    DropdownInputSmall: st,
+    ErrorMessage: xe,
+    FieldLabel: Ue
   },
-  directives: { BentoClickOutsideDirective: ze, BentoKeyboardNavigationDirective: Fe },
+  directives: { BentoClickOutsideDirective: Fe, BentoKeyboardNavigationDirective: ke },
   props: {
     /**
      * @deprecated from version 2.0.0. Use the aria-label attribute instead.
@@ -590,6 +588,10 @@ const fe = {
      * Defines a string value that labels an interactive element.
      */
     ariaLabel: { type: String, default: null },
+    /**
+     * Renders the dropdown with a condensed style.
+     */
+    condensed: { type: Boolean, default: !1 },
     /**
      * Empty state props used with the inner empty state component which is displayed when no search results are found.
      */
@@ -671,8 +673,8 @@ const fe = {
      */
     lazyLoadType: {
       type: String,
-      default: Q.props.lazyLoadType.default,
-      validator: (e) => Object.values(X).includes(e)
+      default: X.props.lazyLoadType.default,
+      validator: (e) => Object.values(ee).includes(e)
     },
     /*
      * If enabled, the user will be able to select multiple items.
@@ -735,57 +737,59 @@ const fe = {
   },
   emits: ["input", s.SHOW_MORE],
   setup(e, { attrs: o, emit: n, slots: t }) {
-    var se;
-    const { t: a } = ne({ messages: fe }), i = $(null), d = $(null), r = $(null), l = $(!1), p = K("bento-dropdown-options-container"), O = K("dropdown-label"), g = K("dropdown-description"), h = K("dropdown-error"), { isReadOnly: b } = ke(R(e, "readonly")), v = $(o["aria-label"]), { ariaLabel: w } = be(e), m = Ke({
+    var re;
+    const { t: a } = le({ messages: me }), i = L(null), d = L(null), r = L(null), l = L(!1), f = K("bento-dropdown-options-container"), O = K("dropdown-label"), g = K("dropdown-description"), h = K("dropdown-error"), { isReadOnly: b } = Ke(I(e, "readonly")), v = L(o["aria-label"]), { ariaLabel: w } = ve(e), m = Pe({
       ariaLabel: v.value,
       // TODO: take this line away when the aria-label props is removed
       label: w,
       defaultFallback: a("ariaLabelFallback")
-    }), P = c(() => ({
+    }), P = u(() => ({
+      "b-dropdown--condensed": e.condensed
+    })), p = u(() => ({
       "b-dropdown__description--error": !!e.errorMessage
-    })), u = $(""), f = R(e, "items"), L = yt(u, f, (se = e == null ? void 0 : e.search) == null ? void 0 : se.searchEvent), U = c(() => e.dynamicFiltering && !!u.value), Se = mt({
-      items: f,
-      multiple: R(e, "multiple"),
-      placeholder: R(e, "placeholder"),
-      value: R(e, "value")
-    }), $e = c(() => e.size === D.DEFAULT), Oe = c(
+    })), c = L(""), $ = I(e, "items"), he = mt(c, $, (re = e == null ? void 0 : e.search) == null ? void 0 : re.searchEvent), U = u(() => e.dynamicFiltering && !!c.value), we = ct({
+      items: $,
+      multiple: I(e, "multiple"),
+      placeholder: I(e, "placeholder"),
+      value: I(e, "value")
+    }), Se = u(() => e.size === D.DEFAULT), $e = u(
       () => e != null && e.multiple ? e.items.filter(
         ({ value: S }) => (e == null ? void 0 : e.value) && (e == null ? void 0 : e.value).includes(S)
       ) : e.items.find(({ value: S }) => S === (e == null ? void 0 : e.value))
-    ), Le = c(() => {
-      const S = e.items.findIndex(({ value: Te }) => e.value === Te);
+    ), Le = u(() => {
+      const S = e.items.findIndex(({ value: Ie }) => e.value === Ie);
       return S > 0 ? S : 0;
-    }), Ee = c(() => {
+    }), Oe = u(() => {
       var S;
       return e.multiple ? (S = e == null ? void 0 : e.value) == null ? void 0 : S.length : null;
-    }), _e = c(
+    }), Ee = u(
       () => `${e.description ? g : ""} ${e.errorMessage ? h : ""}`.trim() || null
     ), Ce = () => {
       b.value || (l.value = !0);
     }, j = () => {
       l.value = !1;
-    }, le = () => {
-      b.value || (l.value = !l.value, U.value && (u.value = ""));
-    }, De = () => {
-      U.value && (u.value = ""), l.value && (l.value = !1);
-    }, ae = (S) => {
-      e.multiple || (u.value = "", l.value = !1), n("input", S);
-    }, ie = () => {
+    }, ae = () => {
+      b.value || (l.value = !l.value, U.value && (c.value = ""));
+    }, _e = () => {
+      U.value && (c.value = ""), l.value && (l.value = !1);
+    }, ie = (S) => {
+      e.multiple || (c.value = "", l.value = !1), n("input", S);
+    }, se = () => {
       n(s.SHOW_MORE);
-    }, Ie = bt(
+    }, De = ft(
       {
         inputContainerRef: i,
         optionsContainerRef: r,
         selectedValueIndex: Le,
         isDropdownOpen: l,
-        isDynamicFltering: R(e, "dynamicFiltering"),
+        isDynamicFltering: I(e, "dynamicFiltering"),
         items: e.items,
         isMultiple: e.multiple
       },
-      le,
+      ae,
       Ce,
       j
-    ), Be = vt(
+    ), Be = pt(
       {
         inputContainerRef: i,
         isDropdownOpen: l
@@ -793,11 +797,11 @@ const fe = {
       j
     ), Re = {
       [s.CLOSE_DROPDOWN]: j,
-      [s.SELECT]: ae,
-      [s.SHOW_MORE]: ie,
+      [s.SELECT]: ie,
+      [s.SHOW_MORE]: se,
       ...Be
     };
-    return e.error && Pe(
+    return e.error && Me(
       '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.
@@ -805,57 +809,61 @@ const fe = {
       "2.0.0"
     ), {
       // Values
+      conditionalClasses: P,
       computedAriaLabel: m,
-      additionalItemsSelected: Ee,
-      idDefaultSize: $e,
+      additionalItemsSelected: Oe,
+      idDefaultSize: Se,
       isDropdownOpen: l,
-      displayValue: Se,
-      dropdownOptionsContainerId: p,
-      filteredItems: L,
+      displayValue: we,
+      dropdownOptionsContainerId: f,
+      filteredItems: he,
       isSearching: U,
       isReadOnly: b,
-      searchTerm: u,
+      searchTerm: c,
       labelId: O,
       descriptionId: g,
       errorId: h,
-      ariaDescribedBy: _e,
-      selectedValueItem: Oe,
+      ariaDescribedBy: Ee,
+      selectedValueItem: $e,
       // 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: P,
+      descriptionConditionalClasses: p,
       // Refs
       inputContainerRef: i,
       inputContainerRefWrapper: d,
       optionsContainerRef: r,
       // Events
-      closeOpenedDropdown: De,
-      toggleDropdown: le,
-      onOptionSelected: ae,
-      emitShowMoreEvent: ie,
-      textboxKeyboardNavigationListeners: Ie,
+      closeOpenedDropdown: _e,
+      toggleDropdown: ae,
+      onOptionSelected: ie,
+      emitShowMoreEvent: se,
+      textboxKeyboardNavigationListeners: De,
       listboxListeners: Re
     };
   }
 });
-const ht = { class: "b-dropdown" };
-function wt(e, o, n, t, a, i) {
+function vt(e, o, n, t, a, i) {
   var h;
-  const d = E("field-label"), r = E("bento-dropdown-options-container"), l = E("error-message"), p = E("bento-typography"), O = de("bento-keyboard-navigation-directive"), g = de("bento-click-outside-directive");
-  return x((y(), B("div", ht, [
+  const d = E("field-label"), r = E("bento-dropdown-options-container"), l = E("error-message"), f = E("bento-typography"), O = ue("bento-keyboard-navigation-directive"), g = ue("bento-click-outside-directive");
+  return W((y(), R("div", {
+    class: Q(["b-dropdown", e.conditionalClasses])
+  }, [
     e.label ? (y(), A(d, {
       key: 0,
       id: e.labelId,
+      condensed: e.condensed,
       label: e.label,
       "tooltip-text": e.tooltipText,
       optional: e.optional,
       required: e.required
-    }, null, 8, ["id", "label", "tooltip-text", "optional", "required"])) : N("", !0),
-    x((y(), B("div", I({ ref: "inputContainerRefWrapper" }, z(e.textboxKeyboardNavigationListeners, !0)), [
-      (y(), A(ve(e.size), {
+    }, null, 8, ["id", "condensed", "label", "tooltip-text", "optional", "required"])) : N("", !0),
+    W((y(), R("div", B({ ref: "inputContainerRefWrapper" }, z(e.textboxKeyboardNavigationListeners, !0)), [
+      (y(), A(ye(e.size), {
         ref: "inputContainerRef",
+        condensed: e.condensed,
         value: e.searchTerm,
         "additional-items-selected": e.additionalItemsSelected,
         ariaControls: e.dropdownOptionsContainerId,
@@ -883,11 +891,11 @@ function wt(e, o, n, t, a, i) {
             Z(e.$slots, v, Y(G(w)), 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"]))
+      ]), 1064, ["condensed", "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)), [
       [O]
     ]),
-    e.inputContainerRef ? (y(), A(r, I({
+    e.inputContainerRef ? (y(), A(r, B({
       key: 1,
       id: e.dropdownOptionsContainerId,
       ref: "optionsContainerRef",
@@ -921,25 +929,25 @@ function wt(e, o, n, t, a, i) {
       "error-message": e.errorMessage,
       class: "b-dropdown__error-message"
     }, null, 8, ["id", "error-message"])) : N("", !0),
-    e.description ? (y(), A(p, {
+    e.description ? (y(), A(f, {
       key: 3,
       id: e.descriptionId,
-      class: he(["b-dropdown__description", e.descriptionConditionalClasses]),
+      class: Q(["b-dropdown__description", e.descriptionConditionalClasses]),
       el: "span"
     }, {
       default: M(() => [
-        Ne(oe(e.description), 1)
+        Ae(ne(e.description), 1)
       ]),
       _: 1
     }, 8, ["id", "class"])) : N("", !0)
-  ])), [
+  ], 2)), [
     [g, e.closeOpenedDropdown]
   ]);
 }
-const Mt = /* @__PURE__ */ k(gt, [["render", wt], ["__scopeId", "data-v-a24ee2cb"]]);
+const It = /* @__PURE__ */ k(bt, [["render", vt], ["__scopeId", "data-v-0defd8ce"]]);
 export {
-  Mt as B,
+  It as B,
   D as a,
-  yt as u
+  mt as u
 };
-//# sourceMappingURL=dropdown.502e1f5c.js.map
+//# sourceMappingURL=dropdown.63de9aac.js.map