react-ajala - npm Package Compare versions

Comparing version 0.2.17 to 0.2.18

dist/react-ajala.js

@@ -1,23 +0,22 @@
-import { jsxs as ot, jsx as Q } from "react/jsx-runtime";
-import { createContext as lt, memo as rt, useState as b, useRef as ht, useEffect as H, useContext as dt } from "react";
-import { createPortal as X } from "react-dom";
-var pt = Object.defineProperty, tt = (l) => {
+import { jsxs as lt, jsx as X } from "react/jsx-runtime";
+import { createContext as rt, memo as ht, useState as D, useRef as dt, useEffect as R, useContext as pt } from "react";
+import { createPortal as F } from "react-dom";
+var _t = Object.defineProperty, et = (l) => {
   throw TypeError(l);
-}, _t = (l, t, e) => t in l ? pt(l, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : l[t] = e, p = (l, t, e) => _t(l, typeof t != "symbol" ? t + "" : t, e), Z = (l, t, e) => t.has(l) || tt("Cannot " + e), _ = (l, t, e) => (Z(l, t, "read from private field"), e ? e.call(l) : t.get(l)), E = (l, t, e) => t.has(l) ? tt("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(l) : t.set(l, e), L = (l, t, e, a) => (Z(l, t, "write to private field"), t.set(l, e), e), c = (l, t, e) => (Z(l, t, "access private method"), e);
-function vt(l) {
-  const t = /* @__PURE__ */ new Map(), e = /* @__PURE__ */ new Map(), a = [], s = [];
-  for (const r of l)
-    (r == null ? void 0 : r.order) === void 0 ? a.push(r) : (r == null ? void 0 : r.order) > l.length || (r == null ? void 0 : r.order) < 0 ? s.push(r) : t.has(r.order) ? e.set(r.order, r) : t.set(r.order, r);
-  const n = new Array(l.length);
-  let i = 0, o = 0;
-  for (let r = 0; r < l.length; r++)
-    if (t.has(r)) {
-      if (n[r] = t.get(r), e.has(r)) {
-        const d = r + 1;
-        n[d] = e.get(r), r = d;
-      }
-    } else i < a.length ? n[r] = a[i++] : n[r] = s[o++];
-  return n.length === l.length ? n : n.slice(0, l.length);
+}, vt = (l, t, e) => t in l ? _t(l, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : l[t] = e, p = (l, t, e) => vt(l, typeof t != "symbol" ? t + "" : t, e), Y = (l, t, e) => t.has(l) || et("Cannot " + e), _ = (l, t, e) => (Y(l, t, "read from private field"), e ? e.call(l) : t.get(l)), E = (l, t, e) => t.has(l) ? et("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(l) : t.set(l, e), L = (l, t, e, a) => (Y(l, t, "write to private field"), t.set(l, e), e), c = (l, t, e) => (Y(l, t, "access private method"), e);
+function I(l) {
+  const t = /* @__PURE__ */ new Map(), e = [], a = [];
+  for (const o of l) {
+    const r = o == null ? void 0 : o.order;
+    r === void 0 ? e.push(o) : r < 0 || r >= l.length ? a.push(o) : (t.has(r) || t.set(r, []), t.get(r).push(o));
+  }
+  const n = [];
+  let s = 0, i = 0;
+  for (let o = 0; n.length < l.length; o++) {
+    const r = t.get(o);
+    r ? n.push(...r) : s < e.length ? n.push(e[s++]) : i < a.length && n.push(a[i++]);
+  }
+  return n;
 }
-function F(l) {
+function k(l) {
   const t = {}, e = [
@@ -30,10 +29,10 @@ "id",
   for (let a = 0; a < l.length; a++) {
-    const s = l[a];
-    Object.keys(s).forEach((n) => {
-      if (!e.includes(n)) {
-        const i = s[n];
+    const n = l[a];
+    Object.keys(n).forEach((s) => {
+      if (!e.includes(s)) {
+        const i = n[s];
         i && typeof i == "object" && Object.keys(i).forEach((o) => {
           if (o === "default") return;
           if (!Object.hasOwn(i, "default")) {
-            const d = `Ajala step with id:"${s.id}" is missing a media query default value for the key "${n}". Please add a default value to avoid unexpected behavior.`;
+            const d = `Ajala step with id:"${n.id}" is missing a media query default value for the key "${s}". Please add a default value to avoid unexpected behavior.`;
             if (process.env.NODE_ENV === "development")
@@ -44,4 +43,4 @@ throw new Error(d);
           const r = {
-            id: s.id,
-            key: n,
+            id: n.id,
+            key: s,
             value: i[o],
@@ -58,12 +57,12 @@ media_query: o,
 }
-function I(l, t, e) {
+function P(l, t, e) {
   const a = JSON.parse(JSON.stringify(l));
-  return t.forEach((s) => {
-    const n = a.findIndex(
-      (i) => (i == null ? void 0 : i.id) === s.id
+  return t.forEach((n) => {
+    const s = a.findIndex(
+      (i) => (i == null ? void 0 : i.id) === n.id
     );
-    n > -1 && (a[n][s.key] = s[e]);
-  }), vt(a);
+    s > -1 && (a[s][n.key] = n[e]);
+  }), a;
 }
-function k(l, t) {
+function tt(l, t) {
   let e = JSON.parse(
@@ -73,3 +72,3 @@ JSON.stringify(l)
   return Object.values(t).forEach((a) => {
-    a && (e = I(
+    a && (e = P(
       e,
@@ -79,3 +78,3 @@ a,
     ));
-  }), e;
+  }), I(e);
 }
@@ -91,15 +90,15 @@ const O = (l, t, e) => (e = Math.max(0, Math.min(1, e)), l + (t - l) * e);
 }
-function R(l) {
+function z(l) {
   const t = /* @__PURE__ */ new Set(), e = [];
   for (let a = 0; a < l.length; a++) {
-    const s = l[a], n = `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 = n) : t.add(s.id) : (s.id = n, console.warn(
+    const n = l[a], s = `step-${a + Math.random()}`;
+    n.id ? t.has(n.id) ? (console.warn(
+      `Duplicate ajala step id found: ${n.id}. Please make sure all step ids are unique.`
+    ), n.id = s) : t.add(n.id) : (n.id = s, console.warn(
       `ajala step ${a} is missing an id. Please make sure all steps have unique ids.`
-    )), e.push(s);
+    )), e.push(n);
   }
   return e;
 }
-var M, et, it, at;
+var M, it, at, nt;
 class ut {
@@ -116,3 +115,3 @@ constructor(t) {
   init() {
-    var t, e, a, s, n, i, o, r, d, v;
+    var t, e, a, n, s, i, o, r, d, v;
     this.wrapper_element = document.createElement("div"), 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(
@@ -124,8 +123,8 @@ "click",
       this.closeOnOverlayClickHandler
-    ), this.ajala.options.custom_tooltip || c(this, M, et).call(this), this.ajala.options.custom_arrow ? this.arrow_element.appendChild(this.ajala.options.custom_arrow) : c(this, M, it).call(this);
+    ), this.ajala.options.custom_tooltip || c(this, M, it).call(this), this.ajala.options.custom_arrow ? this.arrow_element.appendChild(this.ajala.options.custom_arrow) : c(this, M, at).call(this);
     const h = (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 = h, this.arrow_element.style.height = h, 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 = (n = this.ajala.options) != null && n.tooltip_width ? `${(i = this.ajala.options) == null ? void 0 : i.tooltip_width}px` : "250px", this.tooltip_container_element.style.height = (o = this.ajala.options) != null && o.tooltip_height ? `${(r = this.ajala.options) == null ? void 0 : r.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), (typeof ((d = this.ajala.options.overlay_options) == null ? void 0 : d.hide) > "u" || !((v = this.ajala.options.overlay_options) != null && v.hide)) && (c(this, M, at).call(this), this.wrapper_element.append(this.overlay_element), document.body.classList.add("ajala_isOverlay"));
+    this.arrow_element.style.position = "absolute", this.arrow_element.style.width = h, this.arrow_element.style.height = h, 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"), (n = this.ajala.options.default_arrow_options) != null && n.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 = (o = this.ajala.options) != null && o.tooltip_height ? `${(r = this.ajala.options) == null ? void 0 : r.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), (typeof ((d = this.ajala.options.overlay_options) == null ? void 0 : d.hide) > "u" || !((v = this.ajala.options.overlay_options) != null && v.hide)) && (c(this, M, nt).call(this), this.wrapper_element.append(this.overlay_element), document.body.classList.add("ajala_isOverlay"));
   }
   update(t) {
-    var e, a, s, n;
+    var e, a, n, s;
     const i = this.ajala.options.default_tooltip_options;
@@ -152,3 +151,3 @@ if (this.is_default_tooltip_element) {
       const { active_index: o, placement: r, taregt_el: d } = t;
-      if ((((s = this.ajala.active_step) == null ? void 0 : s.enable_target_interaction) ?? ((n = this.ajala.options) == null ? void 0 : n.enable_target_interaction)) && d && d.classList.add("ajala_target_interactive"), this.ajala.getFlattenSteps().length - 1 === this.ajala.getActiveStepFlattenIndex() && this.next_btn && (this.next_btn.innerText = "Finish"), d) {
+      if ((((n = this.ajala.active_step) == null ? void 0 : n.enable_target_interaction) ?? ((s = this.ajala.options) == null ? void 0 : s.enable_target_interaction)) && d && d.classList.add("ajala_target_interactive"), this.ajala.getFlattenSteps().length - 1 === this.ajala.getActiveStepFlattenIndex() && this.next_btn && (this.next_btn.innerText = "Finish"), d) {
         const { x: v, y: h, rotate: m } = this.placement.arrow.calculatePlacmentDelta({
@@ -167,15 +166,15 @@ active_index: o,
     height: a,
-    width: s,
-    border_radius: n
+    width: n,
+    border_radius: s
   }) {
     const i = `
-  M${t + n},${e}
-  h${Math.max(s - 2 * n, 0)}
-  a${n},${n} 0 0 1 ${n},${n}
-  v${Math.max(a - 2 * n, 0)}
-  a${n},${n} 0 0 1 -${n},${n}
-  h-${Math.max(s - 2 * n, 0)}
-  a${n},${n} 0 0 1 -${n},-${n}
-  v-${Math.max(a - 2 * n, 0)}
-  a${n},${n} 0 0 1 ${n},-${n}
+  M${t + s},${e}
+  h${Math.max(n - 2 * s, 0)}
+  a${s},${s} 0 0 1 ${s},${s}
+  v${Math.max(a - 2 * s, 0)}
+  a${s},${s} 0 0 1 -${s},${s}
+  h-${Math.max(n - 2 * s, 0)}
+  a${s},${s} 0 0 1 -${s},-${s}
+  v-${Math.max(a - 2 * s, 0)}
+  a${s},${s} 0 0 1 ${s},-${s}
   z
@@ -229,4 +228,4 @@ `, o = `
     }), 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.style_element.innerHTML = `
+    const n = this.tooltip_container_element.getBoundingClientRect();
+    this.tooltip_container_element.style.transform = `translate(-${n.width}px, 0px)`, this.resetOverlayCutoutSvgRect(), this.style_element.innerHTML = `
     .ajala_isOverlay.ajala_active  * {
@@ -289,4 +288,4 @@ pointer-events: none;
 }
-M = /* @__PURE__ */ new WeakSet(), et = function() {
-  var l, t, e, a, s, n;
+M = /* @__PURE__ */ new WeakSet(), it = function() {
+  var l, t, e, a, n, s;
   this.is_default_tooltip_element = !0;
@@ -328,4 +327,4 @@ const i = this.ajala.options.default_tooltip_options;
             <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 && ((n = this.close_btn) == null || n.remove());
-}, it = function() {
+          </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 && ((n = this.tooltip_element.querySelector(".ajala_content")) == null || n.remove()), i != null && i.hide_close_btn && ((s = this.close_btn) == null || s.remove());
+}, at = function() {
   var l, t;
@@ -336,5 +335,5 @@ const e = (l = this.ajala.options.default_arrow_options) != null && l.size ? `${(t = this.ajala.options.default_arrow_options) == null ? void 0 : t.size}px` : "48px";
     `;
-}, at = function() {
+}, nt = function() {
   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 a = ((t = (l = this.ajala.options.overlay_options) == null ? void 0 : l.opacity) == null ? void 0 : t.toString()) || " 0.7", n = ((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({
@@ -346,3 +345,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 = n, this.overlay_path.style.opacity = a, this.overlay_element.appendChild(this.overlay_path);
 };
@@ -357,3 +356,3 @@ class gt {
   async goTo(t) {
-    var e, a, s;
+    var e, a, n;
     if (!((e = this.animations) != null && e.is_animating)) {
@@ -366,4 +365,4 @@ if ((a = this.ajala.getFlattenSteps()[t]) != null && a.skip) {
         this.animations.is_animating = !0, this.ui.resetOverlayCutoutSvgRect();
-        const n = (s = this.ajala.getOriginalSteps()[this.ajala.getActiveStepOriginalIndex()]) == null ? void 0 : s.onInActive;
-        n && t !== this.ajala.getActiveStepFlattenIndex() && n(this.ajala.getActiveStep(), this.ajala);
+        const s = (n = this.ajala.getOriginalSteps()[this.ajala.getActiveStepOriginalIndex()]) == null ? void 0 : n.onInActive;
+        s && t !== this.ajala.getActiveStepFlattenIndex() && s(this.ajala.getActiveStep(), this.ajala);
         const i = await this.placement.tooltip.calculateTravelDistance(t), o = () => {
@@ -401,5 +400,5 @@ var r;
       }), this.ui.resetOverlayCutoutSvgRect();
-      const s = await this.placement.tooltip.calculateTravelDistance(e), n = () => {
+      const n = 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);
+        this.animations.is_animating = !1, this.ajala.active_step = this.ajala.getFlattenSteps()[n.active_index], this.ui.update(n);
         const o = (i = this.ajala.getOriginalSteps()[this.ajala.getActiveStepOriginalIndex()]) == null ? void 0 : i.onActive;
@@ -415,5 +414,5 @@ o && o(this.ajala.getActiveStep(), this.ajala), this.ajala.dispatchEvent({
       this.animations.transition[this.animations.transition_type](
-        s,
+        n,
         {
-          onComplete: n
+          onComplete: s
         }
@@ -438,5 +437,5 @@ );
       }), this.ui.resetOverlayCutoutSvgRect();
-      const s = await this.placement.tooltip.calculateTravelDistance(e), n = () => {
+      const n = 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);
+        this.animations.is_animating = !1, this.ajala.active_step = this.ajala.getFlattenSteps()[n.active_index], this.ui.update(n);
         const o = (i = this.ajala.getOriginalSteps()[this.ajala.getActiveStepOriginalIndex()]) == null ? void 0 : i.onActive;
@@ -452,5 +451,5 @@ o && o(this.ajala.getActiveStep(), this.ajala), this.ajala.dispatchEvent({
       this.animations.transition[this.animations.transition_type](
-        s,
+        n,
         {
-          onComplete: n
+          onComplete: s
         }
@@ -462,9 +461,9 @@ );
     const a = this.ajala.getFlattenSteps()[t];
-    let s = t;
+    let n = t;
     if (e === "next" && a != null && a.skip) {
-      s = this.ajala.getFlattenSteps().length;
-      for (let n = t; n < this.ajala.getFlattenSteps().length; n++) {
-        const i = this.ajala.getFlattenSteps()[n];
+      n = 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 = n;
+          n = s;
           break;
@@ -474,7 +473,7 @@ }
     } else if (e === "prev" && a != null && a.skip) {
-      s = -1;
-      for (let n = t; n > 0; n--) {
-        const i = this.ajala.getFlattenSteps()[n];
+      n = -1;
+      for (let s = t; s > 0; s--) {
+        const i = this.ajala.getFlattenSteps()[s];
         if (!(i != null && i.skip)) {
-          s = n;
+          n = s;
           break;
@@ -484,3 +483,3 @@ }
     }
-    return s;
+    return n;
   }
@@ -531,6 +530,6 @@ close() {
     if (a === void 0) return;
-    const s = a[t];
-    if (s !== void 0) {
-      const n = s.indexOf(e);
-      n !== -1 && s.splice(n, 1);
+    const n = a[t];
+    if (n !== void 0) {
+      const s = n.indexOf(e);
+      s !== -1 && n.splice(s, 1);
     }
@@ -548,5 +547,5 @@ }
     if (a !== void 0) {
-      const s = a.slice(0);
-      for (let n = 0, i = s.length; n < i; n++)
-        s[n].call(this, t);
+      const n = a.slice(0);
+      for (let s = 0, i = n.length; s < i; s++)
+        n[s].call(this, t);
     }
@@ -572,7 +571,7 @@ }
       rotate: 0
-    }, s = _(this, T).getTargetElement(
+    }, n = _(this, T).getTargetElement(
       this.ajala.getFlattenSteps()[t].target
     );
-    if (!s) return a;
-    const n = s.getBoundingClientRect(), i = _(this, T).arrow_element.getBoundingClientRect(), o = _(this, T).tooltip_container_element.getBoundingClientRect(), { axis: r, align: d } = this.placement.getMetadata({
+    if (!n) return a;
+    const s = n.getBoundingClientRect(), i = _(this, T).arrow_element.getBoundingClientRect(), o = _(this, T).tooltip_container_element.getBoundingClientRect(), { axis: r, align: d } = this.placement.getMetadata({
       next_index: t,
@@ -584,3 +583,3 @@ placement: e
         let h = O(0, o.width, 0.05);
-        n.width < o.width / 2 && (h = -i.width / 2 + n.width / 2), a.x = h;
+        s.width < o.width / 2 && (h = -i.width / 2 + s.width / 2), a.x = h;
       } else if (d === "center") {
@@ -591,3 +590,3 @@ let h = O(0, o.width, 0.5);
         let h = O(0, o.width, 0.95);
-        h = h - i.width, n.width < o.width / 2 && (h = o.width - i.width / 2 - n.width / 2), a.x = h;
+        h = h - i.width, s.width < o.width / 2 && (h = o.width - i.width / 2 - s.width / 2), a.x = h;
       }
@@ -599,3 +598,3 @@ r === "top" ? (a.rotate = 180, a.y = o.height - i.height / 2 + v) : r === "bottom" && (a.rotate = 0, a.y = -(i.height / 2) - v);
         let h = O(0, o.height, 0.1);
-        n.height < o.height / 2 && (h = -i.height / 2 + n.height / 2), a.y = h;
+        s.height < o.height / 2 && (h = -i.height / 2 + s.height / 2), a.y = h;
       } else if (d === "center") {
@@ -606,3 +605,3 @@ let h = O(0, o.height, 0.5);
         let h = O(0, o.height, 0.9);
-        h = h - i.height, n.height < o.height / 2 && (h = o.height - i.height / 2 - n.height / 2), a.y = h;
+        h = h - i.height, s.height < o.height / 2 && (h = o.height - i.height / 2 - s.height / 2), a.y = h;
       }
@@ -617,3 +616,3 @@ r === "left" ? (a.rotate = 90, a.x = o.width - i.width / 2 + v) : r === "right" && (a.rotate = -90, a.x = -(i.width / 2) - v);
 T = /* @__PURE__ */ new WeakMap();
-var C, D, z, B, U;
+var C, W, B, U, V;
 class yt {
@@ -630,24 +629,24 @@ constructor({
     this.ui.arrow_element.style.visibility = "hidden";
-    const s = this.ui.getTargetElement(
+    const n = this.ui.getTargetElement(
       this.ajala.getFlattenSteps()[t].target
-    ), n = this.ui.tooltip_container_element.getBoundingClientRect(), i = (f) => f > 0 ? -f : Math.abs(f);
-    if (!s)
+    ), s = this.ui.tooltip_container_element.getBoundingClientRect(), i = (f) => f > 0 ? -f : Math.abs(f);
+    if (!n)
       return {
         is_valid: !0,
         scrolled: !1,
-        y_delta: window.innerHeight / 2 - n.height / 2,
-        x_delta: window.innerWidth / 2 - n.width / 2,
-        y_offset: i(n.y),
-        x_offset: i(n.x),
+        y_delta: window.innerHeight / 2 - s.height / 2,
+        x_delta: window.innerWidth / 2 - s.width / 2,
+        y_offset: i(s.y),
+        x_offset: i(s.x),
         active_index: t,
-        tooltip_rect: n,
+        tooltip_rect: s,
         target_rect: null,
-        taregt_el: s,
+        taregt_el: n,
         placement: "auto"
       };
-    ((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.scrollIntoView(s, 100));
-    const o = s.getBoundingClientRect(), r = this.ajala.getFlattenSteps()[t].tooltip_gutter ?? this.ajala.options.tooltip_gutter ?? 0, d = i(n.y), v = i(n.x);
+    ((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.scrollIntoView(n, 100));
+    const o = n.getBoundingClientRect(), r = this.ajala.getFlattenSteps()[t].tooltip_gutter ?? this.ajala.options.tooltip_gutter ?? 0, d = i(s.y), v = i(s.x);
     let h = o.y + r, m = o.x + r;
     const u = this.calculatePlacementDelta({
-      target: s,
+      target: n,
       next_index: t
@@ -660,5 +659,5 @@ });
       x_offset: v,
-      tooltip_rect: n,
+      tooltip_rect: s,
       target_rect: o,
-      taregt_el: s,
+      taregt_el: n,
       active_index: t,
@@ -674,3 +673,3 @@ is_valid: !0,
   }) {
-    let a = 0, s = 0, n = "auto";
+    let a = 0, n = 0, s = "auto";
     const {
@@ -682,3 +681,3 @@ axis: i,
       placement: v
-    } = this.placement.getMetadata({ next_index: e }), h = c(this, C, z).call(this, {
+    } = this.placement.getMetadata({ next_index: e }), h = c(this, C, B).call(this, {
       axis: i,
@@ -688,6 +687,6 @@ target: t,
       spotlight_padding: d.padding
-    }), m = c(this, C, B).call(this, {
+    }), m = c(this, C, U).call(this, {
       align: o,
       target: t
-    }), u = c(this, C, U).call(this, {
+    }), u = c(this, C, V).call(this, {
       align: o,
@@ -698,5 +697,5 @@ target: t
       if (u.is_valid && h.is_valid)
-        a = u.alignment, s = h.axis, n = v;
+        a = u.alignment, n = h.axis, s = v;
       else {
-        const { auto_x_delta: f, auto_y_delta: y, auto_placement: w } = c(this, C, D).call(this, {
+        const { auto_x_delta: f, auto_y_delta: y, auto_placement: w } = c(this, C, W).call(this, {
           target: t,
@@ -706,9 +705,9 @@ axis_gutter: r,
         });
-        a = f, s = y, n = w;
+        a = f, n = y, s = w;
       }
     else if (i === "left" || i === "right")
       if (m.is_valid && h.is_valid)
-        a = h.axis, s = m.alignment, n = v;
+        a = h.axis, n = m.alignment, s = v;
       else {
-        const { auto_x_delta: f, auto_y_delta: y, auto_placement: w } = c(this, C, D).call(this, {
+        const { auto_x_delta: f, auto_y_delta: y, auto_placement: w } = c(this, C, W).call(this, {
           target: t,
@@ -718,6 +717,6 @@ axis_gutter: r,
         });
-        a = f, s = y, n = w;
+        a = f, n = y, s = w;
       }
     else {
-      const { auto_x_delta: f, auto_y_delta: y, auto_placement: w } = c(this, C, D).call(this, {
+      const { auto_x_delta: f, auto_y_delta: y, auto_placement: w } = c(this, C, W).call(this, {
         target: t,
@@ -727,8 +726,8 @@ axis_gutter: r,
       });
-      a = f, s = y, n = w;
+      a = f, n = y, s = w;
     }
     return {
       x_delta: a,
-      y_delta: s,
-      placement: n
+      y_delta: n,
+      placement: s
     };
@@ -745,3 +744,3 @@ }
 */
-D = function({
+W = function({
   target: l,
@@ -765,6 +764,6 @@ axis_gutter: t,
   ];
-  let s = 0, n = 0, i = "bottom_center";
+  let n = 0, s = 0, i = "bottom_center";
   for (let o = 0; o < a.length; o++) {
     i = a[o];
-    const r = i.split("_"), d = r[0], v = r[1], h = c(this, C, z).call(this, {
+    const r = i.split("_"), d = r[0], v = r[1], h = c(this, C, B).call(this, {
       axis: d,
@@ -774,6 +773,6 @@ target: l,
       spotlight_padding: e
-    }), m = c(this, C, B).call(this, {
+    }), m = c(this, C, U).call(this, {
       align: v,
       target: l
-    }), u = c(this, C, U).call(this, {
+    }), u = c(this, C, V).call(this, {
       align: v,
@@ -783,17 +782,17 @@ target: l
     if ((d === "bottom" || d === "top") && h.is_valid && u.is_valid) {
-      s = u.alignment, n = h.axis;
+      n = u.alignment, s = h.axis;
       break;
     }
     if ((d === "right" || d === "left") && h.is_valid && m.is_valid) {
-      s = h.axis, n = m.alignment;
+      n = h.axis, s = m.alignment;
       break;
     }
-    o === a.length - 1 && (n = h.axis, s = u.alignment);
+    o === a.length - 1 && (s = h.axis, n = u.alignment);
   }
   return {
-    auto_x_delta: s,
-    auto_y_delta: n,
+    auto_x_delta: n,
+    auto_y_delta: s,
     auto_placement: i
   };
-}, z = function({
+}, B = function({
   axis: l,
@@ -804,3 +803,3 @@ target: t,
 }) {
-  const s = t.getBoundingClientRect(), n = this.ui.tooltip_container_element.getBoundingClientRect(), i = {
+  const n = t.getBoundingClientRect(), s = this.ui.tooltip_container_element.getBoundingClientRect(), i = {
     is_valid: !1,
@@ -810,52 +809,52 @@ axis: 0
   if (l === "top") {
-    const o = s.y - n.height - e - a;
-    o >= 0 && s.y <= window.innerHeight ? (i.is_valid = !0, i.axis = o) : (i.is_valid = !1, i.axis = o);
+    const o = n.y - s.height - e - a;
+    o >= 0 && n.y <= window.innerHeight ? (i.is_valid = !0, i.axis = o) : (i.is_valid = !1, i.axis = o);
   }
   if (l === "bottom") {
-    const o = s.bottom + e + a;
-    o + n.height >= 0 && o + n.height <= window.innerHeight ? (i.is_valid = !0, i.axis = o) : (i.is_valid = !1, i.axis = o);
+    const o = n.bottom + e + a;
+    o + s.height >= 0 && o + s.height <= window.innerHeight ? (i.is_valid = !0, i.axis = o) : (i.is_valid = !1, i.axis = o);
   }
   if (l === "left") {
-    const o = s.x - n.width - e - a;
-    o >= 0 && s.x <= window.innerWidth ? (i.is_valid = !0, i.axis = o) : (i.is_valid = !1, i.axis = o);
+    const o = n.x - s.width - e - a;
+    o >= 0 && n.x <= window.innerWidth ? (i.is_valid = !0, i.axis = o) : (i.is_valid = !1, i.axis = o);
   }
   if (l === "right") {
-    const o = s.right + e + a;
-    o >= 0 && o + n.width <= window.innerWidth ? (i.is_valid = !0, i.axis = o) : (i.is_valid = !1, i.axis = o);
+    const o = n.right + e + a;
+    o >= 0 && o + s.width <= window.innerWidth ? (i.is_valid = !0, i.axis = o) : (i.is_valid = !1, i.axis = o);
   }
   return i;
-}, B = function({
+}, U = function({
   align: l,
   target: t
 }) {
-  const e = t.getBoundingClientRect(), a = this.ui.tooltip_container_element.getBoundingClientRect(), s = {
+  const e = t.getBoundingClientRect(), a = this.ui.tooltip_container_element.getBoundingClientRect(), n = {
     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 n = e.height / 2, i = a.height / 2, o = e.y + n - i;
-    o + a.height <= window.innerHeight && o >= 0 ? (s.is_valid = !0, s.alignment = o) : (s.is_valid = !1, s.alignment = o);
+  if (l === "top" && (e.y + a.height <= window.innerHeight && e.y >= 0 ? (n.is_valid = !0, n.alignment = e.y) : (n.is_valid = !1, n.alignment = e.y)), l === "center") {
+    const s = e.height / 2, i = a.height / 2, o = e.y + s - i;
+    o + a.height <= window.innerHeight && o >= 0 ? (n.is_valid = !0, n.alignment = o) : (n.is_valid = !1, n.alignment = o);
   }
   if (l === "bottom") {
-    const n = e.bottom - a.height;
-    n + a.height <= window.innerHeight && n >= 0 ? (s.is_valid = !0, s.alignment = n) : (s.is_valid = !1, s.alignment = n);
+    const s = e.bottom - a.height;
+    s + a.height <= window.innerHeight && s >= 0 ? (n.is_valid = !0, n.alignment = s) : (n.is_valid = !1, n.alignment = s);
   }
-  return s;
-}, U = function({
+  return n;
+}, V = function({
   align: l,
   target: t
 }) {
-  const e = t.getBoundingClientRect(), a = this.ui.tooltip_container_element.getBoundingClientRect(), s = {
+  const e = t.getBoundingClientRect(), a = this.ui.tooltip_container_element.getBoundingClientRect(), n = {
     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 n = e.width / 2, i = a.width / 2, o = e.x + n - i;
-    o >= 0 && o + a.width <= window.innerWidth ? (s.is_valid = !0, s.alignment = o) : (s.is_valid = !1, s.alignment = o);
+  if (l === "left" && (e.x + a.width <= window.innerWidth && e.x >= 0 ? (n.is_valid = !0, n.alignment = e.x) : (n.is_valid = !1, n.alignment = e.x)), l === "center") {
+    const s = e.width / 2, i = a.width / 2, o = e.x + s - i;
+    o >= 0 && o + a.width <= window.innerWidth ? (n.is_valid = !0, n.alignment = o) : (n.is_valid = !1, n.alignment = o);
   }
   if (l === "right") {
-    const n = e.right - a.width;
-    n + a.width <= window.innerWidth && n >= 0 ? (s.is_valid = !0, s.alignment = n) : (s.is_valid = !1, s.alignment = n);
+    const s = e.right - a.width;
+    s + a.width <= window.innerWidth && s >= 0 ? (n.is_valid = !0, n.alignment = s) : (n.is_valid = !1, n.alignment = s);
   }
-  return s;
+  return n;
 };
@@ -881,12 +880,12 @@ class xt {
     if (!a) return e;
-    const s = a.getBoundingClientRect(), { spotlight: n } = this.placement.getMetadata({
+    const n = a.getBoundingClientRect(), { spotlight: s } = this.placement.getMetadata({
       next_index: t
     });
-    return e.x = Math.max(0, s.x - n.padding), e.y = Math.max(0, s.y - n.padding), e.width = Math.min(
+    return e.x = Math.max(0, n.x - s.padding), e.y = Math.max(0, n.y - s.padding), e.width = Math.min(
       window.innerWidth,
-      s.width + n.padding * 2
+      n.width + s.padding * 2
     ), e.height = Math.min(
       window.innerWidth,
-      s.height + n.padding * 2
-    ), e.border_radius = n.border_radius, e;
+      n.height + s.padding * 2
+    ), e.border_radius = s.border_radius, e;
   }
@@ -906,4 +905,4 @@ }
   }) {
-    var a, s;
-    const n = 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", o = i.split("_"), r = this.ajala.getFlattenSteps()[t].spotlight_padding || ((a = this.ajala.options.spotlight_options) == null ? void 0 : a.padding) || 0, d = this.ajala.getFlattenSteps()[t].spotlight_border_radius || ((s = this.ajala.options.spotlight_options) == null ? void 0 : s.border_radius) || 0;
+    var a, n;
+    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", o = i.split("_"), r = this.ajala.getFlattenSteps()[t].spotlight_padding || ((a = this.ajala.options.spotlight_options) == null ? void 0 : a.padding) || 0, d = this.ajala.getFlattenSteps()[t].spotlight_border_radius || ((n = this.ajala.options.spotlight_options) == null ? void 0 : n.border_radius) || 0;
     return {
@@ -913,3 +912,3 @@ placement: i,
       align: o[1],
-      axis_gutter: n,
+      axis_gutter: s,
       spotlight: {
@@ -924,3 +923,3 @@ padding: r,
 }
-var W, V;
+var H, J;
 class jt {
@@ -932,5 +931,5 @@ constructor({
   }) {
-    E(this, W), 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 = {
+    E(this, H), p(this, "ajala"), p(this, "ui"), p(this, "placement"), p(this, "transition_type"), p(this, "is_animating", !1), p(this, "transition");
+    var n;
+    this.ajala = t, this.ui = e, this.placement = a, this.transition_type = ((n = this.ajala.options) == null ? void 0 : n.transition_type) || "traveller", this.transition = {
       traveller: this.travelTransition.bind(this),
@@ -951,5 +950,5 @@ popout: this.popOutTransition.bind(this)
     duration: a = 1e3,
-    onPlay: s = () => {
+    onPlay: n = () => {
     },
-    onUpdate: n = () => {
+    onUpdate: s = () => {
     },
@@ -962,7 +961,7 @@ onComplete: i = () => {
     const v = (m) => m < 0.5 ? 2 * m * m : 1 - Math.pow(-2 * m + 2, 2) / 2;
-    s();
+    n();
     const h = (m) => {
       if (!r) return;
       const u = m - o, f = Math.min(u / a, 1), y = v(f), w = O(t, e, y);
-      n(w), f < 1 ? (d = requestAnimationFrame(h), this.is_animating = !0) : (i(), this.is_animating = !1);
+      s(w), f < 1 ? (d = requestAnimationFrame(h), this.is_animating = !0) : (i(), this.is_animating = !1);
     };
@@ -977,10 +976,10 @@ return d = requestAnimationFrame(h), {
     return new Promise((a) => {
-      let s;
-      function n() {
-        clearTimeout(s), s = setTimeout(() => {
-          document.removeEventListener("scroll", n, !0), a(null);
+      let n;
+      function s() {
+        clearTimeout(n), n = setTimeout(() => {
+          document.removeEventListener("scroll", s, !0), a(null);
         }, e);
       }
-      document.addEventListener("scroll", n, !0), t.scrollIntoView({ behavior: "smooth", block: "center" }), setTimeout(() => {
-        s || a(null);
+      document.addEventListener("scroll", s, !0), t.scrollIntoView({ behavior: "smooth", block: "center" }), setTimeout(() => {
+        n || a(null);
       }, e + 100);
@@ -990,3 +989,3 @@ });
   spotlightTarget(t) {
-    const { x: e, y: a, width: s, height: n, border_radius: i } = this.placement.overlay_cutout_svg_rect.calculatePlacmentDelta({
+    const { x: e, y: a, width: n, height: s, border_radius: i } = this.placement.overlay_cutout_svg_rect.calculatePlacmentDelta({
       active_index: t
@@ -1002,4 +1001,4 @@ });
           y: a,
-          width: s * o,
-          height: n * o,
+          width: n * o,
+          height: s * o,
           border_radius: i
@@ -1023,6 +1022,6 @@ });
   } = {}) {
-    const s = this.ui.tooltip_container_element;
+    const n = this.ui.tooltip_container_element;
     if (t.is_valid) {
       const {
-        x_delta: n,
+        x_delta: s,
         x_offset: i,
@@ -1037,6 +1036,6 @@ y_delta: o,
         to: 1,
-        duration: c(this, W, V).call(this, v),
+        duration: c(this, H, J).call(this, v),
         onUpdate(h) {
-          const m = (d == null ? void 0 : d.x) ?? 0, u = (d == null ? void 0 : d.y) ?? 0, f = m + (n + i) * h, y = u + (o + r) * h;
-          s.style.transform = `translate(${f}px, ${y}px)`;
+          const m = (d == null ? void 0 : d.x) ?? 0, u = (d == null ? void 0 : d.y) ?? 0, f = m + (s + i) * h, y = u + (o + r) * h;
+          n.style.transform = `translate(${f}px, ${y}px)`;
         },
@@ -1056,11 +1055,11 @@ onComplete: () => {
   } = {}) {
-    const s = this.ui.tooltip_container_element;
+    const n = this.ui.tooltip_container_element;
     if (t.is_valid) {
-      const { x_delta: n, y_delta: i, active_index: o } = t;
+      const { x_delta: s, y_delta: i, active_index: o } = t;
       this.animate({
         from: 0,
         to: 1,
-        duration: c(this, W, V).call(this, o),
+        duration: c(this, H, J).call(this, o),
         onUpdate(r) {
-          s.style.visibility = "visible", s.style.transform = `translate(${n}px, ${i}px) scale(${r})`;
+          n.style.visibility = "visible", n.style.transform = `translate(${s}px, ${i}px) scale(${r})`;
         },
@@ -1077,7 +1076,7 @@ onComplete: () => {
 }
-W = /* @__PURE__ */ new WeakSet(), V = function(l) {
+H = /* @__PURE__ */ new WeakSet(), J = function(l) {
   var t, e;
   return ((t = this.ajala.getFlattenSteps()[l]) == null ? void 0 : t.transition_duration) ?? ((e = this.ajala.options) == null ? void 0 : e.transition_duration) ?? 1e3;
 };
-var j, x, g, A, P, q, nt, J;
+var j, x, g, A, q, N, st, Z;
 class St extends ct {
@@ -1087,5 +1086,5 @@ constructor(t, { start_immediately: e = !0, ...a } = {
   }) {
-    super(), E(this, q), 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, x), E(this, g), E(this, A), E(this, P);
-    const s = R(t);
-    this.options = { start_immediately: e, ...a }, this.is_active = !1, this.original_steps = s, L(this, j, {
+    super(), E(this, N), 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, x), E(this, g), E(this, A), E(this, q);
+    const n = z(t);
+    this.options = { start_immediately: e, ...a }, this.is_active = !1, this.original_steps = n, L(this, j, {
       instances: [],
@@ -1096,7 +1095,7 @@ queries: {}
       ui: _(this, x)
-    })), L(this, A, new wt({ ajala: this, ui: _(this, x) })), L(this, P, new jt({
+    })), L(this, A, new wt({ ajala: this, ui: _(this, x) })), L(this, q, new jt({
       ajala: this,
       ui: _(this, x),
       placement: _(this, A)
-    })), _(this, x).navigation = _(this, g), _(this, x).placement = _(this, A), _(this, g).placement = _(this, A), _(this, g).animations = _(this, P), _(this, A).animations = _(this, P), this.active_step = this.getFlattenSteps()[_(this, g).getValidNavIndex(0, "next")], this.destroy = this.destroy.bind(this);
+    })), _(this, x).navigation = _(this, g), _(this, x).placement = _(this, A), _(this, g).placement = _(this, A), _(this, g).animations = _(this, q), _(this, A).animations = _(this, q), this.active_step = this.getFlattenSteps()[_(this, g).getValidNavIndex(0, "next")], this.destroy = this.destroy.bind(this);
   }
@@ -1108,10 +1107,10 @@ /**
     this.initialized = !0;
-    const e = R(this.original_steps);
+    const e = z(this.original_steps);
     this.is_active = !1, this.original_steps = e, L(this, j, {
       instances: [],
-      queries: F(e)
-    }), this.flatten_steps = k(
+      queries: k(e)
+    }), this.flatten_steps = tt(
       e,
       _(this, j).queries
-    ), c(this, q, J).call(this), this.active_step = this.getFlattenSteps()[_(this, g).getValidNavIndex(0, "next")], _(this, x).init(), _(this, g).init(), (this.options.start_immediately || t) && this.start();
+    ), c(this, N, Z).call(this), this.active_step = this.getFlattenSteps()[_(this, g).getValidNavIndex(0, "next")], _(this, x).init(), _(this, g).init(), (this.options.start_immediately || t) && this.start();
   }
@@ -1166,10 +1165,10 @@ /**
   updateSteps(t, e = !0) {
-    const a = R(t);
+    const a = z(t);
     this.original_steps = a, L(this, j, {
       instances: [],
-      queries: F(a)
-    }), this.flatten_steps = k(
+      queries: k(a)
+    }), this.flatten_steps = tt(
       a,
       _(this, j).queries
-    ), c(this, q, J).call(this), e && this.restart();
+    ), c(this, N, Z).call(this), e && this.restart();
   }
@@ -1263,10 +1262,10 @@ /**
   destroy() {
-    c(this, q, nt).call(this), _(this, x).destroy(), this.is_active = !1;
+    c(this, N, st).call(this), _(this, x).destroy(), this.is_active = !1;
   }
 }
-j = /* @__PURE__ */ new WeakMap(), x = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), P = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakSet(), nt = function() {
+j = /* @__PURE__ */ new WeakMap(), x = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), N = /* @__PURE__ */ new WeakSet(), st = function() {
   _(this, j).instances.forEach((l) => {
     l.onchange = null;
   }), _(this, x).cleanUp(), _(this, g).cleanUp();
-}, J = function() {
+}, Z = function() {
   for (const [l, t] of Object.entries(
@@ -1277,21 +1276,21 @@ _(this, j).queries
     e.matches && (this.flatten_steps = I(
-      this.flatten_steps,
-      t,
-      "value"
+      P(this.flatten_steps, t, "value")
     )), e.onchange = (a) => {
-      const s = _(this, j).queries[a.media];
-      a.matches && s ? this.flatten_steps = I(
-        this.flatten_steps,
-        s,
-        "value"
-      ) : (s && (this.flatten_steps = I(
-        this.flatten_steps,
-        s,
-        "default"
-      )), _(this, j).instances.forEach((n) => {
-        const i = _(this, j).queries[n.media];
-        n.matches && i && (this.flatten_steps = I(
+      const n = _(this, j).queries[a.media];
+      a.matches && n ? this.flatten_steps = I(
+        P(this.flatten_steps, n, "value")
+      ) : (n && (this.flatten_steps = I(
+        P(
           this.flatten_steps,
-          i,
-          "value"
+          n,
+          "default"
+        )
+      )), _(this, j).instances.forEach((s) => {
+        const i = _(this, j).queries[s.media];
+        s.matches && i && (this.flatten_steps = I(
+          P(
+            this.flatten_steps,
+            i,
+            "value"
+          )
         ));
@@ -1304,3 +1303,3 @@ })), _(this, x).update(), this.goToStep(
 };
-const st = lt(null), Ot = rt(
+const ot = rt(null), Ot = ht(
   ({
@@ -1311,21 +1310,21 @@ children: l,
     CustomTooltip: a,
-    CustomArrow: s,
-    options: n,
+    CustomArrow: n,
+    options: s,
     ...i
   }) => {
-    const [o, r] = b(
+    const [o, r] = D(
       {}
-    ), [d, v] = b(), [h, m] = b(null), [u, f] = b(null), y = ht(null);
-    return H(() => {
+    ), [d, v] = D(), [h, m] = D(null), [u, f] = D(null), y = dt(null);
+    return R(() => {
       let w = null, $ = null;
-      y.current = document.createElement("div"), a && (w = y.current), s && ($ = y.current);
-      const N = {
-        ...n,
+      y.current = document.createElement("div"), a && (w = y.current), n && ($ = y.current);
+      const b = {
+        ...s,
         custom_tooltip: w,
         custom_arrow: $
-      }, S = new St(e, N);
+      }, S = new St(e, b);
       return S.init(), t && t(S), r(S), () => {
         S.destroy();
       };
-    }, []), H(() => {
+    }, []), R(() => {
       if (!(o != null && o.initialized)) return;
@@ -1336,9 +1335,9 @@ const w = () => {
         v(o.getActiveStep());
-      }, N = (S) => {
-        var Y, G, K;
-        m((Y = S == null ? void 0 : S.data) == null ? void 0 : Y.tooltip_container_element), f((G = S == null ? void 0 : S.data) == null ? void 0 : G.arrow_element), (K = y.current) == null || K.remove();
+      }, b = (S) => {
+        var G, K, Q;
+        m((G = S == null ? void 0 : S.data) == null ? void 0 : G.tooltip_container_element), f((K = S == null ? void 0 : S.data) == null ? void 0 : K.arrow_element), (Q = y.current) == null || Q.remove();
       };
       return o.addEventListener(
         "onAfterDomInsert",
-        N
+        b
       ), o.addEventListener("onStart", w), o.addEventListener(
@@ -1353,3 +1352,3 @@ "onTransitionComplete",
           "onAfterDomInsert",
-          N
+          b
         ), o.removeEventListener(
@@ -1371,11 +1370,11 @@ "onTransitionComplete",
       i == null ? void 0 : i.onTransitionComplete
-    ]), H(() => {
-      o != null && o.initialized && (n == null || delete n.custom_tooltip, n == null || delete n.custom_arrow, o.updateOptions(n, !1), o.updateSteps(e, !1), o.is_active || n != null && n.start_immediately ? o.restart() : (o.destroy(), o.init(!1)));
-    }, [n, e, o]), /* @__PURE__ */ ot(st.Provider, { value: o, children: [
+    ]), R(() => {
+      o != null && o.initialized && (s == null || delete s.custom_tooltip, s == null || delete s.custom_arrow, o.updateOptions(s, !1), o.updateSteps(e, !1), o.is_active || s != null && s.start_immediately ? o.restart() : (o.destroy(), o.init(!1)));
+    }, [s, e, o]), /* @__PURE__ */ lt(ot.Provider, { value: o, children: [
       l,
-      a && h && X(
-        /* @__PURE__ */ Q(a, { active_step: d, ajala: o }),
+      a && h && F(
+        /* @__PURE__ */ X(a, { active_step: d, ajala: o }),
         h
       ),
-      s && u && X(/* @__PURE__ */ Q(s, {}), u)
+      n && u && F(/* @__PURE__ */ X(n, {}), u)
     ] });
@@ -1385,3 +1384,3 @@ }
 function At() {
-  const l = dt(st);
+  const l = pt(ot);
   if (!l)
@@ -1388,0 +1387,0 @@ throw new Error(

package.json

 {
   "name": "react-ajala",
   "private": false,
-  "version": "0.2.17",
+  "version": "0.2.18",
   "type": "module",
@@ -22,3 +22,3 @@ "main": "./dist/react-ajala.cjs",
   "dependencies": {
-    "ajala.js": "0.4.9"
+    "ajala.js": "0.4.10"
   },
@@ -25,0 +25,0 @@ "peerDependencies": {

No alert changes

Worsened metrics

Total package byte prevSize

97906

-0.28%

Lines of code

1573

-0.06%

Dependency changes

• + Added

  ajala.js@0.4.10
  (transitive)

• - Removed

  ajala.js@0.4.9
  (transitive)

• Updated

  ajala.js@0.4.10