@kiva/kv-components 6.15.0 → 6.16.1

package/dist/utils/imageUtils.js

@@ -1,11 +1,12 @@
-function r(o) {
+import a from "./Alea.js";
+function c(o) {
   if (!o)
     return !1;
   let t = o.toString();
   return t.includes(".") && ([t] = t.split(".")), ["726677", "315726", "4d844ac2c0b77a8a522741b908ea5c32"].includes(t);
 }
-function a() {
-  const o = [
+function l(o = "") {
+  const t = new a(o), e = [
     { color: "tw-text-action", bg: "tw-bg-brand-100" },
     { color: "tw-text-black", bg: "tw-bg-brand-100" },
     { color: "tw-text-white", bg: "tw-bg-action" },
@@ -13,10 +14,10 @@ function a() {
     { color: "tw-text-primary-inverse", bg: "tw-bg-action" },
     { color: "tw-text-white", bg: "tw-bg-black" },
     { color: "tw-text-action", bg: "tw-bg-black" }
-  ], t = o[Math.floor(Math.random() * o.length)];
-  return `${t.color} ${t.bg}`;
+  ], r = e[Math.floor(t() * e.length)];
+  return `${r.color} ${r.bg}`;
 }
 export {
-  r as isLegacyPlaceholderAvatar,
-  a as randomizedUserAvatarClass
+  c as isLegacyPlaceholderAvatar,
+  l as randomizedUserAvatarClass
 };

package/dist/utils/loanCard.js

@@ -1,8 +1,9 @@
 import R from "graphql-tag";
-import ee from "numeral";
-import { toRefs as ne, computed as n } from "vue";
-import { mdiMapMarker as Le } from "@mdi/js";
-const ye = "N/A", te = "ECO-FRIENDLY", ae = "SUSTAINABLE AG", oe = "SINGLE PARENT", Ee = "REFUGEES/DISPLACED", P = (c, p) => (c == null ? void 0 : c.find((v) => v.name.replace("#", "").toUpperCase() === p.toUpperCase())) ?? {}, Pe = R`
+import ae from "numeral";
+import { toRefs as se, computed as n } from "vue";
+import { mdiMapMarker as ye } from "@mdi/js";
+import Ee from "./Alea.js";
+const Ue = "N/A", oe = "ECO-FRIENDLY", ne = "SUSTAINABLE AG", le = "SINGLE PARENT", Ne = "REFUGEES/DISPLACED", P = (c, v) => (c == null ? void 0 : c.find((f) => f.name.replace("#", "").toUpperCase() === v.toUpperCase())) ?? {}, _e = R`
 	fragment LoanCallouts on LoanBasic {
 		id
 		activity {
@@ -19,7 +20,7 @@ const ye = "N/A", te = "ECO-FRIENDLY", ae = "SUSTAINABLE AG", oe = "SINGLE PAREN
 			themes
 		}
 	}
-`, Re = R`
+`, Se = R`
 	fragment LoanGeocode on LoanBasic {
 		id
 		geocode {
@@ -31,7 +32,7 @@ const ye = "N/A", te = "ECO-FRIENDLY", ae = "SUSTAINABLE AG", oe = "SINGLE PAREN
 			}
 		}
 	}
-`, Me = R`
+`, De = R`
 	fragment LoanProgress on LoanBasic {
 		id
 		loanAmount
@@ -42,124 +43,124 @@ const ye = "N/A", te = "ECO-FRIENDLY", ae = "SUSTAINABLE AG", oe = "SINGLE PAREN
 		}
 	}
 `;
-function Fe(c, p = !1) {
+function Me(c, v = !1) {
   const {
-    externalLinks: v,
+    externalLinks: f,
     customLoanDetails: L,
-    loanId: h,
+    loanId: m,
     loan: t,
-    categoryPageName: d,
+    categoryPageName: p,
     customCallouts: y
-  } = ne(c), se = n(() => v.value ? "a" : "router-link"), le = n(() => L.value ? "" : `/lend/${h.value}`), M = n(() => !h.value || !t.value), re = n(() => {
+  } = se(c), re = n(() => f.value ? "a" : "router-link"), ue = n(() => L.value ? "" : `/lend/${m.value}`), F = n(() => !m.value || !t.value), ie = n(() => {
     var e;
     return ((e = t.value) == null ? void 0 : e.name) || "";
-  }), f = n(() => {
-    var e, a, s;
-    return ((s = (a = (e = t.value) == null ? void 0 : e.geocode) == null ? void 0 : a.country) == null ? void 0 : s.name) || "";
-  }), ue = n(() => {
-    var e, a, s;
-    return ((s = (a = (e = t.value) == null ? void 0 : e.geocode) == null ? void 0 : a.country) == null ? void 0 : s.isoCode) || "";
+  }), g = n(() => {
+    var e, a, l;
+    return ((l = (a = (e = t.value) == null ? void 0 : e.geocode) == null ? void 0 : a.country) == null ? void 0 : l.name) || "";
+  }), ce = n(() => {
+    var e, a, l;
+    return ((l = (a = (e = t.value) == null ? void 0 : e.geocode) == null ? void 0 : a.country) == null ? void 0 : l.isoCode) || "";
   }), E = n(() => {
     var e, a;
     return ((a = (e = t.value) == null ? void 0 : e.geocode) == null ? void 0 : a.city) || "";
-  }), F = n(() => {
+  }), _ = n(() => {
     var e, a;
     return ((a = (e = t.value) == null ? void 0 : e.geocode) == null ? void 0 : a.state) || "";
-  }), _ = n(() => {
+  }), S = n(() => {
     var e;
     return ((e = t.value) == null ? void 0 : e.distributionModel) || "";
-  }), ie = n(() => {
+  }), de = n(() => {
     var e, a;
     return ((a = (e = t.value) == null ? void 0 : e.image) == null ? void 0 : a.hash) ?? "";
   }), U = n(() => {
-    var e, a, s, u, m;
-    return typeof ((e = t.value) == null ? void 0 : e.loanAmount) < "u" && typeof ((s = (a = t.value) == null ? void 0 : a.loanFundraisingInfo) == null ? void 0 : s.fundedAmount) < "u" && typeof ((m = (u = t.value) == null ? void 0 : u.loanFundraisingInfo) == null ? void 0 : m.reservedAmount) < "u";
-  }), ce = n(() => !M.value && U.value), de = n(() => {
-    if (_.value === "direct") {
-      const e = p && f.value.toLowerCase() === "united states" ? "" : `, ${f.value}`;
-      return `${E.value}, ${F.value}${e}`;
+    var e, a, l, u, d;
+    return typeof ((e = t.value) == null ? void 0 : e.loanAmount) < "u" && typeof ((l = (a = t.value) == null ? void 0 : a.loanFundraisingInfo) == null ? void 0 : l.fundedAmount) < "u" && typeof ((d = (u = t.value) == null ? void 0 : u.loanFundraisingInfo) == null ? void 0 : d.reservedAmount) < "u";
+  }), pe = n(() => !F.value && U.value), ve = n(() => {
+    if (S.value === "direct") {
+      const e = v && g.value.toLowerCase() === "united states" ? "" : `, ${g.value}`;
+      return `${E.value}, ${_.value}${e}`;
     }
-    return f.value === "Puerto Rico" ? `${E.value}, PR` : f.value;
-  }), pe = n(() => {
+    return g.value === "Puerto Rico" ? `${E.value}, PR` : g.value;
+  }), fe = n(() => {
     var e;
     return ((e = t.value) == null ? void 0 : e.use) ?? "";
-  }), ve = n(() => {
+  }), me = n(() => {
     var e;
     return ((e = t.value) == null ? void 0 : e.status) ?? "";
   }), C = n(() => {
     var e;
     return ((e = t.value) == null ? void 0 : e.loanAmount) ?? "0";
   }), N = n(() => {
-    var e, a, s, u;
-    return ee(((a = (e = t.value) == null ? void 0 : e.loanFundraisingInfo) == null ? void 0 : a.reservedAmount) ?? "0").add(((u = (s = t.value) == null ? void 0 : s.loanFundraisingInfo) == null ? void 0 : u.fundedAmount) ?? "0");
-  }), fe = n(() => N.value.clone().divide(C.value).value()), S = n(() => U.value && C.value - N.value.value() > 0), me = n(() => S.value ? ee(C.value).subtract(N.value.value()).format("0.00") : "0"), ge = n(() => {
+    var e, a, l, u;
+    return ae(((a = (e = t.value) == null ? void 0 : e.loanFundraisingInfo) == null ? void 0 : a.reservedAmount) ?? "0").add(((u = (l = t.value) == null ? void 0 : l.loanFundraisingInfo) == null ? void 0 : u.fundedAmount) ?? "0");
+  }), D = n(() => N.value.clone().divide(C.value).value()), M = n(() => U.value && C.value - N.value.value() > 0), ge = n(() => M.value ? ae(C.value).subtract(N.value.value()).format("0.00") : "0"), he = n(() => {
     var e;
     return ((e = t.value) == null ? void 0 : e.borrowerCount) ?? 0;
-  }), he = n(() => {
-    var G, O, k, Y, B, $, w, K, x, q, H, j, z, J, Q, V, W, X, Z;
-    const e = [], a = ((O = (G = t.value) == null ? void 0 : G.activity) == null ? void 0 : O.name) ?? "", s = ((Y = (k = t.value) == null ? void 0 : k.activity) == null ? void 0 : Y.id) ?? null, u = (($ = (B = t.value) == null ? void 0 : B.sector) == null ? void 0 : $.name) ?? "", m = ((K = (w = t.value) == null ? void 0 : w.sector) == null ? void 0 : K.id) ?? null, i = ((q = (x = t.value) == null ? void 0 : x.tags) == null ? void 0 : q.filter((o) => o.charAt(0) === "#").map((o) => o.substring(1))) ?? [], A = ((H = t.value) == null ? void 0 : H.themes) ?? [], b = {
-      ecoFriendly: !!i.filter((o) => o.toUpperCase() === te || o.toUpperCase() === ae).length,
-      refugeesIdps: !!A.filter((o) => o.toUpperCase() === Ee).length,
-      singleParents: !!i.filter((o) => o.toUpperCase() === oe).length
-    }, D = (z = (j = t.value) == null ? void 0 : j.partnerName) == null ? void 0 : z.toUpperCase().includes(ye), T = ((J = t.value) == null ? void 0 : J.tagsData) ?? [], Ce = ((Q = t.value) == null ? void 0 : Q.themesData) ?? [];
-    if (D && i.length) {
-      const o = Math.floor(Math.random() * i.length), l = i[o], r = P(T, l), g = (r == null ? void 0 : r.id) ?? null;
-      e.push({ label: l, type: "tag", id: g });
+  }), Ce = n(() => {
+    var k, Y, w, B, $, K, x, q, H, j, z, J, Q, V, W, X, Z, ee, te;
+    const e = [], a = new Ee(m.value, D.value), l = ((Y = (k = t.value) == null ? void 0 : k.activity) == null ? void 0 : Y.name) ?? "", u = ((B = (w = t.value) == null ? void 0 : w.activity) == null ? void 0 : B.id) ?? null, d = ((K = ($ = t.value) == null ? void 0 : $.sector) == null ? void 0 : K.name) ?? "", T = ((q = (x = t.value) == null ? void 0 : x.sector) == null ? void 0 : q.id) ?? null, i = ((j = (H = t.value) == null ? void 0 : H.tags) == null ? void 0 : j.filter((o) => o.charAt(0) === "#").map((o) => o.substring(1))) ?? [], A = ((z = t.value) == null ? void 0 : z.themes) ?? [], b = {
+      ecoFriendly: !!i.filter((o) => o.toUpperCase() === oe || o.toUpperCase() === ne).length,
+      refugeesIdps: !!A.filter((o) => o.toUpperCase() === Ne).length,
+      singleParents: !!i.filter((o) => o.toUpperCase() === le).length
+    }, G = (Q = (J = t.value) == null ? void 0 : J.partnerName) == null ? void 0 : Q.toUpperCase().includes(Ue), O = ((V = t.value) == null ? void 0 : V.tagsData) ?? [], Ae = ((W = t.value) == null ? void 0 : W.themesData) ?? [];
+    if (G && i.length) {
+      const o = Math.floor(a() * i.length), s = i[o], r = P(O, s), h = (r == null ? void 0 : r.id) ?? null;
+      e.push({ label: s, type: "tag", id: h });
     }
-    if (d.value || (b.ecoFriendly && !e.find((o) => o.label.toUpperCase() === te || o.label.toUpperCase() === ae) ? e.push({ label: "Eco-friendly", type: "tag", id: 9 }) : b.refugeesIdps ? e.push({ label: "Refugees and IDPs", type: "attribute", id: 28 }) : b.singleParents && !e.find((o) => o.label.toUpperCase() === oe) && e.push({ label: "Single Parent", type: "tag", id: 17 })), a && s && ((V = d.value) == null ? void 0 : V.toUpperCase()) !== a.toUpperCase() && e.push({ id: s, label: a, type: "activity" }), u && m && a.toUpperCase() !== u.toUpperCase() && u.toUpperCase() !== ((W = d.value) == null ? void 0 : W.toUpperCase()) && e.length < 2 && e.push({ id: m, label: u, type: "sector" }), i.length && e.length < 2) {
-      const o = Math.floor(Math.random() * i.length), l = i[o], r = P(T, l), g = (r == null ? void 0 : r.id) ?? null;
-      e.filter((I) => I.label.toUpperCase() === l.toUpperCase()).length || e.push({ label: l, type: "tag", id: g });
+    if (p.value || (b.ecoFriendly && !e.find((o) => o.label.toUpperCase() === oe || o.label.toUpperCase() === ne) ? e.push({ label: "Eco-friendly", type: "tag", id: 9 }) : b.refugeesIdps ? e.push({ label: "Refugees and IDPs", type: "attribute", id: 28 }) : b.singleParents && !e.find((o) => o.label.toUpperCase() === le) && e.push({ label: "Single Parent", type: "tag", id: 17 })), l && u && ((X = p.value) == null ? void 0 : X.toUpperCase()) !== l.toUpperCase() && e.push({ id: u, label: l, type: "activity" }), d && T && l.toUpperCase() !== d.toUpperCase() && d.toUpperCase() !== ((Z = p.value) == null ? void 0 : Z.toUpperCase()) && e.length < 2 && e.push({ id: T, label: d, type: "sector" }), i.length && e.length < 2) {
+      const o = Math.floor(a() * i.length), s = i[o], r = P(O, s), h = (r == null ? void 0 : r.id) ?? null;
+      e.filter((I) => I.label.toUpperCase() === s.toUpperCase()).length || e.push({ label: s, type: "tag", id: h });
     }
     if (A.length && e.length < 2) {
-      const o = Math.floor(Math.random() * A.length), l = A[o], r = P(Ce, l), g = (r == null ? void 0 : r.id) ?? null;
-      !e.filter((I) => I.label.toUpperCase() === l.toUpperCase()).length && l.toUpperCase() !== ((X = d.value) == null ? void 0 : X.toUpperCase()) && e.push({ label: l, type: "attribute", id: g });
+      const o = Math.floor(a() * A.length), s = A[o], r = P(Ae, s), h = (r == null ? void 0 : r.id) ?? null;
+      !e.filter((I) => I.label.toUpperCase() === s.toUpperCase()).length && s.toUpperCase() !== ((ee = p.value) == null ? void 0 : ee.toUpperCase()) && e.push({ label: s, type: "attribute", id: h });
     }
-    if (D && e.length > 1) return [e.shift()];
-    const Ae = ((Z = y.value) == null ? void 0 : Z.map((o) => ({ label: o }))) ?? [];
-    return e.push(...Ae), e;
+    if (G && e.length > 1) return [e.shift()];
+    const Le = ((te = y.value) == null ? void 0 : te.map((o) => ({ label: o }))) ?? [];
+    return e.push(...Le), e;
   });
   return {
-    tag: se,
-    readMorePath: le,
-    isLoading: M,
-    borrowerName: re,
-    countryName: f,
-    countryCode: ue,
+    tag: re,
+    readMorePath: ue,
+    isLoading: F,
+    borrowerName: ie,
+    countryName: g,
+    countryCode: ce,
     city: E,
-    state: F,
-    distributionModel: _,
-    imageHash: ie,
+    state: _,
+    distributionModel: S,
+    imageHash: de,
     hasProgressData: U,
-    allDataLoaded: ce,
-    fundraisingPercent: fe,
-    unreservedAmount: me,
-    sharesAvailable: S,
-    formattedLocation: de,
-    loanUse: pe,
-    loanStatus: ve,
+    allDataLoaded: pe,
+    fundraisingPercent: D,
+    unreservedAmount: ge,
+    sharesAvailable: M,
+    formattedLocation: ve,
+    loanUse: fe,
+    loanStatus: me,
     loanAmount: C,
-    loanBorrowerCount: ge,
-    mdiMapMarker: Le,
-    loanCallouts: he
+    loanBorrowerCount: he,
+    mdiMapMarker: ye,
+    loanCallouts: Ce
   };
 }
-function _e(c, p) {
+function Te(c, v) {
   const {
-    loanId: v,
+    loanId: f,
     customLoanDetails: L,
-    kvTrackFunction: h
-  } = ne(c);
-  function t(d, y) {
-    h.value("Lending", "click-Read more", d, v.value), L.value && (y.preventDefault(), p("show-loan-details"));
+    kvTrackFunction: m
+  } = se(c);
+  function t(p, y) {
+    m.value("Lending", "click-Read more", p, f.value), L.value && (y.preventDefault(), v("show-loan-details"));
   }
   return {
     clickReadMore: t
   };
 }
 export {
-  Pe as LOAN_CALLOUTS_FRAGMENT,
-  Re as LOAN_GEOCODE_FRAGMENT,
-  Me as LOAN_PROGRESS_FRAGMENT,
-  Fe as loanCardComputedProperties,
-  _e as loanCardMethods
+  _e as LOAN_CALLOUTS_FRAGMENT,
+  Se as LOAN_GEOCODE_FRAGMENT,
+  De as LOAN_PROGRESS_FRAGMENT,
+  Me as loanCardComputedProperties,
+  Te as loanCardMethods
 };

package/dist/vue/KvSideSheet.js

@@ -1,10 +1,10 @@
-import { toRefs as T, ref as f, watch as E, resolveComponent as B, openBlock as g, createElementBlock as S, normalizeClass as c, withModifiers as _, createElementVNode as d, normalizeStyle as z, createVNode as b, createCommentVNode as C, renderSlot as F } from "vue";
-import { mdiClose as K, mdiLaunch as N } from "@mdi/js";
-import V from "./KvMaterialIcon.js";
-import j from "../_virtual/_plugin-vue_export-helper.js";
+import { toRefs as T, ref as h, watch as B, resolveComponent as _, openBlock as d, createElementBlock as f, normalizeClass as r, withModifiers as j, createElementVNode as a, normalizeStyle as V, createVNode as v, toDisplayString as z, createCommentVNode as u, renderSlot as C } from "vue";
+import { mdiClose as F, mdiArrowLeft as K, mdiExportVariant as N } from "@mdi/js";
+import R from "./KvMaterialIcon.js";
+import A from "../_virtual/_plugin-vue_export-helper.js";
 const G = {
   components: {
-    KvMaterialIcon: V
+    KvMaterialIcon: R
   },
   props: {
     /**
@@ -41,6 +41,13 @@ const G = {
     animationSourceElement: {
       type: Object,
       default: () => ({})
+    },
+    /**
+     * The headline of the side sheet
+     */
+    headline: {
+      type: String,
+      default: ""
     }
   },
   emits: [
@@ -48,116 +55,146 @@ const G = {
   ],
   setup(w, { emit: o }) {
     const {
-      visible: a,
+      visible: s,
       kvTrackFunction: t,
-      trackEventCategory: m,
-      animationSourceElement: r
-    } = T(w), n = f(!1), i = f({}), s = f({});
-    let u = null;
-    const v = () => {
-      const l = "tw-overflow-hidden";
-      n.value ? document.body.classList.add(l) : document.body.classList.remove(l);
-    }, y = () => {
-      n.value = !1, v(), t.value(m.value, "click", "side-sheet-closed"), r.value && (s.value = {
+      trackEventCategory: p,
+      animationSourceElement: y
+    } = T(w), l = h(!1), i = h({}), c = h({});
+    let m = null;
+    const g = () => {
+      const n = "tw-overflow-hidden";
+      l.value ? document.body.classList.add(n) : document.body.classList.remove(n);
+    }, k = () => {
+      l.value = !1, g(), t.value(p.value, "click", "side-sheet-closed"), y.value && (c.value = {
         ...i.value,
         transition: "all 0.5s ease-in-out"
       }), setTimeout(() => {
         o("side-sheet-closed");
-      }, "700"), document.removeEventListener("keyup", u);
-    }, x = () => {
+      }, "700"), document.removeEventListener("keyup", m);
+    }, E = () => {
       o("go-to-link");
     };
-    return u = (l) => {
-      l && l.key === "Escape" && y();
-    }, E(a, () => {
-      var l;
-      if (a.value) {
-        document.addEventListener("keyup", u), setTimeout(() => {
-          n.value = !0, v();
+    return m = (n) => {
+      n && n.key === "Escape" && k();
+    }, B(s, () => {
+      var n;
+      if (s.value) {
+        document.addEventListener("keyup", m), setTimeout(() => {
+          l.value = !0, g();
         }, 100);
-        const e = (l = r.value) == null ? void 0 : l.getBoundingClientRect(), h = (e == null ? void 0 : e.top) ?? 0, L = (e == null ? void 0 : e.left) ?? 0, p = (e == null ? void 0 : e.width) ?? 0, k = (e == null ? void 0 : e.height) ?? 0;
-        h || L || p || k ? (i.value = {
+        const e = (n = y.value) == null ? void 0 : n.getBoundingClientRect(), S = (e == null ? void 0 : e.top) ?? 0, L = (e == null ? void 0 : e.left) ?? 0, b = (e == null ? void 0 : e.width) ?? 0, x = (e == null ? void 0 : e.height) ?? 0;
+        S || L || b || x ? (i.value = {
           position: "fixed",
-          top: `${h}px`,
-          width: `${p}px`,
-          height: `${k}px`
-        }, s.value = {
+          top: `${S}px`,
+          width: `${b}px`,
+          height: `${x}px`
+        }, c.value = {
           ...i.value,
           transition: "none"
         }, setTimeout(() => {
-          s.value = {
+          c.value = {
             top: "0",
             width: "100%",
             height: "100%",
             transition: "all 0.5s ease-in-out"
           };
-        }, 10)) : s.value = {};
+        }, 10)) : c.value = {};
       }
     }), {
-      mdiClose: K,
-      mdiLaunch: N,
-      open: n,
-      closeSideSheet: y,
-      goToLink: x,
-      modalStyles: s
+      mdiClose: F,
+      mdiArrowLeft: K,
+      mdiExportVariant: N,
+      open: l,
+      closeSideSheet: k,
+      goToLink: E,
+      modalStyles: c
     };
   }
-};
-function M(w, o, a, t, m, r) {
-  const n = B("kv-material-icon");
-  return a.visible ? (g(), S("div", {
+}, M = { class: "tw-flex tw-items-cente tw-gap-1.5" }, D = { key: 0 }, I = { class: "tw-flex tw-items-cente tw-gap-1.5" };
+function O(w, o, s, t, p, y) {
+  const l = _("kv-material-icon");
+  return s.visible ? (d(), f("div", {
     key: 0,
-    class: c(["tw-block lg:tw-mt-0 tw-fixed tw-inset-0 tw-bg-black tw-transition-all md:tw-duration-150 tw-z-modal", {
+    class: r(["tw-block lg:tw-mt-0 tw-fixed tw-inset-0 tw-bg-black tw-transition-all md:tw-duration-150 tw-z-modal", {
       "tw-bg-opacity-0 tw-delay-300": !t.open,
       "tw-bg-opacity-low": t.open
     }]),
-    onClick: o[2] || (o[2] = _((...i) => t.closeSideSheet && t.closeSideSheet(...i), ["self"]))
+    onClick: o[3] || (o[3] = j((...i) => t.closeSideSheet && t.closeSideSheet(...i), ["self"]))
   }, [
-    d("div", {
-      class: c(["tw-fixed tw-right-0 tw-transition-all tw-duration-300 tw-bg-white tw-overflow-y-auto tw-p-2", {
+    a("div", {
+      class: r(["tw-fixed tw-right-0 tw-transition-all tw-duration-300 tw-bg-white tw-overflow-y-auto", {
         "tw-w-0 tw-delay-200 tw-opacity-0": !t.open,
-        "lg:tw-w-1/2 tw-w-full tw-opacity-full": t.open
-      }]),
-      style: z(t.modalStyles)
+        "lg:tw-w-1/2 tw-w-full tw-opacity-full": t.open,
+        "tw-h-full": w.$slots.controls
+      }])
     }, [
-      d("div", {
-        class: c(["tw-flex tw-justify-between tw-transition-opacity tw-duration-500 tw-delay-200", {
-          "tw-opacity-0": !t.open,
-          "tw-opacity-full": t.open
-        }])
+      a("div", {
+        class: "tw-relative tw-h-full",
+        style: V(t.modalStyles)
       }, [
-        d("button", {
-          class: "hover:tw-text-action-highlight",
-          onClick: o[0] || (o[0] = (...i) => t.closeSideSheet && t.closeSideSheet(...i))
+        a("div", {
+          class: r(["tw-flex tw-justify-between tw-transition-opacity tw-duration-500 tw-delay-200 tw-px-3 tw-py-2 tw-border-b tw-border-tertiary", {
+            "tw-opacity-0": !t.open,
+            "tw-opacity-full": t.open
+          }])
         }, [
-          b(n, {
-            class: "tw-w-3 tw-h-3",
-            icon: t.mdiClose
-          }, null, 8, ["icon"])
-        ]),
-        a.showGoToLink ? (g(), S("button", {
+          a("div", M, [
+            a("button", {
+              class: "hover:tw-text-action-highlight tw-flex tw-items-center tw-justify-center",
+              onClick: o[0] || (o[0] = (...i) => t.closeSideSheet && t.closeSideSheet(...i))
+            }, [
+              v(l, {
+                class: "tw-w-3 tw-h-3",
+                icon: t.mdiArrowLeft
+              }, null, 8, ["icon"])
+            ]),
+            s.headline ? (d(), f("h2", D, z(s.headline), 1)) : u("", !0)
+          ]),
+          a("div", I, [
+            s.showGoToLink ? (d(), f("button", {
+              key: 0,
+              class: "hover:tw-text-action-highlight tw-flex tw-items-center tw-justify-center",
+              onClick: o[1] || (o[1] = (...i) => t.goToLink && t.goToLink(...i))
+            }, [
+              v(l, {
+                class: "tw-w-3 tw-h-3",
+                icon: t.mdiExportVariant
+              }, null, 8, ["icon"])
+            ])) : u("", !0),
+            a("button", {
+              class: "hover:tw-text-action-highlight tw-flex tw-items-center tw-justify-center",
+              onClick: o[2] || (o[2] = (...i) => t.closeSideSheet && t.closeSideSheet(...i))
+            }, [
+              v(l, {
+                class: "tw-w-3 tw-h-3",
+                icon: t.mdiClose
+              }, null, 8, ["icon"])
+            ])
+          ])
+        ], 2),
+        a("div", {
+          class: r(["tw-p-4 tw-overflow-y-auto tw-transition-opacity tw-duration-500 tw-delay-200 tw-overscroll-y-contain", {
+            "tw-opacity-0": !t.open,
+            "tw-opacity-full": t.open
+          }])
+        }, [
+          C(w.$slots, "default")
+        ], 2),
+        w.$slots.controls ? (d(), f("div", {
           key: 0,
-          class: "hover:tw-text-action-highlight",
-          onClick: o[1] || (o[1] = (...i) => t.goToLink && t.goToLink(...i))
+          ref: "controlsRef",
+          class: r(["tw-absolute tw-border-t tw-border-tertiary tw-w-full tw-bottom-0 tw-bg-white", {
+            "tw-opacity-0": !t.open,
+            "tw-opacity-full": t.open
+          }])
         }, [
-          b(n, {
-            class: "tw-w-3 tw-h-3",
-            icon: t.mdiLaunch
-          }, null, 8, ["icon"])
-        ])) : C("", !0)
-      ], 2),
-      d("div", {
-        class: c(["tw-p-4 tw-overflow-y-auto tw-transition-opacity tw-duration-500 tw-delay-200 tw-overscroll-y-contain", {
-          "tw-opacity-0": !t.open,
-          "tw-opacity-full": t.open
-        }])
-      }, [
-        F(w.$slots, "default")
-      ], 2)
-    ], 6)
-  ], 2)) : C("", !0);
+          C(w.$slots, "controls")
+        ], 2)) : u("", !0)
+      ], 4)
+    ], 2)
+  ], 2)) : u("", !0);
 }
-const q = /* @__PURE__ */ j(G, [["render", M]]);
+const P = /* @__PURE__ */ A(G, [["render", O]]);
 export {
-  q as default
+  P as default
 };

package/dist/vue/KvUserAvatar.js

@@ -37,7 +37,7 @@ const V = {
       isSmall: e
     } = A(u), i = v(!0), m = v(null), c = d(() => a.value === "" && t.value === "" || a.value === "Anonymous"), f = () => {
       const l = e != null && e.value ? "tw-w-3 tw-h-3 tw-text-h4" : "tw-w-6 tw-h-6 tw-text-h2";
-      return `${D()} ${l}`;
+      return `${D(a.value)} ${l}`;
     }, S = d(() => {
       var l;
       return ((l = t == null ? void 0 : t.value) == null ? void 0 : l.split("/").pop()) ?? "";
@@ -46,9 +46,9 @@ const V = {
       return (l = a == null ? void 0 : a.value) == null ? void 0 : l.substring(0, 1).toUpperCase();
     }), g = () => {
       i.value = !1;
-    }, C = (l, w = 1e4) => new Promise((k, L) => {
+    }, C = (l, w = 1e4) => new Promise((L, k) => {
       const x = Date.now() + w, h = () => {
-        !l || l.complete ? k(l) : Date.now() > x ? L(new Error(`Timeout: ${l.src}`)) : setTimeout(h, 50);
+        !l || l.complete ? L(l) : Date.now() > x ? k(new Error(`Timeout: ${l.src}`)) : setTimeout(h, 50);
       };
       h();
     });
@@ -74,7 +74,6 @@ const V = {
 function K(u, a, t, e, i, m) {
   const c = U("kv-loading-placeholder");
   return n(), o("div", {
-    id: "kv-user-avatar",
     class: r(["data-hj-suppress tw-flex", { "tw-w-3": t.isSmall, "tw-w-6": !t.isSmall }])
   }, [
     e.isAnonymousUser ? (n(), o("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "6.15.0",
+  "version": "6.16.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -111,5 +111,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "fc3d3bc5b4c6f79106de5171f728cf404483d81b"
+  "gitHead": "32f1282d50bf96e83e8c71163104588a5c1252f3"
 }