@superblocksteam/library 2.0.6-next.29 → 2.0.6-next.3

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

@@ -6005,7 +6005,7 @@ const Property = {
   Expression: (value) => PropertyInfo(value, "EXPRESSION"),
   Event: (value) => PropertyInfo(value, "EVENT"),
   Dimension: (value) => PropertyInfo(value, "DIMENSION"),
-  Computed: (value, args) => PropertyInfo(value, "COMPUTED", Array.isArray(args) && args.length > 0 || typeof args === "string" ? { args } : {}),
+  Computed: (value, args) => PropertyInfo(value, "COMPUTED", Array.isArray(args) && args.length > 0 ? { args } : {}),
   Any: (value, type5 = "STATIC") => PropertyInfo(value, type5)
 };
 function isPropertyInfo(value) {
@@ -78418,7 +78418,7 @@ const ShowAlertTrigger = {
 const ResetStateVarTrigger = {
   type: TriggerStepType.RESET_STATE_VAR,
   async execute(context2, step) {
-    if (step.variable === void 0) {
+    if (step.state === void 0) {
       return;
     }
     context2.rootStore.entityManager.runCode({
@@ -78426,22 +78426,22 @@ const ResetStateVarTrigger = {
       name: context2.name,
       func: () => {
         var _a2;
-        return (_a2 = step.variable) == null ? void 0 : _a2.set(step.variable.defaultValue);
+        return (_a2 = step.state) == null ? void 0 : _a2.set(step.state.defaultValue);
       },
       args: []
     });
   },
-  create(variable) {
+  create(stateVar) {
     return {
       type: TriggerStepType.RESET_STATE_VAR,
-      variable
+      state: stateVar
     };
   }
 };
 const SetStateVarTrigger = {
   type: TriggerStepType.SET_STATE_VAR,
   async execute(context2, step) {
-    if (step.variable === void 0) {
+    if (step.state === void 0) {
       return;
     }
     const value = context2.rootStore.entityManager.computeValue({
@@ -78455,15 +78455,15 @@ const SetStateVarTrigger = {
       func: (state, value2) => {
         var _a2;
         if (!state) return;
-        (_a2 = step.variable) == null ? void 0 : _a2.set(value2);
+        (_a2 = step.state) == null ? void 0 : _a2.set(value2);
       },
       args: [value]
     });
   },
-  create(variable, value) {
+  create(stateVar, value) {
     return {
       type: TriggerStepType.SET_STATE_VAR,
-      variable,
+      state: stateVar,
       value
     };
   }
@@ -78471,14 +78471,12 @@ const SetStateVarTrigger = {
 const ControlTimerTrigger = {
   type: TriggerStepType.CONTROL_TIMER,
   async execute(_context, step) {
-    if (step.timer) {
-      step.timer[step.action]();
-    }
+    console.log("ControlTimerTrigger", step);
   },
-  create(timer, action2) {
+  create(timerId, action2) {
     return {
       type: TriggerStepType.CONTROL_TIMER,
-      timer,
+      timerId,
       action: action2
     };
   }
@@ -83506,7 +83504,7 @@ function registerStores(stores) {
   internalStores = { ...internalStores, ...stores };
   if (SUPPORTED_MODES.includes("production")) {
     if (Object.keys(internalStores).length === Object.keys(stores).length) {
-      import("./devtools-consolidated-DERQEse1.js").then(({ initializeCustomDevTools, setRegisteredStores }) => {
+      import("./devtools-consolidated-B1B3uBW_.js").then(({ initializeCustomDevTools, setRegisteredStores }) => {
         setRegisteredStores(internalStores);
         initializeCustomDevTools();
       }).catch((error) => {
@@ -83519,7 +83517,7 @@ function registerStores(stores) {
   }
 }
 const DevToolsInternal = React__default.lazy(() => {
-  return import("./devtools-consolidated-DERQEse1.js").then((module2) => ({
+  return import("./devtools-consolidated-B1B3uBW_.js").then((module2) => ({
     default: module2.CustomDevTools
   }));
 });
@@ -83876,11 +83874,11 @@ class SbEventFlow {
   controlModal(modal, action2) {
     return this.addStep(EventRegistry.controlModal.create(modal, action2));
   }
-  static controlTimer(stateTimer, action2) {
-    return SbEventFlow.start().controlTimer(stateTimer, action2);
+  static controlTimer(timerId, action2) {
+    return SbEventFlow.start().controlTimer(timerId, action2);
   }
-  controlTimer(stateTimer, action2) {
-    return this.addStep(EventRegistry.controlTimer.create(stateTimer, action2));
+  controlTimer(timerId, action2) {
+    return this.addStep(EventRegistry.controlTimer.create(timerId, action2));
   }
   static runApis(apis, onSuccess, onError2) {
     return SbEventFlow.start().runApis(apis, onSuccess, onError2);
@@ -85450,7 +85448,7 @@ class ApiManager {
       scopeId,
       this.apiNameToDepCandidates[apiName] ?? []
     );
-    const orchestratorUrl = new URL("v2/execute", this.baseUrl).href;
+    const orchestratorUrl = `${this.baseUrl}v2/execute`;
     const events2 = [];
     await ((_a2 = this.rootStore.editStore) == null ? void 0 : _a2.operationManager.ensureFilesSynced());
     const abortController = new AbortController();
@@ -86954,7 +86952,7 @@ function getPropertyValue$1({
   return property.value;
 }
 function getSbEventFlow(step, scopeId) {
-  var _a2, _b2, _c2, _d2, _e2, _f2, _g2;
+  var _a2, _b2, _c2, _d2, _e2, _f2;
   if (!isValidStepDef(step)) {
     return void 0;
   }
@@ -87027,33 +87025,27 @@ function getSbEventFlow(step, scopeId) {
       return SbEventFlow.controlModal(modalEntity, step.direction);
     }
     case "controlTimer": {
-      const timerStep = step;
-      if (!((_a2 = timerStep.timer) == null ? void 0 : _a2.name)) {
-        return void 0;
-      }
-      const timerEntity = getEntity(timerStep.timer.name);
+      const timerEntity = getEntity(step.name);
       if (!timerEntity) return void 0;
-      return SbEventFlow.controlTimer(timerEntity, step.command ?? "start");
+      return SbEventFlow.controlTimer(step.name, step.command);
     }
     case "setStateVar": {
-      const variableStep = step;
-      const stateEntity = getEntity((_b2 = variableStep.variable) == null ? void 0 : _b2.name);
+      const stateEntity = getEntity((_a2 = step.state) == null ? void 0 : _a2.name);
       if (!stateEntity) return void 0;
-      const value = isPropertyInfo(variableStep.value) ? getPropertyValue$1({
-        property: variableStep.value,
+      const value = isPropertyInfo(step.value) ? getPropertyValue$1({
+        property: step.value,
         scopeId,
-        name: getName((_c2 = variableStep.variable) == null ? void 0 : _c2.name)
+        name: getName((_b2 = step.state) == null ? void 0 : _b2.name)
       }) : step.value;
       return SbEventFlow.setStateVar(stateEntity, value);
     }
     case "resetStateVar": {
-      const variableStep = step;
-      const resetStateEntity = getEntity((_d2 = variableStep.variable) == null ? void 0 : _d2.name);
+      const resetStateEntity = getEntity((_c2 = step.state) == null ? void 0 : _c2.name);
       if (!resetStateEntity) return void 0;
       return SbEventFlow.resetStateVar(resetStateEntity);
     }
     case "resetComponent": {
-      const resetWidgetEntity = getEntity((_e2 = step.widget) == null ? void 0 : _e2.name);
+      const resetWidgetEntity = getEntity((_d2 = step.widget) == null ? void 0 : _d2.name);
       if (!resetWidgetEntity) return void 0;
       return SbEventFlow.resetComponent(
         step.widget,
@@ -87062,7 +87054,7 @@ function getSbEventFlow(step, scopeId) {
       );
     }
     case "setComponentProperty": {
-      const setWidgetEntity = getEntity((_f2 = step.widget) == null ? void 0 : _f2.name);
+      const setWidgetEntity = getEntity((_e2 = step.widget) == null ? void 0 : _e2.name);
       if (!setWidgetEntity) return void 0;
       return SbEventFlow.setComponentProperty(
         step.widget,
@@ -87080,7 +87072,7 @@ function getSbEventFlow(step, scopeId) {
     case "setProfile":
       return SbEventFlow.setProfile(step.profileId, step.profileAction);
     case "triggerEvent":
-      return SbEventFlow.triggerEvent((_g2 = step.event) == null ? void 0 : _g2.name, step.eventPayload);
+      return SbEventFlow.triggerEvent((_f2 = step.event) == null ? void 0 : _f2.name, step.eventPayload);
     default:
       console.warn("Unhandled runtime step type", step.type);
       return void 0;
@@ -91047,14 +91039,14 @@ function getLoaderFn$1(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-sYb2uQpL.js"
+            "./allPathsLoader-KDCEbuYo.js"
           )];
         case 2:
           return [2, _b2.sent().allPathsLoader];
         case 3:
           return [4, import(
             /* webpackChunkName: "blueprint-icons-split-paths-by-size-loader" */
-            "./splitPathsBySizeLoader-DgExy-KV.js"
+            "./splitPathsBySizeLoader-VThmaq3t.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -111689,18 +111681,14 @@ const ReactiveComponent = observer(function Component2({
   const reactiveProps = useShallowMobxObserver(safeProps);
   const stylePropWithSize = useStyleWithSize(reactiveProps);
   const styleProp = useMemo$2(() => {
-    const styleWithOverflow = {
-      overflow: "auto",
-      ...stylePropWithSize
-    };
     if (reactiveProps.isVisible === false) {
       const existingOpacity = lodashExports.isNumber(stylePropWithSize.opacity) ? stylePropWithSize.opacity : 1;
       return {
-        ...styleWithOverflow,
+        ...stylePropWithSize,
         opacity: existingOpacity * INVISIBLE_OPACITY
       };
     }
-    return styleWithOverflow;
+    return stylePropWithSize;
   }, [reactiveProps.isVisible, stylePropWithSize]);
   const { setStyle, getFallbackStyle } = useComponentSuspenseStyle();
   useEffect(() => {
@@ -111860,52 +111848,28 @@ const size$2 = ({
     controlType: "WIDTH_DROPDOWN",
     defaultValue: defaults2 == null ? void 0 : defaults2.minWidth,
     defaultOnAdd: defaultsOnAdd == null ? void 0 : defaultsOnAdd.minWidth,
-    isVisible: function(s3) {
-      var _a2;
-      const hideWidth = ((_a2 = this == null ? void 0 : this.width) == null ? void 0 : _a2.mode) === "px";
-      return Boolean(
-        (showMinWidth ? showMinWidth == null ? void 0 : showMinWidth.call(this, s3) : true) && !hideWidth
-      );
-    }
+    isVisible: showMinWidth
   });
   const maxWidthProperty = getSizeProp({
     label: "Max width",
     controlType: "WIDTH_DROPDOWN",
     defaultValue: defaults2 == null ? void 0 : defaults2.maxWidth,
     defaultOnAdd: defaultsOnAdd == null ? void 0 : defaultsOnAdd.maxWidth,
-    isVisible: function(s3) {
-      var _a2;
-      const hideWidth = ((_a2 = this == null ? void 0 : this.width) == null ? void 0 : _a2.mode) === "px";
-      return Boolean(
-        (showMaxWidth ? showMaxWidth == null ? void 0 : showMaxWidth.call(this, s3) : true) && !hideWidth
-      );
-    }
+    isVisible: showMaxWidth
   });
   const minHeightProperty = getSizeProp({
     label: "Min height",
     controlType: "HEIGHT_DROPDOWN",
     defaultValue: defaults2 == null ? void 0 : defaults2.minHeight,
     defaultOnAdd: defaultsOnAdd == null ? void 0 : defaultsOnAdd.minHeight,
-    isVisible: function(s3) {
-      var _a2;
-      const hideHeight = ((_a2 = this == null ? void 0 : this.height) == null ? void 0 : _a2.mode) === "px";
-      return Boolean(
-        (showMinHeight ? showMinHeight == null ? void 0 : showMinHeight.call(this, s3) : true) && !hideHeight
-      );
-    }
+    isVisible: showMinHeight
   });
   const maxHeightProperty = getSizeProp({
     label: "Max height",
     controlType: "HEIGHT_DROPDOWN",
     defaultValue: defaults2 == null ? void 0 : defaults2.maxHeight,
     defaultOnAdd: defaultsOnAdd == null ? void 0 : defaultsOnAdd.maxHeight,
-    isVisible: function(s3) {
-      var _a2;
-      const hideHeight = ((_a2 = this == null ? void 0 : this.height) == null ? void 0 : _a2.mode) === "px";
-      return Boolean(
-        (showMaxHeight ? showMaxHeight == null ? void 0 : showMaxHeight.call(this, s3) : true) && !hideHeight
-      );
-    }
+    isVisible: showMaxHeight
   });
   let heightProperty = Prop.dimension().readAndWrite().propertiesPanel({
     label: "Height",
@@ -117566,18 +117530,12 @@ const AddSectionButton = ({
   sectionInstanceId
 }) => {
   const indexForNewSection = placement === "above" ? indexForBaseSection : indexForBaseSection + 1;
-  const createSection = useCallback(async () => {
-    const newSectionSourceId = await createComponent({
+  const createSection = useCallback(() => {
+    createComponent({
       componentType: "SbSection",
       parent: { id: sectionParentSourceId, index: indexForNewSection },
       scopeName: sectionParentScopeName
     });
-    if (newSectionSourceId) {
-      const newSectionInstanceId = getEditStore().runtimeEntitiesManager.widgets.getAnyInstanceIdForSourceId(
-        newSectionSourceId
-      );
-      getEditStore().ui.selectWidget(newSectionInstanceId);
-    }
   }, [sectionParentSourceId, indexForNewSection, sectionParentScopeName]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Wrapper$2,
@@ -119865,13 +119823,22 @@ const getStackChildStyle = ({
     (childProps == null ? void 0 : childProps.type) ?? ""
   ) ? Dim.fit() : Dim.fill());
   const widthCss = childCount === 1 && (width == null ? void 0 : width.mode) === "fill" && (parentWidth == null ? void 0 : parentWidth.mode) !== "fit" ? { width: "100%" } : dimToCSS(width, "width", primary === "width");
-  const widthInPx = (width == null ? void 0 : width.mode) === "px";
-  const heightInPx = (height == null ? void 0 : height.mode) === "px";
-  const shouldNotShrink = widthInPx && primary === "width" || heightInPx && primary === "height";
-  const minWidthCss = widthInPx ? {} : getMinMaxCss(childProps == null ? void 0 : childProps.minWidth, "minWidth");
-  const maxWidthCss = widthInPx ? {} : getMinMaxCss(childProps == null ? void 0 : childProps.maxWidth, "maxWidth");
-  const minHeightCss = heightInPx ? {} : getMinMaxCss(childProps == null ? void 0 : childProps.minHeight, "minHeight");
-  const maxHeightCss = heightInPx ? {} : getMinMaxCss(childProps == null ? void 0 : childProps.maxHeight, "maxHeight");
+  const minWidthCss = getMinMaxCss(
+    childProps == null ? void 0 : childProps.minWidth,
+    "minWidth"
+  );
+  const maxWidthCss = getMinMaxCss(
+    childProps == null ? void 0 : childProps.maxWidth,
+    "maxWidth"
+  );
+  const minHeightCss = getMinMaxCss(
+    childProps == null ? void 0 : childProps.minHeight,
+    "minHeight"
+  );
+  const maxHeightCss = getMinMaxCss(
+    childProps == null ? void 0 : childProps.maxHeight,
+    "maxHeight"
+  );
   const margin2 = (childProps == null ? void 0 : childProps.margin) ?? {
     top: Dim.px(0),
     bottom: Dim.px(0),
@@ -119881,7 +119848,6 @@ const getStackChildStyle = ({
   const marginCss = { margin: generatePaddingStyle(margin2) };
   const stickyCss = (childProps == null ? void 0 : childProps.sticky) ? { position: "sticky", top: "0px", zIndex: Layers$1.stickySections } : {};
   const style2 = {
-    ...shouldNotShrink ? { flexShrink: 0 } : {},
     ...heightCss,
     ...widthCss,
     ...minHeightCss,
@@ -120092,16 +120058,20 @@ const generateClassName = (seed2) => {
   return `superblocks_widget_${seed2}`;
 };
 const getCanvasClassName = () => "canvas";
+const getChildName = (child) => {
+  var _a2;
+  return ((_a2 = getBindingIdentifier(child.props.bind)) == null ? void 0 : _a2.entityName) ?? child.props[WIDGET_SOURCE_ID_ATTRIBUTE];
+};
 const calculateRowPositions = (orderedNames, childrenArray, rowHeight, pxHeights) => {
   return orderedNames.reduce(
     (acc, name) => {
       var _a2;
-      const child = childrenArray.find((child2) => child2.name === name);
+      const child = childrenArray.find((child2) => getChildName(child2) === name);
       if (!child) {
         return acc;
       }
-      const marginTopPx = (((_a2 = child.marginTop) == null ? void 0 : _a2.value) ?? 0) * rowHeight;
-      const constraintTop = child.constraintTop;
+      const marginTopPx = (((_a2 = child.props.marginTop) == null ? void 0 : _a2.value) ?? 0) * rowHeight;
+      const constraintTop = child.props.constraintTop;
       const bottomFunc = (name2) => {
         const topRow = acc[name2];
         const pxHeight = pxHeights[name2];
@@ -120126,16 +120096,16 @@ const calculateRowPositions = (orderedNames, childrenArray, rowHeight, pxHeights
 const orderConstraints = (children) => {
   const childrenMap = children.reduce(
     (acc, child) => {
-      acc[child.name] = child;
+      acc[getChildName(child)] = child;
       return acc;
     },
     {}
   );
   const constraintsMap = children.reduce(
     (acc, child) => {
-      if (child.constraintTop) {
-        const constraints = Array.isArray(child.constraintTop) ? child.constraintTop : [child.constraintTop];
-        acc[child.name] = constraints.filter(
+      if (child.props.constraintTop) {
+        const constraints = Array.isArray(child.props.constraintTop) ? child.props.constraintTop : [child.props.constraintTop];
+        acc[getChildName(child)] = constraints.filter(
           (constraint) => !!childrenMap[constraint]
         );
       }
@@ -120147,24 +120117,24 @@ const orderConstraints = (children) => {
   const foundItems = /* @__PURE__ */ new Set();
   const itemsLeft = /* @__PURE__ */ new Set();
   children.forEach((child) => {
-    const constraints = constraintsMap[child.name] ?? [];
+    const constraints = constraintsMap[getChildName(child)] ?? [];
     const hasNoConstraints = constraints.length === 0;
     if (hasNoConstraints) {
-      foundItems.add(child.name);
-      orderedNames.push(child.name);
+      foundItems.add(getChildName(child));
+      orderedNames.push(getChildName(child));
     } else {
       itemsLeft.add(child);
     }
   });
   while (itemsLeft.size > 0) {
     itemsLeft.forEach((child) => {
-      const constraints = constraintsMap[child.name] ?? [];
+      const constraints = constraintsMap[getChildName(child)] ?? [];
       const constraintsLeft = constraints.filter(
         (constraint) => !foundItems.has(constraint)
       );
       if (constraintsLeft.length === 0) {
-        foundItems.add(child.name);
-        orderedNames.push(child.name);
+        foundItems.add(getChildName(child));
+        orderedNames.push(getChildName(child));
         itemsLeft.delete(child);
       }
     });
@@ -120215,141 +120185,99 @@ const heightReducer = (state, action2) => {
   }
 };
 const EMPTY_ARRAY$1 = [];
-const GridChild = observer(
-  ({
-    childProps,
-    gridPositions,
-    rowHeight,
-    dispatchHeight,
-    childElement
-  }) => {
-    var _a2, _b2;
-    const heightMode = ((_a2 = childProps.height) == null ? void 0 : _a2.mode) ?? "fit";
-    const top2 = gridPositions[childProps.name].top;
-    const left2 = gridPositions[childProps.name].left;
-    const rows = gridPositions[childProps.name].height;
-    const columns = gridPositions[childProps.name].width;
+const InternalGrid = ({
+  children = EMPTY_ARRAY$1,
+  ...props2
+}) => {
+  var _a2, _b2;
+  const isEditing = Boolean((_a2 = rootStore.editStore) == null ? void 0 : _a2.isInitialized);
+  const { style: style2, ...passThroughProps } = usePassthroughProps(props2);
+  const rowHeight = ((_b2 = props2.rowHeight) == null ? void 0 : _b2.value) ?? 12;
+  const childrenArray = useMemo$2(() => {
+    let childrenArray2 = Array.isArray(children) ? children : [children];
+    if (!isEditing) {
+      childrenArray2 = childrenArray2.filter(
+        (child) => child.props.isVisible !== false
+      );
+    }
+    return childrenArray2;
+  }, [children, isEditing]);
+  const columns = props2.columns ?? 12;
+  const [pxHeights, dispatchHeight] = React__default.useReducer(heightReducer, {});
+  const gridPositions = useMemo$2(() => {
+    const orderedNames = orderConstraints(childrenArray);
+    const rowPos = calculateRowPositions(
+      orderedNames,
+      childrenArray,
+      rowHeight,
+      pxHeights
+    );
+    const positions = childrenArray.reduce(
+      (acc, child) => {
+        var _a3, _b3, _c2;
+        let width = ((_a3 = child.props.width) == null ? void 0 : _a3.value) ?? (child.type.sbType === "SbTable" || child.type.sbType === "SbContainer" ? 6 : 2);
+        if (((_b3 = child.props.width) == null ? void 0 : _b3.mode) === "fill") {
+          width = columns;
+        }
+        acc[getChildName(child)] = {
+          top: rowPos[getChildName(child)],
+          left: ((_c2 = child.props.marginLeft) == null ? void 0 : _c2.value) ?? 0,
+          width,
+          height: Math.ceil(pxHeights[getChildName(child)] / rowHeight)
+        };
+        return acc;
+      },
+      {}
+    );
+    return positions;
+  }, [columns, childrenArray, rowHeight, pxHeights]);
+  const gridStyle = React__default.useMemo(() => {
+    const spacingValue = 0;
+    const columnsSize = `calc(${100 / columns}% - ${(columns - 1) * spacingValue / columns}px)`;
+    return {
+      display: "grid",
+      gridAutoRows: `${rowHeight}px`,
+      gap: `${spacingValue}px`,
+      gridTemplateColumns: `repeat(${columns}, ${columnsSize})`,
+      ...style2
+    };
+  }, [columns, rowHeight, style2]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(DragDisplay, { passThroughProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: gridStyle, className: props2.className, children: childrenArray.map((child) => {
+    var _a3, _b3;
+    const heightMode = ((_a3 = child.props.height) == null ? void 0 : _a3.mode) ?? "fit";
+    const top2 = gridPositions[getChildName(child)].top;
+    const left2 = gridPositions[getChildName(child)].left;
+    const rows = gridPositions[getChildName(child)].height;
+    const columns2 = gridPositions[getChildName(child)].width;
     const Component3 = heightMode === "fit" ? MeasuredComponent : StaticComponent;
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
         style: {
           gridRow: `${top2 + 1} / span ${Math.max(1, rows)}`,
-          gridColumn: `${left2 + 1} / span ${Math.max(1, columns)}`,
+          gridColumn: `${left2 + 1} / span ${Math.max(1, columns2)}`,
           width: "100%",
           maxWidth: "100%"
         },
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           Component3,
           {
-            staticHeight: (((_b2 = childProps.height) == null ? void 0 : _b2.value) ?? 0) * rowHeight,
+            staticHeight: (((_b3 = child.props.height) == null ? void 0 : _b3.value) ?? 0) * rowHeight,
             onHeightChanged: (height) => {
               dispatchHeight({
                 type: "SET_HEIGHT",
-                name: childProps.name,
+                name: getChildName(child),
                 height
               });
             },
-            children: childElement
+            children: child
           }
         )
       },
-      childProps.name
+      getChildName(child)
     );
-  }
-);
-const InternalGrid = observer(
-  ({ children = EMPTY_ARRAY$1, ...props2 }) => {
-    var _a2;
-    const { style: style2, ...passThroughProps } = usePassthroughProps(props2);
-    const rowHeight = ((_a2 = props2.rowHeight) == null ? void 0 : _a2.value) ?? 12;
-    const childrenArray = useObserverMemo(() => {
-      var _a3;
-      const childrenArray2 = Array.isArray(children) ? children : [children];
-      const isEditing = Boolean((_a3 = rootStore.editStore) == null ? void 0 : _a3.isInitialized);
-      const withEvaluatedProps = childrenArray2.reduce((acc, child) => {
-        const bindingIdentifier = getBindingIdentifier(child.props.bind);
-        const entity = bindingIdentifier ? rootStore.entityManager.getEntity(bindingIdentifier.scopeId, {
-          value: bindingIdentifier.entityName,
-          isAnonymous: false
-        }) : null;
-        const marginTop = (entity == null ? void 0 : entity.marginTop) ?? (isDimension(child.props.marginTop) ? child.props.marginTop : void 0);
-        const marginLeft = (entity == null ? void 0 : entity.marginLeft) ?? (isDimension(child.props.marginLeft) ? child.props.marginLeft : void 0);
-        const width = (entity == null ? void 0 : entity.width) ?? (isDimension(child.props.width) ? child.props.width : void 0);
-        const height = (entity == null ? void 0 : entity.height) ?? (isDimension(child.props.height) ? child.props.height : void 0);
-        const constraintTop = (entity == null ? void 0 : entity.constraintTop) ?? child.props.constraintTop;
-        const isVisible2 = (entity == null ? void 0 : entity.isVisible) ?? child.props.isVisible;
-        const gridChild = {
-          marginTop,
-          marginLeft,
-          width,
-          height,
-          constraintTop,
-          name: (bindingIdentifier == null ? void 0 : bindingIdentifier.entityName) ?? child.props[WIDGET_SOURCE_ID_ATTRIBUTE],
-          // source ID as a fallback
-          sbType: isSbComponent(child) ? child.type.sbType : void 0,
-          element: child
-        };
-        if (isVisible2 !== false || isEditing) {
-          acc.push(gridChild);
-        }
-        return acc;
-      }, []);
-      return withEvaluatedProps;
-    }, [children]);
-    const columns = props2.columns ?? 12;
-    const [pxHeights, dispatchHeight] = React__default.useReducer(heightReducer, {});
-    const gridPositions = useMemo$2(() => {
-      const orderedNames = orderConstraints(childrenArray);
-      const rowPos = calculateRowPositions(
-        orderedNames,
-        childrenArray,
-        rowHeight,
-        pxHeights
-      );
-      const positions = childrenArray.reduce(
-        (acc, child) => {
-          var _a3, _b2, _c2;
-          let width = ((_a3 = child.width) == null ? void 0 : _a3.value) ?? (child.sbType === "SbTable" || child.sbType === "SbContainer" ? 6 : 2);
-          if (((_b2 = child.width) == null ? void 0 : _b2.mode) === "fill") {
-            width = columns;
-          }
-          acc[child.name] = {
-            top: rowPos[child.name],
-            left: ((_c2 = child.marginLeft) == null ? void 0 : _c2.value) ?? 0,
-            width,
-            height: Math.ceil(pxHeights[child.name] / rowHeight)
-          };
-          return acc;
-        },
-        {}
-      );
-      return positions;
-    }, [columns, childrenArray, rowHeight, pxHeights]);
-    const gridStyle = React__default.useMemo(() => {
-      const spacingValue = 0;
-      const columnsSize = `calc(${100 / columns}% - ${(columns - 1) * spacingValue / columns}px)`;
-      return {
-        display: "grid",
-        gridAutoRows: `${rowHeight}px`,
-        gap: `${spacingValue}px`,
-        gridTemplateColumns: `repeat(${columns}, ${columnsSize})`,
-        ...style2
-      };
-    }, [columns, rowHeight, style2]);
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(DragDisplay, { passThroughProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: gridStyle, className: props2.className, children: childrenArray.map((child) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-      GridChild,
-      {
-        childProps: child,
-        childElement: child.element,
-        gridPositions,
-        rowHeight,
-        dispatchHeight
-      },
-      child.name
-    )) }) });
-  }
-);
+  }) }) });
+};
 const DragDisplay = (props2) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
@@ -145584,14 +145512,14 @@ function getLoaderFn(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-Q25KonUl.js"
+            "./allPathsLoader-B3Ii4JGL.js"
           )];
         case 2:
           return [2, _b2.sent().allPathsLoader];
         case 3:
           return [4, import(
             /* webpackChunkName: "blueprint-icons-split-paths-by-size-loader" */
-            "./splitPathsBySizeLoader-0bQrmlhP.js"
+            "./splitPathsBySizeLoader-Btq5cpt-.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -162787,7 +162715,7 @@ const propertiesDefinition$9 = {
       placeholder: '[{ "col1": "val1" }]',
       isJSConvertible: false,
       helpText: "Takes in an array of objects to display rows in the table. Bind data from an API using {{}}",
-      controlType: "FUNCTION_CODE_EDITOR"
+      controlType: "COMPUTED_CODE_EDITOR"
     }),
     // do not let users set the id property
     // id is managed internally by the table (it's always the key of the column)
@@ -162824,12 +162752,11 @@ const propertiesDefinition$9 = {
       helpText: "Enable per column filtering"
     }),
     defaultFilters: Prop.any().readAndWrite().propertiesPanel({
-      controlType: "FUNCTION_CODE_EDITOR",
+      controlType: "COMPUTED_CODE_EDITOR",
       label: "Default filters",
       visibility: "SHOW_NAME",
       isJSConvertible: false,
       isRemovable: true,
-      defaultOnAdd: () => Property.Computed(""),
       helpText: "Allows specifying the filters that will be used on page load",
       isVisible: function() {
         return this.isFilterable && this.pageType !== "server-side";
@@ -162906,8 +162833,6 @@ const propertiesDefinition$9 = {
       label: "Default sort",
       helpText: "Allows specifying the sort options that will be used on page load",
       controlType: "DEFAULT_TABLE_SORT",
-      isRemovable: true,
-      visibility: "SHOW_NAME",
       childrenDisplayMode: {
         type: "popover",
         title: "Default sort"
@@ -162916,8 +162841,6 @@ const propertiesDefinition$9 = {
     defaultSearchText: Prop.string().readAndWrite().propertiesPanel({
       label: "Default search",
       helpText: "Sets the default search text",
-      isRemovable: true,
-      visibility: "SHOW_NAME",
       isVisible: function() {
         return this.enableClientSideSearch !== false;
       }
@@ -182078,7 +182001,7 @@ const propertiesDefinition$8 = {
       isJSConvertible: false,
       helpText: "Allows users to select either a single option or multiple options. Values must be unique.",
       placeholder: "[{label: 'Option 1', value: 'option1'}]",
-      controlType: "FUNCTION_CODE_EDITOR"
+      controlType: "COMPUTED_CODE_EDITOR"
     }),
     defaultOptionValue: Prop.string().propertiesPanel({
       label: "Default selected value",
@@ -183922,8 +183845,8 @@ const SbVariable = registerSbEntity(
 );
 const propertiesDefinition$1 = {
   general: Section.category(PropsPanelCategory.Uncategorized).propertiesPanel({ showHeader: false }).children({
-    intervalMs: Prop.number().default(300).readAndWrite().propertiesPanel({
-      label: "Interval",
+    intervalMs: Prop.number().default(3e5).readAndWrite().propertiesPanel({
+      label: "Interval (ms)",
       helpText: "Sets the interval of the timer",
       placeholder: "1000",
       isJSConvertible: false,
@@ -186782,23 +186705,6 @@ console.log = (...args) => {
   } catch {
   }
 };
-const loadApisIntoLibrary = async function loadApisIntoLibrary2() {
-  var _a2, _b2;
-  {
-    try {
-      const mod2 = await import("./user-facing/build-manifest.js");
-      const apis = ((_a2 = mod2.default) == null ? void 0 : _a2.apis) ?? {};
-      const apiDependencies = ((_b2 = mod2.default) == null ? void 0 : _b2.apiDependencies) ?? [];
-      rootStore.apis.setAllApis(apis);
-      apiDependencies.forEach((dep) => {
-        rootStore.apis.setApiDepCandidates(dep.apiName, dep.params);
-        rootStore.apis.setApiReferences(dep.apiName, dep.dependencies);
-      });
-    } catch (error) {
-      console.error("Error loading apis into library", error);
-    }
-  }
-};
 const SbProvider = function SbProvider2({
   name = "codemode",
   settings,
@@ -186807,14 +186713,6 @@ const SbProvider = function SbProvider2({
 }) {
   var _a2, _b2;
   const isEmbedded = typeof window !== "undefined" && window.parent !== window.self;
-  const [isApisInitialized, setIsApisInitialized] = useState(false);
-  const runApiInitialization = useCallback(async () => {
-    await loadApisIntoLibrary();
-    setIsApisInitialized(true);
-  }, []);
-  useEffect(() => {
-    runApiInitialization();
-  }, [runApiInitialization]);
   const [userAccessibleTheme, setUserAccessibleTheme] = useState(DEFAULT_THEME);
   useEffect(() => {
     const mergedTheme = lodashExports.merge(BASE_THEME_V5, settings == null ? void 0 : settings.theme);
@@ -186827,9 +186725,6 @@ const SbProvider = function SbProvider2({
   useEffect(() => {
     initializeStyles(name);
   }, [preloadedData, name]);
-  if (!isApisInitialized) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(FullPageSpinner, {});
-  }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -198438,4 +198333,4 @@ export {
   SbTimer as y,
   SbApi as z
 };
-//# sourceMappingURL=index-CQC86xX4.js.map
+//# sourceMappingURL=index-kjgG33Rg.js.map