storybook 9.1.1 → 9.1.3

package/dist/core-server/presets/common-manager.js

@@ -2494,8 +2494,8 @@ e" : e === 9 ? t = "strike" : 29 < e && e < 38 || e === 39 || 89 < e && e < 98 ?
       var P = Eu(w), N;
       try {
         for (P.s(); !(N = P.n()).done; ) {
-          var U = N.value;
-          r("display", U);
+          var q = N.value;
+          r("display", q);
         }
       } catch (H) {
         P.e(H);
@@ -2917,7 +2917,7 @@ import { styled as $0 } from "storybook/theming";
 
 // ../addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx
 or();
-import W from "react";
+import V from "react";
 import { once as l0 } from "storybook/internal/client-logger";
 import { IconButton as c0, Link as p0, ResetWrapper as u0 } from "storybook/internal/components";
 import { includeConditionalArg as d0 } from "storybook/internal/csf";
@@ -4524,7 +4524,7 @@ var Dm = jt(Ks)({
   ), w = [...v, ...E], { window: P } = globalThis, N = km(async (H) => {
     let { createCopyToClipboardFunction: G } = await import("storybook/internal/components");
     G();
-  }, []), U = /* @__PURE__ */ a((H) => {
+  }, []), q = /* @__PURE__ */ a((H) => {
     let G = P.getSelection();
     G && G.type === "Range" || (H.preventDefault(), E.filter((Z) => Z.title === "Copied").length === 0 && N(f?.props.code ?? "").then(() => {
       S([
@@ -4562,7 +4562,7 @@ var Dm = jt(Ks)({
       }
     ),
     /* @__PURE__ */ Re.createElement(On.Provider, { value: { scale: h } }, /* @__PURE__ */ Re.createElement(Mm, { className: "docs-story", onCopyCapture: n &&
-    U }, /* @__PURE__ */ Re.createElement(
+    q }, /* @__PURE__ */ Re.createElement(
       Pm,
       {
         isColumn: t || !Array.isArray(o),
@@ -5086,7 +5086,7 @@ function zg(e = "", t = {}) {
           return (P === '"' || P === "'") && w.length >= 2 && w[w.length - 1] === P ? w.slice(1, -1) : w;
         }(h.slice(b + 1).trim()), E = Zs[x] || x;
         if (E === "ref") return y;
-        let S = y[E] = function(w, P, N, U) {
+        let S = y[E] = function(w, P, N, q) {
           return P === "style" ? function(H) {
             let G = [], Z = "", se = !1, ee = !1, pe = "";
             if (!H) return G;
@@ -5116,8 +5116,8 @@ function zg(e = "", t = {}) {
             }
             return G;
           }(N).reduce(function(H, [G, Z]) {
-            return H[G.replace(/(-[a-z])/g, (se) => se[1].toUpperCase())] = U(Z, w, G), H;
-          }, {}) : Hm.indexOf(P) !== -1 ? U(N, w, P) : (N.match(ng) && (N = N.slice(1, N.length - 1)), N === "true" || N !== "false" && N);
+            return H[G.replace(/(-[a-z])/g, (se) => se[1].toUpperCase())] = q(Z, w, G), H;
+          }, {}) : Hm.indexOf(P) !== -1 ? q(N, w, P) : (N.match(ng) && (N = N.slice(1, N.length - 1)), N === "true" || N !== "false" && N);
         }(p, x, v, t.sanitizer);
         typeof S == "string" && (Rn.test(S) || jn.test(S)) && (y[E] = o(S.trim()));
       } else h !== "style" && (y[Zs[h] || h] = !0);
@@ -6129,7 +6129,7 @@ var ea = class ea extends zt {
       onClick: i,
       className: "rejt-minus-menu",
       style: d,
-      "aria-label": `remove the array '${t}'`
+      "aria-label": `remove the array '${String(t)}'`
     });
     return /* @__PURE__ */ O.createElement(O.Fragment, null, /* @__PURE__ */ O.createElement("span", { style: g }, "[...] ", r.length, " ", r.
     length === 1 ? "item" : "items"), !p && m);
@@ -6153,16 +6153,16 @@ var ea = class ea extends zt {
       beforeUpdateAction: S,
       logger: w,
       onSubmitValueParser: P
-    } = this.props, { minus: N, plus: U, delimiter: H, ul: G, addForm: Z } = g(t, r, o, n, p), se = d(t, r, o, n, p), ee = x && we(x, {
+    } = this.props, { minus: N, plus: q, delimiter: H, ul: G, addForm: Z } = g(t, r, o, n, p), se = d(t, r, o, n, p), ee = x && we(x, {
       onClick: this.handleAddMode,
       className: "rejt-plus-menu",
-      style: U,
-      "aria-label": `add a new item to the '${t}' array`
+      style: q,
+      "aria-label": `add a new item to the '${String(t)}' array`
     }), pe = b && we(b, {
       onClick: c,
       className: "rejt-minus-menu",
       style: N,
-      "aria-label": `remove the array '${t}'`
+      "aria-label": `remove the array '${String(t)}'`
     });
     return /* @__PURE__ */ O.createElement(O.Fragment, null, /* @__PURE__ */ O.createElement("span", { className: "rejt-not-collapsed-delimi\
 ter", style: H }, "["), !i && ee, /* @__PURE__ */ O.createElement("ul", { className: "rejt-not-collapsed-list", style: G }, r.map((L, k) => /* @__PURE__ */ O.
@@ -6323,7 +6323,7 @@ var ta = class ta extends zt {
         onClick: s,
         className: "rejt-minus-menu",
         style: f.minus,
-        "aria-label": `remove the function '${t}'${x ? ` from '${x}'` : ""}`
+        "aria-label": `remove the function '${String(t)}'${String(x) ? ` from '${String(x)}'` : ""}`
       });
       h = b ? null : v;
     }
@@ -6739,7 +6739,7 @@ var oa = class oa extends zt {
       onClick: i,
       className: "rejt-minus-menu",
       style: d,
-      "aria-label": `remove the object '${t}'`
+      "aria-label": `remove the object '${String(t)}'`
     });
     return /* @__PURE__ */ O.createElement(O.Fragment, null, /* @__PURE__ */ O.createElement("span", { style: g }, "{...}", " ", p.length, "\
  ", p.length === 1 ? "key" : "keys"), !m && f);
@@ -6763,17 +6763,17 @@ var oa = class oa extends zt {
       beforeUpdateAction: S,
       logger: w,
       onSubmitValueParser: P
-    } = this.props, { minus: N, plus: U, addForm: H, ul: G, delimiter: Z } = g(t, r, o, n, p), se = Object.getOwnPropertyNames(r), ee = d(t,
+    } = this.props, { minus: N, plus: q, addForm: H, ul: G, delimiter: Z } = g(t, r, o, n, p), se = Object.getOwnPropertyNames(r), ee = d(t,
     r, o, n, p), pe = x && we(x, {
       onClick: this.handleAddMode,
       className: "rejt-plus-menu",
-      style: U,
-      "aria-label": `add a new property to the object '${t}'`
+      style: q,
+      "aria-label": `add a new property to the object '${String(t)}'`
     }), _ = b && we(b, {
       onClick: c,
       className: "rejt-minus-menu",
       style: N,
-      "aria-label": `remove the object '${t}'`
+      "aria-label": `remove the object '${String(t)}'`
     }), j = se.map((k) => /* @__PURE__ */ O.createElement(
       kt,
       {
@@ -6919,7 +6919,7 @@ var na = class na extends zt {
       onClick: s,
       className: "rejt-minus-menu",
       style: f.minus,
-      "aria-label": `remove the property '${t}' with value '${l}'${v ? ` from '${v}'` : ""}`
+      "aria-label": `remove the property '${String(t)}' with value '${String(l)}'${String(v) ? ` from '${String(v)}'` : ""}`
     });
     return /* @__PURE__ */ O.createElement("li", { className: "rejt-value-node", style: f.li }, /* @__PURE__ */ O.createElement("span", { className: "\
 rejt-name", style: f.name }, t, " : "), h ? /* @__PURE__ */ O.createElement("span", { className: "rejt-edit-form", style: f.editForm }, x) :
@@ -7660,8 +7660,15 @@ updateArgs: r, isHovered: o }) => {
   ), g = va(() => l(!1), []), p = va(() => l(!0), []);
   if (!i || i.disable) {
     let y = i?.disable !== !0 && e?.type?.name !== "function";
-    return o && y ? /* @__PURE__ */ hr.createElement(bb, { href: "https://storybook.js.org/docs/essentials/controls", target: "_blank", withArrow: !0 },
-    "Setup controls") : /* @__PURE__ */ hr.createElement(Wc, null);
+    return o && y ? /* @__PURE__ */ hr.createElement(
+      bb,
+      {
+        href: "https://storybook.js.org/docs/essentials/controls?ref=ui",
+        target: "_blank",
+        withArrow: !0
+      },
+      "Setup controls"
+    ) : /* @__PURE__ */ hr.createElement(Wc, null);
   }
   let m = { name: n, argType: e, value: c.value, onChange: d, onBlur: g, onFocus: p }, f = xb[i.type] || Wc;
   return /* @__PURE__ */ hr.createElement(f, { ...m, ...i, controlType: i.type });
@@ -7919,7 +7926,7 @@ Set your story args and you'll see controls appearing here automatically."),
       footer: /* @__PURE__ */ je.createElement(Yb, null, e && /* @__PURE__ */ je.createElement(je.Fragment, null, /* @__PURE__ */ je.createElement(
         op,
         {
-          href: "https://storybook.js.org/docs/essentials/controls",
+          href: "https://storybook.js.org/docs/essentials/controls?ref=ui",
           target: "_blank",
           withArrow: !0
         },
@@ -7928,7 +7935,7 @@ Set your story args and you'll see controls appearing here automatically."),
       )), !e && /* @__PURE__ */ je.createElement(
         op,
         {
-          href: "https://storybook.js.org/docs/essentials/controls",
+          href: "https://storybook.js.org/docs/essentials/controls?ref=ui",
           target: "_blank",
           withArrow: !0
         },
@@ -8213,11 +8220,12 @@ var g0 = Ca.table(({ theme: e, compact: t, inAddonPanel: r }) => ({
     }
     // End awesome table styling
   }
-})), h0 = Ca(c0)(({ theme: e }) => ({
-  margin: "-4px -12px -4px 0"
-})), y0 = Ca.span({
-  display: "flex",
-  justifyContent: "space-between"
+})), h0 = Ca.div({
+  position: "relative"
+}), y0 = Ca.div({
+  position: "absolute",
+  right: 8,
+  top: 6
 });
 var b0 = {
   alpha: /* @__PURE__ */ a((e, t) => (e.name ?? "").localeCompare(t.name ?? ""), "alpha"),
@@ -8284,11 +8292,11 @@ redFirst"),
   } = e;
   if ("error" in e) {
     let { error: x } = e;
-    return /* @__PURE__ */ W.createElement(Yr, null, x, "\xA0", /* @__PURE__ */ W.createElement(p0, { href: "http://storybook.js.org/docs/",
-    target: "_blank", withArrow: !0 }, /* @__PURE__ */ W.createElement(f0, null), " Read the docs"));
+    return /* @__PURE__ */ V.createElement(Yr, null, x, "\xA0", /* @__PURE__ */ V.createElement(p0, { href: "http://storybook.js.org/docs/?r\
+ef=ui", target: "_blank", withArrow: !0 }, /* @__PURE__ */ V.createElement(f0, null), " Read the docs"));
   }
   if (l)
-    return /* @__PURE__ */ W.createElement(lp, null);
+    return /* @__PURE__ */ V.createElement(lp, null);
   let { rows: c, args: u, globals: d } = "rows" in e ? e : { rows: void 0, args: void 0, globals: void 0 }, g = x0(
     xn(
       c || {},
@@ -8297,31 +8305,46 @@ redFirst"),
     s
   ), p = g.ungrouped.length === 0, m = Object.entries(g.sections).length === 0, f = Object.entries(g.ungroupedSubsections).length === 0;
   if (p && m && f)
-    return /* @__PURE__ */ W.createElement(ip, { inAddonPanel: n });
+    return /* @__PURE__ */ V.createElement(ip, { inAddonPanel: n });
   let y = 1;
   t && (y += 1), o || (y += 2);
   let h = Object.keys(g.sections).length > 0, b = { updateArgs: t, compact: o, inAddonPanel: n, initialExpandedArgs: i };
-  return /* @__PURE__ */ W.createElement(u0, null, /* @__PURE__ */ W.createElement(g0, { compact: o, inAddonPanel: n, className: "docblock-a\
-rgstable sb-unstyled" }, /* @__PURE__ */ W.createElement("thead", { className: "docblock-argstable-head" }, /* @__PURE__ */ W.createElement(
-  "tr", null, /* @__PURE__ */ W.createElement("th", null, /* @__PURE__ */ W.createElement("span", null, "Name")), o ? null : /* @__PURE__ */ W.
-  createElement("th", null, /* @__PURE__ */ W.createElement("span", null, "Description")), o ? null : /* @__PURE__ */ W.createElement("th", null,
-  /* @__PURE__ */ W.createElement("span", null, "Default")), t ? /* @__PURE__ */ W.createElement("th", null, /* @__PURE__ */ W.createElement(
-  y0, null, "Control", " ", !l && r && /* @__PURE__ */ W.createElement(h0, { onClick: () => r(), title: "Reset controls" }, /* @__PURE__ */ W.
-  createElement(m0, { "aria-hidden": !0 })))) : null)), /* @__PURE__ */ W.createElement("tbody", { className: "docblock-argstable-body" }, g.
-  ungrouped.map((x) => /* @__PURE__ */ W.createElement(yr, { key: x.key, row: x, arg: u && u[x.key], ...b })), Object.entries(g.ungroupedSubsections).
-  map(([x, v]) => /* @__PURE__ */ W.createElement(ko, { key: x, label: x, level: "subsection", colSpan: y }, v.map((E) => /* @__PURE__ */ W.
-  createElement(
-    yr,
+  return /* @__PURE__ */ V.createElement(u0, null, /* @__PURE__ */ V.createElement(h0, null, t && !l && r && /* @__PURE__ */ V.createElement(
+  y0, null, /* @__PURE__ */ V.createElement(
+    c0,
     {
-      key: E.key,
-      row: E,
-      arg: u && u[E.key],
-      expandable: h,
-      ...b
-    }
-  )))), Object.entries(g.sections).map(([x, v]) => /* @__PURE__ */ W.createElement(ko, { key: x, label: x, level: "section", colSpan: y }, v.
-  ungrouped.map((E) => /* @__PURE__ */ W.createElement(yr, { key: E.key, row: E, arg: u && u[E.key], ...b })), Object.entries(v.subsections).
-  map(([E, S]) => /* @__PURE__ */ W.createElement(
+      onClick: () => r(),
+      "aria-label": "Reset controls",
+      title: "Reset controls"
+    },
+    /* @__PURE__ */ V.createElement(m0, null)
+  )), /* @__PURE__ */ V.createElement(g0, { compact: o, inAddonPanel: n, className: "docblock-argstable sb-unstyled" }, /* @__PURE__ */ V.createElement(
+  "thead", { className: "docblock-argstable-head" }, /* @__PURE__ */ V.createElement("tr", null, /* @__PURE__ */ V.createElement("th", null,
+  /* @__PURE__ */ V.createElement("span", null, "Name")), o ? null : /* @__PURE__ */ V.createElement("th", null, /* @__PURE__ */ V.createElement(
+  "span", null, "Description")), o ? null : /* @__PURE__ */ V.createElement("th", null, /* @__PURE__ */ V.createElement("span", null, "Defau\
+lt")), t ? /* @__PURE__ */ V.createElement("th", null, /* @__PURE__ */ V.createElement("span", null, "Control")) : null)), /* @__PURE__ */ V.
+  createElement("tbody", { className: "docblock-argstable-body" }, g.ungrouped.map((x) => /* @__PURE__ */ V.createElement(yr, { key: x.key, row: x,
+  arg: u && u[x.key], ...b })), Object.entries(g.ungroupedSubsections).map(([x, v]) => /* @__PURE__ */ V.createElement(
+    ko,
+    {
+      key: x,
+      label: x,
+      level: "subsection",
+      colSpan: y
+    },
+    v.map((E) => /* @__PURE__ */ V.createElement(
+      yr,
+      {
+        key: E.key,
+        row: E,
+        arg: u && u[E.key],
+        expandable: h,
+        ...b
+      }
+    ))
+  )), Object.entries(g.sections).map(([x, v]) => /* @__PURE__ */ V.createElement(ko, { key: x, label: x, level: "section", colSpan: y }, v.ungrouped.
+  map((E) => /* @__PURE__ */ V.createElement(yr, { key: E.key, row: E, arg: u && u[E.key], ...b })), Object.entries(v.subsections).map(([E, S]) => /* @__PURE__ */ V.
+  createElement(
     ko,
     {
       key: E,
@@ -8329,7 +8352,7 @@ rgstable sb-unstyled" }, /* @__PURE__ */ W.createElement("thead", { className: "
       level: "subsection",
       colSpan: y
     },
-    S.map((w) => /* @__PURE__ */ W.createElement(
+    S.map((w) => /* @__PURE__ */ V.createElement(
       yr,
       {
         key: w.key,
@@ -8339,7 +8362,7 @@ rgstable sb-unstyled" }, /* @__PURE__ */ W.createElement("thead", { className: "
         ...b
       }
     ))
-  )))))));
+  ))))))));
 }, "ArgsTable");
 
 // src/controls/constants.ts
@@ -9529,9 +9552,9 @@ var Bx = /* @__PURE__ */ a(({ rows: e, columns: t, rowsData: r }) => {
   if (i !== void 0 ? m = p.map((f, y) => typeof f == "object" && f !== null ? [f[i], y] : [void 0, y]) : n && (m = d.map((f, y) => [d[y], y])),
   m !== void 0) {
     let f = /* @__PURE__ */ a((h, b) => (x, v) => {
-      let E = h(x), S = h(v), w = typeof E, P = typeof S, N = /* @__PURE__ */ a((H, G) => H < G ? -1 : H > G ? 1 : 0, "lt"), U;
+      let E = h(x), S = h(v), w = typeof E, P = typeof S, N = /* @__PURE__ */ a((H, G) => H < G ? -1 : H > G ? 1 : 0, "lt"), q;
       if (w === P)
-        U = N(E, S);
+        q = N(E, S);
       else {
         let H = {
           string: 0,
@@ -9542,9 +9565,9 @@ var Bx = /* @__PURE__ */ a(({ rows: e, columns: t, rowsData: r }) => {
           undefined: 5,
           function: 6
         };
-        U = N(H[w], H[P]);
+        q = N(H[w], H[P]);
       }
-      return b || (U = -U), U;
+      return b || (q = -q), q;
     }, "comparator"), y = m.sort(f((h) => h[0], s)).map((h) => h[1]);
     d = y.map((h) => d[h]), p = y.map((h) => p[h]);
   }
@@ -9982,7 +10005,7 @@ e a play function for your story and you'll see it run here."),
 }, "Empty");
 
 // src/component-testing/components/Interaction.tsx
-import * as q from "react";
+import * as W from "react";
 import { IconButton as TE, TooltipNote as AE, WithTooltip as kE } from "storybook/internal/components";
 import { ChevronDownIcon as OE, ChevronUpIcon as IE } from "@storybook/icons";
 import { styled as He, typography as en } from "storybook/theming";
@@ -10224,7 +10247,7 @@ var Lv = ["theme", "hover", "colorScheme", "children", "label", "className", "on
       }
     }
     !Pi && ne && b(ne), L || y(!m);
-  }, "handleClick"), U = /* @__PURE__ */ a((T) => {
+  }, "handleClick"), q = /* @__PURE__ */ a((T) => {
     let L = T.currentTarget;
     !L.contains(document.activeElement) && L.getAttribute("role") === "tree" && L.setAttribute("tabindex", "0");
   }, "handleBlur"), H = /* @__PURE__ */ a((T) => {
@@ -10252,7 +10275,7 @@ var Lv = ["theme", "hover", "colorScheme", "children", "label", "className", "on
       tabIndex: 0,
       className: me(xe.tree, xe.group, g, s),
       onFocus: H,
-      onBlur: U
+      onBlur: q
     }, d), /* @__PURE__ */ ge.createElement(Jo.Provider, {
       value: {
         isChild: !0,
@@ -10320,7 +10343,7 @@ var od = Ee(qo()), nd = Ee(Wo());
 import tt, { useState as Mv, useEffect as Bv } from "react";
 
 // ../node_modules/@devtools-ds/object-inspector/dist/esm/ObjectInspector.css.js
-var V = { "object-inspector": "ObjectInspector-object-inspector-0c33e82", objectInspector: "ObjectInspector-object-inspector-0c33e82", "obje\
+var z = { "object-inspector": "ObjectInspector-object-inspector-0c33e82", objectInspector: "ObjectInspector-object-inspector-0c33e82", "obje\
 ct-label": "ObjectInspector-object-label-b81482b", objectLabel: "ObjectInspector-object-label-b81482b", text: "ObjectInspector-text-25f57f3",
 key: "ObjectInspector-key-4f712bb", value: "ObjectInspector-value-f7ec2e5", string: "ObjectInspector-string-c496000", regex: "ObjectInspecto\
 r-regex-59d45a3", error: "ObjectInspector-error-b818698", boolean: "ObjectInspector-boolean-2dd1642", number: "ObjectInspector-number-a6daab\
@@ -10333,9 +10356,9 @@ light-78bef54" };
 var Dv = ["ast", "theme", "showKey", "colorScheme", "className"], Ae = /* @__PURE__ */ a((e, t, r, o, n) => {
   let i = e.includes("-") ? `"${e}"` : e, s = n <= 0;
   return /* @__PURE__ */ tt.createElement("span", {
-    className: V.text
+    className: z.text
   }, !s && o && /* @__PURE__ */ tt.createElement(tt.Fragment, null, /* @__PURE__ */ tt.createElement("span", {
-    className: V.key
+    className: z.key
   }, i), /* @__PURE__ */ tt.createElement("span", null, ":\xA0")), /* @__PURE__ */ tt.createElement("span", {
     className: r
   }, t));
@@ -10351,19 +10374,19 @@ var Dv = ["ast", "theme", "showKey", "colorScheme", "className"], Ae = /* @__PUR
   } = xt({
     theme: r,
     colorScheme: n
-  }, V), [c, u] = Mv(/* @__PURE__ */ tt.createElement("span", null)), d = /* @__PURE__ */ tt.createElement("span", null);
+  }, z), [c, u] = Mv(/* @__PURE__ */ tt.createElement("span", null)), d = /* @__PURE__ */ tt.createElement("span", null);
   return Bv(() => {
     t.value instanceof Promise && (/* @__PURE__ */ a(async (p) => {
-      u(Ae(t.key, `Promise { "${await li(p)}" }`, V.key, o, t.depth));
+      u(Ae(t.key, `Promise { "${await li(p)}" }`, z.key, o, t.depth));
     }, "waitForPromiseResult"))(t.value);
-  }, [t, o]), typeof t.value == "number" || typeof t.value == "bigint" ? d = Ae(t.key, String(t.value), V.number, o, t.depth) : typeof t.value ==
-  "boolean" ? d = Ae(t.key, String(t.value), V.boolean, o, t.depth) : typeof t.value == "string" ? d = Ae(t.key, `"${t.value}"`, V.string, o,
-  t.depth) : typeof t.value > "u" ? d = Ae(t.key, "undefined", V.undefined, o, t.depth) : typeof t.value == "symbol" ? d = Ae(t.key, t.value.
-  toString(), V.string, o, t.depth) : typeof t.value == "function" ? d = Ae(t.key, `${t.value.name}()`, V.key, o, t.depth) : typeof t.value ==
-  "object" && (t.value === null ? d = Ae(t.key, "null", V.null, o, t.depth) : Array.isArray(t.value) ? d = Ae(t.key, `Array(${t.value.length}\
-)`, V.key, o, t.depth) : t.value instanceof Date ? d = Ae(t.key, `Date ${t.value.toString()}`, V.value, o, t.depth) : t.value instanceof RegExp ?
-  d = Ae(t.key, t.value.toString(), V.regex, o, t.depth) : t.value instanceof Error ? d = Ae(t.key, t.value.toString(), V.error, o, t.depth) :
-  si(t.value) ? d = Ae(t.key, "{\u2026}", V.key, o, t.depth) : d = Ae(t.key, t.value.constructor.name, V.key, o, t.depth)), /* @__PURE__ */ tt.
+  }, [t, o]), typeof t.value == "number" || typeof t.value == "bigint" ? d = Ae(t.key, String(t.value), z.number, o, t.depth) : typeof t.value ==
+  "boolean" ? d = Ae(t.key, String(t.value), z.boolean, o, t.depth) : typeof t.value == "string" ? d = Ae(t.key, `"${t.value}"`, z.string, o,
+  t.depth) : typeof t.value > "u" ? d = Ae(t.key, "undefined", z.undefined, o, t.depth) : typeof t.value == "symbol" ? d = Ae(t.key, t.value.
+  toString(), z.string, o, t.depth) : typeof t.value == "function" ? d = Ae(t.key, `${t.value.name}()`, z.key, o, t.depth) : typeof t.value ==
+  "object" && (t.value === null ? d = Ae(t.key, "null", z.null, o, t.depth) : Array.isArray(t.value) ? d = Ae(t.key, `Array(${t.value.length}\
+)`, z.key, o, t.depth) : t.value instanceof Date ? d = Ae(t.key, `Date ${t.value.toString()}`, z.value, o, t.depth) : t.value instanceof RegExp ?
+  d = Ae(t.key, t.value.toString(), z.regex, o, t.depth) : t.value instanceof Error ? d = Ae(t.key, t.value.toString(), z.error, o, t.depth) :
+  si(t.value) ? d = Ae(t.key, "{\u2026}", z.key, o, t.depth) : d = Ae(t.key, t.value.constructor.name, z.key, o, t.depth)), /* @__PURE__ */ tt.
   createElement("span", (0, od.default)({
     className: me(l, i)
   }, s), c, d);
@@ -10428,10 +10451,10 @@ e.children, r, !0), /* @__PURE__ */ D.createElement("span", null, "}")), "getPro
   } = xt({
     theme: r,
     colorScheme: i
-  }, V), d = t.isPrototype || !1, g = me(V.objectLabel, c, s, {
-    [V.prototype]: d
+  }, z), d = t.isPrototype || !1, g = me(z.objectLabel, c, s, {
+    [z.prototype]: d
   }), p = t.depth <= 0, m = /* @__PURE__ */ a(() => /* @__PURE__ */ D.createElement("span", {
-    className: d ? V.prototype : V.key
+    className: d ? z.prototype : z.key
   }, p ? "" : `${t.key}: `), "Key");
   return t.type === "array" ? /* @__PURE__ */ D.createElement("span", (0, Dt.default)({
     className: g
@@ -10439,10 +10462,10 @@ e.children, r, !0), /* @__PURE__ */ D.createElement("span", null, "}")), "getPro
   {
     className: g
   }, l), /* @__PURE__ */ D.createElement(m, null), u === "chrome" && /* @__PURE__ */ D.createElement("span", {
-    className: V.functionDecorator
+    className: z.functionDecorator
   }, "\u0192 "), /* @__PURE__ */ D.createElement("span", {
     className: me({
-      [V.function]: !d
+      [z.function]: !d
     })
   }, `${t.value.name}()`)) : t.type === "promise" ? /* @__PURE__ */ D.createElement("span", (0, Dt.default)({
     className: g
@@ -10533,13 +10556,13 @@ var Uv = ["data", "expandLevel", "sortKeys", "includePrototypes", "className", "
   } = xt({
     theme: s,
     colorScheme: l
-  }, V);
+  }, z);
   return qv(() => {
     (/* @__PURE__ */ a(async () => {
       g(await Du(t, o, n));
     }, "runParser"))();
   }, [t, o, n]), /* @__PURE__ */ gi.createElement("div", (0, ud.default)({
-    className: me(V.objectInspector, i, p)
+    className: me(z.objectInspector, i, p)
   }, u), d && /* @__PURE__ */ gi.createElement(qu, {
     theme: m,
     colorScheme: f
@@ -11029,14 +11052,14 @@ var PE = He.div({
   if (!e)
     return null;
   if (e.callId === Pe)
-    return /* @__PURE__ */ q.createElement(Ei, null, /* @__PURE__ */ q.createElement("pre", null, /* @__PURE__ */ q.createElement(FE, null, e.
-    name, ":"), " ", /* @__PURE__ */ q.createElement(RE, null, e.message)), /* @__PURE__ */ q.createElement(jE, null, "The component failed \
+    return /* @__PURE__ */ W.createElement(Ei, null, /* @__PURE__ */ W.createElement("pre", null, /* @__PURE__ */ W.createElement(FE, null, e.
+    name, ":"), " ", /* @__PURE__ */ W.createElement(RE, null, e.message)), /* @__PURE__ */ W.createElement(jE, null, "The component failed \
 to render properly. Automated component tests will not run until this is resolved. Check the full error message in Storybook\u2019s canvas to deb\
 ug."));
   if (ri(e))
-    return /* @__PURE__ */ q.createElement(vi, { ...e });
+    return /* @__PURE__ */ W.createElement(vi, { ...e });
   if (ti(e))
-    return /* @__PURE__ */ q.createElement(Ei, null, /* @__PURE__ */ q.createElement(
+    return /* @__PURE__ */ W.createElement(Ei, null, /* @__PURE__ */ W.createElement(
       vi,
       {
         message: `${e.message}${e.diff ? `
@@ -11044,12 +11067,12 @@ ug."));
 ${e.diff}` : ""}`,
         style: { padding: 0 }
       }
-    ), /* @__PURE__ */ q.createElement("p", null, "See the full stack trace in the browser console."));
+    ), /* @__PURE__ */ W.createElement("p", null, "See the full stack trace in the browser console."));
   let r = e.message.split(`
 
 `), o = r.length > 1;
-  return /* @__PURE__ */ q.createElement(Ei, null, /* @__PURE__ */ q.createElement("pre", { dangerouslySetInnerHTML: { __html: t.toHtml(r[0]) } }),
-  o && /* @__PURE__ */ q.createElement("p", null, "See the full stack trace in the browser console."));
+  return /* @__PURE__ */ W.createElement(Ei, null, /* @__PURE__ */ W.createElement("pre", { dangerouslySetInnerHTML: { __html: t.toHtml(r[0]) } }),
+  o && /* @__PURE__ */ W.createElement("p", null, "See the full stack trace in the browser console."));
 }, "Exception"), bd = /* @__PURE__ */ a(({
   call: e,
   callsById: t,
@@ -11061,9 +11084,9 @@ ${e.diff}` : ""}`,
   toggleCollapsed: l,
   pausedAt: c
 }) => {
-  let [u, d] = q.useState(!1), g = !o.goto || !e.interceptable || !!e.ancestors?.length;
-  return i || e.id === Pe ? null : /* @__PURE__ */ q.createElement(LE, { call: e, pausedAt: c }, /* @__PURE__ */ q.createElement(NE, { isInteractive: g },
-  /* @__PURE__ */ q.createElement(
+  let [u, d] = W.useState(!1), g = !o.goto || !e.interceptable || !!e.ancestors?.length;
+  return i || e.id === Pe ? null : /* @__PURE__ */ W.createElement(LE, { call: e, pausedAt: c }, /* @__PURE__ */ W.createElement(NE, { isInteractive: g },
+  /* @__PURE__ */ W.createElement(
     _E,
     {
       "aria-label": "Interaction step",
@@ -11073,27 +11096,27 @@ ${e.diff}` : ""}`,
       onMouseEnter: () => o.goto && d(!0),
       onMouseLeave: () => o.goto && d(!1)
     },
-    /* @__PURE__ */ q.createElement(Qo, { status: u ? "active" : e.status }),
-    /* @__PURE__ */ q.createElement(PE, { style: { marginLeft: 6, marginBottom: 1 } }, /* @__PURE__ */ q.createElement(Zo, { call: e, callsById: t }))
-  ), /* @__PURE__ */ q.createElement(DE, null, (n?.length ?? 0) > 0 && /* @__PURE__ */ q.createElement(
+    /* @__PURE__ */ W.createElement(Qo, { status: u ? "active" : e.status }),
+    /* @__PURE__ */ W.createElement(PE, { style: { marginLeft: 6, marginBottom: 1 } }, /* @__PURE__ */ W.createElement(Zo, { call: e, callsById: t }))
+  ), /* @__PURE__ */ W.createElement(DE, null, (n?.length ?? 0) > 0 && /* @__PURE__ */ W.createElement(
     kE,
     {
       hasChrome: !1,
-      tooltip: /* @__PURE__ */ q.createElement(BE, { note: `${s ? "Show" : "Hide"} interactions` })
+      tooltip: /* @__PURE__ */ W.createElement(BE, { note: `${s ? "Show" : "Hide"} interactions` })
     },
-    /* @__PURE__ */ q.createElement(
+    /* @__PURE__ */ W.createElement(
       ME,
       {
         onClick: l,
         "aria-label": s ? "Expand interaction" : "Collapse interaction"
       },
-      s ? /* @__PURE__ */ q.createElement(OE, null) : /* @__PURE__ */ q.createElement(IE, null)
+      s ? /* @__PURE__ */ W.createElement(OE, null) : /* @__PURE__ */ W.createElement(IE, null)
     )
-  ))), e.status === "error" && e.exception?.callId === e.id && /* @__PURE__ */ q.createElement(HE, { exception: e.exception }));
+  ))), e.status === "error" && e.exception?.callId === e.id && /* @__PURE__ */ W.createElement(HE, { exception: e.exception }));
 }, "Interaction");
 
 // src/component-testing/components/Subnav.tsx
-import z from "react";
+import U from "react";
 import {
   Bar as WE,
   Button as GE,
@@ -11206,10 +11229,10 @@ var nS = $e.div(({ theme: e }) => ({
   onScrollToEnd: n
 }) => {
   let i = r === "errored" ? "Scroll to error" : "Scroll to end", s = oS();
-  return /* @__PURE__ */ z.createElement(nS, null, /* @__PURE__ */ z.createElement(WE, { backgroundColor: s.background.app }, /* @__PURE__ */ z.
-  createElement(aS, { "aria-label": "Component tests toolbar" }, /* @__PURE__ */ z.createElement(vd, null, /* @__PURE__ */ z.createElement(xd,
-  { status: r }), /* @__PURE__ */ z.createElement(pS, { onClick: n, disabled: !n }, i), /* @__PURE__ */ z.createElement(sS, null), /* @__PURE__ */ z.
-  createElement(Pr, { trigger: "hover", hasChrome: !1, tooltip: /* @__PURE__ */ z.createElement(Lr, { note: "Go to start" }) }, /* @__PURE__ */ z.
+  return /* @__PURE__ */ U.createElement(nS, null, /* @__PURE__ */ U.createElement(WE, { backgroundColor: s.background.app }, /* @__PURE__ */ U.
+  createElement(aS, { "aria-label": "Component tests toolbar" }, /* @__PURE__ */ U.createElement(vd, null, /* @__PURE__ */ U.createElement(xd,
+  { status: r }), /* @__PURE__ */ U.createElement(pS, { onClick: n, disabled: !n }, i), /* @__PURE__ */ U.createElement(sS, null), /* @__PURE__ */ U.
+  createElement(Pr, { trigger: "hover", hasChrome: !1, tooltip: /* @__PURE__ */ U.createElement(Lr, { note: "Go to start" }) }, /* @__PURE__ */ U.
   createElement(
     cS,
     {
@@ -11217,37 +11240,37 @@ var nS = $e.div(({ theme: e }) => ({
       onClick: e.start,
       disabled: !t.start
     },
-    /* @__PURE__ */ z.createElement(tS, null)
-  )), /* @__PURE__ */ z.createElement(Pr, { trigger: "hover", hasChrome: !1, tooltip: /* @__PURE__ */ z.createElement(Lr, { note: "Go back" }) },
-  /* @__PURE__ */ z.createElement(
+    /* @__PURE__ */ U.createElement(tS, null)
+  )), /* @__PURE__ */ U.createElement(Pr, { trigger: "hover", hasChrome: !1, tooltip: /* @__PURE__ */ U.createElement(Lr, { note: "Go back" }) },
+  /* @__PURE__ */ U.createElement(
     Nr,
     {
       "aria-label": "Go back",
       onClick: e.back,
       disabled: !t.back
     },
-    /* @__PURE__ */ z.createElement(QE, null)
-  )), /* @__PURE__ */ z.createElement(Pr, { trigger: "hover", hasChrome: !1, tooltip: /* @__PURE__ */ z.createElement(Lr, { note: "Go forwar\
-d" }) }, /* @__PURE__ */ z.createElement(
+    /* @__PURE__ */ U.createElement(QE, null)
+  )), /* @__PURE__ */ U.createElement(Pr, { trigger: "hover", hasChrome: !1, tooltip: /* @__PURE__ */ U.createElement(Lr, { note: "Go forwar\
+d" }) }, /* @__PURE__ */ U.createElement(
     Nr,
     {
       "aria-label": "Go forward",
       onClick: e.next,
       disabled: !t.next
     },
-    /* @__PURE__ */ z.createElement(eS, null)
-  )), /* @__PURE__ */ z.createElement(Pr, { trigger: "hover", hasChrome: !1, tooltip: /* @__PURE__ */ z.createElement(Lr, { note: "Go to end" }) },
-  /* @__PURE__ */ z.createElement(
+    /* @__PURE__ */ U.createElement(eS, null)
+  )), /* @__PURE__ */ U.createElement(Pr, { trigger: "hover", hasChrome: !1, tooltip: /* @__PURE__ */ U.createElement(Lr, { note: "Go to end" }) },
+  /* @__PURE__ */ U.createElement(
     Nr,
     {
       "aria-label": "Go to end",
       onClick: e.end,
       disabled: !t.end
     },
-    /* @__PURE__ */ z.createElement(ZE, null)
-  )), /* @__PURE__ */ z.createElement(Pr, { trigger: "hover", hasChrome: !1, tooltip: /* @__PURE__ */ z.createElement(Lr, { note: "Rerun" }) },
-  /* @__PURE__ */ z.createElement(uS, { "aria-label": "Rerun", onClick: e.rerun }, /* @__PURE__ */ z.createElement(rS, null)))), o && /* @__PURE__ */ z.
-  createElement(vd, null, /* @__PURE__ */ z.createElement(lS, null, o)))));
+    /* @__PURE__ */ U.createElement(ZE, null)
+  )), /* @__PURE__ */ U.createElement(Pr, { trigger: "hover", hasChrome: !1, tooltip: /* @__PURE__ */ U.createElement(Lr, { note: "Rerun" }) },
+  /* @__PURE__ */ U.createElement(uS, { "aria-label": "Rerun", onClick: e.rerun }, /* @__PURE__ */ U.createElement(rS, null)))), o && /* @__PURE__ */ U.
+  createElement(vd, null, /* @__PURE__ */ U.createElement(lS, null, o)))));
 }, "Subnav");
 
 // src/component-testing/components/TestDiscrepancyMessage.tsx
@@ -11486,7 +11509,7 @@ var _r = {
         { root: Ai.document.querySelector("#panel-tab-content") }
       ), P.current && _.observe(P.current)), () => _?.disconnect();
     }, []);
-    let N = tn(0), U = kS(
+    let N = tn(0), q = kS(
       {
         [ht.CALL]: w,
         [ht.SYNC]: (_) => {
@@ -11549,23 +11572,23 @@ var _r = {
     }, [l, d]);
     let H = Pd(
       () => ({
-        start: /* @__PURE__ */ a(() => U(ht.START, { storyId: r }), "start"),
-        back: /* @__PURE__ */ a(() => U(ht.BACK, { storyId: r }), "back"),
-        goto: /* @__PURE__ */ a((_) => U(ht.GOTO, { storyId: r, callId: _ }), "goto"),
-        next: /* @__PURE__ */ a(() => U(ht.NEXT, { storyId: r }), "next"),
-        end: /* @__PURE__ */ a(() => U(ht.END, { storyId: r }), "end"),
+        start: /* @__PURE__ */ a(() => q(ht.START, { storyId: r }), "start"),
+        back: /* @__PURE__ */ a(() => q(ht.BACK, { storyId: r }), "back"),
+        goto: /* @__PURE__ */ a((_) => q(ht.GOTO, { storyId: r, callId: _ }), "goto"),
+        next: /* @__PURE__ */ a(() => q(ht.NEXT, { storyId: r }), "next"),
+        end: /* @__PURE__ */ a(() => q(ht.END, { storyId: r }), "end"),
         rerun: /* @__PURE__ */ a(() => {
-          U(vS, { storyId: r });
+          q(vS, { storyId: r });
         }, "rerun")
       }),
-      [U, r]
+      [q, r]
     ), G = OS("fileName", ""), [Z] = G.toString().split("/").slice(-1), se = /* @__PURE__ */ a(() => c?.scrollIntoView({ behavior: "smooth",
     block: "end" }), "scrollToTarget"), ee = !!x || !!v || h.some((_) => _.status === "error"), pe = Pd(() => f !== "playing" && (h.length >
     0 || ee) ? ee ? "error" : "done" : f === "playing" ? "active" : void 0, [f, h, ee]);
     return wi(() => {
       if (pe && n && n !== "status-value:pending" && n !== IS[pe]) {
         let j = setTimeout(
-          () => m((T) => (T || U(Kp, {
+          () => m((T) => (T || q(Kp, {
             type: "test-discrepancy",
             payload: {
               browserStatus: pe === "done" ? "PASS" : "FAIL",
@@ -11579,7 +11602,7 @@ var _r = {
         return () => clearTimeout(j);
       } else
         m(!1);
-    }, [U, pe, n, r, i]), /* @__PURE__ */ Id.createElement(bS, { key: "component-tests" }, /* @__PURE__ */ Id.createElement(
+    }, [q, pe, n, r, i]), /* @__PURE__ */ Id.createElement(bS, { key: "component-tests" }, /* @__PURE__ */ Id.createElement(
       Od,
       {
         storyUrl: o,