@repere/react 0.2.1 → 0.2.2

package/dist/index.js

@@ -102,27 +102,27 @@ function $(e) {
 }
 function re(e, t) {
   const o = (i) => {
-    const a = i.match(/(-?\d+)%/);
-    return a ? parseFloat(a[1]) : 0;
-  }, n = o(e.x), s = o(e.y), r = (i = 0) => s === 0 && i === 0 ? `translate(${n}%, 0)` : i === 0 ? `translate(${n}%, ${s}%)` : `translate(${n}%, calc(${s}% + ${i}px))`;
+    const s = i.match(/(-?\d+)%/);
+    return s ? parseFloat(s[1]) : 0;
+  }, n = o(e.x), r = o(e.y), a = (i = 0) => r === 0 && i === 0 ? `translate(${n}%, 0)` : i === 0 ? `translate(${n}%, ${r}%)` : `translate(${n}%, calc(${r}% + ${i}px))`;
   return {
     initial: {
       ...t.initial,
-      transform: r(t.initial.y || 0)
+      transform: a(t.initial.y || 0)
     },
     animate: {
       ...t.animate,
-      transform: r(t.animate.y || 0)
+      transform: a(t.animate.y || 0)
     },
     exit: {
       ...t.exit,
-      transform: r(t.exit.y || 0)
+      transform: a(t.exit.y || 0)
     }
   };
 }
 function ae(e, t) {
   if (!e && !t) return {};
-  const o = e?.variants, n = e?.transition, s = t?.variants, r = t?.transition, i = r?.ease ?? n?.ease ?? [0.4, 0, 0.2, 1], a = Array.isArray(i) ? `cubic-bezier(${i.join(", ")})` : i;
+  const o = e?.variants, n = e?.transition, r = t?.variants, a = t?.transition, i = a?.ease ?? n?.ease ?? [0.4, 0, 0.2, 1], s = Array.isArray(i) ? `cubic-bezier(${i.join(", ")})` : i;
   return {
     // Initial state (when opening starts) - from onOpen animation
     "--repere-initial-opacity": o?.initial.opacity ?? 0,
@@ -135,13 +135,13 @@ function ae(e, t) {
     "--repere-animate-y": `${o?.animate.y ?? 0}px`,
     "--repere-animate-scale": o?.animate.scale ?? 1,
     // Exit state (when closing) - from onClose animation
-    "--repere-exit-opacity": s?.exit.opacity ?? 0,
-    "--repere-exit-x": `${s?.exit.x ?? 0}px`,
-    "--repere-exit-y": `${s?.exit.y ?? 0}px`,
-    "--repere-exit-scale": s?.exit.scale ?? 1,
+    "--repere-exit-opacity": r?.exit.opacity ?? 0,
+    "--repere-exit-x": `${r?.exit.x ?? 0}px`,
+    "--repere-exit-y": `${r?.exit.y ?? 0}px`,
+    "--repere-exit-scale": r?.exit.scale ?? 1,
     // Transition timing
-    "--repere-transition-duration": `${r?.duration ?? n?.duration ?? 0.3}s`,
-    "--repere-transition-timing": a
+    "--repere-transition-duration": `${a?.duration ?? n?.duration ?? 0.3}s`,
+    "--repere-transition-timing": s
   };
 }
 function le(e, t) {
@@ -173,12 +173,12 @@ class de {
    * This supports wildcards - e.g., path="*" will match all pages
    */
   findMatchingPages(t, o) {
-    const n = t.filter((s) => typeof s.path == "function" ? s.path(o) : pe(o, s.path));
+    const n = t.filter((r) => typeof r.path == "function" ? r.path(o) : pe(o, r.path));
     return this.debug && console.log(
       "[BeaconManager] Path:",
       o,
       "Matched pages:",
-      n.map((s) => s.id).join(", ") || "none"
+      n.map((r) => r.id).join(", ") || "none"
     ), n;
   }
   /**
@@ -193,24 +193,24 @@ class de {
       "[BeaconManager] Found",
       n.length,
       "matching page(s):",
-      n.map((a) => a.id).join(", ")
+      n.map((s) => s.id).join(", ")
     );
-    const s = [], r = /* @__PURE__ */ new Set();
-    for (const a of n)
-      for (const l of a.beacons) {
-        if (r.has(l.id)) {
+    const r = [], a = /* @__PURE__ */ new Set();
+    for (const s of n)
+      for (const l of s.beacons) {
+        if (a.has(l.id)) {
           this.debug && console.warn(
-            `[BeaconManager] Duplicate beacon ID "${l.id}" in page "${a.id}", skipping`
+            `[BeaconManager] Duplicate beacon ID "${l.id}" in page "${s.id}", skipping`
           );
           continue;
         }
-        r.add(l.id), s.push(l);
+        a.add(l.id), r.push(l);
       }
     const i = [];
-    for (const a of s)
+    for (const s of r)
       await Promise.resolve(
-        this.store.isDismissed(a.id)
-      ) ? this.debug && console.log("[BeaconManager] Beacon", a.id, "is dismissed") : i.push(a);
+        this.store.isDismissed(s.id)
+      ) ? this.debug && console.log("[BeaconManager] Beacon", s.id, "is dismissed") : i.push(s);
     return this.debug && console.log("[BeaconManager] Active beacons:", i.length), i;
   }
   /**
@@ -221,42 +221,42 @@ class de {
   }
 }
 function N(e, t = m.TopRight, o = { x: 0, y: 0 }) {
-  const { x: n = 0, y: s = 0 } = o;
-  let r = 0, i = 0, a = "0", l = "0";
+  const { x: n = 0, y: r = 0 } = o;
+  let a = 0, i = 0, s = "0", l = "0";
   switch (t) {
     // Top positions
     case m.TopLeft:
-      r = e.top + window.scrollY, i = e.left + window.scrollX, a = "-50%", l = "-100%";
+      a = e.top + window.scrollY, i = e.left + window.scrollX, s = "-50%", l = "-100%";
       break;
     case m.TopCenter:
-      r = e.top + window.scrollY, i = e.left + window.scrollX + e.width / 2, a = "-50%", l = "-100%";
+      a = e.top + window.scrollY, i = e.left + window.scrollX + e.width / 2, s = "-50%", l = "-100%";
       break;
     case m.TopRight:
-      r = e.top + window.scrollY, i = e.right + window.scrollX, a = "-50%", l = "-100%";
+      a = e.top + window.scrollY, i = e.right + window.scrollX, s = "-50%", l = "-100%";
       break;
     // Right positions
     case m.RightCenter:
-      r = e.top + window.scrollY + e.height / 2, i = e.right + window.scrollX, a = "0", l = "-50%";
+      a = e.top + window.scrollY + e.height / 2, i = e.right + window.scrollX, s = "0", l = "-50%";
       break;
     // Bottom positions
     case m.BottomLeft:
-      r = e.bottom + window.scrollY, i = e.left + window.scrollX, a = "-50%", l = "0";
+      a = e.bottom + window.scrollY, i = e.left + window.scrollX, s = "-50%", l = "0";
       break;
     case m.BottomCenter:
-      r = e.bottom + window.scrollY, i = e.left + window.scrollX + e.width / 2, a = "-50%", l = "0";
+      a = e.bottom + window.scrollY, i = e.left + window.scrollX + e.width / 2, s = "-50%", l = "0";
       break;
     case m.BottomRight:
-      r = e.bottom + window.scrollY, i = e.right + window.scrollX, a = "-50%", l = "0";
+      a = e.bottom + window.scrollY, i = e.right + window.scrollX, s = "-50%", l = "0";
       break;
     // Left positions
     case m.LeftCenter:
-      r = e.top + window.scrollY + e.height / 2, i = e.left + window.scrollX, a = "-100%", l = "-50%";
+      a = e.top + window.scrollY + e.height / 2, i = e.left + window.scrollX, s = "-100%", l = "-50%";
       break;
   }
-  return r += s, i += n, {
-    top: r,
+  return a += r, i += n, {
+    top: a,
     left: i,
-    translate: { x: a, y: l }
+    translate: { x: s, y: l }
   };
 }
 class ue {
@@ -272,30 +272,30 @@ class ue {
   /**
    * Subscribe to position updates for an element
    */
-  subscribe(t, o, n, s = {}) {
-    const r = t;
-    this.tracked.has(r) || this.tracked.set(r, {
+  subscribe(t, o, n, r = {}) {
+    const a = t;
+    this.tracked.has(a) || this.tracked.set(a, {
       selector: t,
       position: o,
-      offset: s.offset,
-      zIndex: s.zIndex ?? 9999,
-      delay: s.delay,
+      offset: r.offset,
+      zIndex: r.zIndex ?? 9999,
+      delay: r.delay,
       callbacks: /* @__PURE__ */ new Map(),
       element: null,
       delayTimeoutIds: /* @__PURE__ */ new Map()
     });
-    const i = this.tracked.get(r);
+    const i = this.tracked.get(a);
     return i ? (i.callbacks.set(n, {
       callback: n,
-      needsInitialDelay: (s.delay ?? 0) > 0
-    }), this.tracked.size === 1 && this.startListening(), this.scheduleInitialUpdate(r, n), () => {
-      const a = this.tracked.get(r);
-      if (a) {
-        const l = a.delayTimeoutIds.get(n);
-        if (l !== void 0 && (clearTimeout(l), a.delayTimeoutIds.delete(n)), a.callbacks.delete(n), a.callbacks.size === 0) {
-          for (const [, c] of a.delayTimeoutIds)
+      needsInitialDelay: (r.delay ?? 0) > 0
+    }), this.tracked.size === 1 && this.startListening(), this.scheduleInitialUpdate(a, n), () => {
+      const s = this.tracked.get(a);
+      if (s) {
+        const l = s.delayTimeoutIds.get(n);
+        if (l !== void 0 && (clearTimeout(l), s.delayTimeoutIds.delete(n)), s.callbacks.delete(n), s.callbacks.size === 0) {
+          for (const [, c] of s.delayTimeoutIds)
             clearTimeout(c);
-          a.delayTimeoutIds.clear(), this.tracked.delete(r), this.tracked.size === 0 && this.stopListening();
+          s.delayTimeoutIds.clear(), this.tracked.delete(a), this.tracked.size === 0 && this.stopListening();
         }
       }
     }) : () => {
@@ -304,35 +304,35 @@ class ue {
   scheduleInitialUpdate(t, o) {
     const n = this.tracked.get(t);
     if (!n) return;
-    const s = n.callbacks.get(o);
-    if (s)
-      if (s.needsInitialDelay && n.delay && n.delay > 0) {
+    const r = n.callbacks.get(o);
+    if (r)
+      if (r.needsInitialDelay && n.delay && n.delay > 0) {
         this.debug && console.log(
           `[PositionTracker] Delaying initial position calculation for ${t} by ${n.delay}ms`
         );
-        const r = setTimeout(() => {
+        const a = setTimeout(() => {
           this.debug && console.log(
             `[PositionTracker] Calculating position for ${t} after delay`
           );
           const i = n.callbacks.get(o);
           i && (i.needsInitialDelay = !1), n.delayTimeoutIds.delete(o), this.updatePositionForCallback(t, o);
         }, n.delay);
-        n.delayTimeoutIds.set(o, r);
+        n.delayTimeoutIds.set(o, a);
       } else
         this.updatePositionForCallback(t, o);
   }
   updatePositionForCallback(t, o) {
     const n = this.tracked.get(t);
     if (!n) return;
-    const s = document.querySelector(n.selector);
-    if (!s) {
+    const r = document.querySelector(n.selector);
+    if (!r) {
       this.debug && console.log(`[PositionTracker] Element not found: ${n.selector}`), n.element = null, o(null);
       return;
     }
-    n.element = s;
-    const r = s.getBoundingClientRect(), i = {
+    n.element = r;
+    const a = r.getBoundingClientRect(), i = {
       ...N(
-        r,
+        a,
         n.position,
         n.offset
       ),
@@ -350,14 +350,14 @@ class ue {
     const n = document.querySelector(o.selector);
     if (!n) {
       this.debug && console.log(`[PositionTracker] Element not found: ${o.selector}`), o.element = null;
-      for (const [i] of o.callbacks)
-        i(null);
+      for (const [i, s] of o.callbacks)
+        s.needsInitialDelay || i(null);
       return;
     }
     o.element = n;
-    const s = n.getBoundingClientRect(), r = {
+    const r = n.getBoundingClientRect(), a = {
       ...N(
-        s,
+        r,
         o.position,
         o.offset
       ),
@@ -366,10 +366,10 @@ class ue {
     };
     this.debug && console.log(
       `[PositionTracker] Updated position for ${o.selector}:`,
-      r
+      a
     );
-    for (const [i] of o.callbacks)
-      i(r);
+    for (const [i, s] of o.callbacks)
+      s.needsInitialDelay || i(a);
   }
   updateAllPositions = () => {
     for (const [t] of this.tracked)
@@ -407,20 +407,20 @@ function I() {
 }
 function me(e, t) {
   const o = w(() => {
-    const i = t.trigger?.animations?.onRender, a = e.trigger?.animations?.onRender;
-    return $(T(i, a));
+    const i = t.trigger?.animations?.onRender, s = e.trigger?.animations?.onRender;
+    return $(T(i, s));
   }, [t.trigger?.animations, e.trigger?.animations]), n = w(() => {
-    const i = t.trigger?.animations?.onDismiss, a = e.trigger?.animations?.onDismiss;
-    return $(T(i, a));
+    const i = t.trigger?.animations?.onDismiss, s = e.trigger?.animations?.onDismiss;
+    return $(T(i, s));
   }, [
     t.trigger?.animations?.onDismiss,
     e.trigger?.animations?.onDismiss
-  ]), s = w(() => {
-    const i = t.popover?.animations?.onOpen, a = e.popover?.animations?.onOpen;
-    return $(T(i, a));
-  }, [t.popover?.animations?.onOpen, e.popover?.animations?.onOpen]), r = w(() => {
-    const i = t.popover?.animations?.onClose, a = e.popover?.animations?.onClose;
-    return $(T(i, a));
+  ]), r = w(() => {
+    const i = t.popover?.animations?.onOpen, s = e.popover?.animations?.onOpen;
+    return $(T(i, s));
+  }, [t.popover?.animations?.onOpen, e.popover?.animations?.onOpen]), a = w(() => {
+    const i = t.popover?.animations?.onClose, s = e.popover?.animations?.onClose;
+    return $(T(i, s));
   }, [
     t.popover?.animations?.onClose,
     e.popover?.animations?.onClose
@@ -428,8 +428,8 @@ function me(e, t) {
   return {
     triggerAnimation: o,
     triggerDismissAnimation: n,
-    popoverOpenAnimation: s,
-    popoverCloseAnimation: r
+    popoverOpenAnimation: r,
+    popoverCloseAnimation: a
   };
 }
 function ge({
@@ -437,13 +437,13 @@ function ge({
   position: t,
   offset: o,
   zIndex: n = 9999,
-  delay: s,
-  enabled: r = !0,
+  delay: r,
+  enabled: a = !0,
   debug: i = !1
 }) {
-  const [a, l] = k(null), c = w(() => new ue(i), [i]);
+  const [s, l] = k(null), c = w(() => new ue(i), [i]);
   return B(() => {
-    if (!r) {
+    if (!a) {
       l(null);
       return;
     }
@@ -451,25 +451,25 @@ function ge({
       e,
       t,
       l,
-      { offset: o, zIndex: n, delay: s }
+      { offset: o, zIndex: n, delay: r }
     );
-  }, [c, e, t, o, n, s, r]), B(() => () => c.destroy(), [c]), {
-    calculatedPosition: a,
-    targetElement: a ? document.querySelector(e) : null
+  }, [c, e, t, o, n, r, a]), B(() => () => c.destroy(), [c]), {
+    calculatedPosition: s,
+    targetElement: s ? document.querySelector(e) : null
   };
 }
 function fe() {
   const [e, t] = k(!1), [o, n] = k(
     null
-  ), s = A((l) => {
+  ), r = A((l) => {
     n(l);
-  }, []), r = A(
+  }, []), a = A(
     () => o?.togglePopover(),
     [o]
   ), i = A(
     () => o?.showPopover(),
     [o]
-  ), a = A(
+  ), s = A(
     () => o?.hidePopover(),
     [o]
   );
@@ -482,10 +482,10 @@ function fe() {
   }, [o]), {
     isOpen: e,
     popoverElement: o,
-    handlePopoverRef: s,
-    togglePopover: r,
+    handlePopoverRef: r,
+    togglePopover: a,
     showPopover: i,
-    hidePopover: a
+    hidePopover: s
   };
 }
 function ve(e, t) {
@@ -518,14 +518,14 @@ function he(e, t) {
   });
 }
 function ye(e, t) {
-  const o = e.trigger?.position || t.trigger?.position || ne, n = e.trigger?.zIndex || t.trigger?.zIndex || 9999, s = e.trigger?.offset, r = e.trigger?.delay ?? t.trigger?.delay, i = e.popover?.position || t.popover?.position || o, a = e.popover?.offset || t.popover?.offset || { x: 0, y: 0 };
+  const o = e.trigger?.position || t.trigger?.position || ne, n = e.trigger?.zIndex || t.trigger?.zIndex || 9999, r = e.trigger?.offset, a = e.trigger?.delay ?? t.trigger?.delay, i = e.popover?.position || t.popover?.position || o, s = e.popover?.offset || t.popover?.offset || { x: 0, y: 0 };
   return {
     position: o,
     zIndex: n,
-    offset: s,
-    delay: r,
+    offset: r,
+    delay: a,
     popoverPosition: i,
-    popoverOffset: a
+    popoverOffset: s
   };
 }
 function we({
@@ -533,32 +533,32 @@ function we({
   config: t,
   store: o,
   onDismiss: n,
-  debug: s
+  debug: r
 }) {
-  const r = te(), [i, a] = k(!1), { position: l, zIndex: c, offset: d, delay: h, popoverPosition: p, popoverOffset: v } = ye(e, t), { calculatedPosition: u, targetElement: b } = ge({
+  const a = te(), [i, s] = k(!1), { position: l, zIndex: c, offset: d, delay: h, popoverPosition: p, popoverOffset: v } = ye(e, t), { calculatedPosition: u, targetElement: b } = ge({
     targetSelector: e.selector,
     position: l,
     offset: d,
     zIndex: c,
     delay: h,
     enabled: !0,
-    debug: s
+    debug: r
   }), {
     isOpen: C,
     popoverElement: P,
     handlePopoverRef: y,
     togglePopover: R,
     showPopover: q,
-    hidePopover: O
+    hidePopover: D
   } = fe(), {
     triggerAnimation: G,
-    triggerDismissAnimation: D,
+    triggerDismissAnimation: O,
     popoverOpenAnimation: V,
     popoverCloseAnimation: z
   } = me(e, t), E = async () => {
-    a(!0), P?.hidePopover();
+    s(!0), P?.hidePopover();
     const K = le(
-      D,
+      O,
       z
     );
     await ce(K), await Promise.resolve(o.dismiss(e.id)), n();
@@ -572,15 +572,15 @@ function we({
     isDismissing: i,
     toggle: R,
     open: q,
-    close: O,
+    close: D,
     dismiss: E,
     triggerAnimation: G,
-    triggerDismissAnimation: D,
+    triggerDismissAnimation: O,
     popoverOpenAnimation: V,
     popoverCloseAnimation: z,
-    popoverId: r
+    popoverId: a
   }, J = e.trigger?.component || t.trigger?.component, S = e.popover.component || t.popover?.component;
-  return !u || !b ? (s && console.warn(
+  return !u || !b ? (r && console.warn(
     `[Repere] ${e.id} waiting for target element: position=${!!u}, element=${!!b}`
   ), null) : S ? /* @__PURE__ */ Q(j.Provider, { value: H, children: [
     ve(J, {
@@ -594,11 +594,11 @@ function we({
       beacon: e,
       position: l,
       handleDismiss: E,
-      hidePopover: O,
+      hidePopover: D,
       handlePopoverRef: y,
-      popoverId: r
+      popoverId: a
     })
-  ] }) : (s && console.warn(
+  ] }) : (r && console.warn(
     "[Repere] No popover component provided for beacon:",
     e.id
   ), null);
@@ -609,28 +609,28 @@ function $e({
   enabled: o = !0,
   debug: n = !1
 }) {
-  const s = w(
+  const r = w(
     () => e.store || new ie(),
     [e.store]
-  ), r = w(
-    () => new de(s, { debug: n }),
-    [s, n]
-  ), [i, a] = k([]), [l, c] = k(
+  ), a = w(
+    () => new de(r, { debug: n }),
+    [r, n]
+  ), [i, s] = k([]), [l, c] = k(
     /* @__PURE__ */ new Set()
   );
   B(() => {
     if (!o) {
-      a([]), c(/* @__PURE__ */ new Set());
+      s([]), c(/* @__PURE__ */ new Set());
       return;
     }
     (async () => {
-      const v = await r.getActiveBeacons(
+      const v = await a.getActiveBeacons(
         e.pages,
         t
       );
-      a(v);
+      s(v);
     })();
-  }, [r, e.pages, t, o]);
+  }, [a, e.pages, t, o]);
   const d = (p) => {
     c((v) => /* @__PURE__ */ new Set([...v, p]));
   }, h = i.filter(
@@ -642,7 +642,7 @@ function $e({
       {
         beacon: p,
         config: e,
-        store: s,
+        store: r,
         debug: n,
         onDismiss: () => d(p.id)
       },
@@ -658,10 +658,10 @@ const X = x(
     popover: o = "auto",
     disableAnimation: n,
     // Destructure and discard internal props so they don't spread to DOM
-    beacon: s,
-    position: r,
+    beacon: r,
+    position: a,
     onDismiss: i,
-    onClose: a,
+    onClose: s,
     ...l
   }, c) => {
     const {
@@ -707,17 +707,17 @@ const be = x(
     onClick: t,
     as: o,
     ...n
-  }, s) => {
-    const r = I(), i = r?.dismiss || (() => {
-    }), a = r?.popoverId;
+  }, r) => {
+    const a = I(), i = a?.dismiss || (() => {
+    }), s = a?.popoverId;
     return /* @__PURE__ */ g(
       o || "button",
       {
-        ref: s,
+        ref: r,
         onClick: (d) => {
           i(), t?.(d);
         },
-        popovertarget: a,
+        popovertarget: s,
         popovertargetaction: "hide",
         ...n,
         children: e
@@ -727,12 +727,12 @@ const be = x(
 ), xe = Object.assign(be, {
   displayName: "ReperePopover.AcknowledgeButton"
 }), Y = x(({ children: e = "×", ...t }, o) => {
-  const s = I()?.popoverId;
+  const r = I()?.popoverId;
   return /* @__PURE__ */ g(
     "button",
     {
       ref: o,
-      popovertarget: s,
+      popovertarget: r,
       popovertargetaction: "hide",
       "aria-label": "Close",
       ...t,
@@ -751,8 +751,8 @@ const _ = x(
 _.displayName = "ReperePopover.Footer";
 const Pe = x(
   ({ children: e, as: t, ...o }, n) => {
-    const r = I()?.beaconId || "unknown";
-    return /* @__PURE__ */ g(t || "h3", { ref: n, id: `repere-popover-${r}`, ...o, children: e });
+    const a = I()?.beaconId || "unknown";
+    return /* @__PURE__ */ g(t || "h3", { ref: n, id: `repere-popover-${a}`, ...o, children: e });
   }
 ), ke = Object.assign(Pe, {
   displayName: "ReperePopover.Title"
@@ -768,11 +768,11 @@ const Pe = x(
     as: t,
     style: o,
     disableAnimation: n,
-    ...s
-  }, r) => {
+    ...r
+  }, a) => {
     const {
       calculatedPosition: i,
-      beaconId: a,
+      beaconId: s,
       triggerAnimation: l,
       triggerDismissAnimation: c,
       isDismissing: d,
@@ -786,13 +786,13 @@ const Pe = x(
       zIndex: i.zIndex,
       pointerEvents: "auto",
       cursor: "pointer",
-      anchorName: `--repere-trigger-${a}`
+      anchorName: `--repere-trigger-${s}`
     }, b = o ? { ...u, ...o } : u, C = !n && (l || c), P = {
-      ref: r,
+      ref: a,
       popovertarget: h,
-      "aria-label": `Beacon trigger for ${a}`,
+      "aria-label": `Beacon trigger for ${s}`,
       "data-repere-trigger": "",
-      ...s
+      ...r
     };
     if (C) {
       const y = d && c ? c : l;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repere/react",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "private": false,
   "type": "module",
   "exports": {
@@ -14,7 +14,7 @@
     "dist"
   ],
   "dependencies": {
-    "@repere/core": "0.1.1"
+    "@repere/core": "0.1.2"
   },
   "peerDependencies": {
     "motion": "^12.0.0",