@adyen/bento-vue3 1.2.0 → 1.3.0

package/dist/modal.js

@@ -1,370 +1,251 @@
-import { defineComponent as T, ref as se, toRefs as G, computed as f, watch as ie, onMounted as z, resolveComponent as v, openBlock as d, createElementBlock as N, createElementVNode as D, normalizeClass as U, withKeys as re, createVNode as M, withCtx as i, normalizeStyle as q, 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 w } from "./chunks/button.1f630b6e.js";
-import { B as J, a as X, b as Z } from "./chunks/index.ebf5f6cf.js";
-import { BentoDivider as me } from "./divider.js";
-import { B as pe } from "./chunks/index.361c61d3.js";
-import { u as V } 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 ve } from "./chunks/cross.5c36a670.js";
-import { G as be, a as ge } from "./chunks/grid-layout.a30855ff.js";
-import { _ as $ } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import { B as F, c as K } from "./chunks/button-actions.a6e541ad.js";
-import "./assets/index21.css";
-var R = /* @__PURE__ */ ((e) => (e.DEFAULT = "BentoModalDefault", e.DIALOG = "BentoModalDialog", e))(R || {}), E = /* @__PURE__ */ ((e) => (e.SMALL = "small", e.MEDIUM = "medium", e.LARGE = "large", e))(E || {}), S = /* @__PURE__ */ ((e) => (e.SMALLER = "smaller", e.EQUAL = "equal", e.BIGGER = "bigger", e))(S || {}), I = /* @__PURE__ */ ((e) => (e.DIALOG = "dialog", e.ALERT_DIALOG = "alertdialog", e))(I || {}), L = /* @__PURE__ */ ((e) => (e.CONFIRMATION = "confirmation", e.DESTRUCTIVE = "destructive", e.INFO = "info", e.ACKNOWLEDGEMENT = "acknowledgement", e))(L || {}), h = /* @__PURE__ */ ((e) => (e.CLOSE_MODAL = "close-modal", e))(h || {});
-const W = {
+import { defineComponent as $, useAttrs as U, ref as J, computed as m, watch as X, onMounted as G, resolveComponent as f, openBlock as i, createElementBlock as I, createElementVNode as E, normalizeClass as z, withKeys as Z, createVNode as M, withCtx as n, normalizeStyle as P, renderSlot as s, createCommentVNode as h, createBlock as y, mergeProps as V, createSlots as K, toRefs as x, createTextVNode as ee, toDisplayString as oe, resolveDynamicComponent as te } from "vue";
+import { B as ne, a as _ } from "./chunks/button.e1c39f66.js";
+import { B as ae, a as le, b as se } from "./chunks/index.222d29b0.js";
+import { BentoDivider as ie } from "./divider.js";
+import { B as de } from "./chunks/index.13949709.js";
+import { u as k } from "./chunks/use-has-slot.068222e6.js";
+import { u as W } from "./chunks/i18n.6c402773.js";
+import { C as re } from "./chunks/cross.5c36a670.js";
+import { G as ue, a as ce } from "./chunks/grid-layout.a30855ff.js";
+import { _ as N } from "./chunks/_plugin-vue_export-helper.dad06003.js";
+import { F as me } from "./chunks/footer-actions.0f640f87.js";
+import { B as fe, c as ye } from "./chunks/button-actions.54e28e75.js";
+import "./assets/index12.css";
+var w = /* @__PURE__ */ ((e) => (e.DEFAULT = "BentoModalDefault", e.DIALOG = "BentoModalDialog", e))(w || {}), O = /* @__PURE__ */ ((e) => (e.SMALL = "small", e.MEDIUM = "medium", e.LARGE = "large", e))(O || {}), B = /* @__PURE__ */ ((e) => (e.SMALLER = "smaller", e.EQUAL = "equal", e.BIGGER = "bigger", e))(B || {}), T = /* @__PURE__ */ ((e) => (e.DIALOG = "dialog", e.ALERT_DIALOG = "alertdialog", e))(T || {}), g = /* @__PURE__ */ ((e) => (e.CONFIRMATION = "confirmation", e.DESTRUCTIVE = "destructive", e.INFO = "info", e.ACKNOWLEDGEMENT = "acknowledgement", e))(g || {}), p = /* @__PURE__ */ ((e) => (e.CLOSE_MODAL = "close-modal", e))(p || {});
+const q = {
   "en-US": {
     ariaLabelFallback: "modal"
   }
-}, he = T({
-  i18n: { messages: W },
+}, pe = $({
+  i18n: { messages: q },
   name: "base-modal",
-  components: { CrossIcon: ve, BentoTypography: J, BentoButton: ce, BentoDivider: me, BentoFocusTrap: pe, GridLayout: be },
+  components: { CrossIcon: re, BentoTypography: ae, BentoButton: ne, BentoDivider: ie, BentoFocusTrap: de, GridLayout: ue },
   props: {
     /**
-     * Defines whether the modal will be an alert modal
+     * If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column.
      */
-    modalRole: {
+    columnsSize: {
       type: String,
-      default: I.DIALOG
+      default: B.SMALLER
     },
     /**
-     * If set to true, it allows the modal to be closed by clicking outside of it
+     * If provided, manages the padding of the whole modal container
      */
-    isDismissible: {
-      type: Boolean,
-      required: !0
-    },
+    customPadding: { type: String, default: null },
     /**
      * Hides a cross icon on the right side of the title
      */
-    hideCloseButton: {
-      type: Boolean,
-      required: !0
-    },
+    hideCloseButton: { type: Boolean, required: !0 },
     /**
-     * If provided, manages the padding of the whole modal container
+     * Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility.
      */
-    customPadding: {
-      type: String,
-      default: null
-    },
+    initiallyOpen: { type: Boolean, default: !1 },
     /**
-     * If provided, renders the modal's content in a two-column layout an wth dividers separating its content
+     * If set to true, it allows the modal to be closed by clicking outside of it
      */
-    withColumnLayout: {
-      type: Boolean,
-      default: !1
-    },
+    isDismissible: { type: Boolean, required: !0 },
     /**
-     * If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column.
+     * Controls the modal's state from the outside. Set it to true to open the modal
      */
-    columnsSize: {
-      type: String,
-      default: S.SMALLER
-    },
+    isOpen: { type: Boolean, required: !0 },
     /**
-     * Controls the modal's state from the outside. Set it to true to open the modal
+     * Defines whether the modal will be an alert modal
      */
-    isOpen: {
-      type: Boolean,
-      required: !0
-    },
+    modalRole: { type: String, default: T.DIALOG },
+    /**
+     * Allows the inner elments to overflow the dialog
+     */
+    overflowVisible: { type: Boolean, default: !1 },
     /**
      * Sets the width of the modal
      */
     size: {
       type: String,
-      default: E.SMALL
+      default: O.SMALL
     },
     /**
-     * Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility.
+     * If provided, renders the modal's content in a two-column layout an wth dividers separating its content
      */
-    initiallyOpen: {
-      type: Boolean,
-      default: !1
-    },
-    overflowVisible: {
-      type: Boolean,
-      default: !1
-    }
+    withColumnLayout: { type: Boolean, default: !1 }
   },
-  emits: [h.CLOSE_MODAL],
-  setup(e, { slots: t, emit: l }) {
-    const { t: r } = x({ messages: W }), a = V(t), o = se(null), { isOpen: n, customPadding: s, overflowVisible: b } = G(e), C = f(
-      () => a("default") && t.default() ? ye(t)("default") : null
-    ), B = f(() => {
-      if (!s.value)
+  emits: [p.CLOSE_MODAL],
+  setup(e, { slots: l, emit: r }) {
+    const { t: a } = W({ messages: q }), u = U(), o = k(l), t = J(null), c = m(() => {
+      if (!e.customPadding)
         return {};
-      const O = {
-        paddingLeft: s.value,
-        paddingRight: s.value
-      }, P = { ...O, paddingTop: void 0, paddingBottom: void 0 };
-      return a("default") || (P.paddingTop = s.value), a("actions") || (P.paddingBottom = s.value), {
-        header: { ...O, paddingTop: s.value },
-        content: P,
-        actions: { ...O, paddingBottom: s.value }
+      const A = {
+        paddingLeft: e.customPadding,
+        paddingRight: e.customPadding
+      }, R = { ...A, paddingTop: void 0, paddingBottom: void 0 };
+      return o("default") || (R.paddingTop = e.customPadding), o("actions") || (R.paddingBottom = e.customPadding), {
+        header: { ...A, paddingTop: e.customPadding },
+        content: R,
+        actions: { ...A, paddingBottom: e.customPadding }
       };
-    }), A = fe({
-      label: C,
-      defaultFallback: r("ariaLabelFallback")
-    }), c = f(() => e.withColumnLayout && e.size === E.LARGE), m = () => {
-      o.value.showModal();
-    }, _ = () => {
-      l(h.CLOSE_MODAL);
-    }, k = () => {
-      o.value.close(), _();
-    }, oe = () => {
-      k();
-    }, te = ({ target: O }) => {
-      O && O.tagName === I.DIALOG.toUpperCase() && k();
-    }, ne = f(() => ({
+    }), C = m(
+      () => u["aria-label"] ?? a("ariaLabelFallback")
+    ), b = m(() => e.withColumnLayout && e.size === O.LARGE), L = () => {
+      t.value.showModal();
+    }, S = () => {
+      r(p.CLOSE_MODAL);
+    }, d = () => {
+      t.value.close(), S();
+    }, v = () => {
+      d();
+    }, D = ({ target: A }) => {
+      A && A.tagName === T.DIALOG.toUpperCase() && d();
+    }, Y = m(() => ({
       [`b-modal-base__container--${e.size}`]: e.size,
-      ["b-modal-base__container--visible"]: n.value,
-      ["b-modal-base__container--overflow-visible"]: b.value,
-      ["b-modal-base__container--column-layout"]: c.value
-    })), ae = f(() => ({
-      "b-modal-base__content--column-layout": c.value,
-      "b-modal-base__content--with-header": a("default"),
-      "b-modal-base__content--with-actions": a("actions")
-    })), le = f(() => e.columnsSize === S.SMALLER ? [{ small: 4, medium: 4, large: 4 }] : e.columnsSize === S.BIGGER ? [{ small: 8, medium: 8, large: 8 }] : [{ small: 6, medium: 6, large: 6 }]);
-    return ie(
-      () => [n.value, o.value],
+      "b-modal-base__container--visible": e.isOpen,
+      "b-modal-base__container--overflow-visible": e.overflowVisible,
+      "b-modal-base__container--column-layout": b.value
+    })), H = m(() => ({
+      "b-modal-base__content--column-layout": b.value,
+      "b-modal-base__content--with-header": o("default"),
+      "b-modal-base__content--with-actions": o("actions")
+    })), Q = m(() => e.columnsSize === B.SMALLER ? [{ small: 4, medium: 4, large: 4 }] : e.columnsSize === B.BIGGER ? [{ small: 8, medium: 8, large: 8 }] : [{ small: 6, medium: 6, large: 6 }]);
+    return X(
+      () => [e.isOpen, t.value],
       () => {
-        n.value && o.value ? m() : o.value && k();
+        e.isOpen && t.value ? L() : t.value && d();
       },
       { immediate: !0 }
-    ), z(() => {
-      n.value && o.value && m();
+    ), G(() => {
+      e.isOpen && t.value && L();
     }), {
       // Refs
-      modal: o,
-      computedAriaLabel: A,
+      modal: t,
+      computedAriaLabel: C,
       // Handling the state
-      openModal: m,
-      closeModalOnClickOutside: te,
+      openModal: L,
+      closeModalOnClickOutside: D,
       // Methods
-      onCloseButtonClick: oe,
-      hasSlot: a,
-      emitCloseEvent: _,
+      onCloseButtonClick: v,
+      hasSlot: o,
+      emitCloseEvent: S,
+      t: a,
       // Styles
-      modalConditionalClasses: ne,
-      modalContentConditionalClasses: ae,
-      customPaddingStyles: B,
-      hasColumnLayout: c,
-      computedColumnWidth: le,
+      modalConditionalClasses: Y,
+      modalContentConditionalClasses: H,
+      customPaddingStyles: c,
+      hasColumnLayout: b,
+      computedColumnWidth: Q,
       // Enums
-      BentoButtonVariant: w,
-      BentoTypographyElement: X,
-      BentoTypographyVariant: Z,
-      GridLayoutContainerType: ge
+      BentoButtonVariant: _,
+      BentoTypographyElement: le,
+      BentoTypographyVariant: se,
+      GridLayoutContainerType: ce
     };
   }
 });
-const Ce = { class: "b-modal-base" }, Le = ["role", "aria-label", "open"], Be = { class: "b-modal-base__wrapper" }, Ae = { class: "b-modal-base__header" }, _e = {
+const be = { class: "b-modal-base" }, ve = ["role", "aria-label", "open"], ge = { class: "b-modal-base__wrapper" }, Ce = { class: "b-modal-base__header" }, Le = {
   "aria-label": "modal actions",
   class: "b-modal-base__actions"
 };
-function Se(e, t, l, r, a, o) {
-  const n = v("bento-typography"), s = v("cross-icon"), b = v("bento-button"), C = v("bento-divider"), B = v("grid-layout"), A = v("bento-focus-trap");
-  return d(), N("div", Ce, [
-    D("dialog", {
+function he(e, l, r, a, u, o) {
+  const t = f("bento-typography"), c = f("cross-icon"), C = f("bento-button"), b = f("bento-divider"), L = f("grid-layout"), S = f("bento-focus-trap");
+  return i(), I("div", be, [
+    E("dialog", {
       ref: "modal",
       role: e.modalRole,
       "aria-label": e.computedAriaLabel,
-      class: U(["b-modal-base__container", e.modalConditionalClasses]),
+      class: z(["b-modal-base__container", e.modalConditionalClasses]),
       open: e.initiallyOpen,
-      onClick: t[0] || (t[0] = (c) => e.isDismissible && e.closeModalOnClickOutside(c)),
-      onKeydown: t[1] || (t[1] = re((...c) => e.emitCloseEvent && e.emitCloseEvent(...c), ["esc"]))
+      onClick: l[0] || (l[0] = (d) => e.isDismissible && e.closeModalOnClickOutside(d)),
+      onKeydown: l[1] || (l[1] = Z((...d) => e.emitCloseEvent && e.emitCloseEvent(...d), ["esc"]))
     }, [
-      M(A, null, {
-        default: i(() => [
-          D("div", Be, [
-            e.hasSlot("default") || !e.hideCloseButton ? (d(), N("div", {
+      M(S, null, {
+        default: n(() => [
+          E("div", ge, [
+            e.hasSlot("default") || !e.hideCloseButton ? (i(), I("div", {
               key: 0,
               class: "b-modal-base__header-container",
-              style: q(e.customPaddingStyles.header)
+              style: P(e.customPaddingStyles.header)
             }, [
-              D("div", Ae, [
-                M(n, {
+              E("div", Ce, [
+                M(t, {
                   class: "b-modal-base__title",
                   "aria-label": "base modal title",
                   el: e.BentoTypographyElement.SPAN,
                   variant: e.BentoTypographyVariant.TITLE,
                   stronger: ""
                 }, {
-                  default: i(() => [
-                    e.hasSlot("default") ? u(e.$slots, "default", { key: 0 }, void 0, !0) : g("", !0)
+                  default: n(() => [
+                    e.hasSlot("default") ? s(e.$slots, "default", { key: 0 }, void 0, !0) : h("", !0)
                   ]),
                   _: 3
                 }, 8, ["el", "variant"]),
-                e.hideCloseButton ? g("", !0) : (d(), p(b, {
+                e.hideCloseButton ? h("", !0) : (i(), y(C, {
                   key: 0,
                   class: "b-modal-base__close-button",
                   variant: e.BentoButtonVariant.TERTIARY,
                   type: "button",
                   onClick: e.onCloseButtonClick
                 }, {
-                  default: i(() => [
-                    M(s, { "svg-title": "close" })
+                  default: n(() => [
+                    M(c, { "svg-title": "close" })
                   ]),
                   _: 1
                 }, 8, ["variant", "onClick"]))
               ]),
-              e.hasColumnLayout ? (d(), p(C, {
+              e.hasColumnLayout ? (i(), y(b, {
                 key: 0,
                 class: "b-modal-base__divider"
-              })) : g("", !0)
-            ], 4)) : g("", !0),
-            D("div", {
-              class: U(["b-modal-base__content", e.modalContentConditionalClasses]),
-              style: q(e.customPaddingStyles.content)
+              })) : h("", !0)
+            ], 4)) : h("", !0),
+            E("div", {
+              class: z(["b-modal-base__content", e.modalContentConditionalClasses]),
+              style: P(e.customPaddingStyles.content)
             }, [
-              e.hasSlot("content") ? (d(), p(n, {
+              e.hasSlot("content") ? (i(), y(t, {
                 key: 0,
                 "aria-label": "base modal content",
                 el: e.BentoTypographyElement.DIV,
                 variant: e.BentoTypographyVariant.BODY,
                 stronger: ""
               }, {
-                default: i(() => [
-                  e.hasColumnLayout ? (d(), p(B, {
+                default: n(() => [
+                  e.hasColumnLayout ? (i(), y(L, {
                     key: 0,
                     "column-width": e.computedColumnWidth,
                     "container-type": e.GridLayoutContainerType.NORMAL,
                     class: "b-modal-base__grid"
                   }, {
-                    "col-1": i(() => [
-                      u(e.$slots, "content-col-1", {}, void 0, !0)
+                    "col-1": n(() => [
+                      s(e.$slots, "content-col-1", {}, void 0, !0)
                     ]),
-                    "col-2": i(() => [
-                      u(e.$slots, "content-col-2", {}, void 0, !0)
+                    "col-2": n(() => [
+                      s(e.$slots, "content-col-2", {}, void 0, !0)
                     ]),
                     _: 3
-                  }, 8, ["column-width", "container-type"])) : u(e.$slots, "content", { key: 1 }, void 0, !0)
+                  }, 8, ["column-width", "container-type"])) : s(e.$slots, "content", { key: 1 }, void 0, !0)
                 ]),
                 _: 3
-              }, 8, ["el", "variant"])) : g("", !0)
+              }, 8, ["el", "variant"])) : h("", !0)
             ], 6),
-            e.hasSlot("actions") ? (d(), N("div", {
+            e.hasSlot("actions") ? (i(), I("div", {
               key: 1,
               class: "b-modal-base__actions-container",
-              style: q(e.customPaddingStyles.actions)
+              style: P(e.customPaddingStyles.actions)
             }, [
-              e.hasColumnLayout ? (d(), p(C, {
+              e.hasColumnLayout ? (i(), y(b, {
                 key: 0,
                 class: "b-modal-base__divider"
-              })) : g("", !0),
-              D("div", _e, [
-                u(e.$slots, "actions", {}, void 0, !0)
+              })) : h("", !0),
+              E("div", Le, [
+                s(e.$slots, "actions", {}, void 0, !0)
               ])
-            ], 4)) : g("", !0)
+            ], 4)) : h("", !0)
           ])
         ]),
         _: 3
       })
-    ], 42, Le)
+    ], 42, ve)
   ]);
 }
-const ee = /* @__PURE__ */ $(he, [["render", Se], ["__scopeId", "data-v-c82b2878"]]), Oe = { class: "b-footer-actions" }, Ee = {}, De = /* @__PURE__ */ T({
-  ...Ee,
-  __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 } = G(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: w.SECONDARY
-          }
-        ] : null,
-        rightAligned: [...o]
-      };
-    });
-    return z(() => {
-      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", Oe, [
-      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(F), {
-        key: 1,
-        actions: y(a).leftAligned,
-        layout: y(K).BUTTONS_START
-      }, null, 8, ["actions", "layout"])) : g("", !0),
-      M(y(F), {
-        actions: y(a).rightAligned,
-        layout: y(K).BUTTONS_END
-      }, null, 8, ["actions", "layout"])
-    ]));
-  }
-});
-const Me = /* @__PURE__ */ $(De, [["__scopeId", "data-v-7d3e4571"]]), we = T({
+const j = /* @__PURE__ */ N(pe, [["render", he], ["__scopeId", "data-v-3bd8058e"]]), Be = $({
   name: "bento-modal-default",
-  components: { BaseModal: ee, FooterActions: Me },
+  components: { BaseModal: j, FooterActions: me },
   props: {
     /**
      * Adds a cross icon on the right side of the alert
@@ -423,7 +304,7 @@ const Me = /* @__PURE__ */ $(De, [["__scopeId", "data-v-7d3e4571"]]), we = T({
      */
     columnsSize: {
       type: String,
-      default: S.SMALLER
+      default: B.SMALLER
     },
     /**
      * List of actions that will be used to render the buttons.
@@ -479,25 +360,24 @@ const Me = /* @__PURE__ */ $(De, [["__scopeId", "data-v-7d3e4571"]]), we = T({
       default: !1
     }
   },
-  emits: [h.CLOSE_MODAL],
-  setup(e, { slots: t, emit: l }) {
-    const r = V(t), a = () => {
-      l(h.CLOSE_MODAL);
+  emits: [p.CLOSE_MODAL],
+  setup(e, { slots: l, emit: r }) {
+    const a = k(l), u = () => {
+      r(p.CLOSE_MODAL);
     };
-    return z(() => {
-      if (!(r("content") || r("content-col-1") && r("content-col-2")))
+    return G(() => {
+      if (!(a("content") || a("content-col-1") && a("content-col-2")))
         throw new Error("Bento Modal default variant requires content slot or column slots");
     }), {
       // Methods
-      onCloseModal: a,
-      hasSlot: r
+      onCloseModal: u,
+      hasSlot: a
     };
   }
 });
-function Te(e, t, l, r, a, o) {
-  const n = v("footer-actions"), s = v("base-modal");
-  return d(), p(s, {
-    class: "b-modal-default",
+function Se(e, l, r, a, u, o) {
+  const t = f("footer-actions"), c = f("base-modal");
+  return i(), y(c, V({ class: "b-modal-default" }, e.$attrs, {
     size: e.size,
     "hide-close-button": e.hideCloseButton,
     "custom-padding": e.customPadding,
@@ -507,30 +387,30 @@ function Te(e, t, l, r, a, o) {
     "with-column-layout": e.withColumnLayout,
     "initially-open": e.initiallyOpen,
     onCloseModal: e.onCloseModal
-  }, Q({
-    "content-col-1": i(() => [
-      u(e.$slots, "content-col-1")
+  }), K({
+    "content-col-1": n(() => [
+      s(e.$slots, "content-col-1")
     ]),
-    "content-col-2": i(() => [
-      u(e.$slots, "content-col-2")
+    "content-col-2": n(() => [
+      s(e.$slots, "content-col-2")
     ]),
-    content: i(() => [
-      u(e.$slots, "content")
+    content: n(() => [
+      s(e.$slots, "content")
     ]),
     _: 2
   }, [
     e.hasSlot("default") ? {
       name: "default",
-      fn: i(() => [
-        u(e.$slots, "default")
+      fn: n(() => [
+        s(e.$slots, "default")
       ]),
       key: "0"
     } : void 0,
     e.actions ? {
       name: "actions",
-      fn: i(() => [
-        u(e.$slots, "actions", {}, () => [
-          M(n, {
+      fn: n(() => [
+        s(e.$slots, "actions", {}, () => [
+          M(t, {
             actions: e.actions,
             "actions-label": e.actionsLabel,
             "destructive-actions": e.destructiveActions
@@ -539,16 +419,16 @@ function Te(e, t, l, r, a, o) {
       ]),
       key: "1"
     } : void 0
-  ]), 1032, ["size", "hide-close-button", "custom-padding", "is-dismissible", "is-open", "overflow-visible", "with-column-layout", "initially-open", "onCloseModal"]);
+  ]), 1040, ["size", "hide-close-button", "custom-padding", "is-dismissible", "is-open", "overflow-visible", "with-column-layout", "initially-open", "onCloseModal"]);
 }
-const $e = /* @__PURE__ */ $(we, [["render", Te]]), Y = {
+const Ae = /* @__PURE__ */ N(Be, [["render", Se]]), F = {
   "en-US": {
     okButtonText: "OK"
   }
-}, ke = T({
-  i18n: { messages: Y },
+}, Oe = $({
+  i18n: { messages: F },
   name: "bento-modal-dialog",
-  components: { BaseModal: ee, BentoButtonActions: F },
+  components: { BaseModal: j, BentoButtonActions: fe },
   props: {
     /**
      * Controls the modal's state from the outside. Set it to true to open the modal
@@ -618,102 +498,101 @@ const $e = /* @__PURE__ */ $(we, [["render", Te]]), Y = {
       default: !1
     }
   },
-  emits: [h.CLOSE_MODAL],
-  setup(e, { slots: t, emit: l }) {
-    const { t: r } = x({ messages: Y }), a = V(t), { actions: o, dialogType: n } = G(e), s = () => {
-      l(h.CLOSE_MODAL);
-    }, b = () => {
-      s();
-    }, C = f(() => [
+  emits: [p.CLOSE_MODAL],
+  setup(e, { slots: l, emit: r }) {
+    const { t: a } = W({ messages: F }), u = k(l), { actions: o, dialogType: t } = x(e), c = () => {
+      r(p.CLOSE_MODAL);
+    }, C = () => {
+      c();
+    }, b = m(() => [
       {
-        title: r("okButtonText"),
-        event: b,
-        variant: w.SECONDARY
+        title: a("okButtonText"),
+        event: C,
+        variant: _.SECONDARY
       }
-    ]), B = f(() => {
-      var _;
-      const c = {
+    ]), L = m(() => {
+      var D;
+      const d = {
         title: "Cancel",
-        event: b
-      }, m = (_ = o == null ? void 0 : o.value) == null ? void 0 : _[0];
-      return n.value === L.DESTRUCTIVE ? m.critical = !0 : n.value === L.INFO && (m.variant = w.SECONDARY), [m, c];
-    }), A = f(() => ({
-      [`b-modal-dialog--${n.value}`]: n.value
+        event: C
+      }, v = (D = o == null ? void 0 : o.value) == null ? void 0 : D[0];
+      return t.value === g.DESTRUCTIVE ? v.critical = !0 : t.value === g.INFO && (v.variant = _.SECONDARY), [v, d];
+    }), S = m(() => ({
+      [`b-modal-dialog--${t.value}`]: t.value
     }));
-    return z(() => {
-      var c, m;
-      if (!a("default") || !e.content)
+    return G(() => {
+      var d, v;
+      if (!u("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)
+      if (((d = o == null ? void 0 : o.value) == null ? void 0 : d.length) > 1)
         throw new Error("Not more than 1 action button may be provided to Modal Dialog");
-      if (n.value !== L.ACKNOWLEDGEMENT && !(o != null && o.value))
+      if (t.value !== g.ACKNOWLEDGEMENT && !(o != null && o.value))
         throw new Error(
           "Modal Dialog, except ACKNOWLEDGEMENT type, always has to contain one action button"
         );
-      if (n.value === L.ACKNOWLEDGEMENT && ((m = o == null ? void 0 : o.value) != null && m.length))
+      if (t.value === g.ACKNOWLEDGEMENT && ((v = o == null ? void 0 : o.value) != null && v.length))
         throw new Error("Acknowledgement Modal Dialog does not accept action buttons");
     }), {
       // Values
-      dialogActions: B,
-      acknowledgementDialogActions: C,
+      dialogActions: L,
+      acknowledgementDialogActions: b,
       // Methods
-      onCloseModal: s,
-      onCloseActionButton: b,
+      onCloseModal: c,
+      onCloseActionButton: C,
       // Styles
-      modalDialogConditionalClasses: A,
+      modalDialogConditionalClasses: S,
       // Enums
-      BentoModalRole: I,
-      BentoModalSize: E,
-      BentoButtonVariant: w,
-      BentoModalDialogType: L,
-      BentoButtonActionsLayout: K
+      BentoModalRole: T,
+      BentoModalSize: O,
+      BentoButtonVariant: _,
+      BentoModalDialogType: g,
+      BentoButtonActionsLayout: ye
     };
   }
 });
-function Ne(e, t, l, r, a, o) {
-  const n = v("bento-button-actions"), s = v("base-modal");
-  return d(), p(s, {
-    class: U(["b-modal-dialog", e.modalDialogConditionalClasses]),
+function Ee(e, l, r, a, u, o) {
+  const t = f("bento-button-actions"), c = f("base-modal");
+  return i(), y(c, V({
+    class: ["b-modal-dialog", e.modalDialogConditionalClasses],
     "hide-close-button": !0,
     size: e.BentoModalSize.SMALL,
     "is-dismissible": e.isDismissible,
     "is-open": e.isOpen,
     "overflow-visible": e.overflowVisible,
     "modal-role": e.BentoModalRole.ALERT_DIALOG,
-    "initially-open": e.initiallyOpen,
-    onCloseModal: e.onCloseModal
-  }, {
-    default: i(() => [
-      u(e.$slots, "default")
+    "initially-open": e.initiallyOpen
+  }, e.$attrs, { onCloseModal: e.onCloseModal }), {
+    default: n(() => [
+      s(e.$slots, "default")
     ]),
-    content: i(() => [
-      j(H(e.content), 1)
+    content: n(() => [
+      ee(oe(e.content), 1)
     ]),
-    actions: i(() => [
-      e.dialogType === e.BentoModalDialogType.ACKNOWLEDGEMENT ? (d(), p(n, {
+    actions: n(() => [
+      e.dialogType === e.BentoModalDialogType.ACKNOWLEDGEMENT ? (i(), y(t, {
         key: 0,
         actions: e.acknowledgementDialogActions,
         layout: e.BentoButtonActionsLayout.BUTTONS_END
-      }, null, 8, ["actions", "layout"])) : (d(), p(n, {
+      }, null, 8, ["actions", "layout"])) : (i(), y(t, {
         key: 1,
         actions: e.dialogActions,
         layout: e.BentoButtonActionsLayout.BUTTONS_END
       }, null, 8, ["actions", "layout"]))
     ]),
     _: 3
-  }, 8, ["class", "size", "is-dismissible", "is-open", "overflow-visible", "modal-role", "initially-open", "onCloseModal"]);
+  }, 16, ["class", "size", "is-dismissible", "is-open", "overflow-visible", "modal-role", "initially-open", "onCloseModal"]);
 }
-const Re = /* @__PURE__ */ $(ke, [["render", Ne]]), Ie = T({
+const De = /* @__PURE__ */ N(Oe, [["render", Ee]]), Me = $({
   name: "bento-modal",
-  components: { BentoModalDefault: $e, BentoModalDialog: Re },
+  components: { BentoModalDefault: Ae, BentoModalDialog: De },
   props: {
     /**
      * Choose between default or dialog versions of modal
      */
     variant: {
       type: String,
-      default: R.DEFAULT,
-      validator: (e) => Object.values(R).includes(e)
+      default: w.DEFAULT,
+      validator: (e) => Object.values(w).includes(e)
     },
     // Shared Modal Default and Modal Default props
     /**
@@ -779,8 +658,8 @@ const Re = /* @__PURE__ */ $(ke, [["render", Ne]]), Ie = T({
      */
     size: {
       type: String,
-      default: E.SMALL,
-      validator: (e) => Object.values(E).includes(e)
+      default: O.SMALL,
+      validator: (e) => Object.values(O).includes(e)
     },
     /**
      * If provided, manages the padding of the whole modal container
@@ -801,8 +680,8 @@ const Re = /* @__PURE__ */ $(ke, [["render", Ne]]), Ie = T({
      */
     columnsSize: {
       type: String,
-      default: S.SMALLER,
-      validator: (e) => Object.values(S).includes(e)
+      default: B.SMALLER,
+      validator: (e) => Object.values(B).includes(e)
     },
     /**
      * Text label that is displayed left to the action buttons
@@ -824,8 +703,8 @@ const Re = /* @__PURE__ */ $(ke, [["render", Ne]]), Ie = T({
      */
     dialogType: {
       type: String,
-      default: L.CONFIRMATION,
-      validator: (e) => Object.values(L).includes(e)
+      default: g.CONFIRMATION,
+      validator: (e) => Object.values(g).includes(e)
     },
     /**
      * Text that will be displayed in the content section of Modal
@@ -835,90 +714,80 @@ const Re = /* @__PURE__ */ $(ke, [["render", Ne]]), Ie = T({
       default: null
     }
   },
-  emits: [h.CLOSE_MODAL],
-  setup(e, { slots: t, emit: l }) {
-    const {
-      variant: r,
-      hideCloseButton: a,
-      size: o,
-      isDismissible: n,
-      overflowVisible: s,
-      dialogType: b,
-      content: C,
-      customPadding: B,
-      actionsLabel: A,
-      destructiveActions: c,
-      withColumnLayout: m
-    } = G(e), _ = f(
-      () => r.value === R.DEFAULT ? {
-        hideCloseButton: a.value,
-        size: o.value,
-        customPadding: B.value,
-        actionsLabel: A.value,
-        destructiveActions: c.value,
-        isDismissible: n.value ?? !0,
-        overflowVisible: s.value,
-        withColumnLayout: m.value
+  emits: [p.CLOSE_MODAL],
+  setup(e, { slots: l, emit: r }) {
+    const a = U(), u = m(
+      () => e.variant === w.DEFAULT ? {
+        hideCloseButton: e.hideCloseButton,
+        size: e.size,
+        customPadding: e.customPadding,
+        actionsLabel: e.actionsLabel,
+        destructiveActions: e.destructiveActions,
+        isDismissible: e.isDismissible ?? !0,
+        overflowVisible: e.overflowVisible,
+        withColumnLayout: e.withColumnLayout,
+        ...a
       } : {
-        dialogType: b.value,
-        content: C.value,
-        isDismissible: n.value ?? !1,
-        overflowVisible: s.value
+        dialogType: e.dialogType,
+        content: e.content,
+        isDismissible: e.isDismissible ?? !1,
+        overflowVisible: e.overflowVisible,
+        ...a
       }
     );
     return {
       onCloseModal: () => {
-        l(h.CLOSE_MODAL);
+        r(p.CLOSE_MODAL);
       },
-      customProps: _,
-      hasSlot: V(t)
+      customProps: u,
+      hasSlot: k(l)
     };
   }
 });
-function Ge(e, t, l, r, a, o) {
-  return d(), p(de(e.variant), ue({
+function _e(e, l, r, a, u, o) {
+  return i(), y(te(e.variant), V({
     class: "b-modal",
     "is-open": e.isOpen,
     actions: e.actions
-  }, e.customProps, { onCloseModal: e.onCloseModal }), Q({ _: 2 }, [
+  }, e.customProps, { onCloseModal: e.onCloseModal }), K({ _: 2 }, [
     e.hasSlot("default") ? {
       name: "default",
-      fn: i(() => [
-        u(e.$slots, "default")
+      fn: n(() => [
+        s(e.$slots, "default")
       ]),
       key: "0"
     } : void 0,
     e.hasSlot("content-col-1") ? {
       name: "content-col-1",
-      fn: i(() => [
-        u(e.$slots, "content-col-1")
+      fn: n(() => [
+        s(e.$slots, "content-col-1")
       ]),
       key: "1"
     } : void 0,
     e.hasSlot("content-col-2") ? {
       name: "content-col-2",
-      fn: i(() => [
-        u(e.$slots, "content-col-2")
+      fn: n(() => [
+        s(e.$slots, "content-col-2")
       ]),
       key: "2"
     } : void 0,
     e.hasSlot("content") ? {
       name: "content",
-      fn: i(() => [
-        u(e.$slots, "content")
+      fn: n(() => [
+        s(e.$slots, "content")
       ]),
       key: "3"
     } : void 0
   ]), 1040, ["is-open", "actions", "onCloseModal"]);
 }
-const Xe = /* @__PURE__ */ $(Ie, [["render", Ge]]);
+const Fe = /* @__PURE__ */ N(Me, [["render", _e]]);
 export {
-  Xe as BentoModal,
-  S as BentoModalColumnLayoutVariant,
-  L as BentoModalDialogType,
-  h as BentoModalEvent,
-  I as BentoModalRole,
-  E as BentoModalSize,
-  R as BentoModalVariant
+  Fe as BentoModal,
+  B as BentoModalColumnLayoutVariant,
+  g as BentoModalDialogType,
+  p as BentoModalEvent,
+  T as BentoModalRole,
+  O as BentoModalSize,
+  w as BentoModalVariant
 };
 //# sourceMappingURL=modal.js.map