@adyen/bento-vue3 1.22.0 → 1.23.0

package/dist/chunks/{index.c4f8460d.js → index.10c69f39.js}

@@ -1,19 +1,19 @@
-import { defineComponent as O, computed as M, resolveComponent as v, openBlock as c, createBlock as I, normalizeClass as U, createSlots as j, withCtx as C, createVNode as S, createTextVNode as F, toDisplayString as K, createCommentVNode as E, resolveDynamicComponent as se, createElementBlock as L, renderSlot as N, ref as p, onMounted as ie, Transition as le, createElementVNode as T, withKeys as h, withModifiers as D, Fragment as Z, renderList as z, normalizeStyle as J, mergeProps as Y, inject as ue, provide as ae, resolveDirective as re, withDirectives as de } from "vue";
-import { g as W } from "./unique-id.a2a2b458.js";
-import { B as ce } from "./directive.0408e565.js";
-import { a as me, B as V } from "./index.fb0e9e1a.js";
-import { B as G, D as fe } from "./index.9d65b72a.js";
-import { u as pe } from "./use-has-slot.4d98bf29.js";
-import { _ as R } from "./_plugin-vue_export-helper.dad06003.js";
-import { BentoToggleButton as ve } from "../button.js";
-import { B as _e } from "./teleport.afeb4c3b.js";
-import { a as be, C as H } from "./chevron-left.4ee92950.js";
-import { B as ye, a as A } from "./base-button.86be8130.js";
-import { B as Ce } from "./index.6e7e9ac6.js";
-import "../assets/index18.css";
-const he = O({
+import { defineComponent as O, computed as M, resolveComponent as v, openBlock as d, createBlock as $, normalizeClass as j, createSlots as Z, withCtx as C, createVNode as S, createTextVNode as W, toDisplayString as F, createCommentVNode as R, resolveDynamicComponent as se, createElementBlock as L, renderSlot as N, ref as m, onMounted as ie, Transition as le, createElementVNode as T, withKeys as g, withModifiers as D, Fragment as z, renderList as J, normalizeStyle as Y, mergeProps as G, inject as ue, provide as ae } from "vue";
+import { g as V } from "./unique-id.a2a2b458.js";
+import { a as re, B as H } from "./index.08d813e2.js";
+import { B as Q, D as de } from "./index.f800b267.js";
+import { u as ce } from "./use-click-outside.941d1600.js";
+import { u as me } from "./use-has-slot.4d98bf29.js";
+import { _ as E } from "./_plugin-vue_export-helper.dad06003.js";
+import { BentoToggleButton as fe } from "../button.js";
+import { B as pe } from "./teleport.afeb4c3b.js";
+import { a as ve, C as A } from "./chevron-left.4ee92950.js";
+import { B as be, a as q } from "./base-button.13df4e44.js";
+import { B as _e } from "./index.99c63a74.js";
+import "../assets/index15.css";
+const ye = O({
   name: "menu-item",
-  components: { BaseButton: ye, BentoTypography: Ce, ChevronRightIcon: be },
+  components: { BaseButton: be, BentoTypography: _e, ChevronRightIcon: ve },
   props: {
     /**
      * menu-item text that gets displayed as the main label
@@ -81,7 +81,7 @@ const he = O({
       default: !1
     }
   },
-  emits: [A.CLICK],
+  emits: [q.CLICK],
   setup(e, { emit: t }) {
     return {
       // Values
@@ -91,20 +91,20 @@ const he = O({
       })),
       // Methods
       onClick: (r) => {
-        r.stopPropagation(), e.handler(), t(A.CLICK);
+        r.stopPropagation(), e.handler(), t(q.CLICK);
       }
     };
   }
 });
-function ge(e, t, _, i, r, a) {
-  const l = v("bento-typography"), s = v("chevron-right-icon"), m = v("base-button");
-  return c(), I(m, {
-    class: U(["b-menu-item", e.conditionalClasses]),
+function Ce(e, t, b, i, r, a) {
+  const l = v("bento-typography"), s = v("chevron-right-icon"), f = v("base-button");
+  return d(), $(f, {
+    class: j(["b-menu-item", e.conditionalClasses]),
     role: "menuitem",
     disabled: e.disabled,
     tabindex: "-1",
     onClick: e.onClick
-  }, j({
+  }, Z({
     default: C(() => [
       S(l, {
         el: "span",
@@ -113,28 +113,28 @@ function ge(e, t, _, i, r, a) {
         class: "b-menu-item__primary-text"
       }, {
         default: C(() => [
-          F(K(e.text), 1)
+          W(F(e.text), 1)
         ]),
         _: 1
       }, 8, ["stronger"]),
-      e.secondaryText ? (c(), I(l, {
+      e.secondaryText ? (d(), $(l, {
         key: 0,
         el: "span",
         variant: "body",
         class: "b-menu-item__secondary-text"
       }, {
         default: C(() => [
-          F(K(e.secondaryText), 1)
+          W(F(e.secondaryText), 1)
         ]),
         _: 1
-      })) : E("", !0)
+      })) : R("", !0)
     ]),
     _: 2
   }, [
     e.icon ? {
       name: "iconLeft",
       fn: C(() => [
-        (c(), I(se(e.icon), {
+        (d(), $(se(e.icon), {
           class: "b-menu-item__icon-left",
           "aria-hidden": "true"
         }))
@@ -150,26 +150,26 @@ function ge(e, t, _, i, r, a) {
     } : void 0
   ]), 1032, ["class", "disabled", "onClick"]);
 }
-const Q = /* @__PURE__ */ R(he, [["render", ge], ["__scopeId", "data-v-9e8afd9c"]]);
-var g = /* @__PURE__ */ ((e) => (e.BACK = "back", e.CLOSE = "close", e.OPEN = "open", e))(g || {});
-const Be = O({
+const X = /* @__PURE__ */ E(ye, [["render", Ce], ["__scopeId", "data-v-9e8afd9c"]]);
+var h = /* @__PURE__ */ ((e) => (e.BACK = "back", e.CLOSE = "close", e.OPEN = "open", e))(h || {});
+const ge = O({
   name: "bento-menu-list-container"
 });
-const Ie = { class: "b-menu-list-container" };
-function $e(e, t, _, i, r, a) {
-  return c(), L("div", Ie, [
+const he = { class: "b-menu-list-container" };
+function Ie(e, t, b, i, r, a) {
+  return d(), L("div", he, [
     N(e.$slots, "default", {}, void 0, !0)
   ]);
 }
-const X = /* @__PURE__ */ R(Be, [["render", $e], ["__scopeId", "data-v-ea0113ba"]]), x = {
+const x = /* @__PURE__ */ E(ge, [["render", Ie], ["__scopeId", "data-v-ea0113ba"]]), ee = {
   "en-US": {
     menuButton: "Open menu",
     backButton: "Go back"
   }
-}, Me = O({
-  i18n: { messages: x },
+}, Be = O({
+  i18n: { messages: ee },
   name: "sub-menu-item-list",
-  components: { BentoDivider: G, MenuItem: Q, MenuListContainer: X },
+  components: { BentoDivider: Q, MenuItem: X, MenuListContainer: x },
   props: {
     items: {
       type: Array,
@@ -180,13 +180,13 @@ const X = /* @__PURE__ */ R(Be, [["render", $e], ["__scopeId", "data-v-ea0113ba"
       required: !0
     }
   },
-  emits: [g.CLOSE, g.BACK],
+  emits: [h.CLOSE, h.BACK],
   setup(e, { emit: t }) {
-    const _ = p(null), i = p(0), r = p(e.items.length), a = () => t(g.CLOSE), l = () => t(g.BACK), s = M(() => {
-      var u;
-      const d = (u = e.items) == null ? void 0 : u.map((b) => ({
-        ...b,
-        indent: !b.icon,
+    const b = m(null), i = m(0), r = m(e.items.length), a = () => t(h.CLOSE), l = () => t(h.BACK), s = M(() => {
+      var _;
+      const u = (_ = e.items) == null ? void 0 : _.map((p) => ({
+        ...p,
+        indent: !p.icon,
         isTitle: !1,
         clickHandler: a
       }));
@@ -195,7 +195,7 @@ const X = /* @__PURE__ */ R(Be, [["render", $e], ["__scopeId", "data-v-ea0113ba"
           text: e.title,
           secondaryText: null,
           critical: !1,
-          icon: H,
+          icon: A,
           isTitle: !0,
           disabled: !1,
           indent: !1,
@@ -203,27 +203,27 @@ const X = /* @__PURE__ */ R(Be, [["render", $e], ["__scopeId", "data-v-ea0113ba"
           clickHandler: l,
           addDivider: !0
         },
-        ...d
+        ...u
       ];
-    }), m = async () => {
-      var d, u, b, $, B;
-      (B = ($ = (b = (u = (d = _.value) == null ? void 0 : d.children) == null ? void 0 : u[i.value]) == null ? void 0 : b.children) == null ? void 0 : $[0]) == null || B.focus();
+    }), f = async () => {
+      var u, _, p, I, B;
+      (B = (I = (p = (_ = (u = b.value) == null ? void 0 : u.children) == null ? void 0 : _[i.value]) == null ? void 0 : p.children) == null ? void 0 : I[0]) == null || B.focus();
     };
     ie(async () => {
-      setTimeout(() => m(), 150);
+      setTimeout(() => f(), 150);
     });
     const o = () => {
-      i.value > 0 ? (i.value -= 1, s.value[i.value].disabled && o()) : i.value = r.value, m();
+      i.value > 0 ? (i.value -= 1, s.value[i.value].disabled && o()) : i.value = r.value, f();
     }, n = () => {
-      i.value < r.value ? (i.value += 1, s.value[i.value].disabled && n()) : i.value = 0, m();
+      i.value < r.value ? (i.value += 1, s.value[i.value].disabled && n()) : i.value = 0, f();
     };
     return {
       // Enums
-      BentoMenuEvent: g,
+      BentoMenuEvent: h,
       // Values
-      subMenuItemListRefLocal: _,
+      subMenuItemListRefLocal: b,
       subMenuFocusedIndex: i,
-      ChevronLeftIcon: H,
+      ChevronLeftIcon: A,
       computedItems: s,
       // Methods
       closeMenu: a,
@@ -233,26 +233,26 @@ const X = /* @__PURE__ */ R(Be, [["render", $e], ["__scopeId", "data-v-ea0113ba"
     };
   }
 });
-function ke(e, t, _, i, r, a) {
-  const l = v("menu-item"), s = v("bento-divider"), m = v("menu-list-container");
-  return c(), I(le, {
+function $e(e, t, b, i, r, a) {
+  const l = v("menu-item"), s = v("bento-divider"), f = v("menu-list-container");
+  return d(), $(le, {
     name: "b-sub-menu-item-list__transition",
     appear: ""
   }, {
     default: C(() => [
-      S(m, { class: "b-sub-menu-item-list" }, {
+      S(f, { class: "b-sub-menu-item-list" }, {
         default: C(() => [
           T("ul", {
             ref: "subMenuItemListRefLocal",
             role: "menu",
             class: "b-sub-menu-item-list__list",
             onKeydown: [
-              t[0] || (t[0] = h(D((...o) => e.focusNext && e.focusNext(...o), ["stop"]), ["down"])),
-              t[1] || (t[1] = h(D((...o) => e.focusPrevious && e.focusPrevious(...o), ["stop"]), ["up"])),
-              t[2] || (t[2] = h(D((...o) => e.onBackButton && e.onBackButton(...o), ["stop"]), ["esc"]))
+              t[0] || (t[0] = g(D((...o) => e.focusNext && e.focusNext(...o), ["stop"]), ["down"])),
+              t[1] || (t[1] = g(D((...o) => e.focusPrevious && e.focusPrevious(...o), ["stop"]), ["up"])),
+              t[2] || (t[2] = g(D((...o) => e.onBackButton && e.onBackButton(...o), ["stop"]), ["esc"]))
             ]
           }, [
-            (c(!0), L(Z, null, z(e.computedItems, (o, n) => (c(), L("li", {
+            (d(!0), L(z, null, J(e.computedItems, (o, n) => (d(), L("li", {
               key: `sub-menu-item-list-item-${n}`,
               role: "none"
             }, [
@@ -268,10 +268,10 @@ function ke(e, t, _, i, r, a) {
                 tabindex: n === e.subMenuFocusedIndex ? "0" : "-1",
                 onClick: o.clickHandler
               }, null, 8, ["text", "handler", "secondary-text", "icon", "is-title", "disabled", "critical", "indent", "tabindex", "onClick"]),
-              o.addDivider ? (c(), I(s, {
+              o.addDivider ? (d(), $(s, {
                 key: 0,
                 class: "b-sub-menu-item-list__divider"
-              })) : E("", !0)
+              })) : R("", !0)
             ]))), 128))
           ], 544)
         ]),
@@ -281,9 +281,9 @@ function ke(e, t, _, i, r, a) {
     _: 1
   });
 }
-const Se = /* @__PURE__ */ R(Me, [["render", ke], ["__scopeId", "data-v-621db243"]]), Le = O({
+const Me = /* @__PURE__ */ E(Be, [["render", $e], ["__scopeId", "data-v-621db243"]]), ke = O({
   name: "menu-item-list",
-  components: { BentoDivider: G, MenuItem: Q, MenuListContainer: X, SubMenuItemList: Se },
+  components: { BentoDivider: Q, MenuItem: X, MenuListContainer: x, SubMenuItemList: Me },
   props: {
     /**
      * The data to be displayed in the list
@@ -307,63 +307,63 @@ const Se = /* @__PURE__ */ R(Me, [["render", ke], ["__scopeId", "data-v-621db243
       default: !1
     }
   },
-  emits: [g.CLOSE],
+  emits: [h.CLOSE],
   setup(e, { emit: t }) {
-    const _ = p(null), i = p(null), r = p(null), a = p(!1), l = p(null), s = p(e.focusLastElement ? e.data.length - 1 : 0), m = p(0), o = p(e.data.length - 1), n = M(() => e.data.some((f) => f.icon)), d = M(() => e.indentItems || n.value ? e.data.map((f) => {
+    const b = m(null), i = m(null), r = m(null), a = m(!1), l = m(null), s = m(e.focusLastElement ? e.data.length - 1 : 0), f = m(0), o = m(e.data.length - 1), n = M(() => e.data.some((c) => c.icon)), u = M(() => e.indentItems || n.value ? e.data.map((c) => {
       let y = !1;
-      return f.icon || (y = !0), {
-        ...f,
+      return c.icon || (y = !0), {
+        ...c,
         // eslint-disable-next-line no-param-reassign
         indent: y
       };
-    }) : e.data), u = () => {
-      var f, y, k;
-      return (k = (y = (f = _.value) == null ? void 0 : f.children[s.value]) == null ? void 0 : y.children[0]) == null ? void 0 : k.focus();
-    }, b = () => t(g.CLOSE), $ = async (f, y) => {
-      f.items ? (l.value = y, a.value = !0) : (l.value = y, a.value = !1, b());
+    }) : e.data), _ = () => {
+      var c, y, k;
+      return (k = (y = (c = b.value) == null ? void 0 : c.children[s.value]) == null ? void 0 : y.children[0]) == null ? void 0 : k.focus();
+    }, p = () => t(h.CLOSE), I = async (c, y) => {
+      c.items ? (l.value = y, a.value = !0) : (l.value = y, a.value = !1, p());
     }, B = () => {
-      s.value > 0 ? (s.value -= 1, d.value[s.value].disabled && B()) : s.value = o.value, u();
+      s.value > 0 ? (s.value -= 1, u.value[s.value].disabled && B()) : s.value = o.value, _();
     }, w = () => {
-      s.value < o.value ? (s.value += 1, d.value[s.value].disabled && w()) : s.value = 0, u();
-    }, P = (f, y) => {
+      s.value < o.value ? (s.value += 1, u.value[s.value].disabled && w()) : s.value = 0, _();
+    }, P = (c, y) => {
       var k;
-      (k = f == null ? void 0 : f.items) != null && k.length && (l.value = y, a.value = !0);
-    }, ee = () => {
+      (k = c == null ? void 0 : c.items) != null && k.length && (l.value = y, a.value = !0);
+    }, K = () => {
       l.value && a.value && (l.value = null, a.value = !1);
     }, te = () => {
-      a.value = !1, l.value = null, u();
+      a.value = !1, l.value = null, _();
     }, ne = M(() => {
-      var f, y, k;
-      return (k = (y = (f = r.value) == null ? void 0 : f[0]) == null ? void 0 : y.$el) == null ? void 0 : k.offsetHeight;
+      var c, y, k;
+      return (k = (y = (c = r.value) == null ? void 0 : c[0]) == null ? void 0 : y.$el) == null ? void 0 : k.offsetHeight;
     }), oe = M(() => a.value ? `${ne.value}px` : "");
     return {
       // Values
-      menuItemListRef: _,
+      menuItemListRef: b,
       menuItemListWrapperRef: i,
       subMenuItemListRef: r,
-      computedData: d,
+      computedData: u,
       computedHeight: oe,
       focusedIndex: s,
-      subMenuFocusedIndex: m,
+      subMenuFocusedIndex: f,
       showSubMenu: a,
       visibleSubMenuIndex: l,
       // Methods
-      toggleMenu: $,
-      closeMenu: b,
+      toggleMenu: I,
+      closeMenu: p,
       focusPrevious: B,
       focusNext: w,
       focusRight: P,
-      focusLeft: ee,
+      focusLeft: K,
       onBackButton: te
     };
   }
 });
-const we = ["onKeydown"];
-function Ee(e, t, _, i, r, a) {
-  const l = v("menu-item"), s = v("bento-divider"), m = v("sub-menu-item-list"), o = v("menu-list-container");
-  return c(), I(o, {
+const Se = ["onKeydown"];
+function Le(e, t, b, i, r, a) {
+  const l = v("menu-item"), s = v("bento-divider"), f = v("sub-menu-item-list"), o = v("menu-list-container");
+  return d(), $(o, {
     ref: "menuItemListWrapperRef",
-    style: J({ height: e.computedHeight })
+    style: Y({ height: e.computedHeight })
   }, {
     default: C(() => [
       T("ul", {
@@ -371,42 +371,42 @@ function Ee(e, t, _, i, r, a) {
         class: "b-menu-item-list",
         role: "menu",
         onKeydown: [
-          t[1] || (t[1] = h((...n) => e.focusNext && e.focusNext(...n), ["down"])),
-          t[2] || (t[2] = h((...n) => e.focusPrevious && e.focusPrevious(...n), ["up"])),
-          t[3] || (t[3] = h((...n) => e.closeMenu && e.closeMenu(...n), ["esc"])),
-          t[4] || (t[4] = h((...n) => e.closeMenu && e.closeMenu(...n), ["tab"]))
+          t[1] || (t[1] = g((...n) => e.focusNext && e.focusNext(...n), ["down"])),
+          t[2] || (t[2] = g((...n) => e.focusPrevious && e.focusPrevious(...n), ["up"])),
+          t[3] || (t[3] = g((...n) => e.closeMenu && e.closeMenu(...n), ["esc"])),
+          t[4] || (t[4] = g((...n) => e.closeMenu && e.closeMenu(...n), ["tab"]))
         ]
       }, [
-        (c(!0), L(Z, null, z(e.computedData, (n, d) => {
-          var u, b, $, B;
-          return c(), L("li", {
-            key: `menu-item-${d}`,
+        (d(!0), L(z, null, J(e.computedData, (n, u) => {
+          var _, p, I, B;
+          return d(), L("li", {
+            key: `menu-item-${u}`,
             class: "b-menu-item-list__item",
             role: "none",
             onKeydown: [
-              h((w) => e.focusRight(n, d), ["right"]),
-              t[0] || (t[0] = h((w) => e.focusLeft(), ["left"]))
+              g((w) => e.focusRight(n, u), ["right"]),
+              t[0] || (t[0] = g((w) => e.focusLeft(), ["left"]))
             ]
           }, [
             S(l, {
               text: n.text,
-              handler: (u = n.items) != null && u.length ? () => null : n.handler,
+              handler: (_ = n.items) != null && _.length ? () => null : n.handler,
               "secondary-text": n.secondaryText,
               icon: n.icon,
-              chevron: !!((b = n.items) != null && b.length),
+              chevron: !!((p = n.items) != null && p.length),
               disabled: n.disabled,
               critical: n.critical,
               indent: n.indent,
-              tabindex: d === e.subMenuFocusedIndex ? "0" : "-1",
-              "aria-haspopup": !!(($ = n.items) != null && $.length),
-              "aria-expanded": e.showSubMenu && e.visibleSubMenuIndex === d,
-              onClick: (w) => e.toggleMenu(n, d)
+              tabindex: u === e.subMenuFocusedIndex ? "0" : "-1",
+              "aria-haspopup": !!((I = n.items) != null && I.length),
+              "aria-expanded": e.showSubMenu && e.visibleSubMenuIndex === u,
+              onClick: (w) => e.toggleMenu(n, u)
             }, null, 8, ["text", "handler", "secondary-text", "icon", "chevron", "disabled", "critical", "indent", "tabindex", "aria-haspopup", "aria-expanded", "onClick"]),
-            n.addDivider ? (c(), I(s, {
+            n.addDivider ? (d(), $(s, {
               key: 0,
               class: "b-menu-item-list__divider"
-            })) : E("", !0),
-            (B = n.items) != null && B.length && e.showSubMenu && e.visibleSubMenuIndex === d ? (c(), I(m, {
+            })) : R("", !0),
+            (B = n.items) != null && B.length && e.showSubMenu && e.visibleSubMenuIndex === u ? (d(), $(f, {
               key: 1,
               ref_for: !0,
               ref: "subMenuItemListRef",
@@ -414,49 +414,48 @@ function Ee(e, t, _, i, r, a) {
               title: n.text,
               onBack: e.onBackButton,
               onClose: e.closeMenu
-            }, null, 8, ["items", "title", "onBack", "onClose"])) : E("", !0)
-          ], 40, we);
+            }, null, 8, ["items", "title", "onBack", "onClose"])) : R("", !0)
+          ], 40, Se);
         }), 128))
       ], 544)
     ]),
     _: 1
   }, 8, ["style"]);
 }
-const Re = /* @__PURE__ */ R(Le, [["render", Ee], ["__scopeId", "data-v-f1d94ee8"]]), Oe = Symbol("menu inverse style injection key");
-let q = 0;
-const Te = {
+const we = /* @__PURE__ */ E(ke, [["render", Le], ["__scopeId", "data-v-f1d94ee8"]]), Re = Symbol("menu inverse style injection key");
+let U = 0;
+const Ee = {
   beforeCreate() {
-    this.uuid = q.toString(), q += 1;
+    this.uuid = U.toString(), U += 1;
   }
-}, Ne = { key: 0 }, Pe = /* @__PURE__ */ T("path", {
+}, Oe = { key: 0 }, Te = /* @__PURE__ */ T("path", {
   fill: "#00112C",
   d: "M8 4C8.29667 4 8.58668 3.91203 8.83335 3.74721C9.08003 3.58238 9.27229 3.34811 9.38582 3.07403C9.49935 2.79994 9.52906 2.49834 9.47118 2.20737C9.4133 1.91639 9.27044 1.64912 9.06066 1.43934C8.85088 1.22956 8.58361 1.0867 8.29264 1.02882C8.00167 0.970945 7.70006 1.00065 7.42598 1.11418C7.15189 1.22771 6.91762 1.41997 6.7528 1.66665C6.58797 1.91332 6.5 2.20333 6.5 2.5C6.5 2.89783 6.65803 3.27936 6.93934 3.56066C7.22064 3.84197 7.60218 4 8 4Z"
-}, null, -1), De = /* @__PURE__ */ T("path", {
+}, null, -1), Ne = /* @__PURE__ */ T("path", {
   fill: "#00112C",
   d: "M8 15C8.29667 15 8.58668 14.912 8.83335 14.7472C9.08003 14.5824 9.27229 14.3481 9.38582 14.074C9.49935 13.7999 9.52906 13.4983 9.47118 13.2074C9.4133 12.9164 9.27044 12.6491 9.06066 12.4393C8.85088 12.2296 8.58361 12.0867 8.29264 12.0288C8.00167 11.9709 7.70006 12.0007 7.42598 12.1142C7.15189 12.2277 6.91762 12.42 6.7528 12.6666C6.58797 12.9133 6.5 13.2033 6.5 13.5C6.5 13.8978 6.65803 14.2794 6.93934 14.5607C7.22064 14.842 7.60218 15 8 15Z"
-}, null, -1), Ke = /* @__PURE__ */ T("path", {
+}, null, -1), Pe = /* @__PURE__ */ T("path", {
   fill: "#00112C",
   d: "M8.83335 9.24721C8.58668 9.41203 8.29667 9.5 8 9.5C7.60218 9.5 7.22064 9.34197 6.93934 9.06066C6.65803 8.77936 6.5 8.39783 6.5 8C6.5 7.70333 6.58797 7.41332 6.7528 7.16665C6.91762 6.91997 7.15189 6.72771 7.42598 6.61418C7.70006 6.50065 8.00167 6.47094 8.29264 6.52882C8.58361 6.5867 8.85088 6.72956 9.06066 6.93934C9.27044 7.14912 9.4133 7.41639 9.47118 7.70737C9.52906 7.99834 9.49935 8.29994 9.38582 8.57403C9.27229 8.84811 9.08003 9.08238 8.83335 9.24721Z"
 }, null, -1);
-function Fe(e, t, _, i, r, a) {
-  return c(), L("svg", Y({ role: "img" }, e.$attrs, {
+function Ke(e, t, b, i, r, a) {
+  return d(), L("svg", G({ 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"] ? (c(), L("title", Ne, K(e.$attrs["svg-title"]), 1)) : E("", !0),
-    Pe,
-    De,
-    Ke
+    e.$attrs["svg-title"] ? (d(), L("title", Oe, F(e.$attrs["svg-title"]), 1)) : R("", !0),
+    Te,
+    Ne,
+    Pe
   ], 16);
 }
-const We = /* @__PURE__ */ R(Te, [["render", Fe]]), Ve = O({
-  i18n: { messages: x },
+const De = /* @__PURE__ */ E(Ee, [["render", Ke]]), Fe = O({
+  i18n: { messages: ee },
   name: "bento-menu",
-  components: { BentoToggleButton: ve, BentoPopover: me, BentoTeleport: _e, MenuItemList: Re, OptionsVerticalIcon: We },
-  directives: { BentoClickOutsideDirective: ce },
+  components: { BentoToggleButton: fe, BentoPopover: re, BentoTeleport: pe, MenuItemList: we, OptionsVerticalIcon: De },
   props: {
     /**
      * Object containing props to change the menu button appearance. Accepts the same props present in BentoButton.
@@ -479,8 +478,8 @@ const We = /* @__PURE__ */ R(Te, [["render", Fe]]), Ve = O({
      */
     menuPosition: {
       type: String,
-      default: V.BOTTOM_START,
-      validator: (e) => Object.values(V).includes(e)
+      default: H.BOTTOM_START,
+      validator: (e) => Object.values(H).includes(e)
     },
     /**
      * Instructs the menu popover to be visible outside of the containing container.
@@ -506,61 +505,63 @@ const We = /* @__PURE__ */ R(Te, [["render", Fe]]), Ve = O({
       default: !1
     }
   },
-  emits: [g.CLOSE, g.OPEN],
-  setup(e, { emit: t, slots: _ }) {
-    const i = p(null), r = p(!1), a = p(!1), l = W("menu"), s = W("menu-popover"), m = ue(Oe, p(!1));
-    ae(fe, m);
-    const o = M(() => ({
-      "b-menu--inverse": m.value
-    })), n = M(() => e.menuWidth ? { width: `${e.menuWidth}px` } : null), d = M(() => {
+  emits: [h.CLOSE, h.OPEN],
+  setup(e, { emit: t, slots: b }) {
+    const i = m(null), r = m(!1), a = m(!1), l = m(null), s = V("menu"), f = V("menu-popover"), o = ue(Re, m(!1));
+    ae(de, o);
+    const n = M(() => ({
+      "b-menu--inverse": o.value
+    })), u = M(() => e.menuWidth ? { width: `${e.menuWidth}px` } : null), _ = M(() => {
       if (e != null && e.button)
         return {
           variant: "secondary",
           ...e.button
         };
-    }), u = () => {
-      r.value = !0, t(g.OPEN);
-    }, b = () => {
-      r.value && (r.value = !1, i.value.$el.focus(), t(g.CLOSE));
-    }, $ = (P) => {
-      P.stopPropagation(), r.value ? b() : u();
-    }, B = () => {
-      a.value = !1, u();
+    }), p = () => {
+      r.value = !0, t(h.OPEN);
+    }, I = () => {
+      r.value && (r.value = !1, i.value.$el.focus(), t(h.CLOSE));
+    }, B = (K) => {
+      K.stopPropagation(), r.value ? I() : p();
     }, w = () => {
-      a.value = !0, u();
+      a.value = !1, p();
+    }, P = () => {
+      a.value = !0, p();
     };
-    return {
-      // Values
+    return ce(l, I, { ignore: [i] }), {
+      // Refs
+      popoverRef: l,
       menuButtonRef: i,
-      menuId: l,
-      popoverId: s,
+      // Values
+      menuId: s,
+      popoverId: f,
       showMenu: r,
-      computedButtonPropsWithDefaults: d,
-      computedMenuWidth: n,
+      computedButtonPropsWithDefaults: _,
+      computedMenuWidth: u,
       isLastElementFocused: a,
       // Classes
-      computedClasses: o,
-      isInverseColorSet: m,
+      computedClasses: n,
+      isInverseColorSet: o,
       // Methods
-      hasSlot: pe(_),
-      onKeyDown: B,
-      onKeyUp: w,
-      closeMenu: b,
-      toggleShowMenu: $
+      hasSlot: me(b),
+      onKeyDown: w,
+      onKeyUp: P,
+      closeMenu: I,
+      toggleShowMenu: B
     };
   }
 });
-function He(e, t, _, i, r, a) {
-  const l = v("options-vertical-icon"), s = v("bento-toggle-button"), m = v("menu-item-list"), o = v("bento-popover"), n = v("bento-teleport"), d = re("bento-click-outside-directive");
-  return de((c(), L("div", {
-    class: U([e.computedClasses, "b-menu"]),
+function We(e, t, b, i, r, a) {
+  const l = v("options-vertical-icon"), s = v("bento-toggle-button"), f = v("menu-item-list"), o = v("bento-popover"), n = v("bento-teleport");
+  return d(), L("div", {
+    class: j([e.computedClasses, "b-menu"]),
     onKeydown: [
-      t[0] || (t[0] = h((...u) => e.onKeyDown && e.onKeyDown(...u), ["down"])),
-      t[1] || (t[1] = h((...u) => e.onKeyUp && e.onKeyUp(...u), ["up"])),
-      t[2] || (t[2] = h((...u) => e.closeMenu && e.closeMenu(...u), ["esc"]))
+      t[0] || (t[0] = g((...u) => e.onKeyDown && e.onKeyDown(...u), ["down"])),
+      t[1] || (t[1] = g((...u) => e.onKeyUp && e.onKeyUp(...u), ["up"])),
+      t[2] || (t[2] = g((...u) => e.closeMenu && e.closeMenu(...u), ["esc"]))
     ]
   }, [
-    S(s, Y({
+    S(s, G({
       ref: "menuButtonRef",
       "aria-haspopup": "true"
     }, e.computedButtonPropsWithDefaults, {
@@ -568,7 +569,7 @@ function He(e, t, _, i, r, a) {
       toggled: e.showMenu,
       inverse: e.isInverseColorSet,
       onClick: e.toggleShowMenu
-    }), j({ _: 2 }, [
+    }), Z({ _: 2 }, [
       !e.hasSlot("default") || e.hasSlot("iconLeft") ? {
         name: "iconLeft",
         fn: C(() => [
@@ -595,17 +596,18 @@ function He(e, t, _, i, r, a) {
         key: "2"
       } : void 0
     ]), 1040, ["aria-controls", "toggled", "inverse", "onClick"]),
-    e.menuButtonRef ? (c(), I(n, {
+    e.menuButtonRef ? (d(), $(n, {
       key: 0,
       disabled: !e.teleport
     }, {
       default: C(() => [
-        e.menuButtonRef ? (c(), I(o, {
+        e.menuButtonRef ? (d(), $(o, {
           key: 0,
           id: e.menuId,
+          ref: "popoverRef",
           open: e.showMenu,
           class: "b-menu__popover",
-          style: J(e.computedMenuWidth),
+          style: Y(e.computedMenuWidth),
           "target-element": e.menuButtonRef,
           position: e.menuPosition,
           "fixed-positioning": e.menuFixedPositioning,
@@ -623,26 +625,24 @@ function He(e, t, _, i, r, a) {
           "without-space": ""
         }, {
           default: C(() => [
-            S(m, {
+            S(f, {
               data: e.data,
               "focus-last-element": e.isLastElementFocused,
               onClose: e.closeMenu
             }, null, 8, ["data", "focus-last-element", "onClose"])
           ]),
           _: 1
-        }, 8, ["id", "open", "style", "target-element", "position", "fixed-positioning", "teleport"])) : E("", !0)
+        }, 8, ["id", "open", "style", "target-element", "position", "fixed-positioning", "teleport"])) : R("", !0)
       ]),
       _: 1
-    }, 8, ["disabled"])) : E("", !0)
-  ], 34)), [
-    [d, e.closeMenu]
-  ]);
+    }, 8, ["disabled"])) : R("", !0)
+  ], 34);
 }
-const et = /* @__PURE__ */ R(Ve, [["render", He], ["__scopeId", "data-v-37829e77"]]);
+const Xe = /* @__PURE__ */ E(Fe, [["render", We], ["__scopeId", "data-v-42faec3b"]]);
 export {
-  et as B,
-  Oe as M,
-  We as O,
-  g as a
+  Xe as B,
+  Re as M,
+  De as O,
+  h as a
 };
-//# sourceMappingURL=index.c4f8460d.js.map
+//# sourceMappingURL=index.10c69f39.js.map