@kiva/kv-components 6.22.1 → 6.23.0

package/dist/vue/KvLendCta.css

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

package/dist/vue/KvLendCta.js

@@ -6,7 +6,7 @@ import S from "./KvSelect.js";
 import F from "./KvButton.js";
 import I from "./KvMaterialIcon.js";
 import N from "./KvCartPill.js";
-import { resolveComponent as A, openBlock as i, createElementBlock as r, createBlock as a, withCtx as l, createElementVNode as u, createCommentVNode as d, normalizeClass as h, createTextVNode as f, toDisplayString as w, createVNode as V, withModifiers as p, Fragment as L, renderList as g } from "vue";
+import { resolveComponent as A, openBlock as i, createElementBlock as l, createBlock as a, withCtx as r, createElementVNode as u, createCommentVNode as d, normalizeClass as h, createTextVNode as f, toDisplayString as w, createVNode as V, withModifiers as p, Fragment as L, renderList as g } from "vue";
 import "./KvLendCta.css";
 import O from "../_virtual/_plugin-vue_export-helper.js";
 const k = "Other", ot = C`
@@ -358,13 +358,13 @@ const k = "Other", ot = C`
 }, z = ["value"];
 function q(t, n, s, y, c, e) {
   const b = A("kv-cart-pill"), m = A("kv-ui-button"), x = A("kv-material-icon"), v = A("kv-ui-select"), T = A("kv-lend-amount-button");
-  return i(), r("div", H, [
+  return i(), l("div", H, [
     s.showPill && s.showPresetAmounts ? (i(), a(b, {
       key: 0,
       "borrower-name": e.loanName,
       class: "!tw-w-full tw-justify-center tw-pb-2"
     }, {
-      icon: l(() => n[5] || (n[5] = [
+      icon: r(() => n[5] || (n[5] = [
         u("svg", {
           xmlns: "http://www.w3.org/2000/svg",
           width: "25",
@@ -408,7 +408,7 @@ function q(t, n, s, y, c, e) {
       href: s.externalLinks ? "/basket" : void 0,
       onClick: n[0] || (n[0] = (o) => e.clickSecondaryButton(o))
     }, {
-      default: l(() => [
+      default: r(() => [
         f(w(e.loanInBasketButtonText), 1)
       ]),
       _: 1
@@ -416,11 +416,11 @@ function q(t, n, s, y, c, e) {
       key: 2,
       class: "tw-inline-flex tw-flex-1"
     }, {
-      default: l(() => [
+      default: r(() => [
         f(w(e.ctaButtonText), 1)
       ]),
       _: 1
-    })) : e.isFunded ? (i(), r("div", K, " This loan was just funded! 🎉 ")) : s.showViewLoan ? (i(), a(m, {
+    })) : e.isFunded ? (i(), l("div", K, " This loan was just funded! 🎉 ")) : s.showViewLoan ? (i(), a(m, {
       key: 4,
       state: `${e.allSharesReserved ? "disabled" : ""}`,
       to: s.externalLinks ? void 0 : e.readMorePath,
@@ -428,7 +428,7 @@ function q(t, n, s, y, c, e) {
       class: "tw-mb-0",
       onClick: n[1] || (n[1] = (o) => t.$emit("show-loan-details", o))
     }, {
-      default: l(() => [
+      default: r(() => [
         u("span", R, [
           n[6] || (n[6] = f(" View loan ")),
           V(x, {
@@ -438,31 +438,31 @@ function q(t, n, s, y, c, e) {
         ])
       ]),
       _: 1
-    }, 8, ["state", "to", "href"])) : e.useFormSubmit ? (i(), r("form", {
+    }, 8, ["state", "to", "href"])) : e.useFormSubmit ? (i(), l("form", {
       key: 5,
       class: "tw-w-full tw-flex",
       onSubmit: n[4] || (n[4] = p((...o) => e.addToBasket && e.addToBasket(...o), ["prevent"]))
     }, [
       u("fieldset", {
         class: h(["tw-w-full tw-flex", {
-          "tw-flex-col md:tw-flex-row md:tw-justify-between": s.showPresetAmounts,
+          "tw-flex-col md:tw-flex-row md:tw-justify-between tw-min-w-0": s.showPresetAmounts,
           "tw-gap-1.5": s.showPresetAmounts && !e.isLendAmountButton
         }]),
         disabled: s.isAdding,
         "data-testid": "bp-lend-cta-select-and-button"
       }, [
-        s.showPresetAmounts && !s.isAdding ? (i(), r("div", {
+        s.showPresetAmounts && !s.isAdding ? (i(), l("div", {
           key: 0,
           class: h(["tw-flex tw-gap-1 lg:tw-gap-2", { "tw-flex-wrap md:tw-flex-nowrap": s.enableHugeAmount }])
         }, [
-          e.isLendAmountButton ? d("", !0) : (i(!0), r(L, { key: 0 }, g(e.presetButtonsPrices, (o) => (i(), a(m, {
+          e.isLendAmountButton ? d("", !0) : (i(!0), l(L, { key: 0 }, g(e.presetButtonsPrices, (o) => (i(), a(m, {
             key: o,
             variant: "secondary",
             class: h(["tw-inline-flex tw-flex-1 preset-option tw-w-8", { "selected-option": c.selectedOption == o }]),
             "data-testid": "bp-lend-cta-lend-button",
             onClick: (Z) => e.clickPresetButton(o)
           }, {
-            default: l(() => [
+            default: r(() => [
               f(" $" + w(o), 1)
             ]),
             _: 2
@@ -483,15 +483,15 @@ function q(t, n, s, y, c, e) {
             "aria-label": "Lend amount",
             onClick: p(e.clickDropdown, ["stop"])
           }, {
-            default: l(() => [
-              (i(!0), r(L, null, g(e.presetDropdownPrices, (o) => (i(), r("option", {
+            default: r(() => [
+              (i(!0), l(L, null, g(e.presetDropdownPrices, (o) => (i(), l("option", {
                 key: o,
                 value: o
               }, w(o !== c.OTHER_OPTION ? `$${o}` : o), 9, E))), 128))
             ]),
             _: 1
           }, 8, ["id", "modelValue", "class", "onUpdate:modelValue", "onClick"])) : d("", !0)
-        ], 2)) : s.showPresetAmounts ? d("", !0) : (i(), r("div", j, [
+        ], 2)) : s.showPresetAmounts ? d("", !0) : (i(), l("div", j, [
           e.hideShowLendDropdown && !e.isLessThan25 ? (i(), a(v, {
             key: 0,
             id: `LoanAmountDropdown_${e.loanId}`,
@@ -505,8 +505,8 @@ function q(t, n, s, y, c, e) {
             "aria-label": "Lend amount",
             onClick: p(e.clickDropdown, ["stop"])
           }, {
-            default: l(() => [
-              (i(!0), r(L, null, g(e.prices, (o) => (i(), r("option", {
+            default: r(() => [
+              (i(!0), l(L, null, g(e.prices, (o) => (i(), l("option", {
                 key: o,
                 value: o
               }, " $" + w(o), 9, z))), 128))
@@ -516,17 +516,18 @@ function q(t, n, s, y, c, e) {
         ])),
         u("div", {
           class: h({
+            "tw-min-w-0": s.showPresetAmounts,
             lendButtonWrapper: e.hideShowLendDropdown && !s.showPresetAmounts,
             "tw-hidden": e.hideLendButton
           })
         }, [
           e.lendButtonVisibility && !e.isLessThan25 ? (i(), a(m, {
             key: "lendButton",
-            class: h(["tw-inline-flex tw-flex-1", { "tw-w-full": s.showPresetAmounts }]),
+            class: h(["tw-inline-flex tw-flex-1", { "button-ellipsis tw-w-full": s.showPresetAmounts }]),
             "data-testid": "bp-lend-cta-lend-button",
             type: "submit"
           }, {
-            default: l(() => [
+            default: r(() => [
               f(w(e.ctaButtonText), 1)
             ]),
             _: 1
@@ -536,7 +537,7 @@ function q(t, n, s, y, c, e) {
             "data-testid": "bp-lend-cta-lend-again-button",
             type: "submit"
           }, {
-            default: l(() => [
+            default: r(() => [
               f(w(s.primaryButtonText || "Lend") + " again ", 1)
             ]),
             _: 1
@@ -555,7 +556,7 @@ function q(t, n, s, y, c, e) {
           key: 3,
           class: "tw-inline-flex tw-flex-1"
         }, {
-          default: l(() => n[7] || (n[7] = [
+          default: r(() => n[7] || (n[7] = [
             f(" Adding to basket ")
           ])),
           _: 1
@@ -564,7 +565,7 @@ function q(t, n, s, y, c, e) {
     ], 32)) : d("", !0)
   ]);
 }
-const at = /* @__PURE__ */ O(M, [["render", q], ["__scopeId", "data-v-8b9dbed8"]]);
+const at = /* @__PURE__ */ O(M, [["render", q], ["__scopeId", "data-v-3b66ed0d"]]);
 export {
   ot as KV_LEND_CTA_FRAGMENT,
   it as KV_LEND_CTA_USER_FRAGMENT,

package/dist/vue/KvSideSheet.js

@@ -1,11 +1,11 @@
-import { toRefs as J, ref as w, reactive as P, computed as z, onMounted as Q, onUnmounted as j, watch as p, resolveComponent as Y, openBlock as k, createElementBlock as b, normalizeClass as x, withModifiers as Z, createElementVNode as h, normalizeStyle as W, createVNode as _, createCommentVNode as S, toDisplayString as $, renderSlot as U, nextTick as ee } from "vue";
-import { mdiArrowLeft as te, mdiClose as oe, mdiExportVariant as ne } from "@mdi/js";
-import ie from "./KvMaterialIcon.js";
-import le from "../_virtual/_plugin-vue_export-helper.js";
-const ae = {
+import { toRefs as q, ref as w, reactive as J, computed as L, onMounted as P, onUnmounted as B, watch as y, resolveComponent as Q, openBlock as g, createElementBlock as p, normalizeClass as k, withModifiers as X, createElementVNode as c, normalizeStyle as j, createVNode as O, createCommentVNode as b, toDisplayString as Y, renderSlot as F, nextTick as Z } from "vue";
+import { mdiArrowLeft as $, mdiClose as ee, mdiExportVariant as te } from "@mdi/js";
+import oe from "./KvMaterialIcon.js";
+import ne from "../_virtual/_plugin-vue_export-helper.js";
+const ie = {
   name: "KvSideSheet",
   components: {
-    KvMaterialIcon: ie
+    KvMaterialIcon: oe
   },
   props: {
     /**
@@ -50,13 +50,6 @@ const ae = {
       type: String,
       default: ""
     },
-    /**
-     * Source element position for expand animation
-     * */
-    animationSourceElement: {
-      type: Object,
-      default: () => ({})
-    },
     /**
      * The headline of the side sheet
      * */
@@ -72,275 +65,248 @@ const ae = {
     widthDimensions: {
       type: [String, Object],
       default: () => ({ default: "100%", md: "50%" }),
-      validator: (l) => typeof l == "string" ? /^(\d+px|[\d.]+%|auto|inherit|initial)$/.test(l) : typeof l == "object" ? Object.keys(l).every((a) => ["default", "sm", "md", "lg", "xl", "2xl"].includes(a) && /^(\d+px|[\d.]+%|auto|inherit|initial)$/.test(l[a])) : !1
+      validator: (i) => typeof i == "string" ? /^(\d+px|[\d.]+%|auto|inherit|initial)$/.test(i) : typeof i == "object" ? Object.keys(i).every((l) => ["default", "sm", "md", "lg", "xl", "2xl"].includes(l) && /^(\d+px|[\d.]+%|auto|inherit|initial)$/.test(i[l])) : !1
     }
   },
   emits: ["side-sheet-closed", "go-to-link"],
-  setup(l, { emit: a, slots: r }) {
+  setup(i, { emit: l, slots: s }) {
     const {
       visible: t,
-      kvTrackFunction: V,
-      trackEventCategory: K,
-      animationSourceElement: f,
-      widthDimensions: i
-    } = J(l), u = w(!1), B = w({}), s = w({}), L = w(null), m = w(null), y = w(null), M = w(window.innerHeight), D = w(window.innerWidth), v = P({
+      kvTrackFunction: H,
+      trackEventCategory: z,
+      widthDimensions: a
+    } = q(i), o = w(!1), r = w({}), C = w(null), v = w(null), m = w(null), W = w(window.innerHeight), _ = w(window.innerWidth), f = J({
       headline: 0,
       controls: 0
-    }), A = z(() => {
-      const e = M.value - v.headline - v.controls;
+    }), I = L(() => {
+      const e = W.value - f.headline - f.controls;
       return Math.max(e, 0);
-    }), C = z(() => {
-      if (typeof i.value == "string")
-        return i.value;
+    }), V = L(() => {
+      if (typeof a.value == "string")
+        return a.value;
       const e = {
         sm: 640,
         md: 768,
         lg: 1024,
         xl: 1280,
         "2xl": 1536
-      }, n = D.value || window.innerWidth, o = Object.keys(i.value).filter((d) => d !== "default").sort((d, g) => e[g] - e[d]).find((d) => n >= e[d]);
-      return o ? i.value[o] : i.value.default || "100%";
-    }), G = (e, n) => {
-      let o;
+      }, n = _.value || window.innerWidth, u = Object.keys(a.value).filter((d) => d !== "default").sort((d, R) => e[R] - e[d]).find((d) => n >= e[d]);
+      return u ? a.value[u] : a.value.default || "100%";
+    }), N = (e, n) => {
+      let u;
       return (...d) => {
-        clearTimeout(o), o = setTimeout(() => e(...d), n);
+        clearTimeout(u), u = setTimeout(() => e(...d), n);
       };
-    }, E = () => {
-      M.value = window.innerHeight, D.value = window.innerWidth, setTimeout(() => {
-        ee(() => {
+    }, x = () => {
+      W.value = window.innerHeight, _.value = window.innerWidth, setTimeout(() => {
+        Z(() => {
           var e;
-          if (y.value) {
-            const n = y.value.getBoundingClientRect();
-            v.headline = n.height;
-          } else
-            v.headline = 0;
-          if ((e = r.controls) != null && e.call(r) && m.value) {
+          if (m.value) {
             const n = m.value.getBoundingClientRect();
-            v.controls = n.height;
+            f.headline = n.height;
+          } else
+            f.headline = 0;
+          if ((e = s.controls) != null && e.call(s) && v.value) {
+            const n = v.value.getBoundingClientRect();
+            f.controls = n.height;
           } else
-            v.controls = 0;
+            f.controls = 0;
         });
       }, 300);
-    }, T = G(E, 100), O = () => {
+    }, S = N(x, 100), E = () => {
       const e = "tw-overflow-hidden";
-      u.value ? document.body.classList.add(e) : document.body.classList.remove(e);
-    }, F = () => {
-      u.value = !1, O(), V.value(K.value, "click", "side-sheet-closed"), setTimeout(() => {
-        a("side-sheet-closed");
-      }, 300), document.removeEventListener("keyup", H);
-    }, X = () => {
-      a("go-to-link");
-    }, H = (e) => {
-      (e == null ? void 0 : e.key) === "Escape" && F();
+      o.value ? document.body.classList.add(e) : document.body.classList.remove(e);
+    }, K = () => {
+      o.value = !1, E(), H.value(z.value, "click", "side-sheet-closed"), setTimeout(() => {
+        l("side-sheet-closed");
+      }, 300), document.removeEventListener("keyup", T);
+    }, U = () => {
+      l("go-to-link");
+    }, T = (e) => {
+      (e == null ? void 0 : e.key) === "Escape" && K();
     };
-    Q(() => {
+    P(() => {
       if (setTimeout(() => {
-        E();
-      }, 100), m.value) {
-        const e = new ResizeObserver(T);
-        e.observe(m.value), j(() => e.disconnect());
+        x();
+      }, 100), v.value) {
+        const e = new ResizeObserver(S);
+        e.observe(v.value), B(() => e.disconnect());
       }
-      if (y.value) {
-        const e = new ResizeObserver(T);
-        e.observe(y.value), j(() => e.disconnect());
+      if (m.value) {
+        const e = new ResizeObserver(S);
+        e.observe(m.value), B(() => e.disconnect());
       }
-      window.addEventListener("resize", T), j(() => window.removeEventListener("resize", T));
-    }), p(() => {
+      window.addEventListener("resize", S), B(() => window.removeEventListener("resize", S));
+    }), y(() => {
       var e;
-      return (e = r.controls) == null ? void 0 : e.call(r);
+      return (e = s.controls) == null ? void 0 : e.call(s);
     }, () => {
       setTimeout(() => {
-        E();
+        x();
       }, 100);
     }, { deep: !0, immediate: !0 });
-    const q = z(() => ({
-      width: C.value
+    const A = L(() => ({
+      width: V.value
     }));
-    p(t, (e) => {
-      var n;
-      if (e) {
-        document.addEventListener("keyup", H), s.value = {}, setTimeout(() => {
-          u.value = !0, O(), E();
-        }, 10);
-        const o = (n = f.value) == null ? void 0 : n.getBoundingClientRect(), d = (o == null ? void 0 : o.top) ?? 0, g = (o == null ? void 0 : o.left) ?? 0, c = (o == null ? void 0 : o.width) ?? 0, R = (o == null ? void 0 : o.height) ?? 0;
-        o && (d || g || c || R) && (B.value = {
-          position: "fixed",
-          top: `${d}px`,
-          width: `${c}px`,
-          height: `${R}px`,
-          transform: `translateX(${C.value})`
-        }, s.value = {
-          ...B.value,
-          transition: "none"
-        }, setTimeout(() => {
-          s.value = {
-            top: "0",
-            width: C.value,
-            height: "100%",
-            transform: "translateX(0)",
-            transition: "all 0.3s ease-in-out"
-          };
-        }, 10));
-      } else
-        u.value = !1, O(), document.removeEventListener("keyup", H), f.value && Object.keys(B.value).length > 0 ? s.value = {
-          ...B.value,
-          transition: "all 0.3s ease-in-out"
-        } : s.value = {};
-    }, { immediate: !0 }), p(C, (e) => {
-      u.value && t.value && s.value && Object.keys(s.value).length > 0 && (s.value = {
-        ...s.value,
+    y(t, (e) => {
+      e ? (document.addEventListener("keyup", T), r.value = {}, setTimeout(() => {
+        o.value = !0, E(), x();
+      }, 10)) : (o.value = !1, E(), document.removeEventListener("keyup", T), r.value = {});
+    }, { immediate: !0 }), y(V, (e) => {
+      o.value && t.value && r.value && Object.keys(r.value).length > 0 && (r.value = {
+        ...r.value,
         width: e,
         transition: "none"
         // No animation for resize
       }, setTimeout(() => {
-        s.value && Object.keys(s.value).length > 0 && (s.value = {
-          ...s.value,
+        r.value && Object.keys(r.value).length > 0 && (r.value = {
+          ...r.value,
           transition: "all 0.3s ease-in-out"
         });
       }, 50));
     });
-    const I = () => {
-      if (typeof i.value == "object" && L.value) {
+    const M = () => {
+      if (typeof a.value == "object" && C.value) {
         const e = "side-sheet-styles";
         let n = document.getElementById(e);
         n || (n = document.createElement("style"), n.id = e, document.head.appendChild(n));
-        const o = {
+        const u = {
           sm: "640px",
           md: "768px",
           lg: "1024px",
           xl: "1280px",
           "2xl": "1536px"
-        }, g = Object.keys(i.value).filter((c) => c !== "default").sort((c, R) => {
-          const N = ["sm", "md", "lg", "xl", "2xl"];
-          return N.indexOf(c) - N.indexOf(R);
-        }).map((c) => `
-						@media (min-width: ${o[c]}) {
-							#side-sheet-${l.trackEventCategory || "default"} {
-								width: ${i.value[c]} !important;
+        }, R = Object.keys(a.value).filter((h) => h !== "default").sort((h, G) => {
+          const D = ["sm", "md", "lg", "xl", "2xl"];
+          return D.indexOf(h) - D.indexOf(G);
+        }).map((h) => `
+						@media (min-width: ${u[h]}) {
+							#side-sheet-${i.trackEventCategory || "default"} {
+								width: ${a.value[h]} !important;
 							}
 						}
 					`).join("");
-        n.textContent = g, L.value.id = `side-sheet-${l.trackEventCategory || "default"}`, j(() => {
+        n.textContent = R, C.value.id = `side-sheet-${i.trackEventCategory || "default"}`, B(() => {
           n && n.remove();
         });
       }
     };
-    return p(i, () => {
-      u.value && I();
-    }, { immediate: !0 }), p(u, (e) => {
-      e && I();
+    return y(a, () => {
+      o.value && M();
+    }, { immediate: !0 }), y(o, (e) => {
+      e && M();
     }), {
-      closeSideSheet: F,
-      contentHeight: A,
-      controlsRef: m,
-      headlineRef: y,
-      sideSheetRef: L,
-      sideSheetStyles: q,
-      goToLink: X,
-      mdiArrowLeft: te,
-      mdiClose: oe,
-      mdiExportVariant: ne,
-      modalStyles: s,
-      open: u
+      closeSideSheet: K,
+      contentHeight: I,
+      controlsRef: v,
+      headlineRef: m,
+      sideSheetRef: C,
+      sideSheetStyles: A,
+      goToLink: U,
+      mdiArrowLeft: $,
+      mdiClose: ee,
+      mdiExportVariant: te,
+      modalStyles: r,
+      open: o
     };
   }
-}, se = { class: "tw-flex tw-gap-1.5" }, re = { key: 1 }, de = { class: "tw-flex tw-gap-1.5" };
-function ce(l, a, r, t, V, K) {
-  const f = Y("kv-material-icon");
-  return r.visible ? (k(), b("div", {
+}, le = { class: "tw-flex tw-gap-1.5" }, se = { key: 1 }, ae = { class: "tw-flex tw-gap-1.5" };
+function re(i, l, s, t, H, z) {
+  const a = Q("kv-material-icon");
+  return s.visible ? (g(), p("div", {
     key: 0,
-    class: x(["tw-block lg:tw-mt-0 tw-fixed tw-inset-0 tw-bg-black tw-transition-all md:tw-duration-150 tw-z-modal", {
+    class: k(["tw-block lg:tw-mt-0 tw-fixed tw-inset-0 tw-bg-black tw-transition-all md:tw-duration-150 tw-z-modal", {
       "tw-bg-opacity-0 tw-delay-300": !t.open,
       "tw-bg-opacity-low": t.open
     }]),
-    onClick: a[3] || (a[3] = Z((...i) => t.closeSideSheet && t.closeSideSheet(...i), ["self"]))
+    onClick: l[3] || (l[3] = X((...o) => t.closeSideSheet && t.closeSideSheet(...o), ["self"]))
   }, [
-    h("div", {
+    c("div", {
       ref: "sideSheetRef",
-      class: x(["tw-fixed tw-right-0 tw-transition-all tw-duration-300 tw-bg-white tw-overflow-y-auto", {
+      class: k(["tw-fixed tw-right-0 tw-transition-all tw-duration-300 tw-bg-white tw-overflow-y-auto", {
         "tw-translate-x-full": !t.open,
         "tw-translate-x-0": t.open,
-        "tw-h-full": l.$slots.controls
+        "tw-h-full": i.$slots.controls
       }]),
-      style: W(t.sideSheetStyles)
+      style: j(t.sideSheetStyles)
     }, [
-      h("div", {
+      c("div", {
         class: "tw-flex tw-flex-col tw-h-full",
-        style: W(t.modalStyles)
+        style: j(t.modalStyles)
       }, [
-        h("div", {
+        c("div", {
           ref: "headlineRef",
-          class: x(["tw-flex tw-justify-between tw-transition-opacity tw-duration-200 tw-px-3 tw-py-2 tw-border-tertiary", {
+          class: k(["tw-flex tw-justify-between tw-transition-opacity tw-duration-200 tw-px-3 tw-py-2 tw-border-tertiary", {
             "tw-opacity-0": !t.open,
             "tw-opacity-full": t.open,
-            "tw-border-b": r.showHeadlineBorder
+            "tw-border-b": s.showHeadlineBorder
           }])
         }, [
-          h("div", se, [
-            r.showBackButton ? (k(), b("button", {
+          c("div", le, [
+            s.showBackButton ? (g(), p("button", {
               key: 0,
               class: "hover:tw-text-action-highlight tw-flex tw-items-center tw-justify-center",
-              onClick: a[0] || (a[0] = (...i) => t.closeSideSheet && t.closeSideSheet(...i))
+              onClick: l[0] || (l[0] = (...o) => t.closeSideSheet && t.closeSideSheet(...o))
             }, [
-              _(f, {
+              O(a, {
                 class: "tw-w-3 tw-h-3",
                 icon: t.mdiArrowLeft
               }, null, 8, ["icon"])
-            ])) : S("", !0),
-            r.headline ? (k(), b("h2", re, $(r.headline), 1)) : S("", !0)
+            ])) : b("", !0),
+            s.headline ? (g(), p("h2", se, Y(s.headline), 1)) : b("", !0)
           ]),
-          h("div", de, [
-            r.showGoToLink ? (k(), b("button", {
+          c("div", ae, [
+            s.showGoToLink ? (g(), p("button", {
               key: 0,
               class: "hover:tw-text-action-highlight tw-flex tw-items-center tw-justify-center",
-              onClick: a[1] || (a[1] = (...i) => t.goToLink && t.goToLink(...i))
+              onClick: l[1] || (l[1] = (...o) => t.goToLink && t.goToLink(...o))
             }, [
-              _(f, {
+              O(a, {
                 class: "tw-w-3 tw-h-3",
                 icon: t.mdiExportVariant
               }, null, 8, ["icon"])
-            ])) : S("", !0),
-            h("button", {
+            ])) : b("", !0),
+            c("button", {
               class: "hover:tw-text-action-highlight tw-flex tw-items-center tw-justify-center",
-              onClick: a[2] || (a[2] = (...i) => t.closeSideSheet && t.closeSideSheet(...i))
+              onClick: l[2] || (l[2] = (...o) => t.closeSideSheet && t.closeSideSheet(...o))
             }, [
-              _(f, {
+              O(a, {
                 class: "tw-w-3 tw-h-3",
                 icon: t.mdiClose
               }, null, 8, ["icon"])
             ])
           ])
         ], 2),
-        h("div", {
+        c("div", {
           id: "sidesheet-content",
           class: "tw-overflow-y-auto tw-overscroll-y-contain",
-          style: W({ height: t.contentHeight + "px" })
+          style: j({ height: t.contentHeight + "px" })
         }, [
-          h("div", {
-            class: x(["tw-p-2 tw-transition-opacity tw-duration-200", {
+          c("div", {
+            class: k(["tw-p-2 tw-transition-opacity tw-duration-200", {
               "tw-opacity-0": !t.open,
               "tw-opacity-full": t.open
             }])
           }, [
-            U(l.$slots, "default")
+            F(i.$slots, "default")
           ], 2)
         ], 4),
-        l.$slots.controls ? (k(), b("div", {
+        i.$slots.controls ? (g(), p("div", {
           key: 0,
           ref: "controlsRef",
-          class: x(["tw-absolute tw-bottom-0 tw-w-full tw-border-t tw-border-tertiary tw-bg-white tw-transition-opacity tw-duration-200", {
+          class: k(["tw-absolute tw-bottom-0 tw-w-full tw-border-t tw-border-tertiary tw-bg-white tw-transition-opacity tw-duration-200", {
             "tw-opacity-0": !t.open,
             "tw-opacity-full": t.open
           }]),
           style: { "z-index": "999" }
         }, [
-          U(l.$slots, "controls")
-        ], 2)) : S("", !0)
+          F(i.$slots, "controls")
+        ], 2)) : b("", !0)
       ], 4)
     ], 6)
-  ], 2)) : S("", !0);
+  ], 2)) : b("", !0);
 }
-const ve = /* @__PURE__ */ le(ae, [["render", ce]]);
+const fe = /* @__PURE__ */ ne(ie, [["render", re]]);
 export {
-  ve as default
+  fe as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "6.22.1",
+  "version": "6.23.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -111,5 +111,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "2e79f200809fc5329546c0c1a75acbb1238d2c03"
+  "gitHead": "05289fba22aebf122d62677fa7a9e762be9ecffc"
 }