@kiva/kv-components 6.50.2 → 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/package.json

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