@adyen/bento-vue2 1.0.0 → 1.1.0

package/dist/modal.js

@@ -1,33 +1,33 @@
-import { defineComponent as A, ref as $, toRefs as S, computed as c, watch as W, onMounted as T } from "vue";
-import { B as K, a as h } from "./chunks/button.98f2271d.js";
-import { B as N, c as x, a as R } from "./chunks/index.3aedb3dd.js";
-import { BentoDivider as Y } from "./divider.js";
-import { B as j } from "./chunks/index.1b1be94c.js";
-import { h as r } from "./chunks/hasSlot.dceac207.js";
-import { u as Q } from "./chunks/aria-label.ac9651a5.js";
-import { u as I } from "./chunks/i18n.36074534.js";
+import { defineComponent as h, ref as q, toRefs as E, computed as u, watch as U, onMounted as O } from "vue";
+import { B as W, a as C } from "./chunks/button.f64585fc.js";
+import { B as w, a as k, b as x } from "./chunks/index.e1fcc9e0.js";
+import { BentoDivider as K } from "./divider.js";
+import { B as Y } from "./chunks/index.96e2f563.js";
+import { u as D } from "./chunks/use-has-slot.068222e6.js";
+import { u as j } from "./chunks/aria-label.ac9651a5.js";
+import { u as N } from "./chunks/i18n.155748d6.js";
 import { g as H } from "./chunks/get-slot-text.e5c766d0.js";
-import { C as J } from "./chunks/cross.a2cadac5.js";
-import { G as X, a as Z } from "./chunks/grid-layout.e9479752.js";
-import { n as E } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { B as G, c as P } from "./chunks/button-actions.c87eaee6.js";
-import "./assets/index20.css";
-var D = /* @__PURE__ */ ((e) => (e.DEFAULT = "BentoModalDefault", e.DIALOG = "BentoModalDialog", e))(D || {}), L = /* @__PURE__ */ ((e) => (e.SMALL = "small", e.MEDIUM = "medium", e.LARGE = "large", e))(L || {}), _ = /* @__PURE__ */ ((e) => (e.SMALLER = "smaller", e.EQUAL = "equal", e.BIGGER = "bigger", e))(_ || {}), B = /* @__PURE__ */ ((e) => (e.DIALOG = "dialog", e.ALERT_DIALOG = "alertdialog", e))(B || {}), p = /* @__PURE__ */ ((e) => (e.CONFIRMATION = "confirmation", e.DESTRUCTIVE = "destructive", e.INFO = "info", e.ACKNOWLEDGEMENT = "acknowledgement", e))(p || {}), m = /* @__PURE__ */ ((e) => (e.CLOSE_MODAL = "close-modal", e))(m || {});
-const w = {
+import { C as Q } from "./chunks/cross.a2cadac5.js";
+import { G as J, a as X } from "./chunks/grid-layout.73f23b1b.js";
+import { n as A } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import { B as R, c as I } from "./chunks/button-actions.03751d96.js";
+import "./assets/index36.css";
+var M = /* @__PURE__ */ ((e) => (e.DEFAULT = "BentoModalDefault", e.DIALOG = "BentoModalDialog", e))(M || {}), B = /* @__PURE__ */ ((e) => (e.SMALL = "small", e.MEDIUM = "medium", e.LARGE = "large", e))(B || {}), y = /* @__PURE__ */ ((e) => (e.SMALLER = "smaller", e.EQUAL = "equal", e.BIGGER = "bigger", e))(y || {}), S = /* @__PURE__ */ ((e) => (e.DIALOG = "dialog", e.ALERT_DIALOG = "alertdialog", e))(S || {}), p = /* @__PURE__ */ ((e) => (e.CONFIRMATION = "confirmation", e.DESTRUCTIVE = "destructive", e.INFO = "info", e.ACKNOWLEDGEMENT = "acknowledgement", e))(p || {}), d = /* @__PURE__ */ ((e) => (e.CLOSE_MODAL = "close-modal", e))(d || {});
+const Z = {
   "en-US": {
     ariaLabelFallback: "modal"
   }
-}, tt = A({
-  i18n: { messages: w },
+}, tt = h({
+  i18n: { messages: Z },
   name: "base-modal",
-  components: { CrossIcon: J, BentoTypography: N, BentoButton: K, BentoDivider: Y, BentoFocusTrap: j, GridLayout: X },
+  components: { CrossIcon: Q, BentoTypography: w, BentoButton: W, BentoDivider: K, BentoFocusTrap: Y, GridLayout: J },
   props: {
     /**
      * Defines whether the modal will be an alert modal
      */
     modalRole: {
       type: String,
-      default: B.DIALOG
+      default: S.DIALOG
     },
     /**
      * If set to true, it allows the modal to be closed by clicking outside of it
@@ -62,7 +62,7 @@ const w = {
      */
     columnsSize: {
       type: String,
-      default: _.SMALLER
+      default: y.SMALLER
     },
     /**
      * Controls the modal's state from the outside. Set it to true to open the modal
@@ -76,7 +76,7 @@ const w = {
      */
     size: {
       type: String,
-      default: L.SMALL
+      default: B.SMALL
     },
     /**
      * Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility.
@@ -90,103 +90,189 @@ const w = {
       default: !1
     }
   },
-  emits: [m.CLOSE_MODAL],
+  emits: [d.CLOSE_MODAL],
   setup(e, { slots: t, emit: o }) {
-    const { t: a } = I({ messages: w }), n = $(null), { isOpen: l, customPadding: s, overflowVisible: u } = S(e), b = c(
-      () => r(t)("default") && t.default() ? H(t)("default") : null
-    ), v = c(() => {
-      if (!s.value)
+    const { t: n } = N(), l = D(t), a = q(null), { isOpen: s, customPadding: i, overflowVisible: f } = E(e), v = u(
+      () => l("default") && t.default() ? H(t)("default") : null
+    ), b = u(() => {
+      if (!i.value)
         return {};
-      const y = {
-        paddingLeft: s.value,
-        paddingRight: s.value
-      }, O = { ...y, paddingTop: void 0, paddingBottom: void 0 };
-      return r(t)("default") || (O.paddingTop = s.value), r(t)("actions") || (O.paddingBottom = s.value), {
-        header: { ...y, paddingTop: s.value },
-        content: O,
-        actions: { ...y, paddingBottom: s.value }
+      const _ = {
+        paddingLeft: i.value,
+        paddingRight: i.value
+      }, T = { ..._, paddingTop: void 0, paddingBottom: void 0 };
+      return l("default") || (T.paddingTop = i.value), l("actions") || (T.paddingBottom = i.value), {
+        header: { ..._, paddingTop: i.value },
+        content: T,
+        actions: { ..._, paddingBottom: i.value }
       };
-    }), g = Q({
-      label: b,
-      defaultFallback: a("ariaLabelFallback")
-    }), d = c(() => e.withColumnLayout && e.size === L.LARGE), i = () => {
-      n.value.showModal();
-    }, f = () => {
-      o(m.CLOSE_MODAL);
-    }, C = () => {
-      n.value.close(), f();
-    }, M = () => {
-      C();
-    }, V = ({ target: y }) => {
-      y && y.tagName === B.DIALOG.toUpperCase() && C();
-    }, F = c(() => ({
+    }), g = j({
+      label: v,
+      defaultFallback: n("ariaLabelFallback")
+    }), c = u(() => e.withColumnLayout && e.size === B.LARGE), r = () => {
+      a.value.showModal();
+    }, m = () => {
+      o(d.CLOSE_MODAL);
+    }, L = () => {
+      a.value.close(), m();
+    }, G = () => {
+      L();
+    }, F = ({ target: _ }) => {
+      _ && _.tagName === S.DIALOG.toUpperCase() && L();
+    }, $ = u(() => ({
       [`b-modal-base__container--${e.size}`]: e.size,
-      ["b-modal-base__container--visible"]: l.value,
-      ["b-modal-base__container--overflow-visible"]: u.value,
-      ["b-modal-base__container--column-layout"]: d.value
-    })), U = c(() => ({
-      "b-modal-base__content--column-layout": d.value,
-      "b-modal-base__content--with-header": r(t)("default"),
-      "b-modal-base__content--with-actions": r(t)("actions")
-    })), q = c(() => e.columnsSize === _.SMALLER ? [{ small: 4, medium: 4, large: 4 }] : e.columnsSize === _.BIGGER ? [{ small: 8, medium: 8, large: 8 }] : [{ small: 6, medium: 6, large: 6 }]);
-    return W(
-      () => [l.value, n.value],
+      ["b-modal-base__container--visible"]: s.value,
+      ["b-modal-base__container--overflow-visible"]: f.value,
+      ["b-modal-base__container--column-layout"]: c.value
+    })), z = u(() => ({
+      "b-modal-base__content--column-layout": c.value,
+      "b-modal-base__content--with-header": l("default"),
+      "b-modal-base__content--with-actions": l("actions")
+    })), V = u(() => e.columnsSize === y.SMALLER ? [{ small: 4, medium: 4, large: 4 }] : e.columnsSize === y.BIGGER ? [{ small: 8, medium: 8, large: 8 }] : [{ small: 6, medium: 6, large: 6 }]);
+    return U(
+      () => [s.value, a.value],
       () => {
-        l.value && n.value ? i() : n.value && C();
+        s.value && a.value ? r() : a.value && L();
       },
       { immediate: !0 }
-    ), T(() => {
-      l.value && n.value && i();
+    ), O(() => {
+      s.value && a.value && r();
     }), {
       // Refs
-      modal: n,
+      modal: a,
       computedAriaLabel: g,
       // Handling the state
-      openModal: i,
-      closeModalOnClickOutside: V,
+      openModal: r,
+      closeModalOnClickOutside: F,
       // Methods
-      onCloseButtonClick: M,
-      hasSlot: r(t),
-      emitCloseEvent: f,
+      onCloseButtonClick: G,
+      hasSlot: l,
+      emitCloseEvent: m,
       // Styles
-      modalConditionalClasses: F,
-      modalContentConditionalClasses: U,
-      customPaddingStyles: v,
-      hasColumnLayout: d,
-      computedColumnWidth: q,
+      modalConditionalClasses: $,
+      modalContentConditionalClasses: z,
+      customPaddingStyles: b,
+      hasColumnLayout: c,
+      computedColumnWidth: V,
       // Enums
-      BentoButtonVariant: h,
-      BentoTypographyElement: x,
-      BentoTypographyVariant: R,
-      GridLayoutContainerType: Z
+      BentoButtonVariant: C,
+      BentoTypographyElement: k,
+      BentoTypographyVariant: x,
+      GridLayoutContainerType: X
     };
   }
 });
 var et = function() {
   var t = this, o = t._self._c;
-  return t._self._setupProxy, o("div", { staticClass: "b-modal-base" }, [o("dialog", { ref: "modal", staticClass: "b-modal-base__container", class: t.modalConditionalClasses, attrs: { role: t.modalRole, "aria-label": t.computedAriaLabel, open: t.initiallyOpen }, on: { click: function(a) {
-    t.isDismissible && t.closeModalOnClickOutside(a);
-  }, keydown: function(a) {
-    return !a.type.indexOf("key") && t._k(a.keyCode, "esc", 27, a.key, ["Esc", "Escape"]) ? null : t.emitCloseEvent.apply(null, arguments);
+  return t._self._setupProxy, o("div", { staticClass: "b-modal-base" }, [o("dialog", { ref: "modal", staticClass: "b-modal-base__container", class: t.modalConditionalClasses, attrs: { role: t.modalRole, "aria-label": t.computedAriaLabel, open: t.initiallyOpen }, on: { click: function(n) {
+    t.isDismissible && t.closeModalOnClickOutside(n);
+  }, keydown: function(n) {
+    return !n.type.indexOf("key") && t._k(n.keyCode, "esc", 27, n.key, ["Esc", "Escape"]) ? null : t.emitCloseEvent.apply(null, arguments);
   } } }, [o("bento-focus-trap", [o("div", { staticClass: "b-modal-base__wrapper" }, [t.hasSlot("default") || !t.hideCloseButton ? o("div", { staticClass: "b-modal-base__header-container", style: t.customPaddingStyles.header }, [o("div", { staticClass: "b-modal-base__header" }, [o("bento-typography", { staticClass: "b-modal-base__title", attrs: { "aria-label": "base modal title", el: t.BentoTypographyElement.SPAN, variant: t.BentoTypographyVariant.TITLE, stronger: "" } }, [t.hasSlot("default") ? t._t("default") : t._e()], 2), t.hideCloseButton ? t._e() : o("bento-button", { staticClass: "b-modal-base__close-button", attrs: { variant: t.BentoButtonVariant.TERTIARY, type: "button" }, on: { click: t.onCloseButtonClick } }, [o("cross-icon", { attrs: { "svg-title": "close" } })], 1)], 1), t.hasColumnLayout ? o("bento-divider", { staticClass: "b-modal-base__divider" }) : t._e()], 1) : t._e(), o("div", { staticClass: "b-modal-base__content", class: t.modalContentConditionalClasses, style: t.customPaddingStyles.content }, [t.hasSlot("content") ? o("bento-typography", { attrs: { "aria-label": "base modal content", el: t.BentoTypographyElement.DIV, variant: t.BentoTypographyVariant.BODY, stronger: "" } }, [t.hasColumnLayout ? o("grid-layout", { staticClass: "b-modal-base__grid", attrs: { "column-width": t.computedColumnWidth, "container-type": t.GridLayoutContainerType.NORMAL }, scopedSlots: t._u([{ key: "col-1", fn: function() {
     return [t._t("content-col-1")];
   }, proxy: !0 }, { key: "col-2", fn: function() {
     return [t._t("content-col-2")];
   }, proxy: !0 }], null, !0) }) : t._t("content")], 2) : t._e()], 1), t.hasSlot("actions") ? o("div", { staticClass: "b-modal-base__actions-container", style: t.customPaddingStyles.actions }, [t.hasColumnLayout ? o("bento-divider", { staticClass: "b-modal-base__divider" }) : t._e(), o("div", { staticClass: "b-modal-base__actions", attrs: { "aria-label": "modal actions" } }, [t._t("actions")], 2)], 1) : t._e()])])], 1)]);
-}, ot = [], nt = /* @__PURE__ */ E(
+}, ot = [], nt = /* @__PURE__ */ A(
   tt,
   et,
   ot,
   !1,
   null,
-  "2342f66e",
+  "fd99511e",
   null,
   null
 );
-const z = nt.exports, at = A({
+const P = nt.exports, at = {}, lt = /* @__PURE__ */ h({
+  ...at,
+  __name: "footer-actions",
+  props: {
+    /**
+     * List of actions that will be used to render the buttons.
+     * First element in the list will be rendered as "primary".
+     * All elements after the first will be rendered as "secondary".
+     * But you may change the color of 1-st action to red with 'critial' key
+     * Not more than 3 action buttons can be provided
+     * Or 2 action buttons and 1 Label for them
+     *
+     * Each object in the list should have a `title`, an `event` and
+     * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.
+     *
+     * `title`: Button's text.
+     *
+     * `event`: Event triggered when clicking the Button.
+     *
+     * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.
+     *
+     * ```
+     * [{
+     *   title: 'Primary',2
+     *   event: () => { ... },
+     *   icon: FourPeopleIcon
+     * }, {
+     *   title: 'Secondary',
+     *   event: () => { ... }
+     * }]
+     * ```
+     */
+    actions: {
+      type: Array,
+      required: !0
+    },
+    /**
+     * Text label that is displayed left to the action buttons
+     */
+    actionsLabel: {
+      type: String,
+      default: null
+    },
+    /**
+     * If passed - sets first button color to red
+     */
+    destructiveActions: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(e) {
+    const t = e, { actions: o, destructiveActions: n } = E(t), l = u(() => {
+      const a = o.value.length < 3 ? o.value : o.value.slice(0, o.value.length - 1);
+      return a[0].critical = n.value, {
+        leftAligned: o.value.length === 3 ? [
+          {
+            ...o.value[o.value.length - 1],
+            variant: C.SECONDARY
+          }
+        ] : null,
+        rightAligned: [...a]
+      };
+    });
+    return O(() => {
+      if (t.actions && t.actions.length > 3)
+        throw new Error("Not more than 3 action buttons may be provided to Bento Modal default variant");
+      if (t.actionsLabel && t.actions && t.actions.length > 2)
+        throw new Error(
+          "Not more than 2 action buttons may be provided with actions label to Bento Modal default variant"
+        );
+    }), { __sfc: !0, props: t, actions: o, destructiveActions: n, alignedActions: l, BentoTypography: w, BentoTypographyElement: k, BentoTypographyVariant: x, BentoButtonActions: R, BentoButtonActionsLayout: I };
+  }
+});
+var st = function() {
+  var t = this, o = t._self._c, n = t._self._setupProxy;
+  return o("div", { staticClass: "b-footer-actions" }, [t.actionsLabel ? o(n.BentoTypography, { attrs: { el: n.BentoTypographyElement.SPAN, variant: n.BentoTypographyVariant.BODY, stronger: "" } }, [t._v(" " + t._s(t.actionsLabel) + " ")]) : t._e(), n.alignedActions.leftAligned ? o(n.BentoButtonActions, { attrs: { actions: n.alignedActions.leftAligned, layout: n.BentoButtonActionsLayout.BUTTONS_START } }) : t._e(), o(n.BentoButtonActions, { attrs: { actions: n.alignedActions.rightAligned, layout: n.BentoButtonActionsLayout.BUTTONS_END } })], 1);
+}, it = [], rt = /* @__PURE__ */ A(
+  lt,
+  st,
+  it,
+  !1,
+  null,
+  "aa6e74fc",
+  null,
+  null
+);
+const ut = rt.exports, ct = h({
   name: "bento-modal-default",
-  components: { BaseModal: z, BentoButtonActions: G, BentoTypography: N },
-  inheritAttrs: !1,
+  components: { BaseModal: P, FooterActions: ut },
   props: {
     /**
      * Adds a cross icon on the right side of the alert
@@ -245,7 +331,7 @@ const z = nt.exports, at = A({
      */
     columnsSize: {
       type: String,
-      default: _.SMALLER
+      default: y.SMALLER
     },
     /**
      * List of actions that will be used to render the buttons.
@@ -301,45 +387,22 @@ const z = nt.exports, at = A({
       default: !1
     }
   },
-  emits: [m.CLOSE_MODAL],
+  emits: [d.CLOSE_MODAL],
   setup(e, { slots: t, emit: o }) {
-    const { actions: a, destructiveActions: n } = S(e), l = c(() => {
-      const u = a.value.length < 3 ? a.value : a.value.slice(0, a.value.length - 1);
-      return n.value && (u[0].critical = !0), {
-        leftAligned: a.value.length === 3 ? [
-          {
-            ...a.value[a.value.length - 1],
-            variant: h.SECONDARY
-          }
-        ] : null,
-        rightAligned: u
-      };
-    }), s = () => {
-      o(m.CLOSE_MODAL);
+    const n = D(t), l = () => {
+      o(d.CLOSE_MODAL);
     };
-    return T(() => {
-      if (!(r(t)("content") || r(t)("content-col-1") && r(t)("content-col-2")))
+    return O(() => {
+      if (!(n("content") || n("content-col-1") && n("content-col-2")))
         throw new Error("Bento Modal default variant requires content slot or column slots");
-      if (e.actions && e.actions.length > 3)
-        throw new Error("Not more than 3 action buttons may be provided to Bento Modal default variant");
-      if (e.actionsLabel && e.actions && e.actions.length > 2)
-        throw new Error(
-          "Not more than 2 action buttons may be provided with actions label to Bento Modal default variant"
-        );
     }), {
-      // Values
-      alignedActions: l,
       // Methods
-      onCloseModal: s,
-      hasSlot: r(t),
-      // Enums
-      BentoButtonActionsLayout: P,
-      BentoTypographyElement: x,
-      BentoTypographyVariant: R
+      onCloseModal: l,
+      hasSlot: n
     };
   }
 });
-var lt = function() {
+var dt = function() {
   var t = this, o = t._self._c;
   return t._self._setupProxy, o("base-modal", { staticClass: "b-modal-default", attrs: { size: t.size, "hide-close-button": t.hideCloseButton, "custom-padding": t.customPadding, "is-dismissible": t.isDismissible, "is-open": t.isOpen, "overflow-visible": t.overflowVisible, "with-column-layout": t.withColumnLayout, "initially-open": t.initiallyOpen }, on: { "close-modal": t.onCloseModal }, scopedSlots: t._u([t.hasSlot("default") ? { key: "default", fn: function() {
     return [t._t("default")];
@@ -351,28 +414,27 @@ var lt = function() {
     return [t._t("content")];
   }, proxy: !0 }, t.actions ? { key: "actions", fn: function() {
     return [t._t("actions", function() {
-      return [t.actionsLabel ? o("bento-typography", { staticClass: "b-modal-base__title", attrs: { "aria-label": "base modal title", el: t.BentoTypographyElement.SPAN, variant: t.BentoTypographyVariant.BODY, stronger: "" } }, [t._v(" " + t._s(t.actionsLabel) + " ")]) : t._e(), t.alignedActions.leftAligned ? o("bento-button-actions", { attrs: { actions: t.alignedActions.leftAligned, layout: t.BentoButtonActionsLayout.BUTTONS_START } }) : t._e(), o("bento-button-actions", { attrs: { actions: t.alignedActions.rightAligned, layout: t.BentoButtonActionsLayout.BUTTONS_END } })];
+      return [o("footer-actions", { attrs: { actions: t.actions, "actions-label": t.actionsLabel, "destructive-actions": t.destructiveActions } })];
     })];
   }, proxy: !0 } : null], null, !0) });
-}, st = [], it = /* @__PURE__ */ E(
-  at,
-  lt,
-  st,
+}, ft = [], mt = /* @__PURE__ */ A(
+  ct,
+  dt,
+  ft,
   !1,
   null,
   null,
   null,
   null
 );
-const rt = it.exports, k = {
+const pt = mt.exports, _t = {
   "en-US": {
     okButtonText: "OK"
   }
-}, ut = A({
-  i18n: { messages: k },
+}, yt = h({
+  i18n: { messages: _t },
   name: "bento-modal-dialog",
-  components: { BaseModal: z, BentoButtonActions: G },
-  inheritAttrs: !1,
+  components: { BaseModal: P, BentoButtonActions: R },
   props: {
     /**
      * Controls the modal's state from the outside. Set it to true to open the modal
@@ -442,59 +504,59 @@ const rt = it.exports, k = {
       default: !1
     }
   },
-  emits: [m.CLOSE_MODAL],
+  emits: [d.CLOSE_MODAL],
   setup(e, { slots: t, emit: o }) {
-    const { t: a } = I({ messages: k }), { actions: n, dialogType: l } = S(e), s = () => {
-      o(m.CLOSE_MODAL);
-    }, u = () => {
-      s();
-    }, b = c(() => [
+    const { t: n } = N(), l = D(t), { actions: a, dialogType: s } = E(e), i = () => {
+      o(d.CLOSE_MODAL);
+    }, f = () => {
+      i();
+    }, v = u(() => [
       {
-        title: a("okButtonText"),
-        event: u,
-        variant: h.SECONDARY
+        title: n("okButtonText"),
+        event: f,
+        variant: C.SECONDARY
       }
-    ]), v = c(() => {
-      var f;
-      const d = {
+    ]), b = u(() => {
+      var m;
+      const c = {
         title: "Cancel",
-        event: u
-      }, i = (f = n == null ? void 0 : n.value) == null ? void 0 : f[0];
-      return l.value === p.DESTRUCTIVE ? i.critical = !0 : l.value === p.INFO && (i.variant = h.SECONDARY), [i, d];
-    }), g = c(() => ({
-      [`b-modal-dialog--${l.value}`]: l.value
+        event: f
+      }, r = (m = a == null ? void 0 : a.value) == null ? void 0 : m[0];
+      return s.value === p.DESTRUCTIVE ? r.critical = !0 : s.value === p.INFO && (r.variant = C.SECONDARY), [r, c];
+    }), g = u(() => ({
+      [`b-modal-dialog--${s.value}`]: s.value
     }));
-    return T(() => {
-      var d, i;
-      if (!r(t)("default") || !e.content)
+    return O(() => {
+      var c, r;
+      if (!l("default") || !e.content)
         throw new Error("Bento Modal Dialog requires header title and content");
-      if (((d = n == null ? void 0 : n.value) == null ? void 0 : d.length) > 1)
+      if (((c = a == null ? void 0 : a.value) == null ? void 0 : c.length) > 1)
         throw new Error("Not more than 1 action button may be provided to Modal Dialog");
-      if (l.value !== p.ACKNOWLEDGEMENT && !(n != null && n.value))
+      if (s.value !== p.ACKNOWLEDGEMENT && !(a != null && a.value))
         throw new Error(
           "Modal Dialog, except ACKNOWLEDGEMENT type, always has to contain one action button"
         );
-      if (l.value === p.ACKNOWLEDGEMENT && ((i = n == null ? void 0 : n.value) != null && i.length))
+      if (s.value === p.ACKNOWLEDGEMENT && ((r = a == null ? void 0 : a.value) != null && r.length))
         throw new Error("Acknowledgement Modal Dialog does not accept action buttons");
     }), {
       // Values
-      dialogActions: v,
-      acknowledgementDialogActions: b,
+      dialogActions: b,
+      acknowledgementDialogActions: v,
       // Methods
-      onCloseModal: s,
-      onCloseActionButton: u,
+      onCloseModal: i,
+      onCloseActionButton: f,
       // Styles
       modalDialogConditionalClasses: g,
       // Enums
-      BentoModalRole: B,
-      BentoModalSize: L,
-      BentoButtonVariant: h,
+      BentoModalRole: S,
+      BentoModalSize: B,
+      BentoButtonVariant: C,
       BentoModalDialogType: p,
-      BentoButtonActionsLayout: P
+      BentoButtonActionsLayout: I
     };
   }
 });
-var ct = function() {
+var vt = function() {
   var t = this, o = t._self._c;
   return t._self._setupProxy, o("base-modal", { staticClass: "b-modal-dialog", class: t.modalDialogConditionalClasses, attrs: { "hide-close-button": !0, size: t.BentoModalSize.SMALL, "is-dismissible": t.isDismissible, "is-open": t.isOpen, "overflow-visible": t.overflowVisible, "modal-role": t.BentoModalRole.ALERT_DIALOG, "initially-open": t.initiallyOpen }, on: { "close-modal": t.onCloseModal }, scopedSlots: t._u([{ key: "default", fn: function() {
     return [t._t("default")];
@@ -503,27 +565,26 @@ var ct = function() {
   }, proxy: !0 }, { key: "actions", fn: function() {
     return [t.dialogType === t.BentoModalDialogType.ACKNOWLEDGEMENT ? o("bento-button-actions", { attrs: { actions: t.acknowledgementDialogActions, layout: t.BentoButtonActionsLayout.BUTTONS_END } }) : o("bento-button-actions", { attrs: { actions: t.dialogActions, layout: t.BentoButtonActionsLayout.BUTTONS_END } })];
   }, proxy: !0 }], null, !0) });
-}, dt = [], mt = /* @__PURE__ */ E(
-  ut,
-  ct,
-  dt,
+}, bt = [], gt = /* @__PURE__ */ A(
+  yt,
+  vt,
+  bt,
   !1,
   null,
   null,
   null,
   null
 );
-const ft = mt.exports, pt = A({
+const Ct = gt.exports, Bt = h({
   name: "bento-modal",
-  components: { BentoModalDefault: rt, BentoModalDialog: ft },
-  inheritAttrs: !1,
+  components: { BentoModalDefault: pt, BentoModalDialog: Ct },
   props: {
     /**
      * Choose between default or dialog versions of modal
      */
     variant: {
       type: String,
-      default: D.DEFAULT
+      default: M.DEFAULT
     },
     // Shared Modal Default and Modal Default props
     /**
@@ -589,7 +650,7 @@ const ft = mt.exports, pt = A({
      */
     size: {
       type: String,
-      default: L.SMALL
+      default: B.SMALL
     },
     /**
      * If provided, manages the padding of the whole modal container
@@ -610,7 +671,7 @@ const ft = mt.exports, pt = A({
      */
     columnsSize: {
       type: String,
-      default: _.SMALLER
+      default: y.SMALLER
     },
     /**
      * Text label that is displayed left to the action buttons
@@ -642,47 +703,47 @@ const ft = mt.exports, pt = A({
       default: null
     }
   },
-  emits: [m.CLOSE_MODAL],
+  emits: [d.CLOSE_MODAL],
   setup(e, { slots: t, emit: o }) {
     const {
-      variant: a,
-      hideCloseButton: n,
-      size: l,
+      variant: n,
+      hideCloseButton: l,
+      size: a,
       isDismissible: s,
-      overflowVisible: u,
-      dialogType: b,
+      overflowVisible: i,
+      dialogType: f,
       content: v,
-      customPadding: g,
-      actionsLabel: d,
-      destructiveActions: i,
-      withColumnLayout: f
-    } = S(e), C = c(
-      () => a.value === D.DEFAULT ? {
-        hideCloseButton: n.value,
-        size: l.value,
-        customPadding: g.value,
-        actionsLabel: d.value,
-        destructiveActions: i.value,
+      customPadding: b,
+      actionsLabel: g,
+      destructiveActions: c,
+      withColumnLayout: r
+    } = E(e), m = u(
+      () => n.value === M.DEFAULT ? {
+        hideCloseButton: l.value,
+        size: a.value,
+        customPadding: b.value,
+        actionsLabel: g.value,
+        destructiveActions: c.value,
         isDismissible: s.value ?? !0,
-        overflowVisible: u.value,
-        withColumnLayout: f.value
+        overflowVisible: i.value,
+        withColumnLayout: r.value
       } : {
-        dialogType: b.value,
+        dialogType: f.value,
         content: v.value,
         isDismissible: s.value ?? !1,
-        overflowVisible: u.value
+        overflowVisible: i.value
       }
     );
     return {
       onCloseModal: () => {
-        o(m.CLOSE_MODAL);
+        o(d.CLOSE_MODAL);
       },
-      customProps: C,
-      hasSlot: r(t)
+      customProps: m,
+      hasSlot: D(t)
     };
   }
 });
-var yt = function() {
+var ht = function() {
   var t = this, o = t._self._c;
   return t._self._setupProxy, o(t.variant, t._b({ tag: "component", staticClass: "b-modal", attrs: { "is-open": t.isOpen, actions: t.actions }, on: { "close-modal": t.onCloseModal }, scopedSlots: t._u([t.hasSlot("default") ? { key: "default", fn: function() {
     return [t._t("default")];
@@ -693,24 +754,24 @@ var yt = function() {
   }, proxy: !0 } : null, t.hasSlot("content") ? { key: "content", fn: function() {
     return [t._t("content")];
   }, proxy: !0 } : null], null, !0) }, "component", t.customProps, !1));
-}, _t = [], bt = /* @__PURE__ */ E(
-  pt,
-  yt,
-  _t,
+}, At = [], Lt = /* @__PURE__ */ A(
+  Bt,
+  ht,
+  At,
   !1,
   null,
   null,
   null,
   null
 );
-const wt = bt.exports;
+const Gt = Lt.exports;
 export {
-  wt as BentoModal,
-  _ as BentoModalColumnLayoutVariant,
+  Gt as BentoModal,
+  y as BentoModalColumnLayoutVariant,
   p as BentoModalDialogType,
-  m as BentoModalEvent,
-  B as BentoModalRole,
-  L as BentoModalSize,
-  D as BentoModalVariant
+  d as BentoModalEvent,
+  S as BentoModalRole,
+  B as BentoModalSize,
+  M as BentoModalVariant
 };
 //# sourceMappingURL=modal.js.map