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

package/dist/{chunk-N5XMZOMC.mjs → chunk-Z476VA6G.mjs}

@@ -1,3 +1,7 @@
+import {
+  EditorInner,
+  LoadedRichTextMenu
+} from "./chunk-2Q4PACDA.mjs";
 import {
   RichTextRenderFallback,
   SlotRender,
@@ -7,17 +11,13 @@ import {
   useFieldTransforms,
   useRichtextProps,
   useSlots
-} from "./chunk-C2TVYIYC.mjs";
-import {
-  EditorInner,
-  LoadedRichTextMenu
-} from "./chunk-FNWOH4R6.mjs";
+} from "./chunk-Y656T6AQ.mjs";
 import {
   ActionBar,
   IconButton,
   LoadedRichTextMenuInner,
   Loader
-} from "./chunk-K3V4LVUL.mjs";
+} from "./chunk-BSDEIOEK.mjs";
 import {
   ChevronDown,
   ChevronRight,
@@ -50,14 +50,8 @@ import {
   ZoomOut,
   appStoreContext,
   createAppStore,
-  generateId,
   getBox,
-  getItem,
-  insert,
-  insertAction,
-  makeStatePublic,
   monitorHotkeys,
-  populateIds,
   reorder,
   replace,
   useAppStore,
@@ -68,11 +62,24 @@ import {
   useRegisterHistorySlice,
   useRegisterPermissionsSlice,
   useResetAutoZoom
-} from "./chunk-7KY6RHEY.mjs";
+} from "./chunk-DAQLMM2T.mjs";
+import {
+  generateId,
+  getItem,
+  insert,
+  insertAction,
+  makeStatePublic,
+  populateIds
+} from "./chunk-QBGM4ELA.mjs";
 import {
   defaultAppState,
+  defaultViewports
+} from "./chunk-T3WX7XJ6.mjs";
+import {
+  get_class_name_factory_default
+} from "./chunk-Y2EFNT5P.mjs";
+import {
   defaultSlots,
-  defaultViewports,
   expandNode,
   rootAreaId,
   rootDroppableId,
@@ -80,7 +87,7 @@ import {
   setupZone,
   walkAppState,
   walkField
-} from "./chunk-DJSH5REF.mjs";
+} from "./chunk-NLUHDYVR.mjs";
 import {
   __async,
   __commonJS,
@@ -88,9 +95,8 @@ import {
   __spreadProps,
   __spreadValues,
   __toESM,
-  get_class_name_factory_default,
   init_react_import
-} from "./chunk-DCSQEDMK.mjs";
+} from "./chunk-M6W7YEVX.mjs";
 
 // ../../node_modules/fast-deep-equal/index.js
 var require_fast_deep_equal = __commonJS({
@@ -1696,7 +1702,7 @@ EditorFallback.displayName = "EditorFallback";
 // components/AutoField/fields/RichtextField/index.tsx
 import { Fragment as Fragment3, jsx as jsx15 } from "react/jsx-runtime";
 var Editor = lazy(
-  () => import("./Editor-N46HUQEC.mjs").then((m) => ({
+  () => import("./Editor-O447AVCX.mjs").then((m) => ({
     default: m.Editor
   }))
 );
@@ -1896,17 +1902,18 @@ function AutoFieldInternal(props) {
   const resolvedId = id || defaultId;
   const render = useMemo3(
     () => {
-      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]
@@ -1953,7 +1960,7 @@ function AutoFieldInternal(props) {
   }, [field.type]);
   const fieldKey = field.type === "custom" ? field.key : void 0;
   let FieldComponent = useMemo3(() => {
-    if (field.type === "custom") {
+    if (field.type === "custom" && !render[field.type]) {
       if (!field.render) {
         return null;
       }
@@ -2046,7 +2053,7 @@ init_react_import();
 init_react_import();
 import {
   forwardRef,
-  memo as memo4,
+  memo as memo5,
   useCallback as useCallback11,
   useContext as useContext7,
   useEffect as useEffect15,
@@ -4106,12 +4113,12 @@ import {
 } from "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
 var Editor2 = lazy2(
-  () => import("./Editor-N46HUQEC.mjs").then((m) => ({
+  () => import("./Editor-O447AVCX.mjs").then((m) => ({
     default: m.Editor
   }))
 );
 var RichTextRender = lazy2(
-  () => import("./Render-Y567PGZ7.mjs").then((m) => ({
+  () => import("./Render-OFE6QLI2.mjs").then((m) => ({
     default: m.RichTextRender
   }))
 );
@@ -4215,12 +4222,70 @@ var getRichTextTransform = () => ({
   }
 });
 
+// components/MemoizeComponent/index.tsx
+init_react_import();
+import { deepEqual } from "fast-equals";
+import { memo as memo4 } from "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
+import { jsx as jsx26 } from "react/jsx-runtime";
+var RenderComponent = ({
+  Component,
+  componentProps: renderProps
+}) => {
+  return /* @__PURE__ */ jsx26(Component, __spreadValues({}, renderProps));
+};
+var MemoizeComponent = memo4(RenderComponent, (prev, next) => {
+  let puckEquals = true;
+  if ("puck" in prev.componentProps && "puck" in next.componentProps) {
+    puckEquals = deepEqual(prev.componentProps.puck, next.componentProps.puck);
+  }
+  return prev.Component === next.Component && shallowEqual(prev.componentProps, next.componentProps, ["puck"]) && puckEquals;
+});
+
 // components/DropZone/index.tsx
-import { Fragment as Fragment7, jsx as jsx26, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs9 } from "react/jsx-runtime";
 var getClassName16 = get_class_name_factory_default("DropZone", styles_module_default9);
 var getRandomColor = () => `#${Math.floor(Math.random() * 16777215).toString(16)}`;
 var RENDER_DEBUG = false;
-var DropZoneEditPure = (props) => /* @__PURE__ */ jsx26(DropZoneEdit, __spreadValues({}, props));
+var InsertPreview = ({
+  element,
+  label,
+  override
+}) => {
+  if (element) {
+    return (
+      // Safe to use this since the HTML is set by the user
+      /* @__PURE__ */ jsx27("div", { dangerouslySetInnerHTML: { __html: element.outerHTML } })
+    );
+  }
+  return /* @__PURE__ */ jsx27(DrawerItemInner, { name: label, children: override });
+};
+var DropZoneEditPure = (props) => /* @__PURE__ */ jsx27(DropZoneEdit, __spreadValues({}, props));
 var DropZoneChild = ({
   zoneCompound,
   componentId,
@@ -4298,19 +4363,6 @@ 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 = useMemo8(
-    () => 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__ */ jsx26("div", { dangerouslySetInnerHTML: { __html: item.element.outerHTML } })
-        );
-      }
-      return /* @__PURE__ */ jsx26(DrawerItemInner, { name: label, children: (_a2 = overrides.componentItem) != null ? _a2 : overrides.drawerItem });
-    },
-    [componentId, label, overrides]
-  );
   const defaultsProps = useMemo8(
     () => __spreadProps(__spreadValues(__spreadValues({}, componentConfig == null ? void 0 : componentConfig.defaultProps), item == null ? void 0 : item.props), {
       puck: puckProps,
@@ -4330,7 +4382,7 @@ var DropZoneChild = ({
   const plugins = useAppStore((s) => s.plugins);
   const userFieldTransforms = useAppStore((s) => s.fieldTransforms);
   const combinedFieldTransforms = useMemo8(
-    () => __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, getSlotTransform(DropZoneEditPure, (slotProps) => /* @__PURE__ */ jsx26(ContextSlotRender, { componentId, zone: slotProps.zone }))), getInlineTextTransform()), getRichTextTransform()), plugins.reduce(
+    () => __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, getSlotTransform(DropZoneEditPure, (slotProps) => /* @__PURE__ */ jsx27(ContextSlotRender, { componentId, zone: slotProps.zone }))), getInlineTextTransform()), getRichTextTransform()), plugins.reduce(
       (acc, plugin) => __spreadValues(__spreadValues({}, acc), plugin.fieldTransforms),
       {}
     )), userFieldTransforms),
@@ -4344,16 +4396,13 @@ var DropZoneChild = ({
     isLoading
   );
   if (!item) return;
-  let Render2 = componentConfig ? componentConfig.render : () => /* @__PURE__ */ jsxs9("div", { style: { padding: 48, textAlign: "center" }, children: [
+  const Render2 = componentConfig ? componentConfig.render : () => /* @__PURE__ */ jsxs9("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__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     DraggableComponent,
     {
       id: componentId,
@@ -4367,18 +4416,38 @@ var DropZoneChild = ({
       autoDragAxis: dragAxis,
       userDragAxis: collisionAxis,
       inDroppableZone,
-      children: (dragRef) => (componentConfig == null ? void 0 : componentConfig.inline) && !isInserting ? /* @__PURE__ */ jsx26(Fragment7, { children: /* @__PURE__ */ jsx26(
-        Render2,
-        __spreadProps(__spreadValues({}, transformedProps), {
-          puck: __spreadProps(__spreadValues({}, transformedProps.puck), {
-            dragRef
-          })
-        })
-      ) }) : /* @__PURE__ */ jsx26("div", { ref: dragRef, children: /* @__PURE__ */ jsx26(Render2, __spreadValues({}, transformedProps)) })
+      children: (dragRef) => {
+        var _a2;
+        if ((componentConfig == null ? void 0 : componentConfig.inline) && !isInserting) {
+          return /* @__PURE__ */ jsx27(
+            MemoizeComponent,
+            {
+              Component: Render2,
+              componentProps: __spreadProps(__spreadValues({}, transformedProps), {
+                puck: __spreadProps(__spreadValues({}, transformedProps.puck), { dragRef })
+              })
+            }
+          );
+        }
+        return /* @__PURE__ */ jsx27("div", { ref: dragRef, children: isInserting ? /* @__PURE__ */ jsx27(
+          InsertPreview,
+          {
+            label,
+            override: (_a2 = overrides.componentItem) != null ? _a2 : overrides.drawerItem,
+            element: "element" in item && item.element ? item.element : void 0
+          }
+        ) : /* @__PURE__ */ jsx27(
+          MemoizeComponent,
+          {
+            Component: Render2,
+            componentProps: transformedProps
+          }
+        ) });
+      }
     }
   );
 };
-var DropZoneChildMemo = memo4(DropZoneChild);
+var DropZoneChildMemo = memo5(DropZoneChild);
 var DropZoneEdit = forwardRef(
   function DropZoneEditInternal({
     zone,
@@ -4531,8 +4600,14 @@ var DropZoneEdit = forwardRef(
       userMinEmptyHeight,
       ref
     });
+    const setRefs = useCallback11(
+      (node) => {
+        assignRefs([ref, dropRef, userRef], node);
+      },
+      [dropRef]
+    );
     const El = as != null ? as : "div";
-    return /* @__PURE__ */ jsx26(
+    return /* @__PURE__ */ jsx27(
       El,
       {
         className: `${getClassName16({
@@ -4543,9 +4618,7 @@ var DropZoneEdit = 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), {
@@ -4553,7 +4626,7 @@ var DropZoneEdit = forwardRef(
           backgroundColor: RENDER_DEBUG ? getRandomColor() : style == null ? void 0 : style.backgroundColor
         }),
         children: contentIdsWithPreview.map((componentId, i) => {
-          return /* @__PURE__ */ jsx26(
+          return /* @__PURE__ */ jsx27(
             DropZoneChildMemo,
             {
               zoneCompound,
@@ -4576,7 +4649,7 @@ var DropZoneRenderItem = ({
   metadata
 }) => {
   const Component = config.components[item.type];
-  const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ jsx26(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
+  const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ jsx27(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
   const nextContextValue = useMemo8(
     () => ({
       areaId: props.id,
@@ -4585,7 +4658,7 @@ var DropZoneRenderItem = ({
     [props]
   );
   const richtextProps = useRichtextProps(Component.fields, props);
-  return /* @__PURE__ */ jsx26(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx27(
     Component.render,
     __spreadProps(__spreadValues(__spreadValues({}, props), richtextProps), {
       puck: __spreadProps(__spreadValues({}, props.puck), {
@@ -4595,7 +4668,7 @@ var DropZoneRenderItem = ({
     })
   ) }, props.id);
 };
-var DropZoneRenderPure = (props) => /* @__PURE__ */ jsx26(DropZoneRender, __spreadValues({}, props));
+var DropZoneRenderPure = (props) => /* @__PURE__ */ jsx27(DropZoneRender, __spreadValues({}, props));
 var DropZoneRender = forwardRef(
   function DropZoneRenderInternal({ className, style, zone, as }, ref) {
     const ctx = useContext7(dropZoneContext);
@@ -4617,10 +4690,10 @@ var DropZoneRender = forwardRef(
     if (zoneCompound !== rootDroppableId) {
       content = setupZone(data, zoneCompound).zones[zoneCompound];
     }
-    return /* @__PURE__ */ jsx26(El, { className, style, ref, children: content.map((item) => {
+    return /* @__PURE__ */ jsx27(El, { className, style, ref, children: content.map((item) => {
       const Component = config.components[item.type];
       if (Component) {
-        return /* @__PURE__ */ jsx26(
+        return /* @__PURE__ */ jsx27(
           DropZoneRenderItem,
           {
             config,
@@ -4634,20 +4707,20 @@ var DropZoneRender = forwardRef(
     }) });
   }
 );
-var DropZonePure = (props) => /* @__PURE__ */ jsx26(DropZone, __spreadValues({}, props));
+var DropZonePure = (props) => /* @__PURE__ */ jsx27(DropZone, __spreadValues({}, props));
 var DropZone = forwardRef(
   function DropZone2(props, ref) {
     const ctx = useContext7(dropZoneContext);
     if ((ctx == null ? void 0 : ctx.mode) === "edit") {
-      return /* @__PURE__ */ jsx26(Fragment7, { children: /* @__PURE__ */ jsx26(DropZoneEdit, __spreadProps(__spreadValues({}, props), { ref })) });
+      return /* @__PURE__ */ jsx27(Fragment7, { children: /* @__PURE__ */ jsx27(DropZoneEdit, __spreadProps(__spreadValues({}, props), { ref })) });
     }
-    return /* @__PURE__ */ jsx26(Fragment7, { children: /* @__PURE__ */ jsx26(DropZoneRender, __spreadProps(__spreadValues({}, props), { ref })) });
+    return /* @__PURE__ */ jsx27(Fragment7, { children: /* @__PURE__ */ jsx27(DropZoneRender, __spreadProps(__spreadValues({}, props), { ref })) });
   }
 );
 
 // components/Render/index.tsx
 import React3, { useMemo as useMemo9 } from "react";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var renderContext = React3.createContext({
   config: { components: {} },
   data: { root: {}, content: [] },
@@ -4679,7 +4752,7 @@ function Render({
   const propsWithSlots = useSlots(
     config,
     { type: "root", props: pageProps },
-    (props) => /* @__PURE__ */ jsx27(SlotRender, __spreadProps(__spreadValues({}, props), { config, metadata }))
+    (props) => /* @__PURE__ */ jsx28(SlotRender, __spreadProps(__spreadValues({}, props), { config, metadata }))
   );
   const richtextProps = useRichtextProps((_a = config.root) == null ? void 0 : _a.fields, pageProps);
   const nextContextValue = useMemo9(
@@ -4690,9 +4763,9 @@ function Render({
     []
   );
   if ((_b = config.root) == null ? void 0 : _b.render) {
-    return /* @__PURE__ */ jsx27(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ jsx27(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx27(config.root.render, __spreadProps(__spreadValues(__spreadValues({}, propsWithSlots), richtextProps), { children: /* @__PURE__ */ jsx27(DropZoneRenderPure, { zone: rootZone }) })) }) });
+    return /* @__PURE__ */ jsx28(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ jsx28(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx28(config.root.render, __spreadProps(__spreadValues(__spreadValues({}, propsWithSlots), richtextProps), { children: /* @__PURE__ */ jsx28(DropZoneRenderPure, { zone: rootZone }) })) }) });
   }
-  return /* @__PURE__ */ jsx27(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ jsx27(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx27(DropZoneRenderPure, { zone: rootZone }) }) });
+  return /* @__PURE__ */ jsx28(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ jsx28(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx28(DropZoneRenderPure, { zone: rootZone }) }) });
 }
 
 // lib/use-puck.ts
@@ -4730,6 +4803,9 @@ var generateUsePuck = (store) => {
       return parentNode.data;
     }
   };
+  storeData.__private = {
+    appState: store.state
+  };
   return storeData;
 };
 var UsePuckStoreContext = createContext4(
@@ -4854,7 +4930,7 @@ var useBreadcrumbs = (renderCount) => {
 };
 
 // components/SidebarSection/index.tsx
-import { jsx as jsx28, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs10 } from "react/jsx-runtime";
 var getClassName17 = get_class_name_factory_default("SidebarSection", styles_module_default12);
 var SidebarSection = ({
   children,
@@ -4873,9 +4949,9 @@ var SidebarSection = ({
       className: getClassName17({ noBorderTop, noPadding }),
       style: { background },
       children: [
-        /* @__PURE__ */ jsx28("div", { className: getClassName17("title"), children: /* @__PURE__ */ jsxs10("div", { className: getClassName17("breadcrumbs"), children: [
+        /* @__PURE__ */ jsx29("div", { className: getClassName17("title"), children: /* @__PURE__ */ jsxs10("div", { className: getClassName17("breadcrumbs"), children: [
           showBreadcrumbs ? breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ jsxs10("div", { className: getClassName17("breadcrumb"), children: [
-            /* @__PURE__ */ jsx28(
+            /* @__PURE__ */ jsx29(
               "button",
               {
                 type: "button",
@@ -4884,12 +4960,12 @@ var SidebarSection = ({
                 children: breadcrumb.label
               }
             ),
-            /* @__PURE__ */ jsx28(ChevronRight, { size: 16 })
+            /* @__PURE__ */ jsx29(ChevronRight, { size: 16 })
           ] }, i)) : null,
-          /* @__PURE__ */ jsx28("div", { className: getClassName17("heading"), children: /* @__PURE__ */ jsx28(Heading, { rank: "2", size: "xs", children: title }) })
+          /* @__PURE__ */ jsx29("div", { className: getClassName17("heading"), children: /* @__PURE__ */ jsx29(Heading, { rank: "2", size: "xs", children: title }) })
         ] }) }),
-        /* @__PURE__ */ jsx28("div", { className: getClassName17("content"), children }),
-        isLoading && /* @__PURE__ */ jsx28("div", { className: getClassName17("loadingOverlay"), children: /* @__PURE__ */ jsx28(Loader, { size: 32 }) })
+        /* @__PURE__ */ jsx29("div", { className: getClassName17("content"), children }),
+        isLoading && /* @__PURE__ */ jsx29("div", { className: getClassName17("loadingOverlay"), children: /* @__PURE__ */ jsx29(Loader, { size: 32 }) })
       ]
     }
   );
@@ -4907,14 +4983,14 @@ init_react_import();
 var styles_module_default14 = { "PuckFields": "_PuckFields_10bh7_1", "PuckFields--isLoading": "_PuckFields--isLoading_10bh7_6", "PuckFields-loadingOverlay": "_PuckFields-loadingOverlay_10bh7_10", "PuckFields-loadingOverlayInner": "_PuckFields-loadingOverlayInner_10bh7_25", "PuckFields-field": "_PuckFields-field_10bh7_32", "PuckFields--wrapFields": "_PuckFields--wrapFields_10bh7_36" };
 
 // components/Puck/components/Fields/index.tsx
-import { memo as memo5, useCallback as useCallback12, useMemo as useMemo11 } from "react";
+import { memo as memo6, useCallback as useCallback12, useMemo as useMemo11 } from "react";
 import { useShallow as useShallow5 } from "zustand/react/shallow";
-import { Fragment as Fragment8, jsx as jsx29, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx30, jsxs as jsxs11 } from "react/jsx-runtime";
 var getClassName18 = get_class_name_factory_default("PuckFields", styles_module_default14);
 var DefaultFields = ({
   children
 }) => {
-  return /* @__PURE__ */ jsx29(Fragment8, { children });
+  return /* @__PURE__ */ jsx30(Fragment8, { children });
 };
 var createOnChange = (fieldName, appStore) => (value, updatedUi) => __async(null, null, function* () {
   const { dispatch, state, selectedItem, resolveComponentData } = appStore.getState();
@@ -4985,7 +5061,7 @@ var FieldsChild = ({ fieldName }) => {
   const { visible = true } = field != null ? field : {};
   if (!field || !id || !visible) return null;
   if (field.type === "slot") return null;
-  return /* @__PURE__ */ jsx29("div", { className: getClassName18("field"), children: /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30("div", { className: getClassName18("field"), children: /* @__PURE__ */ jsx30(
     AutoFieldPrivate,
     {
       field,
@@ -4997,7 +5073,7 @@ var FieldsChild = ({ fieldName }) => {
     }
   ) }, id);
 };
-var FieldsChildMemo = memo5(FieldsChild);
+var FieldsChildMemo = memo6(FieldsChild);
 var FieldsInternal = ({ wrapFields = true }) => {
   const overrides = useAppStore((s) => s.overrides);
   const componentResolving = useAppStore((s) => {
@@ -5031,13 +5107,13 @@ var FieldsInternal = ({ wrapFields = true }) => {
         e.preventDefault();
       },
       children: [
-        /* @__PURE__ */ jsx29(Wrapper, { isLoading, itemSelector, children: fieldNames.map((fieldName) => /* @__PURE__ */ jsx29(FieldsChildMemo, { fieldName }, fieldName)) }),
-        isLoading && /* @__PURE__ */ jsx29("div", { className: getClassName18("loadingOverlay"), children: /* @__PURE__ */ jsx29("div", { className: getClassName18("loadingOverlayInner"), children: /* @__PURE__ */ jsx29(Loader, { size: 16 }) }) })
+        /* @__PURE__ */ jsx30(Wrapper, { isLoading, itemSelector, children: fieldNames.map((fieldName) => /* @__PURE__ */ jsx30(FieldsChildMemo, { fieldName }, fieldName)) }),
+        isLoading && /* @__PURE__ */ jsx30("div", { className: getClassName18("loadingOverlay"), children: /* @__PURE__ */ jsx30("div", { className: getClassName18("loadingOverlayInner"), children: /* @__PURE__ */ jsx30(Loader, { size: 16 }) }) })
       ]
     }
   );
 };
-var Fields = memo5(FieldsInternal);
+var Fields = memo6(FieldsInternal);
 
 // components/Puck/components/Components/index.tsx
 init_react_import();
@@ -5055,7 +5131,7 @@ var styles_module_default15 = { "ComponentList": "_ComponentList_1rrlt_1", "Comp
 
 // components/ComponentList/index.tsx
 import { useEffect as useEffect17 } from "react";
-import { jsx as jsx30, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs12 } from "react/jsx-runtime";
 var getClassName19 = get_class_name_factory_default("ComponentList", styles_module_default15);
 var ComponentListItem = ({
   name,
@@ -5075,7 +5151,7 @@ var ComponentListItem = ({
       );
     }
   }, [overrides]);
-  return /* @__PURE__ */ jsx30(Drawer.Item, { label, name, isDragDisabled: !canInsert, children: (_a = overrides.componentItem) != null ? _a : overrides.drawerItem });
+  return /* @__PURE__ */ jsx31(Drawer.Item, { label, name, isDragDisabled: !canInsert, children: (_a = overrides.componentItem) != null ? _a : overrides.drawerItem });
 };
 var ComponentList = ({
   children,
@@ -5101,14 +5177,14 @@ var ComponentList = ({
         }),
         title: expanded ? `Collapse${title ? ` ${title}` : ""}` : `Expand${title ? ` ${title}` : ""}`,
         children: [
-          /* @__PURE__ */ jsx30("div", { children: title }),
-          /* @__PURE__ */ jsx30("div", { className: getClassName19("titleIcon"), children: expanded ? /* @__PURE__ */ jsx30(ChevronUp, { size: 12 }) : /* @__PURE__ */ jsx30(ChevronDown, { size: 12 }) })
+          /* @__PURE__ */ jsx31("div", { children: title }),
+          /* @__PURE__ */ jsx31("div", { className: getClassName19("titleIcon"), children: expanded ? /* @__PURE__ */ jsx31(ChevronUp, { size: 12 }) : /* @__PURE__ */ jsx31(ChevronDown, { size: 12 }) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx30("div", { className: getClassName19("content"), children: /* @__PURE__ */ jsx30(Drawer, { children: children || Object.keys(config.components).map((componentKey) => {
+    /* @__PURE__ */ jsx31("div", { className: getClassName19("content"), children: /* @__PURE__ */ jsx31(Drawer, { children: children || Object.keys(config.components).map((componentKey) => {
       var _a;
-      return /* @__PURE__ */ jsx30(
+      return /* @__PURE__ */ jsx31(
         ComponentListItem,
         {
           label: (_a = config.components[componentKey]["label"]) != null ? _a : componentKey,
@@ -5122,7 +5198,7 @@ var ComponentList = ({
 ComponentList.Item = ComponentListItem;
 
 // lib/use-component-list.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var useComponentList = () => {
   const [componentList, setComponentList] = useState17();
   const config = useAppStore((s) => s.config);
@@ -5143,7 +5219,7 @@ var useComponentList = () => {
           if (category.visible === false) {
             return null;
           }
-          return /* @__PURE__ */ jsx31(
+          return /* @__PURE__ */ jsx32(
             ComponentList,
             {
               id: categoryKey,
@@ -5151,7 +5227,7 @@ var useComponentList = () => {
               children: category.components.map((componentName, i) => {
                 var _a2;
                 const componentConf = config.components[componentName] || {};
-                return /* @__PURE__ */ jsx31(
+                return /* @__PURE__ */ jsx32(
                   ComponentList.Item,
                   {
                     label: (_a2 = componentConf["label"]) != null ? _a2 : componentName,
@@ -5171,7 +5247,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__ */ jsx31(
+          /* @__PURE__ */ jsx32(
             ComponentList,
             {
               id: "other",
@@ -5179,7 +5255,7 @@ var useComponentList = () => {
               children: remainingComponents.map((componentName, i) => {
                 var _a2;
                 const componentConf = config.components[componentName] || {};
-                return /* @__PURE__ */ jsx31(
+                return /* @__PURE__ */ jsx32(
                   ComponentList.Item,
                   {
                     name: componentName,
@@ -5202,7 +5278,7 @@ var useComponentList = () => {
 
 // components/Puck/components/Components/index.tsx
 import { useMemo as useMemo12 } from "react";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var Components = () => {
   const overrides = useAppStore((s) => s.overrides);
   const componentList = useComponentList();
@@ -5214,7 +5290,7 @@ var Components = () => {
     }
     return overrides.components || overrides.drawer || "div";
   }, [overrides]);
-  return /* @__PURE__ */ jsx32(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ jsx32(ComponentList, { id: "all" }) });
+  return /* @__PURE__ */ jsx33(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ jsx33(ComponentList, { id: "all" }) });
 };
 
 // components/Puck/components/Preview/index.tsx
@@ -5231,7 +5307,7 @@ import {
 } from "react";
 import hash from "object-hash";
 import { createPortal as createPortal3 } from "react-dom";
-import { Fragment as Fragment9, jsx as jsx33 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx34 } from "react/jsx-runtime";
 var styleSelector = 'style, link[rel="stylesheet"]';
 var collectStyles = (doc) => {
   const collected = [];
@@ -5438,7 +5514,7 @@ var CopyHostStyles = ({
       observer.disconnect();
     };
   }, []);
-  return /* @__PURE__ */ jsx33(Fragment9, { children });
+  return /* @__PURE__ */ jsx34(Fragment9, { children });
 };
 var autoFrameContext = createContext5({});
 var useFrame = () => useContext9(autoFrameContext);
@@ -5485,7 +5561,7 @@ function AutoFrame(_a) {
       }
     }
   }, [frameRef, loaded, stylesLoaded]);
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     "iframe",
     __spreadProps(__spreadValues({}, props), {
       className,
@@ -5495,7 +5571,7 @@ function AutoFrame(_a) {
       onLoad: () => {
         setLoaded(true);
       },
-      children: /* @__PURE__ */ jsx33(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ jsx33(
+      children: /* @__PURE__ */ jsx34(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ jsx34(
         CopyHostStyles,
         {
           debug,
@@ -5514,7 +5590,7 @@ init_react_import();
 var styles_module_default16 = { "PuckPreview": "_PuckPreview_z2rgu_1", "PuckPreview-frame": "_PuckPreview-frame_z2rgu_6" };
 
 // components/Puck/components/Preview/index.tsx
-import { Fragment as Fragment10, jsx as jsx34 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx35 } from "react/jsx-runtime";
 var getClassName20 = get_class_name_factory_default("PuckPreview", styles_module_default16);
 var useBubbleIframeEvents = (ref) => {
   const status = useAppStore((s) => s.status);
@@ -5581,7 +5657,7 @@ 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__ */ jsx34(Fragment10, { children: propsWithSlots.children });
+      }, propsWithSlots), richtextProps)) : /* @__PURE__ */ jsx35(Fragment10, { children: propsWithSlots.children });
     },
     [config]
   );
@@ -5589,7 +5665,7 @@ var Preview2 = ({ id = "puck-preview" }) => {
   const rootProps = root.props || root;
   const ref = useRef8(null);
   useBubbleIframeEvents(ref);
-  const inner = !renderData ? /* @__PURE__ */ jsx34(
+  const inner = !renderData ? /* @__PURE__ */ jsx35(
     Page,
     __spreadProps(__spreadValues({}, rootProps), {
       puck: {
@@ -5599,15 +5675,15 @@ var Preview2 = ({ id = "puck-preview" }) => {
         metadata
       },
       editMode: true,
-      children: /* @__PURE__ */ jsx34(DropZonePure, { zone: rootDroppableId })
+      children: /* @__PURE__ */ jsx35(DropZonePure, { zone: rootDroppableId })
     })
-  ) : /* @__PURE__ */ jsx34(Render, { data: renderData, config, metadata });
+  ) : /* @__PURE__ */ jsx35(Render, { data: renderData, config, metadata });
   useEffect20(() => {
     if (!iframe.enabled) {
       setStatus("READY");
     }
   }, [iframe.enabled]);
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     "div",
     {
       className: getClassName20(),
@@ -5619,7 +5695,7 @@ var Preview2 = ({ id = "puck-preview" }) => {
           dispatch({ type: "setUi", ui: { itemSelector: null } });
         }
       },
-      children: iframe.enabled ? /* @__PURE__ */ jsx34(
+      children: iframe.enabled ? /* @__PURE__ */ jsx35(
         AutoFrame_default,
         {
           id: "preview-frame",
@@ -5632,14 +5708,14 @@ var Preview2 = ({ id = "puck-preview" }) => {
             setStatus("MOUNTED");
           },
           frameRef: ref,
-          children: /* @__PURE__ */ jsx34(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
+          children: /* @__PURE__ */ jsx35(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
             if (Frame) {
-              return /* @__PURE__ */ jsx34(Frame, { document: document2, children: inner });
+              return /* @__PURE__ */ jsx35(Frame, { document: document2, children: inner });
             }
             return inner;
           } })
         }
-      ) : /* @__PURE__ */ jsx34(
+      ) : /* @__PURE__ */ jsx35(
         "div",
         {
           id: "preview-frame",
@@ -5698,7 +5774,7 @@ var onScrollEnd = (frame, cb) => {
 
 // components/LayerTree/index.tsx
 import { useShallow as useShallow6 } from "zustand/react/shallow";
-import { Fragment as Fragment11, jsx as jsx35, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx36, jsxs as jsxs13 } from "react/jsx-runtime";
 var getClassName21 = get_class_name_factory_default("LayerTree", styles_module_default17);
 var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default17);
 var Layer = ({
@@ -5755,7 +5831,7 @@ var Layer = ({
         childIsSelected
       }),
       children: [
-        /* @__PURE__ */ jsx35("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs13(
+        /* @__PURE__ */ jsx36("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs13(
           "button",
           {
             type: "button",
@@ -5793,22 +5869,22 @@ var Layer = ({
               zoneStore.setState({ hoveringComponent: null });
             },
             children: [
-              containsZone && /* @__PURE__ */ jsx35(
+              containsZone && /* @__PURE__ */ jsx36(
                 "div",
                 {
                   className: getClassNameLayer("chevron"),
                   title: isSelected ? "Collapse" : "Expand",
-                  children: /* @__PURE__ */ jsx35(ChevronDown, { size: "12" })
+                  children: /* @__PURE__ */ jsx36(ChevronDown, { size: "12" })
                 }
               ),
               /* @__PURE__ */ jsxs13("div", { className: getClassNameLayer("title"), children: [
-                /* @__PURE__ */ jsx35("div", { className: getClassNameLayer("icon"), children: nodeData.data.type === "Text" || nodeData.data.type === "Heading" ? /* @__PURE__ */ jsx35(Type, { size: "16" }) : /* @__PURE__ */ jsx35(LayoutGrid, { size: "16" }) }),
-                /* @__PURE__ */ jsx35("div", { className: getClassNameLayer("name"), children: label })
+                /* @__PURE__ */ jsx36("div", { className: getClassNameLayer("icon"), children: nodeData.data.type === "Text" || nodeData.data.type === "Heading" ? /* @__PURE__ */ jsx36(Type, { size: "16" }) : /* @__PURE__ */ jsx36(LayoutGrid, { size: "16" }) }),
+                /* @__PURE__ */ jsx36("div", { className: getClassNameLayer("name"), children: label })
               ] })
             ]
           }
         ) }),
-        containsZone && zonesForItem.map((subzone) => /* @__PURE__ */ jsx35("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ jsx35(LayerTree, { zoneCompound: subzone }) }, subzone))
+        containsZone && zonesForItem.map((subzone) => /* @__PURE__ */ jsx36("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ jsx36(LayerTree, { zoneCompound: subzone }) }, subzone))
       ]
     }
   );
@@ -5836,13 +5912,13 @@ var LayerTree = ({
   );
   return /* @__PURE__ */ jsxs13(Fragment11, { children: [
     label && /* @__PURE__ */ jsxs13("div", { className: getClassName21("zoneTitle"), children: [
-      /* @__PURE__ */ jsx35("div", { className: getClassName21("zoneIcon"), children: /* @__PURE__ */ jsx35(Layers, { size: "16" }) }),
+      /* @__PURE__ */ jsx36("div", { className: getClassName21("zoneIcon"), children: /* @__PURE__ */ jsx36(Layers, { size: "16" }) }),
       label
     ] }),
     /* @__PURE__ */ jsxs13("ul", { className: getClassName21(), children: [
-      contentIds.length === 0 && /* @__PURE__ */ jsx35("div", { className: getClassName21("helper"), children: "No items" }),
+      contentIds.length === 0 && /* @__PURE__ */ jsx36("div", { className: getClassName21("helper"), children: "No items" }),
       contentIds.map((itemId, i) => {
-        return /* @__PURE__ */ jsx35(
+        return /* @__PURE__ */ jsx36(
           Layer,
           {
             index: i,
@@ -5869,14 +5945,14 @@ var findZonesForArea = (state, area) => {
 
 // components/Puck/components/Outline/index.tsx
 import { useShallow as useShallow7 } from "zustand/react/shallow";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var Outline = () => {
   const outlineOverride = useAppStore((s) => s.overrides.outline);
   const rootZones = useAppStore(
     useShallow7((s) => findZonesForArea(s.state, "root"))
   );
   const Wrapper = useMemo14(() => outlineOverride || "div", [outlineOverride]);
-  return /* @__PURE__ */ jsx36(Wrapper, { children: rootZones.map((zoneCompound) => /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(Wrapper, { children: rootZones.map((zoneCompound) => /* @__PURE__ */ jsx37(
     LayerTree,
     {
       label: rootZones.length === 1 ? "" : zoneCompound.split(":")[1],
@@ -5905,11 +5981,11 @@ init_react_import();
 var styles_module_default18 = { "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
-import { jsx as jsx37, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs14 } from "react/jsx-runtime";
 var icons = {
-  Smartphone: /* @__PURE__ */ jsx37(Smartphone, { size: 16 }),
-  Tablet: /* @__PURE__ */ jsx37(Tablet, { size: 16 }),
-  Monitor: /* @__PURE__ */ jsx37(Monitor, { size: 16 })
+  Smartphone: /* @__PURE__ */ jsx38(Smartphone, { size: 16 }),
+  Tablet: /* @__PURE__ */ jsx38(Tablet, { size: 16 }),
+  Monitor: /* @__PURE__ */ jsx38(Monitor, { size: 16 })
 };
 var getClassName22 = get_class_name_factory_default("ViewportControls", styles_module_default18);
 var getClassNameButton = get_class_name_factory_default("ViewportButton", styles_module_default18);
@@ -5925,7 +6001,7 @@ var ViewportButton = ({
   useEffect21(() => {
     setIsActive(width === viewports.current.width);
   }, [width, viewports.current.width]);
-  return /* @__PURE__ */ jsx37("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ jsx38(
     IconButton,
     {
       type: "button",
@@ -5935,7 +6011,7 @@ var ViewportButton = ({
         e.stopPropagation();
         onClick({ width, height });
       },
-      children: /* @__PURE__ */ jsx37("span", { className: getClassNameButton("inner"), children })
+      children: /* @__PURE__ */ jsx38("span", { className: getClassNameButton("inner"), children })
     }
   ) });
 };
@@ -5972,7 +6048,7 @@ var ViewportControls = ({
     [autoZoom]
   );
   return /* @__PURE__ */ jsxs14("div", { className: getClassName22(), children: [
-    viewports.map((viewport, i) => /* @__PURE__ */ jsx37(
+    viewports.map((viewport, i) => /* @__PURE__ */ jsx38(
       ViewportButton,
       {
         height: viewport.height,
@@ -5983,8 +6059,8 @@ var ViewportControls = ({
       },
       i
     )),
-    /* @__PURE__ */ jsx37("div", { className: getClassName22("divider") }),
-    /* @__PURE__ */ jsx37(
+    /* @__PURE__ */ jsx38("div", { className: getClassName22("divider") }),
+    /* @__PURE__ */ jsx38(
       IconButton,
       {
         type: "button",
@@ -5999,10 +6075,10 @@ var ViewportControls = ({
             )].value
           );
         },
-        children: /* @__PURE__ */ jsx37(ZoomOut, { size: 16 })
+        children: /* @__PURE__ */ jsx38(ZoomOut, { size: 16 })
       }
     ),
-    /* @__PURE__ */ jsx37(
+    /* @__PURE__ */ jsx38(
       IconButton,
       {
         type: "button",
@@ -6017,11 +6093,11 @@ var ViewportControls = ({
             )].value
           );
         },
-        children: /* @__PURE__ */ jsx37(ZoomIn, { size: 16 })
+        children: /* @__PURE__ */ jsx38(ZoomIn, { size: 16 })
       }
     ),
-    /* @__PURE__ */ jsx37("div", { className: getClassName22("divider") }),
-    /* @__PURE__ */ jsx37(
+    /* @__PURE__ */ jsx38("div", { className: getClassName22("divider") }),
+    /* @__PURE__ */ jsx38(
       "select",
       {
         className: getClassName22("zoomSelect"),
@@ -6032,7 +6108,7 @@ var ViewportControls = ({
         onChange: (e) => {
           onZoom(parseFloat(e.currentTarget.value));
         },
-        children: zoomOptions.map((option) => /* @__PURE__ */ jsx37(
+        children: zoomOptions.map((option) => /* @__PURE__ */ jsx38(
           "option",
           {
             value: option.value,
@@ -6060,7 +6136,7 @@ import {
   useRef as useRef9,
   useMemo as useMemo16
 } from "react";
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var FrameContext = createContext6(null);
 var FrameProvider = ({
   children
@@ -6072,7 +6148,7 @@ var FrameProvider = ({
     }),
     []
   );
-  return /* @__PURE__ */ jsx38(FrameContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx39(FrameContext.Provider, { value, children });
 };
 var useCanvasFrame = () => {
   const context = useContext11(FrameContext);
@@ -6083,7 +6159,7 @@ var useCanvasFrame = () => {
 };
 
 // components/Puck/components/Canvas/index.tsx
-import { Fragment as Fragment12, jsx as jsx39, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx40, jsxs as jsxs15 } from "react/jsx-runtime";
 var getClassName23 = get_class_name_factory_default("PuckCanvas", styles_module_default19);
 var ZOOM_ON_CHANGE = true;
 var TRANSITION_DURATION = 150;
@@ -6127,7 +6203,7 @@ var Canvas = () => {
   const [showTransition, setShowTransition] = useState20(false);
   const isResizingRef = useRef10(false);
   const defaultRender = useMemo17(() => {
-    const PuckDefault = ({ children }) => /* @__PURE__ */ jsx39(Fragment12, { children });
+    const PuckDefault = ({ children }) => /* @__PURE__ */ jsx40(Fragment12, { children });
     return PuckDefault;
   }, []);
   const CustomPreview = useMemo17(
@@ -6201,7 +6277,7 @@ var Canvas = () => {
         }
       },
       children: [
-        viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ jsx39("div", { className: getClassName23("controls"), children: /* @__PURE__ */ jsx39(
+        viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ jsx40("div", { className: getClassName23("controls"), children: /* @__PURE__ */ jsx40(
           ViewportControls,
           {
             autoZoom: zoomConfig.autoZoom,
@@ -6231,7 +6307,7 @@ var Canvas = () => {
           }
         ) }),
         /* @__PURE__ */ jsxs15("div", { className: getClassName23("inner"), ref: frameRef, children: [
-          /* @__PURE__ */ jsx39(
+          /* @__PURE__ */ jsx40(
             "div",
             {
               className: getClassName23("root"),
@@ -6248,10 +6324,10 @@ var Canvas = () => {
                 setShowTransition(false);
                 isResizingRef.current = false;
               },
-              children: /* @__PURE__ */ jsx39(CustomPreview, { children: /* @__PURE__ */ jsx39(Preview2, {}) })
+              children: /* @__PURE__ */ jsx40(CustomPreview, { children: /* @__PURE__ */ jsx40(Preview2, {}) })
             }
           ),
-          /* @__PURE__ */ jsx39("div", { className: getClassName23("loader"), children: /* @__PURE__ */ jsx39(Loader, { size: 24 }) })
+          /* @__PURE__ */ jsx40("div", { className: getClassName23("loader"), children: /* @__PURE__ */ jsx40(Loader, { size: 24 }) })
         ] })
       ]
     }
@@ -6309,8 +6385,8 @@ var useLoadedOverrides = ({
 
 // components/DefaultOverride/index.tsx
 init_react_import();
-import { Fragment as Fragment13, jsx as jsx40 } from "react/jsx-runtime";
-var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx40(Fragment13, { children });
+import { Fragment as Fragment13, jsx as jsx41 } from "react/jsx-runtime";
+var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx41(Fragment13, { children });
 
 // lib/use-inject-css.ts
 init_react_import();
@@ -6423,7 +6499,7 @@ var import_fast_deep_equal = __toESM(require_fast_deep_equal());
 
 // components/Puck/components/Header/index.tsx
 init_react_import();
-import { memo as memo6, useCallback as useCallback18, useMemo as useMemo19, useState as useState22 } from "react";
+import { memo as memo7, useCallback as useCallback18, useMemo as useMemo19, useState as useState22 } from "react";
 
 // components/MenuBar/index.tsx
 init_react_import();
@@ -6433,7 +6509,7 @@ init_react_import();
 var styles_module_default20 = { "MenuBar": "_MenuBar_8pf8c_1", "MenuBar--menuOpen": "_MenuBar--menuOpen_8pf8c_14", "MenuBar-inner": "_MenuBar-inner_8pf8c_29", "MenuBar-history": "_MenuBar-history_8pf8c_45" };
 
 // components/MenuBar/index.tsx
-import { Fragment as Fragment14, jsx as jsx41, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx42, jsxs as jsxs16 } from "react/jsx-runtime";
 var getClassName24 = get_class_name_factory_default("MenuBar", styles_module_default20);
 function MenuBar({
   menuOpen = false,
@@ -6444,7 +6520,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__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     "div",
     {
       className: getClassName24({ menuOpen }),
@@ -6460,28 +6536,28 @@ function MenuBar({
       },
       children: /* @__PURE__ */ jsxs16("div", { className: getClassName24("inner"), children: [
         /* @__PURE__ */ jsxs16("div", { className: getClassName24("history"), children: [
-          /* @__PURE__ */ jsx41(
+          /* @__PURE__ */ jsx42(
             IconButton,
             {
               type: "button",
               title: "undo",
               disabled: !hasPast,
               onClick: back,
-              children: /* @__PURE__ */ jsx41(Undo2, { size: 21 })
+              children: /* @__PURE__ */ jsx42(Undo2, { size: 21 })
             }
           ),
-          /* @__PURE__ */ jsx41(
+          /* @__PURE__ */ jsx42(
             IconButton,
             {
               type: "button",
               title: "redo",
               disabled: !hasFuture,
               onClick: forward,
-              children: /* @__PURE__ */ jsx41(Redo2, { size: 21 })
+              children: /* @__PURE__ */ jsx42(Redo2, { size: 21 })
             }
           )
         ] }),
-        /* @__PURE__ */ jsx41(Fragment14, { children: renderHeaderActions && renderHeaderActions() })
+        /* @__PURE__ */ jsx42(Fragment14, { children: renderHeaderActions && renderHeaderActions() })
       ] })
     }
   );
@@ -6492,7 +6568,7 @@ init_react_import();
 var styles_module_default21 = { "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
-import { Fragment as Fragment15, jsx as jsx42, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx43, jsxs as jsxs17 } from "react/jsx-runtime";
 var getClassName25 = get_class_name_factory_default("PuckHeader", styles_module_default21);
 var HeaderInner = () => {
   const {
@@ -6514,7 +6590,7 @@ var HeaderInner = () => {
         var _b = _a, { actions } = _b, props = __objRest(_b, ["actions"]);
         const Comp = renderHeader;
         const appState = useAppStore((s) => s.state);
-        return /* @__PURE__ */ jsx42(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
+        return /* @__PURE__ */ jsx43(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
       };
       return RenderHeader;
     }
@@ -6528,7 +6604,7 @@ var HeaderInner = () => {
       const RenderHeader = (props) => {
         const Comp = renderHeaderActions;
         const appState = useAppStore((s) => s.state);
-        return /* @__PURE__ */ jsx42(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
+        return /* @__PURE__ */ jsx43(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
       };
       return RenderHeader;
     }
@@ -6564,27 +6640,27 @@ var HeaderInner = () => {
     },
     [dispatch, leftSideBarVisible, rightSideBarVisible]
   );
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     CustomHeader,
     {
-      actions: /* @__PURE__ */ jsx42(Fragment15, { children: /* @__PURE__ */ jsx42(CustomHeaderActions, { children: /* @__PURE__ */ jsx42(
+      actions: /* @__PURE__ */ jsx43(Fragment15, { children: /* @__PURE__ */ jsx43(CustomHeaderActions, { children: /* @__PURE__ */ jsx43(
         Button,
         {
           onClick: () => {
             const data = appStore.getState().state.data;
             onPublish && onPublish(data);
           },
-          icon: /* @__PURE__ */ jsx42(Globe, { size: "14px" }),
+          icon: /* @__PURE__ */ jsx43(Globe, { size: "14px" }),
           children: "Publish"
         }
       ) }) }),
-      children: /* @__PURE__ */ jsx42(
+      children: /* @__PURE__ */ jsx43(
         "header",
         {
           className: getClassName25({ leftSideBarVisible, rightSideBarVisible }),
           children: /* @__PURE__ */ jsxs17("div", { className: getClassName25("inner"), children: [
             /* @__PURE__ */ jsxs17("div", { className: getClassName25("toggle"), children: [
-              /* @__PURE__ */ jsx42("div", { className: getClassName25("leftSideBarToggle"), children: /* @__PURE__ */ jsx42(
+              /* @__PURE__ */ jsx43("div", { className: getClassName25("leftSideBarToggle"), children: /* @__PURE__ */ jsx43(
                 IconButton,
                 {
                   type: "button",
@@ -6592,10 +6668,10 @@ var HeaderInner = () => {
                     toggleSidebars("left");
                   },
                   title: "Toggle left sidebar",
-                  children: /* @__PURE__ */ jsx42(PanelLeft, { focusable: "false" })
+                  children: /* @__PURE__ */ jsx43(PanelLeft, { focusable: "false" })
                 }
               ) }),
-              /* @__PURE__ */ jsx42("div", { className: getClassName25("rightSideBarToggle"), children: /* @__PURE__ */ jsx42(
+              /* @__PURE__ */ jsx43("div", { className: getClassName25("rightSideBarToggle"), children: /* @__PURE__ */ jsx43(
                 IconButton,
                 {
                   type: "button",
@@ -6603,19 +6679,19 @@ var HeaderInner = () => {
                     toggleSidebars("right");
                   },
                   title: "Toggle right sidebar",
-                  children: /* @__PURE__ */ jsx42(PanelRight, { focusable: "false" })
+                  children: /* @__PURE__ */ jsx43(PanelRight, { focusable: "false" })
                 }
               ) })
             ] }),
-            /* @__PURE__ */ jsx42("div", { className: getClassName25("title"), children: /* @__PURE__ */ jsxs17(Heading, { rank: "2", size: "xs", children: [
+            /* @__PURE__ */ jsx43("div", { className: getClassName25("title"), children: /* @__PURE__ */ jsxs17(Heading, { rank: "2", size: "xs", children: [
               headerTitle || rootTitle || "Page",
               headerPath && /* @__PURE__ */ jsxs17(Fragment15, { children: [
                 " ",
-                /* @__PURE__ */ jsx42("code", { className: getClassName25("path"), children: headerPath })
+                /* @__PURE__ */ jsx43("code", { className: getClassName25("path"), children: headerPath })
               ] })
             ] }) }),
             /* @__PURE__ */ jsxs17("div", { className: getClassName25("tools"), children: [
-              /* @__PURE__ */ jsx42("div", { className: getClassName25("menuButton"), children: /* @__PURE__ */ jsx42(
+              /* @__PURE__ */ jsx43("div", { className: getClassName25("menuButton"), children: /* @__PURE__ */ jsx43(
                 IconButton,
                 {
                   type: "button",
@@ -6623,23 +6699,23 @@ var HeaderInner = () => {
                     return setMenuOpen(!menuOpen);
                   },
                   title: "Toggle menu bar",
-                  children: menuOpen ? /* @__PURE__ */ jsx42(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ jsx42(ChevronDown, { focusable: "false" })
+                  children: menuOpen ? /* @__PURE__ */ jsx43(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ jsx43(ChevronDown, { focusable: "false" })
                 }
               ) }),
-              /* @__PURE__ */ jsx42(
+              /* @__PURE__ */ jsx43(
                 MenuBar,
                 {
                   dispatch,
                   onPublish,
                   menuOpen,
-                  renderHeaderActions: () => /* @__PURE__ */ jsx42(CustomHeaderActions, { children: /* @__PURE__ */ jsx42(
+                  renderHeaderActions: () => /* @__PURE__ */ jsx43(CustomHeaderActions, { children: /* @__PURE__ */ jsx43(
                     Button,
                     {
                       onClick: () => {
                         const data = appStore.getState().state.data;
                         onPublish && onPublish(data);
                       },
-                      icon: /* @__PURE__ */ jsx42(Globe, { size: "14px" }),
+                      icon: /* @__PURE__ */ jsx43(Globe, { size: "14px" }),
                       children: "Publish"
                     }
                   ) }),
@@ -6653,7 +6729,7 @@ var HeaderInner = () => {
     }
   );
 };
-var Header = memo6(HeaderInner);
+var Header = memo7(HeaderInner);
 
 // components/Puck/components/Sidebar/index.tsx
 init_react_import();
@@ -6667,7 +6743,7 @@ init_react_import();
 var styles_module_default22 = { "ResizeHandle": "_ResizeHandle_144bf_2", "ResizeHandle--left": "_ResizeHandle--left_144bf_16", "ResizeHandle--right": "_ResizeHandle--right_144bf_20" };
 
 // components/Puck/components/ResizeHandle/index.tsx
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 var getClassName26 = get_class_name_factory_default("ResizeHandle", styles_module_default22);
 var ResizeHandle = ({
   position,
@@ -6726,7 +6802,7 @@ var ResizeHandle = ({
     },
     [position, handleMouseMove, handleMouseUp]
   );
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx44(
     "div",
     {
       ref: handleRef,
@@ -6741,7 +6817,7 @@ init_react_import();
 var styles_module_default23 = { "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
-import { Fragment as Fragment16, jsx as jsx44, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx45, jsxs as jsxs18 } from "react/jsx-runtime";
 var getClassName27 = get_class_name_factory_default("Sidebar", styles_module_default23);
 var Sidebar = ({
   position,
@@ -6753,8 +6829,8 @@ var Sidebar = ({
 }) => {
   if (!isVisible) return null;
   return /* @__PURE__ */ jsxs18(Fragment16, { children: [
-    /* @__PURE__ */ jsx44("div", { ref: sidebarRef, className: getClassName27({ [position]: true }), children }),
-    /* @__PURE__ */ jsx44("div", { className: `${getClassName27("resizeHandle")}`, children: /* @__PURE__ */ jsx44(
+    /* @__PURE__ */ jsx45("div", { ref: sidebarRef, className: getClassName27({ [position]: true }), children }),
+    /* @__PURE__ */ jsx45("div", { className: `${getClassName27("resizeHandle")}`, children: /* @__PURE__ */ jsx45(
       ResizeHandle,
       {
         position,
@@ -6848,7 +6924,7 @@ function useSidebarResize(position, dispatch) {
 }
 
 // components/Puck/index.tsx
-import { jsx as jsx45, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs19 } from "react/jsx-runtime";
 var getClassName28 = get_class_name_factory_default("Puck", styles_module_default13);
 var getLayoutClassName = get_class_name_factory_default("PuckLayout", styles_module_default13);
 var FieldSideBar = () => {
@@ -6858,11 +6934,11 @@ 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__ */ jsx45(SidebarSection, { noPadding: true, noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ jsx45(Fields, {}) });
+  return /* @__PURE__ */ jsx46(SidebarSection, { noPadding: true, noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ jsx46(Fields, {}) });
 };
 var propsContext = createContext7({});
 function PropsProvider(props) {
-  return /* @__PURE__ */ jsx45(propsContext.Provider, { value: props, children: props.children });
+  return /* @__PURE__ */ jsx46(propsContext.Provider, { value: props, children: props.children });
 }
 var usePropsContext = () => useContext12(propsContext);
 function PuckProvider({ children }) {
@@ -7047,7 +7123,7 @@ function PuckProvider({ children }) {
     const { resolveAndCommitData } = appStore.getState();
     resolveAndCommitData();
   }, []);
-  return /* @__PURE__ */ jsx45(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ jsx45(UsePuckStoreContext.Provider, { value: uPuckStore, children }) });
+  return /* @__PURE__ */ jsx46(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ jsx46(UsePuckStoreContext.Provider, { value: uPuckStore, children }) });
 }
 function PuckLayout({ children }) {
   const {
@@ -7132,7 +7208,7 @@ function PuckLayout({ children }) {
     layoutOptions["--puck-user-right-side-bar-width"] = `${rightWidth}px`;
   }
   return /* @__PURE__ */ jsxs19("div", { className: `Puck ${getClassName28()}`, children: [
-    /* @__PURE__ */ jsx45(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ jsx45(CustomPuck, { children: children || /* @__PURE__ */ jsx45(FrameProvider, { children: /* @__PURE__ */ jsx45(
+    /* @__PURE__ */ jsx46(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ jsx46(CustomPuck, { children: children || /* @__PURE__ */ jsx46(FrameProvider, { children: /* @__PURE__ */ jsx46(
       "div",
       {
         className: getLayoutClassName({
@@ -7146,7 +7222,7 @@ function PuckLayout({ children }) {
             className: getLayoutClassName("inner"),
             style: layoutOptions,
             children: [
-              /* @__PURE__ */ jsx45(Header, {}),
+              /* @__PURE__ */ jsx46(Header, {}),
               /* @__PURE__ */ jsxs19(
                 Sidebar,
                 {
@@ -7156,13 +7232,13 @@ function PuckLayout({ children }) {
                   onResize: setLeftWidth,
                   onResizeEnd: handleLeftSidebarResizeEnd,
                   children: [
-                    /* @__PURE__ */ jsx45(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ jsx45(Components, {}) }),
-                    /* @__PURE__ */ jsx45(SidebarSection, { title: "Outline", children: /* @__PURE__ */ jsx45(Outline, {}) })
+                    /* @__PURE__ */ jsx46(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ jsx46(Components, {}) }),
+                    /* @__PURE__ */ jsx46(SidebarSection, { title: "Outline", children: /* @__PURE__ */ jsx46(Outline, {}) })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx45(Canvas, {}),
-              /* @__PURE__ */ jsx45(
+              /* @__PURE__ */ jsx46(Canvas, {}),
+              /* @__PURE__ */ jsx46(
                 Sidebar,
                 {
                   position: "right",
@@ -7170,7 +7246,7 @@ function PuckLayout({ children }) {
                   isVisible: rightSideBarVisible,
                   onResize: setRightWidth,
                   onResizeEnd: handleRightSidebarResizeEnd,
-                  children: /* @__PURE__ */ jsx45(FieldSideBar, {})
+                  children: /* @__PURE__ */ jsx46(FieldSideBar, {})
                 }
               )
             ]
@@ -7178,11 +7254,11 @@ function PuckLayout({ children }) {
         )
       }
     ) }) }) }),
-    /* @__PURE__ */ jsx45("div", { id: "puck-portal-root", className: getClassName28("portal") })
+    /* @__PURE__ */ jsx46("div", { id: "puck-portal-root", className: getClassName28("portal") })
   ] });
 }
 function Puck(props) {
-  return /* @__PURE__ */ jsx45(PropsProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx45(PuckProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx45(PuckLayout, __spreadValues({}, props)) })) }));
+  return /* @__PURE__ */ jsx46(PropsProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx46(PuckProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx46(PuckLayout, __spreadValues({}, props)) })) }));
 }
 Puck.Components = Components;
 Puck.Fields = Fields;