@kiva/kv-components 6.69.2 → 7.0.0

package/dist/vue/KvActivityRow.js

@@ -1,5 +1,5 @@
 import r from "./KvUserAvatar.js";
-import { resolveComponent as o, openBlock as i, createElementBlock as a, createElementVNode as t, createVNode as c } from "vue";
+import { resolveComponent as o, openBlock as a, createElementBlock as i, createElementVNode as t, createVNode as c } from "vue";
 import l from "../_virtual/_plugin-vue_export-helper.js";
 const s = {
   name: "KvActivityRow",
@@ -13,14 +13,15 @@ const s = {
     }
   }
 }, m = { class: "tw-flex tw-gap-x-1 tw-items-center" }, d = ["innerHTML"];
-function v(_, u, e, p, f, y) {
+function v(_, p, e, u, f, w) {
   const n = o("KvUserAvatar");
-  return i(), a("div", m, [
+  return a(), i("div", m, [
     t("div", null, [
       c(n, {
         "lender-name": e.activity.lenderName,
         "lender-image-url": e.activity.lenderImage,
-        "is-small": !0
+        class: "tw-w-3 tw-h-3",
+        "is-small": ""
       }, null, 8, ["lender-name", "lender-image-url"])
     ]),
     t("div", null, [

package/dist/vue/KvAtbModal.css

@@ -1 +1 @@
-@media (min-width: 45.875rem){.cart-modal[data-v-5233d12c] div.container{right:var(--modal-right)!important;top:var(--modal-top)!important}}
+@media (min-width: 45.875rem){.cart-modal[data-v-93b3820a] div.container{right:var(--modal-right)!important;top:var(--modal-top)!important}}

package/dist/vue/KvAtbModal.js

@@ -1,4 +1,4 @@
-import { toRefs as N, ref as B, computed as C, watch as F, onMounted as O, onUnmounted as z, resolveComponent as E, openBlock as u, createBlock as D, normalizeStyle as G, withCtx as S, createElementBlock as m, createVNode as R, createElementVNode as e, normalizeClass as T, toDisplayString as I, createCommentVNode as b } from "vue";
+import { toRefs as N, ref as B, computed as C, watch as F, onMounted as O, onUnmounted as G, resolveComponent as E, openBlock as u, createBlock as z, normalizeStyle as D, withCtx as S, createElementBlock as m, createVNode as R, createElementVNode as e, normalizeClass as T, toDisplayString as I, createCommentVNode as b } from "vue";
 import { throttle as U } from "../utils/throttle.js";
 import Y from "./KvCartModal.js";
 import W from "./KvCartPill.js";
@@ -117,7 +117,7 @@ const Q = {
   ],
   setup(c, { emit: i }) {
     const {
-      modalVisible: r,
+      modalVisible: n,
       addedLoan: l,
       userData: p,
       hasEverLoggedIn: A,
@@ -129,8 +129,8 @@ const Q = {
       var t;
       return ((t = l.value) == null ? void 0 : t.basketSize) ?? 0;
     }), q = C(() => {
-      const t = window.innerWidth - k.value - 200, o = `${t > 0 ? t : 0}`, n = `${g.value}`;
-      return { right: o, top: n };
+      const t = window.innerWidth - k.value - 200, o = `${t > 0 ? t : 0}`, a = `${g.value}`;
+      return { right: o, top: a };
     }), d = C(() => {
       var t;
       return (t = l.value) == null ? void 0 : t.name;
@@ -138,17 +138,17 @@ const Q = {
       var t;
       return !((t = p.value) != null && t.my);
     }), y = C(() => {
-      var t, o, n;
-      return w.value && (_.value && !A.value || !_.value && !((n = (o = (t = p.value) == null ? void 0 : t.my) == null ? void 0 : o.loans) != null && n.totalCount)) && Z.value === 1;
+      var t, o, a;
+      return w.value && (_.value && !A.value || !_.value && !((a = (o = (t = p.value) == null ? void 0 : t.my) == null ? void 0 : o.loans) != null && a.totalCount)) && Z.value === 1;
     }), x = C(() => f.value && v.value && !y.value), j = C(() => Object.values(P.value).reduce((t, o) => t + (o > 0 ? o : 0), 0)), H = C(() => {
-      var o, n, s;
+      var o, a, s;
       if (c.isCompletingGoal)
         return `Supporting ${d.value} meets your annual goal!`;
       if (c.isLoanGoal)
         return "You’re closer to reaching your annual goal!";
       if (y.value) {
-        const a = `Supporting ${d.value} helps`;
-        return ((o = l.value) == null ? void 0 : o.borrowerCount) > 1 || (n = l.value) != null && n.themes.includes("Social Enterprise") ? `${a} them invest in themselves.` : ((s = l.value) == null ? void 0 : s.gender) === "male" ? `${a} him invest in himself.` : `${a} her invest in herself.`;
+        const r = `Supporting ${d.value} helps`;
+        return ((o = l.value) == null ? void 0 : o.borrowerCount) > 1 || (a = l.value) != null && a.themes.includes("Social Enterprise") ? `${r} them invest in themselves.` : ((s = l.value) == null ? void 0 : s.gender) === "male" ? `${r} him invest in himself.` : `${r} her invest in herself.`;
       }
       if (x.value)
         return "You’re close to your next achievement!";
@@ -161,16 +161,16 @@ const Q = {
       o && V(o), i("reset-modal");
     }, M = () => {
       const t = document.getElementsByTagName("header")[0], o = (t == null ? void 0 : t.getBoundingClientRect()) ?? null;
-      let n = [...document.querySelectorAll('[data-testid="header-basket"]')], s = n.find((L) => L == null ? void 0 : L.clientHeight);
-      s || (n = [...document.querySelectorAll('[data-testid="header-about"]')], s = n.find((L) => L == null ? void 0 : L.clientHeight));
-      const a = (s == null ? void 0 : s.getBoundingClientRect()) ?? null;
-      a && (a == null ? void 0 : a.right) !== k.value && (k.value = a == null ? void 0 : a.right), o && (o == null ? void 0 : o.bottom) !== g.value && (g.value = o == null ? void 0 : o.bottom);
+      let a = [...document.querySelectorAll('[data-testid="header-basket"]')], s = a.find((L) => L == null ? void 0 : L.clientHeight);
+      s || (a = [...document.querySelectorAll('[data-testid="header-about"]')], s = a.find((L) => L == null ? void 0 : L.clientHeight));
+      const r = (s == null ? void 0 : s.getBoundingClientRect()) ?? null;
+      r && (r == null ? void 0 : r.right) !== k.value && (k.value = r == null ? void 0 : r.right), o && (o == null ? void 0 : o.bottom) !== g.value && (g.value = o == null ? void 0 : o.bottom);
     }, h = U(M, 50);
-    return F(r, () => {
-      r.value && M();
+    return F(n, () => {
+      n.value && M();
     }, { immediate: !0 }), O(() => {
       M(), window.addEventListener("scroll", h), window.addEventListener("resize", h);
-    }), z(() => {
+    }), G(() => {
       window.removeEventListener("scroll", h), window.removeEventListener("resize", h);
     }), {
       modalPosition: q,
@@ -205,27 +205,27 @@ const Q = {
   key: 2,
   class: "tw-text-h5"
 };
-function o1(c, i, r, l, p, A) {
+function o1(c, i, n, l, p, A) {
   const w = E("KvCartPill"), f = E("KvCartModal");
-  return r.modalVisible ? (u(), D(f, {
+  return n.modalVisible ? (u(), z(f, {
     key: 0,
-    style: G({
+    style: D({
       "--modal-right": `${l.modalPosition.right}px`,
       "--modal-top": `${l.modalPosition.top}px`
     }),
     class: "cart-modal !tw-top-0",
-    visible: r.modalVisible,
-    "photo-path": r.photoPath,
+    visible: n.modalVisible,
+    "photo-path": n.photoPath,
     "basket-count": l.basketCount,
-    "category-name": r.oneLoanAwayCategory,
+    "category-name": n.oneLoanAwayCategory,
     onCartModalClosed: l.closeCartModal
   }, {
     content: S(() => [
-      r.showModalContent || l.isFirstLoan ? (u(), m("div", X, [
+      n.showModalContent || l.isFirstLoan ? (u(), m("div", X, [
         R(w, {
           class: "!tw-w-full tw-justify-center",
           "borrower-name": l.borrowerName,
-          "milestones-number": r.milestonesNumber,
+          "milestones-number": n.milestonesNumber,
           "is-close-next-milestone": l.showOneAway,
           "custom-message": l.pillMsg
         }, {
@@ -236,7 +236,7 @@ function o1(c, i, r, l, p, A) {
                 "tw-flex tw-items-center tw-justify-center tw-bg-gray-100 tw-p-0.5 tw-rounded tw-whitespace-nowrap": l.showOneAway
               })
             }, [
-              l.isFirstLoan ? (u(), m("svg", $, i[0] || (i[0] = [
+              l.isFirstLoan && !n.isLoanGoal ? (u(), m("svg", $, i[0] || (i[0] = [
                 e("path", {
                   d: "M36.2676 17.5025C34.6519 30.5945 24.9878 35.8229 20.1847 38.0889C20.1496 38.1055 20.1099 38.1043 20.075 38.0873C8.60201 32.516 4.24979 22.9018 3.62911 17.5025C3.34064 14.6558 3.18678 8.5719 3.14406 5.7867C3.14315 5.72754 3.1847 5.67723 3.24194 5.66227C11.6312 3.46948 14.2758 3.52186 20.0937 1.86776C20.1175 1.86099 20.1437 1.86113 20.1673 1.86833C26.6496 3.83905 31.8224 4.23356 36.8613 5.66108C36.9176 5.67702 36.9559 5.72959 36.9546 5.78805C36.8227 11.47 36.4423 15.9605 36.2676 17.5025Z",
                   fill: "#2AA967",
@@ -398,7 +398,7 @@ function o1(c, i, r, l, p, A) {
                   fill: "#757575"
                 }, null, -1)
               ]))),
-              l.showOneAway ? (u(), m("div", t1, I(r.oneAwayText), 1)) : b("", !0)
+              l.showOneAway ? (u(), m("div", t1, I(n.oneAwayText), 1)) : b("", !0)
             ], 2)
           ]),
           _: 1
@@ -408,7 +408,7 @@ function o1(c, i, r, l, p, A) {
     _: 1
   }, 8, ["style", "visible", "photo-path", "basket-count", "category-name", "onCartModalClosed"])) : b("", !0);
 }
-const C1 = /* @__PURE__ */ J(Q, [["render", o1], ["__scopeId", "data-v-5233d12c"]]);
+const C1 = /* @__PURE__ */ J(Q, [["render", o1], ["__scopeId", "data-v-93b3820a"]]);
 export {
   C1 as default
 };

package/dist/vue/KvCommentsAdd.css

@@ -1 +1 @@
-[data-v-0f318c7e] input{height:2rem;border-radius:0;border-top-width:0px;border-right-width:0px;border-left-width:0px;padding:0}[data-v-0f318c7e] input:focus{--tw-border-opacity: 1;border-color:rgba(var(--border-tertiary),var(--tw-border-opacity, 1));box-shadow:none}[data-v-0f318c7e] button>span{min-height:0}[data-v-0f318c7e] button>span>span{padding-top:0;padding-bottom:0;padding-left:.25rem;padding-right:.25rem}
+[data-v-8a6d6ddc] input{height:2rem;border-radius:0;border-top-width:0px;border-right-width:0px;border-left-width:0px;padding:0}[data-v-8a6d6ddc] input:focus{--tw-border-opacity: 1;border-color:rgba(var(--border-tertiary),var(--tw-border-opacity, 1));box-shadow:none}[data-v-8a6d6ddc] button>span{min-height:0}[data-v-8a6d6ddc] button>span>span{padding-top:0;padding-bottom:0;padding-left:.25rem;padding-right:.25rem}

package/dist/vue/KvCommentsAdd.js

@@ -36,11 +36,11 @@ const h = "add-comment-value", f = "add-comment", m = "hide-input", I = {
   },
   emits: [f, m],
   setup(l, { emit: t }) {
-    const e = u(""), o = u(null), c = C(() => e.value ? "" : "disabled");
+    const e = u(""), o = u(null), d = C(() => e.value ? "" : "disabled");
     return {
       ADD_COMMENT_ID: h,
       addCommentValue: e,
-      commentButtonState: c,
+      commentButtonState: d,
       cancel: () => {
         e.value = "", l.isReply && t(m);
       },
@@ -51,14 +51,15 @@ const h = "add-comment-value", f = "add-comment", m = "hide-input", I = {
     };
   }
 }, K = { class: "tw-flex tw-flex-col" }, T = { class: "tw-flex tw-flex-col md:tw-flex-row md:tw-items-center tw-gap-0.5 md:tw-gap-1" }, A = { class: "tw-flex tw-items-center tw-gap-1" }, B = { class: "data-hj-suppress tw-font-medium" }, M = { class: "tw-flex tw-py-0.5 tw-gap-0.5" };
-function S(l, t, e, o, c, v) {
-  const d = s("kv-user-avatar"), r = s("kv-text-input"), i = s("kv-button");
+function S(l, t, e, o, d, v) {
+  const c = s("kv-user-avatar"), r = s("kv-text-input"), i = s("kv-button");
   return x(), g("div", K, [
     n("div", T, [
       n("div", A, [
-        a(d, {
+        a(c, {
           "lender-name": e.userDisplayName,
           "lender-image-url": e.userImageUrl,
+          class: "tw-w-3 tw-h-3",
           "is-small": ""
         }, null, 8, ["lender-name", "lender-image-url"]),
         n("div", B, y(e.userDisplayName), 1)
@@ -97,7 +98,7 @@ function S(l, t, e, o, c, v) {
     ])
   ]);
 }
-const P = /* @__PURE__ */ E(I, [["render", S], ["__scopeId", "data-v-0f318c7e"]]);
+const P = /* @__PURE__ */ E(I, [["render", S], ["__scopeId", "data-v-8a6d6ddc"]]);
 export {
   f as ADD_COMMENT_EVENT,
   h as ADD_COMMENT_ID,

package/dist/vue/KvCommentsListItem.js

@@ -55,11 +55,11 @@ const $ = "reply-comment", ee = "like-comment", N = "add-reaction", te = {
   emits: [
     N
   ],
-  setup(g, { emit: s }) {
+  setup(h, { emit: s }) {
     const {
       comment: e,
       userPublicId: n
-    } = B(g), u = y(!1), h = y(null), a = y(), _ = y(!1), b = i(() => {
+    } = B(h), u = y(!1), g = y(null), a = y(), _ = y(!1), b = i(() => {
       var t;
       return ((t = e == null ? void 0 : e.value) == null ? void 0 : t.text) ?? "";
     }), w = i(() => {
@@ -79,7 +79,7 @@ const $ = "reply-comment", ee = "like-comment", N = "add-reaction", te = {
       return ((l = (t = e == null ? void 0 : e.value) == null ? void 0 : t.children) == null ? void 0 : l.like) ?? [];
     }), R = i(() => E.value.find((t) => t.publicLenderId === n.value)), O = i(() => R.value !== void 0), T = () => {
       u.value = !u.value, q(() => {
-        u.value && h.value.$refs.input.focus();
+        u.value && g.value.$refs.input.focus();
       });
     }, x = (t, l) => {
       var L;
@@ -109,7 +109,7 @@ const $ = "reply-comment", ee = "like-comment", N = "add-reaction", te = {
     }), {
       hideInput: D,
       showInput: u,
-      commentsAddRef: h,
+      commentsAddRef: g,
       replyClick: T,
       addReaction: x,
       REPLY_COMMENT_EVENT: $,
@@ -141,7 +141,7 @@ const $ = "reply-comment", ee = "like-comment", N = "add-reaction", te = {
   key: 1,
   class: "tw-my-1"
 }, me = { key: 1 };
-function de(g, s, e, n, u, h) {
+function de(h, s, e, n, u, g) {
   const a = v("kv-user-avatar"), _ = v("kv-comments-heart-button"), b = v("kv-comments-reply-button"), w = v("kv-comments-add"), C = v("kv-material-icon"), I = v("kv-comments-list-item", !0);
   return r(), m("div", null, [
     f("div", null, [
@@ -149,6 +149,7 @@ function de(g, s, e, n, u, h) {
         k(a, {
           "lender-name": n.authorName,
           "lender-image-url": n.authorImage,
+          class: "tw-w-3 tw-h-3",
           "is-small": ""
         }, null, 8, ["lender-name", "lender-image-url"]),
         n.authorName ? (r(), m("p", le, p(n.authorName), 1)) : c("", !0)
@@ -205,7 +206,7 @@ function de(g, s, e, n, u, h) {
             comment: o,
             "nest-level": e.nestLevel + 1,
             onAddReaction: s[3] || (s[3] = (E) => {
-              g.$emit(n.ADD_REACTION_EVENT, E);
+              h.$emit(n.ADD_REACTION_EVENT, E);
             })
           }, null, 8, ["user-image-url", "user-display-name", "user-public-id", "comment", "nest-level"])
         ]))), 128))

package/dist/vue/KvIconBag.js

@@ -1,4 +1,4 @@
-import { openBlock as n, createElementBlock as s, createElementVNode as t, toDisplayString as l } from "vue";
+import { openBlock as n, createElementBlock as s, createElementVNode as e, toDisplayString as c, createCommentVNode as l } from "vue";
 import r from "../_virtual/_plugin-vue_export-helper.js";
 const i = {
   props: {
@@ -7,35 +7,38 @@ const i = {
       default: 0
     }
   }
-}, f = {
+}, u = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24"
-}, c = { id: "countMask" }, d = {
+}, d = ["id"], a = {
   x: "12",
   y: "17",
   fill: "#000",
   style: { "font-size": "9px", "font-weight": "631", "text-anchor": "middle" }
-};
-function u(p, o, e, a, m, _) {
-  return n(), s("svg", f, [
-    t("defs", null, [
-      t("mask", c, [
-        o[0] || (o[0] = t("rect", {
+}, f = ["mask"];
+function m(_, o, t, h, x, k) {
+  return n(), s("svg", u, [
+    e("defs", null, [
+      t.count > 0 ? (n(), s("mask", {
+        key: 0,
+        id: `countMask-${t.count}`
+      }, [
+        o[0] || (o[0] = e("rect", {
           width: "100%",
           height: "100%",
           fill: "#fff"
         }, null, -1)),
-        t("text", d, l(e.count), 1)
-      ])
+        e("text", a, c(t.count), 1)
+      ], 8, d)) : l("", !0)
     ]),
-    o[1] || (o[1] = t("path", {
+    e("path", {
       d: "M12,3A3,3 0 0,1 15,6H9A3,3 0 0,1 12,3M19,6H17A5,5 0 0,0 12,1A5,5 0 0,0 7,6H5C3.89,6 3,6.89 3,8V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V8C21,6.89 20.1,6 19,6Z",
       fill: "currentColor",
-      mask: "url(#countMask)"
-    }, null, -1))
+      mask: `url(#countMask-${t.count})`
+    }, null, 8, f)
   ]);
 }
-const h = /* @__PURE__ */ r(i, [["render", u]]);
+const w = /* @__PURE__ */ r(i, [["render", m]]);
 export {
-  h as default
+  w as default
 };

package/dist/vue/KvInlineActivityCard.js

@@ -1,11 +1,10 @@
-import { toRefs as c, computed as l, resolveComponent as m, openBlock as p, createElementBlock as i, createVNode as _, createElementVNode as d, toDisplayString as v, createTextVNode as u } from "vue";
-import w from "./KvUserAvatar.js";
-import "./KvInlineActivityCard.css";
-import f from "../_virtual/_plugin-vue_export-helper.js";
+import { toRefs as c, computed as l, resolveComponent as m, openBlock as p, createElementBlock as i, createVNode as w, createElementVNode as d, toDisplayString as u, createTextVNode as _ } from "vue";
+import f from "./KvUserAvatar.js";
+import v from "../_virtual/_plugin-vue_export-helper.js";
 const g = {
   name: "KvInlineActivityCard",
   components: {
-    KvUserAvatar: w
+    KvUserAvatar: f
   },
   props: {
     /**
@@ -16,38 +15,38 @@ const g = {
       default: () => ({})
     }
   },
-  setup(o) {
+  setup(s) {
     const {
       activity: e
-    } = c(o), s = l(() => {
+    } = c(s), a = l(() => {
       var t, r;
       return ((r = (t = e == null ? void 0 : e.value) == null ? void 0 : t.lender) == null ? void 0 : r.name) ?? "";
     });
     return {
       lenderImageUrl: l(() => {
-        var t, r, a;
-        return ((a = (r = (t = e == null ? void 0 : e.value) == null ? void 0 : t.lender) == null ? void 0 : r.image) == null ? void 0 : a.url) ?? "";
+        var t, r, o;
+        return ((o = (r = (t = e == null ? void 0 : e.value) == null ? void 0 : t.lender) == null ? void 0 : r.image) == null ? void 0 : o.url) ?? "";
       }),
-      lenderName: s
+      lenderName: a
     };
   }
-}, x = { class: "tw-flex tw-items-center tw-gap-1 tw-py-0.5 tw-px-1 tw-shadow-lg tw-rounded-xs tw-bg-white" }, h = { class: "tw-text-base tw-whitespace-nowrap" }, I = { class: "data-hj-suppress" };
-function N(o, e, s, n, t, r) {
-  const a = m("KvUserAvatar");
+}, x = { class: "tw-flex tw-items-center tw-gap-1 tw-py-0.5 tw-px-1 tw-shadow-lg tw-rounded-xs tw-bg-white" }, h = { class: "tw-text-base tw-whitespace-nowrap" }, N = { class: "data-hj-suppress" };
+function U(s, e, a, n, t, r) {
+  const o = m("KvUserAvatar");
   return p(), i("div", x, [
-    _(a, {
+    w(o, {
       "lender-image-url": n.lenderImageUrl,
       "lender-name": n.lenderName,
-      "is-small": "",
-      class: "activity-avatar"
+      class: "tw-w-4 tw-h-4 tw-flex-shrink-0",
+      "is-small": ""
     }, null, 8, ["lender-image-url", "lender-name"]),
     d("p", h, [
-      d("span", I, v(n.lenderName), 1),
-      e[0] || (e[0] = u(" contributed "))
+      d("span", N, u(n.lenderName), 1),
+      e[0] || (e[0] = _(" contributed "))
     ])
   ]);
 }
-const y = /* @__PURE__ */ f(g, [["render", N], ["__scopeId", "data-v-84a9404c"]]);
+const b = /* @__PURE__ */ v(g, [["render", U]]);
 export {
-  y as default
+  b as default
 };

package/dist/vue/KvUserAvatar.js

@@ -1,12 +1,11 @@
-import { toRefs as F, ref as d, computed as u, onMounted as p, resolveComponent as U, openBlock as n, createElementBlock as o, normalizeClass as r, createElementVNode as s, createBlock as H, normalizeStyle as I, createCommentVNode as y, withDirectives as b, vShow as B, toDisplayString as P } from "vue";
-import { isLegacyPlaceholderAvatar as j, randomizedUserAvatarClass as D } from "../utils/imageUtils.js";
-import M from "./KvLoadingPlaceholder.js";
-import "./KvUserAvatar.css";
-import N from "../_virtual/_plugin-vue_export-helper.js";
-const V = {
+import { toRefs as B, ref as m, computed as a, onMounted as P, resolveComponent as V, openBlock as i, createElementBlock as c, normalizeClass as b, createElementVNode as r, createCommentVNode as f, withDirectives as N, createVNode as z, vShow as D, normalizeStyle as y, toDisplayString as F } from "vue";
+import { randomizedUserAvatarClass as M, isLegacyPlaceholderAvatar as p } from "../utils/imageUtils.js";
+import S from "./KvLoadingPlaceholder.js";
+import E from "../_virtual/_plugin-vue_export-helper.js";
+const K = {
   name: "KvUserAvatar",
   components: {
-    KvLoadingPlaceholder: M
+    KvLoadingPlaceholder: S
   },
   props: {
     /**
@@ -24,115 +23,131 @@ const V = {
       default: ""
     },
     /**
-     * The image of the lender
+     * Whether to render a smaller avatar
      */
     isSmall: {
       type: Boolean,
       default: !1
+    },
+    /**
+     * Whether to use a css variable for the avatar url before data is loaded
+     */
+    showCssPlaceholder: {
+      type: Boolean,
+      default: !1
     }
   },
-  setup(f) {
+  setup(w) {
     const {
-      lenderName: a,
-      lenderImageUrl: e,
-      isSmall: t
-    } = F(f), i = d(!0), c = d(null), m = d(null), v = u(() => a.value === "" && e.value === "" || a.value === "Anonymous"), S = () => {
-      const l = t != null && t.value ? "tw-w-3 tw-h-3 tw-text-h4" : "tw-w-6 tw-h-6 tw-text-h2";
-      return `${D(a.value)} ${l}`;
-    }, _ = u(() => {
-      var l;
-      return ((l = e == null ? void 0 : e.value) == null ? void 0 : l.split("/").pop()) ?? "";
-    }), C = u(() => {
-      var l;
-      return (l = a == null ? void 0 : a.value) == null ? void 0 : l.substring(0, 1).toUpperCase();
+      lenderName: t,
+      lenderImageUrl: s,
+      isSmall: e,
+      showCssPlaceholder: d
+    } = B(w), u = m(!0), l = m(null), v = m(null), C = a(() => !d.value && t.value === "" && s.value === "" || t.value === "Anonymous"), _ = a(() => {
+      const o = e != null && e.value ? "tw-font-sans tw-font-normal" : "tw-font-serif";
+      return `${M(t.value)} ${o}`;
+    }), A = a(() => e != null && e.value ? "0 0 27 27" : "0 0 27.5 27.5"), x = a(() => {
+      var n;
+      if (d.value)
+        return !0;
+      const o = ((n = s == null ? void 0 : s.value) == null ? void 0 : n.split("/").pop()) ?? "";
+      return o && !p(o);
+    }), I = a(() => {
+      var o;
+      return (o = t == null ? void 0 : t.value) == null ? void 0 : o.substring(0, 1).toUpperCase();
     }), g = () => {
-      i.value = !1;
-    }, L = (l, w = 1e4) => new Promise((k, x) => {
-      const A = Date.now() + w, h = () => {
-        !l || l.complete ? k(l) : Date.now() > A ? x(new Error(`Timeout: ${l.src}`)) : setTimeout(h, 50);
+      u.value = !1;
+    }, U = (o, n = 1e4) => new Promise((k, H) => {
+      const L = Date.now() + n, h = () => {
+        !o || o.complete ? k(o) : Date.now() > L ? H(new Error(`Timeout: ${o.src}`)) : setTimeout(h, 50);
       };
       h();
     });
-    return p(async () => {
-      const l = c.value;
+    return P(async () => {
+      const o = l.value;
       try {
-        await L(l), g();
-      } catch (w) {
-        console.log(w.message);
+        await U(o), g();
+      } catch (n) {
+        console.log(n.message);
       }
     }), {
-      isAnonymousUser: v,
-      avatarClass: S,
-      imageFilename: _,
-      lenderNameFirstLetter: C,
-      isLegacyPlaceholderAvatar: j,
-      isLoading: i,
+      isAnonymousUser: C,
+      avatarClass: _,
+      userHasImage: x,
+      lenderNameFirstLetter: I,
+      letterViewBox: A,
+      isLegacyPlaceholderAvatar: p,
+      isImageLoading: u,
       onImgLoad: g,
-      imageRef: c,
-      userAvatar: m
+      imageRef: l,
+      userAvatar: v
     };
   }
-}, z = { key: 1 }, E = ["src"];
-function K(f, a, e, t, i, c) {
-  const m = U("kv-loading-placeholder");
-  return n(), o("div", {
+}, R = {
+  key: 0,
+  class: "tw-h-3/4",
+  viewBox: "0 0 25 37",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, T = ["src"], Z = ["viewBox"], j = {
+  x: "50%",
+  y: "55%",
+  "dominant-baseline": "middle",
+  "text-anchor": "middle"
+};
+function q(w, t, s, e, d, u) {
+  const l = V("kv-loading-placeholder");
+  return i(), c("div", {
     ref: "userAvatar",
-    class: r(["data-hj-suppress tw-flex", { "tw-w-3": e.isSmall, "tw-w-6": !e.isSmall }])
+    class: b(["data-hj-suppress tw-flex tw-items-center tw-justify-center tw-rounded-full tw-overflow-hidden", {
+      "tw-bg-brand": e.isAnonymousUser,
+      [e.avatarClass]: !e.isAnonymousUser
+    }])
   }, [
-    t.isAnonymousUser ? (n(), o("div", {
-      key: 0,
-      class: r(["tw-rounded-full tw-bg-brand tw-inline-flex tw-align-center tw-justify-center", { "tw-w-3 tw-h-3": e.isSmall, "tw-w-6 tw-h-6": !e.isSmall }])
+    e.isAnonymousUser ? (i(), c("svg", R, t[1] || (t[1] = [
+      r("path", {
+        d: "M8.22861 0.875H0.857178V36.3125H8.22861V0.875Z",
+        fill: "white"
+      }, null, -1),
+      r("path", {
+        d: "M10.1143 23.2751C21.9428 23.2751 24.6857 13.2126 24.6857 11.4626H23.6571C11.8286 11.4626 9.08569 21.5251 9.08569 23.2751H10.1143Z",
+        fill: "white"
+      }, null, -1),
+      r("path", {
+        d: "M9.08569 24.2376C9.08569 26.0751 11.1428 36.3126 23.8285 36.3126H24.8571C24.8571 34.4751 22.8 24.2376 10.1143 24.2376H9.08569Z",
+        fill: "white"
+      }, null, -1)
+    ]))) : f("", !0),
+    N(z(l, null, null, 512), [
+      [D, !e.isAnonymousUser && e.userHasImage && e.isImageLoading]
+    ]),
+    !e.isAnonymousUser && e.userHasImage ? (i(), c("div", {
+      key: 1,
+      class: "tw-w-full tw-h-full",
+      style: y(s.showCssPlaceholder ? { display: "var(--user-avatar-display, block)" } : {
+        display: e.isImageLoading ? "none" : "block"
+      })
     }, [
-      (n(), o("svg", {
-        class: r(["tw-h-full tw-text-brand", { "tw-w-3 tw-h-3": e.isSmall }]),
-        width: "25",
-        height: "37",
-        viewBox: "0 0 25 37",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg"
-      }, a[1] || (a[1] = [
-        s("path", {
-          d: "M8.22861 0.875H0.857178V36.3125H8.22861V0.875Z",
-          fill: "white"
-        }, null, -1),
-        s("path", {
-          d: "M10.1143 23.2751C21.9428 23.2751 24.6857 13.2126 24.6857 11.4626H23.6571C11.8286 11.4626 9.08569 21.5251 9.08569 23.2751H10.1143Z",
-          fill: "white"
-        }, null, -1),
-        s("path", {
-          d: "M9.08569 24.2376C9.08569 26.0751 11.1428 36.3126 23.8285 36.3126H24.8571C24.8571 34.4751 22.8 24.2376 10.1143 24.2376H9.08569Z",
-          fill: "white"
-        }, null, -1)
-      ]), 2))
-    ], 2)) : !t.isLegacyPlaceholderAvatar(t.imageFilename) && t.imageFilename ? (n(), o("div", z, [
-      t.isLoading ? (n(), H(m, {
-        key: 0,
-        style: I({
-          width: e.isSmall ? "1.5rem" : "3rem",
-          height: e.isSmall ? "1.5rem" : "3rem"
-        }),
-        class: "!tw-rounded-full"
-      }, null, 8, ["style"])) : y("", !0),
-      b(s("img", {
+      r("img", {
         ref: "imageRef",
-        src: e.lenderImageUrl,
+        src: s.lenderImageUrl,
         alt: "Image of lender",
-        class: r(["tw-rounded-full tw-inline-block", { "tw-w-3 tw-h-3": e.isSmall, "tw-w-6 tw-h-6": !e.isSmall }]),
-        onLoad: a[0] || (a[0] = (v) => t.onImgLoad())
-      }, null, 42, E), [
-        [B, !t.isLoading]
-      ])
-    ])) : t.isLegacyPlaceholderAvatar(t.imageFilename) || !t.imageFilename ? (n(), o("div", {
+        class: "tw-w-full",
+        style: y(s.showCssPlaceholder ? { content: "var(--user-avatar)" } : {}),
+        onLoad: t[0] || (t[0] = (v) => e.onImgLoad())
+      }, null, 44, T)
+    ], 4)) : f("", !0),
+    !e.isAnonymousUser && !e.userHasImage ? (i(), c("svg", {
       key: 2,
-      class: r(["tw-rounded-full tw-inline-flex tw-align-center tw-justify-center", t.avatarClass()])
+      class: "tw-w-full tw-h-full",
+      fill: "currentColor",
+      viewBox: e.letterViewBox
     }, [
-      s("span", {
-        class: r(["tw-self-center", { "adjust-vertical-spacing": !e.isSmall }])
-      }, P(t.lenderNameFirstLetter), 3)
-    ], 2)) : y("", !0)
+      r("text", j, F(e.lenderNameFirstLetter), 1)
+    ], 8, Z)) : f("", !0)
   ], 2);
 }
-const J = /* @__PURE__ */ N(V, [["render", K], ["__scopeId", "data-v-c9339e78"]]);
+const W = /* @__PURE__ */ E(K, [["render", q]]);
 export {
-  J as default
+  W as default
 };

package/dist/vue/KvWwwHeader/KvHeaderLinkBar.css

@@ -1 +1 @@
-.header-link[data-v-d30fd983]{cursor:pointer;padding-top:1rem;padding-bottom:1rem;--tw-text-opacity: 1;color:rgba(var(--text-primary),var(--tw-text-opacity, 1));text-decoration-line:none}.header-link[data-v-d30fd983]:hover{--tw-text-opacity: 1;color:rgba(var(--text-action),var(--tw-text-opacity, 1));text-decoration-line:none}[data-v-d30fd983] .avatar div:first-child{display:flex}
+.header-link[data-v-c31f1fca]{cursor:pointer;padding-top:1rem;padding-bottom:1rem;--tw-text-opacity: 1;color:rgba(var(--text-primary),var(--tw-text-opacity, 1));text-decoration-line:none}.header-link[data-v-c31f1fca]:hover{--tw-text-opacity: 1;color:rgba(var(--text-action),var(--tw-text-opacity, 1));text-decoration-line:none}