@kiva/kv-components 4.8.5 → 5.0.0

package/dist/vue/KvGrid.js

@@ -0,0 +1,26 @@
+import { openBlock as o, createBlock as r, resolveDynamicComponent as a, withCtx as s, renderSlot as n } from "vue";
+import p from "../_virtual/_plugin-vue_export-helper.js";
+const c = {
+  props: {
+    /**
+     * Element name of the grid container element.
+     * e.g., <kv-grid as="ul"><li>list item...  renders <ul><li>list item...
+     * */
+    as: {
+      type: String,
+      default: "div"
+    }
+  }
+};
+function d(t, i, e, l, f, m) {
+  return o(), r(a(e.as), { class: "tw-grid tw-gap-2 md:tw-gap-3 lg:tw-gap-3.5" }, {
+    default: s(() => [
+      n(t.$slots, "default")
+    ]),
+    _: 3
+  });
+}
+const g = /* @__PURE__ */ p(c, [["render", d]]);
+export {
+  g as default
+};

package/dist/vue/KvImpactDashboardHeader.css

@@ -0,0 +1 @@
+.header__full[data-v-c6859f81]{grid-template-areas:"logo right";grid-template-columns:1fr auto}.header__full__logo[data-v-c6859f81]{grid-area:logo}.header__full__right[data-v-c6859f81]{grid-area:right}

package/dist/vue/KvImpactDashboardHeader.js

@@ -0,0 +1,31 @@
+import { openBlock as o, createElementBlock as s, createElementVNode as t, renderSlot as c } from "vue";
+/* empty css                         */
+import l from "../_virtual/_plugin-vue_export-helper.js";
+const d = {}, a = { class: "tw-bg-primary" }, h = {
+  class: "header__full tw-h-9 tw-grid xl:tw-gap-x-4 tw-items-center tw-mx-auto tw-px-2.5 md:tw-px-4 lg:tw-px-8",
+  style: { "max-width": "1200px" }
+}, _ = { class: "header__full__right" };
+function n(r, e) {
+  return o(), s("nav", a, [
+    t("div", h, [
+      e[0] || (e[0] = t("div", { class: "header__full__logo tw-w-6 tw-text-brand" }, [
+        t("svg", {
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 57 23"
+        }, [
+          t("path", {
+            d: "M4.695.391H0v22.141h4.695V.391zm12.899 22.141h4.695V7.011h-4.695v15.521zm12.159 0h5.413l5.413-15.521h-4.662s-2.544 8.445-3.293 11.119h-.066c-.75-2.674-3.326-11.119-3.326-11.119h-4.956l5.477 15.521zm-23.537-8.31c7.37 0 9.092-6.158 9.092-7.21h-.637c-7.372 0-9.094 6.157-9.094 7.21h.639zm-.639.969c0 1.117 1.276 7.403 9.222 7.403h.638c0-1.119-1.277-7.403-9.221-7.403h-.639zM22.746 2.739C22.746 1.272 21.671 0 19.941 0c-1.727 0-2.804 1.272-2.804 2.739 0 1.468 1.077 2.739 2.804 2.739 1.73 0 2.805-1.271 2.805-2.739M57 7.011h-4.532V9.13c-.783-1.631-2.608-2.543-4.729-2.543-3.848 0-6.88 3.129-6.88 8.184 0 5.087 2.935 8.185 6.652 8.185 2.608 0 4.173-1.272 4.956-2.675v2.25H57V7.011zm-4.663 8.151c0 2.871-1.76 4.208-3.522 4.208-1.924 0-3.163-1.956-3.163-4.598 0-2.608 1.305-4.598 3.326-4.598 1.663 0 3.359 1.37 3.359 4.206v.782z",
+            fill: "currentColor"
+          })
+        ])
+      ], -1)),
+      t("div", _, [
+        c(r.$slots, "default", {}, void 0, !0)
+      ])
+    ])
+  ]);
+}
+const p = /* @__PURE__ */ l(d, [["render", n], ["__scopeId", "data-v-c6859f81"]]);
+export {
+  p as default
+};

package/dist/vue/KvInlineActivityCard.css

@@ -0,0 +1 @@
+.activity-avatar[data-v-9e04208d],.activity-avatar[data-v-9e04208d] img,.activity-avatar[data-v-9e04208d] div{height:2rem;width:2rem}

package/dist/vue/KvInlineActivityCard.js

@@ -0,0 +1,53 @@
+import { toRefs as c, computed as l, resolveComponent as m, openBlock as p, createElementBlock as i, createVNode as _, createElementVNode as d, toDisplayString as v, createTextVNode as u } from "vue";
+import w from "./KvUserAvatar.js";
+/* empty css                      */
+import f from "../_virtual/_plugin-vue_export-helper.js";
+const g = {
+  name: "KvInlineActivityCard",
+  components: {
+    KvUserAvatar: w
+  },
+  props: {
+    /**
+           * Activity data object
+           */
+    activity: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(o) {
+    const {
+      activity: e
+    } = c(o), s = l(() => {
+      var t, r;
+      return ((r = (t = e == null ? void 0 : e.value) == null ? void 0 : t.lender) == null ? void 0 : r.name) ?? "";
+    });
+    return {
+      lenderImageUrl: l(() => {
+        var t, r, a;
+        return ((a = (r = (t = e == null ? void 0 : e.value) == null ? void 0 : t.lender) == null ? void 0 : r.image) == null ? void 0 : a.url) ?? "";
+      }),
+      lenderName: s
+    };
+  }
+}, x = { class: "tw-flex tw-items-center tw-gap-1 tw-py-0.5 tw-px-1 tw-shadow-lg tw-rounded-sm tw-bg-white" }, h = { class: "tw-text-base tw-whitespace-nowrap" }, I = { class: "data-hj-suppress" };
+function N(o, e, s, n, t, r) {
+  const a = m("KvUserAvatar");
+  return p(), i("div", x, [
+    _(a, {
+      "lender-image-url": n.lenderImageUrl,
+      "lender-name": n.lenderName,
+      "is-small": "",
+      class: "activity-avatar"
+    }, null, 8, ["lender-image-url", "lender-name"]),
+    d("p", h, [
+      d("span", I, v(n.lenderName), 1),
+      e[0] || (e[0] = u(" contributed "))
+    ])
+  ]);
+}
+const y = /* @__PURE__ */ f(g, [["render", N], ["__scopeId", "data-v-9e04208d"]]);
+export {
+  y as default
+};

package/dist/vue/KvInlineActivityFeed.css

@@ -0,0 +1 @@
+.hide-scrollbar[data-v-98fb814a]{-ms-overflow-style:none;scrollbar-width:none}.hide-scrollbar[data-v-98fb814a]::-webkit-scrollbar{display:none}

package/dist/vue/KvInlineActivityFeed.js

@@ -0,0 +1,30 @@
+import c from "./KvInlineActivityCard.js";
+import { resolveComponent as a, openBlock as t, createElementBlock as e, Fragment as l, renderList as s, createBlock as p } from "vue";
+/* empty css                      */
+import v from "../_virtual/_plugin-vue_export-helper.js";
+const d = {
+  name: "KvInlineActivityFeed",
+  components: { KvInlineActivityCard: c },
+  props: {
+    /**
+           * Activities data array
+           */
+    activities: {
+      type: Array,
+      default: () => []
+    }
+  }
+}, m = { class: "tw-flex tw-gap-x-0.5 tw-overflow-x-auto tw-py-2 tw-px-1 hide-scrollbar" };
+function _(f, y, i, u, x, w) {
+  const n = a("KvInlineActivityCard");
+  return t(), e("div", m, [
+    (t(!0), e(l, null, s(i.activities, (o, r) => (t(), p(n, {
+      key: r,
+      activity: o
+    }, null, 8, ["activity"]))), 128))
+  ]);
+}
+const C = /* @__PURE__ */ v(d, [["render", _], ["__scopeId", "data-v-98fb814a"]]);
+export {
+  C as default
+};

package/dist/vue/KvIntroductionLoanCard.css

@@ -0,0 +1 @@
+.loan-callouts[data-v-f5ebb270] span{background-color:transparent!important;--tw-text-opacity: 1;color:rgba(var(--text-action),var(--tw-text-opacity, 1))}.loan-card-use[data-v-f5ebb270]:hover,.loan-card-use[data-v-f5ebb270]:focus{--tw-text-opacity: 1;color:rgba(var(--text-primary),var(--tw-text-opacity, 1))}.loan-card-active-hover:hover .loan-card-use[data-v-f5ebb270],.loan-card-active-hover:hover .loan-card-name[data-v-f5ebb270]{text-decoration-line:underline}.loan-card-progress[data-v-f5ebb270],.loan-card-progress[data-v-f5ebb270]:hover,.loan-card-progress[data-v-f5ebb270]:focus{text-decoration-line:none}.loan-card-name[data-v-f5ebb270]{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;cursor:pointer;overflow:hidden;text-overflow:ellipsis;padding-left:1.5rem;padding-right:1.5rem;padding-top:.5rem}.loan-bookmark[data-v-f5ebb270] button{border-top-left-radius:0!important;border-top-right-radius:0!important}

package/dist/vue/KvIntroductionLoanCard.js

@@ -0,0 +1,387 @@
+import D from "numeral";
+import { loanCardComputedProperties as W, loanCardMethods as I } from "../utils/loanCard.js";
+import R from "./KvLoanBookmark.js";
+import V from "./KvLoanUse.js";
+import j from "./KvBorrowerImage.js";
+import T from "./KvLoanProgressGroup.js";
+import U from "./KvLoanCallouts.js";
+import q from "./KvLoanTag.js";
+import E from "./KvMaterialIcon.js";
+import H from "./KvLoadingPlaceholder.js";
+import O from "./KvFlag.js";
+import { resolveComponent as m, openBlock as t, createElementBlock as d, normalizeClass as L, normalizeStyle as G, createElementVNode as c, createBlock as a, resolveDynamicComponent as f, withCtx as h, createVNode as s, Suspense as J, createTextVNode as Q, toDisplayString as P, createCommentVNode as u, Fragment as X, renderList as Y } from "vue";
+/* empty css                        */
+import Z from "../_virtual/_plugin-vue_export-helper.js";
+const $ = {
+  name: "KvIntroductionLoanCard",
+  components: {
+    KvBorrowerImage: j,
+    KvLoadingPlaceholder: H,
+    KvLoanUse: V,
+    KvLoanProgressGroup: T,
+    KvMaterialIcon: E,
+    KvLoanTag: q,
+    KvLoanCallouts: U,
+    KvFlag: O,
+    KvLoanBookmark: R
+  },
+  props: {
+    loanId: {
+      type: Number,
+      default: void 0
+    },
+    loan: {
+      type: Object,
+      default: null
+    },
+    customLoanDetails: {
+      type: Boolean,
+      default: !1
+    },
+    categoryPageName: {
+      type: String,
+      default: ""
+    },
+    customCallouts: {
+      type: Array,
+      default: () => []
+    },
+    kvTrackFunction: {
+      type: Function,
+      required: !0
+    },
+    photoPath: {
+      type: String,
+      required: !0
+    },
+    errorMsg: {
+      type: String,
+      default: ""
+    },
+    externalLinks: {
+      type: Boolean,
+      default: !1
+    },
+    route: {
+      type: Object,
+      default: void 0
+    },
+    useFullWidth: {
+      type: Boolean,
+      default: !1
+    },
+    isVisitor: {
+      type: Boolean,
+      default: !0
+    },
+    isBookmarked: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(n, { emit: o }) {
+    const {
+      allDataLoaded: i,
+      borrowerName: e,
+      city: C,
+      countryName: w,
+      countryCode: l,
+      distributionModel: g,
+      formattedLocation: y,
+      fundraisingPercent: k,
+      hasProgressData: b,
+      imageHash: v,
+      isLoading: _,
+      loanAmount: p,
+      loanBorrowerCount: r,
+      loanCallouts: x,
+      loanStatus: M,
+      loanUse: B,
+      mdiMapMarker: N,
+      readMorePath: A,
+      state: F,
+      tag: K,
+      unreservedAmount: S
+    } = W(n, !0), {
+      clickReadMore: z
+    } = I(n, o);
+    return {
+      allDataLoaded: i,
+      borrowerName: e,
+      city: C,
+      countryName: w,
+      countryCode: l,
+      distributionModel: g,
+      formattedLocation: y,
+      fundraisingPercent: k,
+      hasProgressData: b,
+      imageHash: v,
+      isLoading: _,
+      loanAmount: p,
+      loanBorrowerCount: r,
+      loanCallouts: x,
+      loanStatus: M,
+      loanUse: B,
+      mdiMapMarker: N,
+      readMorePath: A,
+      state: F,
+      tag: K,
+      unreservedAmount: S,
+      clickReadMore: z
+    };
+  },
+  computed: {
+    cardWidth() {
+      return this.useFullWidth ? "100%" : "20.5rem";
+    },
+    imageAspectRatio() {
+      return 5 / 8;
+    },
+    imageDefaultWidth() {
+      return 480;
+    },
+    imageSizes() {
+      return [
+        { width: this.imageDefaultWidth, viewSize: 375 }
+      ];
+    },
+    lendersNumber() {
+      var n, o;
+      return ((o = (n = this.loan) == null ? void 0 : n.lenders) == null ? void 0 : o.totalCount) ?? 0;
+    },
+    amountLent() {
+      var o, i;
+      const n = ((i = (o = this.loan) == null ? void 0 : o.loanFundraisingInfo) == null ? void 0 : i.fundedAmount) ?? 0;
+      return D(parseFloat(n)).format("$0,0");
+    },
+    isFunded() {
+      var n;
+      return ((n = this.loan) == null ? void 0 : n.status) === "funded" || parseFloat(this.unreservedAmount) === 0;
+    }
+  }
+}, ee = { class: "tw-grow" }, te = { class: "loan-card-active-hover" }, oe = {
+  key: 1,
+  style: { height: "11rem" },
+  class: "tw-relative tw-overflow-hidden"
+}, ae = { key: 0 }, re = {
+  class: "tw-absolute tw-bottom-1 tw-left-1 tw-text-primary tw-bg-white tw-rounded tw-p-1 tw-mb-0 tw-mr-2 tw-text-h4 tw-inline-flex tw-items-center !tw-capitalize",
+  style: { padding: "2px 6px" }
+}, ne = {
+  key: 3,
+  class: "tw-flex tw-justify-center tw-gap-2"
+}, le = {
+  key: 0,
+  class: "tw-w-full",
+  style: { height: "5.5rem" }
+}, ie = { key: 1 }, de = { class: "tw-px-2" }, se = {
+  key: 0,
+  class: "tw-w-full tw-pr-1"
+}, me = { class: "tw-flex tw-justify-between" }, ce = {
+  key: 2,
+  class: "tw-bg-eco-green-1 tw-text-action tw-text-center tw-py-1.5",
+  style: { "font-weight": "bold", "font-size": "13px", "border-radius": "8px" }
+};
+function ue(n, o, i, e, C, w) {
+  const l = m("kv-loading-placeholder"), g = m("kv-borrower-image"), y = m("kv-flag"), k = m("kv-loan-bookmark"), b = m("kv-loan-callouts"), v = m("kv-loan-use"), _ = m("kv-loan-progress-group"), p = m("kv-loan-tag");
+  return t(), d("div", {
+    class: L(["tw-flex tw-flex-col tw-bg-white tw-rounded tw-w-full tw-pb-2", { "tw-pointer-events-none": e.isLoading }]),
+    "data-testid": "loan-card",
+    style: G([{ "box-shadow": "0px 4px 8px 0px rgba(0, 0, 0, 0.38)" }, { minWidth: "230px", maxWidth: w.cardWidth }])
+  }, [
+    c("div", ee, [
+      c("div", te, [
+        e.isLoading ? (t(), a(l, {
+          key: 0,
+          class: "tw-w-full tw-rounded-t",
+          style: { height: "11rem" }
+        })) : (t(), d("div", oe, [
+          (t(), a(f(e.tag), {
+            to: e.readMorePath,
+            href: e.readMorePath,
+            class: "tw-flex",
+            "aria-label": "Borrower image",
+            onClick: o[0] || (o[0] = (r) => e.clickReadMore("Photo", r))
+          }, {
+            default: h(() => [
+              s(g, {
+                class: "tw-relative tw-w-full tw-bg-black tw-rounded-t borrower-image",
+                alt: `Photo of ${e.borrowerName}`,
+                "aspect-ratio": w.imageAspectRatio,
+                "default-image": { width: w.imageDefaultWidth },
+                hash: e.imageHash,
+                images: w.imageSizes,
+                "photo-path": i.photoPath
+              }, null, 8, ["alt", "aspect-ratio", "default-image", "hash", "images", "photo-path"]),
+              e.countryName ? (t(), d("div", ae, [
+                c("p", re, [
+                  (t(), a(J, null, {
+                    default: h(() => [
+                      s(y, {
+                        class: "tw-ml-0.5 tw-mr-1",
+                        country: e.countryCode,
+                        "width-override": "16px",
+                        "hide-border": ""
+                      }, null, 8, ["country"])
+                    ]),
+                    _: 1
+                  })),
+                  Q(" " + P(e.formattedLocation), 1)
+                ])
+              ])) : u("", !0)
+            ]),
+            _: 1
+          }, 8, ["to", "href"])),
+          i.isVisitor ? u("", !0) : (t(), a(k, {
+            key: 0,
+            "loan-id": i.loanId,
+            "is-bookmarked": i.isBookmarked,
+            class: "loan-bookmark tw-absolute tw-right-1.5 tw-top-0",
+            "data-testid": "loan-card-bookmark",
+            onToggleBookmark: o[1] || (o[1] = (r) => n.$emit("toggle-bookmark"))
+          }, null, 8, ["loan-id", "is-bookmarked"]))
+        ])),
+        e.isLoading || typeof e.loanCallouts > "u" ? (t(), a(l, {
+          key: 2,
+          class: "tw-mt-1 tw-mx-auto",
+          style: { width: "60%", height: "1.75rem", "border-radius": "500rem" }
+        })) : u("", !0),
+        (t(), a(f(e.tag), {
+          to: e.readMorePath,
+          href: e.readMorePath,
+          "aria-label": "Borrower name",
+          class: "!tw-text-primary tw-no-underline",
+          onClick: o[2] || (o[2] = (r) => e.clickReadMore("Name", r))
+        }, {
+          default: h(() => [
+            c("h3", {
+              class: L(["loan-card-name", { "tw-text-center": e.borrowerName.length < 20 }]),
+              style: { "font-size": "28px" }
+            }, P(e.borrowerName), 3)
+          ]),
+          _: 1
+        }, 8, ["to", "href"])),
+        e.isLoading ? (t(), d("div", ne, [
+          e.isLoading || typeof e.loanCallouts > "u" ? (t(), a(l, {
+            key: 0,
+            class: "tw-mt-0.5 tw-mb-1",
+            style: { width: "20%", height: "1.65rem", "border-radius": "500rem" }
+          })) : u("", !0),
+          e.isLoading || typeof e.loanCallouts > "u" ? (t(), a(l, {
+            key: 1,
+            class: "tw-mt-0.5 tw-mb-1",
+            style: { width: "20%", height: "1.65rem", "border-radius": "500rem" }
+          })) : u("", !0),
+          e.isLoading || typeof e.loanCallouts > "u" ? (t(), a(l, {
+            key: 2,
+            class: "tw-mt-0.5 tw-mb-1",
+            style: { width: "20%", height: "1.65rem", "border-radius": "500rem" }
+          })) : u("", !0)
+        ])) : (t(), a(f(e.tag), {
+          key: 4,
+          to: e.readMorePath,
+          href: e.readMorePath,
+          class: "tw-flex tw-no-underline hover:tw-no-underline focus:tw-no-underline tw-justify-center",
+          "aria-label": "Loan tag",
+          onClick: o[3] || (o[3] = (r) => e.clickReadMore("Tag", r))
+        }, {
+          default: h(() => [
+            s(b, {
+              callouts: e.loanCallouts,
+              "add-bg-color": !1,
+              class: "loan-callouts"
+            }, null, 8, ["callouts"])
+          ]),
+          _: 1
+        }, 8, ["to", "href"])),
+        (t(), a(f(e.tag), {
+          to: e.readMorePath,
+          href: e.readMorePath,
+          class: "loan-card-use tw-text-primary tw-no-underline",
+          "aria-label": "Loan use",
+          onClick: o[4] || (o[4] = (r) => e.clickReadMore("Use", r))
+        }, {
+          default: h(() => [
+            c("div", {
+              class: L(["tw-pt-0.5 tw-px-2", { "tw-mb-1.5": !e.isLoading }])
+            }, [
+              e.isLoading ? (t(), d("div", le, [
+                (t(!0), d(X, null, Y([...Array(3)], (r, x) => (t(), d("div", {
+                  key: x,
+                  class: "tw-h-2 tw-mb-1"
+                }, [
+                  s(l)
+                ]))), 128))
+              ])) : (t(), d("div", ie, [
+                s(v, {
+                  use: e.loanUse,
+                  "loan-amount": e.loanAmount,
+                  status: e.loanStatus,
+                  "borrower-count": e.loanBorrowerCount,
+                  name: e.borrowerName,
+                  "distribution-model": e.distributionModel,
+                  "hide-loan-amount": "",
+                  class: "!tw-line-clamp-3"
+                }, null, 8, ["use", "loan-amount", "status", "borrower-count", "name", "distribution-model"])
+              ]))
+            ], 2)
+          ]),
+          _: 1
+        }, 8, ["to", "href"]))
+      ])
+    ]),
+    c("div", de, [
+      e.hasProgressData ? u("", !0) : (t(), d("div", se, [
+        c("div", me, [
+          s(l, {
+            class: "tw-mb-0.5",
+            style: { width: "20%", height: "1.3rem" }
+          }),
+          s(l, {
+            class: "tw-mb-0.5",
+            style: { width: "20%", height: "1.3rem" }
+          })
+        ]),
+        s(l, {
+          class: "tw-rounded",
+          style: { width: "100%", height: "0.5rem" }
+        })
+      ])),
+      c("div", null, [
+        e.unreservedAmount > 0 ? (t(), a(f(e.tag), {
+          key: 0,
+          to: e.readMorePath,
+          href: e.readMorePath,
+          class: "loan-card-progress tw-mt-1",
+          "aria-label": "Loan progress",
+          onClick: o[5] || (o[5] = (r) => e.clickReadMore("Progress", r))
+        }, {
+          default: h(() => [
+            s(_, {
+              id: "loanProgress",
+              "money-left": `${e.unreservedAmount}`,
+              "amount-goal": `${e.loanAmount}`,
+              "progress-percent": e.fundraisingPercent,
+              class: "tw-text-secondary"
+            }, null, 8, ["money-left", "amount-goal", "progress-percent"])
+          ]),
+          _: 1
+        }, 8, ["to", "href"])) : u("", !0)
+      ]),
+      e.isLoading ? (t(), a(l, {
+        key: 1,
+        class: "tw-rounded tw-mx-auto tw-mt-2",
+        style: { width: "9rem", height: "1rem" }
+      })) : w.isFunded ? (t(), d("div", ce, " 🎉 Fully funded! ")) : (t(), a(p, {
+        key: 3,
+        loan: i.loan,
+        "use-expanded-styles": !0,
+        style: { "font-size": "15px" },
+        class: "tw-text-center tw-pt-2"
+      }, null, 8, ["loan"]))
+    ])
+  ], 6);
+}
+const Me = /* @__PURE__ */ Z($, [["render", ue], ["__scopeId", "data-v-f5ebb270"]]);
+export {
+  Me as default
+};

package/dist/vue/KvLendAmountButton.js

@@ -0,0 +1,60 @@
+import n from "./KvButton.js";
+import { resolveComponent as a, openBlock as u, createBlock as l, withCtx as r, createTextVNode as s, toDisplayString as d } from "vue";
+import m from "../_virtual/_plugin-vue_export-helper.js";
+const i = {
+  name: "KvLendAmountButton",
+  components: {
+    KvButton: n
+  },
+  props: {
+    loanId: {
+      type: Number,
+      default: null
+    },
+    showNow: {
+      type: Boolean,
+      default: !1
+    },
+    amountLeft: {
+      type: [Number, String],
+      default: 20
+    },
+    completeLoan: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  computed: {
+    amountValue() {
+      return parseFloat(this.amountLeft).toFixed();
+    },
+    buttonText() {
+      let t = "";
+      return this.completeLoan ? t = `Complete loan for $${this.amountValue}` : (t = `Lend $${this.amountValue}`, this.showNow && (t += " now")), t;
+    }
+  },
+  methods: {
+    addToBasket(t) {
+      this.$kvTrackEvent(
+        "Lending",
+        "Add to basket (Partial Share)",
+        "lend-button-click",
+        this.loanId,
+        this.amountLeft
+      ), this.$emit("add-to-basket", t);
+    }
+  }
+};
+function c(t, p, f, h, k, e) {
+  const o = a("kv-button");
+  return u(), l(o, { onClick: e.addToBasket }, {
+    default: r(() => [
+      s(d(e.buttonText), 1)
+    ]),
+    _: 1
+  }, 8, ["onClick"]);
+}
+const L = /* @__PURE__ */ m(i, [["render", c]]);
+export {
+  L as default
+};

package/dist/vue/KvLendCta.css

@@ -0,0 +1 @@
+.amountDropdownWrapper[data-v-e8a71378] select{border-radius:14px 0 0 14px}.lend-again[data-v-e8a71378] span{padding-left:0;padding-right:0;padding-left:.5rem;padding-right:.5rem}.lendButtonWrapper[data-v-e8a71378] span:first-child{border-radius:0 14px 14px 0}.filtered-dropdown[data-v-e8a71378] select{cursor:pointer;border-radius:.875rem;border-width:2px;font-weight:500}.unselected-dropdown[data-v-e8a71378] select{--tw-border-opacity: 1;border-color:rgb(158 158 158 / var(--tw-border-opacity, 1))}.selected-dropdown[data-v-e8a71378] select{--tw-border-opacity: 1;border-color:rgb(34 56 41 / var(--tw-border-opacity, 1))}.preset-option[data-v-e8a71378] 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-option[data-v-e8a71378] span.tw-w-full:first-child{--tw-border-opacity: 1;border-color:rgb(34 56 41 / var(--tw-border-opacity, 1))}