@kiva/kv-components 6.69.3 → 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/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}

package/dist/vue/KvWwwHeader/KvHeaderLinkBar.js

@@ -1,21 +1,23 @@
-import { defineAsyncComponent as h, ref as l, inject as Z, computed as L, watch as P, onMounted as $, onUnmounted as ee, resolveComponent as p, resolveDirective as ne, openBlock as i, createElementBlock as M, withDirectives as c, normalizeClass as A, withModifiers as B, createVNode as E, createBlock as y, withCtx as N, createTextVNode as k, createElementVNode as b, createCommentVNode as V, vShow as R, toDisplayString as te } from "vue";
-import { mdiAccountCircle as oe, mdiChevronDown as ae, mdiMagnify as le, mdiMenu as re } from "@mdi/js";
-import ie from "numeral";
-import de from "@kiva/kv-tokens";
-import ue from "../KvMaterialIcon.js";
-import me from "../KvIconBag.js";
-import se from "./KvHeaderDropdownLink.js";
-import ve from "../KvUserAvatar.js";
-import { throttle as ce } from "../../utils/throttle.js";
-import { isLegacyPlaceholderAvatar as we } from "../../utils/imageUtils.js";
+import { defineAsyncComponent as h, ref as i, inject as ne, computed as T, watch as V, onMounted as te, onUnmounted as oe, resolveComponent as g, resolveDirective as ae, openBlock as d, createElementBlock as v, withDirectives as f, normalizeClass as A, withModifiers as K, createVNode as w, createBlock as R, withCtx as E, createTextVNode as b, createElementVNode as L, createCommentVNode as z, normalizeStyle as N, vShow as W, toDisplayString as le } from "vue";
+import { mdiAccountCircle as ie, mdiChevronDown as re, mdiMagnify as de, mdiMenu as se } from "@mdi/js";
+import ue from "numeral";
+import me from "@kiva/kv-tokens";
+import ce from "../KvMaterialIcon.js";
+import ve from "../KvIconBag.js";
+import fe from "./KvHeaderDropdownLink.js";
+import we from "../KvUserAvatar.js";
+import ke from "../KvLoadingPlaceholder.js";
+import { throttle as Me } from "../../utils/throttle.js";
+import { isLegacyPlaceholderAvatar as j } from "../../utils/imageUtils.js";
 import "./KvHeaderLinkBar.css";
-import fe from "../../_virtual/_plugin-vue_export-helper.js";
-const Me = h(() => import("./KvHeaderMobileMenu.js")), F = h(() => import("./KvHeaderMyKivaMenu.js")), ke = h(() => import("./LendMenu/KvLendMenu.js")), be = h(() => import("./KvHeaderTakeActionMenu.js")), he = h(() => import("./KvHeaderAboutMenu.js")), W = 150, w = "avatar-menu", I = "menuButton", z = { top: "-3.75rem", width: "100%" }, ge = "lendButton", Te = "takeActionButton", pe = "aboutUsLink", Ae = {
+import ge from "../../_virtual/_plugin-vue_export-helper.js";
+const be = h(() => import("./KvHeaderMobileMenu.js")), F = h(() => import("./KvHeaderMyKivaMenu.js")), he = h(() => import("./LendMenu/KvLendMenu.js")), ye = h(() => import("./KvHeaderTakeActionMenu.js")), pe = h(() => import("./KvHeaderAboutMenu.js")), q = 150, k = "avatar-menu", U = "menuButton", G = { top: "-3.75rem", width: "100%" }, Te = "lendButton", Ae = "takeActionButton", Le = "aboutUsLink", Ue = {
   components: {
-    KvMaterialIcon: ue,
-    KvIconBag: me,
-    KvHeaderDropdownLink: se,
-    KvUserAvatar: ve
+    KvMaterialIcon: ce,
+    KvIconBag: ve,
+    KvHeaderDropdownLink: fe,
+    KvUserAvatar: we,
+    KvLoadingPlaceholder: ke
   },
   props: {
     loggedIn: {
@@ -53,255 +55,287 @@ const Me = h(() => import("./KvHeaderMobileMenu.js")), F = h(() => import("./KvH
     balance: {
       type: Number,
       default: 0
+    },
+    isBasketDataLoading: {
+      type: Boolean,
+      default: !1
+    },
+    isUserDataLoading: {
+      type: Boolean,
+      default: !1
     }
   },
   emits: [
     "item-hover"
   ],
-  setup(d, { emit: n }) {
-    const a = l(null), e = l(null), K = l(null), x = l(null), g = l(null), f = l(null), U = l(null), H = l(null), u = l(null), o = l(null), O = Z("$kvTrackEvent"), _ = {
-      [ge]: { action: "hover-Lend-menu", label: "Lend" },
-      [Te]: { action: "hover-Take-action-menu", label: "Take action" },
-      [pe]: { action: "hover-About-menu", label: "About" },
-      [I]: { action: "hover-Hamburger-menu", label: "Hamburger" },
-      [w]: { action: "hover-Avatar-menu", label: "Avatar" }
-    }, m = (t, s, v = null) => {
-      n("item-hover", t, s, v);
-    }, j = (t, s, v = null) => {
+  setup(s, { emit: n }) {
+    const o = i(null), e = i(null), x = i(null), _ = i(null), y = i(null), M = i(null), B = i(null), I = i(null), H = i(null), a = i(null), l = ne("$kvTrackEvent"), O = {
+      [Te]: { action: "hover-Lend-menu", label: "Lend" },
+      [Ae]: { action: "hover-Take-action-menu", label: "Take action" },
+      [Le]: { action: "hover-About-menu", label: "About" },
+      [U]: { action: "hover-Hamburger-menu", label: "Hamburger" },
+      [k]: { action: "hover-Avatar-menu", label: "Avatar" }
+    }, u = (t, m, c = null) => {
+      n("item-hover", t, m, c);
+    }, J = (t, m, c = null) => {
       if (!navigator.maxTouchPoints) {
-        if (t && o.value !== t) {
-          const r = _[t];
-          r && O(
+        if (t && a.value !== t) {
+          const r = O[t];
+          r && l(
             "TopNav",
             r.action,
             r.label
           );
         }
-        o.value = t, m(
+        a.value = t, u(
           t,
-          s,
-          t === I && d.isMobile ? z : v
+          m,
+          t === U && s.isMobile ? G : c
         );
       }
-    }, q = (t) => {
-      !navigator.maxTouchPoints && o.value === t && (o.value = null, m());
-    }, C = () => {
-      var S;
-      const t = (S = a.value) == null ? void 0 : S.getBoundingClientRect();
+    }, Q = (t) => {
+      !navigator.maxTouchPoints && a.value === t && (a.value = null, u());
+    }, S = () => {
+      var P;
+      const t = (P = o.value) == null ? void 0 : P.getBoundingClientRect();
       if (!t) return null;
-      const v = t.left + t.width / 2 - W / 2, r = `${window.innerWidth - v - W}px`;
+      const c = t.left + t.width / 2 - q / 2, r = `${window.innerWidth - c - q}px`;
       return {
-        right: (window == null ? void 0 : window.innerWidth) < de.breakpoints.md ? 0 : r
+        right: (window == null ? void 0 : window.innerWidth) < me.breakpoints.md ? 0 : r
       };
-    }, T = () => {
-      o.value = w, m(a.value, F, C());
-    }, G = (t, s, v) => {
-      if (t && o.value !== t) {
-        const r = _[t];
-        r && O(
+    }, p = () => {
+      a.value = k, u(o.value, F, S());
+    }, X = (t, m, c) => {
+      if (t && a.value !== t) {
+        const r = O[t];
+        r && l(
           "TopNav",
           r.action,
           r.label
         );
       }
-      o.value === I && (o.value = null), !o.value || o.value !== t ? (o.value = t, t === w ? T() : t === I && d.isMobile ? m(t, s, z) : m(t, s, v)) : (o.value = null, m());
-    }, D = ce(() => {
-      o.value === w && T();
-    }, 100), J = L(() => d.isMobile ? void 0 : "/lend-by-category"), Q = L(() => {
+      a.value === U && (a.value = null), !a.value || a.value !== t ? (a.value = t, t === k ? p() : t === U && s.isMobile ? u(t, m, G) : u(t, m, c)) : (a.value = null, u());
+    }, C = Me(() => {
+      a.value === k && p();
+    }, 100), Y = T(() => s.isMobile ? void 0 : "/lend-by-category"), D = T(() => {
       var t;
-      return ((t = d.lenderImageUrl) == null ? void 0 : t.split("/").pop()) ?? "";
-    }), X = L(() => Math.floor(d.balance)), Y = (t) => {
-      t.target === t.currentTarget && m();
+      return ((t = s.lenderImageUrl) == null ? void 0 : t.split("/").pop()) ?? "";
+    }), Z = T(() => Math.floor(s.balance)), $ = T(() => j(D.value) || !D.value), ee = (t) => {
+      t.target === t.currentTarget && u();
     };
-    return P(
-      () => d.isMobile,
+    return V(
+      () => s.isMobile,
       () => {
-        o.value === w && T();
+        a.value === k && p();
       }
-    ), P(
-      () => d.openMenuItem,
+    ), V(
+      () => s.openMenuItem,
       (t) => {
-        t || (o.value = null);
+        t || (a.value = null);
       }
-    ), $(() => {
-      import("./KvHeaderMobileMenu.js"), import("./KvHeaderMyKivaMenu.js"), import("./LendMenu/KvLendMenu.js"), import("./KvHeaderTakeActionMenu.js"), import("./KvHeaderAboutMenu.js"), window.addEventListener("resize", D);
-    }), ee(() => {
-      window.removeEventListener("resize", D);
+    ), te(() => {
+      import("./KvHeaderMobileMenu.js"), import("./KvHeaderMyKivaMenu.js"), import("./LendMenu/KvLendMenu.js"), import("./KvHeaderTakeActionMenu.js"), import("./KvHeaderAboutMenu.js"), window.addEventListener("resize", C);
+    }), oe(() => {
+      window.removeEventListener("resize", C);
     }), {
-      AVATAR_MENU_ID: w,
-      openMenuId: o,
-      numeral: ie,
-      mdiAccountCircle: oe,
-      mdiChevronDown: ae,
-      mdiMagnify: le,
-      mdiMenu: re,
-      onHover: m,
-      avatar: a,
+      AVATAR_MENU_ID: k,
+      openMenuId: a,
+      numeral: ue,
+      mdiAccountCircle: ie,
+      mdiChevronDown: re,
+      mdiMagnify: de,
+      mdiMenu: se,
+      onHover: u,
+      avatar: o,
       lendButton: e,
-      aboutUsLink: K,
-      partnerWithUsLink: x,
-      borrowLink: g,
-      supportKivaLink: f,
-      basketLink: U,
-      signInLink: H,
-      menuButton: u,
-      lendUrl: J,
-      avatarFilename: Q,
-      handleOnHover: j,
-      handleTouchStart: G,
-      handleMouseOut: q,
-      handleAvatarMenuPosition: T,
-      KvHeaderMobileMenu: Me,
+      aboutUsLink: x,
+      partnerWithUsLink: _,
+      borrowLink: y,
+      supportKivaLink: M,
+      basketLink: B,
+      signInLink: I,
+      menuButton: H,
+      lendUrl: Y,
+      avatarFilename: D,
+      handleOnHover: J,
+      handleTouchStart: X,
+      handleMouseOut: Q,
+      handleAvatarMenuPosition: p,
+      KvHeaderMobileMenu: be,
       KvHeaderMyKivaMenu: F,
-      KvLendMenu: ke,
-      KvHeaderTakeActionMenu: be,
-      KvHeaderAboutMenu: he,
-      isLegacyPlaceholderAvatar: we,
-      getAvatarMenuPosition: C,
-      handleEmptySpaceClick: Y,
-      roundedBalance: X
+      KvLendMenu: he,
+      KvHeaderTakeActionMenu: ye,
+      KvHeaderAboutMenu: pe,
+      isLegacyPlaceholderAvatar: j,
+      getAvatarMenuPosition: S,
+      handleEmptySpaceClick: ee,
+      roundedBalance: Z,
+      isDefaultProfilePic: $
     };
   }
-}, ye = ["href"], Ie = {
+}, Be = ["href"], Ie = {
   ref: "avatar",
   class: "tw-cursor-pointer tw-flex tw-items-center tw-gap-1 tw-bg-eco-green-1 tw-rounded-md tw-py-0.5 md:tw-py-1 tw-px-1 md:tw-px-2"
-}, Ue = { class: "tw-text-eco-green-4" }, He = ["href"];
-function Le(d, n, a, e, K, x) {
-  const g = p("kv-material-icon"), f = p("KvHeaderDropdownLink"), U = p("kv-icon-bag"), H = p("KvUserAvatar"), u = ne("kv-track-event");
-  return i(), M("div", {
+}, He = {
+  key: 0,
+  class: "tw-w-4 tw-h-3",
+  style: {
+    display: "var(--user-balance-loading-display, inline-block)"
+  }
+}, De = {
+  key: 1,
+  class: "tw-text-eco-green-4"
+}, Ke = ["href"];
+function Ee(s, n, o, e, x, _) {
+  const y = g("kv-material-icon"), M = g("KvHeaderDropdownLink"), B = g("kv-icon-bag"), I = g("KvUserAvatar"), H = g("KvLoadingPlaceholder"), a = ae("kv-track-event");
+  return d(), v("div", {
     class: "tw-h-full tw-flex tw-items-center tw-gap-0.5 md:tw-gap-2 lg:tw-gap-2.5",
-    onTouchstart: n[10] || (n[10] = (...o) => e.handleEmptySpaceClick && e.handleEmptySpaceClick(...o))
+    onTouchstart: n[10] || (n[10] = (...l) => e.handleEmptySpaceClick && e.handleEmptySpaceClick(...l))
   }, [
-    c((i(), M("button", {
+    f((d(), v("button", {
       ref: "menuButton",
       class: A(["header-link tw-inline-flex md:tw-hidden", {
-        "tw-text-tertiary": a.openMenuItem && a.openMenuItem !== e.KvHeaderMobileMenu
+        "tw-text-tertiary": o.openMenuItem && o.openMenuItem !== e.KvHeaderMobileMenu
       }]),
-      onMouseover: n[0] || (n[0] = (o) => e.handleOnHover("menuButton", e.KvHeaderMobileMenu)),
-      onMouseout: n[1] || (n[1] = (o) => e.handleMouseOut("menuButton")),
-      onTouchstart: n[2] || (n[2] = B((o) => e.handleTouchStart("menuButton", e.KvHeaderMobileMenu), ["stop"]))
+      onMouseover: n[0] || (n[0] = (l) => e.handleOnHover("menuButton", e.KvHeaderMobileMenu)),
+      onMouseout: n[1] || (n[1] = (l) => e.handleMouseOut("menuButton")),
+      onTouchstart: n[2] || (n[2] = K((l) => e.handleTouchStart("menuButton", e.KvHeaderMobileMenu), ["stop"]))
     }, [
-      E(g, { icon: e.mdiMenu }, null, 8, ["icon"])
+      w(y, { icon: e.mdiMenu }, null, 8, ["icon"])
     ], 34)), [
-      [u, a.openMenuItem === e.KvHeaderMobileMenu ? ["TopNav", "click-Hamburger-menu"] : null]
+      [a, o.openMenuItem === e.KvHeaderMobileMenu ? ["TopNav", "click-Hamburger-menu"] : null]
     ]),
-    c((i(), y(f, {
+    f((d(), R(M, {
       class: "tw-py-1",
       "ref-name": "lendButton",
       href: e.lendUrl,
       "menu-component": e.KvLendMenu,
-      "open-menu-item": a.openMenuItem,
+      "open-menu-item": o.openMenuItem,
       "dropdown-icon": e.mdiChevronDown,
       "base-class": "tw-inline-flex md:tw-border md:tw-rounded-md tw-px-1.5 tw-py-0.5",
       onOnHover: e.handleOnHover,
-      onMouseleave: n[3] || (n[3] = (o) => e.handleMouseOut("lendButton")),
-      onTouchstart: n[4] || (n[4] = B((o) => e.handleTouchStart("lendButton", e.KvLendMenu), ["stop"]))
+      onMouseleave: n[3] || (n[3] = (l) => e.handleMouseOut("lendButton")),
+      onTouchstart: n[4] || (n[4] = K((l) => e.handleTouchStart("lendButton", e.KvLendMenu), ["stop"]))
     }, {
-      default: N(() => n[11] || (n[11] = [
-        k(" Lend ")
+      default: E(() => n[11] || (n[11] = [
+        b(" Lend ")
       ])),
       _: 1
     }, 8, ["href", "menu-component", "open-menu-item", "dropdown-icon", "onOnHover"])), [
-      [u, ["TopNav", "click-Lend"]]
+      [a, ["TopNav", "click-Lend"]]
     ]),
-    c((i(), y(f, {
+    f((d(), R(M, {
       "ref-name": "takeActionButton",
       "base-class": "tw-hidden md:tw-inline-flex tw-py-1",
       "menu-component": e.KvHeaderTakeActionMenu,
-      "open-menu-item": a.openMenuItem,
+      "open-menu-item": o.openMenuItem,
       "dropdown-icon": e.mdiChevronDown,
       "send-link-position": "",
       onOnHover: e.handleOnHover,
-      onMouseleave: n[5] || (n[5] = (o) => e.handleMouseOut("takeActionButton")),
+      onMouseleave: n[5] || (n[5] = (l) => e.handleMouseOut("takeActionButton")),
       onUserTap: e.handleTouchStart
     }, {
-      default: N(() => n[12] || (n[12] = [
-        k(" Take action ")
+      default: E(() => n[12] || (n[12] = [
+        b(" Take action ")
       ])),
       _: 1
     }, 8, ["menu-component", "open-menu-item", "dropdown-icon", "onOnHover", "onUserTap"])), [
-      [u, ["TopNav", "click-take-action"]]
+      [a, ["TopNav", "click-take-action"]]
     ]),
-    E(f, {
+    w(M, {
       "ref-name": "aboutUsLink",
       "data-testid": "header-about",
       "base-class": "tw-hidden md:tw-inline-flex tw-py-1",
       "menu-component": e.KvHeaderAboutMenu,
-      "open-menu-item": a.openMenuItem,
+      "open-menu-item": o.openMenuItem,
       "dropdown-icon": e.mdiChevronDown,
       "send-link-position": "",
       onOnHover: e.handleOnHover,
-      onMouseleave: n[6] || (n[6] = (o) => e.handleMouseOut("aboutUsLink")),
+      onMouseleave: n[6] || (n[6] = (l) => e.handleMouseOut("aboutUsLink")),
       onUserTap: e.handleTouchStart
     }, {
-      default: N(() => n[13] || (n[13] = [
-        k(" About ")
+      default: E(() => n[13] || (n[13] = [
+        b(" About ")
       ])),
       _: 1
     }, 8, ["menu-component", "open-menu-item", "dropdown-icon", "onOnHover", "onUserTap"]),
-    n[17] || (n[17] = b("div", { class: "tw-flex-1 tw-h-full" }, null, -1)),
-    a.loggedIn ? c((i(), M("a", {
+    n[17] || (n[17] = L("div", { class: "tw-flex-1 tw-h-full" }, null, -1)),
+    o.loggedIn ? f((d(), v("a", {
       key: 0,
       ref: "dashboardLink",
-      href: a.myDashboardUrl,
-      class: A(["header-link tw-hidden md:tw-block", { "tw-text-tertiary": !!a.openMenuItem }])
+      href: o.myDashboardUrl,
+      class: A(["header-link tw-hidden md:tw-block", { "tw-text-tertiary": !!o.openMenuItem }])
     }, n[14] || (n[14] = [
-      k(" My dashboard ")
-    ]), 10, ye)), [
-      [u, ["TopNav", "click-Dashboard"]]
-    ]) : V("", !0),
-    c((i(), M("a", {
+      b(" My dashboard ")
+    ]), 10, Be)), [
+      [a, ["TopNav", "click-Dashboard"]]
+    ]) : z("", !0),
+    f((d(), v("a", {
       ref: "basketLink",
       href: "/basket",
-      class: A(["header-link tw-relative md:!tw-mr-0 tw-flex tw-items-center tw-gap-0.5", { "tw-text-tertiary": !!a.openMenuItem }]),
-      style: { "margin-right": "2px" },
+      class: A(["header-link tw-relative md:!tw-mr-0 tw-flex tw-items-center tw-gap-0.5", { "tw-text-tertiary": !!o.openMenuItem }]),
+      style: N([o.isBasketDataLoading ? {
+        display: "var(--basket-display, flex)"
+      } : void 0, { "margin-right": "2px" }]),
       "data-testid": "header-basket"
     }, [
-      E(U, {
+      w(B, {
         class: "tw-w-3 tw-h-3 md:tw-w-3.5 md:tw-h-3.5 tw-pointer-events-none tw-text-action",
-        count: a.basketCount
+        count: o.isBasketDataLoading ? 0 : o.basketCount
       }, null, 8, ["count"]),
-      n[15] || (n[15] = b("span", { class: "tw-hidden md:tw-block" }, "Basket", -1))
-    ], 2)), [
-      [R, a.basketCount > 0],
-      [u, ["TopNav", "click-Basket"]]
+      n[15] || (n[15] = L("span", { class: "tw-hidden md:tw-block" }, "Basket", -1))
+    ], 6)), [
+      [W, o.isBasketDataLoading ? !0 : o.basketCount > 0],
+      [a, ["TopNav", "click-Basket"]]
     ]),
-    b("div", {
+    L("div", {
       class: "md:tw-py-1",
-      onMouseenter: n[7] || (n[7] = (o) => e.handleOnHover(e.AVATAR_MENU_ID, e.KvHeaderMyKivaMenu, e.getAvatarMenuPosition())),
-      onMouseleave: n[8] || (n[8] = (o) => e.handleMouseOut(e.AVATAR_MENU_ID)),
-      onTouchstart: n[9] || (n[9] = B((o) => e.handleTouchStart(e.AVATAR_MENU_ID), ["stop"]))
+      onMouseenter: n[7] || (n[7] = (l) => e.handleOnHover(e.AVATAR_MENU_ID, e.KvHeaderMyKivaMenu, e.getAvatarMenuPosition())),
+      onMouseleave: n[8] || (n[8] = (l) => e.handleMouseOut(e.AVATAR_MENU_ID)),
+      onTouchstart: n[9] || (n[9] = K((l) => e.handleTouchStart(e.AVATAR_MENU_ID), ["stop"]))
     }, [
-      c(b("div", Ie, [
-        e.isLegacyPlaceholderAvatar(e.avatarFilename) || !e.avatarFilename ? (i(), y(g, {
-          key: 0,
+      f(L("div", Ie, [
+        w(y, {
           icon: e.mdiAccountCircle,
-          class: "tw-w-3"
-        }, null, 8, ["icon"])) : (i(), y(H, {
-          key: 1,
-          class: "avatar",
-          "lender-name": a.lenderName,
-          "lender-image-url": a.lenderImageUrl,
+          class: "tw-w-3",
+          style: N(o.isUserDataLoading ? {
+            display: "var(--user-avatar-legacy-display, inline-block)"
+          } : {
+            display: e.isDefaultProfilePic ? "inline-block" : "none"
+          })
+        }, null, 8, ["icon", "style"]),
+        w(I, {
+          class: "tw-w-3 tw-h-3",
+          "lender-name": o.lenderName,
+          "lender-image-url": o.lenderImageUrl,
+          style: N(o.isUserDataLoading ? {
+            display: "var(--user-avatar-display, inline-block)"
+          } : {
+            display: e.isDefaultProfilePic ? "none" : "inline-block"
+          }),
+          "show-css-placeholder": o.isUserDataLoading,
           "is-small": ""
-        }, null, 8, ["lender-name", "lender-image-url"])),
-        b("span", Ue, te(e.numeral(e.roundedBalance).format("$0")), 1)
+        }, null, 8, ["lender-name", "lender-image-url", "style", "show-css-placeholder"]),
+        o.isUserDataLoading ? (d(), v("div", He, [
+          w(H)
+        ])) : (d(), v("span", De, le(e.numeral(e.roundedBalance).format("$0")), 1))
       ], 512), [
-        [R, a.loggedIn]
+        [W, o.loggedIn]
       ])
     ], 32),
-    a.loggedIn ? V("", !0) : c((i(), M("a", {
+    o.loggedIn ? z("", !0) : f((d(), v("a", {
       key: 1,
       ref: "signInLink",
-      href: a.loginUrl,
-      class: A(["header-link", { "tw-text-tertiary": !!a.openMenuItem }])
+      href: o.loginUrl,
+      class: A(["header-link", { "tw-text-tertiary": !!o.openMenuItem }])
     }, n[16] || (n[16] = [
-      k(" Sign in ")
-    ]), 10, He)), [
-      [u, ["TopNav", "click-Sign-in"]]
+      b(" Sign in ")
+    ]), 10, Ke)), [
+      [a, ["TopNav", "click-Sign-in"]]
     ])
   ], 32);
 }
-const Fe = /* @__PURE__ */ fe(Ae, [["render", Le], ["__scopeId", "data-v-d30fd983"]]);
+const Ge = /* @__PURE__ */ ge(Ue, [["render", Ee], ["__scopeId", "data-v-c31f1fca"]]);
 export {
-  Fe as default
+  Ge as default
 };

package/dist/vue/KvWwwHeader.css

@@ -1 +1 @@
-.header-fade-enter-active[data-v-7732c044]{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.header-fade-leave-active[data-v-7732c044]{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.1s}.header-fade-enter[data-v-7732c044],.header-fade-leave-to[data-v-7732c044]{opacity:0}.header-fade-leave[data-v-7732c044],.header-fade-enter-to[data-v-7732c044]{opacity:1}.bg-opacity-50[data-v-7732c044]{background-color:rgba(var(--bg-action-highlight),.5)}
+.header-fade-enter-active[data-v-137228da]{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.header-fade-leave-active[data-v-137228da]{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.1s}.header-fade-enter[data-v-137228da],.header-fade-leave-to[data-v-137228da]{opacity:0}.header-fade-leave[data-v-137228da],.header-fade-enter-to[data-v-137228da]{opacity:1}.bg-opacity-50[data-v-137228da]{background-color:rgba(var(--bg-action-highlight),.5)}

package/dist/vue/KvWwwHeader.js

@@ -1,4 +1,4 @@
-import { ref as a, shallowRef as N, computed as S, onMounted as x, onBeforeUnmount as A, resolveComponent as w, resolveDirective as K, openBlock as g, createBlock as E, withCtx as b, createElementVNode as k, normalizeStyle as h, createVNode as v, Transition as I, withDirectives as y, vShow as C, createElementBlock as O, normalizeClass as G, resolveDynamicComponent as z, withModifiers as P } from "vue";
+import { ref as a, shallowRef as N, computed as S, onMounted as x, onBeforeUnmount as A, resolveComponent as g, resolveDirective as K, openBlock as b, createBlock as L, withCtx as w, createElementVNode as k, normalizeStyle as h, createVNode as v, Transition as E, withDirectives as y, vShow as I, createElementBlock as O, normalizeClass as G, resolveDynamicComponent as z, withModifiers as P } from "vue";
 import R from "@kiva/kv-tokens";
 import V from "./KvWwwHeader/KvHeaderLinkBar.js";
 import W from "./KvWwwHeader/KvHeaderLogo.js";
@@ -32,6 +32,10 @@ const Q = "4rem", X = ["lendMenu", "aboutUsLink", "takeActionButton"], Z = {
       type: Number,
       default: 0
     },
+    isBasketDataLoading: {
+      type: Boolean,
+      default: !1
+    },
     isBorrower: {
       type: Boolean,
       default: !1
@@ -40,6 +44,10 @@ const Q = "4rem", X = ["lendMenu", "aboutUsLink", "takeActionButton"], Z = {
       type: Boolean,
       default: !1
     },
+    isUserDataLoading: {
+      type: Boolean,
+      default: !1
+    },
     userId: {
       type: Number,
       default: null
@@ -68,42 +76,42 @@ const Q = "4rem", X = ["lendMenu", "aboutUsLink", "takeActionButton"], Z = {
   emits: [
     "load-lend-menu-data"
   ],
-  setup(L, { emit: o }) {
-    const n = a(!0), e = a(null), r = a(!1), i = N(null), d = a(null), m = a({ left: 0, position: "relative" }), s = a(!1), c = a(null), f = a(!1), l = S(() => {
-      var u, t;
-      return ((t = (u = d.value) == null ? void 0 : u.$options) == null ? void 0 : t.name) === "KvHeaderMobileMenu";
-    }), _ = F((u, t, H) => {
-      f.value && (t ? (c.value = u, i.value !== t && (m.value = { left: 0, position: "relative" }), i.value = t, r.value = !0, H && (m.value = {
-        ...H,
+  setup(C, { emit: o }) {
+    const n = a(!0), e = a(null), i = a(!1), r = N(null), u = a(null), m = a({ left: 0, position: "relative" }), s = a(!1), c = a(null), f = a(!1), l = S(() => {
+      var d, t;
+      return ((t = (d = u.value) == null ? void 0 : d.$options) == null ? void 0 : t.name) === "KvHeaderMobileMenu";
+    }), _ = F((d, t, p) => {
+      f.value && (t ? (c.value = d, r.value !== t && (m.value = { left: 0, position: "relative" }), r.value = t, i.value = !0, p && (m.value = {
+        ...p,
         position: "absolute"
-      })) : r.value && (r.value = !1, i.value = null));
-    }, 100), T = (u) => {
+      })) : i.value && (i.value = !1, r.value = null));
+    }, 100), D = (d) => {
       var t;
-      (t = d.value) == null || t.onLoad(u);
+      (t = u.value) == null || t.onLoad(d);
     }, U = () => {
       if (!l.value) return _();
-    }, D = () => {
+    }, B = () => {
       o("load-lend-menu-data");
-    }, B = () => s.value && X.includes(c.value) || !s.value && l.value, M = () => {
-      s.value = (window == null ? void 0 : window.innerWidth) < R.breakpoints.md, B() && (i.value = null, r.value = !1);
-    }, p = q(M, 100);
+    }, T = () => s.value && X.includes(c.value) || !s.value && l.value, M = () => {
+      s.value = (window == null ? void 0 : window.innerWidth) < R.breakpoints.md, T() && (r.value = null, i.value = !1);
+    }, H = q(M, 100);
     return x(() => {
-      M(), window.addEventListener("resize", p), f.value = !0;
+      M(), window.addEventListener("resize", H), f.value = !0;
     }), A(() => {
-      window.removeEventListener("resize", p);
+      window.removeEventListener("resize", H);
     }), {
       HEADER_HEIGHT: Q,
-      emitLendMenuEvent: D,
+      emitLendMenuEvent: B,
       isMobile: s,
       linksVisible: n,
-      menuOpen: r,
+      menuOpen: i,
       isMobileMenuActive: l,
       onHover: _,
-      loadMenuData: T,
+      loadMenuData: D,
       handleOverlayClick: U,
       activeHeaderItem: e,
-      menuComponent: i,
-      menuComponentInstance: d,
+      menuComponent: r,
+      menuComponentInstance: u,
       menuPosition: m
     };
   }
@@ -111,22 +119,24 @@ const Q = "4rem", X = ["lendMenu", "aboutUsLink", "takeActionButton"], Z = {
   href: "/",
   class: "tw-px-1 tw-py-2 tw-cursor-pointer tw-absolute tw-top-1/2 tw-left-1/2 tw--translate-y-1/2 tw--translate-x-1/2 tw-transition-all tw-duration-300"
 };
-function ee(L, o, n, e, r, i) {
-  const d = w("kv-header-link-bar"), m = w("kv-header-logo"), s = w("kv-page-container"), c = w("kv-theme-provider"), f = K("kv-track-event");
-  return g(), E(c, {
+function ee(C, o, n, e, i, r) {
+  const u = g("kv-header-link-bar"), m = g("kv-header-logo"), s = g("kv-page-container"), c = g("kv-theme-provider"), f = K("kv-track-event");
+  return b(), L(c, {
     tag: "div",
     class: "tw-bg-primary"
   }, {
-    default: b(() => [
+    default: w(() => [
       k("nav", {
         class: "tw-font-medium tw-relative",
         style: h({ height: e.HEADER_HEIGHT })
       }, [
         v(s, { class: "tw-h-full" }, {
-          default: b(() => [
-            v(I, { name: "header-fade" }, {
-              default: b(() => [
-                y(v(d, {
+          default: w(() => [
+            v(E, { name: "header-fade" }, {
+              default: w(() => [
+                y(v(u, {
+                  "is-basket-data-loading": n.isBasketDataLoading,
+                  "is-user-data-loading": n.isUserDataLoading,
                   "logged-in": n.loggedIn,
                   "basket-count": n.basketCount,
                   "login-url": n.loginUrl,
@@ -137,13 +147,13 @@ function ee(L, o, n, e, r, i) {
                   "is-mobile": e.isMobile,
                   balance: n.balance,
                   onItemHover: e.onHover
-                }, null, 8, ["logged-in", "basket-count", "login-url", "open-menu-item", "my-dashboard-url", "lender-name", "lender-image-url", "is-mobile", "balance", "onItemHover"]), [
-                  [C, e.linksVisible]
+                }, null, 8, ["is-basket-data-loading", "is-user-data-loading", "logged-in", "basket-count", "login-url", "open-menu-item", "my-dashboard-url", "lender-name", "lender-image-url", "is-mobile", "balance", "onItemHover"]), [
+                  [I, e.linksVisible]
                 ])
               ]),
               _: 1
             }),
-            y((g(), O("a", $, [
+            y((b(), O("a", $, [
               v(m)
             ])), [
               [f, ["TopNav", "click-Logo"]]
@@ -152,8 +162,8 @@ function ee(L, o, n, e, r, i) {
           _: 1
         })
       ], 4),
-      v(I, { name: "header-fade" }, {
-        default: b(() => [
+      v(E, { name: "header-fade" }, {
+        default: w(() => [
           y(k("div", {
             class: "tw-absolute tw-z-modal tw-h-full tw-inset-x-0 tw-bg-eco-green-4 bg-opacity-50 tw-min-h-screen",
             style: h({ top: e.HEADER_HEIGHT }),
@@ -168,7 +178,7 @@ function ee(L, o, n, e, r, i) {
               onMouseenter: o[2] || (o[2] = (l) => e.onHover(e.activeHeaderItem, e.menuComponent)),
               onMouseleave: o[3] || (o[3] = (l) => e.onHover())
             }, [
-              (g(), E(z(e.menuComponent), {
+              (b(), L(z(e.menuComponent), {
                 ref: "menuComponentInstance",
                 "logged-in": n.loggedIn,
                 "login-url": n.loginUrl,
@@ -186,7 +196,7 @@ function ee(L, o, n, e, r, i) {
               }, null, 40, ["logged-in", "login-url", "user-id", "is-borrower", "is-trustee", "my-dashboard-url", "show-m-g-upsell-link", "is-mobile", "countries-not-lent-to-url", "onLoadLendMenuData"]))
             ], 38)
           ], 36), [
-            [C, e.menuOpen]
+            [I, e.menuOpen]
           ])
         ]),
         _: 1
@@ -195,7 +205,7 @@ function ee(L, o, n, e, r, i) {
     _: 1
   });
 }
-const me = /* @__PURE__ */ J(Z, [["render", ee], ["__scopeId", "data-v-7732c044"]]);
+const me = /* @__PURE__ */ J(Z, [["render", ee], ["__scopeId", "data-v-137228da"]]);
 export {
   me as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "6.69.3",
+  "version": "7.0.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -114,5 +114,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "f6ec5ff169304eff0c80651237eadcf8e79505d6"
+  "gitHead": "d1d979db0ae3e33f4b8b8a1d04a802ffb0c733ee"
 }

package/dist/vue/KvInlineActivityCard.css

@@ -1 +0,0 @@
-.activity-avatar[data-v-84a9404c],.activity-avatar[data-v-84a9404c] img,.activity-avatar[data-v-84a9404c] div{height:2rem;width:2rem}

package/dist/vue/KvUserAvatar.css

@@ -1 +0,0 @@
-.adjust-vertical-spacing[data-v-c9339e78]{top:-.1rem;position:relative}