@superblocksteam/library 2.0.6-next.38 → 2.0.6-next.4

package/dist/{index-CQOHJMew.js → index-kjgG33Rg.js}

@@ -49,7 +49,7 @@ var __privateMethod = (obj, member, method4) => (__accessCheck(obj, member, "acc
 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, Suspense, Children, memo, useReducer, useSyncExternalStore, PureComponent, 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 SvgPlay, l as SvgDownload, m as SvgTrash, n as SvgFilter, o as SvgFreeze, p as SvgSort, q as SvgEllipsis, r as SvgCrossXs, s as SvgClark } from "./icons-lSlfQ50w.js";
+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";
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
@@ -6001,11 +6001,11 @@ function PropertyInfo(value, type5 = "STATIC", extra) {
 const Property = {
   Static: (value) => PropertyInfo(value, "STATIC"),
   Binding: (value) => PropertyInfo(value, "BINDING"),
-  Template: (value, args) => PropertyInfo(value, "TEMPLATE", { args }),
+  Template: (value) => PropertyInfo(value, "TEMPLATE"),
   Expression: (value) => PropertyInfo(value, "EXPRESSION"),
   Event: (value) => PropertyInfo(value, "EVENT"),
   Dimension: (value) => PropertyInfo(value, "DIMENSION"),
-  Computed: (value, args) => PropertyInfo(value, "COMPUTED", { args }),
+  Computed: (value, args) => PropertyInfo(value, "COMPUTED", Array.isArray(args) && args.length > 0 ? { args } : {}),
   Any: (value, type5 = "STATIC") => PropertyInfo(value, type5)
 };
 function isPropertyInfo(value) {
@@ -6025,18 +6025,6 @@ function withBindingIdentifier(params, identifier2) {
     [BindingMetaSymbol]: identifier2
   };
 }
-function getSingleArgString(arg) {
-  if (Array.isArray(arg)) {
-    return `{ ${arg.map(getSingleArgString).join(", ")} }`;
-  }
-  return arg.name;
-}
-function getComputedArgsString(args) {
-  if (!args || args.length === 0) {
-    return "";
-  }
-  return args.map(getSingleArgString).join(", ");
-}
 const isDimension = (value) => {
   return typeof value === "object" && value !== null && "mode" in value && ["px", "fit", "fill", "%", "columns", "rows"].includes(value.mode) && (value.mode === "fit" || "value" in value);
 };
@@ -78430,7 +78418,7 @@ const ShowAlertTrigger = {
 const ResetStateVarTrigger = {
   type: TriggerStepType.RESET_STATE_VAR,
   async execute(context2, step) {
-    if (step.variable === void 0) {
+    if (step.state === void 0) {
       return;
     }
     context2.rootStore.entityManager.runCode({
@@ -78438,22 +78426,22 @@ const ResetStateVarTrigger = {
       name: context2.name,
       func: () => {
         var _a2;
-        return (_a2 = step.variable) == null ? void 0 : _a2.set(step.variable.defaultValue);
+        return (_a2 = step.state) == null ? void 0 : _a2.set(step.state.defaultValue);
       },
       args: []
     });
   },
-  create(variable) {
+  create(stateVar) {
     return {
       type: TriggerStepType.RESET_STATE_VAR,
-      variable
+      state: stateVar
     };
   }
 };
 const SetStateVarTrigger = {
   type: TriggerStepType.SET_STATE_VAR,
   async execute(context2, step) {
-    if (step.variable === void 0) {
+    if (step.state === void 0) {
       return;
     }
     const value = context2.rootStore.entityManager.computeValue({
@@ -78467,15 +78455,15 @@ const SetStateVarTrigger = {
       func: (state, value2) => {
         var _a2;
         if (!state) return;
-        (_a2 = step.variable) == null ? void 0 : _a2.set(value2);
+        (_a2 = step.state) == null ? void 0 : _a2.set(value2);
       },
       args: [value]
     });
   },
-  create(variable, value) {
+  create(stateVar, value) {
     return {
       type: TriggerStepType.SET_STATE_VAR,
-      variable,
+      state: stateVar,
       value
     };
   }
@@ -78483,14 +78471,12 @@ const SetStateVarTrigger = {
 const ControlTimerTrigger = {
   type: TriggerStepType.CONTROL_TIMER,
   async execute(_context, step) {
-    if (step.timer) {
-      step.timer[step.action]();
-    }
+    console.log("ControlTimerTrigger", step);
   },
-  create(timer, action2) {
+  create(timerId, action2) {
     return {
       type: TriggerStepType.CONTROL_TIMER,
-      timer,
+      timerId,
       action: action2
     };
   }
@@ -82987,11 +82973,6 @@ class Prop {
     this.prop.nestedBindings = true;
     throw new Error("Nested bindings are not supported yet");
   }
-  contextual(computedArgs) {
-    this.prop.contextual = true;
-    this.prop.computedArgs = computedArgs;
-    return this;
-  }
   validate(validateFn) {
     this.prop.validate = validateFn;
     return this;
@@ -83113,9 +83094,6 @@ class Prop {
         ...rest
       };
     }
-    if (this.prop.computedArgs) {
-      propertiesPanelDisplay.computedArgs = typeof this.prop.computedArgs === "function" ? this.prop.computedArgs(entity) : this.prop.computedArgs;
-    }
     const propertiesPanelDisplayWithPanelConfig = {
       ...propertiesPanelDisplay,
       ...panelConfig && { panelConfig }
@@ -83526,7 +83504,7 @@ function registerStores(stores) {
   internalStores = { ...internalStores, ...stores };
   if (SUPPORTED_MODES.includes("production")) {
     if (Object.keys(internalStores).length === Object.keys(stores).length) {
-      import("./devtools-consolidated-BQ5Eme4s.js").then(({ initializeCustomDevTools, setRegisteredStores }) => {
+      import("./devtools-consolidated-B1B3uBW_.js").then(({ initializeCustomDevTools, setRegisteredStores }) => {
         setRegisteredStores(internalStores);
         initializeCustomDevTools();
       }).catch((error) => {
@@ -83539,7 +83517,7 @@ function registerStores(stores) {
   }
 }
 const DevToolsInternal = React__default.lazy(() => {
-  return import("./devtools-consolidated-BQ5Eme4s.js").then((module2) => ({
+  return import("./devtools-consolidated-B1B3uBW_.js").then((module2) => ({
     default: module2.CustomDevTools
   }));
 });
@@ -83632,32 +83610,9 @@ class EvalComputeEngine {
         })()
     }`
     ));
-    __publicField(this, "statementFunctionNoSnapshot", new Function(
-      ARGS_VAR_NAME,
-      USER_JS_CODE_VAR_NAME,
-      /*js*/
-      `return (() => {
-            "use strict";
-            return eval("(" + ${USER_JS_CODE_VAR_NAME} + ")").call(this, ...${ARGS_VAR_NAME});
-        })()`
-    ));
   }
-  compute({
-    snapshot,
-    entityName,
-    func,
-    args,
-    path: path2,
-    excludeState
-  }) {
+  compute({ snapshot, entityName, func, args, path: path2 }) {
     try {
-      if (excludeState) {
-        return this.statementFunctionNoSnapshot.call(
-          snapshot[entityName.value],
-          args || [],
-          func.toString()
-        );
-      }
       const globalScope = createGlobalObject({ snapshot });
       return this.statementFunction.call(
         snapshot[entityName.value],
@@ -83919,11 +83874,11 @@ class SbEventFlow {
   controlModal(modal, action2) {
     return this.addStep(EventRegistry.controlModal.create(modal, action2));
   }
-  static controlTimer(stateTimer, action2) {
-    return SbEventFlow.start().controlTimer(stateTimer, action2);
+  static controlTimer(timerId, action2) {
+    return SbEventFlow.start().controlTimer(timerId, action2);
   }
-  controlTimer(stateTimer, action2) {
-    return this.addStep(EventRegistry.controlTimer.create(stateTimer, action2));
+  controlTimer(timerId, action2) {
+    return this.addStep(EventRegistry.controlTimer.create(timerId, action2));
   }
   static runApis(apis, onSuccess, onError2) {
     return SbEventFlow.start().runApis(apis, onSuccess, onError2);
@@ -84061,7 +84016,7 @@ const isLazyFunction = (value) => {
   return typeof value === "function" && value[lazyFunctionSymbol];
 };
 const LazyFunction = (source2, args = []) => {
-  const argsObj = getComputedArgsString(args);
+  const argsObj = `{ ${args.join(", ")} }`;
   const func = new Function(argsObj, source2);
   func[lazyFunctionSymbol] = true;
   return func;
@@ -84396,6 +84351,7 @@ class EntityManager {
   }
   addProperty(scopeId, name, prop, eov) {
     if (prop.split(".").includes(RECORD_PATH_IDENTIFIER)) {
+      console.log(`ALERT: Cannot add a property with a record path (${prop})`);
       return;
     }
     const entity = this.getScope(scopeId).getEntity(name);
@@ -84451,14 +84407,6 @@ class EntityManager {
       }
       return;
     }
-    let finalProp = prop;
-    if (isNested) {
-      finalProp = this.componentRegistry.getPropertyWithRecordIdentifier(
-        entityType,
-        prop
-      );
-    }
-    const managedProp = this.componentRegistry.getManagedProps(entityType).find((p) => p.path === finalProp);
     const getValue2 = computed(() => {
       let ret = null;
       try {
@@ -84467,30 +84415,18 @@ class EntityManager {
           ret = metaParent[finalSegment];
         } else {
           if (isComputed) {
-            if (managedProp == null ? void 0 : managedProp.contextual) {
-              ret = function(context2) {
-                return computeEngine.compute({
-                  snapshot: snapshot(scopeId),
-                  entityName: name,
-                  func: eov.value,
-                  path: prop,
-                  args: [context2],
-                  excludeState: true
-                });
-              };
-            } else {
-              ret = computeEngine.compute({
-                snapshot: snapshot(scopeId),
-                entityName: name,
-                func: eov.value,
-                path: prop
-              });
-            }
+            ret = computeEngine.compute({
+              snapshot: snapshot(scopeId),
+              entityName: name,
+              func: eov.value,
+              path: prop
+            });
           } else {
             ret = eov.value;
           }
         }
-        if ((managedProp == null ? void 0 : managedProp.validate) && typeof ret !== "function") {
+        const managedProp = this.componentRegistry.getManagedProps(entityType).find((p) => p.path === prop);
+        if (managedProp == null ? void 0 : managedProp.validate) {
           const currentState = snapshot(scopeId);
           const entity2 = currentState[name.value];
           const validationResult = managedProp.validate(ret, entity2);
@@ -84508,13 +84444,13 @@ class EntityManager {
           if (!validationResult.valid) {
             return void 0;
           }
-          ret = validationResult.result;
+          return validationResult.result;
         }
-        return ret;
       } catch (_e2) {
         console.log("Could not compute property value");
         return void 0;
       }
+      return ret;
     });
     const setValue = (value) => {
       const metaParent = getMetaParent();
@@ -85034,12 +84970,6 @@ const _SuperblocksEditorBridge = class _SuperblocksEditorBridge {
       }
     });
   }
-  socketError(message2) {
-    this.sendImmediate({
-      type: "socket/error",
-      payload: { message: message2 }
-    });
-  }
   // Private implementation details
   queueMessage(message2) {
     if (!this.connectedToParent) {
@@ -85518,7 +85448,7 @@ class ApiManager {
       scopeId,
       this.apiNameToDepCandidates[apiName] ?? []
     );
-    const orchestratorUrl = new URL("v2/execute", this.baseUrl).href;
+    const orchestratorUrl = `${this.baseUrl}v2/execute`;
     const events2 = [];
     await ((_a2 = this.rootStore.editStore) == null ? void 0 : _a2.operationManager.ensureFilesSynced());
     const abortController = new AbortController();
@@ -85981,24 +85911,6 @@ class ComponentRegistry {
   getComponent(type5) {
     return this._typeRegistry.get(type5) ?? this._customComponentRegistry.get(type5);
   }
-  /**
-   * Get the property path with the record identifier if it exists. For example,
-   * `columns.columnName.label` becomes `columns.*.label`, for record properties.
-   */
-  getPropertyWithRecordIdentifier(type5, path2) {
-    const managedProps = this.getManagedProps(type5);
-    const splitPath = path2.split(".");
-    if (splitPath.length === 1) {
-      return path2;
-    }
-    const [parentKey, _maybeTheRecordKey, ...rest] = splitPath;
-    for (const prop of managedProps) {
-      if (prop.path.startsWith(parentKey) && prop.path.includes(RECORD_PATH_IDENTIFIER) && rest.length > 0 && prop.path.endsWith(rest.join("."))) {
-        return [parentKey, RECORD_PATH_IDENTIFIER, rest.join(".")].join(".");
-      }
-    }
-    return path2;
-  }
 }
 const DEFAULT_ANONYMOUS_SOURCE_ID = "SB--anon-src";
 const DEFAULT_ROOT_KEY = Symbol("DEFAULT_KEY");
@@ -86238,50 +86150,24 @@ class OperationAPI {
     });
     this.serverUrl = serverUrl;
   }
-  /**
-   * @throws {Error} if the websocket connection can't be initiated after 3 attempts
-   */
   async connect(peerId, userId) {
-    try {
-      const socket = await connectSocket(this.serverUrl, {
-        peerId,
-        userId,
-        onClose: this.handleSocketClose(peerId, userId)
-      });
-      this.retryAttempts = 0;
-      this.socket = socket;
-    } catch {
-      this.retryAttempts++;
-      console.info(
-        `App<>Dev box initial connection failed, retrying attempt ${this.retryAttempts}...`
-      );
-      await this.retryConnection(peerId, userId);
-    }
-  }
-  // Happens after initial connection
-  handleSocketClose(peerId, userId) {
-    return async () => {
-      var _a2;
-      console.info(
-        `App<>Dev box Socket closed, retrying attempt ${this.retryAttempts + 1}...`
-      );
-      (_a2 = rootStore.editStore) == null ? void 0 : _a2.connectionManager.disconnect();
-      await this.retryConnection(peerId, userId);
-      if (this.retryAttempts >= 3) {
-        this.socket = void 0;
+    const socket = await connectSocket(this.serverUrl, {
+      peerId,
+      userId,
+      onClose: () => {
+        var _a2;
+        console.log("App<>Dev box Socket closed, retrying...");
+        (_a2 = rootStore.editStore) == null ? void 0 : _a2.connectionManager.disconnect();
+        if (this.retryAttempts < 3) {
+          this.connect(peerId, userId);
+        } else {
+          this.socket = void 0;
+        }
+        this.retryAttempts++;
       }
-      this.retryAttempts++;
-    };
-  }
-  async retryConnection(peerId, userId) {
-    if (this.retryAttempts < 3) {
-      await this.connect(peerId, userId);
-    } else {
-      console.info(
-        `App<>Dev box Socket closed, failed to reconnect after 3 attempts. Throwing error.`
-      );
-      throw new Error("Failed to reconnect after 3 attempts");
-    }
+    });
+    this.retryAttempts = 0;
+    this.socket = socket;
   }
 }
 const sourceUpdateApi = new OperationAPI(
@@ -86419,13 +86305,12 @@ async function connectSocket(serverUrl, {
       }
     );
     const socket = createISocketClient(isocket);
-    console.log("connected to socket");
     (_b2 = rootStore.editStore) == null ? void 0 : _b2.connectionManager.connect();
     return socket;
   } catch (error) {
     console.error("Error connecting to socket", error);
     (_c2 = rootStore.editStore) == null ? void 0 : _c2.connectionManager.disconnect();
-    throw error;
+    return void 0;
   }
 }
 _executeOrAddToBatch_dec = [action], _addPendingTransaction_dec = [action], _clearPendingTransactions_dec = [action], _batchUpdate_dec = [action], _createComponent_dec = [action], _dropComponent_dec = [action], _deleteComponents_dec = [action], _writeRuntimeProperties_dec = [action], _setWidgetProperties_dec = [action], _setWidgetProperty_dec = [action], _renameWidget_dec = [action];
@@ -87020,10 +86905,7 @@ function getPropertyValue$1({
   }
   if (property.type === "COMPUTED" && typeof property.value === "string" && scopeId && name) {
     try {
-      return LazyFunction(
-        getRuntimeComputedExpression(property.value),
-        property.args
-      );
+      return LazyFunction(getRuntimeComputedExpression(property.value));
     } catch (e3) {
       console.error("Error generating computed value", e3);
       const entity = rootStore.entityManager.getEntity(scopeId, name);
@@ -87070,7 +86952,7 @@ function getPropertyValue$1({
   return property.value;
 }
 function getSbEventFlow(step, scopeId) {
-  var _a2, _b2, _c2, _d2, _e2, _f2, _g2;
+  var _a2, _b2, _c2, _d2, _e2, _f2;
   if (!isValidStepDef(step)) {
     return void 0;
   }
@@ -87143,33 +87025,27 @@ function getSbEventFlow(step, scopeId) {
       return SbEventFlow.controlModal(modalEntity, step.direction);
     }
     case "controlTimer": {
-      const timerStep = step;
-      if (!((_a2 = timerStep.timer) == null ? void 0 : _a2.name)) {
-        return void 0;
-      }
-      const timerEntity = getEntity(timerStep.timer.name);
+      const timerEntity = getEntity(step.name);
       if (!timerEntity) return void 0;
-      return SbEventFlow.controlTimer(timerEntity, step.command ?? "start");
+      return SbEventFlow.controlTimer(step.name, step.command);
     }
     case "setStateVar": {
-      const variableStep = step;
-      const stateEntity = getEntity((_b2 = variableStep.variable) == null ? void 0 : _b2.name);
+      const stateEntity = getEntity((_a2 = step.state) == null ? void 0 : _a2.name);
       if (!stateEntity) return void 0;
-      const value = isPropertyInfo(variableStep.value) ? getPropertyValue$1({
-        property: variableStep.value,
+      const value = isPropertyInfo(step.value) ? getPropertyValue$1({
+        property: step.value,
         scopeId,
-        name: getName((_c2 = variableStep.variable) == null ? void 0 : _c2.name)
+        name: getName((_b2 = step.state) == null ? void 0 : _b2.name)
       }) : step.value;
       return SbEventFlow.setStateVar(stateEntity, value);
     }
     case "resetStateVar": {
-      const variableStep = step;
-      const resetStateEntity = getEntity((_d2 = variableStep.variable) == null ? void 0 : _d2.name);
+      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((_e2 = step.widget) == null ? void 0 : _e2.name);
+      const resetWidgetEntity = getEntity((_d2 = step.widget) == null ? void 0 : _d2.name);
       if (!resetWidgetEntity) return void 0;
       return SbEventFlow.resetComponent(
         step.widget,
@@ -87178,7 +87054,7 @@ function getSbEventFlow(step, scopeId) {
       );
     }
     case "setComponentProperty": {
-      const setWidgetEntity = getEntity((_f2 = step.widget) == null ? void 0 : _f2.name);
+      const setWidgetEntity = getEntity((_e2 = step.widget) == null ? void 0 : _e2.name);
       if (!setWidgetEntity) return void 0;
       return SbEventFlow.setComponentProperty(
         step.widget,
@@ -87196,7 +87072,7 @@ function getSbEventFlow(step, scopeId) {
     case "setProfile":
       return SbEventFlow.setProfile(step.profileId, step.profileAction);
     case "triggerEvent":
-      return SbEventFlow.triggerEvent((_g2 = step.event) == null ? void 0 : _g2.name, step.eventPayload);
+      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;
@@ -91163,14 +91039,14 @@ function getLoaderFn$1(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-yqClhllT.js"
+            "./allPathsLoader-KDCEbuYo.js"
           )];
         case 2:
           return [2, _b2.sent().allPathsLoader];
         case 3:
           return [4, import(
             /* webpackChunkName: "blueprint-icons-split-paths-by-size-loader" */
-            "./splitPathsBySizeLoader-BV47-5ws.js"
+            "./splitPathsBySizeLoader-VThmaq3t.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -111805,18 +111681,14 @@ const ReactiveComponent = observer(function Component2({
   const reactiveProps = useShallowMobxObserver(safeProps);
   const stylePropWithSize = useStyleWithSize(reactiveProps);
   const styleProp = useMemo$2(() => {
-    const styleWithOverflow = {
-      overflow: "auto",
-      ...stylePropWithSize
-    };
     if (reactiveProps.isVisible === false) {
       const existingOpacity = lodashExports.isNumber(stylePropWithSize.opacity) ? stylePropWithSize.opacity : 1;
       return {
-        ...styleWithOverflow,
+        ...stylePropWithSize,
         opacity: existingOpacity * INVISIBLE_OPACITY
       };
     }
-    return styleWithOverflow;
+    return stylePropWithSize;
   }, [reactiveProps.isVisible, stylePropWithSize]);
   const { setStyle, getFallbackStyle } = useComponentSuspenseStyle();
   useEffect(() => {
@@ -111976,52 +111848,28 @@ const size$2 = ({
     controlType: "WIDTH_DROPDOWN",
     defaultValue: defaults2 == null ? void 0 : defaults2.minWidth,
     defaultOnAdd: defaultsOnAdd == null ? void 0 : defaultsOnAdd.minWidth,
-    isVisible: function(s3) {
-      var _a2;
-      const hideWidth = ((_a2 = this == null ? void 0 : this.width) == null ? void 0 : _a2.mode) === "px";
-      return Boolean(
-        (showMinWidth ? showMinWidth == null ? void 0 : showMinWidth.call(this, s3) : true) && !hideWidth
-      );
-    }
+    isVisible: showMinWidth
   });
   const maxWidthProperty = getSizeProp({
     label: "Max width",
     controlType: "WIDTH_DROPDOWN",
     defaultValue: defaults2 == null ? void 0 : defaults2.maxWidth,
     defaultOnAdd: defaultsOnAdd == null ? void 0 : defaultsOnAdd.maxWidth,
-    isVisible: function(s3) {
-      var _a2;
-      const hideWidth = ((_a2 = this == null ? void 0 : this.width) == null ? void 0 : _a2.mode) === "px";
-      return Boolean(
-        (showMaxWidth ? showMaxWidth == null ? void 0 : showMaxWidth.call(this, s3) : true) && !hideWidth
-      );
-    }
+    isVisible: showMaxWidth
   });
   const minHeightProperty = getSizeProp({
     label: "Min height",
     controlType: "HEIGHT_DROPDOWN",
     defaultValue: defaults2 == null ? void 0 : defaults2.minHeight,
     defaultOnAdd: defaultsOnAdd == null ? void 0 : defaultsOnAdd.minHeight,
-    isVisible: function(s3) {
-      var _a2;
-      const hideHeight = ((_a2 = this == null ? void 0 : this.height) == null ? void 0 : _a2.mode) === "px";
-      return Boolean(
-        (showMinHeight ? showMinHeight == null ? void 0 : showMinHeight.call(this, s3) : true) && !hideHeight
-      );
-    }
+    isVisible: showMinHeight
   });
   const maxHeightProperty = getSizeProp({
     label: "Max height",
     controlType: "HEIGHT_DROPDOWN",
     defaultValue: defaults2 == null ? void 0 : defaults2.maxHeight,
     defaultOnAdd: defaultsOnAdd == null ? void 0 : defaultsOnAdd.maxHeight,
-    isVisible: function(s3) {
-      var _a2;
-      const hideHeight = ((_a2 = this == null ? void 0 : this.height) == null ? void 0 : _a2.mode) === "px";
-      return Boolean(
-        (showMaxHeight ? showMaxHeight == null ? void 0 : showMaxHeight.call(this, s3) : true) && !hideHeight
-      );
-    }
+    isVisible: showMaxHeight
   });
   let heightProperty = Prop.dimension().readAndWrite().propertiesPanel({
     label: "Height",
@@ -117682,18 +117530,12 @@ const AddSectionButton = ({
   sectionInstanceId
 }) => {
   const indexForNewSection = placement === "above" ? indexForBaseSection : indexForBaseSection + 1;
-  const createSection = useCallback(async () => {
-    const newSectionSourceId = await createComponent({
+  const createSection = useCallback(() => {
+    createComponent({
       componentType: "SbSection",
       parent: { id: sectionParentSourceId, index: indexForNewSection },
       scopeName: sectionParentScopeName
     });
-    if (newSectionSourceId) {
-      const newSectionInstanceId = getEditStore().runtimeEntitiesManager.widgets.getAnyInstanceIdForSourceId(
-        newSectionSourceId
-      );
-      getEditStore().ui.selectWidget(newSectionInstanceId);
-    }
   }, [sectionParentSourceId, indexForNewSection, sectionParentScopeName]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Wrapper$2,
@@ -119181,7 +119023,7 @@ function useTypographyStyling({
   };
 }
 const DEFAULT_ICON_SPACING = 8;
-const DEFAULT_ICON_SIZE = 16;
+const DEFAULT_ICON_SIZE$1 = 16;
 const ICON_POSITION_OPTIONS = [
   {
     icon: "ICON_LEFT_ALIGN",
@@ -119981,13 +119823,22 @@ const getStackChildStyle = ({
     (childProps == null ? void 0 : childProps.type) ?? ""
   ) ? Dim.fit() : Dim.fill());
   const widthCss = childCount === 1 && (width == null ? void 0 : width.mode) === "fill" && (parentWidth == null ? void 0 : parentWidth.mode) !== "fit" ? { width: "100%" } : dimToCSS(width, "width", primary === "width");
-  const widthInPx = (width == null ? void 0 : width.mode) === "px";
-  const heightInPx = (height == null ? void 0 : height.mode) === "px";
-  const shouldNotShrink = widthInPx && primary === "width" || heightInPx && primary === "height";
-  const minWidthCss = widthInPx ? {} : getMinMaxCss(childProps == null ? void 0 : childProps.minWidth, "minWidth");
-  const maxWidthCss = widthInPx ? {} : getMinMaxCss(childProps == null ? void 0 : childProps.maxWidth, "maxWidth");
-  const minHeightCss = heightInPx ? {} : getMinMaxCss(childProps == null ? void 0 : childProps.minHeight, "minHeight");
-  const maxHeightCss = heightInPx ? {} : getMinMaxCss(childProps == null ? void 0 : childProps.maxHeight, "maxHeight");
+  const minWidthCss = getMinMaxCss(
+    childProps == null ? void 0 : childProps.minWidth,
+    "minWidth"
+  );
+  const maxWidthCss = getMinMaxCss(
+    childProps == null ? void 0 : childProps.maxWidth,
+    "maxWidth"
+  );
+  const minHeightCss = getMinMaxCss(
+    childProps == null ? void 0 : childProps.minHeight,
+    "minHeight"
+  );
+  const maxHeightCss = getMinMaxCss(
+    childProps == null ? void 0 : childProps.maxHeight,
+    "maxHeight"
+  );
   const margin2 = (childProps == null ? void 0 : childProps.margin) ?? {
     top: Dim.px(0),
     bottom: Dim.px(0),
@@ -119997,7 +119848,6 @@ const getStackChildStyle = ({
   const marginCss = { margin: generatePaddingStyle(margin2) };
   const stickyCss = (childProps == null ? void 0 : childProps.sticky) ? { position: "sticky", top: "0px", zIndex: Layers$1.stickySections } : {};
   const style2 = {
-    ...shouldNotShrink ? { flexShrink: 0 } : {},
     ...heightCss,
     ...widthCss,
     ...minHeightCss,
@@ -120208,16 +120058,20 @@ const generateClassName = (seed2) => {
   return `superblocks_widget_${seed2}`;
 };
 const getCanvasClassName = () => "canvas";
+const getChildName = (child) => {
+  var _a2;
+  return ((_a2 = getBindingIdentifier(child.props.bind)) == null ? void 0 : _a2.entityName) ?? child.props[WIDGET_SOURCE_ID_ATTRIBUTE];
+};
 const calculateRowPositions = (orderedNames, childrenArray, rowHeight, pxHeights) => {
   return orderedNames.reduce(
     (acc, name) => {
       var _a2;
-      const child = childrenArray.find((child2) => child2.name === name);
+      const child = childrenArray.find((child2) => getChildName(child2) === name);
       if (!child) {
         return acc;
       }
-      const marginTopPx = (((_a2 = child.marginTop) == null ? void 0 : _a2.value) ?? 0) * rowHeight;
-      const constraintTop = child.constraintTop;
+      const marginTopPx = (((_a2 = child.props.marginTop) == null ? void 0 : _a2.value) ?? 0) * rowHeight;
+      const constraintTop = child.props.constraintTop;
       const bottomFunc = (name2) => {
         const topRow = acc[name2];
         const pxHeight = pxHeights[name2];
@@ -120242,16 +120096,16 @@ const calculateRowPositions = (orderedNames, childrenArray, rowHeight, pxHeights
 const orderConstraints = (children) => {
   const childrenMap = children.reduce(
     (acc, child) => {
-      acc[child.name] = child;
+      acc[getChildName(child)] = child;
       return acc;
     },
     {}
   );
   const constraintsMap = children.reduce(
     (acc, child) => {
-      if (child.constraintTop) {
-        const constraints = Array.isArray(child.constraintTop) ? child.constraintTop : [child.constraintTop];
-        acc[child.name] = constraints.filter(
+      if (child.props.constraintTop) {
+        const constraints = Array.isArray(child.props.constraintTop) ? child.props.constraintTop : [child.props.constraintTop];
+        acc[getChildName(child)] = constraints.filter(
           (constraint) => !!childrenMap[constraint]
         );
       }
@@ -120263,24 +120117,24 @@ const orderConstraints = (children) => {
   const foundItems = /* @__PURE__ */ new Set();
   const itemsLeft = /* @__PURE__ */ new Set();
   children.forEach((child) => {
-    const constraints = constraintsMap[child.name] ?? [];
+    const constraints = constraintsMap[getChildName(child)] ?? [];
     const hasNoConstraints = constraints.length === 0;
     if (hasNoConstraints) {
-      foundItems.add(child.name);
-      orderedNames.push(child.name);
+      foundItems.add(getChildName(child));
+      orderedNames.push(getChildName(child));
     } else {
       itemsLeft.add(child);
     }
   });
   while (itemsLeft.size > 0) {
     itemsLeft.forEach((child) => {
-      const constraints = constraintsMap[child.name] ?? [];
+      const constraints = constraintsMap[getChildName(child)] ?? [];
       const constraintsLeft = constraints.filter(
         (constraint) => !foundItems.has(constraint)
       );
       if (constraintsLeft.length === 0) {
-        foundItems.add(child.name);
-        orderedNames.push(child.name);
+        foundItems.add(getChildName(child));
+        orderedNames.push(getChildName(child));
         itemsLeft.delete(child);
       }
     });
@@ -120331,141 +120185,99 @@ const heightReducer = (state, action2) => {
   }
 };
 const EMPTY_ARRAY$1 = [];
-const GridChild = observer(
-  ({
-    childProps,
-    gridPositions,
-    rowHeight,
-    dispatchHeight,
-    childElement
-  }) => {
-    var _a2, _b2;
-    const heightMode = ((_a2 = childProps.height) == null ? void 0 : _a2.mode) ?? "fit";
-    const top2 = gridPositions[childProps.name].top;
-    const left2 = gridPositions[childProps.name].left;
-    const rows = gridPositions[childProps.name].height;
-    const columns = gridPositions[childProps.name].width;
+const InternalGrid = ({
+  children = EMPTY_ARRAY$1,
+  ...props2
+}) => {
+  var _a2, _b2;
+  const isEditing = Boolean((_a2 = rootStore.editStore) == null ? void 0 : _a2.isInitialized);
+  const { style: style2, ...passThroughProps } = usePassthroughProps(props2);
+  const rowHeight = ((_b2 = props2.rowHeight) == null ? void 0 : _b2.value) ?? 12;
+  const childrenArray = useMemo$2(() => {
+    let childrenArray2 = Array.isArray(children) ? children : [children];
+    if (!isEditing) {
+      childrenArray2 = childrenArray2.filter(
+        (child) => child.props.isVisible !== false
+      );
+    }
+    return childrenArray2;
+  }, [children, isEditing]);
+  const columns = props2.columns ?? 12;
+  const [pxHeights, dispatchHeight] = React__default.useReducer(heightReducer, {});
+  const gridPositions = useMemo$2(() => {
+    const orderedNames = orderConstraints(childrenArray);
+    const rowPos = calculateRowPositions(
+      orderedNames,
+      childrenArray,
+      rowHeight,
+      pxHeights
+    );
+    const positions = childrenArray.reduce(
+      (acc, child) => {
+        var _a3, _b3, _c2;
+        let width = ((_a3 = child.props.width) == null ? void 0 : _a3.value) ?? (child.type.sbType === "SbTable" || child.type.sbType === "SbContainer" ? 6 : 2);
+        if (((_b3 = child.props.width) == null ? void 0 : _b3.mode) === "fill") {
+          width = columns;
+        }
+        acc[getChildName(child)] = {
+          top: rowPos[getChildName(child)],
+          left: ((_c2 = child.props.marginLeft) == null ? void 0 : _c2.value) ?? 0,
+          width,
+          height: Math.ceil(pxHeights[getChildName(child)] / rowHeight)
+        };
+        return acc;
+      },
+      {}
+    );
+    return positions;
+  }, [columns, childrenArray, rowHeight, pxHeights]);
+  const gridStyle = React__default.useMemo(() => {
+    const spacingValue = 0;
+    const columnsSize = `calc(${100 / columns}% - ${(columns - 1) * spacingValue / columns}px)`;
+    return {
+      display: "grid",
+      gridAutoRows: `${rowHeight}px`,
+      gap: `${spacingValue}px`,
+      gridTemplateColumns: `repeat(${columns}, ${columnsSize})`,
+      ...style2
+    };
+  }, [columns, rowHeight, style2]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(DragDisplay, { passThroughProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: gridStyle, className: props2.className, children: childrenArray.map((child) => {
+    var _a3, _b3;
+    const heightMode = ((_a3 = child.props.height) == null ? void 0 : _a3.mode) ?? "fit";
+    const top2 = gridPositions[getChildName(child)].top;
+    const left2 = gridPositions[getChildName(child)].left;
+    const rows = gridPositions[getChildName(child)].height;
+    const columns2 = gridPositions[getChildName(child)].width;
     const Component3 = heightMode === "fit" ? MeasuredComponent : StaticComponent;
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
         style: {
           gridRow: `${top2 + 1} / span ${Math.max(1, rows)}`,
-          gridColumn: `${left2 + 1} / span ${Math.max(1, columns)}`,
+          gridColumn: `${left2 + 1} / span ${Math.max(1, columns2)}`,
           width: "100%",
           maxWidth: "100%"
         },
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           Component3,
           {
-            staticHeight: (((_b2 = childProps.height) == null ? void 0 : _b2.value) ?? 0) * rowHeight,
+            staticHeight: (((_b3 = child.props.height) == null ? void 0 : _b3.value) ?? 0) * rowHeight,
             onHeightChanged: (height) => {
               dispatchHeight({
                 type: "SET_HEIGHT",
-                name: childProps.name,
+                name: getChildName(child),
                 height
               });
             },
-            children: childElement
+            children: child
           }
         )
       },
-      childProps.name
+      getChildName(child)
     );
-  }
-);
-const InternalGrid = observer(
-  ({ children = EMPTY_ARRAY$1, ...props2 }) => {
-    var _a2;
-    const { style: style2, ...passThroughProps } = usePassthroughProps(props2);
-    const rowHeight = ((_a2 = props2.rowHeight) == null ? void 0 : _a2.value) ?? 12;
-    const childrenArray = useObserverMemo(() => {
-      var _a3;
-      const childrenArray2 = Array.isArray(children) ? children : [children];
-      const isEditing = Boolean((_a3 = rootStore.editStore) == null ? void 0 : _a3.isInitialized);
-      const withEvaluatedProps = childrenArray2.reduce((acc, child) => {
-        const bindingIdentifier = getBindingIdentifier(child.props.bind);
-        const entity = bindingIdentifier ? rootStore.entityManager.getEntity(bindingIdentifier.scopeId, {
-          value: bindingIdentifier.entityName,
-          isAnonymous: false
-        }) : null;
-        const marginTop = (entity == null ? void 0 : entity.marginTop) ?? (isDimension(child.props.marginTop) ? child.props.marginTop : void 0);
-        const marginLeft = (entity == null ? void 0 : entity.marginLeft) ?? (isDimension(child.props.marginLeft) ? child.props.marginLeft : void 0);
-        const width = (entity == null ? void 0 : entity.width) ?? (isDimension(child.props.width) ? child.props.width : void 0);
-        const height = (entity == null ? void 0 : entity.height) ?? (isDimension(child.props.height) ? child.props.height : void 0);
-        const constraintTop = (entity == null ? void 0 : entity.constraintTop) ?? child.props.constraintTop;
-        const isVisible2 = (entity == null ? void 0 : entity.isVisible) ?? child.props.isVisible;
-        const gridChild = {
-          marginTop,
-          marginLeft,
-          width,
-          height,
-          constraintTop,
-          name: (bindingIdentifier == null ? void 0 : bindingIdentifier.entityName) ?? child.props[WIDGET_SOURCE_ID_ATTRIBUTE],
-          // source ID as a fallback
-          sbType: isSbComponent(child) ? child.type.sbType : void 0,
-          element: child
-        };
-        if (isVisible2 !== false || isEditing) {
-          acc.push(gridChild);
-        }
-        return acc;
-      }, []);
-      return withEvaluatedProps;
-    }, [children]);
-    const columns = props2.columns ?? 12;
-    const [pxHeights, dispatchHeight] = React__default.useReducer(heightReducer, {});
-    const gridPositions = useMemo$2(() => {
-      const orderedNames = orderConstraints(childrenArray);
-      const rowPos = calculateRowPositions(
-        orderedNames,
-        childrenArray,
-        rowHeight,
-        pxHeights
-      );
-      const positions = childrenArray.reduce(
-        (acc, child) => {
-          var _a3, _b2, _c2;
-          let width = ((_a3 = child.width) == null ? void 0 : _a3.value) ?? (child.sbType === "SbTable" || child.sbType === "SbContainer" ? 6 : 2);
-          if (((_b2 = child.width) == null ? void 0 : _b2.mode) === "fill") {
-            width = columns;
-          }
-          acc[child.name] = {
-            top: rowPos[child.name],
-            left: ((_c2 = child.marginLeft) == null ? void 0 : _c2.value) ?? 0,
-            width,
-            height: Math.ceil(pxHeights[child.name] / rowHeight)
-          };
-          return acc;
-        },
-        {}
-      );
-      return positions;
-    }, [columns, childrenArray, rowHeight, pxHeights]);
-    const gridStyle = React__default.useMemo(() => {
-      const spacingValue = 0;
-      const columnsSize = `calc(${100 / columns}% - ${(columns - 1) * spacingValue / columns}px)`;
-      return {
-        display: "grid",
-        gridAutoRows: `${rowHeight}px`,
-        gap: `${spacingValue}px`,
-        gridTemplateColumns: `repeat(${columns}, ${columnsSize})`,
-        ...style2
-      };
-    }, [columns, rowHeight, style2]);
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(DragDisplay, { passThroughProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: gridStyle, className: props2.className, children: childrenArray.map((child) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-      GridChild,
-      {
-        childProps: child,
-        childElement: child.element,
-        gridPositions,
-        rowHeight,
-        dispatchHeight
-      },
-      child.name
-    )) }) });
-  }
-);
+  }) }) });
+};
 const DragDisplay = (props2) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
@@ -126389,9 +126201,9 @@ const getIconPositionStyle = ({
     right: offsetRight === "auto" ? offsetRight : `${offsetRight}px`
   };
 };
-const getIconPadding = (paddingValue = INPUT_PADDING.right, iconSize = DEFAULT_ICON_SIZE, withSpacing = true) => {
+const getIconPadding = (paddingValue = INPUT_PADDING.right, iconSize = DEFAULT_ICON_SIZE$1, withSpacing = true) => {
   const spacing2 = withSpacing ? DEFAULT_ICON_SPACING : 0;
-  const baseValue = iconSize ? iconSize + spacing2 : DEFAULT_ICON_SIZE;
+  const baseValue = iconSize ? iconSize + spacing2 : DEFAULT_ICON_SIZE$1;
   return Dim.px(baseValue + (paddingValue.value ?? 0));
 };
 const DEFAULT_LABEL_WIDTH_IN_PERCENT = 30;
@@ -127145,7 +126957,7 @@ const useInputIconSize = ({
       textStyleVariant: textStyle2.variant,
       defaultTextStyleVariant: DEFAULT_INPUT_TEXT_STYLE_VARIANT
     })
-  ) : DEFAULT_ICON_SIZE;
+  ) : DEFAULT_ICON_SIZE$1;
 };
 const useInputGroupStylingProps = (props2) => {
   const { theme } = useTheme$1();
@@ -127362,7 +127174,7 @@ const _InputComponent = class _InputComponent extends React__default.Component {
       (padding2, iconPosition, iconSize) => {
         var _a2, _b2;
         let adjustedForIcon = {};
-        const horizontalPadding = iconSize ? iconSize + DEFAULT_ICON_SPACING : DEFAULT_ICON_SIZE;
+        const horizontalPadding = iconSize ? iconSize + DEFAULT_ICON_SPACING : DEFAULT_ICON_SIZE$1;
         if (iconPosition === "left") {
           adjustedForIcon = {
             left: Dim.px(horizontalPadding + (((_a2 = padding2.left) == null ? void 0 : _a2.value) ?? 0))
@@ -127448,7 +127260,7 @@ const _InputComponent = class _InputComponent extends React__default.Component {
       );
     });
     __publicField(this, "passwordIconComponent", () => {
-      const iconSize = this.props.iconSize ?? DEFAULT_ICON_SIZE;
+      const iconSize = this.props.iconSize ?? DEFAULT_ICON_SIZE$1;
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
         Button$4,
         {
@@ -127505,7 +127317,7 @@ const _InputComponent = class _InputComponent extends React__default.Component {
     });
     __publicField(this, "renderInputComponent", (inputType) => isNumericInput(inputType) ? this.numericInputComponent() : this.textInputComponent());
     __publicField(this, "renderIcon", () => {
-      const iconSize = this.props.iconSize ?? DEFAULT_ICON_SIZE;
+      const iconSize = this.props.iconSize ?? DEFAULT_ICON_SIZE$1;
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
         "div",
         {
@@ -135072,7 +134884,7 @@ function requireButton() {
 }
 var buttonExports = /* @__PURE__ */ requireButton();
 const AntdButton = /* @__PURE__ */ getDefaultExportFromCjs(buttonExports);
-const StyledButton = qe$1(AntdButton)`
+const StyledButton$1 = qe$1(AntdButton)`
   color: ${(props2) => props2.color};
   ${({ $width }) => $width ? `width: ${$width}` : ""};
   ${({ $bordered }) => !$bordered ? "border: 0px;" : ""};
@@ -135087,7 +134899,7 @@ const Button$2 = memo(
   forwardRef(
     ({ bordered = true, width, children, ...buttonProps }, ref2) => {
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
-        StyledButton,
+        StyledButton$1,
         {
           $bordered: bordered,
           $width: width,
@@ -135868,7 +135680,8 @@ const RowDensity = {
 };
 const HorizontalAlignment = {
   left: "left",
-  right: "right"
+  right: "right",
+  center: "center"
 };
 const VerticalAlignment = {
   center: "center"
@@ -135985,7 +135798,7 @@ const PARSED_INPUT_TYPES = [
   EditInputType.Number,
   EditInputType.Checkbox
 ];
-[
+const TextBoxEditTypes = [
   EditInputType.Text,
   EditInputType.Number,
   EditInputType.Email
@@ -136087,26 +135900,15 @@ const tableColumnTypes = [
     value: ColumnType.EMAIL
   }
 ];
-const currentRowArg = (entity) => {
-  return {
-    name: "currentRow",
-    description: "Current row of the table. Use this to access the current row's data.",
-    type: "object",
-    schema: entity.tableData && Array.isArray(entity.tableData) && entity.tableData.length > 0 ? entity.tableData[0] : {}
-  };
-};
-const tableContextualArgs = function(entity) {
-  return [[currentRowArg(entity)]];
-};
 const cellIconProps = {
-  cellIcon: Prop.string().readAndWrite().contextual(tableContextualArgs).propertiesPanel({
+  cellIcon: Prop.string().readAndWrite().propertiesPanel({
     label: "Cell icon",
     controlType: "ICON_SELECTOR",
     isRemovable: true,
     visibility: "SHOW_NAME",
     defaultOnAdd: "info"
   }),
-  cellIconPosition: Prop.string().default("left").contextual(tableContextualArgs).readAndWrite().propertiesPanel({
+  cellIconPosition: Prop.string().default("left").readAndWrite().propertiesPanel({
     label: "Cell icon position",
     controlType: "RADIO_BUTTON_GROUP",
     options: [
@@ -136123,7 +135925,7 @@ const cellIconProps = {
     ]
   })
 };
-const horizontalAlignProp = () => Prop.string().readAndWrite().contextual(tableContextualArgs).propertiesPanel({
+const horizontalAlignProp = () => Prop.string().readAndWrite().propertiesPanel({
   label: "Horizontal alignment",
   controlType: "RADIO_BUTTON_GROUP",
   options: [
@@ -136132,7 +135934,7 @@ const horizontalAlignProp = () => Prop.string().readAndWrite().contextual(tableC
     { value: "right", icon: "RIGHT_ALIGN" }
   ]
 }).default("left");
-const verticalAlignProp = () => Prop.string().readAndWrite().contextual(tableContextualArgs).propertiesPanel({
+const verticalAlignProp = () => Prop.string().readAndWrite().propertiesPanel({
   label: "Vertical alignment",
   controlType: "RADIO_BUTTON_GROUP",
   options: [
@@ -136143,7 +135945,7 @@ const verticalAlignProp = () => Prop.string().readAndWrite().contextual(tableCon
 }).default("center");
 const cellBackgroundProp = colorProp({
   label: "Background color"
-}).contextual(tableContextualArgs).default(() => Theme.colors.neutral).readAndWrite();
+}).default(() => Theme.colors.neutral).readAndWrite();
 const textStyleProps = {
   horizontalAlign: horizontalAlignProp(),
   verticalAlign: verticalAlignProp(),
@@ -136151,7 +135953,7 @@ const textStyleProps = {
     propertiesPanel: {
       label: "Cell text style"
     }
-  }).contextual(tableContextualArgs).default(() => ({
+  }).default(() => ({
     variant: DEFAULT_CELL_TEXT_STYLE_VARIANT
   })),
   cellBackground: cellBackgroundProp
@@ -136166,22 +135968,22 @@ const computedValueUnion = Prop.union({
     },
     {
       isDerived: Prop.literal(true),
-      computedValue: Prop.string().contextual(tableContextualArgs).readAndWrite().propertiesPanel({
+      computedValue: Prop.string().readAndWrite().propertiesPanel({
         label: "Computed value"
+        // todo: add special control that can use currentRow
       })
     }
   ]
 }).getProps();
 const textColumnProperties = {
   general: {
-    displayedValue: Prop.string().contextual(tableContextualArgs).readAndWrite().propertiesPanel({
+    displayedValue: Prop.string().readAndWrite().propertiesPanel({
       label: "Displayed value",
       controlType: "COMPUTE_TABLE_VALUE"
     })
   },
   presentation: {
-    ...cellIconProps,
-    textWrap: Prop.boolean().contextual(tableContextualArgs).readAndWrite().propertiesPanel({
+    textWrap: Prop.boolean().readAndWrite().propertiesPanel({
       label: "Wrap text",
       controlType: "SWITCH"
     }),
@@ -136191,25 +135993,23 @@ const textColumnProperties = {
 const emailColumnProperties = { ...textColumnProperties };
 const buttonColumnProperties = {
   general: {
-    buttonLabel: Prop.string().default("Action").contextual(tableContextualArgs).readAndWrite().propertiesPanel({
+    buttonLabel: Prop.string().default("Action").readAndWrite().propertiesPanel({
       label: "Button label",
       controlType: "COMPUTE_TABLE_VALUE"
     }),
-    isDisabled: Prop.boolean().readAndWrite().contextual(tableContextualArgs).propertiesPanel({
+    isDisabled: Prop.boolean().readAndWrite().propertiesPanel({
       label: "Disabled",
       controlType: "SWITCH"
     })
   },
   presentation: {
-    buttonIcon: Prop.string().readAndWrite().contextual(tableContextualArgs).propertiesPanel({
+    buttonIcon: Prop.string().readAndWrite().propertiesPanel({
       label: "Button icon",
       controlType: "ICON_SELECTOR",
       isRemovable: true,
       visibility: "SHOW_NAME"
     }),
-    buttonIconPosition: Prop.string().readAndWrite().contextual(
-      tableContextualArgs
-    ).default("left").propertiesPanel({
+    buttonIconPosition: Prop.string().readAndWrite().default("left").propertiesPanel({
       label: "Cell icon position",
       controlType: "RADIO_BUTTON_GROUP",
       options: [
@@ -136225,9 +136025,7 @@ const buttonColumnProperties = {
         }
       ]
     }),
-    buttonVariant: Prop.string().default("primary").contextual(
-      tableContextualArgs
-    ).readAndWrite().propertiesPanel({
+    buttonVariant: Prop.string().default("primary").readAndWrite().propertiesPanel({
       label: "Button variant",
       controlType: "DROP_DOWN",
       options: [
@@ -136245,9 +136043,7 @@ const buttonColumnProperties = {
         }
       ]
     }),
-    buttonTextStyle: textStyleProp().contextual(
-      tableContextualArgs
-    ).default(function() {
+    buttonTextStyle: textStyleProp().default(function() {
       return {
         variant: "buttonLabel",
         textColor: {
@@ -136265,32 +136061,28 @@ const buttonColumnProperties = {
       defaultOnAdd: function() {
         return getButtonThemeDefaultBackgroundColor(Theme, "primary");
       }
-    }).contextual(
-      tableContextualArgs
-    ).readAndWrite(),
+    }).readAndWrite(),
     buttonBorder: border({
       defaultOnAdd: SECONDARY_BUTTON_BORDER_OBJECT,
       treatDefaultAsNull: function() {
         return true;
       }
-    }).readAndWrite().contextual(
-      tableContextualArgs
-    ).default(getDefaultBorderObject)
+    }).default(getDefaultBorderObject)
   }
 };
 const numberColumnProperties = {
   general: {
-    notation: Prop.string().readAndWrite().contextual(tableContextualArgs).propertiesPanel({
+    notation: Prop.string().readAndWrite().propertiesPanel({
       label: "Number format",
       controlType: "DROP_DOWN",
       options: NUMBER_FORMATTING_OPTIONS
     }),
-    minimumFractionDigits: Prop.number().contextual(tableContextualArgs).readAndWrite().propertiesPanel({
+    minimumFractionDigits: Prop.number().readAndWrite().propertiesPanel({
       label: "Minimum fraction digits",
       isRemovable: true,
       visibility: "SHOW_NAME"
     }),
-    maximumFractionDigits: Prop.number().contextual(tableContextualArgs).readAndWrite().propertiesPanel({
+    maximumFractionDigits: Prop.number().readAndWrite().propertiesPanel({
       label: "Maximum fraction digits",
       isRemovable: true,
       visibility: "SHOW_NAME"
@@ -136298,7 +136090,7 @@ const numberColumnProperties = {
   },
   presentation: {
     ...cellIconProps,
-    textWrap: Prop.boolean().contextual(tableContextualArgs).readAndWrite().propertiesPanel({
+    textWrap: Prop.boolean().readAndWrite().propertiesPanel({
       label: "Wrap text",
       controlType: "SWITCH"
     }),
@@ -136311,9 +136103,7 @@ const percentageColumnProperties = {
 };
 const currencyColumnProperties = {
   general: {
-    currency: Prop.string().default("USD").contextual(
-      tableContextualArgs
-    ).readAndWrite().propertiesPanel({
+    currency: Prop.string().default("USD").readAndWrite().propertiesPanel({
       label: "Currency",
       controlType: "DROP_DOWN",
       options: CurrencyList.map((currency) => ({
@@ -136327,11 +136117,12 @@ const currencyColumnProperties = {
 };
 const linkColumnProperties = {
   general: {
-    linkUrl: Prop.string().readAndWrite().contextual(tableContextualArgs).propertiesPanel({
-      label: "Link URL",
-      controlType: "COMPUTE_TABLE_VALUE"
-    }),
-    linkLabel: Prop.string().contextual(tableContextualArgs).readAndWrite().propertiesPanel({
+    // todo: re-add when we have a way to access currentRow
+    // linkUrl: Prop.string().readAndWrite().propertiesPanel({
+    //   label: "Link URL",
+    //   controlType: "COMPUTE_TABLE_VALUE",
+    // }),
+    linkLabel: Prop.string().readAndWrite().propertiesPanel({
       label: "Link label",
       controlType: "COMPUTE_TABLE_VALUE"
     })
@@ -136347,15 +136138,13 @@ const linkColumnProperties = {
 };
 const imageColumnProperties = {
   general: {
-    openImageUrl: Prop.boolean().contextual(tableContextualArgs).default(false).readAndWrite().propertiesPanel({
+    openImageUrl: Prop.boolean().default(false).readAndWrite().propertiesPanel({
       label: "Open URL on click",
       controlType: "SWITCH"
     })
   },
   presentation: {
-    imageSize: Prop.string().readAndWrite().contextual(
-      tableContextualArgs
-    ).propertiesPanel({
+    imageSize: Prop.string().readAndWrite().propertiesPanel({
       label: "Image sizing",
       controlType: "DROP_DOWN",
       options: [
@@ -136381,14 +136170,14 @@ const imageColumnProperties = {
         }
       ]
     }),
-    imageBorderRadius: borderRadius().contextual(tableContextualArgs),
-    horizontalAlign: horizontalAlignProp().contextual(tableContextualArgs),
+    imageBorderRadius: borderRadius(),
+    horizontalAlign: horizontalAlignProp(),
     cellBackground: cellBackgroundProp
   }
 };
 const manageTimezoneUnion = Prop.union({
   shared: {
-    manageTimezone: Prop.boolean().default(false).contextual(tableContextualArgs).readAndWrite().propertiesPanel({
+    manageTimezone: Prop.boolean().default(false).readAndWrite().propertiesPanel({
       label: "Manage timezone",
       controlType: "SWITCH"
     })
@@ -136399,12 +136188,12 @@ const manageTimezoneUnion = Prop.union({
     },
     {
       manageTimezone: Prop.literal(true),
-      valueTimezone: Prop.string().contextual(tableContextualArgs).readAndWrite().propertiesPanel({
+      valueTimezone: Prop.string().readAndWrite().propertiesPanel({
         label: "Value timezone",
         controlType: "DROP_DOWN",
         options: TIMEZONE_OPTIONS
       }),
-      displayTimezone: Prop.string().contextual(tableContextualArgs).readAndWrite().propertiesPanel({
+      displayTimezone: Prop.string().readAndWrite().propertiesPanel({
         label: "Display timezone",
         controlType: "DROP_DOWN",
         options: TIMEZONE_OPTIONS
@@ -136414,12 +136203,12 @@ const manageTimezoneUnion = Prop.union({
 }).getProps();
 const dateColumnProperties = {
   general: {
-    inputFormat: Prop.string().contextual(tableContextualArgs).readAndWrite().propertiesPanel({
+    inputFormat: Prop.string().readAndWrite().propertiesPanel({
       label: "Value format",
       controlType: "DROP_DOWN",
       options: DATE_INPUT_FORMATS
     }),
-    outputFormat: Prop.string().contextual(tableContextualArgs).readAndWrite().propertiesPanel({
+    outputFormat: Prop.string().readAndWrite().propertiesPanel({
       label: "Display format",
       controlType: "DROP_DOWN",
       options: DATE_OUTPUT_FORMATS
@@ -136428,7 +136217,7 @@ const dateColumnProperties = {
   },
   presentation: {
     ...cellIconProps,
-    textWrap: Prop.boolean().readAndWrite().contextual(tableContextualArgs).propertiesPanel({
+    textWrap: Prop.boolean().readAndWrite().propertiesPanel({
       label: "Wrap text",
       controlType: "SWITCH"
     }),
@@ -136484,7 +136273,7 @@ const tagsColumnProperties = {
     horizontalAlign: horizontalAlignProp(),
     verticalAlign: verticalAlignProp(),
     cellBackground: cellBackgroundProp,
-    tagsWrap: Prop.boolean().readAndWrite().contextual(tableContextualArgs).propertiesPanel({
+    tagsWrap: Prop.boolean().readAndWrite().propertiesPanel({
       label: "Wrap tags",
       controlType: "SWITCH"
     }),
@@ -138534,9 +138323,7 @@ const ColumnHeaderWrapper = qe$1.div`
   gap: 4px;
   justify-content: ${(props2) => {
   var _a2, _b2;
-  return ((_a2 = props2 == null ? void 0 : props2.columnProperties) == null ? void 0 : _a2.horizontalAlign) && JUSTIFY_CONTENT[getFirstPropertyValue(
-    (_b2 = props2 == null ? void 0 : props2.columnProperties) == null ? void 0 : _b2.horizontalAlign
-  ) ?? HorizontalAlignment.left];
+  return ((_a2 = props2 == null ? void 0 : props2.columnProperties) == null ? void 0 : _a2.horizontalAlign) && JUSTIFY_CONTENT[(_b2 = props2 == null ? void 0 : props2.columnProperties) == null ? void 0 : _b2.horizontalAlign];
 }};
   align-items: center;
   overflow: hidden;
@@ -138551,9 +138338,7 @@ const HeaderCellContentWrapper = qe$1.div`
   flex: 1;
   justify-content: ${(props2) => {
   var _a2, _b2;
-  return ((_a2 = props2 == null ? void 0 : props2.columnProperties) == null ? void 0 : _a2.horizontalAlign) && JUSTIFY_CONTENT[getFirstPropertyValue(
-    (_b2 = props2 == null ? void 0 : props2.columnProperties) == null ? void 0 : _b2.horizontalAlign
-  ) ?? HorizontalAlignment.left];
+  return ((_a2 = props2 == null ? void 0 : props2.columnProperties) == null ? void 0 : _a2.horizontalAlign) && JUSTIFY_CONTENT[(_b2 = props2 == null ? void 0 : props2.columnProperties) == null ? void 0 : _b2.horizontalAlign];
 }};
 `;
 const TableIconWrapper = qe$1.div`
@@ -145727,14 +145512,14 @@ function getLoaderFn(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-okzKZ8ZK.js"
+            "./allPathsLoader-B3Ii4JGL.js"
           )];
         case 2:
           return [2, _b2.sent().allPathsLoader];
         case 3:
           return [4, import(
             /* webpackChunkName: "blueprint-icons-split-paths-by-size-loader" */
-            "./splitPathsBySizeLoader-DOjF2YSu.js"
+            "./splitPathsBySizeLoader-Btq5cpt-.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -153567,7 +153352,7 @@ const getClearableIconRight = memoizeOne$1(
     }
     const iconPadding = getIconPadding(
       inputPadding == null ? void 0 : inputPadding.right,
-      iconSize ?? DEFAULT_ICON_SIZE,
+      iconSize ?? DEFAULT_ICON_SIZE$1,
       false
     );
     return iconPadding.value;
@@ -154081,7 +153866,7 @@ class DatePickerComponent extends React__default.Component {
                                   DynamicSVG,
                                   {
                                     iconName: this.props.icon,
-                                    size: this.props.iconSize ?? DEFAULT_ICON_SIZE
+                                    size: this.props.iconSize ?? DEFAULT_ICON_SIZE$1
                                   }
                                 )
                               }
@@ -154114,6 +153899,258 @@ class DatePickerComponent extends React__default.Component {
     );
   }
 }
+const DEFAULT_ICON_SIZE = 18;
+const DropdownEntireObjectOption$1 = "$$ENTIRE_OBJECT";
+const INVALID_LABEL_MSG = "Invalid label, should be a string";
+const extractDropdownOptions = (options, transformation) => {
+  let opts = options;
+  if (!Array.isArray(options)) {
+    opts = [options];
+  }
+  let defaultLabelKey;
+  const useEntireObjectAsValue = (transformation == null ? void 0 : transformation.value) === DropdownEntireObjectOption$1;
+  const optionWithDefaultKey = (option) => {
+    var _a2;
+    if (defaultLabelKey) {
+      return {
+        label: typeof option[defaultLabelKey] === "object" ? INVALID_LABEL_MSG : option[defaultLabelKey],
+        value: option
+      };
+    } else {
+      defaultLabelKey = (_a2 = Object.keys(option).sort()) == null ? void 0 : _a2[0];
+      return {
+        label: typeof option[defaultLabelKey] === "object" ? INVALID_LABEL_MSG : option[defaultLabelKey],
+        value: option
+      };
+    }
+  };
+  return opts.map((option) => {
+    if (!option) {
+      return null;
+    }
+    if (typeof option !== "object") {
+      return { label: option, value: option };
+    }
+    if (transformation) {
+      if (option[transformation.label] == null || !useEntireObjectAsValue && option[transformation.value] == null) {
+        return optionWithDefaultKey(option);
+      }
+      return {
+        label: typeof option[transformation.label] === "object" ? INVALID_LABEL_MSG : option[transformation.label],
+        value: useEntireObjectAsValue ? option : option[transformation.value]
+      };
+    }
+    if (option.label == null || option.value == null) {
+      return optionWithDefaultKey(option);
+    }
+    return option;
+  }).filter((opt) => opt && opt.value != null && opt.label != null);
+};
+const CellStyle = Ae$1`
+  border-radius: 4px;
+  z-index: 3;
+  ${({ $position }) => {
+  return Ae$1`
+      width: ${($position == null ? void 0 : $position.width) ? ($position == null ? void 0 : $position.width) - 2 : ""}px;
+    `;
+}};
+  box-shadow:
+    0px 0px 1px rgba(27, 30, 34, 0.24),
+    0px 1px 3px rgba(27, 30, 34, 0.12),
+    0px 12px 24px rgba(27, 30, 34, 0.12);
+  .bp5-control-group:not(.bp5-vertical) > *:not(.bp5-divider) {
+    margin-right: 0px;
+  }
+  .bp5-control-group {
+    // TODO(wylie): Follow the instructions here for removing .bp5-popover-wrapper
+    // https://github.com/palantir/blueprint/wiki/Popover2-migration
+    .bp5-input-group::before {
+      top: 2px;
+      height: 100%;
+    }
+  }
+  &&& {
+    .bp5-input,
+    .bp5-multi-select {
+      border: none !important; // blueprint border style is important, need to override
+      .bp5-tag-input-values {
+        margin-top: 0px;
+      }
+    }
+  }
+
+  &&&&& {
+    .bp5-tag {
+      margin-top: 1px;
+    }
+  }
+
+  position: absolute;
+  top: 0px;
+  left: 0px;
+`;
+const InputCellWrapper = qe$1.div`
+  ${CellStyle}
+  position: absolute;
+  top: 0;
+  left: 0;
+  &&&&& {
+    textarea {
+      padding-top: 0px;
+      padding-bottom: 0px;
+    }
+    input {
+      ${(props2) => {
+  var _a2, _b2;
+  const height = ((_a2 = props2.$position) == null ? void 0 : _a2.height) != null ? (_b2 = props2.$position) == null ? void 0 : _b2.height : 0;
+  if (height) {
+    return `height: ${height}px;`;
+  }
+}}
+    }
+    textarea,
+    input {
+      padding-left: 10px;
+      min-height: ${({ $position, $rowDensity }) => {
+  const minHeight = ($position == null ? void 0 : $position.height) != null ? ($position == null ? void 0 : $position.height) - TABLE_SIZES[$rowDensity].ROW_PADDING * 2 : 0;
+  return `${minHeight}px`;
+}};
+      text-align: ${(props2) => {
+  var _a2;
+  if ((_a2 = props2 == null ? void 0 : props2.cellProperties) == null ? void 0 : _a2.horizontalAlign) {
+    return TEXT_ALIGN[props2.cellProperties.horizontalAlign];
+  }
+}};
+      font-size: ${(props2) => {
+  return `${TABLE_SIZES[props2.$rowDensity].ROW_FONT_SIZE}px`;
+}};
+      line-height: 1.5;
+      border: none;
+      &:focus {
+        border: none;
+        box-shadow: none;
+      }
+    }
+  }
+`;
+const DropdownCellWrapper = qe$1.div`
+  ${CellStyle};
+  height: 100%;
+  .${CONTROL_GROUP} {
+    height: 100%;
+  }
+
+  &&&&& .${POPOVER_OPEN$1} input {
+    ${({ clearable }) => clearable && "padding-right: 50px"}
+  }
+
+  .dropdown-wrapper {
+    height: 100%;
+    *:not(.${CLASS_NAMES.DROPDOWN_CLEAR_ICON}) {
+      height: 100%;
+    }
+    .${CLASS_NAMES.INPUT}::before {
+      top: calc(50% + 1px);
+      transform: translateY(-50%);
+      height: ${DEFAULT_ICON_SIZE}px;
+    }
+
+    input {
+      height: 100%;
+    }
+  }
+`;
+const DateCellWrapper = qe$1(DropdownCellWrapper)`
+  ${CellStyle}
+  height: 100%;
+  .${CONTROL_GROUP} {
+    height: 100%;
+  }
+  .${POPOVER_TARGET$1} {
+    height: 100%;
+    * {
+      height: 100%;
+    }
+  }
+  &&&&& {
+    input {
+      height: 100%;
+      min-height: 100%;
+      top: 0px;
+      padding-top: 0px;
+      padding-bottom: 0px;
+    }
+  }
+`;
+const EditDateCell = (props2) => {
+  const { value, editProps, inputPosition } = props2;
+  const { handleEditStop, editMinDate, editMaxDate, editTwentyFourHourTime } = editProps;
+  const {
+    inputFormat,
+    outputFormat,
+    timezone,
+    manageTimezone,
+    displayTimezone
+  } = props2.cellProps;
+  const [date4, setDate2] = useState(value);
+  const [closed, setClosed] = useState(false);
+  const handleDateChange = useCallback(
+    (date22) => {
+      setDate2(date22);
+    },
+    [setDate2]
+  );
+  const handleDatepickerClose = useCallback(() => {
+    if (closed) return;
+    setClosed(true);
+    handleEditStop({ shouldSave: true, value: date4, validationErrors: [] });
+  }, [handleEditStop, closed, date4]);
+  useEffect(() => {
+    return () => {
+      handleEditStop({ shouldSave: false });
+    };
+  }, []);
+  const formattedMinDate = useMemo$2(() => {
+    if (editMinDate) {
+      return hooks(editMinDate, ISO_DATE_FORMAT).format(ISO_DATE_FORMAT);
+    }
+  }, [editMinDate]);
+  const formattedMaxDate = useMemo$2(() => {
+    if (editMaxDate) {
+      return hooks(editMaxDate, ISO_DATE_FORMAT).format(ISO_DATE_FORMAT);
+    }
+  }, [editMaxDate]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    DateCellWrapper,
+    {
+      $position: inputPosition,
+      $rowDensity: props2.rowDensity,
+      cellProperties: props2.cellProps.cellProperties,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        DatePickerComponent,
+        {
+          label: "",
+          dateFormat: inputFormat,
+          displayDateFormat: outputFormat,
+          datePickerType: DatePickerType.DATE_PICKER,
+          onDateSelected: handleDateChange,
+          isLoading: false,
+          isDisabled: false,
+          selectedDate: date4,
+          forceOpen: true,
+          onDatePickerClosed: handleDatepickerClose,
+          use24HourTime: editTwentyFourHourTime ?? true,
+          minDate: formattedMinDate,
+          maxDate: formattedMaxDate,
+          timezone: manageTimezone ? timezone : void 0,
+          displayTimezone: manageTimezone ? displayTimezone : void 0,
+          showTimezone: false,
+          errorMessagePlacement: "tooltip"
+        }
+      )
+    }
+  );
+};
 function usePointerDownOutside({
   wrapperRefs,
   wrapperIds,
@@ -154160,6 +154197,385 @@ function usePointerDownOutside({
     };
   }, [wrapperRefs, wrapperIds, wrapperSelectors, onClickOutside]);
 }
+const EditInputCell = (props2) => {
+  var _a2, _b2, _c2;
+  const { value, editProps, targetCellRef, inputPosition } = props2;
+  const {
+    handleEditStop,
+    editInputType,
+    editCustomValidationRule,
+    editCustomErrorMessage,
+    editMaxLength,
+    editMinLength,
+    editIsRequired,
+    handleEditChange
+  } = editProps;
+  const [inputValue, setInputValue] = useState(
+    typeof value === "object" && value ? JSON.stringify(value, null, 2) : value
+  );
+  const inputMemo = useRef(inputValue);
+  const [validationErrors, setValidationErrors] = useState([]);
+  const inputWrapperRef = useRef(null);
+  const validateValue = useCallback(
+    (toValidate) => {
+      const errors2 = getInputValidationErrors({
+        inputType: editInputType ?? "TEXT",
+        text: String(toValidate ?? ""),
+        emailRegex: new RegExp(`^${EmailRegexString}$`),
+        customValidationRule: String(editCustomValidationRule),
+        customErrorMessage: editCustomErrorMessage,
+        maxLength: editMaxLength,
+        minLength: editMinLength,
+        isRequired: editIsRequired ?? false
+      });
+      const validationErrors2 = getErrorMessages(errors2);
+      setValidationErrors(validationErrors2);
+      return validationErrors2;
+    },
+    [
+      editInputType,
+      editCustomValidationRule,
+      editCustomErrorMessage,
+      editMaxLength,
+      editMinLength,
+      editIsRequired
+    ]
+  );
+  useEffect(() => {
+    validateValue(inputMemo.current);
+  }, [validateValue]);
+  const debouncedValidation = c(validateValue, 50);
+  const handleValueChange = useCallback(
+    (val) => {
+      setInputValue(val);
+      inputMemo.current = val;
+      handleEditChange(val);
+      debouncedValidation(val);
+    },
+    [debouncedValidation, handleEditChange]
+  );
+  const handleKeyDown = useCallback(
+    (e3) => {
+      if (e3.key === "Enter") {
+        e3.preventDefault();
+        const errors2 = validateValue(inputMemo.current);
+        handleEditStop({
+          shouldSave: true,
+          value: inputMemo.current,
+          validationErrors: errors2
+        });
+      }
+      if (e3.key !== "Tab" && e3.key !== "Escape" && e3.key !== "Enter") {
+        e3.stopPropagation();
+      }
+    },
+    [handleEditStop, validateValue]
+  );
+  const saveChange = useCallback(() => {
+    handleEditStop({
+      shouldSave: true,
+      value: inputValue,
+      validationErrors
+    });
+  }, [handleEditStop, inputValue, validationErrors]);
+  usePointerDownOutside({
+    wrapperRefs: [inputWrapperRef],
+    wrapperSelectors: ["[data-test=table-edit-input]"],
+    onClickOutside: saveChange
+  });
+  useEffect(() => {
+    return () => {
+      handleEditStop({ shouldSave: false });
+    };
+  }, []);
+  if (!targetCellRef.current || typeof (inputPosition == null ? void 0 : inputPosition.top) === "undefined" || // Validate that the intended element exists
+  !((_c2 = (_b2 = (_a2 = targetCellRef.current.childNodes) == null ? void 0 : _a2[0]) == null ? void 0 : _b2.getAttribute) == null ? void 0 : _c2.call(
+    _b2,
+    "data-superblocks"
+  ))) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Popper,
+    {
+      targetNode: targetCellRef.current.childNodes[0],
+      isOpen: true,
+      placement: "auto",
+      useDefaultModifiers: false,
+      zIndex: 1,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        InputCellWrapper,
+        {
+          "data-test": `table-edit-input`,
+          $position: inputPosition,
+          $rowDensity: props2.rowDensity,
+          cellProperties: props2.cellProps.cellProperties,
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "input",
+            {
+              value: inputValue,
+              onChange: handleValueChange,
+              onKeyDown: handleKeyDown
+            }
+          )
+        }
+      )
+    }
+  );
+};
+const EditMultiSelectCell = (props2) => {
+  const dropdownRef = useRef(null);
+  const { editProps, inputPosition, cellProps } = props2;
+  const {
+    currentEditValue,
+    handleEditStop,
+    handleEditChange,
+    editIsRequired,
+    editOptions = [],
+    transformation,
+    onDropdownSearchTextChanged
+    // editDropdownClientSideFiltering,
+    // currentEditDropdownSearchText,
+    // dropdownOptionsLoading,
+  } = editProps;
+  const selectedOptions = useMemo$2(() => {
+    return Array.isArray(currentEditValue) ? currentEditValue : currentEditValue != null ? [currentEditValue] : [];
+  }, [currentEditValue]);
+  const transformedEditOptions = useMemo$2(() => {
+    return extractDropdownOptions(editOptions, transformation);
+  }, [editOptions, transformation]);
+  useMemo$2(() => {
+    return selectedOptions ? selectedOptions.map((o) => lodashExports.findIndex(transformedEditOptions, { value: o })).filter((ind) => ind !== -1) : [];
+  }, [selectedOptions, transformedEditOptions]);
+  useCallback(
+    (selectedOption) => {
+      if (selectedOption) {
+        const isAlreadySelected = selectedOptions.includes(
+          selectedOption.value
+        );
+        if (!isAlreadySelected) {
+          handleEditChange(
+            [...selectedOptions, selectedOption.value],
+            [
+              {
+                label: selectedOption.label,
+                value: JSON.stringify(selectedOption.value)
+              }
+            ]
+          );
+        } else {
+          handleEditChange(
+            selectedOptions.filter(
+              (opt) => opt !== selectedOption.value,
+              [selectedOption]
+            )
+          );
+        }
+      }
+    },
+    [handleEditChange, selectedOptions]
+  );
+  useCallback(
+    (removedIndex) => {
+      const newSelectedValues = selectedOptions.filter(
+        (value) => lodashExports.findIndex(transformedEditOptions, { value }) !== removedIndex
+      );
+      handleEditChange(newSelectedValues);
+    },
+    [handleEditChange, selectedOptions, transformedEditOptions]
+  );
+  useCallback(
+    (options) => {
+      handleEditChange(
+        options.map(({ value }) => value),
+        options.map((val) => ({ ...val, value: JSON.stringify(val.value) }))
+      );
+    },
+    [handleEditChange]
+  );
+  useCallback(
+    (query) => {
+      onDropdownSearchTextChanged == null ? void 0 : onDropdownSearchTextChanged(query);
+    },
+    [onDropdownSearchTextChanged]
+  );
+  const handleDropdownClose = useCallback(() => {
+    const validationErrors = selectedOptions.length === 0 && editIsRequired ? ["This field is required"] : [];
+    handleEditStop({
+      shouldSave: true,
+      value: selectedOptions,
+      validationErrors
+    });
+  }, [handleEditStop, selectedOptions, editIsRequired]);
+  usePointerDownOutside({
+    onClickOutside: handleDropdownClose,
+    wrapperRefs: [dropdownRef],
+    wrapperSelectors: [".bp5-multi-select-popover"]
+  });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    DropdownCellWrapper,
+    {
+      $position: inputPosition,
+      $rowDensity: props2.rowDensity,
+      ref: dropdownRef,
+      cellProperties: cellProps.cellProperties
+    }
+  );
+};
+const EditSingleSelectCell = (props2) => {
+  const { value, editProps, inputPosition } = props2;
+  const {
+    handleEditStop,
+    // editIsRequired,
+    editOptions = [],
+    transformation,
+    onDropdownSearchTextChanged,
+    editDropdownClientSideFiltering,
+    // currentEditDropdownSearchText,
+    // dropdownOptionsLoading,
+    allowClearing
+  } = editProps;
+  const transformedEditOptions = useMemo$2(() => {
+    return extractDropdownOptions(editOptions, transformation);
+  }, [editOptions, transformation]);
+  useMemo$2(() => {
+    return transformedEditOptions.findIndex((opt) => opt.value === value);
+  }, [value, transformedEditOptions]);
+  useCallback(
+    (val) => {
+      handleEditStop({
+        shouldSave: true,
+        value: val == null ? void 0 : val.value,
+        validationErrors: [],
+        dropdownOption: {
+          ...val,
+          value: (val == null ? void 0 : val.value) ? JSON.stringify(val == null ? void 0 : val.value) : ""
+        }
+      });
+    },
+    [handleEditStop]
+  );
+  useCallback(
+    (query) => {
+      onDropdownSearchTextChanged == null ? void 0 : onDropdownSearchTextChanged(query);
+    },
+    [onDropdownSearchTextChanged]
+  );
+  useEffect(() => {
+    return () => {
+      if (editDropdownClientSideFiltering) {
+        handleEditStop({ shouldSave: false });
+      }
+    };
+  }, [editDropdownClientSideFiltering]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    DropdownCellWrapper,
+    {
+      $rowDensity: props2.rowDensity,
+      cellProperties: props2.cellProps.cellProperties,
+      $position: inputPosition,
+      clearable: allowClearing
+    }
+  );
+};
+const useGetInputPosition = (tableEl, cellEl) => {
+  const firstRender = useRef(true);
+  const [tableRect, setTableRect] = useState();
+  const [cellRect, setCellRect] = useState();
+  const measureTable = useCallback(() => {
+    if (tableEl) {
+      setTableRect(tableEl.getBoundingClientRect());
+    }
+  }, [tableEl]);
+  const measureCell = useCallback(() => {
+    if (cellEl) {
+      setCellRect(cellEl.getBoundingClientRect());
+    }
+  }, [cellEl]);
+  const measureCellAndTable = useCallback(() => {
+    measureCell();
+    measureTable();
+  }, [measureCell, measureTable]);
+  const debouncedMeasureCellAndTable = c(
+    measureCellAndTable,
+    10
+  );
+  const debouncedMeasureCell = c(measureCell, 10);
+  useLayoutEffect$2(measureTable, [measureTable]);
+  useLayoutEffect$2(measureCell, [measureCell]);
+  if (firstRender.current) {
+    firstRender.current = false;
+    measureTable();
+    measureCell();
+  }
+  useEffect(() => {
+    if (debouncedMeasureCell) {
+      tableEl == null ? void 0 : tableEl.addEventListener("scroll", debouncedMeasureCell);
+    }
+    return () => {
+      if (debouncedMeasureCell) {
+        tableEl == null ? void 0 : tableEl.removeEventListener("scroll", debouncedMeasureCell);
+      }
+    };
+  }, [tableEl, debouncedMeasureCell]);
+  useResizeObserver(
+    tableEl,
+    debouncedMeasureCellAndTable ?? measureCellAndTable
+  );
+  useResizeObserver(cellEl, debouncedMeasureCell ?? measureCell);
+  const top2 = cellRect && tableRect && tableEl ? cellRect.top - tableRect.top + tableEl.scrollTop : void 0;
+  const left2 = cellRect && tableRect && tableEl ? cellRect.left - tableRect.left + tableEl.scrollLeft : void 0;
+  return {
+    width: (cellRect == null ? void 0 : cellRect.width) && left2 === 0 ? (cellRect == null ? void 0 : cellRect.width) - 10 : cellRect == null ? void 0 : cellRect.width,
+    height: cellRect == null ? void 0 : cellRect.height,
+    top: top2,
+    left: left2 === 0 ? 10 : left2,
+    maxHeight: tableRect && top2 ? (tableRect == null ? void 0 : tableRect.height) - top2 : void 0
+  };
+};
+const EditCell = (props2) => {
+  var _a2;
+  const tableRef = useRef(
+    document == null ? void 0 : document.querySelector(
+      `[data-test=table-component-${props2.tableName}] tbody`
+    )
+  );
+  const inputPosition = useGetInputPosition(
+    tableRef == null ? void 0 : tableRef.current,
+    (_a2 = props2.targetCellRef) == null ? void 0 : _a2.current
+  );
+  const propsToPass = useMemo$2(() => {
+    return {
+      editProps: props2.editProps,
+      value: props2.value,
+      rowDensity: props2.rowDensity,
+      cellProps: props2.cellProps,
+      inputPosition,
+      theme: props2.theme
+    };
+  }, [
+    inputPosition,
+    props2.cellProps,
+    props2.rowDensity,
+    props2.editProps,
+    props2.value,
+    props2.theme
+  ]);
+  switch (props2.editProps.editInputType) {
+    case EditInputType.Dropdown:
+      if (props2.editProps.editMultiSelect) {
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(EditMultiSelectCell, { ...propsToPass });
+      }
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(EditSingleSelectCell, { ...propsToPass });
+    case EditInputType.Date:
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(EditDateCell, { ...propsToPass });
+    case EditInputType.Email:
+    case EditInputType.Number:
+    case EditInputType.Text:
+    default:
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(EditInputCell, { ...propsToPass, targetCellRef: props2.targetCellRef });
+  }
+};
 const CheckboxInput = ({
   isChecked,
   isDisabled,
@@ -154210,6 +154626,279 @@ const CheckboxInput = ({
     }
   );
 };
+const StyledCellWrapper = qe$1(CellWrapper)`
+  ${(props2) => {
+  var _a2, _b2;
+  return ((_a2 = props2 == null ? void 0 : props2.cellProperties) == null ? void 0 : _a2.horizontalAlign) === HorizontalAlignment.right ? "padding-right: 10px;" : ((_b2 = props2 == null ? void 0 : props2.cellProperties) == null ? void 0 : _b2.horizontalAlign) === HorizontalAlignment.center ? "padding-left: 19px;" : "";
+}};
+
+  > div {
+    width: unset !important;
+  }
+
+  .checkbox-container {
+    display: none;
+  }
+
+  .read-mode-component {
+    display: flex;
+  }
+
+  &[data-is-focused="true"] {
+    .read-mode-component {
+      display: none;
+    }
+
+    .checkbox-container {
+      display: flex;
+    }
+  }
+
+  &:hover:not([data-is-focused="true"]) {
+    .read-mode-component {
+      display: none;
+    }
+
+    .checkbox-container {
+      display: flex;
+    }
+  }
+`;
+const EditCheckboxCell = (props2) => {
+  var _a2;
+  const {
+    value,
+    editProps,
+    readModeComponent,
+    isFocused: propsIsFocused
+  } = props2;
+  const { handleOneClickEdit } = editProps;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    StyledCellWrapper,
+    {
+      rowDensity: props2.rowDensity,
+      cellProperties: props2.cellProperties,
+      "data-is-focused": propsIsFocused,
+      "data-test": `edit-checkbox-active-${value}`,
+      style: {
+        height: ((_a2 = TABLE_SIZES == null ? void 0 : TABLE_SIZES[props2.rowDensity]) == null ? void 0 : _a2.ROW_HEIGHT) - 8
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: "read-mode-component",
+            "data-test": `edit-checkbox-${value}`,
+            style: {
+              height: "100%",
+              alignItems: "center"
+            },
+            children: readModeComponent
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          CheckboxInput,
+          {
+            isChecked: value,
+            isValid: true,
+            isDisabled: false,
+            onClick: handleOneClickEdit
+          }
+        )
+      ]
+    }
+  );
+};
+const LinkLike = qe$1.div`
+  cursor: pointer;
+`;
+const IconStyles = Ae$1`
+  height: ${({ rowDensity }) => {
+  var _a2;
+  return ((_a2 = TABLE_SIZES[rowDensity]) == null ? void 0 : _a2.LINK_MENU_HEIGHT) ?? 32;
+}}px;
+  padding: ${({ rowDensity }) => rowDensity === RowDensity["extra-small"] ? "7px" : rowDensity === RowDensity.small ? "9px" : "10px"};
+`;
+const StyledButton = qe$1(Button$5)`
+  border: none;
+  ${IconStyles}
+`;
+const LinkMenu = qe$1.div`
+  display: flex;
+  align-items: center;
+  a {
+    ${IconStyles}
+  }
+
+  svg > path {
+    fill: none !important;
+  }
+`;
+const OpenLinkButton = ({
+  url: url2,
+  openInNewTab,
+  rowDensity
+}) => {
+  var _a2, _b2, _c2, _d2;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$2, { title: "Open", children: openInNewTab === void 0 || openInNewTab === true ? (
+    // todo laura: ask omar about how linking should work
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "a",
+      {
+        href: url2,
+        target: "_blank",
+        "aria-disabled": true,
+        "data-test": "table-cell-link-open",
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          SvgExternalLink,
+          {
+            style: {
+              height: ((_a2 = TABLE_SIZES[rowDensity]) == null ? void 0 : _a2.LINK_MENU_ICON_SIZE) ?? 16,
+              width: ((_b2 = TABLE_SIZES[rowDensity]) == null ? void 0 : _b2.LINK_MENU_ICON_SIZE) ?? 16
+            }
+          }
+        )
+      }
+    )
+  ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+    PlainLink,
+    {
+      href: url2,
+      rel: "noreferrer nofollow",
+      target: "_parent",
+      "data-test": "table-cell-link-open",
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        SvgExternalLink,
+        {
+          style: {
+            height: ((_c2 = TABLE_SIZES[rowDensity]) == null ? void 0 : _c2.LINK_MENU_ICON_SIZE) ?? 16,
+            width: ((_d2 = TABLE_SIZES[rowDensity]) == null ? void 0 : _d2.LINK_MENU_ICON_SIZE) ?? 16
+          }
+        }
+      )
+    }
+  ) });
+};
+const EditableLinkCell = (props2) => {
+  const {
+    isHidden: isHidden2,
+    url: url2,
+    label,
+    openInNewTab,
+    isEdited,
+    value,
+    cellProperties,
+    rowDensity,
+    isFocused,
+    defaultValue: defaultValue2,
+    maxLinesPerRow,
+    isMultiselecting
+  } = props2;
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const cellRef = useRef(null);
+  const popperRef = useRef(null);
+  useEffect(() => {
+    if (isMenuOpen && !isFocused) {
+      setIsMenuOpen(false);
+    } else if (!isMenuOpen && isFocused) {
+      setIsMenuOpen(true);
+    }
+  }, [isFocused, isMenuOpen]);
+  const { cellTextStyle, horizontalAlign, verticalAlign, textWrap } = cellProperties;
+  const [className, styles] = useMemo$2(() => {
+    const options = {
+      canWrap: textWrap,
+      maxLines: maxLinesPerRow
+    };
+    return [
+      getCellClass(options),
+      {
+        ...getCellWrapStyles(options),
+        ...buildCellStyles({
+          cellTextStyle,
+          horizontalAlign,
+          verticalAlign
+        })
+      }
+    ];
+  }, [textWrap, maxLinesPerRow, cellTextStyle, horizontalAlign, verticalAlign]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    CellWrapper,
+    {
+      ref: cellRef,
+      isHidden: isHidden2,
+      cellProperties,
+      rowDensity,
+      className,
+      style: styles,
+      children: [
+        !value && defaultValue2 ? /* @__PURE__ */ jsxRuntimeExports.jsx(DefaultValueWrapper, { children: defaultValue2 }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+          LinkLike,
+          {
+            style: {
+              height: "100%",
+              display: "flex",
+              alignItems: "center"
+            },
+            className: CLASS_NAMES.LINK,
+            children: isEdited ? value : label
+          }
+        ),
+        isMenuOpen && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Popper,
+          {
+            zIndex: 3,
+            isOpen: isMenuOpen,
+            targetNode: cellRef.current || void 0,
+            placement: "bottom-start",
+            ref: popperRef,
+            children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              LinkMenu,
+              {
+                "data-test": "table-cell-link-menu",
+                rowDensity,
+                className: CLASS_NAMES.POPOVER_WRAPPER,
+                style: isMultiselecting ? {
+                  display: "none"
+                } : void 0,
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$2, { title: "Copy", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    StyledButton,
+                    {
+                      rowDensity,
+                      onClick: () => {
+                        copy$1(url2);
+                      },
+                      "data-test": "table-cell-link-copy",
+                      type: "link",
+                      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        SvgCopy,
+                        {
+                          style: {
+                            height: 16,
+                            width: 16
+                          }
+                        }
+                      )
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    OpenLinkButton,
+                    {
+                      url: url2,
+                      openInNewTab,
+                      rowDensity
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
 var lib = {};
 var players = {};
 var utils = {};
@@ -160494,7 +161183,7 @@ const formatByType = (value, type5, options) => {
       return text;
   }
 };
-qe$1.div`
+const StyledEditableDiv = qe$1.div`
   position: relative;
   height: 100%;
   width: 100%;
@@ -160518,20 +161207,20 @@ qe$1.div`
     }
   }
 `;
-qe$1.div`
+const EditableCellWrapper = qe$1.div`
   position: relative;
   height: 100%;
   width: 100%;
   padding: 0px;
 `;
-qe$1.div`
+const StyledCheckmarkWrapper = qe$1.div`
   position: relative;
   height: 100%;
   width: 100%;
   border-radius: 4px;
   overflow: hidden;
 `;
-qe$1.div`
+const EditMarker = qe$1.div`
   position: absolute;
   top: 0px;
   left: 0px;
@@ -160540,17 +161229,180 @@ qe$1.div`
   border-style: solid;
   border-width: 10px 10px 0 0;
 `;
-qe$1(SvgChevronDown)`
+const StyledChevronDown = qe$1(SvgChevronDown)`
   width: 16px;
   height: 16px;
   flex-shrink: 0;
   visibility: hidden;
 `;
-qe$1.div`
+const EditingCellWrapper = qe$1.div`
   width: 100%;
   height: 100%;
   position: relative;
 `;
+const EditableCell = (props2) => {
+  const cellRef = useRef(null);
+  const { theme } = props2;
+  const {
+    validationErrors,
+    isEdited,
+    isEditFocused,
+    handleEditStart,
+    editInputType
+  } = props2.editProps;
+  const isDropdownType = editInputType === EditInputType.Dropdown || editInputType === EditInputType.Date;
+  const onEditableCellClick = useCallback(() => {
+    if (!isEditFocused && isDropdownType) {
+      handleEditStart();
+    }
+  }, [isEditFocused, isDropdownType, handleEditStart]);
+  const onEditableCellDoubleClick = useCallback(
+    (e3) => {
+      if (!isEditFocused && !isDropdownType) {
+        e3.stopPropagation();
+        handleEditStart();
+      }
+    },
+    [handleEditStart, isDropdownType, isEditFocused]
+  );
+  if (editInputType === EditInputType.Checkbox) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(EditableCellWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(StyledCheckmarkWrapper, { className: "editable-cell", children: [
+      isEdited && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        EditMarker,
+        {
+          style: {
+            borderColor: `${theme.colors.primary500} transparent transparent transparent`,
+            top: (theme.defaultBorder.borderRadius.value ?? 0) > 8 ? 2 : 0,
+            left: (theme.defaultBorder.borderRadius.value ?? 0) > 8 ? 2 : 0
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        EditCheckboxCell,
+        {
+          editProps: props2.editProps,
+          value: props2.rawValue,
+          rowDensity: props2.rowDensity,
+          cellProperties: props2.cellProps.cellProperties,
+          isFocused: props2.cellProps.isFocused,
+          readModeComponent: renderCell({
+            value: props2.value,
+            columnType: props2.columnType,
+            cellProps: props2.cellProps,
+            position: props2.position,
+            theme
+          })
+        }
+      )
+    ] }) });
+  }
+  if (isEditFocused) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(EditingCellWrapper, { ref: cellRef, className: "editing-cell-wrapper", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          "data-superblocks": "table-editor",
+          style: { position: "absolute", top: 0, left: 0 }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { visibility: "hidden" }, children: renderCell({
+        value: props2.value,
+        columnType: props2.columnType,
+        cellProps: props2.cellProps,
+        position: props2.position,
+        maxLinesPerRow: props2.maxLinesPerRow,
+        theme
+      }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        EditCell,
+        {
+          targetCellRef: cellRef,
+          editProps: props2.editProps,
+          value: props2.editProps.editInputType && TextBoxEditTypes.includes(
+            props2.editProps.editInputType
+          ) ? props2.editProps.currentEditValue : props2.rawValue,
+          tableName: props2.tableName,
+          rowDensity: props2.rowDensity,
+          cellProps: props2.cellProps,
+          theme
+        }
+      )
+    ] });
+  }
+  const { linkUrl, linkLabel, openInNewTab } = props2.cellProps.cellProperties;
+  const defaultValue2 = props2.isInserted ? `Set ${props2.columnName}...` : "";
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    EditableCellWrapper,
+    {
+      onClick: onEditableCellClick,
+      onDoubleClick: onEditableCellDoubleClick,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        StyledEditableDiv,
+        {
+          $isValid: validationErrors.length === 0,
+          "data-test": props2.columnType === "link" ? `editable-link-${props2.tableName}-${props2.value}` : `editable-cell-${props2.tableName}-${props2.value}`,
+          className: `editable-cell ${isDropdownType ? "dropdown-preview" : ""}`,
+          "data-align": props2.cellProps.cellProperties.verticalAlign,
+          hoverColor: theme.colors.neutral,
+          style: {
+            borderRadius: styleFromDimension(theme.defaultBorder.borderRadius),
+            ...validationErrors.length === 0 ? {} : {
+              border: generateBorderStyle(theme.defaultBorder),
+              borderColor: theme.colors.danger
+            }
+          },
+          children: [
+            isEdited && /* @__PURE__ */ jsxRuntimeExports.jsx(
+              EditMarker,
+              {
+                style: {
+                  borderColor: `${theme.colors.primary500} transparent transparent transparent`,
+                  top: (theme.defaultBorder.borderRadius.value ?? 0) > 8 ? 2 : 0,
+                  left: (theme.defaultBorder.borderRadius.value ?? 0) > 8 ? 2 : 0
+                }
+              }
+            ),
+            props2.columnType === "link" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+              EditableLinkCell,
+              {
+                url: linkUrl ?? "",
+                label: linkLabel ?? linkUrl ?? "",
+                openInNewTab,
+                isHidden: props2.cellProps.isHidden,
+                isEdited,
+                value: props2.rawValue,
+                cellProperties: props2.cellProps.cellProperties,
+                rowDensity: props2.rowDensity,
+                isFocused: props2.cellProps.isFocused,
+                position: props2.position,
+                defaultValue: defaultValue2,
+                maxLinesPerRow: props2.maxLinesPerRow,
+                isMultiselecting: props2.cellProps.isMultiselecting
+              }
+            ) : renderCell({
+              value: props2.value,
+              columnType: props2.columnType,
+              editInputType: props2.editProps.editInputType,
+              cellProps: props2.cellProps,
+              position: props2.position,
+              defaultValue: defaultValue2,
+              maxLinesPerRow: props2.maxLinesPerRow,
+              theme
+            }),
+            (editInputType === EditInputType.Dropdown || editInputType === EditInputType.Date) && /* @__PURE__ */ jsxRuntimeExports.jsx(
+              StyledChevronDown,
+              {
+                style: {
+                  color: theme.colors.neutral300
+                }
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
 const getCellClassAndStyleMemo = lodashExports.memoize(
   (canWrap, maxLines, cellTextStyle, horizontalAlign, verticalAlign) => {
     const options = {
@@ -160572,13 +161424,18 @@ const getCellClassAndStyleMemo = lodashExports.memoize(
   // Custom resolver to create a unique key based on nested properties
   (...args) => JSON.stringify(args)
 );
-function getCellProperties(tableCellTextStyle, columnProperties, currentRow = {}) {
-  var _a2, _b2, _c2;
-  const cellProps = getPropertyValue(columnProperties.cellProps, currentRow);
-  const cellTextStyleColor = (_b2 = (_a2 = cellProps == null ? void 0 : cellProps.textStyle) == null ? void 0 : _a2.textColor) == null ? void 0 : _b2.default;
-  const cellTextStyleVariant = (_c2 = cellProps == null ? void 0 : cellProps.textStyle) == null ? void 0 : _c2.variant;
+function getCellProperties(tableCellTextStyle, columnProperties, rowIndex) {
+  var _a2, _b2, _c2, _d2, _e2, _f2;
+  const cellTextStyleVariant = getPropertyValue(
+    (_b2 = (_a2 = columnProperties.cellProps) == null ? void 0 : _a2.textStyle) == null ? void 0 : _b2.variant,
+    rowIndex
+  );
+  const cellTextStyleColor = getPropertyValue(
+    (_e2 = (_d2 = (_c2 = columnProperties.cellProps) == null ? void 0 : _c2.textStyle) == null ? void 0 : _d2.textColor) == null ? void 0 : _e2.default,
+    rowIndex
+  );
   const cellTextStyleForRow = {
-    ...cellProps == null ? void 0 : cellProps.textStyle,
+    ...(_f2 = columnProperties == null ? void 0 : columnProperties.cellProps) == null ? void 0 : _f2.textStyle,
     variant: cellTextStyleVariant,
     textColor: cellTextStyleColor ? {
       default: cellTextStyleColor
@@ -160586,92 +161443,95 @@ function getCellProperties(tableCellTextStyle, columnProperties, currentRow = {}
   };
   const cellTextStyle = cellTextStyleForRow ?? tableCellTextStyle;
   const cellProperties = {
-    isDisabled: getPropertyValue(columnProperties.isDisabled, currentRow),
+    isDisabled: getPropertyValue(columnProperties.isDisabled, rowIndex),
     horizontalAlign: getPropertyValue(
       columnProperties.horizontalAlign,
-      currentRow
-    ),
-    verticalAlign: getPropertyValue(columnProperties.verticalAlign, currentRow),
-    cellBackground: getPropertyValue(
-      columnProperties.cellBackground,
-      currentRow
+      rowIndex
     ),
+    verticalAlign: getPropertyValue(columnProperties.verticalAlign, rowIndex),
+    cellBackground: getPropertyValue(columnProperties.cellBackground, rowIndex),
     buttonBackgroundColor: getPropertyValue(
       columnProperties.buttonBackgroundColor,
-      currentRow
+      rowIndex
     ),
-    buttonBorder: getPropertyValue(columnProperties.buttonBorder, currentRow),
-    buttonVariant: getPropertyValue(columnProperties.buttonVariant, currentRow),
+    buttonBorder: getPropertyValue(
+      columnProperties.buttonBorder,
+      rowIndex,
+      true
+    ),
+    buttonVariant: getPropertyValue(columnProperties.buttonVariant, rowIndex),
     buttonTextStyle: getPropertyValue(
       columnProperties.buttonTextStyle,
-      currentRow
+      rowIndex,
+      true
     ),
     cellIcon: getPropertyValue(
       columnProperties.columnType === "button" ? columnProperties.buttonIcon : columnProperties.cellIcon,
-      currentRow
+      rowIndex
     ),
     cellIconPosition: getPropertyValue(
       columnProperties.columnType === "button" ? columnProperties.buttonIconPosition : columnProperties.cellIconPosition,
-      currentRow
+      rowIndex
     ) ?? "left",
-    buttonLabel: getPropertyValue(columnProperties.buttonLabel, currentRow),
-    linkUrl: getPropertyValue(columnProperties.linkUrl, currentRow),
-    linkLabel: getPropertyValue(columnProperties.linkLabel, currentRow),
-    openInNewTab: getPropertyValue(columnProperties.openInNewTab, currentRow),
+    buttonLabel: getPropertyValue(columnProperties.buttonLabel, rowIndex, true),
+    linkUrl: getPropertyValue(columnProperties.linkUrl, rowIndex, true),
+    linkLabel: getPropertyValue(columnProperties.linkLabel, rowIndex, true),
+    openInNewTab: getPropertyValue(
+      columnProperties.openInNewTab,
+      rowIndex,
+      true
+    ),
     cellTextStyle,
     displayedValue: getPropertyValue(
       columnProperties.displayedValue,
-      currentRow
+      rowIndex,
+      true
     ),
-    tagsWrap: getPropertyValue(columnProperties.tagsWrap, currentRow),
-    textWrap: getPropertyValue(columnProperties.textWrap, currentRow),
-    imageSize: getPropertyValue(columnProperties.imageSize, currentRow),
+    tagsWrap: getPropertyValue(columnProperties.tagsWrap, rowIndex, true),
+    textWrap: getPropertyValue(columnProperties.textWrap, rowIndex, true),
+    imageSize: getPropertyValue(columnProperties.imageSize, rowIndex),
     imageBorderRadius: getPropertyValue(
       columnProperties.imageBorderRadius,
-      currentRow
+      rowIndex,
+      true
+    ),
+    openImageUrl: getPropertyValue(
+      columnProperties.openImageUrl,
+      rowIndex,
+      true
     ),
-    openImageUrl: getPropertyValue(columnProperties.openImageUrl, currentRow),
     minimumFractionDigits: getPropertyValue(
       columnProperties.minimumFractionDigits,
-      currentRow
+      rowIndex
     ),
     maximumFractionDigits: getPropertyValue(
       columnProperties.maximumFractionDigits,
-      currentRow
+      rowIndex
     ),
-    currency: getPropertyValue(columnProperties.currency, currentRow),
-    inputFormat: getPropertyValue(columnProperties.inputFormat, currentRow),
-    outputFormat: getPropertyValue(columnProperties.outputFormat, currentRow),
+    currency: getPropertyValue(columnProperties.currency, rowIndex, true),
+    inputFormat: getPropertyValue(columnProperties.inputFormat, rowIndex, true),
+    outputFormat: getPropertyValue(columnProperties.outputFormat, rowIndex),
     manageTimezone: columnProperties.manageTimezone,
-    timezone: getPropertyValue(columnProperties.timezone, currentRow),
+    timezone: getPropertyValue(columnProperties.timezone, rowIndex, true),
     displayTimezone: getPropertyValue(
       columnProperties.displayTimezone,
-      currentRow
+      rowIndex
     )
   };
   return cellProperties;
 }
-function isContextualFunction(value) {
-  return typeof value === "function";
-}
-function getPropertyValue(value, currentRow) {
-  if (isContextualFunction(value) && currentRow) {
-    try {
-      return value({ currentRow });
-    } catch (error) {
-      console.error("Error evaluating context-aware property:", error);
-      return void 0;
-    }
-  } else if (isContextualFunction(value)) {
-    return value({ currentRow: {} });
+function getPropertyValue(value, index2, preserveDataType = false) {
+  if (value && Array.isArray(value)) {
+    if (value[index2]) return value[index2].toString();
+    return value[index2];
+  } else if (value && !preserveDataType) {
+    return value.toString();
+  } else {
+    return value;
   }
-  return value;
 }
 function getFirstPropertyValue(value) {
-  if (isContextualFunction(value)) {
-    return value({ currentRow: {} });
-  }
-  return value;
+  return Array.isArray(value) ? value.find(Boolean) : value;
 }
 const renderCell = ({
   value,
@@ -161855,7 +162715,7 @@ const propertiesDefinition$9 = {
       placeholder: '[{ "col1": "val1" }]',
       isJSConvertible: false,
       helpText: "Takes in an array of objects to display rows in the table. Bind data from an API using {{}}",
-      controlType: "FUNCTION_CODE_EDITOR"
+      controlType: "COMPUTED_CODE_EDITOR"
     }),
     // do not let users set the id property
     // id is managed internally by the table (it's always the key of the column)
@@ -161892,12 +162752,11 @@ const propertiesDefinition$9 = {
       helpText: "Enable per column filtering"
     }),
     defaultFilters: Prop.any().readAndWrite().propertiesPanel({
-      controlType: "FUNCTION_CODE_EDITOR",
+      controlType: "COMPUTED_CODE_EDITOR",
       label: "Default filters",
       visibility: "SHOW_NAME",
       isJSConvertible: false,
       isRemovable: true,
-      defaultOnAdd: () => Property.Computed(""),
       helpText: "Allows specifying the filters that will be used on page load",
       isVisible: function() {
         return this.isFilterable && this.pageType !== "server-side";
@@ -161974,8 +162833,6 @@ const propertiesDefinition$9 = {
       label: "Default sort",
       helpText: "Allows specifying the sort options that will be used on page load",
       controlType: "DEFAULT_TABLE_SORT",
-      isRemovable: true,
-      visibility: "SHOW_NAME",
       childrenDisplayMode: {
         type: "popover",
         title: "Default sort"
@@ -161984,8 +162841,6 @@ const propertiesDefinition$9 = {
     defaultSearchText: Prop.string().readAndWrite().propertiesPanel({
       label: "Default search",
       helpText: "Sets the default search text",
-      isRemovable: true,
-      visibility: "SHOW_NAME",
       isVisible: function() {
         return this.enableClientSideSearch !== false;
       }
@@ -171858,13 +172713,11 @@ const downloadTableData = ({
   );
   const headerData = visibleColumns.map((column2) => column2.Header).map((v2) => sanitizeItem(v2));
   const rowData = data2.map(
-    (_15, index2) => visibleColumns.map((column2) => {
-      const itemIndex = (filteredOrderMap == null ? void 0 : filteredOrderMap[index2]) ?? index2;
-      const item = data2[itemIndex];
+    (item, index2) => visibleColumns.map((column2) => {
       const cellProperties = getCellProperties(
         tableCellTextStyle,
         column2.columnProperties,
-        item
+        (filteredOrderMap == null ? void 0 : filteredOrderMap[index2]) ?? index2
       );
       const value = item[column2.columnProperties.id];
       return formatByType(value, column2.columnProperties.columnType, {
@@ -173177,7 +174030,7 @@ function getUniqueValues({
             formattedValue: formatByType(
               value,
               columnProperties.columnType,
-              getCellProperties(tableCellTextStyle, columnProperties, row)
+              getCellProperties(tableCellTextStyle, columnProperties, i3)
             ),
             rawValue: value,
             index: 0
@@ -173193,7 +174046,7 @@ function getUniqueValues({
           formattedValue: formatByType(
             rawValue,
             columnProperties.columnType,
-            getCellProperties(tableCellTextStyle, columnProperties, row)
+            getCellProperties(tableCellTextStyle, columnProperties, i3)
           ),
           rawValue,
           index: 0
@@ -175924,23 +176777,6 @@ const _TableWidget = class _TableWidget extends React__default.Component {
         onComplete();
       }
     });
-    __publicField(this, "columnPropertyFunctionMap", /* @__PURE__ */ new WeakMap());
-    __publicField(this, "functionCounter", 0);
-    __publicField(this, "getColumnPropertiesString", (columnProperties) => {
-      return Object.keys(columnProperties).reduce((acc, key2) => {
-        const val = columnProperties[key2];
-        if (typeof val === "function") {
-          if (!this.columnPropertyFunctionMap.has(val)) {
-            this.columnPropertyFunctionMap.set(
-              val,
-              `__func_${this.functionCounter++}`
-            );
-          }
-          return acc + `${key2} ${this.columnPropertyFunctionMap.get(val)}`;
-        }
-        return acc + `${key2}: ${JSON.stringify(val)}`;
-      });
-    });
     __publicField(this, "getEmptyRow", () => {
       const columnKeys = getAllTableColumnKeys(this.props.tableData);
       const selectedRow = {};
@@ -176010,7 +176846,7 @@ const _TableWidget = class _TableWidget extends React__default.Component {
       }
       return getPropertyValue(
         this.props.columns[columnId].cellBackground,
-        this.props.tableData[originalRowIndex]
+        originalRowIndex
       );
     });
     __publicField(this, "getIsLoading", () => {
@@ -176750,6 +177586,7 @@ const _TableWidget = class _TableWidget extends React__default.Component {
     const columnsArray = [];
     const { sortedColumn, columnOrder, columnSizeMap, columns, columnFreezes } = this.props;
     let allColumns = columns;
+    const tableProps = this.props;
     const sortColumn = sortedColumn == null ? void 0 : sortedColumn.column;
     const sortOrder = sortedColumn == null ? void 0 : sortedColumn.asc;
     allColumns = reorderColumns(allColumns, columnOrder ?? [], columnFreezes);
@@ -176853,16 +177690,212 @@ const _TableWidget = class _TableWidget extends React__default.Component {
           index: this.props.multiRowSelection ? columnProperties.index + 1 : columnProperties.index,
           notation: columnNotation
         },
-        Cell: this.createTableCell(columnProperties, isHidden2)
+        Cell: (props2) => {
+          var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i, _j, _k, _l2, _m2, _n2, _o2, _p2, _q, _r2, _s2, _t2, _u2, _v, _w, _x, _y;
+          const currentRowIndex = props2.cell.row.index;
+          const originalRowIndex = ((_a2 = this.props.filteredOrderMap) == null ? void 0 : _a2[currentRowIndex]) ?? currentRowIndex;
+          const isEdited = ((_b2 = this.props.editOverrides) == null ? void 0 : _b2[originalRowIndex]) != null && columnProperties.id in this.props.editOverrides[originalRowIndex];
+          const isInserted = this.getIsRowInserted(originalRowIndex);
+          const isDeleted = this.getIsRowDeleted(originalRowIndex);
+          const indexInTableDataWithInserts = ((_c2 = this.props.tableDataWithInsertsOrderMap) == null ? void 0 : _c2[originalRowIndex]) ?? originalRowIndex;
+          const cellProperties = getCellProperties(
+            (_e2 = (_d2 = this.props) == null ? void 0 : _d2.cellProps) == null ? void 0 : _e2.textStyle,
+            columnProperties,
+            indexInTableDataWithInserts
+          );
+          const isEditable = !isDeleted && (isInserted ? columnProperties.isEditableOnInsertion : columnProperties.isEditable);
+          if (isEditable) {
+            let rawValue;
+            if (isInserted) {
+              rawValue = (_h2 = (_g2 = (_f2 = this.props.inserts) == null ? void 0 : _f2.insertedRowsById) == null ? void 0 : _g2[originalRowIndex]) == null ? void 0 : _h2[columnProperties.id];
+            } else if (isEdited) {
+              rawValue = (_j = (_i = this.props.editOverrides) == null ? void 0 : _i[originalRowIndex]) == null ? void 0 : _j[columnProperties.id].value;
+            } else if (columnProperties.isDerived) {
+              rawValue = props2.cell.value;
+            } else {
+              rawValue = (_l2 = (_k = this.props.tableData) == null ? void 0 : _k[originalRowIndex]) == null ? void 0 : _l2[columnProperties.id];
+            }
+            const value = isInserted ? rawValue ?? "" : props2.cell.value;
+            return /* @__PURE__ */ jsxRuntimeExports.jsx(
+              EditableCell,
+              {
+                theme: this.props.theme,
+                value,
+                rawValue,
+                columnType: columnProperties.columnType,
+                isInserted,
+                columnName: columnProperties.label,
+                cellProps: {
+                  isHidden: isHidden2,
+                  cellProperties,
+                  tagsColorAssignment: (_m2 = this.cachedTagColorAssignment) == null ? void 0 : _m2[columnProperties.id],
+                  notation: columnNotation,
+                  currency: columnProperties.currency,
+                  minimumFractionDigits: columnProperties.minimumFractionDigits,
+                  maximumFractionDigits: columnProperties.maximumFractionDigits,
+                  booleanStyleFalse: columnProperties.booleanStyleFalse,
+                  rowDensity: this.props.rowDensity,
+                  isFocused: props2.isFocused,
+                  displayedValue: this.getDisplayedValueForEditCell({
+                    columnId: columnProperties.id,
+                    rawValue,
+                    displayedValue: cellProperties.displayedValue,
+                    useLabelAsDisplayValue: columnProperties.useLabelAsDisplayValue
+                  }),
+                  cellIcon: getPropertyValue(
+                    columnProperties.cellIcon,
+                    indexInTableDataWithInserts,
+                    true
+                  ),
+                  cellIconPosition: columnProperties.cellIconPosition ?? "left",
+                  inputFormat: getPropertyValue(
+                    columnProperties.inputFormat,
+                    indexInTableDataWithInserts,
+                    true
+                  ),
+                  outputFormat: getPropertyValue(
+                    columnProperties.outputFormat,
+                    indexInTableDataWithInserts,
+                    true
+                  ),
+                  manageTimezone: columnProperties.manageTimezone,
+                  timezone: getPropertyValue(
+                    columnProperties.timezone,
+                    indexInTableDataWithInserts,
+                    true
+                  ),
+                  displayTimezone: getPropertyValue(
+                    columnProperties.displayTimezone,
+                    indexInTableDataWithInserts,
+                    true
+                  ),
+                  isMultiselecting: this.currentCellFocus.length > 1
+                },
+                editProps: {
+                  handleEditStart: this.handleEditStart.bind(
+                    this,
+                    originalRowIndex,
+                    columnProperties.id,
+                    this.getCellValue(
+                      originalRowIndex,
+                      columnProperties.id
+                    )
+                  ),
+                  handleEditChange: this.debouncedEditChange,
+                  handleEditStop: this.onEditStop.bind(
+                    this,
+                    columnProperties,
+                    currentRowIndex
+                  ),
+                  onDropdownSearchTextChanged: () => props2.onDropdownSearchTextChanged(),
+                  currentEditDropdownSearchText: this.props.currentEditDropdownSearchText,
+                  handleOneClickEdit: this.handleOneClickEdit.bind(
+                    this,
+                    columnProperties,
+                    originalRowIndex
+                  ),
+                  isEditFocused: ((_n2 = this.props.currentEditFocus) == null ? void 0 : _n2.row) === originalRowIndex && ((_o2 = this.props.currentEditFocus) == null ? void 0 : _o2.columnId) === columnProperties.id,
+                  isEdited,
+                  currentEditValue: this.props.currentEditValue,
+                  editInputType: columnProperties.editInputType,
+                  editCustomValidationRule: this.customEditValidation[columnProperties.id],
+                  editCustomErrorMessage: this.customEditMessage[columnProperties.id],
+                  editMaxLength: columnProperties.editMaxLength,
+                  editMinLength: columnProperties.editMinLength,
+                  editIsRequired: isInserted ? columnProperties.isRequiredOnInsertion : columnProperties.editIsRequired,
+                  editMultiSelect: columnProperties.editMultiSelect,
+                  allowClearing: columnProperties.allowClearing,
+                  dropdownOptionsLoading: this.getDropdownOptionsLoading(),
+                  editDropdownClientSideFiltering: columnProperties.editDropdownClientSideFiltering,
+                  editOptions: this.editOptions[columnProperties.id],
+                  transformation: columnProperties.transformation,
+                  validationErrors: isInserted ? ((_r2 = (_q = (_p2 = this.props.inserts) == null ? void 0 : _p2.insertedRowValidations) == null ? void 0 : _q[originalRowIndex]) == null ? void 0 : _r2[columnProperties.id]) ?? [] : ((_u2 = (_t2 = (_s2 = this.props.editOverrides) == null ? void 0 : _s2[originalRowIndex]) == null ? void 0 : _t2[columnProperties.id]) == null ? void 0 : _u2.validationErrors) ?? [],
+                  editMinDate: columnProperties.editMinDate,
+                  editMaxDate: columnProperties.editMaxDate,
+                  editTwentyFourHourTime: columnProperties.editTwentyFourHourTime
+                },
+                tableName: this.props.widgetName,
+                rowDensity: getRowDensity(this.props.rowDensity),
+                maxLinesPerRow: this.props.maxLinesPerRow,
+                position: {
+                  currentRowIndex,
+                  columnId: columnProperties.id,
+                  originalRowIndex
+                }
+              }
+            );
+          } else if (columnProperties.columnType === ColumnType.BUTTON) {
+            const buttonProps = {
+              rowIndex: currentRowIndex,
+              isSelected: !!props2.row.isSelected,
+              isDisabled: cellProperties.isDisabled,
+              onClick: (onComplete) => {
+                this.handleTableButtonClick(columnProperties.id, onComplete);
+              },
+              handleRowSelect: this.handleRowSelect,
+              backgroundColor: cellProperties.buttonBackgroundColor,
+              buttonBorder: cellProperties.buttonBorder,
+              buttonVariant: cellProperties.buttonVariant ?? "primary",
+              buttonTextStyle: cellProperties.buttonTextStyle,
+              cellIcon: getPropertyValue(
+                columnProperties.buttonIcon,
+                indexInTableDataWithInserts
+              ),
+              cellIconPosition: cellProperties.cellIconPosition ?? "left",
+              rowDensity: this.props.rowDensity,
+              id: columnProperties.id,
+              buttonLabel: cellProperties.buttonLabel ?? "Action",
+              isHidden: isHidden2,
+              theme: this.props.theme
+            };
+            return /* @__PURE__ */ jsxRuntimeExports.jsx(TableButton, { ...buttonProps });
+          } else if (columnProperties.columnType === "link") {
+            return renderLink({
+              cellProperties,
+              isHidden: isHidden2,
+              rowDensity: this.props.rowDensity,
+              position: {
+                columnId: columnProperties.id
+              },
+              maxLinesPerRow: this.props.maxLinesPerRow,
+              tableCellTextStyle: (_v = this.props.cellProps) == null ? void 0 : _v.textStyle,
+              value: props2.cell.value
+            });
+          } else {
+            return renderCell({
+              theme: this.props.theme,
+              value: props2.cell.value,
+              columnType: columnProperties.columnType,
+              editInputType: columnProperties.editInputType,
+              maxLinesPerRow: this.props.maxLinesPerRow,
+              tableCellTextStyle: (_w = this.props.cellProps) == null ? void 0 : _w.textStyle,
+              typographies: this.props.theme.typographies,
+              cellProps: {
+                // since these are overridden by the cellProperties
+                ...columnProperties,
+                ...getCellProperties(
+                  (_x = tableProps == null ? void 0 : tableProps.cellProps) == null ? void 0 : _x.textStyle,
+                  columnProperties,
+                  indexInTableDataWithInserts
+                ),
+                isHidden: isHidden2,
+                cellProperties,
+                tagsColorAssignment: (_y = this.cachedTagColorAssignment) == null ? void 0 : _y[columnProperties.id],
+                booleanStyleFalse: columnProperties.booleanStyleFalse,
+                rowDensity: this.props.rowDensity,
+                isFocused: props2.isFocused,
+                isMultiselecting: this.currentCellFocus.length > 1
+              },
+              position: {
+                columnId: columnProperties.id
+              }
+            });
+          }
+        }
       };
       columnsArray.push(columnData);
     }
-    const columnString = JSON.stringify(columnsArray, (key2, value) => {
-      if (key2 === "columnProperties") {
-        return this.getColumnPropertiesString(value);
-      }
-      return value;
-    });
+    const columnString = JSON.stringify(columnsArray);
     if (columnString === this.previousColumnsString) {
       return this.previousColumns;
     }
@@ -176870,85 +177903,6 @@ const _TableWidget = class _TableWidget extends React__default.Component {
     this.previousColumns = columnsArray;
     return columnsArray;
   }
-  createTableCell(columnProperties, isHidden2) {
-    return (props2) => {
-      var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
-      const currentRowIndex = props2.cell.row.index;
-      ((_a2 = this.props.filteredOrderMap) == null ? void 0 : _a2[currentRowIndex]) ?? currentRowIndex;
-      const cellProperties = getCellProperties(
-        (_c2 = (_b2 = this.props) == null ? void 0 : _b2.cellProps) == null ? void 0 : _c2.textStyle,
-        columnProperties,
-        props2.cell.row.original
-      );
-      if (columnProperties.columnType === ColumnType.BUTTON) {
-        const buttonProps = {
-          rowIndex: currentRowIndex,
-          isSelected: !!props2.row.isSelected,
-          isDisabled: cellProperties.isDisabled,
-          onClick: (onComplete) => {
-            this.handleTableButtonClick(columnProperties.id, onComplete);
-          },
-          handleRowSelect: this.handleRowSelect,
-          backgroundColor: cellProperties.buttonBackgroundColor,
-          buttonBorder: cellProperties.buttonBorder,
-          buttonVariant: cellProperties.buttonVariant ?? "primary",
-          buttonTextStyle: cellProperties.buttonTextStyle,
-          cellIcon: getPropertyValue(
-            columnProperties.buttonIcon,
-            props2.cell.row.original
-          ),
-          cellIconPosition: cellProperties.cellIconPosition ?? "left",
-          rowDensity: this.props.rowDensity,
-          id: columnProperties.id,
-          buttonLabel: cellProperties.buttonLabel ?? "Action",
-          isHidden: isHidden2,
-          theme: this.props.theme
-        };
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(TableButton, { ...buttonProps });
-      } else if (columnProperties.columnType === "link") {
-        return renderLink({
-          cellProperties,
-          isHidden: isHidden2,
-          rowDensity: this.props.rowDensity,
-          position: {
-            columnId: columnProperties.id
-          },
-          maxLinesPerRow: this.props.maxLinesPerRow,
-          tableCellTextStyle: (_d2 = this.props.cellProps) == null ? void 0 : _d2.textStyle,
-          value: props2.cell.value
-        });
-      } else {
-        return renderCell({
-          theme: this.props.theme,
-          value: props2.cell.value,
-          columnType: columnProperties.columnType,
-          editInputType: columnProperties.editInputType,
-          maxLinesPerRow: this.props.maxLinesPerRow,
-          tableCellTextStyle: (_e2 = this.props.cellProps) == null ? void 0 : _e2.textStyle,
-          typographies: this.props.theme.typographies,
-          cellProps: {
-            // since these are overridden by the cellProperties
-            ...columnProperties,
-            ...getCellProperties(
-              (_g2 = (_f2 = this.props) == null ? void 0 : _f2.cellProps) == null ? void 0 : _g2.textStyle,
-              columnProperties,
-              props2.cell.row.original
-            ),
-            isHidden: isHidden2,
-            cellProperties,
-            tagsColorAssignment: (_h2 = this.cachedTagColorAssignment) == null ? void 0 : _h2[columnProperties.id],
-            booleanStyleFalse: columnProperties.booleanStyleFalse,
-            rowDensity: this.props.rowDensity,
-            isFocused: props2.isFocused,
-            isMultiselecting: this.currentCellFocus.length > 1
-          },
-          position: {
-            columnId: columnProperties.id
-          }
-        });
-      }
-    };
-  }
   static getParsedComputedValues(value) {
     let computedValues = [];
     if (lodashExports.isString(value)) {
@@ -180290,8 +181244,8 @@ const StyledCrossIcon = qe$1(SvgCrossXs)`
   right: ${({ right: right2 }) => `${right2}px`};
   top: 50%;
   transform: translateY(-50%);
-  height: ${({ iconSize }) => `${iconSize ?? DEFAULT_ICON_SIZE}px`};
-  width: ${({ iconSize }) => `${iconSize ?? DEFAULT_ICON_SIZE}px`};
+  height: ${({ iconSize }) => `${iconSize ?? DEFAULT_ICON_SIZE$1}px`};
+  width: ${({ iconSize }) => `${iconSize ?? DEFAULT_ICON_SIZE$1}px`};
   z-index: 4; // TODO: do we need to use Layers?
   cursor: pointer;
 `;
@@ -181047,7 +182001,7 @@ const propertiesDefinition$8 = {
       isJSConvertible: false,
       helpText: "Allows users to select either a single option or multiple options. Values must be unique.",
       placeholder: "[{label: 'Option 1', value: 'option1'}]",
-      controlType: "FUNCTION_CODE_EDITOR"
+      controlType: "COMPUTED_CODE_EDITOR"
     }),
     defaultOptionValue: Prop.string().propertiesPanel({
       label: "Default selected value",
@@ -182891,8 +183845,8 @@ const SbVariable = registerSbEntity(
 );
 const propertiesDefinition$1 = {
   general: Section.category(PropsPanelCategory.Uncategorized).propertiesPanel({ showHeader: false }).children({
-    intervalMs: Prop.number().default(300).readAndWrite().propertiesPanel({
-      label: "Interval",
+    intervalMs: Prop.number().default(3e5).readAndWrite().propertiesPanel({
+      label: "Interval (ms)",
       helpText: "Sets the interval of the timer",
       placeholder: "1000",
       isJSConvertible: false,
@@ -183684,7 +184638,6 @@ function listenForUrlChange() {
   return observer2;
 }
 const IframeConnected = observer(function IframeConnected2(props2) {
-  var _a2;
   useEffect(() => {
     if (!isEmbeddedBySuperblocksFirstParty()) {
       return;
@@ -183694,18 +184647,7 @@ const IframeConnected = observer(function IframeConnected2(props2) {
       editStore.setIsInitialized(true);
       editorBridge.connected();
       rootStore.setEditStore(editStore);
-      try {
-        await sourceUpdateApi.connect(data2.payload.peerId, data2.payload.userId);
-      } catch (error) {
-        console.error(
-          "Error connecting to internal socket from library",
-          error
-        );
-        editorBridge.socketError(
-          "Error connecting to the remote dev server, please refresh the page"
-        );
-        return;
-      }
+      await sourceUpdateApi.connect(data2.payload.peerId, data2.payload.userId);
       editorBridge.updatePropertiesPanels(
         editStore.propertiesPanelManager.getNonDynamicPropertiesPanels()
       );
@@ -183734,10 +184676,6 @@ const IframeConnected = observer(function IframeConnected2(props2) {
     };
   }, []);
   const isPossiblyEditor = useMemo$2(isEmbeddedBySuperblocksFirstParty, []);
-  const connectionStatus = (_a2 = rootStore.editStore) == null ? void 0 : _a2.connectionManager.connectionStatus;
-  if (connectionStatus === "pre-init" || connectionStatus === "connecting") {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(FullPageSpinner, {});
-  }
   if (isPossiblyEditor && editStore.isInitialized && typeof window !== "undefined") {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(DnDProvider, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(NewComponentsDragLayer, {}),
@@ -185173,9 +186111,9 @@ const generateDropdownStyles = (theme) => {
       transform: translateY(-50%);
       z-index: 99;
       background-repeat: no-repeat;
-      background-size: ${DEFAULT_ICON_SIZE}px;
-      width: ${DEFAULT_ICON_SIZE}px;
-      height: ${DEFAULT_ICON_SIZE}px;
+      background-size: ${DEFAULT_ICON_SIZE$1}px;
+      width: ${DEFAULT_ICON_SIZE$1}px;
+      height: ${DEFAULT_ICON_SIZE$1}px;
       display: block;
       position: absolute;
       cursor: pointer;
@@ -185767,38 +186705,14 @@ console.log = (...args) => {
   } catch {
   }
 };
-const loadApisIntoLibrary = async function loadApisIntoLibrary2() {
-  var _a2, _b2;
-  {
-    try {
-      const mod2 = await import("./user-facing/build-manifest.js");
-      const apis = ((_a2 = mod2.default) == null ? void 0 : _a2.apis) ?? {};
-      const apiDependencies = ((_b2 = mod2.default) == null ? void 0 : _b2.apiDependencies) ?? [];
-      rootStore.apis.setAllApis(apis);
-      apiDependencies.forEach((dep) => {
-        rootStore.apis.setApiDepCandidates(dep.apiName, dep.params);
-        rootStore.apis.setApiReferences(dep.apiName, dep.dependencies);
-      });
-    } catch (error) {
-      console.error("Error loading apis into library", error);
-    }
-  }
-};
 const SbProvider = function SbProvider2({
   name = "codemode",
   settings,
+  preloadedData,
   children
 }) {
   var _a2, _b2;
   const isEmbedded = typeof window !== "undefined" && window.parent !== window.self;
-  const [isApisInitialized, setIsApisInitialized] = useState(false);
-  const runApiInitialization = useCallback(async () => {
-    await loadApisIntoLibrary();
-    setIsApisInitialized(true);
-  }, []);
-  useEffect(() => {
-    runApiInitialization();
-  }, [runApiInitialization]);
   const [userAccessibleTheme, setUserAccessibleTheme] = useState(DEFAULT_THEME);
   useEffect(() => {
     const mergedTheme = lodashExports.merge(BASE_THEME_V5, settings == null ? void 0 : settings.theme);
@@ -185810,10 +186724,7 @@ const SbProvider = function SbProvider2({
   }, [settings == null ? void 0 : settings.theme, settings == null ? void 0 : settings.themeOverrides]);
   useEffect(() => {
     initializeStyles(name);
-  }, [name]);
-  if (!isApisInitialized) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(FullPageSpinner, {});
-  }
+  }, [preloadedData, name]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -197422,4 +198333,4 @@ export {
   SbTimer as y,
   SbApi as z
 };
-//# sourceMappingURL=index-CQOHJMew.js.map
+//# sourceMappingURL=index-kjgG33Rg.js.map