@kiva/kv-components 6.50.2 → 6.50.4

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/KvHeaderLinkBar.css

@@ -1 +1 @@
-.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}
+.header-link[data-v-a0d88ce7]{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-a0d88ce7]: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,19 +1,19 @@
-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";
-import Z from "../KvIconBag.js";
-import $ from "./KvHeaderDropdownLink.js";
-import ee from "../KvUserAvatar.js";
-import { throttle as ne } from "../../utils/throttle.js";
+import { defineAsyncComponent as M, ref as l, computed as P, onMounted as z, onUnmounted as W, resolveComponent as k, resolveDirective as j, openBlock as i, createElementBlock as c, withDirectives as d, normalizeClass as b, createVNode as U, createBlock as g, withCtx as T, createTextVNode as w, createElementVNode as N, createCommentVNode as h, vShow as F, toDisplayString as q } from "vue";
+import { mdiAccountCircle as G, mdiChevronDown as J, mdiMagnify as Q, mdiMenu as X } from "@mdi/js";
+import Y from "numeral";
+import Z from "../KvMaterialIcon.js";
+import $ from "../KvIconBag.js";
+import ee from "./KvHeaderDropdownLink.js";
+import ne from "../KvUserAvatar.js";
+import { throttle as te } from "../../utils/throttle.js";
 import "./KvHeaderLinkBar.css";
-import te from "../../_virtual/_plugin-vue_export-helper.js";
-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 = {
+import oe from "../../_virtual/_plugin-vue_export-helper.js";
+const re = M(() => import("./KvHeaderMobileMenu.js")), D = M(() => import("./KvHeaderMyKivaMenu.js")), le = M(() => import("./LendMenu/KvLendMenu.js")), ie = M(() => import("./KvHeaderTakeActionMenu.js")), ae = M(() => import("./KvHeaderAboutMenu.js")), C = 118, p = "avatar-menu", de = {
   components: {
-    KvMaterialIcon: Y,
-    KvIconBag: Z,
-    KvHeaderDropdownLink: $,
-    KvUserAvatar: ee
+    KvMaterialIcon: Z,
+    KvIconBag: $,
+    KvHeaderDropdownLink: ee,
+    KvUserAvatar: ne
   },
   props: {
     loggedIn: {
@@ -79,7 +79,7 @@ const oe = k(() => import("./KvHeaderMobileMenu.js")), D = k(() => import("./KvH
       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(() => {
+    }, L = te(() => {
       o.value === p && I();
     }, 50), R = P(() => u.isMobile ? void 0 : "/lend-by-category");
     return z(() => {
@@ -89,11 +89,11 @@ const oe = k(() => import("./KvHeaderMobileMenu.js")), D = k(() => import("./KvH
     }), {
       AVATAR_MENU_ID: p,
       openMenuId: o,
-      numeral: X,
-      mdiAccountCircle: q,
-      mdiChevronDown: G,
-      mdiMagnify: J,
-      mdiMenu: Q,
+      numeral: Y,
+      mdiAccountCircle: G,
+      mdiChevronDown: J,
+      mdiMagnify: Q,
+      mdiMenu: X,
       onHover: m,
       avatar: t,
       lendButton: n,
@@ -109,23 +109,23 @@ const oe = k(() => import("./KvHeaderMobileMenu.js")), D = k(() => import("./KvH
       handleTouchStart: V,
       handleMouseOut: S,
       handleAvatarMenuPosition: I,
-      KvHeaderMobileMenu: oe,
+      KvHeaderMobileMenu: re,
       KvHeaderMyKivaMenu: D,
-      KvLendMenu: re,
-      KvHeaderTakeActionMenu: le,
-      KvHeaderAboutMenu: ie
+      KvLendMenu: le,
+      KvHeaderTakeActionMenu: ie,
+      KvHeaderAboutMenu: ae
     };
   }
-}, de = { class: "tw-h-full tw-flex tw-items-center tw-gap-2.5" }, ue = ["href"], me = {
+}, ue = { class: "tw-h-full tw-flex tw-items-center tw-gap-2.5" }, me = ["href"], se = {
   key: 0,
   class: "tw-bg-eco-green-1 tw-py-0.5 tw-px-1 tw-text-eco-green-4"
-}, 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, [
+}, ve = ["href"];
+function ce(u, e, t, n, x, K) {
+  const y = k("kv-material-icon"), f = k("KvHeaderDropdownLink"), A = k("kv-icon-bag"), H = k("KvUserAvatar"), a = j("kv-track-event");
+  return i(), c("div", ue, [
     d((i(), c("button", {
       ref: "menuButton",
-      class: g(["header-link tw-inline-flex lg:tw-hidden", {
+      class: b(["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)),
@@ -136,7 +136,7 @@ function ve(u, e, t, n, x, K) {
     ], 34)), [
       [a, t.openMenuItem === n.KvHeaderMobileMenu ? ["TopNav", "click-Hamburger-menu"] : null]
     ]),
-    d((i(), h(f, {
+    d((i(), g(f, {
       "ref-name": "lendButton",
       href: n.lendUrl,
       "menu-component": n.KvLendMenu,
@@ -154,7 +154,7 @@ function ve(u, e, t, n, x, K) {
     }, 8, ["href", "menu-component", "open-menu-item", "dropdown-icon", "onOnHover"])), [
       [a, ["TopNav", "click-Lend"]]
     ]),
-    d((i(), h(f, {
+    d((i(), g(f, {
       "ref-name": "takeActionButton",
       "base-class": "tw-hidden lg:tw-inline-flex tw-py-2",
       "menu-component": n.KvHeaderTakeActionMenu,
@@ -171,9 +171,9 @@ function ve(u, e, t, n, x, K) {
     }, 8, ["menu-component", "open-menu-item", "dropdown-icon", "onOnHover"])), [
       [a, ["TopNav", "click-TakeAction"]]
     ]),
-    d((i(), h(f, {
+    d((i(), g(f, {
       "ref-name": "aboutUsLink",
-      "test-id": "header-about",
+      "data-testid": "header-about",
       "base-class": "tw-hidden lg:tw-inline-flex tw-py-2",
       "menu-component": n.KvHeaderAboutMenu,
       "open-menu-item": t.openMenuItem,
@@ -194,54 +194,54 @@ function ve(u, e, t, n, x, K) {
       key: 0,
       ref: "dashboardLink",
       href: t.myDashboardUrl,
-      class: g(["header-link tw-hidden lg:tw-block", { "tw-text-tertiary": !!t.openMenuItem }])
+      class: b(["header-link tw-hidden lg:tw-block", { "tw-text-tertiary": !!t.openMenuItem }])
     }, e[13] || (e[13] = [
       w(" My dashboard ")
-    ]), 10, ue)), [
+    ]), 10, me)), [
       [a, ["TopNav", "click-Dashboard"]]
-    ]) : M("", !0),
-    t.basketCount > 0 ? d((i(), c("a", {
-      key: 1,
+    ]) : h("", !0),
+    d((i(), c("a", {
       ref: "basketLink",
       href: "/basket",
-      class: g(["header-link tw-relative", { "tw-text-tertiary": !!t.openMenuItem }]),
-      "test-id": "header-basket"
+      class: b(["header-link tw-relative", { "tw-text-tertiary": !!t.openMenuItem }]),
+      "data-testid": "header-basket"
     }, [
       U(A, {
         class: "tw-w-3 tw-h-3 tw-pointer-events-none",
         count: t.basketCount
       }, null, 8, ["count"])
     ], 2)), [
+      [F, t.basketCount > 0],
       [a, ["TopNav", "click-Basket"]]
-    ]) : M("", !0),
+    ]),
     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)),
       onTouchstart: e[9] || (e[9] = (o) => n.handleTouchStart(n.AVATAR_MENU_ID))
     }, [
-      t.loggedIn ? (i(), c("span", me, F(n.numeral(t.balance).format("$0")), 1)) : M("", !0),
-      t.loggedIn ? (i(), h(H, {
+      t.loggedIn ? (i(), c("span", se, q(n.numeral(t.balance).format("$0")), 1)) : h("", !0),
+      t.loggedIn ? (i(), g(H, {
         key: 1,
         ref: "avatar",
         "lender-name": t.lenderName,
         "lender-image-url": t.lenderImageUrl,
         "is-small": ""
-      }, null, 8, ["lender-name", "lender-image-url"])) : M("", !0)
+      }, null, 8, ["lender-name", "lender-image-url"])) : h("", !0)
     ], 32),
-    t.loggedIn ? M("", !0) : d((i(), c("a", {
-      key: 2,
+    t.loggedIn ? h("", !0) : d((i(), c("a", {
+      key: 1,
       ref: "signInLink",
       href: t.loginUrl,
-      class: g(["header-link", { "tw-text-tertiary": !!t.openMenuItem }])
+      class: b(["header-link", { "tw-text-tertiary": !!t.openMenuItem }])
     }, e[14] || (e[14] = [
       w(" Sign in ")
-    ]), 10, se)), [
+    ]), 10, ve)), [
       [a, ["TopNav", "click-Sign-in"]]
     ])
   ]);
 }
-const He = /* @__PURE__ */ te(ae, [["render", ve], ["__scopeId", "data-v-80235e01"]]);
+const Ie = /* @__PURE__ */ oe(de, [["render", ce], ["__scopeId", "data-v-a0d88ce7"]]);
 export {
-  He as default
+  Ie as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "6.50.2",
+  "version": "6.50.4",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -113,5 +113,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "5f2b1403458069ec1143a4e8fd917c9f7cff2ac1"
+  "gitHead": "64df72dd120838ee9d06387587c5e130d66d4009"
 }