@kiva/kv-components 8.13.0 → 8.13.2

package/dist/vue/KvSimpleMap2.js

@@ -1,22 +1,22 @@
-import { defineComponent as Ue, useSlots as Ye, computed as l, ref as m, watch as V, onMounted as We, onBeforeUnmount as Xe, openBlock as v, createElementBlock as d, normalizeStyle as $, createElementVNode as g, Fragment as Ge, renderList as qe, unref as C, createVNode as L, createCommentVNode as T, Transition as Ke, withCtx as je, normalizeClass as Je, renderSlot as Qe, toDisplayString as le } from "vue";
-import { mdiPlus as et, mdiMinus as tt, mdiPlay as nt } from "@mdi/js";
+import { defineComponent as Ue, useSlots as Ye, computed as a, ref as x, watch as Y, onMounted as Xe, onBeforeUnmount as Ge, openBlock as h, createElementBlock as b, normalizeStyle as $, createElementVNode as M, Fragment as qe, renderList as Ke, unref as C, createVNode as L, createCommentVNode as T, Transition as je, withCtx as Je, normalizeClass as Qe, renderSlot as et, toDisplayString as ue } from "vue";
+import { mdiPlus as tt, mdiMinus as ot, mdiPlay as nt } from "@mdi/js";
 import N from "@kiva/kv-tokens";
-import ot from "../data/simpleMapPaths.js";
-import lt from "../data/simpleMapCountryPaths.js";
-import U from "../data/simpleMapCentroids.js";
-import { ALL_COUNTRIES_ISO_MAP as ae } from "../data/allCountriesISOMap.js";
-import { useMapTourCycle as at } from "../utils/useMapTourCycle.js";
-import Y from "./KvMaterialIcon.js";
-const ut = ["viewBox"], rt = ["d", "fill", "onPointerenter", "onPointerleave"], it = {
+import lt from "../data/simpleMapPaths.js";
+import at from "../data/simpleMapCountryPaths.js";
+import O from "../data/simpleMapCentroids.js";
+import { ALL_COUNTRIES_ISO_MAP as ie } from "../data/allCountriesISOMap.js";
+import { useMapTourCycle as ut } from "../utils/useMapTourCycle.js";
+import X from "./KvMaterialIcon.js";
+const it = ["viewBox"], rt = ["d", "fill", "onPointerenter", "onPointerleave"], st = {
   key: 0,
   class: "kv-simple-map__zoom-controls tw-absolute tw-top-2 tw-right-2 tw-flex tw-flex-col tw-gap-1"
-}, st = ["disabled"], ct = ["disabled"], pt = { class: "kv-simple-map__popup-layer tw-absolute tw-inset-0 tw-pointer-events-none" }, ft = { class: "kv-simple-map__popup-content" }, mt = { class: "kv-simple-map__default-popup" }, vt = {
+}, ct = ["disabled"], pt = ["disabled"], mt = { class: "kv-simple-map__popup-layer tw-absolute tw-inset-0 tw-pointer-events-none" }, ft = { class: "kv-simple-map__popup-content" }, vt = { class: "kv-simple-map__default-popup" }, dt = {
   key: 0,
   class: "tw-text-label"
-}, dt = {
+}, yt = {
   key: 1,
   class: "tw-text-caption"
-}, R = 1300.02, D = 571.784, yt = "cubic-bezier(0.76, 0, 0.24, 1)", xt = 60, St = /* @__PURE__ */ Ue({
+}, R = 1300.02, D = 571.784, xt = "cubic-bezier(0.76, 0, 0.24, 1)", ht = 60, $t = /* @__PURE__ */ Ue({
   __name: "KvSimpleMap",
   props: {
     /**
@@ -187,23 +187,23 @@ const ut = ["viewBox"], rt = ["d", "fill", "onPointerenter", "onPointerleave"],
     fadeDuration: { type: Number, default: 500 }
   },
   setup(k) {
-    const n = k, ue = Ye(), W = l(() => !!ue.popup), E = m(null), i = m(0), x = m(0);
-    function re() {
-      return n.height != null ? `${n.height}px` : i.value ? `${i.value / n.aspectRatio}px` : `${100 / n.aspectRatio}%`;
+    const n = k, re = Ye(), G = a(() => !!re.popup), E = x(null), r = x(0), w = x(0);
+    function se() {
+      return n.height != null ? `${n.height}px` : r.value ? `${r.value / n.aspectRatio}px` : `${100 / n.aspectRatio}%`;
     }
-    const ie = l(() => ({
+    const ce = a(() => ({
       width: n.width != null ? `${n.width}px` : "100%",
-      height: re(),
+      height: se(),
       paddingBottom: n.height != null ? void 0 : `${100 / n.aspectRatio}%`
     }));
-    let P = null;
-    function X() {
+    let S = null;
+    function q() {
       const e = E.value;
       if (!e) return;
       const t = e.getBoundingClientRect();
-      i.value = t.width, x.value = t.height;
+      r.value = t.width, w.value = t.height;
     }
-    const se = l(() => n.countries), ce = l(() => n.loop), A = m(!1), pe = l(() => n.autoplay && !A.value), fe = l(() => ({
+    const pe = a(() => n.countries), me = a(() => n.loop), A = x(!1), fe = a(() => n.autoplay && !A.value), ve = a(() => ({
       initialDelay: n.initialDelay,
       panDuration: n.panDuration,
       holdPerStep: n.holdPerStep,
@@ -211,105 +211,118 @@ const ut = ["viewBox"], rt = ["d", "fill", "onPointerenter", "onPointerleave"],
       holdAll: n.holdAll,
       fadeDuration: n.fadeDuration
     })), {
-      panIdx: G,
-      highlighted: me,
-      showPopupIdx: q,
-      isRunning: s,
-      start: ve
-    } = at(se, pe, ce, fe.value), c = l(() => i.value ? i.value / R : 1), K = l(() => {
-      const e = c.value, t = D * e;
+      panIdx: K,
+      highlighted: de,
+      showPopupIdx: j,
+      isRunning: m,
+      start: ye
+    } = ut(pe, fe, me, ve.value), f = a(() => r.value ? r.value / R : 1), J = a(() => {
+      const e = f.value, t = D * e;
       return {
         x: 0,
-        y: Math.max(0, (x.value - t) / 2),
+        y: Math.max(0, (w.value - t) / 2),
         scale: e
       };
     });
-    function de(e) {
-      return e.cx != null && e.cy != null ? { cx: e.cx, cy: e.cy } : U[e.id] ?? null;
+    function xe(e) {
+      return e.cx != null && e.cy != null ? { cx: e.cx, cy: e.cy } : O[e.id] ?? null;
     }
-    const ye = l(() => {
-      if (G.value < 0) return null;
-      const e = n.countries[G.value];
+    const he = a(() => {
+      const l = Math.max(0, Math.min(1, (r.value - 320) / 880));
+      return n.zoomFactor * (1.4 - l * (1.4 - 1));
+    }), be = a(() => {
+      if (K.value < 0) return null;
+      const e = n.countries[K.value];
       if (!e) return null;
-      const t = de(e);
+      const t = xe(e);
       if (!t) return null;
-      const o = c.value * n.zoomFactor;
+      const o = f.value * he.value;
+      let l = o;
+      const u = O[e.id];
+      if (u) {
+        const d = Math.max(2 * (u.xMax - u.cx), 20), V = Math.max(2 * (u.yMax - u.cy), 20), I = 0.45;
+        l = Math.min(
+          r.value * I / d,
+          w.value * I / V
+        );
+      }
+      const s = f.value * n.maxZoom, i = Math.min(s, Math.max(o, l));
       return {
-        x: i.value / 2 - t.cx * o,
-        y: x.value / 2 - t.cy * o,
-        scale: o
+        x: r.value / 2 - t.cx * i,
+        y: w.value / 2 - t.cy * i,
+        scale: i
       };
-    }), u = m({ x: 0, y: 0, scale: 1 }), B = m(!1), j = m(!1), I = m(!1), xe = l(() => {
-      if (!n.fitToCountries || !n.countries.length || !i.value || !x.value) return null;
-      let e = 1 / 0, t = 1 / 0, o = -1 / 0, a = -1 / 0;
-      if (n.countries.forEach((r) => {
-        if (r.cx != null && r.cy != null) {
-          r.cx < e && (e = r.cx), r.cx > o && (o = r.cx), r.cy < t && (t = r.cy), r.cy > a && (a = r.cy);
+    }), c = x({ x: 0, y: 0, scale: 1 }), B = x(!1), Q = x(!1), Z = x(!1), we = a(() => {
+      if (!n.fitToCountries || !n.countries.length || !r.value || !w.value) return null;
+      let e = 1 / 0, t = 1 / 0, o = -1 / 0, l = -1 / 0;
+      if (n.countries.forEach((p) => {
+        if (p.cx != null && p.cy != null) {
+          p.cx < e && (e = p.cx), p.cx > o && (o = p.cx), p.cy < t && (t = p.cy), p.cy > l && (l = p.cy);
           return;
         }
-        const f = U[r.id];
-        if (!f) return;
-        const ne = 2 * f.cx - f.xMax, oe = 2 * f.cy - f.yMax;
-        ne < e && (e = ne), oe < t && (t = oe), f.xMax > o && (o = f.xMax), f.yMax > a && (a = f.yMax);
+        const y = O[p.id];
+        if (!y) return;
+        const le = 2 * y.cx - y.xMax, ae = 2 * y.cy - y.yMax;
+        le < e && (e = le), ae < t && (t = ae), y.xMax > o && (o = y.xMax), y.yMax > l && (l = y.yMax);
       }), !Number.isFinite(e)) return null;
-      const y = Math.max(0, n.fitPadding), w = Math.max(1, o - e) * (1 + y * 2), M = Math.max(1, a - t) * (1 + y * 2), b = Math.min(i.value / w, x.value / M), He = c.value * n.minZoom, ze = c.value * n.maxZoom, F = Math.max(He, Math.min(ze, b)), Fe = (e + o) / 2, Ve = (t + a) / 2;
+      const u = Math.max(0, n.fitPadding), s = Math.max(1, o - e) * (1 + u * 2), i = Math.max(1, l - t) * (1 + u * 2), d = Math.min(r.value / s, w.value / i), V = f.value * n.minZoom, I = f.value * n.maxZoom, U = Math.max(V, Math.min(I, d)), We = (e + o) / 2, Ve = (t + l) / 2;
       return {
-        x: i.value / 2 - Fe * F,
-        y: x.value / 2 - Ve * F,
-        scale: F
+        x: r.value / 2 - We * U,
+        y: w.value / 2 - Ve * U,
+        scale: U
       };
-    }), he = l(() => xe.value ?? K.value), O = l(() => s.value ? ye.value ?? K.value : u.value);
-    V(he, (e) => {
-      s.value || I.value || (u.value = e);
-    }, { immediate: !0 }), V(() => n.countries, () => {
-      I.value = !1;
-    }), V(() => n.autoplay, () => {
+    }), ge = a(() => we.value ?? J.value), F = a(() => m.value ? be.value ?? J.value : c.value);
+    Y(ge, (e) => {
+      m.value || Z.value || (c.value = e);
+    }, { immediate: !0 }), Y(() => n.countries, () => {
+      Z.value = !1;
+    }), Y(() => n.autoplay, () => {
       A.value = !1;
     });
-    const we = l(() => {
-      const { x: e, y: t, scale: o } = O.value, a = !B.value && j.value;
+    const Me = a(() => {
+      const { x: e, y: t, scale: o } = F.value, l = !B.value && Q.value;
       return {
         width: `${R}px`,
         height: `${D}px`,
         transformOrigin: "0 0",
         transform: `translate(${e}px, ${t}px) scale(${o})`,
-        transition: a ? `transform ${n.panDuration}ms ${yt}` : "none",
+        transition: l ? `transform ${n.panDuration}ms ${xt}` : "none",
         willChange: "transform"
       };
-    }), _ = m(null), Z = l(() => {
+    }), _ = x(null), H = a(() => {
       const e = /* @__PURE__ */ new Map();
       return n.countries.forEach((t) => e.set(t.id, t)), e;
     });
-    function be(e) {
-      return Z.value.has(e) || !!ae[e];
+    function _e(e) {
+      return H.value.has(e) || !!ie[e];
     }
-    function H(e) {
-      return be(e);
+    function z(e) {
+      return _e(e);
     }
-    const S = N.colors["eco-green"], ge = [S[1], S[2], S[3], S[4]], J = l(() => n.highlightColor ?? S.DEFAULT), _e = l(() => n.baseColor ?? N.colors.gray[200]), Me = N.colors.gray[300];
-    function Ce(e) {
+    const P = N.colors["eco-green"], Ce = [P[1], P[2], P[3], P[4]], ee = a(() => n.highlightColor ?? P.DEFAULT), ke = a(() => n.baseColor ?? N.colors.gray[200]), Se = N.colors.gray[300];
+    function Pe(e) {
       if (e == null || e < n.loanCountTiers[0]) return null;
       for (let t = n.loanCountTiers.length - 1; t >= 0; t -= 1)
-        if (e >= n.loanCountTiers[t]) return ge[t];
+        if (e >= n.loanCountTiers[t]) return Ce[t];
       return null;
     }
-    function ke(e) {
+    function $e(e) {
       return {
         transition: `fill ${n.fadeDuration}ms ease-in-out`,
-        cursor: H(e) && !s.value ? "pointer" : "inherit"
+        cursor: z(e) && !m.value ? "pointer" : "inherit"
       };
     }
-    function Pe(e) {
-      const t = Z.value.get(e), o = t ? Ce(t.loanCount) : null, a = _.value === e && H(e);
-      return me.value.has(e) ? J.value : a ? o ? J.value : Me : o ?? _e.value;
+    function Te(e) {
+      const t = H.value.get(e), o = t ? Pe(t.loanCount) : null, l = _.value === e && z(e);
+      return de.value.has(e) ? ee.value : l ? o ? ee.value : Se : o ?? ke.value;
     }
-    function Se(e) {
-      s.value || H(e) && (_.value = e);
+    function Ne(e) {
+      m.value || z(e) && (_.value = e);
     }
-    function $e(e) {
+    function Re(e) {
       _.value === e && (_.value = null);
     }
-    function Te(e) {
+    function De(e, t = !1) {
       if (e.cx != null && e.cy != null)
         return {
           cx: e.cx,
@@ -319,125 +332,127 @@ const ut = ["viewBox"], rt = ["d", "fill", "onPointerenter", "onPointerleave"],
           yMin: e.cy,
           yMax: e.cy
         };
-      const t = U[e.id];
-      return t ? {
-        cx: t.cx,
-        cy: t.cy,
-        xMax: t.xMax,
-        yMax: t.yMax,
-        xMin: 2 * t.cx - t.xMax,
-        yMin: 2 * t.cy - t.yMax
-      } : null;
+      const o = O[e.id];
+      if (!o) return null;
+      const l = t && o.popupCx != null ? o.popupCx : o.cx, u = t && o.popupCy != null ? o.popupCy : o.cy, s = t && o.popupXMax != null ? o.popupXMax : o.xMax, i = t && o.popupYMax != null ? o.popupYMax : o.yMax;
+      return {
+        cx: l,
+        cy: u,
+        xMax: s,
+        yMax: i,
+        xMin: 2 * l - s,
+        yMin: 2 * u - i
+      };
     }
-    function Q(e) {
-      const t = Te(e);
+    function te(e) {
+      const t = De(e, !0);
       if (!t) return null;
-      const o = O.value, a = { "--kv-simple-map-popup-offset": `${n.popupOffset}px` };
+      const o = F.value, l = { "--kv-simple-map-popup-offset": `${n.popupOffset}px` };
       if (n.popupPlacement === "bottom-right")
         return {
           placement: "bottom-right",
           style: {
             left: `${t.xMax * o.scale + o.x}px`,
             top: `${t.yMax * o.scale + o.y}px`,
-            ...a
+            ...l
           }
         };
-      const y = t.cx * o.scale + o.x, w = t.yMin * o.scale + o.y, M = t.yMax * o.scale + o.y, b = w < xt ? "bottom" : "top";
+      const u = t.cx * o.scale + o.x, s = t.yMin * o.scale + o.y, i = t.yMax * o.scale + o.y, d = s < ht ? "bottom" : "top";
       return {
-        placement: b,
+        placement: d,
         style: {
-          left: `${y}px`,
-          top: `${b === "top" ? w : M}px`,
-          ...a
+          left: `${u}px`,
+          top: `${d === "top" ? s : i}px`,
+          ...l
         }
       };
     }
-    function ee(e) {
+    function oe(e) {
       return !!e.name || e.loanCount != null;
     }
-    const p = l(() => {
-      if (s.value && q.value >= 0) {
-        const e = n.countries[q.value];
-        if (!e || !W.value && !ee(e)) return null;
-        const t = Q(e);
+    const v = a(() => {
+      if (m.value && j.value >= 0) {
+        const e = n.countries[j.value];
+        if (!e || !G.value && !oe(e)) return null;
+        const t = te(e);
         return t ? { country: e, ...t } : null;
       }
-      if (!s.value && _.value) {
-        const e = _.value, t = Z.value.get(e) ?? { id: e, name: ae[e] };
-        if (!W.value && !ee(t)) return null;
-        const o = Q(t);
+      if (!m.value && _.value) {
+        const e = _.value, t = H.value.get(e) ?? { id: e, name: ie[e] };
+        if (!G.value && !oe(t)) return null;
+        const o = te(t);
         return o ? { country: t, ...o } : null;
       }
       return null;
     });
-    function Ne(e) {
+    function Ee(e) {
       return e === 1 ? "1 loan" : `${e} loans`;
     }
-    let h = null;
-    function z(e) {
-      h && (u.value = {
-        ...u.value,
-        x: h.tx + (e.clientX - h.x),
-        y: h.ty + (e.clientY - h.y)
+    let g = null;
+    function W(e) {
+      g && (c.value = {
+        ...c.value,
+        x: g.tx + (e.clientX - g.x),
+        y: g.ty + (e.clientY - g.y)
       });
     }
-    function Re() {
-      B.value = !1, h = null, window.removeEventListener("pointermove", z);
+    function Ae() {
+      B.value = !1, g = null, window.removeEventListener("pointermove", W);
     }
-    function De(e) {
-      e.button !== 0 && e.pointerType === "mouse" || (s.value && (u.value = { ...O.value }, A.value = !0), n.allowDragging && (I.value = !0, B.value = !0, h = {
+    function Be(e) {
+      e.button !== 0 && e.pointerType === "mouse" || (m.value && (c.value = { ...F.value }, A.value = !0), n.allowDragging && (Z.value = !0, B.value = !0, g = {
         x: e.clientX,
         y: e.clientY,
-        tx: u.value.x,
-        ty: u.value.y
-      }, window.addEventListener("pointermove", z), window.addEventListener("pointerup", Re, { once: !0 })));
+        tx: c.value.x,
+        ty: c.value.y
+      }, window.addEventListener("pointermove", W), window.addEventListener("pointerup", Ae, { once: !0 })));
     }
-    const Ee = l(() => n.autoplay && !s.value);
-    function Ae() {
-      A.value = !1, ve();
+    const Ze = a(() => n.autoplay && !m.value);
+    function Ie() {
+      A.value = !1, ye();
     }
-    const Be = l(() => !n.allowDragging || s.value ? "default" : B.value ? "grabbing" : "grab"), Ie = l(() => u.value.scale < c.value * n.maxZoom - 1e-3), Le = l(() => u.value.scale > c.value * n.minZoom + 1e-3);
-    function te(e) {
-      const t = u.value, o = c.value * n.minZoom, a = c.value * n.maxZoom, y = Math.min(a, Math.max(o, t.scale + e * c.value));
-      if (Math.abs(y - t.scale) < 1e-6) return;
-      I.value = !0;
-      const w = i.value, M = x.value, b = y / t.scale;
-      u.value = {
-        x: w / 2 - (w / 2 - t.x) * b,
-        y: M / 2 - (M / 2 - t.y) * b,
-        scale: y
+    const Le = a(() => !n.allowDragging || m.value ? "default" : B.value ? "grabbing" : "grab"), Oe = a(() => c.value.scale < f.value * n.maxZoom - 1e-3), Fe = a(() => c.value.scale > f.value * n.minZoom + 1e-3);
+    function ne(e) {
+      const t = c.value, o = f.value * n.minZoom, l = f.value * n.maxZoom, u = Math.min(l, Math.max(o, t.scale + e * f.value));
+      if (Math.abs(u - t.scale) < 1e-6) return;
+      Z.value = !0;
+      const s = r.value, i = w.value, d = u / t.scale;
+      c.value = {
+        x: s / 2 - (s / 2 - t.x) * d,
+        y: i / 2 - (i / 2 - t.y) * d,
+        scale: u
       };
     }
-    function Oe() {
-      te(n.zoomStep);
+    function He() {
+      ne(n.zoomStep);
     }
-    function Ze() {
-      te(-n.zoomStep);
+    function ze() {
+      ne(-n.zoomStep);
     }
-    return We(() => {
-      X(), typeof ResizeObserver < "u" && E.value && (P = new ResizeObserver(X), P.observe(E.value)), requestAnimationFrame(() => {
+    return Xe(() => {
+      q(), typeof ResizeObserver < "u" && E.value && (S = new ResizeObserver(q), S.observe(E.value)), requestAnimationFrame(() => {
         requestAnimationFrame(() => {
-          j.value = !0;
+          Q.value = !0;
         });
       });
-    }), Xe(() => {
-      P == null || P.disconnect(), window.removeEventListener("pointermove", z);
-    }), (e, t) => (v(), d("div", {
+    }), Ge(() => {
+      S == null || S.disconnect(), window.removeEventListener("pointermove", W);
+    }), (e, t) => (h(), b("div", {
       ref_key: "rootRef",
       ref: E,
       class: "kv-simple-map tw-relative tw-block tw-overflow-hidden",
-      style: $(ie.value)
+      style: $(ce.value)
     }, [
-      g("div", {
+      M("div", {
         class: "kv-simple-map__clip tw-absolute tw-inset-0 tw-overflow-hidden",
-        style: $({ backgroundColor: k.oceanColor, cursor: Be.value }),
-        onPointerdown: De
+        style: $({ backgroundColor: k.oceanColor, cursor: Le.value }),
+        onPointerdown: Be
       }, [
-        g("div", {
+        M("div", {
           class: "kv-simple-map__pan-layer tw-absolute tw-top-0 tw-left-0",
-          style: $(we.value)
+          style: $(Me.value)
         }, [
-          (v(), d("svg", {
+          (h(), b("svg", {
             width: R,
             height: D,
             viewBox: `0 0 ${R} ${D}`,
@@ -445,74 +460,74 @@ const ut = ["viewBox"], rt = ["d", "fill", "onPointerenter", "onPointerleave"],
             "aria-hidden": "true",
             class: "tw-block"
           }, [
-            (v(!0), d(Ge, null, qe(C(lt), (o) => (v(), d("path", {
+            (h(!0), b(qe, null, Ke(C(at), (o) => (h(), b("path", {
               key: o.id,
-              d: C(ot)[o.key],
-              fill: Pe(o.id),
+              d: C(lt)[o.key],
+              fill: Te(o.id),
               "fill-rule": "evenodd",
               "clip-rule": "evenodd",
               stroke: "white",
               "stroke-linejoin": "round",
-              style: $(ke(o.id)),
-              onPointerenter: (a) => Se(o.id),
-              onPointerleave: (a) => $e(o.id)
+              style: $($e(o.id)),
+              onPointerenter: (l) => Ne(o.id),
+              onPointerleave: (l) => Re(o.id)
             }, null, 44, rt))), 128))
-          ], 8, ut))
+          ], 8, it))
         ], 4)
       ], 36),
-      k.showZoomControls && !C(s) ? (v(), d("div", it, [
-        g("button", {
+      k.showZoomControls && !C(m) ? (h(), b("div", st, [
+        M("button", {
           type: "button",
           class: "kv-simple-map__control-btn",
-          disabled: !Ie.value,
+          disabled: !Oe.value,
           "aria-label": "Zoom in",
-          onClick: Oe
+          onClick: He
         }, [
-          L(Y, {
+          L(X, {
             class: "tw-w-2 tw-h-2",
-            icon: C(et)
+            icon: C(tt)
           }, null, 8, ["icon"])
-        ], 8, st),
-        g("button", {
+        ], 8, ct),
+        M("button", {
           type: "button",
           class: "kv-simple-map__control-btn",
-          disabled: !Le.value,
+          disabled: !Fe.value,
           "aria-label": "Zoom out",
-          onClick: Ze
+          onClick: ze
         }, [
-          L(Y, {
+          L(X, {
             class: "tw-w-2 tw-h-2",
-            icon: C(tt)
+            icon: C(ot)
           }, null, 8, ["icon"])
-        ], 8, ct)
+        ], 8, pt)
       ])) : T("", !0),
-      Ee.value ? (v(), d("button", {
+      Ze.value ? (h(), b("button", {
         key: 1,
         type: "button",
         class: "kv-simple-map__control-btn kv-simple-map__play-btn tw-absolute tw-bottom-2 tw-right-2",
         "aria-label": "Resume tour",
-        onClick: Ae
+        onClick: Ie
       }, [
-        L(Y, {
+        L(X, {
           class: "tw-w-2 tw-h-2",
           icon: C(nt)
         }, null, 8, ["icon"])
       ])) : T("", !0),
-      g("div", pt, [
-        L(Ke, { name: "kv-simple-map-popup" }, {
-          default: je(() => [
-            p.value ? (v(), d("div", {
-              key: p.value.country.id,
-              class: Je(["kv-simple-map__popup tw-absolute", `kv-simple-map__popup--${p.value.placement}`]),
-              style: $(p.value.style)
+      M("div", mt, [
+        L(je, { name: "kv-simple-map-popup" }, {
+          default: Je(() => [
+            v.value ? (h(), b("div", {
+              key: v.value.country.id,
+              class: Qe(["kv-simple-map__popup tw-absolute", `kv-simple-map__popup--${v.value.placement}`]),
+              style: $(v.value.style)
             }, [
-              g("div", ft, [
-                Qe(e.$slots, "popup", {
-                  country: p.value.country
+              M("div", ft, [
+                et(e.$slots, "popup", {
+                  country: v.value.country
                 }, () => [
-                  g("div", mt, [
-                    p.value.country.name ? (v(), d("div", vt, le(p.value.country.name), 1)) : T("", !0),
-                    p.value.country.loanCount != null ? (v(), d("div", dt, le(Ne(p.value.country.loanCount)), 1)) : T("", !0)
+                  M("div", vt, [
+                    v.value.country.name ? (h(), b("div", dt, ue(v.value.country.name), 1)) : T("", !0),
+                    v.value.country.loanCount != null ? (h(), b("div", yt, ue(Ee(v.value.country.loanCount)), 1)) : T("", !0)
                   ])
                 ], !0)
               ])
@@ -525,5 +540,5 @@ const ut = ["viewBox"], rt = ["d", "fill", "onPointerenter", "onPointerleave"],
   }
 });
 export {
-  St as default
+  $t as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "8.13.0",
+  "version": "8.13.2",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -125,5 +125,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "6d0e8c2b071887742cecc20e460e29d55f181360"
+  "gitHead": "abb7415577404fc07fc41ca9fc4d457f08303651"
 }