@measured/puck 0.11.0-canary.6145c32 → 0.11.0-canary.c8c02fd

package/dist/index.js

@@ -1214,11 +1214,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 +1526,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 +1576,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 +1589,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 +1650,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 +1663,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 +1731,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 +1744,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 +1850,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 +1872,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 +1892,7 @@ function _objectWithoutProperties8(source, excluded) {
   }
   return target;
 }
-function _objectWithoutPropertiesLoose8(source, excluded) {
+function _objectWithoutPropertiesLoose9(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -1832,9 +1906,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 +1919,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 +1942,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 +1964,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 +1984,7 @@ function _objectWithoutProperties9(source, excluded) {
   }
   return target;
 }
-function _objectWithoutPropertiesLoose9(source, excluded) {
+function _objectWithoutPropertiesLoose10(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -1924,9 +1998,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 +2011,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 +2042,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 +2062,7 @@ function _objectWithoutProperties10(source, excluded) {
   }
   return target;
 }
-function _objectWithoutPropertiesLoose10(source, excluded) {
+function _objectWithoutPropertiesLoose11(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -2002,9 +2076,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 +2089,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 +2118,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 +2138,7 @@ function _objectWithoutProperties11(source, excluded) {
   }
   return target;
 }
-function _objectWithoutPropertiesLoose11(source, excluded) {
+function _objectWithoutPropertiesLoose12(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -2078,9 +2152,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 +2165,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 +2198,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 +2220,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 +2240,7 @@ function _objectWithoutProperties12(source, excluded) {
   }
   return target;
 }
-function _objectWithoutPropertiesLoose12(source, excluded) {
+function _objectWithoutPropertiesLoose13(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -2180,9 +2254,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 +2267,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 +2280,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 +2302,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 +2322,7 @@ function _objectWithoutProperties13(source, excluded) {
   }
   return target;
 }
-function _objectWithoutPropertiesLoose13(source, excluded) {
+function _objectWithoutPropertiesLoose14(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -2262,9 +2336,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 +2349,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 +2364,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 +2386,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 +2406,7 @@ function _objectWithoutProperties14(source, excluded) {
   }
   return target;
 }
-function _objectWithoutPropertiesLoose14(source, excluded) {
+function _objectWithoutPropertiesLoose15(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -2346,9 +2420,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 +2433,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 +2462,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 +2482,7 @@ function _objectWithoutProperties15(source, excluded) {
   }
   return target;
 }
-function _objectWithoutPropertiesLoose15(source, excluded) {
+function _objectWithoutPropertiesLoose16(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -2422,9 +2496,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 +2509,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 +2524,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 +2579,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 +2623,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);
@@ -2634,7 +2708,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 +2725,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 +2760,7 @@ var DropZoneProvider = ({
     },
     [setActiveZones, dispatch]
   );
-  const unregisterZone = (0, import_react21.useCallback)(
+  const unregisterZone = (0, import_react22.useCallback)(
     (zoneCompound) => {
       if (!dispatch) {
         return;
@@ -2701,8 +2775,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,7 +2829,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_react22.useContext)(dropZoneContext);
+  const ctx = (0, import_react23.useContext)(dropZoneContext);
   const {
     // These all need setting via context
     data,
@@ -2772,12 +2846,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 +2874,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." });
   }
@@ -2989,7 +3063,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 +3090,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 +3102,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 +3124,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 +3164,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 +3182,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 +3232,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 +3248,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 +3292,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 +3301,7 @@ var ArrayField = ({
     })),
     openId: ""
   };
-  const setArrayState = (0, import_react25.useCallback)(
+  const setArrayState = (0, import_react26.useCallback)(
     (newArrayState, recordHistory = false) => {
       setUi(
         {
@@ -3238,7 +3314,7 @@ var ArrayField = ({
     },
     [arrayState]
   );
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     const newItems = Array.from(value || []).map((item, idx) => {
       var _a;
       return {
@@ -3433,7 +3509,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 +3523,10 @@ 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 [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 +3537,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);
@@ -3740,49 +3816,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;
@@ -3857,7 +3983,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 +4033,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 +4083,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 +4170,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 +4515,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 +4553,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 +4676,78 @@ 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;
+};
+
+// components/Puck/index.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var defaultPageFields = {
   title: { type: "text" }
 };
@@ -4563,7 +4759,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,17 +4769,34 @@ function Puck({
   onChange,
   onPublish,
   plugins = [],
+  renderComponentList,
   renderHeader,
   renderHeaderActions,
   headerTitle,
   headerPath
 }) {
   var _a, _b;
-  const [reducer] = (0, import_react32.useState)(() => createReducer({ config }));
+  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)
   );
@@ -4593,7 +4806,7 @@ function Puck({
     dispatch
   });
   const { itemSelector, leftSideBarVisible } = ui;
-  const setItemSelector = (0, import_react32.useCallback)(
+  const setItemSelector = (0, import_react34.useCallback)(
     (newItemSelector) => {
       dispatch({
         type: "setUi",
@@ -4603,10 +4816,10 @@ function Puck({
     []
   );
   const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
-  const Page = (0, import_react32.useCallback)(
+  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 +4832,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 +4845,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 +4858,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 +4901,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,7 +4938,7 @@ function Puck({
           });
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         DropZoneProvider,
         {
           value: {
@@ -4720,8 +4952,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 +4969,7 @@ function Puck({
                   right: 0
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                     "header",
                     {
                       style: {
@@ -4747,19 +4979,19 @@ 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: {
@@ -4770,14 +5002,14 @@ function Puck({
                             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 +5019,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 +5032,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 +5053,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 +5069,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 +5089,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 +5107,7 @@ function Puck({
                       )
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
                     "div",
                     {
                       style: {
@@ -4887,9 +5119,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 +5133,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 +5151,7 @@ function Puck({
                       ]
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
                     "div",
                     {
                       style: {
@@ -4932,7 +5164,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 +5173,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 +5205,7 @@ function Puck({
                       ]
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                     "div",
                     {
                       style: {
@@ -4985,7 +5217,7 @@ 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,
@@ -5043,7 +5275,7 @@ function Puck({
                               }
                             };
                             if (selectedItem && itemSelector) {
-                              return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                              return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                                 InputOrGroup,
                                 {
                                   field,
@@ -5059,7 +5291,7 @@ function Puck({
                                 `${selectedItem.props.id}_${fieldName}`
                               );
                             } else {
-                              return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                              return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                                 InputOrGroup,
                                 {
                                   field,
@@ -5091,12 +5323,12 @@ 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 }) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {