storybook 10.1.0-alpha.1 → 10.1.0-alpha.11

package/dist/csf/index.js

@@ -3,31 +3,31 @@ import {
   PARAM_KEY as PARAM_KEY2,
   PARAM_KEY2 as PARAM_KEY3,
   PARAM_KEY3 as PARAM_KEY4
-} from "../_browser-chunks/chunk-CADGRH3P.js";
+} from "../_browser-chunks/chunk-FNXWN6IK.js";
 import {
   composeConfigs,
   composeStory,
   mountDestructured,
   normalizeArrays,
   normalizeProjectAnnotations
-} from "../_browser-chunks/chunk-W4QKLQSC.js";
-import "../_browser-chunks/chunk-Y3M7TW6K.js";
+} from "../_browser-chunks/chunk-BE2DAXKJ.js";
+import "../_browser-chunks/chunk-IPA5A322.js";
+import "../_browser-chunks/chunk-3OXGAGBE.js";
 import {
   combineParameters
-} from "../_browser-chunks/chunk-B4A3ADP3.js";
-import "../_browser-chunks/chunk-ZNRFDIVA.js";
+} from "../_browser-chunks/chunk-VYJQ7RU5.js";
+import "../_browser-chunks/chunk-3IAH5M2U.js";
 import {
   invariant
-} from "../_browser-chunks/chunk-FUOHXXZT.js";
-import "../_browser-chunks/chunk-AB7OOPUX.js";
-import "../_browser-chunks/chunk-F4Q6SGTB.js";
-import "../_browser-chunks/chunk-LYCSRYYR.js";
-import "../_browser-chunks/chunk-UTNZYD2N.js";
-import "../_browser-chunks/chunk-FSBVR7H5.js";
-import "../_browser-chunks/chunk-NVV6MIOE.js";
+} from "../_browser-chunks/chunk-AS2HQEYC.js";
+import "../_browser-chunks/chunk-QKODTO7K.js";
+import "../_browser-chunks/chunk-YKE5S47A.js";
+import "../_browser-chunks/chunk-AIOS4NGK.js";
+import "../_browser-chunks/chunk-GFLS4VP3.js";
+import "../_browser-chunks/chunk-WJYERY3R.js";
 import {
   dedent
-} from "../_browser-chunks/chunk-OPCDBBL3.js";
+} from "../_browser-chunks/chunk-JP7NCOJX.js";
 import {
   HIGHLIGHT,
   MAX_Z_INDEX,
@@ -35,39 +35,37 @@ import {
   REMOVE_HIGHLIGHT,
   RESET_HIGHLIGHT,
   SCROLL_INTO_VIEW
-} from "../_browser-chunks/chunk-GTKOCWCT.js";
+} from "../_browser-chunks/chunk-KJHJLCBK.js";
 import "../_browser-chunks/chunk-ECQ75MKQ.js";
 import {
   action
-} from "../_browser-chunks/chunk-PB6FZ3WE.js";
-import "../_browser-chunks/chunk-XW6KSYKF.js";
+} from "../_browser-chunks/chunk-EUVGDK4H.js";
+import "../_browser-chunks/chunk-6XWLIJQL.js";
 import {
   PARAM_KEY
-} from "../_browser-chunks/chunk-HHW4FUMO.js";
+} from "../_browser-chunks/chunk-SL75JR6Y.js";
 import {
   __commonJS,
   __export,
-  __name,
   __toESM
-} from "../_browser-chunks/chunk-MM7DTO55.js";
+} from "../_browser-chunks/chunk-A242L54C.js";
 
 // ../node_modules/@ngard/tiny-isequal/index.js
 var require_tiny_isequal = __commonJS({
   "../node_modules/@ngard/tiny-isequal/index.js"(exports) {
-    Object.defineProperty(exports, "__esModule", { value: true }), exports.isEqual = /* @__PURE__ */ function() {
+    Object.defineProperty(exports, "__esModule", { value: !0 }), exports.isEqual = /* @__PURE__ */ (function() {
       var e = Object.prototype.toString, r = Object.getPrototypeOf, t = Object.getOwnPropertySymbols ? function(e2) {
         return Object.keys(e2).concat(Object.getOwnPropertySymbols(e2));
       } : Object.keys;
       return function(n, a) {
-        return (/* @__PURE__ */ __name(function n2(a2, c, u) {
+        return (function n2(a2, c, u) {
           var i, s, l, o = e.call(a2), f = e.call(c);
-          if (a2 === c) return true;
-          if (null == a2 || null == c) return false;
-          if (u.indexOf(a2) > -1 && u.indexOf(c) > -1) return true;
-          if (u.push(a2, c), o != f) return false;
-          if (i = t(a2), s = t(c), i.length != s.length || i.some(function(e2) {
+          if (a2 === c) return !0;
+          if (a2 == null || c == null) return !1;
+          if (u.indexOf(a2) > -1 && u.indexOf(c) > -1) return !0;
+          if (u.push(a2, c), o != f || (i = t(a2), s = t(c), i.length != s.length || i.some(function(e2) {
             return !n2(a2[e2], c[e2], u);
-          })) return false;
+          }))) return !1;
           switch (o.slice(8, -1)) {
             case "Symbol":
               return a2.valueOf() == c.valueOf();
@@ -82,10 +80,10 @@ var require_tiny_isequal = __commonJS({
             case "Set":
             case "Map":
               i = a2.entries(), s = c.entries();
-              do {
-                if (!n2((l = i.next()).value, s.next().value, u)) return false;
-              } while (!l.done);
-              return true;
+              do
+                if (!n2((l = i.next()).value, s.next().value, u)) return !1;
+              while (!l.done);
+              return !0;
             case "ArrayBuffer":
               a2 = new Uint8Array(a2), c = new Uint8Array(c);
             case "DataView":
@@ -101,17 +99,17 @@ var require_tiny_isequal = __commonJS({
             case "Uint8ClampedArray":
             case "Arguments":
             case "Array":
-              if (a2.length != c.length) return false;
-              for (l = 0; l < a2.length; l++) if ((l in a2 || l in c) && (l in a2 != l in c || !n2(a2[l], c[l], u))) return false;
-              return true;
+              if (a2.length != c.length) return !1;
+              for (l = 0; l < a2.length; l++) if ((l in a2 || l in c) && (l in a2 != l in c || !n2(a2[l], c[l], u))) return !1;
+              return !0;
             case "Object":
               return n2(r(a2), r(c), u);
             default:
-              return false;
+              return !1;
           }
-        }, "n"))(n, a, []);
+        })(n, a, []);
       };
-    }();
+    })();
   }
 });
 
@@ -119,40 +117,30 @@ var require_tiny_isequal = __commonJS({
 function toStartCaseStr(str) {
   return str.replace(/_/g, " ").replace(/-/g, " ").replace(/\./g, " ").replace(/([^\n])([A-Z])([a-z])/g, (str2, $1, $2, $3) => `${$1} ${$2}${$3}`).replace(/([a-z])([A-Z])/g, (str2, $1, $2) => `${$1} ${$2}`).replace(/([a-z])([0-9])/gi, (str2, $1, $2) => `${$1} ${$2}`).replace(/([0-9])([a-z])/gi, (str2, $1, $2) => `${$1} ${$2}`).replace(/(\s|^)(\w)/g, (str2, $1, $2) => `${$1}${$2.toUpperCase()}`).replace(/ +/g, " ").trim();
 }
-__name(toStartCaseStr, "toStartCaseStr");
 
 // src/csf/includeConditionalArg.ts
-var import_tiny_isequal = __toESM(require_tiny_isequal(), 1);
-var count = /* @__PURE__ */ __name((vals) => vals.map((v) => typeof v !== "undefined").filter(Boolean).length, "count");
-var testValue = /* @__PURE__ */ __name((cond, value) => {
-  const { exists, eq, neq, truthy } = cond;
-  if (count([exists, eq, neq, truthy]) > 1) {
+var import_tiny_isequal = __toESM(require_tiny_isequal(), 1), count = (vals) => vals.map((v) => typeof v < "u").filter(Boolean).length, testValue = (cond, value) => {
+  let { exists, eq, neq, truthy } = cond;
+  if (count([exists, eq, neq, truthy]) > 1)
     throw new Error(`Invalid conditional test ${JSON.stringify({ exists, eq, neq })}`);
-  }
-  if (typeof eq !== "undefined") {
+  if (typeof eq < "u")
     return (0, import_tiny_isequal.isEqual)(value, eq);
-  }
-  if (typeof neq !== "undefined") {
+  if (typeof neq < "u")
     return !(0, import_tiny_isequal.isEqual)(value, neq);
-  }
-  if (typeof exists !== "undefined") {
-    const valueExists = typeof value !== "undefined";
+  if (typeof exists < "u") {
+    let valueExists = typeof value < "u";
     return exists ? valueExists : !valueExists;
   }
-  const shouldBeTruthy = typeof truthy === "undefined" ? true : truthy;
-  return shouldBeTruthy ? !!value : !value;
-}, "testValue");
-var includeConditionalArg = /* @__PURE__ */ __name((argType, args, globals) => {
-  if (!argType.if) {
-    return true;
-  }
-  const { arg, global: global5 } = argType.if;
-  if (count([arg, global5]) !== 1) {
+  return (typeof truthy > "u" ? !0 : truthy) ? !!value : !value;
+}, includeConditionalArg = (argType, args, globals) => {
+  if (!argType.if)
+    return !0;
+  let { arg, global: global5 } = argType.if;
+  if (count([arg, global5]) !== 1)
     throw new Error(`Invalid conditional value ${JSON.stringify({ arg, global: global5 })}`);
-  }
-  const value = arg ? args[arg] : globals[global5];
+  let value = arg ? args[arg] : globals[global5];
   return testValue(argType.if, value);
-}, "includeConditionalArg");
+};
 
 // src/csf/csf-factories.ts
 import { combineTags } from "storybook/internal/csf";
@@ -167,45 +155,27 @@ __export(addArgs_exports, {
 });
 
 // src/actions/addArgsHelpers.ts
-var isInInitialArgs = /* @__PURE__ */ __name((name, initialArgs) => typeof initialArgs[name] === "undefined" && !(name in initialArgs), "isInInitialArgs");
-var inferActionsFromArgTypesRegex = /* @__PURE__ */ __name((context) => {
-  const {
+var isInInitialArgs = (name, initialArgs) => typeof initialArgs[name] > "u" && !(name in initialArgs), inferActionsFromArgTypesRegex = (context) => {
+  let {
     initialArgs,
     argTypes,
     id,
     parameters: { actions }
   } = context;
-  if (!actions || actions.disable || !actions.argTypesRegex || !argTypes) {
+  if (!actions || actions.disable || !actions.argTypesRegex || !argTypes)
     return {};
-  }
-  const argTypesRegex = new RegExp(actions.argTypesRegex);
-  const argTypesMatchingRegex = Object.entries(argTypes).filter(
+  let argTypesRegex = new RegExp(actions.argTypesRegex);
+  return Object.entries(argTypes).filter(
     ([name]) => !!argTypesRegex.test(name)
-  );
-  return argTypesMatchingRegex.reduce((acc, [name, argType]) => {
-    if (isInInitialArgs(name, initialArgs)) {
-      acc[name] = action(name, { implicit: true, id });
-    }
-    return acc;
-  }, {});
-}, "inferActionsFromArgTypesRegex");
-var addActionsFromArgTypes = /* @__PURE__ */ __name((context) => {
-  const {
+  ).reduce((acc, [name, argType]) => (isInInitialArgs(name, initialArgs) && (acc[name] = action(name, { implicit: !0, id })), acc), {});
+}, addActionsFromArgTypes = (context) => {
+  let {
     initialArgs,
     argTypes,
     parameters: { actions }
   } = context;
-  if (actions?.disable || !argTypes) {
-    return {};
-  }
-  const argTypesWithAction = Object.entries(argTypes).filter(([name, argType]) => !!argType.action);
-  return argTypesWithAction.reduce((acc, [name, argType]) => {
-    if (isInInitialArgs(name, initialArgs)) {
-      acc[name] = action(typeof argType.action === "string" ? argType.action : name);
-    }
-    return acc;
-  }, {});
-}, "addActionsFromArgTypes");
+  return actions?.disable || !argTypes ? {} : Object.entries(argTypes).filter(([name, argType]) => !!argType.action).reduce((acc, [name, argType]) => (isInInitialArgs(name, initialArgs) && (acc[name] = action(typeof argType.action == "string" ? argType.action : name)), acc), {});
+};
 
 // src/actions/addArgs.ts
 var argsEnhancers = [
@@ -219,44 +189,28 @@ __export(loaders_exports, {
   loaders: () => loaders
 });
 import { onMockCall } from "storybook/test";
-var subscribed = false;
-var logActionsWhenMockCalled = /* @__PURE__ */ __name((context) => {
-  const { parameters: parameters2 } = context;
-  if (parameters2?.actions?.disable) {
-    return;
-  }
-  if (!subscribed) {
-    onMockCall((mock, args) => {
-      const name = mock.getMockName();
-      if (name === "spy") {
-        return;
-      }
-      if (name === "vi.fn()") {
-        return;
-      }
-      if (!/^next\/.*::/.test(name) || [
-        "next/router::useRouter()",
-        "next/navigation::useRouter()",
-        "next/navigation::redirect",
-        "next/cache::",
-        "next/headers::cookies().set",
-        "next/headers::cookies().delete",
-        "next/headers::headers().set",
-        "next/headers::headers().delete"
-      ].some((prefix) => name.startsWith(prefix))) {
-        action(name)(args);
-      }
-    });
-    subscribed = true;
-  }
-}, "logActionsWhenMockCalled");
-var loaders = [logActionsWhenMockCalled];
+var subscribed = !1, logActionsWhenMockCalled = (context) => {
+  let { parameters: parameters2 } = context;
+  parameters2?.actions?.disable || subscribed || (onMockCall((mock, args) => {
+    let name = mock.getMockName();
+    name !== "spy" && name !== "vi.fn()" && (!/^next\/.*::/.test(name) || [
+      "next/router::useRouter()",
+      "next/navigation::useRouter()",
+      "next/navigation::redirect",
+      "next/cache::",
+      "next/headers::cookies().set",
+      "next/headers::cookies().delete",
+      "next/headers::headers().set",
+      "next/headers::headers().delete"
+    ].some((prefix) => name.startsWith(prefix))) && action(name)(args);
+  }), subscribed = !0);
+}, loaders = [logActionsWhenMockCalled];
 
 // src/actions/preview.ts
-var preview_default = /* @__PURE__ */ __name(() => definePreviewAddon({
+var preview_default = () => definePreviewAddon({
   ...addArgs_exports,
   ...loaders_exports
-}), "default");
+});
 
 // src/backgrounds/preview.ts
 import { definePreviewAddon as definePreviewAddon2 } from "storybook/internal/csf";
@@ -265,97 +219,50 @@ import { definePreviewAddon as definePreviewAddon2 } from "storybook/internal/cs
 import { useEffect } from "storybook/preview-api";
 
 // src/backgrounds/utils.ts
-var { document: document2 } = globalThis;
-var isReduceMotionEnabled = /* @__PURE__ */ __name(() => {
-  if (!globalThis?.matchMedia) {
-    return false;
-  }
-  const prefersReduceMotion = globalThis.matchMedia("(prefers-reduced-motion: reduce)");
-  return !!prefersReduceMotion?.matches;
-}, "isReduceMotionEnabled");
-var clearStyles = /* @__PURE__ */ __name((selector) => {
-  const selectors = Array.isArray(selector) ? selector : [selector];
-  selectors.forEach(clearStyle);
-}, "clearStyles");
-var clearStyle = /* @__PURE__ */ __name((selector) => {
-  if (!document2) {
+var { document: document2 } = globalThis, isReduceMotionEnabled = () => globalThis?.matchMedia ? !!globalThis.matchMedia("(prefers-reduced-motion: reduce)")?.matches : !1, clearStyles = (selector) => {
+  (Array.isArray(selector) ? selector : [selector]).forEach(clearStyle);
+}, clearStyle = (selector) => {
+  if (!document2)
     return;
-  }
-  const element = document2.getElementById(selector);
-  if (element && element.parentElement) {
-    element.parentElement.removeChild(element);
-  }
-}, "clearStyle");
-var addGridStyle = /* @__PURE__ */ __name((selector, css) => {
-  if (!document2) {
+  let element = document2.getElementById(selector);
+  element && element.parentElement && element.parentElement.removeChild(element);
+}, addGridStyle = (selector, css) => {
+  if (!document2)
     return;
+  let existingStyle = document2.getElementById(selector);
+  if (existingStyle)
+    existingStyle.innerHTML !== css && (existingStyle.innerHTML = css);
+  else {
+    let style = document2.createElement("style");
+    style.setAttribute("id", selector), style.innerHTML = css, document2.head.appendChild(style);
   }
-  const existingStyle = document2.getElementById(selector);
-  if (existingStyle) {
-    if (existingStyle.innerHTML !== css) {
-      existingStyle.innerHTML = css;
-    }
-  } else {
-    const style = document2.createElement("style");
-    style.setAttribute("id", selector);
-    style.innerHTML = css;
-    document2.head.appendChild(style);
-  }
-}, "addGridStyle");
-var addBackgroundStyle = /* @__PURE__ */ __name((selector, css, storyId) => {
-  if (!document2) {
+}, addBackgroundStyle = (selector, css, storyId) => {
+  if (!document2)
     return;
+  let existingStyle = document2.getElementById(selector);
+  if (existingStyle)
+    existingStyle.innerHTML !== css && (existingStyle.innerHTML = css);
+  else {
+    let style = document2.createElement("style");
+    style.setAttribute("id", selector), style.innerHTML = css;
+    let gridStyleSelector = `addon-backgrounds-grid${storyId ? `-docs-${storyId}` : ""}`, existingGridStyle = document2.getElementById(gridStyleSelector);
+    existingGridStyle ? existingGridStyle.parentElement?.insertBefore(style, existingGridStyle) : document2.head.appendChild(style);
   }
-  const existingStyle = document2.getElementById(selector);
-  if (existingStyle) {
-    if (existingStyle.innerHTML !== css) {
-      existingStyle.innerHTML = css;
-    }
-  } else {
-    const style = document2.createElement("style");
-    style.setAttribute("id", selector);
-    style.innerHTML = css;
-    const gridStyleSelector = `addon-backgrounds-grid${storyId ? `-docs-${storyId}` : ""}`;
-    const existingGridStyle = document2.getElementById(gridStyleSelector);
-    if (existingGridStyle) {
-      existingGridStyle.parentElement?.insertBefore(style, existingGridStyle);
-    } else {
-      document2.head.appendChild(style);
-    }
-  }
-}, "addBackgroundStyle");
+};
 
 // src/backgrounds/decorator.ts
 var defaultGrid = {
   cellSize: 100,
   cellAmount: 10,
   opacity: 0.8
-};
-var BG_SELECTOR_BASE = `addon-backgrounds`;
-var GRID_SELECTOR_BASE = "addon-backgrounds-grid";
-var transitionStyle = isReduceMotionEnabled() ? "" : "transition: background-color 0.3s;";
-var withBackgroundAndGrid = /* @__PURE__ */ __name((StoryFn, context) => {
-  const { globals = {}, parameters: parameters2 = {}, viewMode, id } = context;
-  const {
+}, BG_SELECTOR_BASE = "addon-backgrounds", GRID_SELECTOR_BASE = "addon-backgrounds-grid", transitionStyle = isReduceMotionEnabled() ? "" : "transition: background-color 0.3s;", withBackgroundAndGrid = (StoryFn, context) => {
+  let { globals = {}, parameters: parameters2 = {}, viewMode, id } = context, {
     options = DEFAULT_BACKGROUNDS,
     disable,
     grid = defaultGrid
-  } = parameters2[PARAM_KEY2] || {};
-  const data = globals[PARAM_KEY2] || {};
-  const backgroundName = typeof data === "string" ? data : data?.value;
-  const item = backgroundName ? options[backgroundName] : void 0;
-  const value = typeof item === "string" ? item : item?.value || "transparent";
-  const showGrid = typeof data === "string" ? false : data.grid || false;
-  const shownBackground = !!item && !disable;
-  const backgroundSelector = viewMode === "docs" ? `#anchor--${id} .docs-story` : ".sb-show-main";
-  const gridSelector = viewMode === "docs" ? `#anchor--${id} .docs-story` : ".sb-show-main";
-  const isLayoutPadded = parameters2.layout === void 0 || parameters2.layout === "padded";
-  const defaultOffset = viewMode === "docs" ? 20 : isLayoutPadded ? 16 : 0;
-  const { cellAmount, cellSize, opacity, offsetX = defaultOffset, offsetY = defaultOffset } = grid;
-  const backgroundSelectorId = viewMode === "docs" ? `${BG_SELECTOR_BASE}-docs-${id}` : `${BG_SELECTOR_BASE}-color`;
-  const backgroundTarget = viewMode === "docs" ? id : null;
+  } = parameters2[PARAM_KEY2] || {}, data = globals[PARAM_KEY2] || {}, backgroundName = typeof data == "string" ? data : data?.value, item = backgroundName ? options[backgroundName] : void 0, value = typeof item == "string" ? item : item?.value || "transparent", showGrid = typeof data == "string" ? !1 : data.grid || !1, shownBackground = !!item && !disable, backgroundSelector = viewMode === "docs" ? `#anchor--${id} .docs-story` : ".sb-show-main", gridSelector = viewMode === "docs" ? `#anchor--${id} .docs-story` : ".sb-show-main", isLayoutPadded = parameters2.layout === void 0 || parameters2.layout === "padded", defaultOffset = viewMode === "docs" ? 20 : isLayoutPadded ? 16 : 0, { cellAmount, cellSize, opacity, offsetX = defaultOffset, offsetY = defaultOffset } = grid, backgroundSelectorId = viewMode === "docs" ? `${BG_SELECTOR_BASE}-docs-${id}` : `${BG_SELECTOR_BASE}-color`, backgroundTarget = viewMode === "docs" ? id : null;
   useEffect(() => {
-    const backgroundStyles = `
+    let backgroundStyles = `
     ${backgroundSelector} {
       background: ${value} !important;
       ${transitionStyle}
@@ -366,19 +273,18 @@ var withBackgroundAndGrid = /* @__PURE__ */ __name((StoryFn, context) => {
     }
     addBackgroundStyle(backgroundSelectorId, backgroundStyles, backgroundTarget);
   }, [backgroundSelector, backgroundSelectorId, backgroundTarget, shownBackground, value]);
-  const gridSelectorId = viewMode === "docs" ? `${GRID_SELECTOR_BASE}-docs-${id}` : `${GRID_SELECTOR_BASE}`;
-  useEffect(() => {
+  let gridSelectorId = viewMode === "docs" ? `${GRID_SELECTOR_BASE}-docs-${id}` : `${GRID_SELECTOR_BASE}`;
+  return useEffect(() => {
     if (!showGrid) {
       clearStyles(gridSelectorId);
       return;
     }
-    const gridSize = [
+    let gridSize = [
       `${cellSize * cellAmount}px ${cellSize * cellAmount}px`,
       `${cellSize * cellAmount}px ${cellSize * cellAmount}px`,
       `${cellSize}px ${cellSize}px`,
       `${cellSize}px ${cellSize}px`
-    ].join(", ");
-    const gridStyles = `
+    ].join(", "), gridStyles = `
         ${gridSelector} {
           background-size: ${gridSize} !important;
           background-position: ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px !important;
@@ -390,30 +296,26 @@ var withBackgroundAndGrid = /* @__PURE__ */ __name((StoryFn, context) => {
         }
       `;
     addGridStyle(gridSelectorId, gridStyles);
-  }, [cellAmount, cellSize, gridSelector, gridSelectorId, showGrid, offsetX, offsetY, opacity]);
-  return StoryFn();
-}, "withBackgroundAndGrid");
+  }, [cellAmount, cellSize, gridSelector, gridSelectorId, showGrid, offsetX, offsetY, opacity]), StoryFn();
+};
 
 // src/backgrounds/preview.ts
-var decorators = globalThis.FEATURES?.backgrounds ? [withBackgroundAndGrid] : [];
-var parameters = {
+var decorators = globalThis.FEATURES?.backgrounds ? [withBackgroundAndGrid] : [], parameters = {
   [PARAM_KEY2]: {
     grid: {
       cellSize: 20,
       opacity: 0.5,
       cellAmount: 5
     },
-    disable: false
+    disable: !1
   }
-};
-var initialGlobals = {
-  [PARAM_KEY2]: { value: void 0, grid: false }
-};
-var preview_default2 = /* @__PURE__ */ __name(() => definePreviewAddon2({
+}, initialGlobals = {
+  [PARAM_KEY2]: { value: void 0, grid: !1 }
+}, preview_default2 = () => definePreviewAddon2({
   decorators,
   parameters,
   initialGlobals
-}), "default");
+});
 
 // src/component-testing/preview.ts
 import { definePreviewAddon as definePreviewAddon3 } from "storybook/internal/csf";
@@ -425,16 +327,15 @@ var { step } = instrument(
     // await step("label", (context) => {
     //   // labeled step
     // });
-    step: /* @__PURE__ */ __name(async (label, play, context) => play(context), "step")
+    step: async (label, play, context) => play(context)
   },
-  { intercept: true }
-);
-var preview_default3 = /* @__PURE__ */ __name(() => definePreviewAddon3({
+  { intercept: !0 }
+), preview_default3 = () => definePreviewAddon3({
   parameters: {
-    throwPlayFunctionExceptions: false
+    throwPlayFunctionExceptions: !1
   },
   runStep: step
-}), "default");
+});
 
 // src/highlight/preview.ts
 import { definePreviewAddon as definePreviewAddon4 } from "storybook/internal/csf";
@@ -462,43 +363,21 @@ var iconPaths = {
 };
 
 // src/highlight/utils.ts
-var svgElements = "svg,path,rect,circle,line,polyline,polygon,ellipse,text".split(",");
-var createElement = /* @__PURE__ */ __name((type, props = {}, children) => {
-  const element = svgElements.includes(type) ? document.createElementNS("http://www.w3.org/2000/svg", type) : document.createElement(type);
-  Object.entries(props).forEach(([key, val]) => {
-    if (/[A-Z]/.test(key)) {
-      if (key === "onClick") {
-        element.addEventListener("click", val);
-        element.addEventListener("keydown", (e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            val();
-          }
-        });
+var svgElements = "svg,path,rect,circle,line,polyline,polygon,ellipse,text".split(","), createElement = (type, props = {}, children) => {
+  let element = svgElements.includes(type) ? document.createElementNS("http://www.w3.org/2000/svg", type) : document.createElement(type);
+  return Object.entries(props).forEach(([key, val]) => {
+    /[A-Z]/.test(key) ? (key === "onClick" && (element.addEventListener("click", val), element.addEventListener("keydown", (e) => {
+      (e.key === "Enter" || e.key === " ") && (e.preventDefault(), val());
+    })), key === "onMouseEnter" && element.addEventListener("mouseenter", val), key === "onMouseLeave" && element.addEventListener("mouseleave", val)) : element.setAttribute(key, val);
+  }), children?.forEach((child) => {
+    if (!(child == null || child === !1))
+      try {
+        element.appendChild(child);
+      } catch {
+        element.appendChild(document.createTextNode(String(child)));
       }
-      if (key === "onMouseEnter") {
-        element.addEventListener("mouseenter", val);
-      }
-      if (key === "onMouseLeave") {
-        element.addEventListener("mouseleave", val);
-      }
-    } else {
-      element.setAttribute(key, val);
-    }
-  });
-  children?.forEach((child) => {
-    if (child === null || child === void 0 || child === false) {
-      return;
-    }
-    try {
-      element.appendChild(child);
-    } catch (e) {
-      element.appendChild(document.createTextNode(String(child)));
-    }
-  });
-  return element;
-}, "createElement");
-var createIcon = /* @__PURE__ */ __name((name) => iconPaths[name] && createElement(
+  }), element;
+}, createIcon = (name) => iconPaths[name] && createElement(
   "svg",
   { width: "14", height: "14", viewBox: "0 0 14 14", xmlns: "http://www.w3.org/2000/svg" },
   iconPaths[name].map(
@@ -509,10 +388,9 @@ var createIcon = /* @__PURE__ */ __name((name) => iconPaths[name] && createEleme
       d
     })
   )
-), "createIcon");
-var normalizeOptions = /* @__PURE__ */ __name((options) => {
+), normalizeOptions = (options) => {
   if ("elements" in options) {
-    const { elements, color, style } = options;
+    let { elements, color, style } = options;
     return {
       id: void 0,
       priority: 0,
@@ -525,7 +403,7 @@ var normalizeOptions = /* @__PURE__ */ __name((options) => {
       menu: void 0
     };
   }
-  const { menu, ...rest } = options;
+  let { menu, ...rest } = options;
   return {
     id: void 0,
     priority: 0,
@@ -535,56 +413,30 @@ var normalizeOptions = /* @__PURE__ */ __name((options) => {
     ...rest,
     menu: Array.isArray(menu) ? menu.every(Array.isArray) ? menu : [menu] : void 0
   };
-}, "normalizeOptions");
-var isFunction = /* @__PURE__ */ __name((obj) => obj instanceof Function, "isFunction");
-var state = /* @__PURE__ */ new Map();
-var listeners = /* @__PURE__ */ new Map();
-var teardowns = /* @__PURE__ */ new Map();
-var useStore = /* @__PURE__ */ __name((initialValue) => {
-  const key = Symbol();
-  listeners.set(key, []);
-  state.set(key, initialValue);
-  const get = /* @__PURE__ */ __name(() => state.get(key), "get");
-  const set = /* @__PURE__ */ __name((update) => {
-    const current = state.get(key);
-    const next = isFunction(update) ? update(current) : update;
-    if (next !== current) {
-      state.set(key, next);
-      listeners.get(key)?.forEach((listener) => {
-        teardowns.get(listener)?.();
-        teardowns.set(listener, listener(next));
-      });
-    }
-  }, "set");
-  const subscribe = /* @__PURE__ */ __name((listener) => {
-    listeners.get(key)?.push(listener);
-    return () => {
-      const list = listeners.get(key);
-      if (list) {
-        listeners.set(
-          key,
-          list.filter((l) => l !== listener)
-        );
-      }
-    };
-  }, "subscribe");
-  const teardown = /* @__PURE__ */ __name(() => {
+}, isFunction = (obj) => obj instanceof Function, state = /* @__PURE__ */ new Map(), listeners = /* @__PURE__ */ new Map(), teardowns = /* @__PURE__ */ new Map(), useStore = (initialValue) => {
+  let key = Symbol();
+  return listeners.set(key, []), state.set(key, initialValue), { get: () => state.get(key), set: (update) => {
+    let current = state.get(key), next = isFunction(update) ? update(current) : update;
+    next !== current && (state.set(key, next), listeners.get(key)?.forEach((listener) => {
+      teardowns.get(listener)?.(), teardowns.set(listener, listener(next));
+    }));
+  }, subscribe: (listener) => (listeners.get(key)?.push(listener), () => {
+    let list = listeners.get(key);
+    list && listeners.set(
+      key,
+      list.filter((l) => l !== listener)
+    );
+  }), teardown: () => {
     listeners.get(key)?.forEach((listener) => {
-      teardowns.get(listener)?.();
-      teardowns.delete(listener);
-    });
-    listeners.delete(key);
-    state.delete(key);
-  }, "teardown");
-  return { get, set, subscribe, teardown };
-}, "useStore");
-var mapElements = /* @__PURE__ */ __name((highlights) => {
-  const root = document.getElementById("storybook-root");
-  const map = /* @__PURE__ */ new Map();
-  for (const highlight of highlights) {
-    const { priority = 0 } = highlight;
-    for (const selector of highlight.selectors) {
-      const elements = [
+      teardowns.get(listener)?.(), teardowns.delete(listener);
+    }), listeners.delete(key), state.delete(key);
+  } };
+}, mapElements = (highlights) => {
+  let root = document.getElementById("storybook-root"), map = /* @__PURE__ */ new Map();
+  for (let highlight of highlights) {
+    let { priority = 0 } = highlight;
+    for (let selector of highlight.selectors) {
+      let elements = [
         ...document.querySelectorAll(
           // Elements matching the selector, excluding storybook elements and their descendants.
           // Necessary to find portaled elements (e.g. children of `body`).
@@ -593,23 +445,19 @@ var mapElements = /* @__PURE__ */ __name((highlights) => {
         // Elements matching the selector inside the storybook root, as these were excluded above.
         ...root?.querySelectorAll(selector) || []
       ];
-      for (const element of elements) {
-        const existing = map.get(element);
-        if (!existing || existing.priority <= priority) {
-          map.set(element, {
-            ...highlight,
-            priority,
-            selectors: Array.from(new Set((existing?.selectors || []).concat(selector)))
-          });
-        }
+      for (let element of elements) {
+        let existing = map.get(element);
+        (!existing || existing.priority <= priority) && map.set(element, {
+          ...highlight,
+          priority,
+          selectors: Array.from(new Set((existing?.selectors || []).concat(selector)))
+        });
       }
     }
   }
   return map;
-}, "mapElements");
-var mapBoxes = /* @__PURE__ */ __name((elements) => Array.from(elements.entries()).map(([element, { selectors, styles, hoverStyles, focusStyles, menu }]) => {
-  const { top, left, width, height } = element.getBoundingClientRect();
-  const { position } = getComputedStyle(element);
+}, mapBoxes = (elements) => Array.from(elements.entries()).map(([element, { selectors, styles, hoverStyles, focusStyles, menu }]) => {
+  let { top, left, width, height } = element.getBoundingClientRect(), { position } = getComputedStyle(element);
   return {
     element,
     selectors,
@@ -622,42 +470,21 @@ var mapBoxes = /* @__PURE__ */ __name((elements) => Array.from(elements.entries(
     width,
     height
   };
-}).sort((a, b) => b.width * b.height - a.width * a.height), "mapBoxes");
-var isOverMenu = /* @__PURE__ */ __name((menuElement, coordinates) => {
-  const menu = menuElement.getBoundingClientRect();
-  const { x, y } = coordinates;
+}).sort((a, b) => b.width * b.height - a.width * a.height), isOverMenu = (menuElement, coordinates) => {
+  let menu = menuElement.getBoundingClientRect(), { x, y } = coordinates;
   return menu?.top && menu?.left && x >= menu.left && x <= menu.left + menu.width && y >= menu.top && y <= menu.top + menu.height;
-}, "isOverMenu");
-var isTargeted = /* @__PURE__ */ __name((box, boxElement, coordinates) => {
-  if (!boxElement || !coordinates) {
-    return false;
-  }
+}, isTargeted = (box, boxElement, coordinates) => {
+  if (!boxElement || !coordinates)
+    return !1;
   let { left, top, width, height } = box;
-  if (height < MIN_TOUCH_AREA_SIZE) {
-    top = top - Math.round((MIN_TOUCH_AREA_SIZE - height) / 2);
-    height = MIN_TOUCH_AREA_SIZE;
-  }
-  if (width < MIN_TOUCH_AREA_SIZE) {
-    left = left - Math.round((MIN_TOUCH_AREA_SIZE - width) / 2);
-    width = MIN_TOUCH_AREA_SIZE;
-  }
-  if (boxElement.style.position === "fixed") {
-    left += window.scrollX;
-    top += window.scrollY;
-  }
-  const { x, y } = coordinates;
+  height < MIN_TOUCH_AREA_SIZE && (top = top - Math.round((MIN_TOUCH_AREA_SIZE - height) / 2), height = MIN_TOUCH_AREA_SIZE), width < MIN_TOUCH_AREA_SIZE && (left = left - Math.round((MIN_TOUCH_AREA_SIZE - width) / 2), width = MIN_TOUCH_AREA_SIZE), boxElement.style.position === "fixed" && (left += window.scrollX, top += window.scrollY);
+  let { x, y } = coordinates;
   return x >= left && x <= left + width && y >= top && y <= top + height;
-}, "isTargeted");
-var keepInViewport = /* @__PURE__ */ __name((element, targetCoordinates, options = {}) => {
-  const { x, y } = targetCoordinates;
-  const { margin = 5, topOffset = 0, centered = false } = options;
-  const { scrollX, scrollY, innerHeight: windowHeight, innerWidth: windowWidth } = window;
-  const top = Math.min(
+}, keepInViewport = (element, targetCoordinates, options = {}) => {
+  let { x, y } = targetCoordinates, { margin = 5, topOffset = 0, centered = !1 } = options, { scrollX, scrollY, innerHeight: windowHeight, innerWidth: windowWidth } = window, top = Math.min(
     element.style.position === "fixed" ? y - scrollY : y,
     windowHeight - element.clientHeight - margin - topOffset + scrollY
-  );
-  const leftOffset = centered ? element.clientWidth / 2 : 0;
-  const left = element.style.position === "fixed" ? Math.max(Math.min(x - scrollX, windowWidth - leftOffset - margin), leftOffset + margin) : Math.max(
+  ), leftOffset = centered ? element.clientWidth / 2 : 0, left = element.style.position === "fixed" ? Math.max(Math.min(x - scrollX, windowWidth - leftOffset - margin), leftOffset + margin) : Math.max(
     Math.min(x, windowWidth - leftOffset - margin + scrollX),
     leftOffset + margin + scrollX
   );
@@ -665,18 +492,11 @@ var keepInViewport = /* @__PURE__ */ __name((element, targetCoordinates, options
     ...left !== x && { left: `${left}px` },
     ...top !== y && { top: `${top}px` }
   });
-}, "keepInViewport");
-var showPopover = /* @__PURE__ */ __name((element) => {
-  if (window.HTMLElement.prototype.hasOwnProperty("showPopover")) {
-    element.showPopover();
-  }
-}, "showPopover");
-var hidePopover = /* @__PURE__ */ __name((element) => {
-  if (window.HTMLElement.prototype.hasOwnProperty("showPopover")) {
-    element.hidePopover();
-  }
-}, "hidePopover");
-var getEventDetails = /* @__PURE__ */ __name((target) => ({
+}, showPopover = (element) => {
+  window.HTMLElement.prototype.hasOwnProperty("showPopover") && element.showPopover();
+}, hidePopover = (element) => {
+  window.HTMLElement.prototype.hasOwnProperty("showPopover") && element.hidePopover();
+}, getEventDetails = (target) => ({
   top: target.top,
   left: target.left,
   width: target.width,
@@ -690,185 +510,116 @@ var getEventDetails = /* @__PURE__ */ __name((target) => ({
     tagName: target.element.tagName,
     outerHTML: target.element.outerHTML
   }
-}), "getEventDetails");
+});
 
 // src/highlight/useHighlights.ts
-var menuId = "storybook-highlights-menu";
-var rootId = "storybook-highlights-root";
-var storybookRootId = "storybook-root";
-var useHighlights = /* @__PURE__ */ __name((channel) => {
-  if (globalThis.__STORYBOOK_HIGHLIGHT_INITIALIZED) {
+var menuId = "storybook-highlights-menu", rootId = "storybook-highlights-root", storybookRootId = "storybook-root", useHighlights = (channel) => {
+  if (globalThis.__STORYBOOK_HIGHLIGHT_INITIALIZED)
     return;
-  }
-  globalThis.__STORYBOOK_HIGHLIGHT_INITIALIZED = true;
-  const { document: document3 } = globalThis;
-  const highlights = useStore([]);
-  const elements = useStore(/* @__PURE__ */ new Map());
-  const boxes = useStore([]);
-  const clickCoords = useStore();
-  const hoverCoords = useStore();
-  const targets = useStore([]);
-  const hovered = useStore([]);
-  const focused = useStore();
-  const selected = useStore();
-  let root = document3.getElementById(rootId);
+  globalThis.__STORYBOOK_HIGHLIGHT_INITIALIZED = !0;
+  let { document: document3 } = globalThis, highlights = useStore([]), elements = useStore(/* @__PURE__ */ new Map()), boxes = useStore([]), clickCoords = useStore(), hoverCoords = useStore(), targets = useStore([]), hovered = useStore([]), focused = useStore(), selected = useStore(), root = document3.getElementById(rootId);
   highlights.subscribe(() => {
-    if (!root) {
-      root = createElement("div", { id: rootId });
-      document3.body.appendChild(root);
-    }
-  });
-  highlights.subscribe((value) => {
-    const storybookRoot = document3.getElementById(storybookRootId);
-    if (!storybookRoot) {
+    root || (root = createElement("div", { id: rootId }), document3.body.appendChild(root));
+  }), highlights.subscribe((value) => {
+    let storybookRoot = document3.getElementById(storybookRootId);
+    if (!storybookRoot)
       return;
-    }
     elements.set(mapElements(value));
-    const observer = new MutationObserver(() => elements.set(mapElements(value)));
-    observer.observe(storybookRoot, { subtree: true, childList: true });
-    return () => {
+    let observer = new MutationObserver(() => elements.set(mapElements(value)));
+    return observer.observe(storybookRoot, { subtree: !0, childList: !0 }), () => {
       observer.disconnect();
     };
-  });
-  elements.subscribe((value) => {
-    const updateBoxes = /* @__PURE__ */ __name(() => requestAnimationFrame(() => boxes.set(mapBoxes(value))), "updateBoxes");
-    const observer = new ResizeObserver(updateBoxes);
-    observer.observe(document3.body);
-    Array.from(value.keys()).forEach((element) => observer.observe(element));
-    const scrollers = Array.from(document3.body.querySelectorAll("*")).filter((el) => {
-      const { overflow, overflowX, overflowY } = window.getComputedStyle(el);
+  }), elements.subscribe((value) => {
+    let updateBoxes = () => requestAnimationFrame(() => boxes.set(mapBoxes(value))), observer = new ResizeObserver(updateBoxes);
+    observer.observe(document3.body), Array.from(value.keys()).forEach((element) => observer.observe(element));
+    let scrollers = Array.from(document3.body.querySelectorAll("*")).filter((el) => {
+      let { overflow, overflowX, overflowY } = window.getComputedStyle(el);
       return ["auto", "scroll"].some((o) => [overflow, overflowX, overflowY].includes(o));
     });
-    scrollers.forEach((element) => element.addEventListener("scroll", updateBoxes));
-    return () => {
-      observer.disconnect();
-      scrollers.forEach((element) => element.removeEventListener("scroll", updateBoxes));
+    return scrollers.forEach((element) => element.addEventListener("scroll", updateBoxes)), () => {
+      observer.disconnect(), scrollers.forEach((element) => element.removeEventListener("scroll", updateBoxes));
     };
-  });
-  elements.subscribe((value) => {
-    const sticky = Array.from(value.keys()).filter(({ style }) => style.position === "sticky");
-    const updateBoxes = /* @__PURE__ */ __name(() => requestAnimationFrame(() => {
+  }), elements.subscribe((value) => {
+    let sticky = Array.from(value.keys()).filter(({ style }) => style.position === "sticky"), updateBoxes = () => requestAnimationFrame(() => {
       boxes.set(
         (current) => current.map((box) => {
           if (sticky.includes(box.element)) {
-            const { top, left } = box.element.getBoundingClientRect();
+            let { top, left } = box.element.getBoundingClientRect();
             return { ...box, top: top + window.scrollY, left: left + window.scrollX };
           }
           return box;
         })
       );
-    }), "updateBoxes");
-    document3.addEventListener("scroll", updateBoxes);
-    return () => document3.removeEventListener("scroll", updateBoxes);
-  });
-  elements.subscribe((value) => {
+    });
+    return document3.addEventListener("scroll", updateBoxes), () => document3.removeEventListener("scroll", updateBoxes);
+  }), elements.subscribe((value) => {
     targets.set((t) => t.filter(({ element }) => value.has(element)));
+  }), targets.subscribe((value) => {
+    value.length ? (selected.set((s) => value.some((t) => t.element === s?.element) ? s : void 0), focused.set((s) => value.some((t) => t.element === s?.element) ? s : void 0)) : (selected.set(void 0), focused.set(void 0), clickCoords.set(void 0));
   });
-  targets.subscribe((value) => {
-    if (value.length) {
-      selected.set((s) => value.some((t) => t.element === s?.element) ? s : void 0);
-      focused.set((s) => value.some((t) => t.element === s?.element) ? s : void 0);
-    } else {
-      selected.set(void 0);
-      focused.set(void 0);
-      clickCoords.set(void 0);
-    }
-  });
-  const styleElementByHighlight = new Map(/* @__PURE__ */ new Map());
+  let styleElementByHighlight = new Map(/* @__PURE__ */ new Map());
   highlights.subscribe((value) => {
     value.forEach(({ keyframes }) => {
       if (keyframes) {
         let style = styleElementByHighlight.get(keyframes);
-        if (!style) {
-          style = document3.createElement("style");
-          style.setAttribute("data-highlight", "keyframes");
-          styleElementByHighlight.set(keyframes, style);
-          document3.head.appendChild(style);
-        }
-        style.innerHTML = keyframes;
-      }
-    });
-    styleElementByHighlight.forEach((style, keyframes) => {
-      if (!value.some((v) => v.keyframes === keyframes)) {
-        style.remove();
-        styleElementByHighlight.delete(keyframes);
+        style || (style = document3.createElement("style"), style.setAttribute("data-highlight", "keyframes"), styleElementByHighlight.set(keyframes, style), document3.head.appendChild(style)), style.innerHTML = keyframes;
       }
+    }), styleElementByHighlight.forEach((style, keyframes) => {
+      value.some((v) => v.keyframes === keyframes) || (style.remove(), styleElementByHighlight.delete(keyframes));
     });
   });
-  const boxElementByTargetElement = new Map(/* @__PURE__ */ new Map());
+  let boxElementByTargetElement = new Map(/* @__PURE__ */ new Map());
   boxes.subscribe((value) => {
     value.forEach((box) => {
       let boxElement = boxElementByTargetElement.get(box.element);
       if (root && !boxElement) {
-        const props = {
+        let props = {
           popover: "manual",
           "data-highlight-dimensions": `w${box.width.toFixed(0)}h${box.height.toFixed(0)}`,
           "data-highlight-coordinates": `x${box.left.toFixed(0)}y${box.top.toFixed(0)}`
         };
         boxElement = root.appendChild(
           createElement("div", props, [createElement("div")])
-        );
-        boxElementByTargetElement.set(box.element, boxElement);
-      }
-    });
-    boxElementByTargetElement.forEach((box, element) => {
-      if (!value.some(({ element: e }) => e === element)) {
-        box.remove();
-        boxElementByTargetElement.delete(element);
+        ), boxElementByTargetElement.set(box.element, boxElement);
       }
+    }), boxElementByTargetElement.forEach((box, element) => {
+      value.some(({ element: e }) => e === element) || (box.remove(), boxElementByTargetElement.delete(element));
     });
-  });
-  boxes.subscribe((value) => {
-    const targetable = value.filter((box) => box.menu);
-    if (!targetable.length) {
+  }), boxes.subscribe((value) => {
+    let targetable = value.filter((box) => box.menu);
+    if (!targetable.length)
       return;
-    }
-    const onClick = /* @__PURE__ */ __name((event) => {
+    let onClick = (event) => {
       requestAnimationFrame(() => {
-        const menu = document3.getElementById(menuId);
-        const coords = { x: event.pageX, y: event.pageY };
+        let menu = document3.getElementById(menuId), coords = { x: event.pageX, y: event.pageY };
         if (menu && !isOverMenu(menu, coords)) {
-          const results = targetable.filter((box) => {
-            const boxElement = boxElementByTargetElement.get(box.element);
+          let results = targetable.filter((box) => {
+            let boxElement = boxElementByTargetElement.get(box.element);
             return isTargeted(box, boxElement, coords);
           });
-          clickCoords.set(results.length ? coords : void 0);
-          targets.set(results);
+          clickCoords.set(results.length ? coords : void 0), targets.set(results);
         }
       });
-    }, "onClick");
-    document3.addEventListener("click", onClick);
-    return () => document3.removeEventListener("click", onClick);
+    };
+    return document3.addEventListener("click", onClick), () => document3.removeEventListener("click", onClick);
   });
-  const updateHovered = /* @__PURE__ */ __name(() => {
-    const menu = document3.getElementById(menuId);
-    const coords = hoverCoords.get();
-    if (!coords || menu && isOverMenu(menu, coords)) {
-      return;
-    }
-    hovered.set((current) => {
-      const update = boxes.get().filter((box) => {
-        const boxElement = boxElementByTargetElement.get(box.element);
+  let updateHovered = () => {
+    let menu = document3.getElementById(menuId), coords = hoverCoords.get();
+    !coords || menu && isOverMenu(menu, coords) || hovered.set((current) => {
+      let update = boxes.get().filter((box) => {
+        let boxElement = boxElementByTargetElement.get(box.element);
         return isTargeted(box, boxElement, coords);
-      });
-      const existing = current.filter((box) => update.includes(box));
-      const additions = update.filter((box) => !current.includes(box));
-      const hasRemovals = current.length - existing.length;
+      }), existing = current.filter((box) => update.includes(box)), additions = update.filter((box) => !current.includes(box)), hasRemovals = current.length - existing.length;
       return additions.length || hasRemovals ? [...existing, ...additions] : current;
     });
-  }, "updateHovered");
-  hoverCoords.subscribe(updateHovered);
-  boxes.subscribe(updateHovered);
-  const updateBoxStyles = /* @__PURE__ */ __name(() => {
-    const selectedElement = selected.get();
-    const targetElements = selectedElement ? [selectedElement] : targets.get();
-    const focusedElement = targetElements.length === 1 ? targetElements[0] : focused.get();
-    const isMenuOpen = clickCoords.get() !== void 0;
+  };
+  hoverCoords.subscribe(updateHovered), boxes.subscribe(updateHovered);
+  let updateBoxStyles = () => {
+    let selectedElement = selected.get(), targetElements = selectedElement ? [selectedElement] : targets.get(), focusedElement = targetElements.length === 1 ? targetElements[0] : focused.get(), isMenuOpen = clickCoords.get() !== void 0;
     boxes.get().forEach((box) => {
-      const boxElement = boxElementByTargetElement.get(box.element);
+      let boxElement = boxElementByTargetElement.get(box.element);
       if (boxElement) {
-        const isFocused = focusedElement === box;
-        const isHovered = isMenuOpen ? focusedElement ? isFocused : targetElements.includes(box) : hovered.get()?.includes(box);
+        let isFocused = focusedElement === box, isHovered = isMenuOpen ? focusedElement ? isFocused : targetElements.includes(box) : hovered.get()?.includes(box);
         Object.assign(boxElement.style, {
           animation: "none",
           background: "transparent",
@@ -893,35 +644,27 @@ var useHighlights = /* @__PURE__ */ __name((channel) => {
           alignItems: "center",
           justifyContent: "center",
           overflow: "visible"
-        });
-        Object.assign(boxElement.children[0].style, {
+        }), Object.assign(boxElement.children[0].style, {
           width: "100%",
           height: "100%",
           minHeight: `${MIN_TOUCH_AREA_SIZE}px`,
           minWidth: `${MIN_TOUCH_AREA_SIZE}px`,
           boxSizing: "content-box",
           padding: boxElement.style.outlineWidth || "0px"
-        });
-        showPopover(boxElement);
+        }), showPopover(boxElement);
       }
     });
-  }, "updateBoxStyles");
-  boxes.subscribe(updateBoxStyles);
-  targets.subscribe(updateBoxStyles);
-  hovered.subscribe(updateBoxStyles);
-  focused.subscribe(updateBoxStyles);
-  selected.subscribe(updateBoxStyles);
-  const renderMenu = /* @__PURE__ */ __name(() => {
-    if (!root) {
+  };
+  boxes.subscribe(updateBoxStyles), targets.subscribe(updateBoxStyles), hovered.subscribe(updateBoxStyles), focused.subscribe(updateBoxStyles), selected.subscribe(updateBoxStyles);
+  let renderMenu = () => {
+    if (!root)
       return;
-    }
     let menu = document3.getElementById(menuId);
-    if (menu) {
+    if (menu)
       menu.innerHTML = "";
-    } else {
-      const props = { id: menuId, popover: "manual" };
-      menu = root.appendChild(createElement("div", props));
-      root.appendChild(
+    else {
+      let props = { id: menuId, popover: "manual" };
+      menu = root.appendChild(createElement("div", props)), root.appendChild(
         createElement("style", {}, [
           `
             #${menuId} {
@@ -1022,132 +765,99 @@ var useHighlights = /* @__PURE__ */ __name((channel) => {
         ])
       );
     }
-    const selectedElement = selected.get();
-    const elementList = selectedElement ? [selectedElement] : targets.get();
-    if (elementList.length) {
-      menu.style.position = getComputedStyle(elementList[0].element).position === "fixed" ? "fixed" : "absolute";
-      menu.appendChild(
-        createElement(
-          "ul",
-          { class: "element-list" },
-          elementList.map((target) => {
-            const selectable = elementList.length > 1 && !!target.menu?.some(
-              (group) => group.some(
-                (item) => !item.selectors || item.selectors.some((s) => target.selectors.includes(s))
-              )
-            );
-            const props = selectable ? {
-              class: "selectable",
-              onClick: /* @__PURE__ */ __name(() => selected.set(target), "onClick"),
-              onMouseEnter: /* @__PURE__ */ __name(() => focused.set(target), "onMouseEnter"),
-              onMouseLeave: /* @__PURE__ */ __name(() => focused.set(void 0), "onMouseLeave")
-            } : selectedElement ? { class: "selected", onClick: /* @__PURE__ */ __name(() => selected.set(void 0), "onClick") } : {};
-            const asButton = selectable || selectedElement;
-            return createElement("li", props, [
-              createElement(asButton ? "button" : "div", asButton ? { type: "button" } : {}, [
-                selectedElement ? createIcon("chevronLeft") : null,
-                createElement("code", {}, [target.element.outerHTML]),
-                selectable ? createIcon("chevronRight") : null
-              ])
-            ]);
-          })
-        )
-      );
-    }
-    if (selected.get() || targets.get().length === 1) {
-      const target = selected.get() || targets.get()[0];
-      const menuGroups = target.menu?.filter(
+    let selectedElement = selected.get(), elementList = selectedElement ? [selectedElement] : targets.get();
+    if (elementList.length && (menu.style.position = getComputedStyle(elementList[0].element).position === "fixed" ? "fixed" : "absolute", menu.appendChild(
+      createElement(
+        "ul",
+        { class: "element-list" },
+        elementList.map((target) => {
+          let selectable = elementList.length > 1 && !!target.menu?.some(
+            (group) => group.some(
+              (item) => !item.selectors || item.selectors.some((s) => target.selectors.includes(s))
+            )
+          ), props = selectable ? {
+            class: "selectable",
+            onClick: () => selected.set(target),
+            onMouseEnter: () => focused.set(target),
+            onMouseLeave: () => focused.set(void 0)
+          } : selectedElement ? { class: "selected", onClick: () => selected.set(void 0) } : {}, asButton = selectable || selectedElement;
+          return createElement("li", props, [
+            createElement(asButton ? "button" : "div", asButton ? { type: "button" } : {}, [
+              selectedElement ? createIcon("chevronLeft") : null,
+              createElement("code", {}, [target.element.outerHTML]),
+              selectable ? createIcon("chevronRight") : null
+            ])
+          ]);
+        })
+      )
+    )), selected.get() || targets.get().length === 1) {
+      let target = selected.get() || targets.get()[0], menuGroups = target.menu?.filter(
         (group) => group.some(
           (item) => !item.selectors || item.selectors.some((s) => target.selectors.includes(s))
         )
       );
-      if (menuGroups?.length) {
-        menu.appendChild(
-          createElement(
-            "ul",
-            { class: "menu-list" },
-            menuGroups.map(
-              (menuItems) => createElement("li", {}, [
-                createElement(
-                  "ul",
-                  { class: "menu-items" },
-                  menuItems.map(
-                    ({ id, title, description, iconLeft, iconRight, clickEvent: event }) => {
-                      const onClick = event && (() => channel.emit(event, id, getEventDetails(target)));
-                      return createElement("li", {}, [
-                        createElement(
-                          onClick ? "button" : "div",
-                          onClick ? { class: "menu-item", type: "button", onClick } : { class: "menu-item" },
-                          [
-                            iconLeft ? createIcon(iconLeft) : null,
-                            createElement("div", { class: "menu-item-content" }, [
-                              createElement(description ? "strong" : "span", {}, [title]),
-                              description && createElement("span", {}, [description])
-                            ]),
-                            iconRight ? createIcon(iconRight) : null
-                          ]
-                        )
-                      ]);
-                    }
-                  )
+      menuGroups?.length && menu.appendChild(
+        createElement(
+          "ul",
+          { class: "menu-list" },
+          menuGroups.map(
+            (menuItems) => createElement("li", {}, [
+              createElement(
+                "ul",
+                { class: "menu-items" },
+                menuItems.map(
+                  ({ id, title, description, iconLeft, iconRight, clickEvent: event }) => {
+                    let onClick = event && (() => channel.emit(event, id, getEventDetails(target)));
+                    return createElement("li", {}, [
+                      createElement(
+                        onClick ? "button" : "div",
+                        onClick ? { class: "menu-item", type: "button", onClick } : { class: "menu-item" },
+                        [
+                          iconLeft ? createIcon(iconLeft) : null,
+                          createElement("div", { class: "menu-item-content" }, [
+                            createElement(description ? "strong" : "span", {}, [title]),
+                            description && createElement("span", {}, [description])
+                          ]),
+                          iconRight ? createIcon(iconRight) : null
+                        ]
+                      )
+                    ]);
+                  }
                 )
-              ])
-            )
+              )
+            ])
           )
-        );
-      }
+        )
+      );
     }
-    const coords = clickCoords.get();
-    if (coords) {
-      Object.assign(menu.style, {
-        display: "block",
-        left: `${menu.style.position === "fixed" ? coords.x - window.scrollX : coords.x}px`,
-        top: `${menu.style.position === "fixed" ? coords.y - window.scrollY : coords.y}px`
-      });
-      showPopover(menu);
-      requestAnimationFrame(() => keepInViewport(menu, coords, { topOffset: 15, centered: true }));
-    } else {
-      hidePopover(menu);
-      Object.assign(menu.style, { display: "none" });
-    }
-  }, "renderMenu");
-  targets.subscribe(renderMenu);
-  selected.subscribe(renderMenu);
-  const addHighlight = /* @__PURE__ */ __name((highlight) => {
-    const info = normalizeOptions(highlight);
+    let coords = clickCoords.get();
+    coords ? (Object.assign(menu.style, {
+      display: "block",
+      left: `${menu.style.position === "fixed" ? coords.x - window.scrollX : coords.x}px`,
+      top: `${menu.style.position === "fixed" ? coords.y - window.scrollY : coords.y}px`
+    }), showPopover(menu), requestAnimationFrame(() => keepInViewport(menu, coords, { topOffset: 15, centered: !0 }))) : (hidePopover(menu), Object.assign(menu.style, { display: "none" }));
+  };
+  targets.subscribe(renderMenu), selected.subscribe(renderMenu);
+  let addHighlight = (highlight) => {
+    let info = normalizeOptions(highlight);
     highlights.set((value) => {
-      const others = info.id ? value.filter((h) => h.id !== info.id) : value;
+      let others = info.id ? value.filter((h) => h.id !== info.id) : value;
       return info.selectors?.length ? [...others, info] : others;
     });
-  }, "addHighlight");
-  const removeHighlight = /* @__PURE__ */ __name((id) => {
-    if (id) {
-      highlights.set((value) => value.filter((h) => h.id !== id));
-    }
-  }, "removeHighlight");
-  const resetState = /* @__PURE__ */ __name(() => {
-    highlights.set([]);
-    elements.set(/* @__PURE__ */ new Map());
-    boxes.set([]);
-    clickCoords.set(void 0);
-    hoverCoords.set(void 0);
-    targets.set([]);
-    hovered.set([]);
-    focused.set(void 0);
-    selected.set(void 0);
-  }, "resetState");
-  let removeTimeout;
-  const scrollIntoView = /* @__PURE__ */ __name((target, options) => {
-    const id = "scrollIntoView-highlight";
-    clearTimeout(removeTimeout);
-    removeHighlight(id);
-    const element = document3.querySelector(target);
+  }, removeHighlight = (id) => {
+    id && highlights.set((value) => value.filter((h) => h.id !== id));
+  }, resetState = () => {
+    highlights.set([]), elements.set(/* @__PURE__ */ new Map()), boxes.set([]), clickCoords.set(void 0), hoverCoords.set(void 0), targets.set([]), hovered.set([]), focused.set(void 0), selected.set(void 0);
+  }, removeTimeout, scrollIntoView = (target, options) => {
+    let id = "scrollIntoView-highlight";
+    clearTimeout(removeTimeout), removeHighlight(id);
+    let element = document3.querySelector(target);
     if (!element) {
       console.warn(`Cannot scroll into view: ${target} not found`);
       return;
     }
     element.scrollIntoView({ behavior: "smooth", block: "center", ...options });
-    const keyframeName = `kf-${Math.random().toString(36).substring(2, 15)}`;
+    let keyframeName = `kf-${Math.random().toString(36).substring(2, 15)}`;
     highlights.set((value) => [
       ...value,
       {
@@ -1168,29 +878,18 @@ var useHighlights = /* @__PURE__ */ __name((channel) => {
           100% { outline: 2px solid #1EA7FD00; }
         }`
       }
-    ]);
-    removeTimeout = setTimeout(() => removeHighlight(id), 3500);
-  }, "scrollIntoView");
-  const onMouseMove = /* @__PURE__ */ __name((event) => {
+    ]), removeTimeout = setTimeout(() => removeHighlight(id), 3500);
+  }, onMouseMove = (event) => {
     requestAnimationFrame(() => hoverCoords.set({ x: event.pageX, y: event.pageY }));
-  }, "onMouseMove");
-  document3.body.addEventListener("mousemove", onMouseMove);
-  channel.on(HIGHLIGHT, addHighlight);
-  channel.on(REMOVE_HIGHLIGHT, removeHighlight);
-  channel.on(RESET_HIGHLIGHT, resetState);
-  channel.on(SCROLL_INTO_VIEW, scrollIntoView);
-  channel.on(STORY_RENDER_PHASE_CHANGED, ({ newPhase }) => {
-    if (newPhase === "loading") {
-      resetState();
-    }
+  };
+  document3.body.addEventListener("mousemove", onMouseMove), channel.on(HIGHLIGHT, addHighlight), channel.on(REMOVE_HIGHLIGHT, removeHighlight), channel.on(RESET_HIGHLIGHT, resetState), channel.on(SCROLL_INTO_VIEW, scrollIntoView), channel.on(STORY_RENDER_PHASE_CHANGED, ({ newPhase }) => {
+    newPhase === "loading" && resetState();
   });
-}, "useHighlights");
+};
 
 // src/highlight/preview.ts
-if (globalThis?.FEATURES?.highlight && addons?.ready) {
-  addons.ready().then(useHighlights);
-}
-var preview_default4 = /* @__PURE__ */ __name(() => definePreviewAddon4({}), "default");
+globalThis?.FEATURES?.highlight && addons?.ready && addons.ready().then(useHighlights);
+var preview_default4 = () => definePreviewAddon4({});
 
 // src/measure/preview.ts
 import { definePreviewAddon as definePreviewAddon5 } from "storybook/internal/csf";
@@ -1201,73 +900,40 @@ import { useEffect as useEffect2 } from "storybook/preview-api";
 // src/measure/box-model/canvas.ts
 import { global } from "@storybook/global";
 function getDocumentWidthAndHeight() {
-  const container = global.document.documentElement;
-  const height = Math.max(container.scrollHeight, container.offsetHeight);
-  const width = Math.max(container.scrollWidth, container.offsetWidth);
-  return { width, height };
+  let container = global.document.documentElement, height = Math.max(container.scrollHeight, container.offsetHeight);
+  return { width: Math.max(container.scrollWidth, container.offsetWidth), height };
 }
-__name(getDocumentWidthAndHeight, "getDocumentWidthAndHeight");
 function createCanvas() {
-  const canvas = global.document.createElement("canvas");
+  let canvas = global.document.createElement("canvas");
   canvas.id = "storybook-addon-measure";
-  const context = canvas.getContext("2d");
+  let context = canvas.getContext("2d");
   invariant(context != null);
-  const { width, height } = getDocumentWidthAndHeight();
-  setCanvasWidthAndHeight(canvas, context, { width, height });
-  canvas.style.position = "absolute";
-  canvas.style.left = "0";
-  canvas.style.top = "0";
-  canvas.style.zIndex = "2147483647";
-  canvas.style.pointerEvents = "none";
-  global.document.body.appendChild(canvas);
-  return { canvas, context, width, height };
+  let { width, height } = getDocumentWidthAndHeight();
+  return setCanvasWidthAndHeight(canvas, context, { width, height }), canvas.style.position = "absolute", canvas.style.left = "0", canvas.style.top = "0", canvas.style.zIndex = "2147483647", canvas.style.pointerEvents = "none", global.document.body.appendChild(canvas), { canvas, context, width, height };
 }
-__name(createCanvas, "createCanvas");
 function setCanvasWidthAndHeight(canvas, context, { width, height }) {
-  canvas.style.width = `${width}px`;
-  canvas.style.height = `${height}px`;
-  const scale = global.window.devicePixelRatio;
-  canvas.width = Math.floor(width * scale);
-  canvas.height = Math.floor(height * scale);
-  context.scale(scale, scale);
+  canvas.style.width = `${width}px`, canvas.style.height = `${height}px`;
+  let scale = global.window.devicePixelRatio;
+  canvas.width = Math.floor(width * scale), canvas.height = Math.floor(height * scale), context.scale(scale, scale);
 }
-__name(setCanvasWidthAndHeight, "setCanvasWidthAndHeight");
 var state2 = {};
 function init() {
-  if (!state2.canvas) {
-    state2 = createCanvas();
-  }
+  state2.canvas || (state2 = createCanvas());
 }
-__name(init, "init");
 function clear() {
-  if (state2.context) {
-    state2.context.clearRect(0, 0, state2.width ?? 0, state2.height ?? 0);
-  }
+  state2.context && state2.context.clearRect(0, 0, state2.width ?? 0, state2.height ?? 0);
 }
-__name(clear, "clear");
 function draw(callback) {
-  clear();
-  callback(state2.context);
+  clear(), callback(state2.context);
 }
-__name(draw, "draw");
 function rescale() {
-  invariant(state2.canvas, "Canvas should exist in the state.");
-  invariant(state2.context, "Context should exist in the state.");
-  setCanvasWidthAndHeight(state2.canvas, state2.context, { width: 0, height: 0 });
-  const { width, height } = getDocumentWidthAndHeight();
-  setCanvasWidthAndHeight(state2.canvas, state2.context, { width, height });
-  state2.width = width;
-  state2.height = height;
+  invariant(state2.canvas, "Canvas should exist in the state."), invariant(state2.context, "Context should exist in the state."), setCanvasWidthAndHeight(state2.canvas, state2.context, { width: 0, height: 0 });
+  let { width, height } = getDocumentWidthAndHeight();
+  setCanvasWidthAndHeight(state2.canvas, state2.context, { width, height }), state2.width = width, state2.height = height;
 }
-__name(rescale, "rescale");
 function destroy() {
-  if (state2.canvas) {
-    clear();
-    state2.canvas.parentNode?.removeChild(state2.canvas);
-    state2 = {};
-  }
+  state2.canvas && (clear(), state2.canvas.parentNode?.removeChild(state2.canvas), state2 = {});
 }
-__name(destroy, "destroy");
 
 // src/measure/box-model/visualizer.ts
 import { global as global2 } from "@storybook/global";
@@ -1279,189 +945,67 @@ var colors = {
   padding: "#93c47d",
   content: "#6fa8dc",
   text: "#232020"
-};
-var labelPadding = 6;
+}, labelPadding = 6;
 function roundedRect(context, { x, y, w, h, r }) {
-  x = x - w / 2;
-  y = y - h / 2;
-  if (w < 2 * r) {
-    r = w / 2;
-  }
-  if (h < 2 * r) {
-    r = h / 2;
-  }
-  context.beginPath();
-  context.moveTo(x + r, y);
-  context.arcTo(x + w, y, x + w, y + h, r);
-  context.arcTo(x + w, y + h, x, y + h, r);
-  context.arcTo(x, y + h, x, y, r);
-  context.arcTo(x, y, x + w, y, r);
-  context.closePath();
+  x = x - w / 2, y = y - h / 2, w < 2 * r && (r = w / 2), h < 2 * r && (r = h / 2), context.beginPath(), context.moveTo(x + r, y), context.arcTo(x + w, y, x + w, y + h, r), context.arcTo(x + w, y + h, x, y + h, r), context.arcTo(x, y + h, x, y, r), context.arcTo(x, y, x + w, y, r), context.closePath();
 }
-__name(roundedRect, "roundedRect");
 function positionCoordinate(position, { padding, border, width, height, top, left }) {
-  const contentWidth = width - border.left - border.right - padding.left - padding.right;
-  const contentHeight = height - padding.top - padding.bottom - border.top - border.bottom;
-  let x = left + border.left + padding.left;
-  let y = top + border.top + padding.top;
-  if (position === "top") {
-    x += contentWidth / 2;
-  } else if (position === "right") {
-    x += contentWidth;
-    y += contentHeight / 2;
-  } else if (position === "bottom") {
-    x += contentWidth / 2;
-    y += contentHeight;
-  } else if (position === "left") {
-    y += contentHeight / 2;
-  } else if (position === "center") {
-    x += contentWidth / 2;
-    y += contentHeight / 2;
-  }
-  return { x, y };
+  let contentWidth = width - border.left - border.right - padding.left - padding.right, contentHeight = height - padding.top - padding.bottom - border.top - border.bottom, x = left + border.left + padding.left, y = top + border.top + padding.top;
+  return position === "top" ? x += contentWidth / 2 : position === "right" ? (x += contentWidth, y += contentHeight / 2) : position === "bottom" ? (x += contentWidth / 2, y += contentHeight) : position === "left" ? y += contentHeight / 2 : position === "center" && (x += contentWidth / 2, y += contentHeight / 2), { x, y };
 }
-__name(positionCoordinate, "positionCoordinate");
 function offset(type, position, { margin, border, padding }, labelPaddingSize, external) {
-  let shift = /* @__PURE__ */ __name((dir) => 0, "shift");
-  let offsetX = 0;
-  let offsetY = 0;
-  const locationMultiplier = external ? 1 : 0.5;
-  const labelPaddingShift = external ? labelPaddingSize * 2 : 0;
-  if (type === "padding") {
-    shift = /* @__PURE__ */ __name((dir) => padding[dir] * locationMultiplier + labelPaddingShift, "shift");
-  } else if (type === "border") {
-    shift = /* @__PURE__ */ __name((dir) => padding[dir] + border[dir] * locationMultiplier + labelPaddingShift, "shift");
-  } else if (type === "margin") {
-    shift = /* @__PURE__ */ __name((dir) => padding[dir] + border[dir] + margin[dir] * locationMultiplier + labelPaddingShift, "shift");
-  }
-  if (position === "top") {
-    offsetY = -shift("top");
-  } else if (position === "right") {
-    offsetX = shift("right");
-  } else if (position === "bottom") {
-    offsetY = shift("bottom");
-  } else if (position === "left") {
-    offsetX = -shift("left");
-  }
-  return { offsetX, offsetY };
+  let shift = (dir) => 0, offsetX = 0, offsetY = 0, locationMultiplier = external ? 1 : 0.5, labelPaddingShift = external ? labelPaddingSize * 2 : 0;
+  return type === "padding" ? shift = (dir) => padding[dir] * locationMultiplier + labelPaddingShift : type === "border" ? shift = (dir) => padding[dir] + border[dir] * locationMultiplier + labelPaddingShift : type === "margin" && (shift = (dir) => padding[dir] + border[dir] + margin[dir] * locationMultiplier + labelPaddingShift), position === "top" ? offsetY = -shift("top") : position === "right" ? offsetX = shift("right") : position === "bottom" ? offsetY = shift("bottom") : position === "left" && (offsetX = -shift("left")), { offsetX, offsetY };
 }
-__name(offset, "offset");
 function collide(a, b) {
   return Math.abs(a.x - b.x) < Math.abs(a.w + b.w) / 2 && Math.abs(a.y - b.y) < Math.abs(a.h + b.h) / 2;
 }
-__name(collide, "collide");
 function overlapAdjustment(position, currentRect, prevRect) {
-  if (position === "top") {
-    currentRect.y = prevRect.y - prevRect.h - labelPadding;
-  } else if (position === "right") {
-    currentRect.x = prevRect.x + prevRect.w / 2 + labelPadding + currentRect.w / 2;
-  } else if (position === "bottom") {
-    currentRect.y = prevRect.y + prevRect.h + labelPadding;
-  } else if (position === "left") {
-    currentRect.x = prevRect.x - prevRect.w / 2 - labelPadding - currentRect.w / 2;
-  }
-  return { x: currentRect.x, y: currentRect.y };
+  return position === "top" ? currentRect.y = prevRect.y - prevRect.h - labelPadding : position === "right" ? currentRect.x = prevRect.x + prevRect.w / 2 + labelPadding + currentRect.w / 2 : position === "bottom" ? currentRect.y = prevRect.y + prevRect.h + labelPadding : position === "left" && (currentRect.x = prevRect.x - prevRect.w / 2 - labelPadding - currentRect.w / 2), { x: currentRect.x, y: currentRect.y };
 }
-__name(overlapAdjustment, "overlapAdjustment");
 function textWithRect(context, type, { x, y, w, h }, text) {
-  roundedRect(context, { x, y, w, h, r: 3 });
-  context.fillStyle = `${colors[type]}dd`;
-  context.fill();
-  context.strokeStyle = colors[type];
-  context.stroke();
-  context.fillStyle = colors.text;
-  context.fillText(text, x, y);
-  roundedRect(context, { x, y, w, h, r: 3 });
-  context.fillStyle = `${colors[type]}dd`;
-  context.fill();
-  context.strokeStyle = colors[type];
-  context.stroke();
-  context.fillStyle = colors.text;
-  context.fillText(text, x, y);
-  return { x, y, w, h };
+  return roundedRect(context, { x, y, w, h, r: 3 }), context.fillStyle = `${colors[type]}dd`, context.fill(), context.strokeStyle = colors[type], context.stroke(), context.fillStyle = colors.text, context.fillText(text, x, y), roundedRect(context, { x, y, w, h, r: 3 }), context.fillStyle = `${colors[type]}dd`, context.fill(), context.strokeStyle = colors[type], context.stroke(), context.fillStyle = colors.text, context.fillText(text, x, y), { x, y, w, h };
 }
-__name(textWithRect, "textWithRect");
 function configureText(context, text) {
-  context.font = "600 12px monospace";
-  context.textBaseline = "middle";
-  context.textAlign = "center";
-  const metrics = context.measureText(text);
-  const actualHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
-  const w = metrics.width + labelPadding * 2;
-  const h = actualHeight + labelPadding * 2;
+  context.font = "600 12px monospace", context.textBaseline = "middle", context.textAlign = "center";
+  let metrics = context.measureText(text), actualHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent, w = metrics.width + labelPadding * 2, h = actualHeight + labelPadding * 2;
   return { w, h };
 }
-__name(configureText, "configureText");
-function drawLabel(context, measurements, { type, position = "center", text }, prevRect, external = false) {
-  let { x, y } = positionCoordinate(position, measurements);
-  const { offsetX, offsetY } = offset(type, position, measurements, labelPadding + 1, external);
-  x += offsetX;
-  y += offsetY;
-  const { w, h } = configureText(context, text);
+function drawLabel(context, measurements, { type, position = "center", text }, prevRect, external = !1) {
+  let { x, y } = positionCoordinate(position, measurements), { offsetX, offsetY } = offset(type, position, measurements, labelPadding + 1, external);
+  x += offsetX, y += offsetY;
+  let { w, h } = configureText(context, text);
   if (prevRect && collide({ x, y, w, h }, prevRect)) {
-    const adjusted = overlapAdjustment(position, { x, y, w, h }, prevRect);
-    x = adjusted.x;
-    y = adjusted.y;
+    let adjusted = overlapAdjustment(position, { x, y, w, h }, prevRect);
+    x = adjusted.x, y = adjusted.y;
   }
   return textWithRect(context, type, { x, y, w, h }, text);
 }
-__name(drawLabel, "drawLabel");
 function floatingOffset(alignment, { w, h }) {
-  const deltaW = w * 0.5 + labelPadding;
-  const deltaH = h * 0.5 + labelPadding;
+  let deltaW = w * 0.5 + labelPadding, deltaH = h * 0.5 + labelPadding;
   return {
     offsetX: (alignment.x === "left" ? -1 : 1) * deltaW,
     offsetY: (alignment.y === "top" ? -1 : 1) * deltaH
   };
 }
-__name(floatingOffset, "floatingOffset");
 function drawFloatingLabel(context, measurements, { type, text }) {
-  const { floatingAlignment: floatingAlignment2, extremities } = measurements;
-  let x = extremities[floatingAlignment2.x];
-  let y = extremities[floatingAlignment2.y];
-  const { w, h } = configureText(context, text);
-  const { offsetX, offsetY } = floatingOffset(floatingAlignment2, {
+  let { floatingAlignment: floatingAlignment2, extremities } = measurements, x = extremities[floatingAlignment2.x], y = extremities[floatingAlignment2.y], { w, h } = configureText(context, text), { offsetX, offsetY } = floatingOffset(floatingAlignment2, {
     w,
     h
   });
-  x += offsetX;
-  y += offsetY;
-  return textWithRect(context, type, { x, y, w, h }, text);
+  return x += offsetX, y += offsetY, textWithRect(context, type, { x, y, w, h }, text);
 }
-__name(drawFloatingLabel, "drawFloatingLabel");
 function drawStack(context, measurements, stack, external) {
-  const rects = [];
+  let rects = [];
   stack.forEach((l, idx) => {
-    const rect = external && l.position === "center" ? drawFloatingLabel(context, measurements, l) : drawLabel(context, measurements, l, rects[idx - 1], external);
+    let rect = external && l.position === "center" ? drawFloatingLabel(context, measurements, l) : drawLabel(context, measurements, l, rects[idx - 1], external);
     rects[idx] = rect;
   });
 }
-__name(drawStack, "drawStack");
 function labelStacks(context, measurements, labels, externalLabels) {
-  const stacks = labels.reduce((acc, l) => {
-    if (!Object.prototype.hasOwnProperty.call(acc, l.position)) {
-      acc[l.position] = [];
-    }
-    acc[l.position]?.push(l);
-    return acc;
-  }, {});
-  if (stacks.top) {
-    drawStack(context, measurements, stacks.top, externalLabels);
-  }
-  if (stacks.right) {
-    drawStack(context, measurements, stacks.right, externalLabels);
-  }
-  if (stacks.bottom) {
-    drawStack(context, measurements, stacks.bottom, externalLabels);
-  }
-  if (stacks.left) {
-    drawStack(context, measurements, stacks.left, externalLabels);
-  }
-  if (stacks.center) {
-    drawStack(context, measurements, stacks.center, externalLabels);
-  }
+  let stacks = labels.reduce((acc, l) => (Object.prototype.hasOwnProperty.call(acc, l.position) || (acc[l.position] = []), acc[l.position]?.push(l), acc), {});
+  stacks.top && drawStack(context, measurements, stacks.top, externalLabels), stacks.right && drawStack(context, measurements, stacks.right, externalLabels), stacks.bottom && drawStack(context, measurements, stacks.bottom, externalLabels), stacks.left && drawStack(context, measurements, stacks.left, externalLabels), stacks.center && drawStack(context, measurements, stacks.center, externalLabels);
 }
-__name(labelStacks, "labelStacks");
 
 // src/measure/box-model/visualizer.ts
 var colors2 = {
@@ -1469,28 +1013,23 @@ var colors2 = {
   border: "#ffe599a8",
   padding: "#93c47d8c",
   content: "#6fa8dca8"
-};
-var SMALL_NODE_SIZE = 30;
+}, SMALL_NODE_SIZE = 30;
 function pxToNumber(px) {
   return parseInt(px.replace("px", ""), 10);
 }
-__name(pxToNumber, "pxToNumber");
 function round(value) {
   return Number.isInteger(value) ? value : value.toFixed(2);
 }
-__name(round, "round");
 function filterZeroValues(labels) {
   return labels.filter((l) => l.text !== 0 && l.text !== "0");
 }
-__name(filterZeroValues, "filterZeroValues");
 function floatingAlignment(extremities) {
-  const windowExtremities = {
+  let windowExtremities = {
     top: global2.window.scrollY,
     bottom: global2.window.scrollY + global2.window.innerHeight,
     left: global2.window.scrollX,
     right: global2.window.scrollX + global2.window.innerWidth
-  };
-  const distances = {
+  }, distances = {
     top: Math.abs(windowExtremities.top - extremities.top),
     bottom: Math.abs(windowExtremities.bottom - extremities.bottom),
     left: Math.abs(windowExtremities.left - extremities.left),
@@ -1501,11 +1040,8 @@ function floatingAlignment(extremities) {
     y: distances.top > distances.bottom ? "top" : "bottom"
   };
 }
-__name(floatingAlignment, "floatingAlignment");
 function measureElement(element) {
-  const style = global2.getComputedStyle(element);
-  let { top, left, right, bottom, width, height } = element.getBoundingClientRect();
-  const {
+  let style = global2.getComputedStyle(element), { top, left, right, bottom, width, height } = element.getBoundingClientRect(), {
     marginTop,
     marginBottom,
     marginLeft,
@@ -1519,29 +1055,23 @@ function measureElement(element) {
     borderLeftWidth,
     borderRightWidth
   } = style;
-  top = top + global2.window.scrollY;
-  left = left + global2.window.scrollX;
-  bottom = bottom + global2.window.scrollY;
-  right = right + global2.window.scrollX;
-  const margin = {
+  top = top + global2.window.scrollY, left = left + global2.window.scrollX, bottom = bottom + global2.window.scrollY, right = right + global2.window.scrollX;
+  let margin = {
     top: pxToNumber(marginTop),
     bottom: pxToNumber(marginBottom),
     left: pxToNumber(marginLeft),
     right: pxToNumber(marginRight)
-  };
-  const padding = {
+  }, padding = {
     top: pxToNumber(paddingTop),
     bottom: pxToNumber(paddingBottom),
     left: pxToNumber(paddingLeft),
     right: pxToNumber(paddingRight)
-  };
-  const border = {
+  }, border = {
     top: pxToNumber(borderTopWidth),
     bottom: pxToNumber(borderBottomWidth),
     left: pxToNumber(borderLeftWidth),
     right: pxToNumber(borderRightWidth)
-  };
-  const extremities = {
+  }, extremities = {
     top: top - margin.top,
     bottom: bottom + margin.bottom,
     left: left - margin.left,
@@ -1561,15 +1091,10 @@ function measureElement(element) {
     floatingAlignment: floatingAlignment(extremities)
   };
 }
-__name(measureElement, "measureElement");
 function drawMargin(context, { margin, width, height, top, left, bottom, right }) {
-  const marginHeight = height + margin.bottom + margin.top;
-  context.fillStyle = colors2.margin;
-  context.fillRect(left, top - margin.top, width, margin.top);
-  context.fillRect(right, top - margin.top, margin.right, marginHeight);
-  context.fillRect(left, bottom, width, margin.bottom);
-  context.fillRect(left - margin.left, top - margin.top, margin.left, marginHeight);
-  const marginLabels = [
+  let marginHeight = height + margin.bottom + margin.top;
+  context.fillStyle = colors2.margin, context.fillRect(left, top - margin.top, width, margin.top), context.fillRect(right, top - margin.top, margin.right, marginHeight), context.fillRect(left, bottom, width, margin.bottom), context.fillRect(left - margin.left, top - margin.top, margin.left, marginHeight);
+  let marginLabels = [
     {
       type: "margin",
       text: round(margin.top),
@@ -1593,26 +1118,20 @@ function drawMargin(context, { margin, width, height, top, left, bottom, right }
   ];
   return filterZeroValues(marginLabels);
 }
-__name(drawMargin, "drawMargin");
 function drawPadding(context, { padding, border, width, height, top, left, bottom, right }) {
-  const paddingWidth = width - border.left - border.right;
-  const paddingHeight = height - padding.top - padding.bottom - border.top - border.bottom;
-  context.fillStyle = colors2.padding;
-  context.fillRect(left + border.left, top + border.top, paddingWidth, padding.top);
-  context.fillRect(
+  let paddingWidth = width - border.left - border.right, paddingHeight = height - padding.top - padding.bottom - border.top - border.bottom;
+  context.fillStyle = colors2.padding, context.fillRect(left + border.left, top + border.top, paddingWidth, padding.top), context.fillRect(
     right - padding.right - border.right,
     top + padding.top + border.top,
     padding.right,
     paddingHeight
-  );
-  context.fillRect(
+  ), context.fillRect(
     left + border.left,
     bottom - padding.bottom - border.bottom,
     paddingWidth,
     padding.bottom
-  );
-  context.fillRect(left + border.left, top + padding.top + border.top, padding.left, paddingHeight);
-  const paddingLabels = [
+  ), context.fillRect(left + border.left, top + padding.top + border.top, padding.left, paddingHeight);
+  let paddingLabels = [
     {
       type: "padding",
       text: padding.top,
@@ -1636,15 +1155,10 @@ function drawPadding(context, { padding, border, width, height, top, left, botto
   ];
   return filterZeroValues(paddingLabels);
 }
-__name(drawPadding, "drawPadding");
 function drawBorder(context, { border, width, height, top, left, bottom, right }) {
-  const borderHeight = height - border.top - border.bottom;
-  context.fillStyle = colors2.border;
-  context.fillRect(left, top, width, border.top);
-  context.fillRect(left, bottom - border.bottom, width, border.bottom);
-  context.fillRect(left, top + border.top, border.left, borderHeight);
-  context.fillRect(right - border.right, top + border.top, border.right, borderHeight);
-  const borderLabels = [
+  let borderHeight = height - border.top - border.bottom;
+  context.fillStyle = colors2.border, context.fillRect(left, top, width, border.top), context.fillRect(left, bottom - border.bottom, width, border.bottom), context.fillRect(left, top + border.top, border.left, borderHeight), context.fillRect(right - border.right, top + border.top, border.right, borderHeight);
+  let borderLabels = [
     {
       type: "border",
       text: border.top,
@@ -1668,18 +1182,14 @@ function drawBorder(context, { border, width, height, top, left, bottom, right }
   ];
   return filterZeroValues(borderLabels);
 }
-__name(drawBorder, "drawBorder");
 function drawContent(context, { padding, border, width, height, top, left }) {
-  const contentWidth = width - border.left - border.right - padding.left - padding.right;
-  const contentHeight = height - padding.top - padding.bottom - border.top - border.bottom;
-  context.fillStyle = colors2.content;
-  context.fillRect(
+  let contentWidth = width - border.left - border.right - padding.left - padding.right, contentHeight = height - padding.top - padding.bottom - border.top - border.bottom;
+  return context.fillStyle = colors2.content, context.fillRect(
     left + border.left + padding.left,
     top + border.top + padding.top,
     contentWidth,
     contentHeight
-  );
-  return [
+  ), [
     {
       type: "content",
       position: "center",
@@ -1687,16 +1197,10 @@ function drawContent(context, { padding, border, width, height, top, left }) {
     }
   ];
 }
-__name(drawContent, "drawContent");
 function drawBoxModel(element) {
   return (context) => {
     if (element && context) {
-      const measurements = measureElement(element);
-      const marginLabels = drawMargin(context, measurements);
-      const paddingLabels = drawPadding(context, measurements);
-      const borderLabels = drawBorder(context, measurements);
-      const contentLabels = drawContent(context, measurements);
-      const externalLabels = measurements.width <= SMALL_NODE_SIZE * 3 || measurements.height <= SMALL_NODE_SIZE;
+      let measurements = measureElement(element), marginLabels = drawMargin(context, measurements), paddingLabels = drawPadding(context, measurements), borderLabels = drawBorder(context, measurements), contentLabels = drawContent(context, measurements), externalLabels = measurements.width <= SMALL_NODE_SIZE * 3 || measurements.height <= SMALL_NODE_SIZE;
       labelStacks(
         context,
         measurements,
@@ -1706,94 +1210,64 @@ function drawBoxModel(element) {
     }
   };
 }
-__name(drawBoxModel, "drawBoxModel");
 function drawSelectedElement(element) {
   draw(drawBoxModel(element));
 }
-__name(drawSelectedElement, "drawSelectedElement");
 
 // src/measure/util.ts
 import { global as global3 } from "@storybook/global";
-var deepElementFromPoint = /* @__PURE__ */ __name((x, y) => {
-  const element = global3.document.elementFromPoint(x, y);
-  const crawlShadows = /* @__PURE__ */ __name((node) => {
+var deepElementFromPoint = (x, y) => {
+  let element = global3.document.elementFromPoint(x, y), crawlShadows = (node) => {
     if (node && node.shadowRoot) {
-      const nestedElement = node.shadowRoot.elementFromPoint(x, y);
-      if (node.isEqualNode(nestedElement)) {
-        return node;
-      }
-      if (nestedElement.shadowRoot) {
-        return crawlShadows(nestedElement);
-      }
-      return nestedElement;
+      let nestedElement = node.shadowRoot.elementFromPoint(x, y);
+      return node.isEqualNode(nestedElement) ? node : nestedElement.shadowRoot ? crawlShadows(nestedElement) : nestedElement;
     }
     return node;
-  }, "crawlShadows");
-  const shadowElement = crawlShadows(element);
-  return shadowElement || element;
-}, "deepElementFromPoint");
+  };
+  return crawlShadows(element) || element;
+};
 
 // src/measure/withMeasure.ts
-var nodeAtPointerRef;
-var pointer = { x: 0, y: 0 };
+var nodeAtPointerRef, pointer = { x: 0, y: 0 };
 function findAndDrawElement(x, y) {
-  nodeAtPointerRef = deepElementFromPoint(x, y);
-  drawSelectedElement(nodeAtPointerRef);
+  nodeAtPointerRef = deepElementFromPoint(x, y), drawSelectedElement(nodeAtPointerRef);
 }
-__name(findAndDrawElement, "findAndDrawElement");
-var withMeasure = /* @__PURE__ */ __name((StoryFn, context) => {
-  const { measureEnabled } = context.globals || {};
-  useEffect2(() => {
-    if (typeof globalThis.document === "undefined") {
+var withMeasure = (StoryFn, context) => {
+  let { measureEnabled } = context.globals || {};
+  return useEffect2(() => {
+    if (typeof globalThis.document > "u")
       return;
-    }
-    const onPointerMove = /* @__PURE__ */ __name((event) => {
+    let onPointerMove = (event) => {
       window.requestAnimationFrame(() => {
-        event.stopPropagation();
-        pointer.x = event.clientX;
-        pointer.y = event.clientY;
+        event.stopPropagation(), pointer.x = event.clientX, pointer.y = event.clientY;
       });
-    }, "onPointerMove");
-    globalThis.document.addEventListener("pointermove", onPointerMove);
-    return () => {
+    };
+    return globalThis.document.addEventListener("pointermove", onPointerMove), () => {
       globalThis.document.removeEventListener("pointermove", onPointerMove);
     };
-  }, []);
-  useEffect2(() => {
-    const onPointerOver = /* @__PURE__ */ __name((event) => {
+  }, []), useEffect2(() => {
+    let onPointerOver = (event) => {
       window.requestAnimationFrame(() => {
-        event.stopPropagation();
-        findAndDrawElement(event.clientX, event.clientY);
+        event.stopPropagation(), findAndDrawElement(event.clientX, event.clientY);
       });
-    }, "onPointerOver");
-    const onResize = /* @__PURE__ */ __name(() => {
+    }, onResize = () => {
       window.requestAnimationFrame(() => {
         rescale();
       });
-    }, "onResize");
-    if (context.viewMode === "story" && measureEnabled) {
-      globalThis.document.addEventListener("pointerover", onPointerOver);
-      init();
-      globalThis.window.addEventListener("resize", onResize);
-      findAndDrawElement(pointer.x, pointer.y);
-    }
-    return () => {
-      globalThis.window.removeEventListener("resize", onResize);
-      destroy();
     };
-  }, [measureEnabled, context.viewMode]);
-  return StoryFn();
-}, "withMeasure");
+    return context.viewMode === "story" && measureEnabled && (globalThis.document.addEventListener("pointerover", onPointerOver), init(), globalThis.window.addEventListener("resize", onResize), findAndDrawElement(pointer.x, pointer.y)), () => {
+      globalThis.window.removeEventListener("resize", onResize), destroy();
+    };
+  }, [measureEnabled, context.viewMode]), StoryFn();
+};
 
 // src/measure/preview.ts
-var decorators2 = globalThis.FEATURES?.measure ? [withMeasure] : [];
-var initialGlobals2 = {
-  [PARAM_KEY3]: false
-};
-var preview_default5 = /* @__PURE__ */ __name(() => definePreviewAddon5({
+var decorators2 = globalThis.FEATURES?.measure ? [withMeasure] : [], initialGlobals2 = {
+  [PARAM_KEY3]: !1
+}, preview_default5 = () => definePreviewAddon5({
   decorators: decorators2,
   initialGlobals: initialGlobals2
-}), "default");
+});
 
 // src/outline/preview.ts
 import { definePreviewAddon as definePreviewAddon6 } from "storybook/internal/csf";
@@ -1803,30 +1277,20 @@ import { useEffect as useEffect3, useMemo } from "storybook/preview-api";
 
 // src/outline/helpers.ts
 import { global as global4 } from "@storybook/global";
-var clearStyles2 = /* @__PURE__ */ __name((selector) => {
-  const selectors = Array.isArray(selector) ? selector : [selector];
-  selectors.forEach(clearStyle2);
-}, "clearStyles");
-var clearStyle2 = /* @__PURE__ */ __name((input) => {
-  const selector = typeof input === "string" ? input : input.join("");
-  const element = global4.document.getElementById(selector);
-  if (element && element.parentElement) {
-    element.parentElement.removeChild(element);
-  }
-}, "clearStyle");
-var addOutlineStyles = /* @__PURE__ */ __name((selector, css) => {
-  const existingStyle = global4.document.getElementById(selector);
-  if (existingStyle) {
-    if (existingStyle.innerHTML !== css) {
-      existingStyle.innerHTML = css;
-    }
-  } else {
-    const style = global4.document.createElement("style");
-    style.setAttribute("id", selector);
-    style.innerHTML = css;
-    global4.document.head.appendChild(style);
+var clearStyles2 = (selector) => {
+  (Array.isArray(selector) ? selector : [selector]).forEach(clearStyle2);
+}, clearStyle2 = (input) => {
+  let selector = typeof input == "string" ? input : input.join(""), element = global4.document.getElementById(selector);
+  element && element.parentElement && element.parentElement.removeChild(element);
+}, addOutlineStyles = (selector, css) => {
+  let existingStyle = global4.document.getElementById(selector);
+  if (existingStyle)
+    existingStyle.innerHTML !== css && (existingStyle.innerHTML = css);
+  else {
+    let style = global4.document.createElement("style");
+    style.setAttribute("id", selector), style.innerHTML = css, global4.document.head.appendChild(style);
   }
-}, "addOutlineStyles");
+};
 
 // src/outline/outlineCSS.ts
 function outlineCSS(selector) {
@@ -2227,37 +1691,22 @@ function outlineCSS(selector) {
       outline: 1px solid #db175b !important;
     }`;
 }
-__name(outlineCSS, "outlineCSS");
 
 // src/outline/withOutline.ts
-var withOutline = /* @__PURE__ */ __name((StoryFn, context) => {
-  const globals = context.globals || {};
-  const isActive = [true, "true"].includes(globals[PARAM_KEY4]);
-  const isInDocs = context.viewMode === "docs";
-  const outlineStyles = useMemo(() => {
-    const selector = isInDocs ? `[data-story-block="true"]` : ".sb-show-main";
-    return outlineCSS(selector);
-  }, [context]);
-  useEffect3(() => {
-    const selectorId = isInDocs ? `addon-outline-docs-${context.id}` : `addon-outline`;
-    if (!isActive) {
-      clearStyles2(selectorId);
-    } else {
-      addOutlineStyles(selectorId, outlineStyles);
-    }
-    return () => {
+var withOutline = (StoryFn, context) => {
+  let globals = context.globals || {}, isActive = [!0, "true"].includes(globals[PARAM_KEY4]), isInDocs = context.viewMode === "docs", outlineStyles = useMemo(() => outlineCSS(isInDocs ? '[data-story-block="true"]' : ".sb-show-main"), [context]);
+  return useEffect3(() => {
+    let selectorId = isInDocs ? `addon-outline-docs-${context.id}` : "addon-outline";
+    return isActive ? addOutlineStyles(selectorId, outlineStyles) : clearStyles2(selectorId), () => {
       clearStyles2(selectorId);
     };
-  }, [isActive, outlineStyles, context]);
-  return StoryFn();
-}, "withOutline");
+  }, [isActive, outlineStyles, context]), StoryFn();
+};
 
 // src/outline/preview.ts
-var decorators3 = globalThis.FEATURES?.outline ? [withOutline] : [];
-var initialGlobals3 = {
-  [PARAM_KEY4]: false
-};
-var preview_default6 = /* @__PURE__ */ __name(() => definePreviewAddon6({ decorators: decorators3, initialGlobals: initialGlobals3 }), "default");
+var decorators3 = globalThis.FEATURES?.outline ? [withOutline] : [], initialGlobals3 = {
+  [PARAM_KEY4]: !1
+}, preview_default6 = () => definePreviewAddon6({ decorators: decorators3, initialGlobals: initialGlobals3 });
 
 // src/test/preview.ts
 import { definePreviewAddon as definePreviewAddon7 } from "storybook/internal/csf";
@@ -2271,105 +1720,69 @@ import {
   uninstrumentedUserEvent,
   within
 } from "storybook/test";
-var resetAllMocksLoader = /* @__PURE__ */ __name(({ parameters: parameters2 }) => {
-  if (parameters2?.test?.mockReset === true) {
-    resetAllMocks();
-  } else if (parameters2?.test?.clearMocks === true) {
-    clearAllMocks();
-  } else if (parameters2?.test?.restoreMocks !== false) {
-    restoreAllMocks();
-  }
-}, "resetAllMocksLoader");
-var traverseArgs = /* @__PURE__ */ __name((value, depth = 0, key) => {
-  if (depth > 5) {
+var resetAllMocksLoader = ({ parameters: parameters2 }) => {
+  parameters2?.test?.mockReset === !0 ? resetAllMocks() : parameters2?.test?.clearMocks === !0 ? clearAllMocks() : parameters2?.test?.restoreMocks !== !1 && restoreAllMocks();
+}, traverseArgs = (value, depth = 0, key) => {
+  if (depth > 5 || value == null)
     return value;
-  }
-  if (value == null) {
-    return value;
-  }
-  if (isMockFunction(value)) {
-    if (key) {
-      value.mockName(key);
-    }
-    return value;
-  }
-  if (typeof value === "function" && "isAction" in value && value.isAction && !("implicit" in value && value.implicit)) {
-    const mock = fn(value);
-    if (key) {
-      mock.mockName(key);
-    }
-    return mock;
+  if (isMockFunction(value))
+    return key && value.mockName(key), value;
+  if (typeof value == "function" && "isAction" in value && value.isAction && !("implicit" in value && value.implicit)) {
+    let mock = fn(value);
+    return key && mock.mockName(key), mock;
   }
   if (Array.isArray(value)) {
     depth++;
-    for (let i = 0; i < value.length; i++) {
-      if (Object.getOwnPropertyDescriptor(value, i)?.writable) {
-        value[i] = traverseArgs(value[i], depth);
-      }
-    }
+    for (let i = 0; i < value.length; i++)
+      Object.getOwnPropertyDescriptor(value, i)?.writable && (value[i] = traverseArgs(value[i], depth));
     return value;
   }
-  if (typeof value === "object" && value.constructor === Object) {
+  if (typeof value == "object" && value.constructor === Object) {
     depth++;
-    for (const [k, v] of Object.entries(value)) {
-      if (Object.getOwnPropertyDescriptor(value, k)?.writable) {
-        value[k] = traverseArgs(v, depth, k);
-      }
-    }
+    for (let [k, v] of Object.entries(value))
+      Object.getOwnPropertyDescriptor(value, k)?.writable && (value[k] = traverseArgs(v, depth, k));
     return value;
   }
   return value;
-}, "traverseArgs");
-var nameSpiesAndWrapActionsInSpies = /* @__PURE__ */ __name(({ initialArgs }) => {
+}, nameSpiesAndWrapActionsInSpies = ({ initialArgs }) => {
   traverseArgs(initialArgs);
-}, "nameSpiesAndWrapActionsInSpies");
-var patchedFocus = false;
-var enhanceContext = /* @__PURE__ */ __name(async (context) => {
-  if (globalThis.HTMLElement && context.canvasElement instanceof globalThis.HTMLElement) {
-    context.canvas = within(context.canvasElement);
-  }
-  const clipboard = globalThis.window?.navigator?.clipboard;
-  if (clipboard) {
-    context.userEvent = instrument2(
-      { userEvent: uninstrumentedUserEvent.setup() },
-      {
-        intercept: true,
-        getKeys: /* @__PURE__ */ __name((obj) => Object.keys(obj).filter((key) => key !== "eventWrapper"), "getKeys")
-      }
-    ).userEvent;
-    Object.defineProperty(globalThis.window.navigator, "clipboard", {
-      get: /* @__PURE__ */ __name(() => clipboard, "get"),
-      configurable: true
-    });
-    let currentFocus = HTMLElement.prototype.focus;
-    if (!patchedFocus) {
-      Object.defineProperties(HTMLElement.prototype, {
-        focus: {
-          configurable: true,
-          set: /* @__PURE__ */ __name((newFocus) => {
-            currentFocus = newFocus;
-            patchedFocus = true;
-          }, "set"),
-          get: /* @__PURE__ */ __name(() => {
-            return currentFocus;
-          }, "get")
+}, patchedFocus = !1, enhanceContext = async (context) => {
+  globalThis.HTMLElement && context.canvasElement instanceof globalThis.HTMLElement && (context.canvas = within(context.canvasElement));
+  let clipboard = globalThis.window?.navigator?.clipboard;
+  if (clipboard && (context.userEvent = instrument2(
+    { userEvent: uninstrumentedUserEvent.setup() },
+    {
+      intercept: !0,
+      getKeys: (obj) => Object.keys(obj).filter((key) => key !== "eventWrapper")
+    }
+  ).userEvent, Object.defineProperty(globalThis.window.navigator, "clipboard", {
+    get: () => clipboard,
+    configurable: !0
+  }), !patchedFocus)) {
+    let originalFocus = HTMLElement.prototype.focus, currentFocus = HTMLElement.prototype.focus, focusingElements = /* @__PURE__ */ new Set();
+    Object.defineProperties(HTMLElement.prototype, {
+      focus: {
+        configurable: !0,
+        set: (newFocus) => {
+          currentFocus = newFocus;
+        },
+        get() {
+          return focusingElements.has(this) ? originalFocus : (focusingElements.add(this), setTimeout(() => focusingElements.delete(this), 0), currentFocus);
         }
-      });
-    }
+      }
+    }), patchedFocus = !0;
   }
-}, "enhanceContext");
-var preview_default7 = /* @__PURE__ */ __name(() => definePreviewAddon7({
+}, preview_default7 = () => definePreviewAddon7({
   loaders: [resetAllMocksLoader, nameSpiesAndWrapActionsInSpies, enhanceContext]
-}), "default");
+});
 
 // src/viewport/preview.ts
 import { definePreviewAddon as definePreviewAddon8 } from "storybook/internal/csf";
 var initialGlobals4 = {
-  [PARAM_KEY]: { value: void 0, isRotated: false }
-};
-var preview_default8 = /* @__PURE__ */ __name(() => definePreviewAddon8({
+  [PARAM_KEY]: { value: void 0, isRotated: !1 }
+}, preview_default8 = () => definePreviewAddon8({
   initialGlobals: initialGlobals4
-}), "default");
+});
 
 // src/csf/core-annotations.ts
 function getCoreAnnotations() {
@@ -2392,44 +1805,35 @@ function getCoreAnnotations() {
     (preview_default7.default ?? preview_default7)()
   ];
 }
-__name(getCoreAnnotations, "getCoreAnnotations");
 
 // src/csf/csf-factories.ts
 function definePreview(input) {
-  let composed;
-  const preview = {
+  let composed, preview = {
     _tag: "Preview",
     input,
     get composed() {
-      if (composed) {
+      if (composed)
         return composed;
-      }
-      const { addons: addons2, ...rest } = input;
-      composed = normalizeProjectAnnotations(
+      let { addons: addons2, ...rest } = input;
+      return composed = normalizeProjectAnnotations(
         composeConfigs([...getCoreAnnotations(), ...addons2 ?? [], rest])
-      );
-      return composed;
+      ), composed;
     },
     meta(meta) {
       return defineMeta(meta, this);
     }
   };
-  globalThis.globalProjectAnnotations = preview.composed;
-  return preview;
+  return globalThis.globalProjectAnnotations = preview.composed, preview;
 }
-__name(definePreview, "definePreview");
 function definePreviewAddon9(preview) {
   return preview;
 }
-__name(definePreviewAddon9, "definePreviewAddon");
 function isPreview(input) {
-  return input != null && typeof input === "object" && "_tag" in input && input?._tag === "Preview";
+  return input != null && typeof input == "object" && "_tag" in input && input?._tag === "Preview";
 }
-__name(isPreview, "isPreview");
 function isMeta(input) {
-  return input != null && typeof input === "object" && "_tag" in input && input?._tag === "Meta";
+  return input != null && typeof input == "object" && "_tag" in input && input?._tag === "Meta";
 }
-__name(isMeta, "isMeta");
 function defineMeta(input, preview) {
   return {
     _tag: "Meta",
@@ -2437,29 +1841,20 @@ function defineMeta(input, preview) {
     preview,
     // @ts-expect-error hard
     story(story = {}) {
-      return defineStory(typeof story === "function" ? { render: story } : story, this);
+      return defineStory(typeof story == "function" ? { render: story } : story, this);
     }
   };
 }
-__name(defineMeta, "defineMeta");
 function isStory(input) {
-  return input != null && typeof input === "object" && "_tag" in input && input?._tag === "Story";
+  return input != null && typeof input == "object" && "_tag" in input && input?._tag === "Story";
 }
-__name(isStory, "isStory");
 function defineStory(input, meta) {
-  let composed;
-  const compose = /* @__PURE__ */ __name(() => {
-    if (!composed) {
-      composed = composeStory(
-        input,
-        meta.input,
-        void 0,
-        meta.preview.composed
-      );
-    }
-    return composed;
-  }, "compose");
-  const __children = [];
+  let composed, compose = () => (composed || (composed = composeStory(
+    input,
+    meta.input,
+    void 0,
+    meta.preview.composed
+  )), composed), __children = [];
   return {
     _tag: "Story",
     input,
@@ -2468,8 +1863,7 @@ function defineStory(input, meta) {
     __compose: compose,
     __children,
     get composed() {
-      const composed2 = compose();
-      const { args, argTypes, parameters: parameters2, id, tags, globals, storyName: name } = composed2;
+      let composed2 = compose(), { args, argTypes, parameters: parameters2, id, tags, globals, storyName: name } = composed2;
       return { args, argTypes, parameters: parameters2, id, tags, name, globals };
     },
     get play() {
@@ -2480,23 +1874,17 @@ function defineStory(input, meta) {
       await compose().run(context);
     },
     test(name, overridesOrTestFn, testFn) {
-      const annotations = typeof overridesOrTestFn !== "function" ? overridesOrTestFn : {};
-      const testFunction = typeof overridesOrTestFn !== "function" ? testFn : overridesOrTestFn;
-      const play = mountDestructured(this.play) || mountDestructured(testFunction) ? async ({ context }) => {
-        await this.play?.(context);
-        await testFunction(context);
+      let annotations = typeof overridesOrTestFn != "function" ? overridesOrTestFn : {}, testFunction = typeof overridesOrTestFn != "function" ? testFn : overridesOrTestFn, play = mountDestructured(this.play) || mountDestructured(testFunction) ? async ({ context }) => {
+        await this.play?.(context), await testFunction(context);
       } : async (context) => {
-        await this.play?.(context);
-        await testFunction(context);
-      };
-      const test = this.extend({
+        await this.play?.(context), await testFunction(context);
+      }, test = this.extend({
         ...annotations,
         name,
         tags: ["test-fn", "!autodocs", ...annotations.tags ?? []],
         play
       });
-      __children.push(test);
-      return test;
+      return __children.push(test), test;
     },
     extend(input2) {
       return defineStory(
@@ -2530,62 +1918,36 @@ function defineStory(input, meta) {
     }
   };
 }
-__name(defineStory, "defineStory");
 function getStoryChildren(story) {
-  if ("__children" in story) {
-    return story.__children;
-  }
-  return [];
+  return "__children" in story ? story.__children : [];
 }
-__name(getStoryChildren, "getStoryChildren");
 
 // src/csf/index.ts
-var sanitize = /* @__PURE__ */ __name((string) => {
-  return string.toLowerCase().replace(/[ ’–—―′¿'`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi, "-").replace(/-+/g, "-").replace(/^-+/, "").replace(/-+$/, "");
-}, "sanitize");
-var sanitizeSafe = /* @__PURE__ */ __name((string, part) => {
-  const sanitized = sanitize(string);
-  if (sanitized === "") {
+var sanitize = (string) => string.toLowerCase().replace(/[ ’–—―′¿'`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi, "-").replace(/-+/g, "-").replace(/^-+/, "").replace(/-+$/, ""), sanitizeSafe = (string, part) => {
+  let sanitized = sanitize(string);
+  if (sanitized === "")
     throw new Error(`Invalid ${part} '${string}', must include alphanumeric characters`);
-  }
   return sanitized;
-}, "sanitizeSafe");
-var toId = /* @__PURE__ */ __name((kind, name) => `${sanitizeSafe(kind, "kind")}${name ? `--${sanitizeSafe(name, "name")}` : ""}`, "toId");
-var toTestId = /* @__PURE__ */ __name((parentId, testName) => `${parentId}:${sanitizeSafe(testName, "test")}`, "toTestId");
-var storyNameFromExport = /* @__PURE__ */ __name((key) => toStartCaseStr(key), "storyNameFromExport");
+}, toId = (kind, name) => `${sanitizeSafe(kind, "kind")}${name ? `--${sanitizeSafe(name, "name")}` : ""}`, toTestId = (parentId, testName) => `${parentId}:${sanitizeSafe(testName, "test")}`, storyNameFromExport = (key) => toStartCaseStr(key);
 function matches(storyKey, arrayOrRegex) {
-  if (Array.isArray(arrayOrRegex)) {
-    return arrayOrRegex.includes(storyKey);
-  }
-  return storyKey.match(arrayOrRegex);
+  return Array.isArray(arrayOrRegex) ? arrayOrRegex.includes(storyKey) : storyKey.match(arrayOrRegex);
 }
-__name(matches, "matches");
 function isExportStory(key, { includeStories, excludeStories }) {
   return (
     // https://babeljs.io/docs/en/babel-plugin-transform-modules-commonjs
     key !== "__esModule" && (!includeStories || matches(key, includeStories)) && (!excludeStories || !matches(key, excludeStories))
   );
 }
-__name(isExportStory, "isExportStory");
-var parseKind = /* @__PURE__ */ __name((kind, { rootSeparator, groupSeparator }) => {
-  const [root, remainder] = kind.split(rootSeparator, 2);
-  const groups = (remainder || kind).split(groupSeparator).filter((i) => !!i);
+var parseKind = (kind, { rootSeparator, groupSeparator }) => {
+  let [root, remainder] = kind.split(rootSeparator, 2), groups = (remainder || kind).split(groupSeparator).filter((i) => !!i);
   return {
     root: remainder ? root : null,
     groups
   };
-}, "parseKind");
-var combineTags2 = /* @__PURE__ */ __name((...tags) => {
-  const result = tags.reduce((acc, tag) => {
-    if (tag.startsWith("!")) {
-      acc.delete(tag.slice(1));
-    } else {
-      acc.add(tag);
-    }
-    return acc;
-  }, /* @__PURE__ */ new Set());
+}, combineTags2 = (...tags) => {
+  let result = tags.reduce((acc, tag) => (tag.startsWith("!") ? acc.delete(tag.slice(1)) : acc.add(tag), acc), /* @__PURE__ */ new Set());
   return Array.from(result);
-}, "combineTags");
+};
 export {
   combineTags2 as combineTags,
   definePreview,