@kiva/kv-components 4.8.6 → 5.0.0

package/dist/vue/KvLendCta.js

@@ -0,0 +1,490 @@
+import { mdiChevronRight as T } from "@mdi/js";
+import { getLendCtaSelectedOption as g, getDropdownPriceArray as x } from "../utils/loanUtils.js";
+import C from "./KvLendAmountButton.js";
+import _ from "./KvSelect.js";
+import D from "./KvButton.js";
+import P from "./KvMaterialIcon.js";
+import { resolveComponent as w, openBlock as i, createElementBlock as a, createBlock as l, normalizeClass as d, withCtx as r, createTextVNode as c, toDisplayString as m, createElementVNode as y, createVNode as S, withModifiers as A, Fragment as v, renderList as p, createCommentVNode as u } from "vue";
+/* empty css           */
+import F from "../_virtual/_plugin-vue_export-helper.js";
+const I = {
+  name: "KvLendCta",
+  components: {
+    KvLendAmountButton: C,
+    KvUiButton: D,
+    KvUiSelect: _,
+    KvMaterialIcon: P
+  },
+  props: {
+    loan: {
+      type: Object,
+      default: () => ({})
+    },
+    basketItems: {
+      type: Array,
+      default: () => []
+    },
+    isLoading: {
+      type: Boolean,
+      default: !0
+    },
+    isAdding: {
+      type: Boolean,
+      default: !1
+    },
+    enableFiveDollarsNotes: {
+      type: Boolean,
+      default: !1
+    },
+    kvTrackFunction: {
+      type: Function,
+      required: !0
+    },
+    showViewLoan: {
+      type: Boolean,
+      default: !1
+    },
+    customLoanDetails: {
+      type: Boolean,
+      default: !1
+    },
+    externalLinks: {
+      type: Boolean,
+      default: !1
+    },
+    route: {
+      type: Object,
+      default: void 0
+    },
+    userBalance: {
+      type: String,
+      default: void 0
+    },
+    getCookie: {
+      type: Function,
+      default: void 0
+    },
+    setCookie: {
+      type: Function,
+      default: void 0
+    },
+    fiveDollarsSelected: {
+      type: Boolean,
+      default: !1
+    },
+    enableHugeAmount: {
+      type: Boolean,
+      default: !1
+    },
+    isVisitor: {
+      type: Boolean,
+      default: !0
+    },
+    primaryButtonText: {
+      type: String,
+      default: "Lend"
+    },
+    secondaryButtonText: {
+      type: String,
+      default: "Checkout now"
+    },
+    secondaryButtonHandler: {
+      type: Function,
+      default: void 0
+    },
+    showPresetAmounts: {
+      type: Boolean,
+      default: !1
+    },
+    kvTrackCategory: {
+      type: String,
+      default: "Lending"
+    }
+  },
+  data() {
+    var e, s, n;
+    return {
+      mdiChevronRight: T,
+      defaultAmountOptions: [25, 50, 75],
+      selectedOption: g(
+        this.getCookie,
+        this.setCookie,
+        this.enableFiveDollarsNotes,
+        (s = (e = this.route) == null ? void 0 : e.query) == null ? void 0 : s.utm_campaign,
+        (n = this.loan) == null ? void 0 : n.unreservedAmount,
+        this.userBalance,
+        this.fiveDollarsSelected
+      ),
+      selectedDropdownOption: "Other"
+    };
+  },
+  computed: {
+    readMorePath() {
+      return this.customLoanDetails ? "" : `/lend/${this.loanId}`;
+    },
+    loanId() {
+      var e;
+      return (e = this.loan) == null ? void 0 : e.id;
+    },
+    status() {
+      var e;
+      return ((e = this.loan) == null ? void 0 : e.status) ?? "";
+    },
+    minNoteSize() {
+      var e;
+      return ((e = this.loan) == null ? void 0 : e.minNoteSize) ?? "";
+    },
+    unreservedAmount() {
+      var e;
+      return ((e = this.loan) == null ? void 0 : e.unreservedAmount) ?? "";
+    },
+    lentPreviously() {
+      var e, s;
+      return ((s = (e = this.loan) == null ? void 0 : e.userProperties) == null ? void 0 : s.lentTo) ?? !1;
+    },
+    isInBasket() {
+      var e;
+      return ((e = this.basketItems) == null ? void 0 : e.some((s) => s.__typename === "LoanReservation" && s.id === this.loanId)) ?? !1;
+    },
+    prices() {
+      const e = parseFloat(this.unreservedAmount < 25 ? this.minNoteSize : 25);
+      return x(
+        this.unreservedAmount,
+        this.isCompleteLoanActive,
+        e,
+        this.enableFiveDollarsNotes,
+        this.enableHugeAmount,
+        this.isVisitor
+      );
+    },
+    presetButtonsPrices() {
+      const e = this.prices.slice(0, 3);
+      return this.prices.length === 4 && e.push(this.prices[3]), e;
+    },
+    presetDropdownPrices() {
+      if (this.prices.length === 4)
+        return [];
+      const e = this.prices.slice(this.defaultAmountOptions.length);
+      return e.unshift("Other"), e;
+    },
+    loanName() {
+      var e;
+      return ((e = this.loan) == null ? void 0 : e.name) ?? "";
+    },
+    presetAmountCtaButtonText() {
+      var e;
+      return ((e = this.loan) == null ? void 0 : e.borrowerCount) > 1 ? "Support" : `Support ${this.loanName}`;
+    },
+    defaultCtaButtonText() {
+      return this.showPresetAmounts ? this.presetAmountCtaButtonText : this.primaryButtonText || "Lend";
+    },
+    ctaButtonText() {
+      switch (this.state) {
+        case "loading":
+          return "Loading...";
+        case "refunded":
+        case "expired":
+        default:
+          return this.defaultCtaButtonText;
+      }
+    },
+    loanInBasketButtonText() {
+      return this.showPresetAmounts ? "Continue to basket" : this.secondaryButtonText;
+    },
+    useFormSubmit() {
+      return !!(this.hideShowLendDropdown || this.lendButtonVisibility || this.showLendAgain || this.state === "lent-to" || this.isAdding);
+    },
+    state() {
+      return this.isLoading ? "loading" : this.isAdding ? "adding" : this.isInBasket ? "basketed" : this.status === "funded" || this.status === "refunded" || this.status === "expired" ? this.status : this.allSharesReserved ? "fully-reserved" : this.lentPreviously ? "lent-to" : "lend";
+    },
+    lendButtonVisibility() {
+      return this.state === "lend" || this.state === "loading";
+    },
+    showNonActionableLoanButton() {
+      return this.state === "refunded" || this.state === "expired";
+    },
+    hideShowLendDropdown() {
+      return this.state === "lend" || this.state === "lent-to";
+    },
+    allSharesReserved() {
+      return parseFloat(this.unreservedAmount) === 0;
+    },
+    isLessThan25() {
+      return this.enableFiveDollarsNotes ? !1 : this.isAmountLessThan25(this.unreservedAmount);
+    },
+    isLentTo() {
+      return this.state === "lent-to";
+    },
+    isCompleteLoanActive() {
+      return this.isAmountLessThan25(this.unreservedAmount) || this.isAmountBetween25And500(this.unreservedAmount);
+    },
+    isLendAmountButton() {
+      return (this.lendButtonVisibility || this.state === "lent-to") && this.isAmountLessThan25(this.unreservedAmount);
+    },
+    isFunded() {
+      return this.state === "funded" || this.state === "fully-reserved";
+    },
+    amountToLend() {
+      return this.selectedDropdown ? this.selectedDropdownOption : this.isLessThan25 ? this.unreservedAmount : this.selectedOption;
+    },
+    showLendAgain() {
+      return this.isLentTo && !this.isLessThan25;
+    },
+    selectedDropdown() {
+      return this.selectedDropdownOption !== "Other";
+    },
+    showFilteredDropdown() {
+      return this.presetDropdownPrices.length > 1;
+    }
+  },
+  watch: {
+    unreservedAmount(e, s) {
+      var n, k;
+      e !== s && s === "" && (this.selectedOption = g(
+        this.getCookie,
+        this.setCookie,
+        this.enableFiveDollarsNotes,
+        (k = (n = this.route) == null ? void 0 : n.query) == null ? void 0 : k.utm_campaign,
+        e,
+        this.userBalance,
+        this.fiveDollarsSelected,
+        this.showPresetAmounts
+      )), this.showPresetAmounts && (this.selectedOption = "Other");
+    }
+  },
+  methods: {
+    async addToBasket() {
+      this.kvTrackFunction(
+        this.kvTrackCategory,
+        "Add to basket",
+        this.showLendAgain ? "Lend again" : "lend-button-click",
+        this.loanId,
+        this.amountToLend
+      ), this.$emit("add-to-basket", this.amountToLend);
+    },
+    isAmountLessThan25(e) {
+      return e < 25 && e > 0;
+    },
+    isAmountBetween25And50(e) {
+      return e <= 50 && e > 25;
+    },
+    isAmountBetween25And500(e) {
+      return e < 500 && e >= 25;
+    },
+    trackLendAmountSelection(e) {
+      this.showPresetAmounts && (this.selectedOption = null), this.kvTrackFunction(
+        this.kvTrackCategory,
+        "Modify lend amount",
+        e,
+        this.loanId,
+        this.loanId
+      );
+    },
+    clickDropdown() {
+      this.kvTrackFunction(
+        this.kvTrackCategory,
+        "click-Modify loan amount",
+        "open dialog",
+        this.loanId,
+        this.loanId
+      );
+    },
+    clickSecondaryButton(e) {
+      this.secondaryButtonHandler ? (e.preventDefault(), e.stopPropagation(), this.secondaryButtonHandler()) : this.handleCheckout();
+    },
+    clickPresetButton(e) {
+      this.kvTrackFunction(
+        this.kvTrackCategory,
+        "Modify lend amount",
+        e,
+        this.loanId,
+        this.loanId
+      ), this.selectedOption = e;
+    },
+    handleCheckout() {
+      this.kvTrackFunction(
+        this.kvTrackCategory,
+        "click-Continue-to-checkout",
+        "Continue to checkout",
+        this.loanId,
+        this.loanId
+      );
+    }
+  }
+}, V = { class: "tw-whitespace-nowrap" }, O = {
+  key: 2,
+  class: "tw-w-full tw-text-center tw-rounded tw-p-2",
+  style: { background: "#f1f1f1" }
+}, N = { class: "tw-flex" }, M = ["disabled"], H = ["value"], K = {
+  key: 1,
+  class: "amountDropdownWrapper"
+}, R = ["value"];
+function U(e, s, n, k, f, t) {
+  const h = w("kv-ui-button"), L = w("kv-material-icon"), B = w("kv-ui-select"), b = w("kv-lend-amount-button");
+  return i(), a("div", V, [
+    t.isInBasket ? (i(), l(h, {
+      key: 0,
+      variant: "secondary",
+      class: d(["tw-inline-flex tw-flex-1", { "tw-w-full": n.showPresetAmounts }]),
+      "data-testid": "bp-lend-cta-checkout-button",
+      to: n.externalLinks ? void 0 : "/basket",
+      href: n.externalLinks ? "/basket" : void 0,
+      onClick: s[0] || (s[0] = (o) => t.clickSecondaryButton(o))
+    }, {
+      default: r(() => [
+        c(m(t.loanInBasketButtonText), 1)
+      ]),
+      _: 1
+    }, 8, ["class", "to", "href"])) : t.showNonActionableLoanButton ? (i(), l(h, {
+      key: 1,
+      class: "tw-inline-flex tw-flex-1"
+    }, {
+      default: r(() => [
+        c(m(t.ctaButtonText), 1)
+      ]),
+      _: 1
+    })) : t.isFunded ? (i(), a("div", O, " This loan was just funded! 🎉 ")) : n.showViewLoan ? (i(), l(h, {
+      key: 3,
+      state: `${t.allSharesReserved ? "disabled" : ""}`,
+      to: n.externalLinks ? void 0 : t.readMorePath,
+      href: n.externalLinks ? t.readMorePath : void 0,
+      class: "tw-mb-0",
+      onClick: s[1] || (s[1] = (o) => e.$emit("show-loan-details", o))
+    }, {
+      default: r(() => [
+        y("span", N, [
+          s[5] || (s[5] = c(" View loan ")),
+          S(L, {
+            class: "tw-w-3 tw-h-3 tw-align-middle",
+            icon: f.mdiChevronRight
+          }, null, 8, ["icon"])
+        ])
+      ]),
+      _: 1
+    }, 8, ["state", "to", "href"])) : t.useFormSubmit ? (i(), a("form", {
+      key: 4,
+      class: "tw-w-full tw-flex",
+      onSubmit: s[4] || (s[4] = A((...o) => t.addToBasket && t.addToBasket(...o), ["prevent"]))
+    }, [
+      y("fieldset", {
+        class: d(["tw-w-full tw-flex", { "tw-flex-col tw-gap-1.5 md:tw-flex-row md:tw-justify-between": n.showPresetAmounts }]),
+        disabled: n.isAdding,
+        "data-testid": "bp-lend-cta-select-and-button"
+      }, [
+        n.showPresetAmounts ? (i(), a("div", {
+          key: 0,
+          class: d(["tw-flex tw-gap-1 lg:tw-gap-2", { "tw-flex-wrap md:tw-flex-nowrap": n.enableHugeAmount }])
+        }, [
+          t.isLendAmountButton ? u("", !0) : (i(!0), a(v, { key: 0 }, p(t.presetButtonsPrices, (o) => (i(), l(h, {
+            key: o,
+            variant: "secondary",
+            class: d(["tw-inline-flex tw-flex-1 preset-option tw-w-8", { "selected-option": f.selectedOption == o }]),
+            "data-testid": "bp-lend-cta-lend-button",
+            onClick: (j) => t.clickPresetButton(o)
+          }, {
+            default: r(() => [
+              c(" $" + m(o), 1)
+            ]),
+            _: 2
+          }, 1032, ["class", "onClick"]))), 128)),
+          t.showFilteredDropdown ? (i(), l(B, {
+            key: 1,
+            id: `LoanAmountDropdown_${t.loanId}`,
+            modelValue: f.selectedDropdownOption,
+            "onUpdate:modelValue": [
+              s[2] || (s[2] = (o) => f.selectedDropdownOption = o),
+              t.trackLendAmountSelection
+            ],
+            class: d(["tw-min-w-12 tw-rounded filtered-dropdown", {
+              "unselected-dropdown": !t.selectedDropdown,
+              "selected-dropdown": t.selectedDropdown,
+              "tw-w-full": n.enableHugeAmount
+            }]),
+            "aria-label": "Lend amount",
+            onClick: A(t.clickDropdown, ["stop"])
+          }, {
+            default: r(() => [
+              (i(!0), a(v, null, p(t.presetDropdownPrices, (o) => (i(), a("option", {
+                key: o,
+                value: o
+              }, m(o !== "Other" ? `$${o}` : o), 9, H))), 128))
+            ]),
+            _: 1
+          }, 8, ["id", "modelValue", "class", "onUpdate:modelValue", "onClick"])) : u("", !0)
+        ], 2)) : n.showPresetAmounts ? u("", !0) : (i(), a("div", K, [
+          t.hideShowLendDropdown && !t.isLessThan25 ? (i(), l(B, {
+            key: 0,
+            id: `LoanAmountDropdown_${t.loanId}`,
+            modelValue: f.selectedOption,
+            "onUpdate:modelValue": [
+              s[3] || (s[3] = (o) => f.selectedOption = o),
+              t.trackLendAmountSelection
+            ],
+            class: "tw-min-w-12",
+            style: { "border-radius": "14px 0 0 14px" },
+            "aria-label": "Lend amount",
+            onClick: A(t.clickDropdown, ["stop"])
+          }, {
+            default: r(() => [
+              (i(!0), a(v, null, p(t.prices, (o) => (i(), a("option", {
+                key: o,
+                value: o
+              }, " $" + m(o), 9, R))), 128))
+            ]),
+            _: 1
+          }, 8, ["id", "modelValue", "onUpdate:modelValue", "onClick"])) : u("", !0)
+        ])),
+        y("div", {
+          class: d({
+            lendButtonWrapper: t.hideShowLendDropdown && !n.showPresetAmounts,
+            "tw-hidden": n.isAdding && n.showPresetAmounts
+          })
+        }, [
+          t.lendButtonVisibility && !t.isLessThan25 ? (i(), l(h, {
+            key: "lendButton",
+            class: d(["tw-inline-flex tw-flex-1", { "tw-w-full": n.showPresetAmounts }]),
+            "data-testid": "bp-lend-cta-lend-button",
+            type: "submit"
+          }, {
+            default: r(() => [
+              c(m(t.ctaButtonText), 1)
+            ]),
+            _: 1
+          }, 8, ["class"])) : t.showLendAgain ? (i(), l(h, {
+            key: "lendAgainButton",
+            class: d(["lend-again", { "tw-w-full": n.showPresetAmounts }]),
+            "data-testid": "bp-lend-cta-lend-again-button",
+            type: "submit"
+          }, {
+            default: r(() => [
+              c(m(n.primaryButtonText || "Lend") + " again ", 1)
+            ]),
+            _: 1
+          }, 8, ["class"])) : u("", !0)
+        ], 2),
+        t.isLendAmountButton && !n.enableFiveDollarsNotes ? (i(), l(b, {
+          key: 2,
+          class: "tw-w-full",
+          "loan-id": t.loanId,
+          "show-now": !1,
+          "amount-left": t.unreservedAmount,
+          "is-adding": n.isAdding,
+          onAddToBasket: t.addToBasket
+        }, null, 8, ["loan-id", "amount-left", "is-adding", "onAddToBasket"])) : u("", !0),
+        !n.isLoading && n.isAdding ? (i(), l(h, {
+          key: 3,
+          class: "tw-inline-flex tw-flex-1"
+        }, {
+          default: r(() => s[6] || (s[6] = [
+            c(" Adding to basket ")
+          ])),
+          _: 1
+        })) : u("", !0)
+      ], 10, M)
+    ], 32)) : u("", !0)
+  ]);
+}
+const Z = /* @__PURE__ */ F(I, [["render", U], ["__scopeId", "data-v-e8a71378"]]);
+export {
+  Z as default
+};

package/dist/vue/KvLightbox.js

@@ -0,0 +1,195 @@
+import { toRefs as L, ref as u, nextTick as y, computed as E, watch as K, onMounted as M, onBeforeUnmount as N, resolveComponent as P, openBlock as b, createBlock as R, Transition as V, withCtx as j, withDirectives as q, createElementVNode as o, withModifiers as g, normalizeClass as p, renderSlot as k, toDisplayString as z, createElementBlock as C, createVNode as D, createCommentVNode as S, vShow as I } from "vue";
+import { mdiClose as O } from "@mdi/js";
+import { useFocusTrap as T } from "@vueuse/integrations/useFocusTrap";
+import { hideOthers as U } from "../node_modules/aria-hidden/dist/es2015/index.js";
+import { unlockScroll as A, lockScroll as G } from "../utils/scrollLock.js";
+import { unlockPrintSingleEl as H, lockPrintSingleEl as J } from "../utils/printing.js";
+import Q from "./KvMaterialIcon.js";
+import W from "../_virtual/_plugin-vue_export-helper.js";
+const X = {
+  components: {
+    KvMaterialIcon: Q
+  },
+  props: {
+    /**
+     * Whether the dialog is open or not
+     * */
+    visible: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Appearance and role of the lightbox
+     * @values lightbox, alert
+     * */
+    variant: {
+      type: String,
+      default: "lightbox",
+      validator(i) {
+        return ["lightbox", "alert"].includes(i);
+      }
+    },
+    /**
+     * The title of the dialog which describes the dialog to screenreaders, and if no
+     * content is in the `header` slot, will be displayed at the top of the lightbox.
+     * */
+    title: {
+      type: String,
+      required: !0
+    },
+    /**
+     * The dialog has no close X button, clicking the screen does not close,
+     * pressing ESC does not close.
+     * */
+    preventClose: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [
+    "lightbox-closed"
+  ],
+  setup(i, { emit: e }) {
+    const {
+      visible: t,
+      variant: a,
+      preventClose: h
+    } = L(i), s = u(null), n = u(null), c = u(null), w = u(null), v = u(null);
+    y(() => {
+      const {
+        activate: l,
+        deactivate: r
+      } = T([
+        s.value,
+        // This lightbox
+        '[role="alert"]'
+        // Any open toasts/alerts on the page
+      ], {
+        allowOutsideClick: !0
+        // allow clicking outside the lightbox to close it
+      });
+      w.value = l, v.value = r;
+    });
+    let m = null, f = null;
+    const _ = E(() => a.value === "alert" ? "alertdialog" : "dialog"), d = (l = "") => {
+      var r;
+      s.value && n.value && ((r = v.value) == null || r.call(v), n.value.scrollTop = 0, H(n.value)), A(), m && (m(), m = null), document.removeEventListener("keyup", f), e("lightbox-closed", { type: l });
+    };
+    f = (l) => {
+      l && l.key === "Escape" && !h.value && d();
+    };
+    const B = () => {
+      h.value || d("background-click");
+    }, x = () => {
+      t.value && (document.addEventListener("keyup", f), y(() => {
+        var l;
+        if (s.value && n.value && ((l = w.value) == null || l.call(w), m = U(s.value), J(n.value)), G(), a.value === "alert") {
+          const r = c.value.querySelector("button");
+          r && r.focus();
+        }
+      }));
+    };
+    return K(t, () => {
+      t.value ? x() : d();
+    }), M(() => {
+      t.value && x();
+    }), N(() => d()), {
+      mdiClose: O,
+      role: _,
+      kvLightbox: s,
+      kvLightboxBody: n,
+      onKeyUp: f,
+      onScreenClick: B,
+      hide: d,
+      show: x,
+      controlsRef: c
+    };
+  }
+}, Y = ["aria-label", "aria-describedby", "role"], Z = { class: "tw-flex tw-p-2.5 md:tw-px-4 md:tw-pt-4 md:tw-pb-3.5" }, F = { class: "tw-flex-grow" }, $ = { class: "tw-text-h3 tw-flex-1" }, tt = {
+  id: "kvLightboxBody",
+  ref: "kvLightboxBody",
+  class: "tw-flex-1 tw-px-2.5 md:tw-px-4 tw-pb-2.5 md:tw-pb-4 tw-overflow-auto"
+}, et = {
+  key: 0,
+  ref: "controlsRef",
+  class: "tw-flex-shrink-0 tw-flex tw-justify-end tw-gap-x-2.5 tw-p-2.5 md:tw-px-4 md:tw-pb-4 md:tw-pt-1"
+};
+function lt(i, e, t, a, h, s) {
+  const n = P("kv-material-icon");
+  return b(), R(V, {
+    "enter-active-class": "tw-transition-opacity tw-duration-300",
+    "leave-active-class": "tw-transition-opacity tw-duration-300",
+    "enter-class": "tw-opacity-0",
+    "enter-to-class": "tw-opacity-full",
+    "leave-class": "tw-opacity-full",
+    "leave-to-class": "tw-opacity-0"
+  }, {
+    default: j(() => [
+      q(o("div", {
+        class: "tw-z-modal tw-fixed tw-inset-0 tw-bg-black tw-bg-opacity-[75%]",
+        onClick: e[2] || (e[2] = g((...c) => a.onScreenClick && a.onScreenClick(...c), ["stop", "prevent"]))
+      }, [
+        o("div", null, [
+          o("div", {
+            class: p(["tw-flex tw-absolute tw-inset-0", {
+              "md:tw-px-2": t.variant === "lightbox",
+              "tw-px-2": t.variant === "alert"
+            }])
+          }, [
+            o("div", {
+              ref: "kvLightbox",
+              tabindex: "-1",
+              "data-test": "kv-lightbox",
+              class: p(["tw-bg-primary tw-flex tw-flex-col tw-mx-auto md:tw-my-auto", {
+                "tw-w-full md:tw-w-auto": t.variant === "lightbox",
+                "tw-mt-auto md:tw-my-auto": t.variant === "lightbox",
+                "tw-min-h-half-screen md:tw-min-h-0": t.variant === "lightbox",
+                "tw-rounded-t md:tw-rounded": t.variant === "lightbox",
+                "tw-my-auto tw-rounded": t.variant === "alert"
+              }]),
+              style: { "max-width": "55.55rem", "max-height": "90%" },
+              "aria-modal": "true",
+              "aria-label": t.title ? t.title : null,
+              "aria-describedby": t.variant === "alert" ? "kvLightboxBody" : null,
+              role: a.role,
+              onClick: e[1] || (e[1] = g(() => {
+              }, ["stop"]))
+            }, [
+              o("div", Z, [
+                o("div", F, [
+                  k(i.$slots, "header", {}, () => [
+                    o("h2", $, z(t.title), 1)
+                  ])
+                ]),
+                t.preventClose ? S("", !0) : (b(), C("button", {
+                  key: 0,
+                  class: "tw-grid tw-content-center tw-justify-center tw-ml-auto tw-w-6 tw-h-6 tw--m-2 hover:tw-text-action-highlight",
+                  onClick: e[0] || (e[0] = g((c) => a.hide("close-x"), ["stop"]))
+                }, [
+                  D(n, {
+                    class: "tw-w-3 tw-h-3",
+                    icon: a.mdiClose
+                  }, null, 8, ["icon"]),
+                  e[3] || (e[3] = o("span", { class: "tw-sr-only" }, "Close", -1))
+                ]))
+              ]),
+              o("div", tt, [
+                k(i.$slots, "default")
+              ], 512),
+              i.$slots.controls ? (b(), C("div", et, [
+                k(i.$slots, "controls")
+              ], 512)) : S("", !0)
+            ], 10, Y)
+          ], 2)
+        ])
+      ], 512), [
+        [I, t.visible]
+      ])
+    ]),
+    _: 3
+  });
+}
+const ut = /* @__PURE__ */ W(X, [["render", lt]]);
+export {
+  ut as default
+};