storybook 9.1.0-alpha.3 → 9.1.0-alpha.4

package/dist/measure/preview.js

@@ -2,7 +2,7 @@ var it = Object.defineProperty;
 var r = (e, t) => it(e, "name", { value: t, configurable: !0 });
 
 // src/measure/preview.ts
-import { definePreview as St } from "storybook/preview-api";
+import { definePreviewAddon as St } from "storybook/internal/csf";
 
 // src/measure/constants.ts
 var C = "storybook/measure-addon", Mt = `${C}/tool`, P = "measureEnabled", xt = {
@@ -91,19 +91,19 @@ function X(e, { x: t, y: o, w: i, h: n, r: l }) {
   i, o + n, l), e.arcTo(t + i, o + n, t, o + n, l), e.arcTo(t, o + n, t, o, l), e.arcTo(t, o, t + i, o, l), e.closePath();
 }
 r(X, "roundedRect");
-function at(e, { padding: t, border: o, width: i, height: n, top: l, left: a }) {
-  let s = i - o.left - o.right - t.left - t.right, f = n - t.top - t.bottom - o.top - o.bottom, c = a + o.left + t.left, u = l + o.top + t.top;
-  return e === "top" ? c += s / 2 : e === "right" ? (c += s, u += f / 2) : e === "bottom" ? (c += s / 2, u += f) : e === "left" ? u += f / 2 :
-  e === "center" && (c += s / 2, u += f / 2), { x: c, y: u };
-}
-r(at, "positionCoordinate");
-function st(e, t, { margin: o, border: i, padding: n }, l, a) {
-  let s = /* @__PURE__ */ r((h) => 0, "shift"), f = 0, c = 0, u = a ? 1 : 0.5, p = a ? l * 2 : 0;
-  return e === "padding" ? s = /* @__PURE__ */ r((h) => n[h] * u + p, "shift") : e === "border" ? s = /* @__PURE__ */ r((h) => n[h] + i[h] *
-  u + p, "shift") : e === "margin" && (s = /* @__PURE__ */ r((h) => n[h] + i[h] + o[h] * u + p, "shift")), t === "top" ? c = -s("top") : t ===
-  "right" ? f = s("right") : t === "bottom" ? c = s("bottom") : t === "left" && (f = -s("left")), { offsetX: f, offsetY: c };
-}
-r(st, "offset");
+function st(e, { padding: t, border: o, width: i, height: n, top: l, left: s }) {
+  let a = i - o.left - o.right - t.left - t.right, f = n - t.top - t.bottom - o.top - o.bottom, c = s + o.left + t.left, p = l + o.top + t.top;
+  return e === "top" ? c += a / 2 : e === "right" ? (c += a, p += f / 2) : e === "bottom" ? (c += a / 2, p += f) : e === "left" ? p += f / 2 :
+  e === "center" && (c += a / 2, p += f / 2), { x: c, y: p };
+}
+r(st, "positionCoordinate");
+function at(e, t, { margin: o, border: i, padding: n }, l, s) {
+  let a = /* @__PURE__ */ r((u) => 0, "shift"), f = 0, c = 0, p = s ? 1 : 0.5, d = s ? l * 2 : 0;
+  return e === "padding" ? a = /* @__PURE__ */ r((u) => n[u] * p + d, "shift") : e === "border" ? a = /* @__PURE__ */ r((u) => n[u] + i[u] *
+  p + d, "shift") : e === "margin" && (a = /* @__PURE__ */ r((u) => n[u] + i[u] + o[u] * p + d, "shift")), t === "top" ? c = -a("top") : t ===
+  "right" ? f = a("right") : t === "bottom" ? c = a("bottom") : t === "left" && (f = -a("left")), { offsetX: f, offsetY: c };
+}
+r(at, "offset");
 function ft(e, t) {
   return Math.abs(e.x - t.x) < Math.abs(e.w + t.w) / 2 && Math.abs(e.y - t.y) < Math.abs(e.h + t.h) / 2;
 }
@@ -113,10 +113,10 @@ function ct(e, t, o) {
   "left" && (t.x = o.x - o.w / 2 - b - t.w / 2), { x: t.x, y: t.y };
 }
 r(ct, "overlapAdjustment");
-function $(e, t, { x: o, y: i, w: n, h: l }, a) {
+function $(e, t, { x: o, y: i, w: n, h: l }, s) {
   return X(e, { x: o, y: i, w: n, h: l, r: 3 }), e.fillStyle = `${w[t]}dd`, e.fill(), e.strokeStyle = w[t], e.stroke(), e.fillStyle = w.text,
-  e.fillText(a, o, i), X(e, { x: o, y: i, w: n, h: l, r: 3 }), e.fillStyle = `${w[t]}dd`, e.fill(), e.strokeStyle = w[t], e.stroke(), e.fillStyle =
-  w.text, e.fillText(a, o, i), { x: o, y: i, w: n, h: l };
+  e.fillText(s, o, i), X(e, { x: o, y: i, w: n, h: l, r: 3 }), e.fillStyle = `${w[t]}dd`, e.fill(), e.strokeStyle = w[t], e.stroke(), e.fillStyle =
+  w.text, e.fillText(s, o, i), { x: o, y: i, w: n, h: l };
 }
 r($, "textWithRect");
 function N(e, t) {
@@ -125,44 +125,44 @@ function N(e, t) {
   return { w: n, h: l };
 }
 r(N, "configureText");
-function mt(e, t, { type: o, position: i = "center", text: n }, l, a = !1) {
-  let { x: s, y: f } = at(i, t), { offsetX: c, offsetY: u } = st(o, i, t, b + 1, a);
-  s += c, f += u;
-  let { w: p, h } = N(e, n);
-  if (l && ft({ x: s, y: f, w: p, h }, l)) {
-    let S = ct(i, { x: s, y: f, w: p, h }, l);
-    s = S.x, f = S.y;
+function mt(e, t, { type: o, position: i = "center", text: n }, l, s = !1) {
+  let { x: a, y: f } = st(i, t), { offsetX: c, offsetY: p } = at(o, i, t, b + 1, s);
+  a += c, f += p;
+  let { w: d, h: u } = N(e, n);
+  if (l && ft({ x: a, y: f, w: d, h: u }, l)) {
+    let S = ct(i, { x: a, y: f, w: d, h: u }, l);
+    a = S.x, f = S.y;
   }
-  return $(e, o, { x: s, y: f, w: p, h }, n);
+  return $(e, o, { x: a, y: f, w: d, h: u }, n);
 }
 r(mt, "drawLabel");
-function ut(e, { w: t, h: o }) {
+function pt(e, { w: t, h: o }) {
   let i = t * 0.5 + b, n = o * 0.5 + b;
   return {
     offsetX: (e.x === "left" ? -1 : 1) * i,
     offsetY: (e.y === "top" ? -1 : 1) * n
   };
 }
-r(ut, "floatingOffset");
-function ht(e, t, { type: o, text: i }) {
-  let { floatingAlignment: n, extremities: l } = t, a = l[n.x], s = l[n.y], { w: f, h: c } = N(e, i), { offsetX: u, offsetY: p } = ut(n, {
+r(pt, "floatingOffset");
+function ut(e, t, { type: o, text: i }) {
+  let { floatingAlignment: n, extremities: l } = t, s = l[n.x], a = l[n.y], { w: f, h: c } = N(e, i), { offsetX: p, offsetY: d } = pt(n, {
     w: f,
     h: c
   });
-  return a += u, s += p, $(e, o, { x: a, y: s, w: f, h: c }, i);
+  return s += p, a += d, $(e, o, { x: s, y: a, w: f, h: c }, i);
 }
-r(ht, "drawFloatingLabel");
-function y(e, t, o, i) {
+r(ut, "drawFloatingLabel");
+function E(e, t, o, i) {
   let n = [];
-  o.forEach((l, a) => {
-    let s = i && l.position === "center" ? ht(e, t, l) : mt(e, t, l, n[a - 1], i);
-    n[a] = s;
+  o.forEach((l, s) => {
+    let a = i && l.position === "center" ? ut(e, t, l) : mt(e, t, l, n[s - 1], i);
+    n[s] = a;
   });
 }
-r(y, "drawStack");
+r(E, "drawStack");
 function O(e, t, o, i) {
-  let n = o.reduce((l, a) => (Object.prototype.hasOwnProperty.call(l, a.position) || (l[a.position] = []), l[a.position]?.push(a), l), {});
-  n.top && y(e, t, n.top, i), n.right && y(e, t, n.right, i), n.bottom && y(e, t, n.bottom, i), n.left && y(e, t, n.left, i), n.center && y(
+  let n = o.reduce((l, s) => (Object.prototype.hasOwnProperty.call(l, s.position) || (l[s.position] = []), l[s.position]?.push(s), l), {});
+  n.top && E(e, t, n.top, i), n.right && E(e, t, n.right, i), n.bottom && E(e, t, n.bottom, i), n.left && E(e, t, n.left, i), n.center && E(
   e, t, n.center, i);
 }
 r(O, "labelStacks");
@@ -174,19 +174,19 @@ var M = {
   padding: "#93c47d8c",
   content: "#6fa8dca8"
 }, I = 30;
-function d(e) {
+function h(e) {
   return parseInt(e.replace("px", ""), 10);
 }
-r(d, "pxToNumber");
-function L(e) {
+r(h, "pxToNumber");
+function y(e) {
   return Number.isInteger(e) ? e : e.toFixed(2);
 }
-r(L, "round");
+r(y, "round");
 function k(e) {
   return e.filter((t) => t.text !== 0 && t.text !== "0");
 }
 r(k, "filterZeroValues");
-function pt(e) {
+function dt(e) {
   let t = {
     top: g.window.scrollY,
     bottom: g.window.scrollY + g.window.innerHeight,
@@ -203,14 +203,14 @@ function pt(e) {
     y: o.top > o.bottom ? "top" : "bottom"
   };
 }
-r(pt, "floatingAlignment");
-function dt(e) {
-  let t = g.getComputedStyle(e), { top: o, left: i, right: n, bottom: l, width: a, height: s } = e.getBoundingClientRect(), {
+r(dt, "floatingAlignment");
+function ht(e) {
+  let t = g.getComputedStyle(e), { top: o, left: i, right: n, bottom: l, width: s, height: a } = e.getBoundingClientRect(), {
     marginTop: f,
     marginBottom: c,
-    marginLeft: u,
-    marginRight: p,
-    paddingTop: h,
+    marginLeft: p,
+    marginRight: d,
+    paddingTop: u,
     paddingBottom: S,
     paddingLeft: K,
     paddingRight: Z,
@@ -220,85 +220,85 @@ function dt(e) {
     borderRightWidth: et
   } = t;
   o = o + g.window.scrollY, i = i + g.window.scrollX, l = l + g.window.scrollY, n = n + g.window.scrollX;
-  let E = {
-    top: d(f),
-    bottom: d(c),
-    left: d(u),
-    right: d(p)
+  let L = {
+    top: h(f),
+    bottom: h(c),
+    left: h(p),
+    right: h(d)
   }, ot = {
-    top: d(h),
-    bottom: d(S),
-    left: d(K),
-    right: d(Z)
+    top: h(u),
+    bottom: h(S),
+    left: h(K),
+    right: h(Z)
   }, nt = {
-    top: d(J),
-    bottom: d(Q),
-    left: d(tt),
-    right: d(et)
+    top: h(J),
+    bottom: h(Q),
+    left: h(tt),
+    right: h(et)
   }, A = {
-    top: o - E.top,
-    bottom: l + E.bottom,
-    left: i - E.left,
-    right: n + E.right
+    top: o - L.top,
+    bottom: l + L.bottom,
+    left: i - L.left,
+    right: n + L.right
   };
   return {
-    margin: E,
+    margin: L,
     padding: ot,
     border: nt,
     top: o,
     left: i,
     bottom: l,
     right: n,
-    width: a,
-    height: s,
+    width: s,
+    height: a,
     extremities: A,
-    floatingAlignment: pt(A)
+    floatingAlignment: dt(A)
   };
 }
-r(dt, "measureElement");
-function gt(e, { margin: t, width: o, height: i, top: n, left: l, bottom: a, right: s }) {
+r(ht, "measureElement");
+function gt(e, { margin: t, width: o, height: i, top: n, left: l, bottom: s, right: a }) {
   let f = i + t.bottom + t.top;
-  e.fillStyle = M.margin, e.fillRect(l, n - t.top, o, t.top), e.fillRect(s, n - t.top, t.right, f), e.fillRect(l, a, o, t.bottom), e.fillRect(
+  e.fillStyle = M.margin, e.fillRect(l, n - t.top, o, t.top), e.fillRect(a, n - t.top, t.right, f), e.fillRect(l, s, o, t.bottom), e.fillRect(
   l - t.left, n - t.top, t.left, f);
   let c = [
     {
       type: "margin",
-      text: L(t.top),
+      text: y(t.top),
       position: "top"
     },
     {
       type: "margin",
-      text: L(t.right),
+      text: y(t.right),
       position: "right"
     },
     {
       type: "margin",
-      text: L(t.bottom),
+      text: y(t.bottom),
       position: "bottom"
     },
     {
       type: "margin",
-      text: L(t.left),
+      text: y(t.left),
       position: "left"
     }
   ];
   return k(c);
 }
 r(gt, "drawMargin");
-function bt(e, { padding: t, border: o, width: i, height: n, top: l, left: a, bottom: s, right: f }) {
-  let c = i - o.left - o.right, u = n - t.top - t.bottom - o.top - o.bottom;
-  e.fillStyle = M.padding, e.fillRect(a + o.left, l + o.top, c, t.top), e.fillRect(
+function bt(e, { padding: t, border: o, width: i, height: n, top: l, left: s, bottom: a, right: f }) {
+  let c = i - o.left - o.right, p = n - t.top - t.bottom - o.top - o.bottom;
+  e.fillStyle = M.padding, e.fillRect(s + o.left, l + o.top, c, t.top), e.fillRect(
     f - t.right - o.right,
     l + t.top + o.top,
     t.right,
-    u
+    p
   ), e.fillRect(
-    a + o.left,
-    s - t.bottom - o.bottom,
+    s + o.left,
+    a - t.bottom - o.bottom,
     c,
     t.bottom
-  ), e.fillRect(a + o.left, l + t.top + o.top, t.left, u);
-  let p = [
+  ), e.fillRect(s + o.left, l + t.top + o.top, t.left, p);
+  let d = [
     {
       type: "padding",
       text: t.top,
@@ -320,13 +320,13 @@ function bt(e, { padding: t, border: o, width: i, height: n, top: l, left: a, bo
       position: "left"
     }
   ];
-  return k(p);
+  return k(d);
 }
 r(bt, "drawPadding");
-function wt(e, { border: t, width: o, height: i, top: n, left: l, bottom: a, right: s }) {
+function wt(e, { border: t, width: o, height: i, top: n, left: l, bottom: s, right: a }) {
   let f = i - t.top - t.bottom;
-  e.fillStyle = M.border, e.fillRect(l, n, o, t.top), e.fillRect(l, a - t.bottom, o, t.bottom), e.fillRect(l, n + t.top, t.left, f), e.fillRect(
-  s - t.right, n + t.top, t.right, f);
+  e.fillStyle = M.border, e.fillRect(l, n, o, t.top), e.fillRect(l, s - t.bottom, o, t.bottom), e.fillRect(l, n + t.top, t.left, f), e.fillRect(
+  a - t.right, n + t.top, t.right, f);
   let c = [
     {
       type: "border",
@@ -352,48 +352,48 @@ function wt(e, { border: t, width: o, height: i, top: n, left: l, bottom: a, rig
   return k(c);
 }
 r(wt, "drawBorder");
-function Lt(e, { padding: t, border: o, width: i, height: n, top: l, left: a }) {
-  let s = i - o.left - o.right - t.left - t.right, f = n - t.top - t.bottom - o.top - o.bottom;
+function yt(e, { padding: t, border: o, width: i, height: n, top: l, left: s }) {
+  let a = i - o.left - o.right - t.left - t.right, f = n - t.top - t.bottom - o.top - o.bottom;
   return e.fillStyle = M.content, e.fillRect(
-    a + o.left + t.left,
+    s + o.left + t.left,
     l + o.top + t.top,
-    s,
+    a,
     f
   ), [
     {
       type: "content",
       position: "center",
-      text: `${L(s)} x ${L(f)}`
+      text: `${y(a)} x ${y(f)}`
     }
   ];
 }
-r(Lt, "drawContent");
-function Et(e) {
+r(yt, "drawContent");
+function Lt(e) {
   return (t) => {
     if (e && t) {
-      let o = dt(e), i = gt(t, o), n = bt(t, o), l = wt(t, o), a = Lt(t, o), s = o.width <= I * 3 || o.height <= I;
+      let o = ht(e), i = gt(t, o), n = bt(t, o), l = wt(t, o), s = yt(t, o), a = o.width <= I * 3 || o.height <= I;
       O(
         t,
         o,
-        [...a, ...n, ...l, ...i],
-        s
+        [...s, ...n, ...l, ...i],
+        a
       );
     }
   };
 }
-r(Et, "drawBoxModel");
+r(Lt, "drawBoxModel");
 function _(e) {
-  Y(Et(e));
+  Y(Lt(e));
 }
 r(_, "drawSelectedElement");
 
 // src/measure/util.ts
-import { global as yt } from "@storybook/global";
+import { global as Et } from "@storybook/global";
 var q = /* @__PURE__ */ r((e, t) => {
-  let o = yt.document.elementFromPoint(e, t), i = /* @__PURE__ */ r((l) => {
+  let o = Et.document.elementFromPoint(e, t), i = /* @__PURE__ */ r((l) => {
     if (l && l.shadowRoot) {
-      let a = l.shadowRoot.elementFromPoint(e, t);
-      return l.isEqualNode(a) ? l : a.shadowRoot ? i(a) : a;
+      let s = l.shadowRoot.elementFromPoint(e, t);
+      return l.isEqualNode(s) ? l : s.shadowRoot ? i(s) : s;
     }
     return l;
   }, "crawlShadows");