@measured/puck 0.16.0-canary.04fd6c5 → 0.16.0-canary.1beaf6b

package/dist/index.js

@@ -7536,7 +7536,7 @@ var require_react_dom_development = __commonJS({
         var HostPortal = 4;
         var HostComponent = 5;
         var HostText = 6;
-        var Fragment19 = 7;
+        var Fragment20 = 7;
         var Mode = 8;
         var ContextConsumer = 9;
         var ContextProvider = 10;
@@ -8692,7 +8692,7 @@ var require_react_dom_development = __commonJS({
               return "DehydratedFragment";
             case ForwardRef:
               return getWrappedName$1(type, type.render, "ForwardRef");
-            case Fragment19:
+            case Fragment20:
               return "Fragment";
             case HostComponent:
               return type;
@@ -18343,7 +18343,7 @@ var require_react_dom_development = __commonJS({
             }
           }
           function updateFragment2(returnFiber, current2, fragment, lanes, key) {
-            if (current2 === null || current2.tag !== Fragment19) {
+            if (current2 === null || current2.tag !== Fragment20) {
               var created = createFiberFromFragment(fragment, returnFiber.mode, lanes, key);
               created.return = returnFiber;
               return created;
@@ -18746,7 +18746,7 @@ var require_react_dom_development = __commonJS({
               if (child.key === key) {
                 var elementType = element.type;
                 if (elementType === REACT_FRAGMENT_TYPE) {
-                  if (child.tag === Fragment19) {
+                  if (child.tag === Fragment20) {
                     deleteRemainingChildren(returnFiber, child.sibling);
                     var existing = useFiber(child, element.props.children);
                     existing.return = returnFiber;
@@ -22921,7 +22921,7 @@ var require_react_dom_development = __commonJS({
               var _resolvedProps2 = workInProgress2.elementType === type ? _unresolvedProps2 : resolveDefaultProps(type, _unresolvedProps2);
               return updateForwardRef(current2, workInProgress2, type, _resolvedProps2, renderLanes2);
             }
-            case Fragment19:
+            case Fragment20:
               return updateFragment(current2, workInProgress2, renderLanes2);
             case Mode:
               return updateMode(current2, workInProgress2, renderLanes2);
@@ -23193,7 +23193,7 @@ var require_react_dom_development = __commonJS({
             case SimpleMemoComponent:
             case FunctionComponent:
             case ForwardRef:
-            case Fragment19:
+            case Fragment20:
             case Mode:
             case Profiler:
             case ContextConsumer:
@@ -27444,7 +27444,7 @@ var require_react_dom_development = __commonJS({
           return fiber;
         }
         function createFiberFromFragment(elements, mode, lanes, key) {
-          var fiber = createFiber(Fragment19, elements, key, mode);
+          var fiber = createFiber(Fragment20, elements, key, mode);
           fiber.lanes = lanes;
           return fiber;
         }
@@ -31021,7 +31021,7 @@ function DropZone(props) {
 
 // components/Puck/index.tsx
 init_react_import();
-var import_react30 = require("react");
+var import_react31 = require("react");
 
 // lib/use-placeholder-style.ts
 init_react_import();
@@ -32663,37 +32663,6 @@ var Outline = () => {
   ] }) }) });
 };
 
-// lib/load-overrides.ts
-init_react_import();
-var loadOverrides = ({
-  overrides,
-  plugins
-}) => {
-  const collected = __spreadValues({}, overrides);
-  plugins.forEach((plugin) => {
-    Object.keys(plugin.overrides).forEach((overridesType) => {
-      if (overridesType === "fieldTypes") {
-        const fieldTypes = plugin.overrides.fieldTypes;
-        Object.keys(fieldTypes).forEach((fieldType) => {
-          collected.fieldTypes = collected.fieldTypes || {};
-          const childNode2 = collected.fieldTypes[fieldType];
-          const Comp2 = (props) => fieldTypes[fieldType](__spreadProps(__spreadValues({}, props), {
-            children: childNode2 ? childNode2(props) : props.children
-          }));
-          collected.fieldTypes[fieldType] = Comp2;
-        });
-        return;
-      }
-      const childNode = collected[overridesType];
-      const Comp = (props) => plugin.overrides[overridesType](__spreadProps(__spreadValues({}, props), {
-        children: childNode ? childNode(props) : props.children
-      }));
-      collected[overridesType] = Comp;
-    });
-  });
-  return collected;
-};
-
 // lib/use-puck-history.ts
 init_react_import();
 var import_react_hotkeys_hook = require("react-hotkeys-hook");
@@ -33250,8 +33219,58 @@ var insertComponent = (componentType, zone, index, {
   });
 };
 
-// components/Puck/index.tsx
+// lib/use-loaded-overrides.ts
+init_react_import();
+var import_react30 = require("react");
+
+// lib/load-overrides.ts
+init_react_import();
+var loadOverrides = ({
+  overrides,
+  plugins
+}) => {
+  const collected = __spreadValues({}, overrides);
+  plugins.forEach((plugin) => {
+    Object.keys(plugin.overrides).forEach((overridesType) => {
+      if (overridesType === "fieldTypes") {
+        const fieldTypes = plugin.overrides.fieldTypes;
+        Object.keys(fieldTypes).forEach((fieldType) => {
+          collected.fieldTypes = collected.fieldTypes || {};
+          const childNode2 = collected.fieldTypes[fieldType];
+          const Comp2 = (props) => fieldTypes[fieldType](__spreadProps(__spreadValues({}, props), {
+            children: childNode2 ? childNode2(props) : props.children
+          }));
+          collected.fieldTypes[fieldType] = Comp2;
+        });
+        return;
+      }
+      const childNode = collected[overridesType];
+      const Comp = (props) => plugin.overrides[overridesType](__spreadProps(__spreadValues({}, props), {
+        children: childNode ? childNode(props) : props.children
+      }));
+      collected[overridesType] = Comp;
+    });
+  });
+  return collected;
+};
+
+// lib/use-loaded-overrides.ts
+var useLoadedOverrides = ({
+  overrides,
+  plugins
+}) => {
+  return (0, import_react30.useMemo)(() => {
+    return loadOverrides({ overrides, plugins });
+  }, [plugins, overrides]);
+};
+
+// components/DefaultOverride/index.tsx
+init_react_import();
 var import_jsx_runtime37 = require("react/jsx-runtime");
+var DefaultOverride = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children });
+
+// components/Puck/index.tsx
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var getClassName27 = get_class_name_factory_default("Puck", styles_module_default15);
 var getLayoutClassName = get_class_name_factory_default("PuckLayout", styles_module_default15);
 function Puck({
@@ -33277,10 +33296,10 @@ function Puck({
 }) {
   var _a;
   const historyStore = useHistoryStore(initialHistory);
-  const [reducer] = (0, import_react30.useState)(
+  const [reducer] = (0, import_react31.useState)(
     () => createReducer({ config, record: historyStore.record, onAction })
   );
-  const [initialAppState] = (0, import_react30.useState)(() => {
+  const [initialAppState] = (0, import_react31.useState)(() => {
     var _a2, _b, _c, _d, _e, _f, _g;
     const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUi);
     let clientUiState = {};
@@ -33338,7 +33357,7 @@ function Puck({
       })
     });
   });
-  const [appState, dispatch] = (0, import_react30.useReducer)(
+  const [appState, dispatch] = (0, import_react31.useReducer)(
     reducer,
     flushZones(initialAppState)
   );
@@ -33349,9 +33368,9 @@ function Puck({
     config,
     dispatch
   );
-  const [menuOpen, setMenuOpen] = (0, import_react30.useState)(false);
+  const [menuOpen, setMenuOpen] = (0, import_react31.useState)(false);
   const { itemSelector, leftSideBarVisible, rightSideBarVisible } = ui;
-  const setItemSelector = (0, import_react30.useCallback)(
+  const setItemSelector = (0, import_react31.useCallback)(
     (newItemSelector) => {
       if (newItemSelector === itemSelector) return;
       dispatch({
@@ -33363,13 +33382,13 @@ function Puck({
     [itemSelector]
   );
   const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (onChange) onChange(data);
   }, [data]);
   const { onDragStartOrUpdate, placeholderStyle } = usePlaceholderStyle();
-  const [draggedItem, setDraggedItem] = (0, import_react30.useState)();
+  const [draggedItem, setDraggedItem] = (0, import_react31.useState)();
   const rootProps = data.root.props || data.root;
-  const toggleSidebars = (0, import_react30.useCallback)(
+  const toggleSidebars = (0, import_react31.useCallback)(
     (sidebar) => {
       const widerViewport = window.matchMedia("(min-width: 638px)").matches;
       const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
@@ -33383,7 +33402,7 @@ function Puck({
     },
     [dispatch, leftSideBarVisible, rightSideBarVisible]
   );
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (!window.matchMedia("(min-width: 638px)").matches) {
       dispatch({
         type: "setUi",
@@ -33406,11 +33425,7 @@ function Puck({
       window.removeEventListener("resize", handleResize);
     };
   }, []);
-  const defaultRender = (0, import_react30.useMemo)(() => {
-    const PuckDefault = ({ children: children2 }) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children: children2 });
-    return PuckDefault;
-  }, []);
-  const defaultHeaderRender = (0, import_react30.useMemo)(() => {
+  const defaultHeaderRender = (0, import_react31.useMemo)(() => {
     if (renderHeader) {
       console.warn(
         "`renderHeader` is deprecated. Please use `overrides.header` and the `usePuck` hook instead"
@@ -33418,48 +33433,49 @@ function Puck({
       const RenderHeader = (_a2) => {
         var _b = _a2, { actions } = _b, props = __objRest(_b, ["actions"]);
         const Comp = renderHeader;
-        return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
+        return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
       };
       return RenderHeader;
     }
-    return defaultRender;
+    return DefaultOverride;
   }, [renderHeader]);
-  const defaultHeaderActionsRender = (0, import_react30.useMemo)(() => {
+  const defaultHeaderActionsRender = (0, import_react31.useMemo)(() => {
     if (renderHeaderActions) {
       console.warn(
         "`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `usePuck` hook instead."
       );
       const RenderHeader = (props) => {
         const Comp = renderHeaderActions;
-        return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
+        return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
       };
       return RenderHeader;
     }
-    return defaultRender;
+    return DefaultOverride;
   }, [renderHeader]);
-  const loadedOverrides = (0, import_react30.useMemo)(() => {
-    return loadOverrides({ overrides, plugins });
-  }, [plugins]);
-  const CustomPuck = (0, import_react30.useMemo)(
-    () => loadedOverrides.puck || defaultRender,
+  const loadedOverrides = useLoadedOverrides({
+    overrides,
+    plugins
+  });
+  const CustomPuck = (0, import_react31.useMemo)(
+    () => loadedOverrides.puck || DefaultOverride,
     [loadedOverrides]
   );
-  const CustomHeader = (0, import_react30.useMemo)(
+  const CustomHeader = (0, import_react31.useMemo)(
     () => loadedOverrides.header || defaultHeaderRender,
     [loadedOverrides]
   );
-  const CustomHeaderActions = (0, import_react30.useMemo)(
+  const CustomHeaderActions = (0, import_react31.useMemo)(
     () => loadedOverrides.headerActions || defaultHeaderActionsRender,
     [loadedOverrides]
   );
-  const [mounted, setMounted] = (0, import_react30.useState)(false);
-  (0, import_react30.useEffect)(() => {
+  const [mounted, setMounted] = (0, import_react31.useState)(false);
+  (0, import_react31.useEffect)(() => {
     setMounted(true);
   }, []);
   const selectedComponentConfig = selectedItem && config.components[selectedItem.type];
   const selectedComponentLabel = selectedItem ? (_a = selectedComponentConfig == null ? void 0 : selectedComponentConfig["label"]) != null ? _a : selectedItem.type.toString() : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: `Puck ${getClassName27()}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: `Puck ${getClassName27()}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       AppProvider,
       {
         value: {
@@ -33474,7 +33490,7 @@ function Puck({
           viewports,
           iframe
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           DragDropContext,
           {
             autoScrollerOptions: { disabled: dnd == null ? void 0 : dnd.disableAutoScroll },
@@ -33526,7 +33542,7 @@ function Puck({
                 });
               }
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
               DropZoneProvider,
               {
                 value: {
@@ -33540,7 +33556,7 @@ function Puck({
                   mode: "edit",
                   areaId: "root"
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CustomPuck, { children: children || /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CustomPuck, { children: children || /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                   "div",
                   {
                     className: getLayoutClassName({
@@ -33549,64 +33565,64 @@ function Puck({
                       mounted,
                       rightSideBarVisible
                     }),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: getLayoutClassName("inner"), children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: getLayoutClassName("inner"), children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                         CustomHeader,
                         {
-                          actions: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CustomHeaderActions, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                          actions: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_jsx_runtime38.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CustomHeaderActions, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                             Button,
                             {
                               onClick: () => {
                                 onPublish && onPublish(data);
                               },
-                              icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Globe, { size: "14px" }),
+                              icon: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Globe, { size: "14px" }),
                               children: "Publish"
                             }
                           ) }) }),
-                          children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("header", { className: getLayoutClassName("header"), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: getLayoutClassName("headerInner"), children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: getLayoutClassName("headerToggle"), children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                          children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("header", { className: getLayoutClassName("header"), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: getLayoutClassName("headerInner"), children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: getLayoutClassName("headerToggle"), children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                                 "div",
                                 {
                                   className: getLayoutClassName(
                                     "leftSideBarToggle"
                                   ),
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                                     IconButton,
                                     {
                                       onClick: () => {
                                         toggleSidebars("left");
                                       },
                                       title: "Toggle left sidebar",
-                                      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PanelLeft, { focusable: "false" })
+                                      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PanelLeft, { focusable: "false" })
                                     }
                                   )
                                 }
                               ),
-                              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                                 "div",
                                 {
                                   className: getLayoutClassName(
                                     "rightSideBarToggle"
                                   ),
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                                     IconButton,
                                     {
                                       onClick: () => {
                                         toggleSidebars("right");
                                       },
                                       title: "Toggle right sidebar",
-                                      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PanelRight, { focusable: "false" })
+                                      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PanelRight, { focusable: "false" })
                                     }
                                   )
                                 }
                               )
                             ] }),
-                            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: getLayoutClassName("headerTitle"), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Heading, { rank: 2, size: "xs", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: getLayoutClassName("headerTitle"), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Heading, { rank: 2, size: "xs", children: [
                               headerTitle || rootProps.title || "Page",
-                              headerPath && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+                              headerPath && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
                                 " ",
-                                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                                   "code",
                                   {
                                     className: getLayoutClassName("headerPath"),
@@ -33615,18 +33631,18 @@ function Puck({
                                 )
                               ] })
                             ] }) }),
-                            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: getLayoutClassName("headerTools"), children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: getLayoutClassName("menuButton"), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: getLayoutClassName("headerTools"), children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: getLayoutClassName("menuButton"), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                                 IconButton,
                                 {
                                   onClick: () => {
                                     return setMenuOpen(!menuOpen);
                                   },
                                   title: "Toggle menu bar",
-                                  children: menuOpen ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ChevronDown, { focusable: "false" })
+                                  children: menuOpen ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ChevronDown, { focusable: "false" })
                                 }
                               ) }),
-                              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                                 MenuBar,
                                 {
                                   appState,
@@ -33634,13 +33650,13 @@ function Puck({
                                   dispatch,
                                   onPublish,
                                   menuOpen,
-                                  renderHeaderActions: () => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CustomHeaderActions, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                                  renderHeaderActions: () => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CustomHeaderActions, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                                     Button,
                                     {
                                       onClick: () => {
                                         onPublish && onPublish(data);
                                       },
-                                      icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Globe, { size: "14px" }),
+                                      icon: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Globe, { size: "14px" }),
                                       children: "Publish"
                                     }
                                   ) }),
@@ -33651,19 +33667,19 @@ function Puck({
                           ] }) })
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: getLayoutClassName("leftSideBar"), children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Components, {}) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SidebarSection, { title: "Outline", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Outline, {}) })
+                      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: getLayoutClassName("leftSideBar"), children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Components, {}) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SidebarSection, { title: "Outline", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Outline, {}) })
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Canvas, {}),
-                      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: getLayoutClassName("rightSideBar"), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Canvas, {}),
+                      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: getLayoutClassName("rightSideBar"), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                         SidebarSection,
                         {
                           noPadding: true,
                           noBorderTop: true,
                           showBreadcrumbs: true,
                           title: selectedItem ? selectedComponentLabel : "Page",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Fields, {})
+                          children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Fields, {})
                         }
                       ) })
                     ] })
@@ -33675,7 +33691,7 @@ function Puck({
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { id: "puck-portal-root", className: getClassName27("portal") })
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { id: "puck-portal-root", className: getClassName27("portal") })
   ] });
 }
 Puck.Components = Components;
@@ -33685,7 +33701,7 @@ Puck.Preview = Preview;
 
 // components/Render/index.tsx
 init_react_import();
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function Render({
   config,
   data
@@ -33698,7 +33714,7 @@ function Render({
   const rootProps = defaultedData.root.props || defaultedData.root;
   const title = (rootProps == null ? void 0 : rootProps.title) || "";
   if ((_a = config.root) == null ? void 0 : _a.render) {
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DropZoneProvider, { value: { data: defaultedData, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DropZoneProvider, { value: { data: defaultedData, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       config.root.render,
       __spreadProps(__spreadValues({}, rootProps), {
         puck: {
@@ -33708,11 +33724,11 @@ function Render({
         title,
         editMode: false,
         id: "puck-root",
-        children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DropZone, { zone: rootDroppableId })
+        children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DropZone, { zone: rootDroppableId })
       })
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DropZoneProvider, { value: { data: defaultedData, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DropZone, { zone: rootDroppableId }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DropZoneProvider, { value: { data: defaultedData, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DropZone, { zone: rootDroppableId }) });
 }
 
 // lib/migrate.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@measured/puck",
-  "version": "0.16.0-canary.04fd6c5",
+  "version": "0.16.0-canary.1beaf6b",
   "author": "Measured Corporation Ltd <hello@measured.co>",
   "repository": "measuredco/puck",
   "bugs": "https://github.com/measuredco/puck/issues",