@measured/puck 0.20.0-canary.6cf56a8a → 0.20.0-canary.6dace1cf

package/dist/no-external.js

@@ -309,7 +309,7 @@ init_react_import();
 var styles_module_default2 = { "InputWrapper": "_InputWrapper_py9hf_1", "Input-label": "_Input-label_py9hf_5", "Input-labelIcon": "_Input-labelIcon_py9hf_14", "Input-disabledIcon": "_Input-disabledIcon_py9hf_21", "Input-input": "_Input-input_py9hf_26", "Input": "_Input_py9hf_1", "Input--readOnly": "_Input--readOnly_py9hf_76", "Input-radioGroupItems": "_Input-radioGroupItems_py9hf_87", "Input-radio": "_Input-radio_py9hf_87", "Input-radioInner": "_Input-radioInner_py9hf_104", "Input-radioInput": "_Input-radioInput_py9hf_149" };
 
 // components/AutoField/index.tsx
-var import_react22 = require("react");
+var import_react20 = require("react");
 
 // components/AutoField/fields/index.tsx
 init_react_import();
@@ -3802,20 +3802,6 @@ var ExternalField = ({
 
 // components/AutoField/fields/RadioField/index.tsx
 init_react_import();
-var import_react19 = require("react");
-
-// lib/safe-json-parse.ts
-init_react_import();
-var safeJsonParse = (str) => {
-  try {
-    const jsonValue = JSON.parse(str);
-    return jsonValue;
-  } catch (e) {
-    return str;
-  }
-};
-
-// components/AutoField/fields/RadioField/index.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var getClassName11 = get_class_name_factory_default("Input", styles_module_default2);
 var RadioField = ({
@@ -3829,10 +3815,6 @@ var RadioField = ({
   labelIcon,
   Label: Label2
 }) => {
-  const flatOptions = (0, import_react19.useMemo)(
-    () => field.type === "radio" ? field.options.map(({ value: value2 }) => value2) : [],
-    [field]
-  );
   if (field.type !== "radio" || !field.options) {
     return null;
   }
@@ -3843,43 +3825,39 @@ var RadioField = ({
       label: label || name,
       readOnly,
       el: "div",
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: getClassName11("radioGroupItems"), id, children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-        "label",
-        {
-          className: getClassName11("radio"),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-              "input",
-              {
-                type: "radio",
-                className: getClassName11("radioInput"),
-                value: option.value,
-                name,
-                onChange: (e) => {
-                  var _a;
-                  const jsonValue = (_a = safeJsonParse(e.target.value)) != null ? _a : e.target.value;
-                  if (flatOptions.indexOf(jsonValue) > -1) {
-                    onChange(jsonValue);
-                  } else {
-                    onChange(e.target.value);
-                  }
-                },
-                disabled: readOnly,
-                checked: value === option.value
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: getClassName11("radioInner"), children: option.label || option.value })
-          ]
-        },
-        option.label + option.value
-      )) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: getClassName11("radioGroupItems"), id, children: field.options.map((option) => {
+        var _a;
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+          "label",
+          {
+            className: getClassName11("radio"),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                "input",
+                {
+                  type: "radio",
+                  className: getClassName11("radioInput"),
+                  value: JSON.stringify({ value: option.value }),
+                  name,
+                  onChange: (e) => {
+                    onChange(JSON.parse(e.target.value).value);
+                  },
+                  disabled: readOnly,
+                  checked: value === option.value
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: getClassName11("radioInner"), children: option.label || ((_a = option.value) == null ? void 0 : _a.toString()) })
+            ]
+          },
+          option.label + option.value
+        );
+      }) })
     }
   );
 };
 
 // components/AutoField/fields/SelectField/index.tsx
 init_react_import();
-var import_react20 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var getClassName12 = get_class_name_factory_default("Input", styles_module_default2);
 var SelectField = ({
@@ -3893,10 +3871,6 @@ var SelectField = ({
   readOnly,
   id
 }) => {
-  const flatOptions = (0, import_react20.useMemo)(
-    () => field.type === "select" ? field.options.map(({ value: value2 }) => value2) : [],
-    [field]
-  );
   if (field.type !== "select" || !field.options) {
     return null;
   }
@@ -3914,22 +3888,16 @@ var SelectField = ({
           className: getClassName12("input"),
           disabled: readOnly,
           onChange: (e) => {
-            var _a;
-            const jsonValue = (_a = safeJsonParse(e.target.value)) != null ? _a : e.target.value;
-            if (flatOptions.indexOf(jsonValue) > -1) {
-              onChange(jsonValue);
-            } else {
-              onChange(e.target.value);
-            }
+            onChange(JSON.parse(e.target.value).value);
           },
-          value,
+          value: JSON.stringify({ value }),
           children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "option",
             {
               label: option.label,
-              value: option.value
+              value: JSON.stringify({ value: option.value })
             },
-            option.label + option.value
+            option.label + JSON.stringify(option.value)
           ))
         }
       )
@@ -4053,12 +4021,12 @@ var ObjectField = ({
 
 // lib/use-safe-id.ts
 init_react_import();
-var import_react21 = __toESM(require("react"));
+var import_react19 = __toESM(require("react"));
 var useSafeId = () => {
-  if (typeof import_react21.default.useId !== "undefined") {
-    return import_react21.default.useId();
+  if (typeof import_react19.default.useId !== "undefined") {
+    return import_react19.default.useId();
   }
-  const [id] = (0, import_react21.useState)(generateId());
+  const [id] = (0, import_react19.useState)(generateId());
   return id;
 };
 
@@ -4092,7 +4060,7 @@ var FieldLabelInternal = ({
   readOnly
 }) => {
   const overrides = useAppStore((s) => s.overrides);
-  const Wrapper = (0, import_react22.useMemo)(
+  const Wrapper = (0, import_react20.useMemo)(
     () => overrides.fieldLabel || FieldLabel,
     [overrides]
   );
@@ -4119,7 +4087,7 @@ function AutoFieldInternal(props) {
     var _a2;
     return (_a2 = s.selectedItem) == null ? void 0 : _a2.readOnly;
   });
-  const nestedFieldContext = (0, import_react22.useContext)(NestedFieldContext);
+  const nestedFieldContext = (0, import_react20.useContext)(NestedFieldContext);
   const { id, Label: Label2 = FieldLabelInternal } = props;
   const field = props.field;
   const label = field.label;
@@ -4153,7 +4121,7 @@ function AutoFieldInternal(props) {
     Label: Label2,
     id: resolvedId
   });
-  const onFocus = (0, import_react22.useCallback)(
+  const onFocus = (0, import_react20.useCallback)(
     (e) => {
       if (mergedProps.name && (e.target.nodeName === "INPUT" || e.target.nodeName === "TEXTAREA")) {
         e.stopPropagation();
@@ -4167,7 +4135,7 @@ function AutoFieldInternal(props) {
     },
     [mergedProps.name]
   );
-  const onBlur = (0, import_react22.useCallback)((e) => {
+  const onBlur = (0, import_react20.useCallback)((e) => {
     if ("name" in e.target) {
       dispatch({
         type: "setUi",
@@ -4220,20 +4188,20 @@ function AutoFieldInternal(props) {
 function AutoFieldPrivate(props) {
   const isFocused = useAppStore((s) => s.state.ui.field.focus === props.name);
   const { value, onChange } = props;
-  const [localValue, setLocalValue] = (0, import_react22.useState)(value);
-  const onChangeLocal = (0, import_react22.useCallback)(
+  const [localValue, setLocalValue] = (0, import_react20.useState)(value);
+  const onChangeLocal = (0, import_react20.useCallback)(
     (val, ui) => {
       setLocalValue(val);
       onChange(val, ui);
     },
     [onChange]
   );
-  (0, import_react22.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!isFocused) {
       setLocalValue(value);
     }
   }, [value]);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!isFocused) {
       if (value !== localValue) {
         setLocalValue(value);
@@ -4247,7 +4215,7 @@ function AutoFieldPrivate(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AutoFieldInternal, __spreadValues(__spreadValues({}, props), localProps));
 }
 function AutoField(props) {
-  const DefaultLabel = (0, import_react22.useMemo)(() => {
+  const DefaultLabel = (0, import_react20.useMemo)(() => {
     const DefaultLabel2 = (labelProps) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "div",
       __spreadProps(__spreadValues({}, labelProps), {
@@ -4270,21 +4238,21 @@ init_react_import();
 var styles_module_default10 = { "Drawer": "_Drawer_pl7z0_1", "Drawer-draggable": "_Drawer-draggable_pl7z0_8", "Drawer-draggableBg": "_Drawer-draggableBg_pl7z0_12", "DrawerItem-draggable": "_DrawerItem-draggable_pl7z0_22", "DrawerItem--disabled": "_DrawerItem--disabled_pl7z0_35", "DrawerItem": "_DrawerItem_pl7z0_22", "Drawer--isDraggingFrom": "_Drawer--isDraggingFrom_pl7z0_45", "DrawerItem-name": "_DrawerItem-name_pl7z0_63" };
 
 // components/Drawer/index.tsx
-var import_react39 = require("react");
+var import_react37 = require("react");
 
 // components/DragDropContext/index.tsx
 init_react_import();
-var import_react37 = require("@dnd-kit/react");
-var import_react38 = require("react");
+var import_react35 = require("@dnd-kit/react");
+var import_react36 = require("react");
 var import_dom = require("@dnd-kit/dom");
 
 // components/DropZone/index.tsx
 init_react_import();
-var import_react35 = require("react");
+var import_react33 = require("react");
 
 // components/DraggableComponent/index.tsx
 init_react_import();
-var import_react26 = require("react");
+var import_react24 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css#css-module
 init_react_import();
@@ -4314,11 +4282,11 @@ function getDeepScrollPosition(element) {
 
 // components/DropZone/context.tsx
 init_react_import();
-var import_react23 = require("react");
+var import_react21 = require("react");
 var import_zustand3 = require("zustand");
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var dropZoneContext = (0, import_react23.createContext)(null);
-var ZoneStoreContext = (0, import_react23.createContext)(
+var dropZoneContext = (0, import_react21.createContext)(null);
+var ZoneStoreContext = (0, import_react21.createContext)(
   (0, import_zustand3.createStore)(() => ({
     zoneDepthIndex: {},
     nextZoneDepthIndex: {},
@@ -4341,7 +4309,7 @@ var DropZoneProvider = ({
   value
 }) => {
   const dispatch = useAppStore((s) => s.dispatch);
-  const registerZone = (0, import_react23.useCallback)(
+  const registerZone = (0, import_react21.useCallback)(
     (zoneCompound) => {
       dispatch({
         type: "registerZone",
@@ -4350,7 +4318,7 @@ var DropZoneProvider = ({
     },
     [dispatch]
   );
-  const memoValue = (0, import_react23.useMemo)(
+  const memoValue = (0, import_react21.useMemo)(
     () => __spreadValues({
       registerZone
     }, value),
@@ -4380,11 +4348,11 @@ function accumulateTransform(el) {
 
 // lib/use-context-store.ts
 init_react_import();
-var import_react24 = require("react");
+var import_react22 = require("react");
 var import_zustand4 = require("zustand");
 var import_shallow = require("zustand/react/shallow");
 function useContextStore(context, selector) {
-  const store = (0, import_react24.useContext)(context);
+  const store = (0, import_react22.useContext)(context);
   if (!store) {
     throw new Error("useContextStore must be used inside context");
   }
@@ -4393,10 +4361,10 @@ function useContextStore(context, selector) {
 
 // lib/dnd/use-on-drag-finished.ts
 init_react_import();
-var import_react25 = require("react");
+var import_react23 = require("react");
 var useOnDragFinished = (cb, deps = []) => {
   const appStore = useAppStoreApi();
-  return (0, import_react25.useCallback)(() => {
+  return (0, import_react23.useCallback)(() => {
     let dispose = () => {
     };
     const processDragging = (isDragging2) => {
@@ -4466,9 +4434,9 @@ var DraggableComponent = ({
   const overrides = useAppStore((s) => s.overrides);
   const dispatch = useAppStore((s) => s.dispatch);
   const iframe = useAppStore((s) => s.iframe);
-  const ctx = (0, import_react26.useContext)(dropZoneContext);
-  const [localZones, setLocalZones] = (0, import_react26.useState)({});
-  const registerLocalZone = (0, import_react26.useCallback)(
+  const ctx = (0, import_react24.useContext)(dropZoneContext);
+  const [localZones, setLocalZones] = (0, import_react24.useState)({});
+  const registerLocalZone = (0, import_react24.useCallback)(
     (zoneCompound2, active) => {
       var _a;
       (_a = ctx == null ? void 0 : ctx.registerLocalZone) == null ? void 0 : _a.call(ctx, zoneCompound2, active);
@@ -4478,7 +4446,7 @@ var DraggableComponent = ({
     },
     [setLocalZones]
   );
-  const unregisterLocalZone = (0, import_react26.useCallback)(
+  const unregisterLocalZone = (0, import_react24.useCallback)(
     (zoneCompound2) => {
       var _a;
       (_a = ctx == null ? void 0 : ctx.unregisterLocalZone) == null ? void 0 : _a.call(ctx, zoneCompound2);
@@ -4501,9 +4469,9 @@ var DraggableComponent = ({
       return s.permissions.getPermissions({ item });
     })
   );
-  const zoneStore = (0, import_react26.useContext)(ZoneStoreContext);
-  const [dragAxis, setDragAxis] = (0, import_react26.useState)(userDragAxis || autoDragAxis);
-  const dynamicCollisionDetector = (0, import_react26.useMemo)(
+  const zoneStore = (0, import_react24.useContext)(ZoneStoreContext);
+  const [dragAxis, setDragAxis] = (0, import_react24.useState)(userDragAxis || autoDragAxis);
+  const dynamicCollisionDetector = (0, import_react24.useMemo)(
     () => createDynamicCollisionDetector(dragAxis),
     [dragAxis]
   );
@@ -4535,7 +4503,7 @@ var DraggableComponent = ({
     },
     feedback: "clone"
   });
-  (0, import_react26.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     const isEnabled = zoneStore.getState().enabledIndex[zoneCompound];
     sortable.droppable.disabled = !isEnabled;
     sortable.draggable.disabled = !permissions.drag;
@@ -4552,8 +4520,8 @@ var DraggableComponent = ({
     }
     return cleanup;
   }, [permissions.drag, zoneCompound]);
-  const ref = (0, import_react26.useRef)(null);
-  const refSetter = (0, import_react26.useCallback)(
+  const ref = (0, import_react24.useRef)(null);
+  const refSetter = (0, import_react24.useCallback)(
     (el) => {
       sortableRef(el);
       if (el) {
@@ -4562,14 +4530,14 @@ var DraggableComponent = ({
     },
     [sortableRef]
   );
-  const [portalEl, setPortalEl] = (0, import_react26.useState)();
-  (0, import_react26.useEffect)(() => {
+  const [portalEl, setPortalEl] = (0, import_react24.useState)();
+  (0, import_react24.useEffect)(() => {
     var _a, _b, _c;
     setPortalEl(
       iframe.enabled ? (_a = ref.current) == null ? void 0 : _a.ownerDocument.body : (_c = (_b = ref.current) == null ? void 0 : _b.closest("[data-puck-preview]")) != null ? _c : document.body
     );
   }, [iframe.enabled, ref.current]);
-  const getStyle = (0, import_react26.useCallback)(() => {
+  const getStyle = (0, import_react24.useCallback)(() => {
     var _a, _b, _c;
     if (!ref.current) return;
     const rect = ref.current.getBoundingClientRect();
@@ -4594,11 +4562,11 @@ var DraggableComponent = ({
     };
     return style2;
   }, [ref.current]);
-  const [style, setStyle] = (0, import_react26.useState)();
-  const sync = (0, import_react26.useCallback)(() => {
+  const [style, setStyle] = (0, import_react24.useState)();
+  const sync = (0, import_react24.useCallback)(() => {
     setStyle(getStyle());
   }, [ref.current, iframe]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (ref.current) {
       const observer = new ResizeObserver(sync);
       observer.observe(ref.current);
@@ -4608,13 +4576,13 @@ var DraggableComponent = ({
     }
   }, [ref.current]);
   const registerNode = useAppStore((s) => s.nodes.registerNode);
-  const hideOverlay = (0, import_react26.useCallback)(() => {
+  const hideOverlay = (0, import_react24.useCallback)(() => {
     setIsVisible(false);
   }, []);
-  const showOverlay = (0, import_react26.useCallback)(() => {
+  const showOverlay = (0, import_react24.useCallback)(() => {
     setIsVisible(true);
   }, []);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     var _a;
     registerNode(id, {
       methods: { sync, showOverlay, hideOverlay },
@@ -4631,11 +4599,11 @@ var DraggableComponent = ({
       });
     };
   }, [id, zoneCompound, index, componentType, sync]);
-  const CustomActionBar = (0, import_react26.useMemo)(
+  const CustomActionBar = (0, import_react24.useMemo)(
     () => overrides.actionBar || DefaultActionBar,
     [overrides.actionBar]
   );
-  const onClick = (0, import_react26.useCallback)(
+  const onClick = (0, import_react24.useCallback)(
     (e) => {
       e.stopPropagation();
       dispatch({
@@ -4648,7 +4616,7 @@ var DraggableComponent = ({
     [index, zoneCompound, id]
   );
   const appStore = useAppStoreApi();
-  const onSelectParent = (0, import_react26.useCallback)(() => {
+  const onSelectParent = (0, import_react24.useCallback)(() => {
     const { nodes, zones } = appStore.getState().state.indexes;
     const node = nodes[id];
     const parentNode = (node == null ? void 0 : node.parentId) ? nodes[node == null ? void 0 : node.parentId] : null;
@@ -4669,26 +4637,26 @@ var DraggableComponent = ({
       }
     });
   }, [ctx, path]);
-  const onDuplicate = (0, import_react26.useCallback)(() => {
+  const onDuplicate = (0, import_react24.useCallback)(() => {
     dispatch({
       type: "duplicate",
       sourceIndex: index,
       sourceZone: zoneCompound
     });
   }, [index, zoneCompound]);
-  const onDelete = (0, import_react26.useCallback)(() => {
+  const onDelete = (0, import_react24.useCallback)(() => {
     dispatch({
       type: "remove",
       index,
       zone: zoneCompound
     });
   }, [index, zoneCompound]);
-  const [hover, setHover] = (0, import_react26.useState)(false);
+  const [hover, setHover] = (0, import_react24.useState)(false);
   const indicativeHover = useContextStore(
     ZoneStoreContext,
     (s) => s.hoveringComponent === id
   );
-  (0, import_react26.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (!ref.current) {
       return;
     }
@@ -4733,10 +4701,10 @@ var DraggableComponent = ({
     thisIsDragging,
     inDroppableZone
   ]);
-  const [isVisible, setIsVisible] = (0, import_react26.useState)(false);
-  const [dragFinished, setDragFinished] = (0, import_react26.useState)(true);
-  const [_, startTransition] = (0, import_react26.useTransition)();
-  (0, import_react26.useEffect)(() => {
+  const [isVisible, setIsVisible] = (0, import_react24.useState)(false);
+  const [dragFinished, setDragFinished] = (0, import_react24.useState)(true);
+  const [_, startTransition] = (0, import_react24.useTransition)();
+  (0, import_react24.useEffect)(() => {
     startTransition(() => {
       if (hover || indicativeHover || isSelected) {
         sync();
@@ -4747,7 +4715,7 @@ var DraggableComponent = ({
       }
     });
   }, [hover, indicativeHover, isSelected, iframe]);
-  const [thisWasDragging, setThisWasDragging] = (0, import_react26.useState)(false);
+  const [thisWasDragging, setThisWasDragging] = (0, import_react24.useState)(false);
   const onDragFinished = useOnDragFinished((finished) => {
     if (finished) {
       startTransition(() => {
@@ -4758,15 +4726,15 @@ var DraggableComponent = ({
       setDragFinished(false);
     }
   });
-  (0, import_react26.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (thisIsDragging) {
       setThisWasDragging(true);
     }
   }, [thisIsDragging]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (thisWasDragging) return onDragFinished();
   }, [thisWasDragging, onDragFinished]);
-  const syncActionsPosition = (0, import_react26.useCallback)(
+  const syncActionsPosition = (0, import_react24.useCallback)(
     (el) => {
       if (el) {
         const view = el.ownerDocument.defaultView;
@@ -4791,7 +4759,7 @@ var DraggableComponent = ({
     },
     [zoom]
   );
-  (0, import_react26.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (userDragAxis) {
       setDragAxis(userDragAxis);
       return;
@@ -4805,11 +4773,11 @@ var DraggableComponent = ({
     }
     setDragAxis(autoDragAxis);
   }, [ref, userDragAxis, autoDragAxis]);
-  const parentAction = (0, import_react26.useMemo)(
+  const parentAction = (0, import_react24.useMemo)(
     () => (ctx == null ? void 0 : ctx.areaId) && (ctx == null ? void 0 : ctx.areaId) !== "root" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ActionBar.Action, { onClick: onSelectParent, label: "Select parent", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CornerLeftUp, { size: 16 }) }),
     [ctx == null ? void 0 : ctx.areaId]
   );
-  const nextContextValue = (0, import_react26.useMemo)(
+  const nextContextValue = (0, import_react24.useMemo)(
     () => __spreadProps(__spreadValues({}, ctx), {
       areaId: id,
       zoneCompound,
@@ -4892,11 +4860,11 @@ init_react_import();
 var styles_module_default12 = { "DropZone": "_DropZone_1i2sv_1", "DropZone--hasChildren": "_DropZone--hasChildren_1i2sv_11", "DropZone--isAreaSelected": "_DropZone--isAreaSelected_1i2sv_24", "DropZone--hoveringOverArea": "_DropZone--hoveringOverArea_1i2sv_25", "DropZone--isRootZone": "_DropZone--isRootZone_1i2sv_25", "DropZone--isDestination": "_DropZone--isDestination_1i2sv_35", "DropZone-item": "_DropZone-item_1i2sv_47", "DropZone-hitbox": "_DropZone-hitbox_1i2sv_51", "DropZone--isEnabled": "_DropZone--isEnabled_1i2sv_59", "DropZone--isAnimating": "_DropZone--isAnimating_1i2sv_68" };
 
 // components/DropZone/index.tsx
-var import_react36 = require("@dnd-kit/react");
+var import_react34 = require("@dnd-kit/react");
 
 // components/DropZone/lib/use-min-empty-height.ts
 init_react_import();
-var import_react27 = require("react");
+var import_react25 = require("react");
 var getNumItems = (appStore, zoneCompound) => appStore.getState().state.indexes.zones[zoneCompound].contentIds.length;
 var useMinEmptyHeight = ({
   zoneCompound,
@@ -4904,8 +4872,8 @@ var useMinEmptyHeight = ({
   ref
 }) => {
   const appStore = useAppStoreApi();
-  const [prevHeight, setPrevHeight] = (0, import_react27.useState)(0);
-  const [isAnimating, setIsAnimating] = (0, import_react27.useState)(false);
+  const [prevHeight, setPrevHeight] = (0, import_react25.useState)(0);
+  const [isAnimating, setIsAnimating] = (0, import_react25.useState)(false);
   const { draggedItem, isZone } = useContextStore(ZoneStoreContext, (s) => {
     var _a, _b;
     return {
@@ -4913,7 +4881,7 @@ var useMinEmptyHeight = ({
       isZone: ((_b = s.draggedItem) == null ? void 0 : _b.data.zone) === zoneCompound
     };
   });
-  const numItems = (0, import_react27.useRef)(0);
+  const numItems = (0, import_react25.useRef)(0);
   const onDragFinished = useOnDragFinished(
     (finished) => {
       var _a;
@@ -4948,7 +4916,7 @@ var useMinEmptyHeight = ({
     },
     [appStore, prevHeight, zoneCompound]
   );
-  (0, import_react27.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (draggedItem && ref.current) {
       if (isZone) {
         const rect = ref.current.getBoundingClientRect();
@@ -4979,15 +4947,15 @@ function assignRefs(refs, node) {
 
 // components/DropZone/lib/use-content-with-preview.ts
 init_react_import();
-var import_react30 = require("react");
+var import_react28 = require("react");
 
 // lib/dnd/use-rendered-callback.ts
 init_react_import();
-var import_react28 = require("@dnd-kit/react");
-var import_react29 = require("react");
+var import_react26 = require("@dnd-kit/react");
+var import_react27 = require("react");
 function useRenderedCallback(callback, deps) {
-  const manager = (0, import_react28.useDragDropManager)();
-  return (0, import_react29.useCallback)(
+  const manager = (0, import_react26.useDragDropManager)();
+  return (0, import_react27.useCallback)(
     (...args) => __async(this, null, function* () {
       yield manager == null ? void 0 : manager.renderer.rendering;
       return callback(...args);
@@ -4998,14 +4966,14 @@ function useRenderedCallback(callback, deps) {
 
 // components/DropZone/lib/use-content-with-preview.ts
 var useContentIdsWithPreview = (contentIds, zoneCompound) => {
-  const zoneStore = (0, import_react30.useContext)(ZoneStoreContext);
+  const zoneStore = (0, import_react28.useContext)(ZoneStoreContext);
   const preview = useContextStore(
     ZoneStoreContext,
     (s) => s.previewIndex[zoneCompound]
   );
   const isDragging = useAppStore((s) => s.state.ui.isDragging);
-  const [contentIdsWithPreview, setContentIdsWithPreview] = (0, import_react30.useState)(contentIds);
-  const [localPreview, setLocalPreview] = (0, import_react30.useState)(
+  const [contentIdsWithPreview, setContentIdsWithPreview] = (0, import_react28.useState)(contentIds);
+  const [localPreview, setLocalPreview] = (0, import_react28.useState)(
     preview
   );
   const updateContent = useRenderedCallback(
@@ -5040,7 +5008,7 @@ var useContentIdsWithPreview = (contentIds, zoneCompound) => {
     },
     []
   );
-  (0, import_react30.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     var _a;
     const s = zoneStore.getState();
     const draggedItemId = (_a = s.draggedItem) == null ? void 0 : _a.id;
@@ -5058,16 +5026,16 @@ var useContentIdsWithPreview = (contentIds, zoneCompound) => {
 
 // components/DropZone/lib/use-drag-axis.ts
 init_react_import();
-var import_react31 = require("react");
+var import_react29 = require("react");
 var GRID_DRAG_AXIS = "dynamic";
 var FLEX_ROW_DRAG_AXIS = "x";
 var DEFAULT_DRAG_AXIS = "y";
 var useDragAxis = (ref, collisionAxis) => {
   const status = useAppStore((s) => s.status);
-  const [dragAxis, setDragAxis] = (0, import_react31.useState)(
+  const [dragAxis, setDragAxis] = (0, import_react29.useState)(
     collisionAxis || DEFAULT_DRAG_AXIS
   );
-  const calculateDragAxis = (0, import_react31.useCallback)(() => {
+  const calculateDragAxis = (0, import_react29.useCallback)(() => {
     if (ref.current) {
       const computedStyle = window.getComputedStyle(ref.current);
       if (computedStyle.display === "grid") {
@@ -5079,7 +5047,7 @@ var useDragAxis = (ref, collisionAxis) => {
       }
     }
   }, [ref.current]);
-  (0, import_react31.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     const onViewportChange = () => {
       calculateDragAxis();
     };
@@ -5088,7 +5056,7 @@ var useDragAxis = (ref, collisionAxis) => {
       window.removeEventListener("viewportchange", onViewportChange);
     };
   }, []);
-  (0, import_react31.useEffect)(calculateDragAxis, [status, collisionAxis]);
+  (0, import_react29.useEffect)(calculateDragAxis, [status, collisionAxis]);
   return [dragAxis, calculateDragAxis];
 };
 
@@ -5100,9 +5068,9 @@ init_react_import();
 
 // lib/use-slots.tsx
 init_react_import();
-var import_react32 = require("react");
+var import_react30 = require("react");
 function useSlots(config, item, renderSlotEdit, renderSlotRender = renderSlotEdit, readOnly, forceReadOnly) {
-  const slotProps = (0, import_react32.useMemo)(() => {
+  const slotProps = (0, import_react30.useMemo)(() => {
     const mapped = mapSlots(
       item,
       (content, _parentId, propName, field, propPath) => {
@@ -5122,7 +5090,7 @@ function useSlots(config, item, renderSlotEdit, renderSlotRender = renderSlotEdi
     ).props;
     return mapped;
   }, [config, item, readOnly, forceReadOnly]);
-  const mergedProps = (0, import_react32.useMemo)(
+  const mergedProps = (0, import_react30.useMemo)(
     () => __spreadValues(__spreadValues({}, item.props), slotProps),
     [item.props, slotProps]
   );
@@ -5130,7 +5098,7 @@ function useSlots(config, item, renderSlotEdit, renderSlotRender = renderSlotEdi
 }
 
 // components/Render/index.tsx
-var import_react34 = __toESM(require("react"));
+var import_react32 = __toESM(require("react"));
 
 // components/SlotRender/index.tsx
 init_react_import();
@@ -5138,7 +5106,7 @@ var import_shallow3 = require("zustand/react/shallow");
 
 // components/SlotRender/server.tsx
 init_react_import();
-var import_react33 = require("react");
+var import_react31 = require("react");
 
 // components/ServerRender/index.tsx
 init_react_import();
@@ -5207,7 +5175,7 @@ var Item = ({
     })
   );
 };
-var SlotRender = (0, import_react33.forwardRef)(
+var SlotRender = (0, import_react31.forwardRef)(
   function SlotRenderInternal({ className, style, content, config, metadata }, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className, style, ref, children: content.map((item) => {
       if (!config.components[item.type]) {
@@ -5255,7 +5223,7 @@ var ContextSlotRender = ({
 
 // components/Render/index.tsx
 var import_jsx_runtime24 = require("react/jsx-runtime");
-var renderContext = import_react34.default.createContext({
+var renderContext = import_react32.default.createContext({
   config: { components: {} },
   data: { root: {}, content: [] },
   metadata: {}
@@ -5288,7 +5256,7 @@ function Render({
     { type: "root", props: pageProps },
     (props) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SlotRender, __spreadProps(__spreadValues({}, props), { config, metadata }))
   );
-  const nextContextValue = (0, import_react34.useMemo)(
+  const nextContextValue = (0, import_react32.useMemo)(
     () => ({
       mode: "render",
       depth: 0
@@ -5317,9 +5285,9 @@ var DropZoneChild = ({
 }) => {
   var _a, _b;
   const metadata = useAppStore((s) => s.metadata);
-  const ctx = (0, import_react35.useContext)(dropZoneContext);
+  const ctx = (0, import_react33.useContext)(dropZoneContext);
   const { depth = 1 } = ctx != null ? ctx : {};
-  const zoneStore = (0, import_react35.useContext)(ZoneStoreContext);
+  const zoneStore = (0, import_react33.useContext)(ZoneStoreContext);
   const nodeProps = useAppStore(
     (0, import_shallow4.useShallow)((s) => {
       var _a2;
@@ -5339,7 +5307,7 @@ var DropZoneChild = ({
     })
   );
   const appStore = useAppStoreApi();
-  const item = (0, import_react35.useMemo)(() => {
+  const item = (0, import_react33.useMemo)(() => {
     if (nodeProps) {
       const expanded = expandNode({
         type: nodeType,
@@ -5361,7 +5329,7 @@ var DropZoneChild = ({
   const componentConfig = useAppStore(
     (s) => (item == null ? void 0 : item.type) ? s.config.components[item.type] : null
   );
-  const puckProps = (0, import_react35.useMemo)(
+  const puckProps = (0, import_react33.useMemo)(
     () => ({
       renderDropZone: DropZoneEditPure,
       isEditing: true,
@@ -5384,7 +5352,7 @@ var DropZoneChild = ({
     }
   );
   let label = (_b = (_a = componentConfig == null ? void 0 : componentConfig.label) != null ? _a : item == null ? void 0 : item.type.toString()) != null ? _b : "Component";
-  const renderPreview = (0, import_react35.useMemo)(
+  const renderPreview = (0, import_react33.useMemo)(
     () => function Preview3() {
       if (item && "element" in item && item.element) {
         return (
@@ -5396,7 +5364,7 @@ var DropZoneChild = ({
     },
     [componentId, label, overrides]
   );
-  const defaultsProps = (0, import_react35.useMemo)(
+  const defaultsProps = (0, import_react33.useMemo)(
     () => __spreadProps(__spreadValues(__spreadValues({}, componentConfig == null ? void 0 : componentConfig.defaultProps), item == null ? void 0 : item.props), {
       puck: puckProps,
       editMode: true
@@ -5404,7 +5372,7 @@ var DropZoneChild = ({
     }),
     [componentConfig == null ? void 0 : componentConfig.defaultProps, item == null ? void 0 : item.props, puckProps]
   );
-  const defaultedNode = (0, import_react35.useMemo)(
+  const defaultedNode = (0, import_react33.useMemo)(
     () => {
       var _a2;
       return { type: (_a2 = item == null ? void 0 : item.type) != null ? _a2 : nodeType, props: defaultsProps };
@@ -5455,8 +5423,8 @@ var DropZoneChild = ({
     }
   );
 };
-var DropZoneChildMemo = (0, import_react35.memo)(DropZoneChild);
-var DropZoneEdit = (0, import_react35.forwardRef)(
+var DropZoneChildMemo = (0, import_react33.memo)(DropZoneChild);
+var DropZoneEdit = (0, import_react33.forwardRef)(
   function DropZoneEditInternal({
     zone,
     allow,
@@ -5466,7 +5434,7 @@ var DropZoneEdit = (0, import_react35.forwardRef)(
     minEmptyHeight: userMinEmptyHeight = 128,
     collisionAxis
   }, userRef) {
-    const ctx = (0, import_react35.useContext)(dropZoneContext);
+    const ctx = (0, import_react33.useContext)(dropZoneContext);
     const appStoreApi = useAppStoreApi();
     const {
       // These all need setting via context
@@ -5504,14 +5472,14 @@ var DropZoneEdit = (0, import_react35.forwardRef)(
         return (_a = s.state.indexes.zones[zoneCompound]) == null ? void 0 : _a.type;
       })
     );
-    (0, import_react35.useEffect)(() => {
+    (0, import_react33.useEffect)(() => {
       if (!zoneType || zoneType === "dropzone") {
         if (ctx == null ? void 0 : ctx.registerZone) {
           ctx == null ? void 0 : ctx.registerZone(zoneCompound);
         }
       }
     }, [zoneType, appStoreApi]);
-    (0, import_react35.useEffect)(() => {
+    (0, import_react33.useEffect)(() => {
       if (zoneType === "dropzone") {
         if (zoneCompound !== rootDroppableId) {
           console.warn(
@@ -5520,11 +5488,11 @@ var DropZoneEdit = (0, import_react35.forwardRef)(
         }
       }
     }, [zoneType]);
-    const contentIds = (0, import_react35.useMemo)(() => {
+    const contentIds = (0, import_react33.useMemo)(() => {
       return zoneContentIds || [];
     }, [zoneContentIds]);
-    const ref = (0, import_react35.useRef)(null);
-    const acceptsTarget = (0, import_react35.useCallback)(
+    const ref = (0, import_react33.useRef)(null);
+    const acceptsTarget = (0, import_react33.useCallback)(
       (componentType) => {
         if (!componentType) {
           return true;
@@ -5562,7 +5530,7 @@ var DropZoneEdit = (0, import_react35.forwardRef)(
       }
       return _isEnabled;
     });
-    (0, import_react35.useEffect)(() => {
+    (0, import_react33.useEffect)(() => {
       if (registerLocalZone) {
         registerLocalZone(zoneCompound, targetAccepted || isEnabled);
       }
@@ -5577,8 +5545,8 @@ var DropZoneEdit = (0, import_react35.forwardRef)(
       zoneCompound
     );
     const isDropEnabled = isEnabled && (preview ? contentIdsWithPreview.length === 1 : contentIdsWithPreview.length === 0);
-    const zoneStore = (0, import_react35.useContext)(ZoneStoreContext);
-    (0, import_react35.useEffect)(() => {
+    const zoneStore = (0, import_react33.useContext)(ZoneStoreContext);
+    (0, import_react33.useEffect)(() => {
       const { enabledIndex } = zoneStore.getState();
       zoneStore.setState({
         enabledIndex: __spreadProps(__spreadValues({}, enabledIndex), { [zoneCompound]: isEnabled })
@@ -5597,7 +5565,7 @@ var DropZoneEdit = (0, import_react35.forwardRef)(
         path: path || []
       }
     };
-    const { ref: dropRef } = (0, import_react36.useDroppable)(droppableConfig);
+    const { ref: dropRef } = (0, import_react34.useDroppable)(droppableConfig);
     const isAreaSelected = useAppStore(
       (s) => (s == null ? void 0 : s.selectedItem) && areaId === (s == null ? void 0 : s.selectedItem.props.id)
     );
@@ -5652,7 +5620,7 @@ var DropZoneRenderItem = ({
 }) => {
   const Component = config.components[item.type];
   const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
-  const nextContextValue = (0, import_react35.useMemo)(
+  const nextContextValue = (0, import_react33.useMemo)(
     () => ({
       areaId: props.id,
       depth: 1
@@ -5670,14 +5638,14 @@ var DropZoneRenderItem = ({
   ) }, props.id);
 };
 var DropZoneRenderPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DropZoneRender2, __spreadValues({}, props));
-var DropZoneRender2 = (0, import_react35.forwardRef)(
+var DropZoneRender2 = (0, import_react33.forwardRef)(
   function DropZoneRenderInternal({ className, style, zone }, ref) {
-    const ctx = (0, import_react35.useContext)(dropZoneContext);
+    const ctx = (0, import_react33.useContext)(dropZoneContext);
     const { areaId = "root" } = ctx || {};
-    const { config, data, metadata } = (0, import_react35.useContext)(renderContext);
+    const { config, data, metadata } = (0, import_react33.useContext)(renderContext);
     let zoneCompound = `${areaId}:${zone}`;
     let content = (data == null ? void 0 : data.content) || [];
-    (0, import_react35.useEffect)(() => {
+    (0, import_react33.useEffect)(() => {
       if (!content) {
         if (ctx == null ? void 0 : ctx.registerZone) {
           ctx == null ? void 0 : ctx.registerZone(zoneCompound);
@@ -5708,9 +5676,9 @@ var DropZoneRender2 = (0, import_react35.forwardRef)(
   }
 );
 var DropZonePure = (props) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DropZone, __spreadValues({}, props));
-var DropZone = (0, import_react35.forwardRef)(
+var DropZone = (0, import_react33.forwardRef)(
   function DropZone2(props, ref) {
-    const ctx = (0, import_react35.useContext)(dropZoneContext);
+    const ctx = (0, import_react33.useContext)(dropZoneContext);
     if ((ctx == null ? void 0 : ctx.mode) === "edit") {
       return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DropZoneEdit, __spreadProps(__spreadValues({}, props), { ref })) });
     }
@@ -6052,12 +6020,12 @@ function getDeepDir(el) {
 var import_state = require("@dnd-kit/state");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var DEBUG3 = false;
-var dragListenerContext = (0, import_react38.createContext)({
+var dragListenerContext = (0, import_react36.createContext)({
   dragListeners: {}
 });
 function useDragListener(type, fn, deps = []) {
-  const { setDragListeners } = (0, import_react38.useContext)(dragListenerContext);
-  (0, import_react38.useEffect)(() => {
+  const { setDragListeners } = (0, import_react36.useContext)(dragListenerContext);
+  (0, import_react36.useEffect)(() => {
     if (setDragListeners) {
       setDragListeners((old) => __spreadProps(__spreadValues({}, old), {
         [type]: [...old[type] || [], fn]
@@ -6067,8 +6035,8 @@ function useDragListener(type, fn, deps = []) {
 }
 var AREA_CHANGE_DEBOUNCE_MS = 100;
 var useTempDisableFallback = (timeout3) => {
-  const lastFallbackDisable = (0, import_react38.useRef)(null);
-  return (0, import_react38.useCallback)((manager) => {
+  const lastFallbackDisable = (0, import_react36.useRef)(null);
+  return (0, import_react36.useCallback)((manager) => {
     collisionStore.setState({ fallbackEnabled: false });
     const fallbackId = generateId();
     lastFallbackDisable.current = fallbackId;
@@ -6087,9 +6055,9 @@ var DragDropContextClient = ({
   const dispatch = useAppStore((s) => s.dispatch);
   const appStore = useAppStoreApi();
   const id = useSafeId();
-  const debouncedParamsRef = (0, import_react38.useRef)(null);
+  const debouncedParamsRef = (0, import_react36.useRef)(null);
   const tempDisableFallback = useTempDisableFallback(100);
-  const [zoneStore] = (0, import_react38.useState)(
+  const [zoneStore] = (0, import_react36.useState)(
     () => (0, import_zustand5.createStore)(() => ({
       zoneDepthIndex: {},
       nextZoneDepthIndex: {},
@@ -6101,7 +6069,7 @@ var DragDropContextClient = ({
       hoveringComponent: null
     }))
   );
-  const getChanged2 = (0, import_react38.useCallback)(
+  const getChanged2 = (0, import_react36.useCallback)(
     (params, id2) => {
       const { zoneDepthIndex = {}, areaDepthIndex = {} } = zoneStore.getState() || {};
       const stateHasZone = Object.keys(zoneDepthIndex).length > 0;
@@ -6122,7 +6090,7 @@ var DragDropContextClient = ({
     },
     [zoneStore]
   );
-  const setDeepestAndCollide = (0, import_react38.useCallback)(
+  const setDeepestAndCollide = (0, import_react36.useCallback)(
     (params, manager) => {
       const { zoneChanged, areaChanged } = getChanged2(params, id);
       if (!zoneChanged && !areaChanged) return;
@@ -6146,7 +6114,7 @@ var DragDropContextClient = ({
     setDeepestDb.cancel();
     debouncedParamsRef.current = null;
   };
-  (0, import_react38.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (DEBUG3) {
       zoneStore.subscribe(
         (s) => {
@@ -6160,7 +6128,7 @@ var DragDropContextClient = ({
       );
     }
   }, []);
-  const [plugins] = (0, import_react38.useState)(() => [
+  const [plugins] = (0, import_react36.useState)(() => [
     ...disableAutoScroll ? import_dom.defaultPreset.plugins.filter((plugin) => plugin !== import_dom.AutoScroller) : import_dom.defaultPreset.plugins,
     createNestedDroppablePlugin(
       {
@@ -6208,10 +6176,10 @@ var DragDropContextClient = ({
     )
   ]);
   const sensors = useSensors();
-  const [dragListeners, setDragListeners] = (0, import_react38.useState)({});
-  const dragMode = (0, import_react38.useRef)(null);
-  const initialSelector = (0, import_react38.useRef)(void 0);
-  const nextContextValue = (0, import_react38.useMemo)(
+  const [dragListeners, setDragListeners] = (0, import_react36.useState)({});
+  const dragMode = (0, import_react36.useRef)(null);
+  const initialSelector = (0, import_react36.useRef)(void 0);
+  const nextContextValue = (0, import_react36.useMemo)(
     () => ({
       mode: "edit",
       areaId: "root",
@@ -6227,7 +6195,7 @@ var DragDropContextClient = ({
         setDragListeners
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-        import_react37.DragDropProvider,
+        import_react35.DragDropProvider,
         {
           plugins,
           sensors,
@@ -6460,7 +6428,7 @@ var DragDropContext = ({
 };
 
 // components/Drawer/index.tsx
-var import_react40 = require("@dnd-kit/react");
+var import_react38 = require("@dnd-kit/react");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var getClassName18 = get_class_name_factory_default("Drawer", styles_module_default10);
 var getClassNameItem2 = get_class_name_factory_default("DrawerItem", styles_module_default10);
@@ -6471,7 +6439,7 @@ var DrawerItemInner = ({
   dragRef,
   isDragDisabled
 }) => {
-  const CustomInner = (0, import_react39.useMemo)(
+  const CustomInner = (0, import_react37.useMemo)(
     () => children || (({ children: children2 }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: getClassNameItem2("default"), children: children2 })),
     [children]
   );
@@ -6497,7 +6465,7 @@ var DrawerItemDraggable = ({
   id,
   isDragDisabled
 }) => {
-  const { ref } = (0, import_react40.useDraggable)({
+  const { ref } = (0, import_react38.useDraggable)({
     id,
     data: { componentType: name },
     disabled: isDragDisabled,
@@ -6526,7 +6494,7 @@ var DrawerItem = ({
   isDragDisabled
 }) => {
   const resolvedId = id || name;
-  const [dynamicId, setDynamicId] = (0, import_react39.useState)(generateId(resolvedId));
+  const [dynamicId, setDynamicId] = (0, import_react37.useState)(generateId(resolvedId));
   if (typeof index !== "undefined") {
     console.error(
       "Warning: The `index` prop on Drawer.Item is deprecated and no longer required."
@@ -6566,7 +6534,7 @@ var Drawer = ({
     );
   }
   const id = useSafeId();
-  const { ref } = (0, import_react40.useDroppable)({
+  const { ref } = (0, import_react38.useDroppable)({
     id,
     type: "void",
     collisionPriority: 0
@@ -6588,7 +6556,7 @@ Drawer.Item = DrawerItem;
 
 // components/Puck/index.tsx
 init_react_import();
-var import_react56 = require("react");
+var import_react54 = require("react");
 
 // components/SidebarSection/index.tsx
 init_react_import();
@@ -6599,7 +6567,7 @@ var styles_module_default13 = { "SidebarSection": "_SidebarSection_8boj8_1", "Si
 
 // lib/use-breadcrumbs.ts
 init_react_import();
-var import_react41 = require("react");
+var import_react39 = require("react");
 var useBreadcrumbs = (renderCount) => {
   const selectedId = useAppStore((s) => {
     var _a;
@@ -6611,7 +6579,7 @@ var useBreadcrumbs = (renderCount) => {
     return (_a = s.state.indexes.nodes[selectedId]) == null ? void 0 : _a.path;
   });
   const appStore = useAppStoreApi();
-  return (0, import_react41.useMemo)(() => {
+  return (0, import_react39.useMemo)(() => {
     const breadcrumbs = (path == null ? void 0 : path.map((zoneCompound) => {
       var _a, _b, _c;
       const [componentId] = zoneCompound.split(":");
@@ -6695,7 +6663,7 @@ init_react_import();
 var styles_module_default15 = { "PuckFields": "_PuckFields_10bh7_1", "PuckFields--isLoading": "_PuckFields--isLoading_10bh7_6", "PuckFields-loadingOverlay": "_PuckFields-loadingOverlay_10bh7_10", "PuckFields-loadingOverlayInner": "_PuckFields-loadingOverlayInner_10bh7_25", "PuckFields-field": "_PuckFields-field_10bh7_32", "PuckFields--wrapFields": "_PuckFields--wrapFields_10bh7_36" };
 
 // components/Puck/components/Fields/index.tsx
-var import_react42 = require("react");
+var import_react40 = require("react");
 var import_shallow5 = require("zustand/react/shallow");
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var getClassName20 = get_class_name_factory_default("PuckFields", styles_module_default15);
@@ -6768,7 +6736,7 @@ var FieldsChild = ({ fieldName }) => {
     })
   );
   const appStore = useAppStoreApi();
-  const onChange = (0, import_react42.useCallback)(createOnChange(fieldName, appStore), [
+  const onChange = (0, import_react40.useCallback)(createOnChange(fieldName, appStore), [
     fieldName
   ]);
   const { visible = true } = field != null ? field : {};
@@ -6786,7 +6754,7 @@ var FieldsChild = ({ fieldName }) => {
     }
   ) }, id);
 };
-var FieldsChildMemo = (0, import_react42.memo)(FieldsChild);
+var FieldsChildMemo = (0, import_react40.memo)(FieldsChild);
 var FieldsInternal = ({ wrapFields = true }) => {
   const overrides = useAppStore((s) => s.overrides);
   const componentResolving = useAppStore((s) => {
@@ -6811,7 +6779,7 @@ var FieldsInternal = ({ wrapFields = true }) => {
     })
   );
   const isLoading = fieldsLoading || componentResolving;
-  const Wrapper = (0, import_react42.useMemo)(() => overrides.fields || DefaultFields, [overrides]);
+  const Wrapper = (0, import_react40.useMemo)(() => overrides.fields || DefaultFields, [overrides]);
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "form",
     {
@@ -6826,14 +6794,14 @@ var FieldsInternal = ({ wrapFields = true }) => {
     }
   );
 };
-var Fields = (0, import_react42.memo)(FieldsInternal);
+var Fields = (0, import_react40.memo)(FieldsInternal);
 
 // components/Puck/components/Components/index.tsx
 init_react_import();
 
 // lib/use-component-list.tsx
 init_react_import();
-var import_react43 = require("react");
+var import_react41 = require("react");
 
 // components/ComponentList/index.tsx
 init_react_import();
@@ -6904,10 +6872,10 @@ ComponentList.Item = ComponentListItem;
 // lib/use-component-list.tsx
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var useComponentList = () => {
-  const [componentList, setComponentList] = (0, import_react43.useState)();
+  const [componentList, setComponentList] = (0, import_react41.useState)();
   const config = useAppStore((s) => s.config);
   const uiComponentList = useAppStore((s) => s.state.ui.componentList);
-  (0, import_react43.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     var _a, _b, _c;
     if (Object.keys(uiComponentList).length > 0) {
       const matchedComponents = [];
@@ -6976,22 +6944,22 @@ var useComponentList = () => {
 };
 
 // components/Puck/components/Components/index.tsx
-var import_react44 = require("react");
+var import_react42 = require("react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var Components = () => {
   const overrides = useAppStore((s) => s.overrides);
   const componentList = useComponentList();
-  const Wrapper = (0, import_react44.useMemo)(() => overrides.components || "div", [overrides]);
+  const Wrapper = (0, import_react42.useMemo)(() => overrides.components || "div", [overrides]);
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ComponentList, { id: "all" }) });
 };
 
 // components/Puck/components/Preview/index.tsx
 init_react_import();
-var import_react46 = require("react");
+var import_react44 = require("react");
 
 // components/AutoFrame/index.tsx
 init_react_import();
-var import_react45 = require("react");
+var import_react43 = require("react");
 var import_object_hash = __toESM(require("object-hash"));
 var import_react_dom3 = require("react-dom");
 var import_jsx_runtime33 = require("react/jsx-runtime");
@@ -7044,7 +7012,7 @@ var CopyHostStyles = ({
   onStylesLoaded = () => null
 }) => {
   const { document: doc, window: win } = useFrame();
-  (0, import_react45.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     if (!win || !doc) {
       return () => {
       };
@@ -7203,8 +7171,8 @@ var CopyHostStyles = ({
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children });
 };
-var autoFrameContext = (0, import_react45.createContext)({});
-var useFrame = () => (0, import_react45.useContext)(autoFrameContext);
+var autoFrameContext = (0, import_react43.createContext)({});
+var useFrame = () => (0, import_react43.useContext)(autoFrameContext);
 function AutoFrame(_a) {
   var _b = _a, {
     children,
@@ -7225,11 +7193,11 @@ function AutoFrame(_a) {
     "onNotReady",
     "frameRef"
   ]);
-  const [loaded, setLoaded] = (0, import_react45.useState)(false);
-  const [ctx, setCtx] = (0, import_react45.useState)({});
-  const [mountTarget, setMountTarget] = (0, import_react45.useState)();
-  const [stylesLoaded, setStylesLoaded] = (0, import_react45.useState)(false);
-  (0, import_react45.useEffect)(() => {
+  const [loaded, setLoaded] = (0, import_react43.useState)(false);
+  const [ctx, setCtx] = (0, import_react43.useState)({});
+  const [mountTarget, setMountTarget] = (0, import_react43.useState)();
+  const [stylesLoaded, setStylesLoaded] = (0, import_react43.useState)(false);
+  (0, import_react43.useEffect)(() => {
     var _a2;
     if (frameRef.current) {
       const doc = frameRef.current.contentDocument;
@@ -7281,7 +7249,7 @@ var import_jsx_runtime34 = require("react/jsx-runtime");
 var getClassName22 = get_class_name_factory_default("PuckPreview", styles_module_default17);
 var useBubbleIframeEvents = (ref) => {
   const status = useAppStore((s) => s.status);
-  (0, import_react46.useEffect)(() => {
+  (0, import_react44.useEffect)(() => {
     if (ref.current && status === "READY") {
       const iframe = ref.current;
       const handlePointerMove = (event) => {
@@ -7330,7 +7298,7 @@ var Preview2 = ({ id = "puck-preview" }) => {
   const renderData = useAppStore(
     (s) => s.state.ui.previewMode === "edit" ? null : s.state.data
   );
-  const Page = (0, import_react46.useCallback)(
+  const Page = (0, import_react44.useCallback)(
     (pageProps) => {
       var _a, _b;
       const propsWithSlots = useSlots(
@@ -7344,9 +7312,9 @@ var Preview2 = ({ id = "puck-preview" }) => {
     },
     [config]
   );
-  const Frame = (0, import_react46.useMemo)(() => overrides.iframe, [overrides]);
+  const Frame = (0, import_react44.useMemo)(() => overrides.iframe, [overrides]);
   const rootProps = root.props || root;
-  const ref = (0, import_react46.useRef)(null);
+  const ref = (0, import_react44.useRef)(null);
   useBubbleIframeEvents(ref);
   const inner = !renderData ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     Page,
@@ -7361,7 +7329,7 @@ var Preview2 = ({ id = "puck-preview" }) => {
       children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DropZonePure, { zone: rootDroppableId })
     })
   ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Render, { data: renderData, config, metadata });
-  (0, import_react46.useEffect)(() => {
+  (0, import_react44.useEffect)(() => {
     if (!iframe.enabled) {
       setStatus("READY");
     }
@@ -7431,7 +7399,7 @@ var scrollIntoView = (el) => {
 };
 
 // components/LayerTree/index.tsx
-var import_react47 = require("react");
+var import_react45 = require("react");
 
 // lib/on-scroll-end.ts
 init_react_import();
@@ -7466,7 +7434,7 @@ var Layer = ({
   const config = useAppStore((s) => s.config);
   const itemSelector = useAppStore((s) => s.state.ui.itemSelector);
   const dispatch = useAppStore((s) => s.dispatch);
-  const setItemSelector = (0, import_react47.useCallback)(
+  const setItemSelector = (0, import_react45.useCallback)(
     (itemSelector2) => {
       dispatch({ type: "setUi", ui: { itemSelector: itemSelector2 } });
     },
@@ -7486,7 +7454,7 @@ var Layer = ({
     )
   );
   const containsZone = zonesForItem.length > 0;
-  const zoneStore = (0, import_react47.useContext)(ZoneStoreContext);
+  const zoneStore = (0, import_react45.useContext)(ZoneStoreContext);
   const isHovering = useContextStore(
     ZoneStoreContext,
     (s) => s.hoveringComponent === itemId
@@ -7613,7 +7581,7 @@ var LayerTree = ({
 };
 
 // components/Puck/components/Outline/index.tsx
-var import_react48 = require("react");
+var import_react46 = require("react");
 
 // lib/data/find-zones-for-area.ts
 init_react_import();
@@ -7631,7 +7599,7 @@ var Outline = () => {
   const rootZones = useAppStore(
     (0, import_shallow7.useShallow)((s) => findZonesForArea(s.state, "root"))
   );
-  const Wrapper = (0, import_react48.useMemo)(() => outlineOverride || "div", [outlineOverride]);
+  const Wrapper = (0, import_react46.useMemo)(() => outlineOverride || "div", [outlineOverride]);
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Wrapper, { children: rootZones.map((zoneCompound) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     LayerTree,
     {
@@ -7765,11 +7733,11 @@ var getBox = function getBox2(el) {
 };
 
 // components/Puck/components/Canvas/index.tsx
-var import_react50 = require("react");
+var import_react48 = require("react");
 
 // components/ViewportControls/index.tsx
 init_react_import();
-var import_react49 = require("react");
+var import_react47 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css#css-module
 init_react_import();
@@ -7792,8 +7760,8 @@ var ViewportButton = ({
   onClick
 }) => {
   const viewports = useAppStore((s) => s.state.ui.viewports);
-  const [isActive, setIsActive] = (0, import_react49.useState)(false);
-  (0, import_react49.useEffect)(() => {
+  const [isActive, setIsActive] = (0, import_react47.useState)(false);
+  (0, import_react47.useEffect)(() => {
     setIsActive(width === viewports.current.width);
   }, [width, viewports.current.width]);
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
@@ -7830,7 +7798,7 @@ var ViewportControls = ({
   const defaultsContainAutoZoom = defaultZoomOptions.find(
     (option) => option.value === autoZoom
   );
-  const zoomOptions = (0, import_react49.useMemo)(
+  const zoomOptions = (0, import_react47.useMemo)(
     () => [
       ...defaultZoomOptions,
       ...defaultsContainAutoZoom ? [] : [
@@ -7979,17 +7947,17 @@ var Canvas = () => {
       viewports: s.state.ui.viewports
     }))
   );
-  const frameRef = (0, import_react50.useRef)(null);
-  const [showTransition, setShowTransition] = (0, import_react50.useState)(false);
-  const defaultRender = (0, import_react50.useMemo)(() => {
+  const frameRef = (0, import_react48.useRef)(null);
+  const [showTransition, setShowTransition] = (0, import_react48.useState)(false);
+  const defaultRender = (0, import_react48.useMemo)(() => {
     const PuckDefault = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_jsx_runtime38.Fragment, { children });
     return PuckDefault;
   }, []);
-  const CustomPreview = (0, import_react50.useMemo)(
+  const CustomPreview = (0, import_react48.useMemo)(
     () => overrides.preview || defaultRender,
     [overrides]
   );
-  const getFrameDimensions = (0, import_react50.useCallback)(() => {
+  const getFrameDimensions = (0, import_react48.useCallback)(() => {
     if (frameRef.current) {
       const frame = frameRef.current;
       const box = getBox(frame);
@@ -7997,7 +7965,7 @@ var Canvas = () => {
     }
     return { width: 0, height: 0 };
   }, [frameRef]);
-  const resetAutoZoom = (0, import_react50.useCallback)(
+  const resetAutoZoom = (0, import_react48.useCallback)(
     (newViewports = viewports) => {
       if (frameRef.current) {
         setZoomConfig(
@@ -8011,11 +7979,11 @@ var Canvas = () => {
     },
     [frameRef, zoomConfig, viewports]
   );
-  (0, import_react50.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     setShowTransition(false);
     resetAutoZoom(viewports);
   }, [frameRef, leftSideBarVisible, rightSideBarVisible]);
-  (0, import_react50.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     const { height: frameHeight } = getFrameDimensions();
     if (viewports.current.height === "auto") {
       setZoomConfig(__spreadProps(__spreadValues({}, zoomConfig), {
@@ -8023,13 +7991,13 @@ var Canvas = () => {
       }));
     }
   }, [zoomConfig.zoom]);
-  (0, import_react50.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     if (ZOOM_ON_CHANGE) {
       setShowTransition(true);
       resetAutoZoom(viewports);
     }
   }, [viewports.current.width]);
-  (0, import_react50.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     const cb = () => {
       setShowTransition(false);
       resetAutoZoom();
@@ -8039,8 +8007,8 @@ var Canvas = () => {
       window.removeEventListener("resize", cb);
     };
   }, []);
-  const [showLoader, setShowLoader] = (0, import_react50.useState)(false);
-  (0, import_react50.useEffect)(() => {
+  const [showLoader, setShowLoader] = (0, import_react48.useState)(false);
+  (0, import_react48.useEffect)(() => {
     setTimeout(() => {
       setShowLoader(true);
     }, 500);
@@ -8118,7 +8086,7 @@ var Canvas = () => {
 
 // lib/use-loaded-overrides.ts
 init_react_import();
-var import_react51 = require("react");
+var import_react49 = require("react");
 
 // lib/load-overrides.ts
 init_react_import();
@@ -8157,7 +8125,7 @@ var useLoadedOverrides = ({
   overrides,
   plugins
 }) => {
-  return (0, import_react51.useMemo)(() => {
+  return (0, import_react49.useMemo)(() => {
     return loadOverrides({ overrides, plugins });
   }, [plugins, overrides]);
 };
@@ -8169,14 +8137,14 @@ var DefaultOverride = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime39
 
 // lib/use-inject-css.ts
 init_react_import();
-var import_react52 = require("react");
+var import_react50 = require("react");
 var styles = ``;
 var useInjectStyleSheet = (initialStyles, iframeEnabled) => {
-  const [el, setEl] = (0, import_react52.useState)();
-  (0, import_react52.useEffect)(() => {
+  const [el, setEl] = (0, import_react50.useState)();
+  (0, import_react50.useEffect)(() => {
     setEl(document.createElement("style"));
   }, []);
-  (0, import_react52.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     var _a;
     if (!el || typeof window === "undefined") {
       return;
@@ -8196,10 +8164,10 @@ var useInjectGlobalCss = (iframeEnabled) => {
 
 // lib/use-preview-mode-hotkeys.ts
 init_react_import();
-var import_react53 = require("react");
+var import_react51 = require("react");
 var usePreviewModeHotkeys = () => {
   const appStore = useAppStoreApi();
-  const toggleInteractive = (0, import_react53.useCallback)(() => {
+  const toggleInteractive = (0, import_react51.useCallback)(() => {
     const dispatch = appStore.getState().dispatch;
     dispatch({
       type: "setUi",
@@ -8214,7 +8182,7 @@ var usePreviewModeHotkeys = () => {
 
 // lib/use-puck.ts
 init_react_import();
-var import_react54 = require("react");
+var import_react52 = require("react");
 var import_zustand6 = require("zustand");
 var generateUsePuck = (store) => {
   const history = {
@@ -8247,7 +8215,7 @@ var generateUsePuck = (store) => {
   };
   return storeData;
 };
-var UsePuckStoreContext = (0, import_react54.createContext)(
+var UsePuckStoreContext = (0, import_react52.createContext)(
   null
 );
 var convertToPickedStore = (store) => {
@@ -8261,12 +8229,12 @@ var convertToPickedStore = (store) => {
   };
 };
 var useRegisterUsePuckStore = (appStore) => {
-  const [usePuckStore] = (0, import_react54.useState)(
+  const [usePuckStore] = (0, import_react52.useState)(
     () => (0, import_zustand6.createStore)(
       () => generateUsePuck(convertToPickedStore(appStore.getState()))
     )
   );
-  (0, import_react54.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     return appStore.subscribe(
       (store) => convertToPickedStore(store),
       (pickedStore) => {
@@ -8278,7 +8246,7 @@ var useRegisterUsePuckStore = (appStore) => {
 };
 function createUsePuck() {
   return function usePuck2(selector) {
-    const usePuckApi = (0, import_react54.useContext)(UsePuckStoreContext);
+    const usePuckApi = (0, import_react52.useContext)(UsePuckStoreContext);
     if (!usePuckApi) {
       throw new Error("usePuck must be used inside <Puck>.");
     }
@@ -8290,7 +8258,7 @@ function createUsePuck() {
   };
 }
 function usePuck() {
-  (0, import_react54.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     console.warn(
       "You're using the `usePuck` method without a selector, which may cause unnecessary re-renders. Replace with `createUsePuck` and provide a selector for improved performance."
     );
@@ -8298,7 +8266,7 @@ function usePuck() {
   return createUsePuck()((s) => s);
 }
 function useGetPuck() {
-  const usePuckApi = (0, import_react54.useContext)(UsePuckStoreContext);
+  const usePuckApi = (0, import_react52.useContext)(UsePuckStoreContext);
   if (!usePuckApi) {
     throw new Error("usePuckGet must be used inside <Puck>.");
   }
@@ -8310,7 +8278,7 @@ var import_fast_deep_equal3 = __toESM(require("fast-deep-equal"));
 
 // components/Puck/components/Header/index.tsx
 init_react_import();
-var import_react55 = require("react");
+var import_react53 = require("react");
 
 // components/MenuBar/index.tsx
 init_react_import();
@@ -8392,7 +8360,7 @@ var HeaderInner = () => {
   } = usePropsContext();
   const dispatch = useAppStore((s) => s.dispatch);
   const appStore = useAppStoreApi();
-  const defaultHeaderRender = (0, import_react55.useMemo)(() => {
+  const defaultHeaderRender = (0, import_react53.useMemo)(() => {
     if (renderHeader) {
       console.warn(
         "`renderHeader` is deprecated. Please use `overrides.header` and the `usePuck` hook instead"
@@ -8407,7 +8375,7 @@ var HeaderInner = () => {
     }
     return DefaultOverride;
   }, [renderHeader]);
-  const defaultHeaderActionsRender = (0, import_react55.useMemo)(() => {
+  const defaultHeaderActionsRender = (0, import_react53.useMemo)(() => {
     if (renderHeaderActions) {
       console.warn(
         "`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `usePuck` hook instead."
@@ -8427,7 +8395,7 @@ var HeaderInner = () => {
   const CustomHeaderActions = useAppStore(
     (s) => s.overrides.headerActions || defaultHeaderActionsRender
   );
-  const [menuOpen, setMenuOpen] = (0, import_react55.useState)(false);
+  const [menuOpen, setMenuOpen] = (0, import_react53.useState)(false);
   const rootTitle = useAppStore((s) => {
     var _a, _b;
     const rootData = (_a = s.state.indexes.nodes["root"]) == null ? void 0 : _a.data;
@@ -8437,7 +8405,7 @@ var HeaderInner = () => {
   const rightSideBarVisible = useAppStore(
     (s) => s.state.ui.rightSideBarVisible
   );
-  const toggleSidebars = (0, import_react55.useCallback)(
+  const toggleSidebars = (0, import_react53.useCallback)(
     (sidebar) => {
       const widerViewport = window.matchMedia("(min-width: 638px)").matches;
       const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
@@ -8540,7 +8508,7 @@ var HeaderInner = () => {
     }
   );
 };
-var Header = (0, import_react55.memo)(HeaderInner);
+var Header = (0, import_react53.memo)(HeaderInner);
 
 // components/Puck/index.tsx
 var import_jsx_runtime42 = require("react/jsx-runtime");
@@ -8555,11 +8523,11 @@ var FieldSideBar = () => {
   );
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SidebarSection, { noPadding: true, noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Fields, {}) });
 };
-var propsContext = (0, import_react56.createContext)({});
+var propsContext = (0, import_react54.createContext)({});
 function PropsProvider(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(propsContext.Provider, { value: props, children: props.children });
 }
-var usePropsContext = () => (0, import_react56.useContext)(propsContext);
+var usePropsContext = () => (0, import_react54.useContext)(propsContext);
 function PuckProvider({ children }) {
   const {
     config,
@@ -8575,14 +8543,14 @@ function PuckProvider({ children }) {
     metadata,
     onAction
   } = usePropsContext();
-  const iframe = (0, import_react56.useMemo)(
+  const iframe = (0, import_react54.useMemo)(
     () => __spreadValues({
       enabled: true,
       waitForStyles: true
     }, _iframe),
     [_iframe]
   );
-  const [generatedAppState] = (0, import_react56.useState)(() => {
+  const [generatedAppState] = (0, import_react54.useState)(() => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i;
     const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUi);
     let clientUiState = {};
@@ -8642,7 +8610,7 @@ function PuckProvider({ children }) {
     return walkAppState(newAppState, config);
   });
   const { appendData = true } = _initialHistory || {};
-  const [blendedHistories] = (0, import_react56.useState)(
+  const [blendedHistories] = (0, import_react54.useState)(
     [
       ...(_initialHistory == null ? void 0 : _initialHistory.histories) || [],
       ...appendData ? [{ state: generatedAppState }] : []
@@ -8662,7 +8630,7 @@ function PuckProvider({ children }) {
     overrides,
     plugins
   });
-  const generateAppStore = (0, import_react56.useCallback)(
+  const generateAppStore = (0, import_react54.useCallback)(
     (state) => {
       return {
         state,
@@ -8686,15 +8654,15 @@ function PuckProvider({ children }) {
       metadata
     ]
   );
-  const [appStore] = (0, import_react56.useState)(
+  const [appStore] = (0, import_react54.useState)(
     () => createAppStore(generateAppStore(initialAppState))
   );
-  (0, import_react56.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     if (process.env.NODE_ENV !== "production") {
       window.__PUCK_INTERNAL_DO_NOT_USE = { appStore };
     }
   }, [appStore]);
-  (0, import_react56.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     const state = appStore.getState().state;
     appStore.setState(__spreadValues({}, generateAppStore(state)));
   }, [config, plugins, loadedOverrides, viewports, iframe, onAction, metadata]);
@@ -8703,8 +8671,8 @@ function PuckProvider({ children }) {
     index: initialHistoryIndex,
     initialAppState
   });
-  const previousData = (0, import_react56.useRef)(null);
-  (0, import_react56.useEffect)(() => {
+  const previousData = (0, import_react54.useRef)(null);
+  (0, import_react54.useEffect)(() => {
     appStore.subscribe(
       (s) => s.state.data,
       (data) => {
@@ -8718,7 +8686,7 @@ function PuckProvider({ children }) {
   }, []);
   useRegisterPermissionsSlice(appStore, permissions);
   const uPuckStore = useRegisterUsePuckStore(appStore);
-  (0, import_react56.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     const { resolveAndCommitData } = appStore.getState();
     resolveAndCommitData();
   }, []);
@@ -8730,7 +8698,7 @@ function PuckLayout({ children }) {
     dnd,
     initialHistory: _initialHistory
   } = usePropsContext();
-  const iframe = (0, import_react56.useMemo)(
+  const iframe = (0, import_react54.useMemo)(
     () => __spreadValues({
       enabled: true,
       waitForStyles: true
@@ -8743,7 +8711,7 @@ function PuckLayout({ children }) {
     (s) => s.state.ui.rightSideBarVisible
   );
   const dispatch = useAppStore((s) => s.dispatch);
-  (0, import_react56.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     if (!window.matchMedia("(min-width: 638px)").matches) {
       dispatch({
         type: "setUi",
@@ -8767,17 +8735,17 @@ function PuckLayout({ children }) {
     };
   }, []);
   const overrides = useAppStore((s) => s.overrides);
-  const CustomPuck = (0, import_react56.useMemo)(
+  const CustomPuck = (0, import_react54.useMemo)(
     () => overrides.puck || DefaultOverride,
     [overrides]
   );
-  const [mounted, setMounted] = (0, import_react56.useState)(false);
-  (0, import_react56.useEffect)(() => {
+  const [mounted, setMounted] = (0, import_react54.useState)(false);
+  (0, import_react54.useEffect)(() => {
     setMounted(true);
   }, []);
   const ready = useAppStore((s) => s.status === "READY");
   useMonitorHotkeys();
-  (0, import_react56.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     if (ready && iframe.enabled) {
       const frameDoc = getFrame();
       if (frameDoc) {