storybook 9.0.0-beta.2 → 9.0.0-beta.4

package/dist/highlight/preview.cjs

@@ -1,19 +1,19 @@
 "use strict";
-var F = Object.defineProperty;
+var D = Object.defineProperty;
 var ae = Object.getOwnPropertyDescriptor;
 var de = Object.getOwnPropertyNames;
 var pe = Object.prototype.hasOwnProperty;
-var l = (t, e) => F(t, "name", { value: e, configurable: !0 });
+var l = (t, e) => D(t, "name", { value: e, configurable: !0 });
 var ge = (t, e) => {
   for (var c in e)
-    F(t, c, { get: e[c], enumerable: !0 });
+    D(t, c, { get: e[c], enumerable: !0 });
 }, ue = (t, e, c, a) => {
   if (e && typeof e == "object" || typeof e == "function")
     for (let i of de(e))
-      !pe.call(t, i) && i !== c && F(t, i, { get: () => e[i], enumerable: !(a = ae(e, i)) || a.enumerable });
+      !pe.call(t, i) && i !== c && D(t, i, { get: () => e[i], enumerable: !(a = ae(e, i)) || a.enumerable });
   return t;
 };
-var me = (t) => ue(F({}, "__esModule", { value: !0 }), t);
+var me = (t) => ue(D({}, "__esModule", { value: !0 }), t);
 
 // src/highlight/preview.ts
 var xe = {};
@@ -30,8 +30,8 @@ var Z = require("storybook/internal/core-events");
 var _ = "storybook/highlight", X = `${_}/add`, oe = `${_}/remove`, P = `${_}/reset`, Y = `${_}/scroll-into-view`, V = 2147483647;
 
 // src/highlight/utils.ts
-var fe = "svg,path,rect,circle,line,polyline,polygon,ellipse,text".split(","), y = /* @__PURE__ */ l((t, e, c) => {
-  let a = fe.includes(t) ? document.createElementNS("http://www.w3.org/2000/svg", t) : document.createElement(t);
+var he = "svg,path,rect,circle,line,polyline,polygon,ellipse,text".split(","), y = /* @__PURE__ */ l((t, e, c) => {
+  let a = he.includes(t) ? document.createElementNS("http://www.w3.org/2000/svg", t) : document.createElement(t);
   return Object.entries(e).forEach(([i, g]) => {
     /[A-Z]/.test(i) ? (i === "onClick" && (a.addEventListener("click", g), a.addEventListener("keydown", (p) => {
       (p.key === "Enter" || p.key === " ") && (p.preventDefault(), g());
@@ -58,11 +58,11 @@ var fe = "svg,path,rect,circle,line,polyline,polygon,ellipse,text".split(","), y
     };
   }
   return t;
-}, "convertLegacy"), he = /* @__PURE__ */ l((t) => t instanceof Function, "isFunction"), A = /* @__PURE__ */ new Map(), O = /* @__PURE__ */ new Map(),
+}, "convertLegacy"), fe = /* @__PURE__ */ l((t) => t instanceof Function, "isFunction"), A = /* @__PURE__ */ new Map(), O = /* @__PURE__ */ new Map(),
 I = /* @__PURE__ */ new Map(), T = /* @__PURE__ */ l((t) => {
   let e = Symbol();
   return O.set(e, []), A.set(e, t), { get: /* @__PURE__ */ l(() => A.get(e), "get"), set: /* @__PURE__ */ l((p) => {
-    let u = A.get(e), m = he(p) ? p(u) : p;
+    let u = A.get(e), m = fe(p) ? p(u) : p;
     m !== u && (A.set(e, m), O.get(e)?.forEach((x) => {
       I.get(x)?.(), I.set(x, x(m));
     }));
@@ -203,8 +203,8 @@ var be = /* @__PURE__ */ l(() => y(
     let n = /* @__PURE__ */ l(() => requestAnimationFrame(() => u.set(se(o))), "updateBoxes"), s = new ResizeObserver(n);
     s.observe(i.body), Array.from(o.keys()).forEach((r) => s.observe(r));
     let d = Array.from(i.body.querySelectorAll("*")).filter((r) => {
-      let { overflow: f, overflowX: h, overflowY: b } = window.getComputedStyle(r);
-      return ["auto", "scroll"].some((L) => [f, h, b].includes(L));
+      let { overflow: h, overflowX: f, overflowY: b } = window.getComputedStyle(r);
+      return ["auto", "scroll"].some((L) => [h, f, b].includes(L));
     });
     return d.forEach((r) => r.addEventListener("scroll", n)), () => {
       s.disconnect(), d.forEach((r) => r.removeEventListener("scroll", n));
@@ -214,8 +214,8 @@ var be = /* @__PURE__ */ l(() => y(
       u.set(
         (d) => d.map((r) => {
           if (n.includes(r.element)) {
-            let { top: f, left: h } = r.element.getBoundingClientRect();
-            return { ...r, top: f + window.scrollY, left: h + window.scrollX };
+            let { top: h, left: f } = r.element.getBoundingClientRect();
+            return { ...r, top: h + window.scrollY, left: f + window.scrollX };
           }
           return r;
         })
@@ -261,13 +261,13 @@ var be = /* @__PURE__ */ l(() => y(
       return;
     let s = /* @__PURE__ */ l((d) => {
       requestAnimationFrame(() => {
-        let r = i.getElementById(e), f = { x: d.pageX, y: d.pageY };
-        if (r && !z(r, f)) {
-          let h = n.filter((b) => {
+        let r = i.getElementById(e), h = { x: d.pageX, y: d.pageY };
+        if (r && !z(r, h)) {
+          let f = n.filter((b) => {
             let L = C.get(b.element);
-            return j(b, L, f);
+            return j(b, L, h);
           });
-          m.set(h.length ? f : void 0), E.set(h);
+          m.set(f.length ? h : void 0), E.set(f);
         }
       });
     }, "onClick");
@@ -279,18 +279,18 @@ var be = /* @__PURE__ */ l(() => y(
       let d = u.get().filter((b) => {
         let L = C.get(b.element);
         return j(b, L, n);
-      }), r = s.filter((b) => d.includes(b)), f = d.filter((b) => !s.includes(b)), h = s.length - r.length;
-      return f.length || h ? [...r, ...f] : s;
+      }), r = s.filter((b) => d.includes(b)), h = d.filter((b) => !s.includes(b)), f = s.length - r.length;
+      return h.length || f ? [...r, ...h] : s;
     });
   }, "updateHovered");
   x.subscribe(K), u.subscribe(K);
   let B = /* @__PURE__ */ l(() => {
     let o = w.get(), n = o ? [o] : E.get(), s = n.length === 1 ? n[0] : v.get(), d = m.get() !== void 0;
     u.get().forEach((r) => {
-      let f = C.get(r.element);
-      if (f) {
-        let h = s === r, b = d ? s ? h : n.includes(r) : M.get()?.includes(r);
-        Object.assign(f.style, {
+      let h = C.get(r.element);
+      if (h) {
+        let f = s === r, b = d ? s ? f : n.includes(r) : M.get()?.includes(r);
+        Object.assign(h.style, {
           animation: "none",
           background: "transparent",
           border: "none",
@@ -299,7 +299,7 @@ var be = /* @__PURE__ */ l(() => y(
           outlineOffset: "0px",
           ...r.styles,
           ...b ? r.hoverStyles : {},
-          ...h ? r.focusStyles : {},
+          ...f ? r.focusStyles : {},
           position: getComputedStyle(r.element).position === "fixed" ? "fixed" : "absolute",
           zIndex: V - 10,
           top: `${r.top}px`,
@@ -310,12 +310,12 @@ var be = /* @__PURE__ */ l(() => y(
           padding: 0,
           cursor: r.selectable ? "pointer" : "default",
           pointerEvents: r.selectable ? "auto" : "none"
-        }), W(f);
+        }), W(h);
       }
     });
   }, "updateBoxStyles");
   u.subscribe(B), E.subscribe(B), M.subscribe(B), v.subscribe(B), w.subscribe(B);
-  let J = /* @__PURE__ */ l(() => {
+  let U = /* @__PURE__ */ l(() => {
     if (!H)
       return;
     let o = i.getElementById(e);
@@ -425,33 +425,33 @@ ue", Helvetica, Arial, sans-serif;
         "ul",
         { class: "element-list" },
         s.map((r) => {
-          let f = r.menu?.filter(
+          let h = r.menu?.filter(
             (S) => !S.selectors || S.selectors.some((R) => r.selectors.includes(R))
-          ), h = s.length > 1 && !!f?.length, b = h ? {
+          ), f = s.length > 1 && !!h?.length, b = f ? {
             class: "selectable",
             onClick: /* @__PURE__ */ l(() => w.set(r), "onClick"),
             onMouseEnter: /* @__PURE__ */ l(() => v.set(r), "onMouseEnter"),
             onMouseLeave: /* @__PURE__ */ l(() => v.set(void 0), "onMouseLeave")
-          } : n ? { class: "selected", onClick: /* @__PURE__ */ l(() => w.set(void 0), "onClick") } : {}, L = h || n;
+          } : n ? { class: "selected", onClick: /* @__PURE__ */ l(() => w.set(void 0), "onClick") } : {}, L = f || n;
           return y("li", b, [
             y(L ? "button" : "div", L ? { type: "button" } : {}, [
               n ? be() : null,
               y("code", {}, [r.element.outerHTML]),
-              h ? ye() : null
+              f ? ye() : null
             ])
           ]);
         })
       )
     )), w.get() || E.get().length === 1) {
-      let r = w.get() || E.get()[0], f = r.menu?.filter(
-        (h) => !h.selectors || h.selectors.some((b) => r.selectors.includes(b))
+      let r = w.get() || E.get()[0], h = r.menu?.filter(
+        (f) => !f.selectors || f.selectors.some((b) => r.selectors.includes(b))
       );
-      f?.length && o.appendChild(
+      h?.length && o.appendChild(
         y(
           "ul",
           { class: "menu-list" },
-          f.map(({ id: h, title: b, description: L, clickEvent: S }) => {
-            let R = S && (() => t.emit(S, h, le(r)));
+          h.map(({ id: f, title: b, description: L, clickEvent: S }) => {
+            let R = S && (() => t.emit(S, f, le(r)));
             return y("li", {}, [
               y(
                 R ? "button" : "div",
@@ -475,13 +475,13 @@ ue", Helvetica, Arial, sans-serif;
       top: `${o.style.position === "fixed" ? d.y - window.scrollY : d.y}px`
     }), W(o), requestAnimationFrame(() => ie(o, d, { topOffset: 15, centered: !0 }))) : (re(o), Object.assign(o.style, { display: "none" }));
   }, "renderMenu");
-  E.subscribe(J), w.subscribe(J);
-  let U = /* @__PURE__ */ l((o) => {
+  E.subscribe(U), w.subscribe(U);
+  let J = /* @__PURE__ */ l((o) => {
     let n = ne(o);
     n.selectors?.length && g.set((s) => [...s, n]);
   }, "addHighlight"), N = /* @__PURE__ */ l((o) => {
     g.set((n) => n.filter((s) => s.id !== o));
-  }, "removeHighlight"), D = /* @__PURE__ */ l(() => {
+  }, "removeHighlight"), F = /* @__PURE__ */ l(() => {
     g.set([]);
   }, "clearHighlights"), G, Q = /* @__PURE__ */ l((o, n) => {
     let s = "scrollIntoView-highlight";
@@ -493,8 +493,8 @@ ue", Helvetica, Arial, sans-serif;
     }
     d.scrollIntoView({ behavior: "smooth", block: "center", ...n });
     let r = `kf-${Math.random().toString(36).substring(2, 15)}`;
-    g.set((f) => [
-      ...f,
+    g.set((h) => [
+      ...h,
       {
         id: s,
         priority: 1e3,
@@ -518,9 +518,9 @@ ue", Helvetica, Arial, sans-serif;
   }, "scrollIntoView"), ee = /* @__PURE__ */ l((o) => {
     requestAnimationFrame(() => x.set({ x: o.pageX, y: o.pageY }));
   }, "onMouseMove");
-  i.body.addEventListener("mousemove", ee), t.on(X, U), t.on(oe, N), t.on(P, D), t.on(Z.STORY_CHANGED, D), t.on(Y, Q);
+  i.body.addEventListener("mousemove", ee), t.on(X, J), t.on(oe, N), t.on(P, F), t.on(Z.STORY_CHANGED, F), t.on(Y, Q);
   let te = /* @__PURE__ */ l(() => {
-    clearTimeout(G), i.body.removeEventListener("mousemove", ee), t.off(X, U), t.off(P, D), t.off(Z.STORY_CHANGED, D), t.off(Y, Q), g.teardown(),
+    clearTimeout(G), i.body.removeEventListener("mousemove", ee), t.off(X, J), t.off(P, F), t.off(Z.STORY_CHANGED, F), t.off(Y, Q), g.teardown(),
     p.teardown(), u.teardown(), E.teardown(), m.teardown(), x.teardown(), M.teardown(), v.teardown(), w.teardown(), k.forEach((o) => o.remove()),
     C.forEach((o) => o.remove()), i.getElementById(e)?.remove(), i.getElementById(c)?.remove();
   }, "teardown");
@@ -528,7 +528,7 @@ ue", Helvetica, Arial, sans-serif;
 }, "useHighlights");
 
 // src/highlight/preview.ts
-$.addons && $.addons.ready && $.addons.ready().then(() => {
+globalThis?.FEATURES?.highlight && $.addons?.ready && $.addons.ready().then(() => {
   let t = $.addons.getChannel();
   ce({ channel: t });
 });

package/dist/highlight/preview.js

@@ -2,13 +2,13 @@ var ce = Object.defineProperty;
 var l = (s, e) => ce(s, "name", { value: e, configurable: !0 });
 
 // src/highlight/preview.ts
-import { addons as _, definePreview as ue } from "storybook/preview-api";
+import { addons as j, definePreview as ue } from "storybook/preview-api";
 
 // src/highlight/useHighlights.ts
 import { STORY_CHANGED as re } from "storybook/internal/core-events";
 
 // src/highlight/constants.ts
-var D = "storybook/highlight", G = `${D}/add`, ee = `${D}/remove`, X = `${D}/reset`, P = `${D}/scroll-into-view`, Y = 2147483647;
+var F = "storybook/highlight", N = `${F}/add`, ee = `${F}/remove`, G = `${F}/reset`, X = `${F}/scroll-into-view`, P = 2147483647;
 
 // src/highlight/utils.ts
 var ae = "svg,path,rect,circle,line,polyline,polygon,ellipse,text".split(","), y = /* @__PURE__ */ l((s, e, d) => {
@@ -40,12 +40,12 @@ var ae = "svg,path,rect,circle,line,polyline,polygon,ellipse,text".split(","), y
   }
   return s;
 }, "convertLegacy"), de = /* @__PURE__ */ l((s) => s instanceof Function, "isFunction"), R = /* @__PURE__ */ new Map(), O = /* @__PURE__ */ new Map(),
-F = /* @__PURE__ */ new Map(), T = /* @__PURE__ */ l((s) => {
+D = /* @__PURE__ */ new Map(), T = /* @__PURE__ */ l((s) => {
   let e = Symbol();
   return O.set(e, []), R.set(e, s), { get: /* @__PURE__ */ l(() => R.get(e), "get"), set: /* @__PURE__ */ l((p) => {
     let u = R.get(e), m = de(p) ? p(u) : p;
     m !== u && (R.set(e, m), O.get(e)?.forEach((x) => {
-      F.get(x)?.(), F.set(x, x(m));
+      D.get(x)?.(), D.set(x, x(m));
     }));
   }, "set"), subscribe: /* @__PURE__ */ l((p) => (O.get(e)?.push(p), () => {
     let u = O.get(e);
@@ -55,10 +55,10 @@ F = /* @__PURE__ */ new Map(), T = /* @__PURE__ */ l((s) => {
     );
   }), "subscribe"), teardown: /* @__PURE__ */ l(() => {
     O.get(e)?.forEach((p) => {
-      F.get(p)?.(), F.delete(p);
+      D.get(p)?.(), D.delete(p);
     }), O.delete(e), R.delete(e);
   }, "teardown") };
-}, "useStore"), V = /* @__PURE__ */ l((s) => {
+}, "useStore"), Y = /* @__PURE__ */ l((s) => {
   let e = document.getElementById("storybook-root"), d = /* @__PURE__ */ new Map();
   for (let c of s) {
     let { priority: i = 0, selectable: g = !!c.menu } = c;
@@ -90,10 +90,10 @@ selectable: p, menu: u }]) => {
     width: E,
     height: M
   };
-}).sort((e, d) => d.width * d.height - e.width * e.height), "mapBoxes"), q = /* @__PURE__ */ l((s, e) => {
+}).sort((e, d) => d.width * d.height - e.width * e.height), "mapBoxes"), V = /* @__PURE__ */ l((s, e) => {
   let d = s.getBoundingClientRect(), { x: c, y: i } = e;
   return d?.top && d?.left && c >= d.left && c <= d.left + d.width && i >= d.top && i <= d.top + d.height;
-}, "isOverMenu"), z = /* @__PURE__ */ l((s, e, d) => {
+}, "isOverMenu"), q = /* @__PURE__ */ l((s, e, d) => {
   if (!d)
     return !1;
   let { left: c, top: i, width: g, height: p } = s;
@@ -113,7 +113,7 @@ selectable: p, menu: u }]) => {
     ...H !== c && { left: `${H}px` },
     ...v !== i && { top: `${v}px` }
   });
-}, "keepInViewport"), j = /* @__PURE__ */ l((s) => {
+}, "keepInViewport"), z = /* @__PURE__ */ l((s) => {
   window.HTMLElement.prototype.hasOwnProperty("showPopover") && s.showPopover();
 }, "showPopover"), se = /* @__PURE__ */ l((s) => {
   window.HTMLElement.prototype.hasOwnProperty("showPopover") && s.hidePopover();
@@ -175,8 +175,8 @@ var pe = /* @__PURE__ */ l(() => y(
     let o = i.getElementById(c);
     if (!o)
       return;
-    p.set(V(t));
-    let n = new MutationObserver(() => p.set(V(t)));
+    p.set(Y(t));
+    let n = new MutationObserver(() => p.set(Y(t)));
     return n.observe(o, { subtree: !0, childList: !0 }), () => {
       n.disconnect();
     };
@@ -184,8 +184,8 @@ var pe = /* @__PURE__ */ l(() => y(
     let o = /* @__PURE__ */ l(() => requestAnimationFrame(() => u.set(oe(t))), "updateBoxes"), n = new ResizeObserver(o);
     n.observe(i.body), Array.from(t.keys()).forEach((r) => n.observe(r));
     let a = Array.from(i.body.querySelectorAll("*")).filter((r) => {
-      let { overflow: f, overflowX: h, overflowY: b } = window.getComputedStyle(r);
-      return ["auto", "scroll"].some((L) => [f, h, b].includes(L));
+      let { overflow: h, overflowX: f, overflowY: b } = window.getComputedStyle(r);
+      return ["auto", "scroll"].some((L) => [h, f, b].includes(L));
     });
     return a.forEach((r) => r.addEventListener("scroll", o)), () => {
       n.disconnect(), a.forEach((r) => r.removeEventListener("scroll", o));
@@ -195,8 +195,8 @@ var pe = /* @__PURE__ */ l(() => y(
       u.set(
         (a) => a.map((r) => {
           if (o.includes(r.element)) {
-            let { top: f, left: h } = r.element.getBoundingClientRect();
-            return { ...r, top: f + window.scrollY, left: h + window.scrollX };
+            let { top: h, left: f } = r.element.getBoundingClientRect();
+            return { ...r, top: h + window.scrollY, left: f + window.scrollX };
           }
           return r;
         })
@@ -242,13 +242,13 @@ var pe = /* @__PURE__ */ l(() => y(
       return;
     let n = /* @__PURE__ */ l((a) => {
       requestAnimationFrame(() => {
-        let r = i.getElementById(e), f = { x: a.pageX, y: a.pageY };
-        if (r && !q(r, f)) {
-          let h = o.filter((b) => {
+        let r = i.getElementById(e), h = { x: a.pageX, y: a.pageY };
+        if (r && !V(r, h)) {
+          let f = o.filter((b) => {
             let L = C.get(b.element);
-            return z(b, L, f);
+            return q(b, L, h);
           });
-          m.set(h.length ? f : void 0), E.set(h);
+          m.set(f.length ? h : void 0), E.set(f);
         }
       });
     }, "onClick");
@@ -256,22 +256,22 @@ var pe = /* @__PURE__ */ l(() => y(
   });
   let W = /* @__PURE__ */ l(() => {
     let t = i.getElementById(e), o = x.get();
-    !o || t && q(t, o) || M.set((n) => {
+    !o || t && V(t, o) || M.set((n) => {
       let a = u.get().filter((b) => {
         let L = C.get(b.element);
-        return z(b, L, o);
-      }), r = n.filter((b) => a.includes(b)), f = a.filter((b) => !n.includes(b)), h = n.length - r.length;
-      return f.length || h ? [...r, ...f] : n;
+        return q(b, L, o);
+      }), r = n.filter((b) => a.includes(b)), h = a.filter((b) => !n.includes(b)), f = n.length - r.length;
+      return h.length || f ? [...r, ...h] : n;
     });
   }, "updateHovered");
   x.subscribe(W), u.subscribe(W);
   let k = /* @__PURE__ */ l(() => {
     let t = w.get(), o = t ? [t] : E.get(), n = o.length === 1 ? o[0] : v.get(), a = m.get() !== void 0;
     u.get().forEach((r) => {
-      let f = C.get(r.element);
-      if (f) {
-        let h = n === r, b = a ? n ? h : o.includes(r) : M.get()?.includes(r);
-        Object.assign(f.style, {
+      let h = C.get(r.element);
+      if (h) {
+        let f = n === r, b = a ? n ? f : o.includes(r) : M.get()?.includes(r);
+        Object.assign(h.style, {
           animation: "none",
           background: "transparent",
           border: "none",
@@ -280,9 +280,9 @@ var pe = /* @__PURE__ */ l(() => y(
           outlineOffset: "0px",
           ...r.styles,
           ...b ? r.hoverStyles : {},
-          ...h ? r.focusStyles : {},
+          ...f ? r.focusStyles : {},
           position: getComputedStyle(r.element).position === "fixed" ? "fixed" : "absolute",
-          zIndex: Y - 10,
+          zIndex: P - 10,
           top: `${r.top}px`,
           left: `${r.left}px`,
           width: `${r.width}px`,
@@ -291,7 +291,7 @@ var pe = /* @__PURE__ */ l(() => y(
           padding: 0,
           cursor: r.selectable ? "pointer" : "default",
           pointerEvents: r.selectable ? "auto" : "none"
-        }), j(f);
+        }), z(h);
       }
     });
   }, "updateBoxStyles");
@@ -309,7 +309,7 @@ var pe = /* @__PURE__ */ l(() => y(
           `
             #${e} {
               position: absolute;
-              z-index: ${Y};
+              z-index: ${P};
               width: 300px;
               padding: 0px;
               margin: 15px 0 0 0;
@@ -406,33 +406,33 @@ ue", Helvetica, Arial, sans-serif;
         "ul",
         { class: "element-list" },
         n.map((r) => {
-          let f = r.menu?.filter(
+          let h = r.menu?.filter(
             (B) => !B.selectors || B.selectors.some((S) => r.selectors.includes(S))
-          ), h = n.length > 1 && !!f?.length, b = h ? {
+          ), f = n.length > 1 && !!h?.length, b = f ? {
             class: "selectable",
             onClick: /* @__PURE__ */ l(() => w.set(r), "onClick"),
             onMouseEnter: /* @__PURE__ */ l(() => v.set(r), "onMouseEnter"),
             onMouseLeave: /* @__PURE__ */ l(() => v.set(void 0), "onMouseLeave")
-          } : o ? { class: "selected", onClick: /* @__PURE__ */ l(() => w.set(void 0), "onClick") } : {}, L = h || o;
+          } : o ? { class: "selected", onClick: /* @__PURE__ */ l(() => w.set(void 0), "onClick") } : {}, L = f || o;
           return y("li", b, [
             y(L ? "button" : "div", L ? { type: "button" } : {}, [
               o ? pe() : null,
               y("code", {}, [r.element.outerHTML]),
-              h ? ge() : null
+              f ? ge() : null
             ])
           ]);
         })
       )
     )), w.get() || E.get().length === 1) {
-      let r = w.get() || E.get()[0], f = r.menu?.filter(
-        (h) => !h.selectors || h.selectors.some((b) => r.selectors.includes(b))
+      let r = w.get() || E.get()[0], h = r.menu?.filter(
+        (f) => !f.selectors || f.selectors.some((b) => r.selectors.includes(b))
       );
-      f?.length && t.appendChild(
+      h?.length && t.appendChild(
         y(
           "ul",
           { class: "menu-list" },
-          f.map(({ id: h, title: b, description: L, clickEvent: B }) => {
-            let S = B && (() => s.emit(B, h, ie(r)));
+          h.map(({ id: f, title: b, description: L, clickEvent: B }) => {
+            let S = B && (() => s.emit(B, f, ie(r)));
             return y("li", {}, [
               y(
                 S ? "button" : "div",
@@ -454,19 +454,19 @@ ue", Helvetica, Arial, sans-serif;
       display: "block",
       left: `${t.style.position === "fixed" ? a.x - window.scrollX : a.x}px`,
       top: `${t.style.position === "fixed" ? a.y - window.scrollY : a.y}px`
-    }), j(t), requestAnimationFrame(() => ne(t, a, { topOffset: 15, centered: !0 }))) : (se(t), Object.assign(t.style, { display: "none" }));
+    }), z(t), requestAnimationFrame(() => ne(t, a, { topOffset: 15, centered: !0 }))) : (se(t), Object.assign(t.style, { display: "none" }));
   }, "renderMenu");
   E.subscribe(Z), w.subscribe(Z);
   let K = /* @__PURE__ */ l((t) => {
     let o = te(t);
     o.selectors?.length && g.set((n) => [...n, o]);
-  }, "addHighlight"), I = /* @__PURE__ */ l((t) => {
+  }, "addHighlight"), _ = /* @__PURE__ */ l((t) => {
     g.set((o) => o.filter((n) => n.id !== t));
   }, "removeHighlight"), A = /* @__PURE__ */ l(() => {
     g.set([]);
-  }, "clearHighlights"), N, J = /* @__PURE__ */ l((t, o) => {
+  }, "clearHighlights"), I, U = /* @__PURE__ */ l((t, o) => {
     let n = "scrollIntoView-highlight";
-    clearTimeout(N), I(n);
+    clearTimeout(I), _(n);
     let a = i.querySelector(t);
     if (!a) {
       console.warn(`Cannot scroll into view: ${t} not found`);
@@ -474,8 +474,8 @@ ue", Helvetica, Arial, sans-serif;
     }
     a.scrollIntoView({ behavior: "smooth", block: "center", ...o });
     let r = `kf-${Math.random().toString(36).substring(2, 15)}`;
-    g.set((f) => [
-      ...f,
+    g.set((h) => [
+      ...h,
       {
         id: n,
         priority: 1e3,
@@ -495,13 +495,13 @@ ue", Helvetica, Arial, sans-serif;
           100% { outline: 2px solid #1EA7FD00; }
         }`
       }
-    ]), N = setTimeout(() => I(n), 3500);
-  }, "scrollIntoView"), U = /* @__PURE__ */ l((t) => {
+    ]), I = setTimeout(() => _(n), 3500);
+  }, "scrollIntoView"), J = /* @__PURE__ */ l((t) => {
     requestAnimationFrame(() => x.set({ x: t.pageX, y: t.pageY }));
   }, "onMouseMove");
-  i.body.addEventListener("mousemove", U), s.on(G, K), s.on(ee, I), s.on(X, A), s.on(re, A), s.on(P, J);
+  i.body.addEventListener("mousemove", J), s.on(N, K), s.on(ee, _), s.on(G, A), s.on(re, A), s.on(X, U);
   let Q = /* @__PURE__ */ l(() => {
-    clearTimeout(N), i.body.removeEventListener("mousemove", U), s.off(G, K), s.off(X, A), s.off(re, A), s.off(P, J), g.teardown(), p.teardown(),
+    clearTimeout(I), i.body.removeEventListener("mousemove", J), s.off(N, K), s.off(G, A), s.off(re, A), s.off(X, U), g.teardown(), p.teardown(),
     u.teardown(), E.teardown(), m.teardown(), x.teardown(), M.teardown(), v.teardown(), w.teardown(), $.forEach((t) => t.remove()), C.forEach(
     (t) => t.remove()), i.getElementById(e)?.remove(), i.getElementById(d)?.remove();
   }, "teardown");
@@ -509,8 +509,8 @@ ue", Helvetica, Arial, sans-serif;
 }, "useHighlights");
 
 // src/highlight/preview.ts
-_ && _.ready && _.ready().then(() => {
-  let s = _.getChannel();
+globalThis?.FEATURES?.highlight && j?.ready && j.ready().then(() => {
+  let s = j.getChannel();
   le({ channel: s });
 });
 var Te = /* @__PURE__ */ l(() => ue({}), "default");

package/dist/manager/globals-runtime.js

@@ -52792,7 +52792,7 @@ It();
 var DX = D(ri(), 1), $n = D(LX(), 1);
 
 // src/manager-api/version.ts
-var kX = "9.0.0-beta.2";
+var kX = "9.0.0-beta.4";
 
 // src/manager-api/modules/versions.ts
 var { VERSIONCHECK: iLe } = Z, qX = (0, DX.default)(1)(() => {

package/dist/manager-api/index.cjs

@@ -10616,7 +10616,7 @@ k(cr, {
 var ut = require("@storybook/global"), Qo = B(Bt(), 1), F = B(require("semver"), 1);
 
 // src/manager-api/version.ts
-var Jo = "9.0.0-beta.2";
+var Jo = "9.0.0-beta.4";
 
 // src/manager-api/modules/versions.ts
 var { VERSIONCHECK: Jn } = ut.global, Xo = (0, Qo.default)(1)(() => {

package/dist/manager-api/index.js

@@ -3159,7 +3159,7 @@ import { global as Gt } from "@storybook/global";
 import U from "semver";
 
 // src/manager-api/version.ts
-var v0 = "9.0.0-beta.2";
+var v0 = "9.0.0-beta.4";
 
 // src/manager-api/modules/versions.ts
 var { VERSIONCHECK: Wo } = Gt, g0 = (0, y0.default)(1)(() => {