@measured/puck 0.16.0 → 0.16.1-canary.16a7d11

package/dist/index.mjs

@@ -138,7 +138,7 @@ var get_class_name_factory_default = getClassNameFactory;
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ActionBar/styles.module.css#css-module
 init_react_import();
-var styles_module_default = { "ActionBar": "_ActionBar_fp58q_1", "ActionBar-actionsLabel": "_ActionBar-actionsLabel_fp58q_16", "ActionBar-group": "_ActionBar-group_fp58q_29", "ActionBar-action": "_ActionBar-action_fp58q_16" };
+var styles_module_default = { "ActionBar": "_ActionBar_1xlbj_1", "ActionBar-actionsLabel": "_ActionBar-actionsLabel_1xlbj_16", "ActionBar-group": "_ActionBar-group_1xlbj_29", "ActionBar-action": "_ActionBar-action_1xlbj_16" };
 
 // components/ActionBar/index.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -2388,13 +2388,8 @@ var isIos = () => [
 ].includes(navigator.platform) || // iPad on iOS 13 detection
 navigator.userAgent.includes("Mac") && "ontouchend" in document;
 
-// components/DefaultOverride/index.tsx
-init_react_import();
-import { Fragment as Fragment9, jsx as jsx22 } from "react/jsx-runtime";
-var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx22(Fragment9, { children });
-
 // components/DraggableComponent/index.tsx
-import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
 var getClassName17 = get_class_name_factory_default("DraggableComponent", styles_module_default11);
 var space = 8;
 var actionsOverlayTop = space * 6.5;
@@ -2403,7 +2398,7 @@ var actionsRight = space;
 var DefaultActionBar = ({
   label,
   children
-}) => /* @__PURE__ */ jsx23(ActionBar, { label, children: /* @__PURE__ */ jsx23(ActionBar.Group, { children: /* @__PURE__ */ jsx23(DefaultOverride, { children }) }) });
+}) => /* @__PURE__ */ jsx22(ActionBar, { label, children: /* @__PURE__ */ jsx22(ActionBar.Group, { children }) });
 var DraggableComponent = ({
   children,
   id,
@@ -2443,7 +2438,7 @@ var DraggableComponent = ({
   const permissions = getPermissions({
     item: selectedItem
   });
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx22(
     El,
     {
       draggableId: id,
@@ -2473,15 +2468,15 @@ var DraggableComponent = ({
           onClick,
           children: [
             debug,
-            isLoading && /* @__PURE__ */ jsx23("div", { className: getClassName17("loadingOverlay"), children: /* @__PURE__ */ jsx23(Loader, {}) }),
-            isSelected && /* @__PURE__ */ jsx23(
+            isLoading && /* @__PURE__ */ jsx22("div", { className: getClassName17("loadingOverlay"), children: /* @__PURE__ */ jsx22(Loader, {}) }),
+            isSelected && /* @__PURE__ */ jsx22(
               "div",
               {
                 className: getClassName17("actionsOverlay"),
                 style: {
                   top: actionsOverlayTop / zoomConfig.zoom
                 },
-                children: /* @__PURE__ */ jsx23(
+                children: /* @__PURE__ */ jsx22(
                   "div",
                   {
                     className: getClassName17("actions"),
@@ -2491,15 +2486,15 @@ var DraggableComponent = ({
                       right: actionsRight / zoomConfig.zoom
                     },
                     children: /* @__PURE__ */ jsxs11(CustomActionBar, { label, children: [
-                      permissions.duplicate && /* @__PURE__ */ jsx23(ActionBar.Action, { onClick: onDuplicate, label: "Duplicate", children: /* @__PURE__ */ jsx23(Copy, { size: 16 }) }),
-                      permissions.delete && /* @__PURE__ */ jsx23(ActionBar.Action, { onClick: onDelete, label: "Delete", children: /* @__PURE__ */ jsx23(Trash, { size: 16 }) })
+                      permissions.duplicate && /* @__PURE__ */ jsx22(ActionBar.Action, { onClick: onDuplicate, label: "Duplicate", children: /* @__PURE__ */ jsx22(Copy, { size: 16 }) }),
+                      permissions.delete && /* @__PURE__ */ jsx22(ActionBar.Action, { onClick: onDelete, label: "Delete", children: /* @__PURE__ */ jsx22(Trash, { size: 16 }) })
                     ] })
                   }
                 )
               }
             ),
-            /* @__PURE__ */ jsx23("div", { className: getClassName17("overlay") }),
-            /* @__PURE__ */ jsx23("div", { className: getClassName17("contents"), children })
+            /* @__PURE__ */ jsx22("div", { className: getClassName17("overlay") }),
+            /* @__PURE__ */ jsx22("div", { className: getClassName17("contents"), children })
           ]
         })
       )
@@ -2534,7 +2529,7 @@ var getZoneId = (zoneCompound) => {
 };
 
 // components/DropZone/context.tsx
-import { Fragment as Fragment10, jsx as jsx24 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx23 } from "react/jsx-runtime";
 var dropZoneContext = createContext3(null);
 var DropZoneProvider = ({
   children,
@@ -2612,7 +2607,7 @@ var DropZoneProvider = ({
     [value, setPathData]
   );
   const [zoneWillDrag, setZoneWillDrag] = useState13("");
-  return /* @__PURE__ */ jsx24(Fragment10, { children: value && /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx23(Fragment9, { children: value && /* @__PURE__ */ jsx23(
     dropZoneContext.Provider,
     {
       value: __spreadValues({
@@ -2638,7 +2633,7 @@ var DropZoneProvider = ({
 };
 
 // components/DropZone/index.tsx
-import { Fragment as Fragment11, jsx as jsx25, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
 var getClassName18 = get_class_name_factory_default("DropZone", styles_module_default12);
 function DropZoneEdit({ zone, allow, disallow, style }) {
   var _a;
@@ -2693,7 +2688,7 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
   const draggingOverArea = userIsDragging && zoneArea === draggedSourceArea;
   const draggingNewComponent = draggedSourceId == null ? void 0 : draggedSourceId.startsWith("component-list");
   if (!(ctx == null ? void 0 : ctx.config) || !ctx.setHoveringArea || !ctx.setHoveringZone || !ctx.setHoveringComponent || !ctx.setItemSelector || !ctx.registerPath || !ctx.dispatch) {
-    return /* @__PURE__ */ jsx25("div", { children: "DropZone requires context to work." });
+    return /* @__PURE__ */ jsx24("div", { children: "DropZone requires context to work." });
   }
   const {
     hoveringArea = "root",
@@ -2734,7 +2729,7 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
   }
   const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
   const isAreaSelected = selectedItem && zoneArea === selectedItem.props.id;
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx24(
     "div",
     {
       className: getClassName18({
@@ -2751,7 +2746,7 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
       onMouseUp: () => {
         setZoneWillDrag("");
       },
-      children: /* @__PURE__ */ jsx25(
+      children: /* @__PURE__ */ jsx24(
         Droppable,
         {
           droppableId: zoneCompound,
@@ -2806,13 +2801,13 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
                         className: getClassName18("item"),
                         style: { zIndex: isDragging ? 1 : void 0 },
                         children: [
-                          /* @__PURE__ */ jsx25(
+                          /* @__PURE__ */ jsx24(
                             DropZoneProvider,
                             {
                               value: __spreadProps(__spreadValues({}, ctx), {
                                 areaId: componentId
                               }),
-                              children: /* @__PURE__ */ jsx25(
+                              children: /* @__PURE__ */ jsx24(
                                 DraggableComponent,
                                 {
                                   label,
@@ -2880,12 +2875,12 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
                                   style: {
                                     pointerEvents: userIsDragging && draggingNewComponent ? "all" : void 0
                                   },
-                                  children: /* @__PURE__ */ jsx25("div", { className: getClassName18("renderWrapper"), children: /* @__PURE__ */ jsx25(Render2, __spreadValues({}, defaultedProps)) })
+                                  children: /* @__PURE__ */ jsx24("div", { className: getClassName18("renderWrapper"), children: /* @__PURE__ */ jsx24(Render2, __spreadValues({}, defaultedProps)) })
                                 }
                               )
                             }
                           ),
-                          userIsDragging && /* @__PURE__ */ jsx25(
+                          userIsDragging && /* @__PURE__ */ jsx24(
                             "div",
                             {
                               className: getClassName18("hitbox"),
@@ -2902,7 +2897,7 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
                     );
                   }),
                   provided == null ? void 0 : provided.placeholder,
-                  (snapshot == null ? void 0 : snapshot.isDraggingOver) && /* @__PURE__ */ jsx25(
+                  (snapshot == null ? void 0 : snapshot.isDraggingOver) && /* @__PURE__ */ jsx24(
                     "div",
                     {
                       "data-puck-placeholder": true,
@@ -2934,14 +2929,14 @@ function DropZoneRender({ zone }) {
     zoneCompound = `${areaId}:${zone}`;
     content = setupZone(data, zoneCompound).zones[zoneCompound];
   }
-  return /* @__PURE__ */ jsx25(Fragment11, { children: content.map((item) => {
+  return /* @__PURE__ */ jsx24(Fragment10, { children: content.map((item) => {
     const Component = config.components[item.type];
     if (Component) {
-      return /* @__PURE__ */ jsx25(
+      return /* @__PURE__ */ jsx24(
         DropZoneProvider,
         {
           value: { data, config, areaId: item.props.id },
-          children: /* @__PURE__ */ jsx25(
+          children: /* @__PURE__ */ jsx24(
             Component.render,
             __spreadProps(__spreadValues({}, item.props), {
               puck: { renderDropZone: DropZone }
@@ -2957,9 +2952,9 @@ function DropZoneRender({ zone }) {
 function DropZone(props) {
   const ctx = useContext3(dropZoneContext);
   if ((ctx == null ? void 0 : ctx.mode) === "edit") {
-    return /* @__PURE__ */ jsx25(DropZoneEdit, __spreadValues({}, props));
+    return /* @__PURE__ */ jsx24(DropZoneEdit, __spreadValues({}, props));
   }
-  return /* @__PURE__ */ jsx25(DropZoneRender, __spreadValues({}, props));
+  return /* @__PURE__ */ jsx24(DropZoneRender, __spreadValues({}, props));
 }
 
 // components/Puck/index.tsx
@@ -3107,7 +3102,7 @@ var useBreadcrumbs = (renderCount) => {
 };
 
 // components/SidebarSection/index.tsx
-import { jsx as jsx26, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
 var getClassName19 = get_class_name_factory_default("SidebarSection", styles_module_default13);
 var SidebarSection = ({
   children,
@@ -3126,9 +3121,9 @@ var SidebarSection = ({
       className: getClassName19({ noBorderTop, noPadding }),
       style: { background },
       children: [
-        /* @__PURE__ */ jsx26("div", { className: getClassName19("title"), children: /* @__PURE__ */ jsxs13("div", { className: getClassName19("breadcrumbs"), children: [
+        /* @__PURE__ */ jsx25("div", { className: getClassName19("title"), children: /* @__PURE__ */ jsxs13("div", { className: getClassName19("breadcrumbs"), children: [
           showBreadcrumbs ? breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ jsxs13("div", { className: getClassName19("breadcrumb"), children: [
-            /* @__PURE__ */ jsx26(
+            /* @__PURE__ */ jsx25(
               "button",
               {
                 type: "button",
@@ -3137,12 +3132,12 @@ var SidebarSection = ({
                 children: breadcrumb.label
               }
             ),
-            /* @__PURE__ */ jsx26(ChevronRight, { size: 16 })
+            /* @__PURE__ */ jsx25(ChevronRight, { size: 16 })
           ] }, i)) : null,
-          /* @__PURE__ */ jsx26("div", { className: getClassName19("heading"), children: /* @__PURE__ */ jsx26(Heading, { rank: "2", size: "xs", children: title }) })
+          /* @__PURE__ */ jsx25("div", { className: getClassName19("heading"), children: /* @__PURE__ */ jsx25(Heading, { rank: "2", size: "xs", children: title }) })
         ] }) }),
-        /* @__PURE__ */ jsx26("div", { className: getClassName19("content"), children }),
-        isLoading && /* @__PURE__ */ jsx26("div", { className: getClassName19("loadingOverlay"), children: /* @__PURE__ */ jsx26(Loader, { size: 32 }) })
+        /* @__PURE__ */ jsx25("div", { className: getClassName19("content"), children }),
+        isLoading && /* @__PURE__ */ jsx25("div", { className: getClassName19("loadingOverlay"), children: /* @__PURE__ */ jsx25(Loader, { size: 32 }) })
       ]
     }
   );
@@ -3523,7 +3518,7 @@ init_react_import();
 var styles_module_default14 = { "MenuBar": "_MenuBar_8pf8c_1", "MenuBar--menuOpen": "_MenuBar--menuOpen_8pf8c_14", "MenuBar-inner": "_MenuBar-inner_8pf8c_29", "MenuBar-history": "_MenuBar-history_8pf8c_45" };
 
 // components/MenuBar/index.tsx
-import { Fragment as Fragment12, jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
 var getClassName20 = get_class_name_factory_default("MenuBar", styles_module_default14);
 function MenuBar({
   appState,
@@ -3537,7 +3532,7 @@ function MenuBar({
     history: { back, forward, historyStore }
   } = useAppContext();
   const { hasFuture = false, hasPast = false } = historyStore || {};
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
       className: getClassName20({ menuOpen }),
@@ -3553,10 +3548,10 @@ function MenuBar({
       },
       children: /* @__PURE__ */ jsxs14("div", { className: getClassName20("inner"), children: [
         /* @__PURE__ */ jsxs14("div", { className: getClassName20("history"), children: [
-          /* @__PURE__ */ jsx27(IconButton, { title: "undo", disabled: !hasPast, onClick: back, children: /* @__PURE__ */ jsx27(Undo2, { size: 21 }) }),
-          /* @__PURE__ */ jsx27(IconButton, { title: "redo", disabled: !hasFuture, onClick: forward, children: /* @__PURE__ */ jsx27(Redo2, { size: 21 }) })
+          /* @__PURE__ */ jsx26(IconButton, { title: "undo", disabled: !hasPast, onClick: back, children: /* @__PURE__ */ jsx26(Undo2, { size: 21 }) }),
+          /* @__PURE__ */ jsx26(IconButton, { title: "redo", disabled: !hasFuture, onClick: forward, children: /* @__PURE__ */ jsx26(Redo2, { size: 21 }) })
         ] }),
-        /* @__PURE__ */ jsx27(Fragment12, { children: renderHeaderActions && renderHeaderActions({
+        /* @__PURE__ */ jsx26(Fragment11, { children: renderHeaderActions && renderHeaderActions({
           state: appState,
           dispatch
         }) })
@@ -3578,7 +3573,7 @@ var styles_module_default16 = { "PuckFields": "_PuckFields_jp3lw_1", "PuckFields
 
 // components/Puck/components/Fields/index.tsx
 import { useCallback as useCallback7, useEffect as useEffect13, useMemo as useMemo6, useState as useState15 } from "react";
-import { Fragment as Fragment13, jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
 var getClassName21 = get_class_name_factory_default("PuckFields", styles_module_default16);
 var defaultPageFields = {
   title: { type: "text" }
@@ -3586,7 +3581,7 @@ var defaultPageFields = {
 var DefaultFields = ({
   children
 }) => {
-  return /* @__PURE__ */ jsx28(Fragment13, { children });
+  return /* @__PURE__ */ jsx27(Fragment12, { children });
 };
 var useResolvedFields = () => {
   var _a;
@@ -3673,7 +3668,7 @@ var Fields = () => {
         e.preventDefault();
       },
       children: [
-        /* @__PURE__ */ jsx28(Wrapper, { isLoading, itemSelector, children: Object.keys(fields).map((fieldName) => {
+        /* @__PURE__ */ jsx27(Wrapper, { isLoading, itemSelector, children: Object.keys(fields).map((fieldName) => {
           const field = fields[fieldName];
           if (!(field == null ? void 0 : field.type)) return null;
           const onChange = (value, updatedUi) => {
@@ -3743,7 +3738,7 @@ var Fields = () => {
             const { edit } = getPermissions({
               item: selectedItem
             });
-            return /* @__PURE__ */ jsx28(
+            return /* @__PURE__ */ jsx27(
               AutoFieldPrivate,
               {
                 field,
@@ -3760,7 +3755,7 @@ var Fields = () => {
             const { edit } = getPermissions({
               root: true
             });
-            return /* @__PURE__ */ jsx28(
+            return /* @__PURE__ */ jsx27(
               AutoFieldPrivate,
               {
                 field,
@@ -3774,7 +3769,7 @@ var Fields = () => {
             );
           }
         }) }),
-        isLoading && /* @__PURE__ */ jsx28("div", { className: getClassName21("loadingOverlay"), children: /* @__PURE__ */ jsx28("div", { className: getClassName21("loadingOverlayInner"), children: /* @__PURE__ */ jsx28(Loader, { size: 16 }) }) })
+        isLoading && /* @__PURE__ */ jsx27("div", { className: getClassName21("loadingOverlay"), children: /* @__PURE__ */ jsx27("div", { className: getClassName21("loadingOverlayInner"), children: /* @__PURE__ */ jsx27(Loader, { size: 16 }) }) })
       ]
     }
   );
@@ -3795,7 +3790,7 @@ init_react_import();
 var styles_module_default17 = { "ComponentList": "_ComponentList_odh9d_1", "ComponentList--isExpanded": "_ComponentList--isExpanded_odh9d_5", "ComponentList-content": "_ComponentList-content_odh9d_9", "ComponentList-title": "_ComponentList-title_odh9d_17", "ComponentList-titleIcon": "_ComponentList-titleIcon_odh9d_53" };
 
 // components/ComponentList/index.tsx
-import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
 var getClassName22 = get_class_name_factory_default("ComponentList", styles_module_default17);
 var ComponentListItem = ({
   name,
@@ -3806,7 +3801,7 @@ var ComponentListItem = ({
   const canInsert = getPermissions({
     type: name
   }).insert;
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx28(
     Drawer.Item,
     {
       label,
@@ -3839,14 +3834,14 @@ var ComponentList = ({
         }),
         title: expanded ? `Collapse${title ? ` ${title}` : ""}` : `Expand${title ? ` ${title}` : ""}`,
         children: [
-          /* @__PURE__ */ jsx29("div", { children: title }),
-          /* @__PURE__ */ jsx29("div", { className: getClassName22("titleIcon"), children: expanded ? /* @__PURE__ */ jsx29(ChevronUp, { size: 12 }) : /* @__PURE__ */ jsx29(ChevronDown, { size: 12 }) })
+          /* @__PURE__ */ jsx28("div", { children: title }),
+          /* @__PURE__ */ jsx28("div", { className: getClassName22("titleIcon"), children: expanded ? /* @__PURE__ */ jsx28(ChevronUp, { size: 12 }) : /* @__PURE__ */ jsx28(ChevronDown, { size: 12 }) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx29("div", { className: getClassName22("content"), children: /* @__PURE__ */ jsx29(Drawer, { droppableId: title, children: children || Object.keys(config.components).map((componentKey, i) => {
+    /* @__PURE__ */ jsx28("div", { className: getClassName22("content"), children: /* @__PURE__ */ jsx28(Drawer, { droppableId: title, children: children || Object.keys(config.components).map((componentKey, i) => {
       var _a;
-      return /* @__PURE__ */ jsx29(
+      return /* @__PURE__ */ jsx28(
         ComponentListItem,
         {
           label: (_a = config.components[componentKey]["label"]) != null ? _a : componentKey,
@@ -3861,7 +3856,7 @@ var ComponentList = ({
 ComponentList.Item = ComponentListItem;
 
 // lib/use-component-list.tsx
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var useComponentList = (config, ui) => {
   const [componentList, setComponentList] = useState16();
   useEffect14(() => {
@@ -3874,7 +3869,7 @@ var useComponentList = (config, ui) => {
           if (category.visible === false || !category.components) {
             return null;
           }
-          return /* @__PURE__ */ jsx30(
+          return /* @__PURE__ */ jsx29(
             ComponentList,
             {
               id: categoryKey,
@@ -3883,7 +3878,7 @@ var useComponentList = (config, ui) => {
                 var _a2;
                 matchedComponents.push(componentName);
                 const componentConf = config.components[componentName] || {};
-                return /* @__PURE__ */ jsx30(
+                return /* @__PURE__ */ jsx29(
                   ComponentList.Item,
                   {
                     label: (_a2 = componentConf["label"]) != null ? _a2 : componentName,
@@ -3903,7 +3898,7 @@ var useComponentList = (config, ui) => {
       );
       if (remainingComponents.length > 0 && !((_a = ui.componentList.other) == null ? void 0 : _a.components) && ((_b = ui.componentList.other) == null ? void 0 : _b.visible) !== false) {
         _componentList.push(
-          /* @__PURE__ */ jsx30(
+          /* @__PURE__ */ jsx29(
             ComponentList,
             {
               id: "other",
@@ -3911,7 +3906,7 @@ var useComponentList = (config, ui) => {
               children: remainingComponents.map((componentName, i) => {
                 var _a2;
                 const componentConf = config.components[componentName] || {};
-                return /* @__PURE__ */ jsx30(
+                return /* @__PURE__ */ jsx29(
                   ComponentList.Item,
                   {
                     name: componentName,
@@ -3934,12 +3929,12 @@ var useComponentList = (config, ui) => {
 
 // components/Puck/components/Components/index.tsx
 import { useMemo as useMemo7 } from "react";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var Components = () => {
   const { config, state, overrides } = useAppContext();
   const componentList = useComponentList(config, state.ui);
   const Wrapper = useMemo7(() => overrides.components || "div", [overrides]);
-  return /* @__PURE__ */ jsx31(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ jsx31(ComponentList, { id: "all" }) });
+  return /* @__PURE__ */ jsx30(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ jsx30(ComponentList, { id: "all" }) });
 };
 
 // components/Puck/components/Preview/index.tsx
@@ -3957,7 +3952,7 @@ import {
 } from "react";
 import hash from "object-hash";
 import { createPortal as createPortal2 } from "react-dom";
-import { Fragment as Fragment14, jsx as jsx32 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx31 } from "react/jsx-runtime";
 var styleSelector = 'style, link[rel="stylesheet"]';
 var collectStyles = (doc) => {
   const collected = [];
@@ -4157,7 +4152,7 @@ var CopyHostStyles = ({
       observer.disconnect();
     };
   }, []);
-  return /* @__PURE__ */ jsx32(Fragment14, { children });
+  return /* @__PURE__ */ jsx31(Fragment13, { children });
 };
 var autoFrameContext = createContext4({});
 var useFrame = () => useContext5(autoFrameContext);
@@ -4189,7 +4184,7 @@ function AutoFrame(_a) {
       setMountTarget((_a2 = ref.current.contentDocument) == null ? void 0 : _a2.getElementById("frame-root"));
     }
   }, [ref, loaded]);
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx31(
     "iframe",
     __spreadProps(__spreadValues({}, props), {
       className,
@@ -4199,7 +4194,7 @@ function AutoFrame(_a) {
       onLoad: () => {
         setLoaded(true);
       },
-      children: /* @__PURE__ */ jsx32(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ jsx32(CopyHostStyles, { debug, onStylesLoaded, children: createPortal2(children, mountTarget) }) })
+      children: /* @__PURE__ */ jsx31(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ jsx31(CopyHostStyles, { debug, onStylesLoaded, children: createPortal2(children, mountTarget) }) })
     })
   );
 }
@@ -4211,7 +4206,7 @@ init_react_import();
 var styles_module_default18 = { "PuckPreview": "_PuckPreview_rxwlr_1", "PuckPreview-frame": "_PuckPreview-frame_rxwlr_5" };
 
 // components/Puck/components/Preview/index.tsx
-import { Fragment as Fragment15, jsx as jsx33 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx32 } from "react/jsx-runtime";
 var getClassName23 = get_class_name_factory_default("PuckPreview", styles_module_default18);
 var Preview = ({ id = "puck-preview" }) => {
   const { config, dispatch, state, setStatus, iframe, overrides } = useAppContext();
@@ -4220,13 +4215,13 @@ var Preview = ({ id = "puck-preview" }) => {
       var _a, _b;
       return ((_a = config.root) == null ? void 0 : _a.render) ? (_b = config.root) == null ? void 0 : _b.render(__spreadValues({
         id: "puck-root"
-      }, pageProps)) : /* @__PURE__ */ jsx33(Fragment15, { children: pageProps.children });
+      }, pageProps)) : /* @__PURE__ */ jsx32(Fragment14, { children: pageProps.children });
     },
     [config.root]
   );
   const Frame = useMemo8(() => overrides.iframe, [overrides]);
   const rootProps = state.data.root.props || state.data.root;
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx32(
     "div",
     {
       className: getClassName23(),
@@ -4234,7 +4229,7 @@ var Preview = ({ id = "puck-preview" }) => {
       onClick: () => {
         dispatch({ type: "setUi", ui: __spreadProps(__spreadValues({}, state.ui), { itemSelector: null }) });
       },
-      children: iframe.enabled ? /* @__PURE__ */ jsx33(
+      children: iframe.enabled ? /* @__PURE__ */ jsx32(
         AutoFrame_default,
         {
           id: "preview-frame",
@@ -4243,27 +4238,27 @@ var Preview = ({ id = "puck-preview" }) => {
           onStylesLoaded: () => {
             setStatus("READY");
           },
-          children: /* @__PURE__ */ jsx33(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
-            const inner = /* @__PURE__ */ jsx33(
+          children: /* @__PURE__ */ jsx32(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
+            const inner = /* @__PURE__ */ jsx32(
               Page,
               __spreadProps(__spreadValues({}, rootProps), {
                 puck: { renderDropZone: DropZone, isEditing: true },
                 editMode: true,
-                children: /* @__PURE__ */ jsx33(DropZone, { zone: rootDroppableId })
+                children: /* @__PURE__ */ jsx32(DropZone, { zone: rootDroppableId })
               })
             );
             if (Frame) {
-              return /* @__PURE__ */ jsx33(Frame, { document: document2, children: inner });
+              return /* @__PURE__ */ jsx32(Frame, { document: document2, children: inner });
             }
             return inner;
           } })
         }
-      ) : /* @__PURE__ */ jsx33("div", { id: "preview-frame", className: getClassName23("frame"), children: /* @__PURE__ */ jsx33(
+      ) : /* @__PURE__ */ jsx32("div", { id: "preview-frame", className: getClassName23("frame"), children: /* @__PURE__ */ jsx32(
         Page,
         __spreadProps(__spreadValues({}, rootProps), {
           puck: { renderDropZone: DropZone, isEditing: true },
           editMode: true,
-          children: /* @__PURE__ */ jsx33(DropZone, { zone: rootDroppableId })
+          children: /* @__PURE__ */ jsx32(DropZone, { zone: rootDroppableId })
         })
       ) })
     }
@@ -4327,7 +4322,7 @@ var isChildOfZone = (item, maybeChild, ctx) => {
 };
 
 // components/LayerTree/index.tsx
-import { Fragment as Fragment16, jsx as jsx34, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx33, jsxs as jsxs17 } from "react/jsx-runtime";
 var getClassName24 = get_class_name_factory_default("LayerTree", styles_module_default19);
 var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default19);
 var LayerTree = ({
@@ -4341,14 +4336,14 @@ var LayerTree = ({
 }) => {
   const zones = data.zones || {};
   const ctx = useContext6(dropZoneContext);
-  return /* @__PURE__ */ jsxs17(Fragment16, { children: [
+  return /* @__PURE__ */ jsxs17(Fragment15, { children: [
     label && /* @__PURE__ */ jsxs17("div", { className: getClassName24("zoneTitle"), children: [
-      /* @__PURE__ */ jsx34("div", { className: getClassName24("zoneIcon"), children: /* @__PURE__ */ jsx34(Layers, { size: "16" }) }),
+      /* @__PURE__ */ jsx33("div", { className: getClassName24("zoneIcon"), children: /* @__PURE__ */ jsx33(Layers, { size: "16" }) }),
       " ",
       label
     ] }),
     /* @__PURE__ */ jsxs17("ul", { className: getClassName24(), children: [
-      zoneContent.length === 0 && /* @__PURE__ */ jsx34("div", { className: getClassName24("helper"), children: "No items" }),
+      zoneContent.length === 0 && /* @__PURE__ */ jsx33("div", { className: getClassName24("helper"), children: "No items" }),
       zoneContent.map((item, i) => {
         var _a;
         const isSelected = (itemSelector == null ? void 0 : itemSelector.index) === i && (itemSelector.zone === zone || itemSelector.zone === rootDroppableId && !zone);
@@ -4376,7 +4371,7 @@ var LayerTree = ({
               childIsSelected
             }),
             children: [
-              /* @__PURE__ */ jsx34("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs17(
+              /* @__PURE__ */ jsx33("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs17(
                 "button",
                 {
                   type: "button",
@@ -4409,22 +4404,22 @@ var LayerTree = ({
                     setHoveringComponent(null);
                   },
                   children: [
-                    containsZone && /* @__PURE__ */ jsx34(
+                    containsZone && /* @__PURE__ */ jsx33(
                       "div",
                       {
                         className: getClassNameLayer("chevron"),
                         title: isSelected ? "Collapse" : "Expand",
-                        children: /* @__PURE__ */ jsx34(ChevronDown, { size: "12" })
+                        children: /* @__PURE__ */ jsx33(ChevronDown, { size: "12" })
                       }
                     ),
                     /* @__PURE__ */ jsxs17("div", { className: getClassNameLayer("title"), children: [
-                      /* @__PURE__ */ jsx34("div", { className: getClassNameLayer("icon"), children: item.type === "Text" || item.type === "Heading" ? /* @__PURE__ */ jsx34(Type, { size: "16" }) : /* @__PURE__ */ jsx34(LayoutGrid, { size: "16" }) }),
-                      /* @__PURE__ */ jsx34("div", { className: getClassNameLayer("name"), children: label2 })
+                      /* @__PURE__ */ jsx33("div", { className: getClassNameLayer("icon"), children: item.type === "Text" || item.type === "Heading" ? /* @__PURE__ */ jsx33(Type, { size: "16" }) : /* @__PURE__ */ jsx33(LayoutGrid, { size: "16" }) }),
+                      /* @__PURE__ */ jsx33("div", { className: getClassNameLayer("name"), children: label2 })
                     ] })
                   ]
                 }
               ) }),
-              containsZone && Object.keys(zonesForItem).map((zoneKey, idx) => /* @__PURE__ */ jsx34("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ jsx34(
+              containsZone && Object.keys(zonesForItem).map((zoneKey, idx) => /* @__PURE__ */ jsx33("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ jsx33(
                 LayerTree,
                 {
                   config,
@@ -4447,7 +4442,7 @@ var LayerTree = ({
 
 // components/Puck/components/Outline/index.tsx
 import { useCallback as useCallback9, useMemo as useMemo9 } from "react";
-import { Fragment as Fragment17, jsx as jsx35, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx34, jsxs as jsxs18 } from "react/jsx-runtime";
 var Outline = () => {
   const { dispatch, state, overrides, config } = useAppContext();
   const { data, ui } = state;
@@ -4462,8 +4457,8 @@ var Outline = () => {
     []
   );
   const Wrapper = useMemo9(() => overrides.outline || "div", [overrides]);
-  return /* @__PURE__ */ jsx35(Wrapper, { children: /* @__PURE__ */ jsx35(dropZoneContext.Consumer, { children: (ctx) => /* @__PURE__ */ jsxs18(Fragment17, { children: [
-    (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx34(Wrapper, { children: /* @__PURE__ */ jsx34(dropZoneContext.Consumer, { children: (ctx) => /* @__PURE__ */ jsxs18(Fragment16, { children: [
+    (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ jsx34(
       LayerTree,
       {
         config,
@@ -4476,7 +4471,7 @@ var Outline = () => {
     ),
     Object.entries(findZonesForArea(data, "root")).map(
       ([zoneKey, zone]) => {
-        return /* @__PURE__ */ jsx35(
+        return /* @__PURE__ */ jsx34(
           LayerTree,
           {
             config,
@@ -4739,11 +4734,11 @@ init_react_import();
 var styles_module_default20 = { "ViewportControls": "_ViewportControls_g1wgg_1", "ViewportControls-divider": "_ViewportControls-divider_g1wgg_15", "ViewportControls-zoomSelect": "_ViewportControls-zoomSelect_g1wgg_21", "ViewportButton--isActive": "_ViewportButton--isActive_g1wgg_34", "ViewportButton-inner": "_ViewportButton-inner_g1wgg_34" };
 
 // components/ViewportControls/index.tsx
-import { jsx as jsx36, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs19 } from "react/jsx-runtime";
 var icons = {
-  Smartphone: /* @__PURE__ */ jsx36(Smartphone, { size: 16 }),
-  Tablet: /* @__PURE__ */ jsx36(Tablet, { size: 16 }),
-  Monitor: /* @__PURE__ */ jsx36(Monitor, { size: 16 })
+  Smartphone: /* @__PURE__ */ jsx35(Smartphone, { size: 16 }),
+  Tablet: /* @__PURE__ */ jsx35(Tablet, { size: 16 }),
+  Monitor: /* @__PURE__ */ jsx35(Monitor, { size: 16 })
 };
 var getClassName25 = get_class_name_factory_default("ViewportControls", styles_module_default20);
 var getClassNameButton = get_class_name_factory_default("ViewportButton", styles_module_default20);
@@ -4759,7 +4754,7 @@ var ViewportButton = ({
   useEffect16(() => {
     setIsActive(width === state.ui.viewports.current.width);
   }, [width, state.ui.viewports.current.width]);
-  return /* @__PURE__ */ jsx36("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx35("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ jsx35(
     IconButton,
     {
       title,
@@ -4768,7 +4763,7 @@ var ViewportButton = ({
         e.stopPropagation();
         onClick({ width, height });
       },
-      children: /* @__PURE__ */ jsx36("span", { className: getClassNameButton("inner"), children })
+      children: /* @__PURE__ */ jsx35("span", { className: getClassNameButton("inner"), children })
     }
   ) });
 };
@@ -4805,7 +4800,7 @@ var ViewportControls = ({
     [autoZoom]
   );
   return /* @__PURE__ */ jsxs19("div", { className: getClassName25(), children: [
-    viewports.map((viewport, i) => /* @__PURE__ */ jsx36(
+    viewports.map((viewport, i) => /* @__PURE__ */ jsx35(
       ViewportButton,
       {
         height: viewport.height,
@@ -4816,8 +4811,8 @@ var ViewportControls = ({
       },
       i
     )),
-    /* @__PURE__ */ jsx36("div", { className: getClassName25("divider") }),
-    /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx35("div", { className: getClassName25("divider") }),
+    /* @__PURE__ */ jsx35(
       IconButton,
       {
         title: "Zoom viewport out",
@@ -4831,10 +4826,10 @@ var ViewportControls = ({
             )].value
           );
         },
-        children: /* @__PURE__ */ jsx36(ZoomOut, { size: 16 })
+        children: /* @__PURE__ */ jsx35(ZoomOut, { size: 16 })
       }
     ),
-    /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx35(
       IconButton,
       {
         title: "Zoom viewport in",
@@ -4848,11 +4843,11 @@ var ViewportControls = ({
             )].value
           );
         },
-        children: /* @__PURE__ */ jsx36(ZoomIn, { size: 16 })
+        children: /* @__PURE__ */ jsx35(ZoomIn, { size: 16 })
       }
     ),
-    /* @__PURE__ */ jsx36("div", { className: getClassName25("divider") }),
-    /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx35("div", { className: getClassName25("divider") }),
+    /* @__PURE__ */ jsx35(
       "select",
       {
         className: getClassName25("zoomSelect"),
@@ -4860,7 +4855,7 @@ var ViewportControls = ({
         onChange: (e) => {
           onZoom(parseFloat(e.currentTarget.value));
         },
-        children: zoomOptions.map((option) => /* @__PURE__ */ jsx36(
+        children: zoomOptions.map((option) => /* @__PURE__ */ jsx35(
           "option",
           {
             value: option.value,
@@ -4908,7 +4903,7 @@ var getZoomConfig = (uiViewport, frame, zoom) => {
 };
 
 // components/Puck/components/Canvas/index.tsx
-import { Fragment as Fragment18, jsx as jsx37, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx36, jsxs as jsxs20 } from "react/jsx-runtime";
 var getClassName26 = get_class_name_factory_default("PuckCanvas", styles_module_default21);
 var ZOOM_ON_CHANGE = true;
 var Canvas = () => {
@@ -4918,7 +4913,7 @@ var Canvas = () => {
   const frameRef = useRef3(null);
   const [showTransition, setShowTransition] = useState20(false);
   const defaultRender = useMemo11(() => {
-    const PuckDefault = ({ children }) => /* @__PURE__ */ jsx37(Fragment18, { children });
+    const PuckDefault = ({ children }) => /* @__PURE__ */ jsx36(Fragment17, { children });
     return PuckDefault;
   }, []);
   const CustomPreview = useMemo11(
@@ -4992,7 +4987,7 @@ var Canvas = () => {
         recordHistory: true
       }),
       children: [
-        ui.viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ jsx37("div", { className: getClassName26("controls"), children: /* @__PURE__ */ jsx37(
+        ui.viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ jsx36("div", { className: getClassName26("controls"), children: /* @__PURE__ */ jsx36(
           ViewportControls,
           {
             autoZoom: zoomConfig.autoZoom,
@@ -5018,7 +5013,7 @@ var Canvas = () => {
           }
         ) }),
         /* @__PURE__ */ jsxs20("div", { className: getClassName26("inner"), ref: frameRef, children: [
-          /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsx36(
             "div",
             {
               className: getClassName26("root"),
@@ -5030,10 +5025,10 @@ var Canvas = () => {
                 overflow: iframe.enabled ? void 0 : "auto"
               },
               suppressHydrationWarning: true,
-              children: /* @__PURE__ */ jsx37(CustomPreview, { children: /* @__PURE__ */ jsx37(Preview, {}) })
+              children: /* @__PURE__ */ jsx36(CustomPreview, { children: /* @__PURE__ */ jsx36(Preview, {}) })
             }
           ),
-          /* @__PURE__ */ jsx37("div", { className: getClassName26("loader"), children: /* @__PURE__ */ jsx37(Loader, { size: 24 }) })
+          /* @__PURE__ */ jsx36("div", { className: getClassName26("loader"), children: /* @__PURE__ */ jsx36(Loader, { size: 24 }) })
         ] })
       ]
     }
@@ -5121,6 +5116,11 @@ var useLoadedOverrides = ({
   }, [plugins, overrides]);
 };
 
+// components/DefaultOverride/index.tsx
+init_react_import();
+import { Fragment as Fragment18, jsx as jsx37 } from "react/jsx-runtime";
+var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx37(Fragment18, { children });
+
 // components/Puck/index.tsx
 import { Fragment as Fragment19, jsx as jsx38, jsxs as jsxs21 } from "react/jsx-runtime";
 var getClassName27 = get_class_name_factory_default("Puck", styles_module_default15);