@kiva/kv-components 8.13.1 → 8.13.3

package/dist/data/simpleMapCentroids.d.ts

@@ -3,6 +3,10 @@ export interface Centroid {
     cy: number;
     xMax: number;
     yMax: number;
+    popupCx?: number;
+    popupCy?: number;
+    popupXMax?: number;
+    popupYMax?: number;
 }
 declare const simpleMapCentroids: Record<string, Centroid>;
 export default simpleMapCentroids;

package/dist/data/simpleMapCentroids.js

@@ -39,7 +39,12 @@ const x = {
     cx: 1116.78,
     cy: 451.16,
     xMax: 1190.78,
-    yMax: 521.76
+    yMax: 521.76,
+    // Main continent — tighter than full bbox with remote islands
+    popupCx: 1120,
+    popupCy: 450,
+    popupXMax: 1170,
+    popupYMax: 500
   },
   AT: {
     cx: 682.12,
@@ -147,7 +152,12 @@ const x = {
     cx: 361.59,
     cy: 78.04,
     xMax: 502.28,
-    yMax: 154.65
+    yMax: 154.65,
+    // Southern populated mainland — excludes Arctic archipelago
+    popupCx: 330,
+    popupCy: 105,
+    popupXMax: 420,
+    popupYMax: 140
   },
   CH: {
     cx: 665.97,
@@ -159,7 +169,12 @@ const x = {
     cx: 406.26,
     cy: 490.74,
     xMax: 431.06,
-    yMax: 571.28
+    yMax: 571.28,
+    // Central Chile (Santiago region) — avoids extreme N-S elongation
+    popupCx: 410,
+    popupCy: 475,
+    popupXMax: 425,
+    popupYMax: 500
   },
   CN: {
     cx: 986.5,
@@ -387,13 +402,23 @@ const x = {
     cx: 1077.13,
     cy: 345.31,
     xMax: 1162.16,
-    yMax: 379.27
+    yMax: 379.27,
+    // Java/Bali region — most populated; avoids geometric center in open sea
+    popupCx: 1065,
+    popupCy: 360,
+    popupXMax: 1095,
+    popupYMax: 378
   },
   IN: {
     cx: 937.01,
     cy: 241.69,
     xMax: 988.21,
-    yMax: 300.71
+    yMax: 300.71,
+    // Indian peninsula — excludes Andaman/Nicobar and Lakshadweep
+    popupCx: 942,
+    popupCy: 240,
+    popupXMax: 975,
+    popupYMax: 280
   },
   IE: {
     cx: 613.51,
@@ -615,7 +640,12 @@ const x = {
     cx: 1045.2,
     cy: 318.33,
     xMax: 1080.71,
-    yMax: 331.5
+    yMax: 331.5,
+    // Peninsular Malaysia — avoids centroid falling in sea between halves
+    popupCx: 1018,
+    popupCy: 318,
+    popupXMax: 1027,
+    popupYMax: 330
   },
   NA: {
     cx: 706.27,
@@ -651,7 +681,12 @@ const x = {
     cx: 687.84,
     cy: 48.37,
     xMax: 722.29,
-    yMax: 88.49
+    yMax: 88.49,
+    // Southern mainland — excludes Svalbard/Arctic pulling centroid far north
+    popupCx: 680,
+    popupCy: 75,
+    popupXMax: 700,
+    popupYMax: 89
   },
   NP: {
     cx: 940.71,
@@ -663,7 +698,12 @@ const x = {
     cx: 1222.95,
     cy: 508.39,
     xMax: 1256.51,
-    yMax: 534.29
+    yMax: 534.29,
+    // North + South Island — excludes distant Chatham Islands inflating west
+    popupCx: 1242,
+    popupCy: 510,
+    popupXMax: 1257,
+    popupYMax: 535
   },
   OM: {
     cx: 842.43,
@@ -747,7 +787,12 @@ const x = {
     cx: 929.32,
     cy: 82.39,
     xMax: 1158.54,
-    yMax: 158.22
+    yMax: 158.22,
+    // Central Russia — avoids extreme east-west spread
+    popupCx: 900,
+    popupCy: 95,
+    popupXMax: 1e3,
+    popupYMax: 135
   },
   RW: {
     cx: 749.91,
@@ -921,7 +966,12 @@ const x = {
     cx: 237.09,
     cy: 146.09,
     xMax: 416.07,
-    yMax: 253.75
+    yMax: 253.75,
+    // Continental US mainland — excludes Alaska/Hawaii bbox inflation
+    popupCx: 275,
+    popupCy: 175,
+    popupXMax: 340,
+    popupYMax: 210
   },
   UZ: {
     cx: 856.34,

package/dist/vue/KvSimpleMap.css

@@ -1 +1 @@
-.kv-simple-map__pan-layer[data-v-49496ad7]{transform-origin:0 0}.kv-simple-map__control-btn[data-v-49496ad7]{display:flex;height:2rem;width:2rem;cursor:pointer;align-items:center;justify-content:center;border-radius:.25rem;border-width:.0625rem;--tw-border-opacity: 1;border-color:rgba(var(--border-tertiary),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-shadow: 0 1px 4px 0 rgb(0 0 0 / .08);--tw-shadow-colored: 0 1px 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.kv-simple-map__control-btn[data-v-49496ad7]:disabled{cursor:default;opacity:.3}.kv-simple-map__control-btn[data-v-49496ad7]:hover:not(:disabled){--tw-bg-opacity: 1;background-color:rgba(var(--bg-secondary),var(--tw-bg-opacity, 1))}.kv-simple-map__play-btn[data-v-49496ad7]{border-radius:500rem}.kv-simple-map__default-popup[data-v-49496ad7]{white-space:nowrap;border-radius:.5rem;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding:.5rem 1.5rem;text-align:center;--tw-shadow: 0 1px 4px 0 rgb(0 0 0 / .08);--tw-shadow-colored: 0 1px 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);min-width:80px}.kv-simple-map__popup[data-v-49496ad7]{height:0;width:0}.kv-simple-map__popup-content[data-v-49496ad7]{position:absolute;white-space:nowrap}.kv-simple-map__popup--top>.kv-simple-map__popup-content[data-v-49496ad7]{bottom:var(--kv-simple-map-popup-offset, 4px);left:0;transform:translate(-50%)}.kv-simple-map__popup--bottom>.kv-simple-map__popup-content[data-v-49496ad7]{top:var(--kv-simple-map-popup-offset, 4px);left:0;transform:translate(-50%)}.kv-simple-map__popup--bottom-right>.kv-simple-map__popup-content[data-v-49496ad7]{top:var(--kv-simple-map-popup-offset, 4px);left:var(--kv-simple-map-popup-offset, 4px)}.kv-simple-map-popup-enter-active[data-v-49496ad7],.kv-simple-map-popup-leave-active[data-v-49496ad7]{transition:opacity .18s ease-out}.kv-simple-map-popup-enter-from[data-v-49496ad7],.kv-simple-map-popup-leave-to[data-v-49496ad7]{opacity:0}.kv-simple-map-popup-enter-to[data-v-49496ad7],.kv-simple-map-popup-leave-from[data-v-49496ad7]{opacity:1}
+.kv-simple-map__pan-layer[data-v-0abc47d3]{transform-origin:0 0}.kv-simple-map__control-btn[data-v-0abc47d3]{display:flex;height:2rem;width:2rem;cursor:pointer;align-items:center;justify-content:center;border-radius:.25rem;border-width:.0625rem;--tw-border-opacity: 1;border-color:rgba(var(--border-tertiary),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-shadow: 0 1px 4px 0 rgb(0 0 0 / .08);--tw-shadow-colored: 0 1px 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.kv-simple-map__control-btn[data-v-0abc47d3]:disabled{cursor:default;opacity:.3}.kv-simple-map__control-btn[data-v-0abc47d3]:hover:not(:disabled){--tw-bg-opacity: 1;background-color:rgba(var(--bg-secondary),var(--tw-bg-opacity, 1))}.kv-simple-map__play-btn[data-v-0abc47d3]{border-radius:500rem}.kv-simple-map__default-popup[data-v-0abc47d3]{white-space:nowrap;border-radius:.5rem;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding:.5rem 1.5rem;text-align:center;--tw-shadow: 0 1px 4px 0 rgb(0 0 0 / .08);--tw-shadow-colored: 0 1px 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);min-width:80px}.kv-simple-map__popup[data-v-0abc47d3]{height:0;width:0}.kv-simple-map__popup-content[data-v-0abc47d3]{position:absolute;white-space:nowrap}.kv-simple-map__popup--top>.kv-simple-map__popup-content[data-v-0abc47d3]{bottom:var(--kv-simple-map-popup-offset, 4px);left:0;transform:translate(-50%)}.kv-simple-map__popup--bottom>.kv-simple-map__popup-content[data-v-0abc47d3]{top:var(--kv-simple-map-popup-offset, 4px);left:0;transform:translate(-50%)}.kv-simple-map__popup--bottom-right>.kv-simple-map__popup-content[data-v-0abc47d3]{top:var(--kv-simple-map-popup-offset, 4px);left:var(--kv-simple-map-popup-offset, 4px)}.kv-simple-map-popup-enter-active[data-v-0abc47d3],.kv-simple-map-popup-leave-active[data-v-0abc47d3]{transition:opacity .18s ease-out}.kv-simple-map-popup-enter-from[data-v-0abc47d3],.kv-simple-map-popup-leave-to[data-v-0abc47d3]{opacity:0}.kv-simple-map-popup-enter-to[data-v-0abc47d3],.kv-simple-map-popup-leave-from[data-v-0abc47d3]{opacity:1}

package/dist/vue/KvSimpleMap.js

@@ -1,7 +1,7 @@
 import o from "./KvSimpleMap2.js";
 import "./KvSimpleMap.css";
 import p from "../_virtual/_plugin-vue_export-helper.js";
-const r = /* @__PURE__ */ p(o, [["__scopeId", "data-v-49496ad7"]]);
+const r = /* @__PURE__ */ p(o, [["__scopeId", "data-v-0abc47d3"]]);
 export {
   r as default
 };

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 ie } 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 re } 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, se = Ye(), G = a(() => !!se.popup), E = x(null), r = x(0), w = x(0);
+    function ce() {
+      return n.height != null ? `${n.height}px` : r.value ? `${r.value / n.aspectRatio}px` : `${100 / n.aspectRatio}%`;
     }
-    const ie = l(() => ({
+    const pe = a(() => ({
       width: n.width != null ? `${n.width}px` : "100%",
-      height: re(),
+      height: ce(),
       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 me = a(() => n.countries), fe = a(() => n.loop), A = x(!1), ve = a(() => n.autoplay && !A.value), de = 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: ye,
+      showPopupIdx: j,
+      isRunning: m,
+      start: xe
+    } = ut(me, ve, fe, de.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 he(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 be = a(() => {
+      const l = Math.max(0, Math.min(1, (r.value - 320) / 880));
+      return n.zoomFactor * (1.4 - l * (1.4 - 1));
+    }), we = a(() => {
+      if (K.value < 0) return null;
+      const e = n.countries[K.value];
       if (!e) return null;
-      const t = de(e);
+      const t = he(e);
       if (!t) return null;
-      const o = c.value * n.zoomFactor;
+      const o = f.value * be.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), ee = 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 ae = 2 * y.cx - y.xMax, ue = 2 * y.cy - y.yMax;
+        ae < e && (e = ae), ue < t && (t = ue), 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(() => ee.value ?? J.value), F = a(() => m.value ? we.value ?? ee.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) || !!re[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]], te = 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 ye.value.has(e) ? te.value : l ? o ? te.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 oe(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 ne(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 && !ne(e)) return null;
+        const t = oe(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: re[e] };
+        if (!G.value && !ne(t)) return null;
+        const o = oe(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, xe();
     }
-    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 le(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() {
+      le(n.zoomStep);
     }
-    function Ze() {
-      te(-n.zoomStep);
+    function ze() {
+      le(-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: $(pe.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, ie(v.value.country.name), 1)) : T("", !0),
+                    v.value.country.loanCount != null ? (h(), b("div", yt, ie(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.1",
+  "version": "8.13.3",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -125,5 +125,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "3e46955f45bfc6410794544fd0a750a5ed3d32f7"
+  "gitHead": "351df7e5ef5fcaff1a4f99394321c549da15a435"
 }