@measured/puck 0.12.1-canary.9470ff9 → 0.13.0-canary.194c4e5

package/dist/index.js

@@ -760,7 +760,7 @@ var require_factoryWithTypeCheckers = __commonJS({
         function validate(props, propName, componentName, location, propFullName) {
           if (!(props[propName] instanceof expectedClass)) {
             var expectedClassName = expectedClass.name || ANONYMOUS;
-            var actualClassName = getClassName20(props[propName]);
+            var actualClassName = getClassName21(props[propName]);
             return new PropTypeError("Invalid " + location + " `" + propFullName + "` of type " + ("`" + actualClassName + "` supplied to `" + componentName + "`, expected ") + ("instance of `" + expectedClassName + "`."));
           }
           return null;
@@ -1012,7 +1012,7 @@ var require_factoryWithTypeCheckers = __commonJS({
             return type;
         }
       }
-      function getClassName20(propValue) {
+      function getClassName21(propValue) {
         if (!propValue.constructor || !propValue.constructor.name) {
           return ANONYMOUS;
         }
@@ -8989,9 +8989,9 @@ var require_react_dom_development = __commonJS({
         if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== "undefined" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart === "function") {
           __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
         }
-        var React20 = require("react");
+        var React22 = require("react");
         var Scheduler = require_scheduler();
-        var ReactSharedInternals = React20.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+        var ReactSharedInternals = React22.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
         var suppressWarning = false;
         function setSuppressWarning(newSuppressWarning) {
           {
@@ -10596,7 +10596,7 @@ var require_react_dom_development = __commonJS({
           {
             if (props.value == null) {
               if (typeof props.children === "object" && props.children !== null) {
-                React20.Children.forEach(props.children, function(child) {
+                React22.Children.forEach(props.children, function(child) {
                   if (child == null) {
                     return;
                   }
@@ -19043,7 +19043,7 @@ var require_react_dom_development = __commonJS({
           }
         }
         var fakeInternalInstance = {};
-        var emptyRefsObject = new React20.Component().refs;
+        var emptyRefsObject = new React22.Component().refs;
         var didWarnAboutStateAssignmentForComponent;
         var didWarnAboutUninitializedState;
         var didWarnAboutGetSnapshotBeforeUpdateWithoutDidUpdate;
@@ -30108,7 +30108,9 @@ __export(core_exports, {
   Puck: () => Puck,
   Render: () => Render,
   dropZoneContext: () => dropZoneContext,
-  resolveAllData: () => resolveAllData
+  migrate: () => migrate,
+  resolveAllData: () => resolveAllData,
+  transformProps: () => transformProps
 });
 module.exports = __toCommonJS(core_exports);
 init_react_import();
@@ -30170,9 +30172,11 @@ var Button = ({
   newTab,
   fullWidth,
   icon,
-  size = "medium"
+  size = "medium",
+  loading: loadingProp = false
 }) => {
-  const [loading, setLoading] = (0, import_react2.useState)(false);
+  const [loading, setLoading] = (0, import_react2.useState)(loadingProp);
+  (0, import_react2.useEffect)(() => setLoading(loadingProp), [loadingProp]);
   const ElementType = href ? "a" : "button";
   const el = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     ElementType,
@@ -30213,11 +30217,11 @@ var Button = ({
 
 // components/DropZone/index.tsx
 init_react_import();
-var import_react25 = require("react");
+var import_react27 = require("react");
 
 // components/DraggableComponent/index.tsx
 init_react_import();
-var import_react22 = require("react");
+var import_react24 = require("react");
 var import_dnd = require("@hello-pangea/dnd");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css#css-module
@@ -31284,7 +31288,7 @@ Lock.propTypes = {
 Lock.displayName = "Lock";
 var lock_default = Lock;
 
-// ../../node_modules/react-feather/dist/icons/plus.js
+// ../../node_modules/react-feather/dist/icons/more-vertical.js
 init_react_import();
 var import_react16 = __toESM(require("react"));
 var import_prop_types14 = __toESM(require_prop_types());
@@ -31334,7 +31338,7 @@ function _objectWithoutPropertiesLoose14(source, excluded) {
   }
   return target;
 }
-var Plus = (0, import_react16.forwardRef)(function(_ref, ref) {
+var MoreVertical = (0, import_react16.forwardRef)(function(_ref, ref) {
   var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, _ref$size = _ref.size, size = _ref$size === void 0 ? 24 : _ref$size, rest = _objectWithoutProperties14(_ref, ["color", "size"]);
   return /* @__PURE__ */ import_react16.default.createElement("svg", _extends14({
     ref,
@@ -31347,26 +31351,28 @@ var Plus = (0, import_react16.forwardRef)(function(_ref, ref) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, rest), /* @__PURE__ */ import_react16.default.createElement("line", {
-    x1: "12",
-    y1: "5",
-    x2: "12",
-    y2: "19"
-  }), /* @__PURE__ */ import_react16.default.createElement("line", {
-    x1: "5",
-    y1: "12",
-    x2: "19",
-    y2: "12"
+  }, rest), /* @__PURE__ */ import_react16.default.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "1"
+  }), /* @__PURE__ */ import_react16.default.createElement("circle", {
+    cx: "12",
+    cy: "5",
+    r: "1"
+  }), /* @__PURE__ */ import_react16.default.createElement("circle", {
+    cx: "12",
+    cy: "19",
+    r: "1"
   }));
 });
-Plus.propTypes = {
+MoreVertical.propTypes = {
   color: import_prop_types14.default.string,
   size: import_prop_types14.default.oneOfType([import_prop_types14.default.string, import_prop_types14.default.number])
 };
-Plus.displayName = "Plus";
-var plus_default = Plus;
+MoreVertical.displayName = "MoreVertical";
+var more_vertical_default = MoreVertical;
 
-// ../../node_modules/react-feather/dist/icons/sidebar.js
+// ../../node_modules/react-feather/dist/icons/plus.js
 init_react_import();
 var import_react17 = __toESM(require("react"));
 var import_prop_types15 = __toESM(require_prop_types());
@@ -31416,7 +31422,7 @@ function _objectWithoutPropertiesLoose15(source, excluded) {
   }
   return target;
 }
-var Sidebar = (0, import_react17.forwardRef)(function(_ref, ref) {
+var Plus = (0, import_react17.forwardRef)(function(_ref, ref) {
   var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, _ref$size = _ref.size, size = _ref$size === void 0 ? 24 : _ref$size, rest = _objectWithoutProperties15(_ref, ["color", "size"]);
   return /* @__PURE__ */ import_react17.default.createElement("svg", _extends15({
     ref,
@@ -31429,28 +31435,26 @@ var Sidebar = (0, import_react17.forwardRef)(function(_ref, ref) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, rest), /* @__PURE__ */ import_react17.default.createElement("rect", {
-    x: "3",
-    y: "3",
-    width: "18",
-    height: "18",
-    rx: "2",
-    ry: "2"
+  }, rest), /* @__PURE__ */ import_react17.default.createElement("line", {
+    x1: "12",
+    y1: "5",
+    x2: "12",
+    y2: "19"
   }), /* @__PURE__ */ import_react17.default.createElement("line", {
-    x1: "9",
-    y1: "3",
-    x2: "9",
-    y2: "21"
+    x1: "5",
+    y1: "12",
+    x2: "19",
+    y2: "12"
   }));
 });
-Sidebar.propTypes = {
+Plus.propTypes = {
   color: import_prop_types15.default.string,
   size: import_prop_types15.default.oneOfType([import_prop_types15.default.string, import_prop_types15.default.number])
 };
-Sidebar.displayName = "Sidebar";
-var sidebar_default = Sidebar;
+Plus.displayName = "Plus";
+var plus_default = Plus;
 
-// ../../node_modules/react-feather/dist/icons/trash.js
+// ../../node_modules/react-feather/dist/icons/search.js
 init_react_import();
 var import_react18 = __toESM(require("react"));
 var import_prop_types16 = __toESM(require_prop_types());
@@ -31500,7 +31504,7 @@ function _objectWithoutPropertiesLoose16(source, excluded) {
   }
   return target;
 }
-var Trash = (0, import_react18.forwardRef)(function(_ref, ref) {
+var Search = (0, import_react18.forwardRef)(function(_ref, ref) {
   var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, _ref$size = _ref.size, size = _ref$size === void 0 ? 24 : _ref$size, rest = _objectWithoutProperties16(_ref, ["color", "size"]);
   return /* @__PURE__ */ import_react18.default.createElement("svg", _extends16({
     ref,
@@ -31513,20 +31517,25 @@ var Trash = (0, import_react18.forwardRef)(function(_ref, ref) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, rest), /* @__PURE__ */ import_react18.default.createElement("polyline", {
-    points: "3 6 5 6 21 6"
-  }), /* @__PURE__ */ import_react18.default.createElement("path", {
-    d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
+  }, rest), /* @__PURE__ */ import_react18.default.createElement("circle", {
+    cx: "11",
+    cy: "11",
+    r: "8"
+  }), /* @__PURE__ */ import_react18.default.createElement("line", {
+    x1: "21",
+    y1: "21",
+    x2: "16.65",
+    y2: "16.65"
   }));
 });
-Trash.propTypes = {
+Search.propTypes = {
   color: import_prop_types16.default.string,
   size: import_prop_types16.default.oneOfType([import_prop_types16.default.string, import_prop_types16.default.number])
 };
-Trash.displayName = "Trash";
-var trash_default = Trash;
+Search.displayName = "Search";
+var search_default = Search;
 
-// ../../node_modules/react-feather/dist/icons/type.js
+// ../../node_modules/react-feather/dist/icons/sidebar.js
 init_react_import();
 var import_react19 = __toESM(require("react"));
 var import_prop_types17 = __toESM(require_prop_types());
@@ -31576,7 +31585,7 @@ function _objectWithoutPropertiesLoose17(source, excluded) {
   }
   return target;
 }
-var Type = (0, import_react19.forwardRef)(function(_ref, ref) {
+var Sidebar = (0, import_react19.forwardRef)(function(_ref, ref) {
   var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, _ref$size = _ref.size, size = _ref$size === void 0 ? 24 : _ref$size, rest = _objectWithoutProperties17(_ref, ["color", "size"]);
   return /* @__PURE__ */ import_react19.default.createElement("svg", _extends17({
     ref,
@@ -31589,28 +31598,28 @@ var Type = (0, import_react19.forwardRef)(function(_ref, ref) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, rest), /* @__PURE__ */ import_react19.default.createElement("polyline", {
-    points: "4 7 4 4 20 4 20 7"
+  }, rest), /* @__PURE__ */ import_react19.default.createElement("rect", {
+    x: "3",
+    y: "3",
+    width: "18",
+    height: "18",
+    rx: "2",
+    ry: "2"
   }), /* @__PURE__ */ import_react19.default.createElement("line", {
     x1: "9",
-    y1: "20",
-    x2: "15",
-    y2: "20"
-  }), /* @__PURE__ */ import_react19.default.createElement("line", {
-    x1: "12",
-    y1: "4",
-    x2: "12",
-    y2: "20"
+    y1: "3",
+    x2: "9",
+    y2: "21"
   }));
 });
-Type.propTypes = {
+Sidebar.propTypes = {
   color: import_prop_types17.default.string,
   size: import_prop_types17.default.oneOfType([import_prop_types17.default.string, import_prop_types17.default.number])
 };
-Type.displayName = "Type";
-var type_default = Type;
+Sidebar.displayName = "Sidebar";
+var sidebar_default = Sidebar;
 
-// ../../node_modules/react-feather/dist/icons/unlock.js
+// ../../node_modules/react-feather/dist/icons/trash.js
 init_react_import();
 var import_react20 = __toESM(require("react"));
 var import_prop_types18 = __toESM(require_prop_types());
@@ -31660,7 +31669,7 @@ function _objectWithoutPropertiesLoose18(source, excluded) {
   }
   return target;
 }
-var Unlock = (0, import_react20.forwardRef)(function(_ref, ref) {
+var Trash = (0, import_react20.forwardRef)(function(_ref, ref) {
   var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, _ref$size = _ref.size, size = _ref$size === void 0 ? 24 : _ref$size, rest = _objectWithoutProperties18(_ref, ["color", "size"]);
   return /* @__PURE__ */ import_react20.default.createElement("svg", _extends18({
     ref,
@@ -31673,30 +31682,190 @@ var Unlock = (0, import_react20.forwardRef)(function(_ref, ref) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, rest), /* @__PURE__ */ import_react20.default.createElement("rect", {
+  }, rest), /* @__PURE__ */ import_react20.default.createElement("polyline", {
+    points: "3 6 5 6 21 6"
+  }), /* @__PURE__ */ import_react20.default.createElement("path", {
+    d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
+  }));
+});
+Trash.propTypes = {
+  color: import_prop_types18.default.string,
+  size: import_prop_types18.default.oneOfType([import_prop_types18.default.string, import_prop_types18.default.number])
+};
+Trash.displayName = "Trash";
+var trash_default = Trash;
+
+// ../../node_modules/react-feather/dist/icons/type.js
+init_react_import();
+var import_react21 = __toESM(require("react"));
+var import_prop_types19 = __toESM(require_prop_types());
+function _extends19() {
+  _extends19 = Object.assign || function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends19.apply(this, arguments);
+}
+function _objectWithoutProperties19(source, excluded) {
+  if (source == null)
+    return {};
+  var target = _objectWithoutPropertiesLoose19(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0)
+        continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key))
+        continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+function _objectWithoutPropertiesLoose19(source, excluded) {
+  if (source == null)
+    return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0)
+      continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+var Type = (0, import_react21.forwardRef)(function(_ref, ref) {
+  var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, _ref$size = _ref.size, size = _ref$size === void 0 ? 24 : _ref$size, rest = _objectWithoutProperties19(_ref, ["color", "size"]);
+  return /* @__PURE__ */ import_react21.default.createElement("svg", _extends19({
+    ref,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, rest), /* @__PURE__ */ import_react21.default.createElement("polyline", {
+    points: "4 7 4 4 20 4 20 7"
+  }), /* @__PURE__ */ import_react21.default.createElement("line", {
+    x1: "9",
+    y1: "20",
+    x2: "15",
+    y2: "20"
+  }), /* @__PURE__ */ import_react21.default.createElement("line", {
+    x1: "12",
+    y1: "4",
+    x2: "12",
+    y2: "20"
+  }));
+});
+Type.propTypes = {
+  color: import_prop_types19.default.string,
+  size: import_prop_types19.default.oneOfType([import_prop_types19.default.string, import_prop_types19.default.number])
+};
+Type.displayName = "Type";
+var type_default = Type;
+
+// ../../node_modules/react-feather/dist/icons/unlock.js
+init_react_import();
+var import_react22 = __toESM(require("react"));
+var import_prop_types20 = __toESM(require_prop_types());
+function _extends20() {
+  _extends20 = Object.assign || function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends20.apply(this, arguments);
+}
+function _objectWithoutProperties20(source, excluded) {
+  if (source == null)
+    return {};
+  var target = _objectWithoutPropertiesLoose20(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0)
+        continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key))
+        continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+function _objectWithoutPropertiesLoose20(source, excluded) {
+  if (source == null)
+    return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0)
+      continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+var Unlock = (0, import_react22.forwardRef)(function(_ref, ref) {
+  var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, _ref$size = _ref.size, size = _ref$size === void 0 ? 24 : _ref$size, rest = _objectWithoutProperties20(_ref, ["color", "size"]);
+  return /* @__PURE__ */ import_react22.default.createElement("svg", _extends20({
+    ref,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, rest), /* @__PURE__ */ import_react22.default.createElement("rect", {
     x: "3",
     y: "11",
     width: "18",
     height: "11",
     rx: "2",
     ry: "2"
-  }), /* @__PURE__ */ import_react20.default.createElement("path", {
+  }), /* @__PURE__ */ import_react22.default.createElement("path", {
     d: "M7 11V7a5 5 0 0 1 9.9-1"
   }));
 });
 Unlock.propTypes = {
-  color: import_prop_types18.default.string,
-  size: import_prop_types18.default.oneOfType([import_prop_types18.default.string, import_prop_types18.default.number])
+  color: import_prop_types20.default.string,
+  size: import_prop_types20.default.oneOfType([import_prop_types20.default.string, import_prop_types20.default.number])
 };
 Unlock.displayName = "Unlock";
 var unlock_default = Unlock;
 
 // lib/use-modifier-held.ts
 init_react_import();
-var import_react21 = require("react");
+var import_react23 = require("react");
 var useModifierHeld = (modifier) => {
-  const [modifierHeld, setModifierHeld] = (0, import_react21.useState)(false);
-  (0, import_react21.useEffect)(() => {
+  const [modifierHeld, setModifierHeld] = (0, import_react23.useState)(false);
+  (0, import_react23.useEffect)(() => {
     function downHandler({ key }) {
       if (key === modifier) {
         setModifierHeld(true);
@@ -31744,7 +31913,7 @@ var DraggableComponent = ({
   style
 }) => {
   const isModifierHeld = useModifierHeld("Alt");
-  (0, import_react22.useEffect)(onMount, []);
+  (0, import_react24.useEffect)(onMount, []);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     import_dnd.Draggable,
     {
@@ -31851,7 +32020,7 @@ var styles_module_default2 = { "DropZone": "_DropZone_1akqa_1", "DropZone-conten
 
 // components/DropZone/context.tsx
 init_react_import();
-var import_react23 = require("react");
+var import_react25 = require("react");
 var import_use_debounce = require("use-debounce");
 
 // lib/get-zone-id.ts
@@ -31868,29 +32037,29 @@ var getZoneId = (zoneCompound) => {
 
 // components/DropZone/context.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var dropZoneContext = (0, import_react23.createContext)(null);
+var dropZoneContext = (0, import_react25.createContext)(null);
 var DropZoneProvider = ({
   children,
   value
 }) => {
-  const [hoveringArea, setHoveringArea] = (0, import_react23.useState)(null);
-  const [hoveringZone, setHoveringZone] = (0, import_react23.useState)(
+  const [hoveringArea, setHoveringArea] = (0, import_react25.useState)(null);
+  const [hoveringZone, setHoveringZone] = (0, import_react25.useState)(
     rootDroppableId
   );
-  const [hoveringComponent, setHoveringComponent] = (0, import_react23.useState)();
+  const [hoveringComponent, setHoveringComponent] = (0, import_react25.useState)();
   const [hoveringAreaDb] = (0, import_use_debounce.useDebounce)(hoveringArea, 75, { leading: false });
-  const [areasWithZones, setAreasWithZones] = (0, import_react23.useState)(
+  const [areasWithZones, setAreasWithZones] = (0, import_react25.useState)(
     {}
   );
-  const [activeZones, setActiveZones] = (0, import_react23.useState)({});
+  const [activeZones, setActiveZones] = (0, import_react25.useState)({});
   const { dispatch = null } = value ? value : {};
-  const registerZoneArea = (0, import_react23.useCallback)(
+  const registerZoneArea = (0, import_react25.useCallback)(
     (area) => {
       setAreasWithZones((latest) => __spreadProps(__spreadValues({}, latest), { [area]: true }));
     },
     [setAreasWithZones]
   );
-  const registerZone = (0, import_react23.useCallback)(
+  const registerZone = (0, import_react25.useCallback)(
     (zoneCompound) => {
       if (!dispatch) {
         return;
@@ -31903,7 +32072,7 @@ var DropZoneProvider = ({
     },
     [setActiveZones, dispatch]
   );
-  const unregisterZone = (0, import_react23.useCallback)(
+  const unregisterZone = (0, import_react25.useCallback)(
     (zoneCompound) => {
       if (!dispatch) {
         return;
@@ -31918,8 +32087,8 @@ var DropZoneProvider = ({
     },
     [setActiveZones, dispatch]
   );
-  const [pathData, setPathData] = (0, import_react23.useState)();
-  const registerPath = (0, import_react23.useCallback)(
+  const [pathData, setPathData] = (0, import_react25.useState)();
+  const registerPath = (0, import_react25.useCallback)(
     (selector) => {
       if (!(value == null ? void 0 : value.data)) {
         return;
@@ -31969,9 +32138,9 @@ var DropZoneProvider = ({
 
 // components/Puck/context.tsx
 init_react_import();
-var import_react24 = require("react");
+var import_react26 = require("react");
 var defaultAppState = {
-  data: { content: [], root: { title: "" } },
+  data: { content: [], root: { props: { title: "" } } },
   ui: {
     leftSideBarVisible: true,
     rightSideBarVisible: true,
@@ -31980,7 +32149,7 @@ var defaultAppState = {
     componentList: {}
   }
 };
-var appContext = (0, import_react24.createContext)({
+var appContext = (0, import_react26.createContext)({
   state: defaultAppState,
   dispatch: () => null,
   config: { components: {} },
@@ -31988,7 +32157,7 @@ var appContext = (0, import_react24.createContext)({
 });
 var AppProvider = appContext.Provider;
 var useAppContext = () => {
-  const mainContext = (0, import_react24.useContext)(appContext);
+  const mainContext = (0, import_react26.useContext)(appContext);
   const selectedItem = mainContext.state.ui.itemSelector ? getItem(mainContext.state.ui.itemSelector, mainContext.state.data) : void 0;
   return __spreadProps(__spreadValues({}, mainContext), {
     // Helpers
@@ -32006,10 +32175,10 @@ var useAppContext = () => {
 // components/DropZone/index.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var getClassName3 = get_class_name_factory_default("DropZone", styles_module_default2);
-function DropZoneEdit({ zone, style }) {
+function DropZoneEdit({ zone, allow, disallow, style }) {
   var _a;
   const appContext2 = useAppContext();
-  const ctx = (0, import_react25.useContext)(dropZoneContext);
+  const ctx = (0, import_react27.useContext)(dropZoneContext);
   const {
     // These all need setting via context
     data,
@@ -32026,12 +32195,12 @@ function DropZoneEdit({ zone, style }) {
   } = ctx || {};
   let content = data.content || [];
   let zoneCompound = rootDroppableId;
-  (0, import_react25.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (areaId && registerZoneArea) {
       registerZoneArea(areaId);
     }
   }, [areaId]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (ctx == null ? void 0 : ctx.registerZone) {
       ctx == null ? void 0 : ctx.registerZone(zoneCompound);
     }
@@ -32052,7 +32221,7 @@ function DropZoneEdit({ zone, style }) {
   const draggedDestinationId = draggedItem && ((_a = draggedItem.destination) == null ? void 0 : _a.droppableId);
   const [zoneArea] = getZoneId(zoneCompound);
   const [draggedSourceArea] = getZoneId(draggedSourceId);
-  const [userWillDrag, setUserWillDrag] = (0, import_react25.useState)(false);
+  const [userWillDrag, setUserWillDrag] = (0, import_react27.useState)(false);
   const userIsDragging = !!draggedItem;
   const draggingOverArea = userIsDragging && zoneArea === draggedSourceArea;
   const draggingNewComponent = draggedSourceId == null ? void 0 : draggedSourceId.startsWith("component-list");
@@ -32076,6 +32245,22 @@ function DropZoneEdit({ zone, style }) {
       isEnabled = draggingOverArea && hoveringOverZone;
     }
   }
+  if (isEnabled && userIsDragging && (allow || disallow)) {
+    const [_, componentType] = draggedItem.draggableId.split("::");
+    if (disallow) {
+      const defaultedAllow = allow || [];
+      const filteredDisallow = (disallow || []).filter(
+        (item) => defaultedAllow.indexOf(item) === -1
+      );
+      if (filteredDisallow.indexOf(componentType) !== -1) {
+        isEnabled = false;
+      }
+    } else if (allow) {
+      if (allow.indexOf(componentType) === -1) {
+        isEnabled = false;
+      }
+    }
+  }
   const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
   const isAreaSelected = selectedItem && zoneArea === selectedItem.props.id;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -32254,7 +32439,7 @@ function DropZoneEdit({ zone, style }) {
   );
 }
 function DropZoneRender({ zone }) {
-  const ctx = (0, import_react25.useContext)(dropZoneContext);
+  const ctx = (0, import_react27.useContext)(dropZoneContext);
   const { data, areaId = "root", config } = ctx || {};
   let zoneCompound = rootDroppableId;
   let content = (data == null ? void 0 : data.content) || [];
@@ -32286,7 +32471,7 @@ function DropZoneRender({ zone }) {
   }) });
 }
 function DropZone(props) {
-  const ctx = (0, import_react25.useContext)(dropZoneContext);
+  const ctx = (0, import_react27.useContext)(dropZoneContext);
   if ((ctx == null ? void 0 : ctx.mode) === "edit") {
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DropZoneEdit, __spreadValues({}, props));
   }
@@ -32298,7 +32483,7 @@ init_react_import();
 
 // components/IconButton/IconButton.tsx
 init_react_import();
-var import_react26 = require("react");
+var import_react28 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/IconButton/IconButton.module.css#css-module
 init_react_import();
@@ -32320,7 +32505,7 @@ var IconButton = ({
   fullWidth,
   title
 }) => {
-  const [loading, setLoading] = (0, import_react26.useState)(false);
+  const [loading, setLoading] = (0, import_react28.useState)(false);
   const ElementType = href ? "a" : "button";
   const el = /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     ElementType,
@@ -32361,7 +32546,7 @@ var IconButton = ({
 
 // components/Puck/index.tsx
 init_react_import();
-var import_react39 = require("react");
+var import_react41 = require("react");
 var import_dnd7 = require("@hello-pangea/dnd");
 
 // components/InputOrGroup/index.tsx
@@ -32372,7 +32557,7 @@ init_react_import();
 var styles_module_default3 = { "Input": "_Input_1jyrm_1", "Input-label": "_Input-label_1jyrm_27", "Input-labelIcon": "_Input-labelIcon_1jyrm_35", "Input-disabledIcon": "_Input-disabledIcon_1jyrm_41", "Input-input": "_Input-input_1jyrm_46", "Input--readOnly": "_Input--readOnly_1jyrm_69", "Input-radioGroupItems": "_Input-radioGroupItems_1jyrm_87", "Input-radio": "_Input-radio_1jyrm_87", "Input-radioInner": "_Input-radioInner_1jyrm_104", "Input-radioInput": "_Input-radioInput_1jyrm_126" };
 
 // components/InputOrGroup/index.tsx
-var import_react31 = require("react");
+var import_react33 = require("react");
 
 // components/InputOrGroup/fields/index.tsx
 init_react_import();
@@ -32437,7 +32622,7 @@ var Draggable2 = ({
 };
 
 // components/InputOrGroup/fields/ArrayField/index.tsx
-var import_react27 = require("react");
+var import_react29 = require("react");
 
 // components/DragIcon/index.tsx
 init_react_import();
@@ -32470,17 +32655,16 @@ var ArrayField = ({
     items: Array.from(value || []).map((item, idx) => {
       return {
         _originalIndex: idx,
-        _arrayId: `${id}-${idx}`,
-        data: item
+        _arrayId: `${id}-${idx}`
       };
     }),
     openId: ""
   };
-  const [localState, setLocalState] = (0, import_react27.useState)({ arrayState, value });
-  (0, import_react27.useEffect)(() => {
+  const [localState, setLocalState] = (0, import_react29.useState)({ arrayState, value });
+  (0, import_react29.useEffect)(() => {
     setLocalState({ arrayState, value });
   }, [value, state.ui.arrayState[id]]);
-  const mapArrayStateToUi = (0, import_react27.useCallback)(
+  const mapArrayStateToUi = (0, import_react29.useCallback)(
     (partialArrayState) => {
       return {
         arrayState: __spreadProps(__spreadValues({}, state.ui.arrayState), {
@@ -32490,31 +32674,35 @@ var ArrayField = ({
     },
     [arrayState]
   );
-  const getHighestIndex = (0, import_react27.useCallback)(() => {
+  const getHighestIndex = (0, import_react29.useCallback)(() => {
     return arrayState.items.reduce(
       (acc, item) => item._originalIndex > acc ? item._originalIndex : acc,
       -1
     );
   }, [arrayState]);
-  const regenerateArrayState = (0, import_react27.useCallback)(
+  const regenerateArrayState = (0, import_react29.useCallback)(
     (value2) => {
       let highestIndex = getHighestIndex();
       const newItems = Array.from(value2 || []).map((item, idx) => {
         var _a;
         const arrayStateItem = arrayState.items[idx];
-        return {
-          _originalIndex: typeof (arrayStateItem == null ? void 0 : arrayStateItem._originalIndex) !== "undefined" ? arrayStateItem._originalIndex : ++highestIndex,
-          _arrayId: ((_a = arrayState.items[idx]) == null ? void 0 : _a._arrayId) || `${id}-${highestIndex}`,
-          data: item
+        const newItem = {
+          _originalIndex: typeof (arrayStateItem == null ? void 0 : arrayStateItem._originalIndex) !== "undefined" ? arrayStateItem._originalIndex : highestIndex + 1,
+          _arrayId: ((_a = arrayState.items[idx]) == null ? void 0 : _a._arrayId) || `${id}-${highestIndex + 1}`
         };
+        if (newItem._originalIndex > highestIndex) {
+          highestIndex = newItem._originalIndex;
+        }
+        return newItem;
       });
       return __spreadProps(__spreadValues({}, arrayState), { items: newItems });
     },
     [arrayState]
   );
-  (0, import_react27.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     setUi(mapArrayStateToUi(arrayState));
   }, []);
+  const [hovering, setHovering] = (0, import_react29.useState)(false);
   if (field.type !== "array" || !field.arrayFields) {
     return null;
   }
@@ -32561,6 +32749,14 @@ var ArrayField = ({
                   isDraggingFrom: !!snapshot.draggingFromThisWith,
                   hasItems: Array.isArray(value) && value.length > 0
                 }),
+                onMouseOver: (e) => {
+                  e.stopPropagation();
+                  setHovering(true);
+                },
+                onMouseOut: (e) => {
+                  e.stopPropagation();
+                  setHovering(false);
+                },
                 children: [
                   localState.arrayState.items.map((item, i) => {
                     const { _arrayId = `${id}-${i}`, _originalIndex = i } = item;
@@ -32575,7 +32771,7 @@ var ArrayField = ({
                           isDragging: snapshot2 == null ? void 0 : snapshot2.isDragging,
                           readOnly
                         }),
-                        isDragDisabled: readOnly,
+                        isDragDisabled: readOnly || !hovering,
                         children: () => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
                           /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                             "div",
@@ -32638,16 +32834,17 @@ var ArrayField = ({
                                 {
                                   name: subFieldName,
                                   label: subField.label || fieldName,
-                                  id: `${id}_${fieldName}`,
+                                  id: `${_arrayId}_${fieldName}`,
                                   readOnly: typeof readOnlyFields[subFieldName] !== "undefined" ? readOnlyFields[subFieldName] : readOnlyFields[wildcardFieldName],
                                   readOnlyFields,
                                   field: subField,
                                   value: data[fieldName],
-                                  onChange: (val) => {
+                                  onChange: (val, ui) => {
                                     onChange(
                                       replace(value, i, __spreadProps(__spreadValues({}, data), {
                                         [fieldName]: val
-                                      }))
+                                      })),
+                                      ui
                                     );
                                   }
                                 },
@@ -32734,19 +32931,19 @@ var DefaultField = ({
 
 // components/InputOrGroup/fields/ExternalField/index.tsx
 init_react_import();
-var import_react30 = require("react");
+var import_react32 = require("react");
 
 // components/ExternalInput/index.tsx
 init_react_import();
-var import_react29 = require("react");
+var import_react31 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ExternalInput/styles.module.css#css-module
 init_react_import();
-var styles_module_default6 = { "ExternalInput": "_ExternalInput_157li_1", "ExternalInput-actions": "_ExternalInput-actions_157li_5", "ExternalInput-button": "_ExternalInput-button_157li_9", "ExternalInput-detachButton": "_ExternalInput-detachButton_157li_28", "ExternalInput--dataSelected": "_ExternalInput--dataSelected_157li_35", "ExternalInputModal": "_ExternalInputModal_157li_56", "ExternalInputModal-masthead": "_ExternalInputModal-masthead_157li_63", "ExternalInputModal-tableWrapper": "_ExternalInputModal-tableWrapper_157li_68", "ExternalInputModal-table": "_ExternalInputModal-table_157li_68", "ExternalInputModal-thead": "_ExternalInputModal-thead_157li_83", "ExternalInputModal-th": "_ExternalInputModal-th_157li_83", "ExternalInputModal-td": "_ExternalInputModal-td_157li_97", "ExternalInputModal-tr": "_ExternalInputModal-tr_157li_102", "ExternalInputModal-tbody": "_ExternalInputModal-tbody_157li_114", "ExternalInputModal--hasData": "_ExternalInputModal--hasData_157li_133", "ExternalInputModal-loadingBanner": "_ExternalInputModal-loadingBanner_157li_137", "ExternalInputModal--isLoading": "_ExternalInputModal--isLoading_157li_145", "ExternalInputModal-noContentBanner": "_ExternalInputModal-noContentBanner_157li_149", "ExternalInputModal--loaded": "_ExternalInputModal--loaded_157li_153" };
+var styles_module_default6 = { "ExternalInput": "_ExternalInput_s6fxy_1", "ExternalInput-actions": "_ExternalInput-actions_s6fxy_5", "ExternalInput-button": "_ExternalInput-button_s6fxy_9", "ExternalInput-detachButton": "_ExternalInput-detachButton_s6fxy_28", "ExternalInput--dataSelected": "_ExternalInput--dataSelected_s6fxy_35", "ExternalInputModal": "_ExternalInputModal_s6fxy_56", "ExternalInputModal-masthead": "_ExternalInputModal-masthead_s6fxy_64", "ExternalInputModal-tableWrapper": "_ExternalInputModal-tableWrapper_s6fxy_72", "ExternalInputModal-table": "_ExternalInputModal-table_s6fxy_72", "ExternalInputModal-thead": "_ExternalInputModal-thead_s6fxy_88", "ExternalInputModal-th": "_ExternalInputModal-th_s6fxy_88", "ExternalInputModal-td": "_ExternalInputModal-td_s6fxy_102", "ExternalInputModal-tr": "_ExternalInputModal-tr_s6fxy_107", "ExternalInputModal-tbody": "_ExternalInputModal-tbody_s6fxy_119", "ExternalInputModal--hasData": "_ExternalInputModal--hasData_s6fxy_138", "ExternalInputModal-loadingBanner": "_ExternalInputModal-loadingBanner_s6fxy_142", "ExternalInputModal--isLoading": "_ExternalInputModal--isLoading_s6fxy_155", "ExternalInputModal-noContentBanner": "_ExternalInputModal-noContentBanner_s6fxy_159", "ExternalInputModal--loaded": "_ExternalInputModal--loaded_s6fxy_166", "ExternalInputModal-searchForm": "_ExternalInputModal-searchForm_s6fxy_171", "ExternalInputModal-search": "_ExternalInputModal-search_s6fxy_171", "ExternalInputModal-searchIcon": "_ExternalInputModal-searchIcon_s6fxy_194", "ExternalInputModal-searchIconText": "_ExternalInputModal-searchIconText_s6fxy_206", "ExternalInputModal-searchInput": "_ExternalInputModal-searchInput_s6fxy_216" };
 
 // components/Modal/index.tsx
 init_react_import();
-var import_react28 = require("react");
+var import_react30 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Modal/styles.module.css#css-module
 init_react_import();
@@ -32761,8 +32958,8 @@ var Modal = ({
   onClose,
   isOpen
 }) => {
-  const [rootEl, setRootEl] = (0, import_react28.useState)(null);
-  (0, import_react28.useEffect)(() => {
+  const [rootEl, setRootEl] = (0, import_react30.useState)(null);
+  (0, import_react30.useEffect)(() => {
     setRootEl(document.getElementById("puck-portal-root"));
   }, []);
   if (!rootEl) {
@@ -32818,10 +33015,10 @@ var ExternalInput = ({
   id
 }) => {
   const { mapProp = (val) => val } = field || {};
-  const [data, setData] = (0, import_react29.useState)([]);
-  const [isOpen, setOpen] = (0, import_react29.useState)(false);
-  const [isLoading, setIsLoading] = (0, import_react29.useState)(true);
-  const keys = (0, import_react29.useMemo)(() => {
+  const [data, setData] = (0, import_react31.useState)([]);
+  const [isOpen, setOpen] = (0, import_react31.useState)(false);
+  const [isLoading, setIsLoading] = (0, import_react31.useState)(true);
+  const keys = (0, import_react31.useMemo)(() => {
     const validKeys = /* @__PURE__ */ new Set();
     for (const item of data) {
       for (const key of Object.keys(item)) {
@@ -32832,15 +33029,22 @@ var ExternalInput = ({
     }
     return Array.from(validKeys);
   }, [data]);
-  (0, import_react29.useEffect)(() => {
-    (() => __async(void 0, null, function* () {
-      const listData = dataCache[name] || (yield field.fetchList());
+  const [searchQuery, setSearchQuery] = (0, import_react31.useState)(field.initialQuery || "");
+  const search = (0, import_react31.useCallback)(
+    (query) => __async(void 0, null, function* () {
+      setIsLoading(true);
+      const cacheKey = `${id}-${name}-${query}`;
+      const listData = dataCache[cacheKey] || (yield field.fetchList({ query }));
       if (listData) {
         setData(listData);
         setIsLoading(false);
-        dataCache[name] = listData;
+        dataCache[cacheKey] = listData;
       }
-    }))();
+    }),
+    [name, field]
+  );
+  (0, import_react31.useEffect)(() => {
+    search(searchQuery);
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "div",
@@ -32880,38 +33084,73 @@ var ExternalInput = ({
             className: getClassNameModal({
               isLoading,
               loaded: !isLoading,
-              hasData: !!data
+              hasData: data.length > 0
             }),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: getClassNameModal("masthead"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Heading, { rank: 2, size: "xxl", children: "Select content" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: getClassNameModal("tableWrapper"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("table", { className: getClassNameModal("table"), children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("thead", { className: getClassNameModal("thead"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tr", { className: getClassNameModal("tr"), children: keys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                  "th",
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: getClassNameModal("masthead"), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Heading, { rank: 2, size: "xxl", children: "Select content" }),
+                field.showSearch && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                  "form",
                   {
-                    className: getClassNameModal("th"),
-                    style: { textAlign: "left" },
-                    children: key
-                  },
-                  key
-                )) }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tbody", { className: getClassNameModal("tbody"), children: data.map((item, i) => {
-                  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                    "tr",
+                    className: getClassNameModal("searchForm"),
+                    onSubmit: (e) => {
+                      e.preventDefault();
+                      search(searchQuery);
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: getClassNameModal("search"), children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: getClassNameModal("searchIconText"), children: "Search" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: getClassNameModal("searchIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(search_default, { size: "18" }) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                          "input",
+                          {
+                            className: getClassNameModal("searchInput"),
+                            name: "q",
+                            type: "search",
+                            placeholder: "Search",
+                            onChange: (e) => {
+                              setSearchQuery(e.currentTarget.value);
+                            },
+                            autoComplete: "off",
+                            value: searchQuery
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { type: "submit", loading: isLoading, disabled: isLoading, children: "Search" })
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: getClassNameModal("tableWrapper"), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("table", { className: getClassNameModal("table"), children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("thead", { className: getClassNameModal("thead"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tr", { className: getClassNameModal("tr"), children: keys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                    "th",
                     {
-                      style: { whiteSpace: "nowrap" },
-                      className: getClassNameModal("tr"),
-                      onClick: (e) => {
-                        onChange(mapProp(item));
-                        setOpen(false);
-                      },
-                      children: keys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("td", { className: getClassNameModal("td"), children: item[key] }, key))
+                      className: getClassNameModal("th"),
+                      style: { textAlign: "left" },
+                      children: key
                     },
-                    i
-                  );
-                }) })
-              ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: getClassNameModal("noContentBanner"), children: "No content" }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: getClassNameModal("loadingBanner"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_spinners4.ClipLoader, { size: 24 }) })
+                    key
+                  )) }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tbody", { className: getClassNameModal("tbody"), children: data.map((item, i) => {
+                    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                      "tr",
+                      {
+                        style: { whiteSpace: "nowrap" },
+                        className: getClassNameModal("tr"),
+                        onClick: (e) => {
+                          onChange(mapProp(item));
+                          setOpen(false);
+                        },
+                        children: keys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("td", { className: getClassNameModal("td"), children: item[key] }, key))
+                      },
+                      i
+                    );
+                  }) })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: getClassNameModal("loadingBanner"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_spinners4.ClipLoader, { size: 24, "aria-label": "Loading" }) })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: getClassNameModal("noContentBanner"), children: "No results." })
             ]
           }
         ) })
@@ -32933,7 +33172,7 @@ var ExternalField = ({
   var _a, _b, _c;
   const validField = field;
   const deprecatedField = field;
-  (0, import_react30.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (deprecatedField.adaptor) {
       console.error(
         "Warning: The `adaptor` API is deprecated. Please use updated APIs on the `external` field instead. This will be a breaking change in a future release."
@@ -32982,7 +33221,8 @@ var RadioField = ({
   readOnly,
   value,
   name,
-  id
+  id,
+  label
 }) => {
   if (field.type !== "radio" || !field.options) {
     return null;
@@ -32991,7 +33231,7 @@ var RadioField = ({
     FieldLabelInternal,
     {
       icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(check_circle_default, { size: 16 }),
-      label: field.label || name,
+      label: label || name,
       readOnly,
       el: "div",
       children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: getClassName11("radioGroupItems"), id, children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
@@ -33113,8 +33353,72 @@ var TextareaField = ({
 
 // components/InputOrGroup/index.tsx
 var import_use_debounce2 = require("use-debounce");
+
+// components/InputOrGroup/fields/ObjectField/index.tsx
+init_react_import();
+
+// css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/fields/ObjectField/styles.module.css#css-module
+init_react_import();
+var styles_module_default9 = { "ObjectField": "_ObjectField_56z4t_5", "ObjectField-fieldset": "_ObjectField-fieldset_56z4t_13" };
+
+// components/InputOrGroup/fields/ObjectField/index.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var getClassName14 = get_class_name_factory_default("Input", styles_module_default3);
+var getClassName14 = get_class_name_factory_default("ObjectField", styles_module_default9);
+var getClassNameItem2 = get_class_name_factory_default("ObjectFieldItem", styles_module_default9);
+var ObjectField = ({
+  field,
+  onChange,
+  value,
+  name,
+  label,
+  readOnly,
+  readOnlyFields = {},
+  id
+}) => {
+  if (field.type !== "object" || !field.objectFields) {
+    return null;
+  }
+  const data = value || {};
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    FieldLabelInternal,
+    {
+      label: label || name,
+      icon: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(more_vertical_default, { size: 16 }),
+      el: "div",
+      readOnly,
+      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: getClassName14(), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("fieldset", { className: getClassName14("fieldset"), children: Object.keys(field.objectFields).map((fieldName) => {
+        const subField = field.objectFields[fieldName];
+        const subFieldName = `${name}.${fieldName}`;
+        const wildcardFieldName = `${name}.${fieldName}`;
+        return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          InputOrGroup,
+          {
+            name: subFieldName,
+            label: subField.label || fieldName,
+            id: `${id}_${fieldName}`,
+            readOnly: typeof readOnlyFields[subFieldName] !== "undefined" ? readOnlyFields[subFieldName] : readOnlyFields[wildcardFieldName],
+            readOnlyFields,
+            field: subField,
+            value: data[fieldName],
+            onChange: (val, ui) => {
+              onChange(
+                __spreadProps(__spreadValues({}, data), {
+                  [fieldName]: val
+                }),
+                ui
+              );
+            }
+          },
+          subFieldName
+        );
+      }) }) })
+    }
+  );
+};
+
+// components/InputOrGroup/index.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var getClassName15 = get_class_name_factory_default("Input", styles_module_default3);
 var FieldLabel = ({
   children,
   icon,
@@ -33124,11 +33428,11 @@ var FieldLabel = ({
   className
 }) => {
   const El = el;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(El, { className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: getClassName14("label"), children: [
-      icon ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: getClassName14("labelIcon"), children: icon }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, {}),
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(El, { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: getClassName15("label"), children: [
+      icon ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: getClassName15("labelIcon"), children: icon }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, {}),
       label,
-      readOnly && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: getClassName14("disabledIcon"), title: "Read-only", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(lock_default, { size: "12" }) })
+      readOnly && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: getClassName15("disabledIcon"), title: "Read-only", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(lock_default, { size: "12" }) })
     ] }),
     children
   ] });
@@ -33140,12 +33444,12 @@ var FieldLabelInternal = ({
   el = "label",
   readOnly
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     FieldLabel,
     {
       label,
       icon,
-      className: getClassName14({ readOnly }),
+      className: getClassName15({ readOnly }),
       readOnly,
       el,
       children
@@ -33155,7 +33459,7 @@ var FieldLabelInternal = ({
 var InputOrGroup = (_a) => {
   var _b = _a, { onChange } = _b, props = __objRest(_b, ["onChange"]);
   const { name, field, value, readOnly } = props;
-  const [localValue, setLocalValue] = (0, import_react31.useState)(value);
+  const [localValue, setLocalValue] = (0, import_react33.useState)(value);
   const onChangeDb = (0, import_use_debounce2.useDebouncedCallback)(
     (val, ui) => {
       onChange(val, ui);
@@ -33163,11 +33467,11 @@ var InputOrGroup = (_a) => {
     50,
     { leading: true }
   );
-  const onChangeLocal = (0, import_react31.useCallback)((val, ui) => {
+  const onChangeLocal = (0, import_react33.useCallback)((val, ui) => {
     setLocalValue(val);
     onChangeDb(val, ui);
   }, []);
-  (0, import_react31.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     setLocalValue(value);
   }, [value]);
   const localProps = {
@@ -33175,31 +33479,34 @@ var InputOrGroup = (_a) => {
     onChange: onChangeLocal
   };
   if (field.type === "array") {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ArrayField, __spreadValues(__spreadValues({}, props), localProps));
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ArrayField, __spreadValues(__spreadValues({}, props), localProps));
   }
   if (field.type === "external") {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ExternalField, __spreadValues(__spreadValues({}, props), localProps));
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ExternalField, __spreadValues(__spreadValues({}, props), localProps));
+  }
+  if (field.type === "object") {
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ObjectField, __spreadValues(__spreadValues({}, props), localProps));
   }
   if (field.type === "select") {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SelectField, __spreadValues(__spreadValues({}, props), localProps));
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SelectField, __spreadValues(__spreadValues({}, props), localProps));
   }
   if (field.type === "textarea") {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TextareaField, __spreadValues(__spreadValues({}, props), localProps));
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TextareaField, __spreadValues(__spreadValues({}, props), localProps));
   }
   if (field.type === "radio") {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(RadioField, __spreadValues(__spreadValues({}, props), localProps));
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(RadioField, __spreadValues(__spreadValues({}, props), localProps));
   }
   if (field.type === "custom") {
     if (!field.render) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: getClassName14(), children: field.render(__spreadValues({
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: getClassName15(), children: field.render(__spreadValues({
       field,
       name,
       readOnly
     }, localProps)) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DefaultField, __spreadValues(__spreadValues({}, props), localProps));
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DefaultField, __spreadValues(__spreadValues({}, props), localProps));
 };
 
 // components/ComponentList/index.tsx
@@ -33208,28 +33515,28 @@ var import_dnd6 = require("@hello-pangea/dnd");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ComponentList/styles.module.css#css-module
 init_react_import();
-var styles_module_default9 = { "ComponentList": "_ComponentList_1m8r5_1", "ComponentList--isExpanded": "_ComponentList--isExpanded_1m8r5_6", "ComponentList-content": "_ComponentList-content_1m8r5_10", "ComponentList-title": "_ComponentList-title_1m8r5_18", "ComponentList-titleIcon": "_ComponentList-titleIcon_1m8r5_39", "ComponentListItem": "_ComponentListItem_1m8r5_43", "ComponentListItem-draggable": "_ComponentListItem-draggable_1m8r5_43", "ComponentListItem-name": "_ComponentListItem-name_1m8r5_60", "ComponentList--isDraggingFrom": "_ComponentList--isDraggingFrom_1m8r5_66" };
+var styles_module_default10 = { "ComponentList": "_ComponentList_1m8r5_1", "ComponentList--isExpanded": "_ComponentList--isExpanded_1m8r5_6", "ComponentList-content": "_ComponentList-content_1m8r5_10", "ComponentList-title": "_ComponentList-title_1m8r5_18", "ComponentList-titleIcon": "_ComponentList-titleIcon_1m8r5_39", "ComponentListItem": "_ComponentListItem_1m8r5_43", "ComponentListItem-draggable": "_ComponentListItem-draggable_1m8r5_43", "ComponentListItem-name": "_ComponentListItem-name_1m8r5_60", "ComponentList--isDraggingFrom": "_ComponentList--isDraggingFrom_1m8r5_66" };
 
 // components/ComponentList/index.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var getClassName15 = get_class_name_factory_default("ComponentList", styles_module_default9);
-var getClassNameItem2 = get_class_name_factory_default("ComponentListItem", styles_module_default9);
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var getClassName16 = get_class_name_factory_default("ComponentList", styles_module_default10);
+var getClassNameItem3 = get_class_name_factory_default("ComponentListItem", styles_module_default10);
 var ComponentListItem = ({
   component,
   index,
   id
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: getClassNameItem2(), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: getClassNameItem3(), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     Draggable2,
     {
       id,
       index,
       showShadow: true,
       disableAnimations: true,
-      className: () => getClassNameItem2("draggable"),
-      children: () => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: getClassNameItem2("name"), children: component }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: getClassNameItem2("icon"), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DragIcon, {}) })
+      className: () => getClassNameItem3("draggable"),
+      children: () => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: getClassNameItem3("name"), children: component }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: getClassNameItem3("icon"), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DragIcon, {}) })
       ] })
     },
     component
@@ -33242,11 +33549,11 @@ var ComponentList = ({
 }) => {
   const { config, state, setUi } = useAppContext();
   const { expanded = true } = state.ui.componentList[id] || {};
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: getClassName15({ isExpanded: expanded }), children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: getClassName16({ isExpanded: expanded }), children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
       "div",
       {
-        className: getClassName15("title"),
+        className: getClassName16("title"),
         onClick: () => setUi({
           componentList: __spreadProps(__spreadValues({}, state.ui.componentList), {
             [id]: __spreadProps(__spreadValues({}, state.ui.componentList[id]), {
@@ -33256,26 +33563,26 @@ var ComponentList = ({
         }),
         title: expanded ? `Collapse${title ? ` ${title}` : ""}` : `Expand${title ? ` ${title}` : ""}`,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: getClassName15("titleIcon"), children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(chevron_up_default, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(chevron_down_default, { size: 12 }) })
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: getClassName16("titleIcon"), children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(chevron_up_default, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(chevron_down_default, { size: 12 }) })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: getClassName15("content"), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: getClassName16("content"), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       import_dnd6.Droppable,
       {
         droppableId: `component-list${title ? `:${title}` : ""}`,
         isDropDisabled: true,
-        children: (provided, snapshot) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+        children: (provided, snapshot) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
           "div",
           __spreadProps(__spreadValues({}, provided.droppableProps), {
             ref: provided.innerRef,
-            className: getClassName15({
+            className: getClassName16({
               isDraggingFrom: !!snapshot.draggingFromThisWith
             }),
             children: [
               children || Object.keys(config.components).map((componentKey, i) => {
-                return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                   ComponentListItem,
                   {
                     component: componentKey,
@@ -33285,7 +33592,7 @@ var ComponentList = ({
                   componentKey
                 );
               }),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { style: { display: "none" }, children: provided.placeholder })
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { style: { display: "none" }, children: provided.placeholder })
             ]
           })
         )
@@ -33297,10 +33604,10 @@ ComponentList.Item = ComponentListItem;
 
 // lib/use-placeholder-style.ts
 init_react_import();
-var import_react32 = require("react");
+var import_react34 = require("react");
 var usePlaceholderStyle = () => {
   const queryAttr = "data-rfd-drag-handle-draggable-id";
-  const [placeholderStyle, setPlaceholderStyle] = (0, import_react32.useState)();
+  const [placeholderStyle, setPlaceholderStyle] = (0, import_react34.useState)();
   const onDragStartOrUpdate = (draggedItem) => {
     var _a;
     const draggableId = draggedItem.draggableId;
@@ -33348,11 +33655,11 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css#css-module
 init_react_import();
-var styles_module_default10 = { "SidebarSection": "_SidebarSection_1uyg2_1", "SidebarSection-title": "_SidebarSection-title_1uyg2_12", "SidebarSection-content": "_SidebarSection-content_1uyg2_19", "SidebarSection--noPadding": "_SidebarSection--noPadding_1uyg2_24", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_1uyg2_37", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_1uyg2_48", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_1uyg2_37", "SidebarSection-heading": "_SidebarSection-heading_1uyg2_60", "SidebarSection-loadingOverlay": "_SidebarSection-loadingOverlay_1uyg2_64" };
+var styles_module_default11 = { "SidebarSection": "_SidebarSection_1uyg2_1", "SidebarSection-title": "_SidebarSection-title_1uyg2_12", "SidebarSection-content": "_SidebarSection-content_1uyg2_19", "SidebarSection--noPadding": "_SidebarSection--noPadding_1uyg2_24", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_1uyg2_37", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_1uyg2_48", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_1uyg2_37", "SidebarSection-heading": "_SidebarSection-heading_1uyg2_60", "SidebarSection-loadingOverlay": "_SidebarSection-loadingOverlay_1uyg2_64" };
 
 // lib/use-breadcrumbs.ts
 init_react_import();
-var import_react33 = require("react");
+var import_react35 = require("react");
 var convertPathDataToBreadcrumbs = (selectedItem, pathData, data) => {
   const id = selectedItem ? selectedItem == null ? void 0 : selectedItem.props.id : "";
   const currentPathData = pathData && id && pathData[id] ? __spreadValues({}, pathData[id]) : { label: "Page", path: [] };
@@ -33402,8 +33709,8 @@ var useBreadcrumbs = (renderCount) => {
     state: { data },
     selectedItem
   } = useAppContext();
-  const dzContext = (0, import_react33.useContext)(dropZoneContext);
-  return (0, import_react33.useMemo)(() => {
+  const dzContext = (0, import_react35.useContext)(dropZoneContext);
+  return (0, import_react35.useMemo)(() => {
     const breadcrumbs = convertPathDataToBreadcrumbs(
       selectedItem,
       dzContext == null ? void 0 : dzContext.pathData,
@@ -33418,8 +33725,8 @@ var useBreadcrumbs = (renderCount) => {
 
 // components/SidebarSection/index.tsx
 var import_react_spinners5 = require("react-spinners");
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var getClassName16 = get_class_name_factory_default("SidebarSection", styles_module_default10);
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var getClassName17 = get_class_name_factory_default("SidebarSection", styles_module_default11);
 var SidebarSection = ({
   children,
   title,
@@ -33430,23 +33737,23 @@ var SidebarSection = ({
 }) => {
   const { setUi } = useAppContext();
   const breadcrumbs = useBreadcrumbs(1);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: getClassName16({ noPadding }), style: { background }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: getClassName16("title"), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: getClassName16("breadcrumbs"), children: [
-      showBreadcrumbs ? breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: getClassName16("breadcrumb"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: getClassName17({ noPadding }), style: { background }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassName17("title"), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: getClassName17("breadcrumbs"), children: [
+      showBreadcrumbs ? breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: getClassName17("breadcrumb"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           "div",
           {
-            className: getClassName16("breadcrumbLabel"),
+            className: getClassName17("breadcrumbLabel"),
             onClick: () => setUi({ itemSelector: breadcrumb.selector }),
             children: breadcrumb.label
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(chevron_right_default, { size: 16 })
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(chevron_right_default, { size: 16 })
       ] }, i)) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: getClassName16("heading"), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Heading, { rank: 2, size: "xs", children: title }) })
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassName17("heading"), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Heading, { rank: 2, size: "xs", children: title }) })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: getClassName16("content"), children }),
-    isLoading && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: getClassName16("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_spinners5.ClipLoader, {}) })
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassName17("content"), children }),
+    isLoading && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassName17("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_spinners5.ClipLoader, {}) })
   ] });
 };
 
@@ -33455,11 +33762,11 @@ init_react_import();
 
 // lib/use-puck-history.ts
 init_react_import();
-var import_react35 = require("react");
+var import_react37 = require("react");
 
 // lib/use-action-history.ts
 init_react_import();
-var import_react34 = require("react");
+var import_react36 = require("react");
 
 // lib/generate-id.ts
 init_react_import();
@@ -33469,8 +33776,8 @@ var generateId = (type) => `${type}-${(0, import_crypto.randomBytes)(20).toStrin
 // lib/use-action-history.ts
 var EMPTY_HISTORY_INDEX = -1;
 function useActionHistory() {
-  const [histories, setHistories] = (0, import_react34.useState)([]);
-  const [currentHistoryIndex, setCurrentHistoryIndex] = (0, import_react34.useState)(EMPTY_HISTORY_INDEX);
+  const [histories, setHistories] = (0, import_react36.useState)([]);
+  const [currentHistoryIndex, setCurrentHistoryIndex] = (0, import_react36.useState)(EMPTY_HISTORY_INDEX);
   const currentHistory = histories[currentHistoryIndex];
   const canRewind = currentHistoryIndex > EMPTY_HISTORY_INDEX;
   const canForward = currentHistoryIndex < histories.length - 1;
@@ -33549,7 +33856,7 @@ function usePuckHistory({
       dispatch
     });
   }, DEBOUNCE_TIME);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     historyEmitter.on(RECORD_DIFF, handleRecordDiff);
     return () => {
       historyEmitter.off(RECORD_DIFF, handleRecordDiff);
@@ -33897,7 +34204,7 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/styles.module.css#css-module
 init_react_import();
-var styles_module_default11 = { "LayerTree": "_LayerTree_o89yt_1", "LayerTree-zoneTitle": "_LayerTree-zoneTitle_o89yt_11", "LayerTree-helper": "_LayerTree-helper_o89yt_17", "Layer": "_Layer_o89yt_1", "Layer-inner": "_Layer-inner_o89yt_29", "Layer--containsZone": "_Layer--containsZone_o89yt_35", "Layer-clickable": "_Layer-clickable_o89yt_39", "Layer--isSelected": "_Layer--isSelected_o89yt_48", "Layer--isHovering": "_Layer--isHovering_o89yt_49", "Layer-chevron": "_Layer-chevron_o89yt_65", "Layer--childIsSelected": "_Layer--childIsSelected_o89yt_66", "Layer-zones": "_Layer-zones_o89yt_70", "Layer-title": "_Layer-title_o89yt_84", "Layer-name": "_Layer-name_o89yt_93", "Layer-icon": "_Layer-icon_o89yt_99", "Layer-zoneIcon": "_Layer-zoneIcon_o89yt_104" };
+var styles_module_default12 = { "LayerTree": "_LayerTree_o89yt_1", "LayerTree-zoneTitle": "_LayerTree-zoneTitle_o89yt_11", "LayerTree-helper": "_LayerTree-helper_o89yt_17", "Layer": "_Layer_o89yt_1", "Layer-inner": "_Layer-inner_o89yt_29", "Layer--containsZone": "_Layer--containsZone_o89yt_35", "Layer-clickable": "_Layer-clickable_o89yt_39", "Layer--isSelected": "_Layer--isSelected_o89yt_48", "Layer--isHovering": "_Layer--isHovering_o89yt_49", "Layer-chevron": "_Layer-chevron_o89yt_65", "Layer--childIsSelected": "_Layer--childIsSelected_o89yt_66", "Layer-zones": "_Layer-zones_o89yt_70", "Layer-title": "_Layer-title_o89yt_84", "Layer-name": "_Layer-name_o89yt_93", "Layer-icon": "_Layer-icon_o89yt_99", "Layer-zoneIcon": "_Layer-zoneIcon_o89yt_104" };
 
 // lib/scroll-into-view.ts
 init_react_import();
@@ -33911,7 +34218,7 @@ var scrollIntoView = (el) => {
 };
 
 // components/LayerTree/index.tsx
-var import_react36 = require("react");
+var import_react38 = require("react");
 
 // lib/find-zones-for-area.ts
 init_react_import();
@@ -33937,9 +34244,9 @@ var isChildOfZone = (item, maybeChild, ctx) => {
 };
 
 // components/LayerTree/index.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var getClassName17 = get_class_name_factory_default("LayerTree", styles_module_default11);
-var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default11);
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var getClassName18 = get_class_name_factory_default("LayerTree", styles_module_default12);
+var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default12);
 var LayerTree = ({
   data,
   zoneContent,
@@ -33949,15 +34256,15 @@ var LayerTree = ({
   label
 }) => {
   const zones = data.zones || {};
-  const ctx = (0, import_react36.useContext)(dropZoneContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: getClassName17("zoneTitle"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassName17("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(layers_default, { size: "16" }) }),
+  const ctx = (0, import_react38.useContext)(dropZoneContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: getClassName18("zoneTitle"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: getClassName18("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(layers_default, { size: "16" }) }),
       " ",
       label
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("ul", { className: getClassName17(), children: [
-      zoneContent.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassName17("helper"), children: "No items" }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("ul", { className: getClassName18(), children: [
+      zoneContent.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: getClassName18("helper"), children: "No items" }),
       zoneContent.map((item, i) => {
         const isSelected = (itemSelector == null ? void 0 : itemSelector.index) === i && (itemSelector.zone === zone || itemSelector.zone === rootDroppableId && !zone);
         const zonesForItem = findZonesForArea(data, item.props.id);
@@ -33972,7 +34279,7 @@ var LayerTree = ({
         const selectedItem = itemSelector && data ? getItem(itemSelector, data) : null;
         const isHovering = hoveringComponent === item.props.id;
         const childIsSelected = isChildOfZone(item, selectedItem, ctx);
-        return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
           "li",
           {
             className: getClassNameLayer({
@@ -33982,7 +34289,7 @@ var LayerTree = ({
               childIsSelected
             }),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
                 "div",
                 {
                   className: getClassNameLayer("clickable"),
@@ -34013,22 +34320,22 @@ var LayerTree = ({
                     setHoveringComponent(null);
                   },
                   children: [
-                    containsZone && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                    containsZone && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                       "div",
                       {
                         className: getClassNameLayer("chevron"),
                         title: isSelected ? "Collapse" : "Expand",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(chevron_down_default, { size: "12" })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(chevron_down_default, { size: "12" })
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: getClassNameLayer("title"), children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassNameLayer("icon"), children: item.type === "Text" || item.type === "Heading" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(type_default, { size: "16" }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(grid_default, { size: "16" }) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassNameLayer("name"), children: item.type })
+                    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: getClassNameLayer("title"), children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: getClassNameLayer("icon"), children: item.type === "Text" || item.type === "Heading" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(type_default, { size: "16" }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(grid_default, { size: "16" }) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: getClassNameLayer("name"), children: item.type })
                     ] })
                   ]
                 }
               ) }),
-              containsZone && Object.keys(zonesForItem).map((zoneKey, idx) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              containsZone && Object.keys(zonesForItem).map((zoneKey, idx) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 LayerTree,
                 {
                   data,
@@ -34074,11 +34381,11 @@ var flushZones = (appState) => {
 
 // lib/use-component-list.tsx
 init_react_import();
-var import_react37 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_react39 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var useComponentList = (config, ui) => {
-  const [componentList, setComponentList] = (0, import_react37.useState)();
-  (0, import_react37.useEffect)(() => {
+  const [componentList, setComponentList] = (0, import_react39.useState)();
+  (0, import_react39.useEffect)(() => {
     var _a, _b, _c;
     if (Object.keys(ui.componentList).length > 0) {
       const matchedComponents = [];
@@ -34088,14 +34395,14 @@ var useComponentList = (config, ui) => {
           if (category.visible === false || !category.components) {
             return null;
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             ComponentList,
             {
               id: categoryKey,
               title: category.title || categoryKey,
               children: category.components.map((componentName, i) => {
                 matchedComponents.push(componentName);
-                return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                   ComponentList.Item,
                   {
                     component: componentName,
@@ -34115,13 +34422,13 @@ var useComponentList = (config, ui) => {
       );
       if (remainingComponents.length > 0 && !((_a = ui.componentList.other) == null ? void 0 : _a.components) && ((_b = ui.componentList.other) == null ? void 0 : _b.visible) !== false) {
         _componentList.push(
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             ComponentList,
             {
               id: "other",
               title: ((_c = ui.componentList.other) == null ? void 0 : _c.title) || "Other",
               children: remainingComponents.map((componentName, i) => {
-                return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                   ComponentList.Item,
                   {
                     component: componentName,
@@ -34144,7 +34451,7 @@ var useComponentList = (config, ui) => {
 
 // lib/use-resolved-data.ts
 init_react_import();
-var import_react38 = require("react");
+var import_react40 = require("react");
 
 // lib/resolve-component-data.ts
 init_react_import();
@@ -34259,13 +34566,13 @@ var resolveRootData = (data, config) => __async(void 0, null, function* () {
 
 // lib/use-resolved-data.ts
 var useResolvedData = (appState, config, dispatch) => {
-  const [{ resolverKey, newAppState }, setResolverState] = (0, import_react38.useState)({
+  const [{ resolverKey, newAppState }, setResolverState] = (0, import_react40.useState)({
     resolverKey: 0,
     newAppState: appState
   });
-  const [componentState, setComponentState] = (0, import_react38.useState)({});
+  const [componentState, setComponentState] = (0, import_react40.useState)({});
   const deferredSetStates = {};
-  const setComponentLoading = (0, import_react38.useCallback)(
+  const setComponentLoading = (0, import_react40.useCallback)(
     (id, loading, defer = 0) => {
       if (deferredSetStates[id]) {
         clearTimeout(deferredSetStates[id]);
@@ -34296,7 +34603,7 @@ var useResolvedData = (appState, config, dispatch) => {
           type: "set",
           state: (prev) => __spreadProps(__spreadValues({}, prev), {
             data: applyDynamicProps(prev.data, dynamicDataMap, dynamicRoot),
-            ui: __spreadValues(__spreadValues({}, prev.ui), newAppState.ui)
+            ui: resolverKey > 0 ? __spreadValues(__spreadValues({}, prev.ui), newAppState.ui) : prev.ui
           }),
           recordHistory: resolverKey > 0
         });
@@ -34332,10 +34639,10 @@ var useResolvedData = (appState, config, dispatch) => {
     });
     yield Promise.all(promises);
   });
-  (0, import_react38.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     runResolvers();
   }, [resolverKey]);
-  const resolveData = (0, import_react38.useCallback)((newAppState2 = appState) => {
+  const resolveData = (0, import_react40.useCallback)((newAppState2 = appState) => {
     setResolverState((curr) => ({
       resolverKey: curr.resolverKey + 1,
       newAppState: newAppState2
@@ -34352,11 +34659,11 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/MenuBar/styles.module.css#css-module
 init_react_import();
-var styles_module_default12 = { "MenuBar": "_MenuBar_12sp7_1", "MenuBar--menuOpen": "_MenuBar--menuOpen_12sp7_14", "MenuBar-inner": "_MenuBar-inner_12sp7_29", "MenuBar-history": "_MenuBar-history_12sp7_45" };
+var styles_module_default13 = { "MenuBar": "_MenuBar_12sp7_1", "MenuBar--menuOpen": "_MenuBar--menuOpen_12sp7_14", "MenuBar-inner": "_MenuBar-inner_12sp7_29", "MenuBar-history": "_MenuBar-history_12sp7_45" };
 
 // components/MenuBar/index.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var getClassName18 = get_class_name_factory_default("MenuBar", styles_module_default12);
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var getClassName19 = get_class_name_factory_default("MenuBar", styles_module_default13);
 var MenuBar = ({
   appState,
   data = { content: [], root: { props: { title: "" } } },
@@ -34370,10 +34677,10 @@ var MenuBar = ({
     appState,
     dispatch
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "div",
     {
-      className: getClassName18({ menuOpen }),
+      className: getClassName19({ menuOpen }),
       onClick: (event) => {
         var _a;
         const element = event.target;
@@ -34384,16 +34691,16 @@ var MenuBar = ({
           setMenuOpen(false);
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: getClassName18("inner"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: getClassName18("history"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(IconButton, { title: "undo", disabled: !canRewind, onClick: rewind, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: getClassName19("inner"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: getClassName19("history"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(IconButton, { title: "undo", disabled: !canRewind, onClick: rewind, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             chevron_left_default,
             {
               size: 21,
               stroke: canRewind ? "var(--puck-color-black)" : "var(--puck-color-grey-7)"
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(IconButton, { title: "redo", disabled: !canForward, onClick: forward, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(IconButton, { title: "redo", disabled: !canForward, onClick: forward, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             chevron_right_default,
             {
               size: 21,
@@ -34401,17 +34708,17 @@ var MenuBar = ({
             }
           ) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, { children: renderHeaderActions && renderHeaderActions({
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_jsx_runtime23.Fragment, { children: renderHeaderActions && renderHeaderActions({
           state: appState,
           dispatch
         }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           Button,
           {
             onClick: () => {
               onPublish(data);
             },
-            icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(globe_default, { size: "14px" }),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(globe_default, { size: "14px" }),
             children: "Publish"
           }
         ) })
@@ -34422,11 +34729,11 @@ var MenuBar = ({
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css#css-module
 init_react_import();
-var styles_module_default13 = { "Puck": "_Puck_103k9_19", "Puck--leftSideBarVisible": "_Puck--leftSideBarVisible_103k9_35", "Puck--rightSideBarVisible": "_Puck--rightSideBarVisible_103k9_41", "Puck-header": "_Puck-header_103k9_95", "Puck-headerInner": "_Puck-headerInner_103k9_104", "Puck-headerToggle": "_Puck-headerToggle_103k9_114", "Puck-rightSideBarToggle": "_Puck-rightSideBarToggle_103k9_121", "Puck-leftSideBarToggle": "_Puck-leftSideBarToggle_103k9_126", "Puck-headerTitle": "_Puck-headerTitle_103k9_130", "Puck-headerPath": "_Puck-headerPath_103k9_134", "Puck-headerTools": "_Puck-headerTools_103k9_141", "Puck-menuButton": "_Puck-menuButton_103k9_147", "Puck--menuOpen": "_Puck--menuOpen_103k9_152", "Puck-leftSideBar": "_Puck-leftSideBar_103k9_126", "Puck-frame": "_Puck-frame_103k9_171", "Puck-root": "_Puck-root_103k9_179", "Puck-page": "_Puck-page_103k9_192", "Puck-rightSideBar": "_Puck-rightSideBar_103k9_121" };
+var styles_module_default14 = { "Puck": "_Puck_103k9_19", "Puck--leftSideBarVisible": "_Puck--leftSideBarVisible_103k9_35", "Puck--rightSideBarVisible": "_Puck--rightSideBarVisible_103k9_41", "Puck-header": "_Puck-header_103k9_95", "Puck-headerInner": "_Puck-headerInner_103k9_104", "Puck-headerToggle": "_Puck-headerToggle_103k9_114", "Puck-rightSideBarToggle": "_Puck-rightSideBarToggle_103k9_121", "Puck-leftSideBarToggle": "_Puck-leftSideBarToggle_103k9_126", "Puck-headerTitle": "_Puck-headerTitle_103k9_130", "Puck-headerPath": "_Puck-headerPath_103k9_134", "Puck-headerTools": "_Puck-headerTools_103k9_141", "Puck-menuButton": "_Puck-menuButton_103k9_147", "Puck--menuOpen": "_Puck--menuOpen_103k9_152", "Puck-leftSideBar": "_Puck-leftSideBar_103k9_126", "Puck-frame": "_Puck-frame_103k9_171", "Puck-root": "_Puck-root_103k9_179", "Puck-page": "_Puck-page_103k9_192", "Puck-rightSideBar": "_Puck-rightSideBar_103k9_121" };
 
 // components/Puck/index.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var getClassName19 = get_class_name_factory_default("Puck", styles_module_default13);
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var getClassName20 = get_class_name_factory_default("Puck", styles_module_default14);
 var defaultPageFields = {
   title: { type: "text" }
 };
@@ -34438,7 +34745,7 @@ var PluginRenderer = ({
   renderMethod
 }) => {
   return plugins.filter((item) => item[renderMethod]).map((item) => item[renderMethod]).reduce(
-    (accChildren, Item) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Item, { dispatch, state, children: accChildren }),
+    (accChildren, Item) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Item, { dispatch, state, children: accChildren }),
     children
   );
 };
@@ -34455,8 +34762,8 @@ function Puck({
   headerPath
 }) {
   var _a, _b;
-  const [reducer] = (0, import_react39.useState)(() => createReducer({ config }));
-  const [initialAppState] = (0, import_react39.useState)(__spreadProps(__spreadValues({}, defaultAppState), {
+  const [reducer] = (0, import_react41.useState)(() => createReducer({ config }));
+  const [initialAppState] = (0, import_react41.useState)(() => __spreadProps(__spreadValues({}, defaultAppState), {
     data: initialData,
     ui: __spreadProps(__spreadValues({}, defaultAppState.ui), {
       // Store categories under componentList on state to allow render functions and plugins to modify
@@ -34475,7 +34782,7 @@ function Puck({
       ) : {}
     })
   }));
-  const [appState, dispatch] = (0, import_react39.useReducer)(
+  const [appState, dispatch] = (0, import_react41.useReducer)(
     reducer,
     flushZones(initialAppState)
   );
@@ -34485,9 +34792,9 @@ function Puck({
     config,
     dispatch
   );
-  const [menuOpen, setMenuOpen] = (0, import_react39.useState)(false);
+  const [menuOpen, setMenuOpen] = (0, import_react41.useState)(false);
   const { itemSelector, leftSideBarVisible, rightSideBarVisible } = ui;
-  const setItemSelector = (0, import_react39.useCallback)(
+  const setItemSelector = (0, import_react41.useCallback)(
     (newItemSelector) => {
       dispatch({
         type: "setUi",
@@ -34497,10 +34804,10 @@ function Puck({
     []
   );
   const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
-  const Page = (0, import_react39.useCallback)(
+  const Page = (0, import_react41.useCallback)(
     (pageProps) => {
       var _a2, _b2;
-      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         PluginRenderer,
         {
           plugins,
@@ -34513,8 +34820,8 @@ function Puck({
     },
     [config.root]
   );
-  const PageFieldWrapper = (0, import_react39.useCallback)(
-    (props) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  const PageFieldWrapper = (0, import_react41.useCallback)(
+    (props) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       PluginRenderer,
       {
         plugins,
@@ -34526,8 +34833,8 @@ function Puck({
     ),
     []
   );
-  const ComponentFieldWrapper = (0, import_react39.useCallback)(
-    (props) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  const ComponentFieldWrapper = (0, import_react41.useCallback)(
+    (props) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       PluginRenderer,
       {
         plugins,
@@ -34539,8 +34846,8 @@ function Puck({
     ),
     []
   );
-  const ComponentListWrapper = (0, import_react39.useCallback)((props) => {
-    const children = /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  const ComponentListWrapper = (0, import_react41.useCallback)((props) => {
+    const children = /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       PluginRenderer,
       {
         plugins,
@@ -34559,22 +34866,22 @@ function Puck({
   const FieldWrapper = itemSelector ? ComponentFieldWrapper : PageFieldWrapper;
   const rootFields = ((_a = config.root) == null ? void 0 : _a.fields) || defaultPageFields;
   let fields = selectedItem ? ((_b = config.components[selectedItem.type]) == null ? void 0 : _b.fields) || {} : rootFields;
-  (0, import_react39.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     if (onChange)
       onChange(data);
   }, [data]);
   const { onDragStartOrUpdate, placeholderStyle } = usePlaceholderStyle();
-  const [draggedItem, setDraggedItem] = (0, import_react39.useState)();
+  const [draggedItem, setDraggedItem] = (0, import_react41.useState)();
   const componentList = useComponentList(config, appState.ui);
   const rootProps = data.root.props || data.root;
-  (0, import_react39.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     if (Object.keys(data.root).length > 0 && !data.root.props) {
       console.error(
         "Warning: Defining props on `root` is deprecated. Please use `root.props`. This will be a breaking change in a future release."
       );
     }
   }, []);
-  const toggleSidebars = (0, import_react39.useCallback)(
+  const toggleSidebars = (0, import_react41.useCallback)(
     (sidebar) => {
       const widerViewport = window.matchMedia("(min-width: 638px)").matches;
       const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
@@ -34588,7 +34895,7 @@ function Puck({
     },
     [dispatch, leftSideBarVisible, rightSideBarVisible]
   );
-  (0, import_react39.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     if (!window.matchMedia("(min-width: 638px)").matches) {
       dispatch({
         type: "setUi",
@@ -34611,12 +34918,12 @@ function Puck({
       window.removeEventListener("resize", handleResize);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       AppProvider,
       {
         value: { state: appState, dispatch, config, componentState },
-        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           import_dnd7.DragDropContext,
           {
             onDragUpdate: (update) => {
@@ -34633,10 +34940,10 @@ function Puck({
                 return;
               }
               if (droppedItem.source.droppableId.startsWith("component-list") && droppedItem.destination) {
-                const [_, componentId] = droppedItem.draggableId.split("::");
+                const [_, componentType] = droppedItem.draggableId.split("::");
                 dispatch({
                   type: "insert",
-                  componentType: componentId || droppedItem.draggableId,
+                  componentType: componentType || droppedItem.draggableId,
                   destinationIndex: droppedItem.destination.index,
                   destinationZone: droppedItem.destination.droppableId
                 });
@@ -34669,7 +34976,7 @@ function Puck({
                 });
               }
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               DropZoneProvider,
               {
                 value: {
@@ -34683,72 +34990,72 @@ function Puck({
                   mode: "edit",
                   areaId: "root"
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(dropZoneContext.Consumer, { children: (ctx) => {
+                children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(dropZoneContext.Consumer, { children: (ctx) => {
                   var _a2, _b2;
-                  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
                     "div",
                     {
-                      className: getClassName19({
+                      className: getClassName20({
                         leftSideBarVisible,
                         menuOpen,
                         rightSideBarVisible
                       }),
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("header", { className: getClassName19("header"), children: renderHeader ? renderHeader({
-                          children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("header", { className: getClassName20("header"), children: renderHeader ? renderHeader({
+                          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                             Button,
                             {
                               onClick: () => {
                                 onPublish(data);
                               },
-                              icon: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(globe_default, { size: "14px" }),
+                              icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(globe_default, { size: "14px" }),
                               children: "Publish"
                             }
                           ),
                           dispatch,
                           state: appState
-                        }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: getClassName19("headerInner"), children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: getClassName19("headerToggle"), children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: getClassName19("leftSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                        }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: getClassName20("headerInner"), children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: getClassName20("headerToggle"), children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: getClassName20("leftSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                               IconButton,
                               {
                                 onClick: () => {
                                   toggleSidebars("left");
                                 },
                                 title: "Toggle left sidebar",
-                                children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(sidebar_default, { focusable: "false" })
+                                children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(sidebar_default, { focusable: "false" })
                               }
                             ) }),
-                            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: getClassName19("rightSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: getClassName20("rightSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                               IconButton,
                               {
                                 onClick: () => {
                                   toggleSidebars("right");
                                 },
                                 title: "Toggle right sidebar",
-                                children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(sidebar_default, { focusable: "false" })
+                                children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(sidebar_default, { focusable: "false" })
                               }
                             ) })
                           ] }),
-                          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: getClassName19("headerTitle"), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Heading, { rank: 2, size: "xs", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: getClassName20("headerTitle"), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Heading, { rank: 2, size: "xs", children: [
                             headerTitle || rootProps.title || "Page",
-                            headerPath && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+                            headerPath && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
                               " ",
-                              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("code", { className: getClassName19("headerPath"), children: headerPath })
+                              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("code", { className: getClassName20("headerPath"), children: headerPath })
                             ] })
                           ] }) }),
-                          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: getClassName19("headerTools"), children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: getClassName19("menuButton"), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: getClassName20("headerTools"), children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: getClassName20("menuButton"), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                               IconButton,
                               {
                                 onClick: () => {
                                   return setMenuOpen(!menuOpen);
                                 },
                                 title: "Toggle menu bar",
-                                children: menuOpen ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(chevron_up_default, { focusable: "false" }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(chevron_down_default, { focusable: "false" })
+                                children: menuOpen ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(chevron_up_default, { focusable: "false" }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(chevron_down_default, { focusable: "false" })
                               }
                             ) }),
-                            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                               MenuBar,
                               {
                                 appState,
@@ -34762,10 +35069,10 @@ function Puck({
                             )
                           ] })
                         ] }) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: getClassName19("leftSideBar"), children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SidebarSection, { title: "Components", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ComponentListWrapper, { children: componentList ? componentList : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ComponentList, { id: "all" }) }) }),
-                          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(SidebarSection, { title: "Outline", children: [
-                            (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: getClassName20("leftSideBar"), children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SidebarSection, { title: "Components", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ComponentListWrapper, { children: componentList ? componentList : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ComponentList, { id: "all" }) }) }),
+                          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(SidebarSection, { title: "Outline", children: [
+                            (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                               LayerTree,
                               {
                                 data,
@@ -34777,7 +35084,7 @@ function Puck({
                             ),
                             Object.entries(findZonesForArea(data, "root")).map(
                               ([zoneKey, zone]) => {
-                                return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                                return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                                   LayerTree,
                                   {
                                     data,
@@ -34793,23 +35100,23 @@ function Puck({
                             )
                           ] })
                         ] }),
-                        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+                        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
                           "div",
                           {
-                            className: getClassName19("frame"),
+                            className: getClassName20("frame"),
                             onClick: () => setItemSelector(null),
                             id: "puck-frame",
                             children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: getClassName19("root"), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: getClassName19("page"), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: getClassName20("root"), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: getClassName20("page"), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                                 Page,
                                 __spreadProps(__spreadValues({
                                   dispatch,
                                   state: appState
                                 }, rootProps), {
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DropZone, { zone: rootDroppableId })
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DropZone, { zone: rootDroppableId })
                                 })
                               ) }) }),
-                              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                                 "div",
                                 {
                                   style: {
@@ -34822,7 +35129,7 @@ function Puck({
                             ]
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: getClassName19("rightSideBar"), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(FieldWrapper, { dispatch, state: appState, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: getClassName20("rightSideBar"), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(FieldWrapper, { dispatch, state: appState, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                           SidebarSection,
                           {
                             noPadding: true,
@@ -34900,7 +35207,7 @@ function Puck({
                               };
                               if (selectedItem && itemSelector) {
                                 const { readOnly = {} } = selectedItem;
-                                return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                                return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                                   InputOrGroup,
                                   {
                                     field,
@@ -34916,7 +35223,7 @@ function Puck({
                                 );
                               } else {
                                 const { readOnly = {} } = data.root;
-                                return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                                return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                                   InputOrGroup,
                                   {
                                     field,
@@ -34944,19 +35251,22 @@ function Puck({
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { id: "puck-portal-root" })
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { id: "puck-portal-root" })
   ] });
 }
 
 // components/Render/index.tsx
 init_react_import();
-var import_jsx_runtime24 = require("react/jsx-runtime");
-function Render({ config, data }) {
+var import_jsx_runtime25 = require("react/jsx-runtime");
+function Render({
+  config,
+  data
+}) {
   var _a;
   const rootProps = data.root.props || data.root;
-  const title = rootProps.title || "";
+  const title = (rootProps == null ? void 0 : rootProps.title) || "";
   if ((_a = config.root) == null ? void 0 : _a.render) {
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DropZoneProvider, { value: { data, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DropZoneProvider, { value: { data, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       config.root.render,
       __spreadProps(__spreadValues({}, rootProps), {
         puck: {
@@ -34965,11 +35275,67 @@ function Render({ config, data }) {
         title,
         editMode: false,
         id: "puck-root",
-        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DropZone, { zone: rootDroppableId })
+        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DropZone, { zone: rootDroppableId })
       })
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DropZoneProvider, { value: { data, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DropZone, { zone: rootDroppableId }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DropZoneProvider, { value: { data, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DropZone, { zone: rootDroppableId }) });
+}
+
+// lib/migrate.ts
+init_react_import();
+var migrations = [
+  // Migrate root to root.props
+  (data) => {
+    const rootProps = data.root.props || data.root;
+    if (Object.keys(data.root).length > 0 && !data.root.props) {
+      console.warn(
+        "Migration applied: Root props moved from `root` to `root.props`."
+      );
+      return __spreadProps(__spreadValues({}, data), {
+        root: {
+          props: __spreadValues({}, rootProps)
+        }
+      });
+    }
+    return data;
+  }
+];
+function migrate(data) {
+  return migrations == null ? void 0 : migrations.reduce((acc, migration) => migration(acc), data);
+}
+
+// lib/transform-props.ts
+init_react_import();
+function transformProps(data, propTransforms) {
+  const mapItem = (item) => {
+    if (propTransforms[item.type]) {
+      return __spreadProps(__spreadValues({}, item), {
+        props: propTransforms[item.type](item.props)
+      });
+    }
+    return item;
+  };
+  const rootProps = data.root.props || data.root;
+  let newRoot = __spreadValues({}, data.root);
+  if (propTransforms["root"]) {
+    if (data.root.props) {
+      newRoot.props = propTransforms["root"](rootProps);
+    } else {
+      newRoot = propTransforms["root"](rootProps);
+    }
+  }
+  const afterPropTransforms = __spreadProps(__spreadValues({}, data), {
+    root: newRoot,
+    content: data.content.map(mapItem),
+    zones: Object.keys(data.zones || {}).reduce(
+      (acc, zoneKey) => __spreadProps(__spreadValues({}, acc), {
+        [zoneKey]: data.zones[zoneKey].map(mapItem)
+      }),
+      {}
+    )
+  });
+  return afterPropTransforms;
 }
 
 // lib/resolve-all-data.ts
@@ -35009,7 +35375,9 @@ var resolveAllData = (data, config, onResolveStart, onResolveEnd) => __async(voi
   Puck,
   Render,
   dropZoneContext,
-  resolveAllData
+  migrate,
+  resolveAllData,
+  transformProps
 });
 /*! Bundled license information: