@kiva/kv-components 6.20.0 → 6.21.1

package/dist/vue/KvAtbModal.css

@@ -1 +1 @@
-@media (min-width: 45.875rem){.cart-modal[data-v-c974cd2d] div.container{right:var(--modal-right)!important;top:var(--modal-top)!important}}
+@media (min-width: 45.875rem){.cart-modal[data-v-9be640c2] div.container{right:var(--modal-right)!important;top:var(--modal-top)!important}}

package/dist/vue/KvAtbModal.js

@@ -110,11 +110,11 @@ const Y = {
       oneLoanAwayCategory: p,
       oneLoanAwayFilteredUrl: d,
       milestonesProgress: S
-    } = N(g), w = j(0), f = j(0), b = C(() => {
+    } = N(g), w = j(0), v = j(0), b = C(() => {
       var t;
       return ((t = n.value) == null ? void 0 : t.basketSize) ?? 0;
     }), q = C(() => {
-      const t = `${window.innerWidth - f.value - 200}`, o = `${w.value}`;
+      const t = `${window.innerWidth - v.value - 200}`, o = `${w.value}`;
       return { right: t, top: o };
     }), c = C(() => {
       var t;
@@ -122,19 +122,19 @@ const Y = {
     }), A = C(() => {
       var t;
       return !((t = l.value) != null && t.my);
-    }), v = C(() => {
+    }), f = C(() => {
       var t, o, a;
       return y.value && (A.value && !M.value || !A.value && !((a = (o = (t = l.value) == null ? void 0 : t.my) == null ? void 0 : o.loans) != null && a.totalCount)) && b.value === 1;
-    }), Z = C(() => p.value && d.value && !v.value), _ = C(() => Object.values(S.value).reduce((t, o) => t + (o > 0 ? o : 0), 0)), H = C(() => {
+    }), Z = C(() => p.value && d.value && !f.value), _ = C(() => Object.values(S.value).reduce((t, o) => t + (o > 0 ? o : 0), 0)), H = C(() => {
       var o, a, s;
-      if (v.value) {
+      if (f.value) {
         const r = `Supporting ${c.value} helps`;
         return ((o = n.value) == null ? void 0 : o.borrowerCount) > 1 || (a = n.value) != null && a.themes.includes("Social Enterprise") ? `${r} them invest in themselves.` : ((s = n.value) == null ? void 0 : s.gender) === "male" ? `${r} him invest in himself.` : `${r} her invest in herself.`;
       }
       if (Z.value)
-        return "You’re close to your next milestone!";
-      const t = _.value > 1 ? `${_.value} of your milestones` : "your next milestone";
-      return c.value ? `Supporting ${c.value} will hit ${t}!` : "Supporting this loan achieves a milestone!";
+        return "You’re close to your next achievement!";
+      const t = _.value > 1 ? `${_.value} achievements` : "your next achievement";
+      return c.value ? `Supporting ${c.value} will reach ${t}!` : "Supporting this loan reaches an achievement!";
     }), P = (t) => {
       t === "view-basket" ? i("close-redirect", { type: t, path: "/basket" }) : t === "support-another" && d.value && i("close-redirect", { type: t, path: d.value });
     }, K = (t) => {
@@ -145,7 +145,7 @@ const Y = {
       let a = [...document.querySelectorAll('[data-testid="header-basket"]')], s = a.find((L) => L == null ? void 0 : L.clientHeight);
       s || (a = [...document.querySelectorAll('[data-testid="header-about"]')], s = a.find((L) => L == null ? void 0 : L.clientHeight));
       const r = (s == null ? void 0 : s.getBoundingClientRect()) ?? null;
-      r && (r == null ? void 0 : r.right) !== f.value && (f.value = r == null ? void 0 : r.right), o && (o == null ? void 0 : o.bottom) !== w.value && (w.value = o == null ? void 0 : o.bottom);
+      r && (r == null ? void 0 : r.right) !== v.value && (v.value = r == null ? void 0 : r.right), o && (o == null ? void 0 : o.bottom) !== w.value && (w.value = o == null ? void 0 : o.bottom);
     }, h = I(x, 100);
     return V(() => {
       x(), window.addEventListener("scroll", h), window.addEventListener("resize", h);
@@ -154,7 +154,7 @@ const Y = {
     }), {
       modalPosition: q,
       basketCount: b,
-      isFirstLoan: v,
+      isFirstLoan: f,
       borrowerName: c,
       showOneAway: Z,
       pillMsg: H,
@@ -387,7 +387,7 @@ function e1(g, i, n, l, M, y) {
     _: 1
   }, 8, ["style", "visible", "photo-path", "basket-count", "category-name", "onCartModalClosed"])) : k("", !0);
 }
-const i1 = /* @__PURE__ */ W(Y, [["render", e1], ["__scopeId", "data-v-c974cd2d"]]);
+const i1 = /* @__PURE__ */ W(Y, [["render", e1], ["__scopeId", "data-v-9be640c2"]]);
 export {
   i1 as default
 };

package/dist/vue/KvCartPill.js

@@ -1,4 +1,4 @@
-import { toRefs as n, computed as a, openBlock as i, createElementBlock as u, normalizeClass as p, renderSlot as c, createElementVNode as m, toDisplayString as f } from "vue";
+import { toRefs as a, computed as n, openBlock as i, createElementBlock as c, normalizeClass as u, renderSlot as p, createElementVNode as m, toDisplayString as f } from "vue";
 import d from "../_virtual/_plugin-vue_export-helper.js";
 const w = {
   props: {
@@ -28,30 +28,30 @@ const w = {
       borrowerName: o,
       milestonesNumber: t,
       isCloseNextMilestone: s
-    } = n(e);
+    } = a(e);
     return {
-      pillCopy: a(() => {
+      pillCopy: n(() => {
         if (e.customMessage)
           return e.customMessage;
         if (s.value)
-          return "You’re close to your next milestone!";
-        const l = t.value > 1 ? `${t.value} of your milestones` : "your next milestone";
-        return o.value ? `Supporting ${o.value} will hit ${l}!` : "Supporting this loan achieves a milestone!";
+          return "You’re close to your next achievement!";
+        const l = t.value > 1 ? `${t.value} achievements` : "your next achievement";
+        return o.value ? `Supporting ${o.value} will reach ${l}!` : "Supporting this loan reaches an achievement!";
       })
     };
   }
 }, y = { class: "tw-text-wrap" };
 function g(e, o, t, s, r, l) {
-  return i(), u("div", {
-    class: p(["tw-w-max tw-flex tw-items-center tw-gap-1 tw-px-1 tw-py-0.5 tw-rounded", {
+  return i(), c("div", {
+    class: u(["tw-w-max tw-flex tw-items-center tw-gap-1 tw-px-1 tw-py-0.5 tw-rounded", {
       "tw-text-small tw-bg-secondary": t.showBg
     }])
   }, [
-    c(e.$slots, "icon"),
+    p(e.$slots, "icon"),
     m("p", y, f(s.pillCopy), 1)
   ], 2);
 }
-const v = /* @__PURE__ */ d(w, [["render", g]]);
+const x = /* @__PURE__ */ d(w, [["render", g]]);
 export {
-  v as default
+  x as default
 };

package/dist/vue/KvSideSheet.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "6.20.0",
+  "version": "6.21.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -111,5 +111,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "679a1245a2f841c23eaabfd75403bd128b375774"
+  "gitHead": "aa646dc5aeb545bca9a0dc5a574bebc9e438a4d2"
 }