@adyen/bento-vue3 1.3.0 → 1.4.0

package/dist/modal.js

@@ -1,251 +1,14 @@
-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"
-  }
-}, pe = $({
-  i18n: { messages: q },
-  name: "base-modal",
-  components: { CrossIcon: re, BentoTypography: ae, BentoButton: ne, BentoDivider: ie, BentoFocusTrap: de, GridLayout: ue },
-  props: {
-    /**
-     * 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.
-     */
-    columnsSize: {
-      type: String,
-      default: B.SMALLER
-    },
-    /**
-     * If provided, manages the padding of the whole modal container
-     */
-    customPadding: { type: String, default: null },
-    /**
-     * Hides a cross icon on the right side of the title
-     */
-    hideCloseButton: { type: Boolean, required: !0 },
-    /**
-     * Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility.
-     */
-    initiallyOpen: { type: Boolean, default: !1 },
-    /**
-     * If set to true, it allows the modal to be closed by clicking outside of it
-     */
-    isDismissible: { type: Boolean, required: !0 },
-    /**
-     * Controls the modal's state from the outside. Set it to true to open the modal
-     */
-    isOpen: { type: Boolean, required: !0 },
-    /**
-     * Defines whether the modal will be an alert modal
-     */
-    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: O.SMALL
-    },
-    /**
-     * If provided, renders the modal's content in a two-column layout an wth dividers separating its content
-     */
-    withColumnLayout: { type: Boolean, default: !1 }
-  },
-  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 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 }
-      };
-    }), 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": 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],
-      () => {
-        e.isOpen && t.value ? L() : t.value && d();
-      },
-      { immediate: !0 }
-    ), G(() => {
-      e.isOpen && t.value && L();
-    }), {
-      // Refs
-      modal: t,
-      computedAriaLabel: C,
-      // Handling the state
-      openModal: L,
-      closeModalOnClickOutside: D,
-      // Methods
-      onCloseButtonClick: v,
-      hasSlot: o,
-      emitCloseEvent: S,
-      t: a,
-      // Styles
-      modalConditionalClasses: Y,
-      modalContentConditionalClasses: H,
-      customPaddingStyles: c,
-      hasColumnLayout: b,
-      computedColumnWidth: Q,
-      // Enums
-      BentoButtonVariant: _,
-      BentoTypographyElement: le,
-      BentoTypographyVariant: se,
-      GridLayoutContainerType: ce
-    };
-  }
-});
-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 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: z(["b-modal-base__container", e.modalConditionalClasses]),
-      open: e.initiallyOpen,
-      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(S, null, {
-        default: n(() => [
-          E("div", ge, [
-            e.hasSlot("default") || !e.hideCloseButton ? (i(), I("div", {
-              key: 0,
-              class: "b-modal-base__header-container",
-              style: P(e.customPaddingStyles.header)
-            }, [
-              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: n(() => [
-                    e.hasSlot("default") ? s(e.$slots, "default", { key: 0 }, void 0, !0) : h("", !0)
-                  ]),
-                  _: 3
-                }, 8, ["el", "variant"]),
-                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: n(() => [
-                    M(c, { "svg-title": "close" })
-                  ]),
-                  _: 1
-                }, 8, ["variant", "onClick"]))
-              ]),
-              e.hasColumnLayout ? (i(), y(b, {
-                key: 0,
-                class: "b-modal-base__divider"
-              })) : h("", !0)
-            ], 4)) : h("", !0),
-            E("div", {
-              class: z(["b-modal-base__content", e.modalContentConditionalClasses]),
-              style: P(e.customPaddingStyles.content)
-            }, [
-              e.hasSlot("content") ? (i(), y(t, {
-                key: 0,
-                "aria-label": "base modal content",
-                el: e.BentoTypographyElement.DIV,
-                variant: e.BentoTypographyVariant.BODY,
-                stronger: ""
-              }, {
-                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": n(() => [
-                      s(e.$slots, "content-col-1", {}, void 0, !0)
-                    ]),
-                    "col-2": n(() => [
-                      s(e.$slots, "content-col-2", {}, void 0, !0)
-                    ]),
-                    _: 3
-                  }, 8, ["column-width", "container-type"])) : s(e.$slots, "content", { key: 1 }, void 0, !0)
-                ]),
-                _: 3
-              }, 8, ["el", "variant"])) : h("", !0)
-            ], 6),
-            e.hasSlot("actions") ? (i(), I("div", {
-              key: 1,
-              class: "b-modal-base__actions-container",
-              style: P(e.customPaddingStyles.actions)
-            }, [
-              e.hasColumnLayout ? (i(), y(b, {
-                key: 0,
-                class: "b-modal-base__divider"
-              })) : h("", !0),
-              E("div", Le, [
-                s(e.$slots, "actions", {}, void 0, !0)
-              ])
-            ], 4)) : h("", !0)
-          ])
-        ]),
-        _: 3
-      })
-    ], 42, ve)
-  ]);
-}
-const j = /* @__PURE__ */ N(pe, [["render", he], ["__scopeId", "data-v-3bd8058e"]]), Be = $({
+import { defineComponent as S, onMounted as E, resolveComponent as v, openBlock as f, createBlock as p, mergeProps as M, createSlots as $, withCtx as l, renderSlot as a, createVNode as z, toRefs as R, computed as b, createTextVNode as q, toDisplayString as P, useAttrs as I, watch as F, resolveDynamicComponent as j } from "vue";
+import { f as T, b as B, e as m, d as c, c as G, B as C, a as O } from "./chunks/base-modal.3ccb9eb5.js";
+import { u as A } from "./chunks/use-has-slot.9fac7123.js";
+import { F as U } from "./chunks/footer-actions.9537d0df.js";
+import { _ as D } from "./chunks/_plugin-vue_export-helper.dad06003.js";
+import { B as h } from "./chunks/button.a8462029.js";
+import { u as K } from "./chunks/i18n.6c402773.js";
+import { BentoButtonActions as W } from "./button.js";
+const Y = S({
   name: "bento-modal-default",
-  components: { BaseModal: j, FooterActions: me },
+  components: { BaseModal: T, FooterActions: U },
   props: {
     /**
      * Adds a cross icon on the right side of the alert
@@ -360,24 +123,25 @@ const j = /* @__PURE__ */ N(pe, [["render", he], ["__scopeId", "data-v-3bd8058e"
       default: !1
     }
   },
-  emits: [p.CLOSE_MODAL],
-  setup(e, { slots: l, emit: r }) {
-    const a = k(l), u = () => {
-      r(p.CLOSE_MODAL);
+  emits: [m.CLOSE_MODAL],
+  setup(e, { slots: i, emit: d }) {
+    const n = A(i), u = () => {
+      d(m.CLOSE_MODAL);
     };
-    return G(() => {
-      if (!(a("content") || a("content-col-1") && a("content-col-2")))
+    return E(() => {
+      if (!(n("content") || n("content-col-1") && n("content-col-2")))
         throw new Error("Bento Modal default variant requires content slot or column slots");
     }), {
       // Methods
       onCloseModal: u,
-      hasSlot: a
+      hasSlot: n
     };
   }
 });
-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, {
+function _(e, i, d, n, u, o) {
+  const t = v("footer-actions"), s = v("base-modal");
+  return f(), p(s, M({ class: "b-modal-default" }, e.$attrs, {
+    actions: e.actions,
     size: e.size,
     "hide-close-button": e.hideCloseButton,
     "custom-padding": e.customPadding,
@@ -387,30 +151,30 @@ function Se(e, l, r, a, u, o) {
     "with-column-layout": e.withColumnLayout,
     "initially-open": e.initiallyOpen,
     onCloseModal: e.onCloseModal
-  }), K({
-    "content-col-1": n(() => [
-      s(e.$slots, "content-col-1")
+  }), $({
+    "content-col-1": l(() => [
+      a(e.$slots, "content-col-1")
     ]),
-    "content-col-2": n(() => [
-      s(e.$slots, "content-col-2")
+    "content-col-2": l(() => [
+      a(e.$slots, "content-col-2")
     ]),
-    content: n(() => [
-      s(e.$slots, "content")
+    content: l(() => [
+      a(e.$slots, "content")
     ]),
     _: 2
   }, [
     e.hasSlot("default") ? {
       name: "default",
-      fn: n(() => [
-        s(e.$slots, "default")
+      fn: l(() => [
+        a(e.$slots, "default")
       ]),
       key: "0"
     } : void 0,
     e.actions ? {
       name: "actions",
-      fn: n(() => [
-        s(e.$slots, "actions", {}, () => [
-          M(t, {
+      fn: l(() => [
+        a(e.$slots, "actions", {}, () => [
+          z(t, {
             actions: e.actions,
             "actions-label": e.actionsLabel,
             "destructive-actions": e.destructiveActions
@@ -419,16 +183,16 @@ function Se(e, l, r, a, u, o) {
       ]),
       key: "1"
     } : void 0
-  ]), 1040, ["size", "hide-close-button", "custom-padding", "is-dismissible", "is-open", "overflow-visible", "with-column-layout", "initially-open", "onCloseModal"]);
+  ]), 1040, ["actions", "size", "hide-close-button", "custom-padding", "is-dismissible", "is-open", "overflow-visible", "with-column-layout", "initially-open", "onCloseModal"]);
 }
-const Ae = /* @__PURE__ */ N(Be, [["render", Se]]), F = {
+const H = /* @__PURE__ */ D(Y, [["render", _]]), w = {
   "en-US": {
     okButtonText: "OK"
   }
-}, Oe = $({
-  i18n: { messages: F },
+}, J = S({
+  i18n: { messages: w },
   name: "bento-modal-dialog",
-  components: { BaseModal: j, BentoButtonActions: fe },
+  components: { BaseModal: T, BentoButtonActions: W },
   props: {
     /**
      * Controls the modal's state from the outside. Set it to true to open the modal
@@ -498,101 +262,98 @@ const Ae = /* @__PURE__ */ N(Be, [["render", Se]]), F = {
       default: !1
     }
   },
-  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(() => [
+  emits: [m.CLOSE_MODAL],
+  setup(e, { slots: i, emit: d }) {
+    const { t: n } = K({ messages: w }), u = A(i), { actions: o, dialogType: t } = R(e), s = () => {
+      d(m.CLOSE_MODAL);
+    }, g = () => {
+      s();
+    }, k = b(() => [
       {
-        title: a("okButtonText"),
-        event: C,
-        variant: _.SECONDARY
+        title: n("okButtonText"),
+        event: g,
+        variant: h.SECONDARY
       }
-    ]), L = m(() => {
-      var D;
-      const d = {
+    ]), N = b(() => {
+      var L;
+      const y = {
         title: "Cancel",
-        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(() => ({
+        event: g
+      }, r = (L = o == null ? void 0 : o.value) == null ? void 0 : L[0];
+      return t.value === c.DESTRUCTIVE ? r.critical = !0 : t.value === c.INFO && (r.variant = h.SECONDARY), [r, y];
+    }), V = b(() => ({
       [`b-modal-dialog--${t.value}`]: t.value
     }));
-    return G(() => {
-      var d, v;
+    return E(() => {
+      var y, r;
       if (!u("default") || !e.content)
         throw new Error("Bento Modal Dialog requires header title and content");
-      if (((d = o == null ? void 0 : o.value) == null ? void 0 : d.length) > 1)
+      if (((y = o == null ? void 0 : o.value) == null ? void 0 : y.length) > 1)
         throw new Error("Not more than 1 action button may be provided to Modal Dialog");
-      if (t.value !== g.ACKNOWLEDGEMENT && !(o != null && o.value))
+      if (t.value !== c.ACKNOWLEDGEMENT && !(o != null && o.value))
         throw new Error(
           "Modal Dialog, except ACKNOWLEDGEMENT type, always has to contain one action button"
         );
-      if (t.value === g.ACKNOWLEDGEMENT && ((v = o == null ? void 0 : o.value) != null && v.length))
+      if (t.value === c.ACKNOWLEDGEMENT && ((r = o == null ? void 0 : o.value) != null && r.length))
         throw new Error("Acknowledgement Modal Dialog does not accept action buttons");
     }), {
       // Values
-      dialogActions: L,
-      acknowledgementDialogActions: b,
+      dialogActions: N,
+      acknowledgementDialogActions: k,
       // Methods
-      onCloseModal: c,
-      onCloseActionButton: C,
+      onCloseModal: s,
+      onCloseActionButton: g,
       // Styles
-      modalDialogConditionalClasses: S,
+      modalDialogConditionalClasses: V,
       // Enums
-      BentoModalRole: T,
-      BentoModalSize: O,
-      BentoButtonVariant: _,
-      BentoModalDialogType: g,
-      BentoButtonActionsLayout: ye
+      BentoModalRole: G
     };
   }
 });
-function Ee(e, l, r, a, u, o) {
-  const t = f("bento-button-actions"), c = f("base-modal");
-  return i(), y(c, V({
+function Q(e, i, d, n, u, o) {
+  const t = v("bento-button-actions"), s = v("base-modal");
+  return f(), p(s, M({
     class: ["b-modal-dialog", e.modalDialogConditionalClasses],
+    actions: e.actions,
     "hide-close-button": !0,
-    size: e.BentoModalSize.SMALL,
+    size: "small",
     "is-dismissible": e.isDismissible,
     "is-open": e.isOpen,
     "overflow-visible": e.overflowVisible,
     "modal-role": e.BentoModalRole.ALERT_DIALOG,
     "initially-open": e.initiallyOpen
   }, e.$attrs, { onCloseModal: e.onCloseModal }), {
-    default: n(() => [
-      s(e.$slots, "default")
+    default: l(() => [
+      a(e.$slots, "default")
     ]),
-    content: n(() => [
-      ee(oe(e.content), 1)
+    content: l(() => [
+      q(P(e.content), 1)
     ]),
-    actions: n(() => [
-      e.dialogType === e.BentoModalDialogType.ACKNOWLEDGEMENT ? (i(), y(t, {
+    actions: l(() => [
+      e.dialogType === "acknowledgement" ? (f(), p(t, {
         key: 0,
         actions: e.acknowledgementDialogActions,
-        layout: e.BentoButtonActionsLayout.BUTTONS_END
-      }, null, 8, ["actions", "layout"])) : (i(), y(t, {
+        layout: "buttons-end"
+      }, null, 8, ["actions"])) : (f(), p(t, {
         key: 1,
         actions: e.dialogActions,
-        layout: e.BentoButtonActionsLayout.BUTTONS_END
-      }, null, 8, ["actions", "layout"]))
+        layout: "buttons-end"
+      }, null, 8, ["actions"]))
     ]),
     _: 3
-  }, 16, ["class", "size", "is-dismissible", "is-open", "overflow-visible", "modal-role", "initially-open", "onCloseModal"]);
+  }, 16, ["actions", "class", "is-dismissible", "is-open", "overflow-visible", "modal-role", "initially-open", "onCloseModal"]);
 }
-const De = /* @__PURE__ */ N(Oe, [["render", Ee]]), Me = $({
+const X = /* @__PURE__ */ D(J, [["render", Q]]), Z = 500, x = S({
   name: "bento-modal",
-  components: { BentoModalDefault: Ae, BentoModalDialog: De },
+  components: { BentoModalDefault: H, BentoModalDialog: X },
   props: {
     /**
      * Choose between default or dialog versions of modal
      */
     variant: {
       type: String,
-      default: w.DEFAULT,
-      validator: (e) => Object.values(w).includes(e)
+      default: C.DEFAULT,
+      validator: (e) => Object.values(C).includes(e)
     },
     // Shared Modal Default and Modal Default props
     /**
@@ -703,8 +464,8 @@ const De = /* @__PURE__ */ N(Oe, [["render", Ee]]), Me = $({
      */
     dialogType: {
       type: String,
-      default: g.CONFIRMATION,
-      validator: (e) => Object.values(g).includes(e)
+      default: c.CONFIRMATION,
+      validator: (e) => Object.values(c).includes(e)
     },
     /**
      * Text that will be displayed in the content section of Modal
@@ -714,10 +475,10 @@ const De = /* @__PURE__ */ N(Oe, [["render", Ee]]), Me = $({
       default: null
     }
   },
-  emits: [p.CLOSE_MODAL],
-  setup(e, { slots: l, emit: r }) {
-    const a = U(), u = m(
-      () => e.variant === w.DEFAULT ? {
+  emits: [m.CLOSE_MODAL],
+  setup(e, { slots: i, emit: d }) {
+    const n = I(), u = b(
+      () => e.variant === C.DEFAULT ? {
         hideCloseButton: e.hideCloseButton,
         size: e.size,
         customPadding: e.customPadding,
@@ -726,68 +487,72 @@ const De = /* @__PURE__ */ N(Oe, [["render", Ee]]), Me = $({
         isDismissible: e.isDismissible ?? !0,
         overflowVisible: e.overflowVisible,
         withColumnLayout: e.withColumnLayout,
-        ...a
+        columnSize: e.columnsSize,
+        ...n
       } : {
         dialogType: e.dialogType,
         content: e.content,
         isDismissible: e.isDismissible ?? !1,
         overflowVisible: e.overflowVisible,
-        ...a
+        ...n
       }
-    );
-    return {
-      onCloseModal: () => {
-        r(p.CLOSE_MODAL);
-      },
+    ), o = () => {
+      d(m.CLOSE_MODAL);
+    };
+    return F(e.actions, () => {
+      var t, s;
+      ((s = (t = e.actions) == null ? void 0 : t[0]) == null ? void 0 : s.state) === "success" && setTimeout(o, Z);
+    }), {
+      onCloseModal: o,
       customProps: u,
-      hasSlot: k(l)
+      hasSlot: A(i)
     };
   }
 });
-function _e(e, l, r, a, u, o) {
-  return i(), y(te(e.variant), V({
+function ee(e, i, d, n, u, o) {
+  return f(), p(j(e.variant), M({
     class: "b-modal",
     "is-open": e.isOpen,
     actions: e.actions
-  }, e.customProps, { onCloseModal: e.onCloseModal }), K({ _: 2 }, [
+  }, e.customProps, { onCloseModal: e.onCloseModal }), $({ _: 2 }, [
     e.hasSlot("default") ? {
       name: "default",
-      fn: n(() => [
-        s(e.$slots, "default")
+      fn: l(() => [
+        a(e.$slots, "default")
       ]),
       key: "0"
     } : void 0,
     e.hasSlot("content-col-1") ? {
       name: "content-col-1",
-      fn: n(() => [
-        s(e.$slots, "content-col-1")
+      fn: l(() => [
+        a(e.$slots, "content-col-1")
       ]),
       key: "1"
     } : void 0,
     e.hasSlot("content-col-2") ? {
       name: "content-col-2",
-      fn: n(() => [
-        s(e.$slots, "content-col-2")
+      fn: l(() => [
+        a(e.$slots, "content-col-2")
       ]),
       key: "2"
     } : void 0,
     e.hasSlot("content") ? {
       name: "content",
-      fn: n(() => [
-        s(e.$slots, "content")
+      fn: l(() => [
+        a(e.$slots, "content")
       ]),
       key: "3"
     } : void 0
   ]), 1040, ["is-open", "actions", "onCloseModal"]);
 }
-const Fe = /* @__PURE__ */ N(Me, [["render", _e]]);
+const ue = /* @__PURE__ */ D(x, [["render", ee]]);
 export {
-  Fe as BentoModal,
+  ue as BentoModal,
   B as BentoModalColumnLayoutVariant,
-  g as BentoModalDialogType,
-  p as BentoModalEvent,
-  T as BentoModalRole,
+  c as BentoModalDialogType,
+  m as BentoModalEvent,
+  G as BentoModalRole,
   O as BentoModalSize,
-  w as BentoModalVariant
+  C as BentoModalVariant
 };
 //# sourceMappingURL=modal.js.map