@measured/puck 0.21.0-canary.8358d3e1 → 0.21.0-canary.89038d0c

package/dist/no-external.js

@@ -7269,17 +7269,18 @@ function AutoFieldInternal(props) {
   const resolvedId = id || defaultId;
   const render = (0, import_react43.useMemo)(
     () => {
-      var _a2, _b, _c, _d, _e, _f, _g, _h, _i;
+      var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
       return __spreadProps(__spreadValues({}, overrides.fieldTypes), {
-        array: ((_a2 = overrides.fieldTypes) == null ? void 0 : _a2.array) || defaultFields.array,
-        external: ((_b = overrides.fieldTypes) == null ? void 0 : _b.external) || defaultFields.external,
-        object: ((_c = overrides.fieldTypes) == null ? void 0 : _c.object) || defaultFields.object,
-        select: ((_d = overrides.fieldTypes) == null ? void 0 : _d.select) || defaultFields.select,
-        textarea: ((_e = overrides.fieldTypes) == null ? void 0 : _e.textarea) || defaultFields.textarea,
-        radio: ((_f = overrides.fieldTypes) == null ? void 0 : _f.radio) || defaultFields.radio,
-        text: ((_g = overrides.fieldTypes) == null ? void 0 : _g.text) || defaultFields.text,
-        number: ((_h = overrides.fieldTypes) == null ? void 0 : _h.number) || defaultFields.number,
-        richtext: ((_i = overrides.fieldTypes) == null ? void 0 : _i.richtext) || defaultFields.richtext
+        custom: (_a2 = overrides.fieldTypes) == null ? void 0 : _a2.custom,
+        array: ((_b = overrides.fieldTypes) == null ? void 0 : _b.array) || defaultFields.array,
+        external: ((_c = overrides.fieldTypes) == null ? void 0 : _c.external) || defaultFields.external,
+        object: ((_d = overrides.fieldTypes) == null ? void 0 : _d.object) || defaultFields.object,
+        select: ((_e = overrides.fieldTypes) == null ? void 0 : _e.select) || defaultFields.select,
+        textarea: ((_f = overrides.fieldTypes) == null ? void 0 : _f.textarea) || defaultFields.textarea,
+        radio: ((_g = overrides.fieldTypes) == null ? void 0 : _g.radio) || defaultFields.radio,
+        text: ((_h = overrides.fieldTypes) == null ? void 0 : _h.text) || defaultFields.text,
+        number: ((_i = overrides.fieldTypes) == null ? void 0 : _i.number) || defaultFields.number,
+        richtext: ((_j = overrides.fieldTypes) == null ? void 0 : _j.richtext) || defaultFields.richtext
       });
     },
     [overrides]
@@ -7326,7 +7327,7 @@ function AutoFieldInternal(props) {
   }, [field.type]);
   const fieldKey = field.type === "custom" ? field.key : void 0;
   let FieldComponent = (0, import_react43.useMemo)(() => {
-    if (field.type === "custom") {
+    if (field.type === "custom" && !render[field.type]) {
       if (!field.render) {
         return null;
       }
@@ -7421,19 +7422,19 @@ var styles_module_default14 = { "Drawer": "_Drawer_pl7z0_1", "Drawer-draggable":
 
 // components/Drawer/index.tsx
 init_get_class_name_factory();
-var import_react64 = require("react");
+var import_react65 = require("react");
 init_generate_id();
 
 // components/DragDropContext/index.tsx
 init_react_import();
-var import_react62 = require("@dnd-kit/react");
+var import_react63 = require("@dnd-kit/react");
 init_store();
-var import_react63 = require("react");
+var import_react64 = require("react");
 var import_dom = require("@dnd-kit/dom");
 
 // components/DropZone/index.tsx
 init_react_import();
-var import_react60 = require("react");
+var import_react61 = require("react");
 
 // components/DraggableComponent/index.tsx
 init_react_import();
@@ -8100,7 +8101,7 @@ var styles_module_default16 = { "DropZone": "_DropZone_1i2sv_1", "DropZone--hasC
 
 // components/DropZone/index.tsx
 init_store();
-var import_react61 = require("@dnd-kit/react");
+var import_react62 = require("@dnd-kit/react");
 
 // components/DropZone/lib/use-min-empty-height.ts
 init_react_import();
@@ -8937,12 +8938,70 @@ var getRichTextTransform = () => ({
   }
 });
 
-// components/DropZone/index.tsx
+// components/MemoizeComponent/index.tsx
+init_react_import();
+var import_fast_equals3 = require("fast-equals");
+var import_react60 = require("react");
+
+// lib/shallow-equal.ts
+init_react_import();
+function shallowEqual(obj1, obj2, keysToIgnore = []) {
+  if (Object.is(obj1, obj2)) return true;
+  if (typeof obj1 !== "object" || obj1 === null || typeof obj2 !== "object" || obj2 === null) {
+    return false;
+  }
+  if (Object.getPrototypeOf(obj1) !== Object.getPrototypeOf(obj2)) {
+    return false;
+  }
+  const ignore = new Set(keysToIgnore);
+  const keys1 = Object.keys(obj1).filter((k) => !ignore.has(k));
+  const keys2 = Object.keys(obj2).filter((k) => !ignore.has(k));
+  if (keys1.length !== keys2.length) return false;
+  for (let i = 0; i < keys1.length; i++) {
+    const currKey = keys1[i];
+    if (!Object.prototype.hasOwnProperty.call(obj2, currKey)) return false;
+    const val1 = obj1[currKey];
+    const val2 = obj2[currKey];
+    if (!Object.is(val1, val2)) return false;
+  }
+  return true;
+}
+
+// components/MemoizeComponent/index.tsx
 var import_jsx_runtime63 = require("react/jsx-runtime");
+var RenderComponent = ({
+  Component,
+  componentProps: renderProps
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Component, __spreadValues({}, renderProps));
+};
+var MemoizeComponent = (0, import_react60.memo)(RenderComponent, (prev, next) => {
+  let puckEquals = true;
+  if ("puck" in prev.componentProps && "puck" in next.componentProps) {
+    puckEquals = (0, import_fast_equals3.deepEqual)(prev.componentProps.puck, next.componentProps.puck);
+  }
+  return prev.Component === next.Component && shallowEqual(prev.componentProps, next.componentProps, ["puck"]) && puckEquals;
+});
+
+// components/DropZone/index.tsx
+var import_jsx_runtime64 = (
+  // Safe to use this since the HTML is set by the user
+  require("react/jsx-runtime")
+);
 var getClassName24 = get_class_name_factory_default("DropZone", styles_module_default16);
 var getRandomColor = () => `#${Math.floor(Math.random() * 16777215).toString(16)}`;
 var RENDER_DEBUG = false;
-var DropZoneEditPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(DropZoneEdit, __spreadValues({}, props));
+var InsertPreview = ({
+  element,
+  label,
+  override
+}) => {
+  if (element) {
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { dangerouslySetInnerHTML: { __html: element.outerHTML } });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(DrawerItemInner, { name: label, children: override });
+};
+var DropZoneEditPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(DropZoneEdit, __spreadValues({}, props));
 var DropZoneChild = ({
   zoneCompound,
   componentId,
@@ -8953,9 +9012,9 @@ var DropZoneChild = ({
 }) => {
   var _a, _b;
   const metadata = useAppStore((s) => s.metadata);
-  const ctx = (0, import_react60.useContext)(dropZoneContext);
+  const ctx = (0, import_react61.useContext)(dropZoneContext);
   const { depth = 1 } = ctx != null ? ctx : {};
-  const zoneStore = (0, import_react60.useContext)(ZoneStoreContext);
+  const zoneStore = (0, import_react61.useContext)(ZoneStoreContext);
   const nodeProps = useAppStore(
     (0, import_shallow4.useShallow)((s) => {
       var _a2;
@@ -8975,7 +9034,7 @@ var DropZoneChild = ({
     })
   );
   const appStore = useAppStoreApi();
-  const item = (0, import_react60.useMemo)(() => {
+  const item = (0, import_react61.useMemo)(() => {
     if (nodeProps) {
       const expanded = expandNode({
         type: nodeType,
@@ -8997,7 +9056,7 @@ var DropZoneChild = ({
   const componentConfig = useAppStore(
     (s) => (item == null ? void 0 : item.type) ? s.config.components[item.type] : null
   );
-  const puckProps = (0, import_react60.useMemo)(
+  const puckProps = (0, import_react61.useMemo)(
     () => ({
       renderDropZone: DropZoneEditPure,
       isEditing: true,
@@ -9020,20 +9079,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_react60.useMemo)(
-    () => function Preview3() {
-      var _a2;
-      if (item && "element" in item && item.element) {
-        return (
-          // Safe to use this since the HTML is set by the user
-          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { dangerouslySetInnerHTML: { __html: item.element.outerHTML } })
-        );
-      }
-      return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(DrawerItemInner, { name: label, children: (_a2 = overrides.componentItem) != null ? _a2 : overrides.drawerItem });
-    },
-    [componentId, label, overrides]
-  );
-  const defaultsProps = (0, import_react60.useMemo)(
+  const defaultsProps = (0, import_react61.useMemo)(
     () => __spreadProps(__spreadValues(__spreadValues({}, componentConfig == null ? void 0 : componentConfig.defaultProps), item == null ? void 0 : item.props), {
       puck: puckProps,
       editMode: true
@@ -9041,7 +9087,7 @@ var DropZoneChild = ({
     }),
     [componentConfig == null ? void 0 : componentConfig.defaultProps, item == null ? void 0 : item.props, puckProps]
   );
-  const defaultedNode = (0, import_react60.useMemo)(
+  const defaultedNode = (0, import_react61.useMemo)(
     () => {
       var _a2;
       return { type: (_a2 = item == null ? void 0 : item.type) != null ? _a2 : nodeType, props: defaultsProps };
@@ -9051,8 +9097,8 @@ var DropZoneChild = ({
   const config = useAppStore((s) => s.config);
   const plugins = useAppStore((s) => s.plugins);
   const userFieldTransforms = useAppStore((s) => s.fieldTransforms);
-  const combinedFieldTransforms = (0, import_react60.useMemo)(
-    () => __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, getSlotTransform(DropZoneEditPure, (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ContextSlotRender, { componentId, zone: slotProps.zone }))), getInlineTextTransform()), getRichTextTransform()), plugins.reduce(
+  const combinedFieldTransforms = (0, import_react61.useMemo)(
+    () => __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, getSlotTransform(DropZoneEditPure, (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(ContextSlotRender, { componentId, zone: slotProps.zone }))), getInlineTextTransform()), getRichTextTransform()), plugins.reduce(
       (acc, plugin) => __spreadValues(__spreadValues({}, acc), plugin.fieldTransforms),
       {}
     )), userFieldTransforms),
@@ -9066,16 +9112,13 @@ var DropZoneChild = ({
     isLoading
   );
   if (!item) return;
-  let Render2 = componentConfig ? componentConfig.render : () => /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { style: { padding: 48, textAlign: "center" }, children: [
+  const Render2 = componentConfig ? componentConfig.render : () => /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { style: { padding: 48, textAlign: "center" }, children: [
     "No configuration for ",
     item.type
   ] });
   let componentType = item.type;
   const isInserting = "previewType" in item ? item.previewType === "insert" : false;
-  if (isInserting) {
-    Render2 = renderPreview;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     DraggableComponent,
     {
       id: componentId,
@@ -9089,19 +9132,39 @@ var DropZoneChild = ({
       autoDragAxis: dragAxis,
       userDragAxis: collisionAxis,
       inDroppableZone,
-      children: (dragRef) => (componentConfig == null ? void 0 : componentConfig.inline) && !isInserting ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_jsx_runtime63.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-        Render2,
-        __spreadProps(__spreadValues({}, transformedProps), {
-          puck: __spreadProps(__spreadValues({}, transformedProps.puck), {
-            dragRef
-          })
-        })
-      ) }) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { ref: dragRef, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Render2, __spreadValues({}, transformedProps)) })
+      children: (dragRef) => {
+        var _a2;
+        if ((componentConfig == null ? void 0 : componentConfig.inline) && !isInserting) {
+          return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+            MemoizeComponent,
+            {
+              Component: Render2,
+              componentProps: __spreadProps(__spreadValues({}, transformedProps), {
+                puck: __spreadProps(__spreadValues({}, transformedProps.puck), { dragRef })
+              })
+            }
+          );
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { ref: dragRef, children: isInserting ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+          InsertPreview,
+          {
+            label,
+            override: (_a2 = overrides.componentItem) != null ? _a2 : overrides.drawerItem,
+            element: "element" in item && item.element ? item.element : void 0
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+          MemoizeComponent,
+          {
+            Component: Render2,
+            componentProps: transformedProps
+          }
+        ) });
+      }
     }
   );
 };
-var DropZoneChildMemo = (0, import_react60.memo)(DropZoneChild);
-var DropZoneEdit = (0, import_react60.forwardRef)(
+var DropZoneChildMemo = (0, import_react61.memo)(DropZoneChild);
+var DropZoneEdit = (0, import_react61.forwardRef)(
   function DropZoneEditInternal({
     zone,
     allow,
@@ -9112,7 +9175,7 @@ var DropZoneEdit = (0, import_react60.forwardRef)(
     collisionAxis,
     as
   }, userRef) {
-    const ctx = (0, import_react60.useContext)(dropZoneContext);
+    const ctx = (0, import_react61.useContext)(dropZoneContext);
     const appStoreApi = useAppStoreApi();
     const {
       // These all need setting via context
@@ -9150,14 +9213,14 @@ var DropZoneEdit = (0, import_react60.forwardRef)(
         return (_a = s.state.indexes.zones[zoneCompound]) == null ? void 0 : _a.type;
       })
     );
-    (0, import_react60.useEffect)(() => {
+    (0, import_react61.useEffect)(() => {
       if (!zoneType || zoneType === "dropzone") {
         if (ctx == null ? void 0 : ctx.registerZone) {
           ctx == null ? void 0 : ctx.registerZone(zoneCompound);
         }
       }
     }, [zoneType, appStoreApi]);
-    (0, import_react60.useEffect)(() => {
+    (0, import_react61.useEffect)(() => {
       if (zoneType === "dropzone") {
         if (zoneCompound !== rootDroppableId) {
           console.warn(
@@ -9166,11 +9229,11 @@ var DropZoneEdit = (0, import_react60.forwardRef)(
         }
       }
     }, [zoneType]);
-    const contentIds = (0, import_react60.useMemo)(() => {
+    const contentIds = (0, import_react61.useMemo)(() => {
       return zoneContentIds || [];
     }, [zoneContentIds]);
-    const ref = (0, import_react60.useRef)(null);
-    const acceptsTarget = (0, import_react60.useCallback)(
+    const ref = (0, import_react61.useRef)(null);
+    const acceptsTarget = (0, import_react61.useCallback)(
       (componentType) => {
         if (!componentType) {
           return true;
@@ -9208,7 +9271,7 @@ var DropZoneEdit = (0, import_react60.forwardRef)(
       }
       return _isEnabled;
     });
-    (0, import_react60.useEffect)(() => {
+    (0, import_react61.useEffect)(() => {
       if (registerLocalZone) {
         registerLocalZone(zoneCompound, targetAccepted || isEnabled);
       }
@@ -9223,8 +9286,8 @@ var DropZoneEdit = (0, import_react60.forwardRef)(
       zoneCompound
     );
     const isDropEnabled = isEnabled && (preview ? contentIdsWithPreview.length === 1 : contentIdsWithPreview.length === 0);
-    const zoneStore = (0, import_react60.useContext)(ZoneStoreContext);
-    (0, import_react60.useEffect)(() => {
+    const zoneStore = (0, import_react61.useContext)(ZoneStoreContext);
+    (0, import_react61.useEffect)(() => {
       const { enabledIndex } = zoneStore.getState();
       zoneStore.setState({
         enabledIndex: __spreadProps(__spreadValues({}, enabledIndex), { [zoneCompound]: isEnabled })
@@ -9243,7 +9306,7 @@ var DropZoneEdit = (0, import_react60.forwardRef)(
         path: path || []
       }
     };
-    const { ref: dropRef } = (0, import_react61.useDroppable)(droppableConfig);
+    const { ref: dropRef } = (0, import_react62.useDroppable)(droppableConfig);
     const isAreaSelected = useAppStore(
       (s) => (s == null ? void 0 : s.selectedItem) && areaId === (s == null ? void 0 : s.selectedItem.props.id)
     );
@@ -9253,8 +9316,14 @@ var DropZoneEdit = (0, import_react60.forwardRef)(
       userMinEmptyHeight,
       ref
     });
+    const setRefs = (0, import_react61.useCallback)(
+      (node) => {
+        assignRefs([ref, dropRef, userRef], node);
+      },
+      [dropRef]
+    );
     const El = as != null ? as : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
       El,
       {
         className: `${getClassName24({
@@ -9265,9 +9334,7 @@ var DropZoneEdit = (0, import_react60.forwardRef)(
           hasChildren: contentIds.length > 0,
           isAnimating
         })}${className ? ` ${className}` : ""}`,
-        ref: (node) => {
-          assignRefs([ref, dropRef, userRef], node);
-        },
+        ref: setRefs,
         "data-testid": `dropzone:${zoneCompound}`,
         "data-puck-dropzone": zoneCompound,
         style: __spreadProps(__spreadValues({}, style), {
@@ -9275,7 +9342,7 @@ var DropZoneEdit = (0, import_react60.forwardRef)(
           backgroundColor: RENDER_DEBUG ? getRandomColor() : style == null ? void 0 : style.backgroundColor
         }),
         children: contentIdsWithPreview.map((componentId, i) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
             DropZoneChildMemo,
             {
               zoneCompound,
@@ -9298,8 +9365,8 @@ var DropZoneRenderItem = ({
   metadata
 }) => {
   const Component = config.components[item.type];
-  const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
-  const nextContextValue = (0, import_react60.useMemo)(
+  const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
+  const nextContextValue = (0, import_react61.useMemo)(
     () => ({
       areaId: props.id,
       depth: 1
@@ -9307,7 +9374,7 @@ var DropZoneRenderItem = ({
     [props]
   );
   const richtextProps = useRichtextProps(Component.fields, props);
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     Component.render,
     __spreadProps(__spreadValues(__spreadValues({}, props), richtextProps), {
       puck: __spreadProps(__spreadValues({}, props.puck), {
@@ -9317,15 +9384,15 @@ var DropZoneRenderItem = ({
     })
   ) }, props.id);
 };
-var DropZoneRenderPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(DropZoneRender, __spreadValues({}, props));
-var DropZoneRender = (0, import_react60.forwardRef)(
+var DropZoneRenderPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(DropZoneRender, __spreadValues({}, props));
+var DropZoneRender = (0, import_react61.forwardRef)(
   function DropZoneRenderInternal({ className, style, zone, as }, ref) {
-    const ctx = (0, import_react60.useContext)(dropZoneContext);
+    const ctx = (0, import_react61.useContext)(dropZoneContext);
     const { areaId = "root" } = ctx || {};
-    const { config, data, metadata } = (0, import_react60.useContext)(renderContext);
+    const { config, data, metadata } = (0, import_react61.useContext)(renderContext);
     let zoneCompound = `${areaId}:${zone}`;
     let content = (data == null ? void 0 : data.content) || [];
-    (0, import_react60.useEffect)(() => {
+    (0, import_react61.useEffect)(() => {
       if (!content) {
         if (ctx == null ? void 0 : ctx.registerZone) {
           ctx == null ? void 0 : ctx.registerZone(zoneCompound);
@@ -9339,10 +9406,10 @@ var DropZoneRender = (0, import_react60.forwardRef)(
     if (zoneCompound !== rootDroppableId) {
       content = setupZone(data, zoneCompound).zones[zoneCompound];
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(El, { className, style, ref, children: content.map((item) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(El, { className, style, ref, children: content.map((item) => {
       const Component = config.components[item.type];
       if (Component) {
-        return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
           DropZoneRenderItem,
           {
             config,
@@ -9356,14 +9423,14 @@ var DropZoneRender = (0, import_react60.forwardRef)(
     }) });
   }
 );
-var DropZonePure = (props) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(DropZone, __spreadValues({}, props));
-var DropZone = (0, import_react60.forwardRef)(
+var DropZonePure = (props) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(DropZone, __spreadValues({}, props));
+var DropZone = (0, import_react61.forwardRef)(
   function DropZone2(props, ref) {
-    const ctx = (0, import_react60.useContext)(dropZoneContext);
+    const ctx = (0, import_react61.useContext)(dropZoneContext);
     if ((ctx == null ? void 0 : ctx.mode) === "edit") {
-      return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_jsx_runtime63.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(DropZoneEdit, __spreadProps(__spreadValues({}, props), { ref })) });
+      return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_jsx_runtime64.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(DropZoneEdit, __spreadProps(__spreadValues({}, props), { ref })) });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_jsx_runtime63.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(DropZoneRender, __spreadProps(__spreadValues({}, props), { ref })) });
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_jsx_runtime64.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(DropZoneRender, __spreadProps(__spreadValues({}, props), { ref })) });
   }
 );
 
@@ -9707,14 +9774,14 @@ function getDeepDir(el) {
 
 // components/DragDropContext/index.tsx
 var import_state = require("@dnd-kit/state");
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var DEBUG3 = false;
-var dragListenerContext = (0, import_react63.createContext)({
+var dragListenerContext = (0, import_react64.createContext)({
   dragListeners: {}
 });
 function useDragListener(type, fn, deps = []) {
-  const { setDragListeners } = (0, import_react63.useContext)(dragListenerContext);
-  (0, import_react63.useEffect)(() => {
+  const { setDragListeners } = (0, import_react64.useContext)(dragListenerContext);
+  (0, import_react64.useEffect)(() => {
     if (setDragListeners) {
       setDragListeners((old) => __spreadProps(__spreadValues({}, old), {
         [type]: [...old[type] || [], fn]
@@ -9724,8 +9791,8 @@ function useDragListener(type, fn, deps = []) {
 }
 var AREA_CHANGE_DEBOUNCE_MS = 100;
 var useTempDisableFallback = (timeout3) => {
-  const lastFallbackDisable = (0, import_react63.useRef)(null);
-  return (0, import_react63.useCallback)((manager) => {
+  const lastFallbackDisable = (0, import_react64.useRef)(null);
+  return (0, import_react64.useCallback)((manager) => {
     collisionStore.setState({ fallbackEnabled: false });
     const fallbackId = generateId();
     lastFallbackDisable.current = fallbackId;
@@ -9744,9 +9811,9 @@ var DragDropContextClient = ({
   const dispatch = useAppStore((s) => s.dispatch);
   const appStore = useAppStoreApi();
   const id = useSafeId();
-  const debouncedParamsRef = (0, import_react63.useRef)(null);
+  const debouncedParamsRef = (0, import_react64.useRef)(null);
   const tempDisableFallback = useTempDisableFallback(100);
-  const [zoneStore] = (0, import_react63.useState)(
+  const [zoneStore] = (0, import_react64.useState)(
     () => (0, import_zustand5.createStore)(() => ({
       zoneDepthIndex: {},
       nextZoneDepthIndex: {},
@@ -9758,7 +9825,7 @@ var DragDropContextClient = ({
       hoveringComponent: null
     }))
   );
-  const getChanged2 = (0, import_react63.useCallback)(
+  const getChanged2 = (0, import_react64.useCallback)(
     (params, id2) => {
       const { zoneDepthIndex = {}, areaDepthIndex = {} } = zoneStore.getState() || {};
       const stateHasZone = Object.keys(zoneDepthIndex).length > 0;
@@ -9779,7 +9846,7 @@ var DragDropContextClient = ({
     },
     [zoneStore]
   );
-  const setDeepestAndCollide = (0, import_react63.useCallback)(
+  const setDeepestAndCollide = (0, import_react64.useCallback)(
     (params, manager) => {
       const { zoneChanged, areaChanged } = getChanged2(params, id);
       if (!zoneChanged && !areaChanged) return;
@@ -9803,7 +9870,7 @@ var DragDropContextClient = ({
     setDeepestDb.cancel();
     debouncedParamsRef.current = null;
   };
-  (0, import_react63.useEffect)(() => {
+  (0, import_react64.useEffect)(() => {
     if (DEBUG3) {
       zoneStore.subscribe(
         (s) => {
@@ -9817,7 +9884,7 @@ var DragDropContextClient = ({
       );
     }
   }, []);
-  const [plugins] = (0, import_react63.useState)(() => [
+  const [plugins] = (0, import_react64.useState)(() => [
     ...disableAutoScroll ? import_dom.defaultPreset.plugins.filter((plugin) => plugin !== import_dom.AutoScroller) : import_dom.defaultPreset.plugins,
     createNestedDroppablePlugin(
       {
@@ -9865,10 +9932,10 @@ var DragDropContextClient = ({
     )
   ]);
   const sensors = useSensors();
-  const [dragListeners, setDragListeners] = (0, import_react63.useState)({});
-  const dragMode = (0, import_react63.useRef)(null);
-  const initialSelector = (0, import_react63.useRef)(void 0);
-  const nextContextValue = (0, import_react63.useMemo)(
+  const [dragListeners, setDragListeners] = (0, import_react64.useState)({});
+  const dragMode = (0, import_react64.useRef)(null);
+  const initialSelector = (0, import_react64.useRef)(void 0);
+  const nextContextValue = (0, import_react64.useMemo)(
     () => ({
       mode: "edit",
       areaId: "root",
@@ -9876,15 +9943,15 @@ var DragDropContextClient = ({
     }),
     []
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { id, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { id, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
     dragListenerContext.Provider,
     {
       value: {
         dragListeners,
         setDragListeners
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
-        import_react62.DragDropProvider,
+      children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+        import_react63.DragDropProvider,
         {
           plugins,
           sensors,
@@ -10099,7 +10166,7 @@ var DragDropContextClient = ({
             const entryEl = (_d = getFrame()) == null ? void 0 : _d.querySelector("[data-puck-entry]");
             entryEl == null ? void 0 : entryEl.setAttribute("data-puck-dragging", "true");
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(ZoneStoreProvider, { store: zoneStore, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(DropZoneProvider, { value: nextContextValue, children }) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(ZoneStoreProvider, { store: zoneStore, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(DropZoneProvider, { value: nextContextValue, children }) })
         }
       )
     }
@@ -10113,12 +10180,12 @@ var DragDropContext = ({
   if (status === "LOADING") {
     return children;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(DragDropContextClient, { disableAutoScroll, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(DragDropContextClient, { disableAutoScroll, children });
 };
 
 // components/Drawer/index.tsx
-var import_react65 = require("@dnd-kit/react");
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_react66 = require("@dnd-kit/react");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var getClassName25 = get_class_name_factory_default("Drawer", styles_module_default14);
 var getClassNameItem2 = get_class_name_factory_default("DrawerItem", styles_module_default14);
 var DrawerItemInner = ({
@@ -10128,11 +10195,11 @@ var DrawerItemInner = ({
   dragRef,
   isDragDisabled
 }) => {
-  const CustomInner = (0, import_react64.useMemo)(
-    () => children || (({ children: children2 }) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: getClassNameItem2("default"), children: children2 })),
+  const CustomInner = (0, import_react65.useMemo)(
+    () => children || (({ children: children2 }) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: getClassNameItem2("default"), children: children2 })),
     [children]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
     "div",
     {
       className: getClassNameItem2({ disabled: isDragDisabled }),
@@ -10140,9 +10207,9 @@ var DrawerItemInner = ({
       onMouseDown: (e) => e.preventDefault(),
       "data-testid": dragRef ? `drawer-item:${name}` : "",
       "data-puck-drawer-item": true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(CustomInner, { name, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: getClassNameItem2("draggableWrapper"), children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: getClassNameItem2("draggable"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: getClassNameItem2("name"), children: label != null ? label : name }),
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: getClassNameItem2("icon"), children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(DragIcon, {}) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(CustomInner, { name, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: getClassNameItem2("draggableWrapper"), children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: getClassNameItem2("draggable"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: getClassNameItem2("name"), children: label != null ? label : name }),
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: getClassNameItem2("icon"), children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(DragIcon, {}) })
       ] }) }) })
     }
   );
@@ -10154,15 +10221,15 @@ var DrawerItemDraggable = ({
   id,
   isDragDisabled
 }) => {
-  const { ref } = (0, import_react65.useDraggable)({
+  const { ref } = (0, import_react66.useDraggable)({
     id,
     data: { componentType: name },
     disabled: isDragDisabled,
     type: "drawer"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: getClassName25("draggable"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: getClassName25("draggableBg"), children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(DrawerItemInner, { name, label, children }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: getClassName25("draggableFg"), children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: getClassName25("draggable"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: getClassName25("draggableBg"), children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(DrawerItemInner, { name, label, children }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: getClassName25("draggableFg"), children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       DrawerItemInner,
       {
         name,
@@ -10183,7 +10250,7 @@ var DrawerItem = ({
   isDragDisabled
 }) => {
   const resolvedId = id || name;
-  const [dynamicId, setDynamicId] = (0, import_react64.useState)(generateId(resolvedId));
+  const [dynamicId, setDynamicId] = (0, import_react65.useState)(generateId(resolvedId));
   if (typeof index !== "undefined") {
     console.error(
       "Warning: The `index` prop on Drawer.Item is deprecated and no longer required."
@@ -10196,7 +10263,7 @@ var DrawerItem = ({
     },
     [resolvedId]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
     DrawerItemDraggable,
     {
       name,
@@ -10223,13 +10290,13 @@ var Drawer = ({
     );
   }
   const id = useSafeId();
-  const { ref } = (0, import_react65.useDroppable)({
+  const { ref } = (0, import_react66.useDroppable)({
     id,
     type: "void",
     collisionPriority: 0
     // Never collide with this, but we use it so NestedDroppablePlugin respects the Drawer
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
     "div",
     {
       className: getClassName25(),
@@ -10248,7 +10315,7 @@ init_IconButton2();
 
 // components/Puck/index.tsx
 init_react_import();
-var import_react86 = require("react");
+var import_react87 = require("react");
 
 // components/SidebarSection/index.tsx
 init_react_import();
@@ -10263,7 +10330,7 @@ init_lucide_react();
 
 // lib/use-breadcrumbs.ts
 init_react_import();
-var import_react66 = require("react");
+var import_react67 = require("react");
 init_store();
 var useBreadcrumbs = (renderCount) => {
   const selectedId = useAppStore((s) => {
@@ -10276,7 +10343,7 @@ var useBreadcrumbs = (renderCount) => {
     return (_a = s.state.indexes.nodes[selectedId]) == null ? void 0 : _a.path;
   });
   const appStore = useAppStoreApi();
-  return (0, import_react66.useMemo)(() => {
+  return (0, import_react67.useMemo)(() => {
     const breadcrumbs = (path == null ? void 0 : path.map((zoneCompound) => {
       var _a, _b, _c;
       const [componentId] = zoneCompound.split(":");
@@ -10309,7 +10376,7 @@ var useBreadcrumbs = (renderCount) => {
 // components/SidebarSection/index.tsx
 init_store();
 init_Loader();
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var getClassName26 = get_class_name_factory_default("SidebarSection", styles_module_default18);
 var SidebarSection = ({
   children,
@@ -10322,15 +10389,15 @@ var SidebarSection = ({
 }) => {
   const setUi = useAppStore((s) => s.setUi);
   const breadcrumbs = useBreadcrumbs(1);
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
     "div",
     {
       className: getClassName26({ noBorderTop, noPadding }),
       style: { background },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: getClassName26("title"), children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: getClassName26("breadcrumbs"), children: [
-          showBreadcrumbs ? breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: getClassName26("breadcrumb"), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: getClassName26("title"), children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: getClassName26("breadcrumbs"), children: [
+          showBreadcrumbs ? breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: getClassName26("breadcrumb"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
               "button",
               {
                 type: "button",
@@ -10339,12 +10406,12 @@ var SidebarSection = ({
                 children: breadcrumb.label
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(ChevronRight, { size: 16 })
+            /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(ChevronRight, { size: 16 })
           ] }, i)) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: getClassName26("heading"), children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Heading7, { rank: "2", size: "xs", children: title }) })
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: getClassName26("heading"), children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Heading7, { rank: "2", size: "xs", children: title }) })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: getClassName26("content"), children }),
-        isLoading && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: getClassName26("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Loader, { size: 32 }) })
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: getClassName26("content"), children }),
+        isLoading && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: getClassName26("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Loader, { size: 32 }) })
       ]
     }
   );
@@ -10370,15 +10437,15 @@ var styles_module_default20 = { "PuckFields": "_PuckFields_10bh7_1", "PuckFields
 
 // components/Puck/components/Fields/index.tsx
 init_lib();
-var import_react67 = require("react");
+var import_react68 = require("react");
 init_fields();
 var import_shallow5 = require("zustand/react/shallow");
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 var getClassName27 = get_class_name_factory_default("PuckFields", styles_module_default20);
 var DefaultFields = ({
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_jsx_runtime67.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_jsx_runtime68.Fragment, { children });
 };
 var createOnChange = (fieldName, appStore) => (value, updatedUi) => __async(null, null, function* () {
   const { dispatch, state, selectedItem, resolveComponentData: resolveComponentData2 } = appStore.getState();
@@ -10443,13 +10510,13 @@ var FieldsChild = ({ fieldName }) => {
     })
   );
   const appStore = useAppStoreApi();
-  const onChange = (0, import_react67.useCallback)(createOnChange(fieldName, appStore), [
+  const onChange = (0, import_react68.useCallback)(createOnChange(fieldName, appStore), [
     fieldName
   ]);
   const { visible = true } = field != null ? field : {};
   if (!field || !id || !visible) return null;
   if (field.type === "slot") return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: getClassName27("field"), children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: getClassName27("field"), children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
     AutoFieldPrivate,
     {
       field,
@@ -10461,7 +10528,7 @@ var FieldsChild = ({ fieldName }) => {
     }
   ) }, id);
 };
-var FieldsChildMemo = (0, import_react67.memo)(FieldsChild);
+var FieldsChildMemo = (0, import_react68.memo)(FieldsChild);
 var FieldsInternal = ({ wrapFields = true }) => {
   const overrides = useAppStore((s) => s.overrides);
   const componentResolving = useAppStore((s) => {
@@ -10486,8 +10553,8 @@ var FieldsInternal = ({ wrapFields = true }) => {
     })
   );
   const isLoading = fieldsLoading || componentResolving;
-  const Wrapper = (0, import_react67.useMemo)(() => overrides.fields || DefaultFields, [overrides]);
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+  const Wrapper = (0, import_react68.useMemo)(() => overrides.fields || DefaultFields, [overrides]);
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
     "form",
     {
       className: getClassName27({ wrapFields }),
@@ -10495,20 +10562,20 @@ var FieldsInternal = ({ wrapFields = true }) => {
         e.preventDefault();
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Wrapper, { isLoading, itemSelector, children: fieldNames.map((fieldName) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(FieldsChildMemo, { fieldName }, fieldName)) }),
-        isLoading && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: getClassName27("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: getClassName27("loadingOverlayInner"), children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Loader, { size: 16 }) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Wrapper, { isLoading, itemSelector, children: fieldNames.map((fieldName) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(FieldsChildMemo, { fieldName }, fieldName)) }),
+        isLoading && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: getClassName27("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: getClassName27("loadingOverlayInner"), children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Loader, { size: 16 }) }) })
       ]
     }
   );
 };
-var Fields = (0, import_react67.memo)(FieldsInternal);
+var Fields = (0, import_react68.memo)(FieldsInternal);
 
 // components/Puck/components/Components/index.tsx
 init_react_import();
 
 // lib/use-component-list.tsx
 init_react_import();
-var import_react69 = require("react");
+var import_react70 = require("react");
 
 // components/ComponentList/index.tsx
 init_react_import();
@@ -10519,10 +10586,10 @@ var styles_module_default21 = { "ComponentList": "_ComponentList_1rrlt_1", "Comp
 
 // components/ComponentList/index.tsx
 init_get_class_name_factory();
-var import_react68 = require("react");
+var import_react69 = require("react");
 init_store();
 init_lucide_react();
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 var getClassName28 = get_class_name_factory_default("ComponentList", styles_module_default21);
 var ComponentListItem = ({
   name,
@@ -10535,14 +10602,14 @@ var ComponentListItem = ({
       type: name
     }).insert
   );
-  (0, import_react68.useEffect)(() => {
+  (0, import_react69.useEffect)(() => {
     if (overrides.componentItem) {
       console.warn(
         "The `componentItem` override has been deprecated and renamed to `drawerItem`"
       );
     }
   }, [overrides]);
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Drawer.Item, { label, name, isDragDisabled: !canInsert, children: (_a = overrides.componentItem) != null ? _a : overrides.drawerItem });
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Drawer.Item, { label, name, isDragDisabled: !canInsert, children: (_a = overrides.componentItem) != null ? _a : overrides.drawerItem });
 };
 var ComponentList = ({
   children,
@@ -10553,8 +10620,8 @@ var ComponentList = ({
   const setUi = useAppStore((s) => s.setUi);
   const componentList = useAppStore((s) => s.state.ui.componentList);
   const { expanded = true } = componentList[id] || {};
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: getClassName28({ isExpanded: expanded }), children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: getClassName28({ isExpanded: expanded }), children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
       "button",
       {
         type: "button",
@@ -10568,14 +10635,14 @@ var ComponentList = ({
         }),
         title: expanded ? `Collapse${title ? ` ${title}` : ""}` : `Expand${title ? ` ${title}` : ""}`,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: getClassName28("titleIcon"), children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ChevronUp, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ChevronDown, { size: 12 }) })
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: getClassName28("titleIcon"), children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ChevronUp, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ChevronDown, { size: 12 }) })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: getClassName28("content"), children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Drawer, { children: children || Object.keys(config.components).map((componentKey) => {
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: getClassName28("content"), children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Drawer, { children: children || Object.keys(config.components).map((componentKey) => {
       var _a;
-      return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
         ComponentListItem,
         {
           label: (_a = config.components[componentKey]["label"]) != null ? _a : componentKey,
@@ -10590,12 +10657,12 @@ ComponentList.Item = ComponentListItem;
 
 // lib/use-component-list.tsx
 init_store();
-var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_jsx_runtime70 = require("react/jsx-runtime");
 var useComponentList = () => {
-  const [componentList, setComponentList] = (0, import_react69.useState)();
+  const [componentList, setComponentList] = (0, import_react70.useState)();
   const config = useAppStore((s) => s.config);
   const uiComponentList = useAppStore((s) => s.state.ui.componentList);
-  (0, import_react69.useEffect)(() => {
+  (0, import_react70.useEffect)(() => {
     var _a, _b, _c;
     if (Object.keys(uiComponentList).length > 0) {
       const matchedComponents = [];
@@ -10611,7 +10678,7 @@ var useComponentList = () => {
           if (category.visible === false) {
             return null;
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
             ComponentList,
             {
               id: categoryKey,
@@ -10619,7 +10686,7 @@ var useComponentList = () => {
               children: category.components.map((componentName, i) => {
                 var _a2;
                 const componentConf = config.components[componentName] || {};
-                return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
                   ComponentList.Item,
                   {
                     label: (_a2 = componentConf["label"]) != null ? _a2 : componentName,
@@ -10639,7 +10706,7 @@ var useComponentList = () => {
       );
       if (remainingComponents.length > 0 && !((_a = uiComponentList.other) == null ? void 0 : _a.components) && ((_b = uiComponentList.other) == null ? void 0 : _b.visible) !== false) {
         _componentList.push(
-          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
             ComponentList,
             {
               id: "other",
@@ -10647,7 +10714,7 @@ var useComponentList = () => {
               children: remainingComponents.map((componentName, i) => {
                 var _a2;
                 const componentConf = config.components[componentName] || {};
-                return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
                   ComponentList.Item,
                   {
                     name: componentName,
@@ -10670,12 +10737,12 @@ var useComponentList = () => {
 
 // components/Puck/components/Components/index.tsx
 init_store();
-var import_react70 = require("react");
-var import_jsx_runtime70 = require("react/jsx-runtime");
+var import_react71 = require("react");
+var import_jsx_runtime71 = require("react/jsx-runtime");
 var Components = () => {
   const overrides = useAppStore((s) => s.overrides);
   const componentList = useComponentList();
-  const Wrapper = (0, import_react70.useMemo)(() => {
+  const Wrapper = (0, import_react71.useMemo)(() => {
     if (overrides.components) {
       console.warn(
         "The `components` override has been deprecated and renamed to `drawer`"
@@ -10683,21 +10750,21 @@ var Components = () => {
     }
     return overrides.components || overrides.drawer || "div";
   }, [overrides]);
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ComponentList, { id: "all" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ComponentList, { id: "all" }) });
 };
 
 // components/Puck/components/Preview/index.tsx
 init_react_import();
 init_root_droppable_id();
-var import_react72 = require("react");
+var import_react73 = require("react");
 init_store();
 
 // components/AutoFrame/index.tsx
 init_react_import();
-var import_react71 = require("react");
+var import_react72 = require("react");
 var import_object_hash = __toESM(require("object-hash"));
 var import_react_dom3 = require("react-dom");
-var import_jsx_runtime71 = require("react/jsx-runtime");
+var import_jsx_runtime72 = require("react/jsx-runtime");
 var styleSelector = 'style, link[rel="stylesheet"]';
 var collectStyles = (doc) => {
   const collected = [];
@@ -10747,7 +10814,7 @@ var CopyHostStyles = ({
   onStylesLoaded = () => null
 }) => {
   const { document: doc, window: win } = useFrame();
-  (0, import_react71.useEffect)(() => {
+  (0, import_react72.useEffect)(() => {
     if (!win || !doc) {
       return () => {
       };
@@ -10904,10 +10971,10 @@ var CopyHostStyles = ({
       observer.disconnect();
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_jsx_runtime71.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_jsx_runtime72.Fragment, { children });
 };
-var autoFrameContext = (0, import_react71.createContext)({});
-var useFrame = () => (0, import_react71.useContext)(autoFrameContext);
+var autoFrameContext = (0, import_react72.createContext)({});
+var useFrame = () => (0, import_react72.useContext)(autoFrameContext);
 function AutoFrame(_a) {
   var _b = _a, {
     children,
@@ -10928,11 +10995,11 @@ function AutoFrame(_a) {
     "onNotReady",
     "frameRef"
   ]);
-  const [loaded, setLoaded] = (0, import_react71.useState)(false);
-  const [ctx, setCtx] = (0, import_react71.useState)({});
-  const [mountTarget, setMountTarget] = (0, import_react71.useState)();
-  const [stylesLoaded, setStylesLoaded] = (0, import_react71.useState)(false);
-  (0, import_react71.useEffect)(() => {
+  const [loaded, setLoaded] = (0, import_react72.useState)(false);
+  const [ctx, setCtx] = (0, import_react72.useState)({});
+  const [mountTarget, setMountTarget] = (0, import_react72.useState)();
+  const [stylesLoaded, setStylesLoaded] = (0, import_react72.useState)(false);
+  (0, import_react72.useEffect)(() => {
     var _a2;
     if (frameRef.current) {
       const doc = frameRef.current.contentDocument;
@@ -10951,7 +11018,7 @@ function AutoFrame(_a) {
       }
     }
   }, [frameRef, loaded, stylesLoaded]);
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
     "iframe",
     __spreadProps(__spreadValues({}, props), {
       className,
@@ -10961,7 +11028,7 @@ function AutoFrame(_a) {
       onLoad: () => {
         setLoaded(true);
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
         CopyHostStyles,
         {
           debug,
@@ -10981,11 +11048,11 @@ var styles_module_default22 = { "PuckPreview": "_PuckPreview_z2rgu_1", "PuckPrev
 
 // components/Puck/components/Preview/index.tsx
 init_lib();
-var import_jsx_runtime72 = require("react/jsx-runtime");
+var import_jsx_runtime73 = require("react/jsx-runtime");
 var getClassName29 = get_class_name_factory_default("PuckPreview", styles_module_default22);
 var useBubbleIframeEvents = (ref) => {
   const status = useAppStore((s) => s.status);
-  (0, import_react72.useEffect)(() => {
+  (0, import_react73.useEffect)(() => {
     if (ref.current && status === "READY") {
       const iframe = ref.current;
       const handlePointerMove = (event) => {
@@ -11034,7 +11101,7 @@ var Preview2 = ({ id = "puck-preview" }) => {
   const renderData = useAppStore(
     (s) => s.state.ui.previewMode === "edit" ? null : s.state.data
   );
-  const Page = (0, import_react72.useCallback)(
+  const Page = (0, import_react73.useCallback)(
     (pageProps) => {
       var _a, _b, _c, _d;
       const propsWithSlots = useSlots(
@@ -11048,15 +11115,15 @@ var Preview2 = ({ id = "puck-preview" }) => {
       );
       return ((_c = config.root) == null ? void 0 : _c.render) ? (_d = config.root) == null ? void 0 : _d.render(__spreadValues(__spreadValues({
         id: "puck-root"
-      }, propsWithSlots), richtextProps)) : /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_jsx_runtime72.Fragment, { children: propsWithSlots.children });
+      }, propsWithSlots), richtextProps)) : /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_jsx_runtime73.Fragment, { children: propsWithSlots.children });
     },
     [config]
   );
-  const Frame = (0, import_react72.useMemo)(() => overrides.iframe, [overrides]);
+  const Frame = (0, import_react73.useMemo)(() => overrides.iframe, [overrides]);
   const rootProps = root.props || root;
-  const ref = (0, import_react72.useRef)(null);
+  const ref = (0, import_react73.useRef)(null);
   useBubbleIframeEvents(ref);
-  const inner = !renderData ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+  const inner = !renderData ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
     Page,
     __spreadProps(__spreadValues({}, rootProps), {
       puck: {
@@ -11066,15 +11133,15 @@ var Preview2 = ({ id = "puck-preview" }) => {
         metadata
       },
       editMode: true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(DropZonePure, { zone: rootDroppableId })
+      children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(DropZonePure, { zone: rootDroppableId })
     })
-  ) : /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Render, { data: renderData, config, metadata });
-  (0, import_react72.useEffect)(() => {
+  ) : /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Render, { data: renderData, config, metadata });
+  (0, import_react73.useEffect)(() => {
     if (!iframe.enabled) {
       setStatus("READY");
     }
   }, [iframe.enabled]);
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
     "div",
     {
       className: getClassName29(),
@@ -11086,7 +11153,7 @@ var Preview2 = ({ id = "puck-preview" }) => {
           dispatch({ type: "setUi", ui: { itemSelector: null } });
         }
       },
-      children: iframe.enabled ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+      children: iframe.enabled ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
         AutoFrame_default,
         {
           id: "preview-frame",
@@ -11099,14 +11166,14 @@ var Preview2 = ({ id = "puck-preview" }) => {
             setStatus("MOUNTED");
           },
           frameRef: ref,
-          children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
+          children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
             if (Frame) {
-              return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Frame, { document: document2, children: inner });
+              return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Frame, { document: document2, children: inner });
             }
             return inner;
           } })
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
         "div",
         {
           id: "preview-frame",
@@ -11147,7 +11214,7 @@ var scrollIntoView = (el) => {
 // components/LayerTree/index.tsx
 init_lucide_react();
 init_root_droppable_id();
-var import_react73 = require("react");
+var import_react74 = require("react");
 
 // lib/on-scroll-end.ts
 init_react_import();
@@ -11171,7 +11238,7 @@ var onScrollEnd = (frame, cb) => {
 // components/LayerTree/index.tsx
 init_store();
 var import_shallow6 = require("zustand/react/shallow");
-var import_jsx_runtime73 = require("react/jsx-runtime");
+var import_jsx_runtime74 = require("react/jsx-runtime");
 var getClassName30 = get_class_name_factory_default("LayerTree", styles_module_default23);
 var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default23);
 var Layer = ({
@@ -11183,7 +11250,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_react73.useCallback)(
+  const setItemSelector = (0, import_react74.useCallback)(
     (itemSelector2) => {
       dispatch({ type: "setUi", ui: { itemSelector: itemSelector2 } });
     },
@@ -11203,7 +11270,7 @@ var Layer = ({
     )
   );
   const containsZone = zonesForItem.length > 0;
-  const zoneStore = (0, import_react73.useContext)(ZoneStoreContext);
+  const zoneStore = (0, import_react74.useContext)(ZoneStoreContext);
   const isHovering = useContextStore(
     ZoneStoreContext,
     (s) => s.hoveringComponent === itemId
@@ -11218,7 +11285,7 @@ var Layer = ({
   });
   const componentConfig = config.components[nodeData.data.type];
   const label = (_a = componentConfig == null ? void 0 : componentConfig["label"]) != null ? _a : nodeData.data.type.toString();
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
     "li",
     {
       className: getClassNameLayer({
@@ -11228,7 +11295,7 @@ var Layer = ({
         childIsSelected
       }),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
           "button",
           {
             type: "button",
@@ -11266,22 +11333,22 @@ var Layer = ({
               zoneStore.setState({ hoveringComponent: null });
             },
             children: [
-              containsZone && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+              containsZone && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
                 "div",
                 {
                   className: getClassNameLayer("chevron"),
                   title: isSelected ? "Collapse" : "Expand",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ChevronDown, { size: "12" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(ChevronDown, { size: "12" })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: getClassNameLayer("title"), children: [
-                /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: getClassNameLayer("icon"), children: nodeData.data.type === "Text" || nodeData.data.type === "Heading" ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Type, { size: "16" }) : /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(LayoutGrid, { size: "16" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: getClassNameLayer("name"), children: label })
+              /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: getClassNameLayer("title"), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: getClassNameLayer("icon"), children: nodeData.data.type === "Text" || nodeData.data.type === "Heading" ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Type, { size: "16" }) : /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(LayoutGrid, { size: "16" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: getClassNameLayer("name"), children: label })
               ] })
             ]
           }
         ) }),
-        containsZone && zonesForItem.map((subzone) => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(LayerTree, { zoneCompound: subzone }) }, subzone))
+        containsZone && zonesForItem.map((subzone) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(LayerTree, { zoneCompound: subzone }) }, subzone))
       ]
     }
   );
@@ -11307,15 +11374,15 @@ var LayerTree = ({
       }
     )
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_jsx_runtime73.Fragment, { children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: getClassName30("zoneTitle"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: getClassName30("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Layers, { size: "16" }) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_jsx_runtime74.Fragment, { children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: getClassName30("zoneTitle"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: getClassName30("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Layers, { size: "16" }) }),
       label
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("ul", { className: getClassName30(), children: [
-      contentIds.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: getClassName30("helper"), children: "No items" }),
+    /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("ul", { className: getClassName30(), children: [
+      contentIds.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: getClassName30("helper"), children: "No items" }),
       contentIds.map((itemId, i) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
           Layer,
           {
             index: i,
@@ -11331,7 +11398,7 @@ var LayerTree = ({
 
 // components/Puck/components/Outline/index.tsx
 init_store();
-var import_react74 = require("react");
+var import_react75 = require("react");
 
 // lib/data/find-zones-for-area.ts
 init_react_import();
@@ -11343,14 +11410,14 @@ var findZonesForArea = (state, area) => {
 
 // components/Puck/components/Outline/index.tsx
 var import_shallow7 = require("zustand/react/shallow");
-var import_jsx_runtime74 = require("react/jsx-runtime");
+var import_jsx_runtime75 = require("react/jsx-runtime");
 var Outline = () => {
   const outlineOverride = useAppStore((s) => s.overrides.outline);
   const rootZones = useAppStore(
     (0, import_shallow7.useShallow)((s) => findZonesForArea(s.state, "root"))
   );
-  const Wrapper = (0, import_react74.useMemo)(() => outlineOverride || "div", [outlineOverride]);
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Wrapper, { children: rootZones.map((zoneCompound) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+  const Wrapper = (0, import_react75.useMemo)(() => outlineOverride || "div", [outlineOverride]);
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Wrapper, { children: rootZones.map((zoneCompound) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
     LayerTree,
     {
       label: rootZones.length === 1 ? "" : zoneCompound.split(":")[1],
@@ -11363,7 +11430,7 @@ var Outline = () => {
 // components/Puck/components/Canvas/index.tsx
 init_react_import();
 init_css_box_model_esm();
-var import_react77 = require("react");
+var import_react78 = require("react");
 init_store();
 
 // components/ViewportControls/index.tsx
@@ -11371,7 +11438,7 @@ init_react_import();
 init_lucide_react();
 init_IconButton2();
 init_store();
-var import_react75 = require("react");
+var import_react76 = require("react");
 init_lib();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css#css-module
@@ -11379,11 +11446,11 @@ init_react_import();
 var styles_module_default24 = { "ViewportControls": "_ViewportControls_gejzr_1", "ViewportControls-divider": "_ViewportControls-divider_gejzr_15", "ViewportControls-zoomSelect": "_ViewportControls-zoomSelect_gejzr_21", "ViewportButton--isActive": "_ViewportButton--isActive_gejzr_38", "ViewportButton-inner": "_ViewportButton-inner_gejzr_38" };
 
 // components/ViewportControls/index.tsx
-var import_jsx_runtime75 = require("react/jsx-runtime");
+var import_jsx_runtime76 = require("react/jsx-runtime");
 var icons = {
-  Smartphone: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Smartphone, { size: 16 }),
-  Tablet: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Tablet, { size: 16 }),
-  Monitor: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Monitor, { size: 16 })
+  Smartphone: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Smartphone, { size: 16 }),
+  Tablet: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Tablet, { size: 16 }),
+  Monitor: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Monitor, { size: 16 })
 };
 var getClassName31 = get_class_name_factory_default("ViewportControls", styles_module_default24);
 var getClassNameButton = get_class_name_factory_default("ViewportButton", styles_module_default24);
@@ -11395,11 +11462,11 @@ var ViewportButton = ({
   onClick
 }) => {
   const viewports = useAppStore((s) => s.state.ui.viewports);
-  const [isActive, setIsActive] = (0, import_react75.useState)(false);
-  (0, import_react75.useEffect)(() => {
+  const [isActive, setIsActive] = (0, import_react76.useState)(false);
+  (0, import_react76.useEffect)(() => {
     setIsActive(width === viewports.current.width);
   }, [width, viewports.current.width]);
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
     IconButton,
     {
       type: "button",
@@ -11409,7 +11476,7 @@ var ViewportButton = ({
         e.stopPropagation();
         onClick({ width, height });
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: getClassNameButton("inner"), children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: getClassNameButton("inner"), children })
     }
   ) });
 };
@@ -11433,7 +11500,7 @@ var ViewportControls = ({
   const defaultsContainAutoZoom = defaultZoomOptions.find(
     (option) => option.value === autoZoom
   );
-  const zoomOptions = (0, import_react75.useMemo)(
+  const zoomOptions = (0, import_react76.useMemo)(
     () => [
       ...defaultZoomOptions,
       ...defaultsContainAutoZoom ? [] : [
@@ -11445,8 +11512,8 @@ var ViewportControls = ({
     ].filter((a) => a.value <= autoZoom).sort((a, b) => a.value > b.value ? 1 : -1),
     [autoZoom]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: getClassName31(), children: [
-    viewports.map((viewport, i) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: getClassName31(), children: [
+    viewports.map((viewport, i) => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
       ViewportButton,
       {
         height: viewport.height,
@@ -11457,8 +11524,8 @@ var ViewportControls = ({
       },
       i
     )),
-    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: getClassName31("divider") }),
-    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: getClassName31("divider") }),
+    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
       IconButton,
       {
         type: "button",
@@ -11473,10 +11540,10 @@ var ViewportControls = ({
             )].value
           );
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(ZoomOut, { size: 16 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(ZoomOut, { size: 16 })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
       IconButton,
       {
         type: "button",
@@ -11491,11 +11558,11 @@ var ViewportControls = ({
             )].value
           );
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(ZoomIn, { size: 16 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(ZoomIn, { size: 16 })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: getClassName31("divider") }),
-    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: getClassName31("divider") }),
+    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
       "select",
       {
         className: getClassName31("zoomSelect"),
@@ -11506,7 +11573,7 @@ var ViewportControls = ({
         onChange: (e) => {
           onZoom(parseFloat(e.currentTarget.value));
         },
-        children: zoomOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+        children: zoomOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
           "option",
           {
             value: option.value,
@@ -11530,23 +11597,23 @@ var import_shallow8 = require("zustand/react/shallow");
 
 // lib/frame-context.tsx
 init_react_import();
-var import_react76 = require("react");
-var import_jsx_runtime76 = require("react/jsx-runtime");
-var FrameContext = (0, import_react76.createContext)(null);
+var import_react77 = require("react");
+var import_jsx_runtime77 = require("react/jsx-runtime");
+var FrameContext = (0, import_react77.createContext)(null);
 var FrameProvider = ({
   children
 }) => {
-  const frameRef = (0, import_react76.useRef)(null);
-  const value = (0, import_react76.useMemo)(
+  const frameRef = (0, import_react77.useRef)(null);
+  const value = (0, import_react77.useMemo)(
     () => ({
       frameRef
     }),
     []
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(FrameContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(FrameContext.Provider, { value, children });
 };
 var useCanvasFrame = () => {
-  const context = (0, import_react76.useContext)(FrameContext);
+  const context = (0, import_react77.useContext)(FrameContext);
   if (context === null) {
     throw new Error("useCanvasFrame must be used within a FrameProvider");
   }
@@ -11554,7 +11621,7 @@ var useCanvasFrame = () => {
 };
 
 // components/Puck/components/Canvas/index.tsx
-var import_jsx_runtime77 = require("react/jsx-runtime");
+var import_jsx_runtime78 = require("react/jsx-runtime");
 var getClassName32 = get_class_name_factory_default("PuckCanvas", styles_module_default25);
 var ZOOM_ON_CHANGE = true;
 var TRANSITION_DURATION = 150;
@@ -11595,17 +11662,17 @@ var Canvas = () => {
       viewports: s.state.ui.viewports
     }))
   );
-  const [showTransition, setShowTransition] = (0, import_react77.useState)(false);
-  const isResizingRef = (0, import_react77.useRef)(false);
-  const defaultRender = (0, import_react77.useMemo)(() => {
-    const PuckDefault = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_jsx_runtime77.Fragment, { children });
+  const [showTransition, setShowTransition] = (0, import_react78.useState)(false);
+  const isResizingRef = (0, import_react78.useRef)(false);
+  const defaultRender = (0, import_react78.useMemo)(() => {
+    const PuckDefault = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_jsx_runtime78.Fragment, { children });
     return PuckDefault;
   }, []);
-  const CustomPreview = (0, import_react77.useMemo)(
+  const CustomPreview = (0, import_react78.useMemo)(
     () => overrides.preview || defaultRender,
     [overrides]
   );
-  const getFrameDimensions = (0, import_react77.useCallback)(() => {
+  const getFrameDimensions = (0, import_react78.useCallback)(() => {
     if (frameRef.current) {
       const frame = frameRef.current;
       const box = getBox(frame);
@@ -11613,7 +11680,7 @@ var Canvas = () => {
     }
     return { width: 0, height: 0 };
   }, [frameRef]);
-  (0, import_react77.useEffect)(() => {
+  (0, import_react78.useEffect)(() => {
     resetAutoZoom();
   }, [
     frameRef,
@@ -11623,7 +11690,7 @@ var Canvas = () => {
     rightSideBarWidth,
     viewports
   ]);
-  (0, import_react77.useEffect)(() => {
+  (0, import_react78.useEffect)(() => {
     const { height: frameHeight } = getFrameDimensions();
     if (viewports.current.height === "auto") {
       setZoomConfig(__spreadProps(__spreadValues({}, zoomConfig), {
@@ -11631,12 +11698,12 @@ var Canvas = () => {
       }));
     }
   }, [zoomConfig.zoom, getFrameDimensions, setZoomConfig]);
-  (0, import_react77.useEffect)(() => {
+  (0, import_react78.useEffect)(() => {
     if (ZOOM_ON_CHANGE) {
       resetAutoZoom();
     }
   }, [viewports.current.width, viewports]);
-  (0, import_react77.useEffect)(() => {
+  (0, import_react78.useEffect)(() => {
     if (!frameRef.current) return;
     const resizeObserver = new ResizeObserver(() => {
       if (!isResizingRef.current) {
@@ -11648,13 +11715,13 @@ var Canvas = () => {
       resizeObserver.disconnect();
     };
   }, [frameRef.current]);
-  const [showLoader, setShowLoader] = (0, import_react77.useState)(false);
-  (0, import_react77.useEffect)(() => {
+  const [showLoader, setShowLoader] = (0, import_react78.useState)(false);
+  (0, import_react78.useEffect)(() => {
     setTimeout(() => {
       setShowLoader(true);
     }, 500);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
     "div",
     {
       className: getClassName32({
@@ -11672,7 +11739,7 @@ var Canvas = () => {
         }
       },
       children: [
-        viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: getClassName32("controls"), children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+        viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: getClassName32("controls"), children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
           ViewportControls,
           {
             autoZoom: zoomConfig.autoZoom,
@@ -11701,8 +11768,8 @@ var Canvas = () => {
             }
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: getClassName32("inner"), ref: frameRef, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: getClassName32("inner"), ref: frameRef, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
             "div",
             {
               className: getClassName32("root"),
@@ -11719,10 +11786,10 @@ var Canvas = () => {
                 setShowTransition(false);
                 isResizingRef.current = false;
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(CustomPreview, { children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(Preview2, {}) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(CustomPreview, { children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Preview2, {}) })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: getClassName32("loader"), children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(Loader, { size: 24 }) })
+          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: getClassName32("loader"), children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Loader, { size: 24 }) })
         ] })
       ]
     }
@@ -11734,7 +11801,7 @@ init_default_viewports();
 
 // lib/use-loaded-overrides.ts
 init_react_import();
-var import_react78 = require("react");
+var import_react79 = require("react");
 
 // lib/load-overrides.ts
 init_react_import();
@@ -11776,26 +11843,26 @@ var useLoadedOverrides = ({
   overrides,
   plugins
 }) => {
-  return (0, import_react78.useMemo)(() => {
+  return (0, import_react79.useMemo)(() => {
     return loadOverrides({ overrides, plugins });
   }, [plugins, overrides]);
 };
 
 // components/DefaultOverride/index.tsx
 init_react_import();
-var import_jsx_runtime78 = require("react/jsx-runtime");
-var DefaultOverride = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_jsx_runtime78.Fragment, { children });
+var import_jsx_runtime79 = require("react/jsx-runtime");
+var DefaultOverride = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_jsx_runtime79.Fragment, { children });
 
 // lib/use-inject-css.ts
 init_react_import();
-var import_react79 = require("react");
+var import_react80 = require("react");
 var styles = ``;
 var useInjectStyleSheet = (initialStyles, iframeEnabled) => {
-  const [el, setEl] = (0, import_react79.useState)();
-  (0, import_react79.useEffect)(() => {
+  const [el, setEl] = (0, import_react80.useState)();
+  (0, import_react80.useEffect)(() => {
     setEl(document.createElement("style"));
   }, []);
-  (0, import_react79.useEffect)(() => {
+  (0, import_react80.useEffect)(() => {
     var _a;
     if (!el || typeof window === "undefined") {
       return;
@@ -11815,12 +11882,12 @@ var useInjectGlobalCss = (iframeEnabled) => {
 
 // lib/use-preview-mode-hotkeys.ts
 init_react_import();
-var import_react80 = require("react");
+var import_react81 = require("react");
 init_use_hotkey();
 init_store();
 var usePreviewModeHotkeys = () => {
   const appStore = useAppStoreApi();
-  const toggleInteractive = (0, import_react80.useCallback)(() => {
+  const toggleInteractive = (0, import_react81.useCallback)(() => {
     const dispatch = appStore.getState().dispatch;
     dispatch({
       type: "setUi",
@@ -11835,7 +11902,7 @@ var usePreviewModeHotkeys = () => {
 
 // lib/use-delete-hotkeys.ts
 init_react_import();
-var import_react81 = require("react");
+var import_react82 = require("react");
 init_use_hotkey();
 init_store();
 var isElementVisible = (element) => {
@@ -11872,7 +11939,7 @@ var shouldBlockDeleteHotkey = (e) => {
 };
 var useDeleteHotkeys = () => {
   const appStore = useAppStoreApi();
-  const deleteSelectedComponent = (0, import_react81.useCallback)(
+  const deleteSelectedComponent = (0, import_react82.useCallback)(
     (e) => {
       var _a;
       if (shouldBlockDeleteHotkey(e)) {
@@ -11903,7 +11970,7 @@ init_use_hotkey();
 
 // lib/use-puck.ts
 init_react_import();
-var import_react82 = require("react");
+var import_react83 = require("react");
 var import_zustand6 = require("zustand");
 init_make_state_public();
 init_get_item();
@@ -11938,9 +12005,12 @@ var generateUsePuck = (store) => {
       return parentNode.data;
     }
   };
+  storeData.__private = {
+    appState: store.state
+  };
   return storeData;
 };
-var UsePuckStoreContext = (0, import_react82.createContext)(
+var UsePuckStoreContext = (0, import_react83.createContext)(
   null
 );
 var convertToPickedStore = (store) => {
@@ -11954,12 +12024,12 @@ var convertToPickedStore = (store) => {
   };
 };
 var useRegisterUsePuckStore = (appStore) => {
-  const [usePuckStore] = (0, import_react82.useState)(
+  const [usePuckStore] = (0, import_react83.useState)(
     () => (0, import_zustand6.createStore)(
       () => generateUsePuck(convertToPickedStore(appStore.getState()))
     )
   );
-  (0, import_react82.useEffect)(() => {
+  (0, import_react83.useEffect)(() => {
     return appStore.subscribe(
       (store) => convertToPickedStore(store),
       (pickedStore) => {
@@ -11971,7 +12041,7 @@ var useRegisterUsePuckStore = (appStore) => {
 };
 function createUsePuck() {
   return function usePuck2(selector) {
-    const usePuckApi = (0, import_react82.useContext)(UsePuckStoreContext);
+    const usePuckApi = (0, import_react83.useContext)(UsePuckStoreContext);
     if (!usePuckApi) {
       throw new Error("usePuck must be used inside <Puck>.");
     }
@@ -11983,7 +12053,7 @@ function createUsePuck() {
   };
 }
 function usePuck() {
-  (0, import_react82.useEffect)(() => {
+  (0, import_react83.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."
     );
@@ -11991,7 +12061,7 @@ function usePuck() {
   return createUsePuck()((s) => s);
 }
 function useGetPuck() {
-  const usePuckApi = (0, import_react82.useContext)(UsePuckStoreContext);
+  const usePuckApi = (0, import_react83.useContext)(UsePuckStoreContext);
   if (!usePuckApi) {
     throw new Error("usePuckGet must be used inside <Puck>.");
   }
@@ -12004,7 +12074,7 @@ var import_fast_deep_equal = __toESM(require_fast_deep_equal());
 
 // components/Puck/components/Header/index.tsx
 init_react_import();
-var import_react83 = require("react");
+var import_react84 = require("react");
 init_store();
 init_lucide_react();
 init_IconButton();
@@ -12021,7 +12091,7 @@ var styles_module_default26 = { "MenuBar": "_MenuBar_8pf8c_1", "MenuBar--menuOpe
 
 // components/MenuBar/index.tsx
 init_store();
-var import_jsx_runtime79 = require("react/jsx-runtime");
+var import_jsx_runtime80 = require("react/jsx-runtime");
 var getClassName33 = get_class_name_factory_default("MenuBar", styles_module_default26);
 function MenuBar({
   menuOpen = false,
@@ -12032,7 +12102,7 @@ function MenuBar({
   const forward = useAppStore((s) => s.history.forward);
   const hasFuture = useAppStore((s) => s.history.hasFuture());
   const hasPast = useAppStore((s) => s.history.hasPast());
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
     "div",
     {
       className: getClassName33({ menuOpen }),
@@ -12046,30 +12116,30 @@ function MenuBar({
           setMenuOpen(false);
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: getClassName33("inner"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: getClassName33("history"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: getClassName33("inner"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: getClassName33("history"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
             IconButton,
             {
               type: "button",
               title: "undo",
               disabled: !hasPast,
               onClick: back,
-              children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Undo2, { size: 21 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Undo2, { size: 21 })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
             IconButton,
             {
               type: "button",
               title: "redo",
               disabled: !hasFuture,
               onClick: forward,
-              children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Redo2, { size: 21 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Redo2, { size: 21 })
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_jsx_runtime79.Fragment, { children: renderHeaderActions && renderHeaderActions() })
+        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_jsx_runtime80.Fragment, { children: renderHeaderActions && renderHeaderActions() })
       ] })
     }
   );
@@ -12083,7 +12153,7 @@ init_react_import();
 var styles_module_default27 = { "PuckHeader": "_PuckHeader_15xnq_1", "PuckHeader-inner": "_PuckHeader-inner_15xnq_10", "PuckHeader-toggle": "_PuckHeader-toggle_15xnq_20", "PuckHeader--rightSideBarVisible": "_PuckHeader--rightSideBarVisible_15xnq_27", "PuckHeader-rightSideBarToggle": "_PuckHeader-rightSideBarToggle_15xnq_27", "PuckHeader--leftSideBarVisible": "_PuckHeader--leftSideBarVisible_15xnq_28", "PuckHeader-leftSideBarToggle": "_PuckHeader-leftSideBarToggle_15xnq_28", "PuckHeader-title": "_PuckHeader-title_15xnq_32", "PuckHeader-path": "_PuckHeader-path_15xnq_36", "PuckHeader-tools": "_PuckHeader-tools_15xnq_43", "PuckHeader-menuButton": "_PuckHeader-menuButton_15xnq_49", "PuckHeader--menuOpen": "_PuckHeader--menuOpen_15xnq_54" };
 
 // components/Puck/components/Header/index.tsx
-var import_jsx_runtime80 = require("react/jsx-runtime");
+var import_jsx_runtime81 = require("react/jsx-runtime");
 var getClassName34 = get_class_name_factory_default("PuckHeader", styles_module_default27);
 var HeaderInner = () => {
   const {
@@ -12096,7 +12166,7 @@ var HeaderInner = () => {
   } = usePropsContext();
   const dispatch = useAppStore((s) => s.dispatch);
   const appStore = useAppStoreApi();
-  const defaultHeaderRender = (0, import_react83.useMemo)(() => {
+  const defaultHeaderRender = (0, import_react84.useMemo)(() => {
     if (renderHeader) {
       console.warn(
         "`renderHeader` is deprecated. Please use `overrides.header` and the `usePuck` hook instead"
@@ -12105,13 +12175,13 @@ var HeaderInner = () => {
         var _b = _a, { actions } = _b, props = __objRest(_b, ["actions"]);
         const Comp = renderHeader;
         const appState = useAppStore((s) => s.state);
-        return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
+        return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
       };
       return RenderHeader;
     }
     return DefaultOverride;
   }, [renderHeader]);
-  const defaultHeaderActionsRender = (0, import_react83.useMemo)(() => {
+  const defaultHeaderActionsRender = (0, import_react84.useMemo)(() => {
     if (renderHeaderActions) {
       console.warn(
         "`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `usePuck` hook instead."
@@ -12119,7 +12189,7 @@ var HeaderInner = () => {
       const RenderHeader = (props) => {
         const Comp = renderHeaderActions;
         const appState = useAppStore((s) => s.state);
-        return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
+        return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
       };
       return RenderHeader;
     }
@@ -12131,7 +12201,7 @@ var HeaderInner = () => {
   const CustomHeaderActions = useAppStore(
     (s) => s.overrides.headerActions || defaultHeaderActionsRender
   );
-  const [menuOpen, setMenuOpen] = (0, import_react83.useState)(false);
+  const [menuOpen, setMenuOpen] = (0, import_react84.useState)(false);
   const rootTitle = useAppStore((s) => {
     var _a, _b;
     const rootData = (_a = s.state.indexes.nodes["root"]) == null ? void 0 : _a.data;
@@ -12141,7 +12211,7 @@ var HeaderInner = () => {
   const rightSideBarVisible = useAppStore(
     (s) => s.state.ui.rightSideBarVisible
   );
-  const toggleSidebars = (0, import_react83.useCallback)(
+  const toggleSidebars = (0, import_react84.useCallback)(
     (sidebar) => {
       const widerViewport = window.matchMedia("(min-width: 638px)").matches;
       const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
@@ -12155,27 +12225,27 @@ var HeaderInner = () => {
     },
     [dispatch, leftSideBarVisible, rightSideBarVisible]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
     CustomHeader,
     {
-      actions: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_jsx_runtime80.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(CustomHeaderActions, { children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+      actions: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_jsx_runtime81.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(CustomHeaderActions, { children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
         Button,
         {
           onClick: () => {
             const data = appStore.getState().state.data;
             onPublish && onPublish(data);
           },
-          icon: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Globe, { size: "14px" }),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Globe, { size: "14px" }),
           children: "Publish"
         }
       ) }) }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
         "header",
         {
           className: getClassName34({ leftSideBarVisible, rightSideBarVisible }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: getClassName34("inner"), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: getClassName34("toggle"), children: [
-              /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: getClassName34("leftSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: getClassName34("inner"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: getClassName34("toggle"), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: getClassName34("leftSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
                 IconButton,
                 {
                   type: "button",
@@ -12183,10 +12253,10 @@ var HeaderInner = () => {
                     toggleSidebars("left");
                   },
                   title: "Toggle left sidebar",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(PanelLeft, { focusable: "false" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(PanelLeft, { focusable: "false" })
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: getClassName34("rightSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: getClassName34("rightSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
                 IconButton,
                 {
                   type: "button",
@@ -12194,19 +12264,19 @@ var HeaderInner = () => {
                     toggleSidebars("right");
                   },
                   title: "Toggle right sidebar",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(PanelRight, { focusable: "false" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(PanelRight, { focusable: "false" })
                 }
               ) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: getClassName34("title"), children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(Heading7, { rank: "2", size: "xs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: getClassName34("title"), children: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(Heading7, { rank: "2", size: "xs", children: [
               headerTitle || rootTitle || "Page",
-              headerPath && /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
+              headerPath && /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(import_jsx_runtime81.Fragment, { children: [
                 " ",
-                /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("code", { className: getClassName34("path"), children: headerPath })
+                /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("code", { className: getClassName34("path"), children: headerPath })
               ] })
             ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: getClassName34("tools"), children: [
-              /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: getClassName34("menuButton"), children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: getClassName34("tools"), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: getClassName34("menuButton"), children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
                 IconButton,
                 {
                   type: "button",
@@ -12214,23 +12284,23 @@ var HeaderInner = () => {
                     return setMenuOpen(!menuOpen);
                   },
                   title: "Toggle menu bar",
-                  children: menuOpen ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ChevronDown, { focusable: "false" })
+                  children: menuOpen ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ChevronDown, { focusable: "false" })
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
                 MenuBar,
                 {
                   dispatch,
                   onPublish,
                   menuOpen,
-                  renderHeaderActions: () => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(CustomHeaderActions, { children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+                  renderHeaderActions: () => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(CustomHeaderActions, { children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
                     Button,
                     {
                       onClick: () => {
                         const data = appStore.getState().state.data;
                         onPublish && onPublish(data);
                       },
-                      icon: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Globe, { size: "14px" }),
+                      icon: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Globe, { size: "14px" }),
                       children: "Publish"
                     }
                   ) }),
@@ -12244,14 +12314,14 @@ var HeaderInner = () => {
     }
   );
 };
-var Header = (0, import_react83.memo)(HeaderInner);
+var Header = (0, import_react84.memo)(HeaderInner);
 
 // components/Puck/components/Sidebar/index.tsx
 init_react_import();
 
 // components/Puck/components/ResizeHandle/index.tsx
 init_react_import();
-var import_react84 = require("react");
+var import_react85 = require("react");
 init_get_class_name_factory();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/ResizeHandle/styles.module.css#css-module
@@ -12260,7 +12330,7 @@ var styles_module_default28 = { "ResizeHandle": "_ResizeHandle_144bf_2", "Resize
 
 // components/Puck/components/ResizeHandle/index.tsx
 init_lib();
-var import_jsx_runtime81 = require("react/jsx-runtime");
+var import_jsx_runtime82 = require("react/jsx-runtime");
 var getClassName35 = get_class_name_factory_default("ResizeHandle", styles_module_default28);
 var ResizeHandle = ({
   position,
@@ -12270,11 +12340,11 @@ var ResizeHandle = ({
 }) => {
   const { frameRef } = useCanvasFrame();
   const resetAutoZoom = useResetAutoZoom(frameRef);
-  const handleRef = (0, import_react84.useRef)(null);
-  const isDragging = (0, import_react84.useRef)(false);
-  const startX = (0, import_react84.useRef)(0);
-  const startWidth = (0, import_react84.useRef)(0);
-  const handleMouseMove = (0, import_react84.useCallback)(
+  const handleRef = (0, import_react85.useRef)(null);
+  const isDragging = (0, import_react85.useRef)(false);
+  const startX = (0, import_react85.useRef)(0);
+  const startWidth = (0, import_react85.useRef)(0);
+  const handleMouseMove = (0, import_react85.useCallback)(
     (e) => {
       if (!isDragging.current) return;
       const delta = e.clientX - startX.current;
@@ -12285,7 +12355,7 @@ var ResizeHandle = ({
     },
     [onResize, position]
   );
-  const handleMouseUp = (0, import_react84.useCallback)(() => {
+  const handleMouseUp = (0, import_react85.useCallback)(() => {
     var _a;
     if (!isDragging.current) return;
     isDragging.current = false;
@@ -12301,7 +12371,7 @@ var ResizeHandle = ({
     onResizeEnd(finalWidth);
     resetAutoZoom();
   }, [onResizeEnd]);
-  const handleMouseDown = (0, import_react84.useCallback)(
+  const handleMouseDown = (0, import_react85.useCallback)(
     (e) => {
       var _a;
       isDragging.current = true;
@@ -12319,7 +12389,7 @@ var ResizeHandle = ({
     },
     [position, handleMouseMove, handleMouseUp]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
     "div",
     {
       ref: handleRef,
@@ -12337,7 +12407,7 @@ init_react_import();
 var styles_module_default29 = { "Sidebar": "_Sidebar_1xksb_1", "Sidebar--left": "_Sidebar--left_1xksb_8", "Sidebar--right": "_Sidebar--right_1xksb_14", "Sidebar-resizeHandle": "_Sidebar-resizeHandle_1xksb_20" };
 
 // components/Puck/components/Sidebar/index.tsx
-var import_jsx_runtime82 = require("react/jsx-runtime");
+var import_jsx_runtime83 = require("react/jsx-runtime");
 var getClassName36 = get_class_name_factory_default("Sidebar", styles_module_default29);
 var Sidebar = ({
   position,
@@ -12348,9 +12418,9 @@ var Sidebar = ({
   children
 }) => {
   if (!isVisible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { ref: sidebarRef, className: getClassName36({ [position]: true }), children }),
-    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: `${getClassName36("resizeHandle")}`, children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_jsx_runtime83.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { ref: sidebarRef, className: getClassName36({ [position]: true }), children }),
+    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: `${getClassName36("resizeHandle")}`, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
       ResizeHandle,
       {
         position,
@@ -12364,15 +12434,15 @@ var Sidebar = ({
 
 // lib/use-sidebar-resize.ts
 init_react_import();
-var import_react85 = require("react");
+var import_react86 = require("react");
 init_store();
 function useSidebarResize(position, dispatch) {
-  const [width, setWidth] = (0, import_react85.useState)(null);
-  const sidebarRef = (0, import_react85.useRef)(null);
+  const [width, setWidth] = (0, import_react86.useState)(null);
+  const sidebarRef = (0, import_react86.useRef)(null);
   const storeWidth = useAppStore(
     (s) => position === "left" ? s.state.ui.leftSideBarWidth : s.state.ui.rightSideBarWidth
   );
-  (0, import_react85.useEffect)(() => {
+  (0, import_react86.useEffect)(() => {
     if (typeof window !== "undefined" && !storeWidth) {
       try {
         const savedWidths = localStorage.getItem("puck-sidebar-widths");
@@ -12397,12 +12467,12 @@ function useSidebarResize(position, dispatch) {
       }
     }
   }, [dispatch, position, storeWidth]);
-  (0, import_react85.useEffect)(() => {
+  (0, import_react86.useEffect)(() => {
     if (storeWidth !== void 0) {
       setWidth(storeWidth);
     }
   }, [storeWidth]);
-  const handleResizeEnd = (0, import_react85.useCallback)(
+  const handleResizeEnd = (0, import_react86.useCallback)(
     (width2) => {
       dispatch({
         type: "setUi",
@@ -12457,7 +12527,7 @@ var toComponent = (item) => {
 };
 
 // components/Puck/index.tsx
-var import_jsx_runtime83 = require("react/jsx-runtime");
+var import_jsx_runtime84 = require("react/jsx-runtime");
 var getClassName37 = get_class_name_factory_default("Puck", styles_module_default19);
 var getLayoutClassName = get_class_name_factory_default("PuckLayout", styles_module_default19);
 var FieldSideBar = () => {
@@ -12467,13 +12537,13 @@ var FieldSideBar = () => {
       return s.selectedItem ? (_b = (_a = s.config.components[s.selectedItem.type]) == null ? void 0 : _a["label"]) != null ? _b : s.selectedItem.type.toString() : "Page";
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(SidebarSection, { noPadding: true, noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Fields, {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(SidebarSection, { noPadding: true, noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Fields, {}) });
 };
-var propsContext = (0, import_react86.createContext)({});
+var propsContext = (0, import_react87.createContext)({});
 function PropsProvider(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(propsContext.Provider, { value: props, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(propsContext.Provider, { value: props, children: props.children });
 }
-var usePropsContext = () => (0, import_react86.useContext)(propsContext);
+var usePropsContext = () => (0, import_react87.useContext)(propsContext);
 function PuckProvider({ children }) {
   const {
     config,
@@ -12490,14 +12560,14 @@ function PuckProvider({ children }) {
     onAction,
     fieldTransforms
   } = usePropsContext();
-  const iframe = (0, import_react86.useMemo)(
+  const iframe = (0, import_react87.useMemo)(
     () => __spreadValues({
       enabled: true,
       waitForStyles: true
     }, _iframe),
     [_iframe]
   );
-  const [generatedAppState] = (0, import_react86.useState)(() => {
+  const [generatedAppState] = (0, import_react87.useState)(() => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i;
     const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUi);
     let clientUiState = {};
@@ -12561,7 +12631,7 @@ function PuckProvider({ children }) {
     return walkAppState(newAppState, config);
   });
   const { appendData = true } = _initialHistory || {};
-  const [blendedHistories] = (0, import_react86.useState)(
+  const [blendedHistories] = (0, import_react87.useState)(
     [
       ...(_initialHistory == null ? void 0 : _initialHistory.histories) || [],
       ...appendData ? [{ state: generatedAppState }] : []
@@ -12575,7 +12645,7 @@ function PuckProvider({ children }) {
       });
     })
   );
-  const initialHistoryIndex = (0, import_react86.useMemo)(() => {
+  const initialHistoryIndex = (0, import_react87.useMemo)(() => {
     if ((_initialHistory == null ? void 0 : _initialHistory.index) !== void 0 && (_initialHistory == null ? void 0 : _initialHistory.index) >= 0 && (_initialHistory == null ? void 0 : _initialHistory.index) < blendedHistories.length) {
       return _initialHistory == null ? void 0 : _initialHistory.index;
     }
@@ -12586,7 +12656,7 @@ function PuckProvider({ children }) {
     overrides,
     plugins
   });
-  const loadedFieldTransforms = (0, import_react86.useMemo)(() => {
+  const loadedFieldTransforms = (0, import_react87.useMemo)(() => {
     const _plugins = plugins || [];
     const pluginFieldTransforms = _plugins.reduce(
       (acc, plugin) => __spreadValues(__spreadValues({}, acc), plugin.fieldTransforms),
@@ -12594,7 +12664,7 @@ function PuckProvider({ children }) {
     );
     return __spreadValues(__spreadValues({}, pluginFieldTransforms), fieldTransforms);
   }, [fieldTransforms, plugins]);
-  const generateAppStore = (0, import_react86.useCallback)(
+  const generateAppStore = (0, import_react87.useCallback)(
     (state) => {
       return {
         state,
@@ -12620,15 +12690,15 @@ function PuckProvider({ children }) {
       loadedFieldTransforms
     ]
   );
-  const [appStore] = (0, import_react86.useState)(
+  const [appStore] = (0, import_react87.useState)(
     () => createAppStore(generateAppStore(initialAppState))
   );
-  (0, import_react86.useEffect)(() => {
+  (0, import_react87.useEffect)(() => {
     if (process.env.NODE_ENV !== "production") {
       window.__PUCK_INTERNAL_DO_NOT_USE = { appStore };
     }
   }, [appStore]);
-  (0, import_react86.useEffect)(() => {
+  (0, import_react87.useEffect)(() => {
     const state = appStore.getState().state;
     appStore.setState(__spreadValues({}, generateAppStore(state)));
   }, [config, plugins, loadedOverrides, viewports, iframe, onAction, metadata]);
@@ -12637,8 +12707,8 @@ function PuckProvider({ children }) {
     index: initialHistoryIndex,
     initialAppState
   });
-  const previousData = (0, import_react86.useRef)(null);
-  (0, import_react86.useEffect)(() => {
+  const previousData = (0, import_react87.useRef)(null);
+  (0, import_react87.useEffect)(() => {
     return appStore.subscribe(
       (s) => s.state.data,
       (data) => {
@@ -12652,11 +12722,11 @@ function PuckProvider({ children }) {
   }, [onChange]);
   useRegisterPermissionsSlice(appStore, permissions);
   const uPuckStore = useRegisterUsePuckStore(appStore);
-  (0, import_react86.useEffect)(() => {
+  (0, import_react87.useEffect)(() => {
     const { resolveAndCommitData } = appStore.getState();
     resolveAndCommitData();
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(UsePuckStoreContext.Provider, { value: uPuckStore, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(UsePuckStoreContext.Provider, { value: uPuckStore, children }) });
 }
 function PuckLayout({ children }) {
   const {
@@ -12664,7 +12734,7 @@ function PuckLayout({ children }) {
     dnd,
     initialHistory: _initialHistory
   } = usePropsContext();
-  const iframe = (0, import_react86.useMemo)(
+  const iframe = (0, import_react87.useMemo)(
     () => __spreadValues({
       enabled: true,
       waitForStyles: true
@@ -12689,7 +12759,7 @@ function PuckLayout({ children }) {
     sidebarRef: rightSidebarRef,
     handleResizeEnd: handleRightSidebarResizeEnd
   } = useSidebarResize("right", dispatch);
-  (0, import_react86.useEffect)(() => {
+  (0, import_react87.useEffect)(() => {
     if (!window.matchMedia("(min-width: 638px)").matches) {
       dispatch({
         type: "setUi",
@@ -12713,18 +12783,18 @@ function PuckLayout({ children }) {
     };
   }, []);
   const overrides = useAppStore((s) => s.overrides);
-  const CustomPuck = (0, import_react86.useMemo)(
+  const CustomPuck = (0, import_react87.useMemo)(
     () => overrides.puck || DefaultOverride,
     [overrides]
   );
-  const [mounted, setMounted] = (0, import_react86.useState)(false);
-  (0, import_react86.useEffect)(() => {
+  const [mounted, setMounted] = (0, import_react87.useState)(false);
+  (0, import_react87.useEffect)(() => {
     setMounted(true);
   }, []);
   const ready = useAppStore((s) => s.status === "READY");
   useMonitorHotkeys();
   useDeleteHotkeys();
-  (0, import_react86.useEffect)(() => {
+  (0, import_react87.useEffect)(() => {
     if (ready && iframe.enabled) {
       const frameDoc = getFrame();
       if (frameDoc) {
@@ -12740,8 +12810,8 @@ function PuckLayout({ children }) {
   if (rightWidth) {
     layoutOptions["--puck-user-right-side-bar-width"] = `${rightWidth}px`;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: `Puck ${getClassName37()}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(CustomPuck, { children: children || /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(FrameProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: `Puck ${getClassName37()}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(CustomPuck, { children: children || /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(FrameProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
       "div",
       {
         className: getLayoutClassName({
@@ -12749,14 +12819,14 @@ function PuckLayout({ children }) {
           mounted,
           rightSideBarVisible
         }),
-        children: /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
           "div",
           {
             className: getLayoutClassName("inner"),
             style: layoutOptions,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Header, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Header, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
                 Sidebar,
                 {
                   position: "left",
@@ -12765,13 +12835,13 @@ function PuckLayout({ children }) {
                   onResize: setLeftWidth,
                   onResizeEnd: handleLeftSidebarResizeEnd,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Components, {}) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(SidebarSection, { title: "Outline", children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Outline, {}) })
+                    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Components, {}) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(SidebarSection, { title: "Outline", children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Outline, {}) })
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Canvas, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Canvas, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
                 Sidebar,
                 {
                   position: "right",
@@ -12779,7 +12849,7 @@ function PuckLayout({ children }) {
                   isVisible: rightSideBarVisible,
                   onResize: setRightWidth,
                   onResizeEnd: handleRightSidebarResizeEnd,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(FieldSideBar, {})
+                  children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(FieldSideBar, {})
                 }
               )
             ]
@@ -12787,11 +12857,11 @@ function PuckLayout({ children }) {
         )
       }
     ) }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { id: "puck-portal-root", className: getClassName37("portal") })
+    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { id: "puck-portal-root", className: getClassName37("portal") })
   ] });
 }
 function Puck(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(PropsProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(PuckProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(PuckLayout, __spreadValues({}, props)) })) }));
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(PropsProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(PuckProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(PuckLayout, __spreadValues({}, props)) })) }));
 }
 Puck.Components = Components;
 Puck.Fields = Fields;