react-ajala - npm Package Compare versions

Comparing version 0.2.11 to 0.2.12

dist/react-ajala.js

@@ -6,12 +6,12 @@ import { jsxs as ot, jsx as K } from "react/jsx-runtime";
   throw TypeError(l);
-}, pt = (l, t, e) => t in l ? dt(l, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : l[t] = e, p = (l, t, e) => pt(l, typeof t != "symbol" ? t + "" : t, e), V = (l, t, e) => t.has(l) || k("Cannot " + e), _ = (l, t, e) => (V(l, t, "read from private field"), e ? e.call(l) : t.get(l)), E = (l, t, e) => t.has(l) ? k("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(l) : t.set(l, e), L = (l, t, e, a) => (V(l, t, "write to private field"), t.set(l, e), e), y = (l, t, e) => (V(l, t, "access private method"), e);
+}, pt = (l, t, e) => t in l ? dt(l, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : l[t] = e, p = (l, t, e) => pt(l, typeof t != "symbol" ? t + "" : t, e), V = (l, t, e) => t.has(l) || k("Cannot " + e), _ = (l, t, e) => (V(l, t, "read from private field"), e ? e.call(l) : t.get(l)), E = (l, t, e) => t.has(l) ? k("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(l) : t.set(l, e), L = (l, t, e, n) => (V(l, t, "write to private field"), t.set(l, e), e), y = (l, t, e) => (V(l, t, "access private method"), e);
 function _t(l) {
-  const t = /* @__PURE__ */ new Map(), e = [], a = [];
-  for (const n of l)
-    (n == null ? void 0 : n.order) === void 0 ? e.push(n) : (n == null ? void 0 : n.order) > l.length || (n == null ? void 0 : n.order) < 0 ? a.push(n) : t.set(n.order, n);
-  const s = new Array(l.length);
-  let o = 0, i = 0;
-  for (let n = 0; n < l.length; n++)
-    t.has(n) ? s[n] = t.get(n) : o < e.length ? s[n] = e[o++] : s[n] = a[i++];
-  return s.length === l.length ? s : s.slice(0, l.length);
+  const t = /* @__PURE__ */ new Map(), e = [], n = [];
+  for (const a of l)
+    (a == null ? void 0 : a.order) === void 0 ? e.push(a) : (a == null ? void 0 : a.order) > l.length || (a == null ? void 0 : a.order) < 0 ? n.push(a) : t.set(a.order, a);
+  const o = new Array(l.length);
+  let s = 0, i = 0;
+  for (let a = 0; a < l.length; a++)
+    t.has(a) ? o[a] = t.get(a) : s < e.length ? o[a] = e[s++] : o[a] = n[i++];
+  return o.length === l.length ? o : o.slice(0, l.length);
 }
@@ -25,17 +25,17 @@ function X(l) {
   ];
-  for (let a = 0; a < l.length; a++) {
-    const s = l[a];
-    Object.keys(s).forEach((o) => {
-      if (!e.includes(o)) {
-        const i = s[o];
-        i && typeof i == "object" && Object.keys(i).forEach((n) => {
-          if (n === "default") return;
+  for (let n = 0; n < l.length; n++) {
+    const o = l[n];
+    Object.keys(o).forEach((s) => {
+      if (!e.includes(s)) {
+        const i = o[s];
+        i && typeof i == "object" && Object.keys(i).forEach((a) => {
+          if (a === "default") return;
           const d = {
-            id: s.id,
-            key: o,
-            value: i[n],
-            media_query: n,
+            id: o.id,
+            key: s,
+            value: i[a],
+            media_query: a,
             default: i.default
           };
-          t[n] ? t[n].push(d) : t[n] = [d];
+          t[a] ? t[a].push(d) : t[a] = [d];
         });
@@ -48,9 +48,9 @@ }
 function I(l, t, e) {
-  const a = JSON.parse(JSON.stringify(l));
-  return t.forEach((s) => {
-    const o = a.findIndex(
-      (i) => (i == null ? void 0 : i.id) === s.id
+  const n = JSON.parse(JSON.stringify(l));
+  return t.forEach((o) => {
+    const s = n.findIndex(
+      (i) => (i == null ? void 0 : i.id) === o.id
     );
-    o > -1 && (a[o][s.key] = s[e]);
-  }), _t(a);
+    s > -1 && (n[s][o.key] = o[e]);
+  }), _t(n);
 }
@@ -61,6 +61,6 @@ function F(l, t) {
   );
-  return Object.values(t).forEach((a) => {
-    a && (e = I(
+  return Object.values(t).forEach((n) => {
+    n && (e = I(
       e,
-      a,
+      n,
       "default"
@@ -73,5 +73,5 @@ ));
   let e = null;
-  return function(...a) {
+  return function(...n) {
     e && clearTimeout(e), e = setTimeout(() => {
-      l(...a), clearTimeout(e), e = null;
+      l(...n), clearTimeout(e), e = null;
     }, t);
@@ -82,9 +82,9 @@ };
   const t = /* @__PURE__ */ new Set(), e = [];
-  for (let a = 0; a < l.length; a++) {
-    const s = l[a], o = `step-${a + Math.random()}`;
-    s.id ? t.has(s.id) ? (console.warn(
-      `Duplicate ajala step id found: ${s.id}. Please make sure all step ids are unique.`
-    ), s.id = o) : t.add(s.id) : (s.id = o, console.warn(
-      `ajala step ${a} is missing an id. Please make sure all steps have unique ids.`
-    )), e.push(s);
+  for (let n = 0; n < l.length; n++) {
+    const o = l[n], s = `step-${n + Math.random()}`;
+    o.id ? t.has(o.id) ? (console.warn(
+      `Duplicate ajala step id found: ${o.id}. Please make sure all step ids are unique.`
+    ), o.id = s) : t.add(o.id) : (o.id = s, console.warn(
+      `ajala step ${n} is missing an id. Please make sure all steps have unique ids.`
+    )), e.push(o);
   }
@@ -105,3 +105,3 @@ return e;
   init() {
-    var t, e, a, s, o, i, n, d, h, v;
+    var t, e, n, o, s, i, a, d, h, v;
     this.tooltip_element = this.ajala.options.custom_tooltip || document.createElement("div"), this.tooltip_container_element = document.createElement("div"), this.next_btn = null, this.prev_btn = null, this.close_btn = null, this.overlay_path.addEventListener(
@@ -115,3 +115,3 @@ "click",
     const r = (t = this.ajala.options.default_arrow_options) != null && t.size ? `${(e = this.ajala.options.default_arrow_options) == null ? void 0 : e.size}px` : "48px";
-    this.arrow_element.style.position = "absolute", this.arrow_element.style.width = r, this.arrow_element.style.height = r, this.arrow_element.style.top = "0px", this.arrow_element.style.left = "0px", this.arrow_element.style.fill = ((a = this.ajala.options.default_arrow_options) == null ? void 0 : a.color) || "#000000", this.arrow_element.style.zIndex = "2", this.arrow_element.style.pointerEvents = "none", this.arrow_element.classList.add("ajala_tooltip_arrow"), (s = this.ajala.options.default_arrow_options) != null && s.hide || this.tooltip_container_element.appendChild(this.arrow_element), this.tooltip_container_element.style.position = "fixed", this.tooltip_container_element.style.top = "0px", this.tooltip_container_element.style.left = "0px", this.tooltip_container_element.style.zIndex = "20", this.tooltip_container_element.style.width = (o = this.ajala.options) != null && o.tooltip_width ? `${(i = this.ajala.options) == null ? void 0 : i.tooltip_width}px` : "250px", this.tooltip_container_element.style.height = (n = this.ajala.options) != null && n.tooltip_height ? `${(d = this.ajala.options) == null ? void 0 : d.tooltip_height}px` : "180px", this.tooltip_container_element.style.pointerEvents = "auto", this.tooltip_container_element.classList.add("ajala_tooltip_container"), this.tooltip_container_element.appendChild(this.tooltip_element), this.tooltip_container_element.style.transform = "translate(0px, 0px)", this.wrapper_element.style.position = "fixed", this.wrapper_element.style.top = "0px", this.wrapper_element.style.left = "0px", this.wrapper_element.style.zIndex = "9999999", this.wrapper_element.classList.add("ajala"), this.wrapper_element.append(this.tooltip_container_element);
+    this.arrow_element.style.position = "absolute", this.arrow_element.style.width = r, this.arrow_element.style.height = r, this.arrow_element.style.top = "0px", this.arrow_element.style.left = "0px", this.arrow_element.style.fill = ((n = this.ajala.options.default_arrow_options) == null ? void 0 : n.color) || "#000000", this.arrow_element.style.zIndex = "2", this.arrow_element.style.pointerEvents = "none", this.arrow_element.classList.add("ajala_tooltip_arrow"), (o = this.ajala.options.default_arrow_options) != null && o.hide || this.tooltip_container_element.appendChild(this.arrow_element), this.tooltip_container_element.style.position = "fixed", this.tooltip_container_element.style.top = "0px", this.tooltip_container_element.style.left = "0px", this.tooltip_container_element.style.zIndex = "20", this.tooltip_container_element.style.width = (s = this.ajala.options) != null && s.tooltip_width ? `${(i = this.ajala.options) == null ? void 0 : i.tooltip_width}px` : "250px", this.tooltip_container_element.style.height = (a = this.ajala.options) != null && a.tooltip_height ? `${(d = this.ajala.options) == null ? void 0 : d.tooltip_height}px` : "180px", this.tooltip_container_element.style.pointerEvents = "auto", this.tooltip_container_element.classList.add("ajala_tooltip_container"), this.tooltip_container_element.appendChild(this.tooltip_element), this.tooltip_container_element.style.transform = "translate(0px, 0px)", this.wrapper_element.style.position = "fixed", this.wrapper_element.style.top = "0px", this.wrapper_element.style.left = "0px", this.wrapper_element.style.zIndex = "9999999", this.wrapper_element.classList.add("ajala"), this.wrapper_element.append(this.tooltip_container_element);
     const m = document.createElement("style");
@@ -137,19 +137,19 @@ m.innerHTML = `
   update(t) {
-    var e, a, s, o;
+    var e, n, o, s;
     const i = this.ajala.options.default_tooltip_options;
     if (this.is_default_tooltip_element) {
       if (!(i != null && i.hide_dot_nav)) {
-        const n = this.ajala.getFlattenSteps().map((h, v) => {
+        const a = this.ajala.getFlattenSteps().map((h, v) => {
           const r = document.createElement("div");
           return r.classList.add("ajala_dot_nav"), v === this.ajala.getActiveStepFlattenIndex() && r.classList.add("ajala_dot_nav_active"), r;
         }), d = this.wrapper_element.querySelector(".ajala_dot_navs");
-        d && d.replaceChildren(...n);
+        d && d.replaceChildren(...a);
       }
       if (!(i != null && i.hide_title)) {
-        const n = document.querySelector(".ajala_title");
-        n && (n.innerText = ((e = this.ajala.active_step) == null ? void 0 : e.title) ?? "");
+        const a = document.querySelector(".ajala_title");
+        a && (a.innerText = ((e = this.ajala.active_step) == null ? void 0 : e.title) ?? "");
       }
       if (!(i != null && i.hide_content)) {
-        const n = document.querySelector(".ajala_content");
-        n && (n.innerText = ((a = this.ajala.active_step) == null ? void 0 : a.content) ?? "");
+        const a = document.querySelector(".ajala_content");
+        a && (a.innerText = ((n = this.ajala.active_step) == null ? void 0 : n.content) ?? "");
       }
@@ -159,6 +159,6 @@ this.next_btn && (this.next_btn.innerText = "Next");
     if (t) {
-      const { active_index: n, placement: d, taregt_el: h } = t;
-      if ((((s = this.ajala.active_step) == null ? void 0 : s.enable_target_interaction) ?? ((o = this.ajala.options) == null ? void 0 : o.enable_target_interaction)) && h && h.classList.add("ajala_target_interactive"), this.ajala.getFlattenSteps().length - 1 === this.ajala.getActiveStepFlattenIndex() && this.next_btn && (this.next_btn.innerText = "Finish"), h) {
+      const { active_index: a, placement: d, taregt_el: h } = t;
+      if ((((o = this.ajala.active_step) == null ? void 0 : o.enable_target_interaction) ?? ((s = this.ajala.options) == null ? void 0 : s.enable_target_interaction)) && h && h.classList.add("ajala_target_interactive"), this.ajala.getFlattenSteps().length - 1 === this.ajala.getActiveStepFlattenIndex() && this.next_btn && (this.next_btn.innerText = "Finish"), h) {
         const { x: v, y: r, rotate: m } = this.placement.arrow.calculatePlacmentDelta({
-          active_index: n,
+          active_index: a,
           placement: d
@@ -174,22 +174,22 @@ });
     y: e,
-    height: a,
-    width: s,
-    border_radius: o
+    height: n,
+    width: o,
+    border_radius: s
   }) {
     const i = `
-  M${t + o},${e}
-  h${Math.max(s - 2 * o, 0)}
-  a${o},${o} 0 0 1 ${o},${o}
-  v${Math.max(a - 2 * o, 0)}
-  a${o},${o} 0 0 1 -${o},${o}
-  h-${Math.max(s - 2 * o, 0)}
-  a${o},${o} 0 0 1 -${o},-${o}
-  v-${Math.max(a - 2 * o, 0)}
-  a${o},${o} 0 0 1 ${o},-${o}
+  M${t + s},${e}
+  h${Math.max(o - 2 * s, 0)}
+  a${s},${s} 0 0 1 ${s},${s}
+  v${Math.max(n - 2 * s, 0)}
+  a${s},${s} 0 0 1 -${s},${s}
+  h-${Math.max(o - 2 * s, 0)}
+  a${s},${s} 0 0 1 -${s},-${s}
+  v-${Math.max(n - 2 * s, 0)}
+  a${s},${s} 0 0 1 ${s},-${s}
   z
-`, n = `
+`, a = `
   M${window.innerWidth},0 L0,0 L0,${window.innerHeight} L${window.innerWidth},${window.innerHeight} L${window.innerWidth},0 Z
   ${i}
 `;
-    this.overlay_path.setAttribute("d", n);
+    this.overlay_path.setAttribute("d", a);
   }
@@ -211,11 +211,11 @@ resetOverlayCutoutSvgRect() {
     var e;
-    const a = document.querySelector(t || "");
+    const n = document.querySelector(t || "");
     return t || console.warn(
       `Please provide a selectors for ajala step with id ${(e = this.ajala.active_step) == null ? void 0 : e.id}`
-    ), !a && t && console.warn(
+    ), !n && t && console.warn(
       `ajala coundn't find element with selector ${t}`
-    ), a;
+    ), n;
   }
   start() {
-    var t, e, a;
+    var t, e, n;
     this.wrapper_element.remove(), document.body.classList.remove("ajala_active"), document.body.style.overflow = "hidden", this.ajala.dispatchEvent({
@@ -238,4 +238,4 @@ type: "onBeforeDomInsert",
     }), document.body.classList.add("ajala_active");
-    const s = this.tooltip_container_element.getBoundingClientRect();
-    this.tooltip_container_element.style.transform = `translate(-${s.width}px, 0px)`, this.resetOverlayCutoutSvgRect(), this.next_btn && (this.next_btn.innerText = "Next"), this.navigation && ((t = this.next_btn) == null || t.addEventListener("click", this.navigation.next), (e = this.prev_btn) == null || e.addEventListener("click", this.navigation.prev), (a = this.close_btn) == null || a.addEventListener("click", this.navigation.close));
+    const o = this.tooltip_container_element.getBoundingClientRect();
+    this.tooltip_container_element.style.transform = `translate(-${o.width}px, 0px)`, this.resetOverlayCutoutSvgRect(), this.next_btn && (this.next_btn.innerText = "Next"), this.navigation && ((t = this.next_btn) == null || t.addEventListener("click", this.navigation.next), (e = this.prev_btn) == null || e.addEventListener("click", this.navigation.prev), (n = this.close_btn) == null || n.addEventListener("click", this.navigation.close));
   }
@@ -249,4 +249,4 @@ closeOnOverlayClickHandler() {
       var e;
-      const a = (e = this.ajala.getActiveStep()) == null ? void 0 : e.id;
-      a && this.ajala.goToStep(a);
+      const n = (e = this.ajala.getActiveStep()) == null ? void 0 : e.id;
+      n && this.ajala.goToStep(n);
     };
@@ -275,4 +275,4 @@ t(), setTimeout(t, 1e3);
   cleanUp() {
-    var t, e, a;
-    this.navigation && ((t = this.next_btn) == null || t.removeEventListener("click", this.navigation.next), (e = this.prev_btn) == null || e.removeEventListener("click", this.navigation.prev), (a = this.close_btn) == null || a.removeEventListener("click", this.navigation.close)), this.overlay_path.removeEventListener(
+    var t, e, n;
+    this.navigation && ((t = this.next_btn) == null || t.removeEventListener("click", this.navigation.next), (e = this.prev_btn) == null || e.removeEventListener("click", this.navigation.prev), (n = this.close_btn) == null || n.removeEventListener("click", this.navigation.close)), this.overlay_path.removeEventListener(
       "click",
@@ -284,10 +284,10 @@ this.closeOnOverlayClickHandler
 M = /* @__PURE__ */ new WeakSet(), tt = function() {
-  var l, t, e, a, s, o;
+  var l, t, e, n, o, s;
   this.is_default_tooltip_element = !0;
   const i = this.ajala.options.default_tooltip_options;
   this.tooltip_element.classList.add("ajala_tooltip");
-  let n = "";
+  let a = "";
   const d = this.ajala.getFlattenSteps().length;
   for (let h = 0; h < d; h++)
-    n = `${n} <div class="ajala_dot_nav"></div>
+    a = `${a} <div class="ajala_dot_nav"></div>
       `;
@@ -297,3 +297,3 @@ this.tooltip_element.innerHTML = `
             <div class="ajala_dot_navs">
-              ${n}
+              ${a}
             </div>
@@ -323,3 +323,3 @@ <button class="ajala_close_btn">
             <button class="ajala_btn_next">Next</button>
-          </div>`, this.next_btn = this.tooltip_element.querySelector(".ajala_btn_next"), this.prev_btn = this.tooltip_element.querySelector(".ajala_btn_prev"), this.close_btn = this.tooltip_element.querySelector(".ajala_close_btn"), i != null && i.class_name && this.tooltip_element.classList.add(i.class_name), i != null && i.hide_dot_nav && ((e = this.tooltip_element.querySelector(".ajala_dot_navs")) == null || e.remove()), i != null && i.hide_title && ((a = this.tooltip_element.querySelector(".ajala_title")) == null || a.remove()), i != null && i.hide_content && ((s = this.tooltip_element.querySelector(".ajala_content")) == null || s.remove()), i != null && i.hide_close_btn && ((o = this.close_btn) == null || o.remove());
+          </div>`, this.next_btn = this.tooltip_element.querySelector(".ajala_btn_next"), this.prev_btn = this.tooltip_element.querySelector(".ajala_btn_prev"), this.close_btn = this.tooltip_element.querySelector(".ajala_close_btn"), i != null && i.class_name && this.tooltip_element.classList.add(i.class_name), i != null && i.hide_dot_nav && ((e = this.tooltip_element.querySelector(".ajala_dot_navs")) == null || e.remove()), i != null && i.hide_title && ((n = this.tooltip_element.querySelector(".ajala_title")) == null || n.remove()), i != null && i.hide_content && ((o = this.tooltip_element.querySelector(".ajala_content")) == null || o.remove()), i != null && i.hide_close_btn && ((s = this.close_btn) == null || s.remove());
 }, et = function() {
@@ -333,3 +333,3 @@ var l, t;
   var l, t, e;
-  const a = ((t = (l = this.ajala.options.overlay_options) == null ? void 0 : l.opacity) == null ? void 0 : t.toString()) || " 0.7", s = ((e = this.ajala.options.overlay_options) == null ? void 0 : e.color) || " black";
+  const n = ((t = (l = this.ajala.options.overlay_options) == null ? void 0 : l.opacity) == null ? void 0 : t.toString()) || " 0.7", o = ((e = this.ajala.options.overlay_options) == null ? void 0 : e.color) || " black";
   this.overlay_element.setAttribute("xmlns", "http://www.w3.org/2000/svg"), this.overlay_element.style.position = "fixed", this.overlay_element.style.zIndex = "10", this.overlay_element.style.top = "0px", this.overlay_element.style.left = "0px", this.overlay_element.style.width = "100vw", this.overlay_element.style.height = "100vh", this.overlay_element.style.pointerEvents = "none", this.overlay_element.classList.add("ajala_overlay"), this.overlay_path.style.pointerEvents = "auto", this.updateOverlayCutoutPathData({
@@ -341,3 +341,3 @@ x: 0,
     border_radius: 0
-  }), this.overlay_path.style.fill = s, this.overlay_path.style.opacity = a, this.overlay_element.appendChild(this.overlay_path);
+  }), this.overlay_path.style.fill = o, this.overlay_path.style.opacity = n, this.overlay_element.appendChild(this.overlay_path);
 };
@@ -352,5 +352,5 @@ class gt {
   async goTo(t) {
-    var e, a, s;
+    var e, n, o;
     if (!((e = this.animations) != null && e.is_animating)) {
-      if ((a = this.ajala.getFlattenSteps()[t]) != null && a.skip) {
+      if ((n = this.ajala.getFlattenSteps()[t]) != null && n.skip) {
         console.warn("You can't go to an ajala step that's meant to be skipped");
@@ -361,5 +361,5 @@ return;
         this.animations.is_animating = !0, this.ui.resetOverlayCutoutSvgRect();
-        const o = (s = this.ajala.getOriginalSteps()[this.ajala.getActiveStepOriginalIndex()]) == null ? void 0 : s.onInActive;
-        o && t !== this.ajala.getActiveStepFlattenIndex() && o(this.ajala.getActiveStep(), this.ajala);
-        const i = await this.placement.tooltip.calculateTravelDistance(t), n = () => {
+        const s = (o = this.ajala.getOriginalSteps()[this.ajala.getActiveStepOriginalIndex()]) == null ? void 0 : o.onInActive;
+        s && t !== this.ajala.getActiveStepFlattenIndex() && s(this.ajala.getActiveStep(), this.ajala);
+        const i = await this.placement.tooltip.calculateTravelDistance(t), a = () => {
           var d;
@@ -379,3 +379,3 @@ this.animations.is_animating = !1, this.ajala.active_step = this.ajala.getFlattenSteps()[i.active_index], this.ui.update(i);
           {
-            onComplete: n
+            onComplete: a
           }
@@ -392,12 +392,12 @@ );
       this.animations.is_animating = !0;
-      const a = (t = this.ajala.getOriginalSteps()[this.ajala.getActiveStepOriginalIndex()]) == null ? void 0 : t.onInActive;
-      a && e !== this.ajala.getActiveStepFlattenIndex() && a(this.ajala.getActiveStep(), this.ajala), this.ajala.dispatchEvent({
+      const n = (t = this.ajala.getOriginalSteps()[this.ajala.getActiveStepOriginalIndex()]) == null ? void 0 : t.onInActive;
+      n && e !== this.ajala.getActiveStepFlattenIndex() && n(this.ajala.getActiveStep(), this.ajala), this.ajala.dispatchEvent({
         type: "onNext",
         data: this.ajala
       }), this.ui.resetOverlayCutoutSvgRect();
-      const s = await this.placement.tooltip.calculateTravelDistance(e), o = () => {
+      const o = await this.placement.tooltip.calculateTravelDistance(e), s = () => {
         var i;
-        this.animations.is_animating = !1, this.ajala.active_step = this.ajala.getFlattenSteps()[s.active_index], this.ui.update(s);
-        const n = (i = this.ajala.getOriginalSteps()[this.ajala.getActiveStepOriginalIndex()]) == null ? void 0 : i.onActive;
-        n && n(this.ajala.getActiveStep(), this.ajala), this.ajala.dispatchEvent({
+        this.animations.is_animating = !1, this.ajala.active_step = this.ajala.getFlattenSteps()[o.active_index], this.ui.update(o);
+        const a = (i = this.ajala.getOriginalSteps()[this.ajala.getActiveStepOriginalIndex()]) == null ? void 0 : i.onActive;
+        a && a(this.ajala.getActiveStep(), this.ajala), this.ajala.dispatchEvent({
           type: "onTransitionComplete",
@@ -411,5 +411,5 @@ data: {
       this.animations.transition[this.animations.transition_type](
-        s,
+        o,
         {
-          onComplete: o
+          onComplete: s
         }
@@ -429,12 +429,12 @@ );
       this.animations.is_animating = !0;
-      const a = (t = this.ajala.getOriginalSteps()[this.ajala.getActiveStepOriginalIndex()]) == null ? void 0 : t.onInActive;
-      a && e !== this.ajala.getActiveStepFlattenIndex() && a(this.ajala.getActiveStep(), this.ajala), this.ajala.dispatchEvent({
+      const n = (t = this.ajala.getOriginalSteps()[this.ajala.getActiveStepOriginalIndex()]) == null ? void 0 : t.onInActive;
+      n && e !== this.ajala.getActiveStepFlattenIndex() && n(this.ajala.getActiveStep(), this.ajala), this.ajala.dispatchEvent({
         type: "onPrev",
         data: this.ajala
       }), this.ui.resetOverlayCutoutSvgRect();
-      const s = await this.placement.tooltip.calculateTravelDistance(e), o = () => {
+      const o = await this.placement.tooltip.calculateTravelDistance(e), s = () => {
         var i;
-        this.animations.is_animating = !1, this.ajala.active_step = this.ajala.getFlattenSteps()[s.active_index], this.ui.update(s);
-        const n = (i = this.ajala.getOriginalSteps()[this.ajala.getActiveStepOriginalIndex()]) == null ? void 0 : i.onActive;
-        n && n(this.ajala.getActiveStep(), this.ajala), this.ajala.dispatchEvent({
+        this.animations.is_animating = !1, this.ajala.active_step = this.ajala.getFlattenSteps()[o.active_index], this.ui.update(o);
+        const a = (i = this.ajala.getOriginalSteps()[this.ajala.getActiveStepOriginalIndex()]) == null ? void 0 : i.onActive;
+        a && a(this.ajala.getActiveStep(), this.ajala), this.ajala.dispatchEvent({
           type: "onTransitionComplete",
@@ -448,5 +448,5 @@ data: {
       this.animations.transition[this.animations.transition_type](
-        s,
+        o,
         {
-          onComplete: o
+          onComplete: s
         }
@@ -457,19 +457,19 @@ );
   getValidNavIndex(t, e) {
-    const a = this.ajala.getFlattenSteps()[t];
-    let s = t;
-    if (e === "next" && a != null && a.skip) {
-      s = this.ajala.getFlattenSteps().length;
-      for (let o = t; o < this.ajala.getFlattenSteps().length; o++) {
-        const i = this.ajala.getFlattenSteps()[o];
+    const n = this.ajala.getFlattenSteps()[t];
+    let o = t;
+    if (e === "next" && n != null && n.skip) {
+      o = this.ajala.getFlattenSteps().length;
+      for (let s = t; s < this.ajala.getFlattenSteps().length; s++) {
+        const i = this.ajala.getFlattenSteps()[s];
         if (!(i != null && i.skip)) {
-          s = o;
+          o = s;
           break;
         }
       }
-    } else if (e === "prev" && a != null && a.skip) {
-      s = -1;
-      for (let o = t; o > 0; o--) {
-        const i = this.ajala.getFlattenSteps()[o];
+    } else if (e === "prev" && n != null && n.skip) {
+      o = -1;
+      for (let s = t; s > 0; s--) {
+        const i = this.ajala.getFlattenSteps()[s];
         if (!(i != null && i.skip)) {
-          s = o;
+          o = s;
           break;
@@ -479,3 +479,3 @@ }
     }
-    return s;
+    return o;
   }
@@ -514,4 +514,4 @@ close() {
     this._listeners === void 0 && (this._listeners = {});
-    const a = this._listeners;
-    a[t] === void 0 && (a[t] = []), a[t].indexOf(e) === -1 && a[t].push(e);
+    const n = this._listeners;
+    n[t] === void 0 && (n[t] = []), n[t].indexOf(e) === -1 && n[t].push(e);
   }
@@ -525,8 +525,8 @@ /**
   removeEventListener(t, e) {
-    const a = this._listeners;
-    if (a === void 0) return;
-    const s = a[t];
-    if (s !== void 0) {
-      const o = s.indexOf(e);
-      o !== -1 && s.splice(o, 1);
+    const n = this._listeners;
+    if (n === void 0) return;
+    const o = n[t];
+    if (o !== void 0) {
+      const s = o.indexOf(e);
+      s !== -1 && o.splice(s, 1);
     }
@@ -542,7 +542,7 @@ }
     if (e === void 0) return;
-    const a = e[t.type];
-    if (a !== void 0) {
-      const s = a.slice(0);
-      for (let o = 0, i = s.length; o < i; o++)
-        s[o].call(this, t);
+    const n = e[t.type];
+    if (n !== void 0) {
+      const o = n.slice(0);
+      for (let s = 0, i = o.length; s < i; s++)
+        o[s].call(this, t);
     }
@@ -556,5 +556,5 @@ }
     ui: e,
-    placement: a
+    placement: n
   }) {
-    p(this, "ajala"), p(this, "placement"), E(this, T), this.ajala = t, L(this, T, e), this.placement = a;
+    p(this, "ajala"), p(this, "placement"), E(this, T), this.ajala = t, L(this, T, e), this.placement = n;
   }
@@ -565,11 +565,11 @@ calculatePlacmentDelta({
   }) {
-    const a = {
+    const n = {
       x: 0,
       y: 0,
       rotate: 0
-    }, s = _(this, T).getTargetElement(
+    }, o = _(this, T).getTargetElement(
       this.ajala.getFlattenSteps()[t].target
     );
-    if (!s) return a;
-    const o = s.getBoundingClientRect(), i = _(this, T).arrow_element.getBoundingClientRect(), n = _(this, T).tooltip_container_element.getBoundingClientRect(), { axis: d, align: h } = this.placement.getMetadata({
+    if (!o) return n;
+    const s = o.getBoundingClientRect(), i = _(this, T).arrow_element.getBoundingClientRect(), a = _(this, T).tooltip_container_element.getBoundingClientRect(), { axis: d, align: h } = this.placement.getMetadata({
       next_index: t,
@@ -580,27 +580,27 @@ placement: e
       if (h === "left") {
-        let r = A(0, n.width, 0.05);
-        o.width < n.width / 2 && (r = -i.width / 2 + o.width / 2), a.x = r;
+        let r = A(0, a.width, 0.05);
+        s.width < a.width / 2 && (r = -i.width / 2 + s.width / 2), n.x = r;
       } else if (h === "center") {
-        let r = A(0, n.width, 0.5);
-        r = r - i.width / 2, a.x = r;
+        let r = A(0, a.width, 0.5);
+        r = r - i.width / 2, n.x = r;
       } else if (h === "right") {
-        let r = A(0, n.width, 0.95);
-        r = r - i.width, o.width < n.width / 2 && (r = n.width - i.width / 2 - o.width / 2), a.x = r;
+        let r = A(0, a.width, 0.95);
+        r = r - i.width, s.width < a.width / 2 && (r = a.width - i.width / 2 - s.width / 2), n.x = r;
       }
-      d === "top" ? (a.rotate = 180, a.y = n.height - i.height / 2 + v) : d === "bottom" && (a.rotate = 0, a.y = -(i.height / 2) - v);
+      d === "top" ? (n.rotate = 180, n.y = a.height - i.height / 2 + v) : d === "bottom" && (n.rotate = 0, n.y = -(i.height / 2) - v);
     }
     if (d === "left" || d === "right") {
       if (h === "top") {
-        let r = A(0, n.height, 0.1);
-        o.height < n.height / 2 && (r = -i.height / 2 + o.height / 2), a.y = r;
+        let r = A(0, a.height, 0.1);
+        s.height < a.height / 2 && (r = -i.height / 2 + s.height / 2), n.y = r;
       } else if (h === "center") {
-        let r = A(0, n.height, 0.5);
-        r = r - i.height / 2, a.y = r;
+        let r = A(0, a.height, 0.5);
+        r = r - i.height / 2, n.y = r;
       } else if (h === "bottom") {
-        let r = A(0, n.height, 0.9);
-        r = r - i.height, o.height < n.height / 2 && (r = n.height - i.height / 2 - o.height / 2), a.y = r;
+        let r = A(0, a.height, 0.9);
+        r = r - i.height, s.height < a.height / 2 && (r = a.height - i.height / 2 - s.height / 2), n.y = r;
       }
-      d === "left" ? (a.rotate = 90, a.x = n.width - i.width / 2 + v) : d === "right" && (a.rotate = -90, a.x = -(i.width / 2) - v);
+      d === "left" ? (n.rotate = 90, n.x = a.width - i.width / 2 + v) : d === "right" && (n.rotate = -90, n.x = -(i.width / 2) - v);
     }
-    return a;
+    return n;
   }
@@ -616,38 +616,38 @@ cleanUp() {
     ui: e,
-    placement: a
+    placement: n
   }) {
-    E(this, C), p(this, "ajala"), p(this, "placement"), p(this, "ui"), this.ajala = t, this.ui = e, this.placement = a;
+    E(this, C), p(this, "ajala"), p(this, "placement"), p(this, "ui"), this.ajala = t, this.ui = e, this.placement = n;
   }
   async calculateTravelDistance(t) {
-    var e, a;
-    let s = !1;
+    var e, n;
+    let o = !1;
     this.ui.arrow_element.style.visibility = "hidden";
-    const o = this.ui.getTargetElement(
+    const s = this.ui.getTargetElement(
       this.ajala.getFlattenSteps()[t].target
     ), i = this.ui.tooltip_container_element;
-    let n = i.getBoundingClientRect();
+    let a = i.getBoundingClientRect();
     const d = (c) => c > 0 ? -c : Math.abs(c);
-    if (!o)
+    if (!s)
       return {
         is_valid: !0,
-        scrolled: s,
-        y_delta: window.innerHeight / 2 - n.height / 2,
-        x_delta: window.innerWidth / 2 - n.width / 2,
-        y_offset: d(n.y),
-        x_offset: d(n.x),
+        scrolled: o,
+        y_delta: window.innerHeight / 2 - a.height / 2,
+        x_delta: window.innerWidth / 2 - a.width / 2,
+        y_offset: d(a.y),
+        x_offset: d(a.x),
         active_index: t,
-        tooltip_rect: n,
+        tooltip_rect: a,
         target_rect: null,
-        taregt_el: o,
+        taregt_el: s,
         placement: "auto"
       };
-    let h = o.getBoundingClientRect();
+    let h = s.getBoundingClientRect();
     const v = this.ajala.getFlattenSteps()[t].tooltip_gutter ?? this.ajala.options.tooltip_gutter ?? 0;
-    let r = d(n.y), m = d(n.x), g = h.y + v, x = h.x + v;
-    (h.y < 0 || h.y > window.innerHeight || h.y + h.height > window.innerHeight || g < 0 || g > window.innerHeight || g + n.height > window.innerHeight || g + n.height < 0) && (((e = this.placement.animations) == null ? void 0 : e.transition_type) === "popout" && (this.ui.tooltip_container_element.style.visibility = "hidden"), await ((a = this.placement.animations) == null ? void 0 : a.scrollToLocation(
-      o,
+    let r = d(a.y), m = d(a.x), g = h.y + v, x = h.x + v;
+    (h.y < 0 || h.y > window.innerHeight || h.y + h.height > window.innerHeight || g < 0 || g > window.innerHeight || g + a.height > window.innerHeight || g + a.height < 0) && (((e = this.placement.animations) == null ? void 0 : e.transition_type) === "popout" && (this.ui.tooltip_container_element.style.visibility = "hidden"), await ((n = this.placement.animations) == null ? void 0 : n.scrollToLocation(
+      s,
       t
-    )), s = !0, h = o.getBoundingClientRect(), n = i.getBoundingClientRect(), r = d(n.y), m = d(n.x));
+    )), o = !0, h = s.getBoundingClientRect(), a = i.getBoundingClientRect(), r = d(a.y), m = d(a.x));
     const u = this.calculatePlacementDelta({
-      target: o,
+      target: s,
       next_index: t
@@ -660,8 +660,8 @@ });
       x_offset: m,
-      tooltip_rect: n,
+      tooltip_rect: a,
       target_rect: h,
-      taregt_el: o,
+      taregt_el: s,
       active_index: t,
       is_valid: !0,
-      scrolled: s,
+      scrolled: o,
       placement: u.placement
@@ -674,6 +674,6 @@ };
   }) {
-    let a = 0, s = 0, o = "auto";
+    let n = 0, o = 0, s = "auto";
     const {
       axis: i,
-      align: n,
+      align: a,
       axis_gutter: d,
@@ -688,6 +688,6 @@ spotlight: h,
     }), m = y(this, C, z).call(this, {
-      align: n,
+      align: a,
       target: t
     }), g = y(this, C, U).call(this, {
-      align: n,
+      align: a,
       target: t
@@ -697,3 +697,3 @@ });
       if (g.is_valid && r.is_valid)
-        a = g.alignment, s = r.axis, o = v;
+        n = g.alignment, o = r.axis, s = v;
       else {
@@ -705,7 +705,7 @@ const { auto_x_delta: x, auto_y_delta: u, auto_placement: c } = y(this, C, N).call(this, {
         });
-        a = x, s = u, o = c;
+        n = x, o = u, s = c;
       }
     else if (i === "left" || i === "right")
       if (m.is_valid && r.is_valid)
-        a = r.axis, s = m.alignment, o = v;
+        n = r.axis, o = m.alignment, s = v;
       else {
@@ -717,3 +717,3 @@ const { auto_x_delta: x, auto_y_delta: u, auto_placement: c } = y(this, C, N).call(this, {
         });
-        a = x, s = u, o = c;
+        n = x, o = u, s = c;
       }
@@ -726,8 +726,8 @@ else {
       });
-      a = x, s = u, o = c;
+      n = x, o = u, s = c;
     }
     return {
-      x_delta: a,
-      y_delta: s,
-      placement: o
+      x_delta: n,
+      y_delta: o,
+      placement: s
     };
@@ -743,3 +743,3 @@ }
 }) {
-  const a = [
+  const n = [
     "bottom_center",
@@ -758,5 +758,5 @@ "bottom_right",
   ];
-  let s = 0, o = 0, i = "bottom_center";
-  for (let n = 0; n < a.length; n++) {
-    i = a[n];
+  let o = 0, s = 0, i = "bottom_center";
+  for (let a = 0; a < n.length; a++) {
+    i = n[a];
     const d = i.split("_"), h = d[0], v = d[1], r = y(this, C, B).call(this, {
@@ -775,14 +775,14 @@ axis: h,
     if ((h === "bottom" || h === "top") && r.is_valid && g.is_valid) {
-      s = g.alignment, o = r.axis;
+      o = g.alignment, s = r.axis;
       break;
     }
     if ((h === "right" || h === "left") && r.is_valid && m.is_valid) {
-      s = r.axis, o = m.alignment;
+      o = r.axis, s = m.alignment;
       break;
     }
-    n === a.length - 1 && (o = r.axis, s = g.alignment);
+    a === n.length - 1 && (s = r.axis, o = g.alignment);
   }
   return {
-    auto_x_delta: s,
-    auto_y_delta: o,
+    auto_x_delta: o,
+    auto_y_delta: s,
     auto_placement: i
@@ -794,5 +794,5 @@ };
   axis_gutter: e,
-  spotlight_padding: a
+  spotlight_padding: n
 }) {
-  const s = t.getBoundingClientRect(), o = this.ui.tooltip_container_element.getBoundingClientRect(), i = {
+  const o = t.getBoundingClientRect(), s = this.ui.tooltip_container_element.getBoundingClientRect(), i = {
     is_valid: !1,
@@ -802,16 +802,16 @@ axis: 0
   if (l === "top") {
-    const n = s.y - o.height - e - a;
-    n >= 0 && s.y <= window.innerHeight ? (i.is_valid = !0, i.axis = n) : (i.is_valid = !1, i.axis = n);
+    const a = o.y - s.height - e - n;
+    a >= 0 && o.y <= window.innerHeight ? (i.is_valid = !0, i.axis = a) : (i.is_valid = !1, i.axis = a);
   }
   if (l === "bottom") {
-    const n = s.bottom + e + a;
-    n + o.height >= 0 && n + o.height <= window.innerHeight ? (i.is_valid = !0, i.axis = n) : (i.is_valid = !1, i.axis = n);
+    const a = o.bottom + e + n;
+    a + s.height >= 0 && a + s.height <= window.innerHeight ? (i.is_valid = !0, i.axis = a) : (i.is_valid = !1, i.axis = a);
   }
   if (l === "left") {
-    const n = s.x - o.width - e - a;
-    n >= 0 && s.x <= window.innerWidth ? (i.is_valid = !0, i.axis = n) : (i.is_valid = !1, i.axis = n);
+    const a = o.x - s.width - e - n;
+    a >= 0 && o.x <= window.innerWidth ? (i.is_valid = !0, i.axis = a) : (i.is_valid = !1, i.axis = a);
   }
   if (l === "right") {
-    const n = s.right + e + a;
-    n >= 0 && n + o.width <= window.innerWidth ? (i.is_valid = !0, i.axis = n) : (i.is_valid = !1, i.axis = n);
+    const a = o.right + e + n;
+    a >= 0 && a + s.width <= window.innerWidth ? (i.is_valid = !0, i.axis = a) : (i.is_valid = !1, i.axis = a);
   }
@@ -823,15 +823,15 @@ return i;
 }) {
-  const e = t.getBoundingClientRect(), a = this.ui.tooltip_container_element.getBoundingClientRect(), s = {
+  const e = t.getBoundingClientRect(), n = this.ui.tooltip_container_element.getBoundingClientRect(), o = {
     is_valid: !1,
     alignment: 0
   };
-  if (l === "top" && (e.y + a.height <= window.innerHeight && e.y >= 0 ? (s.is_valid = !0, s.alignment = e.y) : (s.is_valid = !1, s.alignment = e.y)), l === "center") {
-    const o = e.height / 2, i = a.height / 2, n = e.y + o - i;
-    n + e.height <= window.innerHeight && n >= 0 ? (s.is_valid = !0, s.alignment = n) : (s.is_valid = !1, s.alignment = n);
+  if (l === "top" && (e.y + n.height <= window.innerHeight && e.y >= 0 ? (o.is_valid = !0, o.alignment = e.y) : (o.is_valid = !1, o.alignment = e.y)), l === "center") {
+    const s = e.height / 2, i = n.height / 2, a = e.y + s - i;
+    a + e.height <= window.innerHeight && a >= 0 ? (o.is_valid = !0, o.alignment = a) : (o.is_valid = !1, o.alignment = a);
   }
   if (l === "bottom") {
-    const o = e.bottom - a.height;
-    o + a.height <= window.innerHeight && o >= 0 ? (s.is_valid = !0, s.alignment = o) : (s.is_valid = !1, s.alignment = o);
+    const s = e.bottom - n.height;
+    s + n.height <= window.innerHeight && s >= 0 ? (o.is_valid = !0, o.alignment = s) : (o.is_valid = !1, o.alignment = s);
   }
-  return s;
+  return o;
 }, U = function({
@@ -841,15 +841,15 @@ align: l,
 }) {
-  const e = t.getBoundingClientRect(), a = this.ui.tooltip_container_element.getBoundingClientRect(), s = {
+  const e = t.getBoundingClientRect(), n = this.ui.tooltip_container_element.getBoundingClientRect(), o = {
     is_valid: !1,
     alignment: 0
   };
-  if (l === "left" && (e.x + a.width <= window.innerWidth && e.x >= 0 ? (s.is_valid = !0, s.alignment = e.x) : (s.is_valid = !1, s.alignment = e.x)), l === "center") {
-    const o = e.width / 2, i = a.width / 2, n = e.x + o - i;
-    n >= 0 && n + a.width <= window.innerWidth ? (s.is_valid = !0, s.alignment = n) : (s.is_valid = !1, s.alignment = n);
+  if (l === "left" && (e.x + n.width <= window.innerWidth && e.x >= 0 ? (o.is_valid = !0, o.alignment = e.x) : (o.is_valid = !1, o.alignment = e.x)), l === "center") {
+    const s = e.width / 2, i = n.width / 2, a = e.x + s - i;
+    a >= 0 && a + n.width <= window.innerWidth ? (o.is_valid = !0, o.alignment = a) : (o.is_valid = !1, o.alignment = a);
   }
   if (l === "right") {
-    const o = e.right - a.width;
-    o + a.width <= window.innerWidth && o >= 0 ? (s.is_valid = !0, s.alignment = o) : (s.is_valid = !1, s.alignment = o);
+    const s = e.right - n.width;
+    s + n.width <= window.innerWidth && s >= 0 ? (o.is_valid = !0, o.alignment = s) : (o.is_valid = !1, o.alignment = s);
   }
-  return s;
+  return o;
 };
@@ -860,5 +860,5 @@ class yt {
     placement: e,
-    ui: a
+    ui: n
   }) {
-    p(this, "ajala"), p(this, "placement"), p(this, "ui"), this.ajala = t, this.placement = e, this.ui = a;
+    p(this, "ajala"), p(this, "placement"), p(this, "ui"), this.ajala = t, this.placement = e, this.ui = n;
   }
@@ -872,16 +872,16 @@ calculatePlacmentDelta({ active_index: t }) {
       border_radius: 0
-    }, a = this.ui.getTargetElement(
+    }, n = this.ui.getTargetElement(
       this.ajala.getFlattenSteps()[t].target
     );
-    if (!a) return e;
-    const s = a.getBoundingClientRect(), { spotlight: o } = this.placement.getMetadata({
+    if (!n) return e;
+    const o = n.getBoundingClientRect(), { spotlight: s } = this.placement.getMetadata({
       next_index: t
     });
-    return e.x = Math.max(0, s.x - o.padding), e.y = Math.max(0, s.y - o.padding), e.width = Math.min(
+    return e.x = Math.max(0, o.x - s.padding), e.y = Math.max(0, o.y - s.padding), e.width = Math.min(
       window.innerWidth,
-      s.width + o.padding * 2
+      o.width + s.padding * 2
     ), e.height = Math.min(
       window.innerWidth,
-      s.height + o.padding * 2
-    ), e.border_radius = o.border_radius, e;
+      o.height + s.padding * 2
+    ), e.border_radius = s.border_radius, e;
   }
@@ -901,9 +901,9 @@ }
   }) {
-    var a, s;
-    const o = this.ajala.getFlattenSteps()[t].tooltip_gutter || this.ajala.options.tooltip_gutter || 10, i = e || this.ajala.getFlattenSteps()[t].tooltip_placement || this.ajala.options.tooltip_placement || "auto", n = i.split("_"), d = this.ajala.getFlattenSteps()[t].spotlight_padding || ((a = this.ajala.options.spotlight_options) == null ? void 0 : a.padding) || 0, h = this.ajala.getFlattenSteps()[t].spotlight_border_radius || ((s = this.ajala.options.spotlight_options) == null ? void 0 : s.border_radius) || 0;
+    var n, o;
+    const s = this.ajala.getFlattenSteps()[t].tooltip_gutter || this.ajala.options.tooltip_gutter || 10, i = e || this.ajala.getFlattenSteps()[t].tooltip_placement || this.ajala.options.tooltip_placement || "auto", a = i.split("_"), d = this.ajala.getFlattenSteps()[t].spotlight_padding || ((n = this.ajala.options.spotlight_options) == null ? void 0 : n.padding) || 0, h = this.ajala.getFlattenSteps()[t].spotlight_border_radius || ((o = this.ajala.options.spotlight_options) == null ? void 0 : o.border_radius) || 0;
     return {
       placement: i,
-      axis: n[0],
-      align: n[1],
-      axis_gutter: o,
+      axis: a[0],
+      align: a[1],
+      axis_gutter: s,
       spotlight: {
@@ -923,7 +923,7 @@ padding: d,
     ui: e,
-    placement: a
+    placement: n
   }) {
     E(this, R), p(this, "ajala"), p(this, "ui"), p(this, "placement"), p(this, "transition_type"), p(this, "is_animating", !1), p(this, "transition");
-    var s;
-    this.ajala = t, this.ui = e, this.placement = a, this.transition_type = ((s = this.ajala.options) == null ? void 0 : s.transition_type) || "traveller", this.transition = {
+    var o;
+    this.ajala = t, this.ui = e, this.placement = n, this.transition_type = ((o = this.ajala.options) == null ? void 0 : o.transition_type) || "traveller", this.transition = {
       traveller: this.travelTransition.bind(this),
@@ -943,6 +943,6 @@ popout: this.popOutTransition.bind(this)
     to: e = 1,
-    duration: a = 1e3,
-    onPlay: s = () => {
+    duration: n = 1e3,
+    onPlay: o = () => {
     },
-    onUpdate: o = () => {
+    onUpdate: s = () => {
     },
@@ -952,10 +952,10 @@ onComplete: i = () => {
   }) {
-    const n = performance.now();
+    const a = performance.now();
     let d = !0, h;
     const v = (m) => m < 0.5 ? 2 * m * m : 1 - Math.pow(-2 * m + 2, 2) / 2;
-    s();
+    o();
     const r = (m) => {
       if (!d) return;
-      const g = m - n, x = Math.min(g / a, 1), u = v(x), c = A(t, e, u);
-      o(c), x < 1 ? (h = requestAnimationFrame(r), this.is_animating = !0) : (i(), this.is_animating = !1);
+      const g = m - a, x = Math.min(g / n, 1), u = v(x), c = A(t, e, u);
+      s(c), x < 1 ? (h = requestAnimationFrame(r), this.is_animating = !0) : (i(), this.is_animating = !1);
     };
@@ -969,9 +969,9 @@ return h = requestAnimationFrame(r), {
   scrollToLocation(t, e) {
-    return new Promise((a) => {
-      var s, o;
-      const i = t.getBoundingClientRect(), n = window.innerHeight / 2 - i.height / 2;
-      let d = window.scrollY + i.y - n;
+    return new Promise((n) => {
+      var o, s;
+      const i = t.getBoundingClientRect(), a = window.innerHeight / 2 - i.height / 2;
+      let d = window.scrollY + i.y - a;
       const h = document.documentElement.scrollHeight - window.innerHeight;
       d = Math.min(Math.max(0, d), h);
-      const v = ((s = this.ajala.getFlattenSteps()[e]) == null ? void 0 : s.scroll_duration) ?? ((o = this.ajala.options) == null ? void 0 : o.scroll_duration) ?? 1e3;
+      const v = ((o = this.ajala.getFlattenSteps()[e]) == null ? void 0 : o.scroll_duration) ?? ((s = this.ajala.options) == null ? void 0 : s.scroll_duration) ?? 1e3;
       this.animate({
@@ -985,3 +985,3 @@ from: window.scrollY,
         onComplete() {
-          a(null);
+          n(null);
         }
@@ -992,3 +992,3 @@ });
   spotlightTarget(t) {
-    const { x: e, y: a, width: s, height: o, border_radius: i } = this.placement.overlay_cutout_svg_rect.calculatePlacmentDelta({
+    const { x: e, y: n, width: o, height: s, border_radius: i } = this.placement.overlay_cutout_svg_rect.calculatePlacmentDelta({
       active_index: t
@@ -1000,8 +1000,8 @@ });
       duration: 500,
-      onUpdate: (n) => {
+      onUpdate: (a) => {
         this.ui.updateOverlayCutoutPathData({
           x: e,
-          y: a,
-          width: s * n,
-          height: o * n,
+          y: n,
+          width: o * a,
+          height: s * a,
           border_radius: i
@@ -1013,3 +1013,3 @@ });
           x: e,
-          y: a,
+          y: n,
           width: 0,
@@ -1024,10 +1024,10 @@ height: 0,
     onComplete: e,
-    onPlay: a
+    onPlay: n
   } = {}) {
-    const s = this.ui.tooltip_container_element;
+    const o = this.ui.tooltip_container_element;
     if (t.is_valid) {
       const {
-        x_delta: o,
+        x_delta: s,
         x_offset: i,
-        y_delta: n,
+        y_delta: a,
         y_offset: d,
@@ -1042,4 +1042,4 @@ tooltip_rect: h,
         onUpdate(r) {
-          const m = (h == null ? void 0 : h.x) ?? 0, g = (h == null ? void 0 : h.y) ?? 0, x = m + (o + i) * r, u = g + (n + d) * r;
-          s.style.transform = `translate(${x}px, ${u}px)`;
+          const m = (h == null ? void 0 : h.x) ?? 0, g = (h == null ? void 0 : h.y) ?? 0, x = m + (s + i) * r, u = g + (a + d) * r;
+          o.style.transform = `translate(${x}px, ${u}px)`;
         },
@@ -1050,3 +1050,3 @@ onComplete: () => {
         onPlay: () => {
-          this.ui.tooltip_container_element.style.visibility = "visible", this.spotlightTarget(v), a && a();
+          this.ui.tooltip_container_element.style.visibility = "visible", this.spotlightTarget(v), n && n();
         }
@@ -1058,13 +1058,13 @@ });
     onComplete: e,
-    onPlay: a
+    onPlay: n
   } = {}) {
-    const s = this.ui.tooltip_container_element;
+    const o = this.ui.tooltip_container_element;
     if (t.is_valid) {
-      const { x_delta: o, y_delta: i, active_index: n } = t;
+      const { x_delta: s, y_delta: i, active_index: a } = t;
       this.animate({
         from: 0,
         to: 1,
-        duration: y(this, R, J).call(this, n),
+        duration: y(this, R, J).call(this, a),
         onUpdate(d) {
-          s.style.visibility = "visible", s.style.transform = `translate(${o}px, ${i}px) scale(${d})`;
+          o.style.visibility = "visible", o.style.transform = `translate(${s}px, ${i}px) scale(${d})`;
         },
@@ -1075,3 +1075,3 @@ onComplete: () => {
         onPlay: () => {
-          this.spotlightTarget(n), a && a();
+          this.spotlightTarget(a), n && n();
         }
@@ -1088,8 +1088,8 @@ });
 class jt extends ut {
-  constructor(t, { start_immediately: e = !0, ...a } = {
+  constructor(t, { start_immediately: e = !0, ...n } = {
     start_immediately: !0
   }) {
     super(), E(this, D), p(this, "options"), p(this, "is_active"), p(this, "initialized"), p(this, "original_steps"), p(this, "flatten_steps"), E(this, j), p(this, "active_step"), E(this, w), E(this, f), E(this, O), E(this, P);
-    const s = b(t);
-    this.options = { start_immediately: e, ...a }, this.is_active = !!this.options.start_immediately, this.original_steps = s, L(this, j, {
+    const o = b(t);
+    this.options = { start_immediately: e, ...n }, this.is_active = !!this.options.start_immediately, this.original_steps = o, L(this, j, {
       instances: [],
@@ -1128,3 +1128,3 @@ queries: {}
     let e = this.flatten_steps;
-    return t && (e = e.filter((a) => !(a != null && a.skip))), e;
+    return t && (e = e.filter((n) => !(n != null && n.skip))), e;
   }
@@ -1144,4 +1144,4 @@ /**
       (e) => {
-        var a;
-        return e.id === ((a = this.active_step) == null ? void 0 : a.id);
+        var n;
+        return e.id === ((n = this.active_step) == null ? void 0 : n.id);
       }
@@ -1158,4 +1158,4 @@ );
       (e) => {
-        var a;
-        return e.id === ((a = this.active_step) == null ? void 0 : a.id);
+        var n;
+        return e.id === ((n = this.active_step) == null ? void 0 : n.id);
       }
@@ -1171,8 +1171,8 @@ );
   updateSteps(t, e = !0) {
-    const a = b(t);
-    this.original_steps = a, L(this, j, {
+    const n = b(t);
+    this.original_steps = n, L(this, j, {
       instances: [],
-      queries: X(a)
+      queries: X(n)
     }), this.flatten_steps = F(
-      a,
+      n,
       _(this, j).queries
@@ -1253,3 +1253,3 @@ ), this.active_step = this.getFlattenSteps()[0], e && this.restart();
     if (!this.is_active) return;
-    const e = this.getFlattenSteps().findIndex((a) => a.id === t);
+    const e = this.getFlattenSteps().findIndex((n) => n.id === t);
     e > -1 && _(this, f).goTo(e);
@@ -1283,15 +1283,15 @@ }
       "value"
-    )), e.onchange = (a) => {
-      const s = _(this, j).queries[a.media];
-      a.matches && s ? this.flatten_steps = I(
+    )), e.onchange = (n) => {
+      const o = _(this, j).queries[n.media];
+      n.matches && o ? this.flatten_steps = I(
         this.flatten_steps,
-        s,
+        o,
         "value"
-      ) : (s && (this.flatten_steps = I(
+      ) : (o && (this.flatten_steps = I(
         this.flatten_steps,
-        s,
+        o,
         "default"
-      )), _(this, j).instances.forEach((o) => {
-        const i = _(this, j).queries[o.media];
-        o.matches && i && (this.flatten_steps = I(
+      )), _(this, j).instances.forEach((s) => {
+        const i = _(this, j).queries[s.media];
+        s.matches && i && (this.flatten_steps = I(
           this.flatten_steps,
@@ -1312,8 +1312,8 @@ i,
   steps: e,
-  CustomTooltip: a,
-  CustomArrow: s,
-  options: o,
+  CustomTooltip: n,
+  CustomArrow: o,
+  options: s,
   ...i
 }) {
-  const [n, d] = q(
+  const [a, d] = q(
     {}
@@ -1323,5 +1323,5 @@ ), [h, v] = q(), [r, m] = q(null), [g, x] = q(null), u = rt(null);
     let c = null, $ = null;
-    u.current = document.createElement("div"), a && (c = u.current), s && ($ = u.current);
+    u.current = document.createElement("div"), n && (c = u.current), o && ($ = u.current);
     const H = {
-      ...o,
+      ...s,
       custom_tooltip: c,
@@ -1334,7 +1334,7 @@ custom_arrow: $
   }, []), W(() => {
-    if (!(n != null && n.initialized)) return;
+    if (!(a != null && a.initialized)) return;
     const c = () => {
-      v(n.getActiveStep());
+      v(a.getActiveStep());
     }, $ = () => {
-      v(n.getActiveStep());
+      v(a.getActiveStep());
     }, H = (S) => {
@@ -1344,16 +1344,16 @@ var Y, Z, G;
     };
-    return n.addEventListener("onAfterDomInsert", H), n.addEventListener("onStart", c), n.addEventListener(
+    return a.addEventListener("onAfterDomInsert", H), a.addEventListener("onStart", c), a.addEventListener(
       "onTransitionComplete",
       $
-    ), i != null && i.onStart && n.addEventListener("onStart", i.onStart), i != null && i.onFinish && n.addEventListener("onFinish", i.onFinish), i != null && i.onClose && n.addEventListener("onClose", i.onClose), i != null && i.onNext && n.addEventListener("onNext", i.onNext), i != null && i.onPrev && n.addEventListener("onPrev", i.onPrev), i != null && i.onTransitionComplete && n.addEventListener(
+    ), i != null && i.onStart && a.addEventListener("onStart", i.onStart), i != null && i.onFinish && a.addEventListener("onFinish", i.onFinish), i != null && i.onClose && a.addEventListener("onClose", i.onClose), i != null && i.onNext && a.addEventListener("onNext", i.onNext), i != null && i.onPrev && a.addEventListener("onPrev", i.onPrev), i != null && i.onTransitionComplete && a.addEventListener(
       "onTransitionComplete",
       i.onTransitionComplete
     ), () => {
-      n != null && n.initialized && (n.removeEventListener("onStart", c), n.removeEventListener(
+      a != null && a.initialized && (a.removeEventListener("onStart", c), a.removeEventListener(
         "onAfterDomInsert",
         H
-      ), n.removeEventListener(
+      ), a.removeEventListener(
         "onTransitionComplete",
         $
-      ), i != null && i.onStart && n.removeEventListener("onStart", i.onStart), i != null && i.onFinish && n.removeEventListener("onFinish", i.onFinish), i != null && i.onClose && n.removeEventListener("onClose", i.onClose), i != null && i.onNext && n.removeEventListener("onNext", i.onNext), i != null && i.onPrev && n.removeEventListener("onPrev", i.onPrev), i != null && i.onTransitionComplete && n.removeEventListener(
+      ), i != null && i.onStart && a.removeEventListener("onStart", i.onStart), i != null && i.onFinish && a.removeEventListener("onFinish", i.onFinish), i != null && i.onClose && a.removeEventListener("onClose", i.onClose), i != null && i.onNext && a.removeEventListener("onNext", i.onNext), i != null && i.onPrev && a.removeEventListener("onPrev", i.onPrev), i != null && i.onTransitionComplete && a.removeEventListener(
         "onTransitionComplete",
@@ -1364,3 +1364,3 @@ i.onTransitionComplete
   }, [
-    n,
+    a,
     i == null ? void 0 : i.onClose,
@@ -1373,10 +1373,10 @@ i == null ? void 0 : i.onFinish,
   ]), W(() => {
-    n != null && n.initialized && (o == null || delete o.custom_tooltip, o == null || delete o.custom_arrow, n.updateOptions(o, !1), n.updateSteps(e, !1), n.is_active && n.restart());
-  }, [o, e, n]), /* @__PURE__ */ ot(st.Provider, { value: n, children: [
+    a != null && a.initialized && (s == null || delete s.custom_tooltip, s == null || delete s.custom_arrow, a.updateOptions(s, !1), a.updateSteps(e, !1), a.is_active || s != null && s.start_immediately ? a.restart() : (a.destroy(), a.init(!1)));
+  }, [s, e, a]), /* @__PURE__ */ ot(st.Provider, { value: a, children: [
     l,
-    a && r && Q(
-      /* @__PURE__ */ K(a, { active_step: h, ajala: n }),
+    n && r && Q(
+      /* @__PURE__ */ K(n, { active_step: h, ajala: a }),
       r
     ),
-    s && g && Q(/* @__PURE__ */ K(s, {}), g)
+    o && g && Q(/* @__PURE__ */ K(o, {}), g)
   ] });
@@ -1383,0 +1383,0 @@ }

package.json

 {
   "name": "react-ajala",
   "private": false,
-  "version": "0.2.11",
+  "version": "0.2.12",
   "type": "module",
@@ -6,0 +6,0 @@ "main": "./dist/react-ajala.cjs",

No alert changes

Improved metrics

Total package byte prevSize

97657

0.12%

No dependency changes