@superblocksteam/library 2.0.0-next.6 → 2.0.0-next.61

package/dist/{index-U8MX-8Hu.js → index-DWMz_Ohy.js}

@@ -46,7 +46,7 @@ var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use
 var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod = (obj, member, method4) => (__accessCheck(obj, member, "access private method"), method4);
-var _removeSourceIdElement_dec, _setSourceIdElement_dec, _setActiveRootInstanceId_dec, _init, _cancelApi_dec, _runApi_dec, _init2, _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;
+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, { useMemo as useMemo$2, createContext, useContext, isValidElement as isValidElement$1, cloneElement as cloneElement$1, Children, useState, createElement, useRef, useLayoutEffect as useLayoutEffect$2, forwardRef, memo, version as version$2, useEffect, Component, useCallback, useImperativeHandle, useReducer, PureComponent, useSyncExternalStore, Suspense, 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 } from "./icons-D_yAT9A6.js";
@@ -2690,14 +2690,14 @@ function getLoaderFn$1(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-DUkr4f2u.js"
+            "./allPathsLoader-Dggiono4.js"
           )];
         case 2:
           return [2, _b2.sent().allPathsLoader];
         case 3:
           return [4, import(
             /* webpackChunkName: "blueprint-icons-split-paths-by-size-loader" */
-            "./splitPathsBySizeLoader-4uQi8FeZ.js"
+            "./splitPathsBySizeLoader-DHzX-8rX.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -10229,11 +10229,12 @@ const cyrb53$1 = (str, seed2 = 0) => {
   h22 ^= Math.imul(h1 ^ h1 >>> 13, 3266489909);
   return 4294967296 * (2097151 & h22) + (h1 >>> 0);
 };
-function PropertyInfo(value, type5 = "STATIC") {
+function PropertyInfo(value, type5 = "STATIC", extra) {
   return {
     __info: true,
     value,
-    type: type5
+    type: type5,
+    ...extra
   };
 }
 const Property = {
@@ -10243,7 +10244,7 @@ const Property = {
   Expression: (value) => PropertyInfo(value, "EXPRESSION"),
   Event: (value) => PropertyInfo(value, "EVENT"),
   Dimension: (value) => PropertyInfo(value, "DIMENSION"),
-  Computed: (value) => PropertyInfo(value, "COMPUTED"),
+  Computed: (value, args) => PropertyInfo(value, "COMPUTED", args ? { args } : {}),
   Any: (value, type5 = "STATIC") => PropertyInfo(value, type5)
 };
 function isPropertyInfo(value) {
@@ -45784,6 +45785,240 @@ const SUPERBLOCKS_AUTHORIZATION_HEADER = "x-superblocks-authorization";
   akeylesssecretsmanager: srcExports.SecretsV1.Store,
   couchbase: srcExports.CouchbasePluginV1.Plugin
 });
+var TMP_HTTP_STATUS_CODE = "http.status_code";
+var TMP_HTTP_ROUTE = "http.route";
+var TMP_MESSAGING_SYSTEM = "messaging.system";
+var TMP_MESSAGING_DESTINATION_KIND = "messaging.destination_kind";
+var SEMATTRS_HTTP_STATUS_CODE = TMP_HTTP_STATUS_CODE;
+var SEMATTRS_HTTP_ROUTE = TMP_HTTP_ROUTE;
+var SEMATTRS_MESSAGING_SYSTEM = TMP_MESSAGING_SYSTEM;
+var SEMATTRS_MESSAGING_DESTINATION_KIND = TMP_MESSAGING_DESTINATION_KIND;
+const OBS_TAG_API_ID = "api-id";
+const OBS_TAG_HTTP_ROUTE = SEMATTRS_HTTP_ROUTE;
+const OBS_TAG_HTTP_STATUS_CODE = SEMATTRS_HTTP_STATUS_CODE;
+const OBS_TAG_APPLICATION_ID = "application-id";
+const OBS_TAG_BRANCH = "branch";
+const OBS_TAG_COMMIT_ID = "commit-id";
+const OBS_SOCKET_STATUS_CODE = "socket.status-code";
+class SocketErrorException extends Error {
+  constructor(code3, message2) {
+    super(message2);
+    this.code = code3;
+    this.message = message2;
+  }
+}
+class ISocket {
+  constructor(ws2, requestHandlers, globalMiddlewares, timeouts, logger) {
+    this.responseHandler = /* @__PURE__ */ new Map();
+    this.ws = ws2;
+    this.requestHandlers = requestHandlers;
+    this.globalMiddlewares = globalMiddlewares;
+    this.nxtRequestId = 0;
+    this.logger = logger ?? { error: console.error };
+    this.timeouts = timeouts;
+    this.resetConnectionTimeout();
+    this.ws.addEventListener("message", async (event) => {
+      const eventData = JSON.parse(event.data.toString());
+      return this.handleMessage(eventData);
+    });
+  }
+  async handleMessage(message2) {
+    this.resetConnectionTimeout();
+    if (message2.request) {
+      const parts = message2.request.method.split(".");
+      let handlers = this.requestHandlers;
+      for (const part of parts) {
+        handlers = handlers[part];
+        if (!handlers) {
+          return this.respondError(message2.request.id, {
+            code: 2,
+            message: `unknown method ${message2.request.method}`
+          });
+        }
+      }
+      if (!Array.isArray(handlers)) {
+        return this.respondError(message2.request.id, {
+          code: 2,
+          message: "unknown method"
+        });
+      }
+      handlers = [...this.globalMiddlewares, ...handlers];
+      if (message2.request.setAuthorization) {
+        this.peerAuthorization = message2.request.setAuthorization;
+      }
+      const reqCtx = {
+        peerAuthorization: this.peerAuthorization,
+        method: message2.request.method,
+        requestId: message2.request.id
+      };
+      const client2 = createISocketClient(this);
+      const payload = message2.request.payload;
+      let alreadyResponded = false;
+      const generateNextFn = (idx) => {
+        let wasCalled = false;
+        return async () => {
+          if (alreadyResponded) {
+            throw new SocketErrorException(4, "next() was called after the response was sent");
+          }
+          const handler = handlers[idx];
+          if (!handler) {
+            throw new SocketErrorException(5, "cannot call past the last handler in the chain");
+          }
+          if (wasCalled) {
+            throw new SocketErrorException(6, "next() was called multiple times");
+          }
+          wasCalled = true;
+          return this.callHandler(handler, payload, reqCtx, client2, generateNextFn(idx + 1));
+        };
+      };
+      let response;
+      try {
+        response = await generateNextFn(0)();
+      } catch (error) {
+        const socketError = error instanceof SocketErrorException ? { code: error.code, message: error.message } : { code: 3, message: error.toString() };
+        return this.respondError(message2.request.id, socketError, error);
+      }
+      this.respond(message2.request.id, response);
+      alreadyResponded = true;
+    } else if (message2.response && message2.response.id) {
+      const responseHandler = this.responseHandler.get(message2.response.id);
+      if (!responseHandler) {
+        return;
+      }
+      if (message2.response.error) {
+        responseHandler.reject(message2.response.error);
+      }
+      responseHandler.resolve(message2.response.payload);
+      clearTimeout(responseHandler.timeout);
+      this.responseHandler.delete(message2.response.id);
+    } else {
+      return this.respondError(-1, {
+        code: 3,
+        message: "unknown request id"
+      });
+    }
+  }
+  async callHandler(handler, params, ctx, client2, next2) {
+    return handler(params, ctx, client2, next2);
+  }
+  request(method4, params, authorization) {
+    return new Promise((resolve, reject) => {
+      const requestId = ++this.nxtRequestId;
+      this.responseHandler.set(requestId, {
+        resolve: (result) => resolve(result),
+        reject: (error) => reject(error)
+      });
+      let toSend = { request: { method: method4, payload: params, id: requestId, setAuthorization: authorization } };
+      toSend = this.decorateToSend(toSend);
+      this.ws.send(JSON.stringify(toSend));
+      this.resetConnectionTimeout();
+      this.resetNoResponseTimeout(requestId);
+    });
+  }
+  decorateToSend(message2) {
+    return message2;
+  }
+  respond(requestId, result) {
+    const toSend = {
+      response: {
+        payload: result,
+        id: requestId,
+        error: null
+      }
+    };
+    return this.ws.send(JSON.stringify(toSend));
+  }
+  respondError(requestId, error, exception) {
+    const toSend = {
+      response: {
+        payload: null,
+        id: requestId,
+        error
+      }
+    };
+    return this.ws.send(JSON.stringify(toSend));
+  }
+  resetConnectionTimeout() {
+    var _a2, _b2;
+    if (!((_a2 = this.timeouts) == null ? void 0 : _a2.connectionTimeoutInSeconds)) {
+      return;
+    }
+    if (this.connectionTimeout) {
+      clearTimeout(this.connectionTimeout);
+    }
+    this.connectionTimeout = setTimeout(this.handleConnectionTimeout(), ((_b2 = this.timeouts) == null ? void 0 : _b2.connectionTimeoutInSeconds) * 1e3);
+  }
+  handleConnectionTimeout() {
+    return () => {
+      var _a2;
+      this.logger.error(`Connection timed out after ${(_a2 = this.timeouts) == null ? void 0 : _a2.connectionTimeoutInSeconds} seconds`);
+      this.close();
+    };
+  }
+  resetNoResponseTimeout(requestId) {
+    var _a2, _b2;
+    if (!((_a2 = this.timeouts) == null ? void 0 : _a2.noResponseTimeoutInSeconds)) {
+      return;
+    }
+    const responseHandler = this.responseHandler.get(requestId);
+    if (!responseHandler) {
+      return;
+    }
+    const noResponseTimeout = responseHandler.timeout;
+    const reject = responseHandler.reject;
+    if (responseHandler.timeout) {
+      clearTimeout(noResponseTimeout);
+    }
+    responseHandler.timeout = setTimeout(this.handleNoResponseTimeout(reject), ((_b2 = this.timeouts) == null ? void 0 : _b2.noResponseTimeoutInSeconds) * 1e3);
+  }
+  handleNoResponseTimeout(reject) {
+    return () => {
+      var _a2;
+      const message2 = `Request timed out after ${(_a2 = this.timeouts) == null ? void 0 : _a2.noResponseTimeoutInSeconds} seconds`;
+      this.logger.error(message2);
+      reject({ code: 7, message: message2 });
+    };
+  }
+  close() {
+    clearTimeout(this.connectionTimeout);
+    this.responseHandler.forEach((handler, key2) => {
+      clearTimeout(handler.timeout);
+      this.logger.error(`Rejecting pending requestId ${key2} due to connection close`);
+      handler.reject({ code: 8, message: "Connection closed" });
+    });
+    this.ws.close();
+  }
+}
+const proxyTarget = Object.freeze(() => {
+});
+function createIsocketProxy(socket, path2) {
+  return new Proxy(proxyTarget, {
+    get(_target, prop) {
+      const childPath = path2 ? `${path2}.${prop}` : prop;
+      if (childPath === "then") {
+        return void 0;
+      }
+      return createIsocketProxy(socket, childPath);
+    },
+    apply(_target, _thisArg, args) {
+      if (path2 === void 0) {
+        throw new Error("The root object is not callable");
+      }
+      if (path2.endsWith(".apply") && args.length === 2 && Array.isArray(args[1])) {
+        path2 = path2.slice(0, -".apply".length);
+        args = args[1];
+      }
+      return socket.request(path2, args[0]);
+    }
+  });
+}
+function createISocketClient(socket) {
+  return {
+    close: () => socket.close(),
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    call: createIsocketProxy(socket, void 0)
+  };
+}
 var _globalThis = typeof globalThis === "object" ? globalThis : typeof self === "object" ? self : typeof window === "object" ? window : typeof global === "object" ? global : {};
 var VERSION = "1.9.0";
 var re$2 = /^(\d+)\.(\d+)\.(\d+)(-(.+))?$/;
@@ -46028,7 +46263,7 @@ var __spreadArray$3 = function(to2, from2, pack) {
   }
   return to2.concat(ar2 || Array.prototype.slice.call(from2));
 };
-var API_NAME$2 = "diag";
+var API_NAME$3 = "diag";
 var DiagAPI = (
   /** @class */
   function() {
@@ -46072,7 +46307,7 @@ var DiagAPI = (
       };
       self2.setLogger = setLogger;
       self2.disable = function() {
-        unregisterGlobal(API_NAME$2, self2);
+        unregisterGlobal(API_NAME$3, self2);
       };
       self2.createComponentLogger = function(options) {
         return new DiagComponentLogger(options);
@@ -46313,7 +46548,7 @@ var __spreadArray$1 = function(to2, from2, pack) {
   }
   return to2.concat(ar2 || Array.prototype.slice.call(from2));
 };
-var API_NAME$1 = "context";
+var API_NAME$2 = "context";
 var NOOP_CONTEXT_MANAGER = new NoopContextManager();
 var ContextAPI = (
   /** @class */
@@ -46327,7 +46562,7 @@ var ContextAPI = (
       return this._instance;
     };
     ContextAPI2.prototype.setGlobalContextManager = function(contextManager) {
-      return registerGlobal(API_NAME$1, contextManager, DiagAPI.instance());
+      return registerGlobal(API_NAME$2, contextManager, DiagAPI.instance());
     };
     ContextAPI2.prototype.active = function() {
       return this._getContextManager().active();
@@ -46344,15 +46579,232 @@ var ContextAPI = (
       return this._getContextManager().bind(context2, target);
     };
     ContextAPI2.prototype._getContextManager = function() {
-      return getGlobal$1(API_NAME$1) || NOOP_CONTEXT_MANAGER;
+      return getGlobal$1(API_NAME$2) || NOOP_CONTEXT_MANAGER;
     };
     ContextAPI2.prototype.disable = function() {
       this._getContextManager().disable();
-      unregisterGlobal(API_NAME$1, DiagAPI.instance());
+      unregisterGlobal(API_NAME$2, DiagAPI.instance());
     };
     return ContextAPI2;
   }()
 );
+var TraceFlags;
+(function(TraceFlags2) {
+  TraceFlags2[TraceFlags2["NONE"] = 0] = "NONE";
+  TraceFlags2[TraceFlags2["SAMPLED"] = 1] = "SAMPLED";
+})(TraceFlags || (TraceFlags = {}));
+var INVALID_SPANID = "0000000000000000";
+var INVALID_TRACEID = "00000000000000000000000000000000";
+var INVALID_SPAN_CONTEXT = {
+  traceId: INVALID_TRACEID,
+  spanId: INVALID_SPANID,
+  traceFlags: TraceFlags.NONE
+};
+var NonRecordingSpan = (
+  /** @class */
+  function() {
+    function NonRecordingSpan2(_spanContext) {
+      if (_spanContext === void 0) {
+        _spanContext = INVALID_SPAN_CONTEXT;
+      }
+      this._spanContext = _spanContext;
+    }
+    NonRecordingSpan2.prototype.spanContext = function() {
+      return this._spanContext;
+    };
+    NonRecordingSpan2.prototype.setAttribute = function(_key, _value) {
+      return this;
+    };
+    NonRecordingSpan2.prototype.setAttributes = function(_attributes) {
+      return this;
+    };
+    NonRecordingSpan2.prototype.addEvent = function(_name, _attributes) {
+      return this;
+    };
+    NonRecordingSpan2.prototype.addLink = function(_link) {
+      return this;
+    };
+    NonRecordingSpan2.prototype.addLinks = function(_links) {
+      return this;
+    };
+    NonRecordingSpan2.prototype.setStatus = function(_status) {
+      return this;
+    };
+    NonRecordingSpan2.prototype.updateName = function(_name) {
+      return this;
+    };
+    NonRecordingSpan2.prototype.end = function(_endTime) {
+    };
+    NonRecordingSpan2.prototype.isRecording = function() {
+      return false;
+    };
+    NonRecordingSpan2.prototype.recordException = function(_exception, _time) {
+    };
+    return NonRecordingSpan2;
+  }()
+);
+var SPAN_KEY = createContextKey("OpenTelemetry Context Key SPAN");
+function getSpan(context2) {
+  return context2.getValue(SPAN_KEY) || void 0;
+}
+function getActiveSpan() {
+  return getSpan(ContextAPI.getInstance().active());
+}
+function setSpan(context2, span) {
+  return context2.setValue(SPAN_KEY, span);
+}
+function deleteSpan(context2) {
+  return context2.deleteValue(SPAN_KEY);
+}
+function setSpanContext(context2, spanContext) {
+  return setSpan(context2, new NonRecordingSpan(spanContext));
+}
+function getSpanContext(context2) {
+  var _a2;
+  return (_a2 = getSpan(context2)) === null || _a2 === void 0 ? void 0 : _a2.spanContext();
+}
+var VALID_TRACEID_REGEX = /^([0-9a-f]{32})$/i;
+var VALID_SPANID_REGEX = /^[0-9a-f]{16}$/i;
+function isValidTraceId(traceId) {
+  return VALID_TRACEID_REGEX.test(traceId) && traceId !== INVALID_TRACEID;
+}
+function isValidSpanId(spanId) {
+  return VALID_SPANID_REGEX.test(spanId) && spanId !== INVALID_SPANID;
+}
+function isSpanContextValid(spanContext) {
+  return isValidTraceId(spanContext.traceId) && isValidSpanId(spanContext.spanId);
+}
+function wrapSpanContext(spanContext) {
+  return new NonRecordingSpan(spanContext);
+}
+var contextApi = ContextAPI.getInstance();
+var NoopTracer = (
+  /** @class */
+  function() {
+    function NoopTracer2() {
+    }
+    NoopTracer2.prototype.startSpan = function(name, options, context2) {
+      if (context2 === void 0) {
+        context2 = contextApi.active();
+      }
+      var root2 = Boolean(options === null || options === void 0 ? void 0 : options.root);
+      if (root2) {
+        return new NonRecordingSpan();
+      }
+      var parentFromContext = context2 && getSpanContext(context2);
+      if (isSpanContext(parentFromContext) && isSpanContextValid(parentFromContext)) {
+        return new NonRecordingSpan(parentFromContext);
+      } else {
+        return new NonRecordingSpan();
+      }
+    };
+    NoopTracer2.prototype.startActiveSpan = function(name, arg2, arg3, arg4) {
+      var opts;
+      var ctx;
+      var fn3;
+      if (arguments.length < 2) {
+        return;
+      } else if (arguments.length === 2) {
+        fn3 = arg2;
+      } else if (arguments.length === 3) {
+        opts = arg2;
+        fn3 = arg3;
+      } else {
+        opts = arg2;
+        ctx = arg3;
+        fn3 = arg4;
+      }
+      var parentContext = ctx !== null && ctx !== void 0 ? ctx : contextApi.active();
+      var span = this.startSpan(name, opts, parentContext);
+      var contextWithSpanSet = setSpan(parentContext, span);
+      return contextApi.with(contextWithSpanSet, fn3, void 0, span);
+    };
+    return NoopTracer2;
+  }()
+);
+function isSpanContext(spanContext) {
+  return typeof spanContext === "object" && typeof spanContext["spanId"] === "string" && typeof spanContext["traceId"] === "string" && typeof spanContext["traceFlags"] === "number";
+}
+var NOOP_TRACER = new NoopTracer();
+var ProxyTracer = (
+  /** @class */
+  function() {
+    function ProxyTracer2(_provider, name, version2, options) {
+      this._provider = _provider;
+      this.name = name;
+      this.version = version2;
+      this.options = options;
+    }
+    ProxyTracer2.prototype.startSpan = function(name, options, context2) {
+      return this._getTracer().startSpan(name, options, context2);
+    };
+    ProxyTracer2.prototype.startActiveSpan = function(_name, _options, _context, _fn) {
+      var tracer = this._getTracer();
+      return Reflect.apply(tracer.startActiveSpan, tracer, arguments);
+    };
+    ProxyTracer2.prototype._getTracer = function() {
+      if (this._delegate) {
+        return this._delegate;
+      }
+      var tracer = this._provider.getDelegateTracer(this.name, this.version, this.options);
+      if (!tracer) {
+        return NOOP_TRACER;
+      }
+      this._delegate = tracer;
+      return this._delegate;
+    };
+    return ProxyTracer2;
+  }()
+);
+var NoopTracerProvider = (
+  /** @class */
+  function() {
+    function NoopTracerProvider2() {
+    }
+    NoopTracerProvider2.prototype.getTracer = function(_name, _version, _options) {
+      return new NoopTracer();
+    };
+    return NoopTracerProvider2;
+  }()
+);
+var NOOP_TRACER_PROVIDER = new NoopTracerProvider();
+var ProxyTracerProvider = (
+  /** @class */
+  function() {
+    function ProxyTracerProvider2() {
+    }
+    ProxyTracerProvider2.prototype.getTracer = function(name, version2, options) {
+      var _a2;
+      return (_a2 = this.getDelegateTracer(name, version2, options)) !== null && _a2 !== void 0 ? _a2 : new ProxyTracer(this, name, version2, options);
+    };
+    ProxyTracerProvider2.prototype.getDelegate = function() {
+      var _a2;
+      return (_a2 = this._delegate) !== null && _a2 !== void 0 ? _a2 : NOOP_TRACER_PROVIDER;
+    };
+    ProxyTracerProvider2.prototype.setDelegate = function(delegate) {
+      this._delegate = delegate;
+    };
+    ProxyTracerProvider2.prototype.getDelegateTracer = function(name, version2, options) {
+      var _a2;
+      return (_a2 = this._delegate) === null || _a2 === void 0 ? void 0 : _a2.getTracer(name, version2, options);
+    };
+    return ProxyTracerProvider2;
+  }()
+);
+var SpanKind;
+(function(SpanKind2) {
+  SpanKind2[SpanKind2["INTERNAL"] = 0] = "INTERNAL";
+  SpanKind2[SpanKind2["SERVER"] = 1] = "SERVER";
+  SpanKind2[SpanKind2["CLIENT"] = 2] = "CLIENT";
+  SpanKind2[SpanKind2["PRODUCER"] = 3] = "PRODUCER";
+  SpanKind2[SpanKind2["CONSUMER"] = 4] = "CONSUMER";
+})(SpanKind || (SpanKind = {}));
+var SpanStatusCode;
+(function(SpanStatusCode2) {
+  SpanStatusCode2[SpanStatusCode2["UNSET"] = 0] = "UNSET";
+  SpanStatusCode2[SpanStatusCode2["OK"] = 1] = "OK";
+  SpanStatusCode2[SpanStatusCode2["ERROR"] = 2] = "ERROR";
+})(SpanStatusCode || (SpanStatusCode = {}));
 var context$2 = ContextAPI.getInstance();
 var NoopTextMapPropagator = (
   /** @class */
@@ -46383,7 +46835,7 @@ function setBaggage(context2, baggage) {
 function deleteBaggage(context2) {
   return context2.deleteValue(BAGGAGE_KEY);
 }
-var API_NAME = "propagation";
+var API_NAME$1 = "propagation";
 var NOOP_TEXT_MAP_PROPAGATOR = new NoopTextMapPropagator();
 var PropagationAPI = (
   /** @class */
@@ -46402,7 +46854,7 @@ var PropagationAPI = (
       return this._instance;
     };
     PropagationAPI2.prototype.setGlobalPropagator = function(propagator) {
-      return registerGlobal(API_NAME, propagator, DiagAPI.instance());
+      return registerGlobal(API_NAME$1, propagator, DiagAPI.instance());
     };
     PropagationAPI2.prototype.inject = function(context2, carrier, setter) {
       if (setter === void 0) {
@@ -46420,230 +46872,181 @@ var PropagationAPI = (
       return this._getGlobalPropagator().fields();
     };
     PropagationAPI2.prototype.disable = function() {
-      unregisterGlobal(API_NAME, DiagAPI.instance());
+      unregisterGlobal(API_NAME$1, DiagAPI.instance());
     };
     PropagationAPI2.prototype._getGlobalPropagator = function() {
-      return getGlobal$1(API_NAME) || NOOP_TEXT_MAP_PROPAGATOR;
+      return getGlobal$1(API_NAME$1) || NOOP_TEXT_MAP_PROPAGATOR;
     };
     return PropagationAPI2;
   }()
 );
 var propagation = PropagationAPI.getInstance();
-class SocketErrorException extends Error {
-  constructor(code3, message2) {
-    super(message2);
-    this.code = code3;
-    this.message = message2;
+var API_NAME = "trace";
+var TraceAPI = (
+  /** @class */
+  function() {
+    function TraceAPI2() {
+      this._proxyTracerProvider = new ProxyTracerProvider();
+      this.wrapSpanContext = wrapSpanContext;
+      this.isSpanContextValid = isSpanContextValid;
+      this.deleteSpan = deleteSpan;
+      this.getSpan = getSpan;
+      this.getActiveSpan = getActiveSpan;
+      this.getSpanContext = getSpanContext;
+      this.setSpan = setSpan;
+      this.setSpanContext = setSpanContext;
+    }
+    TraceAPI2.getInstance = function() {
+      if (!this._instance) {
+        this._instance = new TraceAPI2();
+      }
+      return this._instance;
+    };
+    TraceAPI2.prototype.setGlobalTracerProvider = function(provider) {
+      var success = registerGlobal(API_NAME, this._proxyTracerProvider, DiagAPI.instance());
+      if (success) {
+        this._proxyTracerProvider.setDelegate(provider);
+      }
+      return success;
+    };
+    TraceAPI2.prototype.getTracerProvider = function() {
+      return getGlobal$1(API_NAME) || this._proxyTracerProvider;
+    };
+    TraceAPI2.prototype.getTracer = function(name, version2) {
+      return this.getTracerProvider().getTracer(name, version2);
+    };
+    TraceAPI2.prototype.disable = function() {
+      unregisterGlobal(API_NAME, DiagAPI.instance());
+      this._proxyTracerProvider = new ProxyTracerProvider();
+    };
+    return TraceAPI2;
+  }()
+);
+var trace$1 = TraceAPI.getInstance();
+function isPromise(obj) {
+  return obj !== null && typeof obj === "object" && typeof obj.then === "function";
+}
+const endSpan = (traced, span) => {
+  try {
+    const result = traced();
+    if (isPromise(result)) {
+      return Promise.resolve(result).catch((err) => {
+        setHttpStatusFromError(span, typeof err === "string" ? new Error(err) : err);
+        throw err;
+      }).finally(() => span.end());
+    } else {
+      span.end();
+      return result;
+    }
+  } catch (error) {
+    setHttpStatusFromError(span, error);
+    span.end();
+    throw error;
   }
+};
+function setHttpStatusFromError(span, error) {
+  span.setAttribute(OBS_TAG_HTTP_STATUS_CODE, 500);
+  span.recordException(error);
+  span.setStatus({ code: SpanStatusCode.ERROR, message: error.message });
 }
-class ISocket {
-  constructor(ws2, requestHandlers, globalMiddlewares, timeouts, logger) {
-    this.responseHandler = /* @__PURE__ */ new Map();
-    this.ws = ws2;
-    this.requestHandlers = requestHandlers;
-    this.globalMiddlewares = globalMiddlewares;
-    this.nxtRequestId = 0;
-    this.logger = logger ?? { error: console.error };
-    this.timeouts = timeouts;
-    this.resetConnectionTimeout();
-    this.ws.addEventListener("message", async (event) => {
-      const eventData = JSON.parse(event.data.toString());
-      return this.handleMessage(eventData);
+class TracedSocket extends ISocket {
+  constructor(ws2, requestHandlers, globalMiddlewares, tracer, timeouts, logger) {
+    super(ws2, requestHandlers, globalMiddlewares, timeouts, logger);
+    this.activeSpanByRequestId = /* @__PURE__ */ new Map();
+    this.middlewareSpanByReqId = /* @__PURE__ */ new Map();
+    this.tracer = tracer;
+  }
+  async callHandler(handler, params, ctx, client2, next2) {
+    let currentContext = context$2.active();
+    const middleWareSpan = this.middlewareSpanByReqId.get(ctx.requestId);
+    const activeSpan = this.activeSpanByRequestId.get(ctx.requestId);
+    if (middleWareSpan) {
+      middleWareSpan.end();
+      if (activeSpan) {
+        currentContext = trace$1.setSpan(context$2.active(), activeSpan);
+      }
+    }
+    let result;
+    await context$2.with(currentContext, async () => {
+      await this.tracer.startActiveSpan(`WS HANDLER ${handler.name === "" ? ctx.method : handler.name}`, {
+        attributes: {
+          [SEMATTRS_MESSAGING_SYSTEM]: "ws",
+          [SEMATTRS_MESSAGING_DESTINATION_KIND]: "websocket"
+        },
+        kind: SpanKind.SERVER
+      }, async (span) => {
+        this.middlewareSpanByReqId.set(ctx.requestId, span);
+        result = await endSpan(() => super.callHandler(handler, params, ctx, client2, next2), span);
+        this.middlewareSpanByReqId.delete(ctx.requestId);
+      });
     });
+    return result;
   }
   async handleMessage(message2) {
-    this.resetConnectionTimeout();
     if (message2.request) {
-      const parts = message2.request.method.split(".");
-      let handlers = this.requestHandlers;
-      for (const part of parts) {
-        handlers = handlers[part];
-        if (!handlers) {
-          return this.respondError(message2.request.id, {
-            code: 2,
-            message: `unknown method ${message2.request.method}`
-          });
-        }
-      }
-      if (!Array.isArray(handlers)) {
-        return this.respondError(message2.request.id, {
-          code: 2,
-          message: "unknown method"
-        });
-      }
-      handlers = [...this.globalMiddlewares, ...handlers];
-      if (message2.request.setAuthorization) {
-        this.peerAuthorization = message2.request.setAuthorization;
-      }
-      const reqCtx = {
-        peerAuthorization: this.peerAuthorization,
-        method: message2.request.method,
-        requestId: message2.request.id
-      };
-      const client2 = createISocketClient(this);
+      const spanName = message2.request.method;
+      const requestId = message2.request.id;
       const payload = message2.request.payload;
-      let alreadyResponded = false;
-      const generateNextFn = (idx) => {
-        let wasCalled = false;
-        return async () => {
-          if (alreadyResponded) {
-            throw new SocketErrorException(4, "next() was called after the response was sent");
-          }
-          const handler = handlers[idx];
-          if (!handler) {
-            throw new SocketErrorException(5, "cannot call past the last handler in the chain");
-          }
-          if (wasCalled) {
-            throw new SocketErrorException(6, "next() was called multiple times");
-          }
-          wasCalled = true;
-          return this.callHandler(handler, payload, reqCtx, client2, generateNextFn(idx + 1));
-        };
-      };
-      let response;
-      try {
-        response = await generateNextFn(0)();
-      } catch (error) {
-        const socketError = error instanceof SocketErrorException ? { code: error.code, message: error.message } : { code: 3, message: error.toString() };
-        return this.respondError(message2.request.id, socketError, error);
-      }
-      this.respond(message2.request.id, response);
-      alreadyResponded = true;
-    } else if (message2.response && message2.response.id) {
-      const responseHandler = this.responseHandler.get(message2.response.id);
-      if (!responseHandler) {
-        return;
-      }
-      if (message2.response.error) {
-        responseHandler.reject(message2.response.error);
-      }
-      responseHandler.resolve(message2.response.payload);
-      clearTimeout(responseHandler.timeout);
-      this.responseHandler.delete(message2.response.id);
-    } else {
-      return this.respondError(-1, {
-        code: 3,
-        message: "unknown request id"
-      });
+      await context$2.with(propagation.extract(ROOT_CONTEXT, message2.request), async () => await this.tracer.startActiveSpan(`WS SERVER ${spanName}`, {
+        attributes: {
+          [SEMATTRS_MESSAGING_SYSTEM]: "ws",
+          [SEMATTRS_MESSAGING_DESTINATION_KIND]: "websocket",
+          [OBS_TAG_HTTP_ROUTE]: spanName,
+          [OBS_TAG_APPLICATION_ID]: payload == null ? void 0 : payload["applicationId"],
+          [OBS_TAG_API_ID]: payload == null ? void 0 : payload["apiId"],
+          [OBS_TAG_BRANCH]: (payload == null ? void 0 : payload["branch"]) ?? (payload == null ? void 0 : payload["branchName"]),
+          [OBS_TAG_COMMIT_ID]: payload == null ? void 0 : payload["commitId"]
+        },
+        kind: SpanKind.SERVER
+      }, async (span) => {
+        this.lastActiveSpan = span;
+        this.activeSpanByRequestId.set(requestId, span);
+        const result = await endSpan(() => super.handleMessage(message2), span);
+        this.activeSpanByRequestId.delete(requestId);
+        return result;
+      }));
+    } else if (message2.response) {
+      this.addEvent("ws.received-response", { ["ws.response.id"]: message2.response.id });
+      return await super.handleMessage(message2);
     }
   }
-  async callHandler(handler, params, ctx, client2, next2) {
-    return handler(params, ctx, client2, next2);
-  }
   request(method4, params, authorization) {
-    return new Promise((resolve, reject) => {
-      const requestId = ++this.nxtRequestId;
-      this.responseHandler.set(requestId, {
-        resolve: (result) => resolve(result),
-        reject: (error) => reject(error)
-      });
-      const toSend = { request: { method: method4, payload: params, id: requestId, setAuthorization: authorization } };
-      propagation.inject(context$2.active(), toSend.request);
-      this.ws.send(JSON.stringify(toSend));
-      this.resetConnectionTimeout();
-      this.resetNoResponseTimeout(requestId);
+    return this.tracer.startActiveSpan(`WS CLIENT ${method4}`, (span) => {
+      this.addEvent("ws.send-request", { ["ws.request.method"]: method4, ["ws.request.id"]: this.nxtRequestId });
+      const result = super.request(method4, params, authorization);
+      span.end();
+      return result;
     });
   }
+  decorateToSend(message2) {
+    propagation.inject(context$2.active(), message2.request);
+    return message2;
+  }
   respond(requestId, result) {
-    const toSend = {
-      response: {
-        payload: result,
-        id: requestId,
-        error: null
-      }
-    };
-    return this.ws.send(JSON.stringify(toSend));
+    this.addEvent("ws.send-response", { ["ws.response.id"]: requestId });
+    return super.respond(requestId, result);
   }
   respondError(requestId, error, exception) {
-    const toSend = {
-      response: {
-        payload: null,
-        id: requestId,
-        error
-      }
-    };
-    return this.ws.send(JSON.stringify(toSend));
-  }
-  resetConnectionTimeout() {
-    var _a2, _b2;
-    if (!((_a2 = this.timeouts) == null ? void 0 : _a2.connectionTimeoutInSeconds)) {
-      return;
-    }
-    if (this.connectionTimeout) {
-      clearTimeout(this.connectionTimeout);
+    this.addEvent("ws.send-error", { ["ws.response.id"]: requestId });
+    if (this.lastActiveSpan) {
+      setHttpStatusFromError(this.lastActiveSpan, exception ?? new Error(error.message));
+      this.lastActiveSpan.setAttribute(OBS_SOCKET_STATUS_CODE, error.code);
     }
-    this.connectionTimeout = setTimeout(this.handleConnectionTimeout(), ((_b2 = this.timeouts) == null ? void 0 : _b2.connectionTimeoutInSeconds) * 1e3);
+    return super.respondError(requestId, error, exception);
   }
-  handleConnectionTimeout() {
-    return () => {
-      var _a2;
-      this.logger.error(`Connection timed out after ${(_a2 = this.timeouts) == null ? void 0 : _a2.connectionTimeoutInSeconds} seconds`);
-      this.close();
-    };
-  }
-  resetNoResponseTimeout(requestId) {
-    var _a2, _b2;
-    if (!((_a2 = this.timeouts) == null ? void 0 : _a2.noResponseTimeoutInSeconds)) {
-      return;
-    }
-    const responseHandler = this.responseHandler.get(requestId);
-    if (!responseHandler) {
-      return;
+  addEvent(eventName, attributes2) {
+    if (this.lastActiveSpan) {
+      this.lastActiveSpan.addEvent(eventName, attributes2, /* @__PURE__ */ new Date());
     }
-    const noResponseTimeout = responseHandler.timeout;
-    const reject = responseHandler.reject;
-    if (responseHandler.timeout) {
-      clearTimeout(noResponseTimeout);
-    }
-    responseHandler.timeout = setTimeout(this.handleNoResponseTimeout(reject), ((_b2 = this.timeouts) == null ? void 0 : _b2.noResponseTimeoutInSeconds) * 1e3);
-  }
-  handleNoResponseTimeout(reject) {
-    return () => {
-      var _a2;
-      const message2 = `Request timed out after ${(_a2 = this.timeouts) == null ? void 0 : _a2.noResponseTimeoutInSeconds} seconds`;
-      this.logger.error(message2);
-      reject({ code: 7, message: message2 });
-    };
   }
   close() {
-    clearTimeout(this.connectionTimeout);
-    this.responseHandler.forEach((handler, key2) => {
-      clearTimeout(handler.timeout);
-      this.logger.error(`Rejecting pending requestId ${key2} due to connection close`);
-      handler.reject({ code: 8, message: "Connection closed" });
-    });
-    this.ws.close();
-  }
-}
-const proxyTarget = Object.freeze(() => {
-});
-function createIsocketProxy(socket, path2) {
-  return new Proxy(proxyTarget, {
-    get(_target, prop) {
-      const childPath = path2 ? `${path2}.${prop}` : prop;
-      if (childPath === "then") {
-        return void 0;
-      }
-      return createIsocketProxy(socket, childPath);
-    },
-    apply(_target, _thisArg, args) {
-      if (path2 === void 0) {
-        throw new Error("The root object is not callable");
-      }
-      if (path2.endsWith(".apply") && args.length === 2 && Array.isArray(args[1])) {
-        path2 = path2.slice(0, -".apply".length);
-        args = args[1];
-      }
-      return socket.request(path2, args[0]);
+    for (const span of this.activeSpanByRequestId.values()) {
+      span.end();
     }
-  });
-}
-function createISocketClient(socket) {
-  return {
-    close: () => socket.close(),
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    call: createIsocketProxy(socket, void 0)
-  };
+    this.activeSpanByRequestId = /* @__PURE__ */ new Map();
+    this.lastActiveSpan = void 0;
+    super.close();
+  }
 }
 var ws$1 = null;
 if (typeof WebSocket !== "undefined") {
@@ -46668,9 +47071,9 @@ function connectWebSocket(wsUrl, protocol) {
     });
   });
 }
-class ISocketWithClientAuth extends ISocket {
-  constructor(ws2, authorization, requestHandlers, globalMiddlewares, timeouts) {
-    super(ws2, requestHandlers, globalMiddlewares, timeouts);
+class ISocketWithClientAuth extends TracedSocket {
+  constructor(ws2, authorization, requestHandlers, globalMiddlewares, tracer, timeouts) {
+    super(ws2, requestHandlers, globalMiddlewares, tracer, timeouts);
     this.hasSentAuth = false;
     this.authorization = authorization;
   }
@@ -47933,12 +48336,11 @@ const TriggerStepType = {
   SET_PROFILE: "setProfile",
   TRIGGER_EVENT: "triggerEvent"
 };
-var ThemeMode;
-(function(ThemeMode2) {
-  ThemeMode2["LIGHT"] = "LIGHT";
-  ThemeMode2["DARK"] = "DARK";
-  ThemeMode2["AUTO"] = "AUTO";
-})(ThemeMode || (ThemeMode = {}));
+const ThemeMode = {
+  LIGHT: "LIGHT",
+  DARK: "DARK",
+  AUTO: "AUTO"
+};
 const CUSTOM_THEME_TYPOGRAPHY_KEY = "custom";
 ({
   top: Dim.px(11),
@@ -48339,12 +48741,23 @@ const noBorder = (theme) => ({
   style: "solid",
   color: theme.colors.neutral100
 });
+const onePixelTransparentBorder = () => ({
+  width: Dim.px(1),
+  style: "solid",
+  color: "transparent"
+});
 const noBorderOject = (theme) => ({
   left: noBorder(theme),
   right: noBorder(theme),
   top: noBorder(theme),
   bottom: noBorder(theme)
 });
+const onePixelTransparentBorderObject = () => ({
+  left: onePixelTransparentBorder(),
+  right: onePixelTransparentBorder(),
+  top: onePixelTransparentBorder(),
+  bottom: onePixelTransparentBorder()
+});
 ({
   topLeft: Dim.px(0),
   topRight: Dim.px(0),
@@ -48363,7 +48776,7 @@ const BASE_THEME_V5 = {
   mode: ThemeMode.LIGHT,
   primaryColor: colors.ACCENT_BLUE_500,
   padding: PADDING_PRESETS_BY_THEME_VERSION[5].medium.value,
-  spacing: Dim.px(6),
+  spacing: Dim.px(12),
   palette: {
     dark: DEFAULT_DARK_PALETTE,
     light: DEFAULT_LIGHT_PALETTE
@@ -48486,6 +48899,7 @@ const KEY_VALUE_PADDING = {
   bottom: Dim.px(12)
 };
 const KEY_VALUE_SPACING = Dim.px(24);
+const DEFAULT_GRID_ROW_SIZE = 12;
 const READABILITY_THRESHOLD = 20;
 const CONTRAST_TEXT_THRESHOLD = 25;
 const MAX_ITERATIONS = 10;
@@ -53574,7 +53988,7 @@ var Reaction = /* @__PURE__ */ function() {
   _proto.toString = function toString22() {
     return "Reaction[" + this.name_ + "]";
   };
-  _proto.trace = function trace$1(enterBreakPoint) {
+  _proto.trace = function trace$12(enterBreakPoint) {
     if (enterBreakPoint === void 0) {
       enterBreakPoint = false;
     }
@@ -56881,9 +57295,6 @@ __decorateElement(_init, 1, "setActiveRootInstanceId", _setActiveRootInstanceId_
 __decorateElement(_init, 1, "setSourceIdElement", _setSourceIdElement_dec, InteractionLayerManager);
 __decorateElement(_init, 1, "removeSourceIdElement", _removeSourceIdElement_dec, InteractionLayerManager);
 __decoratorMetadata(_init, InteractionLayerManager);
-const generateId$1 = () => {
-  return Math.random().toString(36).substring(2, 15);
-};
 const CancelApisTrigger = {
   type: TriggerStepType.CANCEL_APIS,
   async execute(_context, step) {
@@ -57022,7 +57433,8 @@ const SetComponentPropertyTrigger = {
       name: context2.name,
       func: (state, value2, step2) => {
         var _a2;
-        return state[(_a2 = step2.widget) == null ? void 0 : _a2.name][step2.propertyName] = value2;
+        if (!state) return;
+        state[(_a2 = step2.widget) == null ? void 0 : _a2.name][step2.propertyName] = value2;
       },
       args: [value, step]
     });
@@ -57123,7 +57535,8 @@ const RunJsTrigger = {
         scopeId: context2.scopeId,
         name: context2.name,
         func: step.handler,
-        args: [context2.additionalContext]
+        args: [context2.additionalContext],
+        excludeState: true
       });
     }
   }
@@ -75055,7 +75468,7 @@ var dimensionMaxMap = {
   xxl: "1599.98px"
 };
 var SiderContext = /* @__PURE__ */ React.createContext({});
-var generateId = /* @__PURE__ */ function() {
+var generateId$1 = /* @__PURE__ */ function() {
   var i3 = 0;
   return function() {
     var prefix2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "";
@@ -75113,7 +75526,7 @@ var Sider = /* @__PURE__ */ React.forwardRef(function(_a2, ref2) {
     };
   }, [breakpoint]);
   useEffect(function() {
-    var uniqueId3 = generateId("ant-sider-");
+    var uniqueId3 = generateId$1("ant-sider-");
     siderHook.addSider(uniqueId3);
     return function() {
       return siderHook.removeSider(uniqueId3);
@@ -89953,7 +90366,10 @@ const SetStateVarTrigger = {
     context2.rootStore.entityManager.runCode({
       scopeId: context2.scopeId,
       name: context2.name,
-      func: (state, value2, step2) => state[step2.state.name].value = value2,
+      func: (state, value2, step2) => {
+        if (!state) return;
+        state[step2.state.name].value = value2;
+      },
       args: [value, step]
     });
   },
@@ -94346,6 +94762,9 @@ class Prop {
       validate: defaultValidator
     };
   }
+  static unset() {
+    return new Prop("any");
+  }
   static string() {
     return new Prop("string", VALIDATORS.TEXT);
   }
@@ -95007,6 +95426,7 @@ function createGlobalObject({
   );
 }
 const prettyPrintFunction = (func, args) => {
+  if (!func) return "";
   const funcStr = func.toString().replace(/\s+/g, " ").trim();
   const argsStr = args.map((arg) => {
     try {
@@ -95051,13 +95471,22 @@ class EvalComputeEngine {
   }
 }
 class DirectComputeEngine {
-  compute({ snapshot, entityName, func, args, path: path2 }) {
+  compute({
+    snapshot,
+    entityName,
+    func,
+    args,
+    path: path2,
+    excludeState
+  }) {
+    if (!func) return void 0;
     try {
-      return func.call(
-        snapshot[entityName.value],
-        snapshot,
-        ...args || []
-      );
+      const entity = snapshot[entityName.value];
+      const funcArgs = args || [];
+      if (excludeState) {
+        return func.call(entity, ...funcArgs);
+      }
+      return func.call(entity, snapshot, ...funcArgs);
     } catch (error) {
       console.log(`Error in direct(${entityName.value}.${path2})`, {
         error,
@@ -95416,8 +95845,9 @@ const lazyFunctionSymbol = Symbol("lazy-function");
 const isLazyFunction = (value) => {
   return typeof value === "function" && value[lazyFunctionSymbol];
 };
-const LazyFunction = (source2) => {
-  const func = new Function(source2);
+const LazyFunction = (source2, args = []) => {
+  const argsObj = `{ ${args.join(", ")} }`;
+  const func = new Function(argsObj, source2);
   func[lazyFunctionSymbol] = true;
   return func;
 };
@@ -95852,6 +96282,93 @@ class EntityManager {
     delete scope.entityMeta[params.name.value];
     (_b2 = (_a2 = this.atoms) == null ? void 0 : _a2[params.scopeId]) == null ? true : delete _b2[params.name.value];
   }
+  deleteProperty(params) {
+    var _a2, _b2;
+    const { scopeId, name, prop } = params;
+    if (prop.split(".").includes(RECORD_PATH_IDENTIFIER)) {
+      return;
+    }
+    const scope = this.getScope(scopeId);
+    const entity = scope.getEntity(name);
+    const entityMeta = scope.getEntityMeta(name);
+    if (!entity || !entityMeta) {
+      console.warn(`Entity ${name.value} not found in scope ${scopeId}`);
+      return;
+    }
+    const pathSegments = prop.split(".");
+    const isNested = pathSegments.length > 1;
+    const finalSegment = pathSegments.pop() || "";
+    const parentSegments = isNested ? pathSegments : [];
+    let propParent = entity;
+    let metaParent = entityMeta;
+    if (isNested) {
+      for (const segment of parentSegments) {
+        if (!(segment in propParent) || !(segment in metaParent)) {
+          return;
+        }
+        propParent = propParent[segment];
+        metaParent = metaParent[segment];
+      }
+    }
+    if (finalSegment in propParent) {
+      delete propParent[finalSegment];
+    }
+    if (finalSegment in metaParent) {
+      delete metaParent[finalSegment];
+    }
+    if ((_b2 = (_a2 = this.atoms[scopeId]) == null ? void 0 : _a2[name.value]) == null ? void 0 : _b2[prop]) {
+      delete this.atoms[scopeId][name.value][prop];
+    }
+  }
+  /*
+  This is a helper method to delete obsolete nested properties
+  It handles cases like deleting custom columns on the table
+  */
+  deleteObsoleteNestedProperties(scopeId, name, currentProps, entity) {
+    for (const [propKey, propValue] of Object.entries(currentProps)) {
+      if (propValue && typeof propValue === "object" && !Array.isArray(propValue)) {
+        const entityPropValue = entity[propKey];
+        if (!entityPropValue || typeof entityPropValue !== "object" || Array.isArray(entityPropValue)) {
+          continue;
+        }
+        const currentKeys = new Set(Object.keys(propValue));
+        const existingKeys = Object.keys(entityPropValue);
+        const keysToDelete = existingKeys.filter(
+          (key2) => !currentKeys.has(key2)
+        );
+        for (const keyToDelete of keysToDelete) {
+          const obsoleteObj = entityPropValue[keyToDelete];
+          if (obsoleteObj && typeof obsoleteObj === "object") {
+            const nestedProps = this.getNestedPropertyPaths(
+              `${propKey}.${keyToDelete}`,
+              obsoleteObj
+            );
+            for (const nestedProp of nestedProps) {
+              this.deleteProperty({ scopeId, name, prop: nestedProp });
+            }
+          }
+          this.deleteProperty({
+            scopeId,
+            name,
+            prop: `${propKey}.${keyToDelete}`
+          });
+        }
+      }
+    }
+  }
+  getNestedPropertyPaths(basePath, obj) {
+    const paths = [];
+    if (obj && typeof obj === "object" && !Array.isArray(obj)) {
+      for (const [key2, value] of Object.entries(obj)) {
+        const currentPath = `${basePath}.${key2}`;
+        paths.push(currentPath);
+        if (value && typeof value === "object" && !Array.isArray(value)) {
+          paths.push(...this.getNestedPropertyPaths(currentPath, value));
+        }
+      }
+    }
+    return paths;
+  }
   deleteEntityById(params) {
     const scope = this.getScope(params.scopeId);
     const name = scope.getEntityName(params.entityId);
@@ -95886,6 +96403,7 @@ class EntityManager {
     if (instanceId) {
       scope.idToName[instanceId] = name;
     }
+    this.deleteObsoleteNestedProperties(scopeId, name, props, entity);
     const managedPropsForType = this.componentRegistry.getManagedProps(type5);
     const functionalProps = toExecutablesOrValues(props, managedPropsForType);
     const addedProperties = /* @__PURE__ */ new Set();
@@ -95932,14 +96450,15 @@ class EntityManager {
     scope.setEntityName(instanceId, newName, existingName);
   }
   runCode(params) {
-    const { scopeId, name, func, args } = params;
+    const { scopeId, name, func, args, excludeState } = params;
     const state = this.getState(scopeId);
     const computeEngine = this.dirComputeEngine;
     computeEngine.compute({
       snapshot: state,
       entityName: name,
       func,
-      args
+      args,
+      excludeState
     });
   }
   computeValue(params) {
@@ -96866,10 +97385,25 @@ const microPatches = (oldValue, newValue, baseStr) => {
       }
     ];
   }
+  if (isPrimitive(oldValue) || isPrimitive(newValue)) {
+    if (oldValue !== newValue) {
+      return [
+        {
+          op: "update",
+          path: pathStringToArray(baseStr),
+          value: newValue
+        }
+      ];
+    }
+    return [];
+  }
   const diffs = diff(oldValue, newValue);
   const basePath = pathStringToArray(baseStr);
   return diffs.map((diff2) => toMobXPatchFromMicroDiff(diff2, basePath));
 };
+function isPrimitive(value) {
+  return value === null || typeof value === "string" || typeof value === "number" || typeof value === "boolean" || typeof value === "undefined";
+}
 function toMobXPatchFromMicroDiff(diff2, basePath) {
   const type5 = diff2.type;
   const fullPath = [...basePath, ...diff2.path];
@@ -97391,6 +97925,9 @@ const rootStore$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineP
   __proto__: null,
   default: rootStore
 }, Symbol.toStringTag, { value: "Module" }));
+const generateId = () => {
+  return Math.random().toString(36).substring(2, 15);
+};
 class OperationAPI {
   constructor(serverUrl) {
     __publicField(this, "socket");
@@ -97438,6 +97975,10 @@ class OperationAPI {
       var _a2;
       return (_a2 = this.socket) == null ? void 0 : _a2.call.editor.deleteEntity(payload);
     });
+    __publicField(this, "editorRenameElement", async (payload) => {
+      var _a2;
+      return (_a2 = this.socket) == null ? void 0 : _a2.call.editor.renameElement(payload);
+    });
     __publicField(this, "editorUpdateTheme", async (payload) => {
       var _a2;
       return (_a2 = this.socket) == null ? void 0 : _a2.call.editor.updateTheme(payload);
@@ -97570,6 +98111,7 @@ async function connectSocket(serverUrl, peerId, userId) {
         ]
       },
       [],
+      trace$1.getTracer("superblocks-ui-framework"),
       {
         connectionTimeoutInSeconds: 6 * 60,
         noResponseTimeoutInSeconds: 5 * 60
@@ -97584,7 +98126,7 @@ async function connectSocket(serverUrl, peerId, userId) {
     return void 0;
   }
 }
-_executeOrAddToBatch_dec = [action], _addPendingTransaction_dec = [action], _clearPendingTransactions_dec = [action], _batchUpdate_dec = [action], _createComponent_dec = [action], _dropComponent_dec = [action], _deleteComponents_dec = [action], _writeRuntimeProperties_dec = [action], _setWidgetProperties_dec = [action], _setWidgetProperty_dec = [action];
+_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];
 class OperationManager {
   constructor() {
     __runInitializers(_init3, 5, this);
@@ -97623,7 +98165,7 @@ class OperationManager {
     return [];
   }
   executeOrAddToBatch(operation) {
-    const transactionId = this.batchOperationTransactionId ?? generateId$1();
+    const transactionId = this.batchOperationTransactionId ?? generateId();
     const payload = this.waitingForBatch ? operation.payload : {
       ...operation.payload,
       transaction: {
@@ -97697,7 +98239,7 @@ class OperationManager {
   }
   batchUpdate(performOperations) {
     this.waitingForBatch = true;
-    this.batchOperationTransactionId = generateId$1();
+    this.batchOperationTransactionId = generateId();
     performOperations();
     editorBridge.editOpRequest("editor:batchUpdate", {
       updates: this.batchOperations.map(
@@ -97856,6 +98398,27 @@ class OperationManager {
   setWidgetProperty(sourceId, property, value, callback) {
     this.setWidgetProperties(sourceId, { [property]: value }, callback);
   }
+  renameWidget(params) {
+    var _a2;
+    const widgetMeta = getEditStore().runtimeEntitiesManager.getAnyEditorWidgetMeta(
+      params.sourceId
+    );
+    const oldName = ((_a2 = widgetMeta == null ? void 0 : widgetMeta.name) == null ? void 0 : _a2.value) ?? "";
+    const kind = (widgetMeta == null ? void 0 : widgetMeta.type) === "SbPage" ? "page" : "component";
+    const scopeName = (widgetMeta == null ? void 0 : widgetMeta.scopeId) ? rootStore.entityManager.getScopeName(widgetMeta.scopeId) : void 0;
+    if (!scopeName) {
+      console.error("No scope name found for widget", params.sourceId);
+      return;
+    }
+    const renameRequest = {
+      elementId: params.sourceId,
+      newName: params.newName,
+      oldName,
+      kind,
+      scopeName
+    };
+    editorBridge.editOpRequest("editor:renameElement", renameRequest);
+  }
   async ensureFilesSynced() {
     await sourceUpdateApi.ensureFilesSynced();
   }
@@ -97874,6 +98437,7 @@ __decorateElement(_init3, 1, "deleteComponents", _deleteComponents_dec, Operatio
 __decorateElement(_init3, 1, "writeRuntimeProperties", _writeRuntimeProperties_dec, OperationManager);
 __decorateElement(_init3, 1, "setWidgetProperties", _setWidgetProperties_dec, OperationManager);
 __decorateElement(_init3, 1, "setWidgetProperty", _setWidgetProperty_dec, OperationManager);
+__decorateElement(_init3, 1, "renameWidget", _renameWidget_dec, OperationManager);
 __decoratorMetadata(_init3, OperationManager);
 class PropertiesPanelManager {
   constructor(runtimeEntitiesManager, entityManager) {
@@ -98082,7 +98646,7 @@ function getPropertyValue$1({
 }
 const getNormalizedIdInfo = (params) => {
   var _a2, _b2;
-  const name = ((_a2 = params.bind) == null ? void 0 : _a2.entityName) ?? params.propsName;
+  const name = (_a2 = params.bind) == null ? void 0 : _a2.entityName;
   const scopeId = ((_b2 = params.bind) == null ? void 0 : _b2.scopeId) ?? params.fallbackScopeId;
   return {
     name,
@@ -98145,7 +98709,6 @@ class RuntimeWidgetsManager {
           const childSourceId = child.props[WIDGET_SOURCE_ID_ATTRIBUTE];
           const { name: childName, scopeId: childScopeId } = getNormalizedIdInfo({
             bind: getBindingIdentifier(child.props.bind),
-            propsName: child.props.name,
             fallbackScopeId
           });
           const childIdentifier = this.nameManager.registerAndGetIdentifiers({
@@ -98733,18 +99296,39 @@ const filterSafeStackDimensionProperties = (existingProps) => {
 };
 const filterSafeGridDimensionProperties = (existingProps) => {
   const { width, height } = existingProps;
-  let safeHeight;
-  let safeWidth;
+  const safeDimensions = {};
   if ((height == null ? void 0 : height.mode) === "rows" || (height == null ? void 0 : height.mode) === "fit") {
-    safeHeight = Property.Dimension(height);
+    safeDimensions.height = Property.Dimension(height);
   }
   if ((width == null ? void 0 : width.mode) === "columns") {
-    safeWidth = Property.Dimension(width);
+    safeDimensions.width = Property.Dimension(width);
+  }
+  return safeDimensions;
+};
+const defaultSizeForComponent = (componentType, isFreeform, draggedDimensions) => {
+  const height = Property.Dimension(Dim.fit());
+  if (isFreeform) {
+    const guWidth = (draggedDimensions == null ? void 0 : draggedDimensions.widthGU) ?? 4;
+    return {
+      height,
+      width: Property.Dimension(Dim.col(guWidth))
+    };
+  }
+  switch (componentType) {
+    case "SbText":
+    case "SbButton":
+    case "SbCheckbox":
+    case "SbSwitch":
+      return { height, width: Property.Dimension(Dim.fit()) };
+    case "SbImage":
+      return {
+        height,
+        width: Property.Dimension(Dim.px((draggedDimensions == null ? void 0 : draggedDimensions.widthPx) ?? 288))
+        // Matches widget config response. This should never be undefined though.
+      };
+    default:
+      return { height, width: Property.Dimension(Dim.fill()) };
   }
-  return {
-    width: safeWidth,
-    height: safeHeight
-  };
 };
 const isWidgetGrid = (widget) => {
   var _a2;
@@ -98892,7 +99476,7 @@ class GridManager {
     };
   }
   get lazyTargetGridInfo() {
-    var _a2, _b2;
+    var _a2, _b2, _c2;
     const targetRect = this.dnd.activeTargetRect;
     const dropTargetId = this.dnd.dropTargetId;
     if (!targetRect || !dropTargetId) {
@@ -98913,7 +99497,7 @@ class GridManager {
     const targetPadding = entityValues == null ? void 0 : entityValues.padding;
     const xPadding = (((_a2 = targetPadding == null ? void 0 : targetPadding.left) == null ? void 0 : _a2.value) ?? 0) + (((_b2 = targetPadding == null ? void 0 : targetPadding.right) == null ? void 0 : _b2.value) ?? 0);
     const tileWidth = (targetRect.width - xPadding) / targetColumns;
-    const tileHeight = (entityValues == null ? void 0 : entityValues.rowSize) ?? 12;
+    const tileHeight = ((_c2 = entityValues == null ? void 0 : entityValues.rowHeight) == null ? void 0 : _c2.value) ?? 12;
     const targetHeightGU = Math.ceil(targetRect.height / tileHeight);
     return {
       targetColumns,
@@ -99443,6 +100027,16 @@ class DragAndDropManager {
     registerStores({
       DragAndDropManager: this
     });
+    startEditorSync({
+      store: this,
+      storeId: "dnd",
+      projection(store) {
+        return {
+          isDragging: store._isDragging,
+          isDraggingNewComponent: store._isDraggingNewComponent
+        };
+      }
+    });
   }
   get isDragging() {
     return this._isDragging;
@@ -109560,11 +110154,10 @@ const DuplicatedNamePopover = observer(({ name, children, showWarning, sourceId
     (evt) => {
       evt.preventDefault();
       evt.stopPropagation();
-      getEditStore().operationManager.setWidgetProperty(
+      getEditStore().operationManager.renameWidget({
         sourceId,
-        "name",
-        Property.Static(newName)
-      );
+        newName
+      });
     },
     [newName, sourceId]
   );
@@ -110208,9 +110801,24 @@ const InternalGlobalScope = internalCreateScope(() => ({}), {
   name: GLOBAL_SCOPE_ID,
   scopeId: GLOBAL_SCOPE_ID
 });
+const globalName = getName("Global");
 const GlobalScope = registerScope(
   ({ children }) => {
     const { theme } = useTheme();
+    useEffect(() => {
+      const global2 = rootStore.entityManager.getEntity(
+        GLOBAL_SCOPE_ID,
+        globalName
+      );
+      if (!global2) {
+        rootStore.entityManager.createEntity({
+          name: globalName,
+          type: "global",
+          props: {},
+          scopeId: GLOBAL_SCOPE_ID
+        });
+      }
+    }, []);
     useEffect(() => {
       const name = getName("Theme");
       const existingTheme = rootStore.entityManager.getEntity(
@@ -110236,6 +110844,13 @@ const GlobalScope = registerScope(
   },
   InternalGlobalScope
 );
+const updateGlobalScope = (global2) => {
+  rootStore.entityManager.updateEntity({
+    name: globalName,
+    props: global2,
+    scopeId: GLOBAL_SCOPE_ID
+  });
+};
 function createEntityProxy(entityName) {
   return new Proxy(
     {},
@@ -110251,6 +110866,17 @@ const Theme = createEntityProxy("Theme");
 const Global = createEntityProxy("Global");
 const Embed = createEntityProxy("Embed");
 const Env = createEntityProxy("Env");
+const getPreviousAndCurrentWidgetProps = (updates, widgetMeta) => {
+  const previousProps = widgetMeta.props;
+  const newProps = Object.entries(updates).reduce(
+    (acc, [key2, value]) => {
+      acc[key2] = value.value;
+      return acc;
+    },
+    { ...previousProps }
+  );
+  return [previousProps, newProps];
+};
 const getSizeProp = ({
   label,
   controlType,
@@ -110377,6 +111003,9 @@ const spacing = (options) => {
       }
       return themeValue ?? Theme.spacing;
     },
+    isVisible: function() {
+      return this.layout !== "freeform";
+    },
     ...rest
   });
   if (defaultSpacing || themeValue) {
@@ -110519,7 +111148,7 @@ const getAlignmentProps = () => {
     })
   };
 };
-const containerLayout = () => Prop.union({
+const containerLayout = (sizeProps) => Prop.union({
   shared: {
     layout: Prop.string().readAndWrite().default("vertical").propertiesPanel({
       label: "Layout",
@@ -110544,35 +111173,58 @@ const containerLayout = () => Prop.union({
           tooltip: "Horizontal"
         }
       ]
+    }).onEdit(({ sourceId, updates, widgetMeta }) => {
+      var _a2, _b2, _c2, _d2;
+      const [previousProps, newProps] = getPreviousAndCurrentWidgetProps(updates, widgetMeta);
+      const baseUpdate = {
+        [sourceId]: {
+          props: updates,
+          meta: {}
+        }
+      };
+      if (previousProps.layout !== "freeform" && newProps.layout === "freeform" && ((_a2 = newProps.width) == null ? void 0 : _a2.mode) === "fit") {
+        const editStore2 = rootStore.editStore;
+        if (!editStore2) {
+          return baseUpdate;
+        }
+        const runtimeWidgetRect = (_d2 = (_c2 = (_b2 = editStore2.interactionLayerManager.getSourceIdElements(sourceId)) == null ? void 0 : _b2[0]) == null ? void 0 : _c2.firstElementChild) == null ? void 0 : _d2.getBoundingClientRect();
+        const pixelWidth = runtimeWidgetRect == null ? void 0 : runtimeWidgetRect.width;
+        baseUpdate[sourceId].props = {
+          ...updates,
+          // fit-contenet width does not make sense grid component
+          width: pixelWidth ? Property.Dimension(Dim.px(pixelWidth)) : Property.Static(Dim.fill())
+        };
+      }
+      return baseUpdate;
     })
   },
   variants: [
-    {
-      layout: Prop.literal("freeform"),
-      columns: Prop.number().readAndWrite().propertiesPanel({
-        label: "Columns",
-        placeholder: "Enter columns"
-      }).default(48),
-      rows: Prop.number().readAndWrite().propertiesPanel({
-        label: "Rows",
-        placeholder: "Enter rows",
-        visibility: "SHOW_NAME",
-        defaultOnAdd: 12
-      }),
-      rowSize: Prop.number().readAndWrite().propertiesPanel({
-        label: "Row size",
-        placeholder: "Enter row size",
-        visibility: "SHOW_NAME",
-        defaultOnAdd: 12
-      })
-    },
     {
       layout: Prop.literal("vertical"),
-      ...getAlignmentProps()
+      ...getAlignmentProps(),
+      ...sizeProps
     },
     {
       layout: Prop.literal("horizontal"),
-      ...getAlignmentProps()
+      ...getAlignmentProps(),
+      ...sizeProps
+    },
+    {
+      layout: Prop.literal("freeform"),
+      // put sizing props before the columns and rowHeight. Due to limit of Union, we need to put freefrom variant last because sizing props are merged with other variants, the last one will decide sizing props position
+      ...sizeProps,
+      columns: Prop.number().readAndWrite().propertiesPanel({
+        label: "Columns",
+        placeholder: "Enter columns",
+        helpText: "The total number of columns used to subdivide the grid horizontally. Each child component’s width will be defined relative to this total"
+      }).default(12),
+      rowHeight: Prop.dimension().readAndWrite().propertiesPanel({
+        label: "Row height",
+        placeholder: "row height in pixels",
+        controlType: "DIMENSION_VALUE_CONTROL",
+        dimensionUnit: "px",
+        helpText: "The pixel height of each row in the grid. Child components can span multiple rows to maintain consistent vertical alignment"
+      }).default(DEFAULT_GRID_ROW_SIZE)
     }
   ]
 });
@@ -114231,6 +114883,8 @@ const useWidgetNodeRef = (instanceId) => {
   return nodeRef;
 };
 const DraggableWidget = observer(function DraggableWidget2(props) {
+  const editStore2 = getEditStore();
+  const disableDrag = !editStore2.ui.dnd.canDragWidget(props.instanceId) || editStore2.ui.dnd.isDraggingNewComponent;
   const {
     setNodeRef: setDraggableNodeRef,
     isDragging,
@@ -114238,7 +114892,7 @@ const DraggableWidget = observer(function DraggableWidget2(props) {
     attributes: attributes2
   } = useComponentDraggable({
     instanceId: props.instanceId,
-    disableDrag: props.disableDrag ?? false
+    disableDrag: disableDrag ?? false
   });
   const widgetNode = useWidgetNodeRef(props.instanceId);
   useEffect(() => {
@@ -114253,6 +114907,20 @@ const DraggableWidget = observer(function DraggableWidget2(props) {
       ...attributes2,
       className: "sb-draggable-wrapper",
       "data-is-dragged": isDragging,
+      onPointerDown: (e3) => {
+        if (!disableDrag) {
+          listeners == null ? void 0 : listeners.onPointerDown(e3);
+        } else {
+          e3.stopPropagation();
+        }
+      },
+      onPointerMove: (e3) => {
+        if (!disableDrag) {
+          listeners == null ? void 0 : listeners.onPointerMove(e3);
+        } else {
+          e3.stopPropagation();
+        }
+      },
       children: props.children
     }
   );
@@ -114608,6 +115276,178 @@ var KeyValuePropertyType = /* @__PURE__ */ ((KeyValuePropertyType2) => {
   KeyValuePropertyType2["EMAIL"] = "email";
   return KeyValuePropertyType2;
 })(KeyValuePropertyType || {});
+const DEFAULT_TABLE_DATA = [
+  {
+    photo: "https://cdn.superblocks.com/sample-data/rachel_kim",
+    name: "Rachel Kim",
+    email: "rachel.kim89@gmail.com",
+    role: "Vendor Partner",
+    company: "Urban Threads Co.",
+    status: "Active",
+    date_joined: "2023-04-12",
+    last_activity: "2025-06-07T16:20:00Z"
+  },
+  {
+    photo: "https://cdn.superblocks.com/sample-data/daniel_vargas",
+    name: "Daniel Vargas",
+    email: "dvargas1984@yahoo.com",
+    role: "Logistics Contact",
+    company: "Vargas Freight Ltd.",
+    status: "Pending",
+    date_joined: "2024-01-23",
+    last_activity: "2025-05-30T13:45:00Z"
+  },
+  {
+    photo: "https://cdn.superblocks.com/sample-data/sophie_liu",
+    name: "Sophie Liu",
+    email: "sophie.liu.personal@gmail.com",
+    role: "Retail Manager",
+    company: "Modern Goods",
+    status: "Active",
+    date_joined: "2022-09-10",
+    last_activity: "2025-06-08T09:03:00Z"
+  },
+  {
+    photo: "https://cdn.superblocks.com/sample-data/omar_el-sayed",
+    name: "Omar El-Sayed",
+    email: "omarsayed78@hotmail.com",
+    role: "Accounts Payable",
+    company: "Sayed Textiles",
+    status: "Inactive",
+    date_joined: "2021-06-05",
+    last_activity: "2024-12-18T11:40:00Z"
+  },
+  {
+    photo: "https://cdn.superblocks.com/sample-data/grace_nguyen",
+    name: "Grace Nguyen",
+    email: "gracenguyen23@icloud.com",
+    role: "Product Supplier",
+    company: "Green Earth Supplies",
+    status: "Active",
+    date_joined: "2023-11-03",
+    last_activity: "2025-06-08T17:28:00Z"
+  },
+  {
+    photo: "https://cdn.superblocks.com/sample-data/alex_romero",
+    name: "Alex Romero",
+    email: "alex.romero@gmail.com",
+    role: "Client Account Owner",
+    company: "Romero & Co.",
+    status: "Suspended",
+    date_joined: "2022-02-28",
+    last_activity: "2025-03-11T08:20:00Z"
+  },
+  {
+    photo: "https://cdn.superblocks.com/sample-data/lena_schmidt",
+    name: "Lena Schmidt",
+    email: "lena_schmidt92@gmx.de",
+    role: "Wholesale Contact",
+    company: "Schmidt Imports",
+    status: "Active",
+    date_joined: "2021-12-01",
+    last_activity: "2025-06-06T21:10:00Z"
+  },
+  {
+    photo: "https://cdn.superblocks.com/sample-data/devon_price",
+    name: "Devon Price",
+    email: "devon.price22@aol.com",
+    role: "Fulfillment Liaison",
+    company: "DepotLink",
+    status: "Active",
+    date_joined: "2024-05-17",
+    last_activity: "2025-06-08T10:42:00Z"
+  },
+  {
+    photo: "https://cdn.superblocks.com/sample-data/isabella_rossi",
+    name: "Isabella Rossi",
+    email: "bella.rossi@gmail.com",
+    role: "Procurement Agent",
+    company: "Rossi Global Sourcing",
+    status: "Pending",
+    date_joined: "2023-07-19",
+    last_activity: "2025-05-29T14:05:00Z"
+  },
+  {
+    photo: "https://cdn.superblocks.com/sample-data/tariq_khan",
+    name: "Tariq Khan",
+    email: "tariq.khan92@protonmail.com",
+    role: "International Ops Lead",
+    company: "CrossPort Trade Inc.",
+    status: "Active",
+    date_joined: "2022-11-08",
+    last_activity: "2025-06-08T16:11:00Z"
+  },
+  {
+    photo: "https://cdn.superblocks.com/sample-data/emily_zhang",
+    name: "Emily Zhang",
+    email: "emilyzhang.home@gmail.com",
+    role: "Logistics Coordinator",
+    company: "Zhang Export Ltd.",
+    status: "Active",
+    date_joined: "2023-03-12",
+    last_activity: "2025-06-08T19:02:00Z"
+  }
+];
+const DEFAULT_TABLE_COLUMNS = {
+  name: {
+    columnType: "text",
+    label: "Name"
+  },
+  email: {
+    columnType: "email",
+    label: "Email"
+  },
+  role: {
+    columnType: "text",
+    label: "Role"
+  },
+  company: {
+    columnType: "text",
+    label: "Company"
+  },
+  status: {
+    columnType: "tags",
+    tagDisplayConfig: {
+      Active: {
+        color: "#14CDB733"
+      },
+      Pending: {
+        color: "#FF9F3533"
+      },
+      Inactive: {
+        color: "#a6a0a033"
+      },
+      Suspended: {
+        color: "#FF62A433"
+      }
+    },
+    label: "Status"
+  },
+  date_joined: {
+    columnType: "date",
+    inputFormat: "YYYY-MM-DD",
+    outputFormat: "MM-DD-YYYY",
+    label: "Date joined"
+  },
+  last_activity: {
+    columnType: "date",
+    inputFormat: "YYYY-MM-DDTHH:mm:ssZ",
+    outputFormat: "MM-DD-YYYY",
+    label: "Last activity"
+  },
+  photo: {
+    columnType: "image",
+    label: "Photo"
+  }
+};
+const DEFAULT_TABLE_KEYS = Object.keys(DEFAULT_TABLE_COLUMNS);
+const CLEARED_TABLE_COLUMNS = DEFAULT_TABLE_KEYS.reduce(
+  (acc, key2) => {
+    acc[key2] = void 0;
+    return acc;
+  },
+  {}
+);
 function getParentInfo(parent) {
   const parentComponentMeta = getEditStore().runtimeEntitiesManager.getAnyEditorWidgetMeta(parent.id);
   const isParentGridLike = isWidgetGrid(parentComponentMeta);
@@ -114777,8 +115617,8 @@ function getComponentBaseProperties(componentType, parentInfo) {
         "https://lowcode.s3.us-west-2.amazonaws.com/eilish-billie.jpeg"
       );
       properties2.fillContainer = Property.Static(true);
-      properties2.width = Property.Dimension(Dim.px(300));
-      properties2.height = Property.Dimension(Dim.px(300));
+      properties2.width = parentInfo.isGridLike ? Property.Dimension(Dim.col(4)) : Property.Dimension(Dim.px(300));
+      properties2.height = Property.Dimension(Dim.fit());
       break;
     case "SbKeyValue":
       properties2.sourceData = Property.Static({
@@ -114853,9 +115693,26 @@ function getComponentBaseProperties(componentType, parentInfo) {
     case "SbSection":
       children = getSectionChildren();
       break;
+    case "SbTable":
+      properties2.tableData = Property.Static(DEFAULT_TABLE_DATA);
+      properties2.columns = Property.Static(DEFAULT_TABLE_COLUMNS);
+      properties2.header = Property.Static("Customers");
+      properties2.searchPlaceholder = Property.Static("Search...");
+      break;
   }
+  const { width, height, ...restProperties } = properties2;
+  const safeDimensions = parentInfo.isGridLike ? filterSafeGridDimensionProperties({
+    width: width == null ? void 0 : width.value,
+    height: height == null ? void 0 : height.value
+  }) : filterSafeStackDimensionProperties({
+    width: width == null ? void 0 : width.value,
+    height: height == null ? void 0 : height.value
+  });
   return {
-    properties: properties2,
+    properties: {
+      ...restProperties,
+      ...safeDimensions
+    },
     children,
     name: (_b2 = properties2.name) == null ? void 0 : _b2.value
   };
@@ -114896,6 +115753,7 @@ async function createComponent({
     componentType,
     parentInfo.type
   );
+  const isGridLike = willWrapInSectionAndColumn && componentType !== "SbColumn" ? true : parentInfo.isGridLike;
   const tagName = componentType;
   const {
     properties: propertiesFromType,
@@ -114903,11 +115761,11 @@ async function createComponent({
     name
   } = getComponentBaseProperties(componentType, {
     // will wrap in a column with grid layout if dropping on a page or section directly
-    isGridLike: willWrapInSectionAndColumn && componentType !== "SbColumn" ? true : parentInfo.isGridLike
+    isGridLike
   });
   const properties2 = {
-    ...baseProperties,
-    ...propertiesFromType
+    ...propertiesFromType,
+    ...baseProperties
   };
   console.log("creating component", { tagName, properties: properties2 });
   const parentElement = { source: parent };
@@ -115057,12 +115915,10 @@ const handleGridDropForNewComponent = ({
     baseProperties: {
       marginTop: Property.Dimension(Dim.row((activeRectGU == null ? void 0 : activeRectGU.yGU) ?? 0)),
       marginLeft: Property.Dimension(Dim.col((activeRectGU == null ? void 0 : activeRectGU.xGU) ?? 0)),
-      width: Property.Dimension(
-        (activeRectGU == null ? void 0 : activeRectGU.widthGU) ? Dim.col(activeRectGU == null ? void 0 : activeRectGU.widthGU) : Dim.col(4)
-      ),
-      height: Property.Dimension(
-        (activeRectGU == null ? void 0 : activeRectGU.heightGU) ? Dim.rows(activeRectGU == null ? void 0 : activeRectGU.heightGU) : Dim.fit()
-      )
+      ...defaultSizeForComponent(componentType, true, {
+        widthGU: activeRectGU == null ? void 0 : activeRectGU.widthGU,
+        heightGU: activeRectGU == null ? void 0 : activeRectGU.heightGU
+      })
     },
     scopeName
   });
@@ -115214,10 +116070,17 @@ const handleStackDropForNewComponent = ({
     throw new Error("Missing drop source id");
   }
   const scopeName = rootStore.entityManager.getScopeName(dropScopeId);
+  const dragRect = editStore2.ui.dnd.activeDragRect;
   return createComponent({
     componentType,
     parent: { index: dropInfo.insertionIndex, id: dropSourceId },
-    scopeName
+    scopeName,
+    baseProperties: {
+      ...defaultSizeForComponent(componentType, false, {
+        widthPx: dragRect == null ? void 0 : dragRect.width,
+        heightPx: dragRect == null ? void 0 : dragRect.height
+      })
+    }
   });
 };
 const handleStackDrop = async ({
@@ -115747,6 +116610,14 @@ const InteractionRectHandles = (props) => {
   const { instanceId, isDragging, selectionType } = props;
   const [showPopover, setShowPopover] = useState(null);
   const { canResizeWidth: canResizeWidth2, canResizeHeight: canResizeHeight2 } = useResizeCapabilities(instanceId);
+  const timeoutRef = useRef(null);
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
   const throttledResizeWidget = useMemo$2(
     () => lodashExports.throttle((e3) => {
       var _a2;
@@ -115777,14 +116648,18 @@ const InteractionRectHandles = (props) => {
       var _a2;
       e3.stopPropagation();
       e3.preventDefault();
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
       if ((position2 === "left" || position2 === "right") && !canResizeWidth2) {
         setShowPopover(position2);
-        setTimeout(() => setShowPopover(null), 3e3);
+        timeoutRef.current = setTimeout(() => setShowPopover(null), 3e3);
         return;
       }
       if ((position2 === "top" || position2 === "bottom") && !canResizeHeight2) {
         setShowPopover(position2);
-        setTimeout(() => setShowPopover(null), 3e3);
+        timeoutRef.current = setTimeout(() => setShowPopover(null), 3e3);
         return;
       }
       setShowPopover(null);
@@ -115858,6 +116733,15 @@ const InteractionRectHandles = (props) => {
               popoverClassName: "bp5-unstyled-popover",
               isOpen: showPopover === pos2,
               placement: pos2,
+              onInteraction: (nextOpenState, e3) => {
+                if ((e3 == null ? void 0 : e3.type) === "mousedown" && nextOpenState === false && showPopover === pos2) {
+                  if (timeoutRef.current) {
+                    clearTimeout(timeoutRef.current);
+                    timeoutRef.current = null;
+                  }
+                  setShowPopover(null);
+                }
+              },
               modifiers: {
                 flip: {
                   enabled: true,
@@ -116494,6 +117378,7 @@ const EditWrapper = observer(function EditWrapper2(props) {
             Component: props.component,
             identifier: identifier2,
             widgetProps: props.widgetProps,
+            showErrors: true,
             children
           }
         )
@@ -116773,7 +117658,6 @@ const registerSbComponent = (type5, config2, Component3) => {
     const identifier2 = useRef();
     const { name: passedName, scopeId } = getNormalizedIdInfo({
       bind: getBindingIdentifier(props.bind),
-      propsName: props.name,
       fallbackScopeId
     });
     if (!identifier2.current) {
@@ -117253,8 +118137,16 @@ const textStyleProp = ({
   propertiesPanel
 } = {}) => Prop.composite(baseProp).readAndWrite().propertiesPanel({
   ...basePropertiesPaneDisplay,
-  ...propertiesPanel
+  ...propertiesPanel,
+  isJSConvertible: false
 });
+const colorProp = (schema) => {
+  return Prop.string().readAndWrite().propertiesPanel({
+    ...schema,
+    controlType: "COLOR_PICKER",
+    isJSConvertible: true
+  });
+};
 const labelTextStyle = () => textStyleProp({
   propertiesPanel: {
     label: "Label style",
@@ -117268,23 +118160,41 @@ const labelTextStyle = () => textStyleProp({
     default: Theme.colors.neutral900
   }
 }));
-const perSideBorderDef = () => Prop.composite({
-  color: Prop.string().readAndWrite(),
-  width: Prop.dimension().readAndWrite(),
-  style: Prop.string().readAndWrite()
-}).readAndWrite();
+const createPerSideBorder = (border2) => {
+  return {
+    left: {
+      color: border2.borderColor.default,
+      width: border2.borderWidth,
+      style: border2.borderStyle
+    },
+    right: {
+      color: border2.borderColor.default,
+      width: border2.borderWidth,
+      style: border2.borderStyle
+    },
+    top: {
+      color: border2.borderColor.default,
+      width: border2.borderWidth,
+      style: border2.borderStyle
+    },
+    bottom: {
+      color: border2.borderColor.default,
+      width: border2.borderWidth,
+      style: border2.borderStyle
+    }
+  };
+};
 const border = (propertiesPanelConfig = {}) => {
-  return Prop.composite({
-    top: perSideBorderDef(),
-    right: perSideBorderDef(),
-    bottom: perSideBorderDef(),
-    left: perSideBorderDef()
-  }).propertiesPanel({
+  return Prop.any().readAndWrite().propertiesPanel({
     label: "Border",
     controlType: "BORDER_CONTROL",
     helpText: "Controls the border of the component",
+    visibility: "SHOW_NAME",
+    isRemovable: true,
+    defaultOnAdd: () => createPerSideBorder(Theme.defaultBorder),
+    isJSConvertible: false,
     ...propertiesPanelConfig
-  }).readAndWrite();
+  });
 };
 const createBorderRadiusObject = (borderRadius2) => {
   return {
@@ -117295,18 +118205,17 @@ const createBorderRadiusObject = (borderRadius2) => {
   };
 };
 const borderRadius = (propertiesPanelConfig = {}) => {
-  return Prop.composite({
-    topLeft: Prop.dimension().readAndWrite(),
-    topRight: Prop.dimension().readAndWrite(),
-    bottomRight: Prop.dimension().readAndWrite(),
-    bottomLeft: Prop.dimension().readAndWrite()
-  }).default(function() {
-    const borderRadius2 = Theme.defaultBorder.borderRadius ?? Dim.px(0);
-    return createBorderRadiusObject(borderRadius2);
+  return Prop.any().default(() => {
+    const borderRadius2 = Theme.defaultBorder.borderRadius;
+    return borderRadius2.value !== 0 ? createBorderRadiusObject(borderRadius2) : void 0;
   }).readAndWrite().propertiesPanel({
     label: "Border radius",
     controlType: "BORDER_RADIUS_CONTROL",
     helpText: "Controls the border radius of the component",
+    visibility: "SHOW_NAME",
+    isRemovable: true,
+    defaultOnAdd: () => createBorderRadiusObject(Theme.defaultBorder.borderRadius),
+    isJSConvertible: false,
     ...propertiesPanelConfig
   });
 };
@@ -117318,35 +118227,49 @@ const buildPerSideBorder = (border2) => {
     left: border2()
   };
 };
-const PRIMARY_BUTTON_BORDER_OBJECT = buildPerSideBorder(() => ({
-  color: function() {
-    return this.backgroundColor;
-  },
-  width: Dim.px(1),
-  style: "solid"
-}));
-const SECONDARY_BUTTON_BORDER_OBJECT = buildPerSideBorder(() => ({
-  color: () => Theme.colors.primary500,
-  width: Dim.px(1),
-  style: "solid"
-}));
+const PRIMARY_BUTTON_BORDER_OBJECT = function() {
+  return buildPerSideBorder(() => ({
+    color: this.backgroundColor,
+    width: Dim.px(1),
+    style: "solid"
+  }));
+};
+const SECONDARY_BUTTON_BORDER_OBJECT = function() {
+  return buildPerSideBorder(() => ({
+    color: Theme.colors.primary500,
+    width: Dim.px(1),
+    style: "solid"
+  }));
+};
 const getDefaultBorderObject = function() {
   switch (this.variant) {
     case "primary":
-      return PRIMARY_BUTTON_BORDER_OBJECT;
+      return PRIMARY_BUTTON_BORDER_OBJECT.bind(this)();
     case "secondary":
-      return SECONDARY_BUTTON_BORDER_OBJECT;
+      return SECONDARY_BUTTON_BORDER_OBJECT.bind(this)();
     default:
-      return noBorderOject(Theme);
+      return onePixelTransparentBorderObject();
   }
 };
-const PerSideBorderDef = function() {
-  return Prop.composite({
-    color: Prop.string().readAndWrite(),
-    width: Prop.dimension().readAndWrite(),
-    style: Prop.string().readAndWrite()
-  });
-};
+function getDefaultBorderRadius() {
+  return function() {
+    let borderRadius2;
+    switch (this.variant) {
+      case "PRIMARY_BUTTON":
+        borderRadius2 = Theme.buttons.primary.borderRadius;
+        break;
+      case "SECONDARY_BUTTON":
+        borderRadius2 = Theme.buttons.secondary.borderRadius;
+        break;
+      case "TERTIARY_BUTTON":
+        borderRadius2 = Theme.buttons.tertiary.borderRadius;
+        break;
+      default:
+        borderRadius2 = Theme.buttons.primary.borderRadius;
+    }
+    return createBorderRadiusObject(borderRadius2);
+  };
+}
 const textStyle$3 = textStyleProp().default(function() {
   return {
     variant: "buttonLabel",
@@ -117402,47 +118325,24 @@ const propertiesDefinition$h = {
       }
     }),
     textStyle: textStyle$3,
-    backgroundColor: Prop.string().readAndWrite().default(function() {
-      const defaultThemeBackground = getButtonThemeDefaultBackgroundColor(
-        Theme,
-        this.variant
-      );
-      return defaultThemeBackground === "transparent" ? void 0 : defaultThemeBackground;
-    }).propertiesPanel({
+    backgroundColor: colorProp({
       label: "Background color",
-      controlType: "COLOR_PICKER",
       visibility: "SHOW_NAME",
       isRemovable: true,
       defaultOnAdd: function() {
         return getButtonThemeDefaultBackgroundColor(Theme, this.variant);
       }
+    }).default(function() {
+      const defaultThemeBackground = getButtonThemeDefaultBackgroundColor(
+        Theme,
+        this.variant
+      );
+      return defaultThemeBackground === "transparent" ? void 0 : defaultThemeBackground;
     }),
-    border: Prop.composite(buildPerSideBorder(() => PerSideBorderDef())).default(getDefaultBorderObject).propertiesPanel({
-      label: "Border",
-      controlType: "BORDER_CONTROL",
-      helpText: "Controls the border of the component",
-      isRemovable: true,
-      defaultOnAdd: SECONDARY_BUTTON_BORDER_OBJECT,
-      visibility: "SHOW_NAME"
-    }).readAndWrite(),
-    borderRadius: borderRadius().default(function() {
-      let borderRadius2;
-      switch (this.variant) {
-        case "PRIMARY_BUTTON":
-          borderRadius2 = Theme.buttons.primary.borderRadius;
-          break;
-        case "SECONDARY_BUTTON":
-          borderRadius2 = Theme.buttons.secondary.borderRadius;
-          break;
-        case "TERTIARY_BUTTON":
-          borderRadius2 = Theme.buttons.tertiary.borderRadius;
-          break;
-        default:
-          borderRadius2 = Theme.buttons.primary.borderRadius;
-      }
-      return createBorderRadiusObject(borderRadius2);
-    }),
-    // Horizontal label alignment
+    border: border({
+      defaultOnAdd: SECONDARY_BUTTON_BORDER_OBJECT
+    }).default(getDefaultBorderObject),
+    borderRadius: borderRadius().default(getDefaultBorderRadius),
     labelAlignment: Prop.string().readAndWrite().default("center").propertiesPanel({
       label: "Label alignment",
       controlType: "RADIO_BUTTON_GROUP",
@@ -117639,9 +118539,8 @@ const commonLayoutProps = {
   ...visible()
 };
 Section.category(PropsPanelCategory.Appearance).children({
-  backgroundColor: Prop.string().readAndWrite().propertiesPanel({
+  backgroundColor: colorProp({
     label: "Background",
-    controlType: "COLOR_PICKER",
     helpText: "Changes the color of the background"
   }),
   border: border(),
@@ -117785,11 +118684,11 @@ const getStackChildStyle = ({
   parentWidth
 }) => {
   const height = (childProps == null ? void 0 : childProps.height) ?? Dim.fit();
-  const heightCss = childCount === 1 && (height == null ? void 0 : height.mode) === "fill" && (parentHeight == null ? void 0 : parentHeight.mode) !== "fit" ? (
+  const 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
-    { height: "100%" }
-  ) : dimToCSS(height, "height", primary === "height");
+    childCount === 1 && (height == null ? void 0 : height.mode) === "fill" && (parentHeight == null ? void 0 : parentHeight.mode) !== "fit" ? { height: "100%" } : dimToCSS(height, "height", primary === "height")
+  );
   const width = (childProps == null ? void 0 : childProps.width) ?? Dim.fit();
   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(
@@ -117983,11 +118882,13 @@ const propertiesDefinition$g = {
     }).default(false)
   }).add(visible()),
   appearance: Section.category(PropsPanelCategory.Appearance).children({
-    backgroundColor: Prop.string().readAndWrite().propertiesPanel({
+    backgroundColor: colorProp({
       label: "Background",
-      controlType: "COLOR_PICKER",
-      helpText: "Changes the color of the background"
-    }),
+      helpText: "Changes the color of the background",
+      visibility: "SHOW_NAME",
+      isRemovable: true,
+      defaultOnAdd: () => Theme.colors.appBackground ?? "#ffffff"
+    }).default(void 0).validate(VALIDATORS.TEXT_ALLOW_UNDEFINED),
     border: border()
   })
 };
@@ -118197,13 +119098,11 @@ const useHeightObserver = () => {
       label: "Columns",
       placeholder: "Enter columns"
     }),
-    rows: Prop.number().readAndWrite().propertiesPanel({
-      label: "Rows",
-      placeholder: "Enter rows"
-    }),
-    rowSize: Prop.number().readAndWrite().propertiesPanel({
-      label: "Row size",
-      placeholder: "Enter row size"
+    rowHeight: Prop.dimension().readAndWrite().propertiesPanel({
+      label: "Row height",
+      placeholder: "Enter row height",
+      controlType: "DIMENSION_VALUE_CONTROL",
+      dimensionUnit: "px"
     }),
     ...spacing({ themeValue: Dim.px(0) })
   }),
@@ -118222,10 +119121,10 @@ const InternalGrid = ({
   children = EMPTY_ARRAY$1,
   ...props
 }) => {
-  var _a2;
+  var _a2, _b2;
   const isEditing = Boolean((_a2 = rootStore.editStore) == null ? void 0 : _a2.isInitialized);
   const { style: style2, ...passThroughProps } = usePassthroughProps(props);
-  const rowHeight = props.rowSize ?? 12;
+  const rowHeight = ((_b2 = props.rowHeight) == null ? void 0 : _b2.value) ?? 12;
   const childrenArray = useMemo$2(() => {
     let childrenArray2 = Array.isArray(children) ? children : [children];
     if (!isEditing) {
@@ -118247,9 +119146,9 @@ const InternalGrid = ({
     );
     const positions = childrenArray.reduce(
       (acc, child) => {
-        var _a3, _b2, _c2;
+        var _a3, _b3, _c2;
         let width = ((_a3 = child.props.width) == null ? void 0 : _a3.value) ?? 1;
-        if (((_b2 = child.props.width) == null ? void 0 : _b2.mode) === "fill") {
+        if (((_b3 = child.props.width) == null ? void 0 : _b3.mode) === "fill") {
           width = columns;
         }
         acc[getChildName(child)] = {
@@ -118277,8 +119176,8 @@ const InternalGrid = ({
     };
   }, [columns, props.spacing, rowHeight, style2]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(DragDisplay, { passThroughProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: gridStyle, className: props.className, children: childrenArray.map((child) => {
-    var _a3;
-    const heightMode = child.props.height ?? "fit";
+    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;
@@ -118296,7 +119195,7 @@ const InternalGrid = ({
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           Component3,
           {
-            staticHeight: (((_a3 = child.props.height) == null ? void 0 : _a3.value) ?? 0) * rowHeight,
+            staticHeight: (((_b3 = child.props.height) == null ? void 0 : _b3.value) ?? 0) * rowHeight,
             onHeightChanged: (height) => {
               dispatchHeight({
                 type: "SET_HEIGHT",
@@ -118353,60 +119252,30 @@ const StaticComponent = ({
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { ...style2, width: "100%", height: "100%" }, children });
 };
 const propertiesDefinition$f = {
-  layout: Section.category(PropsPanelCategory.Layout).add(containerLayout()).add(spacing()).add({
-    padding: Prop.any().default(function() {
-      return this.variant === "card" ? BASE_THEME_NEW_APPS.padding : {
-        top: Dim.px(0),
-        bottom: Dim.px(0),
-        left: Dim.px(0),
-        right: Dim.px(0)
-      };
-    }).readAndWrite().propertiesPanel({
-      label: "Padding",
-      helpText: "The padding for the component",
-      controlType: "PADDING_CONTROL",
-      // TODO: replace the default once we have a way to get the padding from current theme
-      themeValue: BASE_THEME_NEW_APPS.padding
-    })
-  }).add({
-    width: Prop.dimension().readAndWrite().propertiesPanel({
-      label: "Width",
-      controlType: "WIDTH_DROPDOWN"
-    }),
-    height: Prop.dimension().readAndWrite().propertiesPanel({
-      label: "Height",
-      controlType: "HEIGHT_DROPDOWN"
-    }),
-    // the default min/max width/height should be undefined, but currently if no default is set, the add button is not working
-    minWidth: Prop.dimension().readAndWrite().propertiesPanel({
-      label: "Min width",
-      controlType: "WIDTH_DROPDOWN",
-      isRemovable: true,
-      visibility: "SHOW_NAME",
-      defaultOnAdd: Dim.px(0)
-    }),
-    maxWidth: Prop.dimension().readAndWrite().propertiesPanel({
-      label: "Max width",
-      controlType: "WIDTH_DROPDOWN",
-      isRemovable: true,
-      visibility: "SHOW_NAME",
-      defaultOnAdd: Dim.px(200)
-    }),
-    minHeight: Prop.dimension().readAndWrite().propertiesPanel({
-      label: "Min height",
-      controlType: "HEIGHT_DROPDOWN",
-      isRemovable: true,
-      visibility: "SHOW_NAME",
-      defaultOnAdd: Dim.px(0)
-    }),
-    maxHeight: Prop.dimension().readAndWrite().propertiesPanel({
-      label: "Max height",
-      controlType: "HEIGHT_DROPDOWN",
-      isRemovable: true,
-      visibility: "SHOW_NAME",
-      defaultOnAdd: Dim.px(120)
+  layout: Section.category(PropsPanelCategory.Layout).add(
+    containerLayout({
+      ...spacing(),
+      ...padding({
+        default: function() {
+          return this.variant === "card" ? BASE_THEME_NEW_APPS.padding : {
+            top: Dim.px(0),
+            bottom: Dim.px(0),
+            left: Dim.px(0),
+            right: Dim.px(0)
+          };
+        }
+      }),
+      ...margin(),
+      ...size$2({
+        defaultsOnAdd: {
+          minWidth: Dim.px(0),
+          minHeight: Dim.px(0),
+          maxWidth: Dim.px(200),
+          maxHeight: Dim.px(120)
+        }
+      })
     })
-  }).add(margin()).add(shouldScrollContents(true)).add(visible()),
+  ).add(shouldScrollContents(true)).add(visible()),
   appearance: Section.category(PropsPanelCategory.Appearance).children({
     variant: Prop.string().readAndWrite().default("none").propertiesPanel({
       label: "Variant",
@@ -118424,18 +119293,13 @@ const propertiesDefinition$f = {
       helpText: "Changes the color of the background",
       visibility: "SHOW_NAME",
       isRemovable: true,
-      defaultOnAdd: function() {
-        return Theme.colors.appBackground ?? "#ffffff";
-      }
+      defaultOnAdd: () => Theme.colors.appBackground ?? "#ffffff"
     }),
-    border: border(),
-    borderRadius: borderRadius({
-      isRemovable: true,
-      visibility: "SHOW_NAME",
-      defaultOnAdd: createBorderRadiusObject(Dim.px(0))
-    }).default(function() {
-      const borderRadius2 = this.variant === "card" ? Theme.defaultBorder.borderRadius : Dim.px(0);
-      return createBorderRadiusObject(borderRadius2);
+    border: border().default(function() {
+      return this.variant === "card" ? createPerSideBorder(Theme.defaultBorder) : void 0;
+    }),
+    borderRadius: borderRadius().default(function() {
+      return this.variant === "card" ? createBorderRadiusObject(Theme.defaultBorder.borderRadius) : void 0;
     })
   })
 };
@@ -118512,12 +119376,11 @@ const InternalContainer = (props) => {
         InternalGrid,
         {
           margin: void 0,
-          spacing: props.spacing ?? Dim.px(0),
+          spacing: Dim.px(0),
           isVisible: props.isVisible ?? true,
           "data-container-layer": "container-inner-grid",
           columns: props.columns,
-          rows: props.rows,
-          rowSize: props.rowSize,
+          rowHeight: props.rowHeight,
           children: props.children
         }
       ) : props.layout === "horizontal" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -118551,22 +119414,28 @@ const SbContainer = registerSbComponent(
   InternalContainer
 );
 const propertiesDefinition$e = {
-  layout: Section.category(PropsPanelCategory.Layout).add(containerLayout()).add(spacing()).add(padding()).add(
-    size$2({
-      defaults: {
-        width: Dim.fill(),
-        height: Dim.fill()
-      },
-      hasMinHeight: false,
-      hasMaxHeight: false,
-      showHeight: () => false
+  layout: Section.category(PropsPanelCategory.Layout).add(
+    containerLayout({
+      ...spacing(),
+      ...padding(),
+      ...size$2({
+        defaults: {
+          width: Dim.fill(),
+          height: Dim.fill()
+        },
+        hasMinHeight: false,
+        hasMaxHeight: false,
+        showHeight: () => false
+      })
     })
   ).add(shouldScrollContents(true)).add(visible()),
   appearance: Section.category(PropsPanelCategory.Appearance).children({
-    backgroundColor: Prop.string().readAndWrite().propertiesPanel({
+    backgroundColor: colorProp({
       label: "Background",
-      controlType: "COLOR_PICKER",
-      helpText: "Changes the color of the background"
+      helpText: "Changes the color of the background",
+      visibility: "SHOW_NAME",
+      isRemovable: true,
+      defaultOnAdd: () => Theme.colors.appBackground ?? "#ffffff"
     }),
     border: border()
   })
@@ -118596,7 +119465,6 @@ const SbColumn = registerSbComponent(
         verticalAlign: props.verticalAlign,
         horizontalAlign: props.horizontalAlign,
         columns: props.columns,
-        rows: props.rows,
         padding: props.padding,
         variant: "none",
         backgroundColor: props.backgroundColor,
@@ -125707,6 +126575,9 @@ const labelWidth = Prop.any().readAndWrite().default(Dim.percent(30)).properties
   label: "Label width",
   controlType: "SIMPLE_SIZE_CONTROL",
   helpText: "Control the width of the label subcomponent in the input",
+  isVisible: function() {
+    return !!this.label && this.labelPosition === "left";
+  },
   options: [
     {
       label: "Fluid",
@@ -125733,7 +126604,8 @@ const customValidationProperties = {
     helpText: "Sets a custom validation rule",
     controlType: "INPUT_TEXT",
     placeholder: "{{/./.test(Input1.value)}}",
-    isRemovable: true
+    isRemovable: true,
+    visibility: "SHOW_NAME"
   }),
   customErrorMessage: Prop.string().readAndWrite().default("").propertiesPanel({
     label: "Error",
@@ -125741,15 +126613,18 @@ const customValidationProperties = {
     controlType: "INPUT_TEXT",
     placeholder: "Enter error message",
     isRemovable: true,
+    visibility: "SHOW_NAME",
     isVisible: function() {
       return this.customValidationRule !== void 0;
     }
   })
 };
-const labelPosition = Prop.string().readAndWrite().default("top").propertiesPanel({
+const labelPosition = () => Prop.string().readAndWrite().default("top").propertiesPanel({
   label: "Label position",
   controlType: "RADIO_BUTTON_GROUP",
-  isVisible: (props) => !!props.label,
+  isVisible: function() {
+    return !!this.label;
+  },
   options: [
     {
       label: "Above",
@@ -125963,7 +126838,7 @@ const propertiesDefinition$d = {
     })
   }),
   appearance: Section.category(PropsPanelCategory.Appearance).add({
-    labelPosition,
+    labelPosition: labelPosition(),
     labelStyle: labelTextStyle(),
     placeholderText: Prop.string().readAndWrite().default("Enter text").propertiesPanel({
       helpText: "Sets a placeholder text for the input",
@@ -125972,11 +126847,10 @@ const propertiesDefinition$d = {
       placeholder: "Input text"
     }),
     textStyle: textStyle$2,
-    backgroundColor: Prop.string().readAndWrite().default("{{ theme.colors.neutral }}").propertiesPanel({
+    backgroundColor: colorProp({
       label: "Background",
-      controlType: "COLOR_PICKER",
       helpText: "Changes the color of the background"
-    }),
+    }).default(() => Theme.colors.neutral),
     border: border().default(void 0),
     borderRadius: borderRadius(),
     icon: Prop.string().readAndWrite().propertiesPanel({
@@ -126010,23 +126884,7 @@ const propertiesDefinition$d = {
       controlType: "SWITCH"
     })
   }),
-  layout: Section.category(PropsPanelCategory.Layout).add(padding({ themeValue: INPUT_PADDING, default: INPUT_PADDING })).add(size$2()).add(margin()).add(
-    // TODO: Should be before visibility props, but there's no way to do that with the layout helper
-    Prop.union({
-      shared: {
-        labelPosition: Prop.string()
-      },
-      variants: [
-        {
-          labelPosition: Prop.literal("left"),
-          labelWidth
-        },
-        {
-          labelPosition: Prop.literal("top")
-        }
-      ]
-    })
-  ).add(visible()),
+  layout: Section.category(PropsPanelCategory.Layout).add(padding({ themeValue: INPUT_PADDING, default: INPUT_PADDING })).add(size$2()).add(margin()).add({ labelWidth }).add(visible()),
   interaction: Section.category(PropsPanelCategory.Interaction).add(
     Prop.union({
       shared: {
@@ -133210,6 +134068,7 @@ const useStyle = (props) => {
     return {
       overflow: props.shouldScroll ? "auto" : "hidden",
       textAlign: (_a2 = props.textAlign) == null ? void 0 : _a2.toLowerCase(),
+      alignItems: getVerticalAlignment(props.verticalAlign),
       color: (_c2 = (_b2 = props.textStyle) == null ? void 0 : _b2.textColor) == null ? void 0 : _c2.default,
       ...props.style
     };
@@ -133231,6 +134090,17 @@ const getTextAlignClass = (textAlign) => {
       };
   }
 };
+const getVerticalAlignment = (verticalAlign) => {
+  switch (verticalAlign) {
+    case "top":
+      return "flex-start";
+    case "bottom":
+      return "flex-end";
+    case "center":
+    default:
+      return "center";
+  }
+};
 const useIconContainerStyles = ({
   iconGap,
   textAlign
@@ -133412,8 +134282,7 @@ const ModalComponent = (props) => {
         padding: props.styleProps.padding ?? ZERO_PADDING,
         spacing: props.spacing ?? Dim.px(0),
         columns: props.columns ?? 48,
-        rows: props.rows,
-        rowSize: props.rowSize,
+        rowHeight: props.rowHeight,
         shouldScrollContents: true,
         variant: "none",
         children: props.children
@@ -133428,8 +134297,7 @@ const ModalComponent = (props) => {
       props.styleProps.padding,
       props.spacing,
       props.columns,
-      props.rows,
-      props.rowSize,
+      props.rowHeight,
       props.children
     ]
   );
@@ -133507,12 +134375,16 @@ const ModalComponent = (props) => {
   ] });
 };
 const propertiesDefinition$a = {
-  layout: Section.category(PropsPanelCategory.Layout).add(containerLayout()).add(spacing()).add(padding()),
+  layout: Section.category(PropsPanelCategory.Layout).add(
+    containerLayout({
+      ...spacing(),
+      ...padding()
+    })
+  ),
   appearance: Section.category(PropsPanelCategory.Appearance).children({
-    backgroundColor: Prop.string().readAndWrite().propertiesPanel({
+    backgroundColor: colorProp({
       label: "Background color",
-      helpText: "The background color of the component",
-      controlType: "COLOR_PICKER"
+      helpText: "The background color of the component"
     }),
     border: Prop.any().readAndWrite().propertiesPanel({
       label: "Border",
@@ -133697,20 +134569,13 @@ const SbModal = registerSbComponent(
         verticalAlign: props.verticalAlign,
         spacing: props.spacing ?? Dim.px(0),
         columns: props.columns,
-        rows: props.rows,
-        rowSize: props.rowSize,
+        rowHeight: props.rowHeight,
         dropTargetRef,
         children: props.children
       }
     );
   }
 );
-var PaginationTypes = /* @__PURE__ */ ((PaginationTypes2) => {
-  PaginationTypes2["NONE"] = "NONE";
-  PaginationTypes2["CLIENT_SIDE"] = "CLIENT_SIDE";
-  PaginationTypes2["SERVER_SIDE"] = "SERVER_SIDE";
-  return PaginationTypes2;
-})(PaginationTypes || {});
 const CompactMode = {
   SHORT: "SHORT",
   DEFAULT: "DEFAULT",
@@ -133746,13 +134611,6 @@ var EditInputType = /* @__PURE__ */ ((EditInputType2) => {
   EditInputType2["Date"] = "DATE";
   return EditInputType2;
 })(EditInputType || {});
-var BooleanStyleFalse = /* @__PURE__ */ ((BooleanStyleFalse2) => {
-  BooleanStyleFalse2["EMPTY"] = "EMPTY";
-  BooleanStyleFalse2["CLOSE"] = "CLOSE";
-  BooleanStyleFalse2["MINUS"] = "MINUS";
-  BooleanStyleFalse2["EMPTY_CHECKBOX"] = "EMPTY_CHECKBOX";
-  return BooleanStyleFalse2;
-})(BooleanStyleFalse || {});
 var ImageSize = /* @__PURE__ */ ((ImageSize2) => {
   ImageSize2["Fixed"] = "FIXED";
   ImageSize2["Fit"] = "FIT";
@@ -133785,6 +134643,142 @@ const ColumnType = {
   EMAIL: "email",
   LINK: "link"
 };
+const JUSTIFY_CONTENT = {
+  LEFT: "flex-start",
+  CENTER: "center",
+  RIGHT: "flex-end"
+};
+const ALIGN_ITEMS = {
+  TOP: "flex-start",
+  CENTER: "center",
+  BOTTOM: "flex-end"
+};
+const TEXT_ALIGN = {
+  LEFT: "left",
+  CENTER: "center",
+  RIGHT: "right"
+};
+const TEXT_SIZES = {
+  HEADING1: "24px",
+  HEADING2: "18px",
+  HEADING3: "16px",
+  PARAGRAPH: "14px",
+  PARAGRAPH2: "12px"
+};
+var FontStyleTypes = /* @__PURE__ */ ((FontStyleTypes2) => {
+  FontStyleTypes2["BOLD"] = "BOLD";
+  FontStyleTypes2["ITALIC"] = "ITALIC";
+  FontStyleTypes2["REGULAR"] = "REGULAR";
+  FontStyleTypes2["UNDERLINE"] = "UNDERLINE";
+  return FontStyleTypes2;
+})(FontStyleTypes || {});
+const TABLE_SIZES = {
+  [CompactMode.VERY_SHORT]: {
+    COLUMN_HEADER_HEIGHT: 48,
+    TABLE_HEADER_HEIGHT: 60,
+    TABLE_FOOTER_HEIGHT: 48,
+    ROW_HEIGHT: 28,
+    ROW_FONT_SIZE: 14,
+    PAGINATION_CONTROLS_HEIGHT: 24,
+    IMAGE_SIZE: 22,
+    LINK_MENU_HEIGHT: 28,
+    LINK_MENU_ICON_SIZE: IconSize$1.LARGE,
+    ROW_PADDING: 0
+  },
+  [CompactMode.SHORT]: {
+    COLUMN_HEADER_HEIGHT: 48,
+    TABLE_HEADER_HEIGHT: 60,
+    TABLE_FOOTER_HEIGHT: 48,
+    ROW_HEIGHT: 36,
+    ROW_FONT_SIZE: 14,
+    PAGINATION_CONTROLS_HEIGHT: 24,
+    IMAGE_SIZE: 28,
+    LINK_MENU_HEIGHT: 32,
+    LINK_MENU_ICON_SIZE: IconSize$1.LARGE,
+    ROW_PADDING: 2
+  },
+  [CompactMode.DEFAULT]: {
+    COLUMN_HEADER_HEIGHT: 48,
+    TABLE_HEADER_HEIGHT: 60,
+    TABLE_FOOTER_HEIGHT: 48,
+    ROW_HEIGHT: 48,
+    ROW_FONT_SIZE: 14,
+    PAGINATION_CONTROLS_HEIGHT: 32,
+    IMAGE_SIZE: 32,
+    LINK_MENU_HEIGHT: 36,
+    LINK_MENU_ICON_SIZE: IconSize$1.XL,
+    ROW_PADDING: 5
+  },
+  [CompactMode.TALL]: {
+    COLUMN_HEADER_HEIGHT: 36,
+    TABLE_HEADER_HEIGHT: 60,
+    TABLE_FOOTER_HEIGHT: 60,
+    ROW_HEIGHT: 58,
+    ROW_FONT_SIZE: 14,
+    PAGINATION_CONTROLS_HEIGHT: 36,
+    IMAGE_SIZE: 36,
+    LINK_MENU_HEIGHT: 36,
+    LINK_MENU_ICON_SIZE: IconSize$1.XL,
+    ROW_PADDING: 10
+  }
+};
+const DEFAULT_TABLE_COLUMN_WIDTH = 150;
+const TABLE_COLUMN_MIN_WIDTH = 20;
+const PARSED_INPUT_TYPES = [
+  EditInputType.Number,
+  EditInputType.Checkbox
+];
+const TextBoxEditTypes = [
+  EditInputType.Text,
+  EditInputType.Number,
+  EditInputType.Email
+];
+const DEFAULT_CELL_TEXT_STYLE_VARIANT = "body2";
+const DEFAULT_CELL_CLASS_NAME = getTextCssClassFromVariant(
+  DEFAULT_CELL_TEXT_STYLE_VARIANT
+);
+const DEFAULT_HEADING_TEXT_STYLE_VARIANT = "heading3";
+const TABLE_COLUMN_HEADER_DEFAULT_TYPOGRAPHY = "heading6";
+var Condition0Type = /* @__PURE__ */ ((Condition0Type2) => {
+  Condition0Type2["all"] = "all";
+  Condition0Type2["isEmpty"] = "isEmpty";
+  Condition0Type2["isNotEmpty"] = "isNotEmpty";
+  Condition0Type2["isTrue"] = "isTrue";
+  Condition0Type2["isFalse"] = "isFalse";
+  return Condition0Type2;
+})(Condition0Type || {});
+var Condition1Type = /* @__PURE__ */ ((Condition1Type2) => {
+  Condition1Type2["textIs"] = "textIs";
+  Condition1Type2["textContains"] = "textContains";
+  Condition1Type2["textDoesNotContain"] = "textDoesNotContain";
+  Condition1Type2["textStartsWith"] = "textStartsWith";
+  Condition1Type2["textEndsWith"] = "textEndsWith";
+  Condition1Type2["isEqualTo"] = "isEqualTo";
+  Condition1Type2["isNotEqualTo"] = "isNotEqualTo";
+  Condition1Type2["isLessThan"] = "isLessThan";
+  Condition1Type2["isLessThanOrEqualTo"] = "isLessThanOrEqualTo";
+  Condition1Type2["isGreaterThan"] = "isGreaterThan";
+  Condition1Type2["isGreaterThanOrEqualTo"] = "isGreaterThanOrEqualTo";
+  Condition1Type2["dateIs"] = "dateIs";
+  Condition1Type2["dateIsBefore"] = "dateIsBefore";
+  Condition1Type2["dateIsAfter"] = "dateIsAfter";
+  return Condition1Type2;
+})(Condition1Type || {});
+var Condition2Type = /* @__PURE__ */ ((Condition2Type2) => {
+  Condition2Type2["isBetween"] = "isBetween";
+  Condition2Type2["dateIsBetween"] = "dateIsBetween";
+  return Condition2Type2;
+})(Condition2Type || {});
+const TABLE_MULTISELECT_COLID$1 = "SB_$$_MULTISELECT";
+const tagColorPalette = [
+  "#27BBFF33",
+  "#FF9F3533",
+  "#14CDB733",
+  "#7C4FF833",
+  "#FF62A433",
+  "#9D585833",
+  "#FF484833"
+];
 const CurrencyList = CC.getCodes();
 const tableColumnTypes = [
   {
@@ -133841,7 +134835,7 @@ const cellIconProps = {
     label: "Cell icon",
     controlType: "ICON_SELECTOR"
   }),
-  cellIconPosition: Prop.string().readAndWrite().propertiesPanel({
+  cellIconPosition: Prop.string().readAndWrite().default("left").propertiesPanel({
     label: "Cell icon position",
     controlType: "RADIO_BUTTON_GROUP",
     options: [
@@ -133859,7 +134853,7 @@ const cellIconProps = {
   })
 };
 const textStyleProps = {
-  horizontalAlign: Prop.string().readAndWrite().propertiesPanel({
+  horizontalAlign: Prop.string().readAndWrite().default("left").propertiesPanel({
     label: "Horizontal alignment",
     controlType: "RADIO_BUTTON_GROUP",
     options: [
@@ -133868,7 +134862,7 @@ const textStyleProps = {
       { value: "right", icon: "RIGHT_ALIGN" }
     ]
   }),
-  verticalAlign: Prop.string().readAndWrite().propertiesPanel({
+  verticalAlign: Prop.string().readAndWrite().default("top").propertiesPanel({
     label: "Vertical alignment",
     controlType: "RADIO_BUTTON_GROUP",
     options: [
@@ -133881,17 +134875,17 @@ const textStyleProps = {
     label: "Cell style",
     controlType: "TEXT_STYLE"
   }),
-  cellBackground: Prop.string().readAndWrite().propertiesPanel({
-    label: "Background color",
-    controlType: "COLOR_PICKER"
-  })
+  cellBackground: colorProp({
+    label: "Background color"
+  }).readAndWrite()
 };
 const textColumnProperties = {
   general: {
-    computedValue: Prop.string().readAndWrite().propertiesPanel({
-      label: "Computed value",
-      controlType: "COMPUTE_TABLE_VALUE"
-    }),
+    // TODO: bring this back when we are ready
+    // computedValue: Prop.string().readAndWrite().propertiesPanel({
+    //   label: "Computed value",
+    //   controlType: "COMPUTE_TABLE_VALUE",
+    // }),
     displayedValue: Prop.string().readAndWrite().propertiesPanel({
       label: "Displayed value",
       controlType: "COMPUTE_TABLE_VALUE"
@@ -133938,26 +134932,24 @@ const buttonColumnProperties = {
         }
       ]
     }),
-    buttonBackgroundColor: Prop.string().readAndWrite().propertiesPanel({
-      label: "Background color",
-      controlType: "COLOR_PICKER"
-    }),
-    buttonLabelColor: Prop.string().readAndWrite().propertiesPanel({
-      label: "Label color",
-      controlType: "COLOR_PICKER"
-    }),
-    backgroundColor: Prop.string().readAndWrite().propertiesPanel({
-      label: "Background color",
-      controlType: "COLOR_PICKER"
-    })
+    buttonBackgroundColor: colorProp({
+      label: "Background color"
+    }).readAndWrite(),
+    buttonLabelColor: colorProp({
+      label: "Label color"
+    }).readAndWrite(),
+    backgroundColor: colorProp({
+      label: "Background color"
+    }).readAndWrite()
   }
 };
 const numberColumnProperties = {
   general: {
-    computedValue: Prop.string().readAndWrite().propertiesPanel({
-      label: "Computed value",
-      controlType: "COMPUTE_TABLE_VALUE"
-    }),
+    // TODO: bring this back when we are ready
+    // computedValue: Prop.string().readAndWrite().propertiesPanel({
+    //   label: "Computed value",
+    //   controlType: "COMPUTE_TABLE_VALUE",
+    // }),
     notation: Prop.string().readAndWrite().propertiesPanel({
       label: "Number format",
       controlType: "DROP_DOWN",
@@ -134064,12 +135056,12 @@ const imageColumnProperties = {
 };
 const dateColumnProperties = {
   general: {
-    valueFormat: Prop.string().readAndWrite().propertiesPanel({
+    inputFormat: Prop.string().readAndWrite().propertiesPanel({
       label: "Value format",
       controlType: "DROP_DOWN",
       options: DATE_INPUT_FORMATS
     }),
-    displayFormat: Prop.string().readAndWrite().propertiesPanel({
+    outputFormat: Prop.string().readAndWrite().propertiesPanel({
       label: "Display format",
       controlType: "DROP_DOWN",
       options: DATE_OUTPUT_FORMATS
@@ -134101,38 +135093,39 @@ const dateColumnProperties = {
 };
 const booleanColumnProperties = {
   general: {
-    computedValue: Prop.string().readAndWrite().propertiesPanel({
-      label: "Computed value",
-      controlType: "COMPUTE_TABLE_VALUE"
-    })
+    // TODO: bring this back when we are ready
+    // computedValue: Prop.string().readAndWrite().propertiesPanel({
+    //   label: "Computed value",
+    //   controlType: "COMPUTE_TABLE_VALUE",
+    // }),
   },
   presentation: {
     ...textStyleProps,
-    booleanStyleFalse: Prop.string().readAndWrite().propertiesPanel({
+    booleanStyleFalse: Prop.string().readAndWrite().default("empty").propertiesPanel({
       label: "False value",
-      controlType: "RADIO_BUTTON_GROUP",
+      controlType: "RADIO_BUTTON",
       options: [
         {
-          label: "Empty",
-          value: BooleanStyleFalse.EMPTY
+          name: "",
+          value: "empty"
         },
         {
-          label: "Close",
+          name: "Close",
           isIcon: true,
           icon: "CLOSE",
-          value: BooleanStyleFalse.CLOSE
+          value: "close"
         },
         {
-          label: "Minus",
+          name: "Minus",
           isIcon: true,
           icon: "MINUS",
-          value: BooleanStyleFalse.MINUS
+          value: "minus"
         },
         {
-          label: "Empty checkbox",
+          name: "Empty checkbox",
           isIcon: true,
           icon: "EMPTY_CHECKBOX",
-          value: BooleanStyleFalse.EMPTY_CHECKBOX
+          value: "empty_checkbox"
         }
       ]
     })
@@ -134140,10 +135133,11 @@ const booleanColumnProperties = {
 };
 const videoColumnProperties = {
   general: {
-    computedValue: Prop.string().readAndWrite().propertiesPanel({
-      label: "Computed value",
-      controlType: "COMPUTE_TABLE_VALUE"
-    })
+    // TODO: bring this back when we are ready
+    // computedValue: Prop.string().readAndWrite().propertiesPanel({
+    //   label: "Computed value",
+    //   controlType: "COMPUTE_TABLE_VALUE",
+    // }),
   },
   presentation: {
     ...textStyleProps
@@ -134184,6 +135178,10 @@ const columnPanelConfig = {
         })
       },
       variants: [
+        {
+          columnType: Prop.unset(),
+          ...textColumnProperties.general
+        },
         {
           columnType: Prop.literal(ColumnType.TEXT),
           ...textColumnProperties.general
@@ -134268,6 +135266,10 @@ const columnPanelConfig = {
         columnType: Prop.string()
       },
       variants: [
+        {
+          columnType: Prop.unset(),
+          ...textColumnProperties.presentation
+        },
         {
           columnType: Prop.literal(ColumnType.TEXT),
           ...textColumnProperties.presentation
@@ -134387,142 +135389,6 @@ const columnPanelConfig = {
   //   }),
   // ),
 };
-const JUSTIFY_CONTENT = {
-  LEFT: "flex-start",
-  CENTER: "center",
-  RIGHT: "flex-end"
-};
-const ALIGN_ITEMS = {
-  TOP: "flex-start",
-  CENTER: "center",
-  BOTTOM: "flex-end"
-};
-const TEXT_ALIGN = {
-  LEFT: "left",
-  CENTER: "center",
-  RIGHT: "right"
-};
-const TEXT_SIZES = {
-  HEADING1: "24px",
-  HEADING2: "18px",
-  HEADING3: "16px",
-  PARAGRAPH: "14px",
-  PARAGRAPH2: "12px"
-};
-var FontStyleTypes = /* @__PURE__ */ ((FontStyleTypes2) => {
-  FontStyleTypes2["BOLD"] = "BOLD";
-  FontStyleTypes2["ITALIC"] = "ITALIC";
-  FontStyleTypes2["REGULAR"] = "REGULAR";
-  FontStyleTypes2["UNDERLINE"] = "UNDERLINE";
-  return FontStyleTypes2;
-})(FontStyleTypes || {});
-const TABLE_SIZES = {
-  [CompactMode.VERY_SHORT]: {
-    COLUMN_HEADER_HEIGHT: 48,
-    TABLE_HEADER_HEIGHT: 60,
-    TABLE_FOOTER_HEIGHT: 48,
-    ROW_HEIGHT: 28,
-    ROW_FONT_SIZE: 14,
-    PAGINATION_CONTROLS_HEIGHT: 24,
-    IMAGE_SIZE: 22,
-    LINK_MENU_HEIGHT: 28,
-    LINK_MENU_ICON_SIZE: IconSize$1.LARGE,
-    ROW_PADDING: 0
-  },
-  [CompactMode.SHORT]: {
-    COLUMN_HEADER_HEIGHT: 48,
-    TABLE_HEADER_HEIGHT: 60,
-    TABLE_FOOTER_HEIGHT: 48,
-    ROW_HEIGHT: 36,
-    ROW_FONT_SIZE: 14,
-    PAGINATION_CONTROLS_HEIGHT: 24,
-    IMAGE_SIZE: 28,
-    LINK_MENU_HEIGHT: 32,
-    LINK_MENU_ICON_SIZE: IconSize$1.LARGE,
-    ROW_PADDING: 2
-  },
-  [CompactMode.DEFAULT]: {
-    COLUMN_HEADER_HEIGHT: 48,
-    TABLE_HEADER_HEIGHT: 60,
-    TABLE_FOOTER_HEIGHT: 48,
-    ROW_HEIGHT: 48,
-    ROW_FONT_SIZE: 14,
-    PAGINATION_CONTROLS_HEIGHT: 32,
-    IMAGE_SIZE: 32,
-    LINK_MENU_HEIGHT: 36,
-    LINK_MENU_ICON_SIZE: IconSize$1.XL,
-    ROW_PADDING: 5
-  },
-  [CompactMode.TALL]: {
-    COLUMN_HEADER_HEIGHT: 36,
-    TABLE_HEADER_HEIGHT: 60,
-    TABLE_FOOTER_HEIGHT: 60,
-    ROW_HEIGHT: 58,
-    ROW_FONT_SIZE: 14,
-    PAGINATION_CONTROLS_HEIGHT: 36,
-    IMAGE_SIZE: 36,
-    LINK_MENU_HEIGHT: 36,
-    LINK_MENU_ICON_SIZE: IconSize$1.XL,
-    ROW_PADDING: 10
-  }
-};
-const DEFAULT_TABLE_COLUMN_WIDTH = 150;
-const TABLE_COLUMN_MIN_WIDTH = 20;
-const PARSED_INPUT_TYPES = [
-  EditInputType.Number,
-  EditInputType.Checkbox
-];
-const TextBoxEditTypes = [
-  EditInputType.Text,
-  EditInputType.Number,
-  EditInputType.Email
-];
-const DEFAULT_CELL_TEXT_STYLE_VARIANT = "body2";
-const DEFAULT_CELL_CLASS_NAME = getTextCssClassFromVariant(
-  DEFAULT_CELL_TEXT_STYLE_VARIANT
-);
-const DEFAULT_HEADING_TEXT_STYLE_VARIANT = "heading3";
-const TABLE_COLUMN_HEADER_DEFAULT_TYPOGRAPHY = "heading6";
-var Condition0Type = /* @__PURE__ */ ((Condition0Type2) => {
-  Condition0Type2["all"] = "all";
-  Condition0Type2["isEmpty"] = "isEmpty";
-  Condition0Type2["isNotEmpty"] = "isNotEmpty";
-  Condition0Type2["isTrue"] = "isTrue";
-  Condition0Type2["isFalse"] = "isFalse";
-  return Condition0Type2;
-})(Condition0Type || {});
-var Condition1Type = /* @__PURE__ */ ((Condition1Type2) => {
-  Condition1Type2["textIs"] = "textIs";
-  Condition1Type2["textContains"] = "textContains";
-  Condition1Type2["textDoesNotContain"] = "textDoesNotContain";
-  Condition1Type2["textStartsWith"] = "textStartsWith";
-  Condition1Type2["textEndsWith"] = "textEndsWith";
-  Condition1Type2["isEqualTo"] = "isEqualTo";
-  Condition1Type2["isNotEqualTo"] = "isNotEqualTo";
-  Condition1Type2["isLessThan"] = "isLessThan";
-  Condition1Type2["isLessThanOrEqualTo"] = "isLessThanOrEqualTo";
-  Condition1Type2["isGreaterThan"] = "isGreaterThan";
-  Condition1Type2["isGreaterThanOrEqualTo"] = "isGreaterThanOrEqualTo";
-  Condition1Type2["dateIs"] = "dateIs";
-  Condition1Type2["dateIsBefore"] = "dateIsBefore";
-  Condition1Type2["dateIsAfter"] = "dateIsAfter";
-  return Condition1Type2;
-})(Condition1Type || {});
-var Condition2Type = /* @__PURE__ */ ((Condition2Type2) => {
-  Condition2Type2["isBetween"] = "isBetween";
-  Condition2Type2["dateIsBetween"] = "dateIsBetween";
-  return Condition2Type2;
-})(Condition2Type || {});
-const TABLE_MULTISELECT_COLID$1 = "SB_$$_MULTISELECT";
-const tagColorPalette = [
-  "#27BBFF33",
-  "#FF9F3533",
-  "#14CDB733",
-  "#7C4FF833",
-  "#FF62A433",
-  "#9D585833",
-  "#FF484833"
-];
 function useCachedValue(value, isEqualFn = lodashExports.isEqual) {
   const cached = useRef(value);
   if (cached.current !== value && !isEqualFn(cached.current, value)) {
@@ -136383,10 +137249,6 @@ const HeaderCellContentWrapper = qe$1.div`
   var _a2, _b2;
   return ((_a2 = props == null ? void 0 : props.columnProperties) == null ? void 0 : _a2.horizontalAlign) && JUSTIFY_CONTENT[(_b2 = props == null ? void 0 : props.columnProperties) == null ? void 0 : _b2.horizontalAlign];
 }};
-
-  span {
-    ${({ shouldCapitalize }) => shouldCapitalize && `text-transform: capitalize;`}
-  }
 `;
 const TableIconWrapper = qe$1.div`
   width: ${(props) => props.tableSizes.TABLE_FOOTER_HEIGHT}px;
@@ -136557,11 +137419,11 @@ const StyledEmptyCheckbox = qe$1(SvgEmptyCheckbox)`
   }
 `;
 const RadioButtonControlIcons = {
-  EMPTY: (_props) => null,
-  CHECK: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(StyledCheckOutlined, { ...props }),
-  CLOSE: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(StyledCloseOutlined, { ...props }),
-  MINUS: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(StyledMinusOutlined, { ...props }),
-  EMPTY_CHECKBOX: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  empty: (_props) => null,
+  check: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(StyledCheckOutlined, { ...props }),
+  close: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(StyledCloseOutlined, { ...props }),
+  minus: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(StyledMinusOutlined, { ...props }),
+  empty_checkbox: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     "span",
     {
       style: {
@@ -143581,14 +144443,14 @@ function getLoaderFn(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-BzKYsLDE.js"
+            "./allPathsLoader-D3ybY8Wk.js"
           )];
         case 2:
           return [2, _b2.sent().allPathsLoader];
         case 3:
           return [4, import(
             /* webpackChunkName: "blueprint-icons-split-paths-by-size-loader" */
-            "./splitPathsBySizeLoader-D1iVVUla.js"
+            "./splitPathsBySizeLoader-B-TUNLgR.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -151606,14 +152468,8 @@ class DatePickerComponent extends React__default.Component {
       const _date = moment(date4, format3);
       return _date.isValid() ? _date.toDate() : void 0;
     });
-    __publicField(this, "getNormalizedDateFormat", () => {
-      return normalizeDateFormat(this.props.dateFormat || ISO_DATE_FORMAT);
-    });
-    __publicField(this, "getNormalizedDisplayDateFormat", () => {
-      return this.props.displayDateFormat ? normalizeDateFormat(this.props.displayDateFormat) : void 0;
-    });
     __publicField(this, "shouldWrapTime", () => {
-      const dateFormat = this.getNormalizedDateFormat();
+      const dateFormat = this.normalizedDateFormat;
       const showTime = formatIncludesTime(dateFormat);
       const timePrecision = getTimePrecision(dateFormat);
       return showTime && this.props.twentyFourHourTime && timePrecision === TimePrecision.MINUTE;
@@ -151636,25 +152492,8 @@ class DatePickerComponent extends React__default.Component {
       }
       return today.toDate();
     });
-    __publicField(this, "getCurrentValue", () => {
-      if (this.props.selectedDate && typeof this.props.selectedDate === "string") {
-        const dateFormat = this.getNormalizedDateFormat();
-        const withoutTz = stripTimezoneFromString(
-          this.props.selectedDate,
-          dateFormat
-        );
-        const converted = convertDateStringTimezone(
-          withoutTz,
-          NO_TZ_FORMAT,
-          this.valueTimezone,
-          this.displayTimezone
-        );
-        return converted;
-      }
-      return null;
-    });
     __publicField(this, "getPopoverFooter", () => {
-      const dateFormat = this.getNormalizedDateFormat();
+      const dateFormat = this.normalizedDateFormat;
       const showTime = formatIncludesTime(dateFormat);
       const shouldWrapTime = this.shouldWrapTime();
       return /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -151668,7 +152507,7 @@ class DatePickerComponent extends React__default.Component {
               {
                 text: "Today",
                 onClick: () => {
-                  const dateFormat2 = this.getNormalizedDateFormat();
+                  const dateFormat2 = this.normalizedDateFormat;
                   const today = moment().tz(this.valueTimezone).format(dateFormat2);
                   this.props.onDateSelected(today);
                 },
@@ -151690,7 +152529,7 @@ class DatePickerComponent extends React__default.Component {
       );
     });
     __publicField(this, "formatDisplayDate", (date4) => {
-      const displayDateFormat = this.getNormalizedDisplayDateFormat() ?? this.getNormalizedDateFormat();
+      const displayDateFormat = this.normalizedDisplayDateFormat ?? this.normalizedDateFormat;
       const withoutTz = stripTimezoneFromDate(
         date4,
         displayDateFormat,
@@ -151699,7 +152538,7 @@ class DatePickerComponent extends React__default.Component {
       return withoutTz;
     });
     __publicField(this, "formatSelectedDate", (date4) => {
-      const dateFormat = this.getNormalizedDateFormat();
+      const dateFormat = this.normalizedDateFormat;
       const dateStr = stripTimezoneFromDate(date4, dateFormat, moment.tz.guess());
       const converted = convertDateStringTimezone(
         dateStr,
@@ -151710,7 +152549,7 @@ class DatePickerComponent extends React__default.Component {
       return converted;
     });
     __publicField(this, "parseSelectedDate", (dateStr) => {
-      const dateFormat = this.getNormalizedDateFormat();
+      const dateFormat = this.normalizedDateFormat;
       const converted = stripTimezoneFromString(dateStr, dateFormat);
       return new Date(converted);
     });
@@ -151718,8 +152557,8 @@ class DatePickerComponent extends React__default.Component {
     __publicField(this, "onInputChanged", (event) => {
       const displayFormattedDateStr = event.target.value;
       if (displayFormattedDateStr) {
-        const dateFormat = this.getNormalizedDateFormat();
-        const displayFormat = this.getNormalizedDisplayDateFormat() || dateFormat;
+        const dateFormat = this.normalizedDateFormat;
+        const displayFormat = this.normalizedDisplayDateFormat || dateFormat;
         if (!isValidDate(displayFormattedDateStr)) {
           this.props.onDateSelected(displayFormattedDateStr);
           return;
@@ -151739,7 +152578,7 @@ class DatePickerComponent extends React__default.Component {
      * @param selectedDayOnly date in the local timezone
      */
     __publicField(this, "onDayChanged", (selectedDayOnly) => {
-      const dateFormat = this.getNormalizedDateFormat();
+      const dateFormat = this.normalizedDateFormat;
       if (selectedDayOnly && (!this.props.selectedDate || !moment(this.props.selectedDate, dateFormat).isSame(
         selectedDayOnly,
         "days"
@@ -151784,25 +152623,48 @@ class DatePickerComponent extends React__default.Component {
     if (!this.props.selectedDate) return;
     if (prevProps.timezone !== this.props.timezone) {
       const localTimezone = moment.tz.guess();
-      const nextDate = moment.tz(this.props.selectedDate, prevProps.timezone ?? localTimezone).tz(this.props.timezone ?? localTimezone).format(this.getNormalizedDateFormat());
+      const nextDate = moment.tz(this.props.selectedDate, prevProps.timezone ?? localTimezone).tz(this.props.timezone ?? localTimezone).format(this.normalizedDateFormat);
       this.props.onDateSelected(nextDate);
     }
   }
+  get normalizedDateFormat() {
+    return normalizeDateFormat(this.props.dateFormat || ISO_DATE_FORMAT);
+  }
+  get normalizedDisplayDateFormat() {
+    return this.props.displayDateFormat ? normalizeDateFormat(this.props.displayDateFormat) : void 0;
+  }
   get valueTimezone() {
     return this.props.timezone || moment.tz.guess();
   }
   get displayTimezone() {
     return this.props.displayTimezone || moment.tz.guess();
   }
+  get currentValue() {
+    if (this.props.selectedDate && typeof this.props.selectedDate === "string") {
+      const dateFormat = this.normalizedDateFormat;
+      const withoutTz = stripTimezoneFromString(
+        this.props.selectedDate,
+        dateFormat
+      );
+      const converted = convertDateStringTimezone(
+        withoutTz,
+        NO_TZ_FORMAT,
+        this.valueTimezone,
+        this.displayTimezone
+      );
+      return converted;
+    }
+    return null;
+  }
   render() {
-    const dateFormat = this.getNormalizedDateFormat();
-    const displayFormat = this.getNormalizedDisplayDateFormat() || dateFormat;
+    const dateFormat = this.normalizedDateFormat;
+    const displayFormat = this.normalizedDisplayDateFormat || dateFormat;
     const anchor = this.props.selectedDate && moment(this.props.selectedDate, dateFormat).isValid() ? moment(this.props.selectedDate, dateFormat) : moment();
     const year = anchor.get("year");
     const minDate = this.props.minDate ? this.getValidDate(this.props.minDate, dateFormat) : anchor.clone().set({ month: 0, date: 1, year: year - 10 }).toDate();
     const maxDate = this.props.maxDate ? this.getValidDate(this.props.maxDate, dateFormat) : anchor.clone().set({ month: 11, date: 31, year: year + 10 }).toDate();
     const showTime = formatIncludesTime(dateFormat);
-    const currentValue = this.getCurrentValue();
+    const currentValue = this.currentValue;
     const timePrecision = getTimePrecision(dateFormat);
     const initialMonth = this.getInitialMonth(currentValue, minDate, maxDate);
     const styleVars = {
@@ -152041,8 +152903,10 @@ const InputCellWrapper = qe$1.div`
   return `${minHeight}px`;
 }};
       text-align: ${(props) => {
-  var _a2, _b2;
-  return ((_a2 = props == null ? void 0 : props.cellProperties) == null ? void 0 : _a2.horizontalAlign) && TEXT_ALIGN[(_b2 = props == null ? void 0 : props.cellProperties) == null ? void 0 : _b2.horizontalAlign];
+  var _a2;
+  if ((_a2 = props == null ? void 0 : props.cellProperties) == null ? void 0 : _a2.horizontalAlign) {
+    return TEXT_ALIGN[props.cellProperties.horizontalAlign];
+  }
 }};
       font-size: ${(props) => {
   return `${TABLE_SIZES[props.$compactMode].ROW_FONT_SIZE}px`;
@@ -153899,7 +154763,7 @@ const renderCell = ({
         );
       }
       if (typeof value === "boolean") {
-        const ButtonIcon = value ? RadioButtonControlIcons["CHECK"] : RadioButtonControlIcons[cellProps.booleanStyleFalse || BooleanStyleFalse.EMPTY];
+        const ButtonIcon = value ? RadioButtonControlIcons["check"] : RadioButtonControlIcons[cellProps.booleanStyleFalse || "empty"];
         return /* @__PURE__ */ jsxRuntimeExports.jsx(
           CellWrapper,
           {
@@ -153914,7 +154778,7 @@ const renderCell = ({
       }
       if (lodashExports.isString(value) && ["true", "false"].includes(value.toLocaleLowerCase())) {
         const booleanValue = value.toLocaleLowerCase() === "true";
-        const ButtonIcon = booleanValue ? RadioButtonControlIcons["CHECK"] : RadioButtonControlIcons[cellProps.booleanStyleFalse || BooleanStyleFalse.EMPTY];
+        const ButtonIcon = booleanValue ? RadioButtonControlIcons["check"] : RadioButtonControlIcons[cellProps.booleanStyleFalse || "empty"];
         return /* @__PURE__ */ jsxRuntimeExports.jsx(
           CellWrapper,
           {
@@ -154297,11 +155161,12 @@ function getDefaultColumnProperties(accessor, index2, widgetName, isDerived) {
     enableFilter: true,
     enableSort: true,
     isVisible: true,
-    isDerived: false,
+    isDerived: !!isDerived,
     label: accessor,
     computedValue: getDefaultComputedValue(
       accessor,
-      widgetName
+      widgetName,
+      isDerived ?? false
     ),
     linkUrl: "",
     linkLabel: "",
@@ -154318,6 +155183,9 @@ function getDefaultColumnProperties(accessor, index2, widgetName, isDerived) {
   };
 }
 function getDefaultComputedValue(accessor, widgetName, isDerived) {
+  if (isDerived) {
+    return "";
+  }
   return `{{${widgetName}.tableDataWithInserts.map((currentRow) => { return currentRow${getDottedPathTo(
     accessor
   )} })}}`;
@@ -154445,7 +155313,8 @@ function createTableColumns(props) {
     const defaultProperties = getDefaultColumnProperties(
       derivedColumnKey,
       index2,
-      props.widgetName
+      props.widgetName,
+      true
     );
     tableColumns[derivedColumnKey] = {
       ...defaultProperties,
@@ -154548,20 +155417,6 @@ function getSelectedRows(props) {
   const selectedRows = selectedRowIndices.map((ind) => filteredTableData[ind]).filter(Boolean);
   return selectedRows;
 }
-function getPageSize(props) {
-  var _a2, _b2, _c2, _d2;
-  if (props.configuredPageSize && typeof props.configuredPageSize === "number" && props.configuredPageSize > 0) {
-    return props.configuredPageSize;
-  }
-  const compactMode = getCompactMode(props.compactMode);
-  const componentHeight = ((_a2 = props == null ? void 0 : props.height) == null ? void 0 : _a2.mode) === "px" ? (_b2 = props == null ? void 0 : props.height) == null ? void 0 : _b2.value : (((_c2 = props == null ? void 0 : props.height) == null ? void 0 : _c2.value) ?? 0) * 12;
-  const tableSizes = TABLE_SIZES[compactMode];
-  const headerHeight = props.isSearchable || props.tableHeader || ((_d2 = props.hiddenColumns) == null ? void 0 : _d2.length) > 0 ? tableSizes.TABLE_HEADER_HEIGHT : 0;
-  const scrollbarSize = 8;
-  const mainHeight = (componentHeight ?? 100) - headerHeight - scrollbarSize - tableSizes.TABLE_FOOTER_HEIGHT - tableSizes.COLUMN_HEADER_HEIGHT;
-  const pageSize = Math.floor(mainHeight / (tableSizes.ROW_HEIGHT + 1));
-  return Math.max(pageSize, 1);
-}
 function getFilteredTableData(props) {
   var _a2;
   if (!props.tableData) {
@@ -154758,20 +155613,22 @@ function getFilteredTableData(props) {
       });
     }
   };
+  const searchText = props.searchText ?? "";
   const getSearchKey = () => {
-    if (props.searchText && (!props.onSearchTextChanged || props.enableClientSideSearch)) {
-      return props.searchText.toLowerCase();
+    if (searchText && props.enableClientSideSearch !== false) {
+      return searchText.toLowerCase();
     }
     return "";
   };
+  const filters = props.filters;
   const finalTableData = sortedTableData.filter((item) => {
     var _a3;
     const searchFound = getSearchKey() ? Object.values(item).join(", ").toLowerCase().includes(getSearchKey()) : true;
     if (!searchFound) return false;
     for (const [columnName, { byValue, condition }] of Object.entries(
-      ((_a3 = props.filters) == null ? void 0 : _a3.byColumn) ?? {}
+      (filters == null ? void 0 : filters.byColumn) ?? {}
     )) {
-      const column2 = props.columns[columnName];
+      const column2 = ((_a3 = props.columns) == null ? void 0 : _a3[columnName]) ?? {};
       const value = item[columnName];
       if (byValue) {
         const columnType = column2 && column2.columnType ? column2.columnType : "text";
@@ -154879,12 +155736,53 @@ function getFilteredTableData(props) {
 }
 const propertiesDefinition$9 = {
   general: Section.category(PropsPanelCategory.Content).children({
-    tableHeader: Prop.string().readAndWrite().default("").propertiesPanel({
+    header: Prop.string().readAndWrite().default("").propertiesPanel({
       label: "Header",
       placeholder: "Table name",
       helpText: "A header displayed at the top of the table"
     }),
-    tableData: Prop.array().readable().propertiesPanel({
+    tableData: Prop.array().onEdit(({ sourceId, updates, widgetMeta }) => {
+      try {
+        const [previousWidget, newWidget] = getPreviousAndCurrentWidgetProps(updates, widgetMeta);
+        if (lodashExports.isEqual(previousWidget == null ? void 0 : previousWidget.tableData, DEFAULT_TABLE_DATA)) {
+          let updatedTableData = newWidget == null ? void 0 : newWidget.tableData;
+          if (typeof updatedTableData === "string") {
+            updatedTableData = JSON.parse(updatedTableData);
+          }
+          if (!Array.isArray(updatedTableData) || typeof updatedTableData[0] !== "object") {
+            return {
+              [sourceId]: {
+                props: {
+                  columns: Property.Static({})
+                },
+                meta: {}
+              }
+            };
+          }
+          const colKeys = Object.keys(updatedTableData[0] ?? {});
+          if (!lodashExports.isEqual(colKeys, DEFAULT_TABLE_KEYS)) {
+            return {
+              [sourceId]: {
+                props: {
+                  columns: Property.Static(CLEARED_TABLE_COLUMNS)
+                },
+                meta: {}
+              }
+            };
+          }
+        }
+        return {};
+      } catch (_e2) {
+        return {
+          [sourceId]: {
+            props: {
+              columns: Property.Static(CLEARED_TABLE_COLUMNS)
+            },
+            meta: {}
+          }
+        };
+      }
+    }).readable().propertiesPanel({
       label: "Data",
       placeholder: '[{ "col1": "val1" }]',
       isJSConvertible: false,
@@ -154917,8 +155815,15 @@ const propertiesDefinition$9 = {
       helpText: "Enable per column filtering"
     }),
     defaultFilters: Prop.any().readAndWrite().propertiesPanel({
-      label: "Filters",
-      helpText: "Allows specifying the filters that will be used on page load"
+      controlType: "COMPUTED_CODE_EDITOR",
+      label: "Default filters",
+      visibility: "SHOW_NAME",
+      isJSConvertible: false,
+      isRemovable: true,
+      helpText: "Allows specifying the filters that will be used on page load",
+      isVisible: function() {
+        return this.isFilterable && this.pageType !== "server_side";
+      }
     }),
     // enableRowInsertion: Prop.boolean()
     //   .readAndWrite()
@@ -154946,37 +155851,46 @@ const propertiesDefinition$9 = {
       label: "CSV download",
       helpText: "Enable CSV download"
     }),
-    pageType: Prop.string().default(PaginationTypes.NONE).readAndWrite().propertiesPanel({
+    paginationType: Prop.string().default("none").readAndWrite().propertiesPanel({
       label: "Pagination type",
       controlType: "DROP_DOWN",
       helpText: "For server side pagination bind the Table.pageNo property in your API and call it onPageChange",
       options: [
-        { label: "None", value: PaginationTypes.NONE },
-        { label: "Client side", value: PaginationTypes.CLIENT_SIDE },
-        { label: "Server side", value: PaginationTypes.SERVER_SIDE }
+        { label: "None", value: "none" },
+        { label: "Client side", value: "client_side" },
+        { label: "Server side", value: "server_side" }
       ]
     }),
-    configuredPageSize: Prop.number().readAndWrite().propertiesPanel({
+    configuredPageSize: Prop.any().readAndWrite().propertiesPanel({
       label: "Page size",
       helpText: "Sets the number of items per page. If set to 'Auto', this value will be calculated based on the height of the table.",
       controlType: "DROP_DOWN",
       options: [
-        { label: "Auto", value: -1 },
+        {
+          label: "Auto",
+          value: "auto"
+        },
         { label: "5", value: 5 },
         { label: "10", value: 10 },
         { label: "20", value: 20 },
         { label: "50", value: 50 }
-      ]
+      ],
+      isVisible: function() {
+        return this.paginationType === "client_side";
+      }
     }),
     defaultSort: Prop.composite({
-      // TODO: default should be dynamic based on the columns
-      column: Prop.string().default("name").propertiesPanel({
+      column: Prop.string().propertiesPanel({
         label: "Column",
         controlType: "SELECT_TABLE_COLUMN"
       }),
       asc: Prop.boolean().default(true).propertiesPanel({
         label: "Order",
-        controlType: "RADIO_BUTTON_GROUP"
+        controlType: "RADIO_BUTTON_GROUP",
+        options: [
+          { label: "Ascending", value: true },
+          { label: "Descending", value: false }
+        ]
       })
     }).propertiesPanel({
       label: "Default sort",
@@ -154989,7 +155903,10 @@ const propertiesDefinition$9 = {
     }),
     defaultSearchText: Prop.string().readAndWrite().propertiesPanel({
       label: "Default search",
-      helpText: "Sets the default search text"
+      helpText: "Sets the default search text",
+      isVisible: function() {
+        return this.enableClientSideSearch !== false;
+      }
     }),
     searchPlaceholder: Prop.string().readAndWrite().propertiesPanel({
       label: "Search placeholder",
@@ -155017,17 +155934,13 @@ const propertiesDefinition$9 = {
       label: "Cell style",
       controlType: "TEXT_STYLE"
     }),
-    backgroundColor: Prop.string().propertiesPanel({
+    backgroundColor: colorProp({
       label: "Background color",
-      helpText: "Sets the background color of the table",
-      controlType: "COLOR_PICKER"
-      // themeValue: "{{ theme.colors.neutral }}",
+      helpText: "Sets the background color of the table"
     }),
-    selectedRowBackgroundColor: Prop.string().propertiesPanel({
+    selectedRowBackgroundColor: colorProp({
       label: "Selected row background color",
-      helpText: "Sets the background color of the selected row",
-      controlType: "COLOR_PICKER"
-      // themeValue: "{{ theme.colors.neutral50 }}",
+      helpText: "Sets the background color of the selected row"
     }),
     border: border({ helpText: "Sets the border of the table" }),
     borderRadius: borderRadius({
@@ -155079,11 +155992,9 @@ const propertiesDefinition$9 = {
       label: "Search",
       controlType: "TEXT_STYLE"
     }),
-    "searchProps.backgroundColor": Prop.string().propertiesPanel({
+    "searchProps.backgroundColor": colorProp({
       label: "Search background color",
-      helpText: "Sets the background color of the search",
-      controlType: "COLOR_PICKER"
-      // themeValue:"{{ theme.colors.neutral }}",
+      helpText: "Sets the background color of the search"
     }),
     "searchProps.border": border({
       label: "Search border",
@@ -155135,7 +156046,6 @@ const propertiesDefinition$9 = {
     selectedRow: Prop.any().readable().default(getSelectedRow),
     selectedRowSchema: Prop.any().readable().default(getSelectedRowSchema),
     selectedRows: Prop.any().readable().default(getSelectedRows),
-    pageSize: Prop.number().readable().default(getPageSize),
     filteredTableData: Prop.any().readable().default(function() {
       if (!this) return [];
       return getFilteredTableData(this)[0];
@@ -155150,15 +156060,23 @@ const propertiesDefinition$9 = {
     // editedRowIndices: Prop.any().readable().default(getEditedRowIndices),
   }),
   meta: Section.category(PropsPanelCategory.Meta).children({
-    selectedRowIndex: Prop.number().readable(),
+    selectedRowIndex: Prop.number().readable().default(function() {
+      return this.defaultSelectedRow;
+    }),
     selectedRowIndices: Prop.any().readable(),
-    pageNo: Prop.number().readable().default(() => 1),
-    sortedColumn: Prop.any().readable(),
-    searchText: Prop.string().readable(),
-    filters: Prop.any().readable(),
+    sortedColumn: Prop.any().readable().default(function() {
+      return this.defaultSort;
+    }),
+    searchText: Prop.string().readable().default(function() {
+      return this.defaultSearchText ?? "";
+    }),
+    filters: Prop.any().readable().default(function() {
+      return this.defaultFilters;
+    }),
     hiddenColumns: Prop.any().readable(),
     columnFreezes: Prop.any().readable(),
-    tagsColorAssignment: Prop.any().readable()
+    tagsColorAssignment: Prop.any().readable(),
+    pageNo: Prop.number().readable().default(() => 0)
     // editOverrides: Prop.any().readable(),
     // currentEditFocus: Prop.any().readable(),
     // currentEditDropdownSearchText: Prop.string().default("").readable(),
@@ -164627,11 +165545,11 @@ const TableDataDownload = ({
   columns,
   tableSizes,
   widgetName,
-  tableHeader,
+  header,
   tableCellTextStyle
 }) => {
   const [selected, setSelected] = React__default.useState(false);
-  const tableName = tableHeader ? tableHeader : widgetName;
+  const tableName = header ? header : widgetName;
   const fileName = tableName;
   const handleSelectMenu = useCallback(() => {
     setSelected(true);
@@ -164863,13 +165781,13 @@ const TablePagination = ({
   prevPageClick,
   pageCount,
   pageNo,
-  pageType,
+  paginationType,
   updatePageNo,
   tableSizes,
   theme
 }) => {
-  switch (pageType) {
-    case PaginationTypes.SERVER_SIDE:
+  switch (paginationType) {
+    case "server_side":
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
         TableServerPagination,
         {
@@ -164880,7 +165798,7 @@ const TablePagination = ({
           themeColors: theme.colors
         }
       );
-    case PaginationTypes.CLIENT_SIDE:
+    case "client_side":
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
         TableClientPagination,
         {
@@ -164964,11 +165882,11 @@ const TableFooter = ({
   prevPageClick,
   pageNo,
   pageCount,
-  pageType,
+  paginationType,
   tableColumns,
   tableData,
   filteredOrderMap,
-  tableHeader,
+  header,
   tableSizes,
   borderColor,
   updatePageNo,
@@ -165132,11 +166050,11 @@ const TableFooter = ({
           columns: tableColumns,
           widgetName,
           tableSizes,
-          tableHeader,
+          header,
           tableCellTextStyle
         }
       ),
-      pageType !== PaginationTypes.SERVER_SIDE && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      paginationType !== "server_side" && /* @__PURE__ */ jsxRuntimeExports.jsxs(
         RowWrapper,
         {
           className: `${CLASS_NAMES.BUILTIN_BODY} show-page-items`,
@@ -165158,7 +166076,7 @@ const TableFooter = ({
         prevPageClick,
         pageNo,
         pageCount,
-        pageType,
+        paginationType,
         currentPageIndex,
         tableSizes,
         theme
@@ -167233,8 +168151,9 @@ const DescendingIcon = qe$1(SvgSort)`
   }
 `;
 const TableHeaderCell = (props) => {
-  var _a2, _b2, _c2;
+  var _a2;
   const { column: column2, selectRows } = props;
+  const resizerProps = column2.getResizerProps();
   const resizingColumnId = useRef("");
   const handleSortColumn = () => {
     if (!props.isSortable || props.isResizingColumn) return;
@@ -167250,7 +168169,6 @@ const TableHeaderCell = (props) => {
     defaultTextStyleVariant: TABLE_COLUMN_HEADER_DEFAULT_TYPOGRAPHY,
     textStyle: props.columnHeaderProps
   });
-  const columnHeaderTextStyleHasTextTransform = ((_a2 = columnHeaderStyleProps == null ? void 0 : columnHeaderStyleProps.style) == null ? void 0 : _a2.textTransform) !== void 0 && ((_b2 = columnHeaderStyleProps == null ? void 0 : columnHeaderStyleProps.style) == null ? void 0 : _b2.textTransform) !== "none";
   const { setColumnFilter } = props;
   const setFilter = useCallback(
     (filter2) => {
@@ -167312,7 +168230,6 @@ const TableHeaderCell = (props) => {
       HeaderCellContentWrapper,
       {
         columnProperties: props.columnProperties,
-        shouldCapitalize: !columnHeaderTextStyleHasTextTransform && props.columnName === column2.id,
         style: columnHeaderStyleProps.style,
         className: `${getTextCssClassFromVariant(
           columnHeaderStyleProps.textStyleVariant
@@ -167338,23 +168255,23 @@ const TableHeaderCell = (props) => {
           e3.stopPropagation();
         },
         onDragOver: (e3) => {
-          var _a3, _b3;
+          var _a3, _b2;
           if (props.columnIndex !== props.mutableHeaderDragRef.current && props.mutableHeaderDragRef.current !== -1) {
             if (props.mutableHeaderDragRef.current > props.columnIndex) {
               (_a3 = parentRef.current) == null ? void 0 : _a3.classList.add("highlight-left");
             } else if (props.mutableHeaderDragRef.current < props.columnIndex) {
-              (_b3 = parentRef.current) == null ? void 0 : _b3.classList.add("highlight-right");
+              (_b2 = parentRef.current) == null ? void 0 : _b2.classList.add("highlight-right");
             }
           }
           e3.preventDefault();
         },
         onDragEnter: (e3) => {
-          var _a3, _b3;
+          var _a3, _b2;
           if (props.columnIndex !== props.mutableHeaderDragRef.current && props.mutableHeaderDragRef.current !== -1) {
             if (props.mutableHeaderDragRef.current > props.columnIndex) {
               (_a3 = parentRef.current) == null ? void 0 : _a3.classList.add("highlight-left");
             } else if (props.mutableHeaderDragRef.current < props.columnIndex) {
-              (_b3 = parentRef.current) == null ? void 0 : _b3.classList.add("highlight-right");
+              (_b2 = parentRef.current) == null ? void 0 : _b2.classList.add("highlight-right");
             }
           }
           e3.preventDefault();
@@ -167406,7 +168323,7 @@ const TableHeaderCell = (props) => {
         isFrozen: getIsColumnFrozen(
           props.column.id,
           props.columnFreezes,
-          (_c2 = props.columnProperties) == null ? void 0 : _c2.isFrozen
+          (_a2 = props.columnProperties) == null ? void 0 : _a2.isFrozen
         ),
         theme: props.theme,
         updateProperty: props.updateProperty
@@ -167415,11 +168332,21 @@ const TableHeaderCell = (props) => {
     props.showResizer && /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
-        ...column2.getResizerProps(),
+        ...resizerProps,
         className: `resizer ${column2.isResizing ? "isResizing" : ""}`,
         onClick: (e3) => {
           e3.preventDefault();
           e3.stopPropagation();
+        },
+        onMouseDown: (e3) => {
+          resizerProps.onMouseDown(e3);
+          e3.stopPropagation();
+          e3.preventDefault();
+        },
+        onTouchStart: (e3) => {
+          resizerProps.onTouchStart(e3);
+          e3.stopPropagation();
+          e3.preventDefault();
         }
       }
     )
@@ -168020,10 +168947,10 @@ const Table = (props) => {
   const selectedRowIndex = props.selectedRowIndex;
   const selectedRowIndices = props.selectedRowIndices || [];
   const canDelete = props.isDeletionEnabled && (selectedRowIndices.length > 0 || selectedRowIndex != null && selectedRowIndex >= 0);
-  const hasFooter = props.pageType !== PaginationTypes.NONE || props.isDownloadable || props.numEdits != null && props.numEdits > 0 || props.isInsertionEnabled || canDelete;
-  const hasHeader = props.isSearchable || !lodashExports.isEmpty(props.tableHeader) || props.hiddenColumns && ((_a2 = props.hiddenColumns) == null ? void 0 : _a2.length) > 0;
-  const pageSize = props.pageType === PaginationTypes.NONE ? props.tableData.length : props.pageSize;
-  const pageCount = Math.ceil(props.tableData.length / pageSize);
+  const hasFooter = props.paginationType !== "none" || props.isDownloadable || props.numEdits != null && props.numEdits > 0 || props.isInsertionEnabled || canDelete;
+  const hasHeader = props.isSearchable || !lodashExports.isEmpty(props.header) || props.hiddenColumns && ((_a2 = props.hiddenColumns) == null ? void 0 : _a2.length) > 0;
+  const pageSize = props.paginationType === "none" ? props.tableData.length : props.pageSize;
+  const pageCount = Math.ceil(props.tableData.length / pageSize) || 1;
   const currentPageIndex = props.pageNo < pageCount ? props.pageNo : 0;
   const {
     getTableProps,
@@ -168053,7 +168980,7 @@ const Table = (props) => {
   );
   let startIndex = currentPageIndex * pageSize;
   let endIndex = startIndex + pageSize;
-  if (props.pageType === PaginationTypes.SERVER_SIDE) {
+  if (props.paginationType === "server_side") {
     startIndex = 0;
     endIndex = props.tableData.length;
   }
@@ -168604,7 +169531,7 @@ const Table = (props) => {
       showFrozenColShadow,
       tabIndex: 0,
       className: CLASS_NAMES.DEFAULT_CONTAINER,
-      showColumnBorders: props.showColumnBorders && (props.pageType !== PaginationTypes.NONE || subPage.length > 0),
+      showColumnBorders: props.showColumnBorders && (props.paginationType !== "none" || subPage.length > 0),
       colors: theme.colors,
       onKeyDown: handleKeyDown,
       "data-selecting-cells": tableManager.focusedCellIndices.length > 0,
@@ -168619,7 +169546,7 @@ const Table = (props) => {
             searchKey: props.searchKey,
             tableSizes,
             compactMode: getCompactMode(props.compactMode),
-            title: props.tableHeader,
+            title: props.header,
             columns: props.columns,
             hiddenColumns: props.hiddenColumns,
             searchPlaceholder: props.searchPlaceholder,
@@ -168692,7 +169619,7 @@ const Table = (props) => {
                               columnProperties: column2.columnProperties,
                               rawTableData: props.rawTableData,
                               transformedTableData: props.tableData,
-                              isFilterable: props.isFilterable && props.pageType !== PaginationTypes.SERVER_SIDE,
+                              isFilterable: props.isFilterable && props.paginationType !== "server_side",
                               filter: (_b3 = (_a3 = props.filters) == null ? void 0 : _a3.byColumn) == null ? void 0 : _b3[column2.id],
                               setColumnFilter: props.setColumnFilter,
                               isHidden: column2.isHidden,
@@ -168768,11 +169695,11 @@ const Table = (props) => {
             prevPageClick: props.prevPageClick,
             pageNo: props.pageNo,
             pageCount,
-            pageType: props.pageType,
+            paginationType: props.paginationType,
             tableColumns: props.columns,
             tableData: props.tableData,
             filteredOrderMap: props.filteredOrderMap,
-            tableHeader: props.tableHeader,
+            header: props.header,
             tableSizes,
             updatePageNo: props.updatePageNo,
             widgetName: props.widgetName,
@@ -169397,14 +170324,14 @@ const _TableWidget = class _TableWidget extends React__default.Component {
     __publicField(this, "getTopVisibleIndex", () => {
       const page = this.props.pageNo || 1;
       const pageSize = this.props.pageSize || 1;
-      const isPaginated = this.props.pageType !== PaginationTypes.NONE;
+      const isPaginated = this.props.paginationType !== "none";
       return isPaginated ? (page - 1) * pageSize : 0;
     });
     __publicField(this, "getBottomVisibleIndex", () => {
       const allEdits = this.props.allEdits ?? [];
       const page = this.props.pageNo || 1;
       const pageSize = this.props.pageSize || 1;
-      const isPaginated = this.props.pageType !== PaginationTypes.NONE;
+      const isPaginated = this.props.paginationType !== "none";
       return isPaginated ? Math.min(allEdits.length - 1, page * pageSize - 1) : allEdits.length - 1;
     });
     __publicField(this, "handlePaste", (event) => {
@@ -169464,7 +170391,7 @@ const _TableWidget = class _TableWidget extends React__default.Component {
       );
       const data2 = [];
       let largestRow = 0;
-      const isMultiPage = this.props.pageType === PaginationTypes.SERVER_SIDE || this.props.pageType === PaginationTypes.CLIENT_SIDE;
+      const isMultiPage = this.props.paginationType === "server_side" || this.props.paginationType === "client_side";
       const page = this.props.pageNo || 1;
       const pageSize = this.props.pageSize || 1;
       for (const cell of this.currentCellFocus ?? []) {
@@ -169582,6 +170509,7 @@ const _TableWidget = class _TableWidget extends React__default.Component {
       }
     });
     __publicField(this, "handleEditStart", (rowIndex, columnId, startingValue) => {
+      this.props.disableDrag(true);
       this.props.disableNudge(true);
       this.props.setCurrentEditFocus({ row: rowIndex, columnId }, startingValue);
     });
@@ -169898,7 +170826,7 @@ const _TableWidget = class _TableWidget extends React__default.Component {
       }
       if (relativePosition === tableData.length) {
         setTimeout(() => {
-          if (this.props.pageType === PaginationTypes.NONE) {
+          if (this.props.paginationType === "none") {
             const tableScroller = this.getTableScroller();
             tableScroller == null ? void 0 : tableScroller.scrollTo({
               top: (tableScroller == null ? void 0 : tableScroller.scrollHeight) + 40,
@@ -170373,7 +171301,7 @@ const _TableWidget = class _TableWidget extends React__default.Component {
         columnSizeMap: this.props.columnSizeMap,
         pageNo,
         pageSize: Math.max(1, pageSize),
-        pageType: this.props.pageType || PaginationTypes.CLIENT_SIDE,
+        paginationType: this.props.paginationType || "none",
         selectedRowIndex: this.props.multiRowSelection ? -1 : this.props.selectedRowIndex ?? -1,
         multiRowSelection: this.props.multiRowSelection,
         selectedRowIndices: this.getComputedSelectedRowIndices(),
@@ -170385,19 +171313,18 @@ const _TableWidget = class _TableWidget extends React__default.Component {
         handleResizeColumn: this.handleResizeColumn,
         updatePageNo: this.updatePageNumber,
         handleReorderColumn: this.handleReorderColumn,
-        disableDrag: () => {
-        },
+        disableDrag: this.props.disableDrag,
         searchTableData: this.handleSearchTable,
         filters: this.props.filters,
         setColumnFilter: this.handleSetColumnFilter,
         compactMode: getCompactMode(this.props.compactMode),
         showColumnBorders: this.props.showColumnBorders,
         sortTableColumn: this.handleColumnSorting,
-        isSortable: this.props.pageType !== PaginationTypes.SERVER_SIDE,
+        isSortable: this.props.paginationType !== "server_side",
         isSearchable: this.props.isSearchable,
         isDownloadable: this.props.isDownloadable,
         isFilterable: this.props.isFilterable,
-        tableHeader: this.props.tableHeader,
+        header: this.props.header,
         hiddenColumns: this.props.hiddenColumns ?? [],
         columnFreezes: this.props.columnFreezes ?? {},
         numEdits,
@@ -170513,6 +171440,7 @@ const SbTable = registerSbComponent(
     propertiesDefinition: propertiesDefinition$9
   },
   (props) => {
+    var _a2;
     const { update } = useActions();
     const { features } = useEditor();
     const { theme } = useTheme();
@@ -170549,7 +171477,8 @@ const SbTable = registerSbComponent(
     );
     const setPageNo = useCallback(
       (value, rowContext, triggerEventHandlers = false) => {
-        update((e3) => e3.pageNo = value);
+        const newPageNo = Math.max(value - 1, 0);
+        update((e3) => e3.pageNo = newPageNo);
         if (triggerEventHandlers) {
           onPageChange == null ? void 0 : onPageChange(rowContext);
         }
@@ -170665,9 +171594,9 @@ const SbTable = registerSbComponent(
               return [
                 key22,
                 async (args) => {
-                  var _a2;
+                  var _a3;
                   await (value == null ? void 0 : value(args.context));
-                  (_a2 = args.onComplete) == null ? void 0 : _a2.call(args);
+                  (_a3 = args.onComplete) == null ? void 0 : _a3.call(args);
                 }
               ];
             }
@@ -170685,27 +171614,59 @@ const SbTable = registerSbComponent(
       },
       [features.nudging]
     );
+    const [pageSize, setPageSize] = useState(props.configuredPageSize);
+    useEffect(() => {
+      setPageSize(props.configuredPageSize);
+    }, [props.configuredPageSize]);
+    const autoPageSize = useMemo$2(() => {
+      var _a3, _b2;
+      if (typeof pageSize === "number" && pageSize > 0) return pageSize;
+      if (((_a3 = props.height) == null ? void 0 : _a3.mode) === "px" && typeof props.height.value === "number") {
+        const compactMode = getCompactMode(props.compactMode);
+        const tableSizes = TABLE_SIZES[compactMode];
+        const componentHeight = props.height.value;
+        const headerHeight = props.isSearchable || props.tableHeader || ((_b2 = props.hiddenColumns) == null ? void 0 : _b2.length) > 0 ? tableSizes.TABLE_HEADER_HEIGHT : 0;
+        const scrollbarSize = 8;
+        const mainHeight = componentHeight - headerHeight - scrollbarSize - tableSizes.TABLE_FOOTER_HEIGHT - tableSizes.COLUMN_HEADER_HEIGHT;
+        return Math.floor(mainHeight / (tableSizes.ROW_HEIGHT + 1));
+      }
+      return 10;
+    }, [
+      pageSize,
+      props.height,
+      props.compactMode,
+      (_a2 = props.hiddenColumns) == null ? void 0 : _a2.length,
+      props.isSearchable,
+      props.tableHeader
+    ]);
+    const disableDrag = useCallback(
+      (disable) => {
+        features.dragAndDrop.set(!disable);
+      },
+      [features.dragAndDrop]
+    );
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ...passthroughProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       TableWidget,
       {
         ...props,
+        pageSize: autoPageSize,
         enableRowInsertion: false,
         enableRowDeletion: false,
-        defaultSearchText: props.defaultSearchText ?? "",
         searchPlaceholder: props.searchPlaceholder ?? "",
         searchText: props.searchText ?? "",
-        pageType: props.pageType,
+        paginationType: props.paginationType,
         columns: transformedColumns,
-        defaultFilters: props.defaultFilters ?? EMPTY_OBJ,
-        tableHeader: props.tableHeader ?? "",
+        filters: props.filters ?? EMPTY_OBJ,
+        header: props.header ?? "",
         tableData: props.tableData ?? EMPTY_ARRAY,
         currentEditDropdownSearchText: props.currentEditDropdownSearchText,
         selectedRowIndices: props.selectedRowIndices ?? EMPTY_ARRAY,
         showColumnBorders: props.showColumnBorders ?? false,
         compactMode: getCompactMode(props.compactMode),
-        border: props.border ?? theme.defaultBorder,
+        border: props.border ?? createPerSideBorder(theme.defaultBorder),
         borderRadius: props.borderRadius ?? theme.defaultBorder.borderRadius,
         disableNudge,
+        disableDrag,
         setSelectedRowData,
         setPageNo,
         setColumnOrder,
@@ -173149,6 +174110,10 @@ const StyledSingleDropDown = qe$1(SingleDropDown)`
     display: -webkit-box;
     -webkit-line-clamp: 1;
     -webkit-box-orient: vertical;
+
+    &:disabled {
+      cursor: not-allowed;
+    }
   }
 `;
 const StyledCrossIcon = qe$1(SvgCrossXs)`
@@ -173630,7 +174595,8 @@ class DropDownComponent extends React__default.PureComponent {
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(DynamicSVG, { iconName: this.props.icon, size: this.props.iconSize })
       }
     ) : null;
-    const singleSelectDropdownIconElement = selectedIndex > -1 && ((_c2 = this.props.options[selectedIndex]) == null ? void 0 : _c2.icon) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+    const selectedItemHasIcon = !!(selectedIndex > -1 && ((_c2 = this.props.options[selectedIndex]) == null ? void 0 : _c2.icon));
+    const singleSelectDropdownIconElement = selectedItemHasIcon ? /* @__PURE__ */ jsxRuntimeExports.jsx(
       StyledIconSpan,
       {
         className: this.getIconClassNames(
@@ -173639,7 +174605,13 @@ class DropDownComponent extends React__default.PureComponent {
         style: {
           left: ((_e2 = (_d2 = this.props.inputPadding) == null ? void 0 : _d2.left) == null ? void 0 : _e2.value) ?? 0
         },
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(DynamicSVG, { iconName: this.props.options[selectedIndex].icon })
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          DynamicSVG,
+          {
+            iconName: this.props.options[selectedIndex].icon,
+            size: this.props.iconSize
+          }
+        )
       }
     ) : defaultIconElement;
     const tagOptionIconElement = (tagIndex) => {
@@ -173650,7 +174622,7 @@ class DropDownComponent extends React__default.PureComponent {
       return null;
     };
     const paddingVarDeclarations = createCssVariablesForPadding(
-      !!this.props.icon,
+      !!this.props.icon || selectedItemHasIcon,
       this.props.inputPadding,
       this.props.iconSize
     );
@@ -173769,6 +174741,7 @@ class DropDownComponent extends React__default.PureComponent {
                         /* @__PURE__ */ jsxRuntimeExports.jsx(
                           MultiDropDown,
                           {
+                            disabled: this.props.disabled,
                             overflowTags: this.props.overflowTags,
                             items: this.props.options,
                             labelHeight: this.props.vertical ? 26 : 0,
@@ -173941,22 +174914,7 @@ const propertiesDefinition$8 = {
     })
   }),
   appearance: Section.category(PropsPanelCategory.Appearance).children({
-    labelPosition: Prop.string().readAndWrite().default("top").propertiesPanel({
-      label: "Label position",
-      controlType: "RADIO_BUTTON_GROUP",
-      options: [
-        {
-          icon: "ICON_LEFT_ALIGN",
-          value: "left",
-          label: "Beside"
-        },
-        {
-          icon: "VERTICAL_TOP",
-          value: "top",
-          label: "Above"
-        }
-      ]
-    }),
+    labelPosition: labelPosition(),
     labelStyle: labelTextStyle(),
     icon: Prop.string().propertiesPanel({
       label: "Icon",
@@ -173978,13 +174936,16 @@ const propertiesDefinition$8 = {
   }),
   layout: Section.category(PropsPanelCategory.Layout).add(padding({ themeValue: DROPDOWN_PADDING, default: DROPDOWN_PADDING })).add(size$2()).add(margin()).add(visible()),
   interaction: Section.category(PropsPanelCategory.Interaction).children({
-    isMultiple: Prop.boolean().readAndWrite().default(false).propertiesPanel({
+    multiselect: Prop.boolean().readAndWrite().default(false).propertiesPanel({
       label: "Multi-select",
       helpText: "Allows users to select either a single option or multiple options"
     }),
     allowSelectAll: Prop.boolean().readAndWrite().default(false).propertiesPanel({
       label: "Select/Deselect all",
-      helpText: "Enable a button to select/deselect all options"
+      helpText: "Enable a button to select/deselect all options",
+      isVisible: function() {
+        return this.multiselect;
+      }
     }),
     allowClearing: Prop.boolean().readAndWrite().default(false).propertiesPanel({
       label: "Clearable",
@@ -174029,7 +174990,7 @@ const propertiesDefinition$8 = {
   }),
   derived: Section.category(PropsPanelCategory.Derived).children({
     value: Prop.any().readable().default(function() {
-      return this.isMultiple ? this.selectedOptionArr : this.selectedOptionValue;
+      return this.multiselect ? this.selectedOptionArr : this.selectedOptionValue;
     }),
     defaultTransformation: Prop.any().readable().default(function() {
       if (!Array.isArray(this.options)) return;
@@ -174085,9 +175046,9 @@ const propertiesDefinition$8 = {
     validationErrors: Prop.any().readable().default(function() {
       const errors2 = {};
       if (this.isRequired) {
-        if (this.isMultiple && this.selectedIndexArr && this.selectedIndexArr.length === 0) {
+        if (this.multiselect && this.selectedIndexArr && this.selectedIndexArr.length === 0) {
           errors2.isRequired = "Required";
-        } else if (!this.isMultiple && !this.selectedOption) {
+        } else if (!this.multiselect && !this.selectedOption) {
           errors2.isRequired = "Required";
         }
       }
@@ -174098,7 +175059,7 @@ const propertiesDefinition$8 = {
     }),
     selectedOptionValue: Prop.any().readable().default(function() {
       var _a2;
-      if (this.isMultiple) return;
+      if (this.multiselect) return;
       const normalizedValue = normalizeFunction(
         this.metaSelectedOptionValue,
         (_a2 = this.transformation) == null ? void 0 : _a2.value
@@ -174113,7 +175074,7 @@ const propertiesDefinition$8 = {
       }
     }),
     selectedOptionValues: Prop.any().readable().default(function() {
-      if (!this.isMultiple) return;
+      if (!this.multiselect) return;
       const normalize2 = (val) => {
         var _a2;
         return normalizeFunction(val, (_a2 = this.transformation) == null ? void 0 : _a2.value);
@@ -174134,7 +175095,7 @@ const propertiesDefinition$8 = {
     }),
     selectedOption: Prop.any().readable().default(function() {
       var _a2;
-      if (this.isMultiple) return;
+      if (this.multiselect) return;
       const normalizedValue = normalizeFunction(
         this.metaSelectedOptionValue,
         (_a2 = this.transformation) == null ? void 0 : _a2.value
@@ -174144,7 +175105,7 @@ const propertiesDefinition$8 = {
       );
     }),
     selectedOptionArr: Prop.any().readable().default(function() {
-      if (!this.isMultiple) return;
+      if (!this.multiselect) return;
       const normalize2 = (val) => {
         var _a2;
         return normalizeFunction(val, (_a2 = this.transformation) == null ? void 0 : _a2.value);
@@ -174160,7 +175121,7 @@ const propertiesDefinition$8 = {
     }),
     selectedIndex: Prop.number().readable().default(function() {
       var _a2;
-      if (this.isMultiple) return;
+      if (this.multiselect) return;
       const normalizedValue = normalizeFunction(
         this.metaSelectedOptionValue,
         (_a2 = this.transformation) == null ? void 0 : _a2.value
@@ -174270,20 +175231,20 @@ const SbDropdown = registerSbComponent(
       },
       [props.isTouched, update]
     );
-    const { isMultiple: isMultiple2, onOptionChange: propOnOptionChange } = props;
+    const { multiselect, onOptionChange: propOnOptionChange } = props;
     const onOptionSelected = useCallback(
       (selectedOption) => {
         if (selectedOption === null) {
           if (props.selectedOption) {
             update((e3) => e3.metaSelectedOptionValue = -1);
-            if (!isMultiple2) {
+            if (!multiselect) {
               onClear();
             }
           }
           return;
         }
         let isChanged = true;
-        if (!isMultiple2) {
+        if (!multiselect) {
           if (props.selectedOption) {
             isChanged = !lodashExports.isEqual(
               normalize2(props.selectedOption.value),
@@ -174315,7 +175276,7 @@ const SbDropdown = registerSbComponent(
         }
       },
       [
-        isMultiple2,
+        multiselect,
         props.isTouched,
         props.selectedOption,
         propOnOptionChange,
@@ -174424,7 +175385,7 @@ const SbDropdown = registerSbComponent(
       onFocusChange: handleFocusChange,
       onSearchTextChange: onDebouncedSearchTextChange
     };
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownContainer, { ...passthroughProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownStyleOverrides, { vertical: props.labelPosition === "top", children: props.isMultiple ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownContainer, { ...passthroughProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownStyleOverrides, { vertical: props.labelPosition === "top", children: props.multiselect ? /* @__PURE__ */ jsxRuntimeExports.jsx(
       DropDownComponent,
       {
         ...commonProps,
@@ -174729,17 +175690,6 @@ const SbCheckbox = registerSbComponent(
     ) });
   }
 );
-const getPreviousAndCurrentWidgetProps = (updates, widgetMeta) => {
-  const previousProps = widgetMeta.props;
-  const newProps = Object.entries(updates).reduce(
-    (acc, [key2, value]) => {
-      acc[key2] = value.value;
-      return acc;
-    },
-    { ...previousProps }
-  );
-  return [previousProps, newProps];
-};
 const adjustDateFormatSideEffect = (params) => {
   const widgetMeta = params.widgetMeta;
   const widgetState = params.widgetState;
@@ -174824,13 +175774,20 @@ const propertiesDefinition$6 = {
       visibility: "SHOW_NAME"
     }),
     defaultDate: Prop.string().propertiesPanel({
-      label: "Default date",
+      controlType: "DATE_PICKER",
+      defaultOnAdd: function() {
+        if (this.manageTimezone) {
+          return moment().tz(this.valueTimezone || moment.tz.guess()).format(this.dateFormat);
+        }
+        return moment().format(this.dateFormat);
+      },
       helpText: "Sets the default date of the component. The date is updated if the default date changes",
+      isRemovable: true,
+      label: "Default date",
       placeholder: "Enter default date",
-      controlType: "DATE_PICKER",
-      isRemovable: true
+      visibility: "SHOW_NAME"
     }).onEdit(adjustDateFormatSideEffect),
-    dateFormat: Prop.string().readAndWrite().default("YYYY-MM-DDTHH:mm:ss.sssZ").propertiesPanel({
+    dateFormat: Prop.string().readAndWrite().default(ISO_DATE_FORMAT).propertiesPanel({
       label: "Value format",
       helpText: "Sets the format of the selected date",
       controlType: "DROP_DOWN",
@@ -174880,22 +175837,7 @@ const propertiesDefinition$6 = {
   }),
   layout: basicLayout(),
   appearance: Section.category(PropsPanelCategory.Appearance).children({
-    labelPosition: Prop.string().readAndWrite().default("top").propertiesPanel({
-      label: "Label position",
-      controlType: "RADIO_BUTTON_GROUP",
-      options: [
-        {
-          icon: "ICON_LEFT_ALIGN",
-          value: "left",
-          label: "Beside"
-        },
-        {
-          icon: "VERTICAL_TOP",
-          value: "top",
-          label: "Above"
-        }
-      ]
-    }),
+    labelPosition: labelPosition(),
     labelStyle: labelTextStyle(),
     // TODO(code-mode): Add color pickers, border controls, etc.
     icon: Prop.string().readAndWrite().default("calendar_today").propertiesPanel({
@@ -174958,16 +175900,16 @@ const propertiesDefinition$6 = {
       if (this.isRequired && !this.selectedDate) {
         errors2.isRequired = "Required";
       }
-      if (this.selectedDate && this.dateFormat && !hooks(this.selectedDate, this.dateFormat, true).isValid()) {
+      if (this.selectedDate && this.dateFormat && !moment(this.selectedDate, this.dateFormat, true).isValid()) {
         errors2.dateInvalid = "Invalid date";
       }
-      if (this.minDate && this.selectedDate && hooks(this.selectedDate, this.dateFormat).isBefore(
-        hooks(this.minDate, this.dateFormat)
+      if (this.minDate && this.selectedDate && moment(this.selectedDate, this.dateFormat).isBefore(
+        moment(this.minDate, this.dateFormat)
       )) {
         errors2.minDate = "Date must be greater than or equal to " + this.minDate;
       }
-      if (this.maxDate && this.selectedDate && hooks(this.selectedDate, this.dateFormat).isAfter(
-        hooks(this.maxDate, this.dateFormat)
+      if (this.maxDate && this.selectedDate && moment(this.selectedDate, this.dateFormat).isAfter(
+        moment(this.maxDate, this.dateFormat)
       )) {
         errors2.maxDate = "Date must be less than or equal to " + this.maxDate;
       }
@@ -174980,12 +175922,12 @@ const propertiesDefinition$6 = {
       return Object.keys(this.validationErrors ?? {}).length === 0;
     }),
     outputDateLocal: Prop.string().readable().default(function() {
-      return hooks(this.selectedDate, this.dateFormat).format(
+      return moment(this.selectedDate, this.dateFormat).format(
         "YYYY-MM-DDTHH:mm:ss.SSSZ"
       );
     }),
     outputDateUtc: Prop.string().readable().default(function() {
-      return hooks(this.selectedDate, this.dateFormat).toISOString();
+      return moment(this.selectedDate, this.dateFormat).toISOString();
     }),
     showError: Prop.boolean().readable().default(function() {
       const hasValue2 = !!this.value;
@@ -175135,7 +176077,7 @@ const propertiesDefinition$5 = {
     })
   }),
   derived: Section.category(PropsPanelCategory.Derived).children({
-    value: Prop.boolean().readable().default(function() {
+    isToggledOn: Prop.boolean().readable().default(function() {
       return this.isChecked;
     }),
     validationErrors: Prop.any().readable().default(function() {
@@ -175181,6 +176123,7 @@ const SwitchComponentGroup = styleAsClass`
   flex-direction: column;
   gap: 2px;
   justify-content: space-between;
+  max-width: 100%;
 `;
 const SwitchContainerClassName = styleAsClass`
   display: flex;
@@ -175371,11 +176314,9 @@ const propertiesDefinition$4 = {
     })
   }).add(margin()).add(visible()),
   appearance: Section.category(PropsPanelCategory.Appearance).children({
-    color: Prop.string().readAndWrite().propertiesPanel({
+    color: colorProp({
       label: "Color",
-      controlType: "COLOR_PICKER",
       helpText: "Changes the color of the icon"
-      // themeValue:"{{ theme.colors.neutral700 }}",
     }),
     animateLoading: Prop.boolean().readAndWrite().default(true).propertiesPanel({
       label: "Loading animation",
@@ -175592,9 +176533,8 @@ const propertiesDefinition$3 = {
     })
   }),
   appearance: Section.category(PropsPanelCategory.Appearance).children({
-    backgroundColor: Prop.string().readAndWrite().propertiesPanel({
+    backgroundColor: colorProp({
       label: "Background",
-      controlType: "COLOR_PICKER",
       helpText: "Changes the color of the background"
     }),
     border: border(),
@@ -176766,6 +177706,11 @@ const EmbedWrapper = (props) => {
       "sb-create-component",
       createComponentListener
     );
+    const globalSyncListener = (event) => {
+      const { global: global2 } = event.data.payload;
+      updateGlobalScope(global2);
+    };
+    iframeMessageHandler.addEventListener("sb-global-sync", globalSyncListener);
     return () => {
       iframeMessageHandler.removeEventListener(
         "sb-bootstrap-response",
@@ -176787,6 +177732,10 @@ const EmbedWrapper = (props) => {
         "sb-create-component",
         createComponentListener
       );
+      iframeMessageHandler.removeEventListener(
+        "sb-global-sync",
+        globalSyncListener
+      );
     };
   }, []);
   useEffect(() => {
@@ -178277,7 +179226,7 @@ const generateTextStyles = (textStyles, builtinTypographies, fallbackFont) => {
 
     .${CLASS_NAMES.INPUT} {
       input::placeholder,
-      textarea::placeholder {
+      .${INPUT$1}::placeholder, textarea::placeholder {
         ${styleFromTextBlockWithColors(textStyles.inputPlaceholder)}
       }
     }
@@ -178405,7 +179354,7 @@ function applyThemeToIframe(generatedTheme) {
 const originalLog = console.log;
 console.log = (...args) => {
   const processedArgs = args.map((arg) => {
-    if (arg && typeof arg === "object" && getBindingIdentifier(arg)) {
+    if (arg && typeof arg === "object" && (getBindingIdentifier(arg) || getBindingIdentifier(arg.bind ?? {}))) {
       return JSON.parse(JSON.stringify(arg));
     }
     return arg;
@@ -190031,4 +190980,4 @@ export {
   copyToClipboard as y,
   navigateTo as z
 };
-//# sourceMappingURL=index-U8MX-8Hu.js.map
+//# sourceMappingURL=index-DWMz_Ohy.js.map