@kiva/kv-components 6.48.1 → 6.49.1

package/dist/vue/KvLendCta.css

@@ -1 +1 @@
-.amountDropdownWrapper[data-v-b607e1c2] select{border-radius:14px 0 0 14px}.lend-again[data-v-b607e1c2] span{padding-left:0;padding-right:0;padding-left:.5rem;padding-right:.5rem}.lendButtonWrapper[data-v-b607e1c2] span:first-child{border-radius:0 14px 14px 0}.filtered-dropdown[data-v-b607e1c2] select{cursor:pointer;border-radius:1rem;border-width:2px;font-weight:500}.unselected-dropdown[data-v-b607e1c2] select{--tw-border-opacity: 1;border-color:rgb(158 158 158 / var(--tw-border-opacity, 1))}.preset-option[data-v-b607e1c2] 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-b607e1c2] select,.selected-option[data-v-b607e1c2] 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-b607e1c2] span>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.amountDropdownWrapper[data-v-ce2eaa1b] select{border-radius:14px 0 0 14px}.lend-again[data-v-ce2eaa1b] span{padding-left:0;padding-right:0;padding-left:.5rem;padding-right:.5rem}.lendButtonWrapper[data-v-ce2eaa1b] span:first-child{border-radius:0 14px 14px 0}.filtered-dropdown[data-v-ce2eaa1b] select{cursor:pointer;white-space:nowrap;border-radius:1rem;border-width:2px;font-weight:500}.unselected-dropdown[data-v-ce2eaa1b] select{--tw-border-opacity: 1;border-color:rgb(158 158 158 / var(--tw-border-opacity, 1))}.preset-option[data-v-ce2eaa1b] 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-ce2eaa1b] select,.selected-option[data-v-ce2eaa1b] 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-ce2eaa1b] span>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width: 325px){[data-testid=bp-lend-cta-select-and-button-mobile]>div.tw-flex[data-v-ce2eaa1b]{flex-wrap:wrap}.mobile-other-dd[data-v-ce2eaa1b]{flex:0 0 100px!important;min-width:100px!important;max-width:100px!important;width:100px!important}.button-ellipsis[data-v-ce2eaa1b]{flex:1 1 0%;min-width:0}}

package/dist/vue/KvLendCta.js

@@ -1,34 +1,35 @@
-import T from "graphql-tag";
-import { mdiChevronRight as _ } from "@mdi/js";
-import { getLendCtaSelectedOption as g, getDropdownPriceArray as C } from "../utils/loanUtils.js";
-import D from "./KvLendAmountButton.js";
-import P from "./KvSelect.js";
-import F from "./KvButton.js";
-import S from "./KvMaterialIcon.js";
-import { resolveComponent as k, openBlock as i, createElementBlock as a, createBlock as r, withCtx as d, createTextVNode as c, toDisplayString as m, createElementVNode as p, createVNode as I, withModifiers as y, normalizeClass as f, Fragment as B, renderList as v, createCommentVNode as l } from "vue";
+import _ from "graphql-tag";
+import { mdiChevronRight as D } from "@mdi/js";
+import { throttle as C } from "../utils/throttle.js";
+import { getLendCtaSelectedOption as g, getDropdownPriceArray as P } from "../utils/loanUtils.js";
+import F from "./KvLendAmountButton.js";
+import S from "./KvSelect.js";
+import I from "./KvButton.js";
+import V from "./KvMaterialIcon.js";
+import { resolveComponent as b, openBlock as o, createElementBlock as d, createBlock as l, withCtx as u, createTextVNode as w, toDisplayString as h, createElementVNode as f, createVNode as N, withModifiers as v, Fragment as k, renderList as y, normalizeClass as m, createCommentVNode as r } from "vue";
 import "./KvLendCta.css";
-import N from "../_virtual/_plugin-vue_export-helper.js";
-const w = "Other", nt = T`
-	fragment KvLendCta on LoanBasic {
-		id
-		name
-		status
-		minNoteSize
-	}
-`, st = T`
-	fragment KvLendCtaUser on LoanBasic {
-		id
-		userProperties {
-			lentTo
-		}
-	}
-`, O = {
+import O from "../_virtual/_plugin-vue_export-helper.js";
+const A = "Other", ce = _`
+    fragment KvLendCta on LoanBasic {
+        id
+        name
+        status
+        minNoteSize
+    }
+`, we = _`
+    fragment KvLendCtaUser on LoanBasic {
+        id
+        userProperties {
+            lentTo
+        }
+    }
+`, M = {
   name: "KvLendCta",
   components: {
-    KvLendAmountButton: D,
-    KvUiButton: F,
-    KvUiSelect: P,
-    KvMaterialIcon: S
+    KvLendAmountButton: F,
+    KvUiButton: I,
+    KvUiSelect: S,
+    KvMaterialIcon: V
   },
   props: {
     loan: {
@@ -108,9 +109,9 @@ const w = "Other", nt = T`
       default: void 0
     },
     /**
-     * Hide preset buttons under this amount when
-     * showPresetAmounts is true
-     * */
+           * Hide preset buttons under this amount when
+           * showPresetAmounts is true
+           * */
     maxAmount: {
       type: String,
       default: ""
@@ -125,21 +126,24 @@ const w = "Other", nt = T`
     }
   },
   data() {
-    var t, n;
+    var t, s;
     return {
-      mdiChevronRight: _,
+      mdiChevronRight: D,
       defaultAmountOptions: [25, 50, 75],
       selectedOption: g(
         this.getCookie,
         this.setCookie,
         this.enableFiveDollarsNotes,
-        (n = (t = this.route) == null ? void 0 : t.query) == null ? void 0 : n.utm_campaign,
+        (s = (t = this.route) == null ? void 0 : t.query) == null ? void 0 : s.utm_campaign,
         this.unreservedAmount,
         this.userBalance,
         this.fiveDollarsSelected
       ),
-      selectedDropdownOption: w,
-      OTHER_OPTION: w
+      selectedDropdownOption: A,
+      OTHER_OPTION: A,
+      // SSR-safe viewport width initialization
+      viewportWidth: typeof window < "u" ? window.innerWidth : 1024,
+      resizeHandler: void 0
     };
   },
   computed: {
@@ -159,22 +163,22 @@ const w = "Other", nt = T`
       return ((t = this.loan) == null ? void 0 : t.minNoteSize) ?? "";
     },
     lentPreviously() {
-      var t, n;
-      return ((n = (t = this.loan) == null ? void 0 : t.userProperties) == null ? void 0 : n.lentTo) ?? !1;
+      var t, s;
+      return ((s = (t = this.loan) == null ? void 0 : t.userProperties) == null ? void 0 : s.lentTo) ?? !1;
     },
     isInBasket() {
       var t;
-      return ((t = this.basketItems) == null ? void 0 : t.some((n) => n.__typename === "LoanReservation" && n.id === this.loanId)) ?? !1;
+      return ((t = this.basketItems) == null ? void 0 : t.some((s) => s.__typename === "LoanReservation" && s.id === this.loanId)) ?? !1;
     },
     prices() {
-      const t = parseFloat(this.unreservedAmount < 25 ? this.minNoteSize : 25), n = C(
+      const t = parseFloat(this.unreservedAmount < 25 ? this.minNoteSize : 25), s = P(
         this.unreservedAmount,
         this.isCompleteLoanActive,
         t,
         this.enableFiveDollarsNotes,
         this.isVisitor
       );
-      return this.maxAmount ? n.filter((s) => parseFloat(s) <= parseFloat(this.maxAmount)) : n;
+      return this.maxAmount ? s.filter((i) => parseFloat(i) <= parseFloat(this.maxAmount)) : s;
     },
     presetButtonsPrices() {
       const t = this.prices.slice(0, 3);
@@ -184,7 +188,7 @@ const w = "Other", nt = T`
       if (this.prices.length === 4)
         return [];
       const t = this.prices.slice(this.defaultAmountOptions.length);
-      return t.unshift(w), t;
+      return t.unshift(A), t;
     },
     loanName() {
       var t;
@@ -254,7 +258,7 @@ const w = "Other", nt = T`
       return this.isLentTo && !this.isLessThan25;
     },
     selectedDropdown() {
-      return this.selectedDropdownOption !== w;
+      return this.selectedDropdownOption !== A;
     },
     showFilteredDropdown() {
       return this.presetDropdownPrices.length > 1;
@@ -264,20 +268,28 @@ const w = "Other", nt = T`
     }
   },
   watch: {
-    unreservedAmount(t, n) {
-      var s, A;
-      t !== n && n === "" && (this.selectedOption = g(
+    unreservedAmount(t, s) {
+      var i, p;
+      t !== s && s === "" && (this.selectedOption = g(
         this.getCookie,
         this.setCookie,
         this.enableFiveDollarsNotes,
-        (A = (s = this.route) == null ? void 0 : s.query) == null ? void 0 : A.utm_campaign,
+        (p = (i = this.route) == null ? void 0 : i.query) == null ? void 0 : p.utm_campaign,
         t,
         this.userBalance,
         this.fiveDollarsSelected,
         this.showPresetAmounts
-      )), this.showPresetAmounts && (this.selectedOption = w);
+      )), this.showPresetAmounts && (this.selectedOption = A);
     }
   },
+  mounted() {
+    typeof window < "u" && (this.viewportWidth = window.innerWidth, this.resizeHandler = C(() => {
+      this.viewportWidth = window.innerWidth;
+    }, 50), window.addEventListener("resize", this.resizeHandler));
+  },
+  beforeDestroy() {
+    this.resizeHandler && typeof window < "u" && window.removeEventListener("resize", this.resizeHandler);
+  },
   methods: {
     async addToBasket() {
       this.kvTrackFunction(
@@ -325,7 +337,7 @@ const w = "Other", nt = T`
         t,
         this.loanId,
         this.loanId
-      ), this.selectedOption = t, this.selectedDropdownOption = w;
+      ), this.selectedOption = t, this.selectedDropdownOption = A;
     },
     handleCheckout() {
       this.kvTrackFunction(
@@ -337,185 +349,307 @@ const w = "Other", nt = T`
       );
     }
   }
-}, V = { class: "tw-whitespace-nowrap" }, K = {
+}, E = { class: "tw-whitespace-nowrap" }, R = {
   key: 2,
   class: "tw-w-full tw-text-center tw-rounded tw-p-2",
   style: { background: "#f1f1f1" }
-}, M = { class: "tw-flex" }, R = ["disabled"], E = {
+}, U = { class: "tw-flex" }, z = { class: "md:tw-hidden tw-w-full" }, H = ["disabled"], K = { class: "tw-flex tw-gap-1 lg:tw-gap-2" }, W = ["value"], j = {
+  key: 0,
+  class: "tw-flex tw-gap-1 tw-mt-1"
+}, q = ["value"], G = {
+  key: 1,
+  class: "tw-mt-1 mobile-cta-row"
+}, J = { class: "tw-hidden md:tw-block tw-w-full" }, Q = ["disabled"], X = {
   key: 0,
   class: "tw-flex tw-gap-1 lg:tw-gap-2 tw-flex-wrap md:tw-flex-nowrap"
-}, U = ["value"], z = {
+}, Y = ["value"], Z = {
   key: 1,
   class: "amountDropdownWrapper"
-}, H = ["value"];
-function j(t, n, s, A, u, e) {
-  const h = k("kv-ui-button"), x = k("kv-material-icon"), L = k("kv-ui-select"), b = k("kv-lend-amount-button");
-  return i(), a("div", V, [
-    e.isInBasket ? (i(), r(h, {
+}, $ = ["value"];
+function ee(t, s, i, p, a, e) {
+  const c = b("kv-ui-button"), x = b("kv-material-icon"), B = b("kv-ui-select"), L = b("kv-lend-amount-button");
+  return o(), d("div", E, [
+    e.isInBasket ? (o(), l(c, {
       key: 0,
       variant: "secondary",
       class: "tw-inline-flex tw-flex-1 tw-w-full",
       "data-testid": "bp-lend-cta-checkout-button",
-      to: s.externalLinks ? void 0 : "/basket",
-      href: s.externalLinks ? "/basket" : void 0,
-      onClick: n[0] || (n[0] = (o) => e.clickSecondaryButton(o))
+      to: i.externalLinks ? void 0 : "/basket",
+      href: i.externalLinks ? "/basket" : void 0,
+      onClick: s[0] || (s[0] = (n) => e.clickSecondaryButton(n))
     }, {
-      default: d(() => [
-        c(m(e.loanInBasketButtonText), 1)
+      default: u(() => [
+        w(h(e.loanInBasketButtonText), 1)
       ]),
       _: 1
-    }, 8, ["to", "href"])) : e.showNonActionableLoanButton ? (i(), r(h, {
+    }, 8, ["to", "href"])) : e.showNonActionableLoanButton ? (o(), l(c, {
       key: 1,
       class: "tw-inline-flex tw-flex-1"
     }, {
-      default: d(() => [
-        c(m(e.ctaButtonText), 1)
+      default: u(() => [
+        w(h(e.ctaButtonText), 1)
       ]),
       _: 1
-    })) : e.isFunded ? (i(), a("div", K, " This loan was just funded! 🎉 ")) : s.showViewLoan ? (i(), r(h, {
+    })) : e.isFunded ? (o(), d("div", R, " This loan was just funded! 🎉 ")) : i.showViewLoan ? (o(), l(c, {
       key: 3,
       state: `${e.allSharesReserved ? "disabled" : ""}`,
-      to: s.externalLinks ? void 0 : e.readMorePath,
-      href: s.externalLinks ? e.readMorePath : void 0,
+      to: i.externalLinks ? void 0 : e.readMorePath,
+      href: i.externalLinks ? e.readMorePath : void 0,
       class: "tw-mb-0",
-      onClick: n[1] || (n[1] = (o) => t.$emit("show-loan-details", o))
+      onClick: s[1] || (s[1] = (n) => t.$emit("show-loan-details", n))
     }, {
-      default: d(() => [
-        p("span", M, [
-          n[5] || (n[5] = c(" View loan ")),
-          I(x, {
+      default: u(() => [
+        f("span", U, [
+          s[7] || (s[7] = w(" View loan ")),
+          N(x, {
             class: "tw-w-3 tw-h-3 tw-align-middle",
-            icon: u.mdiChevronRight
+            icon: a.mdiChevronRight
           }, null, 8, ["icon"])
         ])
       ]),
       _: 1
-    }, 8, ["state", "to", "href"])) : e.useFormSubmit ? (i(), a("form", {
+    }, 8, ["state", "to", "href"])) : e.useFormSubmit ? (o(), d("form", {
       key: 4,
       class: "tw-w-full tw-flex",
-      onSubmit: n[4] || (n[4] = y((...o) => e.addToBasket && e.addToBasket(...o), ["prevent"]))
+      onSubmit: s[6] || (s[6] = v((...n) => e.addToBasket && e.addToBasket(...n), ["prevent"]))
     }, [
-      p("fieldset", {
-        class: f(["tw-w-full tw-flex", {
-          "tw-flex-col md:tw-flex-row md:tw-justify-between tw-min-w-0": s.showPresetAmounts,
-          "tw-gap-1.5": s.showPresetAmounts && !e.isLendAmountButton
-        }]),
-        disabled: s.isAdding,
-        "data-testid": "bp-lend-cta-select-and-button"
-      }, [
-        s.showPresetAmounts && !s.isAdding ? (i(), a("div", E, [
-          e.isLendAmountButton ? l("", !0) : (i(!0), a(B, { key: 0 }, v(e.presetButtonsPrices, (o) => (i(), r(h, {
-            key: o,
-            variant: "secondary",
-            class: f(["tw-inline-flex tw-flex-1 preset-option tw-w-8", { "selected-option": u.selectedOption == o }]),
-            "data-testid": "bp-lend-cta-lend-button",
-            onClick: (q) => e.clickPresetButton(o)
-          }, {
-            default: d(() => [
-              c(" $" + m(o), 1)
+      f("div", z, [
+        f("fieldset", {
+          class: "tw-w-full tw-min-w-0",
+          disabled: i.isAdding,
+          "data-testid": "bp-lend-cta-select-and-button-mobile"
+        }, [
+          i.isAdding ? r("", !0) : (o(), d(k, { key: 0 }, [
+            f("div", K, [
+              e.isLendAmountButton ? r("", !0) : (o(!0), d(k, { key: 0 }, y(e.presetButtonsPrices, (n) => (o(), l(c, {
+                key: "m-" + n,
+                variant: "secondary",
+                class: m(["preset-option tw-basis-0 tw-flex-1 tw-min-w-0", { "selected-option": a.selectedOption == n }]),
+                "data-testid": "bp-lend-cta-lend-button-mobile",
+                onClick: (T) => e.clickPresetButton(n)
+              }, {
+                default: u(() => [
+                  w(" $" + h(n), 1)
+                ]),
+                _: 2
+              }, 1032, ["class", "onClick"]))), 128)),
+              e.showFilteredDropdown && a.viewportWidth > 325 ? (o(), l(B, {
+                key: 1,
+                id: `LoanAmountDropdownMobile_${e.loanId}`,
+                modelValue: a.selectedDropdownOption,
+                "onUpdate:modelValue": [
+                  s[2] || (s[2] = (n) => a.selectedDropdownOption = n),
+                  e.trackLendAmountSelection
+                ],
+                class: m(["filtered-dropdown tw-rounded tw-w-auto tw-flex-none mobile-other-dd tw-min-w-max", {
+                  "unselected-dropdown": !e.selectedDropdown,
+                  "selected-dropdown": e.selectedDropdown
+                }]),
+                "aria-label": "Lend amount",
+                onClick: v(e.clickDropdown, ["stop"])
+              }, {
+                default: u(() => [
+                  (o(!0), d(k, null, y(e.presetDropdownPrices, (n) => (o(), d("option", {
+                    key: "m-" + n,
+                    value: n
+                  }, h(n !== a.OTHER_OPTION ? `$${n}` : n), 9, W))), 128))
+                ]),
+                _: 1
+              }, 8, ["id", "modelValue", "class", "onUpdate:modelValue", "onClick"])) : r("", !0)
             ]),
-            _: 2
-          }, 1032, ["class", "onClick"]))), 128)),
-          e.showFilteredDropdown ? (i(), r(L, {
+            a.viewportWidth <= 325 ? (o(), d("div", j, [
+              e.showFilteredDropdown ? (o(), l(B, {
+                key: 0,
+                id: `LoanAmountDropdownMobile_${e.loanId}`,
+                modelValue: a.selectedDropdownOption,
+                "onUpdate:modelValue": [
+                  s[3] || (s[3] = (n) => a.selectedDropdownOption = n),
+                  e.trackLendAmountSelection
+                ],
+                class: m(["filtered-dropdown tw-rounded tw-w-auto tw-flex-none mobile-other-dd", {
+                  "unselected-dropdown": !e.selectedDropdown,
+                  "selected-dropdown": e.selectedDropdown
+                }]),
+                "aria-label": "Lend amount",
+                style: { "min-width": "90px", "max-width": "110px" },
+                onClick: v(e.clickDropdown, ["stop"])
+              }, {
+                default: u(() => [
+                  (o(!0), d(k, null, y(e.presetDropdownPrices, (n) => (o(), d("option", {
+                    key: "m-" + n,
+                    value: n
+                  }, h(n !== a.OTHER_OPTION ? `$${n}` : n), 9, q))), 128))
+                ]),
+                _: 1
+              }, 8, ["id", "modelValue", "class", "onUpdate:modelValue", "onClick"])) : r("", !0),
+              e.lendButtonVisibility && !e.isLessThan25 && !e.hideLendButton ? (o(), l(c, {
+                key: "lendButtonMobile",
+                class: "button-ellipsis tw-flex-1",
+                "data-testid": "bp-lend-cta-lend-button-mobile",
+                type: "submit"
+              }, {
+                default: u(() => [
+                  w(h(e.ctaButtonText), 1)
+                ]),
+                _: 1
+              })) : r("", !0)
+            ])) : (o(), d("div", G, [
+              e.lendButtonVisibility && !e.isLessThan25 && !e.hideLendButton ? (o(), l(c, {
+                key: "lendButtonMobile",
+                class: "button-ellipsis tw-w-full",
+                "data-testid": "bp-lend-cta-lend-button-mobile",
+                type: "submit"
+              }, {
+                default: u(() => [
+                  w(h(e.ctaButtonText), 1)
+                ]),
+                _: 1
+              })) : r("", !0)
+            ]))
+          ], 64)),
+          !i.isLoading && i.isAdding ? (o(), l(c, {
             key: 1,
-            id: `LoanAmountDropdown_${e.loanId}`,
-            modelValue: u.selectedDropdownOption,
-            "onUpdate:modelValue": [
-              n[2] || (n[2] = (o) => u.selectedDropdownOption = o),
-              e.trackLendAmountSelection
-            ],
-            class: f(["tw-min-w-12 tw-rounded filtered-dropdown tw-w-full", {
-              "unselected-dropdown": !e.selectedDropdown,
-              "selected-dropdown": e.selectedDropdown
-            }]),
-            "aria-label": "Lend amount",
-            onClick: y(e.clickDropdown, ["stop"])
+            class: "tw-inline-flex tw-flex-1 tw-w-full"
           }, {
-            default: d(() => [
-              (i(!0), a(B, null, v(e.presetDropdownPrices, (o) => (i(), a("option", {
-                key: o,
-                value: o
-              }, m(o !== u.OTHER_OPTION ? `$${o}` : o), 9, U))), 128))
-            ]),
+            default: u(() => s[8] || (s[8] = [
+              w(" Adding to basket ")
+            ])),
             _: 1
-          }, 8, ["id", "modelValue", "class", "onUpdate:modelValue", "onClick"])) : l("", !0)
-        ])) : s.showPresetAmounts ? l("", !0) : (i(), a("div", z, [
-          e.hideShowLendDropdown && !e.isLessThan25 ? (i(), r(L, {
-            key: 0,
-            id: `LoanAmountDropdown_${e.loanId}`,
-            modelValue: u.selectedOption,
-            "onUpdate:modelValue": [
-              n[3] || (n[3] = (o) => u.selectedOption = o),
-              e.trackLendAmountSelection
-            ],
-            class: "tw-min-w-12",
-            style: { "border-radius": "14px 0 0 14px" },
-            "aria-label": "Lend amount",
-            onClick: y(e.clickDropdown, ["stop"])
-          }, {
-            default: d(() => [
-              (i(!0), a(B, null, v(e.prices, (o) => (i(), a("option", {
-                key: o,
-                value: o
-              }, " $" + m(o), 9, H))), 128))
-            ]),
-            _: 1
-          }, 8, ["id", "modelValue", "onUpdate:modelValue", "onClick"])) : l("", !0)
-        ])),
-        p("div", {
-          class: f({
-            "tw-min-w-0": s.showPresetAmounts,
-            lendButtonWrapper: e.hideShowLendDropdown && !s.showPresetAmounts,
-            "tw-hidden": e.hideLendButton
-          })
+          })) : r("", !0),
+          e.isLendAmountButton && !i.enableFiveDollarsNotes ? (o(), l(L, {
+            key: 2,
+            class: "tw-w-full",
+            "loan-id": e.loanId,
+            "show-now": !1,
+            "amount-left": e.amountForLendAmountButton,
+            "is-adding": i.isAdding,
+            onAddToBasket: e.addToBasket
+          }, null, 8, ["loan-id", "amount-left", "is-adding", "onAddToBasket"])) : r("", !0)
+        ], 8, H)
+      ]),
+      f("div", J, [
+        f("fieldset", {
+          class: m(["tw-w-full tw-flex", {
+            "tw-flex-col md:tw-flex-row md:tw-justify-between tw-min-w-0": i.showPresetAmounts,
+            "tw-gap-1.5": i.showPresetAmounts && !e.isLendAmountButton
+          }]),
+          disabled: i.isAdding,
+          "data-testid": "bp-lend-cta-select-and-button"
         }, [
-          e.lendButtonVisibility && !e.isLessThan25 ? (i(), r(h, {
-            key: "lendButton",
-            class: f(["tw-inline-flex tw-flex-1", { "button-ellipsis tw-w-full": s.showPresetAmounts }]),
-            "data-testid": "bp-lend-cta-lend-button",
-            type: "submit"
-          }, {
-            default: d(() => [
-              c(m(e.ctaButtonText), 1)
-            ]),
-            _: 1
-          }, 8, ["class"])) : e.showLendAgain ? (i(), r(h, {
-            key: "lendAgainButton",
-            class: f(["lend-again", { "tw-w-full": s.showPresetAmounts }]),
-            "data-testid": "bp-lend-cta-lend-again-button",
-            type: "submit"
+          i.showPresetAmounts && !i.isAdding ? (o(), d("div", X, [
+            e.isLendAmountButton ? r("", !0) : (o(!0), d(k, { key: 0 }, y(e.presetButtonsPrices, (n) => (o(), l(c, {
+              key: n,
+              variant: "secondary",
+              class: m(["tw-inline-flex tw-flex-1 preset-option tw-w-8", { "selected-option": a.selectedOption == n }]),
+              "data-testid": "bp-lend-cta-lend-button",
+              onClick: (T) => e.clickPresetButton(n)
+            }, {
+              default: u(() => [
+                w(" $" + h(n), 1)
+              ]),
+              _: 2
+            }, 1032, ["class", "onClick"]))), 128)),
+            e.showFilteredDropdown ? (o(), l(B, {
+              key: 1,
+              id: `LoanAmountDropdown_${e.loanId}`,
+              modelValue: a.selectedDropdownOption,
+              "onUpdate:modelValue": [
+                s[4] || (s[4] = (n) => a.selectedDropdownOption = n),
+                e.trackLendAmountSelection
+              ],
+              class: m(["tw-min-w-12 tw-rounded filtered-dropdown tw-w-full", {
+                "unselected-dropdown": !e.selectedDropdown,
+                "selected-dropdown": e.selectedDropdown
+              }]),
+              "aria-label": "Lend amount",
+              onClick: v(e.clickDropdown, ["stop"])
+            }, {
+              default: u(() => [
+                (o(!0), d(k, null, y(e.presetDropdownPrices, (n) => (o(), d("option", {
+                  key: n,
+                  value: n
+                }, h(n !== a.OTHER_OPTION ? `$${n}` : n), 9, Y))), 128))
+              ]),
+              _: 1
+            }, 8, ["id", "modelValue", "class", "onUpdate:modelValue", "onClick"])) : r("", !0)
+          ])) : i.showPresetAmounts ? r("", !0) : (o(), d("div", Z, [
+            e.hideShowLendDropdown && !e.isLessThan25 ? (o(), l(B, {
+              key: 0,
+              id: `LoanAmountDropdown_${e.loanId}`,
+              modelValue: a.selectedOption,
+              "onUpdate:modelValue": [
+                s[5] || (s[5] = (n) => a.selectedOption = n),
+                e.trackLendAmountSelection
+              ],
+              class: "tw-min-w-12",
+              style: { "border-radius": "14px 0 0 14px" },
+              "aria-label": "Lend amount",
+              onClick: v(e.clickDropdown, ["stop"])
+            }, {
+              default: u(() => [
+                (o(!0), d(k, null, y(e.prices, (n) => (o(), d("option", {
+                  key: n,
+                  value: n
+                }, " $" + h(n), 9, $))), 128))
+              ]),
+              _: 1
+            }, 8, ["id", "modelValue", "onUpdate:modelValue", "onClick"])) : r("", !0)
+          ])),
+          f("div", {
+            class: m({
+              "tw-min-w-0": i.showPresetAmounts,
+              lendButtonWrapper: e.hideShowLendDropdown && !i.showPresetAmounts,
+              "tw-hidden": e.hideLendButton
+            })
+          }, [
+            e.lendButtonVisibility && !e.isLessThan25 ? (o(), l(c, {
+              key: "lendButton",
+              class: m(["tw-inline-flex tw-flex-1", { "button-ellipsis tw-w-full": i.showPresetAmounts }]),
+              "data-testid": "bp-lend-cta-lend-button",
+              type: "submit"
+            }, {
+              default: u(() => [
+                w(h(e.ctaButtonText), 1)
+              ]),
+              _: 1
+            }, 8, ["class"])) : e.showLendAgain ? (o(), l(c, {
+              key: "lendAgainButton",
+              class: m(["lend-again", { "tw-w-full": i.showPresetAmounts }]),
+              "data-testid": "bp-lend-cta-lend-again-button",
+              type: "submit"
+            }, {
+              default: u(() => [
+                w(h(i.primaryButtonText || "Lend") + " again ", 1)
+              ]),
+              _: 1
+            }, 8, ["class"])) : r("", !0)
+          ], 2),
+          e.isLendAmountButton && !i.enableFiveDollarsNotes ? (o(), l(L, {
+            key: 2,
+            class: "tw-w-full",
+            "loan-id": e.loanId,
+            "show-now": !1,
+            "amount-left": e.amountForLendAmountButton,
+            "is-adding": i.isAdding,
+            onAddToBasket: e.addToBasket
+          }, null, 8, ["loan-id", "amount-left", "is-adding", "onAddToBasket"])) : r("", !0),
+          !i.isLoading && i.isAdding ? (o(), l(c, {
+            key: 3,
+            class: "tw-inline-flex tw-flex-1"
           }, {
-            default: d(() => [
-              c(m(s.primaryButtonText || "Lend") + " again ", 1)
-            ]),
+            default: u(() => s[9] || (s[9] = [
+              w(" Adding to basket ")
+            ])),
             _: 1
-          }, 8, ["class"])) : l("", !0)
-        ], 2),
-        e.isLendAmountButton && !s.enableFiveDollarsNotes ? (i(), r(b, {
-          key: 2,
-          class: "tw-w-full",
-          "loan-id": e.loanId,
-          "show-now": !1,
-          "amount-left": e.amountForLendAmountButton,
-          "is-adding": s.isAdding,
-          onAddToBasket: e.addToBasket
-        }, null, 8, ["loan-id", "amount-left", "is-adding", "onAddToBasket"])) : l("", !0),
-        !s.isLoading && s.isAdding ? (i(), r(h, {
-          key: 3,
-          class: "tw-inline-flex tw-flex-1"
-        }, {
-          default: d(() => n[6] || (n[6] = [
-            c(" Adding to basket ")
-          ])),
-          _: 1
-        })) : l("", !0)
-      ], 10, R)
-    ], 32)) : l("", !0)
+          })) : r("", !0)
+        ], 10, Q)
+      ])
+    ], 32)) : r("", !0)
   ]);
 }
-const ot = /* @__PURE__ */ N(O, [["render", j], ["__scopeId", "data-v-b607e1c2"]]);
+const me = /* @__PURE__ */ O(M, [["render", ee], ["__scopeId", "data-v-ce2eaa1b"]]);
 export {
-  nt as KV_LEND_CTA_FRAGMENT,
-  st as KV_LEND_CTA_USER_FRAGMENT,
-  ot as default
+  ce as KV_LEND_CTA_FRAGMENT,
+  we as KV_LEND_CTA_USER_FRAGMENT,
+  me as default
 };

package/dist/vue/KvWwwHeader/KvHeaderLinkBar.css

@@ -1 +1 @@
-.header-link[data-v-c569a6b0]{cursor:pointer;padding:1rem .5rem;--tw-text-opacity: 1;color:rgba(var(--text-primary),var(--tw-text-opacity, 1));text-decoration-line:none}.header-link[data-v-c569a6b0]:hover{--tw-text-opacity: 1;color:rgba(var(--text-action),var(--tw-text-opacity, 1));text-decoration-line:none}@media (min-width: 64rem){.header-link[data-v-c569a6b0]{padding-left:1.25rem;padding-right:1.25rem}}
+.header-link[data-v-ae8c3f96]{cursor:pointer;padding:1rem .5rem;--tw-text-opacity: 1;color:rgba(var(--text-primary),var(--tw-text-opacity, 1));text-decoration-line:none}.header-link[data-v-ae8c3f96]:hover{--tw-text-opacity: 1;color:rgba(var(--text-action),var(--tw-text-opacity, 1));text-decoration-line:none}@media (min-width: 64rem){.header-link[data-v-ae8c3f96]{padding-left:1.25rem;padding-right:1.25rem}}

package/dist/vue/KvWwwHeader/KvHeaderLinkBar.js

@@ -1,19 +1,19 @@
-import { defineAsyncComponent as f, ref as a, computed as O, onMounted as S, onUnmounted as E, resolveComponent as M, resolveDirective as P, openBlock as i, createElementBlock as m, withDirectives as d, normalizeClass as g, createVNode as B, createBlock as b, withCtx as I, createTextVNode as v, createElementVNode as T, createCommentVNode as c, toDisplayString as V } from "vue";
-import { mdiAccountCircle as z, mdiChevronDown as W, mdiMagnify as j, mdiMenu as F } from "@mdi/js";
-import q from "numeral";
-import G from "../KvMaterialIcon.js";
-import J from "../KvIconBag.js";
-import Q from "./KvHeaderDropdownLink.js";
-import R from "../KvUserAvatar.js";
-import { throttle as X } from "../../utils/throttle.js";
+import { defineAsyncComponent as w, ref as l, computed as P, onMounted as z, onUnmounted as W, resolveComponent as g, resolveDirective as j, openBlock as i, createElementBlock as c, withDirectives as u, normalizeClass as b, createVNode as U, createBlock as h, withCtx as p, createTextVNode as M, createElementVNode as D, createCommentVNode as k, toDisplayString as F } from "vue";
+import { mdiAccountCircle as q, mdiChevronDown as G, mdiMagnify as J, mdiMenu as Q } from "@mdi/js";
+import X from "numeral";
+import Y from "../KvMaterialIcon.js";
+import Z from "../KvIconBag.js";
+import $ from "./KvHeaderDropdownLink.js";
+import ee from "../KvUserAvatar.js";
+import { throttle as ne } from "../../utils/throttle.js";
 import "./KvHeaderLinkBar.css";
-import Y from "../../_virtual/_plugin-vue_export-helper.js";
-const Z = f(() => import("./KvHeaderMobileMenu.js")), C = f(() => import("./KvHeaderMyKivaMenu.js")), $ = f(() => import("./LendMenu/KvLendMenu.js")), ee = f(() => import("./KvHeaderTakeActionMenu.js")), ne = f(() => import("./KvHeaderAboutMenu.js")), D = 118, oe = {
+import te from "../../_virtual/_plugin-vue_export-helper.js";
+const oe = w(() => import("./KvHeaderMobileMenu.js")), O = w(() => import("./KvHeaderMyKivaMenu.js")), re = w(() => import("./LendMenu/KvLendMenu.js")), le = w(() => import("./KvHeaderTakeActionMenu.js")), ie = w(() => import("./KvHeaderAboutMenu.js")), C = 118, T = "avatar-menu", ae = {
   components: {
-    KvMaterialIcon: G,
-    KvIconBag: J,
-    KvHeaderDropdownLink: Q,
-    KvUserAvatar: R
+    KvMaterialIcon: Y,
+    KvIconBag: Z,
+    KvHeaderDropdownLink: $,
+    KvUserAvatar: ee
   },
   props: {
     loggedIn: {
@@ -56,175 +56,188 @@ const Z = f(() => import("./KvHeaderMobileMenu.js")), C = f(() => import("./KvHe
   emits: [
     "item-hover"
   ],
-  setup(u, { emit: e }) {
-    const o = a(null), n = a(null), x = a(null), h = a(null), p = a(null), s = a(null), H = a(null), y = a(null), r = a(null), t = (l, w, k = null) => {
-      e("item-hover", l, w, k);
-    }, K = () => {
-      var L, N;
-      const l = (N = (L = o.value) == null ? void 0 : L.userAvatar) == null ? void 0 : N.getBoundingClientRect();
-      let w = null, k = !1;
-      if (l) {
-        const U = (l == null ? void 0 : l.left) + (l == null ? void 0 : l.width) / 2 - D / 2;
-        U + D > window.outerWidth && (k = !0), w = {
-          ...k ? { right: 0 } : { left: u.isMobile ? 0 : `${U}px` },
-          borderRadius: "0px 0px 8px 8px",
-          width: `${u.isMobile ? "100%" : "auto"}`
-        };
-      }
-      t(o.value, C, w);
-    }, A = X(() => {
-      u.openMenuItem && K();
-    }, 50), _ = O(() => u.isMobile ? void 0 : "/lend-by-category");
-    return S(() => {
-      import("./KvHeaderMobileMenu.js"), import("./KvHeaderMyKivaMenu.js"), import("./LendMenu/KvLendMenu.js"), import("./KvHeaderTakeActionMenu.js"), import("./KvHeaderAboutMenu.js"), window.addEventListener("resize", A);
-    }), E(() => {
-      window.removeEventListener("resize", A);
+  setup(d, { emit: e }) {
+    const t = l(null), n = l(null), K = l(null), x = l(null), A = l(null), f = l(null), H = l(null), y = l(null), a = l(null), o = l(null), m = (r, v, s = null) => {
+      e("item-hover", r, v, s);
+    }, _ = (r, v, s = null) => {
+      d.isMobile || m(r, v, s);
+    }, S = (r) => {
+      o.value === r && (o.value = null, m());
+    }, E = () => {
+      var B, N;
+      const r = (N = (B = t.value) == null ? void 0 : B.userAvatar) == null ? void 0 : N.getBoundingClientRect();
+      if (!r) return null;
+      const s = r.left + r.width / 2 - C / 2;
+      return {
+        ...s + C > window.outerWidth ? { right: 0 } : { left: d.isMobile ? 0 : `${s}px` },
+        borderRadius: "0px 0px 8px 8px",
+        width: d.isMobile ? "100%" : "auto"
+      };
+    }, I = () => {
+      o.value = T, m(t.value, O, E());
+    }, V = (r, v) => {
+      !o.value || o.value !== r ? (o.value = r, r === T ? I() : m(r, v)) : (o.value = null, m());
+    }, L = ne(() => {
+      d.openMenuItem && I();
+    }, 50), R = P(() => d.isMobile ? void 0 : "/lend-by-category");
+    return z(() => {
+      import("./KvHeaderMobileMenu.js"), import("./KvHeaderMyKivaMenu.js"), import("./LendMenu/KvLendMenu.js"), import("./KvHeaderTakeActionMenu.js"), import("./KvHeaderAboutMenu.js"), window.addEventListener("resize", L);
+    }), W(() => {
+      window.removeEventListener("resize", L);
     }), {
-      numeral: q,
-      mdiAccountCircle: z,
-      mdiChevronDown: W,
-      mdiMagnify: j,
-      mdiMenu: F,
-      onHover: t,
-      avatar: o,
+      AVATAR_MENU_ID: T,
+      openMenuId: o,
+      numeral: X,
+      mdiAccountCircle: q,
+      mdiChevronDown: G,
+      mdiMagnify: J,
+      mdiMenu: Q,
+      onHover: m,
+      avatar: t,
       lendButton: n,
-      aboutUsLink: x,
-      partnerWithUsLink: h,
-      borrowLink: p,
-      supportKivaLink: s,
+      aboutUsLink: K,
+      partnerWithUsLink: x,
+      borrowLink: A,
+      supportKivaLink: f,
       basketLink: H,
       signInLink: y,
-      menuButton: r,
-      lendUrl: _,
-      handleAvatarMenuPosition: K,
-      KvHeaderMobileMenu: Z,
-      KvHeaderMyKivaMenu: C,
-      KvLendMenu: $,
-      KvHeaderTakeActionMenu: ee,
-      KvHeaderAboutMenu: ne
+      menuButton: a,
+      lendUrl: R,
+      handleOnHover: _,
+      handleTouchStart: V,
+      handleMouseOut: S,
+      handleAvatarMenuPosition: I,
+      KvHeaderMobileMenu: oe,
+      KvHeaderMyKivaMenu: O,
+      KvLendMenu: re,
+      KvHeaderTakeActionMenu: le,
+      KvHeaderAboutMenu: ie
     };
   }
-}, te = { class: "tw-h-full tw-flex tw-items-center" }, ie = ["href"], re = {
+}, ue = { class: "tw-h-full tw-flex tw-items-center" }, de = ["href"], me = {
   key: 0,
   class: "tw-bg-eco-green-1 tw-py-0.5 tw-px-1 tw-text-eco-green-4"
-}, le = ["href"];
-function ae(u, e, o, n, x, h) {
-  const p = M("kv-material-icon"), s = M("KvHeaderDropdownLink"), H = M("kv-icon-bag"), y = M("KvUserAvatar"), r = P("kv-track-event");
-  return i(), m("div", te, [
-    d((i(), m("button", {
+}, ve = ["href"];
+function se(d, e, t, n, K, x) {
+  const A = g("kv-material-icon"), f = g("KvHeaderDropdownLink"), H = g("kv-icon-bag"), y = g("KvUserAvatar"), a = j("kv-track-event");
+  return i(), c("div", ue, [
+    u((i(), c("button", {
       ref: "menuButton",
-      class: g(["header-link tw-inline-flex lg:tw-hidden", {
-        "tw-text-tertiary": o.openMenuItem && o.openMenuItem !== n.KvHeaderMobileMenu
+      class: b(["header-link tw-inline-flex lg:tw-hidden", {
+        "tw-text-tertiary": t.openMenuItem && t.openMenuItem !== n.KvHeaderMobileMenu
       }]),
-      onMouseover: e[0] || (e[0] = (t) => n.onHover(n.menuButton, n.KvHeaderMobileMenu)),
-      onMouseout: e[1] || (e[1] = (t) => n.onHover())
+      onMouseover: e[0] || (e[0] = (o) => n.handleOnHover(n.menuButton, n.KvHeaderMobileMenu)),
+      onMouseout: e[1] || (e[1] = (o) => n.handleMouseOut("menuButton")),
+      onTouchstart: e[2] || (e[2] = (o) => n.handleTouchStart("menuButton", n.KvHeaderMobileMenu))
     }, [
-      B(p, { icon: n.mdiMenu }, null, 8, ["icon"])
+      U(A, { icon: n.mdiMenu }, null, 8, ["icon"])
     ], 34)), [
-      [r, o.openMenuItem === n.KvHeaderMobileMenu ? ["TopNav", "click-Hamburger-menu"] : null]
+      [a, t.openMenuItem === n.KvHeaderMobileMenu ? ["TopNav", "click-Hamburger-menu"] : null]
     ]),
-    d((i(), b(s, {
+    u((i(), h(f, {
       "ref-name": "lendButton",
       href: n.lendUrl,
       "menu-component": n.KvLendMenu,
-      "open-menu-item": o.openMenuItem,
+      "open-menu-item": t.openMenuItem,
       "dropdown-icon": n.mdiChevronDown,
       "base-class": "tw-inline-flex",
-      onOnHover: n.onHover,
-      onMouseout: e[2] || (e[2] = (t) => n.onHover())
+      onOnHover: n.handleOnHover,
+      onMouseout: e[3] || (e[3] = (o) => n.handleMouseOut("lendButton")),
+      onTouchstart: e[4] || (e[4] = (o) => n.handleTouchStart("lendButton", n.KvLendMenu))
     }, {
-      default: I(() => e[7] || (e[7] = [
-        v(" Lend ")
+      default: p(() => e[10] || (e[10] = [
+        M(" Lend ")
       ])),
       _: 1
     }, 8, ["href", "menu-component", "open-menu-item", "dropdown-icon", "onOnHover"])), [
-      [r, ["TopNav", "click-Lend"]]
+      [a, ["TopNav", "click-Lend"]]
     ]),
-    d((i(), b(s, {
+    u((i(), h(f, {
       "ref-name": "takeActionButton",
       "base-class": "tw-hidden lg:tw-inline-flex",
       "menu-component": n.KvHeaderTakeActionMenu,
-      "open-menu-item": o.openMenuItem,
+      "open-menu-item": t.openMenuItem,
       "dropdown-icon": n.mdiChevronDown,
       "send-link-position": "",
       onOnHover: n.onHover,
-      onMouseout: e[3] || (e[3] = (t) => n.onHover())
+      onMouseout: e[5] || (e[5] = (o) => n.onHover())
     }, {
-      default: I(() => e[8] || (e[8] = [
-        v(" Take action ")
+      default: p(() => e[11] || (e[11] = [
+        M(" Take action ")
       ])),
       _: 1
     }, 8, ["menu-component", "open-menu-item", "dropdown-icon", "onOnHover"])), [
-      [r, ["TopNav", "click-TakeAction"]]
+      [a, ["TopNav", "click-TakeAction"]]
     ]),
-    d((i(), b(s, {
+    u((i(), h(f, {
       "ref-name": "aboutUsLink",
       "base-class": "tw-hidden lg:tw-inline-flex",
       "menu-component": n.KvHeaderAboutMenu,
-      "open-menu-item": o.openMenuItem,
+      "open-menu-item": t.openMenuItem,
       "dropdown-icon": n.mdiChevronDown,
       "send-link-position": "",
       onOnHover: n.onHover,
-      onMouseout: e[4] || (e[4] = (t) => n.onHover())
+      onMouseout: e[6] || (e[6] = (o) => n.onHover())
     }, {
-      default: I(() => e[9] || (e[9] = [
-        v(" About ")
+      default: p(() => e[12] || (e[12] = [
+        M(" About ")
       ])),
       _: 1
     }, 8, ["menu-component", "open-menu-item", "dropdown-icon", "onOnHover"])), [
-      [r, ["TopNav", "click-About"]]
+      [a, ["TopNav", "click-About"]]
     ]),
-    e[12] || (e[12] = T("div", { class: "tw-flex-1 tw-h-full" }, null, -1)),
-    o.loggedIn ? d((i(), m("a", {
+    e[15] || (e[15] = D("div", { class: "tw-flex-1 tw-h-full" }, null, -1)),
+    t.loggedIn ? u((i(), c("a", {
       key: 0,
       ref: "dashboardLink",
-      href: o.myDashboardUrl,
-      class: g(["header-link tw-hidden lg:tw-block", { "tw-text-tertiary": !!o.openMenuItem }])
-    }, e[10] || (e[10] = [
-      v(" My dashboard ")
-    ]), 10, ie)), [
-      [r, ["TopNav", "click-Dashboard"]]
-    ]) : c("", !0),
-    o.basketCount > 0 ? d((i(), m("a", {
+      href: t.myDashboardUrl,
+      class: b(["header-link tw-hidden lg:tw-block", { "tw-text-tertiary": !!t.openMenuItem }])
+    }, e[13] || (e[13] = [
+      M(" My dashboard ")
+    ]), 10, de)), [
+      [a, ["TopNav", "click-Dashboard"]]
+    ]) : k("", !0),
+    t.basketCount > 0 ? u((i(), c("a", {
       key: 1,
       ref: "basketLink",
       href: "/basket",
-      class: g(["header-link tw-relative", { "tw-text-tertiary": !!o.openMenuItem }])
+      class: b(["header-link tw-relative", { "tw-text-tertiary": !!t.openMenuItem }])
     }, [
-      B(H, {
+      U(H, {
         class: "tw-w-3 tw-h-3 tw-pointer-events-none",
-        count: o.basketCount
+        count: t.basketCount
       }, null, 8, ["count"])
     ], 2)), [
-      [r, ["TopNav", "click-Basket"]]
-    ]) : c("", !0),
-    T("div", {
+      [a, ["TopNav", "click-Basket"]]
+    ]) : k("", !0),
+    D("div", {
       class: "tw-cursor-pointer tw-flex tw-items-center tw-gap-1",
-      onMouseover: e[5] || (e[5] = (...t) => n.handleAvatarMenuPosition && n.handleAvatarMenuPosition(...t)),
-      onMouseout: e[6] || (e[6] = (t) => n.onHover())
+      onMouseover: e[7] || (e[7] = (...o) => n.handleAvatarMenuPosition && n.handleAvatarMenuPosition(...o)),
+      onMouseout: e[8] || (e[8] = (o) => n.handleMouseOut(n.AVATAR_MENU_ID)),
+      onTouchstart: e[9] || (e[9] = (o) => n.handleTouchStart(n.AVATAR_MENU_ID))
     }, [
-      o.loggedIn ? (i(), m("span", re, V(n.numeral(o.balance).format("$0")), 1)) : c("", !0),
-      o.loggedIn ? (i(), b(y, {
+      t.loggedIn ? (i(), c("span", me, F(n.numeral(t.balance).format("$0")), 1)) : k("", !0),
+      t.loggedIn ? (i(), h(y, {
         key: 1,
         ref: "avatar",
-        "lender-name": o.lenderName,
-        "lender-image-url": o.lenderImageUrl,
+        "lender-name": t.lenderName,
+        "lender-image-url": t.lenderImageUrl,
         "is-small": ""
-      }, null, 8, ["lender-name", "lender-image-url"])) : c("", !0)
+      }, null, 8, ["lender-name", "lender-image-url"])) : k("", !0)
     ], 32),
-    o.loggedIn ? c("", !0) : d((i(), m("a", {
+    t.loggedIn ? k("", !0) : u((i(), c("a", {
       key: 2,
       ref: "signInLink",
-      href: o.loginUrl,
-      class: g(["header-link", { "tw-text-tertiary": !!o.openMenuItem }])
-    }, e[11] || (e[11] = [
-      v(" Sign in ")
-    ]), 10, le)), [
-      [r, ["TopNav", "click-Sign-in"]]
+      href: t.loginUrl,
+      class: b(["header-link", { "tw-text-tertiary": !!t.openMenuItem }])
+    }, e[14] || (e[14] = [
+      M(" Sign in ")
+    ]), 10, ve)), [
+      [a, ["TopNav", "click-Sign-in"]]
     ])
   ]);
 }
-const pe = /* @__PURE__ */ Y(oe, [["render", ae], ["__scopeId", "data-v-c569a6b0"]]);
+const Ie = /* @__PURE__ */ te(ae, [["render", se], ["__scopeId", "data-v-ae8c3f96"]]);
 export {
-  pe as default
+  Ie as default
 };

package/dist/vue/KvWwwHeader/KvHeaderMobileMenu.css

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

package/dist/vue/KvWwwHeader/KvHeaderMobileMenu.js

@@ -74,7 +74,10 @@ const b = {
 function $(H, e, M, S, p, V) {
   const c = k("KvAccordionItem"), i = v("kv-track-event");
   return t(), o("nav", _, [
-    d(c, { class: "tw-w-full tw-border-b-0" }, {
+    d(c, {
+      open: "",
+      class: "tw-w-full tw-border-b-0"
+    }, {
       header: a(() => e[0] || (e[0] = [
         l("h3", null, "Take action", -1)
       ])),
@@ -147,7 +150,7 @@ function $(H, e, M, S, p, V) {
     })
   ]);
 }
-const q = /* @__PURE__ */ h(b, [["render", $], ["__scopeId", "data-v-c9569b42"]]);
+const q = /* @__PURE__ */ h(b, [["render", $], ["__scopeId", "data-v-463ea821"]]);
 export {
   q as default
 };

package/dist/vue/KvWwwHeader.css

@@ -1 +1 @@
-.header-margins[data-v-588c2857]{margin:0 auto;max-width:1400px}.header-fade-enter-active[data-v-588c2857]{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.header-fade-leave-active[data-v-588c2857]{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.1s}.header-fade-enter[data-v-588c2857],.header-fade-leave-to[data-v-588c2857]{opacity:0}.header-fade-leave[data-v-588c2857],.header-fade-enter-to[data-v-588c2857]{opacity:1}.bg-opacity-50[data-v-588c2857]{background-color:rgba(var(--bg-action-highlight),.5)}
+.header-margins[data-v-c4b7061b]{margin:0 auto;max-width:1400px}.header-fade-enter-active[data-v-c4b7061b]{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.header-fade-leave-active[data-v-c4b7061b]{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.1s}.header-fade-enter[data-v-c4b7061b],.header-fade-leave-to[data-v-c4b7061b]{opacity:0}.header-fade-leave[data-v-c4b7061b],.header-fade-enter-to[data-v-c4b7061b]{opacity:1}.bg-opacity-50[data-v-c4b7061b]{background-color:rgba(var(--bg-action-highlight),.5)}

package/dist/vue/KvWwwHeader.js

@@ -78,7 +78,7 @@ const T = {
           position: "absolute"
         })) : l.value && (d = setTimeout(() => {
           l.value = !1, a.value = null;
-        }, 200));
+        }, 50));
       },
       loadMenuData: (_) => {
         var o;
@@ -101,7 +101,7 @@ const T = {
   style: { top: "3.75rem" }
 }, V = { class: "header-margins tw-px-2.5" };
 function z(I, n, e, t, l, a) {
-  const s = c("kv-header-link-bar"), r = c("kv-header-logo"), d = c("kv-theme-provider"), w = M("kv-track-event");
+  const s = c("kv-header-link-bar"), r = c("kv-header-logo"), d = c("kv-theme-provider"), b = M("kv-track-event");
   return v(), y(d, { tag: "div" }, {
     default: f(() => [
       m("nav", S, [
@@ -127,7 +127,7 @@ function z(I, n, e, t, l, a) {
         g((v(), C("a", E, [
           u(r)
         ])), [
-          [w, ["TopNav", "click-Logo"]]
+          [b, ["TopNav", "click-Logo"]]
         ])
       ]),
       u(k, { name: "header-fade" }, {
@@ -136,8 +136,8 @@ function z(I, n, e, t, l, a) {
             m("div", {
               class: "tw-bg-primary",
               style: H(t.menuPosition),
-              onMouseover: n[0] || (n[0] = (b) => t.onHover(t.activeHeaderItem, t.menuComponent)),
-              onMouseout: n[1] || (n[1] = (b) => t.onHover())
+              onMouseover: n[0] || (n[0] = (w) => t.onHover(t.activeHeaderItem, t.menuComponent)),
+              onMouseout: n[1] || (n[1] = (w) => t.onHover())
             }, [
               m("div", V, [
                 (v(), y(B(t.menuComponent), {
@@ -163,7 +163,7 @@ function z(I, n, e, t, l, a) {
     _: 1
   });
 }
-const A = /* @__PURE__ */ N(T, [["render", z], ["__scopeId", "data-v-588c2857"]]);
+const A = /* @__PURE__ */ N(T, [["render", z], ["__scopeId", "data-v-c4b7061b"]]);
 export {
   A as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "6.48.1",
+  "version": "6.49.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -113,5 +113,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "d6faecba8a629cf10ff434d9fdcbad291a517fe1"
+  "gitHead": "f03ff523198dcc597eebe95a49a39847fb1d37e0"
 }