storybook 9.1.0-alpha.2 → 9.1.0-alpha.4

package/dist/csf-tools/index.cjs

@@ -362,7 +362,8 @@ var D = /* @__PURE__ */ f((s, e) => {
               let x;
               if (c.types.isVariableDeclarator(l) ? x = c.types.isTSAsExpression(l.init) || c.types.isTSSatisfiesExpression(l.init) ? l.init.
               expression : l.init : x = l, c.types.isCallExpression(x) && c.types.isMemberExpression(x.callee) && c.types.isIdentifier(x.callee.
-              property) && x.callee.property.name === "story" && (p = !0, x = x.arguments[0]), e._metaIsFactory && !p)
+              property) && (x.callee.property.name === "story" || x.callee.property.name === "extend") && (p = !0, x = x.arguments[0]), e._metaIsFactory &&
+              !p)
                 throw new M(
                   "expected factory story",
                   x,

package/dist/csf-tools/index.js

@@ -340,8 +340,8 @@ var v = /* @__PURE__ */ f((s, e) => {
               ) : e._storyAnnotations[d] = {};
               let x;
               if (c.isVariableDeclarator(l) ? x = c.isTSAsExpression(l.init) || c.isTSSatisfiesExpression(l.init) ? l.init.expression : l.init :
-              x = l, c.isCallExpression(x) && c.isMemberExpression(x.callee) && c.isIdentifier(x.callee.property) && x.callee.property.name ===
-              "story" && (p = !0, x = x.arguments[0]), e._metaIsFactory && !p)
+              x = l, c.isCallExpression(x) && c.isMemberExpression(x.callee) && c.isIdentifier(x.callee.property) && (x.callee.property.name ===
+              "story" || x.callee.property.name === "extend") && (p = !0, x = x.arguments[0]), e._metaIsFactory && !p)
                 throw new B(
                   "expected factory story",
                   x,

package/dist/highlight/index.cjs

@@ -1,28 +1,28 @@
 "use strict";
 var r = Object.defineProperty;
-var G = Object.getOwnPropertyDescriptor;
+var i = Object.getOwnPropertyDescriptor;
 var n = Object.getOwnPropertyNames;
 var T = Object.prototype.hasOwnProperty;
 var L = (o, t) => {
-  for (var H in t)
-    r(o, H, { get: t[H], enumerable: !0 });
-}, c = (o, t, H, s) => {
+  for (var I in t)
+    r(o, I, { get: t[I], enumerable: !0 });
+}, c = (o, t, I, E) => {
   if (t && typeof t == "object" || typeof t == "function")
-    for (let e of n(t))
-      !T.call(o, e) && e !== H && r(o, e, { get: () => t[e], enumerable: !(s = G(t, e)) || s.enumerable });
+    for (let H of n(t))
+      !T.call(o, H) && H !== I && r(o, H, { get: () => t[H], enumerable: !(E = i(t, H)) || E.enumerable });
   return o;
 };
-var h = (o) => c(r({}, "__esModule", { value: !0 }), o);
+var x = (o) => c(r({}, "__esModule", { value: !0 }), o);
 
 // src/highlight/index.ts
-var x = {};
-L(x, {
-  HIGHLIGHT: () => E,
-  REMOVE_HIGHLIGHT: () => _,
-  RESET_HIGHLIGHT: () => i,
-  SCROLL_INTO_VIEW: () => p
+var O = {};
+L(O, {
+  HIGHLIGHT: () => _,
+  REMOVE_HIGHLIGHT: () => s,
+  RESET_HIGHLIGHT: () => p,
+  SCROLL_INTO_VIEW: () => G
 });
-module.exports = h(x);
+module.exports = x(O);
 
 // src/highlight/constants.ts
-var I = "storybook/highlight", E = `${I}/add`, _ = `${I}/remove`, i = `${I}/reset`, p = `${I}/scroll-into-view`;
+var e = "storybook/highlight", _ = `${e}/add`, s = `${e}/remove`, p = `${e}/reset`, G = `${e}/scroll-into-view`;

package/dist/highlight/index.d.ts

@@ -11,17 +11,6 @@ declare const iconPaths: {
 };
 type IconName = keyof typeof iconPaths;
 
-interface HighlightParameters {
-    /**
-     * Highlight configuration
-     *
-     * @see https://storybook.js.org/docs/essentials/highlight#parameters
-     */
-    highlight: {
-        /** Remove the addon panel and disable the addon's behavior */
-        disable?: boolean;
-    };
-}
 interface HighlightMenuItem {
     /** Unique identifier for the menu item */
     id: string;
@@ -70,4 +59,4 @@ interface ClickEventDetails {
     };
 }
 
-export { type ClickEventDetails, HIGHLIGHT, type HighlightMenuItem, type HighlightOptions, type HighlightParameters, REMOVE_HIGHLIGHT, RESET_HIGHLIGHT, SCROLL_INTO_VIEW };
+export { type ClickEventDetails, HIGHLIGHT, type HighlightMenuItem, type HighlightOptions, REMOVE_HIGHLIGHT, RESET_HIGHLIGHT, SCROLL_INTO_VIEW };

package/dist/highlight/index.js

@@ -1,8 +1,8 @@
 // src/highlight/constants.ts
-var t = "storybook/highlight", o = `${t}/add`, e = `${t}/remove`, H = `${t}/reset`, I = `${t}/scroll-into-view`;
+var t = "storybook/highlight", o = `${t}/add`, H = `${t}/remove`, I = `${t}/reset`, e = `${t}/scroll-into-view`;
 export {
   o as HIGHLIGHT,
-  e as REMOVE_HIGHLIGHT,
-  H as RESET_HIGHLIGHT,
-  I as SCROLL_INTO_VIEW
+  H as REMOVE_HIGHLIGHT,
+  I as RESET_HIGHLIGHT,
+  e as SCROLL_INTO_VIEW
 };

package/dist/highlight/preview.cjs

@@ -1,36 +1,36 @@
 "use strict";
-var R = Object.defineProperty;
-var me = Object.getOwnPropertyDescriptor;
-var he = Object.getOwnPropertyNames;
-var ge = Object.prototype.hasOwnProperty;
-var d = (t, e) => R(t, "name", { value: e, configurable: !0 });
-var fe = (t, e) => {
+var _ = Object.defineProperty;
+var he = Object.getOwnPropertyDescriptor;
+var ge = Object.getOwnPropertyNames;
+var fe = Object.prototype.hasOwnProperty;
+var d = (t, e) => _(t, "name", { value: e, configurable: !0 });
+var ye = (t, e) => {
   for (var l in e)
-    R(t, l, { get: e[l], enumerable: !0 });
-}, ye = (t, e, l, c) => {
+    _(t, l, { get: e[l], enumerable: !0 });
+}, be = (t, e, l, c) => {
   if (e && typeof e == "object" || typeof e == "function")
-    for (let r of he(e))
-      !ge.call(t, r) && r !== l && R(t, r, { get: () => e[r], enumerable: !(c = me(e, r)) || c.enumerable });
+    for (let r of ge(e))
+      !fe.call(t, r) && r !== l && _(t, r, { get: () => e[r], enumerable: !(c = he(e, r)) || c.enumerable });
   return t;
 };
-var be = (t) => ye(R({}, "__esModule", { value: !0 }), t);
+var xe = (t) => be(_({}, "__esModule", { value: !0 }), t);
 
 // src/highlight/preview.ts
-var He = {};
-fe(He, {
-  default: () => ve
+var Me = {};
+ye(Me, {
+  default: () => He
 });
-module.exports = be(He);
-var B = require("storybook/preview-api");
+module.exports = xe(Me);
+var ae = require("storybook/internal/csf"), Z = require("storybook/preview-api");
 
 // src/highlight/useHighlights.ts
 var ce = require("storybook/internal/core-events");
 
 // src/highlight/constants.ts
-var D = "storybook/highlight", J = `${D}/add`, Q = `${D}/remove`, ee = `${D}/reset`, te = `${D}/scroll-into-view`, z = 2147483647, L = 28;
+var R = "storybook/highlight", J = `${R}/add`, Q = `${R}/remove`, ee = `${R}/reset`, te = `${R}/scroll-into-view`, G = 2147483647, T = 28;
 
 // src/highlight/icons.ts
-var P = {
+var z = {
   chevronLeft: [
     "M9.10355 10.1464C9.29882 10.3417 9.29882 10.6583 9.10355 10.8536C8.90829 11.0488 8.59171 11.0488 8.39645 10.8536L4.89645 7.35355C4.7011\
 8 7.15829 4.70118 6.84171 4.89645 6.64645L8.39645 3.14645C8.59171 2.95118 8.90829 2.95118 9.10355 3.14645C9.29882 3.34171 9.29882 3.65829 9.\
@@ -52,8 +52,8 @@ var P = {
 };
 
 // src/highlight/utils.ts
-var xe = "svg,path,rect,circle,line,polyline,polygon,ellipse,text".split(","), b = /* @__PURE__ */ d((t, e = {}, l) => {
-  let c = xe.includes(t) ? document.createElementNS("http://www.w3.org/2000/svg", t) : document.createElement(t);
+var Ee = "svg,path,rect,circle,line,polyline,polygon,ellipse,text".split(","), b = /* @__PURE__ */ d((t, e = {}, l) => {
+  let c = Ee.includes(t) ? document.createElementNS("http://www.w3.org/2000/svg", t) : document.createElement(t);
   return Object.entries(e).forEach(([r, p]) => {
     /[A-Z]/.test(r) ? (r === "onClick" && (c.addEventListener("click", p), c.addEventListener("keydown", (u) => {
       (u.key === "Enter" || u.key === " ") && (u.preventDefault(), p());
@@ -67,10 +67,10 @@ var xe = "svg,path,rect,circle,line,polyline,polygon,ellipse,text".split(","), b
         c.appendChild(document.createTextNode(String(r)));
       }
   }), c;
-}, "createElement"), k = /* @__PURE__ */ d((t) => P[t] && b(
+}, "createElement"), k = /* @__PURE__ */ d((t) => z[t] && b(
   "svg",
   { width: "14", height: "14", viewBox: "0 0 14 14", xmlns: "http://www.w3.org/2000/svg" },
-  P[t].map(
+  z[t].map(
     (e) => b("path", {
       fill: "currentColor",
       "fill-rule": "evenodd",
@@ -103,13 +103,13 @@ var xe = "svg,path,rect,circle,line,polyline,polygon,ellipse,text".split(","), b
     ...l,
     menu: Array.isArray(e) ? e.every(Array.isArray) ? e : [e] : void 0
   };
-}, "normalizeOptions"), Ee = /* @__PURE__ */ d((t) => t instanceof Function, "isFunction"), S = /* @__PURE__ */ new Map(), C = /* @__PURE__ */ new Map(),
-N = /* @__PURE__ */ new Map(), T = /* @__PURE__ */ d((t) => {
+}, "normalizeOptions"), we = /* @__PURE__ */ d((t) => t instanceof Function, "isFunction"), S = /* @__PURE__ */ new Map(), C = /* @__PURE__ */ new Map(),
+D = /* @__PURE__ */ new Map(), L = /* @__PURE__ */ d((t) => {
   let e = Symbol();
   return C.set(e, []), S.set(e, t), { get: /* @__PURE__ */ d(() => S.get(e), "get"), set: /* @__PURE__ */ d((u) => {
-    let m = S.get(e), f = Ee(u) ? u(m) : u;
+    let m = S.get(e), f = we(u) ? u(m) : u;
     f !== m && (S.set(e, f), C.get(e)?.forEach((E) => {
-      N.get(E)?.(), N.set(E, E(f));
+      D.get(E)?.(), D.set(E, E(f));
     }));
   }, "set"), subscribe: /* @__PURE__ */ d((u) => (C.get(e)?.push(u), () => {
     let m = C.get(e);
@@ -119,10 +119,10 @@ N = /* @__PURE__ */ new Map(), T = /* @__PURE__ */ d((t) => {
     );
   }), "subscribe"), teardown: /* @__PURE__ */ d(() => {
     C.get(e)?.forEach((u) => {
-      N.get(u)?.(), N.delete(u);
+      D.get(u)?.(), D.delete(u);
     }), C.delete(e), S.delete(e);
   }, "teardown") };
-}, "useStore"), X = /* @__PURE__ */ d((t) => {
+}, "useStore"), P = /* @__PURE__ */ d((t) => {
   let e = document.getElementById("storybook-root"), l = /* @__PURE__ */ new Map();
   for (let c of t) {
     let { priority: r = 0 } = c;
@@ -162,14 +162,14 @@ menu: u }]) => {
     width: E,
     height: w
   };
-}).sort((e, l) => l.width * l.height - e.width * e.height), "mapBoxes"), V = /* @__PURE__ */ d((t, e) => {
+}).sort((e, l) => l.width * l.height - e.width * e.height), "mapBoxes"), X = /* @__PURE__ */ d((t, e) => {
   let l = t.getBoundingClientRect(), { x: c, y: r } = e;
   return l?.top && l?.left && c >= l.left && c <= l.left + l.width && r >= l.top && r <= l.top + l.height;
-}, "isOverMenu"), Y = /* @__PURE__ */ d((t, e, l) => {
+}, "isOverMenu"), V = /* @__PURE__ */ d((t, e, l) => {
   if (!e || !l)
     return !1;
   let { left: c, top: r, width: p, height: u } = t;
-  u < L && (r = r - Math.round((L - u) / 2), u = L), p < L && (c = c - Math.round((L - p) / 2), p = L), e.style.position === "fixed" && (c +=
+  u < T && (r = r - Math.round((T - u) / 2), u = T), p < T && (c = c - Math.round((T - p) / 2), p = T), e.style.position === "fixed" && (c +=
   window.scrollX, r += window.scrollY);
   let { x: m, y: f } = l;
   return m >= c && m <= c + p && f >= r && f <= r + u;
@@ -186,7 +186,7 @@ menu: u }]) => {
     ...A !== c && { left: `${A}px` },
     ...I !== r && { top: `${I}px` }
   });
-}, "keepInViewport"), Z = /* @__PURE__ */ d((t) => {
+}, "keepInViewport"), Y = /* @__PURE__ */ d((t) => {
   window.HTMLElement.prototype.hasOwnProperty("showPopover") && t.showPopover();
 }, "showPopover"), ie = /* @__PURE__ */ d((t) => {
   window.HTMLElement.prototype.hasOwnProperty("showPopover") && t.hidePopover();
@@ -207,20 +207,20 @@ menu: u }]) => {
 }), "getEventDetails");
 
 // src/highlight/useHighlights.ts
-var g = "storybook-highlights-menu", le = "storybook-highlights-root", we = "storybook-root", de = /* @__PURE__ */ d((t) => {
+var g = "storybook-highlights-menu", le = "storybook-highlights-root", ve = "storybook-root", de = /* @__PURE__ */ d((t) => {
   if (globalThis.__STORYBOOK_HIGHLIGHT_INITIALIZED)
     return;
   globalThis.__STORYBOOK_HIGHLIGHT_INITIALIZED = !0;
-  let { document: e } = globalThis, l = T([]), c = T(/* @__PURE__ */ new Map()), r = T([]), p = T(), u = T(), m = T([]), f = T([]), E = T(),
-  w = T(), v = e.getElementById(le);
+  let { document: e } = globalThis, l = L([]), c = L(/* @__PURE__ */ new Map()), r = L([]), p = L(), u = L(), m = L([]), f = L([]), E = L(),
+  w = L(), v = e.getElementById(le);
   l.subscribe(() => {
     v || (v = b("div", { id: le }), e.body.appendChild(v));
   }), l.subscribe((s) => {
-    let o = e.getElementById(we);
+    let o = e.getElementById(ve);
     if (!o)
       return;
-    c.set(X(s));
-    let n = new MutationObserver(() => c.set(X(s)));
+    c.set(P(s));
+    let n = new MutationObserver(() => c.set(P(s)));
     return n.observe(o, { subtree: !0, childList: !0 }), () => {
       n.disconnect();
     };
@@ -289,10 +289,10 @@ var g = "storybook-highlights-menu", le = "storybook-highlights-root", we = "sto
     let n = /* @__PURE__ */ d((a) => {
       requestAnimationFrame(() => {
         let i = e.getElementById(g), h = { x: a.pageX, y: a.pageY };
-        if (i && !V(i, h)) {
+        if (i && !X(i, h)) {
           let x = o.filter((y) => {
             let M = H.get(y.element);
-            return Y(y, M, h);
+            return V(y, M, h);
           });
           p.set(x.length ? h : void 0), m.set(x);
         }
@@ -302,10 +302,10 @@ var g = "storybook-highlights-menu", le = "storybook-highlights-root", we = "sto
   });
   let A = /* @__PURE__ */ d(() => {
     let s = e.getElementById(g), o = u.get();
-    !o || s && V(s, o) || f.set((n) => {
+    !o || s && X(s, o) || f.set((n) => {
       let a = r.get().filter((y) => {
         let M = H.get(y.element);
-        return Y(y, M, o);
+        return V(y, M, o);
       }), i = n.filter((y) => a.includes(y)), h = a.filter((y) => !n.includes(y)), x = n.length - i.length;
       return h.length || x ? [...i, ...h] : n;
     });
@@ -328,7 +328,7 @@ var g = "storybook-highlights-menu", le = "storybook-highlights-root", we = "sto
           ...y ? i.hoverStyles : {},
           ...x ? i.focusStyles : {},
           position: getComputedStyle(i.element).position === "fixed" ? "fixed" : "absolute",
-          zIndex: z - 10,
+          zIndex: G - 10,
           top: `${i.top}px`,
           left: `${i.left}px`,
           width: `${i.width}px`,
@@ -344,11 +344,11 @@ var g = "storybook-highlights-menu", le = "storybook-highlights-root", we = "sto
         }), Object.assign(h.children[0].style, {
           width: "100%",
           height: "100%",
-          minHeight: `${L}px`,
-          minWidth: `${L}px`,
+          minHeight: `${T}px`,
+          minWidth: `${T}px`,
           boxSizing: "content-box",
           padding: h.style.outlineWidth || "0px"
-        }), Z(h);
+        }), Y(h);
       }
     });
   }, "updateBoxStyles");
@@ -366,7 +366,7 @@ var g = "storybook-highlights-menu", le = "storybook-highlights-root", we = "sto
           `
             #${g} {
               position: absolute;
-              z-index: ${z};
+              z-index: ${G};
               width: 300px;
               padding: 0px;
               margin: 15px 0 0 0;
@@ -471,7 +471,7 @@ ue", Helvetica, Arial, sans-serif;
         n.map((i) => {
           let h = n.length > 1 && !!i.menu?.some(
             (M) => M.some(
-              (O) => !O.selectors || O.selectors.some((_) => i.selectors.includes(_))
+              (O) => !O.selectors || O.selectors.some((B) => i.selectors.includes(B))
             )
           ), x = h ? {
             class: "selectable",
@@ -504,14 +504,14 @@ ue", Helvetica, Arial, sans-serif;
                 "ul",
                 { class: "menu-items" },
                 x.map(
-                  ({ id: y, title: M, description: O, iconLeft: _, iconRight: U, clickEvent: K }) => {
-                    let G = K && (() => t.emit(K, y, re(i)));
+                  ({ id: y, title: M, description: O, iconLeft: B, iconRight: U, clickEvent: K }) => {
+                    let F = K && (() => t.emit(K, y, re(i)));
                     return b("li", {}, [
                       b(
-                        G ? "button" : "div",
-                        G ? { class: "menu-item", type: "button", onClick: G } : { class: "menu-item" },
+                        F ? "button" : "div",
+                        F ? { class: "menu-item", type: "button", onClick: F } : { class: "menu-item" },
                         [
-                          _ ? k(_) : null,
+                          B ? k(B) : null,
                           b("div", { class: "menu-item-content" }, [
                             b(O ? "strong" : "span", {}, [M]),
                             O && b("span", {}, [O])
@@ -533,22 +533,22 @@ ue", Helvetica, Arial, sans-serif;
       display: "block",
       left: `${s.style.position === "fixed" ? a.x - window.scrollX : a.x}px`,
       top: `${s.style.position === "fixed" ? a.y - window.scrollY : a.y}px`
-    }), Z(s), requestAnimationFrame(() => se(s, a, { topOffset: 15, centered: !0 }))) : (ie(s), Object.assign(s.style, { display: "none" }));
+    }), Y(s), requestAnimationFrame(() => se(s, a, { topOffset: 15, centered: !0 }))) : (ie(s), Object.assign(s.style, { display: "none" }));
   }, "renderMenu");
   m.subscribe(j), w.subscribe(j);
-  let ae = /* @__PURE__ */ d((s) => {
+  let pe = /* @__PURE__ */ d((s) => {
     let o = oe(s);
     l.set((n) => {
       let a = o.id ? n.filter((i) => i.id !== o.id) : n;
       return o.selectors?.length ? [...a, o] : a;
     });
-  }, "addHighlight"), F = /* @__PURE__ */ d((s) => {
+  }, "addHighlight"), N = /* @__PURE__ */ d((s) => {
     s && l.set((o) => o.filter((n) => n.id !== s));
   }, "removeHighlight"), q = /* @__PURE__ */ d(() => {
     l.set([]), c.set(/* @__PURE__ */ new Map()), r.set([]), p.set(void 0), u.set(void 0), m.set([]), f.set([]), E.set(void 0), w.set(void 0);
-  }, "resetState"), W, pe = /* @__PURE__ */ d((s, o) => {
+  }, "resetState"), W, ue = /* @__PURE__ */ d((s, o) => {
     let n = "scrollIntoView-highlight";
-    clearTimeout(W), F(n);
+    clearTimeout(W), N(n);
     let a = e.querySelector(s);
     if (!a) {
       console.warn(`Cannot scroll into view: ${s} not found`);
@@ -576,15 +576,15 @@ ue", Helvetica, Arial, sans-serif;
           100% { outline: 2px solid #1EA7FD00; }
         }`
       }
-    ]), W = setTimeout(() => F(n), 3500);
-  }, "scrollIntoView"), ue = /* @__PURE__ */ d((s) => {
+    ]), W = setTimeout(() => N(n), 3500);
+  }, "scrollIntoView"), me = /* @__PURE__ */ d((s) => {
     requestAnimationFrame(() => u.set({ x: s.pageX, y: s.pageY }));
   }, "onMouseMove");
-  e.body.addEventListener("mousemove", ue), t.on(J, ae), t.on(Q, F), t.on(ee, q), t.on(te, pe), t.on(ce.STORY_RENDER_PHASE_CHANGED, ({ newPhase: s }) => {
+  e.body.addEventListener("mousemove", me), t.on(J, pe), t.on(Q, N), t.on(ee, q), t.on(te, ue), t.on(ce.STORY_RENDER_PHASE_CHANGED, ({ newPhase: s }) => {
     s === "loading" && q();
   });
 }, "useHighlights");
 
 // src/highlight/preview.ts
-globalThis?.FEATURES?.highlight && B.addons?.ready && B.addons.ready().then(de);
-var ve = /* @__PURE__ */ d(() => (0, B.definePreview)({}), "default");
+globalThis?.FEATURES?.highlight && Z.addons?.ready && Z.addons.ready().then(de);
+var He = /* @__PURE__ */ d(() => (0, ae.definePreviewAddon)({}), "default");