@adyen/bento-vue3 1.78.2 → 1.79.0

package/dist/chunks/button-actions.Bg38lywL.js

@@ -0,0 +1,1234 @@
+import { defineComponent as P, useSlots as Q, computed as C, createBlock as _, openBlock as u, withModifiers as q, normalizeClass as V, createSlots as Y, withCtx as g, renderSlot as W, unref as v, createElementVNode as U, createCommentVNode as $, mergeProps as j, renderList as x, normalizeProps as Be, guardReactiveProps as $e, resolveComponent as O, createVNode as T, createTextVNode as H, toDisplayString as K, onMounted as ee, onUnmounted as me, useAttrs as Se, inject as G, ref as m, toRefs as Te, Transition as ve, createElementBlock as I, resolveDynamicComponent as z, toHandlers as ae, withKeys as M, Fragment as Z, watch as be, nextTick as te, normalizeStyle as ye, provide as Ee, toRef as Le } from "vue";
+import { B as L } from "./button.DhcxX2GJ.js";
+import { B as Oe } from "./loading-indicator.Db794TT5.js";
+import { C as Me } from "./cross-circle-fill.CYLL7jfC.js";
+import { C as we } from "./checkmark-circle-fill._6-d40ru.js";
+import { u as ie } from "./use-has-slot.B7eQSabc.js";
+import { u as ge } from "./index.pdBj0KQU.js";
+import { _ as w } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import { B as _e, D as Ne } from "./divider.Dho4_hQ7.js";
+import { C as Re } from "./cross.B92GxFTY.js";
+import { B as Ce, a as re, p as Pe } from "./typography.yBEME_Gu.js";
+import { c as Ae, P as De, d as Fe } from "./popper-container.Uod3yjsR.js";
+import { u as We } from "./aria-label.CaUURpnB.js";
+import { o as Ue } from "./on-click-outside.D9aY9g8G.js";
+import { g as Ke } from "./generate-uid.NJ8tVoha.js";
+import { C as Ve } from "./chevron-down.DCQ6ZLaq.js";
+/* empty css              */
+import { a as He, C as ue } from "./chevron-left.Cfn1uGLH.js";
+import { a as ce, B as Ge } from "./base-button.BYhf0xf3.js";
+import { t as Ye } from "./truncate.BfIl_-71.js";
+import { B as je } from "./teleport.CHhznja1.js";
+import { o as Je } from "./resize.Bqks3WUm.js";
+import { g as Xe } from "./es6.MoTTyETW.js";
+import "../assets/button-actions.css";
+var R = /* @__PURE__ */ ((e) => (e.START = "start", e.LOADING = "loading", e.SUCCESS = "success", e.FAIL = "fail", e))(R || {});
+const he = {
+  "en-US": {
+    failed: "Failed",
+    succeded: "Succeded"
+  },
+  "ja-JP": {
+    failed: "失敗しました"
+  },
+  "pt-BR": {
+    failed: "Falha"
+  }
+}, qe = {
+  class: "b-loading-button__icon",
+  "data-testid": "loading-button-rotating-icon"
+}, ze = {
+  i18n: { messages: he }
+}, Ze = /* @__PURE__ */ P({
+  ...ze,
+  __name: "loading-button",
+  props: {
+    /**
+     * Reduces sizing of button
+     */
+    condensed: {
+      type: L.props.condensed.type,
+      default: !1
+    },
+    /**
+     * Displays loading-button as critical
+     */
+    critical: {
+      type: L.props.critical.type,
+      default: !1
+    },
+    /**
+     * Disables button functonality
+     */
+    disabled: {
+      type: L.props.disabled.type,
+      default: !1
+    },
+    /**
+     * Sets color set to inverse
+     */
+    inverse: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * State of the button.
+     * @values start, loading, success, fail
+     */
+    state: {
+      type: String,
+      default: R.START,
+      validator: (e) => Object.values(R).includes(e)
+    },
+    /**
+     * Types of flavour of Button
+     */
+    variant: {
+      type: L.props.variant.type,
+      default: "primary",
+      validator: L.props.variant.validator
+    }
+  },
+  emits: ["click"],
+  setup(e, { emit: s }) {
+    const i = e, o = s, f = Q(), p = ie(f), { t: l } = ge({ messages: he }), d = C(() => ({
+      [`b-loading-button--${i.variant}-${R.LOADING}`]: i.state === R.LOADING && !i.disabled,
+      "b-loading-button--loading": i.state === R.LOADING && !i.disabled,
+      [`b-loading-button--${i.variant}-${R.SUCCESS}`]: i.state === R.SUCCESS,
+      "b-loading-button--inverse": i.inverse
+    })), c = C(
+      () => i.variant === "primary" && !i.inverse || i.variant !== "primary" && i.inverse
+    ), a = C(
+      () => i.critical && i.state === R.START || i.state === R.FAIL
+    ), n = (r) => {
+      r.stopPropagation(), i.state !== R.LOADING && o("click", r);
+    };
+    return (r, t) => (u(), _(L, {
+      critical: a.value,
+      variant: e.variant,
+      condensed: e.condensed,
+      disabled: e.disabled,
+      inverse: e.inverse,
+      class: V(["b-loading-button", d.value]),
+      onClickCapture: q(n, ["stop"])
+    }, Y({
+      default: g(() => [
+        W(r.$slots, "default", {}, void 0, !0)
+      ]),
+      _: 2
+    }, [
+      e.state === "start" && v(p)("iconLeft") ? {
+        name: "iconLeft",
+        fn: g(() => [
+          W(r.$slots, "iconLeft", {}, void 0, !0)
+        ]),
+        key: "0"
+      } : e.state !== "start" ? {
+        name: "iconLeft",
+        fn: g(() => [
+          U("span", qe, [
+            e.state === "fail" ? (u(), _(v(Me), {
+              key: 0,
+              "svg-title": v(l)("failed")
+            }, null, 8, ["svg-title"])) : e.state === "success" ? (u(), _(v(we), {
+              key: 1,
+              "svg-title": v(l)("succeded")
+            }, null, 8, ["svg-title"])) : e.state === "loading" ? (u(), _(v(Oe), {
+              key: 2,
+              small: "",
+              inverse: c.value
+            }, null, 8, ["inverse"])) : $("", !0)
+          ])
+        ]),
+        key: "1"
+      } : void 0
+    ]), 1032, ["critical", "variant", "condensed", "disabled", "inverse", "class"]));
+  }
+}), Qe = /* @__PURE__ */ w(Ze, [["__scopeId", "data-v-e68a786b"]]), xe = {}, et = /* @__PURE__ */ P({
+  ...xe,
+  __name: "toggle-button",
+  props: {
+    /**
+     * Reduces sizing of button
+     */
+    condensed: {
+      type: L.props.condensed.type,
+      default: !1
+    },
+    /**
+     * Disables button functonality
+     */
+    disabled: {
+      type: L.props.disabled.type,
+      default: !1
+    },
+    /**
+     * Sets color set to inverse
+     */
+    inverse: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Types of flavour of Button
+     * @values primary, secondary, tertiary
+     */
+    variant: {
+      type: L.props.variant.type,
+      default: "primary",
+      validator: L.props.variant.validator
+    },
+    /**
+     * The state of the button whether it is toggled or not.
+     */
+    toggled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["click", "update:toggled"],
+  setup(e, { emit: s }) {
+    const i = e, o = s, f = C(
+      () => i.variant === "tertiary" ? "tertiary-with-background" : i.variant
+    ), p = C(() => ({
+      "b-toggle-button--condensed": i == null ? void 0 : i.condensed,
+      [`b-toggle-button--${f.value}-toggled`]: i.toggled,
+      "b-toggle-button--inverse": i.inverse
+    })), l = (a) => {
+      a.stopPropagation(), i != null && i.disabled || (o("click", a), o("update:toggled", !i.toggled));
+    }, d = Q(), c = (a) => ({ key: a });
+    return (a, n) => (u(), _(L, j({ class: "b-toggle-button" }, a.$attrs, {
+      "aria-expanded": `${e.toggled}`,
+      "aria-pressed": `${e.toggled}`,
+      condensed: e.condensed,
+      class: p.value,
+      disabled: e.disabled,
+      inverse: e.inverse,
+      variant: f.value,
+      onClickCapture: q(l, ["stop"])
+    }), Y({ _: 2 }, [
+      x(v(d), (r, t) => ({
+        name: t,
+        fn: g(() => [
+          W(a.$slots, t, Be($e(c(t))), void 0, !0)
+        ])
+      }))
+    ]), 1040, ["aria-expanded", "aria-pressed", "condensed", "class", "disabled", "inverse", "variant"]));
+  }
+}), tt = /* @__PURE__ */ w(et, [["__scopeId", "data-v-f1b10e5f"]]), nt = P({
+  name: "bento-popover-dismiss-button",
+  components: { BentoButton: L, CrossIcon: Re },
+  props: {
+    onImage: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(e) {
+    return {
+      // Values
+      conditionalClass: C(() => ({ "b-popover-dismiss-button--on-image": e.onImage }))
+    };
+  }
+});
+function ot(e, s, i, o, f, p) {
+  const l = O("cross-icon"), d = O("bento-button");
+  return u(), _(d, {
+    class: V(e.conditionalClass),
+    variant: "tertiary",
+    onClick: s[0] || (s[0] = (c) => e.$emit("click"))
+  }, {
+    iconLeft: g(() => [
+      T(l, { "svg-title": "dismiss" })
+    ]),
+    _: 1
+  }, 8, ["class"]);
+}
+const de = /* @__PURE__ */ w(nt, [["render", ot], ["__scopeId", "data-v-424ecdaa"]]), st = P({
+  components: { BentoTypography: Ce },
+  props: {
+    /**
+     * Indicates if the popover contains an image.
+     */
+    isImageTitle: { type: Boolean, default: !1 },
+    /**
+     * Indicates the title you want to give the popover.
+     */
+    title: { type: String, default: null }
+  },
+  setup(e) {
+    const s = C(() => !e.isImageTitle), i = C(
+      () => e.isImageTitle ? re.SUBTITLE : re.BODY
+    );
+    return {
+      // Values
+      isStrongest: s,
+      titleVariant: i
+    };
+  }
+});
+function at(e, s, i, o, f, p) {
+  const l = O("bento-typography");
+  return u(), _(l, {
+    strongest: e.isStrongest,
+    variant: e.titleVariant,
+    el: "span"
+  }, {
+    default: g(() => [
+      H(K(e.title), 1)
+    ]),
+    _: 1
+  }, 8, ["strongest", "variant"]);
+}
+const it = /* @__PURE__ */ w(st, [["render", at]]), lt = (e, s, i = {}) => {
+  let o;
+  ee(() => {
+    o = Ue(e, s, i);
+  }), me(() => {
+    o && (o(), o = null);
+  });
+}, rt = /* @__PURE__ */ Symbol("input field popover injection key"), ut = /* @__PURE__ */ Symbol("input field popover injection key"), ct = /* @__PURE__ */ Symbol("popover offset injection key"), dt = {
+  key: 0,
+  class: "b-popover__image"
+}, ft = {
+  key: 0,
+  class: "b-popover__image-dismiss-button"
+}, pt = {
+  key: 1,
+  class: "b-popover__header"
+}, mt = { class: "b-popover__header-title" }, vt = { key: 0 }, bt = {
+  key: 3,
+  class: "b-popover__footer"
+}, yt = {}, gt = /* @__PURE__ */ P({
+  ...yt,
+  __name: "popover",
+  props: {
+    actions: { default: void 0 },
+    actionsLayout: { default: "buttons-end" },
+    ariaLabel: { default: void 0 },
+    divider: { type: Boolean, default: !1 },
+    disableFocusTrap: { type: Boolean, default: !1 },
+    dismissible: { type: Boolean, default: !1 },
+    fallbackPosition: { default: () => ["bottom-start", "right-start", "top-start", "left-start"] },
+    fitContent: { type: Boolean, default: !1 },
+    fixedPositioning: { type: Boolean, default: !1 },
+    open: { type: Boolean, default: !1 },
+    large: { type: Boolean, default: !1 },
+    modifiers: { default: void 0 },
+    position: { default: "bottom-start" },
+    small: { type: Boolean, default: !1 },
+    title: { default: void 0 },
+    targetElement: {},
+    trapAll: { type: Boolean, default: !1 },
+    trapAllOptions: { default: void 0 },
+    withoutSpace: { type: Boolean, default: !1 },
+    overflowVisible: { type: Boolean, default: !1 }
+  },
+  emits: ["dismiss", "placement"],
+  setup(e, { emit: s }) {
+    const o = e, f = s, p = Q(), l = Se(), d = C(() => {
+      var y;
+      return {
+        id: (y = l.id) == null ? void 0 : y.toString(),
+        role: (l == null ? void 0 : l.role) === null ? void 0 : Ae.POPOVER
+      };
+    }), c = G(ct, 2), a = m(l["aria-label"]), { ariaLabel: n, title: r } = Te(o), t = We({
+      ariaLabel: a.value,
+      // TODO: take this line away when the aria-label props is removed
+      label: n,
+      defaultFallback: r
+    }), b = G(ut, !1) || G(rt, !1), h = C(() => ({
+      "b-popover--small": o.small && !o.large,
+      "b-popover--with-divider": !!o.divider,
+      "b-popover--large": o.large && !o.small,
+      "b-popover--fit-content": o.fitContent,
+      "b-popover--without-space": o.withoutSpace,
+      "b-popover--overflow-visible": o.overflowVisible || b
+    })), S = C(() => ({
+      "b-popover__content--with-title": !!o.title
+    })), N = () => f("dismiss"), A = ie(p);
+    return (y, D) => (u(), _(ve, { name: "b-popover__animation" }, {
+      default: g(() => [
+        y.open ? (u(), _(v(De), {
+          key: 0,
+          id: d.value.id,
+          "aria-role": d.value.role,
+          "aria-label": v(t),
+          arrow: { classes: ["b-popover__arrow"] },
+          "disabled-focus-trap": y.disableFocusTrap,
+          "trap-all": y.trapAll,
+          "trap-all-options": y.trapAllOptions,
+          class: V([h.value, "b-popover"]),
+          "fallback-position": y.fallbackPosition,
+          "fixed-positioning": y.fixedPositioning,
+          offset: [0, v(c)],
+          position: y.position,
+          "target-element": y.targetElement,
+          onPlacement: D[0] || (D[0] = (J) => y.$emit("placement", J))
+        }, {
+          default: g(() => [
+            v(A)("image") ? (u(), I("div", dt, [
+              y.dismissible ? (u(), I("div", ft, [
+                T(de, {
+                  "on-image": "",
+                  onClick: N
+                })
+              ])) : $("", !0),
+              W(y.$slots, "image", {}, void 0, !0)
+            ])) : $("", !0),
+            v(r) ? (u(), I("div", pt, [
+              U("div", mt, [
+                v(A)("headerIcon") ? W(y.$slots, "headerIcon", { key: 0 }, void 0, !0) : $("", !0),
+                T(it, {
+                  title: v(r),
+                  "is-image-title": !!v(A)("image")
+                }, null, 8, ["title", "is-image-title"])
+              ]),
+              y.dismissible && !v(A)("image") ? (u(), I("div", vt, [
+                T(de, { onClick: N })
+              ])) : $("", !0)
+            ])) : $("", !0),
+            v(A)("default") ? (u(), I("div", {
+              key: 2,
+              class: V(["b-popover__content", S.value])
+            }, [
+              W(y.$slots, "default", {}, void 0, !0)
+            ], 2)) : $("", !0),
+            y.actions ? (u(), I("div", bt, [
+              T(jt, {
+                actions: y.actions,
+                layout: y.actionsLayout
+              }, null, 8, ["actions", "layout"])
+            ])) : $("", !0)
+          ]),
+          _: 3
+        }, 8, ["id", "aria-role", "aria-label", "disabled-focus-trap", "trap-all", "trap-all-options", "class", "fallback-position", "fixed-positioning", "offset", "position", "target-element"])) : $("", !0)
+      ]),
+      _: 3
+    }));
+  }
+}), _t = /* @__PURE__ */ w(gt, [["__scopeId", "data-v-84ebb43a"]]);
+let fe = 0;
+const Ct = {
+  beforeCreate() {
+    this.uuid = fe.toString(), fe += 1;
+  }
+}, ht = { key: 0 };
+function kt(e, s, i, o, f, p) {
+  return u(), I("svg", j({ 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"] ? (u(), I("title", ht, K(e.$attrs["svg-title"]), 1)) : $("", !0),
+    s[0] || (s[0] = U("path", {
+      fill: "#001222",
+      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)),
+    s[1] || (s[1] = U("path", {
+      fill: "#001222",
+      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)),
+    s[2] || (s[2] = U("path", {
+      fill: "#001222",
+      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))
+  ], 16);
+}
+const It = /* @__PURE__ */ w(Ct, [["render", kt]]), Bt = P({
+  name: "menu-item",
+  components: { BaseButton: Ge, BentoTypography: Ce, ChevronRightIcon: He },
+  props: {
+    /**
+     * menu-item text that gets displayed as the main label
+     */
+    text: {
+      type: String,
+      required: !0
+    },
+    /**
+     * menu-item action that gets executed when the MeniItem is clicked
+     */
+    handler: {
+      type: Function,
+      required: !0
+    },
+    /**
+     * menu-item text that gets displayed as the secondary label
+     */
+    secondaryText: {
+      type: String,
+      default: null
+    },
+    /**
+     * Optional chevron icon displayed to the right of the menu-item
+     */
+    chevron: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Optional icon displayed to the left of the menu-item
+     */
+    icon: {
+      // Types for Vue2 (Object) and Vue3 (Function)
+      // TODO: Remove Object when fully migrated to Vue3
+      type: [Object, Function],
+      default: null
+    },
+    /**
+     * Disables menu-item button functionality
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Displays an indent variant od the menu-item
+     */
+    indent: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Displays menu-item button as critical
+     */
+    critical: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Renders the text in a bold variant
+     */
+    isTitle: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [ce.CLICK],
+  setup(e, { emit: s }) {
+    const o = C(() => ({
+      "b-menu-item--critical": e.critical,
+      "b-menu-item--indent": e.indent
+    })), f = C(() => Ye(e.secondaryText, 10));
+    return {
+      // Values
+      conditionalClasses: o,
+      computedSecondaryText: f,
+      // Methods
+      onClick: (l) => {
+        l.stopPropagation(), e.handler(), s(ce.CLICK);
+      }
+    };
+  }
+});
+function $t(e, s, i, o, f, p) {
+  const l = O("bento-typography"), d = O("chevron-right-icon"), c = O("base-button");
+  return u(), _(c, {
+    class: V(["b-menu-item", e.conditionalClasses]),
+    role: "menuitem",
+    disabled: e.disabled,
+    tabindex: "-1",
+    onClick: e.onClick
+  }, Y({
+    default: g(() => [
+      T(l, {
+        el: "span",
+        variant: "body",
+        stronger: e.isTitle,
+        class: "b-menu-item__primary-text"
+      }, {
+        default: g(() => [
+          H(K(e.text), 1)
+        ]),
+        _: 1
+      }, 8, ["stronger"]),
+      e.computedSecondaryText ? (u(), _(l, {
+        key: 0,
+        el: "span",
+        variant: "body",
+        class: "b-menu-item__secondary-text"
+      }, {
+        default: g(() => [
+          H(K(e.computedSecondaryText), 1)
+        ]),
+        _: 1
+      })) : $("", !0)
+    ]),
+    _: 2
+  }, [
+    e.icon ? {
+      name: "iconLeft",
+      fn: g(() => [
+        (u(), _(z(e.icon), {
+          class: "b-menu-item__icon-left",
+          "aria-hidden": "true"
+        }))
+      ]),
+      key: "0"
+    } : void 0,
+    e.chevron ? {
+      name: "iconRight",
+      fn: g(() => [
+        T(d, { "aria-hidden": "true" })
+      ]),
+      key: "1"
+    } : void 0
+  ]), 1032, ["class", "disabled", "onClick"]);
+}
+const ke = /* @__PURE__ */ w(Bt, [["render", $t], ["__scopeId", "data-v-9dace5ac"]]);
+({ ...Fe });
+var F = /* @__PURE__ */ ((e) => (e.BACK = "back", e.CLOSE = "close", e.OPEN = "open", e))(F || {});
+const St = /* @__PURE__ */ Symbol("menu registering injection key"), Tt = {
+  name: "bento-menu-list-container"
+}, Et = /* @__PURE__ */ P({
+  ...Tt,
+  setup(e) {
+    const s = m(), i = m({}), o = G(St, !1);
+    if (o) {
+      const { registerMenuContainerElement: f } = o;
+      f(s), i.value = {
+        mouseleave: o == null ? void 0 : o.menuMouseLeave
+      };
+    }
+    return (f, p) => (u(), I("div", j({
+      ref_key: "menuListContainerRef",
+      ref: s,
+      class: "b-menu-list-container",
+      "data-testid": "menu-list-container"
+    }, ae(i.value, !0)), [
+      W(f.$slots, "default", {}, void 0, !0)
+    ], 16));
+  }
+}), Ie = /* @__PURE__ */ w(Et, [["__scopeId", "data-v-9ef14d73"]]), le = {
+  "en-US": {
+    backButton: "Go back",
+    menuButton: "Open menu"
+  }
+}, Lt = P({
+  i18n: { messages: le },
+  name: "sub-menu-item-list",
+  components: { BentoDivider: _e, MenuItem: ke, MenuListContainer: Ie },
+  props: {
+    items: {
+      type: Array,
+      required: !0
+    },
+    title: {
+      type: String,
+      required: !0
+    }
+  },
+  emits: [F.CLOSE, F.BACK],
+  setup(e, { emit: s }) {
+    const i = m(null), o = m(0), f = m(e.items.length), p = () => s(F.CLOSE), l = () => s(F.BACK), d = C(() => {
+      var t;
+      const r = (t = e.items) == null ? void 0 : t.map((b) => ({
+        ...b,
+        indent: !b.icon,
+        isTitle: !1,
+        clickHandler: p
+      }));
+      return [
+        {
+          text: e.title,
+          secondaryText: null,
+          critical: !1,
+          icon: ue,
+          isTitle: !0,
+          disabled: !1,
+          indent: !1,
+          handler: l,
+          clickHandler: l,
+          addDivider: !0
+        },
+        ...r
+      ];
+    }), c = async () => {
+      var r, t, b, h, S;
+      (S = (h = (b = (t = (r = i.value) == null ? void 0 : r.children) == null ? void 0 : t[o.value]) == null ? void 0 : b.children) == null ? void 0 : h[0]) == null || S.focus();
+    };
+    ee(async () => {
+      setTimeout(() => c(), 150);
+    });
+    const a = () => {
+      o.value > 0 ? (o.value -= 1, d.value[o.value].disabled && a()) : o.value = f.value, c();
+    }, n = () => {
+      o.value < f.value ? (o.value += 1, d.value[o.value].disabled && n()) : o.value = 0, c();
+    };
+    return {
+      // Enums
+      BentoMenuEvent: F,
+      // Values
+      subMenuItemListRefLocal: i,
+      subMenuFocusedIndex: o,
+      ChevronLeftIcon: ue,
+      computedItems: d,
+      // Methods
+      closeMenu: p,
+      onBackButton: l,
+      focusPrevious: a,
+      focusNext: n
+    };
+  }
+});
+function Ot(e, s, i, o, f, p) {
+  const l = O("menu-item"), d = O("bento-divider"), c = O("menu-list-container");
+  return u(), _(ve, {
+    name: "b-sub-menu-item-list__transition",
+    appear: ""
+  }, {
+    default: g(() => [
+      T(c, { class: "b-sub-menu-item-list" }, {
+        default: g(() => [
+          U("ul", {
+            ref: "subMenuItemListRefLocal",
+            role: "menu",
+            class: "b-sub-menu-item-list__list",
+            onKeydown: [
+              s[0] || (s[0] = M(q((...a) => e.focusNext && e.focusNext(...a), ["stop"]), ["down"])),
+              s[1] || (s[1] = M(q((...a) => e.focusPrevious && e.focusPrevious(...a), ["stop"]), ["up"])),
+              s[2] || (s[2] = M(q((...a) => e.onBackButton && e.onBackButton(...a), ["stop"]), ["esc"]))
+            ]
+          }, [
+            (u(!0), I(Z, null, x(e.computedItems, (a, n) => (u(), I("li", {
+              key: `sub-menu-item-list-item-${n}`,
+              role: "none"
+            }, [
+              T(l, {
+                text: a.text,
+                handler: a.handler,
+                "secondary-text": a.secondaryText,
+                icon: a.icon,
+                "is-title": a.isTitle,
+                disabled: a.disabled,
+                critical: a.critical,
+                indent: a.indent,
+                tabindex: n === e.subMenuFocusedIndex ? "0" : "-1",
+                onClick: a.clickHandler
+              }, null, 8, ["text", "handler", "secondary-text", "icon", "is-title", "disabled", "critical", "indent", "tabindex", "onClick"]),
+              a.addDivider ? (u(), _(d, {
+                key: 0,
+                class: "b-sub-menu-item-list__divider"
+              })) : $("", !0)
+            ]))), 128))
+          ], 544)
+        ]),
+        _: 1
+      })
+    ]),
+    _: 1
+  });
+}
+const Mt = /* @__PURE__ */ w(Lt, [["render", Ot], ["__scopeId", "data-v-e1de172e"]]);
+function wt(e, s, i) {
+  const p = m(0), l = m(0), d = (a) => {
+    if (!a || !a.parentElement)
+      return;
+    const n = a.parentElement, r = a.cloneNode(!0);
+    r.style.position = "absolute", r.style.visibility = "hidden", n.appendChild(r), r.style.width = "max-content";
+    const t = r.offsetWidth, b = Math.max(150, Math.min(t, 350));
+    p.value = b, r.style.width = `${b}px`;
+    const h = r.offsetHeight;
+    l.value = h, n.removeChild(r), l.value = h;
+  };
+  return be([s, i], async ([a]) => {
+    var n, r;
+    if (a !== null) {
+      await te();
+      const t = (r = (n = e.value) == null ? void 0 : n[0]) == null ? void 0 : r.$el;
+      t && d(t);
+    } else
+      p.value = 0, l.value = 0;
+  }), { computedStyle: C(() => {
+    const a = { width: "max-content" };
+    return i.value && (l.value > 0 && (a.height = `${l.value}px`), p.value > 0 && (a.width = `${p.value}px`)), a;
+  }) };
+}
+const Nt = P({
+  name: "menu-item-list",
+  components: { BentoDivider: _e, MenuItem: ke, MenuListContainer: Ie, SubMenuItemList: Mt },
+  props: {
+    /**
+     * The data to be displayed in the list
+     */
+    data: {
+      type: Array,
+      required: !0
+    },
+    /**
+     * Displays the menu-items of the list in the indent variant. Only applies to elements that don't have an icon to their left.
+     */
+    indentItems: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * If set to true, focuses the last item on the list instead of the first. Used for accessibility purposes when the menu is opened with the 'up' arrow key.
+     */
+    focusLastElement: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * If set to true, closes the menu when an item is clicked.
+     */
+    closeMenuOnItemSelect: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  emits: [F.CLOSE, "menu-item-click"],
+  setup(e, { emit: s, expose: i }) {
+    const o = m(null), f = m(null), p = m(null), l = m(null), d = m(!1), c = m(null), a = m(e.focusLastElement ? e.data.length - 1 : 0), n = m(0), r = m(e.data.length - 1), t = C(() => e.data.some((B) => B.icon)), b = C(() => e.indentItems || t.value ? e.data.map((B) => {
+      let E = !1;
+      return B.icon || (E = !0), {
+        ...B,
+        indent: E
+      };
+    }) : e.data), h = async () => {
+      var B, E, k;
+      await te(), (k = (E = (B = f.value) == null ? void 0 : B.children[a.value]) == null ? void 0 : E.children[0]) == null || k.focus();
+    }, S = () => s(F.CLOSE), N = (B, E) => {
+      if (B.items) {
+        c.value = E, d.value = !0;
+        return;
+      }
+      c.value = E, d.value = !1, !B.skipClose && e.closeMenuOnItemSelect !== !1 && S(), s("menu-item-click");
+    }, A = () => {
+      a.value > 0 ? (a.value -= 1, b.value[a.value].disabled && A()) : a.value = r.value, h();
+    }, y = () => {
+      a.value < r.value ? (a.value += 1, b.value[a.value].disabled && y()) : a.value = 0, h();
+    }, D = (B, E) => {
+      var k;
+      (k = B == null ? void 0 : B.items) != null && k.length && (c.value = E, d.value = !0);
+    }, J = () => {
+      c.value && d.value && (c.value = null, d.value = !1);
+    }, ne = () => {
+      d.value = !1, c.value = null, h();
+    };
+    i({
+      focusItem: h
+    });
+    const { computedStyle: oe } = wt(l, c, d);
+    return {
+      // Values
+      menuItemListRef: f,
+      menuItemListWrapperRef: p,
+      subMenuItemListRef: l,
+      menuItemRef: o,
+      computedData: b,
+      computedStyle: oe,
+      focusedIndex: a,
+      subMenuFocusedIndex: n,
+      showSubMenu: d,
+      visibleSubMenuIndex: c,
+      // Methods
+      menuItemClick: N,
+      closeMenu: S,
+      focusPrevious: A,
+      focusNext: y,
+      focusRight: D,
+      focusLeft: J,
+      onBackButton: ne
+    };
+  }
+}), Rt = ["onKeydown"];
+function Pt(e, s, i, o, f, p) {
+  const l = O("menu-item"), d = O("bento-divider"), c = O("sub-menu-item-list"), a = O("menu-list-container");
+  return u(), _(a, {
+    ref: "menuItemListWrapperRef",
+    style: ye(e.computedStyle)
+  }, {
+    default: g(() => [
+      U("ul", {
+        ref: "menuItemListRef",
+        class: "b-menu-item-list",
+        role: "menu",
+        onKeydown: [
+          s[1] || (s[1] = M((...n) => e.focusNext && e.focusNext(...n), ["down"])),
+          s[2] || (s[2] = M((...n) => e.focusPrevious && e.focusPrevious(...n), ["up"])),
+          s[3] || (s[3] = M((...n) => e.closeMenu && e.closeMenu(...n), ["esc"])),
+          s[4] || (s[4] = M((...n) => e.closeMenu && e.closeMenu(...n), ["tab"]))
+        ]
+      }, [
+        (u(!0), I(Z, null, x(e.computedData, (n, r) => {
+          var t, b, h, S;
+          return u(), I("li", {
+            key: `menu-item-${r}`,
+            ref_for: !0,
+            ref: "menuItemRef",
+            class: "b-menu-item-list__item",
+            role: "none",
+            onKeydown: [
+              M((N) => e.focusRight(n, r), ["right"]),
+              s[0] || (s[0] = M((N) => e.focusLeft(), ["left"]))
+            ]
+          }, [
+            T(l, {
+              text: n.text,
+              handler: (t = n.items) != null && t.length ? () => null : n.handler,
+              "secondary-text": n.secondaryText,
+              icon: n.icon,
+              chevron: !!((b = n.items) != null && b.length),
+              disabled: n.disabled,
+              critical: n.critical,
+              indent: n.indent,
+              tabindex: r === e.subMenuFocusedIndex ? "0" : "-1",
+              "aria-haspopup": !!((h = n.items) != null && h.length),
+              "aria-expanded": e.showSubMenu && e.visibleSubMenuIndex === r,
+              onClick: (N) => e.menuItemClick(n, r)
+            }, null, 8, ["text", "handler", "secondary-text", "icon", "chevron", "disabled", "critical", "indent", "tabindex", "aria-haspopup", "aria-expanded", "onClick"]),
+            n.addDivider ? (u(), _(d, {
+              key: 0,
+              class: "b-menu-item-list__divider"
+            })) : $("", !0),
+            (S = n.items) != null && S.length && e.showSubMenu && e.visibleSubMenuIndex === r ? (u(), _(c, {
+              key: 1,
+              ref_for: !0,
+              ref: "subMenuItemListRef",
+              items: n.items,
+              title: n.text,
+              onBack: e.onBackButton,
+              onClose: e.closeMenu
+            }, null, 8, ["items", "title", "onBack", "onClose"])) : $("", !0)
+          ], 40, Rt);
+        }), 128))
+      ], 544)
+    ]),
+    _: 1
+  }, 8, ["style"]);
+}
+const At = /* @__PURE__ */ w(Nt, [["render", Pt], ["__scopeId", "data-v-968b28cb"]]), Dt = /* @__PURE__ */ Symbol("menu inverse style injection key"), Ft = {
+  i18n: { messages: le },
+  name: "bento-menu"
+}, Wt = /* @__PURE__ */ P({
+  ...Ft,
+  props: {
+    button: { default: () => ({
+      variant: "secondary"
+    }) },
+    closeMenuOnItemSelect: { type: Boolean, default: !0 },
+    data: {},
+    disableArrowDownOpeningMenu: { type: Boolean, default: !1 },
+    menuPosition: { default: "bottom-start" },
+    menuFixedPositioning: { type: Boolean, default: !1 },
+    menuWidth: { default: null },
+    revertFocusToButton: { type: Boolean, default: !0 },
+    teleport: { type: Boolean, default: !1 },
+    closeOnClickOutsideOptions: { default: void 0 }
+  },
+  emits: ["menu-item-click", "click-outside"],
+  setup(e, { expose: s, emit: i }) {
+    var E;
+    const o = e, f = i, p = Q(), l = ie(p), { t: d } = ge({ messages: le }), c = m(null), a = m(null), n = m(!1), r = m(!1), t = m(null), b = Ke("menu"), h = G(Dt, m(!1));
+    Ee(Ne, h);
+    const S = C(() => ({
+      "b-menu--inverse": h.value
+    })), N = C(() => o.menuWidth ? { width: `${o.menuWidth}px` } : null), A = C(() => {
+      if (o != null && o.button)
+        return {
+          variant: "secondary",
+          ...o.button
+        };
+    }), y = () => {
+      n.value = !0, f(F.OPEN);
+    }, D = async (k = o.revertFocusToButton) => {
+      var X, se;
+      n.value && (n.value = !1, k && (await te(), (se = (X = c.value) == null ? void 0 : X.$el) == null || se.focus()), f(F.CLOSE));
+    }, J = (k) => {
+      k.stopPropagation(), n.value ? D() : y();
+    }, ne = (k) => {
+      k.preventDefault(), r.value = !1, o.disableArrowDownOpeningMenu || y();
+    }, oe = (k) => {
+      k.preventDefault(), r.value = !0, y();
+    }, B = () => {
+      f("menu-item-click");
+    };
+    return lt(
+      t,
+      () => {
+        D(), f("click-outside");
+      },
+      {
+        ...o.closeOnClickOutsideOptions,
+        ignore: [c, ...((E = o.closeOnClickOutsideOptions) == null ? void 0 : E.ignore) ?? []]
+      }
+    ), s({
+      /**
+       * Control to enable programmatic closing of the menu
+       */
+      closeMenu: D
+    }), ee(() => {
+      l("iconRight") && Pe(
+        '"bento-menu" no longer supports the "iconRight" slot. The right-aligned icon is now fixed by design.'
+      );
+    }), (k, X) => (u(), I("div", {
+      class: V([S.value, "b-menu"]),
+      "data-testid": "menu",
+      onKeydown: [
+        M(ne, ["down"]),
+        M(oe, ["up"]),
+        X[0] || (X[0] = M((se) => D(), ["esc"]))
+      ]
+    }, [
+      T(tt, j({
+        ref_key: "menuButtonRef",
+        ref: c,
+        class: "b-menu__toggle-button",
+        "aria-haspopup": "true"
+      }, A.value, {
+        "aria-controls": n.value ? v(b) : null,
+        toggled: n.value,
+        inverse: v(h),
+        onClick: J
+      }), Y({ _: 2 }, [
+        !v(l)("default") || v(l)("iconLeft") ? {
+          name: "iconLeft",
+          fn: g(() => [
+            W(k.$slots, "iconLeft", {}, () => [
+              T(v(It), {
+                title: v(d)("menuButton")
+              }, null, 8, ["title"])
+            ], !0)
+          ]),
+          key: "0"
+        } : void 0,
+        v(l)("default") ? {
+          name: "default",
+          fn: g(() => [
+            W(k.$slots, "default", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        v(l)("default") ? {
+          name: "iconRight",
+          fn: g(() => [
+            T(v(Ve))
+          ]),
+          key: "2"
+        } : void 0
+      ]), 1040, ["aria-controls", "toggled", "inverse"]),
+      c.value ? (u(), _(v(je), {
+        key: 0,
+        disabled: !k.teleport
+      }, {
+        default: g(() => [
+          c.value ? (u(), _(_t, {
+            key: 0,
+            id: v(b),
+            ref_key: "popoverRef",
+            ref: t,
+            role: null,
+            open: n.value,
+            class: "b-menu__popover",
+            style: ye(N.value),
+            "target-element": c.value,
+            position: k.menuPosition,
+            "fixed-positioning": k.menuFixedPositioning,
+            "fallback-position": [
+              "bottom-start",
+              "bottom-end",
+              "top-start",
+              "top-end",
+              "right-start",
+              "right-end",
+              "left-start",
+              "left-end"
+            ],
+            teleport: k.teleport,
+            "without-space": ""
+          }, {
+            default: g(() => [
+              T(At, {
+                ref_key: "menuItemListRef",
+                ref: a,
+                "close-menu-on-item-select": k.closeMenuOnItemSelect,
+                data: k.data,
+                "focus-last-element": r.value,
+                onClose: D,
+                onMenuItemClick: B
+              }, null, 8, ["close-menu-on-item-select", "data", "focus-last-element"])
+            ]),
+            _: 1
+          }, 8, ["id", "open", "style", "target-element", "position", "fixed-positioning", "teleport"])) : $("", !0)
+        ]),
+        _: 1
+      }, 8, ["disabled"])) : $("", !0)
+    ], 34));
+  }
+}), Ut = /* @__PURE__ */ w(Wt, [["__scopeId", "data-v-4d921a39"]]), Kt = /* @__PURE__ */ Symbol(
+  "button actions with menu container injection key"
+), Vt = 242, pe = parseInt(Xe, 10), Ht = (e, s, i) => {
+  const o = m(0);
+  let f = null;
+  const { buttonActionsWithMenu: p, menu: l, stackButtons: d } = G(Kt, {
+    buttonActionsWithMenu: m(null),
+    menu: m(null),
+    stackButtons: m(!1)
+  }), c = C(() => p.value ?? e.value), a = C(() => l.value ? [...s.value, l.value.$el] : s.value), n = (r) => {
+    var h;
+    const t = (h = a.value) == null ? void 0 : h.reduce(
+      (S, N) => S + N.clientWidth + pe,
+      -pe - 1
+    ), b = c.value.clientWidth;
+    return r && (o.value = b >= Vt && !d.value ? t : 0), o.value > b;
+  };
+  return be(
+    () => i.value,
+    () => {
+      te(() => {
+        d.value = n(!0);
+      });
+    },
+    { deep: !0 }
+  ), ee(() => {
+    f = Je(c.value, () => {
+      d.value = n(o.value === 0);
+    });
+  }), me(() => {
+    f == null || f.disconnect();
+  }), d;
+}, Gt = {}, Yt = /* @__PURE__ */ P({
+  ...Gt,
+  __name: "button-actions",
+  props: {
+    actions: {},
+    inverse: { type: Boolean, default: !1 },
+    layout: { default: "buttons-end" }
+  },
+  setup(e) {
+    const s = e, i = m(null), o = m(null), f = Ht(i, o, Le(s, "actions")), p = C(() => s.actions.slice().reverse()), l = (n) => {
+      const r = s.actions.length - 1;
+      return n === r ? "primary" : "secondary";
+    }, d = C(() => ({
+      [`b-button-actions--${s.layout}`]: !0,
+      "b-button-actions--stacked-buttons": f.value
+    })), c = (n) => (n == null ? void 0 : n.event) !== void 0 ? {
+      click: n.event
+    } : {}, a = (n) => n.iconOnly && (n.iconLeft || n.iconRight || n.icon);
+    return (n, r) => (u(), I("div", {
+      ref_key: "buttonActions",
+      ref: i,
+      class: "b-button-actions"
+    }, [
+      U("div", {
+        class: V(["b-button-actions__container-wrapper", d.value]),
+        role: "group"
+      }, [
+        (u(!0), I(Z, null, x(p.value, (t, b) => (u(), I("div", {
+          key: b,
+          ref_for: !0,
+          ref_key: "buttons",
+          ref: o,
+          class: "b-button-actions__button-wrapper"
+        }, [
+          t.data ? (u(), _(Ut, {
+            key: 0,
+            ref_for: !0,
+            ref: t.elementRef,
+            data: t.data,
+            "close-menu-on-item-select": t.closeMenuOnItemSelect,
+            "close-on-click-outside-options": t.closeOnClickOutsideOptions,
+            "disable-arrow-down-opening-menu": t.disableArrowDownOpeningMenu,
+            "menu-position": t.menuPosition,
+            "menu-fixed-positioning": t.menuFixedPositioning,
+            "menu-width": t.menuWidth,
+            "revert-focus-to-button": t.revertFocusToButton,
+            teleport: t.teleport
+          }, Y({ _: 2 }, [
+            t.icon || t.iconLeft ? {
+              name: "iconLeft",
+              fn: g(() => [
+                (u(), _(z(t.icon || t.iconLeft), {
+                  "svg-title": t.title
+                }, null, 8, ["svg-title"]))
+              ]),
+              key: "0"
+            } : void 0,
+            a(t) ? void 0 : {
+              name: "default",
+              fn: g(() => [
+                H(K(t.title), 1)
+              ]),
+              key: "1"
+            }
+          ]), 1032, ["data", "close-menu-on-item-select", "close-on-click-outside-options", "disable-arrow-down-opening-menu", "menu-position", "menu-fixed-positioning", "menu-width", "revert-focus-to-button", "teleport"])) : (u(), I(Z, { key: 1 }, [
+            t.state ? (u(), _(Qe, j({
+              key: 0,
+              ref_for: !0,
+              ref: t.elementRef,
+              condensed: t.condensed,
+              critical: t.critical,
+              disabled: t.disabled,
+              inverse: n.inverse,
+              state: t.state,
+              variant: t.variant || l(b)
+            }, ae(c(t))), {
+              default: g(() => [
+                H(K(t.title), 1)
+              ]),
+              _: 2
+            }, 1040, ["condensed", "critical", "disabled", "inverse", "state", "variant"])) : (u(), _(L, j({
+              key: 1,
+              ref_for: !0,
+              ref: t.elementRef,
+              condensed: t.condensed,
+              critical: t.critical,
+              disabled: t.disabled,
+              inverse: n.inverse,
+              link: t.link,
+              variant: t.variant || l(b)
+            }, ae(c(t))), Y({ _: 2 }, [
+              t.icon || t.iconLeft ? {
+                name: "iconLeft",
+                fn: g(() => [
+                  (u(), _(z(t.icon || t.iconLeft), {
+                    "svg-title": t.title
+                  }, null, 8, ["svg-title"]))
+                ]),
+                key: "0"
+              } : void 0,
+              a(t) ? void 0 : {
+                name: "default",
+                fn: g(() => [
+                  H(K(t.title), 1)
+                ]),
+                key: "1"
+              },
+              t.iconRight ? {
+                name: "iconRight",
+                fn: g(() => [
+                  (u(), _(z(t.iconRight), {
+                    "svg-title": t.title
+                  }, null, 8, ["svg-title"]))
+                ]),
+                key: "2"
+              } : void 0
+            ]), 1040, ["condensed", "critical", "disabled", "inverse", "link", "variant"]))
+          ], 64))
+        ]))), 128))
+      ], 2)
+    ], 512));
+  }
+}), jt = /* @__PURE__ */ w(Yt, [["__scopeId", "data-v-6c3554de"]]);
+export {
+  jt as B,
+  St as D,
+  rt as I,
+  Dt as M,
+  It as O,
+  ct as P,
+  Qe as a,
+  R as b,
+  tt as c,
+  Kt as d,
+  Ut as e,
+  F as f,
+  _t as g,
+  ut as h,
+  lt as u
+};
+//# sourceMappingURL=button-actions.Bg38lywL.js.map