@measured/puck 0.10.1-canary.cc20c52 → 0.11.0-canary.4613df4

package/dist/index.js

@@ -1109,7 +1109,8 @@ __export(core_exports, {
   IconButton: () => IconButton,
   Puck: () => Puck,
   Render: () => Render,
-  dropZoneContext: () => dropZoneContext
+  dropZoneContext: () => dropZoneContext,
+  resolveData: () => resolveData
 });
 module.exports = __toCommonJS(core_exports);
 init_react_import();
@@ -1214,11 +1215,11 @@ var Button = ({
 
 // components/DropZone/index.tsx
 init_react_import();
-var import_react22 = require("react");
+var import_react23 = require("react");
 
 // components/DraggableComponent/index.tsx
 init_react_import();
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_react_beautiful_dnd = require("react-beautiful-dnd");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css#css-module
@@ -1526,7 +1527,7 @@ ChevronRight.propTypes = {
 ChevronRight.displayName = "ChevronRight";
 var chevron_right_default = ChevronRight;
 
-// ../../node_modules/react-feather/dist/icons/copy.js
+// ../../node_modules/react-feather/dist/icons/chevron-up.js
 init_react_import();
 var import_react7 = __toESM(require("react"));
 var import_prop_types5 = __toESM(require_prop_types());
@@ -1576,7 +1577,7 @@ function _objectWithoutPropertiesLoose5(source, excluded) {
   }
   return target;
 }
-var Copy = (0, import_react7.forwardRef)(function(_ref, ref) {
+var ChevronUp = (0, import_react7.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 = _objectWithoutProperties5(_ref, ["color", "size"]);
   return /* @__PURE__ */ import_react7.default.createElement("svg", _extends5({
     ref,
@@ -1589,25 +1590,18 @@ var Copy = (0, import_react7.forwardRef)(function(_ref, ref) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, rest), /* @__PURE__ */ import_react7.default.createElement("rect", {
-    x: "9",
-    y: "9",
-    width: "13",
-    height: "13",
-    rx: "2",
-    ry: "2"
-  }), /* @__PURE__ */ import_react7.default.createElement("path", {
-    d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
+  }, rest), /* @__PURE__ */ import_react7.default.createElement("polyline", {
+    points: "18 15 12 9 6 15"
   }));
 });
-Copy.propTypes = {
+ChevronUp.propTypes = {
   color: import_prop_types5.default.string,
   size: import_prop_types5.default.oneOfType([import_prop_types5.default.string, import_prop_types5.default.number])
 };
-Copy.displayName = "Copy";
-var copy_default = Copy;
+ChevronUp.displayName = "ChevronUp";
+var chevron_up_default = ChevronUp;
 
-// ../../node_modules/react-feather/dist/icons/globe.js
+// ../../node_modules/react-feather/dist/icons/copy.js
 init_react_import();
 var import_react8 = __toESM(require("react"));
 var import_prop_types6 = __toESM(require_prop_types());
@@ -1657,7 +1651,7 @@ function _objectWithoutPropertiesLoose6(source, excluded) {
   }
   return target;
 }
-var Globe = (0, import_react8.forwardRef)(function(_ref, ref) {
+var Copy = (0, import_react8.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 = _objectWithoutProperties6(_ref, ["color", "size"]);
   return /* @__PURE__ */ import_react8.default.createElement("svg", _extends6({
     ref,
@@ -1670,27 +1664,25 @@ var Globe = (0, import_react8.forwardRef)(function(_ref, ref) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, rest), /* @__PURE__ */ import_react8.default.createElement("circle", {
-    cx: "12",
-    cy: "12",
-    r: "10"
-  }), /* @__PURE__ */ import_react8.default.createElement("line", {
-    x1: "2",
-    y1: "12",
-    x2: "22",
-    y2: "12"
+  }, rest), /* @__PURE__ */ import_react8.default.createElement("rect", {
+    x: "9",
+    y: "9",
+    width: "13",
+    height: "13",
+    rx: "2",
+    ry: "2"
   }), /* @__PURE__ */ import_react8.default.createElement("path", {
-    d: "M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"
+    d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
   }));
 });
-Globe.propTypes = {
+Copy.propTypes = {
   color: import_prop_types6.default.string,
   size: import_prop_types6.default.oneOfType([import_prop_types6.default.string, import_prop_types6.default.number])
 };
-Globe.displayName = "Globe";
-var globe_default = Globe;
+Copy.displayName = "Copy";
+var copy_default = Copy;
 
-// ../../node_modules/react-feather/dist/icons/grid.js
+// ../../node_modules/react-feather/dist/icons/globe.js
 init_react_import();
 var import_react9 = __toESM(require("react"));
 var import_prop_types7 = __toESM(require_prop_types());
@@ -1740,7 +1732,7 @@ function _objectWithoutPropertiesLoose7(source, excluded) {
   }
   return target;
 }
-var Grid = (0, import_react9.forwardRef)(function(_ref, ref) {
+var Globe = (0, import_react9.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 = _objectWithoutProperties7(_ref, ["color", "size"]);
   return /* @__PURE__ */ import_react9.default.createElement("svg", _extends7({
     ref,
@@ -1753,22 +1745,105 @@ var Grid = (0, import_react9.forwardRef)(function(_ref, ref) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, rest), /* @__PURE__ */ import_react9.default.createElement("rect", {
+  }, rest), /* @__PURE__ */ import_react9.default.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "10"
+  }), /* @__PURE__ */ import_react9.default.createElement("line", {
+    x1: "2",
+    y1: "12",
+    x2: "22",
+    y2: "12"
+  }), /* @__PURE__ */ import_react9.default.createElement("path", {
+    d: "M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"
+  }));
+});
+Globe.propTypes = {
+  color: import_prop_types7.default.string,
+  size: import_prop_types7.default.oneOfType([import_prop_types7.default.string, import_prop_types7.default.number])
+};
+Globe.displayName = "Globe";
+var globe_default = Globe;
+
+// ../../node_modules/react-feather/dist/icons/grid.js
+init_react_import();
+var import_react10 = __toESM(require("react"));
+var import_prop_types8 = __toESM(require_prop_types());
+function _extends8() {
+  _extends8 = 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 _extends8.apply(this, arguments);
+}
+function _objectWithoutProperties8(source, excluded) {
+  if (source == null)
+    return {};
+  var target = _objectWithoutPropertiesLoose8(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 _objectWithoutPropertiesLoose8(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 Grid = (0, import_react10.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 = _objectWithoutProperties8(_ref, ["color", "size"]);
+  return /* @__PURE__ */ import_react10.default.createElement("svg", _extends8({
+    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_react10.default.createElement("rect", {
     x: "3",
     y: "3",
     width: "7",
     height: "7"
-  }), /* @__PURE__ */ import_react9.default.createElement("rect", {
+  }), /* @__PURE__ */ import_react10.default.createElement("rect", {
     x: "14",
     y: "3",
     width: "7",
     height: "7"
-  }), /* @__PURE__ */ import_react9.default.createElement("rect", {
+  }), /* @__PURE__ */ import_react10.default.createElement("rect", {
     x: "14",
     y: "14",
     width: "7",
     height: "7"
-  }), /* @__PURE__ */ import_react9.default.createElement("rect", {
+  }), /* @__PURE__ */ import_react10.default.createElement("rect", {
     x: "3",
     y: "14",
     width: "7",
@@ -1776,18 +1851,18 @@ var Grid = (0, import_react9.forwardRef)(function(_ref, ref) {
   }));
 });
 Grid.propTypes = {
-  color: import_prop_types7.default.string,
-  size: import_prop_types7.default.oneOfType([import_prop_types7.default.string, import_prop_types7.default.number])
+  color: import_prop_types8.default.string,
+  size: import_prop_types8.default.oneOfType([import_prop_types8.default.string, import_prop_types8.default.number])
 };
 Grid.displayName = "Grid";
 var grid_default = Grid;
 
 // ../../node_modules/react-feather/dist/icons/hash.js
 init_react_import();
-var import_react10 = __toESM(require("react"));
-var import_prop_types8 = __toESM(require_prop_types());
-function _extends8() {
-  _extends8 = Object.assign || function(target) {
+var import_react11 = __toESM(require("react"));
+var import_prop_types9 = __toESM(require_prop_types());
+function _extends9() {
+  _extends9 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -1798,12 +1873,12 @@ function _extends8() {
     }
     return target;
   };
-  return _extends8.apply(this, arguments);
+  return _extends9.apply(this, arguments);
 }
-function _objectWithoutProperties8(source, excluded) {
+function _objectWithoutProperties9(source, excluded) {
   if (source == null)
     return {};
-  var target = _objectWithoutPropertiesLoose8(source, excluded);
+  var target = _objectWithoutPropertiesLoose9(source, excluded);
   var key, i;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -1818,7 +1893,7 @@ function _objectWithoutProperties8(source, excluded) {
   }
   return target;
 }
-function _objectWithoutPropertiesLoose8(source, excluded) {
+function _objectWithoutPropertiesLoose9(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -1832,9 +1907,9 @@ function _objectWithoutPropertiesLoose8(source, excluded) {
   }
   return target;
 }
-var Hash = (0, import_react10.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 = _objectWithoutProperties8(_ref, ["color", "size"]);
-  return /* @__PURE__ */ import_react10.default.createElement("svg", _extends8({
+var Hash = (0, import_react11.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 = _objectWithoutProperties9(_ref, ["color", "size"]);
+  return /* @__PURE__ */ import_react11.default.createElement("svg", _extends9({
     ref,
     xmlns: "http://www.w3.org/2000/svg",
     width: size,
@@ -1845,22 +1920,22 @@ var Hash = (0, import_react10.forwardRef)(function(_ref, ref) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, rest), /* @__PURE__ */ import_react10.default.createElement("line", {
+  }, rest), /* @__PURE__ */ import_react11.default.createElement("line", {
     x1: "4",
     y1: "9",
     x2: "20",
     y2: "9"
-  }), /* @__PURE__ */ import_react10.default.createElement("line", {
+  }), /* @__PURE__ */ import_react11.default.createElement("line", {
     x1: "4",
     y1: "15",
     x2: "20",
     y2: "15"
-  }), /* @__PURE__ */ import_react10.default.createElement("line", {
+  }), /* @__PURE__ */ import_react11.default.createElement("line", {
     x1: "10",
     y1: "3",
     x2: "8",
     y2: "21"
-  }), /* @__PURE__ */ import_react10.default.createElement("line", {
+  }), /* @__PURE__ */ import_react11.default.createElement("line", {
     x1: "16",
     y1: "3",
     x2: "14",
@@ -1868,18 +1943,18 @@ var Hash = (0, import_react10.forwardRef)(function(_ref, ref) {
   }));
 });
 Hash.propTypes = {
-  color: import_prop_types8.default.string,
-  size: import_prop_types8.default.oneOfType([import_prop_types8.default.string, import_prop_types8.default.number])
+  color: import_prop_types9.default.string,
+  size: import_prop_types9.default.oneOfType([import_prop_types9.default.string, import_prop_types9.default.number])
 };
 Hash.displayName = "Hash";
 var hash_default = Hash;
 
 // ../../node_modules/react-feather/dist/icons/layers.js
 init_react_import();
-var import_react11 = __toESM(require("react"));
-var import_prop_types9 = __toESM(require_prop_types());
-function _extends9() {
-  _extends9 = Object.assign || function(target) {
+var import_react12 = __toESM(require("react"));
+var import_prop_types10 = __toESM(require_prop_types());
+function _extends10() {
+  _extends10 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -1890,12 +1965,12 @@ function _extends9() {
     }
     return target;
   };
-  return _extends9.apply(this, arguments);
+  return _extends10.apply(this, arguments);
 }
-function _objectWithoutProperties9(source, excluded) {
+function _objectWithoutProperties10(source, excluded) {
   if (source == null)
     return {};
-  var target = _objectWithoutPropertiesLoose9(source, excluded);
+  var target = _objectWithoutPropertiesLoose10(source, excluded);
   var key, i;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -1910,7 +1985,7 @@ function _objectWithoutProperties9(source, excluded) {
   }
   return target;
 }
-function _objectWithoutPropertiesLoose9(source, excluded) {
+function _objectWithoutPropertiesLoose10(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -1924,9 +1999,9 @@ function _objectWithoutPropertiesLoose9(source, excluded) {
   }
   return target;
 }
-var Layers = (0, import_react11.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 = _objectWithoutProperties9(_ref, ["color", "size"]);
-  return /* @__PURE__ */ import_react11.default.createElement("svg", _extends9({
+var Layers = (0, import_react12.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 = _objectWithoutProperties10(_ref, ["color", "size"]);
+  return /* @__PURE__ */ import_react12.default.createElement("svg", _extends10({
     ref,
     xmlns: "http://www.w3.org/2000/svg",
     width: size,
@@ -1937,27 +2012,27 @@ var Layers = (0, import_react11.forwardRef)(function(_ref, ref) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, rest), /* @__PURE__ */ import_react11.default.createElement("polygon", {
+  }, rest), /* @__PURE__ */ import_react12.default.createElement("polygon", {
     points: "12 2 2 7 12 12 22 7 12 2"
-  }), /* @__PURE__ */ import_react11.default.createElement("polyline", {
+  }), /* @__PURE__ */ import_react12.default.createElement("polyline", {
     points: "2 17 12 22 22 17"
-  }), /* @__PURE__ */ import_react11.default.createElement("polyline", {
+  }), /* @__PURE__ */ import_react12.default.createElement("polyline", {
     points: "2 12 12 17 22 12"
   }));
 });
 Layers.propTypes = {
-  color: import_prop_types9.default.string,
-  size: import_prop_types9.default.oneOfType([import_prop_types9.default.string, import_prop_types9.default.number])
+  color: import_prop_types10.default.string,
+  size: import_prop_types10.default.oneOfType([import_prop_types10.default.string, import_prop_types10.default.number])
 };
 Layers.displayName = "Layers";
 var layers_default = Layers;
 
 // ../../node_modules/react-feather/dist/icons/link.js
 init_react_import();
-var import_react12 = __toESM(require("react"));
-var import_prop_types10 = __toESM(require_prop_types());
-function _extends10() {
-  _extends10 = Object.assign || function(target) {
+var import_react13 = __toESM(require("react"));
+var import_prop_types11 = __toESM(require_prop_types());
+function _extends11() {
+  _extends11 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -1968,12 +2043,12 @@ function _extends10() {
     }
     return target;
   };
-  return _extends10.apply(this, arguments);
+  return _extends11.apply(this, arguments);
 }
-function _objectWithoutProperties10(source, excluded) {
+function _objectWithoutProperties11(source, excluded) {
   if (source == null)
     return {};
-  var target = _objectWithoutPropertiesLoose10(source, excluded);
+  var target = _objectWithoutPropertiesLoose11(source, excluded);
   var key, i;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -1988,7 +2063,7 @@ function _objectWithoutProperties10(source, excluded) {
   }
   return target;
 }
-function _objectWithoutPropertiesLoose10(source, excluded) {
+function _objectWithoutPropertiesLoose11(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -2002,9 +2077,9 @@ function _objectWithoutPropertiesLoose10(source, excluded) {
   }
   return target;
 }
-var Link = (0, import_react12.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 = _objectWithoutProperties10(_ref, ["color", "size"]);
-  return /* @__PURE__ */ import_react12.default.createElement("svg", _extends10({
+var Link = (0, import_react13.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 = _objectWithoutProperties11(_ref, ["color", "size"]);
+  return /* @__PURE__ */ import_react13.default.createElement("svg", _extends11({
     ref,
     xmlns: "http://www.w3.org/2000/svg",
     width: size,
@@ -2015,25 +2090,25 @@ var Link = (0, import_react12.forwardRef)(function(_ref, ref) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, rest), /* @__PURE__ */ import_react12.default.createElement("path", {
+  }, rest), /* @__PURE__ */ import_react13.default.createElement("path", {
     d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
-  }), /* @__PURE__ */ import_react12.default.createElement("path", {
+  }), /* @__PURE__ */ import_react13.default.createElement("path", {
     d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
   }));
 });
 Link.propTypes = {
-  color: import_prop_types10.default.string,
-  size: import_prop_types10.default.oneOfType([import_prop_types10.default.string, import_prop_types10.default.number])
+  color: import_prop_types11.default.string,
+  size: import_prop_types11.default.oneOfType([import_prop_types11.default.string, import_prop_types11.default.number])
 };
 Link.displayName = "Link";
 var link_default = Link;
 
 // ../../node_modules/react-feather/dist/icons/list.js
 init_react_import();
-var import_react13 = __toESM(require("react"));
-var import_prop_types11 = __toESM(require_prop_types());
-function _extends11() {
-  _extends11 = Object.assign || function(target) {
+var import_react14 = __toESM(require("react"));
+var import_prop_types12 = __toESM(require_prop_types());
+function _extends12() {
+  _extends12 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -2044,12 +2119,12 @@ function _extends11() {
     }
     return target;
   };
-  return _extends11.apply(this, arguments);
+  return _extends12.apply(this, arguments);
 }
-function _objectWithoutProperties11(source, excluded) {
+function _objectWithoutProperties12(source, excluded) {
   if (source == null)
     return {};
-  var target = _objectWithoutPropertiesLoose11(source, excluded);
+  var target = _objectWithoutPropertiesLoose12(source, excluded);
   var key, i;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -2064,7 +2139,7 @@ function _objectWithoutProperties11(source, excluded) {
   }
   return target;
 }
-function _objectWithoutPropertiesLoose11(source, excluded) {
+function _objectWithoutPropertiesLoose12(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -2078,9 +2153,9 @@ function _objectWithoutPropertiesLoose11(source, excluded) {
   }
   return target;
 }
-var List = (0, import_react13.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 = _objectWithoutProperties11(_ref, ["color", "size"]);
-  return /* @__PURE__ */ import_react13.default.createElement("svg", _extends11({
+var List = (0, import_react14.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 = _objectWithoutProperties12(_ref, ["color", "size"]);
+  return /* @__PURE__ */ import_react14.default.createElement("svg", _extends12({
     ref,
     xmlns: "http://www.w3.org/2000/svg",
     width: size,
@@ -2091,32 +2166,32 @@ var List = (0, import_react13.forwardRef)(function(_ref, ref) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, rest), /* @__PURE__ */ import_react13.default.createElement("line", {
+  }, rest), /* @__PURE__ */ import_react14.default.createElement("line", {
     x1: "8",
     y1: "6",
     x2: "21",
     y2: "6"
-  }), /* @__PURE__ */ import_react13.default.createElement("line", {
+  }), /* @__PURE__ */ import_react14.default.createElement("line", {
     x1: "8",
     y1: "12",
     x2: "21",
     y2: "12"
-  }), /* @__PURE__ */ import_react13.default.createElement("line", {
+  }), /* @__PURE__ */ import_react14.default.createElement("line", {
     x1: "8",
     y1: "18",
     x2: "21",
     y2: "18"
-  }), /* @__PURE__ */ import_react13.default.createElement("line", {
+  }), /* @__PURE__ */ import_react14.default.createElement("line", {
     x1: "3",
     y1: "6",
     x2: "3.01",
     y2: "6"
-  }), /* @__PURE__ */ import_react13.default.createElement("line", {
+  }), /* @__PURE__ */ import_react14.default.createElement("line", {
     x1: "3",
     y1: "12",
     x2: "3.01",
     y2: "12"
-  }), /* @__PURE__ */ import_react13.default.createElement("line", {
+  }), /* @__PURE__ */ import_react14.default.createElement("line", {
     x1: "3",
     y1: "18",
     x2: "3.01",
@@ -2124,18 +2199,18 @@ var List = (0, import_react13.forwardRef)(function(_ref, ref) {
   }));
 });
 List.propTypes = {
-  color: import_prop_types11.default.string,
-  size: import_prop_types11.default.oneOfType([import_prop_types11.default.string, import_prop_types11.default.number])
+  color: import_prop_types12.default.string,
+  size: import_prop_types12.default.oneOfType([import_prop_types12.default.string, import_prop_types12.default.number])
 };
 List.displayName = "List";
 var list_default = List;
 
 // ../../node_modules/react-feather/dist/icons/plus.js
 init_react_import();
-var import_react14 = __toESM(require("react"));
-var import_prop_types12 = __toESM(require_prop_types());
-function _extends12() {
-  _extends12 = Object.assign || function(target) {
+var import_react15 = __toESM(require("react"));
+var import_prop_types13 = __toESM(require_prop_types());
+function _extends13() {
+  _extends13 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -2146,12 +2221,12 @@ function _extends12() {
     }
     return target;
   };
-  return _extends12.apply(this, arguments);
+  return _extends13.apply(this, arguments);
 }
-function _objectWithoutProperties12(source, excluded) {
+function _objectWithoutProperties13(source, excluded) {
   if (source == null)
     return {};
-  var target = _objectWithoutPropertiesLoose12(source, excluded);
+  var target = _objectWithoutPropertiesLoose13(source, excluded);
   var key, i;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -2166,7 +2241,7 @@ function _objectWithoutProperties12(source, excluded) {
   }
   return target;
 }
-function _objectWithoutPropertiesLoose12(source, excluded) {
+function _objectWithoutPropertiesLoose13(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -2180,9 +2255,9 @@ function _objectWithoutPropertiesLoose12(source, excluded) {
   }
   return target;
 }
-var Plus = (0, import_react14.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 = _objectWithoutProperties12(_ref, ["color", "size"]);
-  return /* @__PURE__ */ import_react14.default.createElement("svg", _extends12({
+var Plus = (0, import_react15.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 = _objectWithoutProperties13(_ref, ["color", "size"]);
+  return /* @__PURE__ */ import_react15.default.createElement("svg", _extends13({
     ref,
     xmlns: "http://www.w3.org/2000/svg",
     width: size,
@@ -2193,12 +2268,12 @@ var Plus = (0, import_react14.forwardRef)(function(_ref, ref) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, rest), /* @__PURE__ */ import_react14.default.createElement("line", {
+  }, rest), /* @__PURE__ */ import_react15.default.createElement("line", {
     x1: "12",
     y1: "5",
     x2: "12",
     y2: "19"
-  }), /* @__PURE__ */ import_react14.default.createElement("line", {
+  }), /* @__PURE__ */ import_react15.default.createElement("line", {
     x1: "5",
     y1: "12",
     x2: "19",
@@ -2206,18 +2281,18 @@ var Plus = (0, import_react14.forwardRef)(function(_ref, ref) {
   }));
 });
 Plus.propTypes = {
-  color: import_prop_types12.default.string,
-  size: import_prop_types12.default.oneOfType([import_prop_types12.default.string, import_prop_types12.default.number])
+  color: import_prop_types13.default.string,
+  size: import_prop_types13.default.oneOfType([import_prop_types13.default.string, import_prop_types13.default.number])
 };
 Plus.displayName = "Plus";
 var plus_default = Plus;
 
 // ../../node_modules/react-feather/dist/icons/sidebar.js
 init_react_import();
-var import_react15 = __toESM(require("react"));
-var import_prop_types13 = __toESM(require_prop_types());
-function _extends13() {
-  _extends13 = Object.assign || function(target) {
+var import_react16 = __toESM(require("react"));
+var import_prop_types14 = __toESM(require_prop_types());
+function _extends14() {
+  _extends14 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -2228,12 +2303,12 @@ function _extends13() {
     }
     return target;
   };
-  return _extends13.apply(this, arguments);
+  return _extends14.apply(this, arguments);
 }
-function _objectWithoutProperties13(source, excluded) {
+function _objectWithoutProperties14(source, excluded) {
   if (source == null)
     return {};
-  var target = _objectWithoutPropertiesLoose13(source, excluded);
+  var target = _objectWithoutPropertiesLoose14(source, excluded);
   var key, i;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -2248,7 +2323,7 @@ function _objectWithoutProperties13(source, excluded) {
   }
   return target;
 }
-function _objectWithoutPropertiesLoose13(source, excluded) {
+function _objectWithoutPropertiesLoose14(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -2262,9 +2337,9 @@ function _objectWithoutPropertiesLoose13(source, excluded) {
   }
   return target;
 }
-var Sidebar = (0, import_react15.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 = _objectWithoutProperties13(_ref, ["color", "size"]);
-  return /* @__PURE__ */ import_react15.default.createElement("svg", _extends13({
+var Sidebar = (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,
     xmlns: "http://www.w3.org/2000/svg",
     width: size,
@@ -2275,14 +2350,14 @@ var Sidebar = (0, import_react15.forwardRef)(function(_ref, ref) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, rest), /* @__PURE__ */ import_react15.default.createElement("rect", {
+  }, rest), /* @__PURE__ */ import_react16.default.createElement("rect", {
     x: "3",
     y: "3",
     width: "18",
     height: "18",
     rx: "2",
     ry: "2"
-  }), /* @__PURE__ */ import_react15.default.createElement("line", {
+  }), /* @__PURE__ */ import_react16.default.createElement("line", {
     x1: "9",
     y1: "3",
     x2: "9",
@@ -2290,18 +2365,18 @@ var Sidebar = (0, import_react15.forwardRef)(function(_ref, ref) {
   }));
 });
 Sidebar.propTypes = {
-  color: import_prop_types13.default.string,
-  size: import_prop_types13.default.oneOfType([import_prop_types13.default.string, import_prop_types13.default.number])
+  color: import_prop_types14.default.string,
+  size: import_prop_types14.default.oneOfType([import_prop_types14.default.string, import_prop_types14.default.number])
 };
 Sidebar.displayName = "Sidebar";
 var sidebar_default = Sidebar;
 
 // ../../node_modules/react-feather/dist/icons/trash.js
 init_react_import();
-var import_react16 = __toESM(require("react"));
-var import_prop_types14 = __toESM(require_prop_types());
-function _extends14() {
-  _extends14 = Object.assign || function(target) {
+var import_react17 = __toESM(require("react"));
+var import_prop_types15 = __toESM(require_prop_types());
+function _extends15() {
+  _extends15 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -2312,12 +2387,12 @@ function _extends14() {
     }
     return target;
   };
-  return _extends14.apply(this, arguments);
+  return _extends15.apply(this, arguments);
 }
-function _objectWithoutProperties14(source, excluded) {
+function _objectWithoutProperties15(source, excluded) {
   if (source == null)
     return {};
-  var target = _objectWithoutPropertiesLoose14(source, excluded);
+  var target = _objectWithoutPropertiesLoose15(source, excluded);
   var key, i;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -2332,7 +2407,7 @@ function _objectWithoutProperties14(source, excluded) {
   }
   return target;
 }
-function _objectWithoutPropertiesLoose14(source, excluded) {
+function _objectWithoutPropertiesLoose15(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -2346,9 +2421,9 @@ function _objectWithoutPropertiesLoose14(source, excluded) {
   }
   return target;
 }
-var Trash = (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({
+var Trash = (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,
     xmlns: "http://www.w3.org/2000/svg",
     width: size,
@@ -2359,25 +2434,25 @@ var Trash = (0, import_react16.forwardRef)(function(_ref, ref) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, rest), /* @__PURE__ */ import_react16.default.createElement("polyline", {
+  }, rest), /* @__PURE__ */ import_react17.default.createElement("polyline", {
     points: "3 6 5 6 21 6"
-  }), /* @__PURE__ */ import_react16.default.createElement("path", {
+  }), /* @__PURE__ */ import_react17.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_types14.default.string,
-  size: import_prop_types14.default.oneOfType([import_prop_types14.default.string, import_prop_types14.default.number])
+  color: import_prop_types15.default.string,
+  size: import_prop_types15.default.oneOfType([import_prop_types15.default.string, import_prop_types15.default.number])
 };
 Trash.displayName = "Trash";
 var trash_default = Trash;
 
 // ../../node_modules/react-feather/dist/icons/type.js
 init_react_import();
-var import_react17 = __toESM(require("react"));
-var import_prop_types15 = __toESM(require_prop_types());
-function _extends15() {
-  _extends15 = Object.assign || function(target) {
+var import_react18 = __toESM(require("react"));
+var import_prop_types16 = __toESM(require_prop_types());
+function _extends16() {
+  _extends16 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -2388,12 +2463,12 @@ function _extends15() {
     }
     return target;
   };
-  return _extends15.apply(this, arguments);
+  return _extends16.apply(this, arguments);
 }
-function _objectWithoutProperties15(source, excluded) {
+function _objectWithoutProperties16(source, excluded) {
   if (source == null)
     return {};
-  var target = _objectWithoutPropertiesLoose15(source, excluded);
+  var target = _objectWithoutPropertiesLoose16(source, excluded);
   var key, i;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -2408,7 +2483,7 @@ function _objectWithoutProperties15(source, excluded) {
   }
   return target;
 }
-function _objectWithoutPropertiesLoose15(source, excluded) {
+function _objectWithoutPropertiesLoose16(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -2422,9 +2497,9 @@ function _objectWithoutPropertiesLoose15(source, excluded) {
   }
   return target;
 }
-var Type = (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({
+var Type = (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,
     xmlns: "http://www.w3.org/2000/svg",
     width: size,
@@ -2435,14 +2510,14 @@ var Type = (0, import_react17.forwardRef)(function(_ref, ref) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, rest), /* @__PURE__ */ import_react17.default.createElement("polyline", {
+  }, rest), /* @__PURE__ */ import_react18.default.createElement("polyline", {
     points: "4 7 4 4 20 4 20 7"
-  }), /* @__PURE__ */ import_react17.default.createElement("line", {
+  }), /* @__PURE__ */ import_react18.default.createElement("line", {
     x1: "9",
     y1: "20",
     x2: "15",
     y2: "20"
-  }), /* @__PURE__ */ import_react17.default.createElement("line", {
+  }), /* @__PURE__ */ import_react18.default.createElement("line", {
     x1: "12",
     y1: "4",
     x2: "12",
@@ -2450,18 +2525,18 @@ var Type = (0, import_react17.forwardRef)(function(_ref, ref) {
   }));
 });
 Type.propTypes = {
-  color: import_prop_types15.default.string,
-  size: import_prop_types15.default.oneOfType([import_prop_types15.default.string, import_prop_types15.default.number])
+  color: import_prop_types16.default.string,
+  size: import_prop_types16.default.oneOfType([import_prop_types16.default.string, import_prop_types16.default.number])
 };
 Type.displayName = "Type";
 var type_default = Type;
 
 // lib/use-modifier-held.ts
 init_react_import();
-var import_react18 = require("react");
+var import_react19 = require("react");
 var useModifierHeld = (modifier) => {
-  const [modifierHeld, setModifierHeld] = (0, import_react18.useState)(false);
-  (0, import_react18.useEffect)(() => {
+  const [modifierHeld, setModifierHeld] = (0, import_react19.useState)(false);
+  (0, import_react19.useEffect)(() => {
     function downHandler({ key }) {
       if (key === modifier) {
         setModifierHeld(true);
@@ -2505,7 +2580,7 @@ var DraggableComponent = ({
   style
 }) => {
   const isModifierHeld = useModifierHeld("Alt");
-  (0, import_react19.useEffect)(onMount, []);
+  (0, import_react20.useEffect)(onMount, []);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     import_react_beautiful_dnd.Draggable,
     {
@@ -2549,13 +2624,13 @@ var DraggableComponent = ({
 
 // components/DroppableStrictMode/index.tsx
 init_react_import();
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_react_beautiful_dnd2 = require("react-beautiful-dnd");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var DroppableStrictMode = (_a) => {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  const [enabled, setEnabled] = (0, import_react20.useState)(false);
-  (0, import_react20.useEffect)(() => {
+  const [enabled, setEnabled] = (0, import_react21.useState)(false);
+  (0, import_react21.useEffect)(() => {
     const animation = requestAnimationFrame(() => setEnabled(true));
     return () => {
       cancelAnimationFrame(animation);
@@ -2589,11 +2664,13 @@ var setupZone = (data, zoneKey) => {
 };
 
 // lib/get-item.ts
-var getItem = (selector, data) => {
+var getItem = (selector, data, dynamicProps = {}) => {
   if (!selector.zone || selector.zone === rootDroppableId) {
-    return data.content[selector.index];
+    const item2 = data.content[selector.index];
+    return __spreadProps(__spreadValues({}, item2), { props: dynamicProps[item2.props.id] || item2.props });
   }
-  return setupZone(data, selector.zone).zones[selector.zone][selector.index];
+  const item = setupZone(data, selector.zone).zones[selector.zone][selector.index];
+  return __spreadProps(__spreadValues({}, item), { props: dynamicProps[item.props.id] || item.props });
 };
 
 // lib/index.ts
@@ -2601,14 +2678,6 @@ init_react_import();
 
 // lib/filter.ts
 init_react_import();
-var filter = (obj, validKeys) => {
-  return validKeys.reduce((acc, item) => {
-    if (typeof obj[item] !== "undefined") {
-      return __spreadProps(__spreadValues({}, acc), { [item]: obj[item] });
-    }
-    return acc;
-  }, {});
-};
 
 // lib/reorder.ts
 init_react_import();
@@ -2634,7 +2703,7 @@ var styles_module_default2 = { "DropZone": "_DropZone_ou0z5_1", "DropZone-conten
 
 // components/DropZone/context.tsx
 init_react_import();
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_use_debounce = require("use-debounce");
 
 // lib/get-zone-id.ts
@@ -2651,29 +2720,29 @@ var getZoneId = (zoneCompound) => {
 
 // components/DropZone/context.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var dropZoneContext = (0, import_react21.createContext)(null);
+var dropZoneContext = (0, import_react22.createContext)(null);
 var DropZoneProvider = ({
   children,
   value
 }) => {
-  const [hoveringArea, setHoveringArea] = (0, import_react21.useState)(null);
-  const [hoveringZone, setHoveringZone] = (0, import_react21.useState)(
+  const [hoveringArea, setHoveringArea] = (0, import_react22.useState)(null);
+  const [hoveringZone, setHoveringZone] = (0, import_react22.useState)(
     rootDroppableId
   );
-  const [hoveringComponent, setHoveringComponent] = (0, import_react21.useState)();
+  const [hoveringComponent, setHoveringComponent] = (0, import_react22.useState)();
   const [hoveringAreaDb] = (0, import_use_debounce.useDebounce)(hoveringArea, 75, { leading: false });
-  const [areasWithZones, setAreasWithZones] = (0, import_react21.useState)(
+  const [areasWithZones, setAreasWithZones] = (0, import_react22.useState)(
     {}
   );
-  const [activeZones, setActiveZones] = (0, import_react21.useState)({});
+  const [activeZones, setActiveZones] = (0, import_react22.useState)({});
   const { dispatch = null } = value ? value : {};
-  const registerZoneArea = (0, import_react21.useCallback)(
+  const registerZoneArea = (0, import_react22.useCallback)(
     (area) => {
       setAreasWithZones((latest) => __spreadProps(__spreadValues({}, latest), { [area]: true }));
     },
     [setAreasWithZones]
   );
-  const registerZone = (0, import_react21.useCallback)(
+  const registerZone = (0, import_react22.useCallback)(
     (zoneCompound) => {
       if (!dispatch) {
         return;
@@ -2686,7 +2755,7 @@ var DropZoneProvider = ({
     },
     [setActiveZones, dispatch]
   );
-  const unregisterZone = (0, import_react21.useCallback)(
+  const unregisterZone = (0, import_react22.useCallback)(
     (zoneCompound) => {
       if (!dispatch) {
         return;
@@ -2701,8 +2770,8 @@ var DropZoneProvider = ({
     },
     [setActiveZones, dispatch]
   );
-  const [pathData, setPathData] = (0, import_react21.useState)();
-  const registerPath = (0, import_react21.useCallback)(
+  const [pathData, setPathData] = (0, import_react22.useState)();
+  const registerPath = (0, import_react22.useCallback)(
     (selector) => {
       if (!(value == null ? void 0 : value.data)) {
         return;
@@ -2755,10 +2824,11 @@ var import_jsx_runtime5 = require("react/jsx-runtime");
 var getClassName3 = get_class_name_factory_default("DropZone", styles_module_default2);
 function DropZoneEdit({ zone, style }) {
   var _a;
-  const ctx = (0, import_react22.useContext)(dropZoneContext);
+  const ctx = (0, import_react23.useContext)(dropZoneContext);
   const {
     // These all need setting via context
     data,
+    dynamicProps = {},
     dispatch = () => null,
     config,
     itemSelector,
@@ -2772,12 +2842,12 @@ function DropZoneEdit({ zone, style }) {
   } = ctx || {};
   let content = data.content || [];
   let zoneCompound = rootDroppableId;
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (areaId && registerZoneArea) {
       registerZoneArea(areaId);
     }
   }, [areaId]);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (ctx == null ? void 0 : ctx.registerZone) {
       ctx == null ? void 0 : ctx.registerZone(zoneCompound);
     }
@@ -2800,7 +2870,7 @@ function DropZoneEdit({ zone, style }) {
   const [draggedSourceArea] = getZoneId(draggedSourceId);
   const userIsDragging = !!draggedItem;
   const draggingOverArea = userIsDragging && zoneArea === draggedSourceArea;
-  const draggingNewComponent = draggedSourceId === "component-list";
+  const draggingNewComponent = draggedSourceId == null ? void 0 : draggedSourceId.startsWith("component-list");
   if (!(ctx == null ? void 0 : ctx.config) || !ctx.setHoveringArea || !ctx.setHoveringZone || !ctx.setHoveringComponent || !ctx.setItemSelector || !ctx.registerPath || !ctx.dispatch) {
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: "DropZone requires context to work." });
   }
@@ -2860,7 +2930,7 @@ function DropZoneEdit({ zone, style }) {
                   content.map((item, i) => {
                     var _a2;
                     const componentId = item.props.id;
-                    const defaultedProps = __spreadProps(__spreadValues(__spreadValues({}, (_a2 = config.components[item.type]) == null ? void 0 : _a2.defaultProps), item.props), {
+                    const defaultedProps = __spreadProps(__spreadValues(__spreadValues({}, (_a2 = config.components[item.type]) == null ? void 0 : _a2.defaultProps), dynamicProps[item.props.id] || item.props), {
                       editMode: true
                     });
                     const isSelected = (selectedItem == null ? void 0 : selectedItem.props.id) === componentId || false;
@@ -2989,7 +3059,7 @@ function DropZoneEdit({ zone, style }) {
   );
 }
 function DropZoneRender({ zone }) {
-  const ctx = (0, import_react22.useContext)(dropZoneContext);
+  const ctx = (0, import_react23.useContext)(dropZoneContext);
   const { data, areaId = "root", config } = ctx || {};
   let zoneCompound = rootDroppableId;
   let content = (data == null ? void 0 : data.content) || [];
@@ -3016,7 +3086,7 @@ function DropZoneRender({ zone }) {
   }) });
 }
 function DropZone(props) {
-  const ctx = (0, import_react22.useContext)(dropZoneContext);
+  const ctx = (0, import_react23.useContext)(dropZoneContext);
   if ((ctx == null ? void 0 : ctx.mode) === "edit") {
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DropZoneEdit, __spreadValues({}, props));
   }
@@ -3028,7 +3098,7 @@ init_react_import();
 
 // components/IconButton/IconButton.tsx
 init_react_import();
-var import_react23 = require("react");
+var import_react24 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/IconButton/IconButton.module.css#css-module
 init_react_import();
@@ -3050,7 +3120,7 @@ var IconButton = ({
   fullWidth,
   title
 }) => {
-  const [loading, setLoading] = (0, import_react23.useState)(false);
+  const [loading, setLoading] = (0, import_react24.useState)(false);
   const ElementType = href ? "a" : "button";
   const el = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     ElementType,
@@ -3090,7 +3160,7 @@ var IconButton = ({
 
 // components/Puck/index.tsx
 init_react_import();
-var import_react32 = require("react");
+var import_react34 = require("react");
 var import_react_beautiful_dnd5 = require("react-beautiful-dnd");
 
 // components/InputOrGroup/index.tsx
@@ -3108,7 +3178,7 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/fields/ArrayField/styles.module.css#css-module
 init_react_import();
-var styles_module_default4 = { "ArrayField": "_ArrayField_zp334_5", "ArrayField--isDraggingFrom": "_ArrayField--isDraggingFrom_zp334_13", "ArrayField-addButton": "_ArrayField-addButton_zp334_17", "ArrayField--hasItems": "_ArrayField--hasItems_zp334_31", "ArrayFieldItem": "_ArrayFieldItem_zp334_45", "ArrayFieldItem--isDragging": "_ArrayFieldItem--isDragging_zp334_53", "ArrayFieldItem--isExpanded": "_ArrayFieldItem--isExpanded_zp334_58", "ArrayFieldItem-summary": "_ArrayFieldItem-summary_zp334_72", "ArrayFieldItem-body": "_ArrayFieldItem-body_zp334_104", "ArrayFieldItem-fieldset": "_ArrayFieldItem-fieldset_zp334_112", "ArrayFieldItem-rhs": "_ArrayFieldItem-rhs_zp334_119", "ArrayFieldItem-actions": "_ArrayFieldItem-actions_zp334_125", "ArrayFieldItem-action": "_ArrayFieldItem-action_zp334_125" };
+var styles_module_default4 = { "ArrayField": "_ArrayField_32vor_5", "ArrayField--isDraggingFrom": "_ArrayField--isDraggingFrom_32vor_13", "ArrayField-addButton": "_ArrayField-addButton_32vor_17", "ArrayField--hasItems": "_ArrayField--hasItems_32vor_31", "ArrayFieldItem": "_ArrayFieldItem_32vor_45", "ArrayFieldItem--isDragging": "_ArrayFieldItem--isDragging_32vor_53", "ArrayFieldItem--isExpanded": "_ArrayFieldItem--isExpanded_32vor_58", "ArrayFieldItem-summary": "_ArrayFieldItem-summary_32vor_72", "ArrayFieldItem-body": "_ArrayFieldItem-body_32vor_100", "ArrayFieldItem-fieldset": "_ArrayFieldItem-fieldset_32vor_108", "ArrayFieldItem-rhs": "_ArrayFieldItem-rhs_32vor_115", "ArrayFieldItem-actions": "_ArrayFieldItem-actions_32vor_121", "ArrayFieldItem-action": "_ArrayFieldItem-action_32vor_121" };
 
 // components/InputOrGroup/fields/ArrayField/index.tsx
 var import_react_beautiful_dnd4 = require("react-beautiful-dnd");
@@ -3158,7 +3228,7 @@ var import_crypto = require("crypto");
 var generateId = (type) => `${type}-${(0, import_crypto.randomBytes)(20).toString("hex")}`;
 
 // components/InputOrGroup/fields/ArrayField/index.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 
 // components/DragIcon/index.tsx
 init_react_import();
@@ -3174,22 +3244,24 @@ var DragIcon = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { class
 
 // components/Puck/context.tsx
 init_react_import();
-var import_react24 = require("react");
+var import_react25 = require("react");
 var defaultAppState = {
   data: { content: [], root: { title: "" } },
   ui: {
     leftSideBarVisible: true,
     arrayState: {},
-    itemSelector: null
+    itemSelector: null,
+    componentList: {}
   }
 };
-var appContext = (0, import_react24.createContext)({
+var appContext = (0, import_react25.createContext)({
   state: defaultAppState,
-  dispatch: () => null
+  dispatch: () => null,
+  config: { components: {} }
 });
 var AppProvider = appContext.Provider;
 var useAppContext = () => {
-  const mainContext = (0, import_react24.useContext)(appContext);
+  const mainContext = (0, import_react25.useContext)(appContext);
   const selectedItem = mainContext.state.ui.itemSelector ? getItem(mainContext.state.ui.itemSelector, mainContext.state.data) : void 0;
   return __spreadProps(__spreadValues({}, mainContext), {
     // Helpers
@@ -3216,7 +3288,7 @@ var ArrayField = ({
   name,
   label
 }) => {
-  const [arrayFieldId] = (0, import_react25.useState)(generateId("ArrayField"));
+  const [arrayFieldId] = (0, import_react26.useState)(generateId("ArrayField"));
   const { state, setUi } = useAppContext();
   const arrayState = state.ui.arrayState[arrayFieldId] || {
     items: Array.from(value || []).map((v) => ({
@@ -3225,7 +3297,7 @@ var ArrayField = ({
     })),
     openId: ""
   };
-  const setArrayState = (0, import_react25.useCallback)(
+  const setArrayState = (0, import_react26.useCallback)(
     (newArrayState, recordHistory = false) => {
       setUi(
         {
@@ -3238,7 +3310,7 @@ var ArrayField = ({
     },
     [arrayState]
   );
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     const newItems = Array.from(value || []).map((item, idx) => {
       var _a;
       return {
@@ -3248,7 +3320,7 @@ var ArrayField = ({
     });
     setArrayState({ items: newItems });
   }, [value]);
-  if (!field.arrayFields) {
+  if (field.type !== "array" || !field.arrayFields) {
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: getClassNameInput(), children: [
@@ -3278,7 +3350,7 @@ var ArrayField = ({
               ref: provided.innerRef,
               className: getClassName6({
                 isDraggingFrom: !!snapshot.draggingFromThisWith,
-                hasItems: value.length > 0
+                hasItems: Array.isArray(value) && value.length > 0
               }),
               children: [
                 Array.isArray(value) && value.length > 0 ? arrayState.items.map(({ _arrayId, data }, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
@@ -3433,7 +3505,7 @@ init_react_import();
 
 // components/ExternalInput/index.tsx
 init_react_import();
-var import_react26 = require("react");
+var import_react27 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ExternalInput/styles.module.css#css-module
 init_react_import();
@@ -3447,10 +3519,11 @@ var ExternalInput = ({
   onChange,
   value = null
 }) => {
-  const [data, setData] = (0, import_react26.useState)([]);
-  const [isOpen, setOpen] = (0, import_react26.useState)(false);
-  const [selectedData, setSelectedData] = (0, import_react26.useState)(value);
-  const keys = (0, import_react26.useMemo)(() => {
+  const { mapProp = (val) => val } = field.adaptor || {};
+  const [data, setData] = (0, import_react27.useState)([]);
+  const [isOpen, setOpen] = (0, import_react27.useState)(false);
+  const [selectedData, setSelectedData] = (0, import_react27.useState)(value);
+  const keys = (0, import_react27.useMemo)(() => {
     const validKeys = /* @__PURE__ */ new Set();
     for (const item of data) {
       for (const key of Object.keys(item)) {
@@ -3461,7 +3534,7 @@ var ExternalInput = ({
     }
     return Array.from(validKeys);
   }, [data]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     (() => __async(void 0, null, function* () {
       if (field.adaptor) {
         const listData = yield field.adaptor.fetchList(field.adaptorParams);
@@ -3524,9 +3597,9 @@ var ExternalInput = ({
                     {
                       style: { whiteSpace: "nowrap" },
                       onClick: (e) => {
-                        onChange(item);
+                        onChange(mapProp(item));
                         setOpen(false);
-                        setSelectedData(item);
+                        setSelectedData(mapProp(item));
                       },
                       children: keys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("td", { children: item[key] }, key))
                     },
@@ -3548,16 +3621,18 @@ var getClassName9 = get_class_name_factory_default("Input", styles_module_defaul
 var ExternalField = ({
   field,
   onChange,
-  readOnly,
   value,
   name,
   label
 }) => {
-  if (!field.adaptor) {
+  if (field.type !== "external" || !field.adaptor) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: getClassName9(""), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: getClassName9("label"), children: name === "_data" ? "External content" : label || name }),
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: getClassName9(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: getClassName9("label"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: getClassName9("labelIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(link_default, { size: 16 }) }),
+      label || name
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ExternalInput, { field, onChange, value })
   ] });
 };
@@ -3573,7 +3648,7 @@ var RadioField = ({
   value,
   name
 }) => {
-  if (!field.options) {
+  if (field.type !== "radio" || !field.options) {
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: getClassName10(), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: getClassName10("radioGroup"), children: [
@@ -3623,7 +3698,7 @@ var SelectField = ({
   value,
   name
 }) => {
-  if (!field.options) {
+  if (field.type !== "select" || !field.options) {
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: getClassName11(), children: [
@@ -3740,49 +3815,99 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ComponentList/styles.module.css#css-module
 init_react_import();
-var styles_module_default7 = { "ComponentList": "_ComponentList_bvy0z_1", "ComponentList-item": "_ComponentList-item_bvy0z_6", "ComponentList-itemIcon": "_ComponentList-itemIcon_bvy0z_24", "ComponentList--isDraggingFrom": "_ComponentList--isDraggingFrom_bvy0z_28" };
+var styles_module_default7 = { "ComponentList": "_ComponentList_3rdy2_1", "ComponentList--isExpanded": "_ComponentList--isExpanded_3rdy2_6", "ComponentList-content": "_ComponentList-content_3rdy2_10", "ComponentList-title": "_ComponentList-title_3rdy2_18", "ComponentList-titleIcon": "_ComponentList-titleIcon_3rdy2_39", "ComponentListItem": "_ComponentListItem_3rdy2_43", "ComponentListItem-draggable": "_ComponentListItem-draggable_3rdy2_43", "ComponentListItemIcon": "_ComponentListItemIcon_3rdy2_61", "ComponentList--isDraggingFrom": "_ComponentList--isDraggingFrom_3rdy2_65" };
 
 // components/ComponentList/index.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var getClassName14 = get_class_name_factory_default("ComponentList", styles_module_default7);
-var ComponentList = ({ config }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DroppableStrictMode_default, { droppableId: "component-list", isDropDisabled: true, children: (provided, snapshot) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-    "div",
-    __spreadProps(__spreadValues({}, provided.droppableProps), {
-      ref: provided.innerRef,
-      className: getClassName14({
-        isDraggingFrom: !!snapshot.draggingFromThisWith
-      }),
-      children: [
-        Object.keys(config.components).map((componentKey, i) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-            Draggable2,
-            {
-              id: componentKey,
-              index: i,
-              showShadow: true,
-              disableAnimations: true,
-              className: () => getClassName14("item"),
-              children: () => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-                componentKey,
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: getClassName14("itemIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DragIcon, {}) })
-              ] })
-            },
-            componentKey
-          );
-        }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: { display: "none" }, children: provided.placeholder })
-      ]
-    })
+var getClassNameItem2 = get_class_name_factory_default("ComponentListItem", styles_module_default7);
+var ComponentListItem = ({
+  component,
+  index,
+  id
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: getClassNameItem2(), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    Draggable2,
+    {
+      id,
+      index,
+      showShadow: true,
+      disableAnimations: true,
+      className: () => getClassNameItem2("draggable"),
+      children: () => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+        component,
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: getClassNameItem2("icon"), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DragIcon, {}) })
+      ] })
+    },
+    component
   ) });
 };
+var ComponentList = ({
+  children,
+  title,
+  id
+}) => {
+  const { config, state, setUi } = useAppContext();
+  const { expanded = true } = state.ui.componentList[id] || {};
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: getClassName14({ isExpanded: expanded }), children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+      "div",
+      {
+        className: getClassName14("title"),
+        onClick: () => setUi({
+          componentList: __spreadProps(__spreadValues({}, state.ui.componentList), {
+            [id]: __spreadProps(__spreadValues({}, state.ui.componentList[id]), {
+              expanded: !expanded
+            })
+          })
+        }),
+        title: expanded ? `Collapse${title ? ` ${title}` : ""}` : `Expand${title ? ` ${title}` : ""}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: getClassName14("titleIcon"), children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(chevron_up_default, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(chevron_down_default, { size: 12 }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: getClassName14("content"), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      DroppableStrictMode_default,
+      {
+        droppableId: `component-list${title ? `:${title}` : ""}`,
+        isDropDisabled: true,
+        children: (provided, snapshot) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+          "div",
+          __spreadProps(__spreadValues({}, provided.droppableProps), {
+            ref: provided.innerRef,
+            className: getClassName14({
+              isDraggingFrom: !!snapshot.draggingFromThisWith
+            }),
+            children: [
+              children || Object.keys(config.components).map((componentKey, i) => {
+                return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  ComponentListItem,
+                  {
+                    component: componentKey,
+                    index: i,
+                    id: componentKey
+                  },
+                  componentKey
+                );
+              }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: { display: "none" }, children: provided.placeholder })
+            ]
+          })
+        )
+      }
+    ) })
+  ] });
+};
+ComponentList.Item = ComponentListItem;
 
 // lib/use-placeholder-style.ts
 init_react_import();
-var import_react27 = require("react");
+var import_react28 = require("react");
 var usePlaceholderStyle = () => {
   const queryAttr = "data-rbd-drag-handle-draggable-id";
-  const [placeholderStyle, setPlaceholderStyle] = (0, import_react27.useState)();
+  const [placeholderStyle, setPlaceholderStyle] = (0, import_react28.useState)();
   const onDragStartOrUpdate = (draggedItem) => {
     var _a;
     const draggableId = draggedItem.draggableId;
@@ -3837,7 +3962,7 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Heading/styles.module.css#css-module
 init_react_import();
-var styles_module_default9 = { "Heading": "_Heading_1bvy5_1", "Heading--xxxxl": "_Heading--xxxxl_1bvy5_13", "Heading--xxxl": "_Heading--xxxl_1bvy5_19", "Heading--xxl": "_Heading--xxl_1bvy5_23", "Heading--xl": "_Heading--xl_1bvy5_27", "Heading--l": "_Heading--l_1bvy5_31", "Heading--m": "_Heading--m_1bvy5_35", "Heading--s": "_Heading--s_1bvy5_39", "Heading--xs": "_Heading--xs_1bvy5_43" };
+var styles_module_default9 = { "Heading": "_Heading_7sjz7_1", "Heading--xxxxl": "_Heading--xxxxl_7sjz7_14", "Heading--xxxl": "_Heading--xxxl_7sjz7_20", "Heading--xxl": "_Heading--xxl_7sjz7_24", "Heading--xl": "_Heading--xl_7sjz7_28", "Heading--l": "_Heading--l_7sjz7_32", "Heading--m": "_Heading--m_7sjz7_36", "Heading--s": "_Heading--s_7sjz7_40", "Heading--xs": "_Heading--xs_7sjz7_44" };
 
 // components/Heading/index.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
@@ -3857,7 +3982,7 @@ var Heading = ({ children, rank, size = "m" }) => {
 
 // lib/use-breadcrumbs.ts
 init_react_import();
-var import_react28 = require("react");
+var import_react29 = 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: [] };
@@ -3907,8 +4032,8 @@ var useBreadcrumbs = (renderCount) => {
     state: { data },
     selectedItem
   } = useAppContext();
-  const dzContext = (0, import_react28.useContext)(dropZoneContext);
-  return (0, import_react28.useMemo)(() => {
+  const dzContext = (0, import_react29.useContext)(dropZoneContext);
+  return (0, import_react29.useMemo)(() => {
     const breadcrumbs = convertPathDataToBreadcrumbs(
       selectedItem,
       dzContext == null ? void 0 : dzContext.pathData,
@@ -3957,15 +4082,15 @@ init_react_import();
 
 // lib/use-puck-history.ts
 init_react_import();
-var import_react30 = require("react");
+var import_react31 = require("react");
 
 // lib/use-action-history.ts
 init_react_import();
-var import_react29 = require("react");
+var import_react30 = require("react");
 var EMPTY_HISTORY_INDEX = -1;
 function useActionHistory() {
-  const [histories, setHistories] = (0, import_react29.useState)([]);
-  const [currentHistoryIndex, setCurrentHistoryIndex] = (0, import_react29.useState)(EMPTY_HISTORY_INDEX);
+  const [histories, setHistories] = (0, import_react30.useState)([]);
+  const [currentHistoryIndex, setCurrentHistoryIndex] = (0, import_react30.useState)(EMPTY_HISTORY_INDEX);
   const currentHistory = histories[currentHistoryIndex];
   const canRewind = currentHistoryIndex > EMPTY_HISTORY_INDEX;
   const canForward = currentHistoryIndex < histories.length - 1;
@@ -4044,7 +4169,7 @@ function usePuckHistory({
       dispatch
     });
   }, DEBOUNCE_TIME);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     historyEmitter.on(RECORD_DIFF, handleRecordDiff);
     return () => {
       historyEmitter.off(RECORD_DIFF, handleRecordDiff);
@@ -4389,7 +4514,7 @@ var scrollIntoView = (el) => {
 };
 
 // components/LayerTree/index.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 
 // lib/find-zones-for-area.ts
 init_react_import();
@@ -4427,7 +4552,7 @@ var LayerTree = ({
   label
 }) => {
   const zones = data.zones || {};
-  const ctx = (0, import_react31.useContext)(dropZoneContext);
+  const ctx = (0, import_react32.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" }) }),
@@ -4550,8 +4675,98 @@ var flushZones = (appState) => {
   return appState;
 };
 
-// components/Puck/index.tsx
+// lib/use-component-list.tsx
+init_react_import();
+var import_react33 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
+var useComponentList = (config, ui) => {
+  const [componentList, setComponentList] = (0, import_react33.useState)();
+  (0, import_react33.useEffect)(() => {
+    var _a, _b, _c;
+    if (Object.keys(ui.componentList).length > 0) {
+      const matchedComponents = [];
+      let _componentList;
+      _componentList = Object.entries(ui.componentList).map(
+        ([categoryKey, category]) => {
+          if (category.visible === false || !category.components) {
+            return null;
+          }
+          return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            ComponentList,
+            {
+              id: categoryKey,
+              title: category.title || categoryKey,
+              children: category.components.map((componentName, i) => {
+                matchedComponents.push(componentName);
+                return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                  ComponentList.Item,
+                  {
+                    component: componentName,
+                    index: i,
+                    id: `${categoryKey}::${componentName}`
+                  },
+                  componentName
+                );
+              })
+            },
+            categoryKey
+          );
+        }
+      );
+      const remainingComponents = Object.keys(config.components).filter(
+        (component) => matchedComponents.indexOf(component) === -1
+      );
+      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)(
+            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)(
+                  ComponentList.Item,
+                  {
+                    component: componentName,
+                    index: i,
+                    id: `other::${componentName}`
+                  },
+                  componentName
+                );
+              })
+            },
+            "other"
+          )
+        );
+      }
+      setComponentList(_componentList);
+    }
+  }, [config.categories, ui.componentList]);
+  return componentList;
+};
+
+// lib/resolve-all-props.ts
+init_react_import();
+var resolveAllProps = (content, config) => __async(void 0, null, function* () {
+  return yield Promise.all(
+    content.map((item) => __async(void 0, null, function* () {
+      const configForItem = config.components[item.type];
+      if (configForItem.resolveProps) {
+        const { props: resolvedProps, readOnly = {} } = yield configForItem.resolveProps(item.props);
+        const { _meta: { readOnly: existingReadOnly = {} } = {} } = item.props || {};
+        return __spreadProps(__spreadValues({}, item), {
+          props: __spreadProps(__spreadValues({}, resolvedProps), {
+            _meta: { readOnly: __spreadValues(__spreadValues({}, existingReadOnly), readOnly) }
+          })
+        });
+      }
+      return item;
+    }))
+  );
+});
+
+// components/Puck/index.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var defaultPageFields = {
   title: { type: "text" }
 };
@@ -4563,7 +4778,7 @@ var PluginRenderer = ({
   renderMethod
 }) => {
   return plugins.filter((item) => item[renderMethod]).map((item) => item[renderMethod]).reduce(
-    (accChildren, Item) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Item, { dispatch, state, children: accChildren }),
+    (accChildren, Item) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Item, { dispatch, state, children: accChildren }),
     children
   );
 };
@@ -4573,27 +4788,60 @@ function Puck({
   onChange,
   onPublish,
   plugins = [],
+  renderComponentList,
   renderHeader,
   renderHeaderActions,
   headerTitle,
   headerPath
 }) {
   var _a, _b;
-  const [reducer] = (0, import_react32.useState)(() => createReducer({ config }));
+  const [dynamicProps, setDynamicProps] = (0, import_react34.useState)({});
+  const [reducer] = (0, import_react34.useState)(() => createReducer({ config }));
   const initialAppState = __spreadProps(__spreadValues({}, defaultAppState), {
-    data: initialData
+    data: initialData,
+    ui: __spreadProps(__spreadValues({}, defaultAppState.ui), {
+      // Store categories under componentList on state to allow render functions and plugins to modify
+      componentList: config.categories ? Object.entries(config.categories).reduce(
+        (acc, [categoryName, category]) => {
+          return __spreadProps(__spreadValues({}, acc), {
+            [categoryName]: {
+              title: category.title,
+              components: category.components,
+              expanded: category.defaultExpanded,
+              visible: category.visible
+            }
+          });
+        },
+        {}
+      ) : {}
+    })
   });
-  const [appState, dispatch] = (0, import_react32.useReducer)(
+  const [appState, dispatch] = (0, import_react34.useReducer)(
     reducer,
     flushZones(initialAppState)
   );
   const { data, ui } = appState;
+  (0, import_react34.useEffect)(() => {
+    const flatContent = Object.keys(data.zones || {}).reduce(
+      (acc, zone) => [...acc, ...data.zones[zone]],
+      data.content
+    );
+    resolveAllProps(flatContent, config).then((dynamicContent) => {
+      const newDynamicProps = dynamicContent.reduce(
+        (acc, item) => {
+          return __spreadProps(__spreadValues({}, acc), { [item.props.id]: item.props });
+        },
+        {}
+      );
+      setDynamicProps(newDynamicProps);
+    });
+  }, [data]);
   const { canForward, canRewind, rewind, forward } = usePuckHistory({
     appState,
     dispatch
   });
   const { itemSelector, leftSideBarVisible } = ui;
-  const setItemSelector = (0, import_react32.useCallback)(
+  const setItemSelector = (0, import_react34.useCallback)(
     (newItemSelector) => {
       dispatch({
         type: "setUi",
@@ -4602,11 +4850,11 @@ function Puck({
     },
     []
   );
-  const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
-  const Page = (0, import_react32.useCallback)(
+  const selectedItem = itemSelector ? getItem(itemSelector, data, dynamicProps) : null;
+  const Page = (0, import_react34.useCallback)(
     (pageProps) => {
       var _a2, _b2;
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         PluginRenderer,
         {
           plugins,
@@ -4619,8 +4867,8 @@ function Puck({
     },
     [config.root]
   );
-  const PageFieldWrapper = (0, import_react32.useCallback)(
-    (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  const PageFieldWrapper = (0, import_react34.useCallback)(
+    (props) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       PluginRenderer,
       {
         plugins,
@@ -4632,8 +4880,8 @@ function Puck({
     ),
     []
   );
-  const ComponentFieldWrapper = (0, import_react32.useCallback)(
-    (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  const ComponentFieldWrapper = (0, import_react34.useCallback)(
+    (props) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       PluginRenderer,
       {
         plugins,
@@ -4645,16 +4893,34 @@ function Puck({
     ),
     []
   );
+  const ComponentListWrapper = (0, import_react34.useCallback)((props) => {
+    const children = /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      PluginRenderer,
+      {
+        plugins,
+        renderMethod: "renderComponentList",
+        dispatch: props.dispatch,
+        state: props.state,
+        children: props.children
+      }
+    );
+    return renderComponentList ? renderComponentList({
+      children,
+      dispatch,
+      state: appState
+    }) : children;
+  }, []);
   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_react32.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (onChange)
       onChange(data);
   }, [data]);
   const { onDragStartOrUpdate, placeholderStyle } = usePlaceholderStyle();
-  const [draggedItem, setDraggedItem] = (0, import_react32.useState)();
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "puck", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AppProvider, { value: { state: appState, dispatch }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  const [draggedItem, setDraggedItem] = (0, import_react34.useState)();
+  const componentList = useComponentList(config, appState.ui);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "puck", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(AppProvider, { value: { state: appState, dispatch, config }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     import_react_beautiful_dnd5.DragDropContext,
     {
       onDragUpdate: (update) => {
@@ -4670,10 +4936,11 @@ function Puck({
         if (!droppedItem.destination) {
           return;
         }
-        if (droppedItem.source.droppableId === "component-list" && droppedItem.destination) {
+        if (droppedItem.source.droppableId.startsWith("component-list") && droppedItem.destination) {
+          const [_, componentId] = droppedItem.draggableId.split("::");
           dispatch({
             type: "insert",
-            componentType: droppedItem.draggableId,
+            componentType: componentId || droppedItem.draggableId,
             destinationIndex: droppedItem.destination.index,
             destinationZone: droppedItem.destination.droppableId
           });
@@ -4706,12 +4973,13 @@ function Puck({
           });
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         DropZoneProvider,
         {
           value: {
             data,
             itemSelector,
+            dynamicProps,
             setItemSelector,
             config,
             dispatch,
@@ -4720,8 +4988,8 @@ function Puck({
             mode: "edit",
             areaId: "root"
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(dropZoneContext.Consumer, { children: (ctx) => {
-            return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(dropZoneContext.Consumer, { children: (ctx) => {
+            return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
               "div",
               {
                 style: {
@@ -4737,7 +5005,7 @@ function Puck({
                   right: 0
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                     "header",
                     {
                       style: {
@@ -4747,37 +5015,37 @@ function Puck({
                         borderBottom: "1px solid var(--puck-color-grey-8)"
                       },
                       children: renderHeader ? renderHeader({
-                        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                           Button,
                           {
                             onClick: () => {
                               onPublish(data);
                             },
-                            icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(globe_default, { size: "14px" }),
+                            icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(globe_default, { size: "14px" }),
                             children: "Publish"
                           }
                         ),
                         dispatch,
                         state: appState
-                      }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+                      }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
                         "div",
                         {
                           style: {
                             display: "grid",
                             padding: 16,
                             gridTemplateAreas: '"left middle right"',
-                            gridTemplateColumns: "288px auto 288px",
+                            gridTemplateColumns: "344px auto 344px",
                             gridTemplateRows: "auto"
                           },
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                               "div",
                               {
                                 style: {
                                   display: "flex",
                                   gap: 16
                                 },
-                                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                                children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                                   IconButton,
                                   {
                                     onClick: () => dispatch({
@@ -4787,12 +5055,12 @@ function Puck({
                                       }
                                     }),
                                     title: "Toggle left sidebar",
-                                    children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(sidebar_default, {})
+                                    children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(sidebar_default, {})
                                   }
                                 )
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                               "div",
                               {
                                 style: {
@@ -4800,19 +5068,19 @@ function Puck({
                                   justifyContent: "center",
                                   alignItems: "center"
                                 },
-                                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Heading, { rank: 2, size: "xs", children: [
+                                children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Heading, { rank: 2, size: "xs", children: [
                                   headerTitle || data.root.title || "Page",
-                                  headerPath && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                                  headerPath && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                                     "small",
                                     {
                                       style: { fontWeight: 400, marginLeft: 4 },
-                                      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("code", { children: headerPath })
+                                      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("code", { children: headerPath })
                                     }
                                   )
                                 ] })
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+                            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
                               "div",
                               {
                                 style: {
@@ -4821,14 +5089,14 @@ function Puck({
                                   justifyContent: "flex-end"
                                 },
                                 children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { display: "flex" }, children: [
-                                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                                  /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { display: "flex" }, children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                                       IconButton,
                                       {
                                         title: "undo",
                                         disabled: !canRewind,
                                         onClick: rewind,
-                                        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                                        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                                           chevron_left_default,
                                           {
                                             size: 21,
@@ -4837,13 +5105,13 @@ function Puck({
                                         )
                                       }
                                     ),
-                                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                                       IconButton,
                                       {
                                         title: "redo",
                                         disabled: !canForward,
                                         onClick: forward,
-                                        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                                        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                                           chevron_right_default,
                                           {
                                             size: 21,
@@ -4857,13 +5125,13 @@ function Puck({
                                     state: appState,
                                     dispatch
                                   }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                                     Button,
                                     {
                                       onClick: () => {
                                         onPublish(data);
                                       },
-                                      icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(globe_default, { size: "14px" }),
+                                      icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(globe_default, { size: "14px" }),
                                       children: "Publish"
                                     }
                                   )
@@ -4875,7 +5143,7 @@ function Puck({
                       )
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
                     "div",
                     {
                       style: {
@@ -4887,9 +5155,9 @@ function Puck({
                         flexDirection: "column"
                       },
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SidebarSection, { title: "Components", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ComponentList, { config }) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(SidebarSection, { title: "Outline", children: [
-                          (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SidebarSection, { title: "Components", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ComponentListWrapper, { children: componentList ? componentList : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ComponentList, { id: "all" }) }) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(SidebarSection, { title: "Outline", children: [
+                          (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                             LayerTree,
                             {
                               data,
@@ -4901,7 +5169,7 @@ function Puck({
                           ),
                           Object.entries(findZonesForArea(data, "root")).map(
                             ([zoneKey, zone]) => {
-                              return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                              return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                                 LayerTree,
                                 {
                                   data,
@@ -4919,7 +5187,7 @@ function Puck({
                       ]
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
                     "div",
                     {
                       style: {
@@ -4932,7 +5200,7 @@ function Puck({
                       onClick: () => setItemSelector(null),
                       id: "puck-frame",
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                           "div",
                           {
                             className: "puck-root",
@@ -4941,26 +5209,26 @@ function Puck({
                               margin: 32,
                               zoom: 0.75
                             },
-                            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                            children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                               "div",
                               {
                                 style: {
                                   border: "1px solid var(--puck-color-grey-8)"
                                 },
-                                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                                children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                                   Page,
                                   __spreadProps(__spreadValues({
                                     dispatch,
                                     state: appState
                                   }, data.root), {
-                                    children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropZone, { zone: rootDroppableId })
+                                    children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropZone, { zone: rootDroppableId })
                                   })
                                 )
                               }
                             )
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                           "div",
                           {
                             style: {
@@ -4973,7 +5241,7 @@ function Puck({
                       ]
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                     "div",
                     {
                       style: {
@@ -4985,49 +5253,25 @@ function Puck({
                         flexDirection: "column",
                         background: "var(--puck-color-white)"
                       },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(FieldWrapper, { dispatch, state: appState, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(FieldWrapper, { dispatch, state: appState, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                         SidebarSection,
                         {
                           noPadding: true,
                           showBreadcrumbs: true,
                           title: selectedItem ? selectedItem.type : "Page",
                           children: Object.keys(fields).map((fieldName) => {
-                            var _a2, _b2, _c, _d;
                             const field = fields[fieldName];
                             const onChange2 = (value) => {
                               let currentProps;
-                              let newProps;
                               if (selectedItem) {
                                 currentProps = selectedItem.props;
                               } else {
                                 currentProps = data.root;
                               }
-                              if (fieldName === "_data") {
-                                if (!value) {
-                                  const _a3 = currentProps._meta || {}, { locked } = _a3, _meta = __objRest(_a3, ["locked"]);
-                                  newProps = __spreadProps(__spreadValues({}, currentProps), {
-                                    _data: void 0,
-                                    _meta
-                                  });
-                                } else {
-                                  const changedFields = filter(
-                                    // filter out anything not supported by this component
-                                    value,
-                                    Object.keys(fields)
-                                  );
-                                  newProps = __spreadProps(__spreadValues(__spreadValues({}, currentProps), changedFields), {
-                                    _data: value,
-                                    // TODO perf - this is duplicative and will make payload larger
-                                    _meta: {
-                                      locked: Object.keys(changedFields)
-                                    }
-                                  });
-                                }
-                              } else {
-                                newProps = __spreadProps(__spreadValues({}, currentProps), {
-                                  [fieldName]: value
-                                });
-                              }
+                              const _a2 = currentProps._meta || {}, { readOnly } = _a2, _meta = __objRest(_a2, ["readOnly"]);
+                              const newProps = __spreadProps(__spreadValues({}, currentProps), {
+                                [fieldName]: value
+                              });
                               if (itemSelector) {
                                 dispatch({
                                   type: "replace",
@@ -5043,31 +5287,28 @@ function Puck({
                               }
                             };
                             if (selectedItem && itemSelector) {
-                              return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                              const { readOnly = {} } = selectedItem.props._meta || {};
+                              return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                                 InputOrGroup,
                                 {
                                   field,
                                   name: fieldName,
                                   label: field.label,
-                                  readOnly: ((_b2 = (_a2 = getItem(
-                                    itemSelector,
-                                    data
-                                  ).props._meta) == null ? void 0 : _a2.locked) == null ? void 0 : _b2.indexOf(fieldName)) > -1,
+                                  readOnly: readOnly[fieldName],
                                   value: selectedItem.props[fieldName],
                                   onChange: onChange2
                                 },
                                 `${selectedItem.props.id}_${fieldName}`
                               );
                             } else {
-                              return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                              const { readOnly = {} } = data.root._meta || {};
+                              return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                                 InputOrGroup,
                                 {
                                   field,
                                   name: fieldName,
                                   label: field.label,
-                                  readOnly: ((_d = (_c = data.root._meta) == null ? void 0 : _c.locked) == null ? void 0 : _d.indexOf(
-                                    fieldName
-                                  )) > -1,
+                                  readOnly: readOnly[fieldName],
                                   value: data.root[fieldName],
                                   onChange: onChange2
                                 },
@@ -5091,13 +5332,29 @@ function Puck({
 
 // components/Render/index.tsx
 init_react_import();
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function Render({ config, data }) {
   if (config.root) {
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropZoneProvider, { value: { data, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(config.root.render, __spreadProps(__spreadValues({}, data.root), { editMode: false, id: "puck-root", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropZone, { zone: rootDroppableId }) })) });
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DropZoneProvider, { value: { data, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(config.root.render, __spreadProps(__spreadValues({}, data.root), { editMode: false, id: "puck-root", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DropZone, { zone: rootDroppableId }) })) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropZoneProvider, { value: { data, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropZone, { zone: rootDroppableId }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DropZoneProvider, { value: { data, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DropZone, { zone: rootDroppableId }) });
 }
+
+// lib/resolve-data.ts
+init_react_import();
+var resolveData = (data, config) => __async(void 0, null, function* () {
+  const { zones = {} } = data;
+  const zoneKeys = Object.keys(zones);
+  const resolvedZones = {};
+  for (let i = 0; i < zoneKeys.length; i++) {
+    const zoneKey = zoneKeys[i];
+    resolvedZones[zoneKey] = yield resolveAllProps(zones[zoneKey], config);
+  }
+  return __spreadProps(__spreadValues({}, data), {
+    content: yield resolveAllProps(data.content, config),
+    zones: resolvedZones
+  });
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
@@ -5107,7 +5364,8 @@ function Render({ config, data }) {
   IconButton,
   Puck,
   Render,
-  dropZoneContext
+  dropZoneContext,
+  resolveData
 });
 /*! Bundled license information: