@kiva/kv-components 6.50.1 → 6.50.3

package/dist/vue/KvLendCta.css

@@ -1 +1 @@
-.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}}
+.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%}}

package/dist/vue/KvLendCta.js

@@ -1,35 +1,35 @@
-import _ from "graphql-tag";
-import { mdiChevronRight as D } from "@mdi/js";
+import b from "graphql-tag";
+import { mdiChevronRight as P } 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 { getLendCtaSelectedOption as g, getDropdownPriceArray as O } from "../utils/loanUtils.js";
+import I 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 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 "./KvLendCta.css";
-import O from "../_virtual/_plugin-vue_export-helper.js";
-const A = "Other", ce = _`
+import V from "../_virtual/_plugin-vue_export-helper.js";
+const p = "Other", E = 430, ce = b`
     fragment KvLendCta on LoanBasic {
         id
         name
         status
         minNoteSize
     }
-`, we = _`
+`, we = b`
     fragment KvLendCtaUser on LoanBasic {
         id
         userProperties {
             lentTo
         }
     }
-`, M = {
+`, R = {
   name: "KvLendCta",
   components: {
-    KvLendAmountButton: F,
-    KvUiButton: I,
+    KvLendAmountButton: I,
+    KvUiButton: F,
     KvUiSelect: S,
-    KvMaterialIcon: V
+    KvMaterialIcon: N
   },
   props: {
     loan: {
@@ -128,7 +128,7 @@ const A = "Other", ce = _`
   data() {
     var t, s;
     return {
-      mdiChevronRight: D,
+      mdiChevronRight: P,
       defaultAmountOptions: [25, 50, 75],
       selectedOption: g(
         this.getCookie,
@@ -139,11 +139,12 @@ const A = "Other", ce = _`
         this.userBalance,
         this.fiveDollarsSelected
       ),
-      selectedDropdownOption: A,
-      OTHER_OPTION: A,
+      selectedDropdownOption: p,
+      OTHER_OPTION: p,
       // SSR-safe viewport width initialization
       viewportWidth: typeof window < "u" ? window.innerWidth : 1024,
-      resizeHandler: void 0
+      resizeHandler: void 0,
+      MOBILE_DROPDOWN_BREAKPOINT: E
     };
   },
   computed: {
@@ -171,14 +172,14 @@ const A = "Other", ce = _`
       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), s = P(
+      const t = parseFloat(this.unreservedAmount < 25 ? this.minNoteSize : 25), s = O(
         this.unreservedAmount,
         this.isCompleteLoanActive,
         t,
         this.enableFiveDollarsNotes,
         this.isVisitor
       );
-      return this.maxAmount ? s.filter((i) => parseFloat(i) <= parseFloat(this.maxAmount)) : s;
+      return this.maxAmount ? s.filter((o) => parseFloat(o) <= parseFloat(this.maxAmount)) : s;
     },
     presetButtonsPrices() {
       const t = this.prices.slice(0, 3);
@@ -188,7 +189,7 @@ const A = "Other", ce = _`
       if (this.prices.length === 4)
         return [];
       const t = this.prices.slice(this.defaultAmountOptions.length);
-      return t.unshift(A), t;
+      return t.unshift(p), t;
     },
     loanName() {
       var t;
@@ -258,7 +259,7 @@ const A = "Other", ce = _`
       return this.isLentTo && !this.isLessThan25;
     },
     selectedDropdown() {
-      return this.selectedDropdownOption !== A;
+      return this.selectedDropdownOption !== p;
     },
     showFilteredDropdown() {
       return this.presetDropdownPrices.length > 1;
@@ -269,17 +270,17 @@ const A = "Other", ce = _`
   },
   watch: {
     unreservedAmount(t, s) {
-      var i, p;
+      var o, L;
       t !== s && s === "" && (this.selectedOption = g(
         this.getCookie,
         this.setCookie,
         this.enableFiveDollarsNotes,
-        (p = (i = this.route) == null ? void 0 : i.query) == null ? void 0 : p.utm_campaign,
+        (L = (o = this.route) == null ? void 0 : o.query) == null ? void 0 : L.utm_campaign,
         t,
         this.userBalance,
         this.fiveDollarsSelected,
         this.showPresetAmounts
-      )), this.showPresetAmounts && (this.selectedOption = A);
+      )), this.showPresetAmounts && (this.selectedOption = p);
     }
   },
   mounted() {
@@ -337,7 +338,7 @@ const A = "Other", ce = _`
         t,
         this.loanId,
         this.loanId
-      ), this.selectedOption = t, this.selectedDropdownOption = A;
+      ), this.selectedOption = t, this.selectedDropdownOption = p;
     },
     handleCheckout() {
       this.kvTrackFunction(
@@ -349,305 +350,268 @@ const A = "Other", ce = _`
       );
     }
   }
-}, E = { class: "tw-whitespace-nowrap" }, R = {
+}, M = { class: "tw-whitespace-nowrap" }, K = {
   key: 2,
   class: "tw-w-full tw-text-center tw-rounded tw-p-2",
   style: { background: "#f1f1f1" }
-}, 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 = {
+}, W = { class: "tw-flex" }, U = ["disabled"], z = {
   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"
-}, Y = ["value"], Z = {
-  key: 1,
+  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,
   class: "amountDropdownWrapper"
 }, $ = ["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, {
+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, {
       key: 0,
       variant: "secondary",
       class: "tw-inline-flex tw-flex-1 tw-w-full",
       "data-testid": "bp-lend-cta-checkout-button",
-      to: i.externalLinks ? void 0 : "/basket",
-      href: i.externalLinks ? "/basket" : void 0,
+      to: o.externalLinks ? void 0 : "/basket",
+      href: o.externalLinks ? "/basket" : void 0,
       onClick: s[0] || (s[0] = (n) => e.clickSecondaryButton(n))
     }, {
-      default: u(() => [
-        w(h(e.loanInBasketButtonText), 1)
+      default: a(() => [
+        m(u(e.loanInBasketButtonText), 1)
       ]),
       _: 1
-    }, 8, ["to", "href"])) : e.showNonActionableLoanButton ? (o(), l(c, {
+    }, 8, ["to", "href"])) : e.showNonActionableLoanButton ? (i(), r(w, {
       key: 1,
       class: "tw-inline-flex tw-flex-1"
     }, {
-      default: u(() => [
-        w(h(e.ctaButtonText), 1)
+      default: a(() => [
+        m(u(e.ctaButtonText), 1)
       ]),
       _: 1
-    })) : e.isFunded ? (o(), d("div", R, " This loan was just funded! 🎉 ")) : i.showViewLoan ? (o(), l(c, {
+    })) : e.isFunded ? (i(), l("div", K, " This loan was just funded! 🎉 ")) : o.showViewLoan ? (i(), r(w, {
       key: 3,
       state: `${e.allSharesReserved ? "disabled" : ""}`,
-      to: i.externalLinks ? void 0 : e.readMorePath,
-      href: i.externalLinks ? e.readMorePath : void 0,
+      to: o.externalLinks ? void 0 : e.readMorePath,
+      href: o.externalLinks ? e.readMorePath : void 0,
       class: "tw-mb-0",
       onClick: s[1] || (s[1] = (n) => t.$emit("show-loan-details", n))
     }, {
-      default: u(() => [
-        f("span", U, [
-          s[7] || (s[7] = w(" View loan ")),
-          N(x, {
+      default: a(() => [
+        f("span", W, [
+          s[7] || (s[7] = m(" View loan ")),
+          _(x, {
             class: "tw-w-3 tw-h-3 tw-align-middle",
-            icon: a.mdiChevronRight
+            icon: d.mdiChevronRight
           }, null, 8, ["icon"])
         ])
       ]),
       _: 1
-    }, 8, ["state", "to", "href"])) : e.useFormSubmit ? (o(), d("form", {
+    }, 8, ["state", "to", "href"])) : e.useFormSubmit ? (i(), l("form", {
       key: 4,
       class: "tw-w-full tw-flex",
-      onSubmit: s[6] || (s[6] = v((...n) => e.addToBasket && e.addToBasket(...n), ["prevent"]))
+      onSubmit: s[6] || (s[6] = B((...n) => e.addToBasket && e.addToBasket(...n), ["prevent"]))
     }, [
-      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,
+      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
+        }]),
+        disabled: o.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,
                 variant: "secondary",
-                class: m(["preset-option tw-basis-0 tw-flex-1 tw-min-w-0", { "selected-option": a.selectedOption == n }]),
+                class: h(["preset-option tw-flex-1 tw-min-w-0", { "selected-option": d.selectedOption == n }]),
                 "data-testid": "bp-lend-cta-lend-button-mobile",
-                onClick: (T) => e.clickPresetButton(n)
+                onClick: (D) => e.clickPresetButton(n)
               }, {
-                default: u(() => [
-                  w(" $" + h(n), 1)
+                default: a(() => [
+                  m(" $ " + u(n), 1)
                 ]),
                 _: 2
               }, 1032, ["class", "onClick"]))), 128)),
-              e.showFilteredDropdown && a.viewportWidth > 325 ? (o(), l(B, {
-                key: 1,
+              e.showFilteredDropdown && d.viewportWidth >= d.MOBILE_DROPDOWN_BREAKPOINT ? (i(), r(v, {
+                key: 0,
                 id: `LoanAmountDropdownMobile_${e.loanId}`,
-                modelValue: a.selectedDropdownOption,
+                modelValue: d.selectedDropdownOption,
                 "onUpdate:modelValue": [
-                  s[2] || (s[2] = (n) => a.selectedDropdownOption = n),
+                  s[2] || (s[2] = (n) => d.selectedDropdownOption = n),
                   e.trackLendAmountSelection
                 ],
-                class: m(["filtered-dropdown tw-rounded tw-w-auto tw-flex-none mobile-other-dd tw-min-w-max", {
+                class: h(["filtered-dropdown mobile-dropdown tw-flex-1 tw-rounded", {
                   "unselected-dropdown": !e.selectedDropdown,
                   "selected-dropdown": e.selectedDropdown
                 }]),
                 "aria-label": "Lend amount",
-                onClick: v(e.clickDropdown, ["stop"])
+                onClick: B(e.clickDropdown, ["stop"])
               }, {
-                default: u(() => [
-                  (o(!0), d(k, null, y(e.presetDropdownPrices, (n) => (o(), d("option", {
-                    key: "m-" + n,
+                default: a(() => [
+                  (i(!0), l(k, null, A(e.presetDropdownPrices, (n) => (i(), l("option", {
+                    key: n,
                     value: n
-                  }, h(n !== a.OTHER_OPTION ? `$${n}` : n), 9, W))), 128))
+                  }, u(n !== d.OTHER_OPTION ? `$${n}` : n), 9, q))), 128))
                 ]),
                 _: 1
-              }, 8, ["id", "modelValue", "class", "onUpdate:modelValue", "onClick"])) : r("", !0)
+              }, 8, ["id", "modelValue", "class", "onUpdate:modelValue", "onClick"])) : c("", !0)
             ]),
-            a.viewportWidth <= 325 ? (o(), d("div", j, [
-              e.showFilteredDropdown ? (o(), l(B, {
+            f("div", G, [
+              e.showFilteredDropdown && d.viewportWidth < d.MOBILE_DROPDOWN_BREAKPOINT ? (i(), r(v, {
                 key: 0,
-                id: `LoanAmountDropdownMobile_${e.loanId}`,
-                modelValue: a.selectedDropdownOption,
+                id: `LoanAmountDropdownMobile_Small_${e.loanId}`,
+                modelValue: d.selectedDropdownOption,
                 "onUpdate:modelValue": [
-                  s[3] || (s[3] = (n) => a.selectedDropdownOption = n),
+                  s[3] || (s[3] = (n) => d.selectedDropdownOption = n),
                   e.trackLendAmountSelection
                 ],
-                class: m(["filtered-dropdown tw-rounded tw-w-auto tw-flex-none mobile-other-dd", {
+                class: h(["filtered-dropdown mobile-dropdown-small tw-rounded tw-w-2/5", {
                   "unselected-dropdown": !e.selectedDropdown,
                   "selected-dropdown": e.selectedDropdown
                 }]),
                 "aria-label": "Lend amount",
-                style: { "min-width": "90px", "max-width": "110px" },
-                onClick: v(e.clickDropdown, ["stop"])
+                onClick: B(e.clickDropdown, ["stop"])
               }, {
-                default: u(() => [
-                  (o(!0), d(k, null, y(e.presetDropdownPrices, (n) => (o(), d("option", {
-                    key: "m-" + n,
+                default: a(() => [
+                  (i(!0), l(k, null, A(e.presetDropdownPrices, (n) => (i(), l("option", {
+                    key: "small-" + n,
                     value: n
-                  }, h(n !== a.OTHER_OPTION ? `$${n}` : n), 9, q))), 128))
+                  }, u(n !== d.OTHER_OPTION ? `$${n}` : n), 9, J))), 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",
+              }, 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"]),
+                "data-testid": "bp-lend-cta-mobile-lend-button",
                 type: "submit"
               }, {
-                default: u(() => [
-                  w(h(e.ctaButtonText), 1)
+                default: a(() => [
+                  f("span", Q, [
+                    f("span", X, u(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, {
+              }, 8, ["class"])
+            ])
+          ])
+        ])) : c("", !0),
+        o.showPresetAmounts && !o.isAdding ? (i(), l("div", {
+          key: 1,
+          class: h({
+            "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,
+            variant: "secondary",
+            class: h(["tw-inline-flex tw-flex-1 preset-option tw-w-8", { "selected-option": d.selectedOption == n }]),
+            "data-testid": "bp-lend-cta-lend-button",
+            onClick: (D) => e.clickPresetButton(n)
+          }, {
+            default: a(() => [
+              m(" $" + u(n), 1)
+            ]),
+            _: 2
+          }, 1032, ["class", "onClick"]))), 128)),
+          e.showFilteredDropdown ? (i(), r(v, {
             key: 1,
-            class: "tw-inline-flex tw-flex-1 tw-w-full"
+            id: `LoanAmountDropdown_${e.loanId}`,
+            modelValue: d.selectedDropdownOption,
+            "onUpdate:modelValue": [
+              s[4] || (s[4] = (n) => d.selectedDropdownOption = n),
+              e.trackLendAmountSelection
+            ],
+            class: h(["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"])
           }, {
-            default: u(() => s[8] || (s[8] = [
-              w(" Adding to basket ")
-            ])),
+            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))
+            ]),
             _: 1
-          })) : 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"
+          }, 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, {
+            key: 0,
+            id: `LoanAmountDropdown_${e.loanId}`,
+            modelValue: d.selectedOption,
+            "onUpdate:modelValue": [
+              s[5] || (s[5] = (n) => d.selectedOption = n),
+              e.trackLendAmountSelection
+            ],
+            class: "tw-min-w-12",
+            style: { "border-radius": "14px 0 0 14px" },
+            "aria-label": "Lend amount",
+            onClick: B(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))
+            ]),
+            _: 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
+          })
         }, [
-          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"
+          e.lendButtonVisibility && !e.isLessThan25 ? (i(), r(w, {
+            key: "lendButton",
+            class: h(["tw-inline-flex tw-flex-1", { "button-ellipsis tw-w-full": o.showPresetAmounts }]),
+            "data-testid": "bp-lend-cta-lend-button",
+            type: "submit"
+          }, {
+            default: a(() => [
+              m(u(e.ctaButtonText), 1)
+            ]),
+            _: 1
+          }, 8, ["class"])) : e.showLendAgain ? (i(), r(w, {
+            key: "lendAgainButton",
+            class: h(["lend-again", { "tw-w-full": o.showPresetAmounts }]),
+            "data-testid": "bp-lend-cta-lend-again-button",
+            type: "submit"
           }, {
-            default: u(() => s[9] || (s[9] = [
-              w(" Adding to basket ")
-            ])),
+            default: a(() => [
+              m(u(o.primaryButtonText || "Lend") + " again ", 1)
+            ]),
             _: 1
-          })) : r("", !0)
-        ], 10, Q)
-      ])
-    ], 32)) : r("", !0)
+          }, 8, ["class"])) : c("", !0)
+        ], 2),
+        e.isLendAmountButton && !o.enableFiveDollarsNotes ? (i(), r(T, {
+          key: 3,
+          class: "tw-w-full",
+          "loan-id": e.loanId,
+          "show-now": !1,
+          "amount-left": e.amountForLendAmountButton,
+          "is-adding": o.isAdding,
+          onAddToBasket: e.addToBasket
+        }, null, 8, ["loan-id", "amount-left", "is-adding", "onAddToBasket"])) : c("", !0),
+        !o.isLoading && o.isAdding ? (i(), r(w, {
+          key: 4,
+          class: "tw-inline-flex tw-flex-1"
+        }, {
+          default: a(() => s[8] || (s[8] = [
+            m(" Adding to basket ")
+          ])),
+          _: 1
+        })) : c("", !0)
+      ], 10, U)
+    ], 32)) : c("", !0)
   ]);
 }
-const me = /* @__PURE__ */ O(M, [["render", ee], ["__scopeId", "data-v-ce2eaa1b"]]);
+const me = /* @__PURE__ */ V(R, [["render", ee], ["__scopeId", "data-v-d161d592"]]);
 export {
   ce as KV_LEND_CTA_FRAGMENT,
   we as KV_LEND_CTA_USER_FRAGMENT,

package/dist/vue/KvWwwHeader/KvHeaderDropdownLink.js

@@ -65,7 +65,7 @@ function x(e, o, n, r, i, s) {
   const a = c("KvMaterialIcon");
   return m(), f("a", {
     ref: n.refName,
-    class: l(["tw-no-underline hover:tw-no-underline tw-text-primary hover:tw-text-action tw-items-center tw-rounded tw-cursor-pointer", r.computedClass]),
+    class: l(["tw-py-1 tw-no-underline hover:tw-no-underline tw-text-primary hover:tw-text-action tw-items-center tw-cursor-pointer", r.computedClass]),
     href: n.href,
     onMouseover: o[0] || (o[0] = (...t) => r.handleMouseOver && r.handleMouseOver(...t))
   }, [

package/dist/vue/KvWwwHeader/KvHeaderLinkBar.css

@@ -1 +1 @@
-.header-link[data-v-e43175cd]{cursor:pointer;padding-top:1rem;padding-bottom:1rem;--tw-text-opacity: 1;color:rgba(var(--text-primary),var(--tw-text-opacity, 1));text-decoration-line:none}.header-link[data-v-e43175cd]:hover{--tw-text-opacity: 1;color:rgba(var(--text-action),var(--tw-text-opacity, 1));text-decoration-line:none}
+.header-link[data-v-80235e01]{cursor:pointer;padding-top:1rem;padding-bottom:1rem;--tw-text-opacity: 1;color:rgba(var(--text-primary),var(--tw-text-opacity, 1));text-decoration-line:none}.header-link[data-v-80235e01]:hover{--tw-text-opacity: 1;color:rgba(var(--text-action),var(--tw-text-opacity, 1));text-decoration-line:none}

package/dist/vue/KvWwwHeader/KvHeaderLinkBar.js

@@ -1,4 +1,4 @@
-import { defineAsyncComponent as k, 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 d, normalizeClass as b, createVNode as U, createBlock as h, withCtx as T, createTextVNode as w, createElementVNode as D, createCommentVNode as M, toDisplayString as F } from "vue";
+import { defineAsyncComponent as k, ref as l, computed as P, onMounted as z, onUnmounted as W, resolveComponent as b, resolveDirective as j, openBlock as i, createElementBlock as c, withDirectives as d, normalizeClass as g, createVNode as U, createBlock as h, withCtx as T, createTextVNode as w, createElementVNode as N, createCommentVNode as M, 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";
@@ -8,7 +8,7 @@ import ee from "../KvUserAvatar.js";
 import { throttle as ne } from "../../utils/throttle.js";
 import "./KvHeaderLinkBar.css";
 import te from "../../_virtual/_plugin-vue_export-helper.js";
-const oe = k(() => import("./KvHeaderMobileMenu.js")), O = k(() => import("./KvHeaderMyKivaMenu.js")), re = k(() => import("./LendMenu/KvLendMenu.js")), le = k(() => import("./KvHeaderTakeActionMenu.js")), ie = k(() => import("./KvHeaderAboutMenu.js")), C = 118, y = "avatar-menu", ae = {
+const oe = k(() => import("./KvHeaderMobileMenu.js")), D = k(() => import("./KvHeaderMyKivaMenu.js")), re = k(() => import("./LendMenu/KvLendMenu.js")), le = k(() => import("./KvHeaderTakeActionMenu.js")), ie = k(() => import("./KvHeaderAboutMenu.js")), C = 118, p = "avatar-menu", ae = {
   components: {
     KvMaterialIcon: Y,
     KvIconBag: Z,
@@ -57,35 +57,37 @@ const oe = k(() => import("./KvHeaderMobileMenu.js")), O = k(() => import("./KvH
     "item-hover"
   ],
   setup(u, { emit: e }) {
-    const t = l(null), n = l(null), x = l(null), K = l(null), p = l(null), f = l(null), A = l(null), H = l(null), a = l(null), o = l(null), m = (r, v, s = null) => {
-      e("item-hover", r, v, s);
-    }, _ = (r, v, s = null) => {
-      u.isMobile || m(r, v, s);
+    const t = l(null), n = l(null), x = l(null), K = l(null), y = l(null), f = l(null), A = l(null), H = l(null), a = l(null), o = l(null), m = (r, s, v = null) => {
+      e("item-hover", r, s, v);
+    }, _ = (r, s, v = null) => {
+      u.isMobile || m(r, s, v);
     }, 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();
+      var B, O;
+      const r = (O = (B = t.value) == null ? void 0 : B.userAvatar) == null ? void 0 : O.getBoundingClientRect();
       if (!r) return null;
-      const s = r.left + r.width / 2 - C / 2;
+      const v = r.left + r.width / 2 - C / 2;
       return {
-        ...s + C > window.outerWidth ? { right: 0 } : { left: u.isMobile ? 0 : `${s}px` },
+        ...v + C > window.outerWidth ? { right: 0 } : { left: u.isMobile ? 0 : `${v}px` },
+        marginTop: "-2px",
+        // Avoid closing avatar menu on header edge
         borderRadius: u.isMobile ? "auto" : "0px 0px 8px 8px",
         width: u.isMobile ? "100%" : "auto"
       };
     }, I = () => {
-      o.value = y, m(t.value, O, E());
-    }, V = (r, v) => {
-      !o.value || o.value !== r ? (o.value = r, r === y ? I() : m(r, v)) : (o.value = null, m());
+      o.value = p, m(t.value, D, E());
+    }, V = (r, s) => {
+      !o.value || o.value !== r ? (o.value = r, r === p ? I() : m(r, s)) : (o.value = null, m());
     }, L = ne(() => {
-      o.value === y && I();
+      o.value === p && I();
     }, 50), R = P(() => u.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);
     }), {
-      AVATAR_MENU_ID: y,
+      AVATAR_MENU_ID: p,
       openMenuId: o,
       numeral: X,
       mdiAccountCircle: q,
@@ -97,7 +99,7 @@ const oe = k(() => import("./KvHeaderMobileMenu.js")), O = k(() => import("./KvH
       lendButton: n,
       aboutUsLink: x,
       partnerWithUsLink: K,
-      borrowLink: p,
+      borrowLink: y,
       supportKivaLink: f,
       basketLink: A,
       signInLink: H,
@@ -108,7 +110,7 @@ const oe = k(() => import("./KvHeaderMobileMenu.js")), O = k(() => import("./KvH
       handleMouseOut: S,
       handleAvatarMenuPosition: I,
       KvHeaderMobileMenu: oe,
-      KvHeaderMyKivaMenu: O,
+      KvHeaderMyKivaMenu: D,
       KvLendMenu: re,
       KvHeaderTakeActionMenu: le,
       KvHeaderAboutMenu: ie
@@ -117,31 +119,30 @@ const oe = k(() => import("./KvHeaderMobileMenu.js")), O = k(() => import("./KvH
 }, de = { class: "tw-h-full tw-flex tw-items-center tw-gap-2.5" }, ue = ["href"], me = {
   key: 0,
   class: "tw-bg-eco-green-1 tw-py-0.5 tw-px-1 tw-text-eco-green-4"
-}, ve = ["href"];
-function se(u, e, t, n, x, K) {
-  const p = g("kv-material-icon"), f = g("KvHeaderDropdownLink"), A = g("kv-icon-bag"), H = g("KvUserAvatar"), a = j("kv-track-event");
+}, se = ["href"];
+function ve(u, e, t, n, x, K) {
+  const y = b("kv-material-icon"), f = b("KvHeaderDropdownLink"), A = b("kv-icon-bag"), H = b("KvUserAvatar"), a = j("kv-track-event");
   return i(), c("div", de, [
     d((i(), c("button", {
       ref: "menuButton",
-      class: b(["header-link tw-inline-flex lg:tw-hidden", {
+      class: g(["header-link tw-inline-flex lg:tw-hidden", {
         "tw-text-tertiary": t.openMenuItem && t.openMenuItem !== n.KvHeaderMobileMenu
       }]),
       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))
     }, [
-      U(p, { icon: n.mdiMenu }, null, 8, ["icon"])
+      U(y, { icon: n.mdiMenu }, null, 8, ["icon"])
     ], 34)), [
       [a, t.openMenuItem === n.KvHeaderMobileMenu ? ["TopNav", "click-Hamburger-menu"] : null]
     ]),
     d((i(), h(f, {
-      class: "tw-border tw-rounded-md tw-px-1.5 tw-py-1",
       "ref-name": "lendButton",
       href: n.lendUrl,
       "menu-component": n.KvLendMenu,
       "open-menu-item": t.openMenuItem,
       "dropdown-icon": n.mdiChevronDown,
-      "base-class": "tw-inline-flex",
+      "base-class": "tw-inline-flex tw-border tw-rounded-md tw-px-1.5 tw-py-1",
       onOnHover: n.handleOnHover,
       onMouseout: e[3] || (e[3] = (o) => n.handleMouseOut("lendButton")),
       onTouchstart: e[4] || (e[4] = (o) => n.handleTouchStart("lendButton", n.KvLendMenu))
@@ -160,8 +161,8 @@ function se(u, e, t, n, x, K) {
       "open-menu-item": t.openMenuItem,
       "dropdown-icon": n.mdiChevronDown,
       "send-link-position": "",
-      onOnHover: n.onHover,
-      onMouseout: e[5] || (e[5] = (o) => n.onHover())
+      onOnHover: n.handleOnHover,
+      onMouseout: e[5] || (e[5] = (o) => n.handleMouseOut("takeActionButton"))
     }, {
       default: T(() => e[11] || (e[11] = [
         w(" Take action ")
@@ -172,13 +173,14 @@ function se(u, e, t, n, x, K) {
     ]),
     d((i(), h(f, {
       "ref-name": "aboutUsLink",
+      "test-id": "header-about",
       "base-class": "tw-hidden lg:tw-inline-flex tw-py-2",
       "menu-component": n.KvHeaderAboutMenu,
       "open-menu-item": t.openMenuItem,
       "dropdown-icon": n.mdiChevronDown,
       "send-link-position": "",
-      onOnHover: n.onHover,
-      onMouseout: e[6] || (e[6] = (o) => n.onHover())
+      onOnHover: n.handleOnHover,
+      onMouseout: e[6] || (e[6] = (o) => n.handleMouseOut("aboutUsLink"))
     }, {
       default: T(() => e[12] || (e[12] = [
         w(" About ")
@@ -187,12 +189,12 @@ function se(u, e, t, n, x, K) {
     }, 8, ["menu-component", "open-menu-item", "dropdown-icon", "onOnHover"])), [
       [a, ["TopNav", "click-About"]]
     ]),
-    e[15] || (e[15] = D("div", { class: "tw-flex-1 tw-h-full" }, null, -1)),
+    e[15] || (e[15] = N("div", { class: "tw-flex-1 tw-h-full" }, null, -1)),
     t.loggedIn ? d((i(), c("a", {
       key: 0,
       ref: "dashboardLink",
       href: t.myDashboardUrl,
-      class: b(["header-link tw-hidden lg:tw-block", { "tw-text-tertiary": !!t.openMenuItem }])
+      class: g(["header-link tw-hidden lg:tw-block", { "tw-text-tertiary": !!t.openMenuItem }])
     }, e[13] || (e[13] = [
       w(" My dashboard ")
     ]), 10, ue)), [
@@ -202,7 +204,8 @@ function se(u, e, t, n, x, K) {
       key: 1,
       ref: "basketLink",
       href: "/basket",
-      class: b(["header-link tw-relative", { "tw-text-tertiary": !!t.openMenuItem }])
+      class: g(["header-link tw-relative", { "tw-text-tertiary": !!t.openMenuItem }]),
+      "test-id": "header-basket"
     }, [
       U(A, {
         class: "tw-w-3 tw-h-3 tw-pointer-events-none",
@@ -211,7 +214,7 @@ function se(u, e, t, n, x, K) {
     ], 2)), [
       [a, ["TopNav", "click-Basket"]]
     ]) : M("", !0),
-    D("div", {
+    N("div", {
       class: "tw-cursor-pointer tw-flex tw-items-center tw-gap-1 tw-py-1.5",
       onMouseover: e[7] || (e[7] = (...o) => n.handleAvatarMenuPosition && n.handleAvatarMenuPosition(...o)),
       onMouseout: e[8] || (e[8] = (o) => n.handleMouseOut(n.AVATAR_MENU_ID)),
@@ -230,15 +233,15 @@ function se(u, e, t, n, x, K) {
       key: 2,
       ref: "signInLink",
       href: t.loginUrl,
-      class: b(["header-link", { "tw-text-tertiary": !!t.openMenuItem }])
+      class: g(["header-link", { "tw-text-tertiary": !!t.openMenuItem }])
     }, e[14] || (e[14] = [
       w(" Sign in ")
-    ]), 10, ve)), [
+    ]), 10, se)), [
       [a, ["TopNav", "click-Sign-in"]]
     ])
   ]);
 }
-const He = /* @__PURE__ */ te(ae, [["render", se], ["__scopeId", "data-v-e43175cd"]]);
+const He = /* @__PURE__ */ te(ae, [["render", ve], ["__scopeId", "data-v-80235e01"]]);
 export {
   He as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "6.50.1",
+  "version": "6.50.3",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -113,5 +113,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "3340c201bdd77ab6488052728a1d131eecb0401e"
+  "gitHead": "0b369f28a444966749668a69bfb2f1aab97a4824"
 }