@kiva/kv-components 4.8.6 → 5.1.0

package/dist/vue/KvCarousel.js

@@ -0,0 +1,246 @@
+import { mdiArrowLeft as L, mdiArrowRight as B, mdiChevronLeft as U, mdiChevronRight as V } from "@mdi/js";
+import { carouselUtil as E } from "../utils/carousels.js";
+import K from "./KvMaterialIcon.js";
+import { resolveComponent as M, openBlock as n, createElementBlock as a, normalizeClass as w, createElementVNode as i, Fragment as f, renderList as b, normalizeStyle as N, renderSlot as O, createVNode as c, toDisplayString as y, createCommentVNode as g } from "vue";
+/* empty css            */
+import R from "../_virtual/_plugin-vue_export-helper.js";
+const W = {
+  components: {
+    KvMaterialIcon: K
+  },
+  props: {
+    /**
+     * Should multiple slides be visible at a time.
+     * If true, a width must be set for each individual
+     * carousel slide or slideMaxWidth must
+     * be used.
+     * */
+    multipleSlidesVisible: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Options for the embla carousel - // https://davidcetinkaya.github.io/embla-carousel/api#options
+     * */
+    emblaOptions: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    /**
+     * Options for the autoplay plugin - // https://www.embla-carousel.com/plugins/autoplay/#options
+     * */
+    autoplayOptions: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    /**
+     * Enable fade plugin - // https://www.embla-carousel.com/plugins/fade/
+     * */
+    fadeEnabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * The type of logic to implement when deciding how many slides
+     * to scroll when pressing the next/prev button
+     * `visible, auto`
+     * */
+    slidesToScroll: {
+      type: String,
+      default: "auto",
+      validator: (s) => ["visible", "auto"].indexOf(s) !== -1
+    },
+    /**
+     * CSS value and unit to set the max width on responsive slides.
+     * Slide will be responsive full width until the max width value
+     * is reached - example value: '32.5rem'
+     * */
+    slideMaxWidth: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Aside controls version of the carousel
+     * */
+    asideControls: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Dotted controls version of the carousel
+     * */
+    isDotted: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Enables carousel slides to have a circle effect
+     * */
+    inCircle: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [
+    "change",
+    "interact-carousel"
+  ],
+  setup(s, { emit: e, slots: l }) {
+    const {
+      componentSlotKeys: t,
+      currentIndex: m,
+      embla: u,
+      goToSlide: d,
+      handleUserInteraction: r,
+      isAriaHidden: o,
+      isAutoplaying: x,
+      nextIndex: h,
+      previousIndex: v,
+      reInit: C,
+      reInitVisible: I,
+      rootEl: k,
+      slideIndicatorCount: S,
+      slideIndicatorListLength: _,
+      slides: A,
+      toggleAutoPlay: j
+    } = E(s, { emit: e, slots: l });
+    return {
+      componentSlotKeys: t,
+      currentIndex: m,
+      embla: u,
+      goToSlide: d,
+      handleUserInteraction: r,
+      isAriaHidden: o,
+      isAutoplaying: x,
+      mdiArrowLeft: L,
+      mdiArrowRight: B,
+      mdiChevronLeft: U,
+      mdiChevronRight: V,
+      nextIndex: h,
+      previousIndex: v,
+      reInit: C,
+      reInitVisible: I,
+      rootEl: k,
+      slideIndicatorCount: S,
+      slideIndicatorListLength: _,
+      slides: A,
+      toggleAutoPlay: j
+    };
+  }
+}, D = ["aria-label", "aria-current", "aria-hidden", "tab-index"], H = ["disabled"], P = ["aria-label"], T = ["disabled"], z = {
+  key: 1,
+  class: "kv-carousel__controls tw-flex tw-justify-center tw-items-center tw-gap-1.5 tw-mt-4 tw-w-full"
+}, F = ["onClick"], p = {
+  class: "tw-hidden lg:tw-flex tw-absolute tw-h-full tw-top-0 tw-items-center",
+  style: { background: "linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%)", width: "8%" }
+}, q = ["disabled"], G = {
+  class: "tw-hidden lg:tw-flex tw-absolute tw-h-full tw-top-0 tw-right-0 tw-items-center tw-justify-end tw-w-16",
+  style: { background: "linear-gradient(270deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%)", width: "8%" }
+}, J = ["disabled"];
+function Q(s, e, l, t, m, u) {
+  const d = M("kv-material-icon");
+  return n(), a("section", {
+    ref: "rootEl",
+    class: w(["kv-carousel tw-overflow-hidden tw-w-full", { "lg:tw-relative": l.asideControls }]),
+    "aria-label": "carousel"
+  }, [
+    i("div", {
+      class: w(["tw-flex tw-gap-x-4", {
+        "tw-mx-auto aside-controls-content": l.asideControls,
+        "circle-carousel": l.inCircle
+      }])
+    }, [
+      (n(!0), a(f, null, b(t.componentSlotKeys, (r, o) => (n(), a("div", {
+        key: o,
+        class: w(["tw-flex-none tw-relative", { "tw-w-full": !l.multipleSlidesVisible || l.slideMaxWidth, "circle-slide": l.inCircle }]),
+        role: "group",
+        "aria-label": `slide ${o + 1} of ${t.componentSlotKeys.length}`,
+        "aria-current": t.currentIndex === o ? "true" : "false",
+        "aria-hidden": t.isAriaHidden(o) ? "true" : "false",
+        "tab-index": t.isAriaHidden(o) ? "-1" : !1,
+        style: N(l.slideMaxWidth ? `max-width:${l.slideMaxWidth}` : "")
+      }, [
+        O(s.$slots, r, {}, void 0, !0)
+      ], 14, D))), 128))
+    ], 2),
+    t.slideIndicatorCount > 1 && !l.isDotted ? (n(), a("div", {
+      key: 0,
+      class: w(["kv-carousel__controls tw-flex tw-justify-between md:tw-justify-center tw-items-center tw-mt-4 tw-w-full", { "lg:tw-hidden": l.asideControls }])
+    }, [
+      i("button", {
+        class: "tw-text-primary tw-rounded-full tw-border-2 tw-border-primary tw-h-4 tw-w-4 tw-flex tw-items-center tw-justify-center disabled:tw-opacity-low disabled:tw-cursor-default",
+        disabled: t.embla && !t.embla.canScrollPrev(),
+        onClick: e[0] || (e[0] = (r) => t.handleUserInteraction(t.previousIndex, "click-left-arrow"))
+      }, [
+        c(d, {
+          class: "tw-w-4",
+          icon: l.asideControls ? t.mdiArrowLeft : t.mdiChevronLeft
+        }, null, 8, ["icon"]),
+        e[4] || (e[4] = i("span", { class: "tw-sr-only" }, "Show previous slide", -1))
+      ], 8, H),
+      i("div", {
+        "aria-label": `screen ${t.currentIndex + 1} of ${t.slideIndicatorCount}`,
+        class: "tw-mx-2 md:tw-mx-3 lg:tw-mx-4 tw-invisible md:tw-visible"
+      }, y(t.currentIndex + 1) + "/" + y(t.slideIndicatorCount), 9, P),
+      i("button", {
+        class: "tw-text-primary tw-rounded-full tw-border-2 tw-border-primary tw-h-4 tw-w-4 tw-flex tw-items-center tw-justify-center disabled:tw-opacity-low disabled:tw-cursor-default",
+        disabled: t.embla && !t.embla.canScrollNext(),
+        onClick: e[1] || (e[1] = (r) => t.handleUserInteraction(t.nextIndex, "click-right-arrow"))
+      }, [
+        c(d, {
+          class: "tw-w-4",
+          icon: l.asideControls ? t.mdiArrowRight : t.mdiChevronRight
+        }, null, 8, ["icon"]),
+        e[5] || (e[5] = i("span", { class: "tw-sr-only" }, "Show next slide", -1))
+      ], 8, T)
+    ], 2)) : t.slideIndicatorCount > 1 ? (n(), a("div", z, [
+      (n(!0), a(f, null, b(t.slideIndicatorCount, (r) => (n(), a("button", {
+        key: r,
+        onClick: (o) => t.goToSlide(r - 1)
+      }, [
+        i("div", {
+          class: w(["tw-rounded-full tw-border tw-transition tw-duration-500 tw-ease-in-out", [
+            { "tw-bg-black tw-border-black tw-h-1.5 tw-w-1.5": t.currentIndex === r - 1 },
+            { "tw-bg-tertiary tw-border-tertiary tw-h-1 tw-w-1": t.currentIndex !== r - 1 }
+          ]])
+        }, null, 2)
+      ], 8, F))), 128))
+    ])) : g("", !0),
+    l.asideControls ? (n(), a(f, { key: 2 }, [
+      i("div", p, [
+        i("button", {
+          class: "tw-text-primary tw-bg-gray-100 tw-rounded-full tw-h-6 tw-w-6 tw-ml-3 tw-flex tw-items-center tw-justify-center disabled:tw-opacity-low disabled:tw-cursor-default",
+          disabled: t.embla && !t.embla.canScrollPrev(),
+          onClick: e[2] || (e[2] = (r) => t.handleUserInteraction(t.previousIndex, "click-left-arrow"))
+        }, [
+          c(d, {
+            class: "tw-w-4",
+            icon: t.mdiArrowLeft
+          }, null, 8, ["icon"]),
+          e[6] || (e[6] = i("span", { class: "tw-sr-only" }, "Show previous slide", -1))
+        ], 8, q)
+      ]),
+      i("div", G, [
+        i("button", {
+          class: "tw-text-primary tw-bg-gray-100 tw-rounded-full tw-h-6 tw-w-6 tw-mr-3 tw-flex tw-items-center tw-justify-center disabled:tw-opacity-low disabled:tw-cursor-default",
+          disabled: t.embla && !t.embla.canScrollNext(),
+          onClick: e[3] || (e[3] = (r) => t.handleUserInteraction(t.nextIndex, "click-right-arrow"))
+        }, [
+          c(d, {
+            class: "tw-w-4",
+            icon: t.mdiArrowRight
+          }, null, 8, ["icon"]),
+          e[7] || (e[7] = i("span", { class: "tw-sr-only" }, "Show next slide", -1))
+        ], 8, J)
+      ])
+    ], 64)) : g("", !0)
+  ], 2);
+}
+const lt = /* @__PURE__ */ R(W, [["render", Q], ["__scopeId", "data-v-bb42b5ff"]]);
+export {
+  lt as default
+};

package/dist/vue/KvCartModal.css

@@ -0,0 +1 @@
+.screen[data-v-50691313]{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1400;background-color:#0003}.modal[data-v-50691313]{width:100%;border-bottom-right-radius:.875rem;border-bottom-left-radius:.875rem;--tw-bg-opacity: 1;background-color:rgba(var(--bg-primary),var(--tw-bg-opacity, 1))}@media (min-width: 45.875rem){.modal[data-v-50691313]{position:absolute;right:0}}.modal[data-v-50691313]{max-height:90%}.modal__body[data-v-50691313]{display:flex;gap:1rem;padding-left:1.25rem;padding-right:1.25rem}@media (min-width: 45.875rem){.modal__body[data-v-50691313]{padding-left:2rem;padding-right:2rem}}.modal__body[data-v-50691313]{height:3.75rem}.loan-image[data-v-50691313]{width:3.75rem}.container[data-v-50691313]{position:absolute;top:0;right:0;bottom:0;left:0}@media (min-width: 45.875rem){.modal[data-v-50691313]{max-width:24.5rem}}

package/dist/vue/KvCartModal.js

@@ -0,0 +1,235 @@
+import { toRefs as P, ref as b, computed as d, watch as j, onMounted as K, onBeforeUnmount as R, resolveComponent as C, openBlock as x, createBlock as V, Transition as L, withCtx as g, withDirectives as F, createElementVNode as o, withModifiers as y, renderSlot as O, createVNode as w, createElementBlock as A, createCommentVNode as D, toDisplayString as f, createTextVNode as I, vShow as H, nextTick as U } from "vue";
+import { mdiClose as q, mdiCheckCircle as z } from "@mdi/js";
+import { useFocusTrap as G } from "@vueuse/integrations/useFocusTrap";
+import { hideOthers as J } from "../node_modules/aria-hidden/dist/es2015/index.js";
+import { unlockScroll as Q, lockScroll as W } from "../utils/scrollLock.js";
+import { unlockPrintSingleEl as X, lockPrintSingleEl as Y } from "../utils/printing.js";
+import Z from "./KvButton.js";
+import $ from "./KvMaterialIcon.js";
+import tt from "./KvBorrowerImage.js";
+/* empty css             */
+import et from "../_virtual/_plugin-vue_export-helper.js";
+const ot = {
+  components: {
+    KvMaterialIcon: $,
+    KvButton: Z,
+    KvBorrowerImage: tt
+  },
+  props: {
+    /**
+     * Whether the dialog is open or not
+     * */
+    visible: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * The dialog has no close X button, clicking the screen does not close,
+     * pressing ESC does not close.
+     * */
+    preventClose: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * The number of loans in the basket
+     * */
+    basketCount: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * The loan added to the basket
+     * */
+    addedLoan: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * The photo path for the borrower image
+     * */
+    photoPath: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: [
+    "cart-modal-closed"
+  ],
+  setup(p, { emit: t }) {
+    const {
+      visible: a,
+      preventClose: e,
+      addedLoan: i
+    } = P(p), c = b(null), n = b(null), k = b(null), m = d(() => [
+      c.value
+      // This cart modal
+    ]), {
+      activate: r,
+      deactivate: B
+    } = G(m, {
+      allowOutsideClick: !0
+      // allow clicking outside the cart modal to close it
+    });
+    let u = null, v = null;
+    const s = (l = "") => {
+      c.value && n.value && (B(), n.value.scrollTop = 0, X(n.value)), Q(), u && (u(), u = null), document.removeEventListener("keyup", v), t("cart-modal-closed", { type: l });
+    };
+    v = (l) => {
+      l && l.key === "Escape" && !e.value && s();
+    };
+    const S = () => {
+      e.value || s("background");
+    }, h = () => {
+      a.value && (document.addEventListener("keyup", v), U(() => {
+        c.value && n.value && (r(), u = J(c.value), Y(n.value)), W();
+      }));
+    }, _ = d(() => {
+      var l;
+      return ((l = i.value) == null ? void 0 : l.name) ?? "";
+    }), M = d(() => ({
+      alt: `Photo of ${_.value}`,
+      aspectRatio: 1,
+      defaultImage: { width: 300 },
+      hash: i.value.imageHash,
+      images: [
+        {
+          width: 300
+        }
+      ]
+    })), E = d(() => i.value.country ?? ""), T = d(() => i.value.amount ?? ""), N = (l) => {
+      s(l);
+    };
+    return j(a, () => {
+      a.value ? h() : s();
+    }), K(() => {
+      a.value && (h(), setTimeout(() => {
+        t("cart-modal-closed", { type: "time" });
+      }, 1e4));
+    }), R(() => s()), {
+      mdiClose: q,
+      mdiCheckCircle: z,
+      onKeyUp: v,
+      onScreenClick: S,
+      hide: s,
+      show: h,
+      controlsRef: k,
+      handleClick: N,
+      borrowerName: _,
+      borrowerImage: M,
+      borrowerCountry: E,
+      amount: T
+    };
+  }
+}, at = { class: "container" }, lt = { class: "tw-flex tw-p-2.5 md:tw-px-4 md:tw-pt-4 md:tw-pb-3.5" }, nt = { class: "tw-flex tw-flex-grow tw-gap-1 tw-items-center" }, rt = {
+  id: "kvCartModalBody",
+  ref: "kvCartModalBody",
+  class: "modal__body"
+}, st = { class: "tw-flex tw-items-center tw-justify-between tw-w-full tw-gap-1" }, it = { class: "tw-flex tw-flex-col tw-h-full tw-justify-between" }, ct = { class: "tw-overflow-hidden tw-text-ellipsis tw-line-clamp-1" }, dt = { class: "tw-p-1 tw-text-center tw-rounded tw-bg-secondary tw-text-h5 tw-w-max" }, wt = {
+  ref: "controlsRef",
+  class: "tw-flex-shrink-0 tw-flex tw-justify-end tw-gap-x-2.5 tw-p-2.5 md:tw-px-4 md:tw-pb-4 tw-flex-col tw-gap-1"
+};
+function mt(p, t, a, e, i, c) {
+  const n = C("kv-material-icon"), k = C("kv-borrower-image"), m = C("kv-button");
+  return x(), V(L, {
+    "enter-active-class": "tw-transition-opacity tw-duration-300",
+    "leave-active-class": "tw-transition-opacity tw-duration-300",
+    "enter-class": "tw-opacity-0",
+    "enter-to-class": "tw-opacity-full",
+    "leave-class": "tw-opacity-full",
+    "leave-to-class": "tw-opacity-0"
+  }, {
+    default: g(() => [
+      F(o("div", {
+        class: "screen",
+        onClick: t[4] || (t[4] = y((...r) => e.onScreenClick && e.onScreenClick(...r), ["stop", "prevent"]))
+      }, [
+        o("div", null, [
+          o("div", at, [
+            o("div", {
+              ref: "kvCartModal",
+              tabindex: "-1",
+              "data-test": "kv-cart-modal",
+              class: "modal",
+              "aria-modal": "true",
+              "aria-label": "Added to basket",
+              onClick: t[3] || (t[3] = y(() => {
+              }, ["stop"]))
+            }, [
+              o("div", lt, [
+                o("div", nt, [
+                  O(p.$slots, "header", {}, () => [
+                    w(n, {
+                      class: "tw-w-4 tw-h-4 tw-text-brand",
+                      icon: e.mdiCheckCircle
+                    }, null, 8, ["icon"]),
+                    t[5] || (t[5] = o("p", { class: "tw-flex-1 tw-font-medium" }, " Added to basket ", -1))
+                  ], !0),
+                  a.preventClose ? D("", !0) : (x(), A("button", {
+                    key: 0,
+                    class: "tw-grid tw-content-center tw-justify-center tw-ml-auto tw-w-6 tw-h-6 tw--m-2 hover:tw-text-action-highlight",
+                    onClick: t[0] || (t[0] = y((r) => e.hide("x-button"), ["stop"]))
+                  }, [
+                    w(n, {
+                      class: "tw-w-3 tw-h-3",
+                      icon: e.mdiClose
+                    }, null, 8, ["icon"]),
+                    t[6] || (t[6] = o("span", { class: "tw-sr-only" }, "Close", -1))
+                  ]))
+                ])
+              ]),
+              o("div", rt, [
+                o("div", null, [
+                  w(k, {
+                    class: "tw-rounded loan-image",
+                    alt: e.borrowerImage.alt,
+                    "aspect-ratio": e.borrowerImage.aspectRatio,
+                    "default-image": e.borrowerImage.defaultImage,
+                    hash: e.borrowerImage.hash,
+                    images: e.borrowerImage.images,
+                    "photo-path": a.photoPath
+                  }, null, 8, ["alt", "aspect-ratio", "default-image", "hash", "images", "photo-path"])
+                ]),
+                o("div", st, [
+                  o("div", it, [
+                    o("p", ct, f(e.borrowerName), 1),
+                    o("p", dt, f(e.borrowerCountry), 1)
+                  ]),
+                  o("p", null, " $" + f(e.amount), 1)
+                ])
+              ], 512),
+              o("div", wt, [
+                w(m, {
+                  class: "tw-w-full",
+                  onClick: t[1] || (t[1] = (r) => e.handleClick("view-basket"))
+                }, {
+                  default: g(() => [
+                    I(" View basket (" + f(a.basketCount) + ") ", 1)
+                  ]),
+                  _: 1
+                }),
+                w(m, {
+                  class: "tw-w-full",
+                  variant: "secondary",
+                  onClick: t[2] || (t[2] = (r) => e.handleClick("help-another-person"))
+                }, {
+                  default: g(() => t[7] || (t[7] = [
+                    I(" Help another person ")
+                  ])),
+                  _: 1
+                })
+              ], 512)
+            ], 512)
+          ])
+        ])
+      ], 512), [
+        [H, a.visible]
+      ])
+    ]),
+    _: 3
+  });
+}
+const xt = /* @__PURE__ */ et(ot, [["render", mt], ["__scopeId", "data-v-50691313"]]);
+export {
+  xt as default
+};

package/dist/vue/KvCheckbox.js

@@ -0,0 +1,134 @@
+import { nanoid as h } from "nanoid";
+import { toRefs as B, ref as u, watch as L, onMounted as M, openBlock as m, createElementBlock as b, normalizeClass as f, normalizeStyle as R, createElementVNode as s, mergeProps as S, toHandlers as z, withModifiers as E, createCommentVNode as N, renderSlot as j } from "vue";
+import { useAttrs as H } from "../utils/attrs.js";
+import K from "../_virtual/_plugin-vue_export-helper.js";
+const k = [
+  "change",
+  "update:modelValue"
+], P = {
+  inheritAttrs: !1,
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
+  props: {
+    /**
+     * Whether the checkbox is checked or not
+     * */
+    modelValue: {
+      type: [Boolean, Array],
+      default: !1
+    },
+    /**
+     * Prevents the checkbox from being toggled or focused
+     * */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Value of the checkbox if v-model is an array
+     * */
+    value: {
+      type: [String, Boolean],
+      default: ""
+    },
+    /**
+     * When set to false, visually indicates to the user that the contents of the input need
+     * to be changed
+     * */
+    valid: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  emits: k,
+  setup(i, l) {
+    const {
+      modelValue: t,
+      value: e
+    } = B(i), { emit: n } = l, r = u(`kvc-${h(10)}`), o = u(!1), d = u(null), {
+      classes: C,
+      styles: g,
+      inputAttrs: y,
+      inputListeners: p
+    } = H(l, k), x = (w) => {
+      const v = w.target.checked;
+      let a;
+      Array.isArray(t.value) ? v ? a = [...t.value, w.target.value] : a = t.value.filter((V) => V !== e.value) : a = v, n("change", a), n("update:modelValue", a);
+    }, c = () => {
+      Array.isArray(t.value) ? o.value = t.value.includes(e.value) : o.value = t.value;
+    }, _ = () => {
+      d.focus();
+    }, A = () => {
+      d.blur();
+    };
+    return c(), L(t, () => c()), M(() => {
+      r.value = `kvc-${h(10)}`;
+    }), {
+      uuid: r,
+      isChecked: o,
+      checkboxRef: d,
+      onChange: x,
+      setChecked: c,
+      focus: _,
+      blur: A,
+      classes: C,
+      styles: g,
+      inputAttrs: y,
+      inputListeners: p
+    };
+  }
+}, Z = ["for"], q = ["id", "checked", "value", "disabled"], D = {
+  key: 0,
+  class: "tw-w-1.5 tw-h-auto",
+  viewBox: "0 0 12 9",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, F = { class: "tw-flex-1 peer-focus-visible:tw-ring-2 peer-focus-visible:tw-ring-action" };
+function G(i, l, t, e, n, r) {
+  return m(), b("div", {
+    class: f(e.classes),
+    style: R(e.styles)
+  }, [
+    s("label", {
+      class: f(["tw-inline-flex tw-items-center", { "tw-opacity-low": t.disabled }]),
+      for: e.uuid
+    }, [
+      s("input", S(e.inputAttrs, {
+        id: e.uuid,
+        ref: "checkboxRef",
+        class: "tw-peer tw-appearance-none tw-w-max",
+        type: "checkbox",
+        checked: e.isChecked,
+        value: t.value,
+        disabled: t.disabled
+      }, z(e.inputListeners, !0), {
+        onChange: l[0] || (l[0] = E((...o) => e.onChange && e.onChange(...o), ["prevent"]))
+      }), null, 16, q),
+      s("div", {
+        class: f(["tw-w-3 tw-h-3 tw-mr-2 tw-flex-shrink-0 tw-rounded-sm tw-border tw-flex tw-justify-center tw-items-center tw-overflow-hidden tw-transition-all tw-duration-100 peer-focus-visible:tw-ring-2 peer-focus-visible:tw-ring-action", {
+          "tw-bg-white": !e.isChecked,
+          "tw-bg-action": e.isChecked,
+          "tw-border-secondary": !e.isChecked && t.valid,
+          "tw-border-action": e.isChecked && t.valid,
+          "tw-border-danger": !t.valid
+        }])
+      }, [
+        e.isChecked ? (m(), b("svg", D, l[1] || (l[1] = [
+          s("path", {
+            d: "M3.99975 6.79988L1.66642 4.46655C1.40642 4.20655 0.993086 4.20655 0.733086 4.46655C0.473086 4.72655 0.473086 5.13988 0.733086 5.39988L3.52642 8.19322C3.78642 8.45322 4.20642 8.45322 4.46642 8.19322L11.5331 1.13322C11.7931 0.873216 11.7931 0.459883 11.5331 0.199883C11.2731 -0.0601172 10.8598 -0.0601172 10.5998 0.199883L3.99975 6.79988Z",
+            fill: "white"
+          }, null, -1)
+        ]))) : N("", !0)
+      ], 2),
+      s("div", F, [
+        j(i.$slots, "default")
+      ])
+    ], 10, Z)
+  ], 6);
+}
+const T = /* @__PURE__ */ K(P, [["render", G]]);
+export {
+  T as default
+};

package/dist/vue/KvChip.js

@@ -0,0 +1,43 @@
+import { mdiClose as s } from "@mdi/js";
+import l from "./KvMaterialIcon.js";
+import { resolveComponent as a, openBlock as m, createElementBlock as p, createElementVNode as o, renderSlot as d, createVNode as w } from "vue";
+import f from "../_virtual/_plugin-vue_export-helper.js";
+const h = {
+  name: "KvChip",
+  components: { KvMaterialIcon: l },
+  emits: [
+    "click-chip"
+  ],
+  setup() {
+    return {
+      mdiClose: s
+    };
+  },
+  methods: {
+    handleClick() {
+      this.$emit("click-chip");
+    }
+  }
+}, _ = { class: "tw-inline-flex" }, u = { class: "tw-text-base tw-pr-1" };
+function k(r, t, v, n, C, e) {
+  const c = a("kv-material-icon");
+  return m(), p("div", _, [
+    o("button", {
+      class: "tw-bg-secondary hover:tw-bg-tertiary tw-items-center tw-flex tw-flex-row tw-cursor-pointer tw-whitespace-nowrap tw-rounded tw-h-2 tw-py-2 tw-px-2 tw-select-none",
+      onClick: t[0] || (t[0] = (...i) => e.handleClick && e.handleClick(...i))
+    }, [
+      o("div", u, [
+        d(r.$slots, "default")
+      ]),
+      w(c, {
+        icon: n.mdiClose,
+        class: "tw-w-2 tw-h-2",
+        "from-sprite": !0
+      }, null, 8, ["icon"])
+    ])
+  ]);
+}
+const $ = /* @__PURE__ */ f(h, [["render", k]]);
+export {
+  $ as default
+};

package/dist/vue/KvClassicLoanCard.css

@@ -0,0 +1 @@
+.loan-card-use[data-v-d014fd7b]:hover,.loan-card-use[data-v-d014fd7b]: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-d014fd7b]{text-decoration-line:underline}.loan-card-progress[data-v-d014fd7b]:hover,.loan-card-progress[data-v-d014fd7b]:focus{text-decoration-line:none}