@superblocksteam/library 2.0.3-next.83 → 2.0.3-next.85

package/dist/{index-C7S72F_O.js → index-DKNEuHsi.js}

@@ -2703,14 +2703,14 @@ function getLoaderFn$1(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-CB6RpBm8.js"
+            "./allPathsLoader-BP4zIRze.js"
           )];
         case 2:
           return [2, _b2.sent().allPathsLoader];
         case 3:
           return [4, import(
             /* webpackChunkName: "blueprint-icons-split-paths-by-size-loader" */
-            "./splitPathsBySizeLoader-Byhb9_SF.js"
+            "./splitPathsBySizeLoader-CELIsf7I.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -10513,6 +10513,22 @@ function toMobXPatch(change, pathStr) {
     }
   }
 }
+function isComputedProperty(value) {
+  return typeof value === "object" && value !== null && value.__isComputedProperty === true;
+}
+function isBindingString(value) {
+  return typeof value === "object" && value != null && value.__binding === true;
+}
+function isBindingEqual(a3, b3) {
+  return a3.value === b3.value;
+}
+function SB(strings) {
+  const fullString = strings.join("");
+  return {
+    __binding: true,
+    value: fullString
+  };
+}
 var src = {};
 var v1$6 = {};
 var service_pb$2 = {};
@@ -45418,22 +45434,6 @@ if (typeof WebSocket !== "undefined") {
 } else if (typeof self !== "undefined") {
   ws$1 = self.WebSocket || self.MozWebSocket;
 }
-function isComputedProperty(value) {
-  return typeof value === "object" && value !== null && value.__isComputedProperty === true;
-}
-function isBindingString(value) {
-  return typeof value === "object" && value != null && value.__binding === true;
-}
-function isBindingEqual(a3, b3) {
-  return a3.value === b3.value;
-}
-function SB(strings) {
-  const fullString = strings.join("");
-  return {
-    __binding: true,
-    value: fullString
-  };
-}
 function getStableScopeId(scopeName) {
   return generatePredictableId(`sc-${scopeName}`);
 }
@@ -64972,14 +64972,6 @@ const StackLikeContainerTypes = /* @__PURE__ */ new Set([
   ...VStackLikeContainerTypes,
   ...HStackLikeContainerTypes
 ]);
-const DroppableContainerTypes = /* @__PURE__ */ new Set([
-  "SbPage",
-  "SbSection",
-  "SbColumn",
-  "SbContainer",
-  "SbModal",
-  "SbSlideout"
-]);
 function rule(description, restriction) {
   return {
     description,
@@ -65038,7 +65030,11 @@ const isDragAndDropTypeValid = ({
   return triggeredRestriction == null;
 };
 const isTypeDroppable = (type5) => {
-  return DroppableContainerTypes.has(type5);
+  const component = rootStore.componentRegistry.getComponent(type5);
+  if (component && component.isDroppable === true) {
+    return true;
+  }
+  return false;
 };
 const isTypeDraggable = (type5) => {
   return type5 !== "SbPage" && type5 !== "SbSlideout" && type5 !== "SbModal";
@@ -65192,27 +65188,35 @@ class GridManager {
     };
   }
   get lazyTargetGridInfo() {
-    var _a2;
+    var _a2, _b2;
     const targetRect = this.dnd.activeTargetRect;
     const dropTargetId = this.dnd.dropTargetId;
     if (!targetRect || !dropTargetId) {
       return null;
     }
-    const dropTargetWidgetProps = (_a2 = getEditStore().runtimeEntitiesManager.getEditorWidgetMeta(
-      dropTargetId
-    )) == null ? void 0 : _a2.props;
-    const targetColumns = dropTargetWidgetProps == null ? void 0 : dropTargetWidgetProps.columns;
+    const dropTargetWidgetMeta = getEditStore().runtimeEntitiesManager.getEditorWidgetMeta(dropTargetId);
+    if (!(dropTargetWidgetMeta == null ? void 0 : dropTargetWidgetMeta.scopeId) || !(dropTargetWidgetMeta == null ? void 0 : dropTargetWidgetMeta.name)) {
+      return null;
+    }
+    const entityValues = this.root.entityManager.getEntity(
+      dropTargetWidgetMeta.scopeId,
+      dropTargetWidgetMeta.name
+    );
+    const targetColumns = entityValues == null ? void 0 : entityValues.columns;
     if (!targetColumns) {
       return null;
     }
-    const tileWidth = targetRect.width / targetColumns;
-    const tileHeight = 12;
+    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 targetHeightGU = Math.ceil(targetRect.height / tileHeight);
     return {
       targetColumns,
       tileWidth,
       tileHeight,
-      targetHeightGU
+      targetHeightGU,
+      targetPadding
     };
   }
   getGridPositionInfo(positionPx) {
@@ -65224,7 +65228,7 @@ class GridManager {
     if (!targetGridInfo) {
       return null;
     }
-    const { tileWidth, tileHeight } = targetGridInfo;
+    const { tileWidth, tileHeight, targetPadding } = targetGridInfo;
     const relativeX = positionPx.left - targetRect.left;
     const relativeY = positionPx.top - targetRect.top;
     const xGU = Math.round(relativeX / tileWidth);
@@ -65237,7 +65241,8 @@ class GridManager {
       widthGU,
       heightGU,
       tileWidth,
-      tileHeight
+      tileHeight,
+      targetPadding
     };
   }
   get lazyChildGridPositionsGU() {
@@ -65307,7 +65312,8 @@ class GridManager {
     if (!collidingRectGU) {
       return null;
     }
-    const { tileWidth, tileHeight } = this.lazyTargetGridInfo;
+    const targetGridInfo = this.lazyTargetGridInfo;
+    const { tileWidth, tileHeight } = targetGridInfo;
     Object.entries(childPositions).forEach(([id2, childPosition]) => {
       if (id2 === this.draggedInstanceId) {
         return false;
@@ -65947,15 +65953,16 @@ const GridDefaults = {
   DEFAULT_GRID_COLUMN_WIDTH: 12
 };
 class ResizingManager {
-  constructor() {
+  constructor(root2) {
     __publicField(this, "_activeResizes", /* @__PURE__ */ new Map());
+    this.root = root2;
     makeAutoObservable(this);
     registerStores({
       ResizingManager: this
     });
   }
   startResizing(dragStartX, dragStartY, instanceId, position2) {
-    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i, _j;
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i, _j, _k, _l2, _m2;
     const widget = getEditStore().runtimeEntitiesManager.getEditorWidgetMeta(instanceId);
     if (!widget) {
       console.error(`Could not find metadata ${instanceId}`);
@@ -65969,8 +65976,13 @@ class ResizingManager {
       console.error(`Could not find parent for ${instanceId}`);
       return;
     }
-    const parentWidth = (_a2 = getBoundingBoxForWidget(parentInstanceId)) == null ? void 0 : _a2.width;
-    const columns = (_b2 = parentWidget == null ? void 0 : parentWidget.props) == null ? void 0 : _b2.columns;
+    const parentEntity = parentWidget.scopeId && parentWidget.name ? this.root.entityManager.getEntity(
+      parentWidget.scopeId,
+      parentWidget.name
+    ) : null;
+    const columns = (parentEntity == null ? void 0 : parentEntity.columns) ?? ((_a2 = parentWidget == null ? void 0 : parentWidget.props) == null ? void 0 : _a2.columns);
+    const parentPadding = (parentEntity == null ? void 0 : parentEntity.padding) ?? ((_b2 = parentWidget == null ? void 0 : parentWidget.props) == null ? void 0 : _b2.padding);
+    const parentWidth = (((_c2 = getBoundingBoxForWidget(parentInstanceId)) == null ? void 0 : _c2.width) ?? 0) - (((_d2 = parentPadding == null ? void 0 : parentPadding.left) == null ? void 0 : _d2.value) ?? 0) - (((_e2 = parentPadding == null ? void 0 : parentPadding.right) == null ? void 0 : _e2.value) ?? 0);
     const isOnGrid = isWidgetGrid(parentWidget) && parentWidth && columns;
     const gridUnitWidth = isOnGrid ? parentWidth / columns : GridDefaults.DEFAULT_GRID_COLUMN_WIDTH;
     const gridUnitHeight = GridDefaults.DEFAULT_GRID_ROW_HEIGHT;
@@ -65987,10 +65999,10 @@ class ResizingManager {
       dragStartX,
       dragStartY,
       start: {
-        width: ((_d2 = (_c2 = widget == null ? void 0 : widget.props) == null ? void 0 : _c2.width) == null ? void 0 : _d2.value) ?? 0,
-        height: ((_f2 = (_e2 = widget == null ? void 0 : widget.props) == null ? void 0 : _e2.height) == null ? void 0 : _f2.value) ?? 0,
-        marginLeft: ((_h2 = (_g2 = widget == null ? void 0 : widget.props) == null ? void 0 : _g2.marginLeft) == null ? void 0 : _h2.value) ?? 0,
-        marginTop: ((_j = (_i = widget == null ? void 0 : widget.props) == null ? void 0 : _i.marginTop) == null ? void 0 : _j.value) ?? 0
+        width: ((_g2 = (_f2 = widget == null ? void 0 : widget.props) == null ? void 0 : _f2.width) == null ? void 0 : _g2.value) ?? 0,
+        height: ((_i = (_h2 = widget == null ? void 0 : widget.props) == null ? void 0 : _h2.height) == null ? void 0 : _i.value) ?? 0,
+        marginLeft: ((_k = (_j = widget == null ? void 0 : widget.props) == null ? void 0 : _j.marginLeft) == null ? void 0 : _k.value) ?? 0,
+        marginTop: ((_m2 = (_l2 = widget == null ? void 0 : widget.props) == null ? void 0 : _l2.marginTop) == null ? void 0 : _m2.value) ?? 0
       },
       resizedPosition: position2,
       widthToUpdate: null,
@@ -66001,7 +66013,8 @@ class ResizingManager {
       gridUnitHeight,
       potentialCollisions,
       widgetGU,
-      isApplyingResize: false
+      isApplyingResize: false,
+      parentPadding
     });
   }
   // Potential collisions are the siblings of the resizing widget
@@ -66232,7 +66245,7 @@ class UIStore {
     this.root = root2;
     this.editStore = editStore2;
     this.dnd = new DragAndDropManager(root2);
-    this.resizing = new ResizingManager();
+    this.resizing = new ResizingManager(root2);
     makeObservable(this, {
       _selectedSourceIds: observable,
       _selectedInstanceIds: observable,
@@ -108761,6 +108774,7 @@ const ReactiveComponent = observer(function Component2({
               name,
               ...reactiveProps,
               ...instanceIdProps,
+              dropTargetRef: widgetProps.dropTargetRef,
               style: styleProp,
               ...testProps,
               children
@@ -112894,10 +112908,17 @@ const DroppableWidget = observer(
     });
     const widgetNode = useWidgetNodeRef(props.instanceId);
     useEffect(() => {
-      if (widgetNode) {
-        setDroppableNodeRef(widgetNode);
+      var _a3;
+      let targetNode = null;
+      if ((_a3 = props.dropTargetRef) == null ? void 0 : _a3.current) {
+        targetNode = props.dropTargetRef.current;
+      } else if (widgetNode) {
+        targetNode = widgetNode;
       }
-    }, [widgetNode, setDroppableNodeRef]);
+      if (targetNode) {
+        setDroppableNodeRef(targetNode);
+      }
+    }, [widgetNode, setDroppableNodeRef, props.dropTargetRef]);
     return /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.Fragment, { children: props.children });
   }
 );
@@ -112938,7 +112959,7 @@ const useScope = () => {
 const CANVAS_ROOT_ID = "canvas-root";
 const MODAL_TARGET_ROOT_ID = "modal-target-root";
 const CollisionsLayer = observer(() => {
-  var _a2, _b2;
+  var _a2, _b2, _c2;
   const editStore2 = getEditStore();
   const dropTargetId = editStore2.ui.dnd.dropTargetId;
   const isDragging = editStore2.ui.dnd.isDragging;
@@ -112955,6 +112976,7 @@ const CollisionsLayer = observer(() => {
           parentInstanceId,
           tileWidth: resize.gridUnitWidth,
           tileHeight: resize.gridUnitHeight,
+          targetPadding: resize.parentPadding,
           collisionRects: resize.potentialCollisions
         },
         resize.sourceId
@@ -112966,6 +112988,7 @@ const CollisionsLayer = observer(() => {
         parentInstanceId: dropTargetId,
         tileWidth: (_a2 = editStore2.ui.dnd.grid.lazyActiveRectGU) == null ? void 0 : _a2.tileWidth,
         tileHeight: (_b2 = editStore2.ui.dnd.grid.lazyActiveRectGU) == null ? void 0 : _b2.tileHeight,
+        targetPadding: (_c2 = editStore2.ui.dnd.grid.lazyActiveRectGU) == null ? void 0 : _c2.targetPadding,
         collisionRects: editStore2.ui.dnd.grid.lazyChildGridPositionsGU
       }
     )
@@ -112973,7 +112996,13 @@ const CollisionsLayer = observer(() => {
 });
 const Collisions = observer(
   (props) => {
-    const { parentInstanceId, tileWidth, tileHeight, collisionRects } = props;
+    const {
+      parentInstanceId,
+      tileWidth,
+      tileHeight,
+      collisionRects,
+      targetPadding
+    } = props;
     const editStore2 = getEditStore();
     const { theme } = useTheme();
     const children = parentInstanceId ? editStore2.runtimeEntitiesManager.getEditorWidgetChildrenMeta(parentInstanceId).filter((child) => !editStore2.ui.isInstanceSelected(child.instanceId)) : [];
@@ -112990,7 +113019,8 @@ const Collisions = observer(
         {
           parentInstanceId,
           tileWidth,
-          tileHeight
+          tileHeight,
+          targetPadding
         }
       ),
       children.map((child) => {
@@ -113029,38 +113059,42 @@ const Collisions = observer(
   }
 );
 const DotsPattern = qe$1.div`
-  &.sb-edit-drop-target-outline {
-    background-size: ${(props) => `${props.tileWidth}px ${props.tileHeight}px`};
-    background-position: ${(props) => `${props.tileWidth * 0.45}px ${props.tileHeight * 0.45}px`};
-    background-image: radial-gradient(
-      circle at center,
-      #cccccc 1px,
-      transparent 1px
-    );
-  }
+  margin-left: -2px;
+  margin-top: -2px;
+  width: calc(100% + 4px);
+  height: calc(100% + 4px);
+  background-size: ${(props) => `${props.tileWidth}px ${props.tileHeight}px`};
+  background-image: radial-gradient(
+    circle at 1px 1px,
+    #cccccc 1px,
+    transparent 1px
+  );
 `;
 const GridDots = observer(
   (props) => {
-    const { parentInstanceId, tileWidth, tileHeight } = props;
+    var _a2, _b2, _c2, _d2;
+    const { parentInstanceId, tileWidth, tileHeight, targetPadding } = props;
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
+        className: "sb-edit-drop-target-outline",
         style: {
           position: "absolute",
           top: "anchor(top)",
           left: "anchor(left)",
           right: "anchor(right)",
           bottom: "anchor(bottom)",
-          positionAnchor: getWidgetAnchorName(parentInstanceId)
-        },
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          DotsPattern,
-          {
-            className: "sb-edit-drop-target-outline",
-            tileWidth,
-            tileHeight
+          positionAnchor: getWidgetAnchorName(parentInstanceId),
+          width: "unset",
+          height: "unset",
+          ...targetPadding && {
+            paddingTop: `${((_a2 = targetPadding.top) == null ? void 0 : _a2.value) ?? 0}px`,
+            paddingRight: `${((_b2 = targetPadding.right) == null ? void 0 : _b2.value) ?? 0}px`,
+            paddingBottom: `${((_c2 = targetPadding.bottom) == null ? void 0 : _c2.value) ?? 0}px`,
+            paddingLeft: `${((_d2 = targetPadding.left) == null ? void 0 : _d2.value) ?? 0}px`
           }
-        )
+        },
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(DotsPattern, { tileWidth, tileHeight })
       }
     );
   }
@@ -113087,6 +113121,7 @@ const snapCenterToCursor = (_ref2) => {
   return transform;
 };
 const GridDropPreview = observer(() => {
+  var _a2, _b2, _c2, _d2;
   const editStore2 = getEditStore();
   const dropTargetId = editStore2.ui.dnd.dropTargetId;
   const dropTargetWidgetType = editStore2.ui.dnd.dropTargetWidgetType;
@@ -113094,7 +113129,7 @@ const GridDropPreview = observer(() => {
   if (!activeInfo) {
     return null;
   }
-  const { xGU, yGU, widthGU, heightGU, tileWidth, tileHeight } = activeInfo;
+  const { xGU, yGU, widthGU, heightGU, tileWidth, tileHeight, targetPadding } = activeInfo;
   const isFreePos = editStore2.ui.dnd.grid.lazyIsFreePos;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
@@ -113108,7 +113143,13 @@ const GridDropPreview = observer(() => {
         positionAnchor: getWidgetDropAreaAnchorName(
           dropTargetId,
           dropTargetWidgetType
-        )
+        ),
+        ...targetPadding && {
+          paddingTop: `${((_a2 = targetPadding.top) == null ? void 0 : _a2.value) ?? 0}px`,
+          paddingRight: `${((_b2 = targetPadding.right) == null ? void 0 : _b2.value) ?? 0}px`,
+          paddingBottom: `${((_c2 = targetPadding.bottom) == null ? void 0 : _c2.value) ?? 0}px`,
+          paddingLeft: `${((_d2 = targetPadding.left) == null ? void 0 : _d2.value) ?? 0}px`
+        }
       },
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -113117,7 +113158,7 @@ const GridDropPreview = observer(() => {
             className: "sb-edit-drag-preview",
             "data-is-valid-drop": isFreePos,
             style: {
-              position: "absolute",
+              position: "relative",
               width: widthGU * tileWidth,
               height: heightGU * tileHeight,
               top: yGU * tileHeight,
@@ -114432,6 +114473,8 @@ const NamePillDiv = (params) => {
         right: "anchor(right)",
         positionAnchor: getWidgetRectAnchorName(instanceId),
         visibility: anyIsDragging ? "hidden" : "visible",
+        marginTop: "1px",
+        marginBottom: "1px",
         ...type5 === "ERROR" && {
           backgroundColor: colors.DANGER
         },
@@ -119857,7 +119900,7 @@ var Item2 = ContextMenuItem$1;
 const ContextMenuContent = "_ContextMenuContent_hv73e_5";
 const ContextMenuItem = "_ContextMenuItem_hv73e_21";
 const ContextMenuLabel = "_ContextMenuLabel_hv73e_57";
-const styles$1 = {
+const styles = {
   ContextMenuContent,
   ContextMenuItem,
   ContextMenuLabel
@@ -119885,8 +119928,8 @@ const RightClickMenu = ({
   );
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Root2, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(Trigger, { children }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Portal2, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Content2, { className: styles$1.ContextMenuContent, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(Label2, { className: styles$1.ContextMenuLabel, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Portal2, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Content2, { className: styles.ContextMenuContent, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Label2, { className: styles.ContextMenuLabel, children: [
         "Add component to ",
         props.componentName
       ] }),
@@ -119894,7 +119937,7 @@ const RightClickMenu = ({
         (componentType) => /* @__PURE__ */ jsxRuntimeExports.jsx(
           Item2,
           {
-            className: styles$1.ContextMenuItem,
+            className: styles.ContextMenuItem,
             onSelect: () => handleOnSelect(componentType),
             children: componentType
           },
@@ -120047,7 +120090,7 @@ const EditWrapper = observer(function EditWrapper2(props) {
       }),
       className: "sb-anchor-name",
       "data-can-drag": !isRoot,
-      "data-can-drop": props.isContainer,
+      "data-can-drop": props.isDroppable,
       "data-selected": isSelected,
       "data-has-local-binding": hasLocalBinding,
       id: getEditWrapperId(props.identifier.instanceId),
@@ -120070,7 +120113,7 @@ const EditWrapper = observer(function EditWrapper2(props) {
       children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
         RightClickMenuWrapper,
         {
-          disabled: !props.isContainer,
+          disabled: !props.isDroppable,
           componentName: identifier2.name.isAnonymous ? (meta == null ? void 0 : meta.type) ?? "Unknown" : identifier2.name.value,
           sourceId: identifier2.sourceId,
           scopeName,
@@ -120118,8 +120161,15 @@ const EditWrapper = observer(function EditWrapper2(props) {
       }
     );
   }
-  if (isTypeDroppable(props.type) && !isInCustomComponent && props.type !== "SbModal") {
-    content = /* @__PURE__ */ jsxRuntimeExports.jsx(DroppableWidget, { instanceId: props.identifier.instanceId, children: content });
+  if (isTypeDroppable(props.type) && !isInCustomComponent) {
+    content = /* @__PURE__ */ jsxRuntimeExports.jsx(
+      DroppableWidget,
+      {
+        instanceId: props.identifier.instanceId,
+        dropTargetRef: props.dropTargetRef,
+        children: content
+      }
+    );
   }
   if (props.isCustomComponent) {
     content = /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -120393,6 +120443,7 @@ const registerSbComponent = (type5, config2, Component3) => {
       } = props;
       return rest;
     }, [props]);
+    const dropTargetRef = useRef(null);
     useTrackRuntimeWidget(identifier2.current.instanceId, {
       name: identifier2.current.name,
       type: type5,
@@ -120408,9 +120459,10 @@ const registerSbComponent = (type5, config2, Component3) => {
           type: type5,
           widgetProps,
           component: Component3,
-          isContainer: Boolean(config2.container),
           isCustomComponent: config2.customComponent ?? false,
           identifier: identifier2.current,
+          dropTargetRef,
+          isDroppable: config2.container ?? false,
           children: props.children
         }
       );
@@ -120430,6 +120482,7 @@ const registerSbComponent = (type5, config2, Component3) => {
   SbComponent.sbType = type5;
   SbComponent.displayName = type5;
   SbComponent.isCustomComponent = config2.customComponent ?? false;
+  SbComponent.isDroppable = config2.container ?? false;
   SbComponent.hideInRightClickMenu = type5 === "SbColumn" || type5 === "SbSection";
   if (config2.customComponent) {
     rootStore.componentRegistry.addCustomComponent(type5, SbComponent);
@@ -121606,10 +121659,6 @@ const generateClassName = (seed2) => {
   return `superblocks_widget_${seed2}`;
 };
 const getCanvasClassName = () => "canvas";
-const dotGridLayer = "_dotGridLayer_35nlx_20";
-const styles = {
-  dotGridLayer
-};
 const getChildName = (child) => {
   return child.props.name ?? child.props[WIDGET_SOURCE_ID_ATTRIBUTE];
 };
@@ -121742,7 +121791,7 @@ const InternalGrid = ({
   children = EMPTY_ARRAY$1,
   ...props
 }) => {
-  var _a2, _b2;
+  var _a2;
   const isEditing = Boolean((_a2 = rootStore.editStore) == null ? void 0 : _a2.isInitialized);
   const { style: style2, ...passThroughProps } = usePassthroughProps(props);
   const rowHeight = props.rowSize ?? 12;
@@ -121767,9 +121816,9 @@ const InternalGrid = ({
     );
     const positions = childrenArray.reduce(
       (acc, child) => {
-        var _a3, _b3, _c2;
+        var _a3, _b2, _c2;
         let width = ((_a3 = child.props.width) == null ? void 0 : _a3.value) ?? 1;
-        if (((_b3 = child.props.width) == null ? void 0 : _b3.mode) === "fill") {
+        if (((_b2 = child.props.width) == null ? void 0 : _b2.mode) === "fill") {
           width = columns;
         }
         acc[getChildName(child)] = {
@@ -121796,63 +121845,44 @@ const InternalGrid = ({
       ...style2
     };
   }, [columns, props.spacing, rowHeight, style2]);
-  const gridRef = React__default.useRef(null);
-  const collected = {
-    currentOffset: void 0
-  };
-  const isCurrentDropTarget = false;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    DragDisplay,
-    {
-      showGrid: isCurrentDropTarget,
-      pointer: collected.currentOffset,
-      rowSize: rowHeight,
-      columnSize: (((_b2 = gridRef.current) == null ? void 0 : _b2.clientWidth) ?? 1) / columns,
-      passThroughProps,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: gridStyle, ref: gridRef, className: props.className, children: [
-        isCurrentDropTarget,
-        childrenArray.map((child) => {
-          var _a3;
-          const heightMode = child.props.height ?? "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 ${rows}`,
-                gridColumn: `${left2 + 1} / span ${columns2}`,
-                width: "100%",
-                maxWidth: "100%"
-              },
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                Component3,
-                {
-                  staticHeight: (((_a3 = child.props.height) == null ? void 0 : _a3.value) ?? 0) * rowHeight,
-                  onHeightChanged: (height) => {
-                    dispatchHeight({
-                      type: "SET_HEIGHT",
-                      name: getChildName(child),
-                      height
-                    });
-                  },
-                  children: child
-                }
-              )
+  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";
+    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 ${rows}`,
+          gridColumn: `${left2 + 1} / span ${columns2}`,
+          width: "100%",
+          maxWidth: "100%"
+        },
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Component3,
+          {
+            staticHeight: (((_a3 = child.props.height) == null ? void 0 : _a3.value) ?? 0) * rowHeight,
+            onHeightChanged: (height) => {
+              dispatchHeight({
+                type: "SET_HEIGHT",
+                name: getChildName(child),
+                height
+              });
             },
-            getChildName(child)
-          );
-        })
-      ] })
-    }
-  );
+            children: child
+          }
+        )
+      },
+      getChildName(child)
+    );
+  }) }) });
 };
 const DragDisplay = (props) => {
-  const pointerSize = 8;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
       style: {
@@ -121861,32 +121891,7 @@ const DragDisplay = (props) => {
         height: "100%"
       },
       ...props.passThroughProps,
-      children: [
-        props.showGrid && /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "div",
-          {
-            className: styles.dotGridLayer,
-            style: {
-              backgroundSize: `${props.columnSize}px ${props.rowSize}px`
-            }
-          }
-        ),
-        props.children,
-        props.pointer && /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              left: props.pointer.x - pointerSize / 2,
-              top: props.pointer.y - pointerSize / 2,
-              width: pointerSize,
-              height: pointerSize,
-              backgroundColor: "red",
-              opacity: 0.5
-            }
-          }
-        )
-      ]
+      children: props.children
     }
   );
 };
@@ -122070,12 +122075,6 @@ const InternalContainer = (props) => {
       shouldApplyEmptyContainerMinHeight
     ]
   );
-  const gridProps = {
-    //spacing: props.spacing,
-    columns: props.columns,
-    rows: props.rows,
-    rowSize: props.rowSize
-  };
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     StyledContainerWrapper,
     {
@@ -122090,7 +122089,9 @@ const InternalContainer = (props) => {
           spacing: props.spacing ?? Dim.px(0),
           isVisible: props.isVisible ?? true,
           "data-container-layer": "container-inner-grid",
-          ...gridProps,
+          columns: props.columns,
+          rows: props.rows,
+          rowSize: props.rowSize,
           children: props.children
         }
       ) : props.layout === "horizontal" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -137191,6 +137192,7 @@ const ModalComponent = (props) => {
           props.isEditing ? /* @__PURE__ */ jsxRuntimeExports.jsx(
             "div",
             {
+              ref: props.dropTargetRef,
               id: getEditWrapperIdWithType(props.instanceId, "SbModal"),
               style: {
                 anchorName: getWidgetDropAreaAnchorName(
@@ -137198,7 +137200,7 @@ const ModalComponent = (props) => {
                   "SbModal"
                 )
               },
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx(DroppableWidget, { instanceId: props.instanceId, children: modalInternalContainer })
+              children: modalInternalContainer
             }
           ) : modalInternalContainer
         ]
@@ -137287,7 +137289,7 @@ const SbModal = registerSbComponent(
     const passThroughProps = usePassthroughProps(props);
     const { update } = useActions();
     const { features, isEditing } = useEditor();
-    const { onOpen, onClose: onClose2 } = props;
+    const { onOpen, onClose: onClose2, dropTargetRef } = props;
     const selectedInstanceId = features.selectWidget.value;
     const modalInstanceId = props[WIDGET_INSTANCE_ID_ATTRIBUTE];
     const modalSourceId = props[WIDGET_SOURCE_ID_ATTRIBUTE];
@@ -137399,6 +137401,7 @@ const SbModal = registerSbComponent(
         columns: props.columns,
         rows: props.rows,
         rowSize: props.rowSize,
+        dropTargetRef,
         children: props.children
       }
     );
@@ -147475,14 +147478,14 @@ function getLoaderFn(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-Die2eFiY.js"
+            "./allPathsLoader-BvaaZMn9.js"
           )];
         case 2:
           return [2, _b2.sent().allPathsLoader];
         case 3:
           return [4, import(
             /* webpackChunkName: "blueprint-icons-split-paths-by-size-loader" */
-            "./splitPathsBySizeLoader-v13UHQHK.js"
+            "./splitPathsBySizeLoader-psMb-p7U.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -195984,4 +195987,4 @@ export {
   SbProvider as y,
   SbEventFlow as z
 };
-//# sourceMappingURL=index-C7S72F_O.js.map
+//# sourceMappingURL=index-DKNEuHsi.js.map