@kiva/kv-components 6.57.4 → 6.57.6

package/dist/vue/KvClassicLoanCard.css

@@ -1 +1 @@
-.loan-card-use[data-v-bdb91452]:hover,.loan-card-use[data-v-bdb91452]:focus{--tw-text-opacity: 1;color:rgba(var(--text-primary),var(--tw-text-opacity, 1))}.loan-card-active-hover:hover .loan-card-use[data-v-bdb91452]{text-decoration-line:underline}.loan-card-progress[data-v-bdb91452]:hover,.loan-card-progress[data-v-bdb91452]:focus{text-decoration-line:none}
+.loan-card-use[data-v-9acb8553]:hover,.loan-card-use[data-v-9acb8553]:focus{--tw-text-opacity: 1;color:rgba(var(--text-primary),var(--tw-text-opacity, 1))}.loan-card-active-hover:hover .loan-card-use[data-v-9acb8553]{text-decoration-line:underline}.loan-card-progress[data-v-9acb8553]:hover,.loan-card-progress[data-v-9acb8553]:focus{text-decoration-line:none}

package/dist/vue/KvClassicLoanCard.js

@@ -12,12 +12,13 @@ import ee from "./KvMaterialIcon.js";
 import te from "./KvLoadingPlaceholder.js";
 import ae from "./KvLoanTeamPick.js";
 import oe, { KV_LOAN_ACTIVITIES_FRAGMENT as ne } from "./KvLoanActivities.js";
-import { resolveComponent as i, openBlock as o, createElementBlock as m, normalizeClass as s, normalizeStyle as le, createElementVNode as c, createBlock as r, resolveDynamicComponent as k, withCtx as g, createVNode as w, createTextVNode as re, toDisplayString as M, createCommentVNode as f, Fragment as ie, renderList as se } from "vue";
+import { resolveComponent as i, openBlock as o, createElementBlock as m, normalizeClass as s, normalizeStyle as le, createElementVNode as c, createBlock as r, resolveDynamicComponent as g, withCtx as k, createVNode as w, createTextVNode as re, toDisplayString as M, createCommentVNode as f, Fragment as ie, renderList as se } from "vue";
 import "./KvClassicLoanCard.css";
 import de from "../_virtual/_plugin-vue_export-helper.js";
 const Ge = K`
 	fragment KvClassicLoanCard on LoanBasic {
 		id
+		gender
 		image {
 			id
 			hash # for imageHash
@@ -273,10 +274,10 @@ const Ge = K`
 }, ue = { class: "tw-grow" }, ce = { class: "loan-card-active-hover" }, we = {
   key: 1,
   class: "tw-relative"
-}, fe = { key: 0 }, ke = {
+}, fe = { key: 0 }, ge = {
   class: "tw-absolute tw-bottom-1 tw-left-1 tw-text-primary tw-bg-white tw-rounded tw-p-1 tw-mb-0 tw-mr-2 tw-text-h4 tw-inline-flex tw-items-center",
   style: { padding: "2px 6px", "text-transform": "capitalize" }
-}, ge = { class: "tw-mb-1.5 tw-pt-1" }, ve = { key: 1 }, he = {
+}, ke = { class: "tw-mb-1.5 tw-pt-1" }, ve = { key: 1 }, he = {
   key: 0,
   class: "tw-w-full tw-pt-1 tw-pr-1"
 }, be = {
@@ -300,14 +301,14 @@ function _e(l, a, e, t, T, d) {
           class: s(["tw-mb-1 tw-w-full", { "tw-rounded-t tw-rounded-b-none": e.largeCard, "tw-rounded": !e.largeCard }]),
           style: { height: "15rem" }
         }, null, 8, ["class"])) : (o(), m("div", we, [
-          (o(), r(k(t.tag), {
+          (o(), r(g(t.tag), {
             to: t.readMorePath,
             href: t.readMorePath,
             class: "tw-flex",
             "aria-label": "Borrower image",
             onClick: a[0] || (a[0] = (n) => t.clickReadMore("Photo", n))
           }, {
-            default: g(() => [
+            default: k(() => [
               w(v, {
                 class: s(["tw-relative tw-w-full tw-bg-black", { "tw-rounded-t": e.largeCard, "tw-rounded": !e.largeCard }]),
                 alt: `Photo of ${t.borrowerName}`,
@@ -318,7 +319,7 @@ function _e(l, a, e, t, T, d) {
                 "photo-path": e.photoPath
               }, null, 8, ["class", "alt", "aspect-ratio", "default-image", "hash", "images", "photo-path"]),
               t.countryName ? (o(), m("div", fe, [
-                c("p", ke, [
+                c("p", ge, [
                   w(h, {
                     class: "tw-h-2 tw-w-2",
                     icon: t.mdiMapMarker
@@ -345,14 +346,14 @@ function _e(l, a, e, t, T, d) {
             onToggleBookmark: a[1] || (a[1] = (n) => l.$emit("toggle-bookmark"))
           }, null, 8, ["loan-id", "is-bookmarked"]))
         ])),
-        (o(), r(k(t.tag), {
+        (o(), r(g(t.tag), {
           to: t.readMorePath,
           href: t.readMorePath,
           class: s(["tw-flex tw-no-underline hover:tw-no-underline focus:tw-no-underline", { "tw-px-1": e.largeCard }]),
           "aria-label": "Loan tag",
           onClick: a[2] || (a[2] = (n) => t.clickReadMore("Tag", n))
         }, {
-          default: g(() => [
+          default: k(() => [
             e.showTags && !t.isLoading ? (o(), r(_, {
               key: 0,
               loan: e.loan
@@ -360,15 +361,15 @@ function _e(l, a, e, t, T, d) {
           ]),
           _: 1
         }, 8, ["to", "href", "class"])),
-        (o(), r(k(t.tag), {
+        (o(), r(g(t.tag), {
           to: t.readMorePath,
           href: t.readMorePath,
           class: "loan-card-use tw-no-underline tw-text-primary",
           "aria-label": "Loan use",
           onClick: a[3] || (a[3] = (n) => t.clickReadMore("Use", n))
         }, {
-          default: g(() => [
-            c("div", ge, [
+          default: k(() => [
+            c("div", ke, [
               t.isLoading ? (o(), m("div", {
                 key: 0,
                 class: s(["tw-w-full", { "tw-px-1": e.largeCard }]),
@@ -421,7 +422,7 @@ function _e(l, a, e, t, T, d) {
         })
       ])),
       c("div", null, [
-        t.sharesAvailable ? (o(), r(k(t.tag), {
+        t.sharesAvailable ? (o(), r(g(t.tag), {
           key: 0,
           to: t.readMorePath,
           href: t.readMorePath,
@@ -429,7 +430,7 @@ function _e(l, a, e, t, T, d) {
           "aria-label": "Loan progress",
           onClick: a[5] || (a[5] = (n) => t.clickReadMore("Progress", n))
         }, {
-          default: g(() => [
+          default: k(() => [
             w(A, {
               id: "loanProgress",
               "money-left": t.unreservedAmount,
@@ -498,7 +499,7 @@ function _e(l, a, e, t, T, d) {
     ])) : f("", !0)
   ], 6);
 }
-const Ue = /* @__PURE__ */ de(me, [["render", _e], ["__scopeId", "data-v-bdb91452"]]);
+const Ue = /* @__PURE__ */ de(me, [["render", _e], ["__scopeId", "data-v-9acb8553"]]);
 export {
   Ge as KV_CLASSIC_LOAN_CARD_FRAGMENT,
   Ie as KV_CLASSIC_LOAN_CARD_USER_FRAGMET,

package/dist/vue/KvWwwHeader/KvHeaderLinkBar.css

@@ -1 +1 @@
-.header-link[data-v-a0bb7bc8]{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-a0bb7bc8]:hover{--tw-text-opacity: 1;color:rgba(var(--text-action),var(--tw-text-opacity, 1));text-decoration-line:none}[data-v-a0bb7bc8] .avatar div:first-child{display:flex}
+.header-link[data-v-aaf8f53d]{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-aaf8f53d]:hover{--tw-text-opacity: 1;color:rgba(var(--text-action),var(--tw-text-opacity, 1));text-decoration-line:none}[data-v-aaf8f53d] .avatar div:first-child{display:flex}

package/dist/vue/KvWwwHeader/KvHeaderLinkBar.js

@@ -1,20 +1,20 @@
-import { defineAsyncComponent as b, ref as r, computed as x, watch as _, onMounted as G, onUnmounted as J, resolveComponent as p, resolveDirective as Q, openBlock as i, createElementBlock as w, withDirectives as m, normalizeClass as y, createVNode as S, createBlock as f, withCtx as H, createTextVNode as M, createElementVNode as A, createCommentVNode as C, vShow as E, toDisplayString as X } from "vue";
-import { mdiAccountCircle as Y, mdiChevronDown as Z, mdiMagnify as $, mdiMenu as ee } from "@mdi/js";
-import ne from "numeral";
-import te from "../KvMaterialIcon.js";
-import oe from "../KvIconBag.js";
-import ae from "./KvHeaderDropdownLink.js";
-import le from "../KvUserAvatar.js";
-import { throttle as re } from "../../utils/throttle.js";
-import { isLegacyPlaceholderAvatar as ie } from "../../utils/imageUtils.js";
+import { defineAsyncComponent as g, ref as r, computed as x, watch as D, onMounted as Q, onUnmounted as X, resolveComponent as p, resolveDirective as Y, openBlock as i, createElementBlock as w, withDirectives as s, normalizeClass as y, withModifiers as H, createVNode as E, createBlock as f, withCtx as U, createTextVNode as M, createElementVNode as T, createCommentVNode as _, vShow as P, toDisplayString as Z } from "vue";
+import { mdiAccountCircle as $, mdiChevronDown as ee, mdiMagnify as ne, mdiMenu as te } from "@mdi/js";
+import oe from "numeral";
+import ae from "../KvMaterialIcon.js";
+import le from "../KvIconBag.js";
+import re from "./KvHeaderDropdownLink.js";
+import ie from "../KvUserAvatar.js";
+import { throttle as de } from "../../utils/throttle.js";
+import { isLegacyPlaceholderAvatar as ue } from "../../utils/imageUtils.js";
 import "./KvHeaderLinkBar.css";
-import de from "../../_virtual/_plugin-vue_export-helper.js";
-const ue = b(() => import("./KvHeaderMobileMenu.js")), P = b(() => import("./KvHeaderMyKivaMenu.js")), me = b(() => import("./LendMenu/KvLendMenu.js")), se = b(() => import("./KvHeaderTakeActionMenu.js")), ve = b(() => import("./KvHeaderAboutMenu.js")), U = 120, k = "avatar-menu", B = "menuButton", V = { top: "-3.75rem", width: "100%" }, ce = {
+import me from "../../_virtual/_plugin-vue_export-helper.js";
+const se = g(() => import("./KvHeaderMobileMenu.js")), V = g(() => import("./KvHeaderMyKivaMenu.js")), ve = g(() => import("./LendMenu/KvLendMenu.js")), ce = g(() => import("./KvHeaderTakeActionMenu.js")), we = g(() => import("./KvHeaderAboutMenu.js")), B = 120, k = "avatar-menu", L = "menuButton", R = { top: "-3.75rem", width: "100%" }, fe = {
   components: {
-    KvMaterialIcon: te,
-    KvIconBag: oe,
-    KvHeaderDropdownLink: ae,
-    KvUserAvatar: le
+    KvMaterialIcon: ae,
+    KvIconBag: le,
+    KvHeaderDropdownLink: re,
+    KvUserAvatar: ie
   },
   props: {
     loggedIn: {
@@ -58,104 +58,110 @@ const ue = b(() => import("./KvHeaderMobileMenu.js")), P = b(() => import("./KvH
     "item-hover"
   ],
   setup(l, { emit: n }) {
-    const a = r(null), e = r(null), L = r(null), K = r(null), g = r(null), c = r(null), T = r(null), I = r(null), d = r(null), t = r(null), s = (o, v, u = null) => {
-      n("item-hover", o, v, u);
-    }, R = (o, v, u = null) => {
-      navigator.maxTouchPoints || (t.value = o, s(
+    const a = r(null), e = r(null), K = r(null), O = r(null), h = r(null), c = r(null), A = r(null), I = r(null), d = r(null), t = r(null), u = (o, v, m = null) => {
+      n("item-hover", o, v, m);
+    }, F = (o, v, m = null) => {
+      navigator.maxTouchPoints || (t.value = o, u(
         o,
         v,
-        o === B && l.isMobile ? V : u
+        o === L && l.isMobile ? R : m
       ));
-    }, F = (o) => {
-      !navigator.maxTouchPoints && t.value === o && (t.value = null, s());
-    }, O = () => {
-      var D;
-      const o = (D = a.value) == null ? void 0 : D.getBoundingClientRect();
+    }, z = (o) => {
+      !navigator.maxTouchPoints && t.value === o && (t.value = null, u());
+    }, N = () => {
+      var C;
+      const o = (C = a.value) == null ? void 0 : C.getBoundingClientRect();
       if (!o) return null;
-      const u = o.left + o.width / 2 - U / 2;
+      const m = o.left + o.width / 2 - B / 2;
       return {
-        ...u + U > window.innerWidth ? { right: 0 } : { left: l.isMobile ? 0 : `${u}px` },
+        ...m + B > window.innerWidth ? { right: 0 } : { left: l.isMobile ? 0 : `${m}px` },
         marginTop: "-2px",
         // Avoid closing avatar menu on header edge
         borderRadius: l.isMobile ? "auto" : "0px 0px 8px 8px",
-        width: l.isMobile ? "100%" : `${U}px`
+        width: l.isMobile ? "100%" : `${B}px`
       };
-    }, h = () => {
-      t.value = k, s(a.value, P, O());
-    }, z = (o, v, u) => {
-      t.value === B && (t.value = null), !t.value || t.value !== o ? (t.value = o, o === k ? h() : o === B && l.isMobile ? s(o, v, V) : s(o, v, u)) : (t.value = null, s());
-    }, N = re(() => {
-      t.value === k && h();
-    }, 100), W = x(() => l.isMobile ? void 0 : "/lend-by-category"), j = x(() => {
+    }, b = () => {
+      t.value = k, u(a.value, V, N());
+    }, W = (o, v, m) => {
+      t.value === L && (t.value = null), !t.value || t.value !== o ? (t.value = o, o === k ? b() : o === L && l.isMobile ? u(o, v, R) : u(o, v, m)) : (t.value = null, u());
+    }, S = de(() => {
+      t.value === k && b();
+    }, 100), j = x(() => l.isMobile ? void 0 : "/lend-by-category"), q = x(() => {
       var o;
       return ((o = l.lenderImageUrl) == null ? void 0 : o.split("/").pop()) ?? "";
-    }), q = x(() => Math.floor(l.balance));
-    return _(
+    }), G = x(() => Math.floor(l.balance)), J = (o) => {
+      o.target === o.currentTarget && u();
+    };
+    return D(
       () => l.isMobile,
       () => {
-        t.value === k && h();
+        t.value === k && b();
       }
-    ), _(
+    ), D(
       () => l.openMenuItem,
       (o) => {
         o || (t.value = null);
       }
-    ), G(() => {
-      import("./KvHeaderMobileMenu.js"), import("./KvHeaderMyKivaMenu.js"), import("./LendMenu/KvLendMenu.js"), import("./KvHeaderTakeActionMenu.js"), import("./KvHeaderAboutMenu.js"), window.addEventListener("resize", N);
-    }), J(() => {
-      window.removeEventListener("resize", N);
+    ), Q(() => {
+      import("./KvHeaderMobileMenu.js"), import("./KvHeaderMyKivaMenu.js"), import("./LendMenu/KvLendMenu.js"), import("./KvHeaderTakeActionMenu.js"), import("./KvHeaderAboutMenu.js"), window.addEventListener("resize", S);
+    }), X(() => {
+      window.removeEventListener("resize", S);
     }), {
       AVATAR_MENU_ID: k,
       openMenuId: t,
-      numeral: ne,
-      mdiAccountCircle: Y,
-      mdiChevronDown: Z,
-      mdiMagnify: $,
-      mdiMenu: ee,
-      onHover: s,
+      numeral: oe,
+      mdiAccountCircle: $,
+      mdiChevronDown: ee,
+      mdiMagnify: ne,
+      mdiMenu: te,
+      onHover: u,
       avatar: a,
       lendButton: e,
-      aboutUsLink: L,
-      partnerWithUsLink: K,
-      borrowLink: g,
+      aboutUsLink: K,
+      partnerWithUsLink: O,
+      borrowLink: h,
       supportKivaLink: c,
-      basketLink: T,
+      basketLink: A,
       signInLink: I,
       menuButton: d,
-      lendUrl: W,
-      avatarFilename: j,
-      handleOnHover: R,
-      handleTouchStart: z,
-      handleMouseOut: F,
-      handleAvatarMenuPosition: h,
-      KvHeaderMobileMenu: ue,
-      KvHeaderMyKivaMenu: P,
-      KvLendMenu: me,
-      KvHeaderTakeActionMenu: se,
-      KvHeaderAboutMenu: ve,
-      isLegacyPlaceholderAvatar: ie,
-      getAvatarMenuPosition: O,
-      roundedBalance: q
+      lendUrl: j,
+      avatarFilename: q,
+      handleOnHover: F,
+      handleTouchStart: W,
+      handleMouseOut: z,
+      handleAvatarMenuPosition: b,
+      KvHeaderMobileMenu: se,
+      KvHeaderMyKivaMenu: V,
+      KvLendMenu: ve,
+      KvHeaderTakeActionMenu: ce,
+      KvHeaderAboutMenu: we,
+      isLegacyPlaceholderAvatar: ue,
+      getAvatarMenuPosition: N,
+      handleEmptySpaceClick: J,
+      roundedBalance: G
     };
   }
-}, we = { class: "tw-h-full tw-flex tw-items-center tw-gap-0.5 md:tw-gap-2 lg:tw-gap-2.5" }, fe = ["href"], Me = { class: "tw-text-eco-green-4" }, ke = ["href"];
-function be(l, n, a, e, L, K) {
-  const g = p("kv-material-icon"), c = p("KvHeaderDropdownLink"), T = p("kv-icon-bag"), I = p("KvUserAvatar"), d = Q("kv-track-event");
-  return i(), w("div", we, [
-    m((i(), w("button", {
+}, Me = ["href"], ke = { class: "tw-text-eco-green-4" }, ge = ["href"];
+function he(l, n, a, e, K, O) {
+  const h = p("kv-material-icon"), c = p("KvHeaderDropdownLink"), A = p("kv-icon-bag"), I = p("KvUserAvatar"), d = Y("kv-track-event");
+  return i(), w("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] = (...t) => e.handleEmptySpaceClick && e.handleEmptySpaceClick(...t))
+  }, [
+    s((i(), w("button", {
       ref: "menuButton",
       class: y(["header-link tw-inline-flex md:tw-hidden", {
         "tw-text-tertiary": a.openMenuItem && a.openMenuItem !== e.KvHeaderMobileMenu
       }]),
       onMouseover: n[0] || (n[0] = (t) => e.handleOnHover("menuButton", e.KvHeaderMobileMenu)),
       onMouseout: n[1] || (n[1] = (t) => e.handleMouseOut("menuButton")),
-      onTouchstart: n[2] || (n[2] = (t) => e.handleTouchStart("menuButton", e.KvHeaderMobileMenu))
+      onTouchstart: n[2] || (n[2] = H((t) => e.handleTouchStart("menuButton", e.KvHeaderMobileMenu), ["stop"]))
     }, [
-      S(g, { icon: e.mdiMenu }, null, 8, ["icon"])
+      E(h, { icon: e.mdiMenu }, null, 8, ["icon"])
     ], 34)), [
       [d, a.openMenuItem === e.KvHeaderMobileMenu ? ["TopNav", "click-Hamburger-menu"] : null]
     ]),
-    m((i(), f(c, {
+    s((i(), f(c, {
       class: "tw-py-1",
       "ref-name": "lendButton",
       href: e.lendUrl,
@@ -165,16 +171,16 @@ function be(l, n, a, e, L, K) {
       "base-class": "tw-inline-flex md:tw-border md:tw-rounded-md tw-px-1.5 tw-py-1",
       onOnHover: e.handleOnHover,
       onMouseout: n[3] || (n[3] = (t) => e.handleMouseOut("lendButton")),
-      onTouchstart: n[4] || (n[4] = (t) => e.handleTouchStart("lendButton", e.KvLendMenu))
+      onTouchstart: n[4] || (n[4] = H((t) => e.handleTouchStart("lendButton", e.KvLendMenu), ["stop"]))
     }, {
-      default: H(() => n[10] || (n[10] = [
+      default: U(() => n[11] || (n[11] = [
         M(" Lend ")
       ])),
       _: 1
     }, 8, ["href", "menu-component", "open-menu-item", "dropdown-icon", "onOnHover"])), [
       [d, ["TopNav", "click-Lend"]]
     ]),
-    m((i(), f(c, {
+    s((i(), f(c, {
       "ref-name": "takeActionButton",
       "base-class": "tw-hidden md:tw-inline-flex tw-py-1",
       "menu-component": e.KvHeaderTakeActionMenu,
@@ -185,14 +191,14 @@ function be(l, n, a, e, L, K) {
       onMouseout: n[5] || (n[5] = (t) => e.handleMouseOut("takeActionButton")),
       onUserTap: e.handleTouchStart
     }, {
-      default: H(() => n[11] || (n[11] = [
+      default: U(() => n[12] || (n[12] = [
         M(" Take action ")
       ])),
       _: 1
     }, 8, ["menu-component", "open-menu-item", "dropdown-icon", "onOnHover", "onUserTap"])), [
       [d, ["TopNav", "click-TakeAction"]]
     ]),
-    m((i(), f(c, {
+    s((i(), f(c, {
       "ref-name": "aboutUsLink",
       "data-testid": "header-about",
       "base-class": "tw-hidden md:tw-inline-flex tw-py-1",
@@ -204,48 +210,48 @@ function be(l, n, a, e, L, K) {
       onMouseout: n[6] || (n[6] = (t) => e.handleMouseOut("aboutUsLink")),
       onUserTap: e.handleTouchStart
     }, {
-      default: H(() => n[12] || (n[12] = [
+      default: U(() => n[13] || (n[13] = [
         M(" About ")
       ])),
       _: 1
     }, 8, ["menu-component", "open-menu-item", "dropdown-icon", "onOnHover", "onUserTap"])), [
       [d, ["TopNav", "click-About"]]
     ]),
-    n[16] || (n[16] = A("div", { class: "tw-flex-1 tw-h-full" }, null, -1)),
-    a.loggedIn ? m((i(), w("a", {
+    n[17] || (n[17] = T("div", { class: "tw-flex-1 tw-h-full" }, null, -1)),
+    a.loggedIn ? s((i(), w("a", {
       key: 0,
       ref: "dashboardLink",
       href: a.myDashboardUrl,
       class: y(["header-link tw-hidden md:tw-block", { "tw-text-tertiary": !!a.openMenuItem }])
-    }, n[13] || (n[13] = [
+    }, n[14] || (n[14] = [
       M(" My dashboard ")
-    ]), 10, fe)), [
+    ]), 10, Me)), [
       [d, ["TopNav", "click-Dashboard"]]
-    ]) : C("", !0),
-    m((i(), w("a", {
+    ]) : _("", !0),
+    s((i(), w("a", {
       ref: "basketLink",
       href: "/basket",
       class: y(["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" },
       "data-testid": "header-basket"
     }, [
-      S(T, {
+      E(A, {
         class: "tw-w-3 tw-h-3 md:tw-w-3.5 md:tw-h-3.5 tw-pointer-events-none",
         count: a.basketCount
       }, null, 8, ["count"]),
-      n[14] || (n[14] = A("span", { class: "tw-hidden md:tw-block" }, "Basket", -1))
+      n[15] || (n[15] = T("span", { class: "tw-hidden md:tw-block" }, "Basket", -1))
     ], 2)), [
-      [E, a.basketCount > 0],
+      [P, a.basketCount > 0],
       [d, ["TopNav", "click-Basket"]]
     ]),
-    m(A("div", {
+    s(T("div", {
       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",
       onMouseover: n[7] || (n[7] = (t) => e.handleOnHover(e.AVATAR_MENU_ID, e.KvHeaderMyKivaMenu, e.getAvatarMenuPosition())),
       onMouseout: n[8] || (n[8] = (t) => e.handleMouseOut(e.AVATAR_MENU_ID)),
-      onTouchstart: n[9] || (n[9] = (t) => e.handleTouchStart(e.AVATAR_MENU_ID))
+      onTouchstart: n[9] || (n[9] = H((t) => e.handleTouchStart(e.AVATAR_MENU_ID), ["stop"]))
     }, [
-      e.isLegacyPlaceholderAvatar(e.avatarFilename) || !e.avatarFilename ? (i(), f(g, {
+      e.isLegacyPlaceholderAvatar(e.avatarFilename) || !e.avatarFilename ? (i(), f(h, {
         key: 0,
         icon: e.mdiAccountCircle,
         class: "tw-w-3"
@@ -256,23 +262,23 @@ function be(l, n, a, e, L, K) {
         "lender-image-url": a.lenderImageUrl,
         "is-small": ""
       }, null, 8, ["lender-name", "lender-image-url"])),
-      A("span", Me, X(e.numeral(e.roundedBalance).format("$0")), 1)
+      T("span", ke, Z(e.numeral(e.roundedBalance).format("$0")), 1)
     ], 544), [
-      [E, a.loggedIn]
+      [P, a.loggedIn]
     ]),
-    a.loggedIn ? C("", !0) : m((i(), w("a", {
+    a.loggedIn ? _("", !0) : s((i(), w("a", {
       key: 1,
       ref: "signInLink",
       href: a.loginUrl,
       class: y(["header-link", { "tw-text-tertiary": !!a.openMenuItem }])
-    }, n[15] || (n[15] = [
+    }, n[16] || (n[16] = [
       M(" Sign in ")
-    ]), 10, ke)), [
+    ]), 10, ge)), [
       [d, ["TopNav", "click-Sign-in"]]
     ])
-  ]);
+  ], 32);
 }
-const Ke = /* @__PURE__ */ de(ce, [["render", be], ["__scopeId", "data-v-a0bb7bc8"]]);
+const Oe = /* @__PURE__ */ me(fe, [["render", he], ["__scopeId", "data-v-aaf8f53d"]]);
 export {
-  Ke as default
+  Oe as default
 };

package/dist/vue/KvWwwHeader.css

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

package/dist/vue/KvWwwHeader.js

@@ -1,18 +1,18 @@
-import { ref as l, shallowRef as D, computed as N, onMounted as B, onBeforeUnmount as S, resolveComponent as g, resolveDirective as x, openBlock as w, createBlock as p, withCtx as b, createElementVNode as k, normalizeStyle as _, createVNode as v, Transition as E, withDirectives as h, vShow as I, createElementBlock as A, normalizeClass as K, resolveDynamicComponent as G } from "vue";
+import { ref as a, shallowRef as N, computed as B, onMounted as S, onBeforeUnmount as x, resolveComponent as g, resolveDirective as A, openBlock as w, createBlock as E, withCtx as b, createElementVNode as k, normalizeStyle as h, createVNode as v, Transition as I, withDirectives as _, vShow as C, createElementBlock as K, normalizeClass as O, resolveDynamicComponent as G } from "vue";
 import z from "@kiva/kv-tokens";
 import P from "./KvWwwHeader/KvHeaderLinkBar.js";
 import R from "./KvWwwHeader/KvHeaderLogo.js";
-import O from "./KvThemeProvider.js";
-import V from "./KvPageContainer.js";
-import { throttle as W } from "../utils/throttle.js";
+import V from "./KvThemeProvider.js";
+import W from "./KvPageContainer.js";
+import { throttle as Y } from "../utils/throttle.js";
 import "./KvWwwHeader.css";
-import Y from "../_virtual/_plugin-vue_export-helper.js";
-const j = "3.75rem", q = ["lendMenu", "aboutUsLink"], F = {
+import j from "../_virtual/_plugin-vue_export-helper.js";
+const q = "3.75rem", F = ["lendMenu", "aboutUsLink"], J = {
   components: {
     KvHeaderLinkBar: P,
     KvHeaderLogo: R,
-    KvThemeProvider: O,
-    KvPageContainer: V
+    KvThemeProvider: V,
+    KvPageContainer: W
   },
   props: {
     loggedIn: {
@@ -68,65 +68,68 @@ const j = "3.75rem", q = ["lendMenu", "aboutUsLink"], F = {
     "load-lend-menu-data"
   ],
   setup(L, { emit: o }) {
-    const n = l(!0), e = l(null), a = l(!1), r = D(null), s = l(null), u = l({ left: 0, position: "relative" }), d = l(!1), c = l(null);
+    const n = a(!0), e = a(null), r = a(!1), i = N(null), u = a(null), d = a({ left: 0, position: "relative" }), m = a(!1), c = a(null);
     let f;
-    const m = N(() => {
-      var i, t;
-      return ((t = (i = s.value) == null ? void 0 : i.$options) == null ? void 0 : t.name) === "KvHeaderMobileMenu";
-    }), T = (i, t, M) => {
-      t ? (c.value = i, clearTimeout(f), r.value !== t && (u.value = { left: 0, position: "relative" }), r.value = t, a.value = !0, M && (u.value = {
-        ...M,
+    const l = B(() => {
+      var s, t;
+      return ((t = (s = u.value) == null ? void 0 : s.$options) == null ? void 0 : t.name) === "KvHeaderMobileMenu";
+    }), y = (s, t, p) => {
+      t ? (c.value = s, clearTimeout(f), i.value !== t && (d.value = { left: 0, position: "relative" }), i.value = t, r.value = !0, p && (d.value = {
+        ...p,
         position: "absolute"
-      })) : a.value && (f = setTimeout(() => {
-        a.value = !1, r.value = null;
+      })) : r.value && (f = setTimeout(() => {
+        r.value = !1, i.value = null;
       }, 100));
-    }, C = (i) => {
+    }, T = (s) => {
       var t;
-      (t = s.value) == null || t.onLoad(i);
+      (t = u.value) == null || t.onLoad(s);
     }, U = () => {
+      if (!l.value) return y();
+    }, D = () => {
       o("load-lend-menu-data");
-    }, y = () => {
-      d.value = (window == null ? void 0 : window.innerWidth) < z.breakpoints.md, d.value && q.includes(c.value) && (r.value = null, a.value = !1);
-    }, H = W(y, 100);
-    return B(() => {
-      y(), window.addEventListener("resize", H);
-    }), S(() => {
-      window.removeEventListener("resize", H);
+    }, H = () => {
+      m.value = (window == null ? void 0 : window.innerWidth) < z.breakpoints.md, m.value && F.includes(c.value) && (i.value = null, r.value = !1);
+    }, M = Y(H, 100);
+    return S(() => {
+      H(), window.addEventListener("resize", M);
+    }), x(() => {
+      window.removeEventListener("resize", M);
     }), {
-      HEADER_HEIGHT: j,
-      emitLendMenuEvent: U,
-      isMobile: d,
+      HEADER_HEIGHT: q,
+      emitLendMenuEvent: D,
+      isMobile: m,
       linksVisible: n,
-      menuOpen: a,
-      isMobileMenuActive: m,
-      onHover: T,
-      loadMenuData: C,
+      menuOpen: r,
+      isMobileMenuActive: l,
+      onHover: y,
+      loadMenuData: T,
+      handleOverlayClick: U,
       activeHeaderItem: e,
-      menuComponent: r,
-      menuComponentInstance: s,
-      menuPosition: u
+      menuComponent: i,
+      menuComponentInstance: u,
+      menuPosition: d
     };
   }
-}, J = {
+}, Q = {
   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 Q(L, o, n, e, a, r) {
-  const s = g("kv-header-link-bar"), u = g("kv-header-logo"), d = g("kv-page-container"), c = g("kv-theme-provider"), f = x("kv-track-event");
-  return w(), p(c, {
+function X(L, o, n, e, r, i) {
+  const u = g("kv-header-link-bar"), d = g("kv-header-logo"), m = g("kv-page-container"), c = g("kv-theme-provider"), f = A("kv-track-event");
+  return w(), E(c, {
     tag: "div",
     class: "tw-bg-primary"
   }, {
     default: b(() => [
       k("nav", {
         class: "tw-font-medium tw-relative",
-        style: _({ height: e.HEADER_HEIGHT })
+        style: h({ height: e.HEADER_HEIGHT })
       }, [
-        v(d, null, {
+        v(m, null, {
           default: b(() => [
-            v(E, { name: "header-fade" }, {
+            v(I, { name: "header-fade" }, {
               default: b(() => [
-                h(v(s, {
+                _(v(u, {
                   "logged-in": n.loggedIn,
                   "basket-count": n.basketCount,
                   "login-url": n.loginUrl,
@@ -138,13 +141,13 @@ function Q(L, o, n, e, a, r) {
                   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"]), [
-                  [I, e.linksVisible]
+                  [C, e.linksVisible]
                 ])
               ]),
               _: 1
             }),
-            h((w(), A("a", J, [
-              v(u)
+            _((w(), K("a", Q, [
+              v(d)
             ])), [
               [f, ["TopNav", "click-Logo"]]
             ])
@@ -152,23 +155,23 @@ function Q(L, o, n, e, a, r) {
           _: 1
         })
       ], 4),
-      v(E, { name: "header-fade" }, {
+      v(I, { name: "header-fade" }, {
         default: b(() => [
-          h(k("div", {
+          _(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: _({ top: e.HEADER_HEIGHT }),
-            onTouchstart: o[3] || (o[3] = (m) => e.onHover())
+            style: h({ top: e.HEADER_HEIGHT }),
+            onTouchstart: o[3] || (o[3] = (...l) => e.handleOverlayClick && e.handleOverlayClick(...l))
           }, [
             k("div", {
-              class: K(["tw-bg-primary tw-overflow-y-auto", { "tw-min-h-dvh": e.isMobileMenuActive }]),
-              style: _({
+              class: O(["tw-bg-primary tw-overflow-y-auto", { "tw-min-h-dvh": e.isMobileMenuActive }]),
+              style: h({
                 ...e.menuPosition,
                 maxHeight: e.isMobileMenuActive ? "auto" : `calc(100dvh - ${e.HEADER_HEIGHT})`
               }),
-              onMouseover: o[1] || (o[1] = (m) => e.onHover(e.activeHeaderItem, e.menuComponent)),
-              onMouseout: o[2] || (o[2] = (m) => e.onHover())
+              onMouseover: o[1] || (o[1] = (l) => e.onHover(e.activeHeaderItem, e.menuComponent)),
+              onMouseout: o[2] || (o[2] = (l) => e.onHover())
             }, [
-              (w(), p(G(e.menuComponent), {
+              (w(), E(G(e.menuComponent), {
                 ref: "menuComponentInstance",
                 "logged-in": n.loggedIn,
                 "login-url": n.loginUrl,
@@ -180,11 +183,11 @@ function Q(L, o, n, e, a, r) {
                 "is-mobile": e.isMobile,
                 "countries-not-lent-to-url": n.countriesNotLentToUrl,
                 onLoadLendMenuData: e.emitLendMenuEvent,
-                onClosingMenu: o[0] || (o[0] = (m) => e.onHover())
+                onClosingMenu: o[0] || (o[0] = (l) => e.onHover())
               }, 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), [
-            [I, e.menuOpen]
+            [C, e.menuOpen]
           ])
         ]),
         _: 1
@@ -193,7 +196,7 @@ function Q(L, o, n, e, a, r) {
     _: 1
   });
 }
-const re = /* @__PURE__ */ Y(F, [["render", Q], ["__scopeId", "data-v-cdd5a3af"]]);
+const ie = /* @__PURE__ */ j(J, [["render", X], ["__scopeId", "data-v-9410d912"]]);
 export {
-  re as default
+  ie as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "6.57.4",
+  "version": "6.57.6",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -114,5 +114,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "499920c6313443f9e9c885f962bff394457fc4ef"
+  "gitHead": "24c9aa1fe01dc29c3aaccd0d1f9f16e3755d2094"
 }