@kiva/kv-components 6.52.7 → 6.52.9

package/dist/vue/KvLendCta.css

@@ -1 +1 @@
-.amountDropdownWrapper[data-v-d161d592] select{border-radius:14px 0 0 14px}.lend-again[data-v-d161d592] span{padding-left:0;padding-right:0;padding-left:.5rem;padding-right:.5rem}.lendButtonWrapper[data-v-d161d592] span:first-child{border-radius:0 14px 14px 0}.filtered-dropdown[data-v-d161d592] select{cursor:pointer;border-radius:1rem;border-width:2px;font-weight:500}.unselected-dropdown[data-v-d161d592] select{--tw-border-opacity: 1;border-color:rgb(158 158 158 / var(--tw-border-opacity, 1))}.preset-option[data-v-d161d592] span.tw-w-full:first-child{border-width:2px;--tw-border-opacity: 1;border-color:rgb(158 158 158 / var(--tw-border-opacity, 1))}.selected-dropdown[data-v-d161d592] select,.selected-option[data-v-d161d592] span.tw-w-full:first-child{--tw-border-opacity: 1;border-color:rgba(var(--border-action),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--bg-secondary),var(--tw-bg-opacity, 1))}.button-ellipsis[data-v-d161d592] span>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width: 410px){.mobile-dropdown-small[data-v-d161d592]{flex:0 0 40%}}
+.amountDropdownWrapper[data-v-629f4bdf] select{border-radius:14px 0 0 14px}.lend-again[data-v-629f4bdf] span{padding-left:.5rem;padding-right:.5rem}.lendButtonWrapper[data-v-629f4bdf] span:first-child{border-radius:0 14px 14px 0}.filtered-dropdown[data-v-629f4bdf] select{cursor:pointer;border-radius:1rem;border-width:2px;font-weight:500}.unselected-dropdown[data-v-629f4bdf] select{--tw-border-opacity: 1;border-color:rgb(158 158 158 / var(--tw-border-opacity, 1))}.preset-option[data-v-629f4bdf] span.tw-w-full:first-child{border-width:2px;--tw-border-opacity: 1;border-color:rgb(158 158 158 / var(--tw-border-opacity, 1))}.selected-dropdown[data-v-629f4bdf] select,.selected-option[data-v-629f4bdf] span.tw-w-full:first-child{--tw-border-opacity: 1;border-color:rgba(var(--border-action),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--bg-secondary),var(--tw-bg-opacity, 1))}.button-ellipsis[data-v-629f4bdf] span>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width: 410px){.mobile-dropdown-small[data-v-629f4bdf]{flex:0 0 40%}}

package/dist/vue/KvLendCta.js

@@ -1,35 +1,35 @@
-import b from "graphql-tag";
-import { mdiChevronRight as P } from "@mdi/js";
+import T from "graphql-tag";
+import { mdiChevronRight as N } from "@mdi/js";
 import { throttle as C } from "../utils/throttle.js";
-import { getLendCtaSelectedOption as g, getDropdownPriceArray as O } from "../utils/loanUtils.js";
-import I from "./KvLendAmountButton.js";
+import { getLendCtaSelectedOption as L, getDropdownPriceArray as I } from "../utils/loanUtils.js";
+import R from "./KvLendAmountButton.js";
 import S from "./KvSelect.js";
 import F from "./KvButton.js";
-import N from "./KvMaterialIcon.js";
-import { resolveComponent as y, openBlock as i, createElementBlock as l, createBlock as r, withCtx as a, createTextVNode as m, toDisplayString as u, createElementVNode as f, createVNode as _, withModifiers as B, normalizeClass as h, Fragment as k, renderList as A, createCommentVNode as c } from "vue";
+import V from "./KvMaterialIcon.js";
+import { resolveComponent as v, openBlock as o, createElementBlock as i, createBlock as a, withCtx as r, createTextVNode as f, toDisplayString as u, createElementVNode as h, createVNode as y, withModifiers as A, normalizeClass as w, Fragment as k, renderList as p, createCommentVNode as c } from "vue";
 import "./KvLendCta.css";
-import V from "../_virtual/_plugin-vue_export-helper.js";
-const p = "Other", E = 430, ce = b`
+import W from "../_virtual/_plugin-vue_export-helper.js";
+const _ = "Other", E = 430, g = 480, x = 380, De = T`
     fragment KvLendCta on LoanBasic {
         id
         name
         status
         minNoteSize
     }
-`, we = b`
+`, ye = T`
     fragment KvLendCtaUser on LoanBasic {
         id
         userProperties {
             lentTo
         }
     }
-`, R = {
+`, K = {
   name: "KvLendCta",
   components: {
-    KvLendAmountButton: I,
+    KvLendAmountButton: R,
     KvUiButton: F,
     KvUiSelect: S,
-    KvMaterialIcon: N
+    KvMaterialIcon: V
   },
   props: {
     loan: {
@@ -123,28 +123,47 @@ const p = "Other", E = 430, ce = b`
     kvTrackCategory: {
       type: String,
       default: "Lending"
+    },
+    /**
+     * Breakpoint for narrow desktop layout (default: 480px)
+     * When component width is below this, it will use stacked layout even on desktop
+     */
+    narrowSidebarBreakpoint: {
+      type: Number,
+      default: g
+    },
+    /**
+     * Breakpoint for narrow desktop dropdown layout (default: 380px)
+     * When component width is below this in narrow desktop mode, dropdown moves to second row
+     */
+    narrowSidebarDropdownBreakpoint: {
+      type: Number,
+      default: x
     }
   },
   data() {
-    var t, s;
+    var n, s;
     return {
-      mdiChevronRight: P,
+      mdiChevronRight: N,
       defaultAmountOptions: [25, 50, 75],
-      selectedOption: g(
+      selectedOption: L(
         this.getCookie,
         this.setCookie,
         this.enableFiveDollarsNotes,
-        (s = (t = this.route) == null ? void 0 : t.query) == null ? void 0 : s.utm_campaign,
+        (s = (n = this.route) == null ? void 0 : n.query) == null ? void 0 : s.utm_campaign,
         this.unreservedAmount,
         this.userBalance,
         this.fiveDollarsSelected
       ),
-      selectedDropdownOption: p,
-      OTHER_OPTION: p,
+      selectedDropdownOption: _,
+      OTHER_OPTION: _,
       // SSR-safe viewport width initialization
       viewportWidth: typeof window < "u" ? window.innerWidth : 1024,
-      resizeHandler: void 0,
-      MOBILE_DROPDOWN_BREAKPOINT: E
+      componentWidth: 1024,
+      resizeObserver: null,
+      MOBILE_DROPDOWN_BREAKPOINT: E,
+      NARROW_SIDEBAR_BREAKPOINT: g,
+      NARROW_SIDEBAR_DROPDOWN_BREAKPOINT: x
     };
   },
   computed: {
@@ -152,52 +171,52 @@ const p = "Other", E = 430, ce = b`
       return this.customLoanDetails ? "" : `/lend/${this.loanId}`;
     },
     loanId() {
-      var t;
-      return (t = this.loan) == null ? void 0 : t.id;
+      var n;
+      return (n = this.loan) == null ? void 0 : n.id;
     },
     status() {
-      var t;
-      return ((t = this.loan) == null ? void 0 : t.status) ?? "";
+      var n;
+      return ((n = this.loan) == null ? void 0 : n.status) ?? "";
     },
     minNoteSize() {
-      var t;
-      return ((t = this.loan) == null ? void 0 : t.minNoteSize) ?? "";
+      var n;
+      return ((n = this.loan) == null ? void 0 : n.minNoteSize) ?? "";
     },
     lentPreviously() {
-      var t, s;
-      return ((s = (t = this.loan) == null ? void 0 : t.userProperties) == null ? void 0 : s.lentTo) ?? !1;
+      var n, s;
+      return ((s = (n = this.loan) == null ? void 0 : n.userProperties) == null ? void 0 : s.lentTo) ?? !1;
     },
     isInBasket() {
-      var t;
-      return ((t = this.basketItems) == null ? void 0 : t.some((s) => s.__typename === "LoanReservation" && s.id === this.loanId)) ?? !1;
+      var n;
+      return ((n = this.basketItems) == null ? void 0 : n.some((s) => s.__typename === "LoanReservation" && s.id === this.loanId)) ?? !1;
     },
     prices() {
-      const t = parseFloat(this.unreservedAmount < 25 ? this.minNoteSize : 25), s = O(
+      const n = parseFloat(this.unreservedAmount < 25 ? this.minNoteSize : 25), s = I(
         this.unreservedAmount,
         this.isCompleteLoanActive,
-        t,
+        n,
         this.enableFiveDollarsNotes,
         this.isVisitor
       );
-      return this.maxAmount ? s.filter((o) => parseFloat(o) <= parseFloat(this.maxAmount)) : s;
+      return this.maxAmount ? s.filter((l) => parseFloat(l) <= parseFloat(this.maxAmount)) : s;
     },
     presetButtonsPrices() {
-      const t = this.prices.slice(0, 3);
-      return this.prices.length === 4 && t.push(this.prices[3]), t;
+      const n = this.prices.slice(0, 3);
+      return this.prices.length === 4 && n.push(this.prices[3]), n;
     },
     presetDropdownPrices() {
       if (this.prices.length === 4)
         return [];
-      const t = this.prices.slice(this.defaultAmountOptions.length);
-      return t.unshift(p), t;
+      const n = this.prices.slice(this.defaultAmountOptions.length);
+      return n.unshift(_), n;
     },
     loanName() {
-      var t;
-      return ((t = this.loan) == null ? void 0 : t.name) ?? "";
+      var n;
+      return ((n = this.loan) == null ? void 0 : n.name) ?? "";
     },
     presetAmountCtaButtonText() {
-      var t;
-      return ((t = this.loan) == null ? void 0 : t.borrowerCount) > 1 ? "Support" : `Support ${this.loanName}`;
+      var n;
+      return ((n = this.loan) == null ? void 0 : n.borrowerCount) > 1 ? "Support" : `Support ${this.loanName}`;
     },
     defaultCtaButtonText() {
       return this.showPresetAmounts ? this.presetAmountCtaButtonText : this.primaryButtonText || "Lend";
@@ -243,8 +262,8 @@ const p = "Other", E = 430, ce = b`
       return this.isAmountLessThan25(this.unreservedAmount) || this.isAmountBetween25And500(this.unreservedAmount);
     },
     isLendAmountButton() {
-      const t = this.maxAmount ? this.maxAmount : this.unreservedAmount;
-      return (this.lendButtonVisibility || this.state === "lent-to") && this.isAmountLessThan25(t) || this.showPresetAmounts && this.presetButtonsPrices.length === 1 && !this.isAdding;
+      const n = this.maxAmount ? this.maxAmount : this.unreservedAmount;
+      return (this.lendButtonVisibility || this.state === "lent-to") && this.isAmountLessThan25(n) || this.showPresetAmounts && this.presetButtonsPrices.length === 1 && !this.isAdding;
     },
     isFunded() {
       return this.state === "funded" || this.state === "fully-reserved";
@@ -259,37 +278,48 @@ const p = "Other", E = 430, ce = b`
       return this.isLentTo && !this.isLessThan25;
     },
     selectedDropdown() {
-      return this.selectedDropdownOption !== p;
+      return this.selectedDropdownOption !== _;
     },
     showFilteredDropdown() {
       return this.presetDropdownPrices.length > 1;
     },
     hideLendButton() {
       return this.showPresetAmounts && (this.isAdding || this.presetButtonsPrices.length === 1);
+    },
+    /**
+     * Determines if component should use narrow desktop layout
+     * This is true when we're in desktop viewport but component width is narrow
+     */
+    isNarrowDesktop() {
+      return this.viewportWidth >= 768 && this.componentWidth < this.narrowSidebarBreakpoint;
     }
   },
   watch: {
-    unreservedAmount(t, s) {
-      var o, L;
-      t !== s && s === "" && (this.selectedOption = g(
+    unreservedAmount(n, s) {
+      var l, D;
+      n !== s && s === "" && (this.selectedOption = L(
         this.getCookie,
         this.setCookie,
         this.enableFiveDollarsNotes,
-        (L = (o = this.route) == null ? void 0 : o.query) == null ? void 0 : L.utm_campaign,
-        t,
+        (D = (l = this.route) == null ? void 0 : l.query) == null ? void 0 : D.utm_campaign,
+        n,
         this.userBalance,
         this.fiveDollarsSelected,
         this.showPresetAmounts
-      )), this.showPresetAmounts && (this.selectedOption = p);
+      )), this.showPresetAmounts && (this.selectedOption = _);
     }
   },
   mounted() {
-    typeof window < "u" && (this.viewportWidth = window.innerWidth, this.resizeHandler = C(() => {
-      this.viewportWidth = window.innerWidth;
-    }, 50), window.addEventListener("resize", this.resizeHandler));
+    const n = () => {
+      var s;
+      this.viewportWidth = window.innerWidth, this.componentWidth = ((s = this.$refs.root) == null ? void 0 : s.offsetWidth) || 1024;
+    };
+    typeof window < "u" && (this.viewportWidth = window.innerWidth, window.ResizeObserver && this.$nextTick(() => {
+      this.resizeObserver = new window.ResizeObserver(C(n, 50)), this.$refs.root && (this.resizeObserver.observe(this.$refs.root), n());
+    }));
   },
   beforeDestroy() {
-    this.resizeHandler && typeof window < "u" && window.removeEventListener("resize", this.resizeHandler);
+    this.resizeHandler && typeof window < "u" && window.removeEventListener("resize", this.resizeHandler), this.resizeObserver && this.$refs.root && this.resizeObserver.disconnect();
   },
   methods: {
     async addToBasket() {
@@ -301,20 +331,20 @@ const p = "Other", E = 430, ce = b`
         this.amountToLend
       ), this.$emit("add-to-basket", this.amountToLend);
     },
-    isAmountLessThan25(t) {
-      return t < 25 && t > 0;
+    isAmountLessThan25(n) {
+      return n < 25 && n > 0;
     },
-    isAmountBetween25And50(t) {
-      return t <= 50 && t > 25;
+    isAmountBetween25And50(n) {
+      return n <= 50 && n > 25;
     },
-    isAmountBetween25And500(t) {
-      return t < 500 && t >= 25;
+    isAmountBetween25And500(n) {
+      return n < 500 && n >= 25;
     },
-    trackLendAmountSelection(t) {
+    trackLendAmountSelection(n) {
       this.showPresetAmounts && (this.selectedOption = null), this.kvTrackFunction(
         this.kvTrackCategory,
         "Modify lend amount",
-        t,
+        n,
         this.loanId,
         this.loanId
       );
@@ -328,17 +358,17 @@ const p = "Other", E = 430, ce = b`
         this.loanId
       );
     },
-    clickSecondaryButton(t) {
-      this.secondaryButtonHandler ? (t.preventDefault(), t.stopPropagation(), this.secondaryButtonHandler()) : this.handleCheckout();
+    clickSecondaryButton(n) {
+      this.secondaryButtonHandler ? (n.preventDefault(), n.stopPropagation(), this.secondaryButtonHandler()) : this.handleCheckout();
     },
-    clickPresetButton(t) {
+    clickPresetButton(n) {
       this.kvTrackFunction(
         this.kvTrackCategory,
         "Modify lend amount",
-        t,
+        n,
         this.loanId,
         this.loanId
-      ), this.selectedOption = t, this.selectedDropdownOption = p;
+      ), this.selectedOption = n, this.selectedDropdownOption = _;
     },
     handleCheckout() {
       this.kvTrackFunction(
@@ -348,145 +378,233 @@ const p = "Other", E = 430, ce = b`
         this.loanId,
         this.loanId
       );
+    },
+    isNarrowComponent() {
+      return this.componentWidth < 430;
     }
   }
-}, M = { class: "tw-whitespace-nowrap" }, K = {
+}, M = {
+  ref: "root",
+  class: "tw-whitespace-nowrap"
+}, U = {
   key: 2,
   class: "tw-w-full tw-text-center tw-rounded tw-p-2",
   style: { background: "#f1f1f1" }
-}, W = { class: "tw-flex" }, U = ["disabled"], z = {
+}, z = { class: "tw-flex" }, H = ["disabled"], j = {
   key: 0,
   class: "md:tw-hidden tw-w-full"
-}, H = { class: "tw-flex tw-flex-col tw-gap-1 tw-w-full" }, j = { class: "tw-flex tw-gap-1 tw-w-full" }, q = ["value"], G = { class: "tw-flex tw-gap-1" }, J = ["value"], Q = { class: "tw-flex tw-items-center tw-h-full tw-w-full" }, X = { class: "tw-min-w-0 tw-flex-1 tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap" }, Y = ["value"], Z = {
-  key: 2,
+}, q = { class: "tw-flex tw-flex-col tw-gap-1 tw-w-full" }, G = { class: "tw-flex tw-gap-1 tw-w-full" }, J = ["value"], Q = { class: "tw-flex tw-gap-1" }, X = ["value"], Y = { class: "tw-flex tw-items-center tw-h-full tw-w-full" }, Z = { class: "tw-min-w-0 tw-flex-1 tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap" }, $ = {
+  key: 1,
+  class: "tw-w-full"
+}, ee = { class: "tw-flex tw-flex-col tw-gap-1 tw-w-full" }, te = { class: "tw-flex tw-gap-1 tw-w-full" }, ne = ["value"], se = { class: "tw-flex tw-gap-1" }, oe = ["value"], le = { class: "tw-flex tw-items-center tw-h-full tw-w-full" }, de = { class: "tw-min-w-0 tw-flex-1 tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap" }, ie = ["value"], re = {
+  key: 3,
   class: "amountDropdownWrapper"
-}, $ = ["value"];
-function ee(t, s, o, L, d, e) {
-  const w = y("kv-ui-button"), x = y("kv-material-icon"), v = y("kv-ui-select"), T = y("kv-lend-amount-button");
-  return i(), l("div", M, [
-    e.isInBasket ? (i(), r(w, {
+}, ae = ["value"];
+function ue(n, s, l, D, d, e) {
+  const m = v("kv-ui-button"), P = v("kv-material-icon"), B = v("kv-ui-select"), O = v("kv-lend-amount-button");
+  return o(), i("div", M, [
+    e.isInBasket ? (o(), a(m, {
       key: 0,
       variant: "secondary",
       class: "tw-inline-flex tw-flex-1 tw-w-full",
       "data-testid": "bp-lend-cta-checkout-button",
-      to: o.externalLinks ? void 0 : "/basket",
-      href: o.externalLinks ? "/basket" : void 0,
-      onClick: s[0] || (s[0] = (n) => e.clickSecondaryButton(n))
+      to: l.externalLinks ? void 0 : "/basket",
+      href: l.externalLinks ? "/basket" : void 0,
+      onClick: s[0] || (s[0] = (t) => e.clickSecondaryButton(t))
     }, {
-      default: a(() => [
-        m(u(e.loanInBasketButtonText), 1)
+      default: r(() => [
+        f(u(e.loanInBasketButtonText), 1)
       ]),
       _: 1
-    }, 8, ["to", "href"])) : e.showNonActionableLoanButton ? (i(), r(w, {
+    }, 8, ["to", "href"])) : e.showNonActionableLoanButton ? (o(), a(m, {
       key: 1,
       class: "tw-inline-flex tw-flex-1"
     }, {
-      default: a(() => [
-        m(u(e.ctaButtonText), 1)
+      default: r(() => [
+        f(u(e.ctaButtonText), 1)
       ]),
       _: 1
-    })) : e.isFunded ? (i(), l("div", K, " This loan was just funded! 🎉 ")) : o.showViewLoan ? (i(), r(w, {
+    })) : e.isFunded ? (o(), i("div", U, " This loan was just funded! 🎉 ")) : l.showViewLoan ? (o(), a(m, {
       key: 3,
       state: `${e.allSharesReserved ? "disabled" : ""}`,
-      to: o.externalLinks ? void 0 : e.readMorePath,
-      href: o.externalLinks ? e.readMorePath : void 0,
+      to: l.externalLinks ? void 0 : e.readMorePath,
+      href: l.externalLinks ? e.readMorePath : void 0,
       class: "tw-mb-0",
-      onClick: s[1] || (s[1] = (n) => t.$emit("show-loan-details", n))
+      onClick: s[1] || (s[1] = (t) => n.$emit("show-loan-details", t))
     }, {
-      default: a(() => [
-        f("span", W, [
-          s[7] || (s[7] = m(" View loan ")),
-          _(x, {
+      default: r(() => [
+        h("span", z, [
+          s[9] || (s[9] = f(" View loan ")),
+          y(P, {
             class: "tw-w-3 tw-h-3 tw-align-middle",
             icon: d.mdiChevronRight
           }, null, 8, ["icon"])
         ])
       ]),
       _: 1
-    }, 8, ["state", "to", "href"])) : e.useFormSubmit ? (i(), l("form", {
+    }, 8, ["state", "to", "href"])) : e.useFormSubmit ? (o(), i("form", {
       key: 4,
       class: "tw-w-full tw-flex",
-      onSubmit: s[6] || (s[6] = B((...n) => e.addToBasket && e.addToBasket(...n), ["prevent"]))
+      onSubmit: s[8] || (s[8] = A((...t) => e.addToBasket && e.addToBasket(...t), ["prevent"]))
     }, [
-      f("fieldset", {
-        class: h(["tw-w-full tw-flex", {
-          "tw-flex-col md:tw-flex-row md:tw-justify-between tw-min-w-0": o.showPresetAmounts,
-          "tw-gap-1.5": o.showPresetAmounts && !e.isLendAmountButton && !o.isAdding
+      h("fieldset", {
+        class: w(["tw-w-full tw-flex", {
+          "tw-flex-col md:tw-flex-row md:tw-justify-between tw-min-w-0": l.showPresetAmounts && !e.isNarrowDesktop,
+          "tw-flex-col tw-min-w-0": l.showPresetAmounts && e.isNarrowDesktop,
+          "tw-gap-1.5": l.showPresetAmounts && !e.isLendAmountButton && !l.isAdding && !e.isNarrowDesktop
         }]),
-        disabled: o.isAdding,
+        disabled: l.isAdding,
         "data-testid": "bp-lend-cta-select-and-button"
       }, [
-        o.showPresetAmounts && !o.isAdding && !e.isLendAmountButton && e.presetButtonsPrices.length > 1 ? (i(), l("div", z, [
-          f("div", H, [
-            f("div", j, [
-              (i(!0), l(k, null, A(e.presetButtonsPrices, (n) => (i(), r(w, {
-                key: n,
+        l.showPresetAmounts && !l.isAdding && !e.isLendAmountButton && e.presetButtonsPrices.length > 1 && !e.isNarrowDesktop ? (o(), i("div", j, [
+          h("div", q, [
+            h("div", G, [
+              (o(!0), i(k, null, p(e.presetButtonsPrices, (t) => (o(), a(m, {
+                key: t,
                 variant: "secondary",
-                class: h(["preset-option tw-flex-1 tw-min-w-0", { "selected-option": d.selectedOption == n }]),
+                class: w(["preset-option tw-flex-1 tw-min-w-0", { "selected-option": d.selectedOption == t }]),
                 "data-testid": "bp-lend-cta-lend-button-mobile",
-                onClick: (D) => e.clickPresetButton(n)
+                onClick: (b) => e.clickPresetButton(t)
               }, {
-                default: a(() => [
-                  m(" $ " + u(n), 1)
+                default: r(() => [
+                  f(" $ " + u(t), 1)
                 ]),
                 _: 2
               }, 1032, ["class", "onClick"]))), 128)),
-              e.showFilteredDropdown && d.viewportWidth >= d.MOBILE_DROPDOWN_BREAKPOINT ? (i(), r(v, {
+              e.showFilteredDropdown && d.viewportWidth >= d.MOBILE_DROPDOWN_BREAKPOINT ? (o(), a(B, {
                 key: 0,
                 id: `LoanAmountDropdownMobile_${e.loanId}`,
                 modelValue: d.selectedDropdownOption,
                 "onUpdate:modelValue": [
-                  s[2] || (s[2] = (n) => d.selectedDropdownOption = n),
+                  s[2] || (s[2] = (t) => d.selectedDropdownOption = t),
                   e.trackLendAmountSelection
                 ],
-                class: h(["filtered-dropdown mobile-dropdown tw-flex-1 tw-rounded", {
+                class: w(["filtered-dropdown mobile-dropdown tw-flex-1 tw-rounded", {
                   "unselected-dropdown": !e.selectedDropdown,
                   "selected-dropdown": e.selectedDropdown
                 }]),
                 "aria-label": "Lend amount",
-                onClick: B(e.clickDropdown, ["stop"])
+                onClick: A(e.clickDropdown, ["stop"])
               }, {
-                default: a(() => [
-                  (i(!0), l(k, null, A(e.presetDropdownPrices, (n) => (i(), l("option", {
-                    key: n,
-                    value: n
-                  }, u(n !== d.OTHER_OPTION ? `$${n}` : n), 9, q))), 128))
+                default: r(() => [
+                  (o(!0), i(k, null, p(e.presetDropdownPrices, (t) => (o(), i("option", {
+                    key: t,
+                    value: t
+                  }, u(t !== d.OTHER_OPTION ? `$${t}` : t), 9, J))), 128))
                 ]),
                 _: 1
               }, 8, ["id", "modelValue", "class", "onUpdate:modelValue", "onClick"])) : c("", !0)
             ]),
-            f("div", G, [
-              e.showFilteredDropdown && d.viewportWidth < d.MOBILE_DROPDOWN_BREAKPOINT ? (i(), r(v, {
+            h("div", Q, [
+              e.showFilteredDropdown && d.viewportWidth < d.MOBILE_DROPDOWN_BREAKPOINT ? (o(), a(B, {
                 key: 0,
                 id: `LoanAmountDropdownMobile_Small_${e.loanId}`,
                 modelValue: d.selectedDropdownOption,
                 "onUpdate:modelValue": [
-                  s[3] || (s[3] = (n) => d.selectedDropdownOption = n),
+                  s[3] || (s[3] = (t) => d.selectedDropdownOption = t),
                   e.trackLendAmountSelection
                 ],
-                class: h(["filtered-dropdown mobile-dropdown-small tw-rounded tw-w-2/5", {
+                class: w(["filtered-dropdown mobile-dropdown-small tw-rounded tw-w-2/5", {
                   "unselected-dropdown": !e.selectedDropdown,
                   "selected-dropdown": e.selectedDropdown
                 }]),
                 "aria-label": "Lend amount",
-                onClick: B(e.clickDropdown, ["stop"])
+                onClick: A(e.clickDropdown, ["stop"])
               }, {
-                default: a(() => [
-                  (i(!0), l(k, null, A(e.presetDropdownPrices, (n) => (i(), l("option", {
-                    key: "small-" + n,
-                    value: n
-                  }, u(n !== d.OTHER_OPTION ? `$${n}` : n), 9, J))), 128))
+                default: r(() => [
+                  (o(!0), i(k, null, p(e.presetDropdownPrices, (t) => (o(), i("option", {
+                    key: "small-" + t,
+                    value: t
+                  }, u(t !== d.OTHER_OPTION ? `$${t}` : t), 9, X))), 128))
                 ]),
                 _: 1
               }, 8, ["id", "modelValue", "class", "onUpdate:modelValue", "onClick"])) : c("", !0),
-              _(w, {
-                class: h(["tw-inline-flex tw-flex-1 button-ellipsis", d.viewportWidth < d.MOBILE_DROPDOWN_BREAKPOINT ? "tw-w-3/5" : "tw-w-full"]),
+              y(m, {
+                class: w(["tw-inline-flex tw-flex-1 button-ellipsis", d.viewportWidth < d.MOBILE_DROPDOWN_BREAKPOINT ? "tw-w-3/5" : "tw-w-full"]),
                 "data-testid": "bp-lend-cta-mobile-lend-button",
                 type: "submit"
               }, {
-                default: a(() => [
-                  f("span", Q, [
-                    f("span", X, u(e.ctaButtonText), 1)
+                default: r(() => [
+                  h("span", Y, [
+                    h("span", Z, u(e.ctaButtonText), 1)
+                  ])
+                ]),
+                _: 1
+              }, 8, ["class"])
+            ])
+          ])
+        ])) : c("", !0),
+        l.showPresetAmounts && !l.isAdding && !e.isLendAmountButton && e.presetButtonsPrices.length > 1 && e.isNarrowDesktop ? (o(), i("div", $, [
+          h("div", ee, [
+            h("div", te, [
+              (o(!0), i(k, null, p(e.presetButtonsPrices, (t) => (o(), a(m, {
+                key: t,
+                variant: "secondary",
+                class: w(["preset-option tw-flex-1 tw-min-w-0", { "selected-option": d.selectedOption == t }]),
+                "data-testid": "bp-lend-cta-lend-button-narrow-desktop",
+                onClick: (b) => e.clickPresetButton(t)
+              }, {
+                default: r(() => [
+                  f(" $ " + u(t), 1)
+                ]),
+                _: 2
+              }, 1032, ["class", "onClick"]))), 128)),
+              e.showFilteredDropdown && d.componentWidth >= d.NARROW_SIDEBAR_DROPDOWN_BREAKPOINT ? (o(), a(B, {
+                key: 0,
+                id: `LoanAmountDropdownNarrowDesktop_${e.loanId}`,
+                modelValue: d.selectedDropdownOption,
+                "onUpdate:modelValue": [
+                  s[4] || (s[4] = (t) => d.selectedDropdownOption = t),
+                  e.trackLendAmountSelection
+                ],
+                class: w(["filtered-dropdown mobile-dropdown tw-flex-1 tw-rounded", {
+                  "unselected-dropdown": !e.selectedDropdown,
+                  "selected-dropdown": e.selectedDropdown
+                }]),
+                "aria-label": "Lend amount",
+                onClick: A(e.clickDropdown, ["stop"])
+              }, {
+                default: r(() => [
+                  (o(!0), i(k, null, p(e.presetDropdownPrices, (t) => (o(), i("option", {
+                    key: t,
+                    value: t
+                  }, u(t !== d.OTHER_OPTION ? `${t}` : t), 9, ne))), 128))
+                ]),
+                _: 1
+              }, 8, ["id", "modelValue", "class", "onUpdate:modelValue", "onClick"])) : c("", !0)
+            ]),
+            h("div", se, [
+              e.showFilteredDropdown && d.componentWidth < d.NARROW_SIDEBAR_DROPDOWN_BREAKPOINT ? (o(), a(B, {
+                key: 0,
+                id: `LoanAmountDropdownNarrowDesktop_Small_${e.loanId}`,
+                modelValue: d.selectedDropdownOption,
+                "onUpdate:modelValue": [
+                  s[5] || (s[5] = (t) => d.selectedDropdownOption = t),
+                  e.trackLendAmountSelection
+                ],
+                class: w(["filtered-dropdown mobile-dropdown-small tw-rounded tw-w-2/5", {
+                  "unselected-dropdown": !e.selectedDropdown,
+                  "selected-dropdown": e.selectedDropdown
+                }]),
+                "aria-label": "Lend amount",
+                onClick: A(e.clickDropdown, ["stop"])
+              }, {
+                default: r(() => [
+                  (o(!0), i(k, null, p(e.presetDropdownPrices, (t) => (o(), i("option", {
+                    key: "narrow-small-" + t,
+                    value: t
+                  }, u(t !== d.OTHER_OPTION ? `${t}` : t), 9, oe))), 128))
+                ]),
+                _: 1
+              }, 8, ["id", "modelValue", "class", "onUpdate:modelValue", "onClick"])) : c("", !0),
+              y(m, {
+                class: w(["tw-inline-flex tw-flex-1 button-ellipsis", d.componentWidth < d.NARROW_SIDEBAR_DROPDOWN_BREAKPOINT ? "tw-w-3/5" : "tw-w-full"]),
+                "data-testid": "bp-lend-cta-narrow-desktop-lend-button",
+                type: "submit"
+              }, {
+                default: r(() => [
+                  h("span", le, [
+                    h("span", de, u(e.ctaButtonText), 1)
                   ])
                 ]),
                 _: 1
@@ -494,126 +612,126 @@ function ee(t, s, o, L, d, e) {
             ])
           ])
         ])) : c("", !0),
-        o.showPresetAmounts && !o.isAdding ? (i(), l("div", {
-          key: 1,
-          class: h({
+        l.showPresetAmounts && !l.isAdding && !e.isNarrowDesktop ? (o(), i("div", {
+          key: 2,
+          class: w({
             "tw-flex tw-gap-0.5 md:tw-gap-1 lg:tw-gap-1 tw-flex-wrap md:tw-flex-nowrap": !0,
             "tw-hidden md:tw-flex": !e.isLendAmountButton && e.presetButtonsPrices.length > 1
           })
         }, [
-          e.isLendAmountButton ? c("", !0) : (i(!0), l(k, { key: 0 }, A(e.presetButtonsPrices, (n) => (i(), r(w, {
-            key: n,
+          e.isLendAmountButton ? c("", !0) : (o(!0), i(k, { key: 0 }, p(e.presetButtonsPrices, (t) => (o(), a(m, {
+            key: t,
             variant: "secondary",
-            class: h(["tw-inline-flex tw-flex-1 preset-option tw-w-8", { "selected-option": d.selectedOption == n }]),
+            class: w(["tw-inline-flex tw-flex-1 preset-option tw-w-8", { "selected-option": d.selectedOption == t }]),
             "data-testid": "bp-lend-cta-lend-button",
-            onClick: (D) => e.clickPresetButton(n)
+            onClick: (b) => e.clickPresetButton(t)
           }, {
-            default: a(() => [
-              m(" $" + u(n), 1)
+            default: r(() => [
+              f(" $" + u(t), 1)
             ]),
             _: 2
           }, 1032, ["class", "onClick"]))), 128)),
-          e.showFilteredDropdown ? (i(), r(v, {
+          e.showFilteredDropdown ? (o(), a(B, {
             key: 1,
             id: `LoanAmountDropdown_${e.loanId}`,
             modelValue: d.selectedDropdownOption,
             "onUpdate:modelValue": [
-              s[4] || (s[4] = (n) => d.selectedDropdownOption = n),
+              s[6] || (s[6] = (t) => d.selectedDropdownOption = t),
               e.trackLendAmountSelection
             ],
-            class: h(["tw-min-w-12 tw-rounded filtered-dropdown tw-w-full", {
+            class: w(["tw-min-w-12 tw-rounded filtered-dropdown tw-w-full", {
               "unselected-dropdown": !e.selectedDropdown,
               "selected-dropdown": e.selectedDropdown
             }]),
             "aria-label": "Lend amount",
-            onClick: B(e.clickDropdown, ["stop"])
+            onClick: A(e.clickDropdown, ["stop"])
           }, {
-            default: a(() => [
-              (i(!0), l(k, null, A(e.presetDropdownPrices, (n) => (i(), l("option", {
-                key: n,
-                value: n
-              }, u(n !== d.OTHER_OPTION ? `$${n}` : n), 9, Y))), 128))
+            default: r(() => [
+              (o(!0), i(k, null, p(e.presetDropdownPrices, (t) => (o(), i("option", {
+                key: t,
+                value: t
+              }, u(t !== d.OTHER_OPTION ? `$${t}` : t), 9, ie))), 128))
             ]),
             _: 1
           }, 8, ["id", "modelValue", "class", "onUpdate:modelValue", "onClick"])) : c("", !0)
-        ], 2)) : o.showPresetAmounts ? c("", !0) : (i(), l("div", Z, [
-          e.hideShowLendDropdown && !e.isLessThan25 ? (i(), r(v, {
+        ], 2)) : l.showPresetAmounts ? c("", !0) : (o(), i("div", re, [
+          e.hideShowLendDropdown && !e.isLessThan25 ? (o(), a(B, {
             key: 0,
             id: `LoanAmountDropdown_${e.loanId}`,
             modelValue: d.selectedOption,
             "onUpdate:modelValue": [
-              s[5] || (s[5] = (n) => d.selectedOption = n),
+              s[7] || (s[7] = (t) => d.selectedOption = t),
               e.trackLendAmountSelection
             ],
             class: "tw-min-w-12",
             style: { "border-radius": "14px 0 0 14px" },
             "aria-label": "Lend amount",
-            onClick: B(e.clickDropdown, ["stop"])
+            onClick: A(e.clickDropdown, ["stop"])
           }, {
-            default: a(() => [
-              (i(!0), l(k, null, A(e.prices, (n) => (i(), l("option", {
-                key: n,
-                value: n
-              }, " $" + u(n), 9, $))), 128))
+            default: r(() => [
+              (o(!0), i(k, null, p(e.prices, (t) => (o(), i("option", {
+                key: t,
+                value: t
+              }, " $" + u(t), 9, ae))), 128))
             ]),
             _: 1
           }, 8, ["id", "modelValue", "onUpdate:modelValue", "onClick"])) : c("", !0)
         ])),
-        f("div", {
-          class: h({
-            "tw-min-w-0": o.showPresetAmounts,
-            lendButtonWrapper: e.hideShowLendDropdown && !o.showPresetAmounts,
-            "tw-hidden": e.hideLendButton || !e.isLendAmountButton && e.presetButtonsPrices.length > 1 && o.showPresetAmounts,
-            "md:tw-block tw-hidden": !e.isLendAmountButton && e.presetButtonsPrices.length > 1 && o.showPresetAmounts
+        h("div", {
+          class: w({
+            "tw-min-w-0": l.showPresetAmounts && !e.isNarrowDesktop,
+            lendButtonWrapper: e.hideShowLendDropdown && !l.showPresetAmounts,
+            "tw-hidden": e.hideLendButton || l.showPresetAmounts && !l.isAdding && !e.isLendAmountButton && e.presetButtonsPrices.length > 1 && (e.isNarrowComponent() || e.isNarrowDesktop),
+            "md:tw-block tw-hidden": !e.isLendAmountButton && e.presetButtonsPrices.length > 1 && l.showPresetAmounts && !e.isNarrowDesktop
           })
         }, [
-          e.lendButtonVisibility && !e.isLessThan25 ? (i(), r(w, {
+          e.lendButtonVisibility && !e.isLessThan25 ? (o(), a(m, {
             key: "lendButton",
-            class: h(["tw-inline-flex tw-flex-1", { "button-ellipsis tw-w-full": o.showPresetAmounts }]),
+            class: w(["tw-inline-flex tw-flex-1", { "button-ellipsis tw-w-full": l.showPresetAmounts }]),
             "data-testid": "bp-lend-cta-lend-button",
             type: "submit"
           }, {
-            default: a(() => [
-              m(u(e.ctaButtonText), 1)
+            default: r(() => [
+              f(u(e.ctaButtonText), 1)
             ]),
             _: 1
-          }, 8, ["class"])) : e.showLendAgain ? (i(), r(w, {
+          }, 8, ["class"])) : e.showLendAgain ? (o(), a(m, {
             key: "lendAgainButton",
-            class: h(["lend-again", { "tw-w-full": o.showPresetAmounts }]),
+            class: w(["lend-again", { "tw-w-full": l.showPresetAmounts }]),
             "data-testid": "bp-lend-cta-lend-again-button",
             type: "submit"
           }, {
-            default: a(() => [
-              m(u(o.primaryButtonText || "Lend") + " again ", 1)
+            default: r(() => [
+              f(u(l.primaryButtonText || "Lend") + " again ", 1)
             ]),
             _: 1
           }, 8, ["class"])) : c("", !0)
         ], 2),
-        e.isLendAmountButton && !o.enableFiveDollarsNotes ? (i(), r(T, {
-          key: 3,
+        e.isLendAmountButton && !l.enableFiveDollarsNotes ? (o(), a(O, {
+          key: 4,
           class: "tw-w-full",
           "loan-id": e.loanId,
           "show-now": !1,
           "amount-left": e.amountForLendAmountButton,
-          "is-adding": o.isAdding,
+          "is-adding": l.isAdding,
           onAddToBasket: e.addToBasket
         }, null, 8, ["loan-id", "amount-left", "is-adding", "onAddToBasket"])) : c("", !0),
-        !o.isLoading && o.isAdding ? (i(), r(w, {
-          key: 4,
+        !l.isLoading && l.isAdding ? (o(), a(m, {
+          key: 5,
           class: "tw-inline-flex tw-flex-1"
         }, {
-          default: a(() => s[8] || (s[8] = [
-            m(" Adding to basket ")
+          default: r(() => s[10] || (s[10] = [
+            f(" Adding to basket ")
           ])),
           _: 1
         })) : c("", !0)
-      ], 10, U)
+      ], 10, H)
     ], 32)) : c("", !0)
-  ]);
+  ], 512);
 }
-const me = /* @__PURE__ */ V(R, [["render", ee], ["__scopeId", "data-v-d161d592"]]);
+const be = /* @__PURE__ */ W(K, [["render", ue], ["__scopeId", "data-v-629f4bdf"]]);
 export {
-  ce as KV_LEND_CTA_FRAGMENT,
-  we as KV_LEND_CTA_USER_FRAGMENT,
-  me as default
+  De as KV_LEND_CTA_FRAGMENT,
+  ye as KV_LEND_CTA_USER_FRAGMENT,
+  be as default
 };

package/dist/vue/KvWwwHeader/KvHeaderMobileMenu.css

@@ -1 +1 @@
-.mobile-link[data-v-c5a33b4b]{--tw-text-opacity: 1;color:rgba(var(--text-primary),var(--tw-text-opacity, 1));text-decoration-line:none}.mobile-link[data-v-c5a33b4b]:hover{--tw-text-opacity: 1;color:rgba(var(--text-action),var(--tw-text-opacity, 1));text-decoration-line:underline}
+.mobile-link[data-v-dc4a2676]{--tw-text-opacity: 1;color:rgba(var(--text-primary),var(--tw-text-opacity, 1));text-decoration-line:none}.mobile-link[data-v-dc4a2676]:hover{--tw-text-opacity: 1;color:rgba(var(--text-action),var(--tw-text-opacity, 1));text-decoration-line:underline}

package/dist/vue/KvWwwHeader/KvHeaderMobileMenu.js

@@ -1,10 +1,11 @@
 import { mdiClose as f } from "@mdi/js";
 import b from "../KvAccordionItem.js";
 import h from "../KvMaterialIcon.js";
-import { resolveComponent as p, resolveDirective as g, openBlock as t, createElementBlock as o, createBlock as _, createCommentVNode as y, createVNode as u, withCtx as a, createElementVNode as r, Fragment as N, renderList as x, withDirectives as n, toDisplayString as m, createTextVNode as s } from "vue";
+import { resolveComponent as u, resolveDirective as g, openBlock as t, createElementBlock as o, createBlock as _, createCommentVNode as y, createVNode as p, withCtx as r, createElementVNode as a, Fragment as N, renderList as K, withDirectives as n, toDisplayString as m, createTextVNode as s } from "vue";
 import "./KvHeaderMobileMenu.css";
-import I from "../../_virtual/_plugin-vue_export-helper.js";
-const K = {
+import x from "../../_virtual/_plugin-vue_export-helper.js";
+const I = {
+  name: "KvHeaderMobileMenu",
   components: {
     KvAccordionItem: b,
     KvMaterialIcon: h
@@ -55,19 +56,19 @@ const K = {
       ]
     };
   }
-}, T = { class: "tw--mt-0.5 tw-pb-0.5 tw-gap-2 tw-flex tw-flex-col tw-items-end md:tw-hidden tw-font-medium tw-p-2.5" }, C = { class: "tw-flex tw-flex-col tw-gap-2 tw-pl-1" }, M = ["href"], E = { class: "tw-text-secondary tw-font-book" }, B = { class: "tw-flex tw-flex-col tw-gap-2 tw-pb-2 tw-pl-1" }, D = {
+}, T = { class: "tw--mt-0.5 tw-pb-0.5 tw-gap-2 tw-flex tw-flex-col tw-items-end md:tw-hidden tw-font-medium tw-p-2.5" }, M = { class: "tw-flex tw-flex-col tw-gap-2 tw-pl-1" }, C = ["href"], E = { class: "tw-text-secondary tw-font-book" }, B = { class: "tw-flex tw-flex-col tw-gap-2 tw-pb-2 tw-pl-1" }, D = {
   href: "/about",
   class: "mobile-link"
 }, A = {
   href: "/about/how",
   class: "mobile-link"
-}, V = {
+}, H = {
   href: "/about/where-kiva-works",
   class: "mobile-link"
-}, $ = {
+}, V = {
   href: "/impact",
   class: "mobile-link"
-}, H = {
+}, $ = {
   href: "/about/leadership",
   class: "mobile-link"
 }, F = {
@@ -80,33 +81,33 @@ const K = {
   href: "/about/due-diligence",
   class: "mobile-link"
 };
-function S(k, e, v, q, c, z) {
-  const w = p("KvMaterialIcon"), d = p("KvAccordionItem"), i = g("kv-track-event");
+function S(v, e, k, q, c, z) {
+  const w = u("KvMaterialIcon"), d = u("KvAccordionItem"), i = g("kv-track-event");
   return t(), o("nav", T, [
-    v.isMobile ? (t(), _(w, {
+    k.isMobile ? (t(), _(w, {
       key: 0,
       icon: c.mdiClose,
       class: "tw-cursor-pointer",
-      onClick: e[0] || (e[0] = (l) => k.$emit("closing-menu"))
+      onClick: e[0] || (e[0] = (l) => v.$emit("closing-menu"))
     }, null, 8, ["icon"])) : y("", !0),
-    u(d, {
+    p(d, {
       id: "accordion-take-action-menu",
       open: "",
       class: "tw-w-full tw-border-b-0"
     }, {
-      header: a(() => e[1] || (e[1] = [
-        r("h3", { class: "tw-pb-0.5" }, " Take action ", -1)
+      header: r(() => e[1] || (e[1] = [
+        a("h3", { class: "tw-pb-0.5" }, " Take action ", -1)
       ])),
-      default: a(() => [
-        r("div", C, [
-          (t(!0), o(N, null, x(c.menuItems, (l) => n((t(), o("div", {
+      default: r(() => [
+        a("div", M, [
+          (t(!0), o(N, null, K(c.menuItems, (l) => n((t(), o("div", {
             key: l.title
           }, [
-            r("a", {
+            a("a", {
               href: l.url,
               class: "mobile-link"
-            }, m(l.title), 9, M),
-            r("p", E, m(l.description), 1)
+            }, m(l.title), 9, C),
+            a("p", E, m(l.description), 1)
           ])), [
             [i, ["TopNav", `click-menu-${l.trackEvent}`]]
           ])), 128))
@@ -114,15 +115,15 @@ function S(k, e, v, q, c, z) {
       ]),
       _: 1
     }),
-    u(d, {
+    p(d, {
       id: "accordion-about-menu",
       class: "tw-w-full tw-pb-1"
     }, {
-      header: a(() => e[2] || (e[2] = [
-        r("h3", { class: "tw-pb-0.5" }, " About ", -1)
+      header: r(() => e[2] || (e[2] = [
+        a("h3", { class: "tw-pb-0.5" }, " About ", -1)
       ])),
-      default: a(() => [
-        r("div", B, [
+      default: r(() => [
+        a("div", B, [
           n((t(), o("a", D, e[3] || (e[3] = [
             s("About us")
           ]))), [
@@ -133,17 +134,17 @@ function S(k, e, v, q, c, z) {
           ]))), [
             [i, ["TopNav", "click-menu-how-kiva-works"]]
           ]),
-          n((t(), o("a", V, e[5] || (e[5] = [
+          n((t(), o("a", H, e[5] || (e[5] = [
             s("Where Kiva works")
           ]))), [
             [i, ["TopNav", "click-menu-where-kiva-works"]]
           ]),
-          n((t(), o("a", $, e[6] || (e[6] = [
+          n((t(), o("a", V, e[6] || (e[6] = [
             s("Impact")
           ]))), [
             [i, ["TopNav", "click-menu-impact"]]
           ]),
-          n((t(), o("a", H, e[7] || (e[7] = [
+          n((t(), o("a", $, e[7] || (e[7] = [
             s("Leadership")
           ]))), [
             [i, ["TopNav", "click-menu-leadership"]]
@@ -169,7 +170,7 @@ function S(k, e, v, q, c, z) {
     })
   ]);
 }
-const Q = /* @__PURE__ */ I(K, [["render", S], ["__scopeId", "data-v-c5a33b4b"]]);
+const Q = /* @__PURE__ */ x(I, [["render", S], ["__scopeId", "data-v-dc4a2676"]]);
 export {
   Q as default
 };

package/dist/vue/KvWwwHeader.css

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

package/dist/vue/KvWwwHeader.js

@@ -1,18 +1,18 @@
-import { ref as l, shallowRef as T, onMounted as D, onBeforeUnmount as B, resolveComponent as c, resolveDirective as U, openBlock as b, createBlock as I, withCtx as f, createElementVNode as w, normalizeStyle as k, createVNode as s, Transition as E, withDirectives as _, vShow as M, createElementBlock as x, resolveDynamicComponent as N } from "vue";
-import G from "@kiva/kv-tokens";
-import S from "./KvWwwHeader/KvHeaderLinkBar.js";
-import K from "./KvWwwHeader/KvHeaderLogo.js";
-import R from "./KvThemeProvider.js";
-import z from "./KvPageContainer.js";
-import { throttle as A } from "../utils/throttle.js";
+import { ref as l, shallowRef as D, computed as B, onMounted as U, onBeforeUnmount as x, resolveComponent as f, resolveDirective as N, openBlock as w, createBlock as M, withCtx as g, createElementVNode as k, normalizeStyle as _, createVNode as d, Transition as I, withDirectives as h, vShow as E, createElementBlock as A, normalizeClass as G, resolveDynamicComponent as K } from "vue";
+import S from "@kiva/kv-tokens";
+import z from "./KvWwwHeader/KvHeaderLinkBar.js";
+import R from "./KvWwwHeader/KvHeaderLogo.js";
+import P from "./KvThemeProvider.js";
+import V from "./KvPageContainer.js";
+import { throttle as O } from "../utils/throttle.js";
 import "./KvWwwHeader.css";
-import P from "../_virtual/_plugin-vue_export-helper.js";
-const V = "3.75rem", O = {
+import W from "../_virtual/_plugin-vue_export-helper.js";
+const j = "3.75rem", q = {
   components: {
-    KvHeaderLinkBar: S,
-    KvHeaderLogo: K,
-    KvThemeProvider: R,
-    KvPageContainer: z
+    KvHeaderLinkBar: z,
+    KvHeaderLogo: R,
+    KvThemeProvider: P,
+    KvPageContainer: V
   },
   props: {
     loggedIn: {
@@ -63,62 +63,66 @@ const V = "3.75rem", O = {
   emits: [
     "load-lend-menu-data"
   ],
-  setup(C, { emit: n }) {
-    const o = l(!0), e = l(null), a = l(!1), r = T(null), m = l(null), i = l({ left: 0, position: "relative" }), d = l(!1);
-    let u;
-    const g = (p, t, H) => {
-      t ? (clearTimeout(u), r.value !== t && (i.value = { left: 0, position: "relative" }), r.value = t, a.value = !0, H && (i.value = {
+  setup(C, { emit: t }) {
+    const o = l(!0), e = l(null), a = l(!1), i = D(null), r = l(null), s = l({ left: 0, position: "relative" }), u = l(!1);
+    let v;
+    const b = B(() => {
+      var m, n;
+      return ((n = (m = r.value) == null ? void 0 : m.$options) == null ? void 0 : n.name) === "KvHeaderMobileMenu";
+    }), c = (m, n, H) => {
+      n ? (clearTimeout(v), i.value !== n && (s.value = { left: 0, position: "relative" }), i.value = n, a.value = !0, H && (s.value = {
         ...H,
         position: "absolute"
-      })) : a.value && (u = setTimeout(() => {
-        a.value = !1, r.value = null;
+      })) : a.value && (v = setTimeout(() => {
+        a.value = !1, i.value = null;
       }, 100));
-    }, v = (p) => {
-      var t;
-      (t = m.value) == null || t.onLoad(p);
-    }, L = () => {
-      n("load-lend-menu-data");
-    }, h = () => {
-      d.value = (window == null ? void 0 : window.innerWidth) < G.breakpoints.md;
-    }, y = A(h, 100);
-    return D(() => {
-      h(), window.addEventListener("resize", y);
-    }), B(() => {
-      window.removeEventListener("resize", y);
+    }, L = (m) => {
+      var n;
+      (n = r.value) == null || n.onLoad(m);
+    }, T = () => {
+      t("load-lend-menu-data");
+    }, y = () => {
+      u.value = (window == null ? void 0 : window.innerWidth) < S.breakpoints.md;
+    }, p = O(y, 100);
+    return U(() => {
+      y(), window.addEventListener("resize", p);
+    }), x(() => {
+      window.removeEventListener("resize", p);
     }), {
-      HEADER_HEIGHT: V,
-      emitLendMenuEvent: L,
-      isMobile: d,
+      HEADER_HEIGHT: j,
+      emitLendMenuEvent: T,
+      isMobile: u,
       linksVisible: o,
       menuOpen: a,
-      onHover: g,
-      loadMenuData: v,
+      isMobileMenuActive: b,
+      onHover: c,
+      loadMenuData: L,
       activeHeaderItem: e,
-      menuComponent: r,
-      menuComponentInstance: m,
-      menuPosition: i
+      menuComponent: i,
+      menuComponentInstance: r,
+      menuPosition: s
     };
   }
-}, W = {
+}, F = {
   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 j(C, n, o, e, a, r) {
-  const m = c("kv-header-link-bar"), i = c("kv-header-logo"), d = c("kv-page-container"), u = c("kv-theme-provider"), g = U("kv-track-event");
-  return b(), I(u, {
+function J(C, t, o, e, a, i) {
+  const r = f("kv-header-link-bar"), s = f("kv-header-logo"), u = f("kv-page-container"), v = f("kv-theme-provider"), b = N("kv-track-event");
+  return w(), M(v, {
     tag: "div",
     class: "tw-bg-primary"
   }, {
-    default: f(() => [
-      w("nav", {
+    default: g(() => [
+      k("nav", {
         class: "tw-font-medium tw-relative",
-        style: k({ height: e.HEADER_HEIGHT })
+        style: _({ height: e.HEADER_HEIGHT })
       }, [
-        s(d, null, {
-          default: f(() => [
-            s(E, { name: "header-fade" }, {
-              default: f(() => [
-                _(s(m, {
+        d(u, null, {
+          default: g(() => [
+            d(I, { name: "header-fade" }, {
+              default: g(() => [
+                h(d(r, {
                   "logged-in": o.loggedIn,
                   "basket-count": o.basketCount,
                   "login-url": o.loginUrl,
@@ -130,33 +134,36 @@ function j(C, n, o, e, a, r) {
                   balance: o.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"]), [
-                  [M, e.linksVisible]
+                  [E, e.linksVisible]
                 ])
               ]),
               _: 1
             }),
-            _((b(), x("a", W, [
-              s(i)
+            h((w(), A("a", F, [
+              d(s)
             ])), [
-              [g, ["TopNav", "click-Logo"]]
+              [b, ["TopNav", "click-Logo"]]
             ])
           ]),
           _: 1
         })
       ], 4),
-      s(E, { name: "header-fade" }, {
-        default: f(() => [
-          _(w("div", {
+      d(I, { name: "header-fade" }, {
+        default: g(() => [
+          h(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: k({ top: e.HEADER_HEIGHT })
+            style: _({ top: e.HEADER_HEIGHT })
           }, [
-            w("div", {
-              class: "tw-bg-primary tw-overflow-y-auto",
-              style: k({ ...e.menuPosition, maxHeight: `calc(100dvh - ${e.HEADER_HEIGHT})` }),
-              onMouseover: n[1] || (n[1] = (v) => e.onHover(e.activeHeaderItem, e.menuComponent)),
-              onMouseout: n[2] || (n[2] = (v) => e.onHover())
+            k("div", {
+              class: G(["tw-bg-primary tw-overflow-y-auto", { "tw-min-h-dvh": e.isMobileMenuActive }]),
+              style: _({
+                ...e.menuPosition,
+                maxHeight: e.isMobileMenuActive ? "auto" : `calc(100dvh - ${e.HEADER_HEIGHT})`
+              }),
+              onMouseover: t[1] || (t[1] = (c) => e.onHover(e.activeHeaderItem, e.menuComponent)),
+              onMouseout: t[2] || (t[2] = (c) => e.onHover())
             }, [
-              (b(), I(N(e.menuComponent), {
+              (w(), M(K(e.menuComponent), {
                 ref: "menuComponentInstance",
                 "logged-in": o.loggedIn,
                 "login-url": o.loginUrl,
@@ -167,11 +174,11 @@ function j(C, n, o, e, a, r) {
                 "show-m-g-upsell-link": o.showMGUpsellLink,
                 "is-mobile": e.isMobile,
                 onLoadLendMenuData: e.emitLendMenuEvent,
-                onClosingMenu: n[0] || (n[0] = (v) => e.onHover())
+                onClosingMenu: t[0] || (t[0] = (c) => e.onHover())
               }, null, 40, ["logged-in", "login-url", "user-id", "is-borrower", "is-trustee", "my-dashboard-url", "show-m-g-upsell-link", "is-mobile", "onLoadLendMenuData"]))
-            ], 36)
+            ], 38)
           ], 4), [
-            [M, e.menuOpen]
+            [E, e.menuOpen]
           ])
         ]),
         _: 1
@@ -180,7 +187,7 @@ function j(C, n, o, e, a, r) {
     _: 1
   });
 }
-const oe = /* @__PURE__ */ P(O, [["render", j], ["__scopeId", "data-v-8196be34"]]);
+const le = /* @__PURE__ */ W(q, [["render", J], ["__scopeId", "data-v-87116c5e"]]);
 export {
-  oe as default
+  le as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "6.52.7",
+  "version": "6.52.9",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -114,5 +114,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "786200af075ab4a0c66f6da6317c686fa6501ff3"
+  "gitHead": "9e756dff4c6e81538864f06aa3753e13f01da956"
 }