@measured/puck 0.10.0-canary.74cd3a7 → 0.10.0-canary.a7d9a28

package/dist/index.js

@@ -327,7 +327,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element = REACT_ELEMENT_TYPE;
         var ForwardRef = REACT_FORWARD_REF_TYPE;
-        var Fragment11 = REACT_FRAGMENT_TYPE;
+        var Fragment9 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo = REACT_MEMO_TYPE;
         var Portal = REACT_PORTAL_TYPE;
@@ -386,7 +386,7 @@ var require_react_is_development = __commonJS({
         exports.ContextProvider = ContextProvider;
         exports.Element = Element;
         exports.ForwardRef = ForwardRef;
-        exports.Fragment = Fragment11;
+        exports.Fragment = Fragment9;
         exports.Lazy = Lazy;
         exports.Memo = Memo;
         exports.Portal = Portal;
@@ -760,7 +760,7 @@ var require_factoryWithTypeCheckers = __commonJS({
         function validate(props, propName, componentName, location, propFullName) {
           if (!(props[propName] instanceof expectedClass)) {
             var expectedClassName = expectedClass.name || ANONYMOUS;
-            var actualClassName = getClassName18(props[propName]);
+            var actualClassName = getClassName11(props[propName]);
             return new PropTypeError("Invalid " + location + " `" + propFullName + "` of type " + ("`" + actualClassName + "` supplied to `" + componentName + "`, expected ") + ("instance of `" + expectedClassName + "`."));
           }
           return null;
@@ -1012,7 +1012,7 @@ var require_factoryWithTypeCheckers = __commonJS({
             return type;
         }
       }
-      function getClassName18(propValue) {
+      function getClassName11(propValue) {
         if (!propValue.constructor || !propValue.constructor.name) {
           return ANONYMOUS;
         }
@@ -1214,11 +1214,11 @@ var Button = ({
 
 // components/DropZone/index.tsx
 init_react_import();
-var import_react22 = require("react");
+var import_react21 = require("react");
 
 // components/DraggableComponent/index.tsx
 init_react_import();
-var import_react19 = 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
@@ -2130,7 +2130,7 @@ List.propTypes = {
 List.displayName = "List";
 var list_default = List;
 
-// ../../node_modules/react-feather/dist/icons/plus.js
+// ../../node_modules/react-feather/dist/icons/sidebar.js
 init_react_import();
 var import_react14 = __toESM(require("react"));
 var import_prop_types12 = __toESM(require_prop_types());
@@ -2180,7 +2180,7 @@ function _objectWithoutPropertiesLoose12(source, excluded) {
   }
   return target;
 }
-var Plus = (0, import_react14.forwardRef)(function(_ref, ref) {
+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,
@@ -2193,26 +2193,28 @@ var Plus = (0, import_react14.forwardRef)(function(_ref, ref) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, rest), /* @__PURE__ */ import_react14.default.createElement("line", {
-    x1: "12",
-    y1: "5",
-    x2: "12",
-    y2: "19"
+  }, rest), /* @__PURE__ */ import_react14.default.createElement("rect", {
+    x: "3",
+    y: "3",
+    width: "18",
+    height: "18",
+    rx: "2",
+    ry: "2"
   }), /* @__PURE__ */ import_react14.default.createElement("line", {
-    x1: "5",
-    y1: "12",
-    x2: "19",
-    y2: "12"
+    x1: "9",
+    y1: "3",
+    x2: "9",
+    y2: "21"
   }));
 });
-Plus.propTypes = {
+Sidebar.propTypes = {
   color: import_prop_types12.default.string,
   size: import_prop_types12.default.oneOfType([import_prop_types12.default.string, import_prop_types12.default.number])
 };
-Plus.displayName = "Plus";
-var plus_default = Plus;
+Sidebar.displayName = "Sidebar";
+var sidebar_default = Sidebar;
 
-// ../../node_modules/react-feather/dist/icons/sidebar.js
+// ../../node_modules/react-feather/dist/icons/trash.js
 init_react_import();
 var import_react15 = __toESM(require("react"));
 var import_prop_types13 = __toESM(require_prop_types());
@@ -2262,7 +2264,7 @@ function _objectWithoutPropertiesLoose13(source, excluded) {
   }
   return target;
 }
-var Sidebar = (0, import_react15.forwardRef)(function(_ref, ref) {
+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,
@@ -2275,28 +2277,20 @@ var Sidebar = (0, import_react15.forwardRef)(function(_ref, ref) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, rest), /* @__PURE__ */ import_react15.default.createElement("rect", {
-    x: "3",
-    y: "3",
-    width: "18",
-    height: "18",
-    rx: "2",
-    ry: "2"
-  }), /* @__PURE__ */ import_react15.default.createElement("line", {
-    x1: "9",
-    y1: "3",
-    x2: "9",
-    y2: "21"
+  }, rest), /* @__PURE__ */ import_react15.default.createElement("polyline", {
+    points: "3 6 5 6 21 6"
+  }), /* @__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"
   }));
 });
-Sidebar.propTypes = {
+Trash.propTypes = {
   color: import_prop_types13.default.string,
   size: import_prop_types13.default.oneOfType([import_prop_types13.default.string, import_prop_types13.default.number])
 };
-Sidebar.displayName = "Sidebar";
-var sidebar_default = Sidebar;
+Trash.displayName = "Trash";
+var trash_default = Trash;
 
-// ../../node_modules/react-feather/dist/icons/trash.js
+// ../../node_modules/react-feather/dist/icons/type.js
 init_react_import();
 var import_react16 = __toESM(require("react"));
 var import_prop_types14 = __toESM(require_prop_types());
@@ -2346,7 +2340,7 @@ function _objectWithoutPropertiesLoose14(source, excluded) {
   }
   return target;
 }
-var Trash = (0, import_react16.forwardRef)(function(_ref, ref) {
+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,
@@ -2360,89 +2354,13 @@ var Trash = (0, import_react16.forwardRef)(function(_ref, ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }, rest), /* @__PURE__ */ import_react16.default.createElement("polyline", {
-    points: "3 6 5 6 21 6"
-  }), /* @__PURE__ */ import_react16.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])
-};
-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) {
-    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 _extends15.apply(this, arguments);
-}
-function _objectWithoutProperties15(source, excluded) {
-  if (source == null)
-    return {};
-  var target = _objectWithoutPropertiesLoose15(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 _objectWithoutPropertiesLoose15(source, excluded) {
-  if (source == null)
-    return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0)
-      continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-var Type = (0, import_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,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: color,
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, rest), /* @__PURE__ */ import_react17.default.createElement("polyline", {
     points: "4 7 4 4 20 4 20 7"
-  }), /* @__PURE__ */ import_react17.default.createElement("line", {
+  }), /* @__PURE__ */ import_react16.default.createElement("line", {
     x1: "9",
     y1: "20",
     x2: "15",
     y2: "20"
-  }), /* @__PURE__ */ import_react17.default.createElement("line", {
+  }), /* @__PURE__ */ import_react16.default.createElement("line", {
     x1: "12",
     y1: "4",
     x2: "12",
@@ -2450,18 +2368,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_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_react18 = require("react");
+var import_react17 = require("react");
 var useModifierHeld = (modifier) => {
-  const [modifierHeld, setModifierHeld] = (0, import_react18.useState)(false);
-  (0, import_react18.useEffect)(() => {
+  const [modifierHeld, setModifierHeld] = (0, import_react17.useState)(false);
+  (0, import_react17.useEffect)(() => {
     function downHandler({ key }) {
       if (key === modifier) {
         setModifierHeld(true);
@@ -2505,7 +2423,7 @@ var DraggableComponent = ({
   style
 }) => {
   const isModifierHeld = useModifierHeld("Alt");
-  (0, import_react19.useEffect)(onMount, []);
+  (0, import_react18.useEffect)(onMount, []);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     import_react_beautiful_dnd.Draggable,
     {
@@ -2549,13 +2467,13 @@ var DraggableComponent = ({
 
 // components/DroppableStrictMode/index.tsx
 init_react_import();
-var import_react20 = 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_react20.useState)(false);
-  (0, import_react20.useEffect)(() => {
+  const [enabled, setEnabled] = (0, import_react19.useState)(false);
+  (0, import_react19.useEffect)(() => {
     const animation = requestAnimationFrame(() => setEnabled(true));
     return () => {
       cancelAnimationFrame(animation);
@@ -2634,7 +2552,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_react20 = require("react");
 var import_use_debounce = require("use-debounce");
 
 // lib/get-zone-id.ts
@@ -2651,29 +2569,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_react20.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_react20.useState)(null);
+  const [hoveringZone, setHoveringZone] = (0, import_react20.useState)(
     rootDroppableId
   );
-  const [hoveringComponent, setHoveringComponent] = (0, import_react21.useState)();
+  const [hoveringComponent, setHoveringComponent] = (0, import_react20.useState)();
   const [hoveringAreaDb] = (0, import_use_debounce.useDebounce)(hoveringArea, 75, { leading: false });
-  const [areasWithZones, setAreasWithZones] = (0, import_react21.useState)(
+  const [areasWithZones, setAreasWithZones] = (0, import_react20.useState)(
     {}
   );
-  const [activeZones, setActiveZones] = (0, import_react21.useState)({});
+  const [activeZones, setActiveZones] = (0, import_react20.useState)({});
   const { dispatch = null } = value ? value : {};
-  const registerZoneArea = (0, import_react21.useCallback)(
+  const registerZoneArea = (0, import_react20.useCallback)(
     (area) => {
       setAreasWithZones((latest) => __spreadProps(__spreadValues({}, latest), { [area]: true }));
     },
     [setAreasWithZones]
   );
-  const registerZone = (0, import_react21.useCallback)(
+  const registerZone = (0, import_react20.useCallback)(
     (zoneCompound) => {
       if (!dispatch) {
         return;
@@ -2686,7 +2604,7 @@ var DropZoneProvider = ({
     },
     [setActiveZones, dispatch]
   );
-  const unregisterZone = (0, import_react21.useCallback)(
+  const unregisterZone = (0, import_react20.useCallback)(
     (zoneCompound) => {
       if (!dispatch) {
         return;
@@ -2701,8 +2619,8 @@ var DropZoneProvider = ({
     },
     [setActiveZones, dispatch]
   );
-  const [pathData, setPathData] = (0, import_react21.useState)();
-  const registerPath = (0, import_react21.useCallback)(
+  const [pathData, setPathData] = (0, import_react20.useState)();
+  const registerPath = (0, import_react20.useCallback)(
     (selector) => {
       if (!(value == null ? void 0 : value.data)) {
         return;
@@ -2755,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_react22.useContext)(dropZoneContext);
+  const ctx = (0, import_react21.useContext)(dropZoneContext);
   const {
     // These all need setting via context
     data,
@@ -2772,12 +2690,12 @@ function DropZoneEdit({ zone, style }) {
   } = ctx || {};
   let content = data.content || [];
   let zoneCompound = rootDroppableId;
-  (0, import_react22.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (areaId && registerZoneArea) {
       registerZoneArea(areaId);
     }
   }, [areaId]);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (ctx == null ? void 0 : ctx.registerZone) {
       ctx == null ? void 0 : ctx.registerZone(zoneCompound);
     }
@@ -2989,7 +2907,7 @@ function DropZoneEdit({ zone, style }) {
   );
 }
 function DropZoneRender({ zone }) {
-  const ctx = (0, import_react22.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) || [];
@@ -3016,7 +2934,7 @@ function DropZoneRender({ zone }) {
   }) });
 }
 function DropZone(props) {
-  const ctx = (0, import_react22.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));
   }
@@ -3028,7 +2946,7 @@ init_react_import();
 
 // components/IconButton/IconButton.tsx
 init_react_import();
-var import_react23 = 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();
@@ -3050,7 +2968,7 @@ var IconButton = ({
   fullWidth,
   title
 }) => {
-  const [loading, setLoading] = (0, import_react23.useState)(false);
+  const [loading, setLoading] = (0, import_react22.useState)(false);
   const ElementType = href ? "a" : "button";
   const el = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     ElementType,
@@ -3090,370 +3008,38 @@ var IconButton = ({
 
 // components/Puck/index.tsx
 init_react_import();
-var import_react31 = require("react");
-var import_react_beautiful_dnd5 = require("react-beautiful-dnd");
-
-// components/InputOrGroup/index.tsx
-init_react_import();
-
-// css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/styles.module.css#css-module
-init_react_import();
-var styles_module_default3 = { "Input": "_Input_nkpu6_1", "Input-label": "_Input-label_nkpu6_27", "Input-labelIcon": "_Input-labelIcon_nkpu6_34", "Input-input": "_Input-input_nkpu6_39", "Input--readOnly": "_Input--readOnly_nkpu6_60", "Input-radioGroupItems": "_Input-radioGroupItems_nkpu6_69", "Input-radio": "_Input-radio_nkpu6_69", "Input-radioInner": "_Input-radioInner_nkpu6_86", "Input-radioInput": "_Input-radioInput_nkpu6_98" };
-
-// components/InputOrGroup/fields/index.tsx
-init_react_import();
-
-// components/InputOrGroup/fields/ArrayField/index.tsx
-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" };
-
-// components/InputOrGroup/fields/ArrayField/index.tsx
+var import_react28 = require("react");
 var import_react_beautiful_dnd4 = require("react-beautiful-dnd");
 
-// components/Draggable/index.tsx
-init_react_import();
-var import_react_beautiful_dnd3 = require("react-beautiful-dnd");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var Draggable2 = ({
-  className,
-  children,
-  id,
-  index,
-  showShadow,
-  disableAnimations = false
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_beautiful_dnd3.Draggable, { draggableId: id, index, children: (provided, snapshot) => {
-    var _a;
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        "div",
-        __spreadProps(__spreadValues(__spreadValues({
-          className: className && className(provided, snapshot),
-          ref: provided.innerRef
-        }, provided.draggableProps), provided.dragHandleProps), {
-          style: __spreadProps(__spreadValues({}, provided.draggableProps.style), {
-            transform: snapshot.isDragging || !disableAnimations ? (_a = provided.draggableProps.style) == null ? void 0 : _a.transform : "translate(0px, 0px)"
-          }),
-          children: children(provided, snapshot)
-        })
-      ),
-      showShadow && snapshot.isDragging && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        "div",
-        {
-          className: className && className(provided, snapshot),
-          style: { transform: "none !important" },
-          children: children(provided, snapshot)
-        }
-      )
-    ] });
-  } });
-};
-
-// lib/generate-id.ts
-init_react_import();
-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");
-
-// components/DragIcon/index.tsx
-init_react_import();
-
-// css-module:/home/runner/work/puck/puck/packages/core/components/DragIcon/styles.module.css#css-module
-init_react_import();
-var styles_module_default5 = { "DragIcon": "_DragIcon_o29on_1" };
-
-// components/DragIcon/index.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var getClassName5 = get_class_name_factory_default("DragIcon", styles_module_default5);
-var DragIcon = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName5(), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { viewBox: "0 0 20 20", width: "12", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z" }) }) });
-
-// components/Puck/context.tsx
-init_react_import();
-var import_react24 = require("react");
-var defaultAppData = {
-  data: { content: [], root: { title: "" } },
-  state: {
-    leftSideBarVisible: true,
-    arrayState: {}
-  }
-};
-var appContext = (0, import_react24.createContext)({
-  appData: defaultAppData,
-  dispatch: () => null
-});
-var AppProvider = appContext.Provider;
-var useAppContext = () => {
-  const mainContext = (0, import_react24.useContext)(appContext);
-  return __spreadProps(__spreadValues({}, mainContext), {
-    // Helper
-    setState: (state, recordHistory) => {
-      return mainContext.dispatch({
-        type: "setState",
-        state,
-        recordHistory
-      });
-    }
-  });
-};
-
-// components/InputOrGroup/fields/ArrayField/index.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var getClassNameInput = get_class_name_factory_default("Input", styles_module_default3);
-var getClassName6 = get_class_name_factory_default("ArrayField", styles_module_default4);
-var getClassNameItem = get_class_name_factory_default("ArrayFieldItem", styles_module_default4);
-var ArrayField = ({
-  field,
-  onChange,
-  value,
-  name,
-  label
-}) => {
-  const [arrayFieldId] = (0, import_react25.useState)(generateId("ArrayField"));
-  const { appData, setState } = useAppContext();
-  const arrayState = appData.state.arrayState[arrayFieldId] || {
-    items: Array.from(value).map((v) => ({
-      _arrayId: generateId("ArrayItem"),
-      data: v
-    })),
-    openId: ""
-  };
-  const setArrayState = (0, import_react25.useCallback)(
-    (newArrayState, recordHistory = false) => {
-      setState(
-        {
-          arrayState: __spreadProps(__spreadValues({}, appData.state.arrayState), {
-            [arrayFieldId]: __spreadValues(__spreadValues({}, arrayState), newArrayState)
-          })
-        },
-        recordHistory
-      );
-    },
-    [arrayState]
-  );
-  (0, import_react25.useEffect)(() => {
-    const newItems = Array.from(value).map((item, idx) => {
-      var _a;
-      return {
-        _arrayId: ((_a = arrayState.items[idx]) == null ? void 0 : _a._arrayId) || generateId("ArrayItem"),
-        data: item
-      };
-    });
-    setArrayState({ items: newItems });
-  }, [value]);
-  if (!field.arrayFields) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: getClassNameInput(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("b", { className: getClassNameInput("label"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: getClassNameInput("labelIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(list_default, { size: 16 }) }),
-      label || name
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      import_react_beautiful_dnd4.DragDropContext,
-      {
-        onDragEnd: (event) => {
-          var _a;
-          if (event.destination) {
-            const newValue = reorder(
-              arrayState.items,
-              event.source.index,
-              (_a = event.destination) == null ? void 0 : _a.index
-            );
-            setArrayState(__spreadProps(__spreadValues({}, arrayState), { items: newValue }), false);
-            onChange(newValue.map(({ data }) => data));
-          }
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DroppableStrictMode_default, { droppableId: "array", children: (provided, snapshot) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-            "div",
-            __spreadProps(__spreadValues({}, provided.droppableProps), {
-              ref: provided.innerRef,
-              className: getClassName6({
-                isDraggingFrom: !!snapshot.draggingFromThisWith,
-                hasItems: value.length > 0
-              }),
-              children: [
-                Array.isArray(value) && value.length > 0 ? arrayState.items.map(({ _arrayId, data }, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                  Draggable2,
-                  {
-                    id: _arrayId,
-                    index: i,
-                    className: (_, snapshot2) => getClassNameItem({
-                      isExpanded: arrayState.openId === _arrayId,
-                      isDragging: snapshot2.isDragging
-                    }),
-                    children: () => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-                        "div",
-                        {
-                          onClick: () => {
-                            if (arrayState.openId === _arrayId) {
-                              setArrayState({
-                                openId: ""
-                              });
-                            } else {
-                              setArrayState({
-                                openId: _arrayId
-                              });
-                            }
-                          },
-                          className: getClassNameItem("summary"),
-                          children: [
-                            field.getItemSummary ? field.getItemSummary(data, i) : `Item #${i}`,
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: getClassNameItem("rhs"), children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: getClassNameItem("actions"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                                IconButton,
-                                {
-                                  onClick: () => {
-                                    const existingValue = [
-                                      ...value || []
-                                    ];
-                                    const existingItems = [
-                                      ...arrayState.items || []
-                                    ];
-                                    existingValue.splice(i, 1);
-                                    existingItems.splice(i, 1);
-                                    setArrayState(
-                                      { items: existingItems },
-                                      true
-                                    );
-                                    onChange(existingValue);
-                                  },
-                                  title: "Delete",
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(trash_default, { size: 16 })
-                                }
-                              ) }) }),
-                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DragIcon, {}) })
-                            ] })
-                          ]
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: getClassNameItem("body"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                        "fieldset",
-                        {
-                          className: getClassNameItem("fieldset"),
-                          children: Object.keys(field.arrayFields).map(
-                            (fieldName) => {
-                              const subField = field.arrayFields[fieldName];
-                              return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                                InputOrGroup,
-                                {
-                                  name: `${name}_${i}_${fieldName}`,
-                                  label: subField.label || fieldName,
-                                  field: subField,
-                                  value: data[fieldName],
-                                  onChange: (val) => onChange(
-                                    replace(value, i, __spreadProps(__spreadValues({}, data), {
-                                      [fieldName]: val
-                                    }))
-                                  )
-                                },
-                                `${name}_${i}_${fieldName}`
-                              );
-                            }
-                          )
-                        }
-                      ) })
-                    ] })
-                  },
-                  _arrayId
-                )) : null,
-                provided.placeholder,
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                  "button",
-                  {
-                    className: getClassName6("addButton"),
-                    onClick: () => {
-                      const existingValue = value || [];
-                      onChange([...existingValue, field.defaultItemProps || {}]);
-                    },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(plus_default, { size: "21" })
-                  }
-                )
-              ]
-            })
-          );
-        } })
-      }
-    )
-  ] });
-};
-
-// components/InputOrGroup/fields/DefaultField/index.tsx
-init_react_import();
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var getClassName7 = get_class_name_factory_default("Input", styles_module_default3);
-var DefaultField = ({
-  field,
-  onChange,
-  readOnly,
-  value,
-  name,
-  label
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { className: getClassName7({ readOnly }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: getClassName7("label"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: getClassName7("labelIcon"), children: [
-        field.type === "text" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(type_default, { size: 16 }),
-        field.type === "number" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(hash_default, { size: 16 })
-      ] }),
-      label || name
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      "input",
-      {
-        className: getClassName7("input"),
-        autoComplete: "off",
-        type: field.type,
-        name,
-        value: typeof value === "undefined" ? "" : value,
-        onChange: (e) => {
-          if (field.type === "number") {
-            onChange(Number(e.currentTarget.value));
-          } else {
-            onChange(e.currentTarget.value);
-          }
-        },
-        readOnly
-      }
-    )
-  ] });
-};
-
-// components/InputOrGroup/fields/ExternalField/index.tsx
+// components/InputOrGroup/index.tsx
 init_react_import();
 
 // components/ExternalInput/index.tsx
 init_react_import();
-var import_react26 = 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();
-var styles_module_default6 = { "ExternalInput": "_ExternalInput_l4bks_1", "ExternalInput-actions": "_ExternalInput-actions_l4bks_5", "ExternalInput-button": "_ExternalInput-button_l4bks_9", "ExternalInput-detachButton": "_ExternalInput-detachButton_l4bks_28", "ExternalInput--hasData": "_ExternalInput--hasData_l4bks_35", "ExternalInput-modal": "_ExternalInput-modal_l4bks_55", "ExternalInput--modalVisible": "_ExternalInput--modalVisible_l4bks_69", "ExternalInput-modalInner": "_ExternalInput-modalInner_l4bks_73", "ExternalInput-modalHeading": "_ExternalInput-modalHeading_l4bks_84", "ExternalInput-modalTableWrapper": "_ExternalInput-modalTableWrapper_l4bks_89" };
+var styles_module_default3 = { "ExternalInput": "_ExternalInput_l4bks_1", "ExternalInput-actions": "_ExternalInput-actions_l4bks_5", "ExternalInput-button": "_ExternalInput-button_l4bks_9", "ExternalInput-detachButton": "_ExternalInput-detachButton_l4bks_28", "ExternalInput--hasData": "_ExternalInput--hasData_l4bks_35", "ExternalInput-modal": "_ExternalInput-modal_l4bks_55", "ExternalInput--modalVisible": "_ExternalInput--modalVisible_l4bks_69", "ExternalInput-modalInner": "_ExternalInput-modalInner_l4bks_73", "ExternalInput-modalHeading": "_ExternalInput-modalHeading_l4bks_84", "ExternalInput-modalTableWrapper": "_ExternalInput-modalTableWrapper_l4bks_89" };
 
 // components/ExternalInput/index.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var getClassName8 = get_class_name_factory_default("ExternalInput", styles_module_default6);
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var getClassName5 = get_class_name_factory_default("ExternalInput", styles_module_default3);
 var ExternalInput = ({
   field,
   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_react23.useState)([]);
+  const [isOpen, setOpen] = (0, import_react23.useState)(false);
+  const [selectedData, setSelectedData] = (0, import_react23.useState)(value);
+  const keys = (0, import_react23.useMemo)(
     () => Object.keys(data).filter(
       (key) => typeof data[key] === "string" || typeof data[key] === "number"
     ),
     [data]
   );
-  (0, import_react26.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     (() => __async(void 0, null, function* () {
       if (field.adaptor) {
         const listData = yield field.adaptor.fetchList(field.adaptorParams);
@@ -3464,35 +3050,35 @@ var ExternalInput = ({
     }))();
   }, [field.adaptor, field.adaptorParams]);
   if (!field.adaptor) {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { children: "Incorrectly configured" });
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: "Incorrectly configured" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
-      className: getClassName8({
+      className: getClassName5({
         hasData: !!selectedData,
         modalVisible: isOpen
       }),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: getClassName8("actions"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: getClassName5("actions"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "button",
             {
               onClick: () => setOpen(true),
-              className: getClassName8("button"),
-              children: selectedData ? field.getItemSummary ? field.getItemSummary(selectedData) : `${field.adaptor.name} item` : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(link_default, { size: "16" }),
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { children: [
+              className: getClassName5("button"),
+              children: selectedData ? field.getItemSummary ? field.getItemSummary(selectedData) : `${field.adaptor.name} item` : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(link_default, { size: "16" }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { children: [
                   "Select from ",
                   field.adaptor.name
                 ] })
               ] })
             }
           ),
-          selectedData && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          selectedData && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "button",
             {
-              className: getClassName8("detachButton"),
+              className: getClassName5("detachButton"),
               onClick: () => {
                 setSelectedData(null);
                 onChange(null);
@@ -3501,17 +3087,17 @@ var ExternalInput = ({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: getClassName8("modal"), onClick: () => setOpen(false), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassName5("modal"), onClick: () => setOpen(false), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
           "div",
           {
-            className: getClassName8("modalInner"),
+            className: getClassName5("modalInner"),
             onClick: (e) => e.stopPropagation(),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h2", { className: getClassName8("modalHeading"), children: "Select content" }),
-              data.length ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: getClassName8("modalTableWrapper"), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("table", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("tr", { children: keys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("th", { style: { textAlign: "left" }, children: key }, key)) }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("tbody", { children: data.map((item, i) => {
-                  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h2", { className: getClassName5("modalHeading"), children: "Select content" }),
+              data.length ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassName5("modalTableWrapper"), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("table", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("tr", { children: keys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("th", { style: { textAlign: "left" }, children: key }, key)) }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("tbody", { children: data.map((item, i) => {
+                  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                     "tr",
                     {
                       style: { whiteSpace: "nowrap" },
@@ -3520,12 +3106,12 @@ var ExternalInput = ({
                         setOpen(false);
                         setSelectedData(item);
                       },
-                      children: keys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("td", { children: item[key] }, key))
+                      children: keys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("td", { children: item[key] }, key))
                     },
                     i
                   );
                 }) })
-              ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { padding: 24 }, children: "No content" })
+              ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { padding: 24 }, children: "No content" })
             ]
           }
         ) })
@@ -3534,189 +3120,204 @@ var ExternalInput = ({
   );
 };
 
-// components/InputOrGroup/fields/ExternalField/index.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var getClassName9 = get_class_name_factory_default("Input", styles_module_default3);
-var ExternalField = ({
-  field,
-  onChange,
-  readOnly,
-  value,
-  name,
-  label
-}) => {
-  if (!field.adaptor) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: getClassName9(""), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: getClassName9("label"), children: name === "_data" ? "External content" : label || name }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ExternalInput, { field, onChange, value })
-  ] });
-};
-
-// components/InputOrGroup/fields/RadioField/index.tsx
-init_react_import();
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var getClassName10 = get_class_name_factory_default("Input", styles_module_default3);
-var RadioField = ({
-  field,
-  onChange,
-  readOnly,
-  value,
-  name
-}) => {
-  if (!field.options) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: getClassName10(), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: getClassName10("radioGroup"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: getClassName10("label"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: getClassName10("labelIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(check_circle_default, { size: 16 }) }),
-      field.label || name
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: getClassName10("radioGroupItems"), children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-      "label",
-      {
-        className: getClassName10("radio"),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            "input",
-            {
-              type: "radio",
-              className: getClassName10("radioInput"),
-              value: option.value,
-              name,
-              onChange: (e) => {
-                if (e.currentTarget.value === "true" || e.currentTarget.value === "false") {
-                  onChange(JSON.parse(e.currentTarget.value));
-                  return;
-                }
-                onChange(e.currentTarget.value);
-              },
-              readOnly,
-              defaultChecked: value === option.value
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: getClassName10("radioInner"), children: option.label || option.value })
-        ]
-      },
-      option.label + option.value
-    )) })
-  ] }) });
-};
-
-// components/InputOrGroup/fields/SelectField/index.tsx
-init_react_import();
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var getClassName11 = get_class_name_factory_default("Input", styles_module_default3);
-var SelectField = ({
-  field,
-  onChange,
-  label,
-  value,
-  name
-}) => {
-  if (!field.options) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: getClassName11(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: getClassName11("label"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: getClassName11("labelIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(chevron_down_default, { size: 16 }) }),
-      label || name
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-      "select",
-      {
-        className: getClassName11("input"),
-        onChange: (e) => {
-          if (e.currentTarget.value === "true" || e.currentTarget.value === "false") {
-            onChange(Boolean(e.currentTarget.value));
-            return;
-          }
-          onChange(e.currentTarget.value);
-        },
-        value,
-        children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          "option",
-          {
-            label: option.label,
-            value: option.value
-          },
-          option.label + option.value
-        ))
-      }
-    )
-  ] });
-};
-
-// components/InputOrGroup/fields/TextareaField/index.tsx
+// css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/styles.module.css#css-module
 init_react_import();
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var getClassName12 = get_class_name_factory_default("Input", styles_module_default3);
-var TextareaField = ({
-  onChange,
-  readOnly,
-  value,
-  name,
-  label
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: getClassName12({ readOnly }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: getClassName12("label"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: getClassName12("labelIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(type_default, { size: 16 }) }),
-      label || name
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      "textarea",
-      {
-        className: getClassName12("input"),
-        autoComplete: "off",
-        name,
-        value: typeof value === "undefined" ? "" : value,
-        onChange: (e) => onChange(e.currentTarget.value),
-        readOnly,
-        rows: 5
-      }
-    )
-  ] });
-};
+var styles_module_default4 = { "Input": "_Input_izwhv_1", "Input-label": "_Input-label_izwhv_27", "Input-labelIcon": "_Input-labelIcon_izwhv_34", "Input-input": "_Input-input_izwhv_39", "Input--readOnly": "_Input--readOnly_izwhv_60", "Input-arrayItem": "_Input-arrayItem_izwhv_69", "Input-fieldset": "_Input-fieldset_izwhv_95", "Input-arrayItemAction": "_Input-arrayItemAction_izwhv_116", "Input-addButton": "_Input-addButton_izwhv_135", "Input-array": "_Input-array_izwhv_69", "Input-radioGroupItems": "_Input-radioGroupItems_izwhv_156", "Input-radio": "_Input-radio_izwhv_156", "Input-radioInner": "_Input-radioInner_izwhv_173", "Input-radioInput": "_Input-radioInput_izwhv_185" };
 
 // components/InputOrGroup/index.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var getClassName13 = get_class_name_factory_default("Input", styles_module_default3);
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var getClassName6 = get_class_name_factory_default("Input", styles_module_default4);
 var FieldLabel = ({
   children,
   icon,
   label
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("label", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: getClassName13("label"), children: [
-      icon ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: getClassName13("labelIcon"), children: icon }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {}),
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassName6("label"), children: [
+      icon ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName6("labelIcon"), children: icon }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, {}),
       label
     ] }),
     children
   ] });
 };
-var InputOrGroup = (props) => {
-  const { name, field, value, onChange, readOnly } = props;
+var InputOrGroup = ({
+  name,
+  field,
+  value,
+  label,
+  onChange,
+  readOnly
+}) => {
   if (field.type === "array") {
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ArrayField, __spreadValues({}, props));
+    if (!field.arrayFields) {
+      return null;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassName6(), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("b", { className: getClassName6("label"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName6("labelIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(list_default, { size: 16 }) }),
+        label || name
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassName6("array"), children: [
+        Array.isArray(value) ? value.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          "details",
+          {
+            className: getClassName6("arrayItem"),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("summary", { children: [
+                field.getItemSummary ? field.getItemSummary(item, i) : `Item #${i}`,
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName6("arrayItemAction"), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  IconButton,
+                  {
+                    onClick: () => {
+                      const existingValue = value || [];
+                      existingValue.splice(i, 1);
+                      onChange(existingValue);
+                    },
+                    title: "Delete",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(trash_default, { size: 21 })
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("fieldset", { className: getClassName6("fieldset"), children: Object.keys(field.arrayFields).map((fieldName) => {
+                const subField = field.arrayFields[fieldName];
+                return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  InputOrGroup,
+                  {
+                    name: `${name}_${i}_${fieldName}`,
+                    label: subField.label || fieldName,
+                    field: subField,
+                    value: item[fieldName],
+                    onChange: (val) => onChange(
+                      replace(value, i, __spreadProps(__spreadValues({}, item), { [fieldName]: val }))
+                    )
+                  },
+                  `${name}_${i}_${fieldName}`
+                );
+              }) })
+            ]
+          },
+          `${name}_${i}`
+        )) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "button",
+          {
+            className: getClassName6("addButton"),
+            onClick: () => {
+              const existingValue = value || [];
+              onChange([...existingValue, field.defaultItemProps || {}]);
+            },
+            children: "+ Add item"
+          }
+        )
+      ] })
+    ] });
   }
   if (field.type === "external") {
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ExternalField, __spreadValues({}, props));
+    if (!field.adaptor) {
+      return null;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassName6(""), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName6("label"), children: name === "_data" ? "External content" : label || name }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ExternalInput, { field, onChange, value })
+    ] });
   }
   if (field.type === "select") {
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SelectField, __spreadValues({}, props));
+    if (!field.options) {
+      return null;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: getClassName6(), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassName6("label"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName6("labelIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(chevron_down_default, { size: 16 }) }),
+        label || name
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "select",
+        {
+          className: getClassName6("input"),
+          onChange: (e) => {
+            if (e.currentTarget.value === "true" || e.currentTarget.value === "false") {
+              onChange(Boolean(e.currentTarget.value));
+              return;
+            }
+            onChange(e.currentTarget.value);
+          },
+          value,
+          children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "option",
+            {
+              label: option.label,
+              value: option.value
+            },
+            option.label + option.value
+          ))
+        }
+      )
+    ] });
   }
   if (field.type === "textarea") {
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TextareaField, __spreadValues({}, props));
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: getClassName6({ readOnly }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassName6("label"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName6("labelIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(type_default, { size: 16 }) }),
+        label || name
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "textarea",
+        {
+          className: getClassName6("input"),
+          autoComplete: "off",
+          name,
+          value: typeof value === "undefined" ? "" : value,
+          onChange: (e) => onChange(e.currentTarget.value),
+          readOnly,
+          rows: 5
+        }
+      )
+    ] });
   }
   if (field.type === "radio") {
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(RadioField, __spreadValues({}, props));
+    if (!field.options) {
+      return null;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName6(), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassName6("radioGroup"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassName6("label"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName6("labelIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(check_circle_default, { size: 16 }) }),
+        field.label || name
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName6("radioGroupItems"), children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        "label",
+        {
+          className: getClassName6("radio"),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              "input",
+              {
+                type: "radio",
+                className: getClassName6("radioInput"),
+                value: option.value,
+                name,
+                onChange: (e) => {
+                  if (e.currentTarget.value === "true" || e.currentTarget.value === "false") {
+                    onChange(JSON.parse(e.currentTarget.value));
+                    return;
+                  }
+                  onChange(e.currentTarget.value);
+                },
+                readOnly,
+                defaultChecked: value === option.value
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName6("radioInner"), children: option.label || option.value })
+          ]
+        },
+        option.label + option.value
+      )) })
+    ] }) });
   }
   if (field.type === "custom") {
     if (!field.render) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: getClassName13(), children: field.render({
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: getClassName6(), children: field.render({
       field,
       name,
       value,
@@ -3724,46 +3325,96 @@ var InputOrGroup = (props) => {
       readOnly
     }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DefaultField, __spreadValues({}, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: getClassName6({ readOnly }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassName6("label"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: getClassName6("labelIcon"), children: [
+        field.type === "text" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(type_default, { size: 16 }),
+        field.type === "number" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(hash_default, { size: 16 })
+      ] }),
+      label || name
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "input",
+      {
+        className: getClassName6("input"),
+        autoComplete: "off",
+        type: field.type,
+        name,
+        value: typeof value === "undefined" ? "" : value,
+        onChange: (e) => {
+          if (field.type === "number") {
+            onChange(Number(e.currentTarget.value));
+          } else {
+            onChange(e.currentTarget.value);
+          }
+        },
+        readOnly
+      }
+    )
+  ] });
 };
 
 // components/ComponentList/index.tsx
 init_react_import();
+var import_react_beautiful_dnd3 = require("react-beautiful-dnd");
 
 // 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_default5 = { "ComponentList": "_ComponentList_1ybn0_1", "ComponentList-item": "_ComponentList-item_1ybn0_9", "ComponentList-itemShadow": "_ComponentList-itemShadow_1ybn0_10", "ComponentList-itemIcon": "_ComponentList-itemIcon_1ybn0_28" };
 
 // components/ComponentList/index.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var getClassName14 = get_class_name_factory_default("ComponentList", styles_module_default7);
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var getClassName7 = get_class_name_factory_default("ComponentList", styles_module_default5);
 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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DroppableStrictMode_default, { droppableId: "component-list", isDropDisabled: true, children: (provided, snapshot) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     __spreadProps(__spreadValues({}, provided.droppableProps), {
       ref: provided.innerRef,
-      className: getClassName14({
-        isDraggingFrom: !!snapshot.draggingFromThisWith
-      }),
+      className: getClassName7(),
       children: [
         Object.keys(config.components).map((componentKey, i) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-            Draggable2,
+          const componentConfig = config[componentKey];
+          return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            import_react_beautiful_dnd3.Draggable,
             {
-              id: componentKey,
+              draggableId: 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, {}) })
-              ] })
+              children: (provided2, snapshot2) => {
+                var _a;
+                return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                    "div",
+                    __spreadProps(__spreadValues(__spreadValues({
+                      ref: provided2.innerRef
+                    }, provided2.draggableProps), provided2.dragHandleProps), {
+                      className: getClassName7("item"),
+                      style: __spreadProps(__spreadValues({}, provided2.draggableProps.style), {
+                        transform: snapshot2.isDragging ? (_a = provided2.draggableProps.style) == null ? void 0 : _a.transform : "translate(0px, 0px)"
+                      }),
+                      children: [
+                        componentKey,
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: getClassName7("itemIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(grid_default, { size: 18 }) })
+                      ]
+                    })
+                  ),
+                  snapshot2.isDragging && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                    "div",
+                    {
+                      className: getClassName7("itemShadow"),
+                      style: { transform: "none !important" },
+                      children: [
+                        componentKey,
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: getClassName7("itemIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(grid_default, { size: 18 }) })
+                      ]
+                    }
+                  )
+                ] });
+              }
             },
             componentKey
           );
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: { display: "none" }, children: provided.placeholder })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { display: "none" }, children: provided.placeholder })
       ]
     })
   ) });
@@ -3771,10 +3422,10 @@ var ComponentList = ({ config }) => {
 
 // lib/use-placeholder-style.ts
 init_react_import();
-var import_react27 = require("react");
+var import_react24 = require("react");
 var usePlaceholderStyle = () => {
   const queryAttr = "data-rbd-drag-handle-draggable-id";
-  const [placeholderStyle, setPlaceholderStyle] = (0, import_react27.useState)();
+  const [placeholderStyle, setPlaceholderStyle] = (0, import_react24.useState)();
   const onDragStartOrUpdate = (draggedItem) => {
     var _a;
     const draggableId = draggedItem.draggableId;
@@ -3822,24 +3473,24 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css#css-module
 init_react_import();
-var styles_module_default8 = { "SidebarSection": "_SidebarSection_f1p35_1", "SidebarSection-title": "_SidebarSection-title_f1p35_12", "SidebarSection-content": "_SidebarSection-content_f1p35_19", "SidebarSection--noPadding": "_SidebarSection--noPadding_f1p35_24", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_f1p35_33", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_f1p35_44", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_f1p35_33", "SidebarSection-heading": "_SidebarSection-heading_f1p35_56" };
+var styles_module_default6 = { "SidebarSection": "_SidebarSection_f1p35_1", "SidebarSection-title": "_SidebarSection-title_f1p35_12", "SidebarSection-content": "_SidebarSection-content_f1p35_19", "SidebarSection--noPadding": "_SidebarSection--noPadding_f1p35_24", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_f1p35_33", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_f1p35_44", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_f1p35_33", "SidebarSection-heading": "_SidebarSection-heading_f1p35_56" };
 
 // components/Heading/index.tsx
 init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Heading/styles.module.css#css-module
 init_react_import();
-var styles_module_default9 = { "Heading": "_Heading_1bvy5_1", "Heading--xxxxl": "_Heading--xxxxl_1bvy5_13", "Heading--xxxl": "_Heading--xxxl_1bvy5_19", "Heading--xxl": "_Heading--xxl_1bvy5_23", "Heading--xl": "_Heading--xl_1bvy5_27", "Heading--l": "_Heading--l_1bvy5_31", "Heading--m": "_Heading--m_1bvy5_35", "Heading--s": "_Heading--s_1bvy5_39", "Heading--xs": "_Heading--xs_1bvy5_43" };
+var styles_module_default7 = { "Heading": "_Heading_1bvy5_1", "Heading--xxxxl": "_Heading--xxxxl_1bvy5_13", "Heading--xxxl": "_Heading--xxxl_1bvy5_19", "Heading--xxl": "_Heading--xxl_1bvy5_23", "Heading--xl": "_Heading--xl_1bvy5_27", "Heading--l": "_Heading--l_1bvy5_31", "Heading--m": "_Heading--m_1bvy5_35", "Heading--s": "_Heading--s_1bvy5_39", "Heading--xs": "_Heading--xs_1bvy5_43" };
 
 // components/Heading/index.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var getClassName15 = get_class_name_factory_default("Heading", styles_module_default9);
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var getClassName8 = get_class_name_factory_default("Heading", styles_module_default7);
 var Heading = ({ children, rank, size = "m" }) => {
   const Tag = rank ? `h${rank}` : "span";
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     Tag,
     {
-      className: getClassName15({
+      className: getClassName8({
         [size]: true
       }),
       children
@@ -3848,8 +3499,8 @@ var Heading = ({ children, rank, size = "m" }) => {
 };
 
 // components/SidebarSection/index.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var getClassName16 = get_class_name_factory_default("SidebarSection", styles_module_default8);
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var getClassName9 = get_class_name_factory_default("SidebarSection", styles_module_default6);
 var SidebarSection = ({
   children,
   title,
@@ -3858,22 +3509,22 @@ var SidebarSection = ({
   breadcrumbClick,
   noPadding
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: getClassName16({ noPadding }), style: { background }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: getClassName16("title"), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: getClassName16("breadcrumbs"), children: [
-      breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: getClassName16("breadcrumb"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: getClassName9({ noPadding }), style: { background }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: getClassName9("title"), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: getClassName9("breadcrumbs"), children: [
+      breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: getClassName9("breadcrumb"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "div",
           {
-            className: getClassName16("breadcrumbLabel"),
+            className: getClassName9("breadcrumbLabel"),
             onClick: () => breadcrumbClick && breadcrumbClick(breadcrumb),
             children: breadcrumb.label
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(chevron_right_default, { size: 16 })
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(chevron_right_default, { size: 16 })
       ] }, i)),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: getClassName16("heading"), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Heading, { rank: 2, size: "xs", children: title }) })
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: getClassName9("heading"), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Heading, { rank: 2, size: "xs", children: title }) })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: getClassName16("content"), children })
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: getClassName9("content"), children })
   ] });
 };
 
@@ -3882,15 +3533,15 @@ init_react_import();
 
 // lib/use-puck-history.ts
 init_react_import();
-var import_react29 = require("react");
+var import_react26 = require("react");
 
 // lib/use-action-history.ts
 init_react_import();
-var import_react28 = require("react");
+var import_react25 = require("react");
 var EMPTY_HISTORY_INDEX = -1;
 function useActionHistory() {
-  const [histories, setHistories] = (0, import_react28.useState)([]);
-  const [currentHistoryIndex, setCurrentHistoryIndex] = (0, import_react28.useState)(EMPTY_HISTORY_INDEX);
+  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;
@@ -3962,7 +3613,7 @@ function usePuckHistory({
       dispatch
     });
   }, DEBOUNCE_TIME);
-  (0, import_react29.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     historyEmitter.on(RECORD_DIFF, handleRecordDiff);
     return () => {
       historyEmitter.off(RECORD_DIFF, handleRecordDiff);
@@ -3997,6 +3648,13 @@ var remove = (list, index) => {
 
 // lib/reduce-related-zones.ts
 init_react_import();
+
+// lib/generate-id.ts
+init_react_import();
+var import_crypto = require("crypto");
+var generateId = (type) => `${type}-${(0, import_crypto.randomBytes)(20).toString("hex")}`;
+
+// lib/reduce-related-zones.ts
 var reduceRelatedZones = (item, data, fn) => {
   return __spreadProps(__spreadValues({}, data), {
     zones: Object.keys(data.zones || {}).reduce(
@@ -4293,7 +3951,7 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/styles.module.css#css-module
 init_react_import();
-var styles_module_default10 = { "LayerTree": "_LayerTree_1dcmd_1", "LayerTree-zoneTitle": "_LayerTree-zoneTitle_1dcmd_11", "LayerTree-helper": "_LayerTree-helper_1dcmd_17", "Layer": "_Layer_1dcmd_1", "Layer-inner": "_Layer-inner_1dcmd_29", "Layer--containsZone": "_Layer--containsZone_1dcmd_35", "Layer-clickable": "_Layer-clickable_1dcmd_39", "Layer--isSelected": "_Layer--isSelected_1dcmd_48", "Layer--isHovering": "_Layer--isHovering_1dcmd_49", "Layer-chevron": "_Layer-chevron_1dcmd_65", "Layer--childIsSelected": "_Layer--childIsSelected_1dcmd_66", "Layer-zones": "_Layer-zones_1dcmd_70", "Layer-title": "_Layer-title_1dcmd_84", "Layer-icon": "_Layer-icon_1dcmd_92", "Layer-zoneIcon": "_Layer-zoneIcon_1dcmd_97" };
+var styles_module_default8 = { "LayerTree": "_LayerTree_1dcmd_1", "LayerTree-zoneTitle": "_LayerTree-zoneTitle_1dcmd_11", "LayerTree-helper": "_LayerTree-helper_1dcmd_17", "Layer": "_Layer_1dcmd_1", "Layer-inner": "_Layer-inner_1dcmd_29", "Layer--containsZone": "_Layer--containsZone_1dcmd_35", "Layer-clickable": "_Layer-clickable_1dcmd_39", "Layer--isSelected": "_Layer--isSelected_1dcmd_48", "Layer--isHovering": "_Layer--isHovering_1dcmd_49", "Layer-chevron": "_Layer-chevron_1dcmd_65", "Layer--childIsSelected": "_Layer--childIsSelected_1dcmd_66", "Layer-zones": "_Layer-zones_1dcmd_70", "Layer-title": "_Layer-title_1dcmd_84", "Layer-icon": "_Layer-icon_1dcmd_92", "Layer-zoneIcon": "_Layer-zoneIcon_1dcmd_97" };
 
 // lib/scroll-into-view.ts
 init_react_import();
@@ -4307,7 +3965,7 @@ var scrollIntoView = (el) => {
 };
 
 // components/LayerTree/index.tsx
-var import_react30 = require("react");
+var import_react27 = require("react");
 
 // lib/find-zones-for-area.ts
 init_react_import();
@@ -4336,9 +3994,9 @@ var isChildOfZone = (item, maybeChild, ctx) => {
 };
 
 // components/LayerTree/index.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var getClassName17 = get_class_name_factory_default("LayerTree", styles_module_default10);
-var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default10);
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var getClassName10 = get_class_name_factory_default("LayerTree", styles_module_default8);
+var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default8);
 var LayerTree = ({
   data,
   zoneContent,
@@ -4348,15 +4006,15 @@ var LayerTree = ({
   label
 }) => {
   const zones = data.zones || {};
-  const ctx = (0, import_react30.useContext)(dropZoneContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: getClassName17("zoneTitle"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassName17("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(layers_default, { size: "16" }) }),
+  const ctx = (0, import_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" }) }),
       " ",
       label
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("ul", { className: getClassName17(), children: [
-      zoneContent.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassName17("helper"), children: "No items" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("ul", { className: getClassName10(), children: [
+      zoneContent.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: getClassName10("helper"), children: "No items" }),
       zoneContent.map((item, i) => {
         const isSelected = (itemSelector == null ? void 0 : itemSelector.index) === i && (itemSelector.zone === zone || itemSelector.zone === rootDroppableId && !zone);
         const zonesForItem = findZonesForArea(data, item.props.id);
@@ -4371,7 +4029,7 @@ var LayerTree = ({
         const selectedItem = itemSelector && data ? getItem(itemSelector, data) : null;
         const isHovering = hoveringComponent === item.props.id;
         const childIsSelected = isChildOfZone(item, selectedItem, ctx);
-        return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
           "li",
           {
             className: getClassNameLayer({
@@ -4381,7 +4039,7 @@ var LayerTree = ({
               childIsSelected
             }),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
                 "div",
                 {
                   className: getClassNameLayer("clickable"),
@@ -4412,22 +4070,22 @@ var LayerTree = ({
                     setHoveringComponent(null);
                   },
                   children: [
-                    containsZone && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                    containsZone && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                       "div",
                       {
                         className: getClassNameLayer("chevron"),
                         title: isSelected ? "Collapse" : "Expand",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(chevron_down_default, { size: "12" })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(chevron_down_default, { size: "12" })
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: getClassNameLayer("title"), children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassNameLayer("icon"), children: item.type === "Text" || item.type === "Heading" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(type_default, { size: "16" }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(grid_default, { size: "16" }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: getClassNameLayer("title"), children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: getClassNameLayer("icon"), children: item.type === "Text" || item.type === "Heading" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(type_default, { size: "16" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(grid_default, { size: "16" }) }),
                       item.type
                     ] })
                   ]
                 }
               ) }),
-              containsZone && Object.keys(zonesForItem).map((zoneKey, idx) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              containsZone && Object.keys(zonesForItem).map((zoneKey, idx) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 LayerTree,
                 {
                   data,
@@ -4472,7 +4130,7 @@ var flushZones = (appData) => {
 };
 
 // components/Puck/index.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var defaultPageFields = {
   title: { type: "text" }
 };
@@ -4483,7 +4141,7 @@ var PluginRenderer = ({
   renderMethod
 }) => {
   return plugins.filter((item) => item[renderMethod]).map((item) => item[renderMethod]).reduce(
-    (accChildren, Item) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Item, { data, children: accChildren }),
+    (accChildren, Item) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Item, { data, children: accChildren }),
     children
   );
 };
@@ -4499,15 +4157,12 @@ function Puck({
   headerPath
 }) {
   var _a, _b;
-  const [reducer] = (0, import_react31.useState)(() => createReducer({ config }));
+  const [reducer] = (0, import_react28.useState)(() => createReducer({ config }));
   const initialAppData = {
     data: initialData,
-    state: {
-      leftSideBarVisible: true,
-      arrayState: {}
-    }
+    state: { leftSideBarVisible: true, itemSelector: null }
   };
-  const [appData, dispatch] = (0, import_react31.useReducer)(
+  const [appData, dispatch] = (0, import_react28.useReducer)(
     reducer,
     flushZones(initialAppData)
   );
@@ -4517,7 +4172,7 @@ function Puck({
     dispatch
   });
   const { itemSelector, leftSideBarVisible } = state;
-  const setItemSelector = (0, import_react31.useCallback)(
+  const setItemSelector = (0, import_react28.useCallback)(
     (newItemSelector) => {
       dispatch({
         type: "setState",
@@ -4527,10 +4182,10 @@ function Puck({
     []
   );
   const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
-  const Page = (0, import_react31.useCallback)(
+  const Page = (0, import_react28.useCallback)(
     (pageProps) => {
       var _a2, _b2;
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         PluginRenderer,
         {
           plugins,
@@ -4542,8 +4197,8 @@ function Puck({
     },
     [config.root]
   );
-  const PageFieldWrapper = (0, import_react31.useCallback)(
-    (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  const PageFieldWrapper = (0, import_react28.useCallback)(
+    (props) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       PluginRenderer,
       {
         plugins,
@@ -4554,8 +4209,8 @@ function Puck({
     ),
     []
   );
-  const ComponentFieldWrapper = (0, import_react31.useCallback)(
-    (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  const ComponentFieldWrapper = (0, import_react28.useCallback)(
+    (props) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       PluginRenderer,
       {
         plugins,
@@ -4569,14 +4224,14 @@ 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_react31.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (onChange)
       onChange(data);
   }, [data]);
   const { onDragStartOrUpdate, placeholderStyle } = usePlaceholderStyle();
-  const [draggedItem, setDraggedItem] = (0, import_react31.useState)();
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "puck", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AppProvider, { value: { appData, dispatch }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-    import_react_beautiful_dnd5.DragDropContext,
+  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,
     {
       onDragUpdate: (update) => {
         setDraggedItem(__spreadValues(__spreadValues({}, draggedItem), update));
@@ -4627,7 +4282,7 @@ function Puck({
           });
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         DropZoneProvider,
         {
           value: {
@@ -4641,13 +4296,13 @@ function Puck({
             mode: "edit",
             areaId: "root"
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(dropZoneContext.Consumer, { children: (ctx) => {
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(dropZoneContext.Consumer, { children: (ctx) => {
             let path = (ctx == null ? void 0 : ctx.pathData) && selectedItem ? ctx == null ? void 0 : ctx.pathData[selectedItem == null ? void 0 : selectedItem.props.id] : void 0;
             if (path) {
               path = [{ label: "Page", selector: null }, ...path];
               path = path.slice(path.length - 2, path.length - 1);
             }
-            return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
               "div",
               {
                 style: {
@@ -4663,7 +4318,7 @@ function Puck({
                   right: 0
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                     "header",
                     {
                       style: {
@@ -4673,19 +4328,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_runtime13.jsx)(
                           Button,
                           {
                             onClick: () => {
                               onPublish(data);
                             },
-                            icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(globe_default, { size: "14px" }),
+                            icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(globe_default, { size: "14px" }),
                             children: "Publish"
                           }
                         ),
                         data,
                         dispatch
-                      }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+                      }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                         "div",
                         {
                           style: {
@@ -4696,14 +4351,14 @@ function Puck({
                             gridTemplateRows: "auto"
                           },
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                               "div",
                               {
                                 style: {
                                   display: "flex",
                                   gap: 16
                                 },
-                                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                                   IconButton,
                                   {
                                     onClick: () => dispatch({
@@ -4713,12 +4368,12 @@ function Puck({
                                       }
                                     }),
                                     title: "Toggle left sidebar",
-                                    children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(sidebar_default, {})
+                                    children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(sidebar_default, {})
                                   }
                                 )
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                               "div",
                               {
                                 style: {
@@ -4726,19 +4381,13 @@ function Puck({
                                   justifyContent: "center",
                                   alignItems: "center"
                                 },
-                                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Heading, { rank: 2, size: "xs", children: [
+                                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Heading, { rank: 2, size: "xs", children: [
                                   headerTitle || data.root.title || "Page",
-                                  headerPath && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                                    "small",
-                                    {
-                                      style: { fontWeight: 400, marginLeft: 4 },
-                                      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("code", { children: headerPath })
-                                    }
-                                  )
+                                  headerPath && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("small", { style: { fontWeight: 400, marginLeft: 4 }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("code", { children: headerPath }) })
                                 ] })
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+                            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                               "div",
                               {
                                 style: {
@@ -4747,14 +4396,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_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_runtime21.jsx)(
+                                        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                                           chevron_left_default,
                                           {
                                             size: 21,
@@ -4763,13 +4412,13 @@ function Puck({
                                         )
                                       }
                                     ),
-                                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                                       IconButton,
                                       {
                                         title: "redo",
                                         disabled: !canForward,
                                         onClick: forward,
-                                        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                                        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                                           chevron_right_default,
                                           {
                                             size: 21,
@@ -4780,13 +4429,13 @@ function Puck({
                                     )
                                   ] }),
                                   renderHeaderActions && renderHeaderActions({ data, dispatch }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                                     Button,
                                     {
                                       onClick: () => {
                                         onPublish(data);
                                       },
-                                      icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(globe_default, { size: "14px" }),
+                                      icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(globe_default, { size: "14px" }),
                                       children: "Publish"
                                     }
                                   )
@@ -4798,7 +4447,7 @@ function Puck({
                       )
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                     "div",
                     {
                       style: {
@@ -4810,9 +4459,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_runtime13.jsx)(SidebarSection, { title: "Components", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ComponentList, { config }) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(SidebarSection, { title: "Outline", children: [
+                          (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                             LayerTree,
                             {
                               data,
@@ -4824,7 +4473,7 @@ function Puck({
                           ),
                           Object.entries(findZonesForArea(data, "root")).map(
                             ([zoneKey, zone]) => {
-                              return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                              return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                                 LayerTree,
                                 {
                                   data,
@@ -4842,7 +4491,7 @@ function Puck({
                       ]
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                     "div",
                     {
                       style: {
@@ -4855,7 +4504,7 @@ function Puck({
                       onClick: () => setItemSelector(null),
                       id: "puck-frame",
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                           "div",
                           {
                             className: "puck-root",
@@ -4864,18 +4513,18 @@ function Puck({
                               margin: 32,
                               zoom: 0.75
                             },
-                            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                               "div",
                               {
                                 style: {
                                   border: "1px solid var(--puck-color-grey-8)"
                                 },
-                                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Page, __spreadProps(__spreadValues({ data }, data.root), { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropZone, { zone: rootDroppableId }) }))
+                                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Page, __spreadProps(__spreadValues({ data }, data.root), { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DropZone, { zone: rootDroppableId }) }))
                               }
                             )
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                           "div",
                           {
                             style: {
@@ -4888,7 +4537,7 @@ function Puck({
                       ]
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                     "div",
                     {
                       style: {
@@ -4900,7 +4549,7 @@ function Puck({
                         flexDirection: "column",
                         background: "var(--puck-color-white)"
                       },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(FieldWrapper, { data, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FieldWrapper, { data, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                         SidebarSection,
                         {
                           noPadding: true,
@@ -4959,7 +4608,7 @@ function Puck({
                               }
                             };
                             if (selectedItem && itemSelector) {
-                              return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                              return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                                 InputOrGroup,
                                 {
                                   field,
@@ -4975,15 +4624,13 @@ function Puck({
                                 `${selectedItem.props.id}_${fieldName}`
                               );
                             } else {
-                              return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                              return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                                 InputOrGroup,
                                 {
                                   field,
                                   name: fieldName,
                                   label: field.label,
-                                  readOnly: ((_d = (_c = data.root._meta) == null ? void 0 : _c.locked) == null ? void 0 : _d.indexOf(
-                                    fieldName
-                                  )) > -1,
+                                  readOnly: ((_d = (_c = data.root._meta) == null ? void 0 : _c.locked) == null ? void 0 : _d.indexOf(fieldName)) > -1,
                                   value: data.root[fieldName],
                                   onChange: onChange2
                                 },
@@ -5002,17 +4649,17 @@ function Puck({
         }
       )
     }
-  ) }) });
+  ) });
 }
 
 // components/Render/index.tsx
 init_react_import();
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime14 = 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_runtime14.jsx)(DropZoneProvider, { value: { data, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(config.root.render, __spreadProps(__spreadValues({}, data.root), { editMode: false, id: "puck-root", children: /* @__PURE__ */ (0, import_jsx_runtime14.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_runtime14.jsx)(DropZoneProvider, { value: { data, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropZone, { zone: rootDroppableId }) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {