@measured/puck 0.21.0-canary.eb8ea5ce → 0.21.0-canary.ece26d91

package/dist/index.js

@@ -3968,60 +3968,114 @@ var init_SelectControl = __esm({
   }
 });
 
-// components/RichTextMenu/controls/AlignSelect.tsx
-function AlignSelect() {
-  var _a, _b;
-  const { options } = useControlContext();
-  let blockOptions = [];
-  if ((options == null ? void 0 : options.textAlign) !== false) {
-    if (!((_a = options == null ? void 0 : options.textAlign) == null ? void 0 : _a.alignments)) {
-      blockOptions = ["left", "center", "right", "justify"];
-    } else {
-      if (options == null ? void 0 : options.textAlign.alignments.includes("left")) {
-        blockOptions.push("left");
-      }
-      if (options == null ? void 0 : options.textAlign.alignments.includes("center")) {
-        blockOptions.push("center");
-      }
-      if (options == null ? void 0 : options.textAlign.alignments.includes("right")) {
-        blockOptions.push("right");
-      }
-      if (options == null ? void 0 : options.textAlign.alignments.includes("justify")) {
-        blockOptions.push("justify");
+// components/RichTextMenu/controls/AlignSelect/use-options.ts
+var import_react22, optionNodes, useAlignOptions;
+var init_use_options = __esm({
+  "components/RichTextMenu/controls/AlignSelect/use-options.ts"() {
+    "use strict";
+    init_react_import();
+    import_react22 = require("react");
+    init_lucide_react();
+    optionNodes = {
+      left: { label: "Left", icon: AlignLeft },
+      center: { label: "Center", icon: AlignCenter },
+      right: { label: "Right", icon: AlignRight },
+      justify: { label: "Justify", icon: AlignJustify }
+    };
+    useAlignOptions = (fieldOptions) => {
+      var _a;
+      let blockOptions = [];
+      if ((fieldOptions == null ? void 0 : fieldOptions.textAlign) !== false) {
+        if (!((_a = fieldOptions == null ? void 0 : fieldOptions.textAlign) == null ? void 0 : _a.alignments)) {
+          blockOptions = ["left", "center", "right", "justify"];
+        } else {
+          if (fieldOptions == null ? void 0 : fieldOptions.textAlign.alignments.includes("left")) {
+            blockOptions.push("left");
+          }
+          if (fieldOptions == null ? void 0 : fieldOptions.textAlign.alignments.includes("center")) {
+            blockOptions.push("center");
+          }
+          if (fieldOptions == null ? void 0 : fieldOptions.textAlign.alignments.includes("right")) {
+            blockOptions.push("right");
+          }
+          if (fieldOptions == null ? void 0 : fieldOptions.textAlign.alignments.includes("justify")) {
+            blockOptions.push("justify");
+          }
+        }
       }
+      return (0, import_react22.useMemo)(
+        () => blockOptions.map((item) => ({
+          value: item,
+          label: optionNodes[item].label,
+          icon: optionNodes[item].icon
+        })),
+        [blockOptions]
+      );
+    };
+  }
+});
+
+// components/RichTextMenu/controls/AlignSelect/fallback.tsx
+function AlignSelectFallback() {
+  const ctx = useControlContext();
+  const alignOptions = useAlignOptions(ctx.options);
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    SelectControl,
+    {
+      options: alignOptions,
+      onChange: () => {
+      },
+      value: "left",
+      defaultValue: "left",
+      renderDefaultIcon: AlignLeft
     }
+  );
+}
+var import_jsx_runtime24;
+var init_fallback = __esm({
+  "components/RichTextMenu/controls/AlignSelect/fallback.tsx"() {
+    "use strict";
+    init_react_import();
+    init_use_control_context();
+    init_lucide_react();
+    init_SelectControl();
+    init_use_options();
+    import_jsx_runtime24 = require("react/jsx-runtime");
   }
+});
+
+// components/RichTextMenu/controls/AlignSelect/loaded.tsx
+var loaded_exports = {};
+__export(loaded_exports, {
+  AlignSelectLoaded: () => AlignSelectLoaded
+});
+function AlignSelectLoaded() {
+  var _a;
+  const { options } = useControlContext();
+  const alignOptions = useAlignOptions(options);
   const { editor } = useControlContext();
-  const currentValue = (_b = (0, import_react22.useEditorState)({
+  const currentValue = (_a = (0, import_react23.useEditorState)({
     editor,
     selector: (ctx) => {
-      var _a2, _b2, _c, _d;
+      var _a2, _b, _c, _d;
       if ((_a2 = ctx.editor) == null ? void 0 : _a2.isActive({ textAlign: "center" })) {
         return "center";
-      } else if ((_b2 = ctx.editor) == null ? void 0 : _b2.isActive({ textAlign: "right" })) {
+      } else if ((_b = ctx.editor) == null ? void 0 : _b.isActive({ textAlign: "right" })) {
         return "right";
       } else if ((_c = ctx.editor) == null ? void 0 : _c.isActive({ textAlign: "justify" })) {
         return "justify";
       }
       return (options == null ? void 0 : options.textAlign) ? (_d = options.textAlign.defaultAlignment) != null ? _d : "left" : "left";
     }
-  })) != null ? _b : "left";
+  })) != null ? _a : "left";
   const handleChange = (val) => {
     const chain = editor == null ? void 0 : editor.chain();
     chain == null ? void 0 : chain.focus().setTextAlign(val).run();
   };
-  const loadedOptions = (0, import_react23.useMemo)(
-    () => blockOptions.map((item) => ({
-      value: item,
-      label: optionNodes[item].label,
-      icon: optionNodes[item].icon
-    })),
-    [blockOptions]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     SelectControl,
     {
-      options: loadedOptions,
+      options: alignOptions,
       onChange: handleChange,
       value: currentValue,
       defaultValue: "left",
@@ -4029,33 +4083,45 @@ function AlignSelect() {
     }
   );
 }
-var import_react22, import_react23, import_jsx_runtime24, optionNodes;
-var init_AlignSelect = __esm({
-  "components/RichTextMenu/controls/AlignSelect.tsx"() {
+var import_react23, import_jsx_runtime25;
+var init_loaded = __esm({
+  "components/RichTextMenu/controls/AlignSelect/loaded.tsx"() {
     "use strict";
     init_react_import();
-    import_react22 = require("@tiptap/react");
+    import_react23 = require("@tiptap/react");
     init_use_control_context();
-    import_react23 = require("react");
     init_lucide_react();
     init_SelectControl();
-    import_jsx_runtime24 = require("react/jsx-runtime");
-    optionNodes = {
-      left: { label: "Left", icon: AlignLeft },
-      center: { label: "Center", icon: AlignCenter },
-      right: { label: "Right", icon: AlignRight },
-      justify: { label: "Justify", icon: AlignJustify }
-    };
+    init_use_options();
+    import_jsx_runtime25 = require("react/jsx-runtime");
+  }
+});
+
+// components/RichTextMenu/controls/AlignSelect/index.tsx
+var import_react24, import_jsx_runtime26, AlignSelectLoaded2, AlignSelect;
+var init_AlignSelect = __esm({
+  "components/RichTextMenu/controls/AlignSelect/index.tsx"() {
+    "use strict";
+    init_react_import();
+    import_react24 = require("react");
+    init_fallback();
+    import_jsx_runtime26 = require("react/jsx-runtime");
+    AlignSelectLoaded2 = (0, import_react24.lazy)(
+      () => Promise.resolve().then(() => (init_loaded(), loaded_exports)).then((m) => ({
+        default: m.AlignSelectLoaded
+      }))
+    );
+    AlignSelect = () => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react24.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(AlignSelectFallback, {}), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(AlignSelectLoaded2, {}) });
   }
 });
 
 // components/RichTextMenu/controls/Bold.tsx
 function Bold2() {
   const { editor, editorState } = useControlContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     Control,
     {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Bold, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Bold, {}),
       onClick: (e) => {
         e.stopPropagation();
         editor == null ? void 0 : editor.chain().focus().toggleBold().run();
@@ -4066,7 +4132,7 @@ function Bold2() {
     }
   );
 }
-var import_jsx_runtime25;
+var import_jsx_runtime27;
 var init_Bold = __esm({
   "components/RichTextMenu/controls/Bold.tsx"() {
     "use strict";
@@ -4074,17 +4140,17 @@ var init_Bold = __esm({
     init_lucide_react();
     init_Control();
     init_use_control_context();
-    import_jsx_runtime25 = require("react/jsx-runtime");
+    import_jsx_runtime27 = require("react/jsx-runtime");
   }
 });
 
 // components/RichTextMenu/controls/Italic.tsx
 function Italic2() {
   const { editor, editorState } = useControlContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     Control,
     {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Italic, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Italic, {}),
       onClick: (e) => {
         e.stopPropagation();
         editor == null ? void 0 : editor.chain().focus().toggleItalic().run();
@@ -4095,7 +4161,7 @@ function Italic2() {
     }
   );
 }
-var import_jsx_runtime26;
+var import_jsx_runtime28;
 var init_Italic = __esm({
   "components/RichTextMenu/controls/Italic.tsx"() {
     "use strict";
@@ -4103,17 +4169,17 @@ var init_Italic = __esm({
     init_lucide_react();
     init_Control();
     init_use_control_context();
-    import_jsx_runtime26 = require("react/jsx-runtime");
+    import_jsx_runtime28 = require("react/jsx-runtime");
   }
 });
 
 // components/RichTextMenu/controls/Underline.tsx
 function Underline2() {
   const { editor, editorState } = useControlContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     Control,
     {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Underline, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Underline, {}),
       onClick: (e) => {
         e.stopPropagation();
         editor == null ? void 0 : editor.chain().focus().toggleUnderline().run();
@@ -4124,7 +4190,7 @@ function Underline2() {
     }
   );
 }
-var import_jsx_runtime27;
+var import_jsx_runtime29;
 var init_Underline = __esm({
   "components/RichTextMenu/controls/Underline.tsx"() {
     "use strict";
@@ -4132,17 +4198,17 @@ var init_Underline = __esm({
     init_lucide_react();
     init_Control();
     init_use_control_context();
-    import_jsx_runtime27 = require("react/jsx-runtime");
+    import_jsx_runtime29 = require("react/jsx-runtime");
   }
 });
 
 // components/RichTextMenu/controls/Strikethrough.tsx
 function Strikethrough2() {
   const { editor, editorState } = useControlContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     Control,
     {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Strikethrough, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Strikethrough, {}),
       onClick: (e) => {
         e.stopPropagation();
         editor == null ? void 0 : editor.chain().focus().toggleStrike().run();
@@ -4153,7 +4219,7 @@ function Strikethrough2() {
     }
   );
 }
-var import_jsx_runtime28;
+var import_jsx_runtime30;
 var init_Strikethrough = __esm({
   "components/RichTextMenu/controls/Strikethrough.tsx"() {
     "use strict";
@@ -4161,17 +4227,17 @@ var init_Strikethrough = __esm({
     init_lucide_react();
     init_Control();
     init_use_control_context();
-    import_jsx_runtime28 = require("react/jsx-runtime");
+    import_jsx_runtime30 = require("react/jsx-runtime");
   }
 });
 
 // components/RichTextMenu/controls/InlineCode.tsx
 function InlineCode() {
   const { editor, editorState } = useControlContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     Control,
     {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Code, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Code, {}),
       onClick: (e) => {
         e.stopPropagation();
         editor == null ? void 0 : editor.chain().focus().toggleCode().run();
@@ -4182,7 +4248,7 @@ function InlineCode() {
     }
   );
 }
-var import_jsx_runtime29;
+var import_jsx_runtime31;
 var init_InlineCode = __esm({
   "components/RichTextMenu/controls/InlineCode.tsx"() {
     "use strict";
@@ -4190,17 +4256,17 @@ var init_InlineCode = __esm({
     init_lucide_react();
     init_Control();
     init_use_control_context();
-    import_jsx_runtime29 = require("react/jsx-runtime");
+    import_jsx_runtime31 = require("react/jsx-runtime");
   }
 });
 
 // components/RichTextMenu/controls/BulletList.tsx
 function BulletList() {
   const { editor, editorState } = useControlContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     Control,
     {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(List, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(List, {}),
       onClick: (e) => {
         e.stopPropagation();
         editor == null ? void 0 : editor.chain().focus().toggleBulletList().run();
@@ -4211,7 +4277,7 @@ function BulletList() {
     }
   );
 }
-var import_jsx_runtime30;
+var import_jsx_runtime32;
 var init_BulletList = __esm({
   "components/RichTextMenu/controls/BulletList.tsx"() {
     "use strict";
@@ -4219,17 +4285,17 @@ var init_BulletList = __esm({
     init_lucide_react();
     init_Control();
     init_use_control_context();
-    import_jsx_runtime30 = require("react/jsx-runtime");
+    import_jsx_runtime32 = require("react/jsx-runtime");
   }
 });
 
 // components/RichTextMenu/controls/OrderedList.tsx
 function OrderedList() {
   const { editor, editorState } = useControlContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     Control,
     {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ListOrdered, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ListOrdered, {}),
       onClick: (e) => {
         e.stopPropagation();
         editor == null ? void 0 : editor.chain().focus().toggleOrderedList().run();
@@ -4240,7 +4306,7 @@ function OrderedList() {
     }
   );
 }
-var import_jsx_runtime31;
+var import_jsx_runtime33;
 var init_OrderedList = __esm({
   "components/RichTextMenu/controls/OrderedList.tsx"() {
     "use strict";
@@ -4248,17 +4314,17 @@ var init_OrderedList = __esm({
     init_lucide_react();
     init_Control();
     init_use_control_context();
-    import_jsx_runtime31 = require("react/jsx-runtime");
+    import_jsx_runtime33 = require("react/jsx-runtime");
   }
 });
 
 // components/RichTextMenu/controls/CodeBlock.tsx
 function CodeBlock() {
   const { editor, editorState } = useControlContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     Control,
     {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SquareCode, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SquareCode, {}),
       onClick: (e) => {
         e.stopPropagation();
         editor == null ? void 0 : editor.chain().focus().toggleCodeBlock().run();
@@ -4269,7 +4335,7 @@ function CodeBlock() {
     }
   );
 }
-var import_jsx_runtime32;
+var import_jsx_runtime34;
 var init_CodeBlock = __esm({
   "components/RichTextMenu/controls/CodeBlock.tsx"() {
     "use strict";
@@ -4277,17 +4343,17 @@ var init_CodeBlock = __esm({
     init_lucide_react();
     init_Control();
     init_use_control_context();
-    import_jsx_runtime32 = require("react/jsx-runtime");
+    import_jsx_runtime34 = require("react/jsx-runtime");
   }
 });
 
 // components/RichTextMenu/controls/Blockquote.tsx
 function Blockquote() {
   const { editor, editorState } = useControlContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     Control,
     {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Quote, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Quote, {}),
       onClick: (e) => {
         e.stopPropagation();
         editor == null ? void 0 : editor.chain().focus().toggleBlockquote().run();
@@ -4298,7 +4364,7 @@ function Blockquote() {
     }
   );
 }
-var import_jsx_runtime33;
+var import_jsx_runtime35;
 var init_Blockquote = __esm({
   "components/RichTextMenu/controls/Blockquote.tsx"() {
     "use strict";
@@ -4306,17 +4372,17 @@ var init_Blockquote = __esm({
     init_lucide_react();
     init_Control();
     init_use_control_context();
-    import_jsx_runtime33 = require("react/jsx-runtime");
+    import_jsx_runtime35 = require("react/jsx-runtime");
   }
 });
 
 // components/RichTextMenu/controls/HorizontalRule.tsx
 function HorizontalRule() {
   const { editor, editorState } = useControlContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     Control,
     {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Minus, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Minus, {}),
       onClick: (e) => {
         e.stopPropagation();
         editor == null ? void 0 : editor.chain().focus().setHorizontalRule().run();
@@ -4326,7 +4392,7 @@ function HorizontalRule() {
     }
   );
 }
-var import_jsx_runtime34;
+var import_jsx_runtime36;
 var init_HorizontalRule = __esm({
   "components/RichTextMenu/controls/HorizontalRule.tsx"() {
     "use strict";
@@ -4334,45 +4400,108 @@ var init_HorizontalRule = __esm({
     init_lucide_react();
     init_Control();
     init_use_control_context();
-    import_jsx_runtime34 = require("react/jsx-runtime");
+    import_jsx_runtime36 = require("react/jsx-runtime");
   }
 });
 
-// components/RichTextMenu/controls/HeadingSelect.tsx
-function HeadingSelect() {
-  var _a;
-  const { options } = useControlContext();
-  let blockOptions = [];
-  if ((options == null ? void 0 : options.heading) !== false) {
-    if (!((_a = options == null ? void 0 : options.heading) == null ? void 0 : _a.levels)) {
-      blockOptions = ["h1", "h2", "h3", "h4", "h5", "h6"];
-    } else {
-      if (options == null ? void 0 : options.heading.levels.includes(1)) {
-        blockOptions.push("h1");
-      }
-      if (options == null ? void 0 : options.heading.levels.includes(2)) {
-        blockOptions.push("h2");
-      }
-      if (options == null ? void 0 : options.heading.levels.includes(3)) {
-        blockOptions.push("h3");
-      }
-      if (options == null ? void 0 : options.heading.levels.includes(4)) {
-        blockOptions.push("h4");
-      }
-      if (options == null ? void 0 : options.heading.levels.includes(5)) {
-        blockOptions.push("h5");
-      }
-      if (options == null ? void 0 : options.heading.levels.includes(6)) {
-        blockOptions.push("h6");
+// components/RichTextMenu/controls/HeadingSelect/use-options.ts
+var import_react25, optionNodes2, useHeadingOptions;
+var init_use_options2 = __esm({
+  "components/RichTextMenu/controls/HeadingSelect/use-options.ts"() {
+    "use strict";
+    init_react_import();
+    import_react25 = require("react");
+    init_lucide_react();
+    optionNodes2 = {
+      h1: { label: "Heading 1", icon: Heading1 },
+      h2: { label: "Heading 2", icon: Heading2 },
+      h3: { label: "Heading 3", icon: Heading3 },
+      h4: { label: "Heading 4", icon: Heading4 },
+      h5: { label: "Heading 5", icon: Heading5 },
+      h6: { label: "Heading 6", icon: Heading6 }
+    };
+    useHeadingOptions = (fieldOptions) => {
+      var _a;
+      let blockOptions = [];
+      if ((fieldOptions == null ? void 0 : fieldOptions.heading) !== false) {
+        if (!((_a = fieldOptions == null ? void 0 : fieldOptions.heading) == null ? void 0 : _a.levels)) {
+          blockOptions = ["h1", "h2", "h3", "h4", "h5", "h6"];
+        } else {
+          if (fieldOptions == null ? void 0 : fieldOptions.heading.levels.includes(1)) {
+            blockOptions.push("h1");
+          }
+          if (fieldOptions == null ? void 0 : fieldOptions.heading.levels.includes(2)) {
+            blockOptions.push("h2");
+          }
+          if (fieldOptions == null ? void 0 : fieldOptions.heading.levels.includes(3)) {
+            blockOptions.push("h3");
+          }
+          if (fieldOptions == null ? void 0 : fieldOptions.heading.levels.includes(4)) {
+            blockOptions.push("h4");
+          }
+          if (fieldOptions == null ? void 0 : fieldOptions.heading.levels.includes(5)) {
+            blockOptions.push("h5");
+          }
+          if (fieldOptions == null ? void 0 : fieldOptions.heading.levels.includes(6)) {
+            blockOptions.push("h6");
+          }
+        }
       }
+      return (0, import_react25.useMemo)(
+        () => blockOptions.map((item) => ({
+          value: item,
+          label: optionNodes2[item].label,
+          icon: optionNodes2[item].icon
+        })),
+        [blockOptions]
+      );
+    };
+  }
+});
+
+// components/RichTextMenu/controls/HeadingSelect/fallback.tsx
+function HeadingSelectFallback() {
+  const ctx = useControlContext();
+  const headingOptions = useHeadingOptions(ctx.options);
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    SelectControl,
+    {
+      options: headingOptions,
+      onChange: () => {
+      },
+      value: "p",
+      defaultValue: "p",
+      renderDefaultIcon: Heading
     }
+  );
+}
+var import_jsx_runtime37;
+var init_fallback2 = __esm({
+  "components/RichTextMenu/controls/HeadingSelect/fallback.tsx"() {
+    "use strict";
+    init_react_import();
+    init_lucide_react();
+    init_SelectControl();
+    init_use_control_context();
+    init_use_options2();
+    import_jsx_runtime37 = require("react/jsx-runtime");
   }
+});
+
+// components/RichTextMenu/controls/HeadingSelect/loaded.tsx
+var loaded_exports2 = {};
+__export(loaded_exports2, {
+  HeadingSelectLoaded: () => HeadingSelectLoaded
+});
+function HeadingSelectLoaded() {
+  const { options } = useControlContext();
+  const headingOptions = useHeadingOptions(options);
   const { editor } = useControlContext();
-  const currentValue = (0, import_react24.useEditorState)({
+  const currentValue = (0, import_react26.useEditorState)({
     editor,
     selector: (ctx) => {
-      var _a2, _b;
-      if ((_a2 = ctx.editor) == null ? void 0 : _a2.isActive("paragraph")) return "p";
+      var _a, _b;
+      if ((_a = ctx.editor) == null ? void 0 : _a.isActive("paragraph")) return "p";
       for (let level = 1; level <= 6; level++) {
         if ((_b = ctx.editor) == null ? void 0 : _b.isActive("heading", { level })) {
           return `h${level}`;
@@ -4390,18 +4519,10 @@ function HeadingSelect() {
       chain == null ? void 0 : chain.focus().toggleHeading({ level }).run();
     }
   };
-  const loadedOptions = (0, import_react25.useMemo)(
-    () => blockOptions.map((item) => ({
-      value: item,
-      label: optionNodes2[item].label,
-      icon: optionNodes2[item].icon
-    })),
-    [blockOptions]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     SelectControl,
     {
-      options: loadedOptions,
+      options: headingOptions,
       onChange: handleChange,
       value: currentValue != null ? currentValue : "p",
       defaultValue: "p",
@@ -4409,37 +4530,106 @@ function HeadingSelect() {
     }
   );
 }
-var import_react24, import_react25, import_jsx_runtime35, optionNodes2;
-var init_HeadingSelect = __esm({
-  "components/RichTextMenu/controls/HeadingSelect.tsx"() {
+var import_react26, import_jsx_runtime38;
+var init_loaded2 = __esm({
+  "components/RichTextMenu/controls/HeadingSelect/loaded.tsx"() {
     "use strict";
     init_react_import();
-    import_react24 = require("@tiptap/react");
+    import_react26 = require("@tiptap/react");
     init_use_control_context();
-    import_react25 = require("react");
     init_lucide_react();
     init_SelectControl();
-    import_jsx_runtime35 = require("react/jsx-runtime");
-    optionNodes2 = {
-      h1: { label: "Heading 1", icon: Heading1 },
-      h2: { label: "Heading 2", icon: Heading2 },
-      h3: { label: "Heading 3", icon: Heading3 },
-      h4: { label: "Heading 4", icon: Heading4 },
-      h5: { label: "Heading 5", icon: Heading5 },
-      h6: { label: "Heading 6", icon: Heading6 }
+    init_use_options2();
+    import_jsx_runtime38 = require("react/jsx-runtime");
+  }
+});
+
+// components/RichTextMenu/controls/HeadingSelect/index.tsx
+var import_react27, import_jsx_runtime39, HeadingSelectLoaded2, HeadingSelect;
+var init_HeadingSelect = __esm({
+  "components/RichTextMenu/controls/HeadingSelect/index.tsx"() {
+    "use strict";
+    init_react_import();
+    import_react27 = require("react");
+    init_fallback2();
+    import_jsx_runtime39 = require("react/jsx-runtime");
+    HeadingSelectLoaded2 = (0, import_react27.lazy)(
+      () => Promise.resolve().then(() => (init_loaded2(), loaded_exports2)).then((m) => ({
+        default: m.HeadingSelectLoaded
+      }))
+    );
+    HeadingSelect = () => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react27.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(HeadingSelectFallback, {}), children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(HeadingSelectLoaded2, {}) });
+  }
+});
+
+// components/RichTextMenu/controls/ListSelect/use-options.ts
+var import_react28, optionNodes3, useListOptions;
+var init_use_options3 = __esm({
+  "components/RichTextMenu/controls/ListSelect/use-options.ts"() {
+    "use strict";
+    init_react_import();
+    import_react28 = require("react");
+    init_lucide_react();
+    optionNodes3 = {
+      ul: { label: "Bullet list", icon: List },
+      ol: { label: "Numbered list", icon: ListOrdered }
+    };
+    useListOptions = (fieldOptions) => {
+      let blockOptions = [];
+      if ((fieldOptions == null ? void 0 : fieldOptions.listItem) !== false) {
+        blockOptions = ["ul", "ol"];
+      }
+      return (0, import_react28.useMemo)(
+        () => blockOptions.map((item) => ({
+          value: item,
+          label: optionNodes3[item].label,
+          icon: optionNodes3[item].icon
+        })),
+        [blockOptions]
+      );
     };
   }
 });
 
-// components/RichTextMenu/controls/ListSelect.tsx
-function ListSelect() {
-  const { options } = useControlContext();
-  let blockOptions = [];
-  if ((options == null ? void 0 : options.listItem) !== false) {
-    blockOptions = ["ul", "ol"];
+// components/RichTextMenu/controls/ListSelect/fallback.tsx
+function ListSelectFallback() {
+  const ctx = useControlContext();
+  const listOptions = useListOptions(ctx.options);
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    SelectControl,
+    {
+      options: listOptions,
+      onChange: () => {
+      },
+      value: "p",
+      defaultValue: "p",
+      renderDefaultIcon: List
+    }
+  );
+}
+var import_jsx_runtime40;
+var init_fallback3 = __esm({
+  "components/RichTextMenu/controls/ListSelect/fallback.tsx"() {
+    "use strict";
+    init_react_import();
+    init_SelectControl();
+    init_use_control_context();
+    init_lucide_react();
+    init_use_options3();
+    import_jsx_runtime40 = require("react/jsx-runtime");
   }
+});
+
+// components/RichTextMenu/controls/ListSelect/loaded.tsx
+var loaded_exports3 = {};
+__export(loaded_exports3, {
+  ListSelectLoaded: () => ListSelectLoaded
+});
+function ListSelectLoaded() {
+  const { options } = useControlContext();
+  const listOptions = useListOptions(options);
   const { editor } = useControlContext();
-  const currentValue = (0, import_react26.useEditorState)({
+  const currentValue = (0, import_react29.useEditorState)({
     editor,
     selector: (ctx) => {
       var _a, _b;
@@ -4458,18 +4648,10 @@ function ListSelect() {
       chain == null ? void 0 : chain.focus().toggleBulletList().run();
     }
   };
-  const loadedOptions = (0, import_react27.useMemo)(
-    () => blockOptions.map((item) => ({
-      value: item,
-      label: optionNodes3[item].label,
-      icon: optionNodes3[item].icon
-    })),
-    [blockOptions]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     SelectControl,
     {
-      options: loadedOptions,
+      options: listOptions,
       onChange: handleChange,
       value: currentValue != null ? currentValue : "p",
       defaultValue: "p",
@@ -4477,21 +4659,35 @@ function ListSelect() {
     }
   );
 }
-var import_react26, import_react27, import_jsx_runtime36, optionNodes3;
-var init_ListSelect = __esm({
-  "components/RichTextMenu/controls/ListSelect.tsx"() {
+var import_react29, import_jsx_runtime41;
+var init_loaded3 = __esm({
+  "components/RichTextMenu/controls/ListSelect/loaded.tsx"() {
     "use strict";
     init_react_import();
-    import_react26 = require("@tiptap/react");
+    import_react29 = require("@tiptap/react");
     init_use_control_context();
-    import_react27 = require("react");
-    init_lucide_react();
     init_SelectControl();
-    import_jsx_runtime36 = require("react/jsx-runtime");
-    optionNodes3 = {
-      ul: { label: "Bullet list", icon: List },
-      ol: { label: "Numbered list", icon: ListOrdered }
-    };
+    init_lucide_react();
+    init_use_options3();
+    import_jsx_runtime41 = require("react/jsx-runtime");
+  }
+});
+
+// components/RichTextMenu/controls/ListSelect/index.tsx
+var import_react30, import_jsx_runtime42, ListSelectLoaded2, ListSelect;
+var init_ListSelect = __esm({
+  "components/RichTextMenu/controls/ListSelect/index.tsx"() {
+    "use strict";
+    init_react_import();
+    import_react30 = require("react");
+    init_fallback3();
+    import_jsx_runtime42 = require("react/jsx-runtime");
+    ListSelectLoaded2 = (0, import_react30.lazy)(
+      () => Promise.resolve().then(() => (init_loaded3(), loaded_exports3)).then((m) => ({
+        default: m.ListSelectLoaded
+      }))
+    );
+    ListSelect = () => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react30.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ListSelectFallback, {}), children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ListSelectLoaded2, {}) });
   }
 });
 
@@ -4521,28 +4717,29 @@ var init_controls = __esm({
 });
 
 // components/RichTextMenu/inner.tsx
-var import_react28, import_jsx_runtime37, getClassName16, DefaultMenu, RichTextMenu, Group2, LoadedRichTextMenuInner;
+var import_react31, import_jsx_runtime43, getClassName16, DefaultMenu, RichTextMenu, Group2, LoadedRichTextMenuInner;
 var init_inner = __esm({
   "components/RichTextMenu/inner.tsx"() {
     "use strict";
     init_react_import();
     init_get_class_name_factory();
     init_styles_module3();
-    import_react28 = require("react");
+    import_react31 = require("react");
     init_controls();
     init_use_control_context();
     init_Control();
-    import_jsx_runtime37 = require("react/jsx-runtime");
+    init_AlignSelect();
+    import_jsx_runtime43 = require("react/jsx-runtime");
     getClassName16 = get_class_name_factory_default("RichTextMenu", styles_module_default9);
     DefaultMenu = ({ children }) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(RichTextMenu, { children });
+      return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(RichTextMenu, { children });
     };
     RichTextMenu = ({ children }) => {
       const { inline } = useControlContext();
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: getClassName16({ inline, form: !inline }), "data-puck-rte-menu": true, children });
+      return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: getClassName16({ inline, form: !inline }), "data-puck-rte-menu": true, children });
     };
     Group2 = ({ children }) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: getClassName16("group"), children });
+      return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: getClassName16("group"), children });
     };
     RichTextMenu.Group = Group2;
     RichTextMenu.Control = Control;
@@ -4564,45 +4761,45 @@ var init_inner = __esm({
     RichTextMenu.Strikethrough = Strikethrough2;
     RichTextMenu.Underline = Underline2;
     LoadedRichTextMenuInner = ({
-      editor,
-      editorState,
+      editor = null,
+      editorState = null,
       field,
       readOnly,
       inline
     }) => {
       const { renderMenu, renderInlineMenu } = field;
-      const InlineMenu = (0, import_react28.useMemo)(
+      const InlineMenu = (0, import_react31.useMemo)(
         () => renderInlineMenu || DefaultMenu,
         [renderInlineMenu]
       );
-      const Menu = (0, import_react28.useMemo)(() => renderMenu || DefaultMenu, [renderMenu]);
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      const Menu = (0, import_react31.useMemo)(() => renderMenu || DefaultMenu, [renderMenu]);
+      return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
         ControlContext.Provider,
         {
           value: { editor, editorState, inline, options: field.options, readOnly },
-          children: inline ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          children: inline ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
             InlineMenu,
             {
               editor,
               editorState,
               readOnly,
-              children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Group2, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Bold2, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Italic2, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Underline2, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Group2, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Bold2, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Italic2, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Underline2, {})
               ] })
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Menu, { editor, editorState, readOnly, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Group2, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(HeadingSelect, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ListSelect, {})
+          ) : /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Menu, { editor, editorState, readOnly, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Group2, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(HeadingSelect, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ListSelect, {})
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Group2, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Bold2, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Italic2, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Underline2, {})
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Group2, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Bold2, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Italic2, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Underline2, {})
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Group2, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AlignSelect, {}) })
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Group2, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(AlignSelect, {}) })
           ] })
         }
       );
@@ -4628,18 +4825,18 @@ var init_styles_module6 = __esm({
 });
 
 // components/RichTextEditor/components/EditorInner.tsx
-var import_react29, import_jsx_runtime38, getClassName17, EditorInner;
+var import_react32, import_jsx_runtime44, getClassName17, EditorInner;
 var init_EditorInner = __esm({
   "components/RichTextEditor/components/EditorInner.tsx"() {
     "use strict";
     init_react_import();
-    import_react29 = require("react");
+    import_react32 = require("react");
     init_styles_module6();
     init_get_class_name_factory();
     init_store();
-    import_jsx_runtime38 = require("react/jsx-runtime");
+    import_jsx_runtime44 = require("react/jsx-runtime");
     getClassName17 = get_class_name_factory_default("RichTextEditor", styles_module_default12);
-    EditorInner = (0, import_react29.memo)(
+    EditorInner = (0, import_react32.memo)(
       ({
         children,
         menu,
@@ -4657,7 +4854,7 @@ var init_EditorInner = __esm({
           }
         );
         const appStoreApi = useAppStoreApi();
-        const handleHotkeyCapture = (0, import_react29.useCallback)(
+        const handleHotkeyCapture = (0, import_react32.useCallback)(
           (event) => {
             var _a, _b;
             if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "i") {
@@ -4668,7 +4865,7 @@ var init_EditorInner = __esm({
           },
           [editor]
         );
-        const handleBlur = (0, import_react29.useCallback)(
+        const handleBlur = (0, import_react32.useCallback)(
           (e) => {
             var _a, _b;
             const targetInMenu = !!((_b = (_a = e.relatedTarget) == null ? void 0 : _a.closest) == null ? void 0 : _b.call(
@@ -4685,7 +4882,7 @@ var init_EditorInner = __esm({
           },
           [appStoreApi]
         );
-        return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
           "div",
           {
             className: getClassName17({
@@ -4694,11 +4891,11 @@ var init_EditorInner = __esm({
               isActive,
               disabled: readOnly
             }),
-            style: inline ? {} : { height: initialHeight != null ? initialHeight : 256, overflowY: "auto" },
+            style: inline ? {} : { height: initialHeight != null ? initialHeight : 192, overflowY: "auto" },
             onKeyDownCapture: handleHotkeyCapture,
             onBlur: handleBlur,
             children: [
-              !inline && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: getClassName17("menu"), children: menu }),
+              !inline && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: getClassName17("menu"), children: menu }),
               children
             ]
           }
@@ -4722,9 +4919,9 @@ function useSyncedEditor({
     leading: true,
     maxWait: 200
   });
-  const syncingRef = (0, import_react32.useRef)(false);
-  const lastSyncedRef = (0, import_react32.useRef)("");
-  const editTimer = (0, import_react32.useRef)(null);
+  const syncingRef = (0, import_react35.useRef)(false);
+  const lastSyncedRef = (0, import_react35.useRef)("");
+  const editTimer = (0, import_react35.useRef)(null);
   const isPending = !!editTimer.current;
   const isFocused = useAppStore((s) => s.state.ui.field.focus === name);
   const resetTimer = (clearOn) => {
@@ -4738,7 +4935,7 @@ function useSyncedEditor({
     }, 200);
   };
   const appStoreApi = useAppStoreApi();
-  const editor = (0, import_react31.useEditor)({
+  const editor = (0, import_react34.useEditor)({
     extensions,
     content,
     editable,
@@ -4756,7 +4953,7 @@ function useSyncedEditor({
       lastSyncedRef.current = html;
     }
   });
-  (0, import_react32.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (!editor) return;
     const handleFocus = () => {
       onFocusChange == null ? void 0 : onFocusChange(editor);
@@ -4766,7 +4963,7 @@ function useSyncedEditor({
       editor.off("focus", handleFocus);
     };
   }, [editor, onFocusChange]);
-  (0, import_react32.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (debouncedState) {
       const { ui } = appStoreApi.getState().state;
       onChange(debouncedState.html, {
@@ -4776,10 +4973,10 @@ function useSyncedEditor({
       });
     }
   }, [editor, debouncedState, onChange, appStoreApi, name]);
-  (0, import_react32.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     editor == null ? void 0 : editor.setEditable(editable);
   }, [editor, editable]);
-  (0, import_react32.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     var _a;
     if (!editor) return;
     if (isPending) {
@@ -4800,13 +4997,13 @@ function useSyncedEditor({
   }, [content, editor, appStoreApi]);
   return editor;
 }
-var import_react31, import_react32, import_use_debounce;
+var import_react34, import_react35, import_use_debounce;
 var init_use_synced_editor = __esm({
   "components/RichTextEditor/lib/use-synced-editor.ts"() {
     "use strict";
     init_react_import();
-    import_react31 = require("@tiptap/react");
-    import_react32 = require("react");
+    import_react34 = require("@tiptap/react");
+    import_react35 = require("react");
     import_use_debounce = require("use-debounce");
     init_store();
   }
@@ -4952,18 +5149,22 @@ var init_selector = __esm({
   }
 });
 
-// components/RichTextMenu/index.tsx
-var import_react33, import_react34, import_jsx_runtime40, LoadedRichTextMenu;
-var init_RichTextMenu = __esm({
-  "components/RichTextMenu/index.tsx"() {
+// components/RichTextMenu/full.tsx
+var full_exports = {};
+__export(full_exports, {
+  LoadedRichTextMenuFull: () => LoadedRichTextMenuFull
+});
+var import_react36, import_react37, import_jsx_runtime46, LoadedRichTextMenuFull;
+var init_full = __esm({
+  "components/RichTextMenu/full.tsx"() {
     "use strict";
     init_react_import();
-    import_react33 = require("@tiptap/react");
-    import_react34 = require("react");
+    import_react36 = require("@tiptap/react");
+    import_react37 = require("react");
     init_selector();
     init_inner();
-    import_jsx_runtime40 = require("react/jsx-runtime");
-    LoadedRichTextMenu = ({
+    import_jsx_runtime46 = require("react/jsx-runtime");
+    LoadedRichTextMenuFull = ({
       editor,
       field,
       readOnly,
@@ -4971,17 +5172,17 @@ var init_RichTextMenu = __esm({
     }) => {
       const { tiptap = {} } = field;
       const { selector } = tiptap;
-      const resolvedSelector = (0, import_react34.useMemo)(() => {
+      const resolvedSelector = (0, import_react37.useMemo)(() => {
         return (ctx) => __spreadValues(__spreadValues({}, defaultEditorState(ctx, readOnly)), selector ? selector(ctx, readOnly) : {});
       }, [selector, readOnly]);
-      const editorState = (0, import_react33.useEditorState)({
+      const editorState = (0, import_react36.useEditorState)({
         editor,
         selector: resolvedSelector
       });
       if (!editor || !editorState) {
         return null;
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
         LoadedRichTextMenuInner,
         {
           editor,
@@ -4995,25 +5196,45 @@ var init_RichTextMenu = __esm({
   }
 });
 
+// components/RichTextMenu/index.tsx
+var import_react38, import_jsx_runtime47, LoadedRichTextMenuFull2, LoadedRichTextMenu;
+var init_RichTextMenu = __esm({
+  "components/RichTextMenu/index.tsx"() {
+    "use strict";
+    init_react_import();
+    import_react38 = require("react");
+    init_inner();
+    import_jsx_runtime47 = require("react/jsx-runtime");
+    LoadedRichTextMenuFull2 = (0, import_react38.lazy)(
+      () => Promise.resolve().then(() => (init_full(), full_exports)).then((m) => ({
+        default: m.LoadedRichTextMenuFull
+      }))
+    );
+    LoadedRichTextMenu = (props) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react38.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(LoadedRichTextMenuInner, __spreadValues({}, props)), children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(LoadedRichTextMenuFull2, __spreadValues({}, props)) });
+    };
+  }
+});
+
 // components/RichTextEditor/components/Editor.tsx
 var Editor_exports = {};
 __export(Editor_exports, {
   Editor: () => Editor
 });
-var import_react35, import_react36, import_jsx_runtime41, Editor;
+var import_react39, import_react40, import_jsx_runtime48, Editor;
 var init_Editor = __esm({
   "components/RichTextEditor/components/Editor.tsx"() {
     "use strict";
     init_react_import();
-    import_react35 = require("react");
+    import_react39 = require("react");
     init_use_synced_editor();
     init_extension();
-    import_react36 = require("@tiptap/react");
+    import_react40 = require("@tiptap/react");
     init_store();
     init_RichTextMenu();
     init_EditorInner();
-    import_jsx_runtime41 = require("react/jsx-runtime");
-    Editor = (0, import_react35.memo)((props) => {
+    import_jsx_runtime48 = require("react/jsx-runtime");
+    Editor = (0, import_react39.memo)((props) => {
       const {
         onChange,
         content,
@@ -5026,7 +5247,7 @@ var init_Editor = __esm({
       } = props;
       const { tiptap = {}, options } = field;
       const { extensions = [] } = tiptap;
-      const loadedExtensions = (0, import_react35.useMemo)(
+      const loadedExtensions = (0, import_react39.useMemo)(
         () => [PuckRichText.configure(options), ...extensions],
         [field, extensions]
       );
@@ -5068,11 +5289,11 @@ var init_Editor = __esm({
         return editor;
       });
       if (!editor) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
         EditorInner,
         __spreadProps(__spreadValues({}, props), {
           editor,
-          menu: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          menu: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             LoadedRichTextMenu,
             {
               field,
@@ -5080,7 +5301,7 @@ var init_Editor = __esm({
               readOnly
             }
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react36.EditorContent, { editor, className: "rich-text" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react40.EditorContent, { editor, className: "rich-text" })
         })
       );
     });
@@ -5099,11 +5320,11 @@ function RichTextRender({
 }) {
   const { tiptap = {}, options } = field;
   const { extensions = [] } = tiptap;
-  const loadedExtensions = (0, import_react50.useMemo)(
+  const loadedExtensions = (0, import_react54.useMemo)(
     () => [PuckRichText.configure(options), ...extensions],
     [field, extensions]
   );
-  const normalized = (0, import_react50.useMemo)(() => {
+  const normalized = (0, import_react54.useMemo)(() => {
     if (typeof content === "object" && (content == null ? void 0 : content.type) === "doc") {
       return content;
     }
@@ -5121,22 +5342,22 @@ function RichTextRender({
     }
     return { type: "doc", content: [] };
   }, [content, loadedExtensions]);
-  const html = (0, import_react50.useMemo)(() => {
+  const html = (0, import_react54.useMemo)(() => {
     return (0, import_html.generateHTML)(normalized, loadedExtensions);
   }, [normalized, loadedExtensions]);
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: getClassName22(), children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "rich-text", dangerouslySetInnerHTML: { __html: html } }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: getClassName22(), children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "rich-text", dangerouslySetInnerHTML: { __html: html } }) });
 }
-var import_html, import_react50, import_jsx_runtime48, getClassName22;
+var import_html, import_react54, import_jsx_runtime55, getClassName22;
 var init_Render = __esm({
   "components/RichTextEditor/components/Render.tsx"() {
     "use strict";
     init_react_import();
     import_html = require("@tiptap/html");
-    import_react50 = require("react");
+    import_react54 = require("react");
     init_get_class_name_factory();
     init_styles_module6();
     init_extension();
-    import_jsx_runtime48 = require("react/jsx-runtime");
+    import_jsx_runtime55 = require("react/jsx-runtime");
     getClassName22 = get_class_name_factory_default("RichTextEditor", styles_module_default12);
   }
 });
@@ -5272,7 +5493,7 @@ init_react_import();
 var styles_module_default2 = { "InputWrapper": "_InputWrapper_bsxfo_1", "Input-label": "_Input-label_bsxfo_5", "Input-labelIcon": "_Input-labelIcon_bsxfo_14", "Input-disabledIcon": "_Input-disabledIcon_bsxfo_21", "Input-input": "_Input-input_bsxfo_26", "Input": "_Input_bsxfo_1", "Input--readOnly": "_Input--readOnly_bsxfo_82", "Input-radioGroupItems": "_Input-radioGroupItems_bsxfo_93", "Input-radio": "_Input-radio_bsxfo_93", "Input-radioInner": "_Input-radioInner_bsxfo_110", "Input-radioInput": "_Input-radioInput_bsxfo_155" };
 
 // components/AutoField/index.tsx
-var import_react39 = require("react");
+var import_react43 = require("react");
 
 // components/AutoField/fields/index.tsx
 init_react_import();
@@ -6799,22 +7020,22 @@ var TextareaField = ({
 
 // components/AutoField/fields/RichtextField/index.tsx
 init_react_import();
-var import_react37 = require("react");
+var import_react41 = require("react");
 init_lucide_react();
 
 // components/RichTextEditor/components/EditorFallback.tsx
 init_react_import();
-var import_react30 = require("react");
+var import_react33 = require("react");
 init_inner();
 init_EditorInner();
-var import_jsx_runtime39 = require("react/jsx-runtime");
-var EditorFallback = (0, import_react30.memo)((props) => {
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var EditorFallback = (0, import_react33.memo)((props) => {
   var _a;
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     EditorInner,
     __spreadProps(__spreadValues({}, props), {
       editor: null,
-      menu: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      menu: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
         LoadedRichTextMenuInner,
         {
           field: props.field,
@@ -6823,7 +7044,7 @@ var EditorFallback = (0, import_react30.memo)((props) => {
           readOnly: (_a = props.readOnly) != null ? _a : false
         }
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
         "div",
         {
           className: "rich-text",
@@ -6837,8 +7058,8 @@ var EditorFallback = (0, import_react30.memo)((props) => {
 EditorFallback.displayName = "EditorFallback";
 
 // components/AutoField/fields/RichtextField/index.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
-var Editor2 = (0, import_react37.lazy)(
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var Editor2 = (0, import_react41.lazy)(
   () => Promise.resolve().then(() => (init_Editor(), Editor_exports)).then((m) => ({
     default: m.Editor
   }))
@@ -6862,14 +7083,14 @@ var RichtextField = ({
     id,
     name
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_jsx_runtime42.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx_runtime49.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     Label2,
     {
       label: label || name,
-      icon: labelIcon || /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Type, { size: 16 }),
+      icon: labelIcon || /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Type, { size: 16 }),
       readOnly,
       el: "div",
-      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react37.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(EditorFallback, __spreadValues({}, editorProps)), children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Editor2, __spreadValues({}, editorProps)) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react41.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(EditorFallback, __spreadValues({}, editorProps)), children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Editor2, __spreadValues({}, editorProps)) })
     }
   ) });
 };
@@ -6887,7 +7108,7 @@ var styles_module_default13 = { "ObjectField": "_ObjectField_1ua3y_5", "ObjectFi
 
 // components/AutoField/fields/ObjectField/index.tsx
 init_lucide_react();
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var getClassName18 = get_class_name_factory_default("ObjectField", styles_module_default13);
 var ObjectField = ({
   field,
@@ -6905,25 +7126,25 @@ var ObjectField = ({
     return null;
   }
   const data = value || {};
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     Label2,
     {
       label: label || name,
-      icon: labelIcon || /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(EllipsisVertical, { size: 16 }),
+      icon: labelIcon || /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(EllipsisVertical, { size: 16 }),
       el: "div",
       readOnly,
-      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: getClassName18(), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("fieldset", { className: getClassName18("fieldset"), children: Object.keys(field.objectFields).map((subName) => {
+      children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: getClassName18(), children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("fieldset", { className: getClassName18("fieldset"), children: Object.keys(field.objectFields).map((subName) => {
         const subField = field.objectFields[subName];
         const subPath = `${localName}.${subName}`;
         const subReadOnly = readOnly ? readOnly : readOnlyFields[subPath];
         const label2 = subField.label || subName;
-        return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           NestedFieldProvider,
           {
             name: localName || id,
             subName,
             readOnlyFields,
-            children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
               AutoFieldPrivate,
               {
                 name: subPath,
@@ -6936,6 +7157,9 @@ var ObjectField = ({
                 }),
                 value: data[subName],
                 onChange: (val, ui) => {
+                  if (data[subName] === val) {
+                    return;
+                  }
                   onChange(
                     __spreadProps(__spreadValues({}, data), {
                       [subName]: val
@@ -6958,18 +7182,18 @@ init_store();
 
 // lib/use-safe-id.ts
 init_react_import();
-var import_react38 = __toESM(require("react"));
+var import_react42 = __toESM(require("react"));
 init_generate_id();
 var useSafeId = () => {
-  if (typeof import_react38.default.useId !== "undefined") {
-    return import_react38.default.useId();
+  if (typeof import_react42.default.useId !== "undefined") {
+    return import_react42.default.useId();
   }
-  const [id] = (0, import_react38.useState)(generateId());
+  const [id] = (0, import_react42.useState)(generateId());
   return id;
 };
 
 // components/AutoField/index.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var getClassName19 = get_class_name_factory_default("Input", styles_module_default2);
 var getClassNameWrapper = get_class_name_factory_default("InputWrapper", styles_module_default2);
 var FieldLabel = ({
@@ -6981,11 +7205,11 @@ var FieldLabel = ({
   className
 }) => {
   const El = el;
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(El, { className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: getClassName19("label"), children: [
-      icon ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: getClassName19("labelIcon"), children: icon }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_jsx_runtime44.Fragment, {}),
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(El, { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: getClassName19("label"), children: [
+      icon ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: getClassName19("labelIcon"), children: icon }) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx_runtime51.Fragment, {}),
       label,
-      readOnly && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: getClassName19("disabledIcon"), title: "Read-only", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Lock, { size: "12" }) })
+      readOnly && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: getClassName19("disabledIcon"), title: "Read-only", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Lock, { size: "12" }) })
     ] }),
     children
   ] });
@@ -6998,14 +7222,14 @@ var FieldLabelInternal = ({
   readOnly
 }) => {
   const overrides = useAppStore((s) => s.overrides);
-  const Wrapper = (0, import_react39.useMemo)(
+  const Wrapper = (0, import_react43.useMemo)(
     () => overrides.fieldLabel || FieldLabel,
     [overrides]
   );
   if (!label) {
-    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_jsx_runtime44.Fragment, { children });
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx_runtime51.Fragment, { children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     Wrapper,
     {
       label,
@@ -7036,14 +7260,14 @@ function AutoFieldInternal(props) {
     var _a2;
     return (_a2 = s.selectedItem) == null ? void 0 : _a2.readOnly;
   });
-  const nestedFieldContext = (0, import_react39.useContext)(NestedFieldContext);
+  const nestedFieldContext = (0, import_react43.useContext)(NestedFieldContext);
   const { id, Label: Label2 = FieldLabelInternal } = props;
   const field = props.field;
   const label = field.label;
   const labelIcon = field.labelIcon;
   const defaultId = useSafeId();
   const resolvedId = id || defaultId;
-  const render = (0, import_react39.useMemo)(
+  const render = (0, import_react43.useMemo)(
     () => {
       var _a2, _b, _c, _d, _e, _f, _g, _h, _i;
       return __spreadProps(__spreadValues({}, overrides.fieldTypes), {
@@ -7060,7 +7284,7 @@ function AutoFieldInternal(props) {
     },
     [overrides]
   );
-  const mergedProps = (0, import_react39.useMemo)(
+  const mergedProps = (0, import_react43.useMemo)(
     () => __spreadProps(__spreadValues({}, props), {
       field,
       label,
@@ -7070,7 +7294,7 @@ function AutoFieldInternal(props) {
     }),
     [props, field, label, labelIcon, Label2, resolvedId]
   );
-  const onFocus = (0, import_react39.useCallback)(
+  const onFocus = (0, import_react43.useCallback)(
     (e) => {
       if (mergedProps.name && (e.target.nodeName === "INPUT" || e.target.nodeName === "TEXTAREA")) {
         e.stopPropagation();
@@ -7084,7 +7308,7 @@ function AutoFieldInternal(props) {
     },
     [mergedProps.name]
   );
-  const onBlur = (0, import_react39.useCallback)((e) => {
+  const onBlur = (0, import_react43.useCallback)((e) => {
     if ("name" in e.target) {
       dispatch({
         type: "setUi",
@@ -7094,14 +7318,14 @@ function AutoFieldInternal(props) {
       });
     }
   }, []);
-  let Children = (0, import_react39.useMemo)(() => {
+  let Children = (0, import_react43.useMemo)(() => {
     if (field.type !== "custom" && field.type !== "slot") {
       return defaultFields[field.type];
     }
     return (_props) => null;
   }, [field.type]);
   const fieldKey = field.type === "custom" ? field.key : void 0;
-  let FieldComponent = (0, import_react39.useMemo)(() => {
+  let FieldComponent = (0, import_react43.useMemo)(() => {
     if (field.type === "custom") {
       if (!field.render) {
         return null;
@@ -7121,14 +7345,14 @@ function AutoFieldInternal(props) {
   if (!FieldComponent) {
     throw new Error(`Field type for ${field.type} did not exist.`);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     NestedFieldContext.Provider,
     {
       value: {
         readOnlyFields: nestedFieldContext.readOnlyFields || readOnly || {},
         localName: (_a = nestedFieldContext.localName) != null ? _a : mergedProps.name
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         "div",
         {
           className: getClassNameWrapper(),
@@ -7137,7 +7361,7 @@ function AutoFieldInternal(props) {
           onClick: (e) => {
             e.stopPropagation();
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(FieldComponent, __spreadProps(__spreadValues({}, mergedProps), { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Children, __spreadValues({}, mergedProps)) }))
+          children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(FieldComponent, __spreadProps(__spreadValues({}, mergedProps), { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Children, __spreadValues({}, mergedProps)) }))
         }
       )
     }
@@ -7146,20 +7370,20 @@ function AutoFieldInternal(props) {
 function AutoFieldPrivate(props) {
   const isFocused = useAppStore((s) => s.state.ui.field.focus === props.name);
   const { value, onChange } = props;
-  const [localValue, setLocalValue] = (0, import_react39.useState)(value);
-  const onChangeLocal = (0, import_react39.useCallback)(
+  const [localValue, setLocalValue] = (0, import_react43.useState)(value);
+  const onChangeLocal = (0, import_react43.useCallback)(
     (val, ui) => {
       setLocalValue(val);
       onChange(val, ui);
     },
     [onChange]
   );
-  (0, import_react39.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     if (!isFocused) {
       setLocalValue(value);
     }
   }, [value]);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     if (!isFocused) {
       if (value !== localValue) {
         setLocalValue(value);
@@ -7170,11 +7394,11 @@ function AutoFieldPrivate(props) {
     value: localValue,
     onChange: onChangeLocal
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(AutoFieldInternal, __spreadValues(__spreadValues({}, props), localProps));
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(AutoFieldInternal, __spreadValues(__spreadValues({}, props), localProps));
 }
 function AutoField(props) {
-  const DefaultLabel = (0, import_react39.useMemo)(() => {
-    const DefaultLabel2 = (labelProps) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  const DefaultLabel = (0, import_react43.useMemo)(() => {
+    const DefaultLabel2 = (labelProps) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       "div",
       __spreadProps(__spreadValues({}, labelProps), {
         className: getClassName19({ readOnly: props.readOnly })
@@ -7185,7 +7409,7 @@ function AutoField(props) {
   if (props.field.type === "slot") {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(AutoFieldInternal, __spreadProps(__spreadValues({}, props), { Label: DefaultLabel }));
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(AutoFieldInternal, __spreadProps(__spreadValues({}, props), { Label: DefaultLabel }));
 }
 
 // components/Drawer/index.tsx
@@ -7197,23 +7421,23 @@ var styles_module_default14 = { "Drawer": "_Drawer_pl7z0_1", "Drawer-draggable":
 
 // components/Drawer/index.tsx
 init_get_class_name_factory();
-var import_react60 = require("react");
+var import_react64 = require("react");
 init_generate_id();
 
 // components/DragDropContext/index.tsx
 init_react_import();
-var import_react58 = require("@dnd-kit/react");
+var import_react62 = require("@dnd-kit/react");
 init_store();
-var import_react59 = require("react");
+var import_react63 = require("react");
 var import_dom = require("@dnd-kit/dom");
 
 // components/DropZone/index.tsx
 init_react_import();
-var import_react56 = require("react");
+var import_react60 = require("react");
 
 // components/DraggableComponent/index.tsx
 init_react_import();
-var import_react43 = require("react");
+var import_react47 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css#css-module
 init_react_import();
@@ -7248,12 +7472,12 @@ function getDeepScrollPosition(element) {
 
 // components/DropZone/context.tsx
 init_react_import();
-var import_react40 = require("react");
+var import_react44 = require("react");
 init_store();
 var import_zustand3 = require("zustand");
-var import_jsx_runtime45 = require("react/jsx-runtime");
-var dropZoneContext = (0, import_react40.createContext)(null);
-var ZoneStoreContext = (0, import_react40.createContext)(
+var import_jsx_runtime52 = require("react/jsx-runtime");
+var dropZoneContext = (0, import_react44.createContext)(null);
+var ZoneStoreContext = (0, import_react44.createContext)(
   (0, import_zustand3.createStore)(() => ({
     zoneDepthIndex: {},
     nextZoneDepthIndex: {},
@@ -7269,14 +7493,14 @@ var ZoneStoreProvider = ({
   children,
   store
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ZoneStoreContext.Provider, { value: store, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ZoneStoreContext.Provider, { value: store, children });
 };
 var DropZoneProvider = ({
   children,
   value
 }) => {
   const dispatch = useAppStore((s) => s.dispatch);
-  const registerZone = (0, import_react40.useCallback)(
+  const registerZone = (0, import_react44.useCallback)(
     (zoneCompound) => {
       dispatch({
         type: "registerZone",
@@ -7285,13 +7509,13 @@ var DropZoneProvider = ({
     },
     [dispatch]
   );
-  const memoValue = (0, import_react40.useMemo)(
+  const memoValue = (0, import_react44.useMemo)(
     () => __spreadValues({
       registerZone
     }, value),
     [value]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_jsx_runtime45.Fragment, { children: memoValue && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(dropZoneContext.Provider, { value: memoValue, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_jsx_runtime52.Fragment, { children: memoValue && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(dropZoneContext.Provider, { value: memoValue, children }) });
 };
 
 // components/DraggableComponent/index.tsx
@@ -7316,11 +7540,11 @@ function accumulateTransform(el) {
 
 // lib/use-context-store.ts
 init_react_import();
-var import_react41 = require("react");
+var import_react45 = require("react");
 var import_zustand4 = require("zustand");
 var import_shallow = require("zustand/react/shallow");
 function useContextStore(context, selector) {
-  const store = (0, import_react41.useContext)(context);
+  const store = (0, import_react45.useContext)(context);
   if (!store) {
     throw new Error("useContextStore must be used inside context");
   }
@@ -7329,11 +7553,11 @@ function useContextStore(context, selector) {
 
 // lib/dnd/use-on-drag-finished.ts
 init_react_import();
-var import_react42 = require("react");
+var import_react46 = require("react");
 init_store();
 var useOnDragFinished = (cb, deps = []) => {
   const appStore = useAppStoreApi();
-  return (0, import_react42.useCallback)(() => {
+  return (0, import_react46.useCallback)(() => {
     let dispose = () => {
     };
     const processDragging = (isDragging2) => {
@@ -7362,7 +7586,7 @@ var useOnDragFinished = (cb, deps = []) => {
 
 // components/DraggableComponent/index.tsx
 init_RichTextMenu();
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var getClassName20 = get_class_name_factory_default("DraggableComponent", styles_module_default15);
 var DEBUG2 = false;
 var space = 8;
@@ -7373,16 +7597,16 @@ var DefaultActionBar = ({
   label,
   children,
   parentAction
-}) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(ActionBar, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(ActionBar.Group, { children: [
+}) => /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(ActionBar, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(ActionBar.Group, { children: [
     parentAction,
-    label && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ActionBar.Label, { label })
+    label && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ActionBar.Label, { label })
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ActionBar.Group, { children })
+  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ActionBar.Group, { children })
 ] });
 var DefaultOverlay = ({
   children
-}) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_jsx_runtime46.Fragment, { children });
+}) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_jsx_runtime53.Fragment, { children });
 var DraggableComponent = ({
   children,
   depth,
@@ -7407,9 +7631,9 @@ var DraggableComponent = ({
   const overrides = useAppStore((s) => s.overrides);
   const dispatch = useAppStore((s) => s.dispatch);
   const iframe = useAppStore((s) => s.iframe);
-  const ctx = (0, import_react43.useContext)(dropZoneContext);
-  const [localZones, setLocalZones] = (0, import_react43.useState)({});
-  const registerLocalZone = (0, import_react43.useCallback)(
+  const ctx = (0, import_react47.useContext)(dropZoneContext);
+  const [localZones, setLocalZones] = (0, import_react47.useState)({});
+  const registerLocalZone = (0, import_react47.useCallback)(
     (zoneCompound2, active) => {
       var _a;
       (_a = ctx == null ? void 0 : ctx.registerLocalZone) == null ? void 0 : _a.call(ctx, zoneCompound2, active);
@@ -7419,7 +7643,7 @@ var DraggableComponent = ({
     },
     [setLocalZones]
   );
-  const unregisterLocalZone = (0, import_react43.useCallback)(
+  const unregisterLocalZone = (0, import_react47.useCallback)(
     (zoneCompound2) => {
       var _a;
       (_a = ctx == null ? void 0 : ctx.unregisterLocalZone) == null ? void 0 : _a.call(ctx, zoneCompound2);
@@ -7442,9 +7666,9 @@ var DraggableComponent = ({
       return s.permissions.getPermissions({ item });
     })
   );
-  const zoneStore = (0, import_react43.useContext)(ZoneStoreContext);
-  const [dragAxis, setDragAxis] = (0, import_react43.useState)(userDragAxis || autoDragAxis);
-  const dynamicCollisionDetector = (0, import_react43.useMemo)(
+  const zoneStore = (0, import_react47.useContext)(ZoneStoreContext);
+  const [dragAxis, setDragAxis] = (0, import_react47.useState)(userDragAxis || autoDragAxis);
+  const dynamicCollisionDetector = (0, import_react47.useMemo)(
     () => createDynamicCollisionDetector(dragAxis),
     [dragAxis]
   );
@@ -7476,7 +7700,7 @@ var DraggableComponent = ({
     },
     feedback: "clone"
   });
-  (0, import_react43.useEffect)(() => {
+  (0, import_react47.useEffect)(() => {
     const isEnabled = zoneStore.getState().enabledIndex[zoneCompound];
     sortable.droppable.disabled = !isEnabled;
     sortable.draggable.disabled = !permissions.drag;
@@ -7493,9 +7717,9 @@ var DraggableComponent = ({
     }
     return cleanup;
   }, [permissions.drag, zoneCompound]);
-  const [, setRerender] = (0, import_react43.useState)(0);
-  const ref = (0, import_react43.useRef)(null);
-  const refSetter = (0, import_react43.useCallback)(
+  const [, setRerender] = (0, import_react47.useState)(0);
+  const ref = (0, import_react47.useRef)(null);
+  const refSetter = (0, import_react47.useCallback)(
     (el) => {
       sortableRef(el);
       if (ref.current !== el) {
@@ -7505,14 +7729,14 @@ var DraggableComponent = ({
     },
     [sortableRef]
   );
-  const [portalEl, setPortalEl] = (0, import_react43.useState)();
-  (0, import_react43.useEffect)(() => {
+  const [portalEl, setPortalEl] = (0, import_react47.useState)();
+  (0, import_react47.useEffect)(() => {
     var _a, _b, _c;
     setPortalEl(
       iframe.enabled ? (_a = ref.current) == null ? void 0 : _a.ownerDocument.body : (_c = (_b = ref.current) == null ? void 0 : _b.closest("[data-puck-preview]")) != null ? _c : document.body
     );
   }, [iframe.enabled, ref.current]);
-  const getStyle = (0, import_react43.useCallback)(() => {
+  const getStyle = (0, import_react47.useCallback)(() => {
     var _a, _b, _c;
     if (!ref.current) return;
     const rect = ref.current.getBoundingClientRect();
@@ -7537,11 +7761,11 @@ var DraggableComponent = ({
     };
     return style2;
   }, [ref.current]);
-  const [style, setStyle] = (0, import_react43.useState)();
-  const sync = (0, import_react43.useCallback)(() => {
+  const [style, setStyle] = (0, import_react47.useState)();
+  const sync = (0, import_react47.useCallback)(() => {
     setStyle(getStyle());
   }, [ref.current, iframe]);
-  (0, import_react43.useEffect)(() => {
+  (0, import_react47.useEffect)(() => {
     if (ref.current) {
       const observer = new ResizeObserver(sync);
       observer.observe(ref.current);
@@ -7551,13 +7775,13 @@ var DraggableComponent = ({
     }
   }, [ref.current]);
   const registerNode = useAppStore((s) => s.nodes.registerNode);
-  const hideOverlay = (0, import_react43.useCallback)(() => {
+  const hideOverlay = (0, import_react47.useCallback)(() => {
     setIsVisible(false);
   }, []);
-  const showOverlay = (0, import_react43.useCallback)(() => {
+  const showOverlay = (0, import_react47.useCallback)(() => {
     setIsVisible(true);
   }, []);
-  (0, import_react43.useEffect)(() => {
+  (0, import_react47.useEffect)(() => {
     var _a;
     registerNode(id, {
       methods: { sync, showOverlay, hideOverlay },
@@ -7574,15 +7798,15 @@ var DraggableComponent = ({
       });
     };
   }, [id, zoneCompound, index, componentType, sync]);
-  const CustomActionBar = (0, import_react43.useMemo)(
+  const CustomActionBar = (0, import_react47.useMemo)(
     () => overrides.actionBar || DefaultActionBar,
     [overrides.actionBar]
   );
-  const CustomOverlay = (0, import_react43.useMemo)(
+  const CustomOverlay = (0, import_react47.useMemo)(
     () => overrides.componentOverlay || DefaultOverlay,
     [overrides.componentOverlay]
   );
-  const onClick = (0, import_react43.useCallback)(
+  const onClick = (0, import_react47.useCallback)(
     (e) => {
       const el = e.target;
       if (!el.closest("[data-puck-overlay-portal]")) {
@@ -7598,7 +7822,7 @@ var DraggableComponent = ({
     [index, zoneCompound, id]
   );
   const appStore = useAppStoreApi();
-  const onSelectParent = (0, import_react43.useCallback)(() => {
+  const onSelectParent = (0, import_react47.useCallback)(() => {
     const { nodes, zones } = appStore.getState().state.indexes;
     const node = nodes[id];
     const parentNode = (node == null ? void 0 : node.parentId) ? nodes[node == null ? void 0 : node.parentId] : null;
@@ -7619,26 +7843,26 @@ var DraggableComponent = ({
       }
     });
   }, [ctx, path]);
-  const onDuplicate = (0, import_react43.useCallback)(() => {
+  const onDuplicate = (0, import_react47.useCallback)(() => {
     dispatch({
       type: "duplicate",
       sourceIndex: index,
       sourceZone: zoneCompound
     });
   }, [index, zoneCompound]);
-  const onDelete = (0, import_react43.useCallback)(() => {
+  const onDelete = (0, import_react47.useCallback)(() => {
     dispatch({
       type: "remove",
       index,
       zone: zoneCompound
     });
   }, [index, zoneCompound]);
-  const [hover, setHover] = (0, import_react43.useState)(false);
+  const [hover, setHover] = (0, import_react47.useState)(false);
   const indicativeHover = useContextStore(
     ZoneStoreContext,
     (s) => s.hoveringComponent === id
   );
-  (0, import_react43.useEffect)(() => {
+  (0, import_react47.useEffect)(() => {
     if (!ref.current) {
       return;
     }
@@ -7683,10 +7907,10 @@ var DraggableComponent = ({
     thisIsDragging,
     inDroppableZone
   ]);
-  const [isVisible, setIsVisible] = (0, import_react43.useState)(false);
-  const [dragFinished, setDragFinished] = (0, import_react43.useState)(true);
-  const [_, startTransition] = (0, import_react43.useTransition)();
-  (0, import_react43.useEffect)(() => {
+  const [isVisible, setIsVisible] = (0, import_react47.useState)(false);
+  const [dragFinished, setDragFinished] = (0, import_react47.useState)(true);
+  const [_, startTransition] = (0, import_react47.useTransition)();
+  (0, import_react47.useEffect)(() => {
     startTransition(() => {
       if (hover || indicativeHover || isSelected) {
         sync();
@@ -7697,7 +7921,7 @@ var DraggableComponent = ({
       }
     });
   }, [hover, indicativeHover, isSelected, iframe]);
-  const [thisWasDragging, setThisWasDragging] = (0, import_react43.useState)(false);
+  const [thisWasDragging, setThisWasDragging] = (0, import_react47.useState)(false);
   const onDragFinished = useOnDragFinished((finished) => {
     if (finished) {
       startTransition(() => {
@@ -7708,15 +7932,15 @@ var DraggableComponent = ({
       setDragFinished(false);
     }
   });
-  (0, import_react43.useEffect)(() => {
+  (0, import_react47.useEffect)(() => {
     if (thisIsDragging) {
       setThisWasDragging(true);
     }
   }, [thisIsDragging]);
-  (0, import_react43.useEffect)(() => {
+  (0, import_react47.useEffect)(() => {
     if (thisWasDragging) return onDragFinished();
   }, [thisWasDragging, onDragFinished]);
-  const syncActionsPosition = (0, import_react43.useCallback)(
+  const syncActionsPosition = (0, import_react47.useCallback)(
     (el) => {
       if (el) {
         const view = el.ownerDocument.defaultView;
@@ -7741,7 +7965,7 @@ var DraggableComponent = ({
     },
     [zoom]
   );
-  (0, import_react43.useEffect)(() => {
+  (0, import_react47.useEffect)(() => {
     if (userDragAxis) {
       setDragAxis(userDragAxis);
       return;
@@ -7755,11 +7979,11 @@ var DraggableComponent = ({
     }
     setDragAxis(autoDragAxis);
   }, [ref, userDragAxis, autoDragAxis]);
-  const parentAction = (0, import_react43.useMemo)(
-    () => (ctx == null ? void 0 : ctx.areaId) && (ctx == null ? void 0 : ctx.areaId) !== "root" && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ActionBar.Action, { onClick: onSelectParent, label: "Select parent", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(CornerLeftUp, { size: 16 }) }),
+  const parentAction = (0, import_react47.useMemo)(
+    () => (ctx == null ? void 0 : ctx.areaId) && (ctx == null ? void 0 : ctx.areaId) !== "root" && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ActionBar.Action, { onClick: onSelectParent, label: "Select parent", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(CornerLeftUp, { size: 16 }) }),
     [ctx == null ? void 0 : ctx.areaId]
   );
-  const nextContextValue = (0, import_react43.useMemo)(
+  const nextContextValue = (0, import_react47.useMemo)(
     () => __spreadProps(__spreadValues({}, ctx), {
       areaId: id,
       zoneCompound,
@@ -7785,9 +8009,9 @@ var DraggableComponent = ({
     }
   );
   const hasNormalActions = permissions.duplicate || permissions.delete;
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(DropZoneProvider, { value: nextContextValue, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(DropZoneProvider, { value: nextContextValue, children: [
     dragFinished && isVisible && (0, import_react_dom2.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
         "div",
         {
           className: getClassName20({
@@ -7799,15 +8023,15 @@ var DraggableComponent = ({
           "data-puck-overlay": true,
           children: [
             debug,
-            isLoading && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: getClassName20("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Loader, {}) }),
-            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+            isLoading && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: getClassName20("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Loader, {}) }),
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
               "div",
               {
                 className: getClassName20("actionsOverlay"),
                 style: {
                   top: actionsOverlayTop / zoom
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                   "div",
                   {
                     className: getClassName20("actions"),
@@ -7819,14 +8043,14 @@ var DraggableComponent = ({
                       paddingRight: actionsSide
                     },
                     ref: syncActionsPosition,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
                       CustomActionBar,
                       {
                         parentAction,
                         label: DEBUG2 ? id : label,
                         children: [
-                          richText && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                          richText && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                               LoadedRichTextMenu,
                               {
                                 editor: richText.editor,
@@ -7835,10 +8059,10 @@ var DraggableComponent = ({
                                 readOnly: false
                               }
                             ),
-                            hasNormalActions && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ActionBar.Separator, {})
+                            hasNormalActions && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ActionBar.Separator, {})
                           ] }),
-                          permissions.duplicate && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ActionBar.Action, { onClick: onDuplicate, label: "Duplicate", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Copy, { size: 16 }) }),
-                          permissions.delete && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ActionBar.Action, { onClick: onDelete, label: "Delete", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Trash, { size: 16 }) })
+                          permissions.duplicate && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ActionBar.Action, { onClick: onDuplicate, label: "Duplicate", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Copy, { size: 16 }) }),
+                          permissions.delete && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ActionBar.Action, { onClick: onDelete, label: "Delete", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Trash, { size: 16 }) })
                         ]
                       }
                     )
@@ -7846,14 +8070,14 @@ var DraggableComponent = ({
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: getClassName20("overlayWrapper"), children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: getClassName20("overlayWrapper"), children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
               CustomOverlay,
               {
                 componentId: id,
                 componentType,
                 hover,
                 isSelected,
-                children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: getClassName20("overlay") })
+                children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: getClassName20("overlay") })
               }
             ) })
           ]
@@ -7876,11 +8100,11 @@ var styles_module_default16 = { "DropZone": "_DropZone_1i2sv_1", "DropZone--hasC
 
 // components/DropZone/index.tsx
 init_store();
-var import_react57 = require("@dnd-kit/react");
+var import_react61 = require("@dnd-kit/react");
 
 // components/DropZone/lib/use-min-empty-height.ts
 init_react_import();
-var import_react44 = require("react");
+var import_react48 = require("react");
 init_store();
 var getNumItems = (appStore, zoneCompound) => appStore.getState().state.indexes.zones[zoneCompound].contentIds.length;
 var useMinEmptyHeight = ({
@@ -7889,8 +8113,8 @@ var useMinEmptyHeight = ({
   ref
 }) => {
   const appStore = useAppStoreApi();
-  const [prevHeight, setPrevHeight] = (0, import_react44.useState)(0);
-  const [isAnimating, setIsAnimating] = (0, import_react44.useState)(false);
+  const [prevHeight, setPrevHeight] = (0, import_react48.useState)(0);
+  const [isAnimating, setIsAnimating] = (0, import_react48.useState)(false);
   const { draggedItem, isZone } = useContextStore(ZoneStoreContext, (s) => {
     var _a, _b;
     return {
@@ -7898,7 +8122,7 @@ var useMinEmptyHeight = ({
       isZone: ((_b = s.draggedItem) == null ? void 0 : _b.data.zone) === zoneCompound
     };
   });
-  const numItems = (0, import_react44.useRef)(0);
+  const numItems = (0, import_react48.useRef)(0);
   const onDragFinished = useOnDragFinished(
     (finished) => {
       var _a;
@@ -7933,7 +8157,7 @@ var useMinEmptyHeight = ({
     },
     [appStore, prevHeight, zoneCompound]
   );
-  (0, import_react44.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     if (draggedItem && ref.current) {
       if (isZone) {
         const rect = ref.current.getBoundingClientRect();
@@ -7965,15 +8189,15 @@ function assignRefs(refs, node) {
 
 // components/DropZone/lib/use-content-with-preview.ts
 init_react_import();
-var import_react47 = require("react");
+var import_react51 = require("react");
 
 // lib/dnd/use-rendered-callback.ts
 init_react_import();
-var import_react45 = require("@dnd-kit/react");
-var import_react46 = require("react");
+var import_react49 = require("@dnd-kit/react");
+var import_react50 = require("react");
 function useRenderedCallback(callback, deps) {
-  const manager = (0, import_react45.useDragDropManager)();
-  return (0, import_react46.useCallback)(
+  const manager = (0, import_react49.useDragDropManager)();
+  return (0, import_react50.useCallback)(
     (...args) => __async(null, null, function* () {
       yield manager == null ? void 0 : manager.renderer.rendering;
       return callback(...args);
@@ -7986,14 +8210,14 @@ function useRenderedCallback(callback, deps) {
 init_insert();
 init_store();
 var useContentIdsWithPreview = (contentIds, zoneCompound) => {
-  const zoneStore = (0, import_react47.useContext)(ZoneStoreContext);
+  const zoneStore = (0, import_react51.useContext)(ZoneStoreContext);
   const preview = useContextStore(
     ZoneStoreContext,
     (s) => s.previewIndex[zoneCompound]
   );
   const isDragging = useAppStore((s) => s.state.ui.isDragging);
-  const [contentIdsWithPreview, setContentIdsWithPreview] = (0, import_react47.useState)(contentIds);
-  const [localPreview, setLocalPreview] = (0, import_react47.useState)(
+  const [contentIdsWithPreview, setContentIdsWithPreview] = (0, import_react51.useState)(contentIds);
+  const [localPreview, setLocalPreview] = (0, import_react51.useState)(
     preview
   );
   const updateContent = useRenderedCallback(
@@ -8028,7 +8252,7 @@ var useContentIdsWithPreview = (contentIds, zoneCompound) => {
     },
     []
   );
-  (0, import_react47.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     var _a;
     const s = zoneStore.getState();
     const draggedItemId = (_a = s.draggedItem) == null ? void 0 : _a.id;
@@ -8046,17 +8270,17 @@ var useContentIdsWithPreview = (contentIds, zoneCompound) => {
 
 // components/DropZone/lib/use-drag-axis.ts
 init_react_import();
-var import_react48 = require("react");
+var import_react52 = require("react");
 init_store();
 var GRID_DRAG_AXIS = "dynamic";
 var FLEX_ROW_DRAG_AXIS = "x";
 var DEFAULT_DRAG_AXIS = "y";
 var useDragAxis = (ref, collisionAxis) => {
   const status = useAppStore((s) => s.status);
-  const [dragAxis, setDragAxis] = (0, import_react48.useState)(
+  const [dragAxis, setDragAxis] = (0, import_react52.useState)(
     collisionAxis || DEFAULT_DRAG_AXIS
   );
-  const calculateDragAxis = (0, import_react48.useCallback)(() => {
+  const calculateDragAxis = (0, import_react52.useCallback)(() => {
     if (ref.current) {
       const computedStyle = window.getComputedStyle(ref.current);
       if (computedStyle.display === "grid") {
@@ -8068,7 +8292,7 @@ var useDragAxis = (ref, collisionAxis) => {
       }
     }
   }, [ref.current]);
-  (0, import_react48.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     const onViewportChange = () => {
       calculateDragAxis();
     };
@@ -8077,7 +8301,7 @@ var useDragAxis = (ref, collisionAxis) => {
       window.removeEventListener("viewportchange", onViewportChange);
     };
   }, []);
-  (0, import_react48.useEffect)(calculateDragAxis, [status, collisionAxis]);
+  (0, import_react52.useEffect)(calculateDragAxis, [status, collisionAxis]);
   return [dragAxis, calculateDragAxis];
 };
 
@@ -8093,10 +8317,10 @@ init_react_import();
 
 // lib/field-transforms/use-field-transforms.tsx
 init_react_import();
-var import_react49 = require("react");
+var import_react53 = require("react");
 init_map_fields();
 function useFieldTransforms(config, item, transforms, readOnly, forceReadOnly) {
-  const mappers = (0, import_react49.useMemo)(() => {
+  const mappers = (0, import_react53.useMemo)(() => {
     return Object.keys(transforms).reduce((acc, _fieldType) => {
       const fieldType = _fieldType;
       return __spreadProps(__spreadValues({}, acc), {
@@ -8117,11 +8341,11 @@ function useFieldTransforms(config, item, transforms, readOnly, forceReadOnly) {
       });
     }, {});
   }, [transforms, readOnly, forceReadOnly]);
-  const transformedProps = (0, import_react49.useMemo)(() => {
+  const transformedProps = (0, import_react53.useMemo)(() => {
     const mapped = mapFields(item, mappers, config).props;
     return mapped;
   }, [config, item, mappers]);
-  const mergedProps = (0, import_react49.useMemo)(
+  const mergedProps = (0, import_react53.useMemo)(
     () => __spreadValues(__spreadValues({}, item.props), transformedProps),
     [item.props, transformedProps]
   );
@@ -8156,7 +8380,7 @@ function useSlots(config, item, renderSlotEdit, renderSlotRender = renderSlotEdi
 }
 
 // components/Render/index.tsx
-var import_react53 = __toESM(require("react"));
+var import_react57 = __toESM(require("react"));
 
 // components/SlotRender/index.tsx
 init_react_import();
@@ -8165,20 +8389,20 @@ init_store();
 
 // components/SlotRender/server.tsx
 init_react_import();
-var import_react52 = require("react");
+var import_react56 = require("react");
 
 // components/RichTextEditor/lib/use-richtext-props.tsx
 init_react_import();
-var import_react51 = require("react");
+var import_react55 = require("react");
 
 // components/RichTextEditor/components/RenderFallback.tsx
 init_react_import();
 init_get_class_name_factory();
 init_styles_module6();
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var getClassName21 = get_class_name_factory_default("RichTextEditor", styles_module_default12);
 function RichTextRenderFallback({ content }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: getClassName21(), children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: getClassName21(), children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     "div",
     {
       className: "rich-text",
@@ -8188,7 +8412,7 @@ function RichTextRenderFallback({ content }) {
 }
 
 // components/RichTextEditor/lib/use-richtext-props.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 function useRichtextProps(fields, props) {
   const findAllRichtextKeys = (fields2) => {
     if (!fields2) return [];
@@ -8200,16 +8424,16 @@ function useRichtextProps(fields, props) {
     }
     return result;
   };
-  const richtextKeys = (0, import_react51.useMemo)(() => findAllRichtextKeys(fields), [fields]);
-  const richtextProps = (0, import_react51.useMemo)(() => {
+  const richtextKeys = (0, import_react55.useMemo)(() => findAllRichtextKeys(fields), [fields]);
+  const richtextProps = (0, import_react55.useMemo)(() => {
     if (!(richtextKeys == null ? void 0 : richtextKeys.length)) return {};
-    const RichTextRender3 = (0, import_react51.lazy)(
+    const RichTextRender3 = (0, import_react55.lazy)(
       () => Promise.resolve().then(() => (init_Render(), Render_exports)).then((m) => ({
         default: m.RichTextRender
       }))
     );
     return richtextKeys.reduce((acc, key) => {
-      acc[key] = /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react51.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(RichTextRenderFallback, { content: props[key] }), children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      acc[key] = /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react55.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(RichTextRenderFallback, { content: props[key] }), children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
         RichTextRender3,
         {
           content: props[key],
@@ -8223,17 +8447,17 @@ function useRichtextProps(fields, props) {
 }
 
 // components/SlotRender/server.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
-var SlotRenderPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(SlotRender, __spreadValues({}, props));
+var import_jsx_runtime57 = require("react/jsx-runtime");
+var SlotRenderPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(SlotRender, __spreadValues({}, props));
 var Item2 = ({
   config,
   item,
   metadata
 }) => {
   const Component = config.components[item.type];
-  const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
+  const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
   const richtextProps = useRichtextProps(Component.fields, props);
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     Component.render,
     __spreadProps(__spreadValues(__spreadValues({}, props), richtextProps), {
       puck: __spreadProps(__spreadValues({}, props.puck), {
@@ -8242,14 +8466,14 @@ var Item2 = ({
     })
   );
 };
-var SlotRender = (0, import_react52.forwardRef)(
+var SlotRender = (0, import_react56.forwardRef)(
   function SlotRenderInternal({ className, style, content, config, metadata, as }, ref) {
     const El = as != null ? as : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(El, { className, style, ref, children: content.map((item) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(El, { className, style, ref, children: content.map((item) => {
       if (!config.components[item.type]) {
         return null;
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
         Item2,
         {
           config,
@@ -8263,7 +8487,7 @@ var SlotRender = (0, import_react52.forwardRef)(
 );
 
 // components/SlotRender/index.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var ContextSlotRender = ({
   componentId,
   zone
@@ -8278,7 +8502,7 @@ var ContextSlotRender = ({
       return contentIds.map((contentId) => indexes.nodes[contentId].flatData);
     })
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     SlotRenderPure,
     {
       content: slotContent,
@@ -8290,8 +8514,8 @@ var ContextSlotRender = ({
 };
 
 // components/Render/index.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
-var renderContext = import_react53.default.createContext({
+var import_jsx_runtime59 = require("react/jsx-runtime");
+var renderContext = import_react57.default.createContext({
   config: { components: {} },
   data: { root: {}, content: [] },
   metadata: {}
@@ -8322,10 +8546,10 @@ function Render({
   const propsWithSlots = useSlots(
     config,
     { type: "root", props: pageProps },
-    (props) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(SlotRender, __spreadProps(__spreadValues({}, props), { config, metadata }))
+    (props) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SlotRender, __spreadProps(__spreadValues({}, props), { config, metadata }))
   );
   const richtextProps = useRichtextProps((_a = config.root) == null ? void 0 : _a.fields, pageProps);
-  const nextContextValue = (0, import_react53.useMemo)(
+  const nextContextValue = (0, import_react57.useMemo)(
     () => ({
       mode: "render",
       depth: 0
@@ -8333,9 +8557,9 @@ function Render({
     []
   );
   if ((_b = config.root) == null ? void 0 : _b.render) {
-    return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(config.root.render, __spreadProps(__spreadValues(__spreadValues({}, propsWithSlots), richtextProps), { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(DropZoneRenderPure, { zone: rootZone }) })) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(config.root.render, __spreadProps(__spreadValues(__spreadValues({}, propsWithSlots), richtextProps), { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DropZoneRenderPure, { zone: rootZone }) })) }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(DropZoneRenderPure, { zone: rootZone }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DropZoneRenderPure, { zone: rootZone }) }) });
 }
 
 // components/DropZone/index.tsx
@@ -8346,7 +8570,7 @@ init_react_import();
 
 // components/InlineTextField/index.tsx
 init_react_import();
-var import_react54 = require("react");
+var import_react58 = require("react");
 
 // lib/overlay-portal/index.tsx
 init_react_import();
@@ -8451,7 +8675,7 @@ var getSelectorForId = (state, id) => {
 };
 
 // components/InlineTextField/index.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var getClassName23 = get_class_name_factory_default("InlineTextField", styles_module_default17);
 var InlineTextFieldInternal = ({
   propPath,
@@ -8461,10 +8685,10 @@ var InlineTextFieldInternal = ({
   opts = {}
 }) => {
   var _a;
-  const ref = (0, import_react54.useRef)(null);
+  const ref = (0, import_react58.useRef)(null);
   const appStoreApi = useAppStoreApi();
   const disableLineBreaks = (_a = opts.disableLineBreaks) != null ? _a : false;
-  (0, import_react54.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     const appStore = appStoreApi.getState();
     const data = appStore.state.indexes.nodes[componentId].data;
     const componentConfig = appStore.getComponentConfig(data.type);
@@ -8510,9 +8734,9 @@ var InlineTextFieldInternal = ({
       };
     }
   }, [appStoreApi, ref.current, value, disableLineBreaks]);
-  const [isHovering, setIsHovering] = (0, import_react54.useState)(false);
-  const [isFocused, setIsFocused] = (0, import_react54.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  const [isHovering, setIsHovering] = (0, import_react58.useState)(false);
+  const [isFocused, setIsFocused] = (0, import_react58.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     "span",
     {
       className: getClassName23(),
@@ -8548,14 +8772,14 @@ var InlineTextFieldInternal = ({
     }
   );
 };
-var InlineTextField = (0, import_react54.memo)(InlineTextFieldInternal);
+var InlineTextField = (0, import_react58.memo)(InlineTextFieldInternal);
 
 // lib/field-transforms/default-transforms/inline-text-transform.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var getInlineTextTransform = () => ({
   text: ({ value, componentId, field, propPath, isReadOnly }) => {
     if (field.contentEditable) {
-      return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
         InlineTextField,
         {
           propPath,
@@ -8570,7 +8794,7 @@ var getInlineTextTransform = () => ({
   },
   textarea: ({ value, componentId, field, propPath, isReadOnly }) => {
     if (field.contentEditable) {
-      return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
         InlineTextField,
         {
           propPath,
@@ -8584,7 +8808,7 @@ var getInlineTextTransform = () => ({
   },
   custom: ({ value, componentId, field, propPath, isReadOnly }) => {
     if (field.contentEditable && typeof value === "string") {
-      return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
         InlineTextField,
         {
           propPath,
@@ -8601,19 +8825,19 @@ var getInlineTextTransform = () => ({
 // lib/field-transforms/default-transforms/rich-text-transform.tsx
 init_react_import();
 init_store();
-var import_react55 = require("react");
-var import_jsx_runtime55 = require("react/jsx-runtime");
-var Editor3 = (0, import_react55.lazy)(
+var import_react59 = require("react");
+var import_jsx_runtime62 = require("react/jsx-runtime");
+var Editor3 = (0, import_react59.lazy)(
   () => Promise.resolve().then(() => (init_Editor(), Editor_exports)).then((m) => ({
     default: m.Editor
   }))
 );
-var RichTextRender2 = (0, import_react55.lazy)(
+var RichTextRender2 = (0, import_react59.lazy)(
   () => Promise.resolve().then(() => (init_Render(), Render_exports)).then((m) => ({
     default: m.RichTextRender
   }))
 );
-var InlineEditorWrapper = (0, import_react55.memo)(
+var InlineEditorWrapper = (0, import_react59.memo)(
   ({
     value,
     componentId,
@@ -8621,7 +8845,7 @@ var InlineEditorWrapper = (0, import_react55.memo)(
     field,
     id
   }) => {
-    const portalRef = (0, import_react55.useRef)(null);
+    const portalRef = (0, import_react59.useRef)(null);
     const appStoreApi = useAppStoreApi();
     const onClickHandler = (e) => {
       e.preventDefault();
@@ -8632,14 +8856,14 @@ var InlineEditorWrapper = (0, import_react55.memo)(
       );
       appStoreApi.getState().setUi({ itemSelector });
     };
-    (0, import_react55.useEffect)(() => {
+    (0, import_react59.useEffect)(() => {
       if (!portalRef.current) return;
       const cleanup = registerOverlayPortal(portalRef.current, {
         disableDragOnFocus: true
       });
       return () => cleanup == null ? void 0 : cleanup();
     }, [portalRef.current]);
-    const handleChange = (0, import_react55.useCallback)(
+    const handleChange = (0, import_react59.useCallback)(
       (content, ui) => __async(null, null, function* () {
         var _a;
         const appStore = appStoreApi.getState();
@@ -8663,7 +8887,7 @@ var InlineEditorWrapper = (0, import_react55.memo)(
       }),
       [appStoreApi, componentId, propPath]
     );
-    const handleFocus = (0, import_react55.useCallback)(
+    const handleFocus = (0, import_react59.useCallback)(
       (editor) => {
         appStoreApi.setState({
           currentRichText: {
@@ -8678,7 +8902,7 @@ var InlineEditorWrapper = (0, import_react55.memo)(
       [field, componentId]
     );
     if (!field.contentEditable)
-      return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react55.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(RichTextRenderFallback, { content: value }), children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(RichTextRender2, { content: value, field }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_react59.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(RichTextRenderFallback, { content: value }), children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(RichTextRender2, { content: value, field }) });
     const editorProps = {
       content: value,
       onChange: handleChange,
@@ -8688,7 +8912,7 @@ var InlineEditorWrapper = (0, import_react55.memo)(
       id,
       name: propPath
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { ref: portalRef, onClick: onClickHandler, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react55.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(EditorFallback, __spreadValues({}, editorProps)), children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Editor3, __spreadValues({}, editorProps)) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { ref: portalRef, onClick: onClickHandler, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_react59.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(EditorFallback, __spreadValues({}, editorProps)), children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Editor3, __spreadValues({}, editorProps)) }) });
   }
 );
 InlineEditorWrapper.displayName = "InlineEditorWrapper";
@@ -8696,10 +8920,10 @@ var getRichTextTransform = () => ({
   richtext: ({ value, componentId, field, propPath, isReadOnly }) => {
     const { contentEditable = true, tiptap } = field;
     if (contentEditable === false || isReadOnly) {
-      return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(RichTextRender2, { content: value, field });
+      return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(RichTextRender2, { content: value, field });
     }
     const id = `${componentId}_${field.type}_${propPath}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       InlineEditorWrapper,
       {
         value,
@@ -8714,11 +8938,11 @@ var getRichTextTransform = () => ({
 });
 
 // components/DropZone/index.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime63 = 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_runtime56.jsx)(DropZoneEdit, __spreadValues({}, props));
+var DropZoneEditPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(DropZoneEdit, __spreadValues({}, props));
 var DropZoneChild = ({
   zoneCompound,
   componentId,
@@ -8729,9 +8953,9 @@ var DropZoneChild = ({
 }) => {
   var _a, _b;
   const metadata = useAppStore((s) => s.metadata);
-  const ctx = (0, import_react56.useContext)(dropZoneContext);
+  const ctx = (0, import_react60.useContext)(dropZoneContext);
   const { depth = 1 } = ctx != null ? ctx : {};
-  const zoneStore = (0, import_react56.useContext)(ZoneStoreContext);
+  const zoneStore = (0, import_react60.useContext)(ZoneStoreContext);
   const nodeProps = useAppStore(
     (0, import_shallow4.useShallow)((s) => {
       var _a2;
@@ -8751,7 +8975,7 @@ var DropZoneChild = ({
     })
   );
   const appStore = useAppStoreApi();
-  const item = (0, import_react56.useMemo)(() => {
+  const item = (0, import_react60.useMemo)(() => {
     if (nodeProps) {
       const expanded = expandNode({
         type: nodeType,
@@ -8773,7 +8997,7 @@ var DropZoneChild = ({
   const componentConfig = useAppStore(
     (s) => (item == null ? void 0 : item.type) ? s.config.components[item.type] : null
   );
-  const puckProps = (0, import_react56.useMemo)(
+  const puckProps = (0, import_react60.useMemo)(
     () => ({
       renderDropZone: DropZoneEditPure,
       isEditing: true,
@@ -8796,20 +9020,20 @@ 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_react56.useMemo)(
+  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_runtime56.jsx)("div", { dangerouslySetInnerHTML: { __html: item.element.outerHTML } })
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { dangerouslySetInnerHTML: { __html: item.element.outerHTML } })
         );
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DrawerItemInner, { name: label, children: (_a2 = overrides.componentItem) != null ? _a2 : overrides.drawerItem });
+      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_react56.useMemo)(
+  const defaultsProps = (0, import_react60.useMemo)(
     () => __spreadProps(__spreadValues(__spreadValues({}, componentConfig == null ? void 0 : componentConfig.defaultProps), item == null ? void 0 : item.props), {
       puck: puckProps,
       editMode: true
@@ -8817,7 +9041,7 @@ var DropZoneChild = ({
     }),
     [componentConfig == null ? void 0 : componentConfig.defaultProps, item == null ? void 0 : item.props, puckProps]
   );
-  const defaultedNode = (0, import_react56.useMemo)(
+  const defaultedNode = (0, import_react60.useMemo)(
     () => {
       var _a2;
       return { type: (_a2 = item == null ? void 0 : item.type) != null ? _a2 : nodeType, props: defaultsProps };
@@ -8827,8 +9051,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_react56.useMemo)(
-    () => __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, getSlotTransform(DropZoneEditPure, (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ContextSlotRender, { componentId, zone: slotProps.zone }))), getInlineTextTransform()), getRichTextTransform()), plugins.reduce(
+  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(
       (acc, plugin) => __spreadValues(__spreadValues({}, acc), plugin.fieldTransforms),
       {}
     )), userFieldTransforms),
@@ -8842,7 +9066,7 @@ var DropZoneChild = ({
     isLoading
   );
   if (!item) return;
-  let Render2 = componentConfig ? componentConfig.render : () => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { style: { padding: 48, textAlign: "center" }, children: [
+  let Render2 = componentConfig ? componentConfig.render : () => /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { style: { padding: 48, textAlign: "center" }, children: [
     "No configuration for ",
     item.type
   ] });
@@ -8851,7 +9075,7 @@ var DropZoneChild = ({
   if (isInserting) {
     Render2 = renderPreview;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     DraggableComponent,
     {
       id: componentId,
@@ -8865,19 +9089,19 @@ var DropZoneChild = ({
       autoDragAxis: dragAxis,
       userDragAxis: collisionAxis,
       inDroppableZone,
-      children: (dragRef) => (componentConfig == null ? void 0 : componentConfig.inline) && !isInserting ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_jsx_runtime56.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+      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_runtime56.jsx)("div", { ref: dragRef, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Render2, __spreadValues({}, transformedProps)) })
+      ) }) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { ref: dragRef, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Render2, __spreadValues({}, transformedProps)) })
     }
   );
 };
-var DropZoneChildMemo = (0, import_react56.memo)(DropZoneChild);
-var DropZoneEdit = (0, import_react56.forwardRef)(
+var DropZoneChildMemo = (0, import_react60.memo)(DropZoneChild);
+var DropZoneEdit = (0, import_react60.forwardRef)(
   function DropZoneEditInternal({
     zone,
     allow,
@@ -8888,7 +9112,7 @@ var DropZoneEdit = (0, import_react56.forwardRef)(
     collisionAxis,
     as
   }, userRef) {
-    const ctx = (0, import_react56.useContext)(dropZoneContext);
+    const ctx = (0, import_react60.useContext)(dropZoneContext);
     const appStoreApi = useAppStoreApi();
     const {
       // These all need setting via context
@@ -8926,14 +9150,14 @@ var DropZoneEdit = (0, import_react56.forwardRef)(
         return (_a = s.state.indexes.zones[zoneCompound]) == null ? void 0 : _a.type;
       })
     );
-    (0, import_react56.useEffect)(() => {
+    (0, import_react60.useEffect)(() => {
       if (!zoneType || zoneType === "dropzone") {
         if (ctx == null ? void 0 : ctx.registerZone) {
           ctx == null ? void 0 : ctx.registerZone(zoneCompound);
         }
       }
     }, [zoneType, appStoreApi]);
-    (0, import_react56.useEffect)(() => {
+    (0, import_react60.useEffect)(() => {
       if (zoneType === "dropzone") {
         if (zoneCompound !== rootDroppableId) {
           console.warn(
@@ -8942,11 +9166,11 @@ var DropZoneEdit = (0, import_react56.forwardRef)(
         }
       }
     }, [zoneType]);
-    const contentIds = (0, import_react56.useMemo)(() => {
+    const contentIds = (0, import_react60.useMemo)(() => {
       return zoneContentIds || [];
     }, [zoneContentIds]);
-    const ref = (0, import_react56.useRef)(null);
-    const acceptsTarget = (0, import_react56.useCallback)(
+    const ref = (0, import_react60.useRef)(null);
+    const acceptsTarget = (0, import_react60.useCallback)(
       (componentType) => {
         if (!componentType) {
           return true;
@@ -8984,7 +9208,7 @@ var DropZoneEdit = (0, import_react56.forwardRef)(
       }
       return _isEnabled;
     });
-    (0, import_react56.useEffect)(() => {
+    (0, import_react60.useEffect)(() => {
       if (registerLocalZone) {
         registerLocalZone(zoneCompound, targetAccepted || isEnabled);
       }
@@ -8999,8 +9223,8 @@ var DropZoneEdit = (0, import_react56.forwardRef)(
       zoneCompound
     );
     const isDropEnabled = isEnabled && (preview ? contentIdsWithPreview.length === 1 : contentIdsWithPreview.length === 0);
-    const zoneStore = (0, import_react56.useContext)(ZoneStoreContext);
-    (0, import_react56.useEffect)(() => {
+    const zoneStore = (0, import_react60.useContext)(ZoneStoreContext);
+    (0, import_react60.useEffect)(() => {
       const { enabledIndex } = zoneStore.getState();
       zoneStore.setState({
         enabledIndex: __spreadProps(__spreadValues({}, enabledIndex), { [zoneCompound]: isEnabled })
@@ -9019,7 +9243,7 @@ var DropZoneEdit = (0, import_react56.forwardRef)(
         path: path || []
       }
     };
-    const { ref: dropRef } = (0, import_react57.useDroppable)(droppableConfig);
+    const { ref: dropRef } = (0, import_react61.useDroppable)(droppableConfig);
     const isAreaSelected = useAppStore(
       (s) => (s == null ? void 0 : s.selectedItem) && areaId === (s == null ? void 0 : s.selectedItem.props.id)
     );
@@ -9030,7 +9254,7 @@ var DropZoneEdit = (0, import_react56.forwardRef)(
       ref
     });
     const El = as != null ? as : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
       El,
       {
         className: `${getClassName24({
@@ -9051,7 +9275,7 @@ var DropZoneEdit = (0, import_react56.forwardRef)(
           backgroundColor: RENDER_DEBUG ? getRandomColor() : style == null ? void 0 : style.backgroundColor
         }),
         children: contentIdsWithPreview.map((componentId, i) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
             DropZoneChildMemo,
             {
               zoneCompound,
@@ -9074,8 +9298,8 @@ var DropZoneRenderItem = ({
   metadata
 }) => {
   const Component = config.components[item.type];
-  const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
-  const nextContextValue = (0, import_react56.useMemo)(
+  const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
+  const nextContextValue = (0, import_react60.useMemo)(
     () => ({
       areaId: props.id,
       depth: 1
@@ -9083,7 +9307,7 @@ var DropZoneRenderItem = ({
     [props]
   );
   const richtextProps = useRichtextProps(Component.fields, props);
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     Component.render,
     __spreadProps(__spreadValues(__spreadValues({}, props), richtextProps), {
       puck: __spreadProps(__spreadValues({}, props.puck), {
@@ -9093,15 +9317,15 @@ var DropZoneRenderItem = ({
     })
   ) }, props.id);
 };
-var DropZoneRenderPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DropZoneRender, __spreadValues({}, props));
-var DropZoneRender = (0, import_react56.forwardRef)(
+var DropZoneRenderPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(DropZoneRender, __spreadValues({}, props));
+var DropZoneRender = (0, import_react60.forwardRef)(
   function DropZoneRenderInternal({ className, style, zone, as }, ref) {
-    const ctx = (0, import_react56.useContext)(dropZoneContext);
+    const ctx = (0, import_react60.useContext)(dropZoneContext);
     const { areaId = "root" } = ctx || {};
-    const { config, data, metadata } = (0, import_react56.useContext)(renderContext);
+    const { config, data, metadata } = (0, import_react60.useContext)(renderContext);
     let zoneCompound = `${areaId}:${zone}`;
     let content = (data == null ? void 0 : data.content) || [];
-    (0, import_react56.useEffect)(() => {
+    (0, import_react60.useEffect)(() => {
       if (!content) {
         if (ctx == null ? void 0 : ctx.registerZone) {
           ctx == null ? void 0 : ctx.registerZone(zoneCompound);
@@ -9115,10 +9339,10 @@ var DropZoneRender = (0, import_react56.forwardRef)(
     if (zoneCompound !== rootDroppableId) {
       content = setupZone(data, zoneCompound).zones[zoneCompound];
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(El, { className, style, ref, children: content.map((item) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(El, { className, style, ref, children: content.map((item) => {
       const Component = config.components[item.type];
       if (Component) {
-        return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
           DropZoneRenderItem,
           {
             config,
@@ -9132,14 +9356,14 @@ var DropZoneRender = (0, import_react56.forwardRef)(
     }) });
   }
 );
-var DropZonePure = (props) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DropZone, __spreadValues({}, props));
-var DropZone = (0, import_react56.forwardRef)(
+var DropZonePure = (props) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(DropZone, __spreadValues({}, props));
+var DropZone = (0, import_react60.forwardRef)(
   function DropZone2(props, ref) {
-    const ctx = (0, import_react56.useContext)(dropZoneContext);
+    const ctx = (0, import_react60.useContext)(dropZoneContext);
     if ((ctx == null ? void 0 : ctx.mode) === "edit") {
-      return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_jsx_runtime56.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DropZoneEdit, __spreadProps(__spreadValues({}, props), { ref })) });
+      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_runtime56.jsx)(import_jsx_runtime56.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DropZoneRender, __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 })) });
   }
 );
 
@@ -9483,14 +9707,14 @@ function getDeepDir(el) {
 
 // components/DragDropContext/index.tsx
 var import_state = require("@dnd-kit/state");
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var DEBUG3 = false;
-var dragListenerContext = (0, import_react59.createContext)({
+var dragListenerContext = (0, import_react63.createContext)({
   dragListeners: {}
 });
 function useDragListener(type, fn, deps = []) {
-  const { setDragListeners } = (0, import_react59.useContext)(dragListenerContext);
-  (0, import_react59.useEffect)(() => {
+  const { setDragListeners } = (0, import_react63.useContext)(dragListenerContext);
+  (0, import_react63.useEffect)(() => {
     if (setDragListeners) {
       setDragListeners((old) => __spreadProps(__spreadValues({}, old), {
         [type]: [...old[type] || [], fn]
@@ -9500,8 +9724,8 @@ function useDragListener(type, fn, deps = []) {
 }
 var AREA_CHANGE_DEBOUNCE_MS = 100;
 var useTempDisableFallback = (timeout3) => {
-  const lastFallbackDisable = (0, import_react59.useRef)(null);
-  return (0, import_react59.useCallback)((manager) => {
+  const lastFallbackDisable = (0, import_react63.useRef)(null);
+  return (0, import_react63.useCallback)((manager) => {
     collisionStore.setState({ fallbackEnabled: false });
     const fallbackId = generateId();
     lastFallbackDisable.current = fallbackId;
@@ -9520,9 +9744,9 @@ var DragDropContextClient = ({
   const dispatch = useAppStore((s) => s.dispatch);
   const appStore = useAppStoreApi();
   const id = useSafeId();
-  const debouncedParamsRef = (0, import_react59.useRef)(null);
+  const debouncedParamsRef = (0, import_react63.useRef)(null);
   const tempDisableFallback = useTempDisableFallback(100);
-  const [zoneStore] = (0, import_react59.useState)(
+  const [zoneStore] = (0, import_react63.useState)(
     () => (0, import_zustand5.createStore)(() => ({
       zoneDepthIndex: {},
       nextZoneDepthIndex: {},
@@ -9534,7 +9758,7 @@ var DragDropContextClient = ({
       hoveringComponent: null
     }))
   );
-  const getChanged2 = (0, import_react59.useCallback)(
+  const getChanged2 = (0, import_react63.useCallback)(
     (params, id2) => {
       const { zoneDepthIndex = {}, areaDepthIndex = {} } = zoneStore.getState() || {};
       const stateHasZone = Object.keys(zoneDepthIndex).length > 0;
@@ -9555,7 +9779,7 @@ var DragDropContextClient = ({
     },
     [zoneStore]
   );
-  const setDeepestAndCollide = (0, import_react59.useCallback)(
+  const setDeepestAndCollide = (0, import_react63.useCallback)(
     (params, manager) => {
       const { zoneChanged, areaChanged } = getChanged2(params, id);
       if (!zoneChanged && !areaChanged) return;
@@ -9579,7 +9803,7 @@ var DragDropContextClient = ({
     setDeepestDb.cancel();
     debouncedParamsRef.current = null;
   };
-  (0, import_react59.useEffect)(() => {
+  (0, import_react63.useEffect)(() => {
     if (DEBUG3) {
       zoneStore.subscribe(
         (s) => {
@@ -9593,7 +9817,7 @@ var DragDropContextClient = ({
       );
     }
   }, []);
-  const [plugins] = (0, import_react59.useState)(() => [
+  const [plugins] = (0, import_react63.useState)(() => [
     ...disableAutoScroll ? import_dom.defaultPreset.plugins.filter((plugin) => plugin !== import_dom.AutoScroller) : import_dom.defaultPreset.plugins,
     createNestedDroppablePlugin(
       {
@@ -9641,10 +9865,10 @@ var DragDropContextClient = ({
     )
   ]);
   const sensors = useSensors();
-  const [dragListeners, setDragListeners] = (0, import_react59.useState)({});
-  const dragMode = (0, import_react59.useRef)(null);
-  const initialSelector = (0, import_react59.useRef)(void 0);
-  const nextContextValue = (0, import_react59.useMemo)(
+  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)(
     () => ({
       mode: "edit",
       areaId: "root",
@@ -9652,15 +9876,15 @@ var DragDropContextClient = ({
     }),
     []
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { id, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { id, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     dragListenerContext.Provider,
     {
       value: {
         dragListeners,
         setDragListeners
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-        import_react58.DragDropProvider,
+      children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+        import_react62.DragDropProvider,
         {
           plugins,
           sensors,
@@ -9875,7 +10099,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_runtime57.jsx)(ZoneStoreProvider, { store: zoneStore, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(DropZoneProvider, { value: nextContextValue, children }) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(ZoneStoreProvider, { store: zoneStore, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(DropZoneProvider, { value: nextContextValue, children }) })
         }
       )
     }
@@ -9889,12 +10113,12 @@ var DragDropContext = ({
   if (status === "LOADING") {
     return children;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(DragDropContextClient, { disableAutoScroll, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(DragDropContextClient, { disableAutoScroll, children });
 };
 
 // components/Drawer/index.tsx
-var import_react61 = require("@dnd-kit/react");
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_react65 = require("@dnd-kit/react");
+var import_jsx_runtime65 = 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 = ({
@@ -9904,11 +10128,11 @@ var DrawerItemInner = ({
   dragRef,
   isDragDisabled
 }) => {
-  const CustomInner = (0, import_react60.useMemo)(
-    () => children || (({ children: children2 }) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: getClassNameItem2("default"), children: children2 })),
+  const CustomInner = (0, import_react64.useMemo)(
+    () => children || (({ children: children2 }) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: getClassNameItem2("default"), children: children2 })),
     [children]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
     "div",
     {
       className: getClassNameItem2({ disabled: isDragDisabled }),
@@ -9916,9 +10140,9 @@ var DrawerItemInner = ({
       onMouseDown: (e) => e.preventDefault(),
       "data-testid": dragRef ? `drawer-item:${name}` : "",
       "data-puck-drawer-item": true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(CustomInner, { name, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: getClassNameItem2("draggableWrapper"), children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: getClassNameItem2("draggable"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: getClassNameItem2("name"), children: label != null ? label : name }),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: getClassNameItem2("icon"), children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(DragIcon, {}) })
+      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, {}) })
       ] }) }) })
     }
   );
@@ -9930,15 +10154,15 @@ var DrawerItemDraggable = ({
   id,
   isDragDisabled
 }) => {
-  const { ref } = (0, import_react61.useDraggable)({
+  const { ref } = (0, import_react65.useDraggable)({
     id,
     data: { componentType: name },
     disabled: isDragDisabled,
     type: "drawer"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: getClassName25("draggable"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: getClassName25("draggableBg"), children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(DrawerItemInner, { name, label, children }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: getClassName25("draggableFg"), children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  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)(
       DrawerItemInner,
       {
         name,
@@ -9959,7 +10183,7 @@ var DrawerItem = ({
   isDragDisabled
 }) => {
   const resolvedId = id || name;
-  const [dynamicId, setDynamicId] = (0, import_react60.useState)(generateId(resolvedId));
+  const [dynamicId, setDynamicId] = (0, import_react64.useState)(generateId(resolvedId));
   if (typeof index !== "undefined") {
     console.error(
       "Warning: The `index` prop on Drawer.Item is deprecated and no longer required."
@@ -9972,7 +10196,7 @@ var DrawerItem = ({
     },
     [resolvedId]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
     DrawerItemDraggable,
     {
       name,
@@ -9999,13 +10223,13 @@ var Drawer = ({
     );
   }
   const id = useSafeId();
-  const { ref } = (0, import_react61.useDroppable)({
+  const { ref } = (0, import_react65.useDroppable)({
     id,
     type: "void",
     collisionPriority: 0
     // Never collide with this, but we use it so NestedDroppablePlugin respects the Drawer
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
     "div",
     {
       className: getClassName25(),
@@ -10024,7 +10248,7 @@ init_IconButton2();
 
 // components/Puck/index.tsx
 init_react_import();
-var import_react82 = require("react");
+var import_react86 = require("react");
 
 // components/SidebarSection/index.tsx
 init_react_import();
@@ -10039,7 +10263,7 @@ init_lucide_react();
 
 // lib/use-breadcrumbs.ts
 init_react_import();
-var import_react62 = require("react");
+var import_react66 = require("react");
 init_store();
 var useBreadcrumbs = (renderCount) => {
   const selectedId = useAppStore((s) => {
@@ -10052,7 +10276,7 @@ var useBreadcrumbs = (renderCount) => {
     return (_a = s.state.indexes.nodes[selectedId]) == null ? void 0 : _a.path;
   });
   const appStore = useAppStoreApi();
-  return (0, import_react62.useMemo)(() => {
+  return (0, import_react66.useMemo)(() => {
     const breadcrumbs = (path == null ? void 0 : path.map((zoneCompound) => {
       var _a, _b, _c;
       const [componentId] = zoneCompound.split(":");
@@ -10085,7 +10309,7 @@ var useBreadcrumbs = (renderCount) => {
 // components/SidebarSection/index.tsx
 init_store();
 init_Loader();
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var getClassName26 = get_class_name_factory_default("SidebarSection", styles_module_default18);
 var SidebarSection = ({
   children,
@@ -10098,15 +10322,15 @@ var SidebarSection = ({
 }) => {
   const setUi = useAppStore((s) => s.setUi);
   const breadcrumbs = useBreadcrumbs(1);
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
     "div",
     {
       className: getClassName26({ noBorderTop, noPadding }),
       style: { background },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: getClassName26("title"), children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: getClassName26("breadcrumbs"), children: [
-          showBreadcrumbs ? breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: getClassName26("breadcrumb"), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+        /* @__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)(
               "button",
               {
                 type: "button",
@@ -10115,12 +10339,12 @@ var SidebarSection = ({
                 children: breadcrumb.label
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ChevronRight, { size: 16 })
+            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(ChevronRight, { size: 16 })
           ] }, i)) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: getClassName26("heading"), children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Heading7, { rank: "2", size: "xs", children: title }) })
+          /* @__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_runtime59.jsx)("div", { className: getClassName26("content"), children }),
-        isLoading && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: getClassName26("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Loader, { size: 32 }) })
+        /* @__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 }) })
       ]
     }
   );
@@ -10146,15 +10370,15 @@ var styles_module_default20 = { "PuckFields": "_PuckFields_10bh7_1", "PuckFields
 
 // components/Puck/components/Fields/index.tsx
 init_lib();
-var import_react63 = require("react");
+var import_react67 = require("react");
 init_fields();
 var import_shallow5 = require("zustand/react/shallow");
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var getClassName27 = get_class_name_factory_default("PuckFields", styles_module_default20);
 var DefaultFields = ({
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_jsx_runtime60.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_jsx_runtime67.Fragment, { children });
 };
 var createOnChange = (fieldName, appStore) => (value, updatedUi) => __async(null, null, function* () {
   const { dispatch, state, selectedItem, resolveComponentData: resolveComponentData2 } = appStore.getState();
@@ -10219,13 +10443,13 @@ var FieldsChild = ({ fieldName }) => {
     })
   );
   const appStore = useAppStoreApi();
-  const onChange = (0, import_react63.useCallback)(createOnChange(fieldName, appStore), [
+  const onChange = (0, import_react67.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_runtime60.jsx)("div", { className: getClassName27("field"), children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: getClassName27("field"), children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
     AutoFieldPrivate,
     {
       field,
@@ -10237,7 +10461,7 @@ var FieldsChild = ({ fieldName }) => {
     }
   ) }, id);
 };
-var FieldsChildMemo = (0, import_react63.memo)(FieldsChild);
+var FieldsChildMemo = (0, import_react67.memo)(FieldsChild);
 var FieldsInternal = ({ wrapFields = true }) => {
   const overrides = useAppStore((s) => s.overrides);
   const componentResolving = useAppStore((s) => {
@@ -10262,8 +10486,8 @@ var FieldsInternal = ({ wrapFields = true }) => {
     })
   );
   const isLoading = fieldsLoading || componentResolving;
-  const Wrapper = (0, import_react63.useMemo)(() => overrides.fields || DefaultFields, [overrides]);
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+  const Wrapper = (0, import_react67.useMemo)(() => overrides.fields || DefaultFields, [overrides]);
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
     "form",
     {
       className: getClassName27({ wrapFields }),
@@ -10271,20 +10495,20 @@ var FieldsInternal = ({ wrapFields = true }) => {
         e.preventDefault();
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Wrapper, { isLoading, itemSelector, children: fieldNames.map((fieldName) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(FieldsChildMemo, { fieldName }, fieldName)) }),
-        isLoading && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: getClassName27("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: getClassName27("loadingOverlayInner"), children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Loader, { size: 16 }) }) })
+        /* @__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 }) }) })
       ]
     }
   );
 };
-var Fields = (0, import_react63.memo)(FieldsInternal);
+var Fields = (0, import_react67.memo)(FieldsInternal);
 
 // components/Puck/components/Components/index.tsx
 init_react_import();
 
 // lib/use-component-list.tsx
 init_react_import();
-var import_react65 = require("react");
+var import_react69 = require("react");
 
 // components/ComponentList/index.tsx
 init_react_import();
@@ -10295,10 +10519,10 @@ var styles_module_default21 = { "ComponentList": "_ComponentList_1rrlt_1", "Comp
 
 // components/ComponentList/index.tsx
 init_get_class_name_factory();
-var import_react64 = require("react");
+var import_react68 = require("react");
 init_store();
 init_lucide_react();
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 var getClassName28 = get_class_name_factory_default("ComponentList", styles_module_default21);
 var ComponentListItem = ({
   name,
@@ -10311,14 +10535,14 @@ var ComponentListItem = ({
       type: name
     }).insert
   );
-  (0, import_react64.useEffect)(() => {
+  (0, import_react68.useEffect)(() => {
     if (overrides.componentItem) {
       console.warn(
         "The `componentItem` override has been deprecated and renamed to `drawerItem`"
       );
     }
   }, [overrides]);
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Drawer.Item, { label, name, isDragDisabled: !canInsert, children: (_a = overrides.componentItem) != null ? _a : overrides.drawerItem });
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Drawer.Item, { label, name, isDragDisabled: !canInsert, children: (_a = overrides.componentItem) != null ? _a : overrides.drawerItem });
 };
 var ComponentList = ({
   children,
@@ -10329,8 +10553,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_runtime61.jsxs)("div", { className: getClassName28({ isExpanded: expanded }), children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: getClassName28({ isExpanded: expanded }), children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
       "button",
       {
         type: "button",
@@ -10344,14 +10568,14 @@ var ComponentList = ({
         }),
         title: expanded ? `Collapse${title ? ` ${title}` : ""}` : `Expand${title ? ` ${title}` : ""}`,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: getClassName28("titleIcon"), children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ChevronUp, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ChevronDown, { size: 12 }) })
+          /* @__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_runtime61.jsx)("div", { className: getClassName28("content"), children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Drawer, { children: children || Object.keys(config.components).map((componentKey) => {
+    /* @__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) => {
       var _a;
-      return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
         ComponentListItem,
         {
           label: (_a = config.components[componentKey]["label"]) != null ? _a : componentKey,
@@ -10366,12 +10590,12 @@ ComponentList.Item = ComponentListItem;
 
 // lib/use-component-list.tsx
 init_store();
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 var useComponentList = () => {
-  const [componentList, setComponentList] = (0, import_react65.useState)();
+  const [componentList, setComponentList] = (0, import_react69.useState)();
   const config = useAppStore((s) => s.config);
   const uiComponentList = useAppStore((s) => s.state.ui.componentList);
-  (0, import_react65.useEffect)(() => {
+  (0, import_react69.useEffect)(() => {
     var _a, _b, _c;
     if (Object.keys(uiComponentList).length > 0) {
       const matchedComponents = [];
@@ -10387,7 +10611,7 @@ var useComponentList = () => {
           if (category.visible === false) {
             return null;
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
             ComponentList,
             {
               id: categoryKey,
@@ -10395,7 +10619,7 @@ var useComponentList = () => {
               children: category.components.map((componentName, i) => {
                 var _a2;
                 const componentConf = config.components[componentName] || {};
-                return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
                   ComponentList.Item,
                   {
                     label: (_a2 = componentConf["label"]) != null ? _a2 : componentName,
@@ -10415,7 +10639,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_runtime62.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
             ComponentList,
             {
               id: "other",
@@ -10423,7 +10647,7 @@ var useComponentList = () => {
               children: remainingComponents.map((componentName, i) => {
                 var _a2;
                 const componentConf = config.components[componentName] || {};
-                return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
                   ComponentList.Item,
                   {
                     name: componentName,
@@ -10446,12 +10670,12 @@ var useComponentList = () => {
 
 // components/Puck/components/Components/index.tsx
 init_store();
-var import_react66 = require("react");
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_react70 = require("react");
+var import_jsx_runtime70 = require("react/jsx-runtime");
 var Components = () => {
   const overrides = useAppStore((s) => s.overrides);
   const componentList = useComponentList();
-  const Wrapper = (0, import_react66.useMemo)(() => {
+  const Wrapper = (0, import_react70.useMemo)(() => {
     if (overrides.components) {
       console.warn(
         "The `components` override has been deprecated and renamed to `drawer`"
@@ -10459,21 +10683,21 @@ var Components = () => {
     }
     return overrides.components || overrides.drawer || "div";
   }, [overrides]);
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ComponentList, { id: "all" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ComponentList, { id: "all" }) });
 };
 
 // components/Puck/components/Preview/index.tsx
 init_react_import();
 init_root_droppable_id();
-var import_react68 = require("react");
+var import_react72 = require("react");
 init_store();
 
 // components/AutoFrame/index.tsx
 init_react_import();
-var import_react67 = require("react");
+var import_react71 = require("react");
 var import_object_hash = __toESM(require("object-hash"));
 var import_react_dom3 = require("react-dom");
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime71 = require("react/jsx-runtime");
 var styleSelector = 'style, link[rel="stylesheet"]';
 var collectStyles = (doc) => {
   const collected = [];
@@ -10523,7 +10747,7 @@ var CopyHostStyles = ({
   onStylesLoaded = () => null
 }) => {
   const { document: doc, window: win } = useFrame();
-  (0, import_react67.useEffect)(() => {
+  (0, import_react71.useEffect)(() => {
     if (!win || !doc) {
       return () => {
       };
@@ -10680,10 +10904,10 @@ var CopyHostStyles = ({
       observer.disconnect();
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_jsx_runtime64.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_jsx_runtime71.Fragment, { children });
 };
-var autoFrameContext = (0, import_react67.createContext)({});
-var useFrame = () => (0, import_react67.useContext)(autoFrameContext);
+var autoFrameContext = (0, import_react71.createContext)({});
+var useFrame = () => (0, import_react71.useContext)(autoFrameContext);
 function AutoFrame(_a) {
   var _b = _a, {
     children,
@@ -10704,11 +10928,11 @@ function AutoFrame(_a) {
     "onNotReady",
     "frameRef"
   ]);
-  const [loaded, setLoaded] = (0, import_react67.useState)(false);
-  const [ctx, setCtx] = (0, import_react67.useState)({});
-  const [mountTarget, setMountTarget] = (0, import_react67.useState)();
-  const [stylesLoaded, setStylesLoaded] = (0, import_react67.useState)(false);
-  (0, import_react67.useEffect)(() => {
+  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)(() => {
     var _a2;
     if (frameRef.current) {
       const doc = frameRef.current.contentDocument;
@@ -10727,7 +10951,7 @@ function AutoFrame(_a) {
       }
     }
   }, [frameRef, loaded, stylesLoaded]);
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
     "iframe",
     __spreadProps(__spreadValues({}, props), {
       className,
@@ -10737,7 +10961,7 @@ function AutoFrame(_a) {
       onLoad: () => {
         setLoaded(true);
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
         CopyHostStyles,
         {
           debug,
@@ -10757,11 +10981,11 @@ var styles_module_default22 = { "PuckPreview": "_PuckPreview_z2rgu_1", "PuckPrev
 
 // components/Puck/components/Preview/index.tsx
 init_lib();
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime72 = 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_react68.useEffect)(() => {
+  (0, import_react72.useEffect)(() => {
     if (ref.current && status === "READY") {
       const iframe = ref.current;
       const handlePointerMove = (event) => {
@@ -10810,7 +11034,7 @@ var Preview2 = ({ id = "puck-preview" }) => {
   const renderData = useAppStore(
     (s) => s.state.ui.previewMode === "edit" ? null : s.state.data
   );
-  const Page = (0, import_react68.useCallback)(
+  const Page = (0, import_react72.useCallback)(
     (pageProps) => {
       var _a, _b, _c, _d;
       const propsWithSlots = useSlots(
@@ -10824,15 +11048,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_runtime65.jsx)(import_jsx_runtime65.Fragment, { children: propsWithSlots.children });
+      }, propsWithSlots), richtextProps)) : /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_jsx_runtime72.Fragment, { children: propsWithSlots.children });
     },
     [config]
   );
-  const Frame = (0, import_react68.useMemo)(() => overrides.iframe, [overrides]);
+  const Frame = (0, import_react72.useMemo)(() => overrides.iframe, [overrides]);
   const rootProps = root.props || root;
-  const ref = (0, import_react68.useRef)(null);
+  const ref = (0, import_react72.useRef)(null);
   useBubbleIframeEvents(ref);
-  const inner = !renderData ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+  const inner = !renderData ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
     Page,
     __spreadProps(__spreadValues({}, rootProps), {
       puck: {
@@ -10842,15 +11066,15 @@ var Preview2 = ({ id = "puck-preview" }) => {
         metadata
       },
       editMode: true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(DropZonePure, { zone: rootDroppableId })
+      children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(DropZonePure, { zone: rootDroppableId })
     })
-  ) : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Render, { data: renderData, config, metadata });
-  (0, import_react68.useEffect)(() => {
+  ) : /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Render, { data: renderData, config, metadata });
+  (0, import_react72.useEffect)(() => {
     if (!iframe.enabled) {
       setStatus("READY");
     }
   }, [iframe.enabled]);
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
     "div",
     {
       className: getClassName29(),
@@ -10862,7 +11086,7 @@ var Preview2 = ({ id = "puck-preview" }) => {
           dispatch({ type: "setUi", ui: { itemSelector: null } });
         }
       },
-      children: iframe.enabled ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+      children: iframe.enabled ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
         AutoFrame_default,
         {
           id: "preview-frame",
@@ -10875,14 +11099,14 @@ var Preview2 = ({ id = "puck-preview" }) => {
             setStatus("MOUNTED");
           },
           frameRef: ref,
-          children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
+          children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
             if (Frame) {
-              return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Frame, { document: document2, children: inner });
+              return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Frame, { document: document2, children: inner });
             }
             return inner;
           } })
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
         "div",
         {
           id: "preview-frame",
@@ -10923,7 +11147,7 @@ var scrollIntoView = (el) => {
 // components/LayerTree/index.tsx
 init_lucide_react();
 init_root_droppable_id();
-var import_react69 = require("react");
+var import_react73 = require("react");
 
 // lib/on-scroll-end.ts
 init_react_import();
@@ -10947,7 +11171,7 @@ var onScrollEnd = (frame, cb) => {
 // components/LayerTree/index.tsx
 init_store();
 var import_shallow6 = require("zustand/react/shallow");
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime73 = 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 = ({
@@ -10959,7 +11183,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_react69.useCallback)(
+  const setItemSelector = (0, import_react73.useCallback)(
     (itemSelector2) => {
       dispatch({ type: "setUi", ui: { itemSelector: itemSelector2 } });
     },
@@ -10979,7 +11203,7 @@ var Layer = ({
     )
   );
   const containsZone = zonesForItem.length > 0;
-  const zoneStore = (0, import_react69.useContext)(ZoneStoreContext);
+  const zoneStore = (0, import_react73.useContext)(ZoneStoreContext);
   const isHovering = useContextStore(
     ZoneStoreContext,
     (s) => s.hoveringComponent === itemId
@@ -10994,7 +11218,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_runtime66.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
     "li",
     {
       className: getClassNameLayer({
@@ -11004,7 +11228,7 @@ var Layer = ({
         childIsSelected
       }),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
           "button",
           {
             type: "button",
@@ -11042,22 +11266,22 @@ var Layer = ({
               zoneStore.setState({ hoveringComponent: null });
             },
             children: [
-              containsZone && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+              containsZone && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
                 "div",
                 {
                   className: getClassNameLayer("chevron"),
                   title: isSelected ? "Collapse" : "Expand",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(ChevronDown, { size: "12" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ChevronDown, { size: "12" })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: getClassNameLayer("title"), children: [
-                /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: getClassNameLayer("icon"), children: nodeData.data.type === "Text" || nodeData.data.type === "Heading" ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Type, { size: "16" }) : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(LayoutGrid, { size: "16" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: getClassNameLayer("name"), children: label })
+              /* @__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 })
               ] })
             ]
           }
         ) }),
-        containsZone && zonesForItem.map((subzone) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(LayerTree, { zoneCompound: subzone }) }, subzone))
+        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))
       ]
     }
   );
@@ -11083,15 +11307,15 @@ var LayerTree = ({
       }
     )
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: getClassName30("zoneTitle"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: getClassName30("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Layers, { size: "16" }) }),
+  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" }) }),
       label
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("ul", { className: getClassName30(), children: [
-      contentIds.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: getClassName30("helper"), children: "No items" }),
+    /* @__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" }),
       contentIds.map((itemId, i) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
           Layer,
           {
             index: i,
@@ -11107,7 +11331,7 @@ var LayerTree = ({
 
 // components/Puck/components/Outline/index.tsx
 init_store();
-var import_react70 = require("react");
+var import_react74 = require("react");
 
 // lib/data/find-zones-for-area.ts
 init_react_import();
@@ -11119,14 +11343,14 @@ var findZonesForArea = (state, area) => {
 
 // components/Puck/components/Outline/index.tsx
 var import_shallow7 = require("zustand/react/shallow");
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime74 = 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_react70.useMemo)(() => outlineOverride || "div", [outlineOverride]);
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Wrapper, { children: rootZones.map((zoneCompound) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  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)(
     LayerTree,
     {
       label: rootZones.length === 1 ? "" : zoneCompound.split(":")[1],
@@ -11139,7 +11363,7 @@ var Outline = () => {
 // components/Puck/components/Canvas/index.tsx
 init_react_import();
 init_css_box_model_esm();
-var import_react73 = require("react");
+var import_react77 = require("react");
 init_store();
 
 // components/ViewportControls/index.tsx
@@ -11147,7 +11371,7 @@ init_react_import();
 init_lucide_react();
 init_IconButton2();
 init_store();
-var import_react71 = require("react");
+var import_react75 = require("react");
 init_lib();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css#css-module
@@ -11155,11 +11379,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_runtime68 = require("react/jsx-runtime");
+var import_jsx_runtime75 = require("react/jsx-runtime");
 var icons = {
-  Smartphone: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Smartphone, { size: 16 }),
-  Tablet: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Tablet, { size: 16 }),
-  Monitor: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Monitor, { size: 16 })
+  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 })
 };
 var getClassName31 = get_class_name_factory_default("ViewportControls", styles_module_default24);
 var getClassNameButton = get_class_name_factory_default("ViewportButton", styles_module_default24);
@@ -11171,11 +11395,11 @@ var ViewportButton = ({
   onClick
 }) => {
   const viewports = useAppStore((s) => s.state.ui.viewports);
-  const [isActive, setIsActive] = (0, import_react71.useState)(false);
-  (0, import_react71.useEffect)(() => {
+  const [isActive, setIsActive] = (0, import_react75.useState)(false);
+  (0, import_react75.useEffect)(() => {
     setIsActive(width === viewports.current.width);
   }, [width, viewports.current.width]);
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
     IconButton,
     {
       type: "button",
@@ -11185,7 +11409,7 @@ var ViewportButton = ({
         e.stopPropagation();
         onClick({ width, height });
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: getClassNameButton("inner"), children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: getClassNameButton("inner"), children })
     }
   ) });
 };
@@ -11209,7 +11433,7 @@ var ViewportControls = ({
   const defaultsContainAutoZoom = defaultZoomOptions.find(
     (option) => option.value === autoZoom
   );
-  const zoomOptions = (0, import_react71.useMemo)(
+  const zoomOptions = (0, import_react75.useMemo)(
     () => [
       ...defaultZoomOptions,
       ...defaultsContainAutoZoom ? [] : [
@@ -11221,8 +11445,8 @@ var ViewportControls = ({
     ].filter((a) => a.value <= autoZoom).sort((a, b) => a.value > b.value ? 1 : -1),
     [autoZoom]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: getClassName31(), children: [
-    viewports.map((viewport, i) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: getClassName31(), children: [
+    viewports.map((viewport, i) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
       ViewportButton,
       {
         height: viewport.height,
@@ -11233,8 +11457,8 @@ var ViewportControls = ({
       },
       i
     )),
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: getClassName31("divider") }),
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: getClassName31("divider") }),
+    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
       IconButton,
       {
         type: "button",
@@ -11249,10 +11473,10 @@ var ViewportControls = ({
             )].value
           );
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ZoomOut, { size: 16 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(ZoomOut, { size: 16 })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
       IconButton,
       {
         type: "button",
@@ -11267,11 +11491,11 @@ var ViewportControls = ({
             )].value
           );
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ZoomIn, { size: 16 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(ZoomIn, { size: 16 })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: getClassName31("divider") }),
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: getClassName31("divider") }),
+    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
       "select",
       {
         className: getClassName31("zoomSelect"),
@@ -11282,7 +11506,7 @@ var ViewportControls = ({
         onChange: (e) => {
           onZoom(parseFloat(e.currentTarget.value));
         },
-        children: zoomOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+        children: zoomOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
           "option",
           {
             value: option.value,
@@ -11306,23 +11530,23 @@ var import_shallow8 = require("zustand/react/shallow");
 
 // lib/frame-context.tsx
 init_react_import();
-var import_react72 = require("react");
-var import_jsx_runtime69 = require("react/jsx-runtime");
-var FrameContext = (0, import_react72.createContext)(null);
+var import_react76 = require("react");
+var import_jsx_runtime76 = require("react/jsx-runtime");
+var FrameContext = (0, import_react76.createContext)(null);
 var FrameProvider = ({
   children
 }) => {
-  const frameRef = (0, import_react72.useRef)(null);
-  const value = (0, import_react72.useMemo)(
+  const frameRef = (0, import_react76.useRef)(null);
+  const value = (0, import_react76.useMemo)(
     () => ({
       frameRef
     }),
     []
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(FrameContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(FrameContext.Provider, { value, children });
 };
 var useCanvasFrame = () => {
-  const context = (0, import_react72.useContext)(FrameContext);
+  const context = (0, import_react76.useContext)(FrameContext);
   if (context === null) {
     throw new Error("useCanvasFrame must be used within a FrameProvider");
   }
@@ -11330,7 +11554,7 @@ var useCanvasFrame = () => {
 };
 
 // components/Puck/components/Canvas/index.tsx
-var import_jsx_runtime70 = require("react/jsx-runtime");
+var import_jsx_runtime77 = require("react/jsx-runtime");
 var getClassName32 = get_class_name_factory_default("PuckCanvas", styles_module_default25);
 var ZOOM_ON_CHANGE = true;
 var TRANSITION_DURATION = 150;
@@ -11371,17 +11595,17 @@ var Canvas = () => {
       viewports: s.state.ui.viewports
     }))
   );
-  const [showTransition, setShowTransition] = (0, import_react73.useState)(false);
-  const isResizingRef = (0, import_react73.useRef)(false);
-  const defaultRender = (0, import_react73.useMemo)(() => {
-    const PuckDefault = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_jsx_runtime70.Fragment, { children });
+  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 });
     return PuckDefault;
   }, []);
-  const CustomPreview = (0, import_react73.useMemo)(
+  const CustomPreview = (0, import_react77.useMemo)(
     () => overrides.preview || defaultRender,
     [overrides]
   );
-  const getFrameDimensions = (0, import_react73.useCallback)(() => {
+  const getFrameDimensions = (0, import_react77.useCallback)(() => {
     if (frameRef.current) {
       const frame = frameRef.current;
       const box = getBox(frame);
@@ -11389,7 +11613,7 @@ var Canvas = () => {
     }
     return { width: 0, height: 0 };
   }, [frameRef]);
-  (0, import_react73.useEffect)(() => {
+  (0, import_react77.useEffect)(() => {
     resetAutoZoom();
   }, [
     frameRef,
@@ -11399,7 +11623,7 @@ var Canvas = () => {
     rightSideBarWidth,
     viewports
   ]);
-  (0, import_react73.useEffect)(() => {
+  (0, import_react77.useEffect)(() => {
     const { height: frameHeight } = getFrameDimensions();
     if (viewports.current.height === "auto") {
       setZoomConfig(__spreadProps(__spreadValues({}, zoomConfig), {
@@ -11407,12 +11631,12 @@ var Canvas = () => {
       }));
     }
   }, [zoomConfig.zoom, getFrameDimensions, setZoomConfig]);
-  (0, import_react73.useEffect)(() => {
+  (0, import_react77.useEffect)(() => {
     if (ZOOM_ON_CHANGE) {
       resetAutoZoom();
     }
   }, [viewports.current.width, viewports]);
-  (0, import_react73.useEffect)(() => {
+  (0, import_react77.useEffect)(() => {
     if (!frameRef.current) return;
     const resizeObserver = new ResizeObserver(() => {
       if (!isResizingRef.current) {
@@ -11424,13 +11648,13 @@ var Canvas = () => {
       resizeObserver.disconnect();
     };
   }, [frameRef.current]);
-  const [showLoader, setShowLoader] = (0, import_react73.useState)(false);
-  (0, import_react73.useEffect)(() => {
+  const [showLoader, setShowLoader] = (0, import_react77.useState)(false);
+  (0, import_react77.useEffect)(() => {
     setTimeout(() => {
       setShowLoader(true);
     }, 500);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
     "div",
     {
       className: getClassName32({
@@ -11448,7 +11672,7 @@ var Canvas = () => {
         }
       },
       children: [
-        viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: getClassName32("controls"), children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+        viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: getClassName32("controls"), children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
           ViewportControls,
           {
             autoZoom: zoomConfig.autoZoom,
@@ -11477,8 +11701,8 @@ var Canvas = () => {
             }
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: getClassName32("inner"), ref: frameRef, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: getClassName32("inner"), ref: frameRef, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
             "div",
             {
               className: getClassName32("root"),
@@ -11495,10 +11719,10 @@ var Canvas = () => {
                 setShowTransition(false);
                 isResizingRef.current = false;
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(CustomPreview, { children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Preview2, {}) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(CustomPreview, { children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(Preview2, {}) })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: getClassName32("loader"), children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Loader, { size: 24 }) })
+          /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: getClassName32("loader"), children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(Loader, { size: 24 }) })
         ] })
       ]
     }
@@ -11510,7 +11734,7 @@ init_default_viewports();
 
 // lib/use-loaded-overrides.ts
 init_react_import();
-var import_react74 = require("react");
+var import_react78 = require("react");
 
 // lib/load-overrides.ts
 init_react_import();
@@ -11552,26 +11776,26 @@ var useLoadedOverrides = ({
   overrides,
   plugins
 }) => {
-  return (0, import_react74.useMemo)(() => {
+  return (0, import_react78.useMemo)(() => {
     return loadOverrides({ overrides, plugins });
   }, [plugins, overrides]);
 };
 
 // components/DefaultOverride/index.tsx
 init_react_import();
-var import_jsx_runtime71 = require("react/jsx-runtime");
-var DefaultOverride = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_jsx_runtime71.Fragment, { children });
+var import_jsx_runtime78 = require("react/jsx-runtime");
+var DefaultOverride = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_jsx_runtime78.Fragment, { children });
 
 // lib/use-inject-css.ts
 init_react_import();
-var import_react75 = require("react");
+var import_react79 = require("react");
 var styles = ``;
 var useInjectStyleSheet = (initialStyles, iframeEnabled) => {
-  const [el, setEl] = (0, import_react75.useState)();
-  (0, import_react75.useEffect)(() => {
+  const [el, setEl] = (0, import_react79.useState)();
+  (0, import_react79.useEffect)(() => {
     setEl(document.createElement("style"));
   }, []);
-  (0, import_react75.useEffect)(() => {
+  (0, import_react79.useEffect)(() => {
     var _a;
     if (!el || typeof window === "undefined") {
       return;
@@ -11591,12 +11815,12 @@ var useInjectGlobalCss = (iframeEnabled) => {
 
 // lib/use-preview-mode-hotkeys.ts
 init_react_import();
-var import_react76 = require("react");
+var import_react80 = require("react");
 init_use_hotkey();
 init_store();
 var usePreviewModeHotkeys = () => {
   const appStore = useAppStoreApi();
-  const toggleInteractive = (0, import_react76.useCallback)(() => {
+  const toggleInteractive = (0, import_react80.useCallback)(() => {
     const dispatch = appStore.getState().dispatch;
     dispatch({
       type: "setUi",
@@ -11611,7 +11835,7 @@ var usePreviewModeHotkeys = () => {
 
 // lib/use-delete-hotkeys.ts
 init_react_import();
-var import_react77 = require("react");
+var import_react81 = require("react");
 init_use_hotkey();
 init_store();
 var isElementVisible = (element) => {
@@ -11648,7 +11872,7 @@ var shouldBlockDeleteHotkey = (e) => {
 };
 var useDeleteHotkeys = () => {
   const appStore = useAppStoreApi();
-  const deleteSelectedComponent = (0, import_react77.useCallback)(
+  const deleteSelectedComponent = (0, import_react81.useCallback)(
     (e) => {
       var _a;
       if (shouldBlockDeleteHotkey(e)) {
@@ -11679,7 +11903,7 @@ init_use_hotkey();
 
 // lib/use-puck.ts
 init_react_import();
-var import_react78 = require("react");
+var import_react82 = require("react");
 var import_zustand6 = require("zustand");
 init_make_state_public();
 init_get_item();
@@ -11714,9 +11938,12 @@ var generateUsePuck = (store) => {
       return parentNode.data;
     }
   };
+  storeData.__private = {
+    appState: store.state
+  };
   return storeData;
 };
-var UsePuckStoreContext = (0, import_react78.createContext)(
+var UsePuckStoreContext = (0, import_react82.createContext)(
   null
 );
 var convertToPickedStore = (store) => {
@@ -11730,12 +11957,12 @@ var convertToPickedStore = (store) => {
   };
 };
 var useRegisterUsePuckStore = (appStore) => {
-  const [usePuckStore] = (0, import_react78.useState)(
+  const [usePuckStore] = (0, import_react82.useState)(
     () => (0, import_zustand6.createStore)(
       () => generateUsePuck(convertToPickedStore(appStore.getState()))
     )
   );
-  (0, import_react78.useEffect)(() => {
+  (0, import_react82.useEffect)(() => {
     return appStore.subscribe(
       (store) => convertToPickedStore(store),
       (pickedStore) => {
@@ -11747,7 +11974,7 @@ var useRegisterUsePuckStore = (appStore) => {
 };
 function createUsePuck() {
   return function usePuck2(selector) {
-    const usePuckApi = (0, import_react78.useContext)(UsePuckStoreContext);
+    const usePuckApi = (0, import_react82.useContext)(UsePuckStoreContext);
     if (!usePuckApi) {
       throw new Error("usePuck must be used inside <Puck>.");
     }
@@ -11759,7 +11986,7 @@ function createUsePuck() {
   };
 }
 function usePuck() {
-  (0, import_react78.useEffect)(() => {
+  (0, import_react82.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."
     );
@@ -11767,7 +11994,7 @@ function usePuck() {
   return createUsePuck()((s) => s);
 }
 function useGetPuck() {
-  const usePuckApi = (0, import_react78.useContext)(UsePuckStoreContext);
+  const usePuckApi = (0, import_react82.useContext)(UsePuckStoreContext);
   if (!usePuckApi) {
     throw new Error("usePuckGet must be used inside <Puck>.");
   }
@@ -11780,7 +12007,7 @@ var import_fast_deep_equal = __toESM(require_fast_deep_equal());
 
 // components/Puck/components/Header/index.tsx
 init_react_import();
-var import_react79 = require("react");
+var import_react83 = require("react");
 init_store();
 init_lucide_react();
 init_IconButton();
@@ -11797,7 +12024,7 @@ var styles_module_default26 = { "MenuBar": "_MenuBar_8pf8c_1", "MenuBar--menuOpe
 
 // components/MenuBar/index.tsx
 init_store();
-var import_jsx_runtime72 = require("react/jsx-runtime");
+var import_jsx_runtime79 = require("react/jsx-runtime");
 var getClassName33 = get_class_name_factory_default("MenuBar", styles_module_default26);
 function MenuBar({
   menuOpen = false,
@@ -11808,7 +12035,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_runtime72.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
     "div",
     {
       className: getClassName33({ menuOpen }),
@@ -11822,30 +12049,30 @@ function MenuBar({
           setMenuOpen(false);
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: getClassName33("inner"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: getClassName33("history"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+      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)(
             IconButton,
             {
               type: "button",
               title: "undo",
               disabled: !hasPast,
               onClick: back,
-              children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Undo2, { size: 21 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Undo2, { size: 21 })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
             IconButton,
             {
               type: "button",
               title: "redo",
               disabled: !hasFuture,
               onClick: forward,
-              children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Redo2, { size: 21 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Redo2, { size: 21 })
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_jsx_runtime72.Fragment, { children: renderHeaderActions && renderHeaderActions() })
+        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_jsx_runtime79.Fragment, { children: renderHeaderActions && renderHeaderActions() })
       ] })
     }
   );
@@ -11859,7 +12086,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_runtime73 = require("react/jsx-runtime");
+var import_jsx_runtime80 = require("react/jsx-runtime");
 var getClassName34 = get_class_name_factory_default("PuckHeader", styles_module_default27);
 var HeaderInner = () => {
   const {
@@ -11872,7 +12099,7 @@ var HeaderInner = () => {
   } = usePropsContext();
   const dispatch = useAppStore((s) => s.dispatch);
   const appStore = useAppStoreApi();
-  const defaultHeaderRender = (0, import_react79.useMemo)(() => {
+  const defaultHeaderRender = (0, import_react83.useMemo)(() => {
     if (renderHeader) {
       console.warn(
         "`renderHeader` is deprecated. Please use `overrides.header` and the `usePuck` hook instead"
@@ -11881,13 +12108,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_runtime73.jsx)(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
+        return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
       };
       return RenderHeader;
     }
     return DefaultOverride;
   }, [renderHeader]);
-  const defaultHeaderActionsRender = (0, import_react79.useMemo)(() => {
+  const defaultHeaderActionsRender = (0, import_react83.useMemo)(() => {
     if (renderHeaderActions) {
       console.warn(
         "`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `usePuck` hook instead."
@@ -11895,7 +12122,7 @@ var HeaderInner = () => {
       const RenderHeader = (props) => {
         const Comp = renderHeaderActions;
         const appState = useAppStore((s) => s.state);
-        return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
+        return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
       };
       return RenderHeader;
     }
@@ -11907,7 +12134,7 @@ var HeaderInner = () => {
   const CustomHeaderActions = useAppStore(
     (s) => s.overrides.headerActions || defaultHeaderActionsRender
   );
-  const [menuOpen, setMenuOpen] = (0, import_react79.useState)(false);
+  const [menuOpen, setMenuOpen] = (0, import_react83.useState)(false);
   const rootTitle = useAppStore((s) => {
     var _a, _b;
     const rootData = (_a = s.state.indexes.nodes["root"]) == null ? void 0 : _a.data;
@@ -11917,7 +12144,7 @@ var HeaderInner = () => {
   const rightSideBarVisible = useAppStore(
     (s) => s.state.ui.rightSideBarVisible
   );
-  const toggleSidebars = (0, import_react79.useCallback)(
+  const toggleSidebars = (0, import_react83.useCallback)(
     (sidebar) => {
       const widerViewport = window.matchMedia("(min-width: 638px)").matches;
       const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
@@ -11931,27 +12158,27 @@ var HeaderInner = () => {
     },
     [dispatch, leftSideBarVisible, rightSideBarVisible]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
     CustomHeader,
     {
-      actions: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_jsx_runtime73.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(CustomHeaderActions, { children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+      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)(
         Button,
         {
           onClick: () => {
             const data = appStore.getState().state.data;
             onPublish && onPublish(data);
           },
-          icon: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Globe, { size: "14px" }),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Globe, { size: "14px" }),
           children: "Publish"
         }
       ) }) }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
         "header",
         {
           className: getClassName34({ leftSideBarVisible, rightSideBarVisible }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: getClassName34("inner"), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: getClassName34("toggle"), children: [
-              /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: getClassName34("leftSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+          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)(
                 IconButton,
                 {
                   type: "button",
@@ -11959,10 +12186,10 @@ var HeaderInner = () => {
                     toggleSidebars("left");
                   },
                   title: "Toggle left sidebar",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(PanelLeft, { focusable: "false" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(PanelLeft, { focusable: "false" })
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: getClassName34("rightSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: getClassName34("rightSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
                 IconButton,
                 {
                   type: "button",
@@ -11970,19 +12197,19 @@ var HeaderInner = () => {
                     toggleSidebars("right");
                   },
                   title: "Toggle right sidebar",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(PanelRight, { focusable: "false" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(PanelRight, { focusable: "false" })
                 }
               ) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: getClassName34("title"), children: /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(Heading7, { rank: "2", size: "xs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: getClassName34("title"), children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(Heading7, { rank: "2", size: "xs", children: [
               headerTitle || rootTitle || "Page",
-              headerPath && /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_jsx_runtime73.Fragment, { children: [
+              headerPath && /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
                 " ",
-                /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("code", { className: getClassName34("path"), children: headerPath })
+                /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("code", { className: getClassName34("path"), children: headerPath })
               ] })
             ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: getClassName34("tools"), children: [
-              /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: getClassName34("menuButton"), children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+            /* @__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)(
                 IconButton,
                 {
                   type: "button",
@@ -11990,23 +12217,23 @@ var HeaderInner = () => {
                     return setMenuOpen(!menuOpen);
                   },
                   title: "Toggle menu bar",
-                  children: menuOpen ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ChevronDown, { focusable: "false" })
+                  children: menuOpen ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ChevronDown, { focusable: "false" })
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
                 MenuBar,
                 {
                   dispatch,
                   onPublish,
                   menuOpen,
-                  renderHeaderActions: () => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(CustomHeaderActions, { children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+                  renderHeaderActions: () => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(CustomHeaderActions, { children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
                     Button,
                     {
                       onClick: () => {
                         const data = appStore.getState().state.data;
                         onPublish && onPublish(data);
                       },
-                      icon: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Globe, { size: "14px" }),
+                      icon: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Globe, { size: "14px" }),
                       children: "Publish"
                     }
                   ) }),
@@ -12020,14 +12247,14 @@ var HeaderInner = () => {
     }
   );
 };
-var Header = (0, import_react79.memo)(HeaderInner);
+var Header = (0, import_react83.memo)(HeaderInner);
 
 // components/Puck/components/Sidebar/index.tsx
 init_react_import();
 
 // components/Puck/components/ResizeHandle/index.tsx
 init_react_import();
-var import_react80 = require("react");
+var import_react84 = 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
@@ -12036,7 +12263,7 @@ var styles_module_default28 = { "ResizeHandle": "_ResizeHandle_144bf_2", "Resize
 
 // components/Puck/components/ResizeHandle/index.tsx
 init_lib();
-var import_jsx_runtime74 = require("react/jsx-runtime");
+var import_jsx_runtime81 = require("react/jsx-runtime");
 var getClassName35 = get_class_name_factory_default("ResizeHandle", styles_module_default28);
 var ResizeHandle = ({
   position,
@@ -12046,11 +12273,11 @@ var ResizeHandle = ({
 }) => {
   const { frameRef } = useCanvasFrame();
   const resetAutoZoom = useResetAutoZoom(frameRef);
-  const handleRef = (0, import_react80.useRef)(null);
-  const isDragging = (0, import_react80.useRef)(false);
-  const startX = (0, import_react80.useRef)(0);
-  const startWidth = (0, import_react80.useRef)(0);
-  const handleMouseMove = (0, import_react80.useCallback)(
+  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)(
     (e) => {
       if (!isDragging.current) return;
       const delta = e.clientX - startX.current;
@@ -12061,7 +12288,7 @@ var ResizeHandle = ({
     },
     [onResize, position]
   );
-  const handleMouseUp = (0, import_react80.useCallback)(() => {
+  const handleMouseUp = (0, import_react84.useCallback)(() => {
     var _a;
     if (!isDragging.current) return;
     isDragging.current = false;
@@ -12077,7 +12304,7 @@ var ResizeHandle = ({
     onResizeEnd(finalWidth);
     resetAutoZoom();
   }, [onResizeEnd]);
-  const handleMouseDown = (0, import_react80.useCallback)(
+  const handleMouseDown = (0, import_react84.useCallback)(
     (e) => {
       var _a;
       isDragging.current = true;
@@ -12095,7 +12322,7 @@ var ResizeHandle = ({
     },
     [position, handleMouseMove, handleMouseUp]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
     "div",
     {
       ref: handleRef,
@@ -12113,7 +12340,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_runtime75 = require("react/jsx-runtime");
+var import_jsx_runtime82 = require("react/jsx-runtime");
 var getClassName36 = get_class_name_factory_default("Sidebar", styles_module_default29);
 var Sidebar = ({
   position,
@@ -12124,9 +12351,9 @@ var Sidebar = ({
   children
 }) => {
   if (!isVisible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(import_jsx_runtime75.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { ref: sidebarRef, className: getClassName36({ [position]: true }), children }),
-    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: `${getClassName36("resizeHandle")}`, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+  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)(
       ResizeHandle,
       {
         position,
@@ -12140,15 +12367,15 @@ var Sidebar = ({
 
 // lib/use-sidebar-resize.ts
 init_react_import();
-var import_react81 = require("react");
+var import_react85 = require("react");
 init_store();
 function useSidebarResize(position, dispatch) {
-  const [width, setWidth] = (0, import_react81.useState)(null);
-  const sidebarRef = (0, import_react81.useRef)(null);
+  const [width, setWidth] = (0, import_react85.useState)(null);
+  const sidebarRef = (0, import_react85.useRef)(null);
   const storeWidth = useAppStore(
     (s) => position === "left" ? s.state.ui.leftSideBarWidth : s.state.ui.rightSideBarWidth
   );
-  (0, import_react81.useEffect)(() => {
+  (0, import_react85.useEffect)(() => {
     if (typeof window !== "undefined" && !storeWidth) {
       try {
         const savedWidths = localStorage.getItem("puck-sidebar-widths");
@@ -12173,12 +12400,12 @@ function useSidebarResize(position, dispatch) {
       }
     }
   }, [dispatch, position, storeWidth]);
-  (0, import_react81.useEffect)(() => {
+  (0, import_react85.useEffect)(() => {
     if (storeWidth !== void 0) {
       setWidth(storeWidth);
     }
   }, [storeWidth]);
-  const handleResizeEnd = (0, import_react81.useCallback)(
+  const handleResizeEnd = (0, import_react85.useCallback)(
     (width2) => {
       dispatch({
         type: "setUi",
@@ -12233,7 +12460,7 @@ var toComponent = (item) => {
 };
 
 // components/Puck/index.tsx
-var import_jsx_runtime76 = require("react/jsx-runtime");
+var import_jsx_runtime83 = 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 = () => {
@@ -12243,13 +12470,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_runtime76.jsx)(SidebarSection, { noPadding: true, noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Fields, {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(SidebarSection, { noPadding: true, noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Fields, {}) });
 };
-var propsContext = (0, import_react82.createContext)({});
+var propsContext = (0, import_react86.createContext)({});
 function PropsProvider(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(propsContext.Provider, { value: props, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(propsContext.Provider, { value: props, children: props.children });
 }
-var usePropsContext = () => (0, import_react82.useContext)(propsContext);
+var usePropsContext = () => (0, import_react86.useContext)(propsContext);
 function PuckProvider({ children }) {
   const {
     config,
@@ -12266,14 +12493,14 @@ function PuckProvider({ children }) {
     onAction,
     fieldTransforms
   } = usePropsContext();
-  const iframe = (0, import_react82.useMemo)(
+  const iframe = (0, import_react86.useMemo)(
     () => __spreadValues({
       enabled: true,
       waitForStyles: true
     }, _iframe),
     [_iframe]
   );
-  const [generatedAppState] = (0, import_react82.useState)(() => {
+  const [generatedAppState] = (0, import_react86.useState)(() => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i;
     const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUi);
     let clientUiState = {};
@@ -12337,7 +12564,7 @@ function PuckProvider({ children }) {
     return walkAppState(newAppState, config);
   });
   const { appendData = true } = _initialHistory || {};
-  const [blendedHistories] = (0, import_react82.useState)(
+  const [blendedHistories] = (0, import_react86.useState)(
     [
       ...(_initialHistory == null ? void 0 : _initialHistory.histories) || [],
       ...appendData ? [{ state: generatedAppState }] : []
@@ -12351,7 +12578,7 @@ function PuckProvider({ children }) {
       });
     })
   );
-  const initialHistoryIndex = (0, import_react82.useMemo)(() => {
+  const initialHistoryIndex = (0, import_react86.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;
     }
@@ -12362,7 +12589,7 @@ function PuckProvider({ children }) {
     overrides,
     plugins
   });
-  const loadedFieldTransforms = (0, import_react82.useMemo)(() => {
+  const loadedFieldTransforms = (0, import_react86.useMemo)(() => {
     const _plugins = plugins || [];
     const pluginFieldTransforms = _plugins.reduce(
       (acc, plugin) => __spreadValues(__spreadValues({}, acc), plugin.fieldTransforms),
@@ -12370,7 +12597,7 @@ function PuckProvider({ children }) {
     );
     return __spreadValues(__spreadValues({}, pluginFieldTransforms), fieldTransforms);
   }, [fieldTransforms, plugins]);
-  const generateAppStore = (0, import_react82.useCallback)(
+  const generateAppStore = (0, import_react86.useCallback)(
     (state) => {
       return {
         state,
@@ -12396,15 +12623,15 @@ function PuckProvider({ children }) {
       loadedFieldTransforms
     ]
   );
-  const [appStore] = (0, import_react82.useState)(
+  const [appStore] = (0, import_react86.useState)(
     () => createAppStore(generateAppStore(initialAppState))
   );
-  (0, import_react82.useEffect)(() => {
+  (0, import_react86.useEffect)(() => {
     if (process.env.NODE_ENV !== "production") {
       window.__PUCK_INTERNAL_DO_NOT_USE = { appStore };
     }
   }, [appStore]);
-  (0, import_react82.useEffect)(() => {
+  (0, import_react86.useEffect)(() => {
     const state = appStore.getState().state;
     appStore.setState(__spreadValues({}, generateAppStore(state)));
   }, [config, plugins, loadedOverrides, viewports, iframe, onAction, metadata]);
@@ -12413,8 +12640,8 @@ function PuckProvider({ children }) {
     index: initialHistoryIndex,
     initialAppState
   });
-  const previousData = (0, import_react82.useRef)(null);
-  (0, import_react82.useEffect)(() => {
+  const previousData = (0, import_react86.useRef)(null);
+  (0, import_react86.useEffect)(() => {
     return appStore.subscribe(
       (s) => s.state.data,
       (data) => {
@@ -12428,11 +12655,11 @@ function PuckProvider({ children }) {
   }, [onChange]);
   useRegisterPermissionsSlice(appStore, permissions);
   const uPuckStore = useRegisterUsePuckStore(appStore);
-  (0, import_react82.useEffect)(() => {
+  (0, import_react86.useEffect)(() => {
     const { resolveAndCommitData } = appStore.getState();
     resolveAndCommitData();
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(UsePuckStoreContext.Provider, { value: uPuckStore, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(UsePuckStoreContext.Provider, { value: uPuckStore, children }) });
 }
 function PuckLayout({ children }) {
   const {
@@ -12440,7 +12667,7 @@ function PuckLayout({ children }) {
     dnd,
     initialHistory: _initialHistory
   } = usePropsContext();
-  const iframe = (0, import_react82.useMemo)(
+  const iframe = (0, import_react86.useMemo)(
     () => __spreadValues({
       enabled: true,
       waitForStyles: true
@@ -12465,7 +12692,7 @@ function PuckLayout({ children }) {
     sidebarRef: rightSidebarRef,
     handleResizeEnd: handleRightSidebarResizeEnd
   } = useSidebarResize("right", dispatch);
-  (0, import_react82.useEffect)(() => {
+  (0, import_react86.useEffect)(() => {
     if (!window.matchMedia("(min-width: 638px)").matches) {
       dispatch({
         type: "setUi",
@@ -12489,18 +12716,18 @@ function PuckLayout({ children }) {
     };
   }, []);
   const overrides = useAppStore((s) => s.overrides);
-  const CustomPuck = (0, import_react82.useMemo)(
+  const CustomPuck = (0, import_react86.useMemo)(
     () => overrides.puck || DefaultOverride,
     [overrides]
   );
-  const [mounted, setMounted] = (0, import_react82.useState)(false);
-  (0, import_react82.useEffect)(() => {
+  const [mounted, setMounted] = (0, import_react86.useState)(false);
+  (0, import_react86.useEffect)(() => {
     setMounted(true);
   }, []);
   const ready = useAppStore((s) => s.status === "READY");
   useMonitorHotkeys();
   useDeleteHotkeys();
-  (0, import_react82.useEffect)(() => {
+  (0, import_react86.useEffect)(() => {
     if (ready && iframe.enabled) {
       const frameDoc = getFrame();
       if (frameDoc) {
@@ -12516,8 +12743,8 @@ function PuckLayout({ children }) {
   if (rightWidth) {
     layoutOptions["--puck-user-right-side-bar-width"] = `${rightWidth}px`;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: `Puck ${getClassName37()}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(CustomPuck, { children: children || /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(FrameProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+  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)(
       "div",
       {
         className: getLayoutClassName({
@@ -12525,14 +12752,14 @@ function PuckLayout({ children }) {
           mounted,
           rightSideBarVisible
         }),
-        children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(
           "div",
           {
             className: getLayoutClassName("inner"),
             style: layoutOptions,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Header, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Header, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(
                 Sidebar,
                 {
                   position: "left",
@@ -12541,13 +12768,13 @@ function PuckLayout({ children }) {
                   onResize: setLeftWidth,
                   onResizeEnd: handleLeftSidebarResizeEnd,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Components, {}) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(SidebarSection, { title: "Outline", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Outline, {}) })
+                    /* @__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_runtime76.jsx)(Canvas, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Canvas, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
                 Sidebar,
                 {
                   position: "right",
@@ -12555,7 +12782,7 @@ function PuckLayout({ children }) {
                   isVisible: rightSideBarVisible,
                   onResize: setRightWidth,
                   onResizeEnd: handleRightSidebarResizeEnd,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(FieldSideBar, {})
+                  children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(FieldSideBar, {})
                 }
               )
             ]
@@ -12563,11 +12790,11 @@ function PuckLayout({ children }) {
         )
       }
     ) }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { id: "puck-portal-root", className: getClassName37("portal") })
+    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { id: "puck-portal-root", className: getClassName37("portal") })
   ] });
 }
 function Puck(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(PropsProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(PuckProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(PuckLayout, __spreadValues({}, 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)) })) }));
 }
 Puck.Components = Components;
 Puck.Fields = Fields;