@measured/puck 0.8.0 → 0.9.0-canary.2bf48af

package/dist/index.js

@@ -1214,11 +1214,11 @@ var Button = ({
 
 // components/DropZone/index.tsx
 init_react_import();
-var import_react20 = require("react");
+var import_react21 = require("react");
 
 // components/DraggableComponent/index.tsx
 init_react_import();
-var import_react17 = require("react");
+var import_react18 = 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
@@ -1378,7 +1378,7 @@ ChevronDown.propTypes = {
 ChevronDown.displayName = "ChevronDown";
 var chevron_down_default = ChevronDown;
 
-// ../../node_modules/react-feather/dist/icons/chevron-right.js
+// ../../node_modules/react-feather/dist/icons/chevron-left.js
 init_react_import();
 var import_react5 = __toESM(require("react"));
 var import_prop_types3 = __toESM(require_prop_types());
@@ -1428,7 +1428,7 @@ function _objectWithoutPropertiesLoose3(source, excluded) {
   }
   return target;
 }
-var ChevronRight = (0, import_react5.forwardRef)(function(_ref, ref) {
+var ChevronLeft = (0, import_react5.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 = _objectWithoutProperties3(_ref, ["color", "size"]);
   return /* @__PURE__ */ import_react5.default.createElement("svg", _extends3({
     ref,
@@ -1442,17 +1442,17 @@ var ChevronRight = (0, import_react5.forwardRef)(function(_ref, ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }, rest), /* @__PURE__ */ import_react5.default.createElement("polyline", {
-    points: "9 18 15 12 9 6"
+    points: "15 18 9 12 15 6"
   }));
 });
-ChevronRight.propTypes = {
+ChevronLeft.propTypes = {
   color: import_prop_types3.default.string,
   size: import_prop_types3.default.oneOfType([import_prop_types3.default.string, import_prop_types3.default.number])
 };
-ChevronRight.displayName = "ChevronRight";
-var chevron_right_default = ChevronRight;
+ChevronLeft.displayName = "ChevronLeft";
+var chevron_left_default = ChevronLeft;
 
-// ../../node_modules/react-feather/dist/icons/copy.js
+// ../../node_modules/react-feather/dist/icons/chevron-right.js
 init_react_import();
 var import_react6 = __toESM(require("react"));
 var import_prop_types4 = __toESM(require_prop_types());
@@ -1502,7 +1502,7 @@ function _objectWithoutPropertiesLoose4(source, excluded) {
   }
   return target;
 }
-var Copy = (0, import_react6.forwardRef)(function(_ref, ref) {
+var ChevronRight = (0, import_react6.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 = _objectWithoutProperties4(_ref, ["color", "size"]);
   return /* @__PURE__ */ import_react6.default.createElement("svg", _extends4({
     ref,
@@ -1515,25 +1515,18 @@ var Copy = (0, import_react6.forwardRef)(function(_ref, ref) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, rest), /* @__PURE__ */ import_react6.default.createElement("rect", {
-    x: "9",
-    y: "9",
-    width: "13",
-    height: "13",
-    rx: "2",
-    ry: "2"
-  }), /* @__PURE__ */ import_react6.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_react6.default.createElement("polyline", {
+    points: "9 18 15 12 9 6"
   }));
 });
-Copy.propTypes = {
+ChevronRight.propTypes = {
   color: import_prop_types4.default.string,
   size: import_prop_types4.default.oneOfType([import_prop_types4.default.string, import_prop_types4.default.number])
 };
-Copy.displayName = "Copy";
-var copy_default = Copy;
+ChevronRight.displayName = "ChevronRight";
+var chevron_right_default = ChevronRight;
 
-// ../../node_modules/react-feather/dist/icons/globe.js
+// ../../node_modules/react-feather/dist/icons/copy.js
 init_react_import();
 var import_react7 = __toESM(require("react"));
 var import_prop_types5 = __toESM(require_prop_types());
@@ -1583,7 +1576,7 @@ function _objectWithoutPropertiesLoose5(source, excluded) {
   }
   return target;
 }
-var Globe = (0, import_react7.forwardRef)(function(_ref, ref) {
+var Copy = (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,
@@ -1596,27 +1589,25 @@ var Globe = (0, import_react7.forwardRef)(function(_ref, ref) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, rest), /* @__PURE__ */ import_react7.default.createElement("circle", {
-    cx: "12",
-    cy: "12",
-    r: "10"
-  }), /* @__PURE__ */ import_react7.default.createElement("line", {
-    x1: "2",
-    y1: "12",
-    x2: "22",
-    y2: "12"
+  }, 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: "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_types5.default.string,
   size: import_prop_types5.default.oneOfType([import_prop_types5.default.string, import_prop_types5.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_react8 = __toESM(require("react"));
 var import_prop_types6 = __toESM(require_prop_types());
@@ -1666,7 +1657,7 @@ function _objectWithoutPropertiesLoose6(source, excluded) {
   }
   return target;
 }
-var Grid = (0, import_react8.forwardRef)(function(_ref, ref) {
+var Globe = (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,
@@ -1679,22 +1670,105 @@ var Grid = (0, import_react8.forwardRef)(function(_ref, ref) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, rest), /* @__PURE__ */ import_react8.default.createElement("rect", {
+  }, 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"
+  }), /* @__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"
+  }));
+});
+Globe.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;
+
+// ../../node_modules/react-feather/dist/icons/grid.js
+init_react_import();
+var import_react9 = __toESM(require("react"));
+var import_prop_types7 = __toESM(require_prop_types());
+function _extends7() {
+  _extends7 = 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 _extends7.apply(this, arguments);
+}
+function _objectWithoutProperties7(source, excluded) {
+  if (source == null)
+    return {};
+  var target = _objectWithoutPropertiesLoose7(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 _objectWithoutPropertiesLoose7(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_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,
+    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_react9.default.createElement("rect", {
     x: "3",
     y: "3",
     width: "7",
     height: "7"
-  }), /* @__PURE__ */ import_react8.default.createElement("rect", {
+  }), /* @__PURE__ */ import_react9.default.createElement("rect", {
     x: "14",
     y: "3",
     width: "7",
     height: "7"
-  }), /* @__PURE__ */ import_react8.default.createElement("rect", {
+  }), /* @__PURE__ */ import_react9.default.createElement("rect", {
     x: "14",
     y: "14",
     width: "7",
     height: "7"
-  }), /* @__PURE__ */ import_react8.default.createElement("rect", {
+  }), /* @__PURE__ */ import_react9.default.createElement("rect", {
     x: "3",
     y: "14",
     width: "7",
@@ -1702,18 +1776,18 @@ var Grid = (0, import_react8.forwardRef)(function(_ref, ref) {
   }));
 });
 Grid.propTypes = {
-  color: import_prop_types6.default.string,
-  size: import_prop_types6.default.oneOfType([import_prop_types6.default.string, import_prop_types6.default.number])
+  color: import_prop_types7.default.string,
+  size: import_prop_types7.default.oneOfType([import_prop_types7.default.string, import_prop_types7.default.number])
 };
 Grid.displayName = "Grid";
 var grid_default = Grid;
 
 // ../../node_modules/react-feather/dist/icons/hash.js
 init_react_import();
-var import_react9 = __toESM(require("react"));
-var import_prop_types7 = __toESM(require_prop_types());
-function _extends7() {
-  _extends7 = Object.assign || function(target) {
+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) {
@@ -1724,12 +1798,12 @@ function _extends7() {
     }
     return target;
   };
-  return _extends7.apply(this, arguments);
+  return _extends8.apply(this, arguments);
 }
-function _objectWithoutProperties7(source, excluded) {
+function _objectWithoutProperties8(source, excluded) {
   if (source == null)
     return {};
-  var target = _objectWithoutPropertiesLoose7(source, excluded);
+  var target = _objectWithoutPropertiesLoose8(source, excluded);
   var key, i;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -1744,7 +1818,7 @@ function _objectWithoutProperties7(source, excluded) {
   }
   return target;
 }
-function _objectWithoutPropertiesLoose7(source, excluded) {
+function _objectWithoutPropertiesLoose8(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -1758,9 +1832,9 @@ function _objectWithoutPropertiesLoose7(source, excluded) {
   }
   return target;
 }
-var Hash = (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({
+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({
     ref,
     xmlns: "http://www.w3.org/2000/svg",
     width: size,
@@ -1771,22 +1845,22 @@ var Hash = (0, import_react9.forwardRef)(function(_ref, ref) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, rest), /* @__PURE__ */ import_react9.default.createElement("line", {
+  }, rest), /* @__PURE__ */ import_react10.default.createElement("line", {
     x1: "4",
     y1: "9",
     x2: "20",
     y2: "9"
-  }), /* @__PURE__ */ import_react9.default.createElement("line", {
+  }), /* @__PURE__ */ import_react10.default.createElement("line", {
     x1: "4",
     y1: "15",
     x2: "20",
     y2: "15"
-  }), /* @__PURE__ */ import_react9.default.createElement("line", {
+  }), /* @__PURE__ */ import_react10.default.createElement("line", {
     x1: "10",
     y1: "3",
     x2: "8",
     y2: "21"
-  }), /* @__PURE__ */ import_react9.default.createElement("line", {
+  }), /* @__PURE__ */ import_react10.default.createElement("line", {
     x1: "16",
     y1: "3",
     x2: "14",
@@ -1794,18 +1868,18 @@ var Hash = (0, import_react9.forwardRef)(function(_ref, ref) {
   }));
 });
 Hash.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])
 };
 Hash.displayName = "Hash";
 var hash_default = Hash;
 
 // ../../node_modules/react-feather/dist/icons/layers.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) {
@@ -1816,12 +1890,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);
@@ -1836,7 +1910,7 @@ function _objectWithoutProperties8(source, excluded) {
   }
   return target;
 }
-function _objectWithoutPropertiesLoose8(source, excluded) {
+function _objectWithoutPropertiesLoose9(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -1850,9 +1924,9 @@ function _objectWithoutPropertiesLoose8(source, excluded) {
   }
   return target;
 }
-var Layers = (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 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({
     ref,
     xmlns: "http://www.w3.org/2000/svg",
     width: size,
@@ -1863,27 +1937,27 @@ var Layers = (0, import_react10.forwardRef)(function(_ref, ref) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, rest), /* @__PURE__ */ import_react10.default.createElement("polygon", {
+  }, rest), /* @__PURE__ */ import_react11.default.createElement("polygon", {
     points: "12 2 2 7 12 12 22 7 12 2"
-  }), /* @__PURE__ */ import_react10.default.createElement("polyline", {
+  }), /* @__PURE__ */ import_react11.default.createElement("polyline", {
     points: "2 17 12 22 22 17"
-  }), /* @__PURE__ */ import_react10.default.createElement("polyline", {
+  }), /* @__PURE__ */ import_react11.default.createElement("polyline", {
     points: "2 12 12 17 22 12"
   }));
 });
 Layers.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])
 };
 Layers.displayName = "Layers";
 var layers_default = Layers;
 
 // ../../node_modules/react-feather/dist/icons/link.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) {
@@ -1894,12 +1968,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);
@@ -1914,7 +1988,7 @@ function _objectWithoutProperties9(source, excluded) {
   }
   return target;
 }
-function _objectWithoutPropertiesLoose9(source, excluded) {
+function _objectWithoutPropertiesLoose10(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -1928,9 +2002,9 @@ function _objectWithoutPropertiesLoose9(source, excluded) {
   }
   return target;
 }
-var Link = (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 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({
     ref,
     xmlns: "http://www.w3.org/2000/svg",
     width: size,
@@ -1941,25 +2015,25 @@ var Link = (0, import_react11.forwardRef)(function(_ref, ref) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, rest), /* @__PURE__ */ import_react11.default.createElement("path", {
+  }, rest), /* @__PURE__ */ import_react12.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_react11.default.createElement("path", {
+  }), /* @__PURE__ */ import_react12.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_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])
 };
 Link.displayName = "Link";
 var link_default = Link;
 
 // ../../node_modules/react-feather/dist/icons/list.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) {
@@ -1970,12 +2044,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);
@@ -1990,7 +2064,7 @@ function _objectWithoutProperties10(source, excluded) {
   }
   return target;
 }
-function _objectWithoutPropertiesLoose10(source, excluded) {
+function _objectWithoutPropertiesLoose11(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -2004,9 +2078,9 @@ function _objectWithoutPropertiesLoose10(source, excluded) {
   }
   return target;
 }
-var List = (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 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({
     ref,
     xmlns: "http://www.w3.org/2000/svg",
     width: size,
@@ -2017,32 +2091,32 @@ var List = (0, import_react12.forwardRef)(function(_ref, ref) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, rest), /* @__PURE__ */ import_react12.default.createElement("line", {
+  }, rest), /* @__PURE__ */ import_react13.default.createElement("line", {
     x1: "8",
     y1: "6",
     x2: "21",
     y2: "6"
-  }), /* @__PURE__ */ import_react12.default.createElement("line", {
+  }), /* @__PURE__ */ import_react13.default.createElement("line", {
     x1: "8",
     y1: "12",
     x2: "21",
     y2: "12"
-  }), /* @__PURE__ */ import_react12.default.createElement("line", {
+  }), /* @__PURE__ */ import_react13.default.createElement("line", {
     x1: "8",
     y1: "18",
     x2: "21",
     y2: "18"
-  }), /* @__PURE__ */ import_react12.default.createElement("line", {
+  }), /* @__PURE__ */ import_react13.default.createElement("line", {
     x1: "3",
     y1: "6",
     x2: "3.01",
     y2: "6"
-  }), /* @__PURE__ */ import_react12.default.createElement("line", {
+  }), /* @__PURE__ */ import_react13.default.createElement("line", {
     x1: "3",
     y1: "12",
     x2: "3.01",
     y2: "12"
-  }), /* @__PURE__ */ import_react12.default.createElement("line", {
+  }), /* @__PURE__ */ import_react13.default.createElement("line", {
     x1: "3",
     y1: "18",
     x2: "3.01",
@@ -2050,18 +2124,18 @@ var List = (0, import_react12.forwardRef)(function(_ref, ref) {
   }));
 });
 List.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])
 };
 List.displayName = "List";
 var list_default = List;
 
 // ../../node_modules/react-feather/dist/icons/sidebar.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) {
@@ -2072,12 +2146,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);
@@ -2092,7 +2166,7 @@ function _objectWithoutProperties11(source, excluded) {
   }
   return target;
 }
-function _objectWithoutPropertiesLoose11(source, excluded) {
+function _objectWithoutPropertiesLoose12(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -2106,9 +2180,9 @@ function _objectWithoutPropertiesLoose11(source, excluded) {
   }
   return target;
 }
-var Sidebar = (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 Sidebar = (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,
@@ -2119,14 +2193,14 @@ var Sidebar = (0, import_react13.forwardRef)(function(_ref, ref) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, rest), /* @__PURE__ */ import_react13.default.createElement("rect", {
+  }, rest), /* @__PURE__ */ import_react14.default.createElement("rect", {
     x: "3",
     y: "3",
     width: "18",
     height: "18",
     rx: "2",
     ry: "2"
-  }), /* @__PURE__ */ import_react13.default.createElement("line", {
+  }), /* @__PURE__ */ import_react14.default.createElement("line", {
     x1: "9",
     y1: "3",
     x2: "9",
@@ -2134,18 +2208,18 @@ var Sidebar = (0, import_react13.forwardRef)(function(_ref, ref) {
   }));
 });
 Sidebar.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])
 };
 Sidebar.displayName = "Sidebar";
 var sidebar_default = Sidebar;
 
 // ../../node_modules/react-feather/dist/icons/trash.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) {
@@ -2156,12 +2230,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);
@@ -2176,7 +2250,7 @@ function _objectWithoutProperties12(source, excluded) {
   }
   return target;
 }
-function _objectWithoutPropertiesLoose12(source, excluded) {
+function _objectWithoutPropertiesLoose13(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -2190,9 +2264,9 @@ function _objectWithoutPropertiesLoose12(source, excluded) {
   }
   return target;
 }
-var Trash = (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 Trash = (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,
@@ -2203,25 +2277,25 @@ var Trash = (0, import_react14.forwardRef)(function(_ref, ref) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, rest), /* @__PURE__ */ import_react14.default.createElement("polyline", {
+  }, rest), /* @__PURE__ */ import_react15.default.createElement("polyline", {
     points: "3 6 5 6 21 6"
-  }), /* @__PURE__ */ import_react14.default.createElement("path", {
+  }), /* @__PURE__ */ import_react15.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_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])
 };
 Trash.displayName = "Trash";
 var trash_default = Trash;
 
 // ../../node_modules/react-feather/dist/icons/type.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) {
@@ -2232,12 +2306,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);
@@ -2252,7 +2326,7 @@ function _objectWithoutProperties13(source, excluded) {
   }
   return target;
 }
-function _objectWithoutPropertiesLoose13(source, excluded) {
+function _objectWithoutPropertiesLoose14(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -2266,9 +2340,9 @@ function _objectWithoutPropertiesLoose13(source, excluded) {
   }
   return target;
 }
-var Type = (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 Type = (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,
@@ -2279,14 +2353,14 @@ var Type = (0, import_react15.forwardRef)(function(_ref, ref) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, rest), /* @__PURE__ */ import_react15.default.createElement("polyline", {
+  }, rest), /* @__PURE__ */ import_react16.default.createElement("polyline", {
     points: "4 7 4 4 20 4 20 7"
-  }), /* @__PURE__ */ import_react15.default.createElement("line", {
+  }), /* @__PURE__ */ import_react16.default.createElement("line", {
     x1: "9",
     y1: "20",
     x2: "15",
     y2: "20"
-  }), /* @__PURE__ */ import_react15.default.createElement("line", {
+  }), /* @__PURE__ */ import_react16.default.createElement("line", {
     x1: "12",
     y1: "4",
     x2: "12",
@@ -2294,18 +2368,18 @@ var Type = (0, import_react15.forwardRef)(function(_ref, ref) {
   }));
 });
 Type.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])
 };
 Type.displayName = "Type";
 var type_default = Type;
 
 // lib/use-modifier-held.ts
 init_react_import();
-var import_react16 = require("react");
+var import_react17 = require("react");
 var useModifierHeld = (modifier) => {
-  const [modifierHeld, setModifierHeld] = (0, import_react16.useState)(false);
-  (0, import_react16.useEffect)(() => {
+  const [modifierHeld, setModifierHeld] = (0, import_react17.useState)(false);
+  (0, import_react17.useEffect)(() => {
     function downHandler({ key }) {
       if (key === modifier) {
         setModifierHeld(true);
@@ -2349,7 +2423,7 @@ var DraggableComponent = ({
   style
 }) => {
   const isModifierHeld = useModifierHeld("Alt");
-  (0, import_react17.useEffect)(onMount, []);
+  (0, import_react18.useEffect)(onMount, []);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     import_react_beautiful_dnd.Draggable,
     {
@@ -2393,13 +2467,13 @@ var DraggableComponent = ({
 
 // components/DroppableStrictMode/index.tsx
 init_react_import();
-var import_react18 = require("react");
+var import_react19 = 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_react18.useState)(false);
-  (0, import_react18.useEffect)(() => {
+  const [enabled, setEnabled] = (0, import_react19.useState)(false);
+  (0, import_react19.useEffect)(() => {
     const animation = requestAnimationFrame(() => setEnabled(true));
     return () => {
       cancelAnimationFrame(animation);
@@ -2478,7 +2552,7 @@ var styles_module_default2 = { "DropZone": "_DropZone_1980k_1", "DropZone-conten
 
 // components/DropZone/context.tsx
 init_react_import();
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_use_debounce = require("use-debounce");
 
 // lib/get-zone-id.ts
@@ -2495,29 +2569,29 @@ var getZoneId = (zoneCompound) => {
 
 // components/DropZone/context.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var dropZoneContext = (0, import_react19.createContext)(null);
+var dropZoneContext = (0, import_react20.createContext)(null);
 var DropZoneProvider = ({
   children,
   value
 }) => {
-  const [hoveringArea, setHoveringArea] = (0, import_react19.useState)(null);
-  const [hoveringZone, setHoveringZone] = (0, import_react19.useState)(
+  const [hoveringArea, setHoveringArea] = (0, import_react20.useState)(null);
+  const [hoveringZone, setHoveringZone] = (0, import_react20.useState)(
     rootDroppableId
   );
-  const [hoveringComponent, setHoveringComponent] = (0, import_react19.useState)();
+  const [hoveringComponent, setHoveringComponent] = (0, import_react20.useState)();
   const [hoveringAreaDb] = (0, import_use_debounce.useDebounce)(hoveringArea, 75, { leading: false });
-  const [areasWithZones, setAreasWithZones] = (0, import_react19.useState)(
+  const [areasWithZones, setAreasWithZones] = (0, import_react20.useState)(
     {}
   );
-  const [activeZones, setActiveZones] = (0, import_react19.useState)({});
+  const [activeZones, setActiveZones] = (0, import_react20.useState)({});
   const { dispatch = null } = value ? value : {};
-  const registerZoneArea = (0, import_react19.useCallback)(
+  const registerZoneArea = (0, import_react20.useCallback)(
     (area) => {
       setAreasWithZones((latest) => __spreadProps(__spreadValues({}, latest), { [area]: true }));
     },
     [setAreasWithZones]
   );
-  const registerZone = (0, import_react19.useCallback)(
+  const registerZone = (0, import_react20.useCallback)(
     (zoneCompound) => {
       if (!dispatch) {
         return;
@@ -2530,7 +2604,7 @@ var DropZoneProvider = ({
     },
     [setActiveZones, dispatch]
   );
-  const unregisterZone = (0, import_react19.useCallback)(
+  const unregisterZone = (0, import_react20.useCallback)(
     (zoneCompound) => {
       if (!dispatch) {
         return;
@@ -2545,8 +2619,8 @@ var DropZoneProvider = ({
     },
     [setActiveZones, dispatch]
   );
-  const [pathData, setPathData] = (0, import_react19.useState)();
-  const registerPath = (0, import_react19.useCallback)(
+  const [pathData, setPathData] = (0, import_react20.useState)();
+  const registerPath = (0, import_react20.useCallback)(
     (selector) => {
       if (!(value == null ? void 0 : value.data)) {
         return;
@@ -2599,7 +2673,7 @@ 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_react20.useContext)(dropZoneContext);
+  const ctx = (0, import_react21.useContext)(dropZoneContext);
   const {
     // These all need setting via context
     data,
@@ -2616,12 +2690,12 @@ function DropZoneEdit({ zone, style }) {
   } = ctx || {};
   let content = data.content || [];
   let zoneCompound = rootDroppableId;
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (areaId && registerZoneArea) {
       registerZoneArea(areaId);
     }
   }, [areaId]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (ctx == null ? void 0 : ctx.registerZone) {
       ctx == null ? void 0 : ctx.registerZone(zoneCompound);
     }
@@ -2822,7 +2896,7 @@ function DropZoneEdit({ zone, style }) {
   );
 }
 function DropZoneRender({ zone }) {
-  const ctx = (0, import_react20.useContext)(dropZoneContext);
+  const ctx = (0, import_react21.useContext)(dropZoneContext);
   const { data, areaId = "root", config } = ctx || {};
   let zoneCompound = rootDroppableId;
   let content = (data == null ? void 0 : data.content) || [];
@@ -2849,7 +2923,7 @@ function DropZoneRender({ zone }) {
   }) });
 }
 function DropZone(props) {
-  const ctx = (0, import_react20.useContext)(dropZoneContext);
+  const ctx = (0, import_react21.useContext)(dropZoneContext);
   if ((ctx == null ? void 0 : ctx.mode) === "edit") {
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DropZoneEdit, __spreadValues({}, props));
   }
@@ -2861,7 +2935,7 @@ init_react_import();
 
 // components/IconButton/IconButton.tsx
 init_react_import();
-var import_react21 = require("react");
+var import_react22 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/IconButton/IconButton.module.css#css-module
 init_react_import();
@@ -2883,7 +2957,7 @@ var IconButton = ({
   fullWidth,
   title
 }) => {
-  const [loading, setLoading] = (0, import_react21.useState)(false);
+  const [loading, setLoading] = (0, import_react22.useState)(false);
   const ElementType = href ? "a" : "button";
   const el = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     ElementType,
@@ -2923,7 +2997,7 @@ var IconButton = ({
 
 // components/Puck/index.tsx
 init_react_import();
-var import_react25 = require("react");
+var import_react28 = require("react");
 var import_react_beautiful_dnd4 = require("react-beautiful-dnd");
 
 // components/InputOrGroup/index.tsx
@@ -2931,7 +3005,7 @@ init_react_import();
 
 // components/ExternalInput/index.tsx
 init_react_import();
-var import_react22 = require("react");
+var import_react23 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ExternalInput/styles.module.css#css-module
 init_react_import();
@@ -2945,10 +3019,10 @@ var ExternalInput = ({
   onChange,
   value = null
 }) => {
-  const [data, setData] = (0, import_react22.useState)([]);
-  const [isOpen, setOpen] = (0, import_react22.useState)(false);
-  const [selectedData, setSelectedData] = (0, import_react22.useState)(value);
-  (0, import_react22.useEffect)(() => {
+  const [data, setData] = (0, import_react23.useState)([]);
+  const [isOpen, setOpen] = (0, import_react23.useState)(false);
+  const [selectedData, setSelectedData] = (0, import_react23.useState)(value);
+  (0, import_react23.useEffect)(() => {
     (() => __async(void 0, null, function* () {
       if (field.adaptor) {
         const listData = yield field.adaptor.fetchList(field.adaptorParams);
@@ -3331,10 +3405,10 @@ var ComponentList = ({ config }) => {
 
 // lib/use-placeholder-style.ts
 init_react_import();
-var import_react23 = require("react");
+var import_react24 = require("react");
 var usePlaceholderStyle = () => {
   const queryAttr = "data-rbd-drag-handle-draggable-id";
-  const [placeholderStyle, setPlaceholderStyle] = (0, import_react23.useState)();
+  const [placeholderStyle, setPlaceholderStyle] = (0, import_react24.useState)();
   const onDragStartOrUpdate = (draggedItem) => {
     var _a;
     const draggableId = draggedItem.draggableId;
@@ -3527,12 +3601,125 @@ var duplicateRelatedZones = (item, data, newId) => {
   });
 };
 
+// lib/use-puck-history.ts
+init_react_import();
+var import_react26 = require("react");
+
+// lib/use-action-history.ts
+init_react_import();
+var import_react25 = require("react");
+var EMPTY_HISTORY_INDEX = -1;
+function useActionHistory() {
+  const [histories, setHistories] = (0, import_react25.useState)([]);
+  const [currentHistoryIndex, setCurrentHistoryIndex] = (0, import_react25.useState)(EMPTY_HISTORY_INDEX);
+  const currentHistory = histories[currentHistoryIndex];
+  const canRewind = currentHistoryIndex > EMPTY_HISTORY_INDEX;
+  const canForward = currentHistoryIndex < histories.length - 1;
+  const record = (params) => {
+    const history = __spreadValues({
+      id: Math.random().toString()
+    }, params);
+    setHistories((prev) => [
+      ...prev.slice(0, currentHistoryIndex + 1),
+      history
+    ]);
+    setCurrentHistoryIndex((prev) => prev + 1);
+  };
+  const rewind = () => {
+    if (canRewind) {
+      currentHistory.rewind();
+      setCurrentHistoryIndex((prev) => prev - 1);
+    }
+  };
+  const forward = () => {
+    const forwardHistory = histories[currentHistoryIndex + 1];
+    if (canForward && forwardHistory) {
+      forwardHistory.forward();
+      setCurrentHistoryIndex((prev) => prev + 1);
+    }
+  };
+  return {
+    currentHistory,
+    canRewind,
+    canForward,
+    record,
+    rewind,
+    forward
+  };
+}
+
+// lib/use-puck-history.ts
+var import_react_hotkeys_hook = require("react-hotkeys-hook");
+var import_event_emitter = __toESM(require("event-emitter"));
+var import_use_debounce2 = require("use-debounce");
+var import_deep_diff = require("deep-diff");
+var DEBOUNCE_TIME = 250;
+var RECORD_DIFF = "RECORD_DIFF";
+var historyEmitter = (0, import_event_emitter.default)();
+var recordDiff = (newData) => historyEmitter.emit(RECORD_DIFF, newData);
+function usePuckHistory({
+  data,
+  dispatch
+}) {
+  const { canForward, canRewind, rewind, forward, record } = useActionHistory();
+  (0, import_react_hotkeys_hook.useHotkeys)("meta+z", rewind, { preventDefault: true });
+  (0, import_react_hotkeys_hook.useHotkeys)("meta+shift+z", forward, { preventDefault: true });
+  (0, import_react_hotkeys_hook.useHotkeys)("meta+y", forward, { preventDefault: true });
+  const [snapshot] = (0, import_use_debounce2.useDebounce)(data, DEBOUNCE_TIME);
+  const handleRecordDiff = (0, import_use_debounce2.useDebouncedCallback)((newData) => {
+    const _diff = (0, import_deep_diff.diff)(snapshot, newData);
+    if (!_diff) {
+      return;
+    }
+    record({
+      forward: () => {
+        const target = structuredClone(data);
+        _diff.reduce((target2, change) => {
+          (0, import_deep_diff.applyChange)(target2, true, change);
+          return target2;
+        }, target);
+        dispatch({ type: "set", data: target });
+      },
+      rewind: () => {
+        const target = structuredClone(data);
+        _diff.reduce((target2, change) => {
+          (0, import_deep_diff.revertChange)(target2, true, change);
+          return target2;
+        }, target);
+        dispatch({ type: "set", data: target });
+      }
+    });
+  }, DEBOUNCE_TIME);
+  (0, import_react26.useEffect)(() => {
+    historyEmitter.on(RECORD_DIFF, handleRecordDiff);
+    return () => {
+      historyEmitter.off(RECORD_DIFF, handleRecordDiff);
+    };
+  }, [handleRecordDiff]);
+  return {
+    canForward,
+    canRewind,
+    rewind,
+    forward,
+    record
+  };
+}
+
 // lib/reducer.ts
 var zoneCache = {};
 var addToZoneCache = (key, data) => {
   zoneCache[key] = data;
 };
-var createReducer = ({ config }) => (data, action) => {
+var storeInterceptor = (reducer) => {
+  return (data, action) => {
+    const newData = reducer(data, action);
+    if (!["registerZone", "unregisterZone", "set"].includes(action.type)) {
+      recordDiff(newData);
+    }
+    return newData;
+  };
+};
+var createReducer = ({ config }) => storeInterceptor((data, action) => {
   if (action.type === "insert") {
     const emptyComponentData = {
       type: action.componentType,
@@ -3716,7 +3903,7 @@ var createReducer = ({ config }) => (data, action) => {
     return __spreadValues(__spreadValues({}, data), action.data);
   }
   return data;
-};
+});
 
 // components/LayerTree/index.tsx
 init_react_import();
@@ -3737,7 +3924,7 @@ var scrollIntoView = (el) => {
 };
 
 // components/LayerTree/index.tsx
-var import_react24 = require("react");
+var import_react27 = require("react");
 
 // lib/find-zones-for-area.ts
 init_react_import();
@@ -3778,7 +3965,7 @@ var LayerTree = ({
   label
 }) => {
   const zones = data.zones || {};
-  const ctx = (0, import_react24.useContext)(dropZoneContext);
+  const ctx = (0, import_react27.useContext)(dropZoneContext);
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: getClassName10("zoneTitle"), children: [
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: getClassName10("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(layers_default, { size: "16" }) }),
@@ -3927,14 +4114,18 @@ function Puck({
   headerPath
 }) {
   var _a, _b;
-  const [reducer] = (0, import_react25.useState)(() => createReducer({ config }));
-  const [data, dispatch] = (0, import_react25.useReducer)(
+  const [reducer] = (0, import_react28.useState)(() => createReducer({ config }));
+  const [data, dispatch] = (0, import_react28.useReducer)(
     reducer,
     flushZones(initialData)
   );
-  const [itemSelector, setItemSelector] = (0, import_react25.useState)(null);
+  const { canForward, canRewind, rewind, forward } = usePuckHistory({
+    data,
+    dispatch
+  });
+  const [itemSelector, setItemSelector] = (0, import_react28.useState)(null);
   const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
-  const Page = (0, import_react25.useCallback)(
+  const Page = (0, import_react28.useCallback)(
     (pageProps) => {
       var _a2, _b2;
       return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
@@ -3949,7 +4140,7 @@ function Puck({
     },
     [config.root]
   );
-  const PageFieldWrapper = (0, import_react25.useCallback)(
+  const PageFieldWrapper = (0, import_react28.useCallback)(
     (props) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       PluginRenderer,
       {
@@ -3961,7 +4152,7 @@ function Puck({
     ),
     []
   );
-  const ComponentFieldWrapper = (0, import_react25.useCallback)(
+  const ComponentFieldWrapper = (0, import_react28.useCallback)(
     (props) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       PluginRenderer,
       {
@@ -3976,13 +4167,13 @@ function Puck({
   const FieldWrapper = itemSelector ? ComponentFieldWrapper : PageFieldWrapper;
   const rootFields = ((_a = config.root) == null ? void 0 : _a.fields) || defaultPageFields;
   let fields = selectedItem ? ((_b = config.components[selectedItem.type]) == null ? void 0 : _b.fields) || {} : rootFields;
-  (0, import_react25.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (onChange)
       onChange(data);
   }, [data]);
   const { onDragStartOrUpdate, placeholderStyle } = usePlaceholderStyle();
-  const [leftSidebarVisible, setLeftSidebarVisible] = (0, import_react25.useState)(true);
-  const [draggedItem, setDraggedItem] = (0, import_react25.useState)();
+  const [leftSidebarVisible, setLeftSidebarVisible] = (0, import_react28.useState)(true);
+  const [draggedItem, setDraggedItem] = (0, import_react28.useState)();
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "puck", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     import_react_beautiful_dnd4.DragDropContext,
     {
@@ -4144,6 +4335,38 @@ function Puck({
                                   justifyContent: "flex-end"
                                 },
                                 children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex" }, children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                                      IconButton,
+                                      {
+                                        title: "undo",
+                                        disabled: !canRewind,
+                                        onClick: rewind,
+                                        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                                          chevron_left_default,
+                                          {
+                                            size: 21,
+                                            stroke: canRewind ? "var(--puck-color-black)" : "var(--puck-color-grey-7)"
+                                          }
+                                        )
+                                      }
+                                    ),
+                                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                                      IconButton,
+                                      {
+                                        title: "redo",
+                                        disabled: !canForward,
+                                        onClick: forward,
+                                        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                                          chevron_right_default,
+                                          {
+                                            size: 21,
+                                            stroke: canForward ? "var(--puck-color-black)" : "var(--puck-color-grey-7)"
+                                          }
+                                        )
+                                      }
+                                    )
+                                  ] }),
                                   renderHeaderActions && renderHeaderActions({ data, dispatch }),
                                   /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                                     Button,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@measured/puck",
-  "version": "0.8.0",
+  "version": "0.9.0-canary.2bf48af",
   "private": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -8,6 +8,7 @@
   "scripts": {
     "lint": "eslint \"**/*.ts*\"",
     "build": "rm -rf dist && tsup index.ts",
+    "test": "jest",
     "prepare": "cp ../../README.md . && yarn build",
     "postpublish": "rm README.md"
   },
@@ -15,19 +16,29 @@
     "dist"
   ],
   "devDependencies": {
+    "@testing-library/react": "^14.0.0",
+    "@types/deep-diff": "^1.0.3",
+    "@types/event-emitter": "^0.3.3",
+    "@types/jest": "^29.5.4",
     "@types/react": "^18.2.0",
     "@types/react-beautiful-dnd": "^13.1.4",
     "@types/react-dom": "^18.2.0",
     "eslint": "^7.32.0",
     "eslint-config-custom": "*",
+    "jest": "^29.6.4",
+    "jest-environment-jsdom": "^29.6.4",
     "react-feather": "^2.0.10",
+    "ts-jest": "^29.1.1",
     "tsconfig": "*",
     "tsup": "^6.7.0",
     "tsup-config": "*",
     "typescript": "^4.5.2"
   },
   "dependencies": {
+    "deep-diff": "^1.0.2",
+    "event-emitter": "^0.3.5",
     "react-beautiful-dnd": "^13.1.1",
+    "react-hotkeys-hook": "^4.4.1",
     "react-spinners": "^0.13.8",
     "use-debounce": "^9.0.4"
   },