storybook 9.0.0-alpha.15 → 9.0.0-alpha.16

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

@@ -248,7 +248,7 @@ var J, Je, _e = Ae(() => {
 });
 
 // ../node_modules/color-name/index.js
-var pl = $((Uv, cl) => {
+var pl = $((Hv, cl) => {
   "use strict";
   cl.exports = {
     aliceblue: [240, 248, 255],
@@ -403,7 +403,7 @@ var pl = $((Uv, cl) => {
 });
 
 // ../node_modules/color-convert/conversions.js
-var an = $((Hv, dl) => {
+var an = $((qv, dl) => {
   var zt = pl(), ul = {};
   for (let e of Object.keys(zt))
     ul[zt[e]] = e;
@@ -738,7 +738,7 @@ var an = $((Hv, dl) => {
 });
 
 // ../node_modules/color-convert/route.js
-var fl = $(($v, ml) => {
+var fl = $((zv, ml) => {
   var _r = an();
   function Ym() {
     let e = {}, t = Object.keys(_r);
@@ -788,7 +788,7 @@ var fl = $(($v, ml) => {
 });
 
 // ../node_modules/color-convert/index.js
-var hl = $((Gv, gl) => {
+var hl = $((Wv, gl) => {
   var sn = an(), ef = fl(), Tt = {}, tf = Object.keys(sn);
   function rf(e) {
     let t = /* @__PURE__ */ a(function(...r) {
@@ -1445,7 +1445,7 @@ var Kl = $((Jl, bn) => {
 });
 
 // ../node_modules/ansi-to-html/node_modules/entities/lib/maps/entities.json
-var Wn = $((QA, eb) => {
+var Wn = $((ew, eb) => {
   eb.exports = { Aacute: "\xC1", aacute: "\xE1", Abreve: "\u0102", abreve: "\u0103", ac: "\u223E", acd: "\u223F", acE: "\u223E\u0333", Acirc: "\
 \xC2", acirc: "\xE2", acute: "\xB4", Acy: "\u0410", acy: "\u0430", AElig: "\xC6", aelig: "\xE6", af: "\u2061", Afr: "\u{1D504}", afr: "\u{1D51E}",
   Agrave: "\xC0", agrave: "\xE0", alefsym: "\u2135", aleph: "\u2135", Alpha: "\u0391", alpha: "\u03B1", Amacr: "\u0100", amacr: "\u0101", amalg: "\
@@ -1727,7 +1727,7 @@ var Wn = $((QA, eb) => {
 });
 
 // ../node_modules/ansi-to-html/node_modules/entities/lib/maps/legacy.json
-var Wi = $((ew, tb) => {
+var Wi = $((tw, tb) => {
   tb.exports = { Aacute: "\xC1", aacute: "\xE1", Acirc: "\xC2", acirc: "\xE2", acute: "\xB4", AElig: "\xC6", aelig: "\xE6", Agrave: "\xC0", agrave: "\
 \xE0", amp: "&", AMP: "&", Aring: "\xC5", aring: "\xE5", Atilde: "\xC3", atilde: "\xE3", Auml: "\xC4", auml: "\xE4", brvbar: "\xA6", Ccedil: "\
 \xC7", ccedil: "\xE7", cedil: "\xB8", cent: "\xA2", copy: "\xA9", COPY: "\xA9", curren: "\xA4", deg: "\xB0", divide: "\xF7", Eacute: "\xC9",
@@ -1742,12 +1742,12 @@ var Wi = $((ew, tb) => {
 });
 
 // ../node_modules/ansi-to-html/node_modules/entities/lib/maps/xml.json
-var Jn = $((tw, rb) => {
+var Jn = $((rw, rb) => {
   rb.exports = { amp: "&", apos: "'", gt: ">", lt: "<", quot: '"' };
 });
 
 // ../node_modules/ansi-to-html/node_modules/entities/lib/maps/decode.json
-var Ji = $((rw, ob) => {
+var Ji = $((ow, ob) => {
   ob.exports = { "0": 65533, "128": 8364, "130": 8218, "131": 402, "132": 8222, "133": 8230, "134": 8224, "135": 8225, "136": 710, "137": 8240,
   "138": 352, "139": 8249, "140": 338, "142": 381, "145": 8216, "146": 8217, "147": 8220, "148": 8221, "149": 8226, "150": 8211, "151": 8212,
   "152": 732, "153": 8482, "154": 353, "155": 8250, "156": 339, "158": 382, "159": 376 };
@@ -1974,7 +1974,7 @@ var pc = $((M) => {
 });
 
 // ../node_modules/ansi-to-html/lib/ansi_to_html.js
-var Cc = $((uw, xc) => {
+var Cc = $((dw, xc) => {
   "use strict";
   function xb(e, t) {
     if (!(e instanceof t))
@@ -2376,7 +2376,7 @@ e" : e === 9 ? t = "strike" : 29 < e && e < 38 || e === 39 || 89 < e && e < 98 ?
 });
 
 // ../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/extends.js
-var ao = $((Iw, na) => {
+var ao = $((Pw, na) => {
   function oa() {
     return na.exports = oa = Object.assign || function(e) {
       for (var t = 1; t < arguments.length; t++) {
@@ -2392,7 +2392,7 @@ var ao = $((Iw, na) => {
 });
 
 // ../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js
-var wc = $((Lw, Ac) => {
+var wc = $((Nw, Ac) => {
   function zb(e, t) {
     if (e == null) return {};
     var r = {}, o = Object.keys(e), n, s;
@@ -2405,7 +2405,7 @@ var wc = $((Lw, Ac) => {
 });
 
 // ../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/objectWithoutProperties.js
-var so = $((Dw, Oc) => {
+var so = $((Mw, Oc) => {
   var Gb = wc();
   function Wb(e, t) {
     if (e == null) return {};
@@ -2422,7 +2422,7 @@ var so = $((Dw, Oc) => {
 });
 
 // ../node_modules/@devtools-ds/themes/node_modules/@babel/runtime/helpers/defineProperty.js
-var Ic = $((Vw, _c) => {
+var Ic = $((Uw, _c) => {
   function Kb(e, t, r) {
     return t in e ? Object.defineProperty(e, t, {
       value: r,
@@ -2436,7 +2436,7 @@ var Ic = $((Vw, _c) => {
 });
 
 // ../node_modules/@devtools-ds/themes/node_modules/@babel/runtime/helpers/objectSpread2.js
-var Nc = $((Hw, Lc) => {
+var Nc = $((qw, Lc) => {
   var Yb = Ic();
   function Pc(e, t) {
     var r = Object.keys(e);
@@ -2465,7 +2465,7 @@ var Nc = $((Hw, Lc) => {
 });
 
 // ../node_modules/@devtools-ds/themes/node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js
-var Mc = $(($w, Dc) => {
+var Mc = $((zw, Dc) => {
   function Zb(e, t) {
     if (e == null) return {};
     var r = {}, o = Object.keys(e), n, s;
@@ -2478,7 +2478,7 @@ var Mc = $(($w, Dc) => {
 });
 
 // ../node_modules/@devtools-ds/themes/node_modules/@babel/runtime/helpers/objectWithoutProperties.js
-var Rc = $((Gw, Bc) => {
+var Rc = $((Ww, Bc) => {
   var Qb = Mc();
   function e0(e, t) {
     if (e == null) return {};
@@ -2495,7 +2495,7 @@ var Rc = $((Gw, Bc) => {
 });
 
 // ../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/defineProperty.js
-var Uc = $((Zw, Vc) => {
+var Uc = $((Qw, Vc) => {
   function r0(e, t, r) {
     return t in e ? Object.defineProperty(e, t, {
       value: r,
@@ -2509,7 +2509,7 @@ var Uc = $((Zw, Vc) => {
 });
 
 // ../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/objectSpread2.js
-var $c = $((eO, qc) => {
+var $c = $((tO, qc) => {
   var o0 = Uc();
   function Hc(e, t) {
     var r = Object.keys(e);
@@ -2538,7 +2538,7 @@ var $c = $((eO, qc) => {
 });
 
 // ../node_modules/@devtools-ds/tree/node_modules/@babel/runtime/helpers/extends.js
-var zc = $((rO, da) => {
+var zc = $((oO, da) => {
   function ua() {
     return da.exports = ua = Object.assign || function(e) {
       for (var t = 1; t < arguments.length; t++) {
@@ -2554,7 +2554,7 @@ var zc = $((rO, da) => {
 });
 
 // ../node_modules/@devtools-ds/tree/node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js
-var Wc = $((nO, Gc) => {
+var Wc = $((aO, Gc) => {
   function a0(e, t) {
     if (e == null) return {};
     var r = {}, o = Object.keys(e), n, s;
@@ -2567,7 +2567,7 @@ var Wc = $((nO, Gc) => {
 });
 
 // ../node_modules/@devtools-ds/tree/node_modules/@babel/runtime/helpers/objectWithoutProperties.js
-var Kc = $((sO, Jc) => {
+var Kc = $((lO, Jc) => {
   var s0 = Wc();
   function l0(e, t) {
     if (e == null) return {};
@@ -2584,8 +2584,8 @@ var Kc = $((sO, Jc) => {
 });
 
 // src/core-server/presets/common-manager.ts
-import { global as u1 } from "@storybook/global";
-import { addons as d1 } from "storybook/manager-api";
+import { global as d1 } from "@storybook/global";
+import { addons as m1 } from "storybook/manager-api";
 
 // src/controls/manager.tsx
 import fe from "react";
@@ -7547,30 +7547,30 @@ var Hi = Ui.register(It, (e) => {
 
 // src/component-testing/manager.tsx
 import Eo from "react";
-import { AddonPanel as cx } from "storybook/internal/components";
-import { Consumer as px, addons as Mp, types as ux } from "storybook/manager-api";
+import { AddonPanel as px } from "storybook/internal/components";
+import { Consumer as ux, addons as Mp, types as dx } from "storybook/manager-api";
 
 // src/component-testing/components/Panel.tsx
-import Pp, { Fragment as JE, memo as KE, useEffect as Ta, useMemo as Lp, useRef as Aa, useState as wa } from "react";
+import Pp, { Fragment as KE, memo as YE, useEffect as Ta, useMemo as Lp, useRef as Aa, useState as wa } from "react";
 import {
-  FORCE_REMOUNT as YE,
-  PLAY_FUNCTION_THREW_EXCEPTION as XE,
-  STORY_RENDER_PHASE_CHANGED as ZE,
-  STORY_THREW_EXCEPTION as QE,
-  UNHANDLED_ERRORS_WHILE_PLAYING as ex
+  FORCE_REMOUNT as XE,
+  PLAY_FUNCTION_THREW_EXCEPTION as ZE,
+  STORY_RENDER_PHASE_CHANGED as QE,
+  STORY_THREW_EXCEPTION as ex,
+  UNHANDLED_ERRORS_WHILE_PLAYING as tx
 } from "storybook/internal/core-events";
 import { global as Oa } from "@storybook/global";
 import {
-  experimental_useStatusStore as tx,
-  useAddonState as rx,
-  useChannel as ox,
-  useParameter as nx
+  experimental_useStatusStore as rx,
+  useAddonState as ox,
+  useChannel as nx,
+  useParameter as ax
 } from "storybook/manager-api";
 
 // ../addons/test/src/constants.ts
-var Gn = "storybook/test", zA = `${Gn}/test-provider`, GA = `${Gn}/panel`, qi = "STORYBOOK_ADDON_TEST_CHANNEL", Yy = "storybook/a11y", WA = `${Yy}\
+var Gn = "storybook/test", GA = `${Gn}/test-provider`, WA = `${Gn}/panel`, qi = "STORYBOOK_ADDON_TEST_CHANNEL", Yy = "storybook/a11y", JA = `${Yy}\
 /panel`;
-var Xy = "writing-tests/test-addon", JA = `${Xy}#what-happens-if-vitest-itself-has-an-error`;
+var Xy = "writing-tests/test-addon", KA = `${Xy}#what-happens-if-vitest-itself-has-an-error`;
 var Zy = {
   id: Gn,
   initialState: {
@@ -7605,7 +7605,7 @@ var Zy = {
       coverageSummary: void 0
     }
   }
-}, KA = `UNIVERSAL_STORE:${Zy.id}`;
+}, YA = `UNIVERSAL_STORE:${Zy.id}`;
 var $i = "storybook/component-test";
 
 // src/instrumenter/EVENTS.ts
@@ -7626,7 +7626,7 @@ call";
 
 // src/component-testing/components/InteractionsPanel.tsx
 import * as K from "react";
-import { transparentize as zE } from "polished";
+import { transparentize as GE } from "polished";
 import { styled as Dt } from "storybook/theming";
 
 // src/component-testing/utils.ts
@@ -7714,17 +7714,18 @@ rite a play function for your story and you'll see it run here."),
 
 // src/component-testing/components/Interaction.tsx
 import * as D from "react";
-import { IconButton as nE, TooltipNote as aE, WithTooltip as dp } from "storybook/internal/components";
-import { BookmarkHollowIcon as sE, ListUnorderedIcon as lE, LockIcon as iE } from "@storybook/icons";
-import { transparentize as cE } from "polished";
+import { IconButton as aE, TooltipNote as sE, WithTooltip as dp } from "storybook/internal/components";
+import { BookmarkHollowIcon as lE, ListUnorderedIcon as iE, LockIcon as cE } from "@storybook/icons";
+import { transparentize as pE } from "polished";
 import { styled as Te, typography as fo } from "storybook/theming";
 
 // src/component-testing/components/MatcherResult.tsx
 import W from "react";
-import { styled as up, typography as W0 } from "storybook/theming";
+import { styled as up, typography as J0 } from "storybook/theming";
 
 // src/component-testing/components/MethodCall.tsx
 import S, { Fragment as w0 } from "react";
+import { logger as O0 } from "storybook/internal/client-logger";
 
 // ../node_modules/@devtools-ds/object-inspector/dist/esm/ObjectInspector.js
 var ap = xe(ao()), sp = xe(so());
@@ -8288,7 +8289,7 @@ uo.defaultProps = {
 
 // src/component-testing/components/MethodCall.tsx
 import { useTheme as ha } from "storybook/theming";
-var O0 = {
+var k0 = {
   base: "#444",
   nullish: "#7D99AA",
   string: "#16B242",
@@ -8313,7 +8314,7 @@ var O0 = {
   },
   meta: "#EA7509",
   method: "#0271B6"
-}, k0 = {
+}, _0 = {
   base: "#eee",
   nullish: "#aaa",
   string: "#5FE584",
@@ -8340,15 +8341,15 @@ var O0 = {
   method: "#5EC1FF"
 }, ne = /* @__PURE__ */ a(() => {
   let { base: e } = ha();
-  return e === "dark" ? k0 : O0;
-}, "useThemeColors"), _0 = /[^A-Z0-9]/i, lp = /[\s.,…]+$/gm, ip = /* @__PURE__ */ a((e, t) => {
+  return e === "dark" ? _0 : k0;
+}, "useThemeColors"), I0 = /[^A-Z0-9]/i, lp = /[\s.,…]+$/gm, ip = /* @__PURE__ */ a((e, t) => {
   if (e.length <= t)
     return e;
   for (let r = t - 1; r >= 0; r -= 1)
-    if (_0.test(e[r]) && r > 10)
+    if (I0.test(e[r]) && r > 10)
       return `${e.slice(0, r).replace(lp, "")}\u2026`;
   return `${e.slice(0, t).replace(lp, "")}\u2026`;
-}, "ellipsize"), I0 = /* @__PURE__ */ a((e) => {
+}, "ellipsize"), P0 = /* @__PURE__ */ a((e) => {
   try {
     return JSON.stringify(e, null, 1);
   } catch {
@@ -8365,38 +8366,38 @@ var O0 = {
 }) => {
   switch (!0) {
     case e === null:
-      return /* @__PURE__ */ S.createElement(P0, { ...n });
-    case e === void 0:
       return /* @__PURE__ */ S.createElement(L0, { ...n });
+    case e === void 0:
+      return /* @__PURE__ */ S.createElement(N0, { ...n });
     case Array.isArray(e):
-      return /* @__PURE__ */ S.createElement(B0, { ...n, value: e, callsById: o });
+      return /* @__PURE__ */ S.createElement(R0, { ...n, value: e, callsById: o });
     case typeof e == "string":
-      return /* @__PURE__ */ S.createElement(N0, { ...n, value: e });
-    case typeof e == "number":
       return /* @__PURE__ */ S.createElement(D0, { ...n, value: e });
-    case typeof e == "boolean":
+    case typeof e == "number":
       return /* @__PURE__ */ S.createElement(M0, { ...n, value: e });
+    case typeof e == "boolean":
+      return /* @__PURE__ */ S.createElement(B0, { ...n, value: e });
     /* eslint-disable no-underscore-dangle */
     case Object.prototype.hasOwnProperty.call(e, "__date__"):
-      return /* @__PURE__ */ S.createElement(U0, { ...n, ...e.__date__ });
+      return /* @__PURE__ */ S.createElement(H0, { ...n, ...e.__date__ });
     case Object.prototype.hasOwnProperty.call(e, "__error__"):
-      return /* @__PURE__ */ S.createElement(H0, { ...n, ...e.__error__ });
+      return /* @__PURE__ */ S.createElement(q0, { ...n, ...e.__error__ });
     case Object.prototype.hasOwnProperty.call(e, "__regexp__"):
-      return /* @__PURE__ */ S.createElement(q0, { ...n, ...e.__regexp__ });
+      return /* @__PURE__ */ S.createElement($0, { ...n, ...e.__regexp__ });
     case Object.prototype.hasOwnProperty.call(e, "__function__"):
-      return /* @__PURE__ */ S.createElement(F0, { ...n, ...e.__function__ });
+      return /* @__PURE__ */ S.createElement(V0, { ...n, ...e.__function__ });
     case Object.prototype.hasOwnProperty.call(e, "__symbol__"):
-      return /* @__PURE__ */ S.createElement($0, { ...n, ...e.__symbol__ });
+      return /* @__PURE__ */ S.createElement(z0, { ...n, ...e.__symbol__ });
     case Object.prototype.hasOwnProperty.call(e, "__element__"):
-      return /* @__PURE__ */ S.createElement(V0, { ...n, ...e.__element__ });
+      return /* @__PURE__ */ S.createElement(U0, { ...n, ...e.__element__ });
     case Object.prototype.hasOwnProperty.call(e, "__class__"):
-      return /* @__PURE__ */ S.createElement(j0, { ...n, ...e.__class__ });
+      return /* @__PURE__ */ S.createElement(F0, { ...n, ...e.__class__ });
     case Object.prototype.hasOwnProperty.call(e, "__callId__"):
       return /* @__PURE__ */ S.createElement(mo, { call: o?.get(e.__callId__), callsById: o });
     /* eslint-enable no-underscore-dangle */
     case Object.prototype.toString.call(e) === "[object Object]":
       return /* @__PURE__ */ S.createElement(
-        R0,
+        j0,
         {
           value: e,
           showInspector: r,
@@ -8405,24 +8406,24 @@ var O0 = {
         }
       );
     default:
-      return /* @__PURE__ */ S.createElement(z0, { value: e, ...n });
+      return /* @__PURE__ */ S.createElement(G0, { value: e, ...n });
   }
-}, "Node"), P0 = /* @__PURE__ */ a((e) => {
+}, "Node"), L0 = /* @__PURE__ */ a((e) => {
   let t = ne();
   return /* @__PURE__ */ S.createElement("span", { style: { color: t.nullish }, ...e }, "null");
-}, "NullNode"), L0 = /* @__PURE__ */ a((e) => {
+}, "NullNode"), N0 = /* @__PURE__ */ a((e) => {
   let t = ne();
   return /* @__PURE__ */ S.createElement("span", { style: { color: t.nullish }, ...e }, "undefined");
-}, "UndefinedNode"), N0 = /* @__PURE__ */ a(({ value: e, ...t }) => {
+}, "UndefinedNode"), D0 = /* @__PURE__ */ a(({ value: e, ...t }) => {
   let r = ne();
   return /* @__PURE__ */ S.createElement("span", { style: { color: r.string }, ...t }, JSON.stringify(ip(e, 50)));
-}, "StringNode"), D0 = /* @__PURE__ */ a(({ value: e, ...t }) => {
+}, "StringNode"), M0 = /* @__PURE__ */ a(({ value: e, ...t }) => {
   let r = ne();
   return /* @__PURE__ */ S.createElement("span", { style: { color: r.number }, ...t }, e);
-}, "NumberNode"), M0 = /* @__PURE__ */ a(({ value: e, ...t }) => {
+}, "NumberNode"), B0 = /* @__PURE__ */ a(({ value: e, ...t }) => {
   let r = ne();
   return /* @__PURE__ */ S.createElement("span", { style: { color: r.boolean }, ...t }, String(e));
-}, "BooleanNode"), B0 = /* @__PURE__ */ a(({
+}, "BooleanNode"), R0 = /* @__PURE__ */ a(({
   value: e,
   nested: t = !1,
   callsById: r
@@ -8434,7 +8435,7 @@ var O0 = {
   s = cp(n, /* @__PURE__ */ S.createElement("span", null, ", "));
   return e.length <= 3 ? /* @__PURE__ */ S.createElement("span", { style: { color: o.base } }, "[", s, "]") : /* @__PURE__ */ S.createElement(
   "span", { style: { color: o.base } }, "(", e.length, ") [", s, ", \u2026]");
-}, "ArrayNode"), R0 = /* @__PURE__ */ a(({
+}, "ArrayNode"), j0 = /* @__PURE__ */ a(({
   showInspector: e,
   value: t,
   callsById: r,
@@ -8460,14 +8461,14 @@ var O0 = {
   );
   return Object.keys(t).length <= 2 ? /* @__PURE__ */ S.createElement("span", { style: { color: s.base } }, "{ ", i, " }") : /* @__PURE__ */ S.
   createElement("span", { style: { color: s.base } }, "(", Object.keys(t).length, ") ", "{ ", i, ", \u2026 }");
-}, "ObjectNode"), j0 = /* @__PURE__ */ a(({ name: e }) => {
+}, "ObjectNode"), F0 = /* @__PURE__ */ a(({ name: e }) => {
   let t = ne();
   return /* @__PURE__ */ S.createElement("span", { style: { color: t.instance } }, e);
-}, "ClassNode"), F0 = /* @__PURE__ */ a(({ name: e }) => {
+}, "ClassNode"), V0 = /* @__PURE__ */ a(({ name: e }) => {
   let t = ne();
   return e ? /* @__PURE__ */ S.createElement("span", { style: { color: t.function } }, e) : /* @__PURE__ */ S.createElement("span", { style: {
   color: t.nullish, fontStyle: "italic" } }, "anonymous");
-}, "FunctionNode"), V0 = /* @__PURE__ */ a(({
+}, "FunctionNode"), U0 = /* @__PURE__ */ a(({
   prefix: e,
   localName: t,
   id: r,
@@ -8482,28 +8483,33 @@ lt`, style: { color: i.muted } }, "<"), /* @__PURE__ */ S.createElement("span",
   Fragment, null, /* @__PURE__ */ S.createElement("span", { key: `${s}_text` }, n), /* @__PURE__ */ S.createElement("span", { key: `${s}_clo\
 se_lt`, style: { color: i.muted } }, "<"), /* @__PURE__ */ S.createElement("span", { key: `${s}_close_tag`, style: { color: i.tag.name } }, "\
 /", s), /* @__PURE__ */ S.createElement("span", { key: `${s}_close_gt`, style: { color: i.muted } }, ">")));
-}, "ElementNode"), U0 = /* @__PURE__ */ a(({ value: e }) => {
-  let t = e instanceof Date ? e.toISOString() : e, [r, o, n] = t.split(/[T.Z]/), s = ne();
-  return /* @__PURE__ */ S.createElement("span", { style: { whiteSpace: "nowrap", color: s.date } }, r, /* @__PURE__ */ S.createElement("spa\
-n", { style: { opacity: 0.7 } }, "T"), o === "00:00:00" ? /* @__PURE__ */ S.createElement("span", { style: { opacity: 0.7 } }, o) : o, n ===
-  "000" ? /* @__PURE__ */ S.createElement("span", { style: { opacity: 0.7 } }, ".", n) : `.${n}`, /* @__PURE__ */ S.createElement("span", { style: {
+}, "ElementNode"), H0 = /* @__PURE__ */ a(({ value: e }) => {
+  let t = new Date(e);
+  isNaN(Number(t)) && (O0.warn("Invalid date value:", e), t = null);
+  let r = ne();
+  if (!t)
+    return /* @__PURE__ */ S.createElement("span", { style: { whiteSpace: "nowrap", color: r.date } }, "Invalid date");
+  let [o, n, s] = t.toISOString().split(/[T.Z]/);
+  return /* @__PURE__ */ S.createElement("span", { style: { whiteSpace: "nowrap", color: r.date } }, o, /* @__PURE__ */ S.createElement("spa\
+n", { style: { opacity: 0.7 } }, "T"), n === "00:00:00" ? /* @__PURE__ */ S.createElement("span", { style: { opacity: 0.7 } }, n) : n, s ===
+  "000" ? /* @__PURE__ */ S.createElement("span", { style: { opacity: 0.7 } }, ".", s) : `.${s}`, /* @__PURE__ */ S.createElement("span", { style: {
   opacity: 0.7 } }, "Z"));
-}, "DateNode"), H0 = /* @__PURE__ */ a(({ name: e, message: t }) => {
+}, "DateNode"), q0 = /* @__PURE__ */ a(({ name: e, message: t }) => {
   let r = ne();
   return /* @__PURE__ */ S.createElement("span", { style: { color: r.error.name } }, e, t && ": ", t && /* @__PURE__ */ S.createElement("spa\
 n", { style: { color: r.error.message }, title: t.length > 50 ? t : "" }, ip(t, 50)));
-}, "ErrorNode"), q0 = /* @__PURE__ */ a(({ flags: e, source: t }) => {
+}, "ErrorNode"), $0 = /* @__PURE__ */ a(({ flags: e, source: t }) => {
   let r = ne();
   return /* @__PURE__ */ S.createElement("span", { style: { whiteSpace: "nowrap", color: r.regex.flags } }, "/", /* @__PURE__ */ S.createElement(
   "span", { style: { color: r.regex.source } }, t), "/", e);
-}, "RegExpNode"), $0 = /* @__PURE__ */ a(({ description: e }) => {
+}, "RegExpNode"), z0 = /* @__PURE__ */ a(({ description: e }) => {
   let t = ne();
   return /* @__PURE__ */ S.createElement("span", { style: { whiteSpace: "nowrap", color: t.instance } }, "Symbol(", e && /* @__PURE__ */ S.createElement(
   "span", { style: { color: t.meta } }, '"', e, '"'), ")");
-}, "SymbolNode"), z0 = /* @__PURE__ */ a(({ value: e }) => {
+}, "SymbolNode"), G0 = /* @__PURE__ */ a(({ value: e }) => {
   let t = ne();
-  return /* @__PURE__ */ S.createElement("span", { style: { color: t.meta } }, I0(e));
-}, "OtherNode"), G0 = /* @__PURE__ */ a(({ label: e }) => {
+  return /* @__PURE__ */ S.createElement("span", { style: { color: t.meta } }, P0(e));
+}, "OtherNode"), W0 = /* @__PURE__ */ a(({ label: e }) => {
   let t = ne(), { typography: r } = ha();
   return /* @__PURE__ */ S.createElement(
     "span",
@@ -8523,7 +8529,7 @@ n", { style: { color: r.error.message }, title: t.length > 50 ? t : "" }, ip(t,
   if (!e)
     return null;
   if (e.method === "step" && e.path?.length === 0)
-    return /* @__PURE__ */ S.createElement(G0, { label: e.args[0] });
+    return /* @__PURE__ */ S.createElement(W0, { label: e.args[0] });
   let r = e.path?.flatMap((s, i) => {
     let l = s.__callId__;
     return [
@@ -8554,14 +8560,14 @@ var pp = /* @__PURE__ */ a((e, t = 0) => {
   } catch {
     return e;
   }
-}, "parseValue"), J0 = up.span(({ theme: e }) => ({
+}, "parseValue"), K0 = up.span(({ theme: e }) => ({
   color: e.base === "light" ? e.color.positiveText : e.color.positive
-})), K0 = up.span(({ theme: e }) => ({
+})), Y0 = up.span(({ theme: e }) => ({
   color: e.base === "light" ? e.color.negativeText : e.color.negative
 })), ba = /* @__PURE__ */ a(({ value: e, parsed: t }) => t ? /* @__PURE__ */ W.createElement(at, { showObjectInspector: !0, value: e, style: {
-color: "#D43900" } }) : /* @__PURE__ */ W.createElement(K0, null, e), "Received"), Ea = /* @__PURE__ */ a(({ value: e, parsed: t }) => t ? typeof e ==
+color: "#D43900" } }) : /* @__PURE__ */ W.createElement(Y0, null, e), "Received"), Ea = /* @__PURE__ */ a(({ value: e, parsed: t }) => t ? typeof e ==
 "string" && e.startsWith("called with") ? /* @__PURE__ */ W.createElement(W.Fragment, null, e) : /* @__PURE__ */ W.createElement(at, { showObjectInspector: !0,
-value: e, style: { color: "#16B242" } }) : /* @__PURE__ */ W.createElement(J0, null, e), "Expected"), xa = /* @__PURE__ */ a(({
+value: e, style: { color: "#16B242" } }) : /* @__PURE__ */ W.createElement(K0, null, e), "Expected"), xa = /* @__PURE__ */ a(({
   message: e,
   style: t = {}
 }) => {
@@ -8573,7 +8579,7 @@ value: e, style: { color: "#16B242" } }) : /* @__PURE__ */ W.createElement(J0, n
       style: {
         margin: 0,
         padding: "8px 10px 8px 36px",
-        fontSize: W0.size.s1,
+        fontSize: J0.size.s1,
         ...t
       }
     },
@@ -8636,26 +8642,26 @@ value: e, style: { color: "#16B242" } }) : /* @__PURE__ */ W.createElement(J0, n
 
 // src/component-testing/components/StatusIcon.tsx
 import sr from "react";
-import { CheckIcon as Y0, CircleIcon as X0, PlayIcon as Z0, StopAltIcon as Q0 } from "@storybook/icons";
-import { transparentize as eE } from "polished";
-import { styled as tE, useTheme as rE } from "storybook/theming";
-var oE = tE.div({
+import { CheckIcon as X0, CircleIcon as Z0, PlayIcon as Q0, StopAltIcon as eE } from "@storybook/icons";
+import { transparentize as tE } from "polished";
+import { styled as rE, useTheme as oE } from "storybook/theming";
+var nE = rE.div({
   width: 14,
   height: 14,
   display: "flex",
   alignItems: "center",
   justifyContent: "center"
 }), lr = /* @__PURE__ */ a(({ status: e }) => {
-  let t = rE();
+  let t = oE();
   switch (e) {
     case "done":
-      return /* @__PURE__ */ sr.createElement(Y0, { color: t.color.positive, "data-testid": "icon-done" });
+      return /* @__PURE__ */ sr.createElement(X0, { color: t.color.positive, "data-testid": "icon-done" });
     case "error":
-      return /* @__PURE__ */ sr.createElement(Q0, { color: t.color.negative, "data-testid": "icon-error" });
+      return /* @__PURE__ */ sr.createElement(eE, { color: t.color.negative, "data-testid": "icon-error" });
     case "active":
-      return /* @__PURE__ */ sr.createElement(Z0, { color: t.color.secondary, "data-testid": "icon-active" });
+      return /* @__PURE__ */ sr.createElement(Q0, { color: t.color.secondary, "data-testid": "icon-active" });
     case "waiting":
-      return /* @__PURE__ */ sr.createElement(oE, { "data-testid": "icon-waiting" }, /* @__PURE__ */ sr.createElement(X0, { color: eE(0.5, "\
+      return /* @__PURE__ */ sr.createElement(nE, { "data-testid": "icon-waiting" }, /* @__PURE__ */ sr.createElement(Z0, { color: tE(0.5, "\
 #CCCCCC"), size: 6 }));
     default:
       return null;
@@ -8679,7 +8685,7 @@ var mp = Te.div({
     fontFamily: fo.fonts.base,
     fontSize: 13,
     ...t.status === "error" && {
-      backgroundColor: e.base === "dark" ? cE(0.93, e.color.negative) : e.background.warning
+      backgroundColor: e.base === "dark" ? pE(0.93, e.color.negative) : e.background.warning
     },
     paddingLeft: (t.ancestors?.length ?? 0) * 20
   }),
@@ -8731,10 +8737,10 @@ var mp = Te.div({
   display: "flex",
   alignItems: "center",
   padding: 6
-}), pE = Te(nE)(({ theme: e }) => ({
+}), uE = Te(aE)(({ theme: e }) => ({
   color: e.textMutedColor,
   margin: "0 3px"
-})), bp = Te(aE)(({ theme: e }) => ({
+})), bp = Te(sE)(({ theme: e }) => ({
   fontFamily: e.typography.fonts.base
 })), Ca = Te("div")(({ theme: e }) => ({
   padding: "8px 10px 8px 36px",
@@ -8744,23 +8750,23 @@ var mp = Te.div({
     margin: 0,
     padding: 0
   }
-})), uE = Te(sE)(({ theme: e }) => ({
+})), dE = Te(lE)(({ theme: e }) => ({
   color: e.color.seafoam
-})), dE = Te("span")(({ theme: e }) => ({
+})), mE = Te("span")(({ theme: e }) => ({
   color: e.color.defaultText,
   fontFamily: e.typography.fonts.base,
   fontSize: e.typography.size.s2 - 1
-})), mE = Te(iE)(({ theme: e }) => ({
+})), fE = Te(cE)(({ theme: e }) => ({
   display: "block",
   width: 12,
   height: 12,
   margin: 6,
   color: e.color.mediumdark
-})), fE = Te.span(({ theme: e }) => ({
-  color: e.base === "dark" ? "#5EC1FF" : "#0271B6"
 })), gE = Te.span(({ theme: e }) => ({
+  color: e.base === "dark" ? "#5EC1FF" : "#0271B6"
+})), hE = Te.span(({ theme: e }) => ({
   color: e.base === "dark" ? "#eee" : "#444"
-})), hE = Te.p(({ theme: e }) => ({
+})), yE = Te.p(({ theme: e }) => ({
   color: e.base === "dark" ? e.color.negative : e.color.negativeText,
   fontSize: e.typography.size.s2,
   maxWidth: 500,
@@ -8770,8 +8776,8 @@ var mp = Te.div({
   if (!e)
     return null;
   if (e.callId === he)
-    return /* @__PURE__ */ D.createElement(Ca, null, /* @__PURE__ */ D.createElement("pre", null, /* @__PURE__ */ D.createElement(fE, null, e.
-    name, ":"), " ", /* @__PURE__ */ D.createElement(gE, null, e.message)), /* @__PURE__ */ D.createElement(hE, null, "The component failed \
+    return /* @__PURE__ */ D.createElement(Ca, null, /* @__PURE__ */ D.createElement("pre", null, /* @__PURE__ */ D.createElement(gE, null, e.
+    name, ":"), " ", /* @__PURE__ */ D.createElement(hE, null, e.message)), /* @__PURE__ */ D.createElement(yE, 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 (ra(e))
@@ -8805,15 +8811,15 @@ ${e.diff}` : ""}`,
   let [u, d] = D.useState(!1), g = !o.goto || !e.interceptable || !!e.ancestors?.length;
   return s ? null : e.id === he ? /* @__PURE__ */ D.createElement(fp, { call: e, pausedAt: void 0 }, /* @__PURE__ */ D.createElement(gp, { isInteractive: !0 },
   /* @__PURE__ */ D.createElement(hp, { "aria-label": "Render step", call: e, disabled: !0 }, e.status === "error" ? /* @__PURE__ */ D.createElement(
-  lr, { status: "error" }) : /* @__PURE__ */ D.createElement(uE, null), /* @__PURE__ */ D.createElement(mp, { style: { marginLeft: 6, marginBottom: 1 } },
-  /* @__PURE__ */ D.createElement(dE, null, "Render story"))), /* @__PURE__ */ D.createElement(yp, null, /* @__PURE__ */ D.createElement(
+  lr, { status: "error" }) : /* @__PURE__ */ D.createElement(dE, null), /* @__PURE__ */ D.createElement(mp, { style: { marginLeft: 6, marginBottom: 1 } },
+  /* @__PURE__ */ D.createElement(mE, null, "Render story"))), /* @__PURE__ */ D.createElement(yp, null, /* @__PURE__ */ D.createElement(
     dp,
     {
       trigger: "hover",
       hasChrome: !1,
       tooltip: /* @__PURE__ */ D.createElement(bp, { note: "Render is the first step of all component tests" })
     },
-    /* @__PURE__ */ D.createElement(mE, null)
+    /* @__PURE__ */ D.createElement(fE, null)
   ))), e.status === "error" && e.exception?.callId === e.id && /* @__PURE__ */ D.createElement(Ep, { exception: e.exception })) : /* @__PURE__ */ D.createElement(
   fp, { call: e, pausedAt: c }, /* @__PURE__ */ D.createElement(gp, { isInteractive: g }, /* @__PURE__ */ D.createElement(
     hp,
@@ -8833,42 +8839,42 @@ ${e.diff}` : ""}`,
       hasChrome: !1,
       tooltip: /* @__PURE__ */ D.createElement(bp, { note: `${i ? "Show" : "Hide"} interactions` })
     },
-    /* @__PURE__ */ D.createElement(pE, { onClick: l }, /* @__PURE__ */ D.createElement(lE, null))
+    /* @__PURE__ */ D.createElement(uE, { onClick: l }, /* @__PURE__ */ D.createElement(iE, null))
   ))), e.status === "error" && e.exception?.callId === e.id && /* @__PURE__ */ D.createElement(Ep, { exception: e.exception }));
 }, "Interaction");
 
 // src/component-testing/components/Subnav.tsx
 import H from "react";
 import {
-  Bar as vE,
-  Button as SE,
-  IconButton as TE,
-  P as AE,
-  Separator as wE,
-  TooltipNote as OE,
+  Bar as SE,
+  Button as TE,
+  IconButton as AE,
+  P as wE,
+  Separator as OE,
+  TooltipNote as kE,
   WithTooltip as ir
 } from "storybook/internal/components";
 import {
-  FastForwardIcon as kE,
-  PlayBackIcon as _E,
-  PlayNextIcon as IE,
-  RewindIcon as PE,
-  SyncIcon as LE
+  FastForwardIcon as _E,
+  PlayBackIcon as IE,
+  PlayNextIcon as PE,
+  RewindIcon as LE,
+  SyncIcon as NE
 } from "@storybook/icons";
 import { styled as Le } from "storybook/theming";
 
 // src/component-testing/components/StatusBadge.tsx
-import yE from "react";
-import { styled as bE, typography as va } from "storybook/theming";
-var EE = {
+import bE from "react";
+import { styled as EE, typography as va } from "storybook/theming";
+var xE = {
   done: "positive",
   error: "negative",
   active: "warning",
   waiting: "warning"
-}, xE = bE.div(({ theme: e, status: t }) => ({
+}, CE = EE.div(({ theme: e, status: t }) => ({
   padding: "4px 6px 4px 8px",
   borderRadius: "4px",
-  backgroundColor: e.color[EE[t]],
+  backgroundColor: e.color[xE[t]],
   color: "white",
   fontFamily: va.fonts.base,
   textTransform: "uppercase",
@@ -8877,30 +8883,30 @@ var EE = {
   fontWeight: va.weight.bold,
   width: 65,
   textAlign: "center"
-})), CE = {
+})), vE = {
   done: "Pass",
   error: "Fail",
   active: "Runs",
   waiting: "Runs"
 }, Cp = /* @__PURE__ */ a(({ status: e }) => {
-  let t = CE[e];
-  return /* @__PURE__ */ yE.createElement(xE, { "aria-label": "Status of the test run", status: e }, t);
+  let t = vE[e];
+  return /* @__PURE__ */ bE.createElement(CE, { "aria-label": "Status of the test run", status: e }, t);
 }, "StatusBadge");
 
 // src/component-testing/components/Subnav.tsx
-var NE = Le.div(({ theme: e }) => ({
+var DE = Le.div(({ theme: e }) => ({
   boxShadow: `${e.appBorderColor} 0 -1px 0 0 inset`,
   background: e.background.app,
   position: "sticky",
   top: 0,
   zIndex: 1
-})), DE = Le.nav(({ theme: e }) => ({
+})), ME = Le.nav(({ theme: e }) => ({
   height: 40,
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
   paddingLeft: 15
-})), ME = Le(SE)(({ theme: e }) => ({
+})), BE = Le(TE)(({ theme: e }) => ({
   borderRadius: 4,
   padding: 6,
   color: e.textMutedColor,
@@ -8909,14 +8915,14 @@ var NE = Le.div(({ theme: e }) => ({
       color: e.color.secondary
     }
   }
-})), cr = Le(OE)(({ theme: e }) => ({
+})), cr = Le(kE)(({ theme: e }) => ({
   fontFamily: e.typography.fonts.base
-})), pr = Le(TE)(({ theme: e }) => ({
+})), pr = Le(AE)(({ theme: e }) => ({
   color: e.textMutedColor,
   margin: "0 3px"
-})), BE = Le(wE)({
+})), RE = Le(OE)({
   marginTop: 0
-}), RE = Le(AE)(({ theme: e }) => ({
+}), jE = Le(wE)(({ theme: e }) => ({
   color: e.textMutedColor,
   justifyContent: "flex-end",
   textAlign: "right",
@@ -8928,14 +8934,14 @@ var NE = Le.div(({ theme: e }) => ({
 })), vp = Le.div({
   display: "flex",
   alignItems: "center"
-}), jE = Le(pr)({
+}), FE = Le(pr)({
   marginLeft: 9
-}), FE = Le(ME)({
+}), VE = Le(BE)({
   marginLeft: 9,
   marginRight: 9,
   marginBottom: 1,
   lineHeight: "12px"
-}), VE = Le(pr)(({ theme: e, animating: t, disabled: r }) => ({
+}), UE = Le(pr)(({ theme: e, animating: t, disabled: r }) => ({
   opacity: r ? 0.5 : 1,
   svg: {
     animation: t ? `${e.animation.rotate360} 200ms ease-out` : void 0
@@ -8948,17 +8954,17 @@ var NE = Le.div(({ theme: e }) => ({
   onScrollToEnd: n
 }) => {
   let s = r === "error" ? "Scroll to error" : "Scroll to end";
-  return /* @__PURE__ */ H.createElement(NE, null, /* @__PURE__ */ H.createElement(vE, null, /* @__PURE__ */ H.createElement(DE, null, /* @__PURE__ */ H.
-  createElement(vp, null, /* @__PURE__ */ H.createElement(Cp, { status: r }), /* @__PURE__ */ H.createElement(FE, { onClick: n, disabled: !n },
-  s), /* @__PURE__ */ H.createElement(BE, null), /* @__PURE__ */ H.createElement(ir, { trigger: "hover", hasChrome: !1, tooltip: /* @__PURE__ */ H.
+  return /* @__PURE__ */ H.createElement(DE, null, /* @__PURE__ */ H.createElement(SE, null, /* @__PURE__ */ H.createElement(ME, null, /* @__PURE__ */ H.
+  createElement(vp, null, /* @__PURE__ */ H.createElement(Cp, { status: r }), /* @__PURE__ */ H.createElement(VE, { onClick: n, disabled: !n },
+  s), /* @__PURE__ */ H.createElement(RE, null), /* @__PURE__ */ H.createElement(ir, { trigger: "hover", hasChrome: !1, tooltip: /* @__PURE__ */ H.
   createElement(cr, { note: "Go to start" }) }, /* @__PURE__ */ H.createElement(
-    jE,
+    FE,
     {
       "aria-label": "Go to start",
       onClick: e.start,
       disabled: !t.start
     },
-    /* @__PURE__ */ H.createElement(PE, null)
+    /* @__PURE__ */ H.createElement(LE, null)
   )), /* @__PURE__ */ H.createElement(ir, { trigger: "hover", hasChrome: !1, tooltip: /* @__PURE__ */ H.createElement(cr, { note: "Go back" }) },
   /* @__PURE__ */ H.createElement(
     pr,
@@ -8967,7 +8973,7 @@ var NE = Le.div(({ theme: e }) => ({
       onClick: e.back,
       disabled: !t.back
     },
-    /* @__PURE__ */ H.createElement(_E, null)
+    /* @__PURE__ */ H.createElement(IE, null)
   )), /* @__PURE__ */ H.createElement(ir, { trigger: "hover", hasChrome: !1, tooltip: /* @__PURE__ */ H.createElement(cr, { note: "Go forwar\
 d" }) }, /* @__PURE__ */ H.createElement(
     pr,
@@ -8976,7 +8982,7 @@ d" }) }, /* @__PURE__ */ H.createElement(
       onClick: e.next,
       disabled: !t.next
     },
-    /* @__PURE__ */ H.createElement(IE, null)
+    /* @__PURE__ */ H.createElement(PE, null)
   )), /* @__PURE__ */ H.createElement(ir, { trigger: "hover", hasChrome: !1, tooltip: /* @__PURE__ */ H.createElement(cr, { note: "Go to end" }) },
   /* @__PURE__ */ H.createElement(
     pr,
@@ -8985,18 +8991,18 @@ d" }) }, /* @__PURE__ */ H.createElement(
       onClick: e.end,
       disabled: !t.end
     },
-    /* @__PURE__ */ H.createElement(kE, null)
+    /* @__PURE__ */ H.createElement(_E, null)
   )), /* @__PURE__ */ H.createElement(ir, { trigger: "hover", hasChrome: !1, tooltip: /* @__PURE__ */ H.createElement(cr, { note: "Rerun" }) },
-  /* @__PURE__ */ H.createElement(VE, { "aria-label": "Rerun", onClick: e.rerun }, /* @__PURE__ */ H.createElement(LE, null)))), o && /* @__PURE__ */ H.
-  createElement(vp, null, /* @__PURE__ */ H.createElement(RE, null, o)))));
+  /* @__PURE__ */ H.createElement(UE, { "aria-label": "Rerun", onClick: e.rerun }, /* @__PURE__ */ H.createElement(NE, null)))), o && /* @__PURE__ */ H.
+  createElement(vp, null, /* @__PURE__ */ H.createElement(jE, null, o)))));
 }, "Subnav");
 
 // src/component-testing/components/TestDiscrepancyMessage.tsx
 import Tp from "react";
-import { Link as UE } from "storybook/internal/components";
-import { useStorybookApi as HE } from "storybook/manager-api";
-import { styled as qE } from "storybook/theming";
-var $E = qE.div(({ theme: { color: e, typography: t, background: r } }) => ({
+import { Link as HE } from "storybook/internal/components";
+import { useStorybookApi as qE } from "storybook/manager-api";
+import { styled as $E } from "storybook/theming";
+var zE = $E.div(({ theme: { color: e, typography: t, background: r } }) => ({
   textAlign: "start",
   padding: "11px 15px",
   fontSize: `${t.size.s2}px`,
@@ -9017,22 +9023,22 @@ var $E = qE.div(({ theme: { color: e, typography: t, background: r } }) => ({
     boxShadow: "0 0 0 1px rgba(0, 0, 0, 0.1)"
   }
 })), Ap = /* @__PURE__ */ a(({ browserTestStatus: e }) => {
-  let r = HE().getDocsUrl({
+  let r = qE().getDocsUrl({
     subpath: zi,
     versioned: !0,
     renderer: !0
   }), [o, n] = e === "error" ? ["the CLI", "this browser"] : ["this browser", "the CLI"];
-  return /* @__PURE__ */ Tp.createElement($E, null, "This component test passed in ", o, ", but the tests failed in ", n, ".", " ", /* @__PURE__ */ Tp.
-  createElement(UE, { href: r, target: "_blank", withArrow: !0 }, "Learn what could cause this"));
+  return /* @__PURE__ */ Tp.createElement(zE, null, "This component test passed in ", o, ", but the tests failed in ", n, ".", " ", /* @__PURE__ */ Tp.
+  createElement(HE, { href: r, target: "_blank", withArrow: !0 }, "Learn what could cause this"));
 }, "TestDiscrepancyMessage");
 
 // src/component-testing/components/InteractionsPanel.tsx
-var GE = Dt.div(({ theme: e }) => ({
+var WE = Dt.div(({ theme: e }) => ({
   height: "100%",
   background: e.background.content
 })), wp = Dt.div(({ theme: e }) => ({
   borderBottom: `1px solid ${e.appBorderColor}`,
-  backgroundColor: e.base === "dark" ? zE(0.93, e.color.negative) : e.background.warning,
+  backgroundColor: e.base === "dark" ? GE(0.93, e.color.negative) : e.background.warning,
   padding: 15,
   fontSize: e.typography.size.s2 - 1,
   lineHeight: "19px"
@@ -9048,7 +9054,7 @@ var GE = Dt.div(({ theme: e }) => ({
 })), Op = Dt.div({
   paddingBottom: 4,
   fontWeight: "bold"
-}), WE = Dt.p({
+}), JE = Dt.p({
   margin: 0,
   padding: "0 0 20px"
 }), kp = Dt.pre(({ theme: e }) => ({
@@ -9076,7 +9082,7 @@ var GE = Dt.div(({ theme: e }) => ({
     browserTestStatus: m
   }) {
     let y = Nt();
-    return /* @__PURE__ */ K.createElement(GE, null, f && /* @__PURE__ */ K.createElement(Ap, { browserTestStatus: m }), (n.length > 0 || i) &&
+    return /* @__PURE__ */ K.createElement(WE, null, f && /* @__PURE__ */ K.createElement(Ap, { browserTestStatus: m }), (n.length > 0 || i) &&
     /* @__PURE__ */ K.createElement(
       Sp,
       {
@@ -9110,7 +9116,7 @@ var GE = Dt.div(({ theme: e }) => ({
         }
       }
     )), c && /* @__PURE__ */ K.createElement(wp, null, /* @__PURE__ */ K.createElement(Op, null, "Unhandled Errors"), /* @__PURE__ */ K.createElement(
-    WE, null, "Found ", c.length, " unhandled error", c.length > 1 ? "s" : "", " ", "while running the play function. This might cause false\
+    JE, null, "Found ", c.length, " unhandled error", c.length > 1 ? "s" : "", " ", "while running the play function. This might cause false\
  positive assertions. Resolve unhandled errors or ignore unhandled errors with setting the", /* @__PURE__ */ K.createElement(Sa, null, "test\
 .dangerouslyIgnoreUnhandledErrors"), " ", "parameter to ", /* @__PURE__ */ K.createElement(Sa, null, "true"), "."), c.map((h, b) => /* @__PURE__ */ K.createElement(
     kp, { key: b, "data-chromatic": "ignore" }, _p(h)))), /* @__PURE__ */ K.createElement("div", { ref: p }), !u && !l && !n.some((h) => h.id !==
@@ -9129,7 +9135,7 @@ var go = {
   goto: !1,
   next: !1,
   end: !1
-}, ax = {
+}, sx = {
   done: "status-value:success",
   error: "status-value:error",
   active: "status-value:pending",
@@ -9171,14 +9177,14 @@ var go = {
   callId: he,
   status: e,
   ancestors: []
-}), "getInternalRenderLogItem"), Np = KE(/* @__PURE__ */ a(function({ storyId: t }) {
-  let { statusValue: r, testRunId: o } = tx((R) => {
+}), "getInternalRenderLogItem"), Np = YE(/* @__PURE__ */ a(function({ storyId: t }) {
+  let { statusValue: r, testRunId: o } = rx((R) => {
     let F = R[t]?.[$i];
     return {
       statusValue: F?.value,
       testRunId: F?.data?.testRunId
     };
-  }), [n, s] = rx(ft, {
+  }), [n, s] = ox(ft, {
     controlStates: go,
     isErrored: !1,
     pausedAt: void 0,
@@ -9206,7 +9212,7 @@ var go = {
       { root: Oa.document.querySelector("#panel-tab-content") }
     ), v.current && R.observe(v.current)), () => R?.disconnect();
   }, []);
-  let A = ox(
+  let A = nx(
     {
       [tt.CALL]: T,
       [tt.SYNC]: (R) => {
@@ -9228,7 +9234,7 @@ var go = {
           };
         });
       },
-      [ZE]: (R) => {
+      [QE]: (R) => {
         if (R.newPhase === "preparing")
           x.current = [yo("active")], C.current.set(he, ka(t)), s({
             controlStates: go,
@@ -9261,7 +9267,7 @@ var go = {
           );
         }
       },
-      [QE]: (R) => {
+      [ex]: (R) => {
         x.current = [yo("error")], C.current.set(
           he,
           ka(t, { ...R, callId: he })
@@ -9285,10 +9291,10 @@ var go = {
           })
         );
       },
-      [XE]: (R) => {
+      [ZE]: (R) => {
         s((F) => ({ ...F, caughtException: R, hasException: !0 }));
       },
-      [ex]: (R) => {
+      [tx]: (R) => {
         s((F) => ({ ...F, unhandledErrors: R, hasException: !0 }));
       }
     },
@@ -9315,15 +9321,15 @@ var go = {
       next: /* @__PURE__ */ a(() => A(tt.NEXT, { storyId: t }), "next"),
       end: /* @__PURE__ */ a(() => A(tt.END, { storyId: t }), "end"),
       rerun: /* @__PURE__ */ a(() => {
-        A(YE, { storyId: t });
+        A(XE, { storyId: t });
       }, "rerun")
     }),
     [A, t]
-  ), V = nx("fileName", ""), [Q] = V.toString().split("/").slice(-1), ae = /* @__PURE__ */ a(() => i?.scrollIntoView({ behavior: "smooth", block: "\
+  ), V = ax("fileName", ""), [Q] = V.toString().split("/").slice(-1), ae = /* @__PURE__ */ a(() => i?.scrollIntoView({ behavior: "smooth", block: "\
 end" }), "scrollToTarget"), Ee = !!b || !!E || // @ts-expect-error TODO
   y.some((R) => R.status === "error"), se = Lp(() => !h && (y.length > 0 || Ee) ? Ee ? "error" : "done" : h ? "active" : void 0, [h, y, Ee]);
   return Ta(() => {
-    if (se && r && r !== "status-value:pending" && r !== ax[se]) {
+    if (se && r && r !== "status-value:pending" && r !== sx[se]) {
       let F = setTimeout(
         () => g((Y) => (Y || A(qi, {
           type: "test-discrepancy",
@@ -9339,7 +9345,7 @@ end" }), "scrollToTarget"), Ee = !!b || !!E || // @ts-expect-error TODO
       return () => clearTimeout(F);
     } else
       g(!1);
-  }, [A, se, r, t, o]), /* @__PURE__ */ Pp.createElement(JE, { key: "component-tests" }, /* @__PURE__ */ Pp.createElement(
+  }, [A, se, r, t, o]), /* @__PURE__ */ Pp.createElement(KE, { key: "component-tests" }, /* @__PURE__ */ Pp.createElement(
     Ip,
     {
       hasResultMismatch: d,
@@ -9363,12 +9369,12 @@ end" }), "scrollToTarget"), Ee = !!b || !!E || // @ts-expect-error TODO
 
 // src/component-testing/components/PanelTitle.tsx
 import bo from "react";
-import { Badge as sx } from "storybook/internal/components";
-import { useAddonState as lx, useStorybookApi as ix } from "storybook/manager-api";
+import { Badge as lx } from "storybook/internal/components";
+import { useAddonState as ix, useStorybookApi as cx } from "storybook/manager-api";
 function Dp() {
-  let t = ix().getSelectedPanel(), [r = {}] = lx(ft), { isErrored: o, hasException: n, interactionsCount: s } = r;
+  let t = cx().getSelectedPanel(), [r = {}] = ix(ft), { isErrored: o, hasException: n, interactionsCount: s } = r;
   return /* @__PURE__ */ bo.createElement("div", { style: { display: "flex", alignItems: "center", gap: 6 } }, /* @__PURE__ */ bo.createElement(
-  "span", null, "Component tests"), s && !o && !n ? /* @__PURE__ */ bo.createElement(sx, { compact: !0, status: t === Xr ? "active" : "neutr\
+  "span", null, "Component tests"), s && !o && !n ? /* @__PURE__ */ bo.createElement(lx, { compact: !0, status: t === Xr ? "active" : "neutr\
 al" }, s) : null, o || n ? /* @__PURE__ */ bo.createElement(lr, { status: "error" }) : null);
 }
 a(Dp, "PanelTitle");
@@ -9379,27 +9385,27 @@ var Bp = Mp.register(ft, () => {
     storyId: t.storyId
   }), "filter");
   Mp.add(Xr, {
-    type: ux.PANEL,
+    type: dx.PANEL,
     title: /* @__PURE__ */ a(() => /* @__PURE__ */ Eo.createElement(Dp, null), "title"),
     match: /* @__PURE__ */ a(({ viewMode: t }) => t === "story", "match"),
-    render: /* @__PURE__ */ a(({ active: t }) => /* @__PURE__ */ Eo.createElement(cx, { active: !!t }, /* @__PURE__ */ Eo.createElement(px, {
+    render: /* @__PURE__ */ a(({ active: t }) => /* @__PURE__ */ Eo.createElement(px, { active: !!t }, /* @__PURE__ */ Eo.createElement(ux, {
     filter: e }, ({ storyId: r }) => /* @__PURE__ */ Eo.createElement(Np, { storyId: r }))), "render")
   });
 });
 
 // src/backgrounds/manager.tsx
-import Tx from "react";
-import { addons as Up, types as Ax } from "storybook/manager-api";
+import Ax from "react";
+import { addons as Up, types as wx } from "storybook/manager-api";
 
 // src/backgrounds/components/Tool.tsx
-import je, { Fragment as dx, memo as Fp, useCallback as mx, useState as fx } from "react";
-import { IconButton as jp, TooltipLinkList as gx, WithTooltip as hx } from "storybook/internal/components";
-import { CircleIcon as yx, GridIcon as bx, PhotoIcon as Ex, RefreshIcon as xx } from "@storybook/icons";
-import { useGlobals as Cx, useParameter as vx } from "storybook/manager-api";
+import je, { Fragment as mx, memo as Fp, useCallback as fx, useState as gx } from "react";
+import { IconButton as jp, TooltipLinkList as hx, WithTooltip as yx } from "storybook/internal/components";
+import { CircleIcon as bx, GridIcon as Ex, PhotoIcon as xx, RefreshIcon as Cx } from "@storybook/icons";
+import { useGlobals as vx, useParameter as Sx } from "storybook/manager-api";
 
 // src/backgrounds/constants.ts
 var xo = "storybook/background", ur = "backgrounds";
-var k2 = {
+var I2 = {
   UPDATE: `${xo}/update`
 };
 
@@ -9411,12 +9417,12 @@ var Rp = {
 
 // src/backgrounds/components/Tool.tsx
 var Vp = Fp(/* @__PURE__ */ a(function() {
-  let t = vx(ur), [r, o, n] = Cx(), [s, i] = fx(!1), { options: l = Rp, disable: c = !0 } = t || {};
+  let t = Sx(ur), [r, o, n] = vx(), [s, i] = gx(!1), { options: l = Rp, disable: c = !0 } = t || {};
   if (c)
     return null;
   let u = r[ur] || {}, d = u.value, g = u.grid || !1, p = l[d], f = !!n?.[ur], m = Object.keys(l).length;
   return /* @__PURE__ */ je.createElement(
-    Sx,
+    Tx,
     {
       length: m,
       backgroundMap: l,
@@ -9429,7 +9435,7 @@ var Vp = Fp(/* @__PURE__ */ a(function() {
       isTooltipVisible: s
     }
   );
-}, "BackgroundSelector")), Sx = Fp(/* @__PURE__ */ a(function(t) {
+}, "BackgroundSelector")), Tx = Fp(/* @__PURE__ */ a(function(t) {
   let {
     item: r,
     length: o,
@@ -9440,7 +9446,7 @@ var Vp = Fp(/* @__PURE__ */ a(function() {
     isLocked: c,
     isGridActive: u,
     isTooltipVisible: d
-  } = t, g = mx(
+  } = t, g = fx(
     (p) => {
       n({
         [ur]: p
@@ -9448,7 +9454,7 @@ var Vp = Fp(/* @__PURE__ */ a(function() {
     },
     [n]
   );
-  return /* @__PURE__ */ je.createElement(dx, null, /* @__PURE__ */ je.createElement(
+  return /* @__PURE__ */ je.createElement(mx, null, /* @__PURE__ */ je.createElement(
     jp,
     {
       key: "grid",
@@ -9457,22 +9463,22 @@ var Vp = Fp(/* @__PURE__ */ a(function() {
       title: "Apply a grid to the preview",
       onClick: () => g({ value: l, grid: !u })
     },
-    /* @__PURE__ */ je.createElement(bx, null)
+    /* @__PURE__ */ je.createElement(Ex, null)
   ), o > 0 ? /* @__PURE__ */ je.createElement(
-    hx,
+    yx,
     {
       key: "background",
       placement: "top",
       closeOnOutsideClick: !0,
       tooltip: ({ onHide: p }) => /* @__PURE__ */ je.createElement(
-        gx,
+        hx,
         {
           links: [
             ...r ? [
               {
                 id: "reset",
                 title: "Reset background",
-                icon: /* @__PURE__ */ je.createElement(xx, null),
+                icon: /* @__PURE__ */ je.createElement(Cx, null),
                 onClick: /* @__PURE__ */ a(() => {
                   g({ value: void 0, grid: u }), p();
                 }, "onClick")
@@ -9481,7 +9487,7 @@ var Vp = Fp(/* @__PURE__ */ a(function() {
             ...Object.entries(i).map(([f, m]) => ({
               id: f,
               title: m.name,
-              icon: /* @__PURE__ */ je.createElement(yx, { color: m?.value || "grey" }),
+              icon: /* @__PURE__ */ je.createElement(bx, { color: m?.value || "grey" }),
               active: f === l,
               onClick: /* @__PURE__ */ a(() => {
                 g({ value: f, grid: u }), p();
@@ -9500,7 +9506,7 @@ var Vp = Fp(/* @__PURE__ */ a(function() {
         title: "Change the background of the preview",
         active: !!r || d
       },
-      /* @__PURE__ */ je.createElement(Ex, null)
+      /* @__PURE__ */ je.createElement(xx, null)
     )
   ) : null);
 }, "PureTool"));
@@ -9509,25 +9515,25 @@ var Vp = Fp(/* @__PURE__ */ a(function() {
 var Hp = Up.register(xo, () => {
   Up.add(xo, {
     title: "Backgrounds",
-    type: Ax.TOOL,
+    type: wx.TOOL,
     match: /* @__PURE__ */ a(({ viewMode: e, tabId: t }) => !!(e && e.match(/^(story|docs)$/)) && !t, "match"),
-    render: /* @__PURE__ */ a(() => /* @__PURE__ */ Tx.createElement(Vp, null), "render")
+    render: /* @__PURE__ */ a(() => /* @__PURE__ */ Ax.createElement(Vp, null), "render")
   });
 });
 
 // src/measure/manager.tsx
-import Lx from "react";
-import { addons as zp, types as Nx } from "storybook/manager-api";
+import Nx from "react";
+import { addons as zp, types as Dx } from "storybook/manager-api";
 
 // src/measure/Tool.tsx
-import qp, { useCallback as wx, useEffect as Ox } from "react";
-import { IconButton as kx } from "storybook/internal/components";
-import { RulerIcon as _x } from "@storybook/icons";
-import { useGlobals as Ix, useStorybookApi as Px } from "storybook/manager-api";
+import qp, { useCallback as Ox, useEffect as kx } from "react";
+import { IconButton as _x } from "storybook/internal/components";
+import { RulerIcon as Ix } from "@storybook/icons";
+import { useGlobals as Px, useStorybookApi as Lx } from "storybook/manager-api";
 
 // src/measure/constants.ts
 var st = "storybook/measure-addon", Co = `${st}/tool`;
-var z2 = {
+var W2 = {
   RESULT: `${st}/result`,
   REQUEST: `${st}/request`,
   CLEAR: `${st}/clear`
@@ -9535,13 +9541,13 @@ var z2 = {
 
 // src/measure/Tool.tsx
 var $p = /* @__PURE__ */ a(() => {
-  let [e, t] = Ix(), { measureEnabled: r } = e || {}, o = Px(), n = wx(
+  let [e, t] = Px(), { measureEnabled: r } = e || {}, o = Lx(), n = Ox(
     () => t({
       measureEnabled: !r
     }),
     [t, r]
   );
-  return Ox(() => {
+  return kx(() => {
     o.setAddonShortcut(st, {
       label: "Toggle Measure [M]",
       defaultShortcut: ["M"],
@@ -9550,49 +9556,49 @@ var $p = /* @__PURE__ */ a(() => {
       action: n
     });
   }, [n, o]), /* @__PURE__ */ qp.createElement(
-    kx,
+    _x,
     {
       key: Co,
       active: r,
       title: "Enable measure",
       onClick: n
     },
-    /* @__PURE__ */ qp.createElement(_x, null)
+    /* @__PURE__ */ qp.createElement(Ix, null)
   );
 }, "Tool");
 
 // src/measure/manager.tsx
 var Gp = zp.register(st, () => {
   zp.add(Co, {
-    type: Nx.TOOL,
+    type: Dx.TOOL,
     title: "Measure",
     match: /* @__PURE__ */ a(({ viewMode: e, tabId: t }) => e === "story" && !t, "match"),
-    render: /* @__PURE__ */ a(() => /* @__PURE__ */ Lx.createElement($p, null), "render")
+    render: /* @__PURE__ */ a(() => /* @__PURE__ */ Nx.createElement($p, null), "render")
   });
 });
 
 // src/outline/manager.tsx
-import Ux from "react";
-import { addons as Kp, types as Hx } from "storybook/manager-api";
+import Hx from "react";
+import { addons as Kp, types as qx } from "storybook/manager-api";
 
 // src/outline/OutlineSelector.tsx
-import Wp, { memo as Dx, useCallback as Mx, useEffect as Bx } from "react";
-import { IconButton as Rx } from "storybook/internal/components";
-import { OutlineIcon as jx } from "@storybook/icons";
-import { useGlobals as Fx, useStorybookApi as Vx } from "storybook/manager-api";
+import Wp, { memo as Mx, useCallback as Bx, useEffect as Rx } from "react";
+import { IconButton as jx } from "storybook/internal/components";
+import { OutlineIcon as Fx } from "@storybook/icons";
+import { useGlobals as Vx, useStorybookApi as Ux } from "storybook/manager-api";
 
 // src/outline/constants.ts
 var dr = "storybook/outline", _a = "outline";
 
 // src/outline/OutlineSelector.tsx
-var Jp = Dx(/* @__PURE__ */ a(function() {
-  let [t, r] = Fx(), o = Vx(), n = [!0, "true"].includes(t[_a]), s = Mx(
+var Jp = Mx(/* @__PURE__ */ a(function() {
+  let [t, r] = Vx(), o = Ux(), n = [!0, "true"].includes(t[_a]), s = Bx(
     () => r({
       [_a]: !n
     }),
     [n]
   );
-  return Bx(() => {
+  return Rx(() => {
     o.setAddonShortcut(dr, {
       label: "Toggle Outline",
       defaultShortcut: ["alt", "O"],
@@ -9601,14 +9607,14 @@ var Jp = Dx(/* @__PURE__ */ a(function() {
       action: s
     });
   }, [s, o]), /* @__PURE__ */ Wp.createElement(
-    Rx,
+    jx,
     {
       key: "outline",
       active: n,
       title: "Apply outlines to the preview",
       onClick: s
     },
-    /* @__PURE__ */ Wp.createElement(jx, null)
+    /* @__PURE__ */ Wp.createElement(Fx, null)
   );
 }, "OutlineSelector"));
 
@@ -9616,25 +9622,25 @@ var Jp = Dx(/* @__PURE__ */ a(function() {
 var Yp = Kp.register(dr, () => {
   Kp.add(dr, {
     title: "Outline",
-    type: Hx.TOOL,
+    type: qx.TOOL,
     match: /* @__PURE__ */ a(({ viewMode: e, tabId: t }) => !!(e && e.match(/^(story|docs)$/)) && !t, "match"),
-    render: /* @__PURE__ */ a(() => /* @__PURE__ */ Ux.createElement(Jp, null), "render")
+    render: /* @__PURE__ */ a(() => /* @__PURE__ */ Hx.createElement(Jp, null), "render")
   });
 });
 
 // src/viewport/manager.tsx
 import * as lu from "react";
-import { addons as su, types as p1 } from "storybook/manager-api";
+import { addons as su, types as u1 } from "storybook/manager-api";
 
 // src/viewport/components/Tool.tsx
-import be, { Fragment as Yx, useCallback as Xx, useEffect as Zx, useState as Qx } from "react";
-import { IconButton as e1, TooltipLinkList as t1, WithTooltip as r1 } from "storybook/internal/components";
-import { GrowIcon as o1, RefreshIcon as n1, TransferIcon as a1 } from "@storybook/icons";
-import { useGlobals as s1, useParameter as l1 } from "storybook/manager-api";
-import { Global as i1 } from "storybook/theming";
+import be, { Fragment as Xx, useCallback as Zx, useEffect as Qx, useState as e1 } from "react";
+import { IconButton as t1, TooltipLinkList as r1, WithTooltip as o1 } from "storybook/internal/components";
+import { GrowIcon as n1, RefreshIcon as a1, TransferIcon as s1 } from "@storybook/icons";
+import { useGlobals as l1, useParameter as i1 } from "storybook/manager-api";
+import { Global as c1 } from "storybook/theming";
 
 // src/viewport/constants.ts
-var lt = "storybook/viewport", mr = "viewport", x_ = `${lt}/panel`, Xp = `${lt}/tool`;
+var lt = "storybook/viewport", mr = "viewport", v_ = `${lt}/panel`, Xp = `${lt}/tool`;
 
 // src/viewport/defaults.ts
 var Zp = {
@@ -9683,10 +9689,10 @@ var Mt = {
 };
 
 // src/viewport/shortcuts.ts
-var Qp = /* @__PURE__ */ a((e, t) => e.indexOf(t), "getCurrentViewportIndex"), qx = /* @__PURE__ */ a((e, t) => {
+var Qp = /* @__PURE__ */ a((e, t) => e.indexOf(t), "getCurrentViewportIndex"), $x = /* @__PURE__ */ a((e, t) => {
   let r = Qp(e, t);
   return r === e.length - 1 ? e[0] : e[r + 1];
-}, "getNextViewport"), $x = /* @__PURE__ */ a((e, t) => {
+}, "getNextViewport"), zx = /* @__PURE__ */ a((e, t) => {
   let r = Qp(e, t);
   return r < 1 ? e[e.length - 1] : e[r - 1];
 }, "getPreviousViewport"), eu = /* @__PURE__ */ a(async (e, t, r, o) => {
@@ -9696,7 +9702,7 @@ var Qp = /* @__PURE__ */ a((e, t) => e.indexOf(t), "getCurrentViewportIndex"), q
     actionName: "previous",
     action: /* @__PURE__ */ a(() => {
       r({
-        viewport: $x(o, t)
+        viewport: zx(o, t)
       });
     }, "action")
   }), await e.setAddonShortcut(lt, {
@@ -9705,7 +9711,7 @@ var Qp = /* @__PURE__ */ a((e, t) => e.indexOf(t), "getCurrentViewportIndex"), q
     actionName: "next",
     action: /* @__PURE__ */ a(() => {
       r({
-        viewport: qx(o, t)
+        viewport: $x(o, t)
       });
     }, "action")
   }), await e.setAddonShortcut(lt, {
@@ -9721,9 +9727,9 @@ var Qp = /* @__PURE__ */ a((e, t) => e.indexOf(t), "getCurrentViewportIndex"), q
 }, "registerShortcuts");
 
 // src/viewport/utils.tsx
-import vo, { Fragment as zx } from "react";
-import { IconButton as Gx } from "storybook/internal/components";
-import { BrowserIcon as Wx, MobileIcon as Jx, TabletIcon as Kx } from "@storybook/icons";
+import vo, { Fragment as Gx } from "react";
+import { IconButton as Wx } from "storybook/internal/components";
+import { BrowserIcon as Jx, MobileIcon as Kx, TabletIcon as Yx } from "@storybook/icons";
 import { styled as So } from "storybook/theming";
 var tu = So.div({
   display: "inline-flex",
@@ -9740,24 +9746,24 @@ var tu = So.div({
   borderTop: "3px solid transparent",
   borderBottom: "3px solid transparent",
   background: "transparent"
-})), ru = So(Gx)(() => ({
+})), ru = So(Wx)(() => ({
   display: "inline-flex",
   alignItems: "center"
 })), ou = So.div(({ theme: e }) => ({
   fontSize: e.typography.size.s2 - 1,
   marginLeft: 10
 })), nu = {
-  desktop: /* @__PURE__ */ vo.createElement(Wx, null),
-  mobile: /* @__PURE__ */ vo.createElement(Jx, null),
-  tablet: /* @__PURE__ */ vo.createElement(Kx, null),
-  other: /* @__PURE__ */ vo.createElement(zx, null)
+  desktop: /* @__PURE__ */ vo.createElement(Jx, null),
+  mobile: /* @__PURE__ */ vo.createElement(Kx, null),
+  tablet: /* @__PURE__ */ vo.createElement(Yx, null),
+  other: /* @__PURE__ */ vo.createElement(Gx, null)
 };
 
 // src/viewport/components/Tool.tsx
 var au = /* @__PURE__ */ a(({ api: e }) => {
-  let t = l1(mr), [r, o, n] = s1(), [s, i] = Qx(!1), { options: l = Zp, disable: c } = t || {}, u = r?.[mr] || {}, d = typeof u == "string" ?
+  let t = i1(mr), [r, o, n] = l1(), [s, i] = e1(!1), { options: l = Zp, disable: c } = t || {}, u = r?.[mr] || {}, d = typeof u == "string" ?
   u : u.value, g = typeof u == "string" ? !1 : u.isRotated, p = l[d] || Mt, f = s || p !== Mt, m = mr in n, y = Object.keys(l).length;
-  if (Zx(() => {
+  if (Qx(() => {
     eu(e, d, o, Object.keys(l));
   }, [l, d, o, e]), p.styles === null || !l || y < 1)
     return null;
@@ -9767,7 +9773,7 @@ var au = /* @__PURE__ */ a(({ api: e }) => {
     ), null;
   let h = g ? p.styles.height : p.styles.width, b = g ? p.styles.width : p.styles.height;
   return c ? null : /* @__PURE__ */ be.createElement(
-    c1,
+    p1,
     {
       item: p,
       updateGlobals: o,
@@ -9781,7 +9787,7 @@ var au = /* @__PURE__ */ a(({ api: e }) => {
       height: b
     }
   );
-}, "ViewportTool"), c1 = be.memo(/* @__PURE__ */ a(function(t) {
+}, "ViewportTool"), p1 = be.memo(/* @__PURE__ */ a(function(t) {
   let {
     item: r,
     viewportMap: o,
@@ -9793,23 +9799,23 @@ var au = /* @__PURE__ */ a(({ api: e }) => {
     isActive: u,
     width: d,
     height: g
-  } = t, p = Xx(
+  } = t, p = Zx(
     (f) => i({ [mr]: f }),
     [i]
   );
-  return /* @__PURE__ */ be.createElement(Yx, null, /* @__PURE__ */ be.createElement(
-    r1,
+  return /* @__PURE__ */ be.createElement(Xx, null, /* @__PURE__ */ be.createElement(
+    o1,
     {
       placement: "bottom",
       tooltip: ({ onHide: f }) => /* @__PURE__ */ be.createElement(
-        t1,
+        r1,
         {
           links: [
             ...length > 0 && r !== Mt ? [
               {
                 id: "reset",
                 title: "Reset viewport",
-                icon: /* @__PURE__ */ be.createElement(n1, null),
+                icon: /* @__PURE__ */ be.createElement(a1, null),
                 onClick: /* @__PURE__ */ a(() => {
                   p({ value: void 0, isRotated: !1 }), f();
                 }, "onClick")
@@ -9841,11 +9847,11 @@ var au = /* @__PURE__ */ a(({ api: e }) => {
           p({ value: void 0, isRotated: !1 });
         }
       },
-      /* @__PURE__ */ be.createElement(o1, null),
+      /* @__PURE__ */ be.createElement(n1, null),
       r !== Mt ? /* @__PURE__ */ be.createElement(ou, null, r.name, " ", s ? "(L)" : "(P)") : null
     )
   ), /* @__PURE__ */ be.createElement(
-    i1,
+    c1,
     {
       styles: {
         'iframe[data-is-storybook="true"]': { width: d, height: g }
@@ -9853,7 +9859,7 @@ var au = /* @__PURE__ */ a(({ api: e }) => {
     }
   ), r !== Mt ? /* @__PURE__ */ be.createElement(tu, null, /* @__PURE__ */ be.createElement(Ia, { title: "Viewport width" }, d.replace("px",
   "")), c ? "/" : /* @__PURE__ */ be.createElement(
-    e1,
+    t1,
     {
       key: "viewport-rotate",
       title: "Rotate viewport",
@@ -9861,7 +9867,7 @@ var au = /* @__PURE__ */ a(({ api: e }) => {
         p({ value: n, isRotated: !s });
       }
     },
-    /* @__PURE__ */ be.createElement(a1, null)
+    /* @__PURE__ */ be.createElement(s1, null)
   ), /* @__PURE__ */ be.createElement(Ia, { title: "Viewport height" }, g.replace("px", ""))) : null);
 }, "PureTool"));
 
@@ -9869,31 +9875,31 @@ var au = /* @__PURE__ */ a(({ api: e }) => {
 var iu = su.register(lt, (e) => {
   su.add(Xp, {
     title: "viewport / media-queries",
-    type: p1.TOOL,
+    type: u1.TOOL,
     match: /* @__PURE__ */ a(({ viewMode: t, tabId: r }) => t === "story" && !r, "match"),
     render: /* @__PURE__ */ a(() => /* @__PURE__ */ lu.createElement(au, { api: e }), "render")
   });
 });
 
 // src/core-server/presets/common-manager.ts
-var m1 = "tag-filters", f1 = "static-filter", g1 = d1.register(m1, (e) => {
-  let t = Object.entries(u1.TAGS_OPTIONS ?? {}).reduce(
+var f1 = "tag-filters", g1 = "static-filter", h1 = m1.register(f1, (e) => {
+  let t = Object.entries(d1.TAGS_OPTIONS ?? {}).reduce(
     (r, o) => {
       let [n, s] = o;
       return s.excludeFromSidebar && (r[n] = !0), r;
     },
     {}
   );
-  e.experimental_setFilter(f1, (r) => {
+  e.experimental_setFilter(g1, (r) => {
     let o = r.tags ?? [];
     return (
       // we can filter out the primary story, but we still want to show autodocs
       (o.includes("dev") || r.type === "docs") && o.filter((n) => t[n]).length === 0
     );
   });
-}), nI = [
+}), sI = [
   Gp,
-  g1,
+  h1,
   Hi,
   Hp,
   Bp,
@@ -9902,5 +9908,5 @@ var m1 = "tag-filters", f1 = "static-filter", g1 = d1.register(m1, (e) => {
   Yp
 ];
 export {
-  nI as default
+  sI as default
 };