@adyen/bento-vue3 1.0.0 → 1.1.0

package/dist/modal.js

@@ -1,33 +1,33 @@
-import { defineComponent as $, ref as ae, toRefs as k, computed as f, watch as le, onMounted as P, resolveComponent as b, openBlock as d, createElementBlock as I, createElementVNode as D, normalizeClass as V, withKeys as se, createVNode as w, withCtx as l, normalizeStyle as G, renderSlot as u, createCommentVNode as g, createBlock as p, createSlots as K, createTextVNode as W, toDisplayString as Y, resolveDynamicComponent as ie, mergeProps as re } from "vue";
-import { B as de, a as _ } from "./chunks/button.51be5335.js";
-import { B as j, c as Q, a as H } from "./chunks/index.1d501e31.js";
-import { BentoDivider as ue } from "./divider.js";
-import { B as ce } from "./chunks/index.84d248b7.js";
-import { h as m } from "./chunks/hasSlot.dceac207.js";
-import { u as me } from "./chunks/aria-label.ac9651a5.js";
-import { u as J } from "./chunks/i18n.3619d46c.js";
-import { g as pe } from "./chunks/get-slot-text.2db867f8.js";
-import { C as ye } from "./chunks/cross.5c36a670.js";
-import { G as fe, a as be } from "./chunks/grid-layout.195c90b6.js";
-import { _ as N } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import { B as X, c as Z } from "./chunks/button-actions.1dcbde15.js";
-import "./assets/index37.css";
-var z = /* @__PURE__ */ ((e) => (e.DEFAULT = "BentoModalDefault", e.DIALOG = "BentoModalDialog", e))(z || {}), M = /* @__PURE__ */ ((e) => (e.SMALL = "small", e.MEDIUM = "medium", e.LARGE = "large", e))(M || {}), E = /* @__PURE__ */ ((e) => (e.SMALLER = "smaller", e.EQUAL = "equal", e.BIGGER = "bigger", e))(E || {}), T = /* @__PURE__ */ ((e) => (e.DIALOG = "dialog", e.ALERT_DIALOG = "alertdialog", e))(T || {}), A = /* @__PURE__ */ ((e) => (e.CONFIRMATION = "confirmation", e.DESTRUCTIVE = "destructive", e.INFO = "info", e.ACKNOWLEDGEMENT = "acknowledgement", e))(A || {}), h = /* @__PURE__ */ ((e) => (e.CLOSE_MODAL = "close-modal", e))(h || {});
-const q = {
+import { defineComponent as T, ref as se, toRefs as I, computed as f, watch as ie, onMounted as G, resolveComponent as b, openBlock as d, createElementBlock as N, createElementVNode as O, normalizeClass as q, withKeys as re, createVNode as D, withCtx as i, normalizeStyle as P, renderSlot as u, createCommentVNode as g, createBlock as p, unref as y, createTextVNode as j, toDisplayString as H, createSlots as Q, resolveDynamicComponent as de, mergeProps as ue } from "vue";
+import { B as ce, a as M } from "./chunks/button.4ccc3a72.js";
+import { B as J, a as X, b as Z } from "./chunks/index.92f7d550.js";
+import { BentoDivider as me } from "./divider.js";
+import { B as pe } from "./chunks/index.0f958a0c.js";
+import { u as z } from "./chunks/use-has-slot.068222e6.js";
+import { u as fe } from "./chunks/aria-label.ac9651a5.js";
+import { u as x } from "./chunks/i18n.6c402773.js";
+import { g as ye } from "./chunks/get-slot-text.2db867f8.js";
+import { C as be } from "./chunks/cross.5c36a670.js";
+import { G as ve, a as ge } from "./chunks/grid-layout.a30855ff.js";
+import { _ as $ } from "./chunks/_plugin-vue_export-helper.dad06003.js";
+import { B as U, c as F } from "./chunks/button-actions.59449cda.js";
+import "./assets/index32.css";
+var K = /* @__PURE__ */ ((e) => (e.DEFAULT = "BentoModalDefault", e.DIALOG = "BentoModalDialog", e))(K || {}), w = /* @__PURE__ */ ((e) => (e.SMALL = "small", e.MEDIUM = "medium", e.LARGE = "large", e))(w || {}), E = /* @__PURE__ */ ((e) => (e.SMALLER = "smaller", e.EQUAL = "equal", e.BIGGER = "bigger", e))(E || {}), R = /* @__PURE__ */ ((e) => (e.DIALOG = "dialog", e.ALERT_DIALOG = "alertdialog", e))(R || {}), _ = /* @__PURE__ */ ((e) => (e.CONFIRMATION = "confirmation", e.DESTRUCTIVE = "destructive", e.INFO = "info", e.ACKNOWLEDGEMENT = "acknowledgement", e))(_ || {}), h = /* @__PURE__ */ ((e) => (e.CLOSE_MODAL = "close-modal", e))(h || {});
+const W = {
   "en-US": {
     ariaLabelFallback: "modal"
   }
-}, ve = $({
-  i18n: { messages: q },
+}, he = T({
+  i18n: { messages: W },
   name: "base-modal",
-  components: { CrossIcon: ye, BentoTypography: j, BentoButton: de, BentoDivider: ue, BentoFocusTrap: ce, GridLayout: fe },
+  components: { CrossIcon: be, BentoTypography: J, BentoButton: ce, BentoDivider: me, BentoFocusTrap: pe, GridLayout: ve },
   props: {
     /**
      * Defines whether the modal will be an alert modal
      */
     modalRole: {
       type: String,
-      default: T.DIALOG
+      default: R.DIALOG
     },
     /**
      * If set to true, it allows the modal to be closed by clicking outside of it
@@ -76,7 +76,7 @@ const q = {
      */
     size: {
       type: String,
-      default: M.SMALL
+      default: w.SMALL
     },
     /**
      * Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility.
@@ -91,110 +91,110 @@ const q = {
     }
   },
   emits: [h.CLOSE_MODAL],
-  setup(e, { slots: t, emit: y }) {
-    const { t: i } = J({ messages: q }), o = ae(null), { isOpen: a, customPadding: n, overflowVisible: s } = k(e), v = f(
-      () => m(t)("default") && t.default() ? pe(t)("default") : null
-    ), C = f(() => {
-      if (!n.value)
+  setup(e, { slots: t, emit: l }) {
+    const { t: r } = x({ messages: W }), a = z(t), o = se(null), { isOpen: n, customPadding: s, overflowVisible: v } = I(e), C = f(
+      () => a("default") && t.default() ? ye(t)("default") : null
+    ), L = f(() => {
+      if (!s.value)
         return {};
       const S = {
-        paddingLeft: n.value,
-        paddingRight: n.value
-      }, R = { ...S, paddingTop: void 0, paddingBottom: void 0 };
-      return m(t)("default") || (R.paddingTop = n.value), m(t)("actions") || (R.paddingBottom = n.value), {
-        header: { ...S, paddingTop: n.value },
-        content: R,
-        actions: { ...S, paddingBottom: n.value }
+        paddingLeft: s.value,
+        paddingRight: s.value
+      }, V = { ...S, paddingTop: void 0, paddingBottom: void 0 };
+      return a("default") || (V.paddingTop = s.value), a("actions") || (V.paddingBottom = s.value), {
+        header: { ...S, paddingTop: s.value },
+        content: V,
+        actions: { ...S, paddingBottom: s.value }
       };
-    }), B = me({
-      label: v,
-      defaultFallback: i("ariaLabelFallback")
-    }), c = f(() => e.withColumnLayout && e.size === M.LARGE), r = () => {
+    }), B = fe({
+      label: C,
+      defaultFallback: r("ariaLabelFallback")
+    }), c = f(() => e.withColumnLayout && e.size === w.LARGE), m = () => {
       o.value.showModal();
-    }, L = () => {
-      y(h.CLOSE_MODAL);
-    }, O = () => {
-      o.value.close(), L();
-    }, U = () => {
-      O();
-    }, ee = ({ target: S }) => {
-      S && S.tagName === T.DIALOG.toUpperCase() && O();
-    }, oe = f(() => ({
+    }, A = () => {
+      l(h.CLOSE_MODAL);
+    }, k = () => {
+      o.value.close(), A();
+    }, oe = () => {
+      k();
+    }, te = ({ target: S }) => {
+      S && S.tagName === R.DIALOG.toUpperCase() && k();
+    }, ne = f(() => ({
       [`b-modal-base__container--${e.size}`]: e.size,
-      ["b-modal-base__container--visible"]: a.value,
-      ["b-modal-base__container--overflow-visible"]: s.value,
+      ["b-modal-base__container--visible"]: n.value,
+      ["b-modal-base__container--overflow-visible"]: v.value,
       ["b-modal-base__container--column-layout"]: c.value
-    })), te = f(() => ({
+    })), ae = f(() => ({
       "b-modal-base__content--column-layout": c.value,
-      "b-modal-base__content--with-header": m(t)("default"),
-      "b-modal-base__content--with-actions": m(t)("actions")
-    })), ne = f(() => e.columnsSize === E.SMALLER ? [{ small: 4, medium: 4, large: 4 }] : e.columnsSize === E.BIGGER ? [{ small: 8, medium: 8, large: 8 }] : [{ small: 6, medium: 6, large: 6 }]);
-    return le(
-      () => [a.value, o.value],
+      "b-modal-base__content--with-header": a("default"),
+      "b-modal-base__content--with-actions": a("actions")
+    })), le = f(() => e.columnsSize === E.SMALLER ? [{ small: 4, medium: 4, large: 4 }] : e.columnsSize === E.BIGGER ? [{ small: 8, medium: 8, large: 8 }] : [{ small: 6, medium: 6, large: 6 }]);
+    return ie(
+      () => [n.value, o.value],
       () => {
-        a.value && o.value ? r() : o.value && O();
+        n.value && o.value ? m() : o.value && k();
       },
       { immediate: !0 }
-    ), P(() => {
-      a.value && o.value && r();
+    ), G(() => {
+      n.value && o.value && m();
     }), {
       // Refs
       modal: o,
       computedAriaLabel: B,
       // Handling the state
-      openModal: r,
-      closeModalOnClickOutside: ee,
+      openModal: m,
+      closeModalOnClickOutside: te,
       // Methods
-      onCloseButtonClick: U,
-      hasSlot: m(t),
-      emitCloseEvent: L,
+      onCloseButtonClick: oe,
+      hasSlot: a,
+      emitCloseEvent: A,
       // Styles
-      modalConditionalClasses: oe,
-      modalContentConditionalClasses: te,
-      customPaddingStyles: C,
+      modalConditionalClasses: ne,
+      modalContentConditionalClasses: ae,
+      customPaddingStyles: L,
       hasColumnLayout: c,
-      computedColumnWidth: ne,
+      computedColumnWidth: le,
       // Enums
-      BentoButtonVariant: _,
-      BentoTypographyElement: Q,
-      BentoTypographyVariant: H,
-      GridLayoutContainerType: be
+      BentoButtonVariant: M,
+      BentoTypographyElement: X,
+      BentoTypographyVariant: Z,
+      GridLayoutContainerType: ge
     };
   }
 });
-const ge = { class: "b-modal-base" }, he = ["role", "aria-label", "open"], Ce = { class: "b-modal-base__wrapper" }, Be = { class: "b-modal-base__header" }, Le = {
+const Ce = { class: "b-modal-base" }, Le = ["role", "aria-label", "open"], Be = { class: "b-modal-base__wrapper" }, Ae = { class: "b-modal-base__header" }, _e = {
   "aria-label": "modal actions",
   class: "b-modal-base__actions"
 };
-function Ae(e, t, y, i, o, a) {
-  const n = b("bento-typography"), s = b("cross-icon"), v = b("bento-button"), C = b("bento-divider"), B = b("grid-layout"), c = b("bento-focus-trap");
-  return d(), I("div", ge, [
-    D("dialog", {
+function Se(e, t, l, r, a, o) {
+  const n = b("bento-typography"), s = b("cross-icon"), v = b("bento-button"), C = b("bento-divider"), L = b("grid-layout"), B = b("bento-focus-trap");
+  return d(), N("div", Ce, [
+    O("dialog", {
       ref: "modal",
       role: e.modalRole,
       "aria-label": e.computedAriaLabel,
-      class: V(["b-modal-base__container", e.modalConditionalClasses]),
+      class: q(["b-modal-base__container", e.modalConditionalClasses]),
       open: e.initiallyOpen,
-      onClick: t[0] || (t[0] = (r) => e.isDismissible && e.closeModalOnClickOutside(r)),
-      onKeydown: t[1] || (t[1] = se((...r) => e.emitCloseEvent && e.emitCloseEvent(...r), ["esc"]))
+      onClick: t[0] || (t[0] = (c) => e.isDismissible && e.closeModalOnClickOutside(c)),
+      onKeydown: t[1] || (t[1] = re((...c) => e.emitCloseEvent && e.emitCloseEvent(...c), ["esc"]))
     }, [
-      w(c, null, {
-        default: l(() => [
-          D("div", Ce, [
-            e.hasSlot("default") || !e.hideCloseButton ? (d(), I("div", {
+      D(B, null, {
+        default: i(() => [
+          O("div", Be, [
+            e.hasSlot("default") || !e.hideCloseButton ? (d(), N("div", {
               key: 0,
               class: "b-modal-base__header-container",
-              style: G(e.customPaddingStyles.header)
+              style: P(e.customPaddingStyles.header)
             }, [
-              D("div", Be, [
-                w(n, {
+              O("div", Ae, [
+                D(n, {
                   class: "b-modal-base__title",
                   "aria-label": "base modal title",
                   el: e.BentoTypographyElement.SPAN,
                   variant: e.BentoTypographyVariant.TITLE,
                   stronger: ""
                 }, {
-                  default: l(() => [
+                  default: i(() => [
                     e.hasSlot("default") ? u(e.$slots, "default", { key: 0 }, void 0, !0) : g("", !0)
                   ]),
                   _: 3
@@ -206,8 +206,8 @@ function Ae(e, t, y, i, o, a) {
                   type: "button",
                   onClick: e.onCloseButtonClick
                 }, {
-                  default: l(() => [
-                    w(s, { "svg-title": "close" })
+                  default: i(() => [
+                    D(s, { "svg-title": "close" })
                   ]),
                   _: 1
                 }, 8, ["variant", "onClick"]))
@@ -217,9 +217,9 @@ function Ae(e, t, y, i, o, a) {
                 class: "b-modal-base__divider"
               })) : g("", !0)
             ], 4)) : g("", !0),
-            D("div", {
-              class: V(["b-modal-base__content", e.modalContentConditionalClasses]),
-              style: G(e.customPaddingStyles.content)
+            O("div", {
+              class: q(["b-modal-base__content", e.modalContentConditionalClasses]),
+              style: P(e.customPaddingStyles.content)
             }, [
               e.hasSlot("content") ? (d(), p(n, {
                 key: 0,
@@ -228,17 +228,17 @@ function Ae(e, t, y, i, o, a) {
                 variant: e.BentoTypographyVariant.BODY,
                 stronger: ""
               }, {
-                default: l(() => [
-                  e.hasColumnLayout ? (d(), p(B, {
+                default: i(() => [
+                  e.hasColumnLayout ? (d(), p(L, {
                     key: 0,
                     "column-width": e.computedColumnWidth,
                     "container-type": e.GridLayoutContainerType.NORMAL,
                     class: "b-modal-base__grid"
                   }, {
-                    "col-1": l(() => [
+                    "col-1": i(() => [
                       u(e.$slots, "content-col-1", {}, void 0, !0)
                     ]),
-                    "col-2": l(() => [
+                    "col-2": i(() => [
                       u(e.$slots, "content-col-2", {}, void 0, !0)
                     ]),
                     _: 3
@@ -247,16 +247,16 @@ function Ae(e, t, y, i, o, a) {
                 _: 3
               }, 8, ["el", "variant"])) : g("", !0)
             ], 6),
-            e.hasSlot("actions") ? (d(), I("div", {
+            e.hasSlot("actions") ? (d(), N("div", {
               key: 1,
               class: "b-modal-base__actions-container",
-              style: G(e.customPaddingStyles.actions)
+              style: P(e.customPaddingStyles.actions)
             }, [
               e.hasColumnLayout ? (d(), p(C, {
                 key: 0,
                 class: "b-modal-base__divider"
               })) : g("", !0),
-              D("div", Le, [
+              O("div", _e, [
                 u(e.$slots, "actions", {}, void 0, !0)
               ])
             ], 4)) : g("", !0)
@@ -264,13 +264,107 @@ function Ae(e, t, y, i, o, a) {
         ]),
         _: 3
       })
-    ], 42, he)
+    ], 42, Le)
   ]);
 }
-const x = /* @__PURE__ */ N(ve, [["render", Ae], ["__scopeId", "data-v-057d75c3"]]), Se = $({
+const ee = /* @__PURE__ */ $(he, [["render", Se], ["__scopeId", "data-v-c82b2878"]]), Ee = { class: "b-footer-actions" }, Oe = {}, De = /* @__PURE__ */ T({
+  ...Oe,
+  __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: l, destructiveActions: r } = I(t), a = f(() => {
+      const o = l.value.length < 3 ? l.value : l.value.slice(0, l.value.length - 1);
+      return o[0].critical = r.value, {
+        leftAligned: l.value.length === 3 ? [
+          {
+            ...l.value[l.value.length - 1],
+            variant: M.SECONDARY
+          }
+        ] : null,
+        rightAligned: [...o]
+      };
+    });
+    return G(() => {
+      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"
+        );
+    }), (o, n) => (d(), N("div", Ee, [
+      e.actionsLabel ? (d(), p(y(J), {
+        key: 0,
+        el: y(X).SPAN,
+        variant: y(Z).BODY,
+        stronger: ""
+      }, {
+        default: i(() => [
+          j(H(e.actionsLabel), 1)
+        ]),
+        _: 1
+      }, 8, ["el", "variant"])) : g("", !0),
+      y(a).leftAligned ? (d(), p(y(U), {
+        key: 1,
+        actions: y(a).leftAligned,
+        layout: y(F).BUTTONS_START
+      }, null, 8, ["actions", "layout"])) : g("", !0),
+      D(y(U), {
+        actions: y(a).rightAligned,
+        layout: y(F).BUTTONS_END
+      }, null, 8, ["actions", "layout"])
+    ]));
+  }
+});
+const Me = /* @__PURE__ */ $(De, [["__scopeId", "data-v-7d3e4571"]]), we = T({
   name: "bento-modal-default",
-  components: { BaseModal: x, BentoButtonActions: X, BentoTypography: j },
-  inheritAttrs: !1,
+  components: { BaseModal: ee, FooterActions: Me },
   props: {
     /**
      * Adds a cross icon on the right side of the alert
@@ -386,46 +480,23 @@ const x = /* @__PURE__ */ N(ve, [["render", Ae], ["__scopeId", "data-v-057d75c3"
     }
   },
   emits: [h.CLOSE_MODAL],
-  setup(e, { slots: t, emit: y }) {
-    const { actions: i, destructiveActions: o } = k(e), a = f(() => {
-      const s = i.value.length < 3 ? i.value : i.value.slice(0, i.value.length - 1);
-      return o.value && (s[0].critical = !0), {
-        leftAligned: i.value.length === 3 ? [
-          {
-            ...i.value[i.value.length - 1],
-            variant: _.SECONDARY
-          }
-        ] : null,
-        rightAligned: s
-      };
-    }), n = () => {
-      y(h.CLOSE_MODAL);
+  setup(e, { slots: t, emit: l }) {
+    const r = z(t), a = () => {
+      l(h.CLOSE_MODAL);
     };
-    return P(() => {
-      if (!(m(t)("content") || m(t)("content-col-1") && m(t)("content-col-2")))
+    return G(() => {
+      if (!(r("content") || r("content-col-1") && r("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: a,
       // Methods
-      onCloseModal: n,
-      hasSlot: m(t),
-      // Enums
-      BentoButtonActionsLayout: Z,
-      BentoTypographyElement: Q,
-      BentoTypographyVariant: H
+      onCloseModal: a,
+      hasSlot: r
     };
   }
 });
-function Ee(e, t, y, i, o, a) {
-  const n = b("bento-typography"), s = b("bento-button-actions"), v = b("base-modal");
-  return d(), p(v, {
+function Te(e, t, l, r, a, o) {
+  const n = b("footer-actions"), s = b("base-modal");
+  return d(), p(s, {
     class: "b-modal-default",
     size: e.size,
     "hide-close-button": e.hideCloseButton,
@@ -436,66 +507,48 @@ function Ee(e, t, y, i, o, a) {
     "with-column-layout": e.withColumnLayout,
     "initially-open": e.initiallyOpen,
     onCloseModal: e.onCloseModal
-  }, K({
-    "content-col-1": l(() => [
+  }, Q({
+    "content-col-1": i(() => [
       u(e.$slots, "content-col-1")
     ]),
-    "content-col-2": l(() => [
+    "content-col-2": i(() => [
       u(e.$slots, "content-col-2")
     ]),
-    content: l(() => [
+    content: i(() => [
       u(e.$slots, "content")
     ]),
     _: 2
   }, [
     e.hasSlot("default") ? {
       name: "default",
-      fn: l(() => [
+      fn: i(() => [
         u(e.$slots, "default")
       ]),
       key: "0"
     } : void 0,
     e.actions ? {
       name: "actions",
-      fn: l(() => [
+      fn: i(() => [
         u(e.$slots, "actions", {}, () => [
-          e.actionsLabel ? (d(), p(n, {
-            key: 0,
-            class: "b-modal-base__title",
-            "aria-label": "base modal title",
-            el: e.BentoTypographyElement.SPAN,
-            variant: e.BentoTypographyVariant.BODY,
-            stronger: ""
-          }, {
-            default: l(() => [
-              W(Y(e.actionsLabel), 1)
-            ]),
-            _: 1
-          }, 8, ["el", "variant"])) : g("", !0),
-          e.alignedActions.leftAligned ? (d(), p(s, {
-            key: 1,
-            actions: e.alignedActions.leftAligned,
-            layout: e.BentoButtonActionsLayout.BUTTONS_START
-          }, null, 8, ["actions", "layout"])) : g("", !0),
-          w(s, {
-            actions: e.alignedActions.rightAligned,
-            layout: e.BentoButtonActionsLayout.BUTTONS_END
-          }, null, 8, ["actions", "layout"])
+          D(n, {
+            actions: e.actions,
+            "actions-label": e.actionsLabel,
+            "destructive-actions": e.destructiveActions
+          }, null, 8, ["actions", "actions-label", "destructive-actions"])
         ])
       ]),
       key: "1"
     } : void 0
   ]), 1032, ["size", "hide-close-button", "custom-padding", "is-dismissible", "is-open", "overflow-visible", "with-column-layout", "initially-open", "onCloseModal"]);
 }
-const Oe = /* @__PURE__ */ N(Se, [["render", Ee]]), F = {
+const $e = /* @__PURE__ */ $(we, [["render", Te]]), Y = {
   "en-US": {
     okButtonText: "OK"
   }
-}, De = $({
-  i18n: { messages: F },
+}, ke = T({
+  i18n: { messages: Y },
   name: "bento-modal-dialog",
-  components: { BaseModal: x, BentoButtonActions: X },
-  inheritAttrs: !1,
+  components: { BaseModal: ee, BentoButtonActions: U },
   props: {
     /**
      * Controls the modal's state from the outside. Set it to true to open the modal
@@ -566,61 +619,61 @@ const Oe = /* @__PURE__ */ N(Se, [["render", Ee]]), F = {
     }
   },
   emits: [h.CLOSE_MODAL],
-  setup(e, { slots: t, emit: y }) {
-    const { t: i } = J({ messages: F }), { actions: o, dialogType: a } = k(e), n = () => {
-      y(h.CLOSE_MODAL);
-    }, s = () => {
-      n();
-    }, v = f(() => [
+  setup(e, { slots: t, emit: l }) {
+    const { t: r } = x({ messages: Y }), a = z(t), { actions: o, dialogType: n } = I(e), s = () => {
+      l(h.CLOSE_MODAL);
+    }, v = () => {
+      s();
+    }, C = f(() => [
       {
-        title: i("okButtonText"),
-        event: s,
-        variant: _.SECONDARY
+        title: r("okButtonText"),
+        event: v,
+        variant: M.SECONDARY
       }
-    ]), C = f(() => {
-      var L;
+    ]), L = f(() => {
+      var A;
       const c = {
         title: "Cancel",
-        event: s
-      }, r = (L = o == null ? void 0 : o.value) == null ? void 0 : L[0];
-      return a.value === A.DESTRUCTIVE ? r.critical = !0 : a.value === A.INFO && (r.variant = _.SECONDARY), [r, c];
+        event: v
+      }, m = (A = o == null ? void 0 : o.value) == null ? void 0 : A[0];
+      return n.value === _.DESTRUCTIVE ? m.critical = !0 : n.value === _.INFO && (m.variant = M.SECONDARY), [m, c];
     }), B = f(() => ({
-      [`b-modal-dialog--${a.value}`]: a.value
+      [`b-modal-dialog--${n.value}`]: n.value
     }));
-    return P(() => {
-      var c, r;
-      if (!m(t)("default") || !e.content)
+    return G(() => {
+      var c, m;
+      if (!a("default") || !e.content)
         throw new Error("Bento Modal Dialog requires header title and content");
       if (((c = o == null ? void 0 : o.value) == null ? void 0 : c.length) > 1)
         throw new Error("Not more than 1 action button may be provided to Modal Dialog");
-      if (a.value !== A.ACKNOWLEDGEMENT && !(o != null && o.value))
+      if (n.value !== _.ACKNOWLEDGEMENT && !(o != null && o.value))
         throw new Error(
           "Modal Dialog, except ACKNOWLEDGEMENT type, always has to contain one action button"
         );
-      if (a.value === A.ACKNOWLEDGEMENT && ((r = o == null ? void 0 : o.value) != null && r.length))
+      if (n.value === _.ACKNOWLEDGEMENT && ((m = o == null ? void 0 : o.value) != null && m.length))
         throw new Error("Acknowledgement Modal Dialog does not accept action buttons");
     }), {
       // Values
-      dialogActions: C,
-      acknowledgementDialogActions: v,
+      dialogActions: L,
+      acknowledgementDialogActions: C,
       // Methods
-      onCloseModal: n,
-      onCloseActionButton: s,
+      onCloseModal: s,
+      onCloseActionButton: v,
       // Styles
       modalDialogConditionalClasses: B,
       // Enums
-      BentoModalRole: T,
-      BentoModalSize: M,
-      BentoButtonVariant: _,
-      BentoModalDialogType: A,
-      BentoButtonActionsLayout: Z
+      BentoModalRole: R,
+      BentoModalSize: w,
+      BentoButtonVariant: M,
+      BentoModalDialogType: _,
+      BentoButtonActionsLayout: F
     };
   }
 });
-function _e(e, t, y, i, o, a) {
+function Ne(e, t, l, r, a, o) {
   const n = b("bento-button-actions"), s = b("base-modal");
   return d(), p(s, {
-    class: V(["b-modal-dialog", e.modalDialogConditionalClasses]),
+    class: q(["b-modal-dialog", e.modalDialogConditionalClasses]),
     "hide-close-button": !0,
     size: e.BentoModalSize.SMALL,
     "is-dismissible": e.isDismissible,
@@ -630,13 +683,13 @@ function _e(e, t, y, i, o, a) {
     "initially-open": e.initiallyOpen,
     onCloseModal: e.onCloseModal
   }, {
-    default: l(() => [
+    default: i(() => [
       u(e.$slots, "default")
     ]),
-    content: l(() => [
-      W(Y(e.content), 1)
+    content: i(() => [
+      j(H(e.content), 1)
     ]),
-    actions: l(() => [
+    actions: i(() => [
       e.dialogType === e.BentoModalDialogType.ACKNOWLEDGEMENT ? (d(), p(n, {
         key: 0,
         actions: e.acknowledgementDialogActions,
@@ -650,17 +703,16 @@ function _e(e, t, y, i, o, a) {
     _: 3
   }, 8, ["class", "size", "is-dismissible", "is-open", "overflow-visible", "modal-role", "initially-open", "onCloseModal"]);
 }
-const Me = /* @__PURE__ */ N(De, [["render", _e]]), we = $({
+const Re = /* @__PURE__ */ $(ke, [["render", Ne]]), Ie = T({
   name: "bento-modal",
-  components: { BentoModalDefault: Oe, BentoModalDialog: Me },
-  inheritAttrs: !1,
+  components: { BentoModalDefault: $e, BentoModalDialog: Re },
   props: {
     /**
      * Choose between default or dialog versions of modal
      */
     variant: {
       type: String,
-      default: z.DEFAULT
+      default: K.DEFAULT
     },
     // Shared Modal Default and Modal Default props
     /**
@@ -726,7 +778,7 @@ const Me = /* @__PURE__ */ N(De, [["render", _e]]), we = $({
      */
     size: {
       type: String,
-      default: M.SMALL
+      default: w.SMALL
     },
     /**
      * If provided, manages the padding of the whole modal container
@@ -769,7 +821,7 @@ const Me = /* @__PURE__ */ N(De, [["render", _e]]), we = $({
      */
     dialogType: {
       type: String,
-      default: A.CONFIRMATION
+      default: _.CONFIRMATION
     },
     /**
      * Text that will be displayed in the content section of Modal
@@ -780,29 +832,29 @@ const Me = /* @__PURE__ */ N(De, [["render", _e]]), we = $({
     }
   },
   emits: [h.CLOSE_MODAL],
-  setup(e, { slots: t, emit: y }) {
+  setup(e, { slots: t, emit: l }) {
     const {
-      variant: i,
-      hideCloseButton: o,
-      size: a,
+      variant: r,
+      hideCloseButton: a,
+      size: o,
       isDismissible: n,
       overflowVisible: s,
       dialogType: v,
       content: C,
-      customPadding: B,
-      actionsLabel: c,
-      destructiveActions: r,
-      withColumnLayout: L
-    } = k(e), O = f(
-      () => i.value === z.DEFAULT ? {
-        hideCloseButton: o.value,
-        size: a.value,
-        customPadding: B.value,
-        actionsLabel: c.value,
-        destructiveActions: r.value,
+      customPadding: L,
+      actionsLabel: B,
+      destructiveActions: c,
+      withColumnLayout: m
+    } = I(e), A = f(
+      () => r.value === K.DEFAULT ? {
+        hideCloseButton: a.value,
+        size: o.value,
+        customPadding: L.value,
+        actionsLabel: B.value,
+        destructiveActions: c.value,
         isDismissible: n.value ?? !0,
         overflowVisible: s.value,
-        withColumnLayout: L.value
+        withColumnLayout: m.value
       } : {
         dialogType: v.value,
         content: C.value,
@@ -812,57 +864,57 @@ const Me = /* @__PURE__ */ N(De, [["render", _e]]), we = $({
     );
     return {
       onCloseModal: () => {
-        y(h.CLOSE_MODAL);
+        l(h.CLOSE_MODAL);
       },
-      customProps: O,
-      hasSlot: m(t)
+      customProps: A,
+      hasSlot: z(t)
     };
   }
 });
-function Te(e, t, y, i, o, a) {
-  return d(), p(ie(e.variant), re({
+function Ge(e, t, l, r, a, o) {
+  return d(), p(de(e.variant), ue({
     class: "b-modal",
     "is-open": e.isOpen,
     actions: e.actions
-  }, e.customProps, { onCloseModal: e.onCloseModal }), K({ _: 2 }, [
+  }, e.customProps, { onCloseModal: e.onCloseModal }), Q({ _: 2 }, [
     e.hasSlot("default") ? {
       name: "default",
-      fn: l(() => [
+      fn: i(() => [
         u(e.$slots, "default")
       ]),
       key: "0"
     } : void 0,
     e.hasSlot("content-col-1") ? {
       name: "content-col-1",
-      fn: l(() => [
+      fn: i(() => [
         u(e.$slots, "content-col-1")
       ]),
       key: "1"
     } : void 0,
     e.hasSlot("content-col-2") ? {
       name: "content-col-2",
-      fn: l(() => [
+      fn: i(() => [
         u(e.$slots, "content-col-2")
       ]),
       key: "2"
     } : void 0,
     e.hasSlot("content") ? {
       name: "content",
-      fn: l(() => [
+      fn: i(() => [
         u(e.$slots, "content")
       ]),
       key: "3"
     } : void 0
   ]), 1040, ["is-open", "actions", "onCloseModal"]);
 }
-const We = /* @__PURE__ */ N(we, [["render", Te]]);
+const Xe = /* @__PURE__ */ $(Ie, [["render", Ge]]);
 export {
-  We as BentoModal,
+  Xe as BentoModal,
   E as BentoModalColumnLayoutVariant,
-  A as BentoModalDialogType,
+  _ as BentoModalDialogType,
   h as BentoModalEvent,
-  T as BentoModalRole,
-  M as BentoModalSize,
-  z as BentoModalVariant
+  R as BentoModalRole,
+  w as BentoModalSize,
+  K as BentoModalVariant
 };
 //# sourceMappingURL=modal.js.map