@superblocksteam/library 2.0.3-next.2 → 2.0.3-next.200

package/dist/{index-DHOLy0gg.js → index-CFz3UGkJ.js}

@@ -48,7 +48,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
 var __privateMethod = (obj, member, method4) => (__accessCheck(obj, member, "access private method"), method4);
 var _removeSourceIdElement_dec, _setSourceIdElement_dec, _setActiveRootInstanceId_dec, _init, _cancelApi_dec, _runApi_dec, _init2, _renameWidget_dec, _setWidgetProperty_dec, _setWidgetProperties_dec, _writeRuntimeProperties_dec, _deleteComponents_dec, _dropComponent_dec, _createComponent_dec, _batchUpdate_dec, _clearPendingTransactions_dec, _addPendingTransaction_dec, _executeOrAddToBatch_dec, _init3, _addOptimisticCreateWidget_dec, _processRootWidget_dec, _init4, _refreshPositionsAndGetDropConstraints_dec, _init5, _updateChildPositions_dec, _setWidgetPosition_dec, _setActiveTargetRect_dec, _setActiveDragRect_dec, _setDropTargetId_dec, _setInvalidDropTarget_dec, _setValidRootIds_dec, _cancelNewComponentDrag_dec, _startNewComponentDrag_dec, _setIsDragging_dec, _setWidgetFeatures_dec, _init6;
 import * as React from "react";
-import React__default, { isValidElement as isValidElement$1, version as version$2, createContext, useContext, useEffect, useRef, useLayoutEffect as useLayoutEffect$2, Component, useState, useMemo as useMemo$2, useCallback, forwardRef, useImperativeHandle, cloneElement as cloneElement$1, createElement, Children, memo, useReducer, PureComponent, useSyncExternalStore, Suspense, createRef } from "react";
+import React__default, { isValidElement as isValidElement$1, version as version$2, createContext, useContext, useEffect, useRef, useLayoutEffect as useLayoutEffect$2, Component, useState, useMemo as useMemo$2, useCallback, forwardRef, useImperativeHandle, cloneElement as cloneElement$1, createElement, Suspense, Children, memo, useReducer, PureComponent, useSyncExternalStore, createRef } from "react";
 import { S as SvgClose, a as SvgSystemDanger, b as SvgSystemInfo, c as SvgSystemError, d as SvgSystemSuccess, e as SvgPlus, f as SvgHide, g as SvgChevronDown, h as SvgEmptyCheckbox, i as SvgMinus, j as SvgCheckmark, k as SvgCopy, l as SvgExternalLink, m as SvgPlay, n as SvgDownload, o as SvgTrash, p as SvgFilter, q as SvgFreeze, r as SvgSort, s as SvgEllipsis, t as SvgCrossXs, u as SvgClark } from "./icons-NrNO8p_u.js";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default, { unstable_batchedUpdates, flushSync, createPortal } from "react-dom";
@@ -5917,18 +5917,11 @@ if (typeof __MOBX_DEVTOOLS_GLOBAL_HOOK__ === "object") {
     $mobx
   });
 }
-let internalStores = {};
-function registerStores(stores) {
-  internalStores = { ...internalStores, ...stores };
-}
 class ConnectionManager {
   // The status of the connection to the remote dev server
   constructor() {
     __publicField(this, "connectionStatus", "pre-init");
     makeAutoObservable(this);
-    registerStores({
-      ConnectionManager: this
-    });
   }
   initializeSocket() {
     this.connectionStatus = "connecting";
@@ -6038,7 +6031,7 @@ const isDimension = (value) => {
 var Dim;
 (function(Dim2) {
   function isEqual2(a3, b3) {
-    return a3.mode === b3.mode && a3.value === b3.value;
+    return Object.is(a3.mode, b3.mode) && Object.is(a3.value, b3.value);
   }
   Dim2.isEqual = isEqual2;
   function build(value, mode) {
@@ -43048,9 +43041,6 @@ class InteractionLayerManager {
     __publicField(this, "activeRootInstanceId");
     __publicField(this, "sourceIdElements", /* @__PURE__ */ new Map());
     makeAutoObservable(this);
-    registerStores({
-      InteractionLayerManager: this
-    });
   }
   setActiveRootInstanceId(rootInstanceId) {
     this.activeRootInstanceId = rootInstanceId;
@@ -43171,10 +43161,14 @@ const RunApisTrigger = {
 const ControlModalTrigger = {
   type: TriggerStepType.CONTROL_MODAL,
   async execute(context2, step) {
+    if (step.name === void 0) {
+      return;
+    }
     context2.rootStore.entityManager.runCode({
       scopeId: context2.scopeId,
       name: context2.name,
       func: (state, step2) => {
+        if (!state || !step2.name) return;
         if (step2.direction === "open") {
           state[step2.name].isOpen = true;
         } else {
@@ -43184,10 +43178,11 @@ const ControlModalTrigger = {
       args: [step]
     });
   },
-  create(name, direction) {
+  create(modal, direction) {
+    const meta = getBindingIdentifier(modal);
     return {
       type: TriggerStepType.CONTROL_MODAL,
-      name,
+      name: meta == null ? void 0 : meta.entityName,
       direction
     };
   }
@@ -43661,8 +43656,8 @@ function findDOMNode(node2) {
   }
   return null;
 }
-var reactIs$1 = { exports: {} };
-var reactIs_production_min$1 = {};
+var reactIs$2 = { exports: {} };
+var reactIs_production_min$2 = {};
 /**
  * @license React
  * react-is.production.min.js
@@ -43672,10 +43667,10 @@ var reactIs_production_min$1 = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var hasRequiredReactIs_production_min$1;
-function requireReactIs_production_min$1() {
-  if (hasRequiredReactIs_production_min$1) return reactIs_production_min$1;
-  hasRequiredReactIs_production_min$1 = 1;
+var hasRequiredReactIs_production_min$2;
+function requireReactIs_production_min$2() {
+  if (hasRequiredReactIs_production_min$2) return reactIs_production_min$2;
+  hasRequiredReactIs_production_min$2 = 1;
   var b3 = Symbol.for("react.element"), c3 = Symbol.for("react.portal"), d3 = Symbol.for("react.fragment"), e3 = Symbol.for("react.strict_mode"), f = Symbol.for("react.profiler"), g2 = Symbol.for("react.provider"), h3 = Symbol.for("react.context"), k2 = Symbol.for("react.server_context"), l = Symbol.for("react.forward_ref"), m4 = Symbol.for("react.suspense"), n2 = Symbol.for("react.suspense_list"), p = Symbol.for("react.memo"), q3 = Symbol.for("react.lazy"), t3 = Symbol.for("react.offscreen"), u2;
   u2 = Symbol.for("react.module.reference");
   function v2(a3) {
@@ -43708,71 +43703,71 @@ function requireReactIs_production_min$1() {
       }
     }
   }
-  reactIs_production_min$1.ContextConsumer = h3;
-  reactIs_production_min$1.ContextProvider = g2;
-  reactIs_production_min$1.Element = b3;
-  reactIs_production_min$1.ForwardRef = l;
-  reactIs_production_min$1.Fragment = d3;
-  reactIs_production_min$1.Lazy = q3;
-  reactIs_production_min$1.Memo = p;
-  reactIs_production_min$1.Portal = c3;
-  reactIs_production_min$1.Profiler = f;
-  reactIs_production_min$1.StrictMode = e3;
-  reactIs_production_min$1.Suspense = m4;
-  reactIs_production_min$1.SuspenseList = n2;
-  reactIs_production_min$1.isAsyncMode = function() {
+  reactIs_production_min$2.ContextConsumer = h3;
+  reactIs_production_min$2.ContextProvider = g2;
+  reactIs_production_min$2.Element = b3;
+  reactIs_production_min$2.ForwardRef = l;
+  reactIs_production_min$2.Fragment = d3;
+  reactIs_production_min$2.Lazy = q3;
+  reactIs_production_min$2.Memo = p;
+  reactIs_production_min$2.Portal = c3;
+  reactIs_production_min$2.Profiler = f;
+  reactIs_production_min$2.StrictMode = e3;
+  reactIs_production_min$2.Suspense = m4;
+  reactIs_production_min$2.SuspenseList = n2;
+  reactIs_production_min$2.isAsyncMode = function() {
     return false;
   };
-  reactIs_production_min$1.isConcurrentMode = function() {
+  reactIs_production_min$2.isConcurrentMode = function() {
     return false;
   };
-  reactIs_production_min$1.isContextConsumer = function(a3) {
+  reactIs_production_min$2.isContextConsumer = function(a3) {
     return v2(a3) === h3;
   };
-  reactIs_production_min$1.isContextProvider = function(a3) {
+  reactIs_production_min$2.isContextProvider = function(a3) {
     return v2(a3) === g2;
   };
-  reactIs_production_min$1.isElement = function(a3) {
+  reactIs_production_min$2.isElement = function(a3) {
     return "object" === typeof a3 && null !== a3 && a3.$$typeof === b3;
   };
-  reactIs_production_min$1.isForwardRef = function(a3) {
+  reactIs_production_min$2.isForwardRef = function(a3) {
     return v2(a3) === l;
   };
-  reactIs_production_min$1.isFragment = function(a3) {
+  reactIs_production_min$2.isFragment = function(a3) {
     return v2(a3) === d3;
   };
-  reactIs_production_min$1.isLazy = function(a3) {
+  reactIs_production_min$2.isLazy = function(a3) {
     return v2(a3) === q3;
   };
-  reactIs_production_min$1.isMemo = function(a3) {
+  reactIs_production_min$2.isMemo = function(a3) {
     return v2(a3) === p;
   };
-  reactIs_production_min$1.isPortal = function(a3) {
+  reactIs_production_min$2.isPortal = function(a3) {
     return v2(a3) === c3;
   };
-  reactIs_production_min$1.isProfiler = function(a3) {
+  reactIs_production_min$2.isProfiler = function(a3) {
     return v2(a3) === f;
   };
-  reactIs_production_min$1.isStrictMode = function(a3) {
+  reactIs_production_min$2.isStrictMode = function(a3) {
     return v2(a3) === e3;
   };
-  reactIs_production_min$1.isSuspense = function(a3) {
+  reactIs_production_min$2.isSuspense = function(a3) {
     return v2(a3) === m4;
   };
-  reactIs_production_min$1.isSuspenseList = function(a3) {
+  reactIs_production_min$2.isSuspenseList = function(a3) {
     return v2(a3) === n2;
   };
-  reactIs_production_min$1.isValidElementType = function(a3) {
+  reactIs_production_min$2.isValidElementType = function(a3) {
     return "string" === typeof a3 || "function" === typeof a3 || a3 === d3 || a3 === f || a3 === e3 || a3 === m4 || a3 === n2 || a3 === t3 || "object" === typeof a3 && null !== a3 && (a3.$$typeof === q3 || a3.$$typeof === p || a3.$$typeof === g2 || a3.$$typeof === h3 || a3.$$typeof === l || a3.$$typeof === u2 || void 0 !== a3.getModuleId) ? true : false;
   };
-  reactIs_production_min$1.typeOf = v2;
-  return reactIs_production_min$1;
+  reactIs_production_min$2.typeOf = v2;
+  return reactIs_production_min$2;
 }
-var reactIs_development$1 = {};
-var hasRequiredReactIs_development$1;
-function requireReactIs_development$1() {
-  if (hasRequiredReactIs_development$1) return reactIs_development$1;
-  hasRequiredReactIs_development$1 = 1;
+var reactIs_development$2 = {};
+var hasRequiredReactIs_development$2;
+function requireReactIs_development$2() {
+  if (hasRequiredReactIs_development$2) return reactIs_development$2;
+  hasRequiredReactIs_development$2 = 1;
   var define_process_env_default2 = {};
   /**
    * @license React
@@ -43927,51 +43922,51 @@ function requireReactIs_development$1() {
       function isSuspenseList(object4) {
         return typeOf(object4) === REACT_SUSPENSE_LIST_TYPE;
       }
-      reactIs_development$1.ContextConsumer = ContextConsumer;
-      reactIs_development$1.ContextProvider = ContextProvider;
-      reactIs_development$1.Element = Element3;
-      reactIs_development$1.ForwardRef = ForwardRef;
-      reactIs_development$1.Fragment = Fragment;
-      reactIs_development$1.Lazy = Lazy;
-      reactIs_development$1.Memo = Memo;
-      reactIs_development$1.Portal = Portal2;
-      reactIs_development$1.Profiler = Profiler;
-      reactIs_development$1.StrictMode = StrictMode;
-      reactIs_development$1.Suspense = Suspense2;
-      reactIs_development$1.SuspenseList = SuspenseList;
-      reactIs_development$1.isAsyncMode = isAsyncMode;
-      reactIs_development$1.isConcurrentMode = isConcurrentMode;
-      reactIs_development$1.isContextConsumer = isContextConsumer;
-      reactIs_development$1.isContextProvider = isContextProvider;
-      reactIs_development$1.isElement = isElement2;
-      reactIs_development$1.isForwardRef = isForwardRef;
-      reactIs_development$1.isFragment = isFragment2;
-      reactIs_development$1.isLazy = isLazy;
-      reactIs_development$1.isMemo = isMemo;
-      reactIs_development$1.isPortal = isPortal;
-      reactIs_development$1.isProfiler = isProfiler;
-      reactIs_development$1.isStrictMode = isStrictMode;
-      reactIs_development$1.isSuspense = isSuspense;
-      reactIs_development$1.isSuspenseList = isSuspenseList;
-      reactIs_development$1.isValidElementType = isValidElementType;
-      reactIs_development$1.typeOf = typeOf;
+      reactIs_development$2.ContextConsumer = ContextConsumer;
+      reactIs_development$2.ContextProvider = ContextProvider;
+      reactIs_development$2.Element = Element3;
+      reactIs_development$2.ForwardRef = ForwardRef;
+      reactIs_development$2.Fragment = Fragment;
+      reactIs_development$2.Lazy = Lazy;
+      reactIs_development$2.Memo = Memo;
+      reactIs_development$2.Portal = Portal2;
+      reactIs_development$2.Profiler = Profiler;
+      reactIs_development$2.StrictMode = StrictMode;
+      reactIs_development$2.Suspense = Suspense2;
+      reactIs_development$2.SuspenseList = SuspenseList;
+      reactIs_development$2.isAsyncMode = isAsyncMode;
+      reactIs_development$2.isConcurrentMode = isConcurrentMode;
+      reactIs_development$2.isContextConsumer = isContextConsumer;
+      reactIs_development$2.isContextProvider = isContextProvider;
+      reactIs_development$2.isElement = isElement2;
+      reactIs_development$2.isForwardRef = isForwardRef;
+      reactIs_development$2.isFragment = isFragment2;
+      reactIs_development$2.isLazy = isLazy;
+      reactIs_development$2.isMemo = isMemo;
+      reactIs_development$2.isPortal = isPortal;
+      reactIs_development$2.isProfiler = isProfiler;
+      reactIs_development$2.isStrictMode = isStrictMode;
+      reactIs_development$2.isSuspense = isSuspense;
+      reactIs_development$2.isSuspenseList = isSuspenseList;
+      reactIs_development$2.isValidElementType = isValidElementType;
+      reactIs_development$2.typeOf = typeOf;
     })();
   }
-  return reactIs_development$1;
+  return reactIs_development$2;
 }
-var hasRequiredReactIs$1;
-function requireReactIs$1() {
-  if (hasRequiredReactIs$1) return reactIs$1.exports;
-  hasRequiredReactIs$1 = 1;
+var hasRequiredReactIs$2;
+function requireReactIs$2() {
+  if (hasRequiredReactIs$2) return reactIs$2.exports;
+  hasRequiredReactIs$2 = 1;
   var define_process_env_default2 = {};
   if (define_process_env_default2.NODE_ENV === "production") {
-    reactIs$1.exports = requireReactIs_production_min$1();
+    reactIs$2.exports = requireReactIs_production_min$2();
   } else {
-    reactIs$1.exports = requireReactIs_development$1();
+    reactIs$2.exports = requireReactIs_development$2();
   }
-  return reactIs$1.exports;
+  return reactIs$2.exports;
 }
-var reactIsExports = requireReactIs$1();
+var reactIsExports$1 = requireReactIs$2();
 function useMemo$1(getValue2, condition, shouldUpdate) {
   var cacheRef = React.useRef({});
   if (!("value" in cacheRef.current) || shouldUpdate(cacheRef.current.condition, condition)) {
@@ -44022,11 +44017,11 @@ var supportRef = function supportRef2(nodeOrComponent) {
   if (isReactElement$2(nodeOrComponent) && ReactMajorVersion >= 19) {
     return true;
   }
-  var type5 = reactIsExports.isMemo(nodeOrComponent) ? nodeOrComponent.type.type : nodeOrComponent.type;
-  if (typeof type5 === "function" && !((_type$prototype = type5.prototype) !== null && _type$prototype !== void 0 && _type$prototype.render) && type5.$$typeof !== reactIsExports.ForwardRef) {
+  var type5 = reactIsExports$1.isMemo(nodeOrComponent) ? nodeOrComponent.type.type : nodeOrComponent.type;
+  if (typeof type5 === "function" && !((_type$prototype = type5.prototype) !== null && _type$prototype !== void 0 && _type$prototype.render) && type5.$$typeof !== reactIsExports$1.ForwardRef) {
     return false;
   }
-  if (typeof nodeOrComponent === "function" && !((_nodeOrComponent$prot = nodeOrComponent.prototype) !== null && _nodeOrComponent$prot !== void 0 && _nodeOrComponent$prot.render) && nodeOrComponent.$$typeof !== reactIsExports.ForwardRef) {
+  if (typeof nodeOrComponent === "function" && !((_nodeOrComponent$prot = nodeOrComponent.prototype) !== null && _nodeOrComponent$prot !== void 0 && _nodeOrComponent$prot.render) && nodeOrComponent.$$typeof !== reactIsExports$1.ForwardRef) {
     return false;
   }
   return true;
@@ -76413,6 +76408,317 @@ function requireCopyToClipboard() {
 }
 var copyToClipboardExports = requireCopyToClipboard();
 const copy$1 = /* @__PURE__ */ getDefaultExportFromCjs(copyToClipboardExports);
+var reactIs$1 = { exports: {} };
+var reactIs_production_min$1 = {};
+/**
+ * @license React
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var hasRequiredReactIs_production_min$1;
+function requireReactIs_production_min$1() {
+  if (hasRequiredReactIs_production_min$1) return reactIs_production_min$1;
+  hasRequiredReactIs_production_min$1 = 1;
+  var b3 = Symbol.for("react.element"), c3 = Symbol.for("react.portal"), d3 = Symbol.for("react.fragment"), e3 = Symbol.for("react.strict_mode"), f = Symbol.for("react.profiler"), g2 = Symbol.for("react.provider"), h3 = Symbol.for("react.context"), k2 = Symbol.for("react.server_context"), l = Symbol.for("react.forward_ref"), m4 = Symbol.for("react.suspense"), n2 = Symbol.for("react.suspense_list"), p = Symbol.for("react.memo"), q3 = Symbol.for("react.lazy"), t3 = Symbol.for("react.offscreen"), u2;
+  u2 = Symbol.for("react.module.reference");
+  function v2(a3) {
+    if ("object" === typeof a3 && null !== a3) {
+      var r2 = a3.$$typeof;
+      switch (r2) {
+        case b3:
+          switch (a3 = a3.type, a3) {
+            case d3:
+            case f:
+            case e3:
+            case m4:
+            case n2:
+              return a3;
+            default:
+              switch (a3 = a3 && a3.$$typeof, a3) {
+                case k2:
+                case h3:
+                case l:
+                case q3:
+                case p:
+                case g2:
+                  return a3;
+                default:
+                  return r2;
+              }
+          }
+        case c3:
+          return r2;
+      }
+    }
+  }
+  reactIs_production_min$1.ContextConsumer = h3;
+  reactIs_production_min$1.ContextProvider = g2;
+  reactIs_production_min$1.Element = b3;
+  reactIs_production_min$1.ForwardRef = l;
+  reactIs_production_min$1.Fragment = d3;
+  reactIs_production_min$1.Lazy = q3;
+  reactIs_production_min$1.Memo = p;
+  reactIs_production_min$1.Portal = c3;
+  reactIs_production_min$1.Profiler = f;
+  reactIs_production_min$1.StrictMode = e3;
+  reactIs_production_min$1.Suspense = m4;
+  reactIs_production_min$1.SuspenseList = n2;
+  reactIs_production_min$1.isAsyncMode = function() {
+    return false;
+  };
+  reactIs_production_min$1.isConcurrentMode = function() {
+    return false;
+  };
+  reactIs_production_min$1.isContextConsumer = function(a3) {
+    return v2(a3) === h3;
+  };
+  reactIs_production_min$1.isContextProvider = function(a3) {
+    return v2(a3) === g2;
+  };
+  reactIs_production_min$1.isElement = function(a3) {
+    return "object" === typeof a3 && null !== a3 && a3.$$typeof === b3;
+  };
+  reactIs_production_min$1.isForwardRef = function(a3) {
+    return v2(a3) === l;
+  };
+  reactIs_production_min$1.isFragment = function(a3) {
+    return v2(a3) === d3;
+  };
+  reactIs_production_min$1.isLazy = function(a3) {
+    return v2(a3) === q3;
+  };
+  reactIs_production_min$1.isMemo = function(a3) {
+    return v2(a3) === p;
+  };
+  reactIs_production_min$1.isPortal = function(a3) {
+    return v2(a3) === c3;
+  };
+  reactIs_production_min$1.isProfiler = function(a3) {
+    return v2(a3) === f;
+  };
+  reactIs_production_min$1.isStrictMode = function(a3) {
+    return v2(a3) === e3;
+  };
+  reactIs_production_min$1.isSuspense = function(a3) {
+    return v2(a3) === m4;
+  };
+  reactIs_production_min$1.isSuspenseList = function(a3) {
+    return v2(a3) === n2;
+  };
+  reactIs_production_min$1.isValidElementType = function(a3) {
+    return "string" === typeof a3 || "function" === typeof a3 || a3 === d3 || a3 === f || a3 === e3 || a3 === m4 || a3 === n2 || a3 === t3 || "object" === typeof a3 && null !== a3 && (a3.$$typeof === q3 || a3.$$typeof === p || a3.$$typeof === g2 || a3.$$typeof === h3 || a3.$$typeof === l || a3.$$typeof === u2 || void 0 !== a3.getModuleId) ? true : false;
+  };
+  reactIs_production_min$1.typeOf = v2;
+  return reactIs_production_min$1;
+}
+var reactIs_development$1 = {};
+var hasRequiredReactIs_development$1;
+function requireReactIs_development$1() {
+  if (hasRequiredReactIs_development$1) return reactIs_development$1;
+  hasRequiredReactIs_development$1 = 1;
+  var define_process_env_default2 = {};
+  /**
+   * @license React
+   * react-is.development.js
+   *
+   * Copyright (c) Facebook, Inc. and its affiliates.
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE file in the root directory of this source tree.
+   */
+  if (define_process_env_default2.NODE_ENV !== "production") {
+    (function() {
+      var REACT_ELEMENT_TYPE = Symbol.for("react.element");
+      var REACT_PORTAL_TYPE = Symbol.for("react.portal");
+      var REACT_FRAGMENT_TYPE2 = Symbol.for("react.fragment");
+      var REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode");
+      var REACT_PROFILER_TYPE = Symbol.for("react.profiler");
+      var REACT_PROVIDER_TYPE = Symbol.for("react.provider");
+      var REACT_CONTEXT_TYPE = Symbol.for("react.context");
+      var REACT_SERVER_CONTEXT_TYPE = Symbol.for("react.server_context");
+      var REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref");
+      var REACT_SUSPENSE_TYPE = Symbol.for("react.suspense");
+      var REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list");
+      var REACT_MEMO_TYPE = Symbol.for("react.memo");
+      var REACT_LAZY_TYPE = Symbol.for("react.lazy");
+      var REACT_OFFSCREEN_TYPE = Symbol.for("react.offscreen");
+      var enableScopeAPI = false;
+      var enableCacheElement = false;
+      var enableTransitionTracing = false;
+      var enableLegacyHidden = false;
+      var enableDebugTracing = false;
+      var REACT_MODULE_REFERENCE;
+      {
+        REACT_MODULE_REFERENCE = Symbol.for("react.module.reference");
+      }
+      function isValidElementType(type5) {
+        if (typeof type5 === "string" || typeof type5 === "function") {
+          return true;
+        }
+        if (type5 === REACT_FRAGMENT_TYPE2 || type5 === REACT_PROFILER_TYPE || enableDebugTracing || type5 === REACT_STRICT_MODE_TYPE || type5 === REACT_SUSPENSE_TYPE || type5 === REACT_SUSPENSE_LIST_TYPE || enableLegacyHidden || type5 === REACT_OFFSCREEN_TYPE || enableScopeAPI || enableCacheElement || enableTransitionTracing) {
+          return true;
+        }
+        if (typeof type5 === "object" && type5 !== null) {
+          if (type5.$$typeof === REACT_LAZY_TYPE || type5.$$typeof === REACT_MEMO_TYPE || type5.$$typeof === REACT_PROVIDER_TYPE || type5.$$typeof === REACT_CONTEXT_TYPE || type5.$$typeof === REACT_FORWARD_REF_TYPE || // This needs to include all possible module reference object
+          // types supported by any Flight configuration anywhere since
+          // we don't know which Flight build this will end up being used
+          // with.
+          type5.$$typeof === REACT_MODULE_REFERENCE || type5.getModuleId !== void 0) {
+            return true;
+          }
+        }
+        return false;
+      }
+      function typeOf(object4) {
+        if (typeof object4 === "object" && object4 !== null) {
+          var $$typeof = object4.$$typeof;
+          switch ($$typeof) {
+            case REACT_ELEMENT_TYPE:
+              var type5 = object4.type;
+              switch (type5) {
+                case REACT_FRAGMENT_TYPE2:
+                case REACT_PROFILER_TYPE:
+                case REACT_STRICT_MODE_TYPE:
+                case REACT_SUSPENSE_TYPE:
+                case REACT_SUSPENSE_LIST_TYPE:
+                  return type5;
+                default:
+                  var $$typeofType = type5 && type5.$$typeof;
+                  switch ($$typeofType) {
+                    case REACT_SERVER_CONTEXT_TYPE:
+                    case REACT_CONTEXT_TYPE:
+                    case REACT_FORWARD_REF_TYPE:
+                    case REACT_LAZY_TYPE:
+                    case REACT_MEMO_TYPE:
+                    case REACT_PROVIDER_TYPE:
+                      return $$typeofType;
+                    default:
+                      return $$typeof;
+                  }
+              }
+            case REACT_PORTAL_TYPE:
+              return $$typeof;
+          }
+        }
+        return void 0;
+      }
+      var ContextConsumer = REACT_CONTEXT_TYPE;
+      var ContextProvider = REACT_PROVIDER_TYPE;
+      var Element3 = REACT_ELEMENT_TYPE;
+      var ForwardRef = REACT_FORWARD_REF_TYPE;
+      var Fragment = REACT_FRAGMENT_TYPE2;
+      var Lazy = REACT_LAZY_TYPE;
+      var Memo = REACT_MEMO_TYPE;
+      var Portal2 = REACT_PORTAL_TYPE;
+      var Profiler = REACT_PROFILER_TYPE;
+      var StrictMode = REACT_STRICT_MODE_TYPE;
+      var Suspense2 = REACT_SUSPENSE_TYPE;
+      var SuspenseList = REACT_SUSPENSE_LIST_TYPE;
+      var hasWarnedAboutDeprecatedIsAsyncMode = false;
+      var hasWarnedAboutDeprecatedIsConcurrentMode = false;
+      function isAsyncMode(object4) {
+        {
+          if (!hasWarnedAboutDeprecatedIsAsyncMode) {
+            hasWarnedAboutDeprecatedIsAsyncMode = true;
+            console["warn"]("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 18+.");
+          }
+        }
+        return false;
+      }
+      function isConcurrentMode(object4) {
+        {
+          if (!hasWarnedAboutDeprecatedIsConcurrentMode) {
+            hasWarnedAboutDeprecatedIsConcurrentMode = true;
+            console["warn"]("The ReactIs.isConcurrentMode() alias has been deprecated, and will be removed in React 18+.");
+          }
+        }
+        return false;
+      }
+      function isContextConsumer(object4) {
+        return typeOf(object4) === REACT_CONTEXT_TYPE;
+      }
+      function isContextProvider(object4) {
+        return typeOf(object4) === REACT_PROVIDER_TYPE;
+      }
+      function isElement2(object4) {
+        return typeof object4 === "object" && object4 !== null && object4.$$typeof === REACT_ELEMENT_TYPE;
+      }
+      function isForwardRef(object4) {
+        return typeOf(object4) === REACT_FORWARD_REF_TYPE;
+      }
+      function isFragment2(object4) {
+        return typeOf(object4) === REACT_FRAGMENT_TYPE2;
+      }
+      function isLazy(object4) {
+        return typeOf(object4) === REACT_LAZY_TYPE;
+      }
+      function isMemo(object4) {
+        return typeOf(object4) === REACT_MEMO_TYPE;
+      }
+      function isPortal(object4) {
+        return typeOf(object4) === REACT_PORTAL_TYPE;
+      }
+      function isProfiler(object4) {
+        return typeOf(object4) === REACT_PROFILER_TYPE;
+      }
+      function isStrictMode(object4) {
+        return typeOf(object4) === REACT_STRICT_MODE_TYPE;
+      }
+      function isSuspense(object4) {
+        return typeOf(object4) === REACT_SUSPENSE_TYPE;
+      }
+      function isSuspenseList(object4) {
+        return typeOf(object4) === REACT_SUSPENSE_LIST_TYPE;
+      }
+      reactIs_development$1.ContextConsumer = ContextConsumer;
+      reactIs_development$1.ContextProvider = ContextProvider;
+      reactIs_development$1.Element = Element3;
+      reactIs_development$1.ForwardRef = ForwardRef;
+      reactIs_development$1.Fragment = Fragment;
+      reactIs_development$1.Lazy = Lazy;
+      reactIs_development$1.Memo = Memo;
+      reactIs_development$1.Portal = Portal2;
+      reactIs_development$1.Profiler = Profiler;
+      reactIs_development$1.StrictMode = StrictMode;
+      reactIs_development$1.Suspense = Suspense2;
+      reactIs_development$1.SuspenseList = SuspenseList;
+      reactIs_development$1.isAsyncMode = isAsyncMode;
+      reactIs_development$1.isConcurrentMode = isConcurrentMode;
+      reactIs_development$1.isContextConsumer = isContextConsumer;
+      reactIs_development$1.isContextProvider = isContextProvider;
+      reactIs_development$1.isElement = isElement2;
+      reactIs_development$1.isForwardRef = isForwardRef;
+      reactIs_development$1.isFragment = isFragment2;
+      reactIs_development$1.isLazy = isLazy;
+      reactIs_development$1.isMemo = isMemo;
+      reactIs_development$1.isPortal = isPortal;
+      reactIs_development$1.isProfiler = isProfiler;
+      reactIs_development$1.isStrictMode = isStrictMode;
+      reactIs_development$1.isSuspense = isSuspense;
+      reactIs_development$1.isSuspenseList = isSuspenseList;
+      reactIs_development$1.isValidElementType = isValidElementType;
+      reactIs_development$1.typeOf = typeOf;
+    })();
+  }
+  return reactIs_development$1;
+}
+var hasRequiredReactIs$1;
+function requireReactIs$1() {
+  if (hasRequiredReactIs$1) return reactIs$1.exports;
+  hasRequiredReactIs$1 = 1;
+  var define_process_env_default2 = {};
+  if (define_process_env_default2.NODE_ENV === "production") {
+    reactIs$1.exports = requireReactIs_production_min$1();
+  } else {
+    reactIs$1.exports = requireReactIs_development$1();
+  }
+  return reactIs$1.exports;
+}
+var reactIsExports = requireReactIs$1();
 function stylis_min(W2) {
   function M4(d3, c3, e3, h3, a3) {
     for (var m4 = 0, b3 = 0, v2 = 0, n2 = 0, q3, g2, x3 = 0, K3 = 0, k2, u2 = k2 = q3 = 0, l = 0, r2 = 0, I3 = 0, t3 = 0, B4 = e3.length, J2 = B4 - 1, y4, f = "", p = "", F3 = "", G4 = "", C2; l < B4; ) {
@@ -78108,38 +78414,33 @@ const ShowAlertTrigger = {
 };
 const ResetStateVarTrigger = {
   type: TriggerStepType.RESET_STATE_VAR,
-  async execute(context2, _step) {
-    if (_step.state === void 0) {
+  async execute(context2, step) {
+    if (step.state === void 0) {
       return;
     }
-    const step = _step;
     context2.rootStore.entityManager.runCode({
       scopeId: context2.scopeId,
       name: context2.name,
-      func: (state, step2) => state[step2.state.name].value = state[step2.state.name].defaultValue,
-      args: [step]
+      func: () => {
+        var _a2;
+        return (_a2 = step.state) == null ? void 0 : _a2.set(step.state.defaultValue);
+      },
+      args: []
     });
   },
   create(stateVar) {
-    const meta = getBindingIdentifier(stateVar);
-    const state = meta ? {
-      name: meta.entityName,
-      scopeId: stateVar == null ? void 0 : stateVar.scopeId,
-      scope: stateVar == null ? void 0 : stateVar.scope
-    } : void 0;
     return {
       type: TriggerStepType.RESET_STATE_VAR,
-      state
+      state: stateVar
     };
   }
 };
 const SetStateVarTrigger = {
   type: TriggerStepType.SET_STATE_VAR,
-  async execute(context2, _step) {
-    if (_step.state === void 0) {
+  async execute(context2, step) {
+    if (step.state === void 0) {
       return;
     }
-    const step = _step;
     const value = context2.rootStore.entityManager.computeValue({
       scopeId: context2.scopeId,
       name: context2.name,
@@ -78148,22 +78449,18 @@ const SetStateVarTrigger = {
     context2.rootStore.entityManager.runCode({
       scopeId: context2.scopeId,
       name: context2.name,
-      func: (state, value2, step2) => {
+      func: (state, value2) => {
+        var _a2;
         if (!state) return;
-        state[step2.state.name].value = value2;
+        (_a2 = step.state) == null ? void 0 : _a2.set(value2);
       },
-      args: [value, step]
+      args: [value]
     });
   },
   create(stateVar, value) {
-    const meta = getBindingIdentifier(stateVar);
     return {
       type: TriggerStepType.SET_STATE_VAR,
-      state: meta ? {
-        name: meta.entityName,
-        scopeId: stateVar == null ? void 0 : stateVar.scopeId,
-        scope: stateVar == null ? void 0 : stateVar.scope
-      } : void 0,
+      state: stateVar,
       value
     };
   }
@@ -82444,6 +82741,18 @@ const VALIDATORS = {
     }
   }
 };
+function mergeRelations(existingRelations, relations) {
+  if (!existingRelations || existingRelations.length === 0) {
+    return relations;
+  }
+  if (!relations || relations.length === 0) {
+    return existingRelations;
+  }
+  const mergedRelations = existingRelations && existingRelations.length > 0 ? existingRelations.flatMap(
+    (existing) => relations.map((relation) => [...existing, ...relation])
+  ) : relations;
+  return mergedRelations;
+}
 function getChildren(input, path2, entity, scopedState) {
   function getChildrenFromSection(section) {
     return Object.keys(section.props).reduce(
@@ -82880,6 +83189,16 @@ class UnionProp extends Prop {
   getProps() {
     const sharedKeys = Object.keys(this.shared);
     const variants = this.variants;
+    const preMergeRelationsMap = variants.reduce(
+      (acc, v2) => {
+        Object.entries(v2).forEach(([key2, prop]) => {
+          if (acc[key2]) return;
+          acc[key2] = prop.getRelations() ?? [];
+        });
+        return acc;
+      },
+      {}
+    );
     const mergedVariants = variants.reduce(
       (acc, v2) => {
         const variantConstants = Object.entries(v2).filter(
@@ -82893,9 +83212,18 @@ class UnionProp extends Prop {
         });
         const filteredVariant = Object.fromEntries(
           Object.entries(v2).filter(([key2]) => !sharedKeys.includes(key2)).map(([key2, prop]) => {
-            var _a2;
-            const existingRelations = ((_a2 = acc[key2]) == null ? void 0 : _a2.getRelations()) ?? [];
-            return [key2, prop.dependsOn([...existingRelations, relations])];
+            const existingRelations = (prop == null ? void 0 : prop.getRelations()) ?? [];
+            const preMergeRelations = preMergeRelationsMap[key2];
+            const existingNonPreMergeRelations = existingRelations.filter(
+              (r2) => !preMergeRelations.some((p) => p === r2)
+            );
+            return [
+              key2,
+              prop.dependsOn([
+                ...existingNonPreMergeRelations,
+                ...mergeRelations(preMergeRelations, [relations])
+              ])
+            ];
           })
         );
         return { ...acc, ...filteredVariant };
@@ -83167,6 +83495,35 @@ function requireRfdc() {
 var rfdcExports = requireRfdc();
 const clone$3 = /* @__PURE__ */ getDefaultExportFromCjs(rfdcExports);
 const fastClone$1 = clone$3({});
+let internalStores = {};
+const SUPPORTED_MODES = ["local-dev"];
+function registerStores(stores) {
+  internalStores = { ...internalStores, ...stores };
+  if (SUPPORTED_MODES.includes("production")) {
+    if (Object.keys(internalStores).length === Object.keys(stores).length) {
+      import("./devtools-consolidated-CuKf4Mw6.js").then(({ initializeCustomDevTools, setRegisteredStores }) => {
+        setRegisteredStores(internalStores);
+        initializeCustomDevTools();
+      }).catch((error) => {
+        console.warn(
+          "[DevTools] Failed to initialize custom devtools:",
+          error
+        );
+      });
+    }
+  }
+}
+const DevToolsInternal = React__default.lazy(() => {
+  return import("./devtools-consolidated-CuKf4Mw6.js").then((module2) => ({
+    default: module2.CustomDevTools
+  }));
+});
+const DevTools = () => {
+  if (!SUPPORTED_MODES.includes("production")) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntimeExports.jsx(DevToolsInternal, {}) });
+};
 const ARGS_VAR_NAME = "$SB_args";
 const USER_JS_CODE_VAR_NAME = "$SB_userJSCode";
 const SNAPSHOT_VAR_NAME = "$SB_snapshot";
@@ -83508,11 +83865,11 @@ class SbEventFlow {
       EventRegistry.controlSlideout.create(slideoutId, action2)
     );
   }
-  static controlModal(modalId, action2) {
-    return SbEventFlow.start().controlModal(modalId, action2);
+  static controlModal(modal, action2) {
+    return SbEventFlow.start().controlModal(modal, action2);
   }
-  controlModal(modalId, action2) {
-    return this.addStep(EventRegistry.controlModal.create(modalId, action2));
+  controlModal(modal, action2) {
+    return this.addStep(EventRegistry.controlModal.create(modal, action2));
   }
   static controlTimer(timerId, action2) {
     return SbEventFlow.start().controlTimer(timerId, action2);
@@ -83610,6 +83967,16 @@ class SbEventFlow {
       EventRegistry.triggerEvent.create(eventName, eventData)
     );
   }
+  static sequence(eventFlows) {
+    return SbEventFlow.start().sequence(eventFlows);
+  }
+  sequence(eventFlows) {
+    this.steps = [
+      ...this.steps,
+      ...eventFlows.flatMap((eventFlow) => eventFlow.build())
+    ];
+    return this;
+  }
   build() {
     return this.steps;
   }
@@ -85951,9 +86318,6 @@ class OperationManager {
     __publicField(this, "batchOperationTransactionId");
     __publicField(this, "visibleSourceIds", []);
     makeAutoObservable(this);
-    registerStores({
-      OperationManager: this
-    });
   }
   get allPendingTransactions() {
     return this.pendingTransactions;
@@ -86330,9 +86694,6 @@ class PropertiesPanelManager {
     makeAutoObservable(this, {
       _propertyLookupCache: false
     });
-    registerStores({
-      PropertiesPanelManager: this
-    });
   }
   getPropertiesPanel(scopeId, instanceId) {
     const props2 = this.entityManager.getEntityById(scopeId, instanceId);
@@ -86507,6 +86868,18 @@ function getPropertyValue$1({
     }
     return parsed;
   }
+  if (property.type === "EVENT" && scopeId && name) {
+    const eventFlows = property.value.map((step) => {
+      try {
+        return getSbEventFlow(step, scopeId);
+      } catch {
+        return void 0;
+      }
+    }).filter(
+      (eventFlow) => eventFlow !== void 0
+    );
+    return SbEventFlow.sequence(eventFlows);
+  }
   if (property.type === "STATIC" && typeof property.value === "object" && property.value !== null) {
     return Object.entries(property.value).reduce(
       (acc, [key2, value]) => {
@@ -86526,6 +86899,133 @@ function getPropertyValue$1({
   }
   return property.value;
 }
+function getSbEventFlow(step, scopeId) {
+  var _a2, _b2, _c2, _d2, _e2, _f2;
+  if (!isValidStepDef(step)) {
+    return void 0;
+  }
+  const getEntity = (entityName) => {
+    try {
+      const entity = rootStore.entityManager.getEntity(
+        scopeId,
+        getName(entityName)
+      );
+      if (entity)
+        return withBindingIdentifier(entity, {
+          entityName,
+          scopeId
+        });
+    } catch {
+      return void 0;
+    }
+  };
+  const getEntities = (entityNames) => {
+    return entityNames.map(getEntity).filter((entity) => entity !== void 0);
+  };
+  const createNestedEventFlow = (steps) => {
+    return Array.isArray(steps) && steps.length > 0 ? getSbEventFlow(steps, scopeId) : void 0;
+  };
+  switch (step.type) {
+    case "executeApi":
+      return SbEventFlow.runApis(
+        getEntities(step.apiNames),
+        createNestedEventFlow(step.onSuccess ?? []),
+        createNestedEventFlow(step.onError ?? [])
+      );
+    case "cancelApi":
+      return SbEventFlow.cancelApis(
+        getEntities(step.apiNames),
+        createNestedEventFlow(step.onCancel ?? [])
+      );
+    case "runJs":
+      return SbEventFlow.runJS(function(...args) {
+        if (step.code) {
+          try {
+            const cleanCode = step.code.trim().endsWith(";") ? step.code.slice(0, -1) : step.code;
+            new Function(`return (${cleanCode})()`).call(this, ...args);
+          } catch (e3) {
+            console.error("Error executing JS code:", e3);
+          }
+        }
+      });
+    case "navigateTo":
+      return SbEventFlow.navigateTo({
+        url: step.url,
+        newWindow: step.newWindow
+      });
+    case "navigateToApp":
+      return SbEventFlow.navigateToApp(step.targetApp.id);
+    case "navigateToRoute":
+      return SbEventFlow.navigateToRoute(step.routeId);
+    case "setQueryParams":
+      return SbEventFlow.setQueryParams(
+        step.queryParams ? JSON.parse(step.queryParams) : {},
+        step.keepQueryParams
+      );
+    case "controlSlideout": {
+      const slideoutEntity = getEntity(step.name);
+      if (!slideoutEntity) return void 0;
+      return SbEventFlow.controlSlideout(step.name, step.direction);
+    }
+    case "controlModal": {
+      const modalEntity = getEntity(step.name);
+      if (!modalEntity) return void 0;
+      return SbEventFlow.controlModal(modalEntity, step.direction);
+    }
+    case "controlTimer": {
+      const timerEntity = getEntity(step.name);
+      if (!timerEntity) return void 0;
+      return SbEventFlow.controlTimer(step.name, step.command);
+    }
+    case "setStateVar": {
+      const stateEntity = getEntity((_a2 = step.state) == null ? void 0 : _a2.name);
+      if (!stateEntity) return void 0;
+      const value = isPropertyInfo(step.value) ? getPropertyValue$1({
+        property: step.value,
+        scopeId,
+        name: getName((_b2 = step.state) == null ? void 0 : _b2.name)
+      }) : step.value;
+      return SbEventFlow.setStateVar(stateEntity, value);
+    }
+    case "resetStateVar": {
+      const resetStateEntity = getEntity((_c2 = step.state) == null ? void 0 : _c2.name);
+      if (!resetStateEntity) return void 0;
+      return SbEventFlow.resetStateVar(resetStateEntity);
+    }
+    case "resetComponent": {
+      const resetWidgetEntity = getEntity((_d2 = step.widget) == null ? void 0 : _d2.name);
+      if (!resetWidgetEntity) return void 0;
+      return SbEventFlow.resetComponent(
+        step.widget,
+        step.propertyName,
+        step.resetChildren
+      );
+    }
+    case "setComponentProperty": {
+      const setWidgetEntity = getEntity((_e2 = step.widget) == null ? void 0 : _e2.name);
+      if (!setWidgetEntity) return void 0;
+      return SbEventFlow.setComponentProperty(
+        step.widget,
+        step.propertyName,
+        step.propertyValue
+      );
+    }
+    case "showAlert":
+      return SbEventFlow.showAlert(
+        step.message,
+        step.style,
+        step.alertDuration,
+        step.alertPosition
+      );
+    case "setProfile":
+      return SbEventFlow.setProfile(step.profileId, step.profileAction);
+    case "triggerEvent":
+      return SbEventFlow.triggerEvent((_f2 = step.event) == null ? void 0 : _f2.name, step.eventPayload);
+    default:
+      console.warn("Unhandled runtime step type", step.type);
+      return void 0;
+  }
+}
 const getNormalizedIdInfo = (params) => {
   var _a2, _b2;
   const name = (_a2 = params.bind) == null ? void 0 : _a2.entityName;
@@ -86540,6 +87040,21 @@ function isSbComponent(child) {
   var _a2;
   return typeof child === "object" && ((_a2 = child.type) == null ? void 0 : _a2.isSb) === superblocksComponentSymbol;
 }
+function getValidChildrenNodes(children) {
+  if (Array.isArray(children)) {
+    return children.filter(isValidReactNode);
+  }
+  if (isValidReactNode(children)) {
+    return [children];
+  }
+  return [];
+}
+function isValidReactNode(element) {
+  if (Array.isArray(element)) {
+    return element.every(isValidReactNode);
+  }
+  return React__default.isValidElement(element) || typeof element !== "object" || element === null;
+}
 class RuntimeWidgetsManager {
   constructor(nameManager) {
     __publicField(this, "widgets", {});
@@ -86553,9 +87068,6 @@ class RuntimeWidgetsManager {
       addWidgetFromPayload: action,
       sourceToInstanceIdSample: observable
     });
-    registerStores({
-      RuntimeManager: this
-    });
   }
   setWidgetMeta(instanceId, meta) {
     const existingMeta = this.widgets[instanceId];
@@ -86582,7 +87094,7 @@ class RuntimeWidgetsManager {
     const traverse = (params2) => {
       var _a2;
       const { props: props2, type: type5, parentInstanceId, node: node2, isSbComponent: isSbComponent$1, identifier: identifier2 } = params2;
-      const childrenArr = typeof props2.children === "function" ? [props2.children] : React__default.Children.toArray(props2.children);
+      const childrenArr = typeof props2.children === "function" ? [props2.children] : React__default.Children.toArray(getValidChildrenNodes(props2.children));
       const metaChildren = [];
       for (const child of childrenArr) {
         let childElement;
@@ -86756,7 +87268,7 @@ class RuntimeEntitiesManager {
       if (!meta) {
         return void 0;
       }
-      if (!this.hasEditOperationsPending) {
+      if (!this.hasEditOperationsPending()) {
         return meta;
       }
       const sourceId = meta.sourceId;
@@ -86903,9 +87415,8 @@ class RuntimeEntitiesManager {
     this.nameManager = nameManager;
     this.entityManager = entityManager;
     this.widgets = new RuntimeWidgetsManager(nameManager);
-    makeAutoObservable(this);
-    registerStores({
-      DeployedRuntimeManager: this
+    makeAutoObservable(this, {
+      widgets: false
     });
   }
   processRootWidget(params) {
@@ -87063,13 +87574,13 @@ class RuntimeEntitiesManager {
   }
   // TODO will need to include all other operations like
   // widget creation/deletion, etc.
-  get hasEditOperationsPending() {
+  hasEditOperationsPending() {
     const hasPendingOperations = getEditStore().operationManager.hasPendingOperations;
     const hasPendingResize = getEditStore().ui.resizing.hasAnyPendingResize;
     const shouldRezisePage = getEditStore().ui.dnd.shouldResizePage;
     return hasPendingOperations || hasPendingResize || shouldRezisePage;
   }
-  get getPendingOperations() {
+  getPendingOperations() {
     const pendingResizes = getEditStore().ui.resizing.pendingResizes;
     return [
       ...getEditStore().operationManager.allPendingTransactions,
@@ -87332,9 +87843,6 @@ class GridManager {
     this.root = root2;
     this.dnd = dnd;
     makeAutoObservable(this);
-    registerStores({
-      GridManager: this
-    });
   }
   get draggedInstanceId() {
     var _a2;
@@ -87855,9 +88363,6 @@ class StackManager {
     this.root = root2;
     this.dnd = dnd;
     makeAutoObservable(this);
-    registerStores({
-      StackManager: this
-    });
   }
   refreshPositionsAndGetDropIndex() {
     if (this.dnd.dropTargetId) {
@@ -87927,9 +88432,6 @@ class DragAndDropManager {
     this.stack = new StackManager(root2, this);
     this.grid = new GridManager(root2, this);
     makeAutoObservable(this);
-    registerStores({
-      DragAndDropManager: this
-    });
     startEditorSync({
       store: this,
       storeId: "dnd",
@@ -88170,9 +88672,6 @@ class ResizingManager {
     __publicField(this, "_activeResizes", /* @__PURE__ */ new Map());
     this.root = root2;
     makeAutoObservable(this);
-    registerStores({
-      ResizingManager: this
-    });
     startEditorSync({
       store: this,
       storeId: "resizing",
@@ -88507,9 +89006,6 @@ class UIStore {
       setFocusedInstanceId: action,
       selectWidget: action
     });
-    registerStores({
-      UIManager: this
-    });
   }
   // TODO (Alex): For these getters, we should differentiate between source and instance selection
   isSourceSelected(sourceId) {
@@ -90483,14 +90979,14 @@ function getLoaderFn$1(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-Bj9gR6m4.js"
+            "./allPathsLoader-DGPQhqI0.js"
           )];
         case 2:
           return [2, _b2.sent().allPathsLoader];
         case 3:
           return [4, import(
             /* webpackChunkName: "blueprint-icons-split-paths-by-size-loader" */
-            "./splitPathsBySizeLoader-K1ovXYr3.js"
+            "./splitPathsBySizeLoader-9ypptKho.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -99048,7 +99544,7 @@ const DEFAULT_TYPOGRAPHIES_NEW = {
   },
   buttonLabel: {
     ...DEFAULT_TYPOGRAPHIES_LEGACY.buttonLabel,
-    lineHeight: 1.1
+    lineHeight: 1.2
   },
   code: {
     ...DEFAULT_TYPOGRAPHIES_LEGACY.code,
@@ -99211,12 +99707,6 @@ const BOX_SHADOWS = {
     dark: "0 3px 6px -4px rgba(160, 160, 160, 0.03), 0 6px 16px 0 rgba(160, 160, 160, 0.01)"
   }
 };
-const BUTTON_PADDING = {
-  left: { mode: "px", value: 10 },
-  right: { mode: "px", value: 10 },
-  top: { mode: "px", value: 9 },
-  bottom: { mode: "px", value: 9 }
-};
 const INPUT_PADDING = {
   left: Dim.px(10),
   right: Dim.px(10),
@@ -99224,6 +99714,7 @@ const INPUT_PADDING = {
   bottom: Dim.px(8)
 };
 const DROPDOWN_PADDING = INPUT_PADDING;
+const BUTTON_PADDING = INPUT_PADDING;
 const KEY_VALUE_PADDING = {
   left: Dim.px(20),
   right: Dim.px(20),
@@ -99652,7 +100143,7 @@ const useStableEffect = (effect2, obj, options = {}) => {
         return isEqual2(val, old);
       }
     }
-    return val === old;
+    return Object.is(val, old);
   });
   const propRemoved = Object.keys(ref2.current).some((key2) => !(key2 in obj));
   if (propsChanged || propRemoved) {
@@ -100913,8 +101404,8 @@ const shineAnimation = We$1`
   }
 `;
 const Skeleton2 = qe$1.div`
-  width: 24px;
-  height: 24px;
+  height: var(--height);
+  width: var(--width);
   border-radius: 50%;
   background: linear-gradient(110deg, #ececec 10%, #f5f5f5 30%, #ececec 60%);
   background-size: 200% 100%;
@@ -111094,14 +111585,8 @@ const useStyleWithSize = (props2) => {
     {
       cold: true,
       customEqualChecks: [
-        [
-          isDimension,
-          (a3, b3) => a3.mode === b3.mode && a3.value === b3.value
-        ],
-        [
-          lodashExports.isObject,
-          (a3, b3) => lodashExports.isEqual(a3, b3)
-        ]
+        [isDimension, Dim.isEqual],
+        [lodashExports.isObject, (a3, b3) => lodashExports.isEqual(a3, b3)]
       ]
     }
   );
@@ -111146,7 +111631,7 @@ const ReactiveComponent = observer(function Component2({
     return stylePropWithSize;
   }, [reactiveProps.isVisible, stylePropWithSize]);
   const { setStyle, getFallbackStyle } = useComponentSuspenseStyle();
-  useMemo$2(() => {
+  useEffect(() => {
     setStyle(styleProp);
   }, [styleProp, setStyle]);
   const instanceIdProps = { [WIDGET_INSTANCE_ID_ATTRIBUTE]: instanceId };
@@ -115464,6 +115949,19 @@ const DroppableWidget = observer(
     return /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.Fragment, { children: props2.children });
   }
 );
+const EXTENDED_CLICKABLE_AREA_DELTA = 6;
+const EXTENDED_CLICKABLE_AREA_TYPES = ["SbButton"];
+const EXTENDED_CLICKABLE_ANCHOR_CSS = {
+  top: `calc(anchor(top) - ${EXTENDED_CLICKABLE_AREA_DELTA}px)`,
+  left: `calc(anchor(left) - ${EXTENDED_CLICKABLE_AREA_DELTA}px)`,
+  right: `calc(anchor(right) - ${EXTENDED_CLICKABLE_AREA_DELTA}px)`,
+  bottom: `calc(anchor(bottom) - ${EXTENDED_CLICKABLE_AREA_DELTA}px)`
+};
+const EXTENDED_CLICKABLE_ANCHOR_CLIP_PATH = `polygon(
+              0% 0%, 0% 100%, 100% 100%, 100% 0%,
+              0% 0%, ${EXTENDED_CLICKABLE_AREA_DELTA}px ${EXTENDED_CLICKABLE_AREA_DELTA}px, calc(100% - ${EXTENDED_CLICKABLE_AREA_DELTA}px) ${EXTENDED_CLICKABLE_AREA_DELTA}px, 
+              calc(100% - ${EXTENDED_CLICKABLE_AREA_DELTA}px) calc(100% - ${EXTENDED_CLICKABLE_AREA_DELTA}px), ${EXTENDED_CLICKABLE_AREA_DELTA}px calc(100% - ${EXTENDED_CLICKABLE_AREA_DELTA}px), ${EXTENDED_CLICKABLE_AREA_DELTA}px ${EXTENDED_CLICKABLE_AREA_DELTA}px
+            )`;
 function useRegisterSourceElement(sourceId) {
   const instanceIdRef = useRef(null);
   return useCallback(
@@ -117280,22 +117778,6 @@ const DraggableWrapper = (props2) => {
     }
   );
 };
-const getRepositionNamePill = (instanceId) => {
-  var _a2, _b2, _c2, _d2;
-  const parentInstanceId = (_a2 = getEditStore().runtimeEntitiesManager.getEditorWidgetMeta(
-    instanceId
-  )) == null ? void 0 : _a2.parentInstanceId;
-  const parentWidget = parentInstanceId ? getEditStore().runtimeEntitiesManager.getEditorWidgetMeta(
-    parentInstanceId
-  ) : void 0;
-  if ((parentWidget == null ? void 0 : parentWidget.type) === "SbPage") {
-    return ((_b2 = parentWidget == null ? void 0 : parentWidget.children) == null ? void 0 : _b2.length) === 1;
-  } else if ((parentWidget == null ? void 0 : parentWidget.type) === "SbSection") {
-    return ((_d2 = (_c2 = parentWidget == null ? void 0 : parentWidget.props) == null ? void 0 : _c2.height) == null ? void 0 : _d2.mode) === "fill";
-  } else {
-    return false;
-  }
-};
 const NamePillDiv = (params) => {
   const {
     attributes: attributes2 = {},
@@ -117307,7 +117789,6 @@ const NamePillDiv = (params) => {
     isVisible: isVisible2
   } = params;
   const { canResizeWidth: canResizeWidth2, canResizeHeight: canResizeHeight2 } = useResizeCapabilities(instanceId);
-  const repositionNamePill = getRepositionNamePill(instanceId);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -117331,13 +117812,7 @@ const NamePillDiv = (params) => {
         zIndex: Layers$1.namePill,
         display: "flex",
         alignItems: "center",
-        gap: "4px",
-        ...repositionNamePill ? {
-          top: "anchor(top)",
-          bottom: void 0,
-          marginTop: "3px",
-          marginRight: "3px"
-        } : {}
+        gap: "4px"
       },
       "data-sb-pill-id": instanceId,
       onClick: (ev) => {
@@ -117520,6 +117995,7 @@ const InteractionRect = (props2) => {
           left: "anchor(left)",
           right: "anchor(right)",
           bottom: "anchor(bottom)",
+          ...EXTENDED_CLICKABLE_AREA_TYPES.includes(type5 ?? "") && selectionType === "FOCUSED" ? EXTENDED_CLICKABLE_ANCHOR_CSS : {},
           visibility: isDragging ? "hidden" : "visible",
           anchorName: getWidgetRectAnchorName(instanceId),
           positionAnchor: getWidgetAnchorName(instanceId),
@@ -117567,7 +118043,27 @@ const selectDisplayNameAndVisibility = (instanceId) => {
   };
 };
 const calculateWidgetsAtCursor = (params) => {
-  const elements = document.elementsFromPoint(params.x, params.y);
+  let elements = document.elementsFromPoint(params.x, params.y);
+  if (params.delta) {
+    elements = [
+      ...document.elementsFromPoint(
+        params.x - params.delta.x,
+        params.y - params.delta.y
+      ),
+      ...document.elementsFromPoint(
+        params.x + params.delta.x,
+        params.y + params.delta.y
+      ),
+      ...document.elementsFromPoint(
+        params.x - params.delta.x,
+        params.y + params.delta.y
+      ),
+      ...document.elementsFromPoint(
+        params.x + params.delta.x,
+        params.y - params.delta.y
+      )
+    ];
+  }
   const hoveredPills = [];
   const hoveredActual = [];
   elements.forEach((element) => {
@@ -117589,6 +118085,30 @@ const calculateWidgetsAtCursor = (params) => {
     hoveredActual
   };
 };
+function getFocusedWidget(event, rootType, rootElement, editStore2, delta, types2) {
+  if (!rootElement) {
+    return null;
+  }
+  const { hoveredPills, hoveredActual } = calculateWidgetsAtCursor({
+    x: event.clientX,
+    y: event.clientY,
+    rootType,
+    rootElement,
+    delta
+  });
+  const instanceIds = [...hoveredPills, ...hoveredActual];
+  const focusedWidget = instanceIds.find((id2) => {
+    const widgetMeta = editStore2.runtimeEntitiesManager.getEditorWidgetMeta(id2);
+    const sourceIdInstanceCount = editStore2.interactionLayerManager.getSourceIdElements(
+      (widgetMeta == null ? void 0 : widgetMeta.sourceId) ?? ""
+    ).length;
+    return (types2 === void 0 || types2.includes((widgetMeta == null ? void 0 : widgetMeta.type) ?? "")) && (widgetMeta == null ? void 0 : widgetMeta.isSbComponent) && !(widgetMeta == null ? void 0 : widgetMeta.isInCustomComponent) && sourceIdInstanceCount <= 1;
+  }) ?? null;
+  if (focusedWidget) {
+    return focusedWidget;
+  }
+  return null;
+}
 function useWidgetHover(rootType) {
   useEffect(() => {
     const rootElement = document.getElementById(
@@ -117596,22 +118116,26 @@ function useWidgetHover(rootType) {
     );
     const editStore2 = getEditStore();
     const handleMouseMove = (event) => {
-      const { hoveredPills, hoveredActual } = calculateWidgetsAtCursor({
-        x: event.clientX,
-        y: event.clientY,
+      const focusedWidgetExtended = getFocusedWidget(
+        event,
         rootType,
-        rootElement
-      });
-      const instanceIds = [...hoveredPills, ...hoveredActual];
-      const focusedWidget = instanceIds.find((id2) => {
-        const widgetMeta = editStore2.runtimeEntitiesManager.getEditorWidgetMeta(id2);
-        const sourceIdInstanceCount = editStore2.interactionLayerManager.getSourceIdElements(
-          (widgetMeta == null ? void 0 : widgetMeta.sourceId) ?? ""
-        ).length;
-        return (widgetMeta == null ? void 0 : widgetMeta.isSbComponent) && !(widgetMeta == null ? void 0 : widgetMeta.isInCustomComponent) && sourceIdInstanceCount <= 1;
-      }) ?? null;
-      if (focusedWidget) {
-        editStore2.ui.setFocusedInstanceId(focusedWidget);
+        rootElement,
+        editStore2,
+        { x: EXTENDED_CLICKABLE_AREA_DELTA, y: EXTENDED_CLICKABLE_AREA_DELTA },
+        EXTENDED_CLICKABLE_AREA_TYPES
+      );
+      if (focusedWidgetExtended) {
+        editStore2.ui.setFocusedInstanceId(focusedWidgetExtended);
+      } else {
+        const focusedWidget = getFocusedWidget(
+          event,
+          rootType,
+          rootElement,
+          editStore2
+        );
+        if (focusedWidget) {
+          editStore2.ui.setFocusedInstanceId(focusedWidget);
+        }
       }
     };
     const throttledHandleMouseMove = throttle(handleMouseMove, 25);
@@ -117719,7 +118243,7 @@ const stableEffectOptions$1 = {
     /* isType, isEqual */
     [(a3) => isBindingString(a3), isBindingEqual],
     [(a3) => isName(a3), isNameEqual],
-    [(a3) => isDimension(a3), (a3, b3) => Dim.isEqual(a3, b3)],
+    [(a3) => isDimension(a3), Dim.isEqual],
     [(a3) => typeof a3 === "function", (a3, b3) => a3.toString() === b3.toString()],
     [(a3) => typeof a3 === "string", (a3, b3) => a3 === b3],
     [(a3) => typeof a3 === "object" && a3 !== null, (a3, b3) => _$2.isEqual(a3, b3)]
@@ -117852,6 +118376,24 @@ const EditWrapper = observer(function EditWrapper2(props2) {
   const scopeName = rootStore.entityManager.getScopeName(
     props2.identifier.scopeId
   );
+  const handleClick = (ev) => {
+    const sourceIdInstanceCount = editStore2.interactionLayerManager.getSourceIdElements(
+      props2.identifier.sourceId
+    ).length;
+    if (sourceIdInstanceCount > 1) {
+      return;
+    }
+    if (isInCustomComponent && customComponentInstanceId) {
+      editStore2.ui.selectWidget(customComponentInstanceId);
+      ev.stopPropagation();
+      return;
+    }
+    editStore2.ui.selectWidget(props2.identifier.instanceId);
+    ev.stopPropagation();
+  };
+  const expandedClickArea = EXTENDED_CLICKABLE_AREA_TYPES.includes(
+    (meta == null ? void 0 : meta.type) ?? ""
+  );
   const node2 = /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -117863,24 +118405,25 @@ const EditWrapper = observer(function EditWrapper2(props2) {
       "data-can-drop": props2.isDroppable,
       "data-selected": isSelected,
       "data-has-local-binding": hasLocalBinding,
+      onClick: handleClick,
       id: getEditWrapperId(props2.identifier.instanceId),
-      onClick: (ev) => {
-        const sourceIdInstanceCount = editStore2.interactionLayerManager.getSourceIdElements(
-          props2.identifier.sourceId
-        ).length;
-        if (sourceIdInstanceCount > 1) {
-          return;
-        }
-        if (isInCustomComponent && customComponentInstanceId) {
-          editStore2.ui.selectWidget(customComponentInstanceId);
-          ev.stopPropagation();
-          return;
-        }
-        editStore2.ui.selectWidget(props2.identifier.instanceId);
-        ev.stopPropagation();
-      },
       ref: registerSourceElement,
       children: [
+        expandedClickArea && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            onClick: handleClick,
+            style: {
+              position: "absolute",
+              ...EXTENDED_CLICKABLE_ANCHOR_CSS,
+              zIndex: 0,
+              pointerEvents: "auto",
+              overflow: "hidden",
+              positionAnchor: getWidgetAnchorName(identifier2.instanceId),
+              clipPath: EXTENDED_CLICKABLE_ANCHOR_CLIP_PATH
+            }
+          }
+        ),
         showVisibilityBackground && /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
@@ -118082,7 +118625,8 @@ const stableEffectOptions = {
     /* isType, isEqual */
     [(a3) => isBindingString(a3), isBindingEqual],
     [(a3) => isName(a3), isNameEqual],
-    [(a3) => isDimension(a3), (a3, b3) => Dim.isEqual(a3, b3)],
+    [(a3) => isDimension(a3), Dim.isEqual],
+    [(a3) => isObservable(a3), (a3, b3) => lodashExports.isEqual(a3, b3)],
     [(a3) => typeof a3 === "function", (a3, b3) => a3.toString() === b3.toString()],
     [(a3) => typeof a3 === "string", (a3, b3) => a3 === b3],
     [(a3) => typeof a3 === "object" && a3 !== null, (a3, b3) => lodashExports.isEqual(a3, b3)]
@@ -118125,7 +118669,7 @@ function useTrackRuntimeWidget(instanceId, params) {
       };
     }
     const editStore2 = getEditStore();
-    if (isEditing && editStore2.runtimeEntitiesManager.hasEditOperationsPending) {
+    if (isEditing && editStore2.runtimeEntitiesManager.hasEditOperationsPending()) {
       const meta = editStore2.runtimeEntitiesManager.getEditorWidgetMeta(instanceId);
       if (meta == null ? void 0 : meta.props) {
         const {
@@ -133545,7 +134089,7 @@ function requireRef() {
   ref.useComposeRef = ref.supportRef = ref.supportNodeRef = ref.getNodeRef = ref.fillRef = ref.composeRef = void 0;
   var _typeof2 = _interopRequireDefault(require_typeof());
   var _react = React__default;
-  var _reactIs = requireReactIs$1();
+  var _reactIs = requireReactIs$2();
   var _useMemo = _interopRequireDefault(requireUseMemo());
   var _isFragment = _interopRequireDefault(requireIsFragment());
   var ReactMajorVersion2 = Number(_react.version.split(".")[0]);
@@ -135336,20 +135880,31 @@ const textStyleProps = {
   })),
   cellBackground: cellBackgroundProp
 };
+const computedValueUnion = Prop.union({
+  shared: {
+    isDerived: Prop.boolean().default(false)
+  },
+  variants: [
+    {
+      isDerived: Prop.literal(false)
+    },
+    {
+      isDerived: Prop.literal(true),
+      computedValue: Prop.string().readAndWrite().propertiesPanel({
+        label: "Computed value"
+        // todo: add special control that can use currentRow
+      })
+    }
+  ]
+}).getProps();
 const textColumnProperties = {
   general: {
-    // TODO: bring this back when we are ready
-    // computedValue: Prop.string().readAndWrite().propertiesPanel({
-    //   label: "Computed value",
-    //   controlType: "COMPUTE_TABLE_VALUE",
-    // }),
     displayedValue: Prop.string().readAndWrite().propertiesPanel({
       label: "Displayed value",
       controlType: "COMPUTE_TABLE_VALUE"
     })
   },
   presentation: {
-    ...cellIconProps,
     textWrap: Prop.boolean().readAndWrite().propertiesPanel({
       label: "Wrap text",
       controlType: "SWITCH"
@@ -135439,11 +135994,6 @@ const buttonColumnProperties = {
 };
 const numberColumnProperties = {
   general: {
-    // TODO: bring this back when we are ready
-    // computedValue: Prop.string().readAndWrite().propertiesPanel({
-    //   label: "Computed value",
-    //   controlType: "COMPUTE_TABLE_VALUE",
-    // }),
     notation: Prop.string().readAndWrite().propertiesPanel({
       label: "Number format",
       controlType: "DROP_DOWN",
@@ -135547,6 +136097,32 @@ const imageColumnProperties = {
     cellBackground: cellBackgroundProp
   }
 };
+const manageTimezoneUnion = Prop.union({
+  shared: {
+    manageTimezone: Prop.boolean().default(false).readAndWrite().propertiesPanel({
+      label: "Manage timezone",
+      controlType: "SWITCH"
+    })
+  },
+  variants: [
+    {
+      manageTimezone: Prop.literal(false)
+    },
+    {
+      manageTimezone: Prop.literal(true),
+      valueTimezone: Prop.string().readAndWrite().propertiesPanel({
+        label: "Value timezone",
+        controlType: "DROP_DOWN",
+        options: TIMEZONE_OPTIONS
+      }),
+      displayTimezone: Prop.string().readAndWrite().propertiesPanel({
+        label: "Display timezone",
+        controlType: "DROP_DOWN",
+        options: TIMEZONE_OPTIONS
+      })
+    }
+  ]
+}).getProps();
 const dateColumnProperties = {
   general: {
     inputFormat: Prop.string().readAndWrite().propertiesPanel({
@@ -135559,21 +136135,7 @@ const dateColumnProperties = {
       controlType: "DROP_DOWN",
       options: DATE_OUTPUT_FORMATS
     }),
-    // todo: this should actually be a union too (nested unions ?)
-    manageTimezone: Prop.boolean().readAndWrite().propertiesPanel({
-      label: "Manage timezone",
-      controlType: "SWITCH"
-    }),
-    valueTimezone: Prop.string().readAndWrite().propertiesPanel({
-      label: "Value timezone",
-      controlType: "DROP_DOWN",
-      options: TIMEZONE_OPTIONS
-    }),
-    displayTimezone: Prop.string().readAndWrite().propertiesPanel({
-      label: "Display timezone",
-      controlType: "DROP_DOWN",
-      options: TIMEZONE_OPTIONS
-    })
+    ...manageTimezoneUnion
   },
   presentation: {
     ...cellIconProps,
@@ -135585,13 +136147,7 @@ const dateColumnProperties = {
   }
 };
 const booleanColumnProperties = {
-  general: {
-    // TODO: bring this back when we are ready
-    // computedValue: Prop.string().readAndWrite().propertiesPanel({
-    //   label: "Computed value",
-    //   controlType: "COMPUTE_TABLE_VALUE",
-    // }),
-  },
+  general: {},
   presentation: {
     horizontalAlign: horizontalAlignProp(),
     verticalAlign: verticalAlignProp(),
@@ -135627,26 +136183,14 @@ const booleanColumnProperties = {
   }
 };
 const videoColumnProperties = {
-  general: {
-    // TODO: bring this back when we are ready
-    // computedValue: Prop.string().readAndWrite().propertiesPanel({
-    //   label: "Computed value",
-    //   controlType: "COMPUTE_TABLE_VALUE",
-    // }),
-  },
+  general: {},
   presentation: {
     horizontalAlign: horizontalAlignProp(),
     cellBackground: cellBackgroundProp
   }
 };
 const tagsColumnProperties = {
-  general: {
-    // TODO: bring this back when we are ready
-    // computedValue: Prop.string().readAndWrite().propertiesPanel({
-    //   label: "Computed value",
-    //   controlType: "COMPUTE_TABLE_VALUE",
-    // }),
-  },
+  general: {},
   presentation: {
     horizontalAlign: horizontalAlignProp(),
     verticalAlign: verticalAlignProp(),
@@ -135683,54 +136227,67 @@ const columnPanelConfig = {
       variants: [
         {
           columnType: Prop.unset(),
+          ...computedValueUnion,
           ...textColumnProperties.general
         },
         {
           columnType: Prop.literal(ColumnType.TEXT),
+          ...computedValueUnion,
           ...textColumnProperties.general
         },
         {
           columnType: Prop.literal(ColumnType.NUMBER),
+          ...computedValueUnion,
           ...numberColumnProperties.general
         },
         {
           columnType: Prop.literal(ColumnType.CURRENCY),
+          ...computedValueUnion,
           ...currencyColumnProperties.general
         },
         {
           columnType: Prop.literal(ColumnType.PERCENTAGE),
+          ...computedValueUnion,
           ...percentageColumnProperties.general
         },
         {
           columnType: Prop.literal(ColumnType.IMAGE),
+          ...computedValueUnion,
           ...imageColumnProperties.general
         },
         {
           columnType: Prop.literal(ColumnType.VIDEO),
+          ...computedValueUnion,
           ...videoColumnProperties.general
         },
         {
           columnType: Prop.literal(ColumnType.DATE),
+          ...computedValueUnion,
           ...dateColumnProperties.general
         },
         {
           columnType: Prop.literal(ColumnType.BUTTON),
+          // no computedValue (just buttonLabel)
           ...buttonColumnProperties.general
         },
         {
           columnType: Prop.literal(ColumnType.LINK),
+          // no computedValue (just linkUrl/linkLabel)
           ...linkColumnProperties.general
         },
         {
           columnType: Prop.literal(ColumnType.BOOLEAN),
+          ...computedValueUnion,
           ...booleanColumnProperties.general
         },
         {
           columnType: Prop.literal(ColumnType.TAGS),
+          ...computedValueUnion,
           ...tagsColumnProperties.general
         },
         {
           columnType: Prop.literal(ColumnType.EMAIL),
+          ...computedValueUnion,
           ...emailColumnProperties.general
         }
       ]
@@ -144877,14 +145434,14 @@ function getLoaderFn(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-C6VX9lZI.js"
+            "./allPathsLoader-XDG2QDHX.js"
           )];
         case 2:
           return [2, _b2.sent().allPathsLoader];
         case 3:
           return [4, import(
             /* webpackChunkName: "blueprint-icons-split-paths-by-size-loader" */
-            "./splitPathsBySizeLoader-yyTSdt5z.js"
+            "./splitPathsBySizeLoader-CW0AvZcf.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -152879,7 +153436,8 @@ const StyledControlGroup$1 = qe$1(ControlGroup)`
       }
     }
 
-    .${INPUT_LEFT_CONTAINER$1}, .${INPUT_ACTION$1} {
+    .${INPUT_LEFT_CONTAINER$1},
+      .${INPUT_ACTION$1} {
       display: flex;
       align-items: center;
       height: 100%;
@@ -153215,24 +153773,32 @@ class DatePickerComponent extends React__default.Component {
                             minHeight: this.props.inputLineHeightPx ? `${this.props.inputLineHeightPx + INPUT_ADDITIONAL_MIN_HEIGHT$1}px` : void 0
                           },
                           onClick: this.props.onInputClick,
-                          leftElement: this.props.icon ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-                            "div",
-                            {
-                              className: `IconWrapper ${CLASS_NAMES.ICON} ${isInputFocused ? CLASS_NAMES.ACTIVE_MODIFIER : ""} ${this.props.isDisabled || this.props.selectedDate === "" || this.props.selectedDate == null ? CLASS_NAMES.DISABLED_MODIFIER : ""} ${!this.props.isValid ? CLASS_NAMES.ERROR_MODIFIER : ""}`,
-                              children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                                DynamicSVG,
-                                {
-                                  iconName: this.props.icon,
-                                  size: this.props.iconSize ?? DEFAULT_ICON_SIZE$1
-                                }
-                              )
-                            }
-                          ) : void 0,
+                          leftIcon: this.props.icon ? (
+                            /**
+                             * Use `leftIcon` (with Blueprint's `INPUT_LEFT_CONTAINER` CSS class) instead of `leftElement`.
+                             * Blueprint measures `leftElement` width after render to set input padding.
+                             * If the element isn't present (e.g., Suspense, modals), it measures 0 and sets `padding-left: 0`, causing overlap.
+                             * Setting the style to `paddingLeft` is overridden by Blueprint.
+                             */
+                            /* @__PURE__ */ jsxRuntimeExports.jsx(
+                              "div",
+                              {
+                                className: `IconWrapper ${CLASS_NAMES.ICON} ${INPUT_LEFT_CONTAINER$1} ${isInputFocused ? CLASS_NAMES.ACTIVE_MODIFIER : ""} ${this.props.isDisabled || this.props.selectedDate === "" || this.props.selectedDate == null ? CLASS_NAMES.DISABLED_MODIFIER : ""} ${!this.props.isValid ? CLASS_NAMES.ERROR_MODIFIER : ""}`,
+                                children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                                  DynamicSVG,
+                                  {
+                                    iconName: this.props.icon,
+                                    size: this.props.iconSize ?? DEFAULT_ICON_SIZE$1
+                                  }
+                                )
+                              }
+                            )
+                          ) : null,
+                          rightElement: !formatIncludesTimezone(displayFormat) && this.props.showTimezone ? /* @__PURE__ */ jsxRuntimeExports.jsx(Timezone, { timezone: this.displayTimezone }) : void 0,
+                          onChange: this.onInputChanged,
                           // @ts-expect-error extra props
                           "data-invalid": !this.props.isValid && !this.state.isOpen,
-                          "data-active": this.state.isOpen,
-                          rightElement: !formatIncludesTimezone(displayFormat) && this.props.showTimezone ? /* @__PURE__ */ jsxRuntimeExports.jsx(Timezone, { timezone: this.displayTimezone }) : void 0,
-                          onChange: this.onInputChanged
+                          "data-active": this.state.isOpen
                         },
                         popoverProps: {
                           ...this.props.forceOpen ? { isOpen: this.state.isOpen } : {},
@@ -161691,6 +162257,17 @@ function getSelectedRows(props2) {
   const selectedRows = selectedRowIndices.map((ind) => filteredTableData[ind]).filter(Boolean);
   return selectedRows;
 }
+const isDerivedColumn = (tableData, columnId) => {
+  if (!tableData || tableData.length === 0) {
+    return true;
+  }
+  const firstRow = tableData[0];
+  if (!firstRow) {
+    return true;
+  }
+  const isInRow = columnId in firstRow;
+  return !isInRow;
+};
 function getFilteredTableData(props2) {
   var _a2;
   if (!props2.tableData) {
@@ -161722,7 +162299,8 @@ function getFilteredTableData(props2) {
         return;
       }
       let computedValues = [];
-      if (column2 && column2.computedValue) {
+      if (column2 && column2.computedValue && // ignore computed values for non-derived columns (they can only use displayed values)
+      isDerivedColumn(derivedTableData, columnId)) {
         if (lodashExports.isString(column2.computedValue)) {
           try {
             computedValues = JSON.parse(column2.computedValue);
@@ -182245,6 +182823,7 @@ const SbDatePicker = registerSbComponent(
       backgroundColor: props2.backgroundColor,
       textStyle: props2.textStyle
     });
+    const iconSize = useInputIconSize({ textStyle: props2.textStyle });
     return /* @__PURE__ */ jsxRuntimeExports.jsx(DatePickerContainer, { ...passThroughProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       DatePickerComponent,
       {
@@ -182266,6 +182845,7 @@ const SbDatePicker = registerSbComponent(
         timezone: props2.manageTimezone ? props2.valueTimezone : void 0,
         showTimezone: !!props2.manageTimezone,
         icon: props2.icon,
+        iconSize,
         onDatePickerClosed: handleDatePickerClosed,
         placeholder: props2.placeholder,
         labelStyleOverride: labelProps == null ? void 0 : labelProps.style,
@@ -185834,7 +186414,7 @@ const SbProvider = function SbProvider2({
       },
       id: "sb-provider-root",
       children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary2, { theme: userAccessibleTheme, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary2, { theme: userAccessibleTheme, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "div",
           {
             id: CANVAS_ROOT_ID,
@@ -185847,7 +186427,10 @@ const SbProvider = function SbProvider2({
               overflow: "hidden",
               position: "relative"
             },
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeProvider, { theme: userAccessibleTheme, children: /* @__PURE__ */ jsxRuntimeExports.jsx(GlobalScope, { children: isEmbedded ? /* @__PURE__ */ jsxRuntimeExports.jsx(EmbedWrapper, { children }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Auth0Wrapper, { children }) }) })
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeProvider, { theme: userAccessibleTheme, children: /* @__PURE__ */ jsxRuntimeExports.jsx(GlobalScope, { children: isEmbedded ? /* @__PURE__ */ jsxRuntimeExports.jsx(EmbedWrapper, { children }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Auth0Wrapper, { children }) }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(DevTools, {})
+            ]
           }
         ) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: MODAL_TARGET_ROOT_ID, "data-superblocks": MODAL_TARGET_ROOT_ID })
@@ -197260,145 +197843,149 @@ function requireClient() {
 }
 var clientExports = requireClient();
 export {
-  HashRouter as $,
+  clientExports as $,
   AppStateVarPersistence6 as A,
-  setQueryParams as B,
-  download as C,
-  showAlert as D,
-  logoutIntegrations as E,
-  registerScope as F,
-  registerPage as G,
-  createSbScope as H,
+  SbProvider as B,
+  SbEventFlow as C,
+  copyToClipboard as D,
+  navigateTo as E,
+  setQueryParams as F,
+  download as G,
+  showAlert as H,
   IconSize$2 as I,
-  Global as J,
-  Embed as K,
-  Env as L,
-  SbEvent as M,
-  useUpdateProperties as N,
-  useTheme as O,
-  Prop as P,
-  sbComputed as Q,
-  Dim as R,
+  logoutIntegrations as J,
+  registerScope as K,
+  registerPage as L,
+  createSbScope as M,
+  Global as N,
+  Embed as O,
+  Env as P,
+  SbEvent as Q,
+  useUpdateProperties as R,
   SbButton as S,
   Theme as T,
-  SB as U,
-  Outlet as V,
-  clientExports as W,
-  Await as X,
-  BrowserRouter as Y,
-  Form2 as Z,
+  useTheme as U,
+  Prop as V,
+  sbComputed as W,
+  Dim as X,
+  SB as Y,
+  Outlet as Z,
   __awaiter as _,
   __generator as a,
-  href as a$,
-  IDLE_BLOCKER as a0,
-  IDLE_FETCHER as a1,
-  IDLE_NAVIGATION as a2,
-  Link as a3,
-  Links as a4,
-  MemoryRouter as a5,
-  Meta as a6,
-  NavLink as a7,
-  Navigate as a8,
-  Action as a9,
-  decodeViaTurboStream as aA,
-  deserializeErrors2 as aB,
-  getPatchRoutesOnNavigationFunction as aC,
-  getSingleFetchDataStrategy as aD,
-  invariant as aE,
-  mapRouteProperties as aF,
-  shouldHydrateRouteLoader as aG,
-  useFogOFWarDiscovery as aH,
-  useScrollRestoration as aI,
-  createBrowserRouter as aJ,
-  createCookie as aK,
-  createCookieSessionStorage as aL,
-  createHashRouter as aM,
-  createMemoryRouter as aN,
-  createMemorySessionStorage as aO,
-  createPath as aP,
-  createRequestHandler as aQ,
-  createRoutesFromChildren as aR,
-  createRoutesFromElements as aS,
-  createRoutesStub as aT,
-  createSearchParams as aU,
-  createSession as aV,
-  createSessionStorage as aW,
-  createStaticHandler2 as aX,
-  createStaticRouter as aY,
-  data as aZ,
-  generatePath as a_,
-  PrefetchPageLinks as aa,
-  Route as ab,
-  Router as ac,
-  RouterProvider as ad,
-  Routes as ae,
-  Scripts as af,
-  ScrollRestoration as ag,
-  ServerRouter as ah,
-  StaticRouter as ai,
-  StaticRouterProvider as aj,
-  DataRouterContext as ak,
-  DataRouterStateContext as al,
-  ErrorResponseImpl as am,
-  FetchersContext as an,
-  FrameworkContext as ao,
-  LocationContext as ap,
-  NavigationContext as aq,
-  RemixErrorBoundary as ar,
-  RouteContext as as,
-  ServerMode as at,
-  SingleFetchRedirectSymbol as au,
-  ViewTransitionContext as av,
-  createBrowserHistory as aw,
-  createClientRoutes as ax,
-  createClientRoutesWithHMRRevalidationOptOut as ay,
-  createRouter as az,
+  createStaticHandler2 as a$,
+  Await as a0,
+  BrowserRouter as a1,
+  Form2 as a2,
+  HashRouter as a3,
+  IDLE_BLOCKER as a4,
+  IDLE_FETCHER as a5,
+  IDLE_NAVIGATION as a6,
+  Link as a7,
+  Links as a8,
+  MemoryRouter as a9,
+  createBrowserHistory as aA,
+  createClientRoutes as aB,
+  createClientRoutesWithHMRRevalidationOptOut as aC,
+  createRouter as aD,
+  decodeViaTurboStream as aE,
+  deserializeErrors2 as aF,
+  getPatchRoutesOnNavigationFunction as aG,
+  getSingleFetchDataStrategy as aH,
+  invariant as aI,
+  mapRouteProperties as aJ,
+  shouldHydrateRouteLoader as aK,
+  useFogOFWarDiscovery as aL,
+  useScrollRestoration as aM,
+  createBrowserRouter as aN,
+  createCookie as aO,
+  createCookieSessionStorage as aP,
+  createHashRouter as aQ,
+  createMemoryRouter as aR,
+  createMemorySessionStorage as aS,
+  createPath as aT,
+  createRequestHandler as aU,
+  createRoutesFromChildren as aV,
+  createRoutesFromElements as aW,
+  createRoutesStub as aX,
+  createSearchParams as aY,
+  createSession as aZ,
+  createSessionStorage as a_,
+  Meta as aa,
+  NavLink as ab,
+  Navigate as ac,
+  Action as ad,
+  PrefetchPageLinks as ae,
+  Route as af,
+  Router as ag,
+  RouterProvider as ah,
+  Routes as ai,
+  Scripts as aj,
+  ScrollRestoration as ak,
+  ServerRouter as al,
+  StaticRouter as am,
+  StaticRouterProvider as an,
+  DataRouterContext as ao,
+  DataRouterStateContext as ap,
+  ErrorResponseImpl as aq,
+  FetchersContext as ar,
+  FrameworkContext as as,
+  LocationContext as at,
+  NavigationContext as au,
+  RemixErrorBoundary as av,
+  RouteContext as aw,
+  ServerMode as ax,
+  SingleFetchRedirectSymbol as ay,
+  ViewTransitionContext as az,
   IconSize as b,
-  isCookie as b0,
-  isRouteErrorResponse as b1,
-  isSession as b2,
-  matchPath as b3,
-  matchRoutes as b4,
-  parsePath as b5,
-  redirect as b6,
-  redirectDocument as b7,
-  renderMatches as b8,
-  replace2 as b9,
-  useParams as bA,
-  useResolvedPath as bB,
-  useRevalidator as bC,
-  useRouteError as bD,
-  useRouteLoaderData as bE,
-  useRoutes as bF,
-  useSearchParams as bG,
-  useSubmit as bH,
-  useViewTransitionState as bI,
-  resolvePath as ba,
-  HistoryRouter as bb,
-  unstable_RouterContextProvider as bc,
-  unstable_createContext as bd,
-  setDevServerHooks as be,
-  usePrompt as bf,
-  useActionData as bg,
-  useAsyncError as bh,
-  useAsyncValue as bi,
-  useBeforeUnload as bj,
-  useBlocker as bk,
-  useFetcher as bl,
-  useFetchers as bm,
-  useFormAction as bn,
-  useHref as bo,
-  useInRouterContext as bp,
-  useLinkClickHandler as bq,
-  useLoaderData as br,
-  useLocation as bs,
-  useMatch as bt,
-  useMatches as bu,
-  useNavigate as bv,
-  useNavigation as bw,
-  useNavigationType as bx,
-  useOutlet as by,
-  useOutletContext as bz,
+  createStaticRouter as b0,
+  data as b1,
+  generatePath as b2,
+  href as b3,
+  isCookie as b4,
+  isRouteErrorResponse as b5,
+  isSession as b6,
+  matchPath as b7,
+  matchRoutes as b8,
+  parsePath as b9,
+  useNavigation as bA,
+  useNavigationType as bB,
+  useOutlet as bC,
+  useOutletContext as bD,
+  useParams as bE,
+  useResolvedPath as bF,
+  useRevalidator as bG,
+  useRouteError as bH,
+  useRouteLoaderData as bI,
+  useRoutes as bJ,
+  useSearchParams as bK,
+  useSubmit as bL,
+  useViewTransitionState as bM,
+  redirect as ba,
+  redirectDocument as bb,
+  renderMatches as bc,
+  replace2 as bd,
+  resolvePath as be,
+  HistoryRouter as bf,
+  unstable_RouterContextProvider as bg,
+  unstable_createContext as bh,
+  setDevServerHooks as bi,
+  usePrompt as bj,
+  useActionData as bk,
+  useAsyncError as bl,
+  useAsyncValue as bm,
+  useBeforeUnload as bn,
+  useBlocker as bo,
+  useFetcher as bp,
+  useFetchers as bq,
+  useFormAction as br,
+  useHref as bs,
+  useInRouterContext as bt,
+  useLinkClickHandler as bu,
+  useLoaderData as bv,
+  useLocation as bw,
+  useMatch as bx,
+  useMatches as by,
+  useNavigate as bz,
   SbSection as c,
   SbColumn as d,
   SbContainer as e,
@@ -197406,22 +197993,22 @@ export {
   SbPage as g,
   SbText as h,
   SbModal as i,
-  SbTable as j,
-  SbDropdown as k,
-  SbCustom as l,
-  SbCheckbox as m,
-  SbDatePicker as n,
-  SbSwitch as o,
+  jsxRuntimeExports as j,
+  SbTable as k,
+  SbDropdown as l,
+  makeAutoObservable as m,
+  SbCustom as n,
+  observer as o,
   pascalCase as p,
-  SbIcon as q,
+  SbCheckbox as q,
   registerComponent as r,
-  SbImage as s,
-  SbVariable as t,
-  SbTimer as u,
-  SbApi as v,
-  SbProvider as w,
-  SbEventFlow as x,
-  copyToClipboard as y,
-  navigateTo as z
-};
-//# sourceMappingURL=index-DHOLy0gg.js.map
+  SbDatePicker as s,
+  toJS as t,
+  SbSwitch as u,
+  SbIcon as v,
+  SbImage as w,
+  SbVariable as x,
+  SbTimer as y,
+  SbApi as z
+};
+//# sourceMappingURL=index-CFz3UGkJ.js.map