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

package/dist/{index-kjgG33Rg.js → index-D9O95zsr.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 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 { 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 * 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) => PropertyInfo(value, "TEMPLATE"),
+  Template: (value, args) => PropertyInfo(value, "TEMPLATE", { args }),
   Expression: (value) => PropertyInfo(value, "EXPRESSION"),
   Event: (value) => PropertyInfo(value, "EVENT"),
   Dimension: (value) => PropertyInfo(value, "DIMENSION"),
-  Computed: (value, args) => PropertyInfo(value, "COMPUTED", Array.isArray(args) && args.length > 0 ? { args } : {}),
+  Computed: (value, args) => PropertyInfo(value, "COMPUTED", { args }),
   Any: (value, type5 = "STATIC") => PropertyInfo(value, type5)
 };
 function isPropertyInfo(value) {
@@ -6025,6 +6025,18 @@ 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);
 };
@@ -78418,7 +78430,7 @@ const ShowAlertTrigger = {
 const ResetStateVarTrigger = {
   type: TriggerStepType.RESET_STATE_VAR,
   async execute(context2, step) {
-    if (step.state === void 0) {
+    if (step.variable === void 0) {
       return;
     }
     context2.rootStore.entityManager.runCode({
@@ -78426,22 +78438,22 @@ const ResetStateVarTrigger = {
       name: context2.name,
       func: () => {
         var _a2;
-        return (_a2 = step.state) == null ? void 0 : _a2.set(step.state.defaultValue);
+        return (_a2 = step.variable) == null ? void 0 : _a2.set(step.variable.defaultValue);
       },
       args: []
     });
   },
-  create(stateVar) {
+  create(variable) {
     return {
       type: TriggerStepType.RESET_STATE_VAR,
-      state: stateVar
+      variable
     };
   }
 };
 const SetStateVarTrigger = {
   type: TriggerStepType.SET_STATE_VAR,
   async execute(context2, step) {
-    if (step.state === void 0) {
+    if (step.variable === void 0) {
       return;
     }
     const value = context2.rootStore.entityManager.computeValue({
@@ -78455,15 +78467,15 @@ const SetStateVarTrigger = {
       func: (state, value2) => {
         var _a2;
         if (!state) return;
-        (_a2 = step.state) == null ? void 0 : _a2.set(value2);
+        (_a2 = step.variable) == null ? void 0 : _a2.set(value2);
       },
       args: [value]
     });
   },
-  create(stateVar, value) {
+  create(variable, value) {
     return {
       type: TriggerStepType.SET_STATE_VAR,
-      state: stateVar,
+      variable,
       value
     };
   }
@@ -78471,12 +78483,14 @@ const SetStateVarTrigger = {
 const ControlTimerTrigger = {
   type: TriggerStepType.CONTROL_TIMER,
   async execute(_context, step) {
-    console.log("ControlTimerTrigger", step);
+    if (step.timer) {
+      step.timer[step.action]();
+    }
   },
-  create(timerId, action2) {
+  create(timer, action2) {
     return {
       type: TriggerStepType.CONTROL_TIMER,
-      timerId,
+      timer,
       action: action2
     };
   }
@@ -82973,6 +82987,11 @@ 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;
@@ -83094,6 +83113,9 @@ 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 }
@@ -83504,7 +83526,7 @@ function registerStores(stores) {
   internalStores = { ...internalStores, ...stores };
   if (SUPPORTED_MODES.includes("production")) {
     if (Object.keys(internalStores).length === Object.keys(stores).length) {
-      import("./devtools-consolidated-B1B3uBW_.js").then(({ initializeCustomDevTools, setRegisteredStores }) => {
+      import("./devtools-consolidated-DaYe-zkb.js").then(({ initializeCustomDevTools, setRegisteredStores }) => {
         setRegisteredStores(internalStores);
         initializeCustomDevTools();
       }).catch((error) => {
@@ -83517,7 +83539,7 @@ function registerStores(stores) {
   }
 }
 const DevToolsInternal = React__default.lazy(() => {
-  return import("./devtools-consolidated-B1B3uBW_.js").then((module2) => ({
+  return import("./devtools-consolidated-DaYe-zkb.js").then((module2) => ({
     default: module2.CustomDevTools
   }));
 });
@@ -83610,9 +83632,32 @@ 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 }) {
+  compute({
+    snapshot,
+    entityName,
+    func,
+    args,
+    path: path2,
+    excludeState
+  }) {
     try {
+      if (excludeState) {
+        return this.statementFunctionNoSnapshot.call(
+          snapshot[entityName.value],
+          args || [],
+          func.toString()
+        );
+      }
       const globalScope = createGlobalObject({ snapshot });
       return this.statementFunction.call(
         snapshot[entityName.value],
@@ -83874,11 +83919,11 @@ class SbEventFlow {
   controlModal(modal, action2) {
     return this.addStep(EventRegistry.controlModal.create(modal, action2));
   }
-  static controlTimer(timerId, action2) {
-    return SbEventFlow.start().controlTimer(timerId, action2);
+  static controlTimer(stateTimer, action2) {
+    return SbEventFlow.start().controlTimer(stateTimer, action2);
   }
-  controlTimer(timerId, action2) {
-    return this.addStep(EventRegistry.controlTimer.create(timerId, action2));
+  controlTimer(stateTimer, action2) {
+    return this.addStep(EventRegistry.controlTimer.create(stateTimer, action2));
   }
   static runApis(apis, onSuccess, onError2) {
     return SbEventFlow.start().runApis(apis, onSuccess, onError2);
@@ -84016,7 +84061,7 @@ const isLazyFunction = (value) => {
   return typeof value === "function" && value[lazyFunctionSymbol];
 };
 const LazyFunction = (source2, args = []) => {
-  const argsObj = `{ ${args.join(", ")} }`;
+  const argsObj = getComputedArgsString(args);
   const func = new Function(argsObj, source2);
   func[lazyFunctionSymbol] = true;
   return func;
@@ -84351,7 +84396,6 @@ 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);
@@ -84407,6 +84451,14 @@ 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 {
@@ -84415,18 +84467,30 @@ class EntityManager {
           ret = metaParent[finalSegment];
         } else {
           if (isComputed) {
-            ret = computeEngine.compute({
-              snapshot: snapshot(scopeId),
-              entityName: name,
-              func: eov.value,
-              path: prop
-            });
+            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
+              });
+            }
           } else {
             ret = eov.value;
           }
         }
-        const managedProp = this.componentRegistry.getManagedProps(entityType).find((p) => p.path === prop);
-        if (managedProp == null ? void 0 : managedProp.validate) {
+        if ((managedProp == null ? void 0 : managedProp.validate) && typeof ret !== "function") {
           const currentState = snapshot(scopeId);
           const entity2 = currentState[name.value];
           const validationResult = managedProp.validate(ret, entity2);
@@ -84444,13 +84508,13 @@ class EntityManager {
           if (!validationResult.valid) {
             return void 0;
           }
-          return validationResult.result;
+          ret = validationResult.result;
         }
+        return ret;
       } catch (_e2) {
         console.log("Could not compute property value");
         return void 0;
       }
-      return ret;
     });
     const setValue = (value) => {
       const metaParent = getMetaParent();
@@ -84970,6 +85034,12 @@ const _SuperblocksEditorBridge = class _SuperblocksEditorBridge {
       }
     });
   }
+  socketError(message2) {
+    this.sendImmediate({
+      type: "socket/error",
+      payload: { message: message2 }
+    });
+  }
   // Private implementation details
   queueMessage(message2) {
     if (!this.connectedToParent) {
@@ -85448,7 +85518,7 @@ class ApiManager {
       scopeId,
       this.apiNameToDepCandidates[apiName] ?? []
     );
-    const orchestratorUrl = `${this.baseUrl}v2/execute`;
+    const orchestratorUrl = new URL("v2/execute", this.baseUrl).href;
     const events2 = [];
     await ((_a2 = this.rootStore.editStore) == null ? void 0 : _a2.operationManager.ensureFilesSynced());
     const abortController = new AbortController();
@@ -85911,6 +85981,24 @@ 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");
@@ -86150,24 +86238,50 @@ class OperationAPI {
     });
     this.serverUrl = serverUrl;
   }
+  /**
+   * @throws {Error} if the websocket connection can't be initiated after 3 attempts
+   */
   async connect(peerId, userId) {
-    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++;
+    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;
       }
-    });
-    this.retryAttempts = 0;
-    this.socket = socket;
+      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");
+    }
   }
 }
 const sourceUpdateApi = new OperationAPI(
@@ -86305,12 +86419,13 @@ 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();
-    return void 0;
+    throw error;
   }
 }
 _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];
@@ -86905,7 +87020,10 @@ function getPropertyValue$1({
   }
   if (property.type === "COMPUTED" && typeof property.value === "string" && scopeId && name) {
     try {
-      return LazyFunction(getRuntimeComputedExpression(property.value));
+      return LazyFunction(
+        getRuntimeComputedExpression(property.value),
+        property.args
+      );
     } catch (e3) {
       console.error("Error generating computed value", e3);
       const entity = rootStore.entityManager.getEntity(scopeId, name);
@@ -86952,7 +87070,7 @@ function getPropertyValue$1({
   return property.value;
 }
 function getSbEventFlow(step, scopeId) {
-  var _a2, _b2, _c2, _d2, _e2, _f2;
+  var _a2, _b2, _c2, _d2, _e2, _f2, _g2;
   if (!isValidStepDef(step)) {
     return void 0;
   }
@@ -87025,27 +87143,33 @@ function getSbEventFlow(step, scopeId) {
       return SbEventFlow.controlModal(modalEntity, step.direction);
     }
     case "controlTimer": {
-      const timerEntity = getEntity(step.name);
+      const timerStep = step;
+      if (!((_a2 = timerStep.timer) == null ? void 0 : _a2.name)) {
+        return void 0;
+      }
+      const timerEntity = getEntity(timerStep.timer.name);
       if (!timerEntity) return void 0;
-      return SbEventFlow.controlTimer(step.name, step.command);
+      return SbEventFlow.controlTimer(timerEntity, step.command ?? "start");
     }
     case "setStateVar": {
-      const stateEntity = getEntity((_a2 = step.state) == null ? void 0 : _a2.name);
+      const variableStep = step;
+      const stateEntity = getEntity((_b2 = variableStep.variable) == null ? void 0 : _b2.name);
       if (!stateEntity) return void 0;
-      const value = isPropertyInfo(step.value) ? getPropertyValue$1({
-        property: step.value,
+      const value = isPropertyInfo(variableStep.value) ? getPropertyValue$1({
+        property: variableStep.value,
         scopeId,
-        name: getName((_b2 = step.state) == null ? void 0 : _b2.name)
+        name: getName((_c2 = variableStep.variable) == null ? void 0 : _c2.name)
       }) : step.value;
       return SbEventFlow.setStateVar(stateEntity, value);
     }
     case "resetStateVar": {
-      const resetStateEntity = getEntity((_c2 = step.state) == null ? void 0 : _c2.name);
+      const variableStep = step;
+      const resetStateEntity = getEntity((_d2 = variableStep.variable) == null ? void 0 : _d2.name);
       if (!resetStateEntity) return void 0;
       return SbEventFlow.resetStateVar(resetStateEntity);
     }
     case "resetComponent": {
-      const resetWidgetEntity = getEntity((_d2 = step.widget) == null ? void 0 : _d2.name);
+      const resetWidgetEntity = getEntity((_e2 = step.widget) == null ? void 0 : _e2.name);
       if (!resetWidgetEntity) return void 0;
       return SbEventFlow.resetComponent(
         step.widget,
@@ -87054,7 +87178,7 @@ function getSbEventFlow(step, scopeId) {
       );
     }
     case "setComponentProperty": {
-      const setWidgetEntity = getEntity((_e2 = step.widget) == null ? void 0 : _e2.name);
+      const setWidgetEntity = getEntity((_f2 = step.widget) == null ? void 0 : _f2.name);
       if (!setWidgetEntity) return void 0;
       return SbEventFlow.setComponentProperty(
         step.widget,
@@ -87072,7 +87196,7 @@ function getSbEventFlow(step, scopeId) {
     case "setProfile":
       return SbEventFlow.setProfile(step.profileId, step.profileAction);
     case "triggerEvent":
-      return SbEventFlow.triggerEvent((_f2 = step.event) == null ? void 0 : _f2.name, step.eventPayload);
+      return SbEventFlow.triggerEvent((_g2 = step.event) == null ? void 0 : _g2.name, step.eventPayload);
     default:
       console.warn("Unhandled runtime step type", step.type);
       return void 0;
@@ -87394,8 +87518,9 @@ class RuntimeEntitiesManager {
         const { width, height, marginLeft, marginTop } = pendingResize;
         merged.props = {
           ...merged.props || {},
-          ...width && { width },
-          ...height && { height },
+          ...width && merged.type !== "SbIcon" && { width },
+          ...height && merged.type !== "SbIcon" && { height },
+          ...width && merged.type === "SbIcon" && { size: width },
           ...marginLeft && { marginLeft },
           ...marginTop && { marginTop }
         };
@@ -87773,22 +87898,27 @@ function shouldWrapInSectionAndColumn(type5, parentType) {
   return parentType === "SbPage" && type5 !== "SbSection" || parentType === "SbSection" && type5 !== "SbColumn";
 }
 const filterSafeStackDimensionProperties = (existingProps) => {
-  const { width, height } = existingProps;
+  const { width, height, size: size2 } = existingProps;
   let safeHeight;
   let safeWidth;
+  let safeSize;
   if ((height == null ? void 0 : height.mode) === "px" || (height == null ? void 0 : height.mode) === "fit" || (height == null ? void 0 : height.mode) === "fill") {
     safeHeight = Property.Dimension(height);
   }
   if ((width == null ? void 0 : width.mode) === "px" || (width == null ? void 0 : width.mode) === "fit" || (width == null ? void 0 : width.mode) === "fill") {
     safeWidth = Property.Dimension(width);
   }
+  if ((size2 == null ? void 0 : size2.mode) === "px") {
+    safeSize = Property.Dimension(size2);
+  }
   return {
     width: safeWidth,
-    height: safeHeight
+    height: safeHeight,
+    size: safeSize
   };
 };
 const filterSafeGridDimensionProperties = (existingProps) => {
-  const { width, height } = existingProps;
+  const { width, height, size: size2 } = existingProps;
   const safeDimensions = {};
   if ((height == null ? void 0 : height.mode) === "rows" || (height == null ? void 0 : height.mode) === "fit") {
     safeDimensions.height = Property.Dimension(height);
@@ -87796,6 +87926,9 @@ const filterSafeGridDimensionProperties = (existingProps) => {
   if ((width == null ? void 0 : width.mode) === "columns") {
     safeDimensions.width = Property.Dimension(width);
   }
+  if ((size2 == null ? void 0 : size2.mode) === "columns") {
+    safeDimensions.size = Property.Dimension(size2);
+  }
   return safeDimensions;
 };
 const defaultSizeForComponent = (componentType, isFreeform, draggedDimensions) => {
@@ -88755,7 +88888,7 @@ class ResizingManager {
     return this._activeResizes.get(selectedSourceId);
   }
   startResizing(dragStartX, dragStartY, instanceId, position2) {
-    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i, _j, _k, _l2, _m2, _n2, _o2;
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i, _j, _k, _l2, _m2, _n2, _o2, _p2, _q;
     const widget = (_a2 = this.root.editStore) == null ? void 0 : _a2.runtimeEntitiesManager.getEditorWidgetMeta(
       instanceId
     );
@@ -88794,10 +88927,10 @@ class ResizingManager {
       dragStartX,
       dragStartY,
       start: {
-        width: ((_i = (_h2 = widget == null ? void 0 : widget.props) == null ? void 0 : _h2.width) == null ? void 0 : _i.value) ?? 0,
-        height: ((_k = (_j = widget == null ? void 0 : widget.props) == null ? void 0 : _j.height) == null ? void 0 : _k.value) ?? 0,
-        marginLeft: ((_m2 = (_l2 = widget == null ? void 0 : widget.props) == null ? void 0 : _l2.marginLeft) == null ? void 0 : _m2.value) ?? 0,
-        marginTop: ((_o2 = (_n2 = widget == null ? void 0 : widget.props) == null ? void 0 : _n2.marginTop) == null ? void 0 : _o2.value) ?? 0
+        width: ((_i = (_h2 = widget == null ? void 0 : widget.props) == null ? void 0 : _h2.width) == null ? void 0 : _i.value) ?? ((_k = (_j = widget == null ? void 0 : widget.props) == null ? void 0 : _j.size) == null ? void 0 : _k.value) ?? 0,
+        height: ((_m2 = (_l2 = widget == null ? void 0 : widget.props) == null ? void 0 : _l2.height) == null ? void 0 : _m2.value) ?? 0,
+        marginLeft: ((_o2 = (_n2 = widget == null ? void 0 : widget.props) == null ? void 0 : _n2.marginLeft) == null ? void 0 : _o2.value) ?? 0,
+        marginTop: ((_q = (_p2 = widget == null ? void 0 : widget.props) == null ? void 0 : _p2.marginTop) == null ? void 0 : _q.value) ?? 0
       },
       resizedPosition: position2,
       widthToUpdate: null,
@@ -88935,21 +89068,34 @@ class ResizingManager {
     });
   }
   resizeWidget(currentX, currentY, instanceId, canResizeWidth2, canResizeHeight2) {
-    var _a2, _b2, _c2, _d2, _e2, _f2;
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i, _j, _k;
     const sourceId = (_a2 = this.root.editStore) == null ? void 0 : _a2.runtimeEntitiesManager.getEditorWidgetSourceId(
       instanceId
     );
+    const type5 = (_b2 = this.root.editStore) == null ? void 0 : _b2.runtimeEntitiesManager.getEditorWidgetType(
+      instanceId
+    );
     const resizeState = sourceId && this._activeResizes.get(sourceId);
     if (!resizeState) {
       return;
     }
-    const widget = (_b2 = this.root.editStore) == null ? void 0 : _b2.runtimeEntitiesManager.getEditorWidgetMeta(
+    const widget = (_c2 = this.root.editStore) == null ? void 0 : _c2.runtimeEntitiesManager.getEditorWidgetMeta(
       instanceId
     );
-    const widthMode = (_d2 = (_c2 = widget == null ? void 0 : widget.props) == null ? void 0 : _c2.width) == null ? void 0 : _d2.mode;
-    const heightMode = (_f2 = (_e2 = widget == null ? void 0 : widget.props) == null ? void 0 : _e2.height) == null ? void 0 : _f2.mode;
+    let widthMode = (_e2 = (_d2 = widget == null ? void 0 : widget.props) == null ? void 0 : _d2.width) == null ? void 0 : _e2.mode;
+    const heightMode = (_g2 = (_f2 = widget == null ? void 0 : widget.props) == null ? void 0 : _f2.height) == null ? void 0 : _g2.mode;
     const deltaX = currentX - resizeState.dragStartX;
     const deltaY = currentY - resizeState.dragStartY;
+    if (type5 === "SbIcon") {
+      widthMode = (_i = (_h2 = widget == null ? void 0 : widget.props) == null ? void 0 : _h2.size) == null ? void 0 : _i.mode;
+      if (!widthMode) {
+        const parentInstanceId = widget == null ? void 0 : widget.parentInstanceId;
+        const parentWidget = parentInstanceId && ((_j = this.root.editStore) == null ? void 0 : _j.runtimeEntitiesManager.getEditorWidgetMeta(
+          parentInstanceId
+        ));
+        widthMode = ((_k = parentWidget == null ? void 0 : parentWidget.props) == null ? void 0 : _k.layout) === "freeform" ? "columns" : "px";
+      }
+    }
     const updateWidth = this.handleResizeDimension({
       resizeState,
       dimension: "width",
@@ -89004,22 +89150,28 @@ class ResizingManager {
     );
   }
   applyResize(instanceId) {
-    var _a2, _b2;
+    var _a2, _b2, _c2;
     const sourceId = (_a2 = this.root.editStore) == null ? void 0 : _a2.runtimeEntitiesManager.getEditorWidgetSourceId(
       instanceId
     );
+    const type5 = (_b2 = this.root.editStore) == null ? void 0 : _b2.runtimeEntitiesManager.getEditorWidgetType(
+      instanceId
+    );
     const resizeState = sourceId && this._activeResizes.get(sourceId);
     if (!resizeState) {
       return;
     }
     resizeState.isApplyingResize = true;
     const properties2 = {
-      ...resizeState.heightToUpdate && {
+      ...resizeState.heightToUpdate && type5 !== "SbIcon" && {
         height: Property.Dimension(resizeState.heightToUpdate)
       },
-      ...resizeState.widthToUpdate && {
+      ...resizeState.widthToUpdate && type5 !== "SbIcon" && {
         width: Property.Dimension(resizeState.widthToUpdate)
       },
+      ...resizeState.widthToUpdate && type5 === "SbIcon" && {
+        size: Property.Dimension(resizeState.widthToUpdate)
+      },
       ...resizeState.marginLeftToUpdate && {
         marginLeft: Property.Dimension(resizeState.marginLeftToUpdate)
       },
@@ -89028,7 +89180,7 @@ class ResizingManager {
       }
     };
     if (Object.keys(properties2).length > 0) {
-      (_b2 = this.root.editStore) == null ? void 0 : _b2.operationManager.setWidgetProperties({
+      (_c2 = this.root.editStore) == null ? void 0 : _c2.operationManager.setWidgetProperties({
         sourceId: resizeState.sourceId,
         properties: properties2,
         callback: () => {
@@ -91039,14 +91191,14 @@ function getLoaderFn$1(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-KDCEbuYo.js"
+            "./allPathsLoader-Bt-mJXJw.js"
           )];
         case 2:
           return [2, _b2.sent().allPathsLoader];
         case 3:
           return [4, import(
             /* webpackChunkName: "blueprint-icons-split-paths-by-size-loader" */
-            "./splitPathsBySizeLoader-VThmaq3t.js"
+            "./splitPathsBySizeLoader-HDsWhSbE.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -111681,14 +111833,18 @@ 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 {
-        ...stylePropWithSize,
+        ...styleWithOverflow,
         opacity: existingOpacity * INVISIBLE_OPACITY
       };
     }
-    return stylePropWithSize;
+    return styleWithOverflow;
   }, [reactiveProps.isVisible, stylePropWithSize]);
   const { setStyle, getFallbackStyle } = useComponentSuspenseStyle();
   useEffect(() => {
@@ -111848,28 +112004,52 @@ const size$2 = ({
     controlType: "WIDTH_DROPDOWN",
     defaultValue: defaults2 == null ? void 0 : defaults2.minWidth,
     defaultOnAdd: defaultsOnAdd == null ? void 0 : defaultsOnAdd.minWidth,
-    isVisible: showMinWidth
+    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
+      );
+    }
   });
   const maxWidthProperty = getSizeProp({
     label: "Max width",
     controlType: "WIDTH_DROPDOWN",
     defaultValue: defaults2 == null ? void 0 : defaults2.maxWidth,
     defaultOnAdd: defaultsOnAdd == null ? void 0 : defaultsOnAdd.maxWidth,
-    isVisible: showMaxWidth
+    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
+      );
+    }
   });
   const minHeightProperty = getSizeProp({
     label: "Min height",
     controlType: "HEIGHT_DROPDOWN",
     defaultValue: defaults2 == null ? void 0 : defaults2.minHeight,
     defaultOnAdd: defaultsOnAdd == null ? void 0 : defaultsOnAdd.minHeight,
-    isVisible: showMinHeight
+    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
+      );
+    }
   });
   const maxHeightProperty = getSizeProp({
     label: "Max height",
     controlType: "HEIGHT_DROPDOWN",
     defaultValue: defaults2 == null ? void 0 : defaults2.maxHeight,
     defaultOnAdd: defaultsOnAdd == null ? void 0 : defaultsOnAdd.maxHeight,
-    isVisible: showMaxHeight
+    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
+      );
+    }
   });
   let heightProperty = Prop.dimension().readAndWrite().propertiesPanel({
     label: "Height",
@@ -112111,7 +112291,8 @@ const containerLayout = (sizeProps) => Prop.union({
           sourceId: child.sourceId,
           element: (_b3 = (_a3 = editStore2.interactionLayerManager.getSourceIdElements(
             child.sourceId
-          )) == null ? void 0 : _a3[0]) == null ? void 0 : _b3.element
+          )) == null ? void 0 : _a3[0]) == null ? void 0 : _b3.element,
+          type: child.type
         };
       }).filter(({ element }) => !!element)) ?? [];
       if ("layout" in updates && updates.layout.value === "freeform") {
@@ -112123,7 +112304,7 @@ const containerLayout = (sizeProps) => Prop.union({
           return baseUpdate;
         }
         const updatesBySourceId = {};
-        elements.forEach(({ sourceId: sourceId2, element, currentProps }) => {
+        elements.forEach(({ sourceId: sourceId2, element, currentProps, type: type5 }) => {
           const elementRect = element.getBoundingClientRect();
           const gridPosition = editStore2.ui.dnd.grid.getGridPositionInfo({
             positionRect: elementRect,
@@ -112136,8 +112317,14 @@ const containerLayout = (sizeProps) => Prop.union({
             props: {
               marginTop: Property.Dimension(Dim.row(gridPosition.yGU)),
               marginLeft: Property.Dimension(Dim.col(gridPosition.xGU)),
-              width: Property.Dimension(Dim.col(gridPosition.widthGU)),
-              height: isHeightFit ? Property.Dimension(Dim.fit()) : Property.Dimension(Dim.row(gridPosition.heightGU))
+              ...type5 === "SbIcon" ? {
+                size: Property.Dimension(Dim.col(gridPosition.widthGU))
+              } : {
+                width: Property.Dimension(
+                  Dim.col(gridPosition.widthGU)
+                ),
+                height: isHeightFit ? Property.Dimension(Dim.fit()) : Property.Dimension(Dim.row(gridPosition.heightGU))
+              }
             },
             meta: {}
           };
@@ -112154,7 +112341,7 @@ const containerLayout = (sizeProps) => Prop.union({
         };
       } else if (previousProps.layout === "freeform" && (newProps.layout === "vertical" || newProps.layout === "horizontal")) {
         const updatesBySourceId = {};
-        elements.forEach(({ sourceId: sourceId2, element, currentProps }) => {
+        elements.forEach(({ sourceId: sourceId2, element, currentProps, type: type5 }) => {
           const elementRect = element.getBoundingClientRect();
           const isHeightFit = isDimension(currentProps == null ? void 0 : currentProps.height) && currentProps.height.mode === "fit";
           updatesBySourceId[sourceId2] = {
@@ -112162,8 +112349,12 @@ const containerLayout = (sizeProps) => Prop.union({
               marginTop: Property.Static(""),
               marginLeft: Property.Static(""),
               constraintTop: Property.Static(""),
-              width: Property.Dimension(Dim.px(elementRect.width)),
-              height: isHeightFit ? Property.Dimension(Dim.fit()) : Property.Dimension(Dim.px(elementRect.height))
+              ...type5 === "SbIcon" ? {
+                size: Property.Dimension(Dim.px(elementRect.width))
+              } : {
+                width: Property.Dimension(Dim.px(elementRect.width)),
+                height: isHeightFit ? Property.Dimension(Dim.fit()) : Property.Dimension(Dim.px(elementRect.height))
+              }
             },
             meta: {}
           };
@@ -116894,6 +117085,7 @@ const handleGridDropWithinCanvas = (params) => {
   const editStore2 = getEditStore();
   const dropSourceId = editStore2.runtimeEntitiesManager.getEditorWidgetSourceId(dropTargetId);
   const draggedSourceId = editStore2.runtimeEntitiesManager.getEditorWidgetSourceId(draggedId);
+  const draggedType = editStore2.runtimeEntitiesManager.getEditorWidgetType(draggedId);
   if (!dropSourceId || !draggedSourceId) {
     throw new Error(`Missing IDs: dragging ${draggedId} to ${dropTargetId}`);
   }
@@ -116913,15 +117105,16 @@ const handleGridDropWithinCanvas = (params) => {
   const droppedWidgetProps = (_a2 = editStore2.runtimeEntitiesManager.getEditorWidgetMeta(draggedId)) == null ? void 0 : _a2.props;
   const safeExistingDimensions = filterSafeGridDimensionProperties({
     width: droppedWidgetProps == null ? void 0 : droppedWidgetProps.width,
-    height: droppedWidgetProps == null ? void 0 : droppedWidgetProps.height
+    height: droppedWidgetProps == null ? void 0 : droppedWidgetProps.height,
+    size: droppedWidgetProps == null ? void 0 : droppedWidgetProps.size
   });
   const width = safeExistingDimensions.width ?? Property.Dimension(Dim.col(droppedWidgetConstraints.width));
   const height = safeExistingDimensions.height ?? Property.Dimension(Dim.rows(droppedWidgetConstraints.height));
+  const size2 = safeExistingDimensions.size ?? Property.Dimension(Dim.col(droppedWidgetConstraints.width));
   const propsToChange = droppedWidgetConstraints ? {
     marginTop: Property.Dimension(Dim.row(droppedWidgetConstraints.top)),
     marginLeft: Property.Dimension(Dim.col(droppedWidgetConstraints.left)),
-    width,
-    height,
+    ...draggedType === "SbIcon" ? { size: size2 } : { width, height },
     constraintTop: Property.Expression(
       JSON.stringify(droppedWidgetConstraints.constraintTop)
     )
@@ -116987,13 +117180,18 @@ const handleGridDrop = async ({
     });
   }
 };
-const mergeDroppedDimensions = (draggedProps, activeDragRect) => {
+const mergeDroppedDimensions = (draggedType, draggedProps, activeDragRect) => {
   const safeExistingDimensions = filterSafeStackDimensionProperties({
     width: draggedProps == null ? void 0 : draggedProps.width,
-    height: draggedProps == null ? void 0 : draggedProps.height
+    height: draggedProps == null ? void 0 : draggedProps.height,
+    size: draggedProps == null ? void 0 : draggedProps.size
   });
   const width = safeExistingDimensions.width ?? ((activeDragRect == null ? void 0 : activeDragRect.width) ? Property.Dimension(Dim.px(activeDragRect.width)) : Property.Static(""));
   const height = safeExistingDimensions.height ?? ((activeDragRect == null ? void 0 : activeDragRect.height) ? Property.Dimension(Dim.px(activeDragRect.height)) : Property.Static(""));
+  if (draggedType === "SbIcon") {
+    const size2 = safeExistingDimensions.size ?? ((activeDragRect == null ? void 0 : activeDragRect.height) ? Property.Dimension(Dim.px(activeDragRect.height)) : Property.Static(""));
+    return { size: size2 };
+  }
   return {
     width,
     height
@@ -117046,7 +117244,7 @@ const handleStackDropWithinCanvas = (params) => {
         marginTop: Property.Static(""),
         marginLeft: Property.Static(""),
         constraintTop: Property.Static(""),
-        ...mergeDroppedDimensions(draggedProps, activeDragRect)
+        ...mergeDroppedDimensions(draggedType, draggedProps, activeDragRect)
       }
     });
   }
@@ -117089,7 +117287,7 @@ const dropComponentInWrappingSectionOrColumn = async (params) => {
       marginTop: Property.Static(""),
       marginLeft: Property.Static(""),
       constraintTop: Property.Static(""),
-      ...mergeDroppedDimensions(draggedProps, activeDragRect)
+      ...mergeDroppedDimensions(dropTargetType, draggedProps, activeDragRect)
     }
   });
 };
@@ -117530,12 +117728,18 @@ const AddSectionButton = ({
   sectionInstanceId
 }) => {
   const indexForNewSection = placement === "above" ? indexForBaseSection : indexForBaseSection + 1;
-  const createSection = useCallback(() => {
-    createComponent({
+  const createSection = useCallback(async () => {
+    const newSectionSourceId = await 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,
@@ -117626,10 +117830,17 @@ const canResizeHeight = (heightMode) => {
   return heightMode === "px" || heightMode === "rows" || heightMode === "gridUnit";
 };
 const useResizeCapabilities = (instanceId) => {
-  var _a2, _b2, _c2, _d2, _e2;
+  var _a2, _b2, _c2, _d2, _e2, _f2, _g2;
   const widget = (_a2 = rootStore.editStore) == null ? void 0 : _a2.runtimeEntitiesManager.getEditorWidgetMeta(instanceId);
-  const widthMode = (_c2 = (_b2 = widget == null ? void 0 : widget.props) == null ? void 0 : _b2.width) == null ? void 0 : _c2.mode;
-  const heightMode = (_e2 = (_d2 = widget == null ? void 0 : widget.props) == null ? void 0 : _d2.height) == null ? void 0 : _e2.mode;
+  if ((widget == null ? void 0 : widget.type) === "SbIcon") {
+    const sizeMode = (_c2 = (_b2 = widget.props) == null ? void 0 : _b2.size) == null ? void 0 : _c2.mode;
+    return {
+      canResizeWidth: sizeMode != null && sizeMode !== "fit",
+      canResizeHeight: false
+    };
+  }
+  const widthMode = (_e2 = (_d2 = widget == null ? void 0 : widget.props) == null ? void 0 : _d2.width) == null ? void 0 : _e2.mode;
+  const heightMode = (_g2 = (_f2 = widget == null ? void 0 : widget.props) == null ? void 0 : _f2.height) == null ? void 0 : _g2.mode;
   return {
     canResizeWidth: canResizeWidth(widthMode),
     canResizeHeight: canResizeHeight(heightMode)
@@ -117654,7 +117865,9 @@ const HandlesWrapper = qe$1.div`
   pointer-events: none;
 `;
 const InteractionRectHandles = (props2) => {
+  var _a2;
   const { instanceId, isDragging, selectionType } = props2;
+  const type5 = (_a2 = rootStore.editStore) == null ? void 0 : _a2.runtimeEntitiesManager.getEditorWidgetType(instanceId);
   const [showPopover, setShowPopover] = useState(null);
   const { canResizeWidth: canResizeWidth2, canResizeHeight: canResizeHeight2 } = useResizeCapabilities(instanceId);
   const timeoutRef = useRef(null);
@@ -117667,8 +117880,8 @@ const InteractionRectHandles = (props2) => {
   }, []);
   const throttledResizeWidget = useMemo$2(
     () => lodashExports.throttle((e3) => {
-      var _a2;
-      (_a2 = rootStore.editStore) == null ? void 0 : _a2.ui.resizing.resizeWidget(
+      var _a3;
+      (_a3 = rootStore.editStore) == null ? void 0 : _a3.ui.resizing.resizeWidget(
         e3.clientX,
         e3.clientY,
         instanceId,
@@ -117685,14 +117898,14 @@ const InteractionRectHandles = (props2) => {
     [throttledResizeWidget]
   );
   const handlePointerUp = useCallback(() => {
-    var _a2;
-    (_a2 = rootStore.editStore) == null ? void 0 : _a2.ui.resizing.applyResize(instanceId);
+    var _a3;
+    (_a3 = rootStore.editStore) == null ? void 0 : _a3.ui.resizing.applyResize(instanceId);
     window.removeEventListener("pointermove", handlePointerMove);
     window.removeEventListener("pointerup", handlePointerUp);
   }, [handlePointerMove, instanceId]);
   const handlePointerDown = useCallback(
     (e3, position2) => {
-      var _a2;
+      var _a3;
       e3.stopPropagation();
       e3.preventDefault();
       if (timeoutRef.current) {
@@ -117710,7 +117923,7 @@ const InteractionRectHandles = (props2) => {
         return;
       }
       setShowPopover(null);
-      (_a2 = rootStore.editStore) == null ? void 0 : _a2.ui.resizing.startResizing(
+      (_a3 = rootStore.editStore) == null ? void 0 : _a3.ui.resizing.startResizing(
         e3.clientX,
         e3.clientY,
         instanceId,
@@ -117798,7 +118011,7 @@ const InteractionRectHandles = (props2) => {
                   }
                 }
               },
-              content: /* @__PURE__ */ jsxRuntimeExports.jsx(NotifierTooltipBody, { children: pos2 === "left" || pos2 === "right" ? "Width cannot be resized. Change width to pixel to enable manual resizing." : pos2 === "top" || pos2 === "bottom" ? "Height cannot be resized. Change height to pixel to enable manual resizing." : "" }),
+              content: /* @__PURE__ */ jsxRuntimeExports.jsx(NotifierTooltipBody, { children: pos2 === "left" || pos2 === "right" ? "Width cannot be resized. Change width to pixel to enable manual resizing." : pos2 === "top" || pos2 === "bottom" ? type5 === "SbIcon" ? "Icons can be resized by changing its width." : "Height cannot be resized. Change height to pixel to enable manual resizing." : "" }),
               children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" } })
             }
           )
@@ -119023,7 +119236,7 @@ function useTypographyStyling({
   };
 }
 const DEFAULT_ICON_SPACING = 8;
-const DEFAULT_ICON_SIZE$1 = 16;
+const DEFAULT_ICON_SIZE = 16;
 const ICON_POSITION_OPTIONS = [
   {
     icon: "ICON_LEFT_ALIGN",
@@ -119814,7 +120027,7 @@ const getStackChildStyle = ({
   parentWidth
 }) => {
   const height = (childProps == null ? void 0 : childProps.height) ?? Dim.fit();
-  const heightCss = (
+  let heightCss = (
     // using 100% height when there is only one child and user's intention to set the child height as exact 100%, e.g. an image with large original height
     // if parent height is fit-content, child height 100% will cause unexpected height if child is empty container
     childCount === 1 && (height == null ? void 0 : height.mode) === "fill" && (parentHeight == null ? void 0 : parentHeight.mode) !== "fit" ? { height: "100%" } : dimToCSS(height, "height", primary === "height")
@@ -119822,23 +120035,18 @@ const getStackChildStyle = ({
   const width = (childProps == null ? void 0 : childProps.width) ?? (["SbText", "SbButton", "SbCheckbox", "SbSwitch"].includes(
     (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 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"
-  );
+  let widthCss = childCount === 1 && (width == null ? void 0 : width.mode) === "fill" && (parentWidth == null ? void 0 : parentWidth.mode) !== "fit" ? { width: "100%" } : dimToCSS(width, "width", primary === "width");
+  if ((childProps == null ? void 0 : childProps.type) === "SbIcon") {
+    heightCss = dimToCSS(Dim.fit(), "height", false);
+    widthCss = dimToCSS(Dim.fit(), "width", false);
+  }
+  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 margin2 = (childProps == null ? void 0 : childProps.margin) ?? {
     top: Dim.px(0),
     bottom: Dim.px(0),
@@ -119848,6 +120056,7 @@ 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,
@@ -120058,20 +120267,16 @@ 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) => getChildName(child2) === name);
+      const child = childrenArray.find((child2) => child2.name === name);
       if (!child) {
         return acc;
       }
-      const marginTopPx = (((_a2 = child.props.marginTop) == null ? void 0 : _a2.value) ?? 0) * rowHeight;
-      const constraintTop = child.props.constraintTop;
+      const marginTopPx = (((_a2 = child.marginTop) == null ? void 0 : _a2.value) ?? 0) * rowHeight;
+      const constraintTop = child.constraintTop;
       const bottomFunc = (name2) => {
         const topRow = acc[name2];
         const pxHeight = pxHeights[name2];
@@ -120096,16 +120301,16 @@ const calculateRowPositions = (orderedNames, childrenArray, rowHeight, pxHeights
 const orderConstraints = (children) => {
   const childrenMap = children.reduce(
     (acc, child) => {
-      acc[getChildName(child)] = child;
+      acc[child.name] = child;
       return acc;
     },
     {}
   );
   const constraintsMap = children.reduce(
     (acc, child) => {
-      if (child.props.constraintTop) {
-        const constraints = Array.isArray(child.props.constraintTop) ? child.props.constraintTop : [child.props.constraintTop];
-        acc[getChildName(child)] = constraints.filter(
+      if (child.constraintTop) {
+        const constraints = Array.isArray(child.constraintTop) ? child.constraintTop : [child.constraintTop];
+        acc[child.name] = constraints.filter(
           (constraint) => !!childrenMap[constraint]
         );
       }
@@ -120117,24 +120322,24 @@ const orderConstraints = (children) => {
   const foundItems = /* @__PURE__ */ new Set();
   const itemsLeft = /* @__PURE__ */ new Set();
   children.forEach((child) => {
-    const constraints = constraintsMap[getChildName(child)] ?? [];
+    const constraints = constraintsMap[child.name] ?? [];
     const hasNoConstraints = constraints.length === 0;
     if (hasNoConstraints) {
-      foundItems.add(getChildName(child));
-      orderedNames.push(getChildName(child));
+      foundItems.add(child.name);
+      orderedNames.push(child.name);
     } else {
       itemsLeft.add(child);
     }
   });
   while (itemsLeft.size > 0) {
     itemsLeft.forEach((child) => {
-      const constraints = constraintsMap[getChildName(child)] ?? [];
+      const constraints = constraintsMap[child.name] ?? [];
       const constraintsLeft = constraints.filter(
         (constraint) => !foundItems.has(constraint)
       );
       if (constraintsLeft.length === 0) {
-        foundItems.add(getChildName(child));
-        orderedNames.push(getChildName(child));
+        foundItems.add(child.name);
+        orderedNames.push(child.name);
         itemsLeft.delete(child);
       }
     });
@@ -120185,99 +120390,148 @@ const heightReducer = (state, action2) => {
   }
 };
 const EMPTY_ARRAY$1 = [];
-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;
+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 Component3 = heightMode === "fit" || childProps.sbType === "SbIcon" ? MeasuredComponent : StaticComponent;
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
         style: {
           gridRow: `${top2 + 1} / span ${Math.max(1, rows)}`,
-          gridColumn: `${left2 + 1} / span ${Math.max(1, columns2)}`,
+          gridColumn: `${left2 + 1} / span ${Math.max(1, columns)}`,
           width: "100%",
           maxWidth: "100%"
         },
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           Component3,
           {
-            staticHeight: (((_b3 = child.props.height) == null ? void 0 : _b3.value) ?? 0) * rowHeight,
+            staticHeight: (((_b2 = childProps.height) == null ? void 0 : _b2.value) ?? 0) * rowHeight,
+            style: childProps.sbType === "SbIcon" ? {
+              aspectRatio: "1"
+            } : void 0,
             onHeightChanged: (height) => {
               dispatchHeight({
                 type: "SET_HEIGHT",
-                name: getChildName(child),
+                name: childProps.name,
                 height
               });
             },
-            children: child
+            children: childElement
           }
         )
       },
-      getChildName(child)
+      childProps.name
     );
-  }) }) });
-};
+  }
+);
+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 sbType = isSbComponent(child) ? child.type.sbType : void 0;
+        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);
+        let width = (entity == null ? void 0 : entity.width) ?? (isDimension(child.props.width) ? child.props.width : void 0);
+        if (sbType === "SbIcon") {
+          width = (entity == null ? void 0 : entity.size) ?? (isDimension(child.props.size) ? child.props.size : 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,
+          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",
@@ -126201,9 +126455,9 @@ const getIconPositionStyle = ({
     right: offsetRight === "auto" ? offsetRight : `${offsetRight}px`
   };
 };
-const getIconPadding = (paddingValue = INPUT_PADDING.right, iconSize = DEFAULT_ICON_SIZE$1, withSpacing = true) => {
+const getIconPadding = (paddingValue = INPUT_PADDING.right, iconSize = DEFAULT_ICON_SIZE, withSpacing = true) => {
   const spacing2 = withSpacing ? DEFAULT_ICON_SPACING : 0;
-  const baseValue = iconSize ? iconSize + spacing2 : DEFAULT_ICON_SIZE$1;
+  const baseValue = iconSize ? iconSize + spacing2 : DEFAULT_ICON_SIZE;
   return Dim.px(baseValue + (paddingValue.value ?? 0));
 };
 const DEFAULT_LABEL_WIDTH_IN_PERCENT = 30;
@@ -126957,7 +127211,7 @@ const useInputIconSize = ({
       textStyleVariant: textStyle2.variant,
       defaultTextStyleVariant: DEFAULT_INPUT_TEXT_STYLE_VARIANT
     })
-  ) : DEFAULT_ICON_SIZE$1;
+  ) : DEFAULT_ICON_SIZE;
 };
 const useInputGroupStylingProps = (props2) => {
   const { theme } = useTheme$1();
@@ -127174,7 +127428,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$1;
+        const horizontalPadding = iconSize ? iconSize + DEFAULT_ICON_SPACING : DEFAULT_ICON_SIZE;
         if (iconPosition === "left") {
           adjustedForIcon = {
             left: Dim.px(horizontalPadding + (((_a2 = padding2.left) == null ? void 0 : _a2.value) ?? 0))
@@ -127260,7 +127514,7 @@ const _InputComponent = class _InputComponent extends React__default.Component {
       );
     });
     __publicField(this, "passwordIconComponent", () => {
-      const iconSize = this.props.iconSize ?? DEFAULT_ICON_SIZE$1;
+      const iconSize = this.props.iconSize ?? DEFAULT_ICON_SIZE;
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
         Button$4,
         {
@@ -127317,7 +127571,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$1;
+      const iconSize = this.props.iconSize ?? DEFAULT_ICON_SIZE;
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
         "div",
         {
@@ -134884,7 +135138,7 @@ function requireButton() {
 }
 var buttonExports = /* @__PURE__ */ requireButton();
 const AntdButton = /* @__PURE__ */ getDefaultExportFromCjs(buttonExports);
-const StyledButton$1 = qe$1(AntdButton)`
+const StyledButton = qe$1(AntdButton)`
   color: ${(props2) => props2.color};
   ${({ $width }) => $width ? `width: ${$width}` : ""};
   ${({ $bordered }) => !$bordered ? "border: 0px;" : ""};
@@ -134899,7 +135153,7 @@ const Button$2 = memo(
   forwardRef(
     ({ bordered = true, width, children, ...buttonProps }, ref2) => {
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
-        StyledButton$1,
+        StyledButton,
         {
           $bordered: bordered,
           $width: width,
@@ -135680,8 +135934,7 @@ const RowDensity = {
 };
 const HorizontalAlignment = {
   left: "left",
-  right: "right",
-  center: "center"
+  right: "right"
 };
 const VerticalAlignment = {
   center: "center"
@@ -135798,7 +136051,7 @@ const PARSED_INPUT_TYPES = [
   EditInputType.Number,
   EditInputType.Checkbox
 ];
-const TextBoxEditTypes = [
+[
   EditInputType.Text,
   EditInputType.Number,
   EditInputType.Email
@@ -135900,15 +136153,26 @@ 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().propertiesPanel({
+  cellIcon: Prop.string().readAndWrite().contextual(tableContextualArgs).propertiesPanel({
     label: "Cell icon",
     controlType: "ICON_SELECTOR",
     isRemovable: true,
     visibility: "SHOW_NAME",
     defaultOnAdd: "info"
   }),
-  cellIconPosition: Prop.string().default("left").readAndWrite().propertiesPanel({
+  cellIconPosition: Prop.string().default("left").contextual(tableContextualArgs).readAndWrite().propertiesPanel({
     label: "Cell icon position",
     controlType: "RADIO_BUTTON_GROUP",
     options: [
@@ -135925,7 +136189,7 @@ const cellIconProps = {
     ]
   })
 };
-const horizontalAlignProp = () => Prop.string().readAndWrite().propertiesPanel({
+const horizontalAlignProp = () => Prop.string().readAndWrite().contextual(tableContextualArgs).propertiesPanel({
   label: "Horizontal alignment",
   controlType: "RADIO_BUTTON_GROUP",
   options: [
@@ -135934,7 +136198,7 @@ const horizontalAlignProp = () => Prop.string().readAndWrite().propertiesPanel({
     { value: "right", icon: "RIGHT_ALIGN" }
   ]
 }).default("left");
-const verticalAlignProp = () => Prop.string().readAndWrite().propertiesPanel({
+const verticalAlignProp = () => Prop.string().readAndWrite().contextual(tableContextualArgs).propertiesPanel({
   label: "Vertical alignment",
   controlType: "RADIO_BUTTON_GROUP",
   options: [
@@ -135945,7 +136209,7 @@ const verticalAlignProp = () => Prop.string().readAndWrite().propertiesPanel({
 }).default("center");
 const cellBackgroundProp = colorProp({
   label: "Background color"
-}).default(() => Theme.colors.neutral).readAndWrite();
+}).contextual(tableContextualArgs).default(() => Theme.colors.neutral).readAndWrite();
 const textStyleProps = {
   horizontalAlign: horizontalAlignProp(),
   verticalAlign: verticalAlignProp(),
@@ -135953,7 +136217,7 @@ const textStyleProps = {
     propertiesPanel: {
       label: "Cell text style"
     }
-  }).default(() => ({
+  }).contextual(tableContextualArgs).default(() => ({
     variant: DEFAULT_CELL_TEXT_STYLE_VARIANT
   })),
   cellBackground: cellBackgroundProp
@@ -135968,22 +136232,22 @@ const computedValueUnion = Prop.union({
     },
     {
       isDerived: Prop.literal(true),
-      computedValue: Prop.string().readAndWrite().propertiesPanel({
+      computedValue: Prop.string().contextual(tableContextualArgs).readAndWrite().propertiesPanel({
         label: "Computed value"
-        // todo: add special control that can use currentRow
       })
     }
   ]
 }).getProps();
 const textColumnProperties = {
   general: {
-    displayedValue: Prop.string().readAndWrite().propertiesPanel({
+    displayedValue: Prop.string().contextual(tableContextualArgs).readAndWrite().propertiesPanel({
       label: "Displayed value",
       controlType: "COMPUTE_TABLE_VALUE"
     })
   },
   presentation: {
-    textWrap: Prop.boolean().readAndWrite().propertiesPanel({
+    ...cellIconProps,
+    textWrap: Prop.boolean().contextual(tableContextualArgs).readAndWrite().propertiesPanel({
       label: "Wrap text",
       controlType: "SWITCH"
     }),
@@ -135993,23 +136257,25 @@ const textColumnProperties = {
 const emailColumnProperties = { ...textColumnProperties };
 const buttonColumnProperties = {
   general: {
-    buttonLabel: Prop.string().default("Action").readAndWrite().propertiesPanel({
+    buttonLabel: Prop.string().default("Action").contextual(tableContextualArgs).readAndWrite().propertiesPanel({
       label: "Button label",
       controlType: "COMPUTE_TABLE_VALUE"
     }),
-    isDisabled: Prop.boolean().readAndWrite().propertiesPanel({
+    isDisabled: Prop.boolean().readAndWrite().contextual(tableContextualArgs).propertiesPanel({
       label: "Disabled",
       controlType: "SWITCH"
     })
   },
   presentation: {
-    buttonIcon: Prop.string().readAndWrite().propertiesPanel({
+    buttonIcon: Prop.string().readAndWrite().contextual(tableContextualArgs).propertiesPanel({
       label: "Button icon",
       controlType: "ICON_SELECTOR",
       isRemovable: true,
       visibility: "SHOW_NAME"
     }),
-    buttonIconPosition: Prop.string().readAndWrite().default("left").propertiesPanel({
+    buttonIconPosition: Prop.string().readAndWrite().contextual(
+      tableContextualArgs
+    ).default("left").propertiesPanel({
       label: "Cell icon position",
       controlType: "RADIO_BUTTON_GROUP",
       options: [
@@ -136025,7 +136291,9 @@ const buttonColumnProperties = {
         }
       ]
     }),
-    buttonVariant: Prop.string().default("primary").readAndWrite().propertiesPanel({
+    buttonVariant: Prop.string().default("primary").contextual(
+      tableContextualArgs
+    ).readAndWrite().propertiesPanel({
       label: "Button variant",
       controlType: "DROP_DOWN",
       options: [
@@ -136043,7 +136311,9 @@ const buttonColumnProperties = {
         }
       ]
     }),
-    buttonTextStyle: textStyleProp().default(function() {
+    buttonTextStyle: textStyleProp().contextual(
+      tableContextualArgs
+    ).default(function() {
       return {
         variant: "buttonLabel",
         textColor: {
@@ -136061,28 +136331,32 @@ const buttonColumnProperties = {
       defaultOnAdd: function() {
         return getButtonThemeDefaultBackgroundColor(Theme, "primary");
       }
-    }).readAndWrite(),
+    }).contextual(
+      tableContextualArgs
+    ).readAndWrite(),
     buttonBorder: border({
       defaultOnAdd: SECONDARY_BUTTON_BORDER_OBJECT,
       treatDefaultAsNull: function() {
         return true;
       }
-    }).default(getDefaultBorderObject)
+    }).readAndWrite().contextual(
+      tableContextualArgs
+    ).default(getDefaultBorderObject)
   }
 };
 const numberColumnProperties = {
   general: {
-    notation: Prop.string().readAndWrite().propertiesPanel({
+    notation: Prop.string().readAndWrite().contextual(tableContextualArgs).propertiesPanel({
       label: "Number format",
       controlType: "DROP_DOWN",
       options: NUMBER_FORMATTING_OPTIONS
     }),
-    minimumFractionDigits: Prop.number().readAndWrite().propertiesPanel({
+    minimumFractionDigits: Prop.number().contextual(tableContextualArgs).readAndWrite().propertiesPanel({
       label: "Minimum fraction digits",
       isRemovable: true,
       visibility: "SHOW_NAME"
     }),
-    maximumFractionDigits: Prop.number().readAndWrite().propertiesPanel({
+    maximumFractionDigits: Prop.number().contextual(tableContextualArgs).readAndWrite().propertiesPanel({
       label: "Maximum fraction digits",
       isRemovable: true,
       visibility: "SHOW_NAME"
@@ -136090,7 +136364,7 @@ const numberColumnProperties = {
   },
   presentation: {
     ...cellIconProps,
-    textWrap: Prop.boolean().readAndWrite().propertiesPanel({
+    textWrap: Prop.boolean().contextual(tableContextualArgs).readAndWrite().propertiesPanel({
       label: "Wrap text",
       controlType: "SWITCH"
     }),
@@ -136103,7 +136377,9 @@ const percentageColumnProperties = {
 };
 const currencyColumnProperties = {
   general: {
-    currency: Prop.string().default("USD").readAndWrite().propertiesPanel({
+    currency: Prop.string().default("USD").contextual(
+      tableContextualArgs
+    ).readAndWrite().propertiesPanel({
       label: "Currency",
       controlType: "DROP_DOWN",
       options: CurrencyList.map((currency) => ({
@@ -136117,12 +136393,11 @@ const currencyColumnProperties = {
 };
 const linkColumnProperties = {
   general: {
-    // 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({
+    linkUrl: Prop.string().readAndWrite().contextual(tableContextualArgs).propertiesPanel({
+      label: "Link URL",
+      controlType: "COMPUTE_TABLE_VALUE"
+    }),
+    linkLabel: Prop.string().contextual(tableContextualArgs).readAndWrite().propertiesPanel({
       label: "Link label",
       controlType: "COMPUTE_TABLE_VALUE"
     })
@@ -136138,13 +136413,15 @@ const linkColumnProperties = {
 };
 const imageColumnProperties = {
   general: {
-    openImageUrl: Prop.boolean().default(false).readAndWrite().propertiesPanel({
+    openImageUrl: Prop.boolean().contextual(tableContextualArgs).default(false).readAndWrite().propertiesPanel({
       label: "Open URL on click",
       controlType: "SWITCH"
     })
   },
   presentation: {
-    imageSize: Prop.string().readAndWrite().propertiesPanel({
+    imageSize: Prop.string().readAndWrite().contextual(
+      tableContextualArgs
+    ).propertiesPanel({
       label: "Image sizing",
       controlType: "DROP_DOWN",
       options: [
@@ -136170,14 +136447,14 @@ const imageColumnProperties = {
         }
       ]
     }),
-    imageBorderRadius: borderRadius(),
-    horizontalAlign: horizontalAlignProp(),
+    imageBorderRadius: borderRadius().contextual(tableContextualArgs),
+    horizontalAlign: horizontalAlignProp().contextual(tableContextualArgs),
     cellBackground: cellBackgroundProp
   }
 };
 const manageTimezoneUnion = Prop.union({
   shared: {
-    manageTimezone: Prop.boolean().default(false).readAndWrite().propertiesPanel({
+    manageTimezone: Prop.boolean().default(false).contextual(tableContextualArgs).readAndWrite().propertiesPanel({
       label: "Manage timezone",
       controlType: "SWITCH"
     })
@@ -136188,12 +136465,12 @@ const manageTimezoneUnion = Prop.union({
     },
     {
       manageTimezone: Prop.literal(true),
-      valueTimezone: Prop.string().readAndWrite().propertiesPanel({
+      valueTimezone: Prop.string().contextual(tableContextualArgs).readAndWrite().propertiesPanel({
         label: "Value timezone",
         controlType: "DROP_DOWN",
         options: TIMEZONE_OPTIONS
       }),
-      displayTimezone: Prop.string().readAndWrite().propertiesPanel({
+      displayTimezone: Prop.string().contextual(tableContextualArgs).readAndWrite().propertiesPanel({
         label: "Display timezone",
         controlType: "DROP_DOWN",
         options: TIMEZONE_OPTIONS
@@ -136203,12 +136480,12 @@ const manageTimezoneUnion = Prop.union({
 }).getProps();
 const dateColumnProperties = {
   general: {
-    inputFormat: Prop.string().readAndWrite().propertiesPanel({
+    inputFormat: Prop.string().contextual(tableContextualArgs).readAndWrite().propertiesPanel({
       label: "Value format",
       controlType: "DROP_DOWN",
       options: DATE_INPUT_FORMATS
     }),
-    outputFormat: Prop.string().readAndWrite().propertiesPanel({
+    outputFormat: Prop.string().contextual(tableContextualArgs).readAndWrite().propertiesPanel({
       label: "Display format",
       controlType: "DROP_DOWN",
       options: DATE_OUTPUT_FORMATS
@@ -136217,7 +136494,7 @@ const dateColumnProperties = {
   },
   presentation: {
     ...cellIconProps,
-    textWrap: Prop.boolean().readAndWrite().propertiesPanel({
+    textWrap: Prop.boolean().readAndWrite().contextual(tableContextualArgs).propertiesPanel({
       label: "Wrap text",
       controlType: "SWITCH"
     }),
@@ -136273,7 +136550,7 @@ const tagsColumnProperties = {
     horizontalAlign: horizontalAlignProp(),
     verticalAlign: verticalAlignProp(),
     cellBackground: cellBackgroundProp,
-    tagsWrap: Prop.boolean().readAndWrite().propertiesPanel({
+    tagsWrap: Prop.boolean().readAndWrite().contextual(tableContextualArgs).propertiesPanel({
       label: "Wrap tags",
       controlType: "SWITCH"
     }),
@@ -138323,7 +138600,9 @@ 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[(_b2 = props2 == null ? void 0 : props2.columnProperties) == null ? void 0 : _b2.horizontalAlign];
+  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];
 }};
   align-items: center;
   overflow: hidden;
@@ -138338,7 +138617,9 @@ 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[(_b2 = props2 == null ? void 0 : props2.columnProperties) == null ? void 0 : _b2.horizontalAlign];
+  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];
 }};
 `;
 const TableIconWrapper = qe$1.div`
@@ -145512,14 +145793,14 @@ function getLoaderFn(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-B3Ii4JGL.js"
+            "./allPathsLoader-rDsLNp7q.js"
           )];
         case 2:
           return [2, _b2.sent().allPathsLoader];
         case 3:
           return [4, import(
             /* webpackChunkName: "blueprint-icons-split-paths-by-size-loader" */
-            "./splitPathsBySizeLoader-Btq5cpt-.js"
+            "./splitPathsBySizeLoader-DCl0XfAP.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -153352,7 +153633,7 @@ const getClearableIconRight = memoizeOne$1(
     }
     const iconPadding = getIconPadding(
       inputPadding == null ? void 0 : inputPadding.right,
-      iconSize ?? DEFAULT_ICON_SIZE$1,
+      iconSize ?? DEFAULT_ICON_SIZE,
       false
     );
     return iconPadding.value;
@@ -153866,7 +154147,7 @@ class DatePickerComponent extends React__default.Component {
                                   DynamicSVG,
                                   {
                                     iconName: this.props.icon,
-                                    size: this.props.iconSize ?? DEFAULT_ICON_SIZE$1
+                                    size: this.props.iconSize ?? DEFAULT_ICON_SIZE
                                   }
                                 )
                               }
@@ -153899,258 +154180,6 @@ 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,
@@ -154197,385 +154226,6 @@ 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,
@@ -154626,279 +154276,6 @@ 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 = {};
@@ -161183,7 +160560,7 @@ const formatByType = (value, type5, options) => {
       return text;
   }
 };
-const StyledEditableDiv = qe$1.div`
+qe$1.div`
   position: relative;
   height: 100%;
   width: 100%;
@@ -161207,20 +160584,20 @@ const StyledEditableDiv = qe$1.div`
     }
   }
 `;
-const EditableCellWrapper = qe$1.div`
+qe$1.div`
   position: relative;
   height: 100%;
   width: 100%;
   padding: 0px;
 `;
-const StyledCheckmarkWrapper = qe$1.div`
+qe$1.div`
   position: relative;
   height: 100%;
   width: 100%;
   border-radius: 4px;
   overflow: hidden;
 `;
-const EditMarker = qe$1.div`
+qe$1.div`
   position: absolute;
   top: 0px;
   left: 0px;
@@ -161229,180 +160606,17 @@ const EditMarker = qe$1.div`
   border-style: solid;
   border-width: 10px 10px 0 0;
 `;
-const StyledChevronDown = qe$1(SvgChevronDown)`
+qe$1(SvgChevronDown)`
   width: 16px;
   height: 16px;
   flex-shrink: 0;
   visibility: hidden;
 `;
-const EditingCellWrapper = qe$1.div`
+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 = {
@@ -161424,18 +160638,13 @@ const getCellClassAndStyleMemo = lodashExports.memoize(
   // Custom resolver to create a unique key based on nested properties
   (...args) => JSON.stringify(args)
 );
-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
-  );
+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;
   const cellTextStyleForRow = {
-    ...(_f2 = columnProperties == null ? void 0 : columnProperties.cellProps) == null ? void 0 : _f2.textStyle,
+    ...cellProps == null ? void 0 : cellProps.textStyle,
     variant: cellTextStyleVariant,
     textColor: cellTextStyleColor ? {
       default: cellTextStyleColor
@@ -161443,95 +160652,92 @@ function getCellProperties(tableCellTextStyle, columnProperties, rowIndex) {
   };
   const cellTextStyle = cellTextStyleForRow ?? tableCellTextStyle;
   const cellProperties = {
-    isDisabled: getPropertyValue(columnProperties.isDisabled, rowIndex),
+    isDisabled: getPropertyValue(columnProperties.isDisabled, currentRow),
     horizontalAlign: getPropertyValue(
       columnProperties.horizontalAlign,
-      rowIndex
+      currentRow
+    ),
+    verticalAlign: getPropertyValue(columnProperties.verticalAlign, currentRow),
+    cellBackground: getPropertyValue(
+      columnProperties.cellBackground,
+      currentRow
     ),
-    verticalAlign: getPropertyValue(columnProperties.verticalAlign, rowIndex),
-    cellBackground: getPropertyValue(columnProperties.cellBackground, rowIndex),
     buttonBackgroundColor: getPropertyValue(
       columnProperties.buttonBackgroundColor,
-      rowIndex
-    ),
-    buttonBorder: getPropertyValue(
-      columnProperties.buttonBorder,
-      rowIndex,
-      true
+      currentRow
     ),
-    buttonVariant: getPropertyValue(columnProperties.buttonVariant, rowIndex),
+    buttonBorder: getPropertyValue(columnProperties.buttonBorder, currentRow),
+    buttonVariant: getPropertyValue(columnProperties.buttonVariant, currentRow),
     buttonTextStyle: getPropertyValue(
       columnProperties.buttonTextStyle,
-      rowIndex,
-      true
+      currentRow
     ),
     cellIcon: getPropertyValue(
       columnProperties.columnType === "button" ? columnProperties.buttonIcon : columnProperties.cellIcon,
-      rowIndex
+      currentRow
     ),
     cellIconPosition: getPropertyValue(
       columnProperties.columnType === "button" ? columnProperties.buttonIconPosition : columnProperties.cellIconPosition,
-      rowIndex
+      currentRow
     ) ?? "left",
-    buttonLabel: getPropertyValue(columnProperties.buttonLabel, rowIndex, true),
-    linkUrl: getPropertyValue(columnProperties.linkUrl, rowIndex, true),
-    linkLabel: getPropertyValue(columnProperties.linkLabel, rowIndex, true),
-    openInNewTab: getPropertyValue(
-      columnProperties.openInNewTab,
-      rowIndex,
-      true
-    ),
+    buttonLabel: getPropertyValue(columnProperties.buttonLabel, currentRow),
+    linkUrl: getPropertyValue(columnProperties.linkUrl, currentRow),
+    linkLabel: getPropertyValue(columnProperties.linkLabel, currentRow),
+    openInNewTab: getPropertyValue(columnProperties.openInNewTab, currentRow),
     cellTextStyle,
     displayedValue: getPropertyValue(
       columnProperties.displayedValue,
-      rowIndex,
-      true
+      currentRow
     ),
-    tagsWrap: getPropertyValue(columnProperties.tagsWrap, rowIndex, true),
-    textWrap: getPropertyValue(columnProperties.textWrap, rowIndex, true),
-    imageSize: getPropertyValue(columnProperties.imageSize, rowIndex),
+    tagsWrap: getPropertyValue(columnProperties.tagsWrap, currentRow),
+    textWrap: getPropertyValue(columnProperties.textWrap, currentRow),
+    imageSize: getPropertyValue(columnProperties.imageSize, currentRow),
     imageBorderRadius: getPropertyValue(
       columnProperties.imageBorderRadius,
-      rowIndex,
-      true
-    ),
-    openImageUrl: getPropertyValue(
-      columnProperties.openImageUrl,
-      rowIndex,
-      true
+      currentRow
     ),
+    openImageUrl: getPropertyValue(columnProperties.openImageUrl, currentRow),
     minimumFractionDigits: getPropertyValue(
       columnProperties.minimumFractionDigits,
-      rowIndex
+      currentRow
     ),
     maximumFractionDigits: getPropertyValue(
       columnProperties.maximumFractionDigits,
-      rowIndex
+      currentRow
     ),
-    currency: getPropertyValue(columnProperties.currency, rowIndex, true),
-    inputFormat: getPropertyValue(columnProperties.inputFormat, rowIndex, true),
-    outputFormat: getPropertyValue(columnProperties.outputFormat, rowIndex),
+    currency: getPropertyValue(columnProperties.currency, currentRow),
+    inputFormat: getPropertyValue(columnProperties.inputFormat, currentRow),
+    outputFormat: getPropertyValue(columnProperties.outputFormat, currentRow),
     manageTimezone: columnProperties.manageTimezone,
-    timezone: getPropertyValue(columnProperties.timezone, rowIndex, true),
+    timezone: getPropertyValue(columnProperties.timezone, currentRow),
     displayTimezone: getPropertyValue(
       columnProperties.displayTimezone,
-      rowIndex
+      currentRow
     )
   };
   return cellProperties;
 }
-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;
+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: {} });
   }
+  return value;
 }
 function getFirstPropertyValue(value) {
-  return Array.isArray(value) ? value.find(Boolean) : value;
+  if (isContextualFunction(value)) {
+    return value({ currentRow: {} });
+  }
+  return value;
 }
 const renderCell = ({
   value,
@@ -162715,7 +161921,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: "COMPUTED_CODE_EDITOR"
+      controlType: "FUNCTION_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)
@@ -162752,11 +161958,12 @@ const propertiesDefinition$9 = {
       helpText: "Enable per column filtering"
     }),
     defaultFilters: Prop.any().readAndWrite().propertiesPanel({
-      controlType: "COMPUTED_CODE_EDITOR",
+      controlType: "FUNCTION_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";
@@ -162833,6 +162040,8 @@ 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"
@@ -162841,6 +162050,8 @@ 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;
       }
@@ -172713,11 +171924,13 @@ const downloadTableData = ({
   );
   const headerData = visibleColumns.map((column2) => column2.Header).map((v2) => sanitizeItem(v2));
   const rowData = data2.map(
-    (item, index2) => visibleColumns.map((column2) => {
+    (_15, index2) => visibleColumns.map((column2) => {
+      const itemIndex = (filteredOrderMap == null ? void 0 : filteredOrderMap[index2]) ?? index2;
+      const item = data2[itemIndex];
       const cellProperties = getCellProperties(
         tableCellTextStyle,
         column2.columnProperties,
-        (filteredOrderMap == null ? void 0 : filteredOrderMap[index2]) ?? index2
+        item
       );
       const value = item[column2.columnProperties.id];
       return formatByType(value, column2.columnProperties.columnType, {
@@ -174030,7 +173243,7 @@ function getUniqueValues({
             formattedValue: formatByType(
               value,
               columnProperties.columnType,
-              getCellProperties(tableCellTextStyle, columnProperties, i3)
+              getCellProperties(tableCellTextStyle, columnProperties, row)
             ),
             rawValue: value,
             index: 0
@@ -174046,7 +173259,7 @@ function getUniqueValues({
           formattedValue: formatByType(
             rawValue,
             columnProperties.columnType,
-            getCellProperties(tableCellTextStyle, columnProperties, i3)
+            getCellProperties(tableCellTextStyle, columnProperties, row)
           ),
           rawValue,
           index: 0
@@ -176777,6 +175990,23 @@ 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 = {};
@@ -176846,7 +176076,7 @@ const _TableWidget = class _TableWidget extends React__default.Component {
       }
       return getPropertyValue(
         this.props.columns[columnId].cellBackground,
-        originalRowIndex
+        this.props.tableData[originalRowIndex]
       );
     });
     __publicField(this, "getIsLoading", () => {
@@ -177586,7 +176816,6 @@ 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);
@@ -177690,212 +176919,16 @@ const _TableWidget = class _TableWidget extends React__default.Component {
           index: this.props.multiRowSelection ? columnProperties.index + 1 : columnProperties.index,
           notation: columnNotation
         },
-        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
-              }
-            });
-          }
-        }
+        Cell: this.createTableCell(columnProperties, isHidden2)
       };
       columnsArray.push(columnData);
     }
-    const columnString = JSON.stringify(columnsArray);
+    const columnString = JSON.stringify(columnsArray, (key2, value) => {
+      if (key2 === "columnProperties") {
+        return this.getColumnPropertiesString(value);
+      }
+      return value;
+    });
     if (columnString === this.previousColumnsString) {
       return this.previousColumns;
     }
@@ -177903,6 +176936,85 @@ 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)) {
@@ -181244,8 +180356,8 @@ const StyledCrossIcon = qe$1(SvgCrossXs)`
   right: ${({ right: right2 }) => `${right2}px`};
   top: 50%;
   transform: translateY(-50%);
-  height: ${({ iconSize }) => `${iconSize ?? DEFAULT_ICON_SIZE$1}px`};
-  width: ${({ iconSize }) => `${iconSize ?? DEFAULT_ICON_SIZE$1}px`};
+  height: ${({ iconSize }) => `${iconSize ?? DEFAULT_ICON_SIZE}px`};
+  width: ${({ iconSize }) => `${iconSize ?? DEFAULT_ICON_SIZE}px`};
   z-index: 4; // TODO: do we need to use Layers?
   cursor: pointer;
 `;
@@ -182001,7 +181113,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: "COMPUTED_CODE_EDITOR"
+      controlType: "FUNCTION_CODE_EDITOR"
     }),
     defaultOptionValue: Prop.string().propertiesPanel({
       label: "Default selected value",
@@ -183481,13 +182593,7 @@ const propertiesDefinition$4 = {
     size: Prop.dimension().readAndWrite().propertiesPanel({
       label: "Size",
       controlType: "WIDTH_DROPDOWN"
-    }).default(Dim.px(24)),
-    width: Prop.dimension().readAndWrite().default(function() {
-      return this.size;
-    }),
-    height: Prop.dimension().readAndWrite().default(function() {
-      return this.size;
-    })
+    }).default(Dim.fit())
   }).add(margin()).add(visible()),
   appearance: Section.category(PropsPanelCategory.Appearance).children({
     color: colorProp({
@@ -183513,7 +182619,7 @@ const SbIcon = registerSbComponent(
   },
   (props2) => {
     const [isLoading, setIsLoading] = useState(false);
-    const { icon, style: style2, color, onClick } = props2;
+    const { icon, style: style2, color, size: size2, onClick } = props2;
     const { style: passthroughStyle, ...passThroughProps } = usePassthroughProps(props2);
     const inlineStyles = useMemo$2(() => {
       const minWidthStyle = !icon ? {
@@ -183525,7 +182631,8 @@ const SbIcon = registerSbComponent(
         ...passthroughStyle,
         color,
         cursor: onClick ? "pointer" : "inherit",
-        ...style2
+        ...style2,
+        height: "100%"
       };
     }, [style2, color, onClick, passthroughStyle, icon]);
     const handleClick = useCallback(async () => {
@@ -183551,7 +182658,8 @@ const SbIcon = registerSbComponent(
             disablePointerEvents: true,
             iconName: icon,
             color,
-            fill: true
+            fill: (size2 == null ? void 0 : size2.mode) !== "px",
+            size: (size2 == null ? void 0 : size2.mode) === "px" ? size2.value : void 0
           }
         )
       }
@@ -183845,8 +182953,8 @@ const SbVariable = registerSbEntity(
 );
 const propertiesDefinition$1 = {
   general: Section.category(PropsPanelCategory.Uncategorized).propertiesPanel({ showHeader: false }).children({
-    intervalMs: Prop.number().default(3e5).readAndWrite().propertiesPanel({
-      label: "Interval (ms)",
+    intervalMs: Prop.number().default(300).readAndWrite().propertiesPanel({
+      label: "Interval",
       helpText: "Sets the interval of the timer",
       placeholder: "1000",
       isJSConvertible: false,
@@ -184638,6 +183746,7 @@ function listenForUrlChange() {
   return observer2;
 }
 const IframeConnected = observer(function IframeConnected2(props2) {
+  var _a2;
   useEffect(() => {
     if (!isEmbeddedBySuperblocksFirstParty()) {
       return;
@@ -184647,7 +183756,18 @@ const IframeConnected = observer(function IframeConnected2(props2) {
       editStore.setIsInitialized(true);
       editorBridge.connected();
       rootStore.setEditStore(editStore);
-      await sourceUpdateApi.connect(data2.payload.peerId, data2.payload.userId);
+      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;
+      }
       editorBridge.updatePropertiesPanels(
         editStore.propertiesPanelManager.getNonDynamicPropertiesPanels()
       );
@@ -184676,6 +183796,10 @@ 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, {}),
@@ -186111,9 +185235,9 @@ const generateDropdownStyles = (theme) => {
       transform: translateY(-50%);
       z-index: 99;
       background-repeat: no-repeat;
-      background-size: ${DEFAULT_ICON_SIZE$1}px;
-      width: ${DEFAULT_ICON_SIZE$1}px;
-      height: ${DEFAULT_ICON_SIZE$1}px;
+      background-size: ${DEFAULT_ICON_SIZE}px;
+      width: ${DEFAULT_ICON_SIZE}px;
+      height: ${DEFAULT_ICON_SIZE}px;
       display: block;
       position: absolute;
       cursor: pointer;
@@ -186705,14 +185829,38 @@ 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);
@@ -186724,7 +185872,10 @@ const SbProvider = function SbProvider2({
   }, [settings == null ? void 0 : settings.theme, settings == null ? void 0 : settings.themeOverrides]);
   useEffect(() => {
     initializeStyles(name);
-  }, [preloadedData, name]);
+  }, [name]);
+  if (!isApisInitialized) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(FullPageSpinner, {});
+  }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -198333,4 +197484,4 @@ export {
   SbTimer as y,
   SbApi as z
 };
-//# sourceMappingURL=index-kjgG33Rg.js.map
+//# sourceMappingURL=index-D9O95zsr.js.map