vue-data-ui 3.16.0 → 3.16.1

package/dist/{vue-ui-donut-Bckj-DX2.js → vue-ui-donut-Be5G38P5.js}

@@ -1,5 +1,5 @@
-import { computed as p, defineAsyncComponent as Me, useSlots as aa, shallowRef as Ie, ref as b, onMounted as vl, onBeforeUnmount as dl, toRefs as oa, watch as je, openBlock as u, createElementBlock as i, normalizeStyle as P, normalizeClass as qt, createElementVNode as w, toDisplayString as ye, createBlock as ge, createCommentVNode as d, unref as s, withCtx as _, renderSlot as k, normalizeProps as K, guardReactiveProps as Q, createSlots as Wt, createVNode as At, Fragment as T, renderList as J, mergeProps as jt, withDirectives as Tt, vShow as Pt, Teleport as na, resolveDynamicComponent as sa, createTextVNode as hl, nextTick as fl } from "vue";
-import { o as yl, q as Kt, r as ua, j as ra, t as gl, n as ia, p as Re, K as ca, s as pl, k as pe, l as ve, a4 as ml, ax as va, X as da, u as St, v as ha, a5 as fa, ae as D, G as bl, a6 as we, a7 as A, as as wl, C as ya, m as ga, a0 as pa, a1 as ma, T as ba, ay as kl, ai as xl } from "./lib-DBptbyyI.js";
+import { computed as m, defineAsyncComponent as Me, useSlots as aa, shallowRef as Ie, ref as b, onMounted as vl, onBeforeUnmount as dl, toRefs as oa, watch as je, openBlock as u, createElementBlock as i, normalizeStyle as L, normalizeClass as qt, createElementVNode as w, toDisplayString as ye, createBlock as ge, createCommentVNode as d, unref as s, withCtx as _, renderSlot as k, normalizeProps as K, guardReactiveProps as Q, createSlots as Wt, createVNode as At, Fragment as P, renderList as J, mergeProps as jt, withDirectives as Tt, vShow as Pt, Teleport as na, resolveDynamicComponent as sa, createTextVNode as hl, nextTick as fl } from "vue";
+import { o as yl, q as Kt, r as ua, j as ra, t as gl, n as ia, p as Re, K as ca, s as pl, k as pe, l as ve, a4 as ml, ax as va, X as da, u as St, v as ha, a5 as fa, ae as X, G as bl, a6 as we, a7 as A, as as wl, C as ya, m as ga, a0 as pa, a1 as ma, T as ba, ay as kl, ai as xl } from "./lib-DBptbyyI.js";
 import { f as wa, b as ka } from "./labelUtils-CqTHa20R.js";
 import { t as xa, u as $a } from "./useResponsive-DfdjqQps.js";
 import { u as Ca } from "./useConfig-DO94Aj5s.js";
@@ -33,37 +33,37 @@ function Na(it) {
     segregated: Yt,
     isSmallArc: Dt
   } = it;
-  return { smallArcLayoutsClassic: p(() => {
+  return { smallArcLayoutsClassic: m(() => {
     if (ct.value.type !== "classic") return {};
     const Qe = {}, E = Lt.value || [];
     if (!E.length) return Qe;
-    const Y = Ke.value.width / 2, S = Ke.value.height / 2, Fe = vt.value.top + 16, ht = Ke.value.height - vt.value.bottom - 16, Je = Mt.value, ft = Je / 3, yt = Je * 1.5, ne = 8, me = 6, Ze = Y - (dt.value + me), et = Y + (dt.value + me), gt = !!ct.value.style.chart.layout.curvedMarkers;
-    function pt({ midX: h, midY: y, bandX: f, bandY: C }) {
+    const B = Ke.value.width / 2, M = Ke.value.height / 2, Fe = vt.value.top + 16, ht = Ke.value.height - vt.value.bottom - 16, Je = Mt.value, ft = Je / 3, yt = Je * 1.5, ne = 8, me = 6, Ze = B - (dt.value + me), et = B + (dt.value + me), gt = !!ct.value.style.chart.layout.curvedMarkers;
+    function pt({ midX: h, midY: g, bandX: f, bandY: C }) {
       if (!gt)
-        return `M ${h} ${y} L ${h} ${C} L ${f} ${C}`;
-      const L = f < Y ? -1 : 1, M = f - h, le = C - y, ae = Math.sqrt(M * M + le * le) || 1, ke = h - Y, g = y - S, oe = Math.sqrt(ke * ke + g * g) || 1, se = ke / oe, F = g / oe, Oe = oe + 9;
+        return `M ${h} ${g} L ${h} ${C} L ${f} ${C}`;
+      const I = f < B ? -1 : 1, F = f - h, le = C - g, ae = Math.sqrt(F * F + le * le) || 1, ke = h - B, p = g - M, oe = Math.sqrt(ke * ke + p * p) || 1, se = ke / oe, z = p / oe, Oe = oe + 9;
       function e({ x: _e, y: de }) {
-        const re = _e - Y, Z = de - S, Ae = Math.sqrt(re * re + Z * Z) || 1;
+        const re = _e - B, Z = de - M, Ae = Math.sqrt(re * re + Z * Z) || 1;
         if (Ae >= Oe) return { x: _e, y: de };
         const Te = Oe / Ae;
         return {
-          x: Y + re * Te,
-          y: S + Z * Te
+          x: B + re * Te,
+          y: M + Z * Te
         };
       }
       if (ae < 56) {
-        const _e = M / ae;
+        const _e = F / ae;
         let re = -(le / ae), Z = _e;
-        const Ae = (h + f) * 0.5, Te = (y + C) * 0.5, q = Ae + re, kt = Te + Z, Xt = (q - Y) * (q - Y) + (kt - S) * (kt - S), He = Ae - re, Ge = Te - Z;
-        (He - Y) * (He - Y) + (Ge - S) * (Ge - S) > Xt && (re = -re, Z = -Z);
-        const at = 0.78, $t = h + M * at, Nt = y + le * at, qe = Math.max(0, Math.min(1, (ae - 18) / 44)), x = qe * qe * (3 - 2 * qe);
+        const Ae = (h + f) * 0.5, Te = (g + C) * 0.5, W = Ae + re, kt = Te + Z, Xt = (W - B) * (W - B) + (kt - M) * (kt - M), He = Ae - re, Ge = Te - Z;
+        (He - B) * (He - B) + (Ge - M) * (Ge - M) > Xt && (re = -re, Z = -Z);
+        const at = 0.78, $t = h + F * at, Nt = g + le * at, qe = Math.max(0, Math.min(1, (ae - 18) / 44)), x = qe * qe * (3 - 2 * qe);
         let n = 2.5 + x * 4, he = 1 + x * 2.5;
         n *= 0.9;
         const ot = {
           x: $t + re * n + se * he,
-          y: Nt + Z * n + F * he
-        }, V = e(ot);
-        return `M ${h} ${y} Q ${V.x} ${V.y} ${f} ${C}`;
+          y: Nt + Z * n + z * he
+        }, U = e(ot);
+        return `M ${h} ${g} Q ${U.x} ${U.y} ${f} ${C}`;
       }
       let $e = ae * 0.34;
       $e < 20 && ($e = 20), $e > 46 && ($e = 46);
@@ -71,112 +71,112 @@ function Na(it) {
       ue < 22 && (ue = 22), ue > 70 && (ue = 70);
       const Ye = {
         x: h + se * $e,
-        y: y + F * $e
-      }, Ue = Y + L * Math.max(Math.abs(f - Y), Oe), Bt = {
-        x: f - L * Math.min(ue, Math.abs(Ue - f) * 0.75),
+        y: g + z * $e
+      }, Ue = B + I * Math.max(Math.abs(f - B), Oe), Bt = {
+        x: f - I * Math.min(ue, Math.abs(Ue - f) * 0.75),
         y: C
-      }, z = e(Ye), Ce = e(Bt);
-      return `M ${h} ${y} C ${z.x} ${z.y} ${Ce.x} ${Ce.y} ${f} ${C}`;
+      }, Y = e(Ye), Ce = e(Bt);
+      return `M ${h} ${g} C ${Y.x} ${Y.y} ${Ce.x} ${Ce.y} ${f} ${C}`;
     }
     function mt(h) {
-      const y = String(h ?? "").split(/\n/g), f = Math.max(0, y.length - 1), C = Je * 1.2, L = f * C;
-      return yt + L;
+      const g = String(h ?? "").split(/\n/g), f = Math.max(0, g.length - 1), C = Je * 1.2, I = f * C;
+      return yt + I;
     }
-    function bt({ arc: h, index: y }) {
-      const { x: f, y: C } = It(h.path), L = Ft(h).x, M = zt(h) - 3.5, le = mt(h.name);
+    function bt({ arc: h, index: g }) {
+      const { x: f, y: C } = It(h.path), I = Ft(h).x, F = zt(h) - 3.5, le = mt(h.name);
       return {
         arc: h,
-        index: y,
+        index: g,
         midX: f,
         midY: C,
-        inlineMarkerX: L,
-        inlineMarkerY: M,
+        inlineMarkerX: I,
+        inlineMarkerY: F,
         labelHeight: le
       };
     }
     function ze(h) {
-      const { arc: y } = h, f = y.seriesIndex ?? 0;
-      return Ot.value === f || Yt.value.includes(f) ? !1 : Dt(y, f);
+      const { arc: g } = h, f = g.seriesIndex ?? 0;
+      return Ot.value === f || Yt.value.includes(f) ? !1 : Dt(g, f);
     }
     function tt(h) {
-      const y = h.inlineMarkerY < S, f = h.inlineMarkerX < Y;
-      return y && f ? "TL" : y && !f ? "TR" : !y && f ? "BL" : "BR";
+      const g = h.inlineMarkerY < M, f = h.inlineMarkerX < B;
+      return g && f ? "TL" : g && !f ? "TR" : !g && f ? "BL" : "BR";
     }
-    function Ee(h, y) {
-      if (y.startsWith("T")) {
-        h.sort((C, L) => C.inlineMarkerY - L.inlineMarkerY || C.index - L.index);
+    function Ve(h, g) {
+      if (g.startsWith("T")) {
+        h.sort((C, I) => C.inlineMarkerY - I.inlineMarkerY || C.index - I.index);
         return;
       }
-      h.sort((C, L) => L.inlineMarkerY - C.inlineMarkerY || C.index - L.index);
+      h.sort((C, I) => I.inlineMarkerY - C.inlineMarkerY || C.index - I.index);
     }
-    function Ve({ side: h, markerX: y, markerY: f, labelY: C, connectorPath: L }) {
+    function Ee({ side: h, markerX: g, markerY: f, labelY: C, connectorPath: I }) {
       return {
         side: h,
-        labelX: h === "left" ? y - ne : y + ne,
+        labelX: h === "left" ? g - ne : g + ne,
         labelY: C + ft,
         textAnchor: h === "left" ? "end" : "start",
-        markerX: y,
+        markerX: g,
         markerY: f,
-        connectorPath: L
+        connectorPath: I
       };
     }
-    function U({
+    function H({
       candidateList: h,
-      side: y,
+      side: g,
       bandMarkerX: f,
       startY: C,
-      direction: L
+      direction: I
     }) {
-      let M = C;
+      let F = C;
       h.forEach((le) => {
-        const { index: ae, midX: ke, midY: g, labelHeight: oe } = le;
+        const { index: ae, midX: ke, midY: p, labelHeight: oe } = le;
         let se;
-        L === "down" ? (se = M, M += oe) : (M -= oe, se = M);
-        const F = se, lt = pt({
+        I === "down" ? (se = F, F += oe) : (F -= oe, se = F);
+        const z = se, lt = pt({
           midX: ke,
-          midY: g,
+          midY: p,
           bandX: f,
-          bandY: F
+          bandY: z
         });
-        Qe[ae] = Ve({
-          side: y,
+        Qe[ae] = Ee({
+          side: g,
           markerX: f,
-          markerY: F,
+          markerY: z,
           labelY: se,
           connectorPath: lt
         });
       });
     }
-    const wt = E.map((h, y) => bt({ arc: h, index: y })).filter(ze), H = {
+    const wt = E.map((h, g) => bt({ arc: h, index: g })).filter(ze), G = {
       TL: [],
       TR: [],
       BL: [],
       BR: []
     };
     return wt.forEach((h) => {
-      H[tt(h)].push(h);
-    }), Object.keys(H).forEach((h) => {
-      Ee(H[h], h);
-    }), U({
-      candidateList: H.TL,
+      G[tt(h)].push(h);
+    }), Object.keys(G).forEach((h) => {
+      Ve(G[h], h);
+    }), H({
+      candidateList: G.TL,
       side: "left",
       bandMarkerX: Ze,
       startY: Fe,
       direction: "down"
-    }), U({
-      candidateList: H.TR,
+    }), H({
+      candidateList: G.TR,
       side: "right",
       bandMarkerX: et,
       startY: Fe,
       direction: "down"
-    }), H.BL.length > 1 && U({
-      candidateList: H.BL,
+    }), G.BL.length > 1 && H({
+      candidateList: G.BL,
       side: "left",
       bandMarkerX: Ze,
       startY: ht,
       direction: "up"
-    }), H.BR.length > 1 && U({
-      candidateList: H.BR,
+    }), G.BR.length > 1 && H({
+      candidateList: G.BR,
       side: "right",
       bandMarkerX: et,
       startY: ht,
@@ -184,7 +184,7 @@ function Na(it) {
     }), Qe;
   }) };
 }
-const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative" } }, Ha = ["xmlns", "aria-describedby", "viewBox"], Ga = ["width", "height"], qa = { key: 1 }, Wa = ["id"], ja = ["stop-color"], Ka = ["offset", "stop-color"], Qa = ["offset", "stop-color"], Ja = ["stop-color"], Za = { key: 2 }, eo = ["id", "cx", "cy"], to = ["stop-color", "stop-opacity"], lo = ["stop-color"], ao = ["id"], oo = ["id"], no = ["id"], so = ["flood-color"], uo = ["id"], ro = ["flood-color"], io = ["d", "stroke", "filter"], co = ["d", "stroke", "filter"], vo = ["cx", "cy", "r", "fill", "filter"], ho = { key: 6 }, fo = ["stroke", "d"], yo = ["d", "fill", "stroke", "stroke-width", "filter"], go = { key: 0 }, po = ["d", "fill", "stroke", "stroke-width", "filter"], mo = { key: 0 }, bo = ["stroke", "d"], wo = { key: 0 }, ko = ["d", "stroke", "stroke-width", "filter"], xo = { key: 1 }, $o = ["d", "fill", "stroke", "stroke-width", "filter"], Co = ["d", "fill", "stroke", "stroke-width", "filter"], _o = { key: 1 }, Ao = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], To = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], Po = { key: 0 }, So = ["d", "fill", "stroke", "stroke-width"], Lo = ["cx", "cy", "r", "stroke"], Mo = ["cx", "cy", "r", "fill"], Io = ["cx", "cy", "r"], Fo = { key: 0 }, zo = ["d", "stroke", "fill", "onMouseenter", "onMouseleave", "onClick"], Oo = { key: 1 }, Yo = ["cx", "cy", "r"], Do = ["x", "y", "fill", "font-size"], Bo = ["x", "y", "fill", "font-size"], Xo = ["x", "y", "fill", "font-size"], No = ["x", "y", "fill", "font-size"], Ro = ["filter", "opacity"], Eo = { key: 0 }, Vo = ["x", "y"], Uo = { key: 1 }, Ho = ["cx", "cy", "fill", "stroke", "filter", "onClick", "onMouseenter", "onMouseleave"], Go = ["text-anchor", "x", "y", "onClick", "onMouseenter", "onMouseleave", "innerHTML"], qo = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "onMouseenter", "onMouseleave"], Wo = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "onMouseenter", "onMouseleave", "innerHTML"], jo = ["cx", "cy", "fill", "stroke", "filter", "onClick", "onMouseenter", "onMouseleave"], Ko = ["text-anchor", "x", "y", "onClick", "onMouseenter", "onMouseleave", "innerHTML"], Qo = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "onMouseenter", "onMouseleave"], Jo = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "onMouseenter", "onMouseleave", "innerHTML"], Zo = { key: 2 }, en = ["x", "y", "width"], tn = ["x", "y", "width"], ln = {
+const Ra = ["id"], Va = ["id"], Ea = ["id"], Ua = { style: { position: "relative" } }, Ha = ["xmlns", "aria-describedby", "viewBox"], Ga = ["width", "height"], qa = { key: 1 }, Wa = ["id"], ja = ["stop-color"], Ka = ["offset", "stop-color"], Qa = ["offset", "stop-color"], Ja = ["stop-color"], Za = { key: 2 }, eo = ["id", "cx", "cy"], to = ["stop-color", "stop-opacity"], lo = ["stop-color"], ao = ["id"], oo = ["id"], no = ["id"], so = ["flood-color"], uo = ["id"], ro = ["flood-color"], io = ["d", "stroke", "filter"], co = ["d", "stroke", "filter"], vo = ["cx", "cy", "r", "fill", "filter"], ho = { key: 6 }, fo = ["stroke", "d"], yo = ["d", "fill", "stroke", "stroke-width", "filter"], go = { key: 0 }, po = ["d", "fill", "stroke", "stroke-width", "filter"], mo = { key: 0 }, bo = ["stroke", "d"], wo = { key: 0 }, ko = ["d", "stroke", "stroke-width", "filter"], xo = { key: 1 }, $o = ["d", "fill", "stroke", "stroke-width", "filter"], Co = ["d", "fill", "stroke", "stroke-width", "filter"], _o = { key: 1 }, Ao = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], To = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], Po = { key: 0 }, So = ["d", "fill", "stroke", "stroke-width"], Lo = ["cx", "cy", "r", "stroke"], Mo = ["cx", "cy", "r", "fill"], Io = ["cx", "cy", "r"], Fo = { key: 0 }, zo = ["d", "stroke", "fill", "onMouseenter", "onMouseleave", "onClick"], Oo = { key: 1 }, Yo = ["cx", "cy", "r"], Do = ["x", "y", "fill", "font-size"], Bo = ["x", "y", "fill", "font-size"], Xo = ["x", "y", "fill", "font-size"], No = ["x", "y", "fill", "font-size"], Ro = ["filter", "opacity"], Vo = { key: 0 }, Eo = ["x", "y"], Uo = { key: 1 }, Ho = ["cx", "cy", "fill", "stroke", "filter", "onClick", "onMouseenter", "onMouseleave"], Go = ["text-anchor", "x", "y", "onClick", "onMouseenter", "onMouseleave", "innerHTML"], qo = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "onMouseenter", "onMouseleave"], Wo = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "onMouseenter", "onMouseleave", "innerHTML"], jo = ["cx", "cy", "fill", "stroke", "filter", "onClick", "onMouseenter", "onMouseleave"], Ko = ["text-anchor", "x", "y", "onClick", "onMouseenter", "onMouseleave", "innerHTML"], Qo = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "onMouseenter", "onMouseleave"], Jo = ["text-anchor", "x", "y", "fill", "font-size", "onClick", "onMouseenter", "onMouseleave", "innerHTML"], Zo = { key: 2 }, en = ["x", "y", "width"], tn = ["x", "y", "width"], ln = {
   key: 0,
   style: { position: "absolute", top: "100%", left: "0", width: "100%" },
   "data-dom-to-png-ignore": "",
@@ -213,35 +213,35 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
   },
   emits: ["selectLegend", "selectDatapoint", "copyAlt"],
   setup(it, { expose: ct, emit: Lt }) {
-    const Ke = Me(() => import("./Tooltip-Bf-kM3_A.js")), vt = Me(() => import("./BaseIcon-Cb3zzG6s.js")), Mt = Me(() => import("./vue-ui-accordion-nvggWcGN.js")), dt = Me(() => import("./DataTable-DT2kIdQ6.js")), It = Me(() => import("./PenAndPaper-DARlvvKW.js")), Ft = Me(() => import("./UserOptions-DWHf8jyO.js")), zt = Me(() => import("./PackageVersion-IIGK_e2C.js")), Ot = Me(() => import("./BaseDraggableDialog-CIb-iD9g.js")), { vue_ui_donut: Yt } = Ca(), { isThemeValid: Dt, warnInvalidTheme: Jt } = Sa(), Qe = aa(), E = it, Y = p({
+    const Ke = Me(() => import("./Tooltip-Bf-kM3_A.js")), vt = Me(() => import("./BaseIcon-Cb3zzG6s.js")), Mt = Me(() => import("./vue-ui-accordion-nvggWcGN.js")), dt = Me(() => import("./DataTable-DT2kIdQ6.js")), It = Me(() => import("./PenAndPaper-Ct3qJ4lA.js")), Ft = Me(() => import("./UserOptions-rW2fRf3V.js")), zt = Me(() => import("./PackageVersion-DPO-OOVI.js")), Ot = Me(() => import("./BaseDraggableDialog-CIb-iD9g.js")), { vue_ui_donut: Yt } = Ca(), { isThemeValid: Dt, warnInvalidTheme: Jt } = Sa(), Qe = aa(), E = it, B = m({
       get() {
         return !!E.dataset && E.dataset.length;
       },
       set(t) {
         return t;
       }
-    }), S = Ie(null), Fe = b(null), ht = b(null), Je = b(null), ft = Ie(null), yt = Ie(null), ne = Ie(null), me = Ie(null), Ze = Ie(null), et = Ie(null), gt = b(0), pt = b(0), mt = b(0), bt = b(!1), ze = b(null), tt = b(null), Ee = b(!1), Ve = b(!1), U = b(null), wt = b({ x: 0, y: 0 }), H = b("pointer"), h = b(!1), y = p({
+    }), M = Ie(null), Fe = b(null), ht = b(null), Je = b(null), ft = Ie(null), yt = Ie(null), ne = Ie(null), me = Ie(null), Ze = Ie(null), et = Ie(null), gt = b(0), pt = b(0), mt = b(0), bt = b(!1), ze = b(null), tt = b(null), Ve = b(!1), Ee = b(!1), H = b(null), wt = b({ x: 0, y: 0 }), G = b("pointer"), h = b(!1), g = m({
       get: () => e.value.style.chart.layout.labels.percentage.fontSize,
       set: (t) => t
-    }), f = p({
+    }), f = m({
       get: () => e.value.style.chart.layout.labels.name.fontSize,
       set: (t) => t
-    }), C = p({
+    }), C = m({
       get: () => e.value.style.chart.layout.labels.dataLabels.smallArcClusterFontSize,
       set: (t) => t
     });
-    let L = !1;
-    const M = () => {
-      !e.value.autoSize || L || (L = !0, requestAnimationFrame(() => {
-        L = !1;
-        const t = e.value, o = Fe.value, l = q.value;
+    let I = !1;
+    const F = () => {
+      !e.value.autoSize || I || (I = !0, requestAnimationFrame(() => {
+        I = !1;
+        const t = e.value, o = Fe.value, l = W.value;
         if (!t.autoSize || !o || !l) return;
-        const [a, r, c, m] = l.getAttribute("viewBox").split(" ").map(Number), $ = { x: a, y: r, width: c, height: m }, N = [
+        const [a, r, c, y] = l.getAttribute("viewBox").split(" ").map(Number), $ = { x: a, y: r, width: c, height: y }, D = [
           {
             selector: ".vue-data-ui-datalabel-value",
             baseSize: t.style.chart.layout.labels.percentage.fontSize,
             minSize: t.style.chart.layout.labels.percentage.minFontSize,
-            sizeRef: y
+            sizeRef: g
           },
           {
             selector: ".vue-data-ui-datalabel-name",
@@ -256,8 +256,8 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
             sizeRef: C
           }
         ];
-        N.map((j) => o.querySelectorAll(j.selector).length).reduce((j, Ne) => j + Ne, 0) !== 0 && N.forEach(({ selector: j, baseSize: Ne, minSize: Zl, sizeRef: ea }) => {
-          o.querySelectorAll(j).forEach((ta) => {
+        D.map((V) => o.querySelectorAll(V.selector).length).reduce((V, Ne) => V + Ne, 0) !== 0 && D.forEach(({ selector: V, baseSize: Ne, minSize: Zl, sizeRef: ea }) => {
+          o.querySelectorAll(V).forEach((ta) => {
             const la = ya({
               el: ta,
               bounds: $,
@@ -272,31 +272,31 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
       }));
     };
     vl(async () => {
-      bt.value = !0, ke(), requestAnimationFrame(M);
+      bt.value = !0, ke(), requestAnimationFrame(F);
     });
     let le;
     vl(() => {
-      S.value && (le = new ResizeObserver((t) => {
+      M.value && (le = new ResizeObserver((t) => {
         for (const o of t) {
           const { width: l, height: a } = o.contentRect;
           if (l > 0 && a > 0) {
-            M();
+            F();
             break;
           }
         }
-      }), le.observe(S.value.parentElement));
+      }), le.observe(M.value.parentElement));
     }), dl(() => {
       le?.disconnect();
     }), dl(() => {
       ne.value && (me.value && ne.value.unobserve(me.value), ne.value.disconnect());
     });
-    const ae = p(() => !!e.value.debug);
+    const ae = m(() => !!e.value.debug);
     function ke() {
       if (yl(E.dataset) ? (Kt({
         componentName: "VueUiDonut",
         type: "dataset",
         debug: ae.value
-      }), Y.value = !1, Ue.value = !0) : (E.dataset.forEach((t, o) => {
+      }), B.value = !1, Ue.value = !0) : (E.dataset.forEach((t, o) => {
         ua({
           datasetObject: t,
           requiredAttributes: ["name", "values"]
@@ -307,7 +307,7 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
             property: l,
             index: o,
             debug: ae.value
-          }), Y.value = !1, Ue.value = !0;
+          }), B.value = !1, Ue.value = !0;
         });
       }), E.dataset.forEach((t, o) => {
         (!t.name || t.name === "") && Kt({
@@ -320,7 +320,7 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
       })), yl(E.dataset) || (Ue.value = e.value.loading), e.value.responsive) {
         const t = xa(() => {
           const { width: o, height: l } = $a({
-            chart: S.value,
+            chart: M.value,
             title: e.value.style.chart.title.text ? ft.value : null,
             legend: e.value.style.chart.legend.show ? yt.value : null,
             source: Ze.value,
@@ -328,13 +328,13 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
             padding: e.value.autoSize ? void 0 : He.value
           });
           requestAnimationFrame(() => {
-            n.value.width = o, n.value.height = l, M();
+            n.value.width = o, n.value.height = l, F();
           });
         });
-        ne.value && (me.value && ne.value.unobserve(me.value), ne.value.disconnect()), ne.value = new ResizeObserver(t), me.value = S.value.parentNode, ne.value.observe(me.value);
+        ne.value && (me.value && ne.value.unobserve(me.value), ne.value.disconnect()), ne.value = new ResizeObserver(t), me.value = M.value.parentNode, ne.value.observe(me.value);
       }
     }
-    const g = b(ra()), oe = b(!1), se = b(""), F = b(null), lt = b(0);
+    const p = b(ra()), oe = b(!1), se = b(""), z = b(null), lt = b(0);
     function Oe() {
       const t = Qt({
         userConfig: E.config,
@@ -361,7 +361,7 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
       }
       return o;
     }
-    const e = b(Oe()), xe = p(() => e.value.userOptions.useCursorPointer), $e = p(() => gl({
+    const e = b(Oe()), xe = m(() => e.value.userOptions.useCursorPointer), $e = m(() => gl({
       defaultConfig: {
         useCssAnimation: !1,
         table: { show: !1 },
@@ -422,17 +422,17 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
         defaultConfig: e.value,
         userConfig: $e.value
       })
-    }), z = b(!0), Ce = b(0), _e = b(!1);
+    }), Y = b(!0), Ce = b(0), _e = b(!1);
     let de = null;
     function re(t = 1e3) {
       return new Promise((o) => {
         const l = performance.now();
         function a(r) {
-          const c = r - l, m = Math.min(
+          const c = r - l, y = Math.min(
             c / t,
             1
-          ), $ = xl(m);
-          Ce.value = $, m < 1 ? de = requestAnimationFrame(a) : (Ce.value = 1, de = null, o());
+          ), $ = xl(y);
+          Ce.value = $, y < 1 ? de = requestAnimationFrame(a) : (Ce.value = 1, de = null, o());
         }
         de !== null && cancelAnimationFrame(de), Ce.value = 0, de = requestAnimationFrame(a);
       });
@@ -449,11 +449,11 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
           await re(a);
         } else
           Ce.value = 1;
-        z.value = !1;
+        Y.value = !1;
       },
       { immediate: !0 }
     );
-    const { userOptionsVisible: Z, setUserOptionsVisibility: Ae, keepUserOptionState: Te } = La({ config: e.value }), { svgRef: q } = Ma({ config: e.value.style.chart.title });
+    const { userOptionsVisible: Z, setUserOptionsVisibility: Ae, keepUserOptionState: Te } = La({ config: e.value }), { svgRef: W } = Ma({ config: e.value.style.chart.title });
     function kt() {
       Ae(!0);
     }
@@ -463,7 +463,7 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
     je(() => E.config, (t) => {
       ue.value || (e.value = Oe()), Z.value = !e.value.userOptions.showOnChartHover, ke(), gt.value += 1, pt.value += 1, mt.value += 1, x.value.dataLabels.show = e.value.style.chart.layout.labels.dataLabels.show, x.value.showTable = e.value.table.show, x.value.showTooltip = e.value.style.chart.tooltip.show, n.value.height = e.value.style.chart.height, n.value.width = e.value.style.chart.width;
     }, { deep: !0 });
-    const He = p(() => {
+    const He = m(() => {
       const { top: t, right: o, bottom: l, left: a } = e.value.style.chart.padding;
       return {
         css: `padding:${t}px ${o}px ${l}px ${a}px`,
@@ -473,10 +473,10 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
         left: a
       };
     }), { isPrinting: Ge, isImaging: xt, generatePdf: at, generateImage: $t } = _a({
-      elementId: `donut__${g.value}`,
+      elementId: `donut__${p.value}`,
       fileName: e.value.style.chart.title.text || "vue-ui-donut",
       options: e.value.userOptions.print
-    }), Nt = p(() => e.value.userOptions.show && !e.value.style.chart.title.text), qe = p(() => ia(e.value.customPalette)), x = b({
+    }), Nt = m(() => e.value.userOptions.show && !e.value.style.chart.title.text), qe = m(() => ia(e.value.customPalette)), x = b({
       dataLabels: {
         show: e.value.style.chart.layout.labels.dataLabels.show
       },
@@ -495,12 +495,12 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
     const n = b({
       height: e.value.style.chart.height,
       width: e.value.style.chart.width
-    }), he = p(() => {
+    }), he = m(() => {
       if (e.value.pie)
-        return I.value;
-      const t = e.value.style.chart.layout.donut.strokeWidth / 512, o = Math.min(n.value.width, n.value.height) * t, l = o > I.value ? I.value : o;
+        return O.value;
+      const t = e.value.style.chart.layout.donut.strokeWidth / 512, o = Math.min(n.value.width, n.value.height) * t, l = o > O.value ? O.value : o;
       return Math.max(l, 12 * (1 + t));
-    }), ot = Lt, V = p(() => Ye.value.sort((t, o) => {
+    }), ot = Lt, U = m(() => Ye.value.sort((t, o) => {
       const l = Array.isArray(t.values) ? t.values.reduce((r, c) => r + c, 0) : t.value ?? 0, a = Array.isArray(o.values) ? o.values.reduce((r, c) => r + c, 0) : o.value ?? 0;
       return t.ghost && !o.ghost ? 1 : o.ghost && !t.ghost ? -1 : a - l;
     }).map((t, o) => ({
@@ -512,79 +512,79 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
       patternIndex: o,
       seriesIndex: o,
       ghost: !1,
-      pattern: `pattern_${g.value}_${o}`
+      pattern: `pattern_${p.value}_${o}`
     })));
     je(() => E.dataset, (t) => {
       Array.isArray(t) && t.length > 0 && (Ue.value = !1);
     }, { immediate: !0 });
-    const W = Ie(V.value);
-    je(() => V.value, (t) => {
-      W.value = t, requestAnimationFrame(M);
+    const j = Ie(U.value);
+    je(() => U.value, (t) => {
+      j.value = t, requestAnimationFrame(F);
     });
     function $l() {
-      return V.value.map((t) => ({
+      return U.value.map((t) => ({
         name: t.name,
         color: t.color,
         value: t.value
       }));
     }
-    const B = b([]), Pe = b(!1), De = b(null);
+    const N = b([]), Pe = b(!1), De = b(null);
     function Zt({ from: t, to: o, duration: l, onUpdate: a, onDone: r, easing: c = xl }) {
-      const m = performance.now();
-      function $(N) {
-        const R = Math.min((N - m) / l, 1), j = c(R), Ne = t + (o - t) * j;
-        a(Ne, R), R < 1 ? requestAnimationFrame($) : (a(o, 1), r && r());
+      const y = performance.now();
+      function $(D) {
+        const S = Math.min((D - y) / l, 1), V = c(S), Ne = t + (o - t) * V;
+        a(Ne, S), S < 1 ? requestAnimationFrame($) : (a(o, 1), r && r());
       }
       requestAnimationFrame($);
     }
     function Cl() {
-      B.value.length ? B.value = [] : nt.value.forEach((t, o) => {
-        B.value.push(o);
+      N.value.length ? N.value = [] : nt.value.forEach((t, o) => {
+        N.value.push(o);
       });
     }
     function Ct(t) {
-      const o = V.value.find((r, c) => c === t);
-      let a = W.value.find((r, c) => c === t).value;
-      if (B.value.includes(t)) {
+      const o = U.value.find((r, c) => c === t);
+      let a = j.value.find((r, c) => c === t).value;
+      if (N.value.includes(t)) {
         let c = function() {
-          W.value = W.value.map(
-            ($, N) => t === N ? { ...$, value: r } : $
+          j.value = j.value.map(
+            ($, D) => t === D ? { ...$, value: r } : $
           );
-        }, m = function() {
+        }, y = function() {
           Pe.value = !0, De.value = t, Zt({
             from: a,
             to: r,
             duration: e.value.serieToggleAnimation.durationMs,
-            onUpdate: ($, N) => {
-              W.value = W.value.map(
-                (R, j) => t === j ? { ...R, value: $ } : R
-              ), requestAnimationFrame(M);
+            onUpdate: ($, D) => {
+              j.value = j.value.map(
+                (S, V) => t === V ? { ...S, value: $ } : S
+              ), requestAnimationFrame(F);
             },
             onDone: () => {
               c(), Pe.value = !1, De.value = null;
             }
           });
         };
-        B.value = B.value.filter(($) => $ !== t);
+        N.value = N.value.filter(($) => $ !== t);
         const r = o.value;
-        e.value.serieToggleAnimation.show && e.value.type === "classic" ? m() : (c(), requestAnimationFrame(M));
-      } else if (B.value.length < V.value.length - 1) {
+        e.value.serieToggleAnimation.show && e.value.type === "classic" ? y() : (c(), requestAnimationFrame(F));
+      } else if (N.value.length < U.value.length - 1) {
         let r = function() {
-          B.value.push(t), W.value = W.value.map(
-            (m, $) => t === $ ? { ...m, value: 0 } : m
+          N.value.push(t), j.value = j.value.map(
+            (y, $) => t === $ ? { ...y, value: 0 } : y
           );
         }, c = function() {
           Pe.value = !0, De.value = t, Zt({
             from: a,
             to: 0,
             duration: e.value.serieToggleAnimation.durationMs,
-            onUpdate: (m, $) => {
-              W.value = W.value.map(
-                (N, R) => t === R ? { ...N, value: m } : N
-              ), requestAnimationFrame(M);
+            onUpdate: (y, $) => {
+              j.value = j.value.map(
+                (D, S) => t === S ? { ...D, value: y } : D
+              ), requestAnimationFrame(F);
             },
             onDone: () => {
-              r(), requestAnimationFrame(M), Pe.value = !1, De.value = null;
+              r(), requestAnimationFrame(F), Pe.value = !1, De.value = null;
             }
           });
         };
@@ -597,27 +597,27 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
       })));
     }
     function el(t) {
-      if (!V.value.length)
+      if (!U.value.length)
         return e.value.debug && console.warn("VueUiDonut - There are no series to show."), null;
-      const o = V.value.find((l) => l.name === t);
+      const o = U.value.find((l) => l.name === t);
       return o || (e.value.debug && console.warn(`VueUiDonut - Series name not found "${t}"`), null);
     }
     function _l(t) {
       const o = el(t);
-      o !== null && B.value.includes(o.seriesIndex) && Ct(o.seriesIndex);
+      o !== null && N.value.includes(o.seriesIndex) && Ct(o.seriesIndex);
     }
     function Al(t) {
       const o = el(t);
-      o !== null && (B.value.includes(o.seriesIndex) || Ct(o.seriesIndex));
+      o !== null && (N.value.includes(o.seriesIndex) || Ct(o.seriesIndex));
     }
-    const Tl = p(
+    const Tl = m(
       () => Ye.value.reduce(
         (t, o) => t + o.values.reduce((l, a) => l + a, 0),
         0
       )
-    ), be = p(() => {
-      if (z.value && !ue.value) {
-        const t = Ce.value, o = V.value.map((a) => ({
+    ), be = m(() => {
+      if (Y.value && !ue.value) {
+        const t = Ce.value, o = U.value.map((a) => ({
           ...a,
           value: a.value * t,
           color: a.color,
@@ -630,18 +630,18 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
           ghost: !0
         }), o;
       } else
-        return W.value.forEach((t) => {
+        return j.value.forEach((t) => {
           if ([null, void 0].includes(t.values))
             return {
               ...t,
               values: []
             };
-        }), W.value.map((t, o) => ({
+        }), j.value.map((t, o) => ({
           ...t,
           seriesIndex: o
-        })).filter((t, o) => !B.value.includes(o));
-    }), nt = p(() => Ye.value.map((t, o) => {
-      const l = (t.values || []).reduce((r, c) => r + c, 0), a = l / Ye.value.map((r) => (r.values || []).reduce((c, m) => c + m, 0)).reduce((r, c) => r + c, 0);
+        })).filter((t, o) => !N.value.includes(o));
+    }), nt = m(() => Ye.value.map((t, o) => {
+      const l = (t.values || []).reduce((r, c) => r + c, 0), a = l / Ye.value.map((r) => (r.values || []).reduce((c, y) => c + y, 0)).reduce((r, c) => r + c, 0);
       return {
         name: t.name,
         color: pl(t.color) || qe.value[o] || Re[o] || Re[o % Re.length],
@@ -662,29 +662,29 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
         r: e.value.style.chart.legend.roundingPercentage
       })), r = Ut({
         val: l,
-        percentage: B.value.includes(o) ? `${Xl(t.proportion * 100)}%` : a,
+        percentage: N.value.includes(o) ? `${Xl(t.proportion * 100)}%` : a,
         showVal: e.value.style.chart.legend.showValue,
         showPercentage: e.value.style.chart.legend.showPercentage,
         config: e.value.style.chart.legend
       });
       return {
         ...t,
-        opacity: B.value.includes(o) ? 0.5 : 1,
+        opacity: N.value.includes(o) ? 0.5 : 1,
         segregate: () => !Pe.value && Ct(o),
-        isSegregated: B.value.includes(o),
+        isSegregated: N.value.includes(o),
         display: `${t.name}${e.value.style.chart.legend.showPercentage || e.value.style.chart.legend.showValue ? ": " : ""}${r}`
       };
-    })), Pl = p(() => ({
+    })), Pl = m(() => ({
       cy: "donut-div-legend",
       backgroundColor: e.value.style.chart.legend.backgroundColor,
       color: e.value.style.chart.legend.color,
       fontSize: e.value.style.chart.legend.fontSize,
       paddingBottom: 12,
       fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
-    })), I = p(() => {
+    })), O = m(() => {
       const t = e.value.style.chart.layout.donut.radiusRatio, o = Math.max(0.1, Math.min(0.50001, t)), l = Math.min(n.value.width * o, n.value.height * o);
       return Math.max(12, l);
-    }), G = p(() => ml({ series: be.value }, n.value.width / 2, n.value.height / 2, I.value, I.value, 1.99999, 2, 1, 360, 105.25, he.value)), Sl = p(() => Math.abs(be.value.map((t) => t.value).reduce((t, o) => t + o, 0)) > 0), Ll = p(() => ml({
+    }), q = m(() => ml({ series: be.value }, n.value.width / 2, n.value.height / 2, O.value, O.value, 1.99999, 2, 1, 360, 105.25, he.value)), Sl = m(() => Math.abs(be.value.map((t) => t.value).reduce((t, o) => t + o, 0)) > 0), Ll = m(() => ml({
       series: [
         {
           value: 1,
@@ -696,7 +696,7 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
           absoluteValues: [1]
         }
       ]
-    }, n.value.width / 2, n.value.height / 2, I.value, I.value, 1.99999, 2, 1, 360, 105.25, he.value)), O = p(() => G.value.filter((t) => !t.ghost)), v = p(() => {
+    }, n.value.width / 2, n.value.height / 2, O.value, O.value, 1.99999, 2, 1, 360, 105.25, he.value)), T = m(() => q.value.filter((t) => !t.ghost)), v = m(() => {
       const t = Math.max(...be.value.map((l) => l.value)), o = be.value.map((l) => l.value / t);
       return va({
         series: o,
@@ -705,14 +705,14 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
           y: n.value.height / 2
         },
         maxRadius: Math.min(n.value.width, n.value.height) / 3,
-        hasGhost: z.value
+        hasGhost: Y.value
       });
     });
     function Se(t) {
       return t.x > n.value.width / 2 + 6 ? "start" : t.x < n.value.width / 2 - 6 ? "end" : "middle";
     }
     function Ml(t) {
-      return t.middlePoint.y > n.value.height / 2 ? D({ initX: t.middlePoint.x, initY: t.middlePoint.y, offset: 100, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y : D({ initX: t.middlePoint.x, initY: t.middlePoint.y, offset: 0, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y - 100;
+      return t.middlePoint.y > n.value.height / 2 ? X({ initX: t.middlePoint.x, initY: t.middlePoint.y, offset: 100, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y : X({ initX: t.middlePoint.x, initY: t.middlePoint.y, offset: 0, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y - 100;
     }
     function ee(t) {
       return t.proportion * 100 > e.value.style.chart.layout.labels.dataLabels.hideUnderValue;
@@ -721,18 +721,18 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
       const l = e.value.style.chart.layout.labels.dataLabels.hideUnderValue, a = e.value.style.chart.layout.labels.dataLabels.smallArcClusterThreshold, c = (zl.value[o] ?? t.proportion ?? 0) * 100;
       return c > l && c <= a;
     }
-    const { smallArcLayoutsClassic: X } = Na({
+    const { smallArcLayoutsClassic: R } = Na({
       FINAL_CONFIG: e,
-      noGhostDonut: O,
+      noGhostDonut: T,
       svg: n,
       padding: He,
       labels_inline_fontSize: C,
-      minSize: I,
+      minSize: O,
       findArcMidpoint: kl,
       calcMarkerOffsetX: A,
       calcMarkerOffsetY: we,
       animatingIndex: De,
-      segregated: B,
+      segregated: N,
       isSmallArc: Il
     });
     function tl(t, o) {
@@ -751,34 +751,34 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
     function Fl(t) {
       return [...t].map((o) => o.value).reduce((o, l) => o + l, 0);
     }
-    const te = p(() => be.value.map((t) => t.value).reduce((t, o) => t + o, 0)), zl = p(() => {
-      const t = V.value.reduce((o, l) => o + l.value, 0);
-      return t <= 0 ? [] : V.value.map((o) => o.value / t);
-    }), Rt = p(() => te.value / be.value.length);
+    const te = m(() => be.value.map((t) => t.value).reduce((t, o) => t + o, 0)), zl = m(() => {
+      const t = U.value.reduce((o, l) => o + l.value, 0);
+      return t <= 0 ? [] : U.value.map((o) => o.value / t);
+    }), Rt = m(() => te.value / be.value.length);
     function ll(t) {
       return Pe.value ? t.proportion * 100 : t.value / te.value * 100;
     }
-    const Et = b(null), st = b(!1);
+    const Vt = b(null), st = b(!1);
     function fe({ datapoint: t, seriesIndex: o }) {
-      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: o }), oe.value = !1, F.value = null, U.value = null, H.value = "pointer";
+      e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: o }), oe.value = !1, z.value = null, H.value = null, G.value = "pointer";
     }
     function ie({ datapoint: t, relativeIndex: o, seriesIndex: l, show: a = !1, triggerMode: r = "pointer" }) {
-      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: l }), H.value = r, U.value = o, Et.value = { datapoint: t, seriesIndex: l, config: e.value, series: V.value }, oe.value = a, F.value = o;
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: l }), G.value = r, H.value = o, Vt.value = { datapoint: t, seriesIndex: l, config: e.value, series: U.value }, oe.value = a, z.value = o;
       let c = "";
-      const m = e.value.style.chart.tooltip.customFormat;
-      if (st.value = !1, ba(m))
+      const y = e.value.style.chart.tooltip.customFormat;
+      if (st.value = !1, ba(y))
         try {
-          const $ = m({
+          const $ = y({
             seriesIndex: l,
             datapoint: t,
-            series: V.value,
+            series: U.value,
             config: e.value
           });
           typeof $ == "string" && (se.value = $, st.value = !0);
         } catch {
           console.warn("Custom format cannot be applied."), st.value = !1;
         }
-      st.value || (c += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${t.name}</div>`, c += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 60 60" height="14" width="14"><circle cx="30" cy="30" r="30" stroke="none" fill="${t.color}"/>${Qe.pattern ? `<circle cx="30" cy="30" r="30" stroke="none" fill="url(#pattern_${g.value}_${l})"/>` : ""}</svg>`, c += `<b>${Ut({
+      st.value || (c += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;">${t.name}</div>`, c += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 60 60" height="14" width="14"><circle cx="30" cy="30" r="30" stroke="none" fill="${t.color}"/>${Qe.pattern ? `<circle cx="30" cy="30" r="30" stroke="none" fill="url(#pattern_${p.value}_${l})"/>` : ""}</svg>`, c += `<b>${Ut({
         showVal: e.value.style.chart.tooltip.showValue,
         showPercentage: e.value.style.chart.tooltip.showPercentage,
         val: `<span>${pe(
@@ -814,7 +814,7 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
       })}</b></div>`, e.value.style.chart.comments.showInTooltip && t.comment && (c += `<div class="vue-data-ui-tooltip-comment" style="background:${t.color}20; padding: 6px; margin-bottom: 6px; margin-top:6px; border-left: 1px solid ${t.color}">${t.comment}</div>`), se.value = `<div>${c}</div>`);
     }
     function Ol(t, o) {
-      const l = X.value[o];
+      const l = R.value[o];
       if (l)
         return {
           textAnchor: l.textAnchor,
@@ -829,24 +829,24 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
       };
     }
     function Yl(t, o, l) {
-      const { textAnchor: a, x: r } = Ol(t, o), c = _t(t), m = `
+      const { textAnchor: a, x: r } = Ol(t, o), c = _t(t), y = `
         <tspan
             class="vue-data-ui-datalabel-inline"
             fill="${e.value.style.chart.layout.labels.percentage.color}"
-            font-size="${l ? C.value : y.value}px"
+            font-size="${l ? C.value : g.value}px"
             style="font-weight:${e.value.style.chart.layout.labels.percentage.bold ? "bold" : ""}"
         >${c}</tspan>
     `, $ = String(t.name ?? "").split(/\n/g);
-      let N = "";
-      return $.forEach((R, j) => {
-        j === 0 ? N += `
+      let D = "";
+      return $.forEach((S, V) => {
+        V === 0 ? D += `
                 <tspan
                     class="${l ? "vue-data-ui-datalabel-inline" : "vue-data-ui-datalabel-name"}"
                     fill="${e.value.style.chart.layout.labels.name.color}"
                     font-size="${l ? C.value : f.value}px"
                     style="font-weight:${e.value.style.chart.layout.labels.name.bold ? "bold" : ""}"
-                >${R}</tspan>
-            ` : N += `
+                >${S}</tspan>
+            ` : D += `
                 <tspan
                     class="${l ? "vue-data-ui-datalabel-inline" : "vue-data-ui-datalabel-name"}"
                     x="${r}"
@@ -854,12 +854,12 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
                     fill="${e.value.style.chart.layout.labels.name.color}"
                     font-size="${l ? C.value : f.value}px"
                     style="font-weight:${e.value.style.chart.layout.labels.name.bold ? "bold" : ""}"
-                >${R}</tspan>
+                >${S}</tspan>
             `;
-      }), a === "end" ? `${e.value.style.chart.layout.labels.name.show ? N : ""}${m}` : `${m}${e.value.style.chart.layout.labels.name.show ? N : ""}`;
+      }), a === "end" ? `${e.value.style.chart.layout.labels.name.show ? D : ""}${y}` : `${y}${e.value.style.chart.layout.labels.name.show ? D : ""}`;
     }
     function Dl(t, o) {
-      const l = v.value[o].middlePoint, a = Se(l), r = D({
+      const l = v.value[o].middlePoint, a = Se(l), r = X({
         initX: l.x,
         initY: l.y,
         offset: 42,
@@ -867,24 +867,24 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
         centerY: n.value.height / 2
       }), c = r.x;
       r.y;
-      const m = _t(t), $ = `
+      const y = _t(t), $ = `
         <tspan
             class="vue-data-ui-datalabel-value"
             fill="${e.value.style.chart.layout.labels.percentage.color}"
-            font-size="${y.value}px"
+            font-size="${g.value}px"
             style="font-weight:${e.value.style.chart.layout.labels.percentage.bold ? "bold" : "normal"}"
-        >${m}</tspan>
-    `, N = String(t.name ?? "").split(/\n/g);
-      let R = "";
-      return N.forEach((j, Ne) => {
-        Ne === 0 ? R += `
+        >${y}</tspan>
+    `, D = String(t.name ?? "").split(/\n/g);
+      let S = "";
+      return D.forEach((V, Ne) => {
+        Ne === 0 ? S += `
                 <tspan
                     class="vue-data-ui-datalabel-name"
                     fill="${e.value.style.chart.layout.labels.name.color}"
                     font-size="${f.value}px"
                     style="font-weight:${e.value.style.chart.layout.labels.name.bold ? "bold" : "normal"}"
-                >${j}</tspan>
-            ` : R += `
+                >${V}</tspan>
+            ` : S += `
                 <tspan
                     class="vue-data-ui-datalabel-name"
                     x="${c}"
@@ -892,12 +892,12 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
                     fill="${e.value.style.chart.layout.labels.name.color}"
                     font-size="${f.value}px"
                     style="font-weight:${e.value.style.chart.layout.labels.name.bold ? "bold" : "normal"}"
-                >${j}</tspan>
+                >${V}</tspan>
             `;
-      }), a === "end" ? `${e.value.style.chart.layout.labels.name.show ? R : ""}${$}` : `${$}${e.value.style.chart.layout.labels.name.show ? R : ""}`;
+      }), a === "end" ? `${e.value.style.chart.layout.labels.name.show ? S : ""}${$}` : `${$}${e.value.style.chart.layout.labels.name.show ? S : ""}`;
     }
     function Be(t) {
-      return e.value.useBlurOnHover && ![null, void 0].includes(F.value) && F.value !== t ? `url(#blur_${g.value})` : "";
+      return e.value.useBlurOnHover && ![null, void 0].includes(z.value) && z.value !== t ? `url(#blur_${p.value})` : "";
     }
     function Bl(t) {
       if (!Pe.value || De.value === null || t.seriesIndex !== De.value)
@@ -905,14 +905,14 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
       const o = (t.proportion ?? 0) * 100, l = e.value.style.chart.layout.labels.dataLabels.hideUnderValue, r = e.value.style.chart.layout.labels.dataLabels.smallArcClusterThreshold + 2, c = l;
       return o >= r ? 1 : o <= c ? 0 : (o - c) / (r - c);
     }
-    const Le = p(() => {
+    const Le = m(() => {
       const t = be.value.map((l) => ({
         name: l.name,
         color: l.color
       })), o = be.value.map((l) => l.value);
       return { head: t, body: o };
     });
-    function Vt(t = null) {
+    function Et(t = null) {
       fl(() => {
         const o = Le.value.head.map((r, c) => [[
           r.name
@@ -920,19 +920,19 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
         t ? t(a) : ma({ csvContent: a, title: e.value.style.chart.title.text || "vue-ui-donut" });
       });
     }
-    const We = p(() => {
+    const We = m(() => {
       const t = [
         ' <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 16v2a1 1 0 0 1 -1 1h-11l6 -7l-6 -7h11a1 1 0 0 1 1 1v2" /></svg>',
         ve({ p: e.value.style.chart.layout.labels.dataLabels.prefix, v: te.value, s: e.value.style.chart.layout.labels.dataLabels.suffix, r: e.value.table.td.roundingValue }),
         "100%"
-      ], o = Le.value.head.map((c, m) => [
+      ], o = Le.value.head.map((c, y) => [
         {
           color: c.color,
           name: c.name || "-"
         },
-        Le.value.body[m],
-        isNaN(Le.value.body[m] / te.value) ? "-" : (Le.value.body[m] / te.value * 100).toFixed(e.value.table.td.roundingPercentage) + "%"
-      ]), l = o.map((c) => c.map((m, $) => $ === 0 ? m.name : m)), a = {
+        Le.value.body[y],
+        isNaN(Le.value.body[y] / te.value) ? "-" : (Le.value.body[y] / te.value * 100).toFixed(e.value.table.td.roundingPercentage) + "%"
+      ]), l = o.map((c) => c.map((y, $) => $ === 0 ? y.name : y)), a = {
         th: {
           backgroundColor: e.value.table.th.backgroundColor,
           color: e.value.table.th.color,
@@ -960,7 +960,7 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
     function al(t) {
       Xe.value = t, lt.value += 1;
     }
-    const ol = p(() => /^((?!chrome|android).)*safari/i.test(navigator.userAgent));
+    const ol = m(() => /^((?!chrome|android).)*safari/i.test(navigator.userAgent));
     function Xl(t) {
       return wa({
         num: t,
@@ -995,7 +995,7 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
           }),
           { datapoint: t }
         ),
-        percentage: tl(t, O.value),
+        percentage: tl(t, T.value),
         showVal: e.value.style.chart.layout.labels.value.show,
         showPercentage: e.value.style.chart.layout.labels.percentage.show,
         config: e.value.style.chart.layout.labels.dataLabels
@@ -1018,8 +1018,8 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
       ut.value = !ut.value;
     }
     async function Nl({ scale: t = 2 } = {}) {
-      if (!S.value) return;
-      const { width: o, height: l } = S.value.getBoundingClientRect(), a = o / l, { imageUri: r, base64: c } = await Ia({ domElement: S.value, base64: !0, img: !0, scale: t });
+      if (!M.value) return;
+      const { width: o, height: l } = M.value.getBoundingClientRect(), a = o / l, { imageUri: r, base64: c } = await Ia({ domElement: M.value, base64: !0, img: !0, scale: t });
       return {
         imageUri: r,
         base64: c,
@@ -1032,9 +1032,9 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
     function Rl() {
       if (!Fe.value) return;
       const { x: t, y: o, width: l, height: a } = Fe.value.getBBox();
-      q.value && q.value.setAttribute("viewBox", `${t} ${o} ${l + Math.min(0, t)} ${a + Math.min(0, o)}`);
+      W.value && W.value.setAttribute("viewBox", `${t} ${o} ${l + Math.min(0, t)} ${a + Math.min(0, o)}`);
     }
-    const rt = p(() => {
+    const rt = m(() => {
       const t = e.value.table.useDialog && !e.value.table.show, o = x.value.showTable;
       return {
         component: t ? Ot : Mt,
@@ -1045,7 +1045,7 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
           headerColor: e.value.table.th.color,
           headerBg: e.value.table.th.backgroundColor,
           isFullscreen: Xe.value,
-          fullscreenParent: S.value,
+          fullscreenParent: M.value,
           forcedWidth: Math.min(500, window.innerWidth * 0.8),
           isCursorPointer: xe.value
         } : {
@@ -1071,18 +1071,18 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
     function rl() {
       x.value.showTable = !1, tt.value && tt.value.setTableIconState(!1);
     }
-    const El = p(() => nt.value.map((t) => ({
+    const Vl = m(() => nt.value.map((t) => ({
       ...t,
       name: t.display
-    }))), Vl = p(() => e.value.style.chart.backgroundColor), Ul = p(() => e.value.style.chart.legend), Hl = p(() => e.value.style.chart.title), { exportSvg: Gl, getSvg: ql } = Pa({
-      svg: q,
+    }))), El = m(() => e.value.style.chart.backgroundColor), Ul = m(() => e.value.style.chart.legend), Hl = m(() => e.value.style.chart.title), { exportSvg: Gl, getSvg: ql } = Pa({
+      svg: W,
       title: Hl,
       legend: Ul,
-      legendItems: El,
-      backgroundColor: Vl
+      legendItems: Vl,
+      backgroundColor: El
     });
     async function il({ isCb: t }) {
-      Ve.value = !0, await fl();
+      Ee.value = !0, await fl();
       try {
         if (t) {
           const { blob: o, url: l, text: a, dataUrl: r } = await ql();
@@ -1090,16 +1090,16 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
         } else
           await Promise.resolve(Gl());
       } finally {
-        Ve.value = !1;
+        Ee.value = !1;
       }
     }
     function Wl(t) {
       if (t?.stage === "start") {
-        Ee.value = !0;
+        Ve.value = !0;
         return;
       }
       if (t?.stage === "end") {
-        Ee.value = !1;
+        Ve.value = !1;
         return;
       }
       $t();
@@ -1107,53 +1107,54 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
     async function cl() {
       if (ot("copyAlt", {
         config: e.value,
-        dataset: W.value
+        dataset: j.value
       }), !e.value.userOptions.callbacks.altCopy) {
         console.warn("Vue Data UI - A callback must be set for `altCopy` in userOptions.");
         return;
       }
       await Promise.resolve(e.value.userOptions.callbacks.altCopy({
         config: e.value,
-        dataset: W.value
+        dataset: j.value
       }));
     }
     function jl() {
-      U.value = null, h.value = !0;
+      H.value = null, h.value = !0;
     }
     function Kl() {
-      U.value = null, H.value = "pointer", oe.value = !1, F.value = null, h.value = !1;
+      H.value = null, G.value = "pointer", oe.value = !1, z.value = null, h.value = !1;
     }
     function Ql(t) {
-      if (!q.value || ut.value || document.activeElement !== q.value || !O.value.length) return;
+      if (!W.value || ut.value || document.activeElement !== W.value || !T.value.length) return;
       const o = ["ArrowLeft", "ArrowUp"].includes(t.key), l = ["ArrowRight", "ArrowDown"].includes(t.key), a = t.key === "Enter" || t.key === " ", r = t.key === "Escape";
       if (!o && !l && !a && !r) return;
       if (t.preventDefault(), t.stopPropagation(), r) {
-        U.value = null, H.value = "pointer", oe.value = !1, F.value = null;
+        H.value = null, G.value = "pointer", oe.value = !1, z.value = null;
         return;
       }
       if (a) {
-        if (U.value === null) return;
-        const $ = O.value[U.value];
-        if (!$) return;
-        ce($, U.value);
+        if (H.value === null) return;
+        const V = T.value[H.value];
+        if (!V) return;
+        ce(V, H.value);
         return;
       }
-      let c = U.value;
-      c === null || c < 0 || c >= O.value.length ? c = l ? 0 : O.value.length - 1 : l ? (c += 1, c >= O.value.length && (c = 0)) : o && (c -= 1, c < 0 && (c = O.value.length - 1));
-      const m = O.value[c];
-      m && (U.value = c, Jl(c), ie({
-        datapoint: m,
+      let c = H.value;
+      const y = z.value, $ = c !== null && c >= 0 && c < T.value.length, D = y !== null && y >= 0 && y < T.value.length;
+      $ ? l ? (c += 1, c >= T.value.length && (c = 0)) : o && (c -= 1, c < 0 && (c = T.value.length - 1)) : D ? (c = l ? y + 1 : y - 1, c >= T.value.length && (c = 0), c < 0 && (c = T.value.length - 1)) : l ? c = 0 : c = T.value.length - 1;
+      const S = T.value[c];
+      S && (H.value = c, Jl(c), ie({
+        datapoint: S,
         relativeIndex: c,
-        seriesIndex: m.seriesIndex,
+        seriesIndex: S.seriesIndex,
         show: !0,
         triggerMode: "keyboard"
       }));
     }
     function Jl(t) {
-      if (!Number.isFinite(t) || !q.value) return;
+      if (!Number.isFinite(t) || !W.value) return;
       let o = n.value.width / 2, l = n.value.height / 2;
       if (e.value.type === "classic") {
-        const r = O.value[t];
+        const r = T.value[t];
         if (!r?.arcSlice) return;
         const c = kl(r.arcSlice);
         if (!c) return;
@@ -1163,13 +1164,13 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
         if (!r) return;
         o = r.x, l = r.y;
       }
-      const a = q.value.getBoundingClientRect();
+      const a = W.value.getBoundingClientRect();
       wt.value = {
         x: a.left + o / n.value.width * a.width,
         y: a.top + l / n.value.height * a.height
       };
     }
-    const Gt = p(() => {
+    const Gt = m(() => {
       const t = We.value?.colNames ?? [], o = We.value?.a11yBody ?? [];
       return { headers: t, rows: o };
     });
@@ -1178,7 +1179,7 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
       getData: $l,
       getImage: Nl,
       generatePdf: at,
-      generateCsv: Vt,
+      generateCsv: Et,
       generateImage: $t,
       generateSvg: il,
       hideSeries: Al,
@@ -1191,33 +1192,33 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
       copyAlt: cl
     }), (t, o) => (u(), i("div", {
       ref_key: "donutChart",
-      ref: S,
+      ref: M,
       class: qt(`vue-data-ui-component vue-ui-donut ${Xe.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
-      style: P(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height:100%;" : ""} text-align:center;background:${e.value.style.chart.backgroundColor}`),
-      id: `donut__${g.value}`,
+      style: L(`font-family:${e.value.style.fontFamily};width:100%; ${e.value.responsive ? "height:100%;" : ""} text-align:center;background:${e.value.style.chart.backgroundColor}`),
+      id: `donut__${p.value}`,
       onMouseenter: kt,
       onMouseleave: Xt
     }, [
       w("div", {
-        id: `chart-instructions-${g.value}`,
+        id: `chart-instructions-${p.value}`,
         class: "sr-only"
       }, [
         w("p", null, ye(e.value.a11y.translations.keyboardNavigation), 1)
-      ], 8, Ea),
+      ], 8, Va),
       Gt.value?.rows?.length ? (u(), ge(Da, {
         key: 0,
-        uid: g.value,
+        uid: p.value,
         head: Gt.value.headers,
         body: Gt.value.rows,
         notice: e.value.a11y.translations.tableAvailable,
         caption: e.value.a11y.translations.tableCaption
       }, null, 8, ["uid", "head", "body", "notice", "caption"])) : d("", !0),
-      e.value.userOptions.buttons.annotator && s(q) ? (u(), ge(s(It), {
+      e.value.userOptions.buttons.annotator && s(W) ? (u(), ge(s(It), {
         key: 1,
         color: e.value.style.chart.color,
         backgroundColor: e.value.style.chart.backgroundColor,
         active: ut.value,
-        svgRef: s(q),
+        svgRef: s(W),
         isCursorPointer: xe.value,
         onClose: Ht
       }, {
@@ -1270,9 +1271,9 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
         }, null, 8, ["config"]))
       ], 512)) : d("", !0),
       w("div", {
-        id: `legend-top-${g.value}`
-      }, null, 8, Va),
-      e.value.userOptions.show && Y.value && (s(Te) || s(Z)) ? (u(), ge(s(Ft), {
+        id: `legend-top-${p.value}`
+      }, null, 8, Ea),
+      e.value.userOptions.show && B.value && (s(Te) || s(Z)) ? (u(), ge(s(Ft), {
         ref_key: "userOptionsRef",
         ref: tt,
         key: `user_option_${lt.value}`,
@@ -1280,7 +1281,7 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
         color: e.value.style.chart.color,
         isPrinting: s(Ge),
         isImaging: s(xt),
-        uid: g.value,
+        uid: p.value,
         hasTooltip: e.value.style.chart.tooltip.show && e.value.userOptions.buttons.tooltip,
         hasPdf: e.value.userOptions.buttons.pdf,
         hasImg: e.value.userOptions.buttons.img,
@@ -1291,7 +1292,7 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
         hasFullscreen: e.value.userOptions.buttons.fullscreen,
         hasAltCopy: e.value.userOptions.buttons.altCopy,
         isFullscreen: Xe.value,
-        chartElement: S.value,
+        chartElement: M.value,
         position: e.value.userOptions.position,
         callbacks: e.value.userOptions.callbacks,
         isTooltip: x.value.showTooltip,
@@ -1303,7 +1304,7 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
         isCursorPointer: xe.value,
         onToggleFullscreen: al,
         onGeneratePdf: s(at),
-        onGenerateCsv: Vt,
+        onGenerateCsv: Et,
         onGenerateImage: Wl,
         onGenerateSvg: il,
         onToggleTable: nl,
@@ -1311,7 +1312,7 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
         onToggleTooltip: ul,
         onToggleAnnotator: Ht,
         onCopyAlt: cl,
-        style: P({ visibility: s(Te) ? s(Z) ? "visible" : "hidden" : "visible" })
+        style: L({ visibility: s(Te) ? s(Z) ? "visible" : "hidden" : "visible" })
       }, Wt({ _: 2 }, [
         t.$slots.menuIcon ? {
           name: "menuIcon",
@@ -1394,12 +1395,12 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
       w("div", Ua, [
         (u(), i("svg", {
           ref_key: "svgRef",
-          ref: q,
+          ref: W,
           xmlns: s(da),
-          "aria-describedby": `chart-instructions-${g.value}`,
+          "aria-describedby": `chart-instructions-${p.value}`,
           class: qt({ "vue-data-ui-fullscreen--on": Xe.value, "vue-data-ui-fulscreen--off": !Xe.value, "vue-data-ui-svg": !0 }),
           viewBox: `0 0 ${n.value.width <= 0 ? 10 : n.value.width} ${n.value.height <= 0 ? 10 : n.value.height}`,
-          style: P(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color};${He.value.css}`),
+          style: L(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color};${He.value.css}`),
           tabindex: "0",
           onFocus: jl,
           onBlur: Kl,
@@ -1423,10 +1424,10 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
             }, [
               k(t.$slots, "chart-background", {}, void 0, !0)
             ], 8, Ga)) : d("", !0),
-            e.value.type === "classic" && !isNaN(he.value / I.value) ? (u(), i("defs", qa, [
+            e.value.type === "classic" && !isNaN(he.value / O.value) ? (u(), i("defs", qa, [
               e.value.style.chart.useGradient ? (u(), i("radialGradient", {
                 key: 0,
-                id: `gradient_${g.value}`
+                id: `gradient_${p.value}`
               }, [
                 w("stop", {
                   offset: "0%",
@@ -1434,12 +1435,12 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
                   "stop-opacity": "0"
                 }, null, 8, ja),
                 w("stop", {
-                  offset: `${(1 - he.value / I.value) * 100}%`,
+                  offset: `${(1 - he.value / O.value) * 100}%`,
                   "stop-color": s(St)("#FFFFFF", 0),
                   "stop-opacity": "0"
                 }, null, 8, Ka),
                 w("stop", {
-                  offset: `${(1 - he.value / I.value / 2) * 100}%`,
+                  offset: `${(1 - he.value / O.value / 2) * 100}%`,
                   "stop-color": s(St)("#FFFFFF", e.value.style.chart.gradientIntensity)
                 }, null, 8, Qa),
                 w("stop", {
@@ -1450,26 +1451,26 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
               ], 8, Wa)) : d("", !0)
             ])) : d("", !0),
             e.value.type === "polar" ? (u(), i("defs", Za, [
-              (u(!0), i(T, null, J(v.value, (l, a) => (u(), i("radialGradient", {
-                id: `polar_gradient_${a}_${g.value}`,
+              (u(!0), i(P, null, J(v.value, (l, a) => (u(), i("radialGradient", {
+                id: `polar_gradient_${a}_${p.value}`,
                 cx: (isNaN(l.middlePoint.x / n.value.width * 100) ? 0 : l.middlePoint.x / n.value.width * 100) + "%",
                 cy: (isNaN(l.middlePoint.y / n.value.height * 100) ? 0 : l.middlePoint.y / n.value.height * 100) + "%",
                 r: "62%"
               }, [
                 w("stop", {
                   offset: "0%",
-                  "stop-color": s(ha)(G.value[a].color, 0.05),
+                  "stop-color": s(ha)(q.value[a].color, 0.05),
                   "stop-opacity": e.value.style.chart.gradientIntensity / 100
                 }, null, 8, to),
                 w("stop", {
                   offset: "100%",
-                  "stop-color": G.value[a].color
+                  "stop-color": q.value[a].color
                 }, null, 8, lo)
               ], 8, eo))), 256))
             ])) : d("", !0),
             w("defs", null, [
               w("filter", {
-                id: `blur_${g.value}`,
+                id: `blur_${p.value}`,
                 x: "-50%",
                 y: "-50%",
                 width: "200%",
@@ -1478,7 +1479,7 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
                 w("feGaussianBlur", {
                   in: "SourceGraphic",
                   stdDeviation: 2,
-                  id: `blur_std_${g.value}`
+                  id: `blur_std_${p.value}`
                 }, null, 8, oo),
                 o[5] || (o[5] = w("feColorMatrix", {
                   type: "saturate",
@@ -1486,7 +1487,7 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
                 }, null, -1))
               ], 8, ao),
               w("filter", {
-                id: `shadow_${g.value}`,
+                id: `shadow_${p.value}`,
                 "color-interpolation-filters": "sRGB"
               }, [
                 w("feDropShadow", {
@@ -1498,7 +1499,7 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
                 }, null, 8, so)
               ], 8, no),
               w("filter", {
-                id: `drop_shadow_${g.value}`,
+                id: `drop_shadow_${p.value}`,
                 "color-interpolation-filters": "sRGB",
                 x: "-50%",
                 y: "-50%",
@@ -1514,10 +1515,10 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
                 }, null, 8, ro)
               ], 8, uo)
             ]),
-            e.value.type === "classic" ? (u(!0), i(T, { key: 3 }, J(G.value.filter((l) => !l.ghost), (l, a) => (u(), i("g", null, [
+            e.value.type === "classic" ? (u(!0), i(P, { key: 3 }, J(q.value.filter((l) => !l.ghost), (l, a) => (u(), i("g", null, [
               ee(l) && x.value.dataLabels.show ? (u(), i("path", {
                 key: 0,
-                d: s(X)[a]?.connectorPath || s(fa)(
+                d: s(R)[a]?.connectorPath || s(fa)(
                   l,
                   { x: n.value.width / 2, y: n.value.height / 2 },
                   16,
@@ -1536,18 +1537,18 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
                 filter: Be(a)
               }, null, 8, io)) : d("", !0)
             ]))), 256)) : d("", !0),
-            e.value.type === "polar" ? (u(!0), i(T, { key: 4 }, J(G.value.filter((l) => !l.ghost), (l, a) => (u(), i("g", null, [
+            e.value.type === "polar" ? (u(!0), i(P, { key: 4 }, J(q.value.filter((l) => !l.ghost), (l, a) => (u(), i("g", null, [
               ee(l) && x.value.dataLabels.show ? (u(), i("path", {
                 key: 0,
-                d: `M ${s(D)({ initX: v.value[a].middlePoint.x, initY: v.value[a].middlePoint.y, offset: 24, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x},${s(D)({ initX: v.value[a].middlePoint.x, initY: v.value[a].middlePoint.y, offset: 24, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y} ${v.value[a].middlePoint.x},${v.value[a].middlePoint.y}`,
+                d: `M ${s(X)({ initX: v.value[a].middlePoint.x, initY: v.value[a].middlePoint.y, offset: 24, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x},${s(X)({ initX: v.value[a].middlePoint.x, initY: v.value[a].middlePoint.y, offset: 24, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y} ${v.value[a].middlePoint.x},${v.value[a].middlePoint.y}`,
                 stroke: l.color,
                 "stroke-width": "1",
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round",
                 fill: "none",
                 filter: Be(a),
-                style: P({
-                  transition: z.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
+                style: L({
+                  transition: Y.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
                 })
               }, null, 12, co)) : d("", !0)
             ]))), 256)) : d("", !0),
@@ -1555,24 +1556,24 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
               key: 5,
               cx: n.value.width / 2,
               cy: n.value.height / 2,
-              r: I.value <= 0 ? 10 : I.value,
+              r: O.value <= 0 ? 10 : O.value,
               fill: e.value.style.chart.backgroundColor,
-              filter: `url(#shadow_${g.value})`
+              filter: `url(#shadow_${p.value})`
             }, null, 8, vo)) : d("", !0),
             t.$slots.pattern ? (u(), i("g", ho, [
-              (u(!0), i(T, null, J(it.dataset, (l, a) => (u(), i("defs", {
+              (u(!0), i(P, null, J(it.dataset, (l, a) => (u(), i("defs", {
                 key: `pattern-${l.patternIndex}`
               }, [
-                k(t.$slots, "pattern", jt({ ref_for: !0 }, { seriesIndex: a, patternId: `pattern_${g.value}_${a}` }), void 0, !0)
+                k(t.$slots, "pattern", jt({ ref_for: !0 }, { seriesIndex: a, patternId: `pattern_${p.value}_${a}` }), void 0, !0)
               ]))), 128))
             ])) : d("", !0),
-            te.value && e.value.type === "classic" ? (u(), i(T, { key: 7 }, [
-              (u(!0), i(T, null, J(O.value, (l, a) => (u(), i("path", {
+            te.value && e.value.type === "classic" ? (u(), i(P, { key: 7 }, [
+              (u(!0), i(P, null, J(T.value, (l, a) => (u(), i("path", {
                 stroke: e.value.style.chart.backgroundColor,
                 d: l.arcSlice,
                 fill: "#FFFFFF"
               }, null, 8, fo))), 256)),
-              (u(!0), i(T, null, J(O.value, (l, a) => (u(), i("path", {
+              (u(!0), i(P, null, J(T.value, (l, a) => (u(), i("path", {
                 class: "vue-ui-donut-arc-path",
                 d: l.arcSlice,
                 fill: l.color,
@@ -1581,7 +1582,7 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
                 filter: Be(a)
               }, null, 8, yo))), 256)),
               t.$slots.pattern ? (u(), i("g", go, [
-                (u(!0), i(T, null, J(O.value, (l, a) => (u(), i("path", {
+                (u(!0), i(P, null, J(T.value, (l, a) => (u(), i("path", {
                   class: "vue-ui-donut-arc-path",
                   d: l.arcSlice,
                   fill: `url(#${l.pattern})`,
@@ -1591,52 +1592,52 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
                 }, null, 8, po))), 256))
               ])) : d("", !0)
             ], 64)) : d("", !0),
-            te.value && e.value.type === "polar" ? (u(), i(T, { key: 8 }, [
-              G.value.length > 1 ? (u(), i("g", mo, [
-                (u(!0), i(T, null, J(O.value, (l, a) => (u(), i("path", {
+            te.value && e.value.type === "polar" ? (u(), i(P, { key: 8 }, [
+              q.value.length > 1 ? (u(), i("g", mo, [
+                (u(!0), i(P, null, J(T.value, (l, a) => (u(), i("path", {
                   stroke: e.value.style.chart.layout.donut.borderColorAuto ? e.value.style.chart.backgroundColor : e.value.style.chart.layout.donut.borderColor,
                   d: v.value[a].path,
                   fill: "#FFFFFF",
-                  style: P({
-                    transition: z.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
+                  style: L({
+                    transition: Y.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
                   })
                 }, null, 12, bo))), 256)),
                 e.value.style.chart.layout.donut.useShadow ? (u(), i("g", wo, [
-                  (u(!0), i(T, null, J(O.value, (l, a) => (u(), i("path", {
+                  (u(!0), i(P, null, J(T.value, (l, a) => (u(), i("path", {
                     class: "vue-ui-donut-arc-path",
                     d: v.value[a].path,
                     fill: "transparent",
                     stroke: e.value.style.chart.layout.donut.borderColorAuto ? e.value.style.chart.backgroundColor : e.value.style.chart.layout.donut.borderColor,
                     "stroke-width": e.value.style.chart.layout.donut.borderWidth,
-                    filter: `url(#drop_shadow_${g.value})`,
-                    style: P({
-                      transition: z.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
+                    filter: `url(#drop_shadow_${p.value})`,
+                    style: L({
+                      transition: Y.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
                     })
                   }, null, 12, ko))), 256))
                 ])) : d("", !0),
                 t.$slots.pattern ? (u(), i("g", xo, [
-                  (u(!0), i(T, null, J(O.value, (l, a) => (u(), i("path", {
+                  (u(!0), i(P, null, J(T.value, (l, a) => (u(), i("path", {
                     class: "vue-ui-donut-arc-path",
                     d: v.value[a].path,
                     fill: `url(#${l.pattern})`,
                     stroke: e.value.style.chart.layout.donut.borderColorAuto ? e.value.style.chart.backgroundColor : e.value.style.chart.layout.donut.borderColor,
                     "stroke-width": e.value.style.chart.layout.donut.borderWidth,
                     filter: Be(a),
-                    style: P({
-                      transition: z.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`,
+                    style: L({
+                      transition: Y.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`,
                       transformOrigin: "center"
                     })
                   }, null, 12, $o))), 256))
                 ])) : d("", !0),
-                (u(!0), i(T, null, J(O.value, (l, a) => (u(), i("path", {
+                (u(!0), i(P, null, J(T.value, (l, a) => (u(), i("path", {
                   class: "vue-ui-donut-arc-path",
                   d: v.value[a].path,
-                  fill: e.value.style.chart.useGradient ? `url(#polar_gradient_${a}_${g.value})` : l.color,
+                  fill: e.value.style.chart.useGradient ? `url(#polar_gradient_${a}_${p.value})` : l.color,
                   stroke: e.value.style.chart.layout.donut.borderColorAuto ? e.value.style.chart.backgroundColor : e.value.style.chart.layout.donut.borderColor,
                   "stroke-width": e.value.style.chart.layout.donut.borderWidth,
                   filter: Be(a),
-                  style: P({
-                    transition: z.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
+                  style: L({
+                    transition: Y.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
                   })
                 }, null, 12, Co))), 256))
               ])) : (u(), i("g", _o, [
@@ -1644,23 +1645,23 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
                   key: 0,
                   cx: n.value.width / 2,
                   cy: n.value.height / 2,
-                  r: I.value,
-                  fill: `url(#pattern_${g.value}_${G.value[0].patternIndex})`,
+                  r: O.value,
+                  fill: `url(#pattern_${p.value}_${q.value[0].patternIndex})`,
                   stroke: e.value.style.chart.backgroundColor,
                   "stroke-width": e.value.style.chart.layout.donut.borderWidth
                 }, null, 8, Ao)) : d("", !0),
                 w("circle", {
                   cx: n.value.width / 2,
                   cy: n.value.height / 2,
-                  r: I.value,
-                  fill: e.value.style.chart.useGradient ? `url(#polar_gradient_0_${g.value})` : G.value[0].color,
+                  r: O.value,
+                  fill: e.value.style.chart.useGradient ? `url(#polar_gradient_0_${p.value})` : q.value[0].color,
                   stroke: e.value.style.chart.backgroundColor,
                   "stroke-width": e.value.style.chart.layout.donut.borderWidth
                 }, null, 8, To)
               ]))
-            ], 64)) : (u(), i(T, { key: 9 }, [
+            ], 64)) : (u(), i(P, { key: 9 }, [
               e.value.type === "classic" && !Sl.value ? (u(), i("g", Po, [
-                (u(!0), i(T, null, J(Ll.value, (l, a) => (u(), i("path", {
+                (u(!0), i(P, null, J(Ll.value, (l, a) => (u(), i("path", {
                   class: "vue-ui-donut-arc-path",
                   d: l.arcSlice,
                   fill: l.color,
@@ -1671,7 +1672,7 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
               w("circle", {
                 cx: n.value.width / 2,
                 cy: n.value.height / 2,
-                r: I.value <= 0 ? 10 : I.value,
+                r: O.value <= 0 ? 10 : O.value,
                 fill: "transparent",
                 stroke: e.value.style.chart.backgroundColor
               }, null, 8, Lo)
@@ -1682,9 +1683,9 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
               cy: n.value.height / 2,
               r: (
                 /* This might require adjustments */
-                I.value <= 0 ? 10 : I.value
+                O.value <= 0 ? 10 : O.value
               ),
-              fill: `url(#gradient_${g.value})`
+              fill: `url(#gradient_${p.value})`
             }, null, 8, Mo)) : d("", !0),
             w("circle", {
               ref_key: "circle_hollow",
@@ -1695,12 +1696,12 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
               cy: n.value.height / 2,
               r: Math.max(0.1, he.value * 1.7)
             }, null, 8, Io),
-            te.value ? (u(), i(T, { key: 11 }, [
-              G.value.length > 1 || e.value.type === "classic" ? (u(), i("g", Fo, [
-                (u(!0), i(T, null, J(G.value.filter((l) => !l.ghost), (l, a) => (u(), i("path", {
+            te.value ? (u(), i(P, { key: 11 }, [
+              q.value.length > 1 || e.value.type === "classic" ? (u(), i("g", Fo, [
+                (u(!0), i(P, null, J(q.value.filter((l) => !l.ghost), (l, a) => (u(), i("path", {
                   d: e.value.type === "classic" ? l.arcSlice : v.value[a].path,
                   stroke: e.value.style.chart.layout.donut.borderColorAuto ? e.value.style.chart.backgroundColor : e.value.style.chart.layout.donut.borderColor,
-                  fill: F.value === a ? e.value.style.chart.layout.donut.selectedColor : "transparent",
+                  fill: z.value === a ? e.value.style.chart.layout.donut.selectedColor : "transparent",
                   onMouseenter: (r) => ie({
                     datapoint: l,
                     relativeIndex: a,
@@ -1714,16 +1715,16 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
                 w("circle", {
                   cx: n.value.width / 2,
                   cy: n.value.height / 2,
-                  r: I.value,
+                  r: O.value,
                   fill: "transparent",
                   onMouseenter: o[0] || (o[0] = (l) => ie({
-                    datapoint: G.value[0],
+                    datapoint: q.value[0],
                     relativeIndex: 0,
-                    seriesIndex: G.value[0].seriesIndex,
+                    seriesIndex: q.value[0].seriesIndex,
                     show: !0
                   })),
-                  onMouseleave: o[1] || (o[1] = (l) => fe({ datapoint: G.value[0], seriesIndex: G.value[0].seriesIndex })),
-                  onClick: o[2] || (o[2] = (l) => ce(G.value[0], t.i))
+                  onMouseleave: o[1] || (o[1] = (l) => fe({ datapoint: q.value[0], seriesIndex: q.value[0].seriesIndex })),
+                  onClick: o[2] || (o[2] = (l) => ce(q.value[0], t.i))
                 }, null, 40, Yo)
               ]))
             ], 64)) : d("", !0),
@@ -1740,7 +1741,7 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
                 y: n.value.height / 2 - (e.value.style.chart.layout.labels.hollow.average.show ? e.value.style.chart.layout.labels.hollow.total.fontSize : 0) + e.value.style.chart.layout.labels.hollow.total.offsetY,
                 fill: e.value.style.chart.layout.labels.hollow.total.color,
                 "font-size": e.value.style.chart.layout.labels.hollow.total.fontSize,
-                style: P(`font-weight:${e.value.style.chart.layout.labels.hollow.total.bold ? "bold" : ""}`)
+                style: L(`font-weight:${e.value.style.chart.layout.labels.hollow.total.bold ? "bold" : ""}`)
               }, ye(e.value.style.chart.layout.labels.hollow.total.text), 13, Do)) : d("", !0),
               e.value.style.chart.layout.labels.hollow.total.show ? (u(), i("text", {
                 key: 1,
@@ -1749,7 +1750,7 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
                 y: n.value.height / 2 + e.value.style.chart.layout.labels.hollow.total.fontSize - (e.value.style.chart.layout.labels.hollow.average.show ? e.value.style.chart.layout.labels.hollow.total.fontSize : 0) + e.value.style.chart.layout.labels.hollow.total.value.offsetY,
                 fill: e.value.style.chart.layout.labels.hollow.total.value.color,
                 "font-size": e.value.style.chart.layout.labels.hollow.total.value.fontSize,
-                style: P(`font-weight:${e.value.style.chart.layout.labels.hollow.total.value.bold ? "bold" : ""}`)
+                style: L(`font-weight:${e.value.style.chart.layout.labels.hollow.total.value.bold ? "bold" : ""}`)
               }, ye(s(pe)(
                 e.value.style.chart.layout.labels.hollow.total.value.formatter,
                 te.value,
@@ -1766,7 +1767,7 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
                 y: n.value.height / 2 + (e.value.style.chart.layout.labels.hollow.total.show ? e.value.style.chart.layout.labels.hollow.average.fontSize : 0) + e.value.style.chart.layout.labels.hollow.average.offsetY,
                 fill: e.value.style.chart.layout.labels.hollow.average.color,
                 "font-size": e.value.style.chart.layout.labels.hollow.average.fontSize,
-                style: P(`font-weight:${e.value.style.chart.layout.labels.hollow.average.bold ? "bold" : ""}`)
+                style: L(`font-weight:${e.value.style.chart.layout.labels.hollow.average.bold ? "bold" : ""}`)
               }, ye(e.value.style.chart.layout.labels.hollow.average.text), 13, Xo)) : d("", !0),
               e.value.style.chart.layout.labels.hollow.average.show ? (u(), i("text", {
                 key: 3,
@@ -1775,8 +1776,8 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
                 y: n.value.height / 2 + (e.value.style.chart.layout.labels.hollow.total.show ? e.value.style.chart.layout.labels.hollow.average.fontSize : 0) + e.value.style.chart.layout.labels.hollow.average.fontSize + e.value.style.chart.layout.labels.hollow.average.value.offsetY,
                 fill: e.value.style.chart.layout.labels.hollow.average.value.color,
                 "font-size": e.value.style.chart.layout.labels.hollow.average.value.fontSize,
-                style: P(`font-weight:${e.value.style.chart.layout.labels.hollow.average.value.bold ? "bold" : ""}`)
-              }, ye(Pe.value || z.value ? "--" : s(pe)(
+                style: L(`font-weight:${e.value.style.chart.layout.labels.hollow.average.value.bold ? "bold" : ""}`)
+              }, ye(Pe.value || Y.value ? "--" : s(pe)(
                 e.value.style.chart.layout.labels.hollow.average.value.formatter,
                 s(bl)(Rt.value),
                 s(ve)({
@@ -1787,13 +1788,13 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
                 })
               )), 13, No)) : d("", !0)
             ], 512)) : d("", !0),
-            (u(!0), i(T, null, J(O.value.filter((l) => !l.ghost), (l, a) => (u(), i("g", {
+            (u(!0), i(P, null, J(T.value.filter((l) => !l.ghost), (l, a) => (u(), i("g", {
               filter: Be(a),
               class: qt({ animated: e.value.useCssAnimation }),
               key: l.seriesIndex,
               opacity: Bl(l)
             }, [
-              e.value.style.chart.layout.labels.dataLabels.useLabelSlots ? (u(), i("g", Eo, [
+              e.value.style.chart.layout.labels.dataLabels.useLabelSlots ? (u(), i("g", Vo, [
                 (u(), i("foreignObject", {
                   x: s(A)(l, !0).anchor === "end" ? s(A)(l).x - 120 : s(A)(l, !0).anchor === "middle" ? s(A)(l).x - 60 : s(A)(l).x,
                   y: s(we)(l) - (ol.value ? 20 : 0),
@@ -1804,26 +1805,26 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
                   w("div", null, [
                     k(t.$slots, "dataLabel", jt({ ref_for: !0 }, {
                       datapoint: l,
-                      isBlur: !e.value.useBlurOnHover || [null, void 0].includes(F.value) || F.value === a,
+                      isBlur: !e.value.useBlurOnHover || [null, void 0].includes(z.value) || z.value === a,
                       isSafari: ol.value,
                       isVisible: ee(l) && x.value.dataLabels.show,
                       textAlign: s(A)(l, !0, 16, !0).anchor,
                       flexAlign: s(A)(l, !0, 16).anchor,
-                      percentage: tl(l, O.value)
+                      percentage: tl(l, T.value)
                     }), void 0, !0)
                   ])
-                ], 8, Vo))
+                ], 8, Eo))
               ])) : (u(), i("g", Uo, [
-                e.value.type === "classic" ? (u(), i(T, { key: 0 }, [
+                e.value.type === "classic" ? (u(), i(P, { key: 0 }, [
                   ee(l) && x.value.dataLabels.show ? (u(), i("circle", {
                     key: 0,
-                    cx: s(X)[a]?.markerX ?? s(A)(l).x,
-                    cy: s(X)[a]?.markerY ?? s(we)(l) - 3.5,
+                    cx: s(R)[a]?.markerX ?? s(A)(l).x,
+                    cy: s(R)[a]?.markerY ?? s(we)(l) - 3.5,
                     fill: l.color,
                     stroke: e.value.style.chart.backgroundColor,
                     "stroke-width": 1,
                     r: 3,
-                    filter: !e.value.useBlurOnHover || [null, void 0].includes(F.value) || F.value === a ? "" : `url(#blur_${g.value})`,
+                    filter: !e.value.useBlurOnHover || [null, void 0].includes(z.value) || z.value === a ? "" : `url(#blur_${p.value})`,
                     onClick: (r) => ce(l, a),
                     onMouseenter: (r) => ie({
                       datapoint: l,
@@ -1833,12 +1834,12 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
                     }),
                     onMouseleave: (r) => fe({ datapoint: l, seriesIndex: l.seriesIndex })
                   }, null, 40, Ho)) : d("", !0),
-                  e.value.style.chart.layout.labels.dataLabels.oneLine || s(X)[a] ? Tt((u(), i("text", {
+                  e.value.style.chart.layout.labels.dataLabels.oneLine || s(R)[a] ? Tt((u(), i("text", {
                     key: 1,
                     class: "vue-data-ui-datalabel-inline",
-                    "text-anchor": s(X)[a]?.textAnchor || s(A)(l, !0, 12).anchor,
-                    x: s(X)[a]?.labelX ?? s(A)(l, !0, 12).x,
-                    y: s(X)[a]?.labelY ?? s(we)(l),
+                    "text-anchor": s(R)[a]?.textAnchor || s(A)(l, !0, 12).anchor,
+                    x: s(R)[a]?.labelX ?? s(A)(l, !0, 12).x,
+                    y: s(R)[a]?.labelY ?? s(we)(l),
                     onClick: (r) => ce(l, a),
                     onMouseenter: (r) => ie({
                       datapoint: l,
@@ -1847,18 +1848,18 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
                       show: !0
                     }),
                     onMouseleave: (r) => fe({ datapoint: l, seriesIndex: l.seriesIndex }),
-                    innerHTML: Yl(l, a, !!s(X)[a])
+                    innerHTML: Yl(l, a, !!s(R)[a])
                   }, null, 40, Go)), [
                     [Pt, ee(l) && x.value.dataLabels.show]
-                  ]) : (u(), i(T, { key: 2 }, [
+                  ]) : (u(), i(P, { key: 2 }, [
                     Tt(w("text", {
                       class: "vue-data-ui-datalabel-value",
-                      "text-anchor": s(X)[a]?.textAnchor || s(A)(l, !0, 12).anchor,
-                      x: s(X)[a]?.labelX ?? s(A)(l, !0, 12).x,
-                      y: s(X)[a]?.labelY ?? s(we)(l),
+                      "text-anchor": s(R)[a]?.textAnchor || s(A)(l, !0, 12).anchor,
+                      x: s(R)[a]?.labelX ?? s(A)(l, !0, 12).x,
+                      y: s(R)[a]?.labelY ?? s(we)(l),
                       fill: e.value.style.chart.layout.labels.percentage.color,
-                      "font-size": y.value + "px",
-                      style: P(`font-weight:${e.value.style.chart.layout.labels.percentage.bold ? "bold" : ""}`),
+                      "font-size": g.value + "px",
+                      style: L(`font-weight:${e.value.style.chart.layout.labels.percentage.bold ? "bold" : ""}`),
                       onClick: (r) => ce(l, a),
                       onMouseenter: (r) => ie({
                         datapoint: l,
@@ -1872,12 +1873,12 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
                     ]),
                     Tt(w("text", {
                       class: "vue-data-ui-datalabel-name",
-                      "text-anchor": s(X)[a]?.textAnchor || s(A)(l).anchor,
-                      x: s(X)[a]?.labelX ?? s(A)(l, !0, 12).x,
-                      y: (s(X)[a]?.labelY ?? s(we)(l)) + f.value * 1.2,
+                      "text-anchor": s(R)[a]?.textAnchor || s(A)(l).anchor,
+                      x: s(R)[a]?.labelX ?? s(A)(l, !0, 12).x,
+                      y: (s(R)[a]?.labelY ?? s(we)(l)) + f.value * 1.2,
                       fill: e.value.style.chart.layout.labels.name.color,
                       "font-size": f.value + "px",
-                      style: P(`font-weight:${e.value.style.chart.layout.labels.name.bold ? "bold" : ""}`),
+                      style: L(`font-weight:${e.value.style.chart.layout.labels.name.bold ? "bold" : ""}`),
                       onClick: (r) => ce(l, a),
                       onMouseenter: (r) => ie({
                         datapoint: l,
@@ -1890,24 +1891,24 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
                         content: l.name,
                         fontSize: f.value,
                         fill: e.value.style.chart.layout.labels.name.color,
-                        x: s(X)[a]?.labelX ?? s(A)(l, !0, 12).x,
-                        y: (s(X)[a]?.labelY ?? s(we)(l)) + f.value
+                        x: s(R)[a]?.labelX ?? s(A)(l, !0, 12).x,
+                        y: (s(R)[a]?.labelY ?? s(we)(l)) + f.value
                       })
                     }, null, 44, Wo), [
                       [Pt, ee(l) && x.value.dataLabels.show && e.value.style.chart.layout.labels.name.show]
                     ])
                   ], 64))
                 ], 64)) : d("", !0),
-                e.value.type === "polar" ? (u(), i(T, { key: 1 }, [
+                e.value.type === "polar" ? (u(), i(P, { key: 1 }, [
                   ee(l) && x.value.dataLabels.show ? (u(), i("circle", {
                     key: 0,
-                    cx: s(D)({ initX: v.value[a].middlePoint.x, initY: v.value[a].middlePoint.y, offset: 24, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x,
-                    cy: s(D)({ initX: v.value[a].middlePoint.x, initY: v.value[a].middlePoint.y, offset: 24, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y,
+                    cx: s(X)({ initX: v.value[a].middlePoint.x, initY: v.value[a].middlePoint.y, offset: 24, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x,
+                    cy: s(X)({ initX: v.value[a].middlePoint.x, initY: v.value[a].middlePoint.y, offset: 24, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y,
                     fill: l.color,
                     stroke: e.value.style.chart.backgroundColor,
                     "stroke-width": 1,
                     r: 3,
-                    filter: !e.value.useBlurOnHover || [null, void 0].includes(F.value) || F.value === a ? "" : `url(#blur_${g.value})`,
+                    filter: !e.value.useBlurOnHover || [null, void 0].includes(z.value) || z.value === a ? "" : `url(#blur_${p.value})`,
                     onClick: (r) => ce(l, a),
                     onMouseenter: (r) => ie({
                       datapoint: l,
@@ -1916,18 +1917,18 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
                       show: !0
                     }),
                     onMouseleave: (r) => fe({ datapoint: l, seriesIndex: l.seriesIndex }),
-                    style: P({
-                      transition: z.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
+                    style: L({
+                      transition: Y.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
                     })
                   }, null, 44, jo)) : d("", !0),
                   e.value.style.chart.layout.labels.dataLabels.oneLine ? Tt((u(), i("text", {
                     key: 1,
                     class: "vue-data-ui-datalabel-inline",
                     "text-anchor": Se(v.value[a].middlePoint),
-                    x: s(D)({ initX: v.value[a].middlePoint.x, initY: v.value[a].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x,
-                    y: s(D)({ initX: v.value[a].middlePoint.x, initY: v.value[a].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y,
-                    style: P({
-                      transition: z.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
+                    x: s(X)({ initX: v.value[a].middlePoint.x, initY: v.value[a].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x,
+                    y: s(X)({ initX: v.value[a].middlePoint.x, initY: v.value[a].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y,
+                    style: L({
+                      transition: Y.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`
                     }),
                     onClick: (r) => ce(l, a),
                     onMouseenter: (r) => ie({
@@ -1940,17 +1941,17 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
                     innerHTML: Dl(l, a)
                   }, null, 44, Ko)), [
                     [Pt, ee(l) && x.value.dataLabels.show]
-                  ]) : (u(), i(T, { key: 2 }, [
+                  ]) : (u(), i(P, { key: 2 }, [
                     ee(l) && x.value.dataLabels.show ? (u(), i("text", {
                       key: 0,
                       class: "vue-data-ui-datalabel-value",
                       "text-anchor": Se(v.value[a].middlePoint),
-                      x: s(D)({ initX: v.value[a].middlePoint.x, initY: v.value[a].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x,
-                      y: s(D)({ initX: v.value[a].middlePoint.x, initY: v.value[a].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y,
+                      x: s(X)({ initX: v.value[a].middlePoint.x, initY: v.value[a].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x,
+                      y: s(X)({ initX: v.value[a].middlePoint.x, initY: v.value[a].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y,
                       fill: e.value.style.chart.layout.labels.percentage.color,
-                      "font-size": y.value,
-                      style: P({
-                        transition: z.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`,
+                      "font-size": g.value,
+                      style: L({
+                        transition: Y.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`,
                         fontWeight: e.value.style.chart.layout.labels.percentage.bold ? "bold" : "normal"
                       }),
                       onClick: (r) => ce(l, a),
@@ -1966,12 +1967,12 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
                       key: 1,
                       class: "vue-data-ui-datalabel-name",
                       "text-anchor": Se(v.value[a].middlePoint),
-                      x: s(D)({ initX: v.value[a].middlePoint.x, initY: v.value[a].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x,
-                      y: s(D)({ initX: v.value[a].middlePoint.x, initY: v.value[a].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y + f.value * 1.2,
+                      x: s(X)({ initX: v.value[a].middlePoint.x, initY: v.value[a].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x,
+                      y: s(X)({ initX: v.value[a].middlePoint.x, initY: v.value[a].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y + f.value * 1.2,
                       fill: e.value.style.chart.layout.labels.name.color,
                       "font-size": f.value,
-                      style: P({
-                        transition: z.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`,
+                      style: L({
+                        transition: Y.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`,
                         fontWeight: e.value.style.chart.layout.labels.name.bold ? "bold" : "normal"
                       }),
                       onClick: (r) => ce(l, a),
@@ -1986,8 +1987,8 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
                         content: l.name,
                         fontSize: f.value,
                         fill: e.value.style.chart.layout.labels.name.color,
-                        x: s(D)({ initX: v.value[a].middlePoint.x, initY: v.value[a].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x,
-                        y: s(D)({ initX: v.value[a].middlePoint.x, initY: v.value[a].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y + f.value * 1.2
+                        x: s(X)({ initX: v.value[a].middlePoint.x, initY: v.value[a].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x,
+                        y: s(X)({ initX: v.value[a].middlePoint.x, initY: v.value[a].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).y + f.value * 1.2
                       })
                     }, null, 44, Jo)) : d("", !0)
                   ], 64))
@@ -2004,25 +2005,25 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
                 }, [
                   w("div", null, [
                     k(t.$slots, "plot-comment", {
-                      plot: { ...l, textAlign: s(A)(l, !0, 16, !0).anchor, flexAlign: s(A)(l, !0, 16).anchor, isFirstLoad: z.value }
+                      plot: { ...l, textAlign: s(A)(l, !0, 16, !0).anchor, flexAlign: s(A)(l, !0, 16).anchor, isFirstLoad: Y.value }
                     }, void 0, !0)
                   ])
                 ], 8, en)) : d("", !0),
                 ee(l) && e.value.type === "polar" ? (u(), i("foreignObject", {
                   key: 1,
-                  x: e.value.style.chart.comments.offsetX + (Se(v.value[a].middlePoint) === "end" ? s(D)({ initX: v.value[a].middlePoint.x, initY: v.value[a].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x - e.value.style.chart.comments.width : Se(v.value[a].middlePoint) === "middle" ? s(D)({ initX: v.value[a].middlePoint.x, initY: v.value[a].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x - e.value.style.chart.comments.width / 2 : s(D)({ initX: v.value[a].middlePoint.x, initY: v.value[a].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x),
+                  x: e.value.style.chart.comments.offsetX + (Se(v.value[a].middlePoint) === "end" ? s(X)({ initX: v.value[a].middlePoint.x, initY: v.value[a].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x - e.value.style.chart.comments.width : Se(v.value[a].middlePoint) === "middle" ? s(X)({ initX: v.value[a].middlePoint.x, initY: v.value[a].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x - e.value.style.chart.comments.width / 2 : s(X)({ initX: v.value[a].middlePoint.x, initY: v.value[a].middlePoint.y, offset: 42, centerX: n.value.width / 2, centerY: n.value.height / 2 }).x),
                   y: Ml(v.value[a]) + e.value.style.chart.comments.offsetY,
                   width: e.value.style.chart.comments.width,
                   height: "200",
-                  style: P({
-                    transition: z.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`,
+                  style: L({
+                    transition: Y.value || !e.value.serieToggleAnimation.show ? "none" : `all ${e.value.serieToggleAnimation.durationMs}ms ease-in-out`,
                     overflow: "visible",
                     pointerEvents: "none"
                   })
                 }, [
                   w("div", null, [
                     k(t.$slots, "plot-comment", {
-                      plot: { ...l, textAlign: Se(v.value[a].middlePoint), flexAlign: Se(v.value[a].middlePoint), isFirstLoad: z.value }
+                      plot: { ...l, textAlign: Se(v.value[a].middlePoint), flexAlign: Se(v.value[a].middlePoint), isFirstLoad: Y.value }
                     }, void 0, !0)
                   ])
                 ], 12, tn)) : d("", !0)
@@ -2031,8 +2032,8 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
             k(t.$slots, "svg", {
               svg: {
                 ...n.value,
-                isPrintingImg: s(Ge) | s(xt) | Ee.value,
-                isPrintingSvg: Ve.value
+                isPrintingImg: s(Ge) | s(xt) | Ve.value,
+                isPrintingSvg: Ee.value
               }
             }, void 0, !0)
           ], 512)
@@ -2042,14 +2043,14 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
         ])) : d("", !0)
       ]),
       t.$slots.watermark ? (u(), i("div", an, [
-        k(t.$slots, "watermark", K(Q({ isPrinting: s(Ge) || s(xt) || Ee.value || Ve.value })), void 0, !0)
+        k(t.$slots, "watermark", K(Q({ isPrinting: s(Ge) || s(xt) || Ve.value || Ee.value })), void 0, !0)
       ])) : d("", !0),
       w("div", {
-        id: `legend-bottom-${g.value}`
+        id: `legend-bottom-${p.value}`
       }, null, 8, on),
       bt.value ? (u(), ge(na, {
         key: 6,
-        to: e.value.style.chart.legend.position === "top" ? `#legend-top-${g.value}` : `#legend-bottom-${g.value}`
+        to: e.value.style.chart.legend.position === "top" ? `#legend-top-${p.value}` : `#legend-bottom-${p.value}`
       }, [
         w("div", {
           ref_key: "chartLegend",
@@ -2064,7 +2065,7 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
           }, Wt({
             item: _(({ legend: l, index: a }) => [
               w("div", {
-                style: P(`opacity:${B.value.includes(a) ? 0.5 : 1}`),
+                style: L(`opacity:${N.value.includes(a) ? 0.5 : 1}`),
                 onClick: (r) => l.segregate()
               }, ye(l.display), 13, nn)
             ]),
@@ -2074,7 +2075,7 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
                 backgroundColor: e.value.style.chart.legend.selectAllToggle.backgroundColor,
                 color: e.value.style.chart.legend.selectAllToggle.color,
                 fontSize: e.value.style.chart.legend.fontSize,
-                checked: B.value.length > 0,
+                checked: N.value.length > 0,
                 isCursorPointer: xe.value,
                 onToggle: Cl
               }, null, 8, ["backgroundColor", "color", "fontSize", "checked", "isCursorPointer"])) : d("", !0)
@@ -2089,7 +2090,7 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
                   radius: 30,
                   stroke: "none",
                   plot: { x: 30, y: 30 },
-                  fill: `url(#pattern_${g.value}_${a})`
+                  fill: `url(#pattern_${p.value}_${a})`
                 }, null, 8, ["shape", "fill"])
               ]),
               key: "0"
@@ -2110,7 +2111,7 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
         k(t.$slots, "hollow", K(Q({
           total: te.value,
           average: Rt.value,
-          dataset: V.value
+          dataset: U.value
         })), void 0, !0)
       ])) : d("", !0),
       At(s(Ke), {
@@ -2125,7 +2126,7 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
         backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
         position: e.value.style.chart.tooltip.position,
         offsetY: e.value.style.chart.tooltip.offsetY,
-        parent: S.value,
+        parent: M.value,
         content: se.value,
         isCustom: st.value,
         isFullscreen: Xe.value,
@@ -2133,18 +2134,18 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
         backdropFilter: e.value.style.chart.tooltip.backdropFilter,
         smoothForce: e.value.style.chart.tooltip.smoothForce,
         smoothSnapThreshold: e.value.style.chart.tooltip.smoothSnapThrehsold,
-        isA11yMode: H.value === "keyboard",
+        isA11yMode: G.value === "keyboard",
         a11yPosition: wt.value
       }, {
         "tooltip-before": _(() => [
-          k(t.$slots, "tooltip-before", K(Q({ ...Et.value })), void 0, !0)
+          k(t.$slots, "tooltip-before", K(Q({ ...Vt.value })), void 0, !0)
         ]),
         "tooltip-after": _(() => [
-          k(t.$slots, "tooltip-after", K(Q({ ...Et.value })), void 0, !0)
+          k(t.$slots, "tooltip-after", K(Q({ ...Vt.value })), void 0, !0)
         ]),
         _: 3
       }, 8, ["teleportTo", "show", "backgroundColor", "color", "fontSize", "borderRadius", "borderColor", "borderWidth", "backgroundOpacity", "position", "offsetY", "parent", "content", "isCustom", "isFullscreen", "smooth", "backdropFilter", "smoothForce", "smoothSnapThreshold", "isA11yMode", "a11yPosition"]),
-      Y.value && e.value.userOptions.buttons.table ? (u(), ge(sa(rt.value.component), jt({ key: 9 }, rt.value.props, {
+      B.value && e.value.userOptions.buttons.table ? (u(), ge(sa(rt.value.component), jt({ key: 9 }, rt.value.props, {
         ref_key: "tableUnit",
         ref: ze,
         onClose: rl
@@ -2205,8 +2206,8 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
             w("button", {
               tabindex: "0",
               class: "vue-ui-user-options-button",
-              onClick: o[4] || (o[4] = (l) => Vt(e.value.userOptions.callbacks.csv)),
-              style: P({ cursor: xe.value ? "pointer" : "default" })
+              onClick: o[4] || (o[4] = (l) => Et(e.value.userOptions.callbacks.csv)),
+              style: L({ cursor: xe.value ? "pointer" : "default" })
             }, [
               At(s(vt), {
                 name: "fileCsv",
@@ -2222,7 +2223,7 @@ const Ra = ["id"], Ea = ["id"], Va = ["id"], Ua = { style: { position: "relative
       ], !0)
     ], 46, Ra));
   }
-}, Ln = /* @__PURE__ */ Xa(rn, [["__scopeId", "data-v-7865c76c"]]);
+}, Ln = /* @__PURE__ */ Xa(rn, [["__scopeId", "data-v-af8588d0"]]);
 export {
   Ln as default
 };