@aussieljk/forkbook 0.0.1-4 → 0.0.1-6

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

@@ -11,7 +11,7 @@ import {
 import "../../_browser-chunks/chunk-OZZPSYQR.js";
 import {
   ArgsTable
-} from "../../_browser-chunks/chunk-LXQPPHMD.js";
+} from "../../_browser-chunks/chunk-6IKB2UHQ.js";
 import "../../_browser-chunks/chunk-PJSMZ27A.js";
 import "../../_browser-chunks/chunk-6ELMKWKX.js";
 import {
@@ -22,9 +22,8 @@ import {
 } from "../../_browser-chunks/chunk-KBK7GKBN.js";
 import "../../_browser-chunks/chunk-CNED6RYH.js";
 import {
-  dequal,
   registerService
-} from "../../_browser-chunks/chunk-UDQ3XQFC.js";
+} from "../../_browser-chunks/chunk-NGMQJMCY.js";
 import "../../_browser-chunks/chunk-4ATQOMJB.js";
 import {
   ADDON_ID as ADDON_ID4,
@@ -49,7 +48,9 @@ import {
 } from "../../_browser-chunks/chunk-GRO2ZYEJ.js";
 import "../../_browser-chunks/chunk-2JDQ35OA.js";
 import "../../_browser-chunks/chunk-IE4ULIOQ.js";
-import "../../_browser-chunks/chunk-B4AUNNU4.js";
+import {
+  isEqual
+} from "../../_browser-chunks/chunk-B4AUNNU4.js";
 import "../../_browser-chunks/chunk-NZMVUW5T.js";
 import "../../_browser-chunks/chunk-JWSKPMPC.js";
 import "../../_browser-chunks/chunk-JPUOQJUI.js";
@@ -69,251 +70,18 @@ import {
   PANEL_ID,
   PARAM_KEY as PARAM_KEY2
 } from "../../_browser-chunks/chunk-N5WQGLI7.js";
+import {
+  global
+} from "../../_browser-chunks/chunk-6AKCRYVX.js";
 import {
   ADDON_ID as ADDON_ID3,
   DEFAULT_BACKGROUNDS,
   PARAM_KEY as PARAM_KEY3
 } from "../../_browser-chunks/chunk-LAWXTSXK.js";
 import {
-  __commonJS,
   __toESM
 } from "../../_browser-chunks/chunk-IMSF75WX.js";
 
-// ../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/extends.js
-var require_extends = __commonJS({
-  "../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/extends.js"(exports, module) {
-    function _extends6() {
-      return module.exports = _extends6 = Object.assign || function(target) {
-        for (var i = 1; i < arguments.length; i++) {
-          var source = arguments[i];
-          for (var key in source)
-            Object.prototype.hasOwnProperty.call(source, key) && (target[key] = source[key]);
-        }
-        return target;
-      }, _extends6.apply(this, arguments);
-    }
-    module.exports = _extends6;
-  }
-});
-
-// ../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js
-var require_objectWithoutPropertiesLoose = __commonJS({
-  "../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js"(exports, module) {
-    function _objectWithoutPropertiesLoose(source, excluded) {
-      if (source == null) return {};
-      var target = {}, sourceKeys = Object.keys(source), key, i;
-      for (i = 0; i < sourceKeys.length; i++)
-        key = sourceKeys[i], !(excluded.indexOf(key) >= 0) && (target[key] = source[key]);
-      return target;
-    }
-    module.exports = _objectWithoutPropertiesLoose;
-  }
-});
-
-// ../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/objectWithoutProperties.js
-var require_objectWithoutProperties = __commonJS({
-  "../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"(exports, module) {
-    var objectWithoutPropertiesLoose = require_objectWithoutPropertiesLoose();
-    function _objectWithoutProperties7(source, excluded) {
-      if (source == null) return {};
-      var target = objectWithoutPropertiesLoose(source, excluded), key, i;
-      if (Object.getOwnPropertySymbols) {
-        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-        for (i = 0; i < sourceSymbolKeys.length; i++)
-          key = sourceSymbolKeys[i], !(excluded.indexOf(key) >= 0) && Object.prototype.propertyIsEnumerable.call(source, key) && (target[key] = source[key]);
-      }
-      return target;
-    }
-    module.exports = _objectWithoutProperties7;
-  }
-});
-
-// ../../node_modules/@devtools-ds/themes/node_modules/@babel/runtime/helpers/defineProperty.js
-var require_defineProperty = __commonJS({
-  "../../node_modules/@devtools-ds/themes/node_modules/@babel/runtime/helpers/defineProperty.js"(exports, module) {
-    function _defineProperty(obj, key, value) {
-      return key in obj ? Object.defineProperty(obj, key, {
-        value,
-        enumerable: !0,
-        configurable: !0,
-        writable: !0
-      }) : obj[key] = value, obj;
-    }
-    module.exports = _defineProperty;
-  }
-});
-
-// ../../node_modules/@devtools-ds/themes/node_modules/@babel/runtime/helpers/objectSpread2.js
-var require_objectSpread2 = __commonJS({
-  "../../node_modules/@devtools-ds/themes/node_modules/@babel/runtime/helpers/objectSpread2.js"(exports, module) {
-    var defineProperty = require_defineProperty();
-    function ownKeys(object2, enumerableOnly) {
-      var keys = Object.keys(object2);
-      if (Object.getOwnPropertySymbols) {
-        var symbols = Object.getOwnPropertySymbols(object2);
-        enumerableOnly && (symbols = symbols.filter(function(sym) {
-          return Object.getOwnPropertyDescriptor(object2, sym).enumerable;
-        })), keys.push.apply(keys, symbols);
-      }
-      return keys;
-    }
-    function _objectSpread22(target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i] != null ? arguments[i] : {};
-        i % 2 ? ownKeys(source, !0).forEach(function(key) {
-          defineProperty(target, key, source[key]);
-        }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(source).forEach(function(key) {
-          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-        });
-      }
-      return target;
-    }
-    module.exports = _objectSpread22;
-  }
-});
-
-// ../../node_modules/@devtools-ds/themes/node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js
-var require_objectWithoutPropertiesLoose2 = __commonJS({
-  "../../node_modules/@devtools-ds/themes/node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js"(exports, module) {
-    function _objectWithoutPropertiesLoose(source, excluded) {
-      if (source == null) return {};
-      var target = {}, sourceKeys = Object.keys(source), key, i;
-      for (i = 0; i < sourceKeys.length; i++)
-        key = sourceKeys[i], !(excluded.indexOf(key) >= 0) && (target[key] = source[key]);
-      return target;
-    }
-    module.exports = _objectWithoutPropertiesLoose;
-  }
-});
-
-// ../../node_modules/@devtools-ds/themes/node_modules/@babel/runtime/helpers/objectWithoutProperties.js
-var require_objectWithoutProperties2 = __commonJS({
-  "../../node_modules/@devtools-ds/themes/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"(exports, module) {
-    var objectWithoutPropertiesLoose = require_objectWithoutPropertiesLoose2();
-    function _objectWithoutProperties7(source, excluded) {
-      if (source == null) return {};
-      var target = objectWithoutPropertiesLoose(source, excluded), key, i;
-      if (Object.getOwnPropertySymbols) {
-        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-        for (i = 0; i < sourceSymbolKeys.length; i++)
-          key = sourceSymbolKeys[i], !(excluded.indexOf(key) >= 0) && Object.prototype.propertyIsEnumerable.call(source, key) && (target[key] = source[key]);
-      }
-      return target;
-    }
-    module.exports = _objectWithoutProperties7;
-  }
-});
-
-// ../../node_modules/@devtools-ds/themes/node_modules/@babel/runtime/helpers/extends.js
-var require_extends2 = __commonJS({
-  "../../node_modules/@devtools-ds/themes/node_modules/@babel/runtime/helpers/extends.js"(exports, module) {
-    function _extends6() {
-      return module.exports = _extends6 = Object.assign || function(target) {
-        for (var i = 1; i < arguments.length; i++) {
-          var source = arguments[i];
-          for (var key in source)
-            Object.prototype.hasOwnProperty.call(source, key) && (target[key] = source[key]);
-        }
-        return target;
-      }, _extends6.apply(this, arguments);
-    }
-    module.exports = _extends6;
-  }
-});
-
-// ../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/defineProperty.js
-var require_defineProperty2 = __commonJS({
-  "../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/defineProperty.js"(exports, module) {
-    function _defineProperty(obj, key, value) {
-      return key in obj ? Object.defineProperty(obj, key, {
-        value,
-        enumerable: !0,
-        configurable: !0,
-        writable: !0
-      }) : obj[key] = value, obj;
-    }
-    module.exports = _defineProperty;
-  }
-});
-
-// ../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/objectSpread2.js
-var require_objectSpread22 = __commonJS({
-  "../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/objectSpread2.js"(exports, module) {
-    var defineProperty = require_defineProperty2();
-    function ownKeys(object2, enumerableOnly) {
-      var keys = Object.keys(object2);
-      if (Object.getOwnPropertySymbols) {
-        var symbols = Object.getOwnPropertySymbols(object2);
-        enumerableOnly && (symbols = symbols.filter(function(sym) {
-          return Object.getOwnPropertyDescriptor(object2, sym).enumerable;
-        })), keys.push.apply(keys, symbols);
-      }
-      return keys;
-    }
-    function _objectSpread22(target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i] != null ? arguments[i] : {};
-        i % 2 ? ownKeys(source, !0).forEach(function(key) {
-          defineProperty(target, key, source[key]);
-        }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(source).forEach(function(key) {
-          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-        });
-      }
-      return target;
-    }
-    module.exports = _objectSpread22;
-  }
-});
-
-// ../../node_modules/@devtools-ds/tree/node_modules/@babel/runtime/helpers/extends.js
-var require_extends3 = __commonJS({
-  "../../node_modules/@devtools-ds/tree/node_modules/@babel/runtime/helpers/extends.js"(exports, module) {
-    function _extends6() {
-      return module.exports = _extends6 = Object.assign || function(target) {
-        for (var i = 1; i < arguments.length; i++) {
-          var source = arguments[i];
-          for (var key in source)
-            Object.prototype.hasOwnProperty.call(source, key) && (target[key] = source[key]);
-        }
-        return target;
-      }, _extends6.apply(this, arguments);
-    }
-    module.exports = _extends6;
-  }
-});
-
-// ../../node_modules/@devtools-ds/tree/node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js
-var require_objectWithoutPropertiesLoose3 = __commonJS({
-  "../../node_modules/@devtools-ds/tree/node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js"(exports, module) {
-    function _objectWithoutPropertiesLoose(source, excluded) {
-      if (source == null) return {};
-      var target = {}, sourceKeys = Object.keys(source), key, i;
-      for (i = 0; i < sourceKeys.length; i++)
-        key = sourceKeys[i], !(excluded.indexOf(key) >= 0) && (target[key] = source[key]);
-      return target;
-    }
-    module.exports = _objectWithoutPropertiesLoose;
-  }
-});
-
-// ../../node_modules/@devtools-ds/tree/node_modules/@babel/runtime/helpers/objectWithoutProperties.js
-var require_objectWithoutProperties3 = __commonJS({
-  "../../node_modules/@devtools-ds/tree/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"(exports, module) {
-    var objectWithoutPropertiesLoose = require_objectWithoutPropertiesLoose3();
-    function _objectWithoutProperties7(source, excluded) {
-      if (source == null) return {};
-      var target = objectWithoutPropertiesLoose(source, excluded), key, i;
-      if (Object.getOwnPropertySymbols) {
-        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-        for (i = 0; i < sourceSymbolKeys.length; i++)
-          key = sourceSymbolKeys[i], !(excluded.indexOf(key) >= 0) && Object.prototype.propertyIsEnumerable.call(source, key) && (target[key] = source[key]);
-      }
-      return target;
-    }
-    module.exports = _objectWithoutProperties7;
-  }
-});
-
 // src/shared/open-service/services/docgen/manager.tsx
 import { addons } from "@aussieljk/forkbook/manager-api";
 var ADDON_ID7 = "core/docgen", manager_default = addons.register(ADDON_ID7, () => {
@@ -427,7 +195,7 @@ var ADDON_ID8 = "core/review", manager_default2 = addons2.register(ADDON_ID8, ()
 // src/controls/manager.tsx
 import { AddonPanel } from "@aussieljk/forkbook/internal/components";
 import { SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE } from "@aussieljk/forkbook/internal/core-events";
-import { FailedIcon, PassedIcon } from "@storybook/icons";
+import { CheckCircleIcon, XCircleIcon } from "@phosphor-icons/react";
 import {
   addons as addons3,
   experimental_requestResponse,
@@ -439,7 +207,6 @@ import { color } from "@aussieljk/forkbook/theming";
 // src/controls/components/ControlsPanel.tsx
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { STORY_FINISHED, STORY_PREPARED } from "@aussieljk/forkbook/internal/core-events";
-import { global } from "@storybook/global";
 import {
   useArgTypes,
   useArgs,
@@ -457,7 +224,7 @@ var ADDON_ID9 = "addon-controls", PARAM_KEY6 = "controls";
 // src/controls/components/SaveStory.tsx
 import React from "react";
 import { Bar, Button, Form, Modal } from "@aussieljk/forkbook/internal/components";
-import { AddIcon, CheckIcon, UndoIcon } from "@storybook/icons";
+import { ArrowCounterClockwiseIcon, CheckIcon, PlusIcon } from "@phosphor-icons/react";
 
 // storybook-css:/home/runner/work/forkbook/forkbook/code/core/src/controls/components/SaveStory.module.css
 var id = "core/src/controls/components/SaveStory.module.css";
@@ -465,7 +232,7 @@ if (typeof document < "u" && !document.querySelector(`style[data-fb-css="${id}"]
   let style = document.createElement("style");
   style.setAttribute("data-fb-css", id), style.textContent = ".fb-zEgyLq-container{z-index:1;width:100%;height:41px;position:absolute;bottom:0;overflow:hidden;container-type:size}.fb-zEgyLq-bar{--highlight-bg-color:#e0f0ff;background:var(--fb-background-bar);border-top:1px solid var(--fb-app-border-color);font-size:var(--fb-size-s2);padding-inline:4px;animation:.3s fb-zEgyLq-slideIn,2s fb-zEgyLq-highlight;@container (width<=799px){flex-direction:row;justify-content:flex-end}}:where([data-fb-theme=dark]) .fb-zEgyLq-bar{--highlight-bg-color:#153b5b}.fb-zEgyLq-info{flex:99 0 auto;align-items:center;gap:6px;margin-inline:7px 10px;display:flex}.fb-zEgyLq-actions{color:var(--fb-text-muted-color);font-size:var(--fb-size-s2);flex:1 0 0;align-items:center;gap:2px;display:flex}.fb-zEgyLq-label{@container (width<=799px){text-indent:-9999px;line-height:0;&:after{content:attr(data-short-label);line-height:initial;text-indent:0;display:block}}}.fb-zEgyLq-modalInput{&::placeholder{color:var(--fb-color-mediumdark)}&:invalid:not(:placeholder-shown){box-shadow:var(--fb-color-negative) 0 0 0 1px inset}}@keyframes fb-zEgyLq-slideIn{0%{transform:translateY(40px)}to{transform:translateY(0)}}@keyframes fb-zEgyLq-highlight{0%{background:var(--highlight-bg-color)}}", document.head.appendChild(style);
 }
-var SaveStory_default = { container: "fb-zEgyLq-container", actions: "fb-zEgyLq-actions", info: "fb-zEgyLq-info", modalInput: "fb-zEgyLq-modalInput", slideIn: "fb-zEgyLq-slideIn", highlight: "fb-zEgyLq-highlight", bar: "fb-zEgyLq-bar", label: "fb-zEgyLq-label" };
+var SaveStory_default = { highlight: "fb-zEgyLq-highlight", modalInput: "fb-zEgyLq-modalInput", bar: "fb-zEgyLq-bar", actions: "fb-zEgyLq-actions", container: "fb-zEgyLq-container", slideIn: "fb-zEgyLq-slideIn", info: "fb-zEgyLq-info", label: "fb-zEgyLq-label" };
 
 // src/controls/components/SaveStory.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -502,11 +269,11 @@ var SaveStory = ({ saveStory, createStory, resetArgs }) => {
             jsx("div", { className: SaveStory_default.label, "data-short-label": "Save", children: "Update story" })
           ] }),
           jsxs(Button, { ariaLabel: createLabel, tooltip: createLabel, onClick: onShowForm, children: [
-            jsx(AddIcon, {}),
+            jsx(PlusIcon, {}),
             jsx("div", { className: SaveStory_default.label, "data-short-label": "New", children: "Create new story" })
           ] }),
           jsxs(Button, { ariaLabel: "Reset changes", onClick: () => resetArgs(), children: [
-            jsx(UndoIcon, {}),
+            jsx(ArrowCounterClockwiseIcon, {}),
             jsx("span", { children: "Reset" })
           ] })
         ] }),
@@ -582,7 +349,7 @@ function ControlsPanelTable({
     presetColors,
     disableSaveFromUI = !1
   } = useParameter(PARAM_KEY6, {}), { path } = useStorybookState(), storyData = useStorybookApi().getCurrentStoryData(), hasControls = hasAnyControl(rows), withPresetColors = applyPresetColors(rows, presetColors), hasUpdatedArgs = useMemo(
-    () => !!args && !!initialArgs && !dequal(clean(args), clean(initialArgs)),
+    () => !!args && !!initialArgs && !isEqual(clean(args), clean(initialArgs)),
     [args, initialArgs]
   ), showSaveFromUI = hasControls && storyData.type === "story" && storyData.subtype !== "test" && hasUpdatedArgs && global.CONFIG_TYPE === "DEVELOPMENT" && disableSaveFromUI !== !0;
   return jsxs2("div", { className: ControlsPanel_default.wrapper, "data-save-from-ui": showSaveFromUI || void 0, children: [
@@ -702,14 +469,14 @@ var manager_default3 = addons3.register(ADDON_ID9, (api) => {
         let response = await experimental_requestResponse(channel, SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE, {
           // Only send updated args
           args: stringifyArgs(
-            Object.entries(data.args || {}).reduce((acc, [key, value]) => (dequal(value, data.initialArgs?.[key]) || (acc[key] = value), acc), {})
+            Object.entries(data.args || {}).reduce((acc, [key, value]) => (isEqual(value, data.initialArgs?.[key]) || (acc[key] = value), acc), {})
           ),
           csfId: data.id,
           importPath: data.importPath
         });
         api.addNotification({
           id: "save-story-success",
-          icon: jsx4(PassedIcon, { color: color.positive }),
+          icon: jsx4(CheckCircleIcon, { color: color.positive }),
           content: {
             headline: "Story saved",
             subHeadline: jsxs4(Fragment2, { children: [
@@ -723,7 +490,7 @@ var manager_default3 = addons3.register(ADDON_ID9, (api) => {
       } catch (error) {
         throw api.addNotification({
           id: "save-story-error",
-          icon: jsx4(FailedIcon, { color: color.negative }),
+          icon: jsx4(XCircleIcon, { color: color.negative }),
           content: {
             headline: "Failed to save story",
             subHeadline: error?.message || "Check the Forkbook process on the command line for more details."
@@ -743,7 +510,7 @@ var manager_default3 = addons3.register(ADDON_ID9, (api) => {
       });
       api.addNotification({
         id: "save-story-success",
-        icon: jsx4(PassedIcon, { color: color.positive }),
+        icon: jsx4(CheckCircleIcon, { color: color.positive }),
         content: {
           headline: "Story created",
           subHeadline: jsxs4(Fragment2, { children: [
@@ -836,24 +603,24 @@ import React11, { useCallback as useCallback22, useState as useState22 } from "r
 import React15 from "react";
 import React14 from "react";
 import React16 from "react";
-var __create = Object.create, __defProp = Object.defineProperty, __getOwnPropDesc = Object.getOwnPropertyDescriptor, __getOwnPropNames = Object.getOwnPropertyNames, __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty, __commonJS2 = (cb, mod) => function() {
+var __create = Object.create, __defProp = Object.defineProperty, __getOwnPropDesc = Object.getOwnPropertyDescriptor, __getOwnPropNames = Object.getOwnPropertyNames, __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty, __commonJS = (cb, mod) => function() {
   return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
-}, __export = (target, all2) => {
-  for (var name in all2)
-    __defProp(target, name, { get: all2[name], enumerable: !0 });
+}, __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: !0 });
 }, __copyProps = (to, from, except, desc) => {
   if (from && typeof from == "object" || typeof from == "function")
     for (let key of __getOwnPropNames(from))
       !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   return to;
-}, __toESM2 = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target, mod)), require_is_object = __commonJS2({
+}, __toESM2 = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target, mod)), require_is_object = __commonJS({
   "node_modules/is-object/index.js"(exports, module) {
     "use strict";
     module.exports = function(x) {
       return typeof x == "object" && x !== null;
     };
   }
-}), require_is_window = __commonJS2({
+}), require_is_window = __commonJS({
   "node_modules/is-window/index.js"(exports, module) {
     "use strict";
     module.exports = function(obj) {
@@ -863,11 +630,11 @@ var __create = Object.create, __defProp = Object.defineProperty, __getOwnPropDes
       return o === o.window;
     };
   }
-}), require_is_dom = __commonJS2({
+}), require_is_dom = __commonJS({
   "node_modules/is-dom/index.js"(exports, module) {
-    var isObject2 = require_is_object(), isWindow = require_is_window();
+    var isObject = require_is_object(), isWindow = require_is_window();
     function isNode(val) {
-      return !isObject2(val) || !isWindow(window) || typeof window.Node != "function" ? !1 : typeof val.nodeType == "number" && typeof val.nodeName == "string";
+      return !isObject(val) || !isWindow(window) || typeof window.Node != "function" ? !1 : typeof val.nodeType == "number" && typeof val.nodeName == "string";
     }
     module.exports = isNode;
   }
@@ -1832,7 +1599,7 @@ var ThemedInspector = (props) => {
 import { jsx as jsx7 } from "react/jsx-runtime";
 var safeDeepEqual = (a, b) => {
   try {
-    return dequal(a, b);
+    return isEqual(a, b);
   } catch {
     return !1;
   }
@@ -1887,7 +1654,7 @@ import { AddonPanel as AddonPanel2 } from "@aussieljk/forkbook/internal/componen
 import { Consumer, addons as addons5, types as types3 } from "@aussieljk/forkbook/manager-api";
 
 // src/component-testing/components/Panel.tsx
-import { Fragment as Fragment8, memo as memo4, useEffect as useEffect10, useMemo as useMemo4, useRef as useRef2, useState as useState11 } from "react";
+import { Fragment as Fragment8, memo as memo4, useEffect as useEffect6, useMemo as useMemo4, useRef as useRef2, useState as useState7 } from "react";
 import {
   FORCE_REMOUNT,
   PLAY_FUNCTION_THREW_EXCEPTION,
@@ -1895,7 +1662,6 @@ import {
   STORY_THREW_EXCEPTION,
   UNHANDLED_ERRORS_WHILE_PLAYING
 } from "@aussieljk/forkbook/internal/core-events";
-import { global as global2 } from "@storybook/global";
 import {
   experimental_useStatusStore,
   useAddonState as useAddonState2,
@@ -1906,7 +1672,7 @@ import {
 } from "@aussieljk/forkbook/manager-api";
 
 // src/component-testing/components/InteractionsPanel.tsx
-import * as React31 from "react";
+import * as React23 from "react";
 
 // src/component-testing/utils.ts
 var import_ansi_to_html = __toESM(require_ansi_to_html(), 1);
@@ -1982,7 +1748,7 @@ var DetachedDebuggerMessage = ({ storyUrl }) => jsxs7("div", { className: Detach
 // src/component-testing/components/EmptyState.tsx
 import { useEffect as useEffect4, useState as useState5 } from "react";
 import { EmptyTabContent, Link as Link2 } from "@aussieljk/forkbook/internal/components";
-import { DocumentIcon } from "@storybook/icons";
+import { FileTextIcon } from "@phosphor-icons/react";
 import { useStorybookApi as useStorybookApi4 } from "@aussieljk/forkbook/manager-api";
 
 // storybook-css:/home/runner/work/forkbook/forkbook/code/core/src/component-testing/components/EmptyState.module.css
@@ -2012,7 +1778,7 @@ var Empty = () => {
       title: "Interactions",
       description: jsx10(Fragment4, { children: "Interactions allow you to verify the functional aspects of UIs. Write a play function for your story and you'll see it run here." }),
       footer: jsx10("div", { className: EmptyState_default.links, children: jsxs8(Link2, { href: docsUrl, target: "_blank", withArrow: !0, children: [
-        jsx10(DocumentIcon, {}),
+        jsx10(FileTextIcon, {}),
         " Read docs"
       ] }) })
     }
@@ -2020,583 +1786,14 @@ var Empty = () => {
 };
 
 // src/component-testing/components/Interaction.tsx
-import * as React30 from "react";
+import * as React21 from "react";
 import { Button as Button2 } from "@aussieljk/forkbook/internal/components";
-import { ChevronDownIcon, ChevronUpIcon } from "@storybook/icons";
+import { CaretDownIcon, CaretUpIcon } from "@phosphor-icons/react";
 
 // src/component-testing/components/MethodCall.tsx
-import React29, { Fragment as Fragment5 } from "react";
+import React20, { Fragment as Fragment5 } from "react";
 import { logger } from "@aussieljk/forkbook/internal/client-logger";
-
-// ../../node_modules/@devtools-ds/object-inspector/dist/esm/ObjectInspector.js
-var import_extends5 = __toESM(require_extends()), import_objectWithoutProperties6 = __toESM(require_objectWithoutProperties());
-import React28, { useEffect as useEffect8, useState as useState9 } from "react";
-
-// ../../node_modules/@devtools-ds/object-inspector/node_modules/clsx/dist/clsx.m.js
-function toVal(mix) {
-  var k, y, str = "";
-  if (mix)
-    if (typeof mix == "object")
-      if (Array.isArray(mix))
-        for (k = 0; k < mix.length; k++)
-          mix[k] && (y = toVal(mix[k])) && (str && (str += " "), str += y);
-      else
-        for (k in mix)
-          mix[k] && (y = toVal(k)) && (str && (str += " "), str += y);
-    else typeof mix != "boolean" && !mix.call && (str && (str += " "), str += mix);
-  return str;
-}
-function clsx_m_default() {
-  for (var i = 0, x, str = ""; i < arguments.length; )
-    (x = toVal(arguments[i++])) && (str && (str += " "), str += x);
-  return str;
-}
-
-// ../../node_modules/@devtools-ds/object-parser/dist/esm/index.js
-var isArray = (val) => Array.isArray(val) || // Detect https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays
-ArrayBuffer.isView(val) && !(val instanceof DataView), isObject = (val) => val !== null && typeof val == "object" && !isArray(val) && !(val instanceof Date) && !(val instanceof RegExp) && !(val instanceof Error) && !(val instanceof WeakMap) && !(val instanceof WeakSet), isKnownObject = (val) => isObject(val) || isArray(val) || typeof val == "function" || val instanceof Promise, getPromiseState = (promise) => {
-  let unique = /unique/;
-  return Promise.race([promise, unique]).then((result) => result === unique ? ["pending"] : ["fulfilled", result], (e) => ["rejected", e]);
-}, buildAST = async (key, value, depth, sortKeys, isPrototype, showPrototype) => {
-  let astNode = {
-    key,
-    depth,
-    value,
-    type: "value",
-    parent: void 0
-  };
-  if (value && isKnownObject(value) && depth < 100) {
-    let children = [], t = "object";
-    if (isArray(value)) {
-      for (let i = 0; i < value.length; i++)
-        children.push(async () => {
-          let child = await buildAST(i.toString(), value[i], depth + 1, sortKeys);
-          return child.parent = astNode, child;
-        });
-      t = "array";
-    } else {
-      let keys = Object.getOwnPropertyNames(value);
-      sortKeys && keys.sort();
-      for (let i = 0; i < keys.length; i++) {
-        let safeValue;
-        try {
-          safeValue = value[keys[i]];
-        } catch {
-        }
-        children.push(async () => {
-          let child = await buildAST(keys[i], safeValue, depth + 1, sortKeys);
-          return child.parent = astNode, child;
-        });
-      }
-      if (typeof value == "function" && (t = "function"), value instanceof Promise) {
-        let [status, result] = await getPromiseState(value);
-        children.push(async () => {
-          let child = await buildAST("<state>", status, depth + 1, sortKeys);
-          return child.parent = astNode, child;
-        }), status !== "pending" && children.push(async () => {
-          let child = await buildAST("<value>", result, depth + 1, sortKeys);
-          return child.parent = astNode, child;
-        }), t = "promise";
-      }
-      if (value instanceof Map) {
-        let parsedEntries = Array.from(value.entries()).map((entry) => {
-          let [entryKey, entryValue] = entry;
-          return {
-            "<key>": entryKey,
-            "<value>": entryValue
-          };
-        });
-        children.push(async () => {
-          let child = await buildAST("<entries>", parsedEntries, depth + 1, sortKeys);
-          return child.parent = astNode, child;
-        }), children.push(async () => {
-          let child = await buildAST("size", value.size, depth + 1, sortKeys);
-          return child.parent = astNode, child;
-        }), t = "map";
-      }
-      if (value instanceof Set) {
-        let parsedEntries = Array.from(value.entries()).map((entry) => entry[1]);
-        children.push(async () => {
-          let child = await buildAST("<entries>", parsedEntries, depth + 1, sortKeys);
-          return child.parent = astNode, child;
-        }), children.push(async () => {
-          let child = await buildAST("size", value.size, depth + 1, sortKeys);
-          return child.parent = astNode, child;
-        }), t = "set";
-      }
-    }
-    value !== Object.prototype && showPrototype && children.push(async () => {
-      let child = await buildAST("<prototype>", Object.getPrototypeOf(value), depth + 1, sortKeys, !0);
-      return child.parent = astNode, child;
-    }), astNode.type = t, astNode.children = children, astNode.isPrototype = isPrototype;
-  }
-  return astNode;
-}, parse = (data, sortKeys, includePrototypes) => buildAST("root", data, 0, sortKeys === !1 ? sortKeys : !0, void 0, includePrototypes === !1 ? includePrototypes : !0);
-
-// ../../node_modules/@devtools-ds/themes/dist/esm/utils.js
-var import_objectSpread2 = __toESM(require_objectSpread2()), import_objectWithoutProperties = __toESM(require_objectWithoutProperties2());
-import React20 from "react";
-
-// ../../node_modules/@devtools-ds/themes/node_modules/clsx/dist/clsx.m.js
-function toVal2(mix) {
-  var k, y, str = "";
-  if (mix)
-    if (typeof mix == "object")
-      if (Array.isArray(mix))
-        for (k = 0; k < mix.length; k++)
-          mix[k] && (y = toVal2(mix[k])) && (str && (str += " "), str += y);
-      else
-        for (k in mix)
-          mix[k] && (y = toVal2(k)) && (str && (str += " "), str += y);
-    else typeof mix != "boolean" && !mix.call && (str && (str += " "), str += mix);
-  return str;
-}
-function clsx_m_default2() {
-  for (var i = 0, x, str = ""; i < arguments.length; )
-    (x = toVal2(arguments[i++])) && (str && (str += " "), str += x);
-  return str;
-}
-
-// ../../node_modules/@devtools-ds/themes/dist/esm/utils.js
-var _excluded = ["children"];
-var ThemeContext2 = React20.createContext({
-  theme: "chrome",
-  colorScheme: "light"
-});
-var ThemeProvider = (_ref) => {
-  let {
-    children
-  } = _ref, value = (0, import_objectWithoutProperties.default)(_ref, _excluded), wrappedTheme = React20.useContext(ThemeContext2);
-  return React20.createElement(ThemeContext2.Provider, {
-    value: (0, import_objectSpread2.default)((0, import_objectSpread2.default)({}, wrappedTheme), value)
-  }, children);
-}, useTheme3 = (props, styles = {}) => {
-  let themeContext = React20.useContext(ThemeContext2), currentTheme = props.theme || themeContext.theme || "chrome", currentColorScheme = props.colorScheme || themeContext.colorScheme || "light", themeClass = clsx_m_default2(styles[currentTheme], styles[currentColorScheme]);
-  return {
-    currentColorScheme,
-    currentTheme,
-    themeClass
-  };
-};
-
-// ../../node_modules/@devtools-ds/themes/dist/esm/AutoThemeProvider.js
-var import_extends = __toESM(require_extends2()), import_objectWithoutProperties2 = __toESM(require_objectWithoutProperties2());
-import React21 from "react";
-
-// ../../node_modules/@devtools-ds/object-inspector/dist/esm/ObjectInspectorItem.js
-var import_objectSpread22 = __toESM(require_objectSpread22());
-import React27, { useEffect as useEffect7, useState as useState8 } from "react";
-
-// ../../node_modules/@devtools-ds/tree/dist/esm/index.js
-var import_extends2 = __toESM(require_extends3()), import_objectWithoutProperties3 = __toESM(require_objectWithoutProperties3());
-import React24, { useState as useState6, useEffect as useEffect5 } from "react";
-
-// ../../node_modules/@devtools-ds/tree/node_modules/clsx/dist/clsx.m.js
-function toVal3(mix) {
-  var k, y, str = "";
-  if (mix)
-    if (typeof mix == "object")
-      if (Array.isArray(mix))
-        for (k = 0; k < mix.length; k++)
-          mix[k] && (y = toVal3(mix[k])) && (str && (str += " "), str += y);
-      else
-        for (k in mix)
-          mix[k] && (y = toVal3(k)) && (str && (str += " "), str += y);
-    else typeof mix != "boolean" && !mix.call && (str && (str += " "), str += mix);
-  return str;
-}
-function clsx_m_default3() {
-  for (var i = 0, x, str = ""; i < arguments.length; )
-    (x = toVal3(arguments[i++])) && (str && (str += " "), str += x);
-  return str;
-}
-
-// ../../node_modules/@devtools-ds/tree/dist/esm/TreeContext.js
-import React23 from "react";
-var TreeContext = React23.createContext({
-  isChild: !1,
-  depth: 0,
-  hasHover: !0
-}), TreeContext_default = TreeContext;
-
-// ../../node_modules/@devtools-ds/tree/dist/esm/Tree.css.js
-var Tree_css_default = { tree: "Tree-tree-fbbbe38", item: "Tree-item-353d6f3", group: "Tree-group-d3c3d8a", label: "Tree-label-d819155", focusWhite: "Tree-focusWhite-f1e00c2", arrow: "Tree-arrow-03ab2e7", hover: "Tree-hover-3cc4e5d", open: "Tree-open-3f1a336", dark: "Tree-dark-1b4aa00", chrome: "Tree-chrome-bcbcac6", light: "Tree-light-09174ee" };
-
-// ../../node_modules/@devtools-ds/tree/dist/esm/index.js
-var _excluded2 = ["theme", "hover", "colorScheme", "children", "label", "className", "onUpdate", "onSelect", "open"], Tree = (props) => {
-  let {
-    theme: theme3,
-    hover,
-    colorScheme,
-    children,
-    label,
-    className,
-    onUpdate,
-    onSelect,
-    open
-  } = props, html = (0, import_objectWithoutProperties3.default)(props, _excluded2), {
-    themeClass,
-    currentTheme
-  } = useTheme3({
-    theme: theme3,
-    colorScheme
-  }, Tree_css_default), [isOpen, setOpen] = useState6(open);
-  useEffect5(() => {
-    setOpen(open);
-  }, [open]);
-  let updateState = (value) => {
-    setOpen(value), onUpdate && onUpdate(value);
-  }, hasChildren = React24.Children.count(children) > 0, updateFocus = (newNode, previousNode) => {
-    if (newNode.isSameNode(previousNode || null)) return;
-    let focusableNode = newNode.querySelector('[tabindex="-1"]');
-    focusableNode?.focus(), newNode.setAttribute("aria-selected", "true"), previousNode?.removeAttribute("aria-selected");
-  }, getParent = (node, role) => {
-    let parent = node;
-    for (; parent && parent.parentElement; ) {
-      if (parent.getAttribute("role") === role)
-        return parent;
-      parent = parent.parentElement;
-    }
-    return null;
-  }, getListElements = (node) => {
-    let tree = getParent(node, "tree");
-    return tree ? Array.from(tree.querySelectorAll("li")) : [];
-  }, moveBack = (node) => {
-    let group = getParent(node, "group"), toggle = group?.previousElementSibling;
-    if (toggle && toggle.getAttribute("tabindex") === "-1") {
-      let toggleParent = toggle.parentElement, nodeParent = node.parentElement;
-      updateFocus(toggleParent, nodeParent);
-    }
-  }, moveHome = (node, direction) => {
-    let elements = getListElements(node);
-    elements.forEach((element) => {
-      element.removeAttribute("aria-selected");
-    }), direction === "start" && elements[0] && updateFocus(elements[0]), direction === "end" && elements[elements.length - 1] && updateFocus(elements[elements.length - 1]);
-  }, moveFocusAdjacent = (node, direction) => {
-    let elements = getListElements(node) || [];
-    for (let i = 0; i < elements.length; i++) {
-      let currentNode = elements[i];
-      if (currentNode.getAttribute("aria-selected") === "true") {
-        direction === "up" && elements[i - 1] ? updateFocus(elements[i - 1], currentNode) : direction === "down" && elements[i + 1] && updateFocus(elements[i + 1], currentNode);
-        return;
-      }
-    }
-    updateFocus(elements[0]);
-  }, handleKeypress = (event, isChild2) => {
-    let node = event.target;
-    (event.key === "Enter" || event.key === " ") && updateState(!isOpen), event.key === "ArrowRight" && isOpen && !isChild2 ? moveFocusAdjacent(node, "down") : event.key === "ArrowRight" && updateState(!0), event.key === "ArrowLeft" && (!isOpen || isChild2) ? moveBack(node) : event.key === "ArrowLeft" && updateState(!1), event.key === "ArrowDown" && moveFocusAdjacent(node, "down"), event.key === "ArrowUp" && moveFocusAdjacent(node, "up"), event.key === "Home" && moveHome(node, "start"), event.key === "End" && moveHome(node, "end");
-  }, handleClick = (event, isChild2) => {
-    let node = event.target, parent = getParent(node, "treeitem"), elements = getListElements(node) || [], found = !1;
-    for (let i = 0; i < elements.length; i++) {
-      let currentNode = elements[i];
-      if (currentNode.getAttribute("aria-selected") === "true") {
-        parent && (found = !0, updateFocus(parent, currentNode));
-        break;
-      }
-    }
-    !found && parent && updateFocus(parent), isChild2 || updateState(!isOpen);
-  }, handleBlur = (event) => {
-    let node = event.currentTarget;
-    !node.contains(document.activeElement) && node.getAttribute("role") === "tree" && node.setAttribute("tabindex", "0");
-  }, handleFocus = (event) => {
-    let node = event.target;
-    if (node.getAttribute("role") === "tree") {
-      let selected = node.querySelector('[aria-selected="true"]');
-      selected ? updateFocus(selected) : moveFocusAdjacent(node, "down"), node.setAttribute("tabindex", "-1");
-    }
-  }, handleButtonFocus = () => {
-    onSelect?.();
-  }, getPaddingStyles = (depth2) => {
-    let space = depth2 * 0.9 + 0.3;
-    return {
-      paddingLeft: `${space}em`,
-      width: `calc(100% - ${space}em)`
-    };
-  }, {
-    isChild,
-    depth,
-    hasHover
-  } = React24.useContext(TreeContext_default), showHover = hasHover ? hover : !1;
-  if (!isChild)
-    return React24.createElement("ul", (0, import_extends2.default)({
-      role: "tree",
-      tabIndex: 0,
-      className: clsx_m_default3(Tree_css_default.tree, Tree_css_default.group, themeClass, className),
-      onFocus: handleFocus,
-      onBlur: handleBlur
-    }, html), React24.createElement(TreeContext_default.Provider, {
-      value: {
-        isChild: !0,
-        depth: 0,
-        hasHover: showHover
-      }
-    }, React24.createElement(Tree, props)));
-  if (!hasChildren)
-    return React24.createElement("li", (0, import_extends2.default)({
-      role: "treeitem",
-      className: Tree_css_default.item
-    }, html), React24.createElement("div", {
-      role: "button",
-      className: clsx_m_default3(Tree_css_default.label, {
-        [Tree_css_default.hover]: showHover,
-        [Tree_css_default.focusWhite]: currentTheme === "firefox"
-      }),
-      tabIndex: -1,
-      style: getPaddingStyles(depth),
-      onKeyDown: (e) => {
-        handleKeypress(e, isChild);
-      },
-      onClick: (e) => handleClick(e, !0),
-      onFocus: handleButtonFocus
-    }, React24.createElement("span", null, label)));
-  let arrowClass = clsx_m_default3(Tree_css_default.arrow, {
-    [Tree_css_default.open]: isOpen
-  });
-  return React24.createElement("li", {
-    role: "treeitem",
-    "aria-expanded": isOpen,
-    className: Tree_css_default.item
-  }, React24.createElement("div", {
-    role: "button",
-    tabIndex: -1,
-    className: clsx_m_default3(Tree_css_default.label, {
-      [Tree_css_default.hover]: showHover,
-      [Tree_css_default.focusWhite]: currentTheme === "firefox"
-    }),
-    style: getPaddingStyles(depth),
-    onClick: (e) => handleClick(e),
-    onKeyDown: (e) => handleKeypress(e),
-    onFocus: handleButtonFocus
-  }, React24.createElement("span", null, React24.createElement("span", {
-    "aria-hidden": !0,
-    className: arrowClass
-  }), React24.createElement("span", null, label))), React24.createElement("ul", (0, import_extends2.default)({
-    role: "group",
-    className: clsx_m_default3(className, Tree_css_default.group)
-  }, html), isOpen && React24.Children.map(children, (child) => React24.createElement(TreeContext_default.Provider, {
-    value: {
-      isChild: !0,
-      depth: depth + 1,
-      hasHover: showHover
-    }
-  }, child))));
-};
-Tree.defaultProps = {
-  open: !1,
-  hover: !0
-};
-
-// ../../node_modules/@devtools-ds/object-inspector/dist/esm/ObjectValue.js
-var import_extends3 = __toESM(require_extends()), import_objectWithoutProperties4 = __toESM(require_objectWithoutProperties());
-import React25, { useState as useState7, useEffect as useEffect6 } from "react";
-
-// ../../node_modules/@devtools-ds/object-inspector/dist/esm/ObjectInspector.css.js
-var ObjectInspector_css_default = { "object-inspector": "ObjectInspector-object-inspector-0c33e82", objectInspector: "ObjectInspector-object-inspector-0c33e82", "object-label": "ObjectInspector-object-label-b81482b", objectLabel: "ObjectInspector-object-label-b81482b", text: "ObjectInspector-text-25f57f3", key: "ObjectInspector-key-4f712bb", value: "ObjectInspector-value-f7ec2e5", string: "ObjectInspector-string-c496000", regex: "ObjectInspector-regex-59d45a3", error: "ObjectInspector-error-b818698", boolean: "ObjectInspector-boolean-2dd1642", number: "ObjectInspector-number-a6daabb", undefined: "ObjectInspector-undefined-3a68263", null: "ObjectInspector-null-74acb50", function: "ObjectInspector-function-07bbdcd", "function-decorator": "ObjectInspector-function-decorator-3d22c24", functionDecorator: "ObjectInspector-function-decorator-3d22c24", prototype: "ObjectInspector-prototype-f2449ee", dark: "ObjectInspector-dark-0c96c97", chrome: "ObjectInspector-chrome-2f3ca98", light: "ObjectInspector-light-78bef54" };
-
-// ../../node_modules/@devtools-ds/object-inspector/dist/esm/ObjectValue.js
-var _excluded3 = ["ast", "theme", "showKey", "colorScheme", "className"], buildValue = (key, value, valueClass, showKey, depth) => {
-  let computedKey = key.includes("-") ? `"${key}"` : key, isRoot = depth <= 0;
-  return React25.createElement("span", {
-    className: ObjectInspector_css_default.text
-  }, !isRoot && showKey && React25.createElement(React25.Fragment, null, React25.createElement("span", {
-    className: ObjectInspector_css_default.key
-  }, computedKey), React25.createElement("span", null, ":\xA0")), React25.createElement("span", {
-    className: valueClass
-  }, value));
-}, ObjectValue2 = (props) => {
-  let {
-    ast,
-    theme: theme3,
-    showKey,
-    colorScheme,
-    className
-  } = props, html = (0, import_objectWithoutProperties4.default)(props, _excluded3), {
-    themeClass
-  } = useTheme3({
-    theme: theme3,
-    colorScheme
-  }, ObjectInspector_css_default), [asyncValue, setAsyncValue] = useState7(React25.createElement("span", null)), value = React25.createElement("span", null);
-  return useEffect6(() => {
-    ast.value instanceof Promise && (async (promise) => {
-      setAsyncValue(buildValue(ast.key, `Promise { "${await getPromiseState(promise)}" }`, ObjectInspector_css_default.key, showKey, ast.depth));
-    })(ast.value);
-  }, [ast, showKey]), typeof ast.value == "number" || typeof ast.value == "bigint" ? value = buildValue(ast.key, String(ast.value), ObjectInspector_css_default.number, showKey, ast.depth) : typeof ast.value == "boolean" ? value = buildValue(ast.key, String(ast.value), ObjectInspector_css_default.boolean, showKey, ast.depth) : typeof ast.value == "string" ? value = buildValue(ast.key, `"${ast.value}"`, ObjectInspector_css_default.string, showKey, ast.depth) : typeof ast.value > "u" ? value = buildValue(ast.key, "undefined", ObjectInspector_css_default.undefined, showKey, ast.depth) : typeof ast.value == "symbol" ? value = buildValue(ast.key, ast.value.toString(), ObjectInspector_css_default.string, showKey, ast.depth) : typeof ast.value == "function" ? value = buildValue(ast.key, `${ast.value.name}()`, ObjectInspector_css_default.key, showKey, ast.depth) : typeof ast.value == "object" && (ast.value === null ? value = buildValue(ast.key, "null", ObjectInspector_css_default.null, showKey, ast.depth) : Array.isArray(ast.value) ? value = buildValue(ast.key, `Array(${ast.value.length})`, ObjectInspector_css_default.key, showKey, ast.depth) : ast.value instanceof Date ? value = buildValue(ast.key, `Date ${ast.value.toString()}`, ObjectInspector_css_default.value, showKey, ast.depth) : ast.value instanceof RegExp ? value = buildValue(ast.key, ast.value.toString(), ObjectInspector_css_default.regex, showKey, ast.depth) : ast.value instanceof Error ? value = buildValue(ast.key, ast.value.toString(), ObjectInspector_css_default.error, showKey, ast.depth) : isObject(ast.value) ? value = buildValue(ast.key, "{\u2026}", ObjectInspector_css_default.key, showKey, ast.depth) : value = buildValue(ast.key, ast.value.constructor.name, ObjectInspector_css_default.key, showKey, ast.depth)), React25.createElement("span", (0, import_extends3.default)({
-    className: clsx_m_default(themeClass, className)
-  }, html), asyncValue, value);
-};
-ObjectValue2.defaultProps = {
-  showKey: !0
-};
-var ObjectValue_default = ObjectValue2;
-
-// ../../node_modules/@devtools-ds/object-inspector/dist/esm/ObjectLabel.js
-var import_extends4 = __toESM(require_extends()), import_objectWithoutProperties5 = __toESM(require_objectWithoutProperties());
-import React26 from "react";
-var _excluded4 = ["ast", "theme", "previewMax", "open", "colorScheme", "className"], buildPreview = (children, previewMax, showKey) => {
-  let previews = [];
-  for (let i = 0; i < children.length; i++) {
-    let child = children[i];
-    if (child.isPrototype || (previews.push(React26.createElement(ObjectValue_default, {
-      key: child.key,
-      ast: child,
-      showKey
-    })), i < children.length - 1 ? previews.push(", ") : previews.push(" ")), child.isPrototype && i === children.length - 1 && (previews.pop(), previews.push(" ")), i === previewMax - 1 && children.length > previewMax) {
-      previews.push("\u2026 ");
-      break;
-    }
-  }
-  return previews;
-}, getArrayLabel = (ast, open, previewMax, theme3) => {
-  let l = ast.value.length;
-  return open ? React26.createElement("span", null, "Array(", l, ")") : React26.createElement(React26.Fragment, null, React26.createElement("span", null, `${theme3 === "firefox" ? "Array" : ""}(${l}) [ `), buildPreview(ast.children, previewMax, !1), React26.createElement("span", null, "]"));
-}, getObjectLabel = (ast, open, previewMax, theme3) => ast.isPrototype ? React26.createElement("span", null, `Object ${theme3 === "firefox" ? "{ \u2026 }" : ""}`) : open ? React26.createElement("span", null, "{\u2026}") : React26.createElement(React26.Fragment, null, React26.createElement("span", null, `${theme3 === "firefox" ? "Object " : ""}{ `), buildPreview(ast.children, previewMax, !0), React26.createElement("span", null, "}")), getPromiseLabel = (ast, open, previewMax) => open ? React26.createElement("span", null, `Promise { "${String(ast.children[0].value)}" }`) : React26.createElement(React26.Fragment, null, React26.createElement("span", null, "Promise { "), buildPreview(ast.children, previewMax, !0), React26.createElement("span", null, "}")), getMapLabel = (ast, open, previewMax, theme3) => {
-  let {
-    size
-  } = ast.value;
-  return open ? React26.createElement("span", null, `Map(${size})`) : React26.createElement(React26.Fragment, null, React26.createElement("span", null, `Map${theme3 === "chrome" ? `(${size})` : ""} { `), buildPreview(ast.children, previewMax, !0), React26.createElement("span", null, "}"));
-}, getSetLabel = (ast, open, previewMax) => {
-  let {
-    size
-  } = ast.value;
-  return open ? React26.createElement("span", null, "Set(", size, ")") : React26.createElement(React26.Fragment, null, React26.createElement("span", null, `Set(${ast.value.size}) {`), buildPreview(ast.children, previewMax, !0), React26.createElement("span", null, "}"));
-}, ObjectLabel2 = (props) => {
-  let {
-    ast,
-    theme: theme3,
-    previewMax,
-    open,
-    colorScheme,
-    className
-  } = props, html = (0, import_objectWithoutProperties5.default)(props, _excluded4), {
-    themeClass,
-    currentTheme
-  } = useTheme3({
-    theme: theme3,
-    colorScheme
-  }, ObjectInspector_css_default), isPrototype = ast.isPrototype || !1, classes = clsx_m_default(ObjectInspector_css_default.objectLabel, themeClass, className, {
-    [ObjectInspector_css_default.prototype]: isPrototype
-  }), isRoot = ast.depth <= 0, Key = () => React26.createElement("span", {
-    className: isPrototype ? ObjectInspector_css_default.prototype : ObjectInspector_css_default.key
-  }, isRoot ? "" : `${ast.key}: `);
-  return ast.type === "array" ? React26.createElement("span", (0, import_extends4.default)({
-    className: classes
-  }, html), React26.createElement(Key, null), getArrayLabel(ast, open, previewMax, currentTheme)) : ast.type === "function" ? React26.createElement("span", (0, import_extends4.default)({
-    className: classes
-  }, html), React26.createElement(Key, null), currentTheme === "chrome" && React26.createElement("span", {
-    className: ObjectInspector_css_default.functionDecorator
-  }, "\u0192 "), React26.createElement("span", {
-    className: clsx_m_default({
-      [ObjectInspector_css_default.function]: !isPrototype
-    })
-  }, `${ast.value.name}()`)) : ast.type === "promise" ? React26.createElement("span", (0, import_extends4.default)({
-    className: classes
-  }, html), React26.createElement(Key, null), getPromiseLabel(ast, open, previewMax)) : ast.type === "map" ? React26.createElement("span", (0, import_extends4.default)({
-    className: classes
-  }, html), React26.createElement(Key, null), getMapLabel(ast, open, previewMax, currentTheme)) : ast.type === "set" ? React26.createElement("span", (0, import_extends4.default)({
-    className: classes
-  }, html), React26.createElement(Key, null), getSetLabel(ast, open, previewMax)) : React26.createElement("span", (0, import_extends4.default)({
-    className: classes
-  }, html), React26.createElement(Key, null), getObjectLabel(ast, open, previewMax, currentTheme));
-};
-ObjectLabel2.defaultProps = {
-  previewMax: 8,
-  open: !1
-};
-var ObjectLabel_default = ObjectLabel2;
-
-// ../../node_modules/@devtools-ds/object-inspector/dist/esm/ObjectInspectorItem.js
-var ObjectInspectorItem = (props) => {
-  let {
-    ast,
-    expandLevel,
-    depth
-  } = props, [resolved, setResolved] = useState8(), [open, setOpen] = useState8(depth < expandLevel);
-  return useEffect7(() => {
-    (async () => {
-      if (ast.type !== "value") {
-        let promises = ast.children.map((f) => f()), children = await Promise.all(promises), r = (0, import_objectSpread22.default)((0, import_objectSpread22.default)({}, ast), {}, {
-          children
-        });
-        setResolved(r);
-      }
-    })();
-  }, [ast]), resolved ? React27.createElement(Tree, {
-    hover: !1,
-    open,
-    label: React27.createElement(ObjectLabel_default, {
-      open,
-      ast: resolved
-    }),
-    onSelect: () => {
-      var _props$onSelect;
-      (_props$onSelect = props.onSelect) === null || _props$onSelect === void 0 || _props$onSelect.call(props, ast);
-    },
-    onUpdate: (value) => {
-      setOpen(value);
-    }
-  }, resolved.children.map((child) => React27.createElement(ObjectInspectorItem, {
-    key: child.key,
-    ast: child,
-    depth: depth + 1,
-    expandLevel,
-    onSelect: props.onSelect
-  }))) : React27.createElement(Tree, {
-    hover: !1,
-    label: React27.createElement(ObjectValue_default, {
-      ast
-    }),
-    onSelect: () => {
-      var _props$onSelect2;
-      (_props$onSelect2 = props.onSelect) === null || _props$onSelect2 === void 0 || _props$onSelect2.call(props, ast);
-    }
-  });
-};
-ObjectInspectorItem.defaultProps = {
-  expandLevel: 0,
-  depth: 0
-};
-var ObjectInspectorItem_default = ObjectInspectorItem;
-
-// ../../node_modules/@devtools-ds/object-inspector/dist/esm/ObjectInspector.js
-var _excluded5 = ["data", "expandLevel", "sortKeys", "includePrototypes", "className", "theme", "colorScheme", "onSelect"], ObjectInspector2 = (props) => {
-  let {
-    data,
-    expandLevel,
-    sortKeys,
-    includePrototypes,
-    className,
-    theme: theme3,
-    colorScheme,
-    onSelect
-  } = props, html = (0, import_objectWithoutProperties6.default)(props, _excluded5), [ast, setAST] = useState9(void 0), {
-    themeClass,
-    currentTheme,
-    currentColorScheme
-  } = useTheme3({
-    theme: theme3,
-    colorScheme
-  }, ObjectInspector_css_default);
-  return useEffect8(() => {
-    (async () => setAST(await parse(data, sortKeys, includePrototypes)))();
-  }, [data, sortKeys, includePrototypes]), React28.createElement("div", (0, import_extends5.default)({
-    className: clsx_m_default(ObjectInspector_css_default.objectInspector, className, themeClass)
-  }, html), ast && React28.createElement(ThemeProvider, {
-    theme: currentTheme,
-    colorScheme: currentColorScheme
-  }, React28.createElement(ObjectInspectorItem_default, {
-    ast,
-    expandLevel,
-    onSelect
-  })));
-};
-ObjectInspector2.defaultProps = {
-  expandLevel: 0,
-  sortKeys: !0,
-  includePrototypes: !0
-};
-
-// src/component-testing/components/MethodCall.tsx
-import { useTheme as useTheme4 } from "@aussieljk/forkbook/theming";
+import { useTheme as useTheme3 } from "@aussieljk/forkbook/theming";
 import { Fragment as Fragment6, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var colorsLight = {
   base: "#444",
@@ -2649,7 +1846,7 @@ var colorsLight = {
   meta: "#FAD483",
   method: "#5EC1FF"
 }, useThemeColors = () => {
-  let { base } = useTheme4();
+  let { base } = useTheme3();
   return base === "dark" ? colorsDark : colorsLight;
 }, special = /[^A-Z0-9]/i, trimEnd = /[\s.,…]+$/gm, ellipsize = (string2, maxlength) => {
   if (string2.length <= maxlength)
@@ -2665,7 +1862,7 @@ var colorsLight = {
     return String(value);
   }
 }, interleave = (nodes, separator) => nodes.flatMap(
-  (node, index) => index === nodes.length - 1 ? [node] : [node, React29.cloneElement(separator, { key: `sep${index}` })]
+  (node, index) => index === nodes.length - 1 ? [node] : [node, React20.cloneElement(separator, { key: `sep${index}` })]
 ), Node2 = ({
   value,
   nested,
@@ -2756,17 +1953,16 @@ var colorsLight = {
   callsById,
   nested = !1
 }) => {
-  let isDarkMode = useTheme4().base === "dark", colors = useThemeColors();
+  let { base, addonActionsTheme } = useTheme3(), isDarkMode = base === "dark", colors = useThemeColors();
   if (showInspector)
-    return jsx11(Fragment6, { children: jsx11(
-      ObjectInspector2,
+    return jsx11(Fragment6, { children: jsx11("span", { id: "interactions-object-inspector", children: jsx11(
+      themedObjectInspector,
       {
-        id: "interactions-object-inspector",
         data: value,
-        includePrototypes: !1,
-        colorScheme: isDarkMode ? "dark" : "light"
+        showNonenumerable: !1,
+        theme: addonActionsTheme ?? (isDarkMode ? "chromeDark" : "chromeLight")
       }
-    ) });
+    ) }) });
   if (nested)
     return jsx11("span", { style: { color: colors.base }, children: "{\u2026}" });
   let nodelist = interleave(
@@ -2867,7 +2063,7 @@ var colorsLight = {
   let colors = useThemeColors();
   return jsx11("span", { style: { color: colors.meta }, children: stringify(value) });
 }, StepNode = ({ label }) => {
-  let colors = useThemeColors(), { typography } = useTheme4();
+  let colors = useThemeColors(), { typography } = useTheme3();
   return jsx11(
     "span",
     {
@@ -3006,16 +2202,16 @@ var getParams = (line, fromIndex = 0) => {
 };
 
 // src/component-testing/components/StatusIcon.tsx
-import { CheckIcon as CheckIcon2, CircleIcon, PlayIcon, StopAltIcon } from "@storybook/icons";
-import { useTheme as useTheme5 } from "@aussieljk/forkbook/theming";
+import { CheckIcon as CheckIcon2, CircleIcon, PlayIcon, StopCircleIcon } from "@phosphor-icons/react";
+import { useTheme as useTheme4 } from "@aussieljk/forkbook/theming";
 import { jsx as jsx13 } from "react/jsx-runtime";
 var StatusIcon = ({ status }) => {
-  let theme3 = useTheme5();
+  let theme3 = useTheme4();
   switch (status) {
     case "done" /* DONE */:
       return jsx13(CheckIcon2, { color: theme3.color.positive, "data-testid": "icon-done" });
     case "error" /* ERROR */:
-      return jsx13(StopAltIcon, { color: theme3.color.negative, "data-testid": "icon-error" });
+      return jsx13(StopCircleIcon, { color: theme3.color.negative, "data-testid": "icon-error" });
     case "active" /* ACTIVE */:
       return jsx13(PlayIcon, { color: theme3.color.secondary, "data-testid": "icon-active" });
     case "waiting" /* WAITING */:
@@ -3044,7 +2240,7 @@ if (typeof document < "u" && !document.querySelector(`style[data-fb-css="${id7}"
   let style = document.createElement("style");
   style.setAttribute("data-fb-css", id7), style.textContent = '.fb-PYwdvq-methodCall{font-family:var(--fb-font-mono);font-size:var(--fb-size-s1);overflow-wrap:break-word;inline-size:calc(100% - 40px)}.fb-PYwdvq-row{border-bottom:1px solid var(--fb-app-border-color);font-family:var(--fb-font-base);flex-direction:column;font-size:13px;list-style:none;display:flex;position:relative;&[data-status=error]{background-color:var(--fb-background-warning)}&[data-paused]:before{content:"";z-index:1;border-top:4.5px solid #0000;border-left:7px solid var(--fb-color-warning);border-bottom:4.5px solid #0000;position:absolute;top:-5px}&[data-paused]:after{content:"";z-index:1;border-top:1.5px solid var(--fb-color-warning);width:100%;position:absolute;top:-1px}}:where([data-fb-theme=dark]) .fb-PYwdvq-row[data-status=error]{background-color:rgb(from var(--fb-color-negative) r g b / calc(alpha - .93))}.fb-PYwdvq-rowHeader{display:flex;&:not([data-navigation-disabled]):hover{background:var(--fb-background-hoverable)}}.fb-PYwdvq-rowLabel{text-align:start;cursor:pointer;background:0 0;border:0;flex:1;grid-template-columns:15px 1fr;align-items:center;min-height:40px;margin:0;padding:8px 15px;display:grid;&:disabled,&[data-status=error]{cursor:default}&:focus-visible{box-shadow:inset 3px 0 0 0 var(--fb-color-secondary);background:var(--fb-background-hoverable);outline:0}&[data-status=error]:focus-visible{box-shadow:inset 3px 0 0 0 var(--fb-color-warning);background:0 0}&[data-status=waiting]>div{opacity:.5}}.fb-PYwdvq-rowActions{align-items:center;padding:6px;display:flex}.fb-PYwdvq-button{color:var(--fb-text-muted-color);margin:0 3px}.fb-PYwdvq-rowMessage{font-size:var(--fb-size-s1);color:var(--fb-color-default-text);padding:8px 10px 8px 36px;& pre{margin:0;padding:0}}.fb-PYwdvq-errorName{color:#0271b6}.fb-PYwdvq-errorMessage{color:#444}.fb-PYwdvq-errorExplainer{color:var(--fb-color-negative-text);font-size:var(--fb-size-s2);text-wrap:balance;max-width:500px}:where([data-fb-theme=dark]){& .fb-PYwdvq-errorName{color:#5ec1ff}& .fb-PYwdvq-errorMessage{color:#eee}& .fb-PYwdvq-errorExplainer{color:var(--fb-color-negative)}}', document.head.appendChild(style);
 }
-var Interaction_default = { errorName: "fb-PYwdvq-errorName", rowLabel: "fb-PYwdvq-rowLabel", rowActions: "fb-PYwdvq-rowActions", errorExplainer: "fb-PYwdvq-errorExplainer", errorMessage: "fb-PYwdvq-errorMessage", rowMessage: "fb-PYwdvq-rowMessage", row: "fb-PYwdvq-row", button: "fb-PYwdvq-button", methodCall: "fb-PYwdvq-methodCall", rowHeader: "fb-PYwdvq-rowHeader" };
+var Interaction_default = { rowMessage: "fb-PYwdvq-rowMessage", errorMessage: "fb-PYwdvq-errorMessage", errorExplainer: "fb-PYwdvq-errorExplainer", rowLabel: "fb-PYwdvq-rowLabel", button: "fb-PYwdvq-button", row: "fb-PYwdvq-row", rowActions: "fb-PYwdvq-rowActions", methodCall: "fb-PYwdvq-methodCall", rowHeader: "fb-PYwdvq-rowHeader", errorName: "fb-PYwdvq-errorName" };
 
 // src/component-testing/components/Interaction.tsx
 import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
@@ -3116,7 +2312,7 @@ ${exception.diff}` : ""}`,
   toggleCollapsed,
   pausedAt
 }) => {
-  let [isHovered, setIsHovered] = React30.useState(!1), isNavigationDisabled = !controlStates.goto || !call.interceptable || !!call.ancestors?.length, stepName = extractStepName(call), interactionStatus = getInteractionStatusText(call);
+  let [isHovered, setIsHovered] = React21.useState(!1), isNavigationDisabled = !controlStates.goto || !call.interceptable || !!call.ancestors?.length, stepName = extractStepName(call), interactionStatus = getInteractionStatusText(call);
   return isHidden || call.id === INTERNAL_RENDER_CALL_ID ? null : jsxs10(
     "li",
     {
@@ -3161,7 +2357,7 @@ ${exception.diff}` : ""}`,
                   onClick: toggleCollapsed,
                   ariaLabel: getExpandButtonAriaLabel({ isCollapsed, stepName }),
                   "aria-expanded": !isCollapsed,
-                  children: isCollapsed ? jsx14(ChevronUpIcon, {}) : jsx14(ChevronDownIcon, {})
+                  children: isCollapsed ? jsx14(CaretUpIcon, {}) : jsx14(CaretDownIcon, {})
                 }
               ) })
             ]
@@ -3212,13 +2408,13 @@ import {
   Toolbar as SharedToolbar
 } from "@aussieljk/forkbook/internal/components";
 import {
+  ArrowsClockwiseIcon,
   FastForwardIcon,
-  PlayBackIcon,
-  PlayNextIcon,
   RewindIcon,
-  SyncIcon
-} from "@storybook/icons";
-import { useTheme as useTheme6 } from "@aussieljk/forkbook/theming";
+  SkipBackIcon,
+  SkipForwardIcon
+} from "@phosphor-icons/react";
+import { useTheme as useTheme5 } from "@aussieljk/forkbook/theming";
 
 // src/component-testing/components/StatusBadge.tsx
 import { TooltipNote, WithTooltip } from "@aussieljk/forkbook/internal/components";
@@ -3279,7 +2475,7 @@ if (typeof document < "u" && !document.querySelector(`style[data-fb-css="${id10}
   let style = document.createElement("style");
   style.setAttribute("data-fb-css", id10), style.textContent = ".fb-W9rv1G-wrapper{box-shadow:var(--fb-app-border-color) 0 -1px 0 0 inset;background:var(--fb-background-app);z-index:1;position:sticky;top:0}.fb-W9rv1G-controlsGroup{flex:1;align-items:center;gap:6px;display:flex}.fb-W9rv1G-iconButton{color:var(--fb-text-muted-color)}.fb-W9rv1G-rewindButton{margin-inline-start:3px;}.fb-W9rv1G-jumpToEndButton{color:var(--fb-text-muted-color);border-radius:4px;margin-inline:3px;padding:6px;line-height:12px;&:not(:disabled):hover,&:not(:disabled):focus-visible{color:var(--fb-color-secondary)}}.fb-W9rv1G-openInEditorButton{color:var(--fb-color-secondary);font-weight:var(--fb-weight-bold);text-align:right;white-space:nowrap;justify-content:flex-end;font-size:13px;line-height:24px}.fb-W9rv1G-location{color:var(--fb-text-muted-color);cursor:default;font-weight:var(--fb-weight-regular);text-align:right;white-space:nowrap;justify-content:flex-end;margin:0;font-size:13px}", document.head.appendChild(style);
 }
-var Toolbar_default = { controlsGroup: "fb-W9rv1G-controlsGroup", iconButton: "fb-W9rv1G-iconButton", rewindButton: "fb-W9rv1G-rewindButton fb-W9rv1G-iconButton", wrapper: "fb-W9rv1G-wrapper", openInEditorButton: "fb-W9rv1G-openInEditorButton", jumpToEndButton: "fb-W9rv1G-jumpToEndButton", location: "fb-W9rv1G-location" };
+var Toolbar_default = { wrapper: "fb-W9rv1G-wrapper", iconButton: "fb-W9rv1G-iconButton", rewindButton: "fb-W9rv1G-rewindButton fb-W9rv1G-iconButton", openInEditorButton: "fb-W9rv1G-openInEditorButton", location: "fb-W9rv1G-location", controlsGroup: "fb-W9rv1G-controlsGroup", jumpToEndButton: "fb-W9rv1G-jumpToEndButton" };
 
 // src/component-testing/components/Toolbar.tsx
 import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
@@ -3293,7 +2489,7 @@ var Toolbar = ({
   canOpenInEditor,
   api
 }) => {
-  let buttonText = status === "errored" ? "Scroll to error" : "Scroll to end", theme3 = useTheme6(), preventFocusLoss = (e) => e.preventDefault();
+  let buttonText = status === "errored" ? "Scroll to error" : "Scroll to end", theme3 = useTheme5(), preventFocusLoss = (e) => e.preventDefault();
   return jsx17("div", { className: Toolbar_default.wrapper, children: jsxs12(
     SharedToolbar,
     {
@@ -3338,7 +2534,7 @@ var Toolbar = ({
               onClick: controls.back,
               onPointerDown: preventFocusLoss,
               disabled: !controlStates.back,
-              children: jsx17(PlayBackIcon, {})
+              children: jsx17(SkipBackIcon, {})
             }
           ),
           jsx17(
@@ -3351,7 +2547,7 @@ var Toolbar = ({
               onClick: controls.next,
               onPointerDown: preventFocusLoss,
               disabled: !controlStates.next,
-              children: jsx17(PlayNextIcon, {})
+              children: jsx17(SkipForwardIcon, {})
             }
           ),
           jsx17(
@@ -3376,7 +2572,7 @@ var Toolbar = ({
               ariaLabel: "Rerun",
               onClick: controls.rerun,
               onPointerDown: preventFocusLoss,
-              children: jsx17(SyncIcon, {})
+              children: jsx17(ArrowsClockwiseIcon, {})
             }
           )
         ] }),
@@ -3407,7 +2603,7 @@ if (typeof document < "u" && !document.querySelector(`style[data-fb-css="${id11}
   let style = document.createElement("style");
   style.setAttribute("data-fb-css", id11), style.textContent = ".fb-RpIDLa-container{background:var(--fb-background-content);height:100%}.fb-RpIDLa-section{position:relative}.fb-RpIDLa-heading{white-space:nowrap;clip:rect(0, 0, 0, 0);clip-path:inset(50%);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.fb-RpIDLa-list{margin:0;padding:0}.fb-RpIDLa-caughtException{border-bottom:1px solid var(--fb-app-border-color);background-color:var(--fb-background-warning);font-size:calc(var(--fb-size-s2) - 1px);padding:15px;line-height:19px}:where([data-fb-theme=dark]) .fb-RpIDLa-caughtException{background-color:rgb(from var(--fb-color-negative) r g b / calc(alpha - .93))}.fb-RpIDLa-caughtExceptionCode{font-size:calc(var(--fb-size-s1) - 1px);vertical-align:top;border:1px solid var(--fb-app-border-color);background:#0000000d;border-radius:3px;margin:0 1px;padding:3px;line-height:1}.fb-RpIDLa-caughtExceptionTitle{padding-bottom:4px;font-weight:700}.fb-RpIDLa-caughtExceptionDescription{margin:0;padding:0 0 20px}.fb-RpIDLa-caughtExceptionStack{font-size:calc(var(--fb-size-s1) - 1px);margin:0;padding:0;&:not(:last-child){padding-bottom:16px}}", document.head.appendChild(style);
 }
-var InteractionsPanel_default = { container: "fb-RpIDLa-container", caughtException: "fb-RpIDLa-caughtException", caughtExceptionDescription: "fb-RpIDLa-caughtExceptionDescription", caughtExceptionTitle: "fb-RpIDLa-caughtExceptionTitle", heading: "fb-RpIDLa-heading", list: "fb-RpIDLa-list", caughtExceptionStack: "fb-RpIDLa-caughtExceptionStack", caughtExceptionCode: "fb-RpIDLa-caughtExceptionCode", section: "fb-RpIDLa-section" };
+var InteractionsPanel_default = { heading: "fb-RpIDLa-heading", section: "fb-RpIDLa-section", caughtExceptionCode: "fb-RpIDLa-caughtExceptionCode", caughtException: "fb-RpIDLa-caughtException", caughtExceptionStack: "fb-RpIDLa-caughtExceptionStack", caughtExceptionDescription: "fb-RpIDLa-caughtExceptionDescription", container: "fb-RpIDLa-container", list: "fb-RpIDLa-list", caughtExceptionTitle: "fb-RpIDLa-caughtExceptionTitle" };
 
 // src/component-testing/components/InteractionsPanel.tsx
 import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
@@ -3417,7 +2613,7 @@ var StatusAnnouncementMapping = {
   completed: "Component test completed successfully.",
   errored: "Component test failed.",
   aborted: "Component test was aborted."
-}, getStatusAnnouncement = (status, hasException) => status === "completed" && hasException ? StatusAnnouncementMapping.errored : StatusAnnouncementMapping[status], InteractionsPanel = React31.memo(
+}, getStatusAnnouncement = (status, hasException) => status === "completed" && hasException ? StatusAnnouncementMapping.errored : StatusAnnouncementMapping[status], InteractionsPanel = React23.memo(
   function({
     storyUrl,
     status,
@@ -3439,7 +2635,7 @@ var StatusAnnouncementMapping = {
     api
   }) {
     let filter = useAnsiToHtmlFilter(), hasRealInteractions = interactions.some((i) => i.id !== INTERNAL_RENDER_CALL_ID), isListBusy = status === "rendering" || status === "playing", statusAnnouncement = getStatusAnnouncement(status, hasException), isStatusAlert = status === "errored" || status === "completed" && hasException;
-    return React31.useEffect(() => {
+    return React23.useEffect(() => {
       announce(statusAnnouncement, isStatusAlert ? "assertive" : "polite");
     }, [statusAnnouncement, isStatusAlert]), jsxs13("div", { className: InteractionsPanel_default.container, children: [
       hasResultMismatch && jsx18(TestDiscrepancyMessage, { browserTestStatus }),
@@ -3606,7 +2802,7 @@ var INITIAL_CONTROL_STATES = {
         statusValue: storyStatus?.value,
         testRunId: storyStatus?.data?.testRunId
       };
-    }), state = useStorybookState2(), api = useStorybookApi6(), importPath = api.getData(state.storyId, state.refId)?.importPath, canOpenInEditor = global2.CONFIG_TYPE === "DEVELOPMENT" && !state.refId, [panelState, set] = useAddonState2(ADDON_ID6, {
+    }), state = useStorybookState2(), api = useStorybookApi6(), importPath = api.getData(state.storyId, state.refId)?.importPath, canOpenInEditor = global.CONFIG_TYPE === "DEVELOPMENT" && !state.refId, [panelState, set] = useAddonState2(ADDON_ID6, {
       status: "rendering",
       controlStates: INITIAL_CONTROL_STATES,
       interactions: [],
@@ -3615,7 +2811,7 @@ var INITIAL_CONTROL_STATES = {
       pausedAt: void 0,
       caughtException: void 0,
       unhandledErrors: void 0
-    }), [scrollTarget, setScrollTarget] = useState11(void 0), [collapsed, setCollapsed] = useState11(/* @__PURE__ */ new Set()), [hasResultMismatch, setResultMismatch] = useState11(!1), {
+    }), [scrollTarget, setScrollTarget] = useState7(void 0), [collapsed, setCollapsed] = useState7(/* @__PURE__ */ new Set()), [hasResultMismatch, setResultMismatch] = useState7(!1), {
       status = "rendering",
       controlStates = INITIAL_CONTROL_STATES,
       interactions = [],
@@ -3625,11 +2821,11 @@ var INITIAL_CONTROL_STATES = {
     } = panelState, log = useRef2([getInternalRenderLogItem("active" /* ACTIVE */)]), calls = useRef2(
       /* @__PURE__ */ new Map([[INTERNAL_RENDER_CALL_ID, getInternalRenderCall(storyId)]])
     ), setCall = ({ status: status2, ...call }) => calls.current.set(call.id, call), endRef = useRef2();
-    useEffect10(() => {
+    useEffect6(() => {
       let observer;
-      return global2.IntersectionObserver && (observer = new global2.IntersectionObserver(
+      return global.IntersectionObserver && (observer = new global.IntersectionObserver(
         ([end]) => setScrollTarget(end.isIntersecting ? void 0 : end.target),
-        { root: global2.document.querySelector('#storybook-panel-root [role="tabpanel"]') }
+        { root: global.document.querySelector('#storybook-panel-root [role="tabpanel"]') }
       ), endRef.current && observer.observe(endRef.current)), () => observer?.disconnect();
     }, []);
     let renderTracker = useRef2({ renderId: 0 }), emit = useChannel3(
@@ -3692,7 +2888,7 @@ var INITIAL_CONTROL_STATES = {
       },
       [collapsed, storyId]
     );
-    useEffect10(() => {
+    useEffect6(() => {
       set(
         (state2) => getPanelState(state2, { log: log.current, calls: calls.current, collapsed, setCollapsed })
       );
@@ -3710,7 +2906,7 @@ var INITIAL_CONTROL_STATES = {
       }),
       [emit, storyId]
     ), storyFilePath = useParameter3("fileName", ""), [fileName] = storyFilePath.toString().split("/").slice(-1), scrollToTarget = () => scrollTarget?.scrollIntoView({ behavior: "smooth", block: "end" }), hasException = !!caughtException || !!unhandledErrors || interactions.some((v2) => v2.status === "error" /* ERROR */), browserTestStatus = useMemo4(() => status !== "playing" && (interactions.length > 0 || hasException) ? hasException ? "error" /* ERROR */ : "done" /* DONE */ : status === "playing" ? "active" /* ACTIVE */ : void 0, [status, interactions, hasException]);
-    return useEffect10(() => {
+    return useEffect6(() => {
       if (browserTestStatus && statusValue && statusValue !== "status-value:pending" && statusValue !== storyStatusMap[browserTestStatus]) {
         let timeout = setTimeout(
           () => setResultMismatch((currentValue) => (currentValue || emit(FORKBOOK_ADDON_TEST_CHANNEL, {
@@ -3794,7 +2990,7 @@ import { addons as addons6, types as types4 } from "@aussieljk/forkbook/manager-
 // src/backgrounds/components/Tool.tsx
 import { Fragment as Fragment9, memo as memo5, useCallback as useCallback5 } from "react";
 import { Select, ToggleButton } from "@aussieljk/forkbook/internal/components";
-import { CircleIcon as CircleIcon2, GridIcon, PhotoIcon } from "@storybook/icons";
+import { CircleIcon as CircleIcon2, GridFourIcon, ImageIcon } from "@phosphor-icons/react";
 import { useGlobals as useGlobals2, useParameter as useParameter4 } from "@aussieljk/forkbook/manager-api";
 import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
 var BackgroundTool = memo5(function() {
@@ -3845,7 +3041,7 @@ var BackgroundTool = memo5(function() {
         ariaLabel: isLocked ? "Grid set by story parameters" : "Grid visibility",
         tooltip: isLocked ? "Grid set by story parameters" : "Toggle grid visibility",
         onClick: () => update({ value: backgroundName, grid: !isGrid }),
-        children: jsx22(GridIcon, {})
+        children: jsx22(GridFourIcon, {})
       },
       "grid"
     ),
@@ -3855,7 +3051,7 @@ var BackgroundTool = memo5(function() {
         resetLabel: "Reset background",
         onReset: () => update(void 0),
         disabled: isLocked,
-        icon: jsx22(PhotoIcon, {}),
+        icon: jsx22(ImageIcon, {}),
         ariaLabel: isLocked ? "Background set by story parameters" : "Preview background",
         tooltip: isLocked ? "Background set by story parameters" : "Change background",
         defaultOptions: backgroundName,
@@ -3882,9 +3078,9 @@ var manager_default6 = addons6.register(ADDON_ID3, () => {
 import { addons as addons7, types as types5 } from "@aussieljk/forkbook/manager-api";
 
 // src/measure/Tool.tsx
-import { useCallback as useCallback6, useEffect as useEffect11 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect7 } from "react";
 import { ToggleButton as ToggleButton2 } from "@aussieljk/forkbook/internal/components";
-import { RulerIcon } from "@storybook/icons";
+import { RulerIcon } from "@phosphor-icons/react";
 import { useGlobals as useGlobals3, useParameter as useParameter5, useStorybookApi as useStorybookApi8 } from "@aussieljk/forkbook/manager-api";
 import { jsx as jsx24 } from "react/jsx-runtime";
 var Tool = () => {
@@ -3894,7 +3090,7 @@ var Tool = () => {
     }),
     [updateGlobals, measureEnabled]
   );
-  return useEffect11(() => {
+  return useEffect7(() => {
     isDisabled || api.setAddonShortcut(ADDON_ID4, {
       label: "Toggle Measure",
       defaultShortcut: ["M"],
@@ -3933,9 +3129,9 @@ var manager_default7 = addons7.register(ADDON_ID4, () => {
 import { addons as addons8, types as types6 } from "@aussieljk/forkbook/manager-api";
 
 // src/outline/OutlineSelector.tsx
-import { memo as memo6, useCallback as useCallback7, useEffect as useEffect12 } from "react";
+import { memo as memo6, useCallback as useCallback7, useEffect as useEffect8 } from "react";
 import { ToggleButton as ToggleButton3 } from "@aussieljk/forkbook/internal/components";
-import { OutlineIcon } from "@storybook/icons";
+import { SelectionIcon } from "@phosphor-icons/react";
 import { useGlobals as useGlobals4, useParameter as useParameter6, useStorybookApi as useStorybookApi9 } from "@aussieljk/forkbook/manager-api";
 import { jsx as jsx26 } from "react/jsx-runtime";
 var OutlineSelector = memo6(function() {
@@ -3945,7 +3141,7 @@ var OutlineSelector = memo6(function() {
     }),
     [isActive, updateGlobals]
   );
-  return useEffect12(() => {
+  return useEffect8(() => {
     isDisabled || api.setAddonShortcut(ADDON_ID5, {
       label: "Toggle Outline",
       defaultShortcut: ["alt", "O"],
@@ -3963,7 +3159,7 @@ var OutlineSelector = memo6(function() {
       ariaDescription: "When enabled, this tool displays the outline of every element in the preview area, which helps understand their layout.",
       tooltip: "Toggle outline",
       onClick: toggleOutline,
-      children: jsx26(OutlineIcon, {})
+      children: jsx26(SelectionIcon, {})
     },
     "outline"
   );
@@ -3986,10 +3182,10 @@ import { addons as addons9, types as types7 } from "@aussieljk/forkbook/manager-
 // src/viewport/components/Tool.tsx
 import { useMemo as useMemo6 } from "react";
 import { Select as Select2 } from "@aussieljk/forkbook/internal/components";
-import { GrowIcon } from "@storybook/icons";
+import { ArrowsOutIcon } from "@phosphor-icons/react";
 
 // src/viewport/useViewport.ts
-import { useCallback as useCallback8, useEffect as useEffect13, useMemo as useMemo5, useRef as useRef3 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect9, useMemo as useMemo5, useRef as useRef3 } from "react";
 import { useGlobals as useGlobals5, useParameter as useParameter7, useStorybookApi as useStorybookApi10 } from "@aussieljk/forkbook/manager-api";
 var cycle = (viewports, current, direction = 1) => {
   let keys = Object.keys(viewports), nextIndex = (current ? keys.indexOf(current) : -1) + direction;
@@ -4013,9 +3209,9 @@ var cycle = (viewports, current, direction = 1) => {
     },
     [update, isRotated]
   );
-  return useEffect13(() => {
+  return useEffect9(() => {
     parameter && option && (Object.hasOwn(options, option) ? lastSelectedOption.current = option : (lastSelectedOption.current = void 0, PARAM_KEY in storyGlobals || update({ value: void 0, isRotated: !1 })));
-  }, [parameter, storyGlobals, options, option, update]), useEffect13(() => {
+  }, [parameter, storyGlobals, options, option, update]), useEffect9(() => {
     api.setAddonShortcut(ADDON_ID, {
       label: "Next viewport",
       defaultShortcut: ["alt", "V"],
@@ -4070,12 +3266,18 @@ var cycle = (viewports, current, direction = 1) => {
 };
 
 // src/viewport/viewportIcons.tsx
-import { BrowserIcon, DiamondIcon, MobileIcon, TabletIcon, WatchIcon } from "@storybook/icons";
+import {
+  BrowserIcon,
+  DeviceMobileIcon,
+  DeviceTabletIcon,
+  DiamondIcon,
+  WatchIcon
+} from "@phosphor-icons/react";
 import { jsx as jsx28 } from "react/jsx-runtime";
 var iconsMap = {
   desktop: jsx28(BrowserIcon, {}),
-  mobile: jsx28(MobileIcon, {}),
-  tablet: jsx28(TabletIcon, {}),
+  mobile: jsx28(DeviceMobileIcon, {}),
+  tablet: jsx28(DeviceTabletIcon, {}),
   watch: jsx28(WatchIcon, {}),
   other: jsx28(DiamondIcon, {})
 };
@@ -4133,7 +3335,7 @@ var ViewportTool = () => {
       defaultOptions: value,
       options,
       onSelect: (selected) => select(selected),
-      icon: jsx29(GrowIcon, {}),
+      icon: jsx29(ArrowsOutIcon, {}),
       children: isDefault ? null : name
     },
     "viewport"