@measured/puck 0.17.0-canary.35170f8 → 0.17.0-canary.361e5f9

package/dist/index.js

@@ -99,35 +99,45 @@ var require_classnames = __commonJS({
     (function() {
       "use strict";
       var hasOwn = {}.hasOwnProperty;
-      var nativeCodeString = "[native code]";
       function classNames() {
-        var classes = [];
+        var classes = "";
         for (var i = 0; i < arguments.length; i++) {
           var arg = arguments[i];
-          if (!arg) continue;
-          var argType = typeof arg;
-          if (argType === "string" || argType === "number") {
-            classes.push(arg);
-          } else if (Array.isArray(arg)) {
-            if (arg.length) {
-              var inner = classNames.apply(null, arg);
-              if (inner) {
-                classes.push(inner);
-              }
-            }
-          } else if (argType === "object") {
-            if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
-              classes.push(arg.toString());
-              continue;
-            }
-            for (var key in arg) {
-              if (hasOwn.call(arg, key) && arg[key]) {
-                classes.push(key);
-              }
-            }
+          if (arg) {
+            classes = appendClass(classes, parseValue(arg));
           }
         }
-        return classes.join(" ");
+        return classes;
+      }
+      function parseValue(arg) {
+        if (typeof arg === "string" || typeof arg === "number") {
+          return arg;
+        }
+        if (typeof arg !== "object") {
+          return "";
+        }
+        if (Array.isArray(arg)) {
+          return classNames.apply(null, arg);
+        }
+        if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
+          return arg.toString();
+        }
+        var classes = "";
+        for (var key in arg) {
+          if (hasOwn.call(arg, key) && arg[key]) {
+            classes = appendClass(classes, key);
+          }
+        }
+        return classes;
+      }
+      function appendClass(value, newClass) {
+        if (!newClass) {
+          return value;
+        }
+        if (value) {
+          return value + " " + newClass;
+        }
+        return value + newClass;
       }
       if (typeof module2 !== "undefined" && module2.exports) {
         classNames.default = classNames;
@@ -279,7 +289,7 @@ init_react_import();
 var styles_module_default2 = { "InputWrapper": "_InputWrapper_1l5m8_1", "Input": "_Input_1l5m8_1", "Input-label": "_Input-label_1l5m8_26", "Input-labelIcon": "_Input-labelIcon_1l5m8_35", "Input-disabledIcon": "_Input-disabledIcon_1l5m8_42", "Input-input": "_Input-input_1l5m8_47", "Input--readOnly": "_Input--readOnly_1l5m8_91", "Input-radioGroupItems": "_Input-radioGroupItems_1l5m8_102", "Input-radio": "_Input-radio_1l5m8_102", "Input-radioInner": "_Input-radioInner_1l5m8_119", "Input-radioInput": "_Input-radioInput_1l5m8_164" };
 
 // components/AutoField/index.tsx
-var import_react13 = require("react");
+var import_react16 = require("react");
 
 // components/AutoField/fields/index.tsx
 init_react_import();
@@ -296,6 +306,17 @@ init_react_import();
 
 // ../../node_modules/lucide-react/dist/esm/createLucideIcon.js
 init_react_import();
+var import_react3 = require("react");
+
+// ../../node_modules/lucide-react/dist/esm/shared/src/utils.js
+init_react_import();
+var toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+var mergeClasses = (...classes) => classes.filter((className, index, array) => {
+  return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
+}).join(" ").trim();
+
+// ../../node_modules/lucide-react/dist/esm/Icon.js
+init_react_import();
 var import_react2 = require("react");
 
 // ../../node_modules/lucide-react/dist/esm/defaultAttributes.js
@@ -312,41 +333,61 @@ var defaultAttributes = {
   strokeLinejoin: "round"
 };
 
+// ../../node_modules/lucide-react/dist/esm/Icon.js
+var Icon = (0, import_react2.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      color = "currentColor",
+      size = 24,
+      strokeWidth = 2,
+      absoluteStrokeWidth,
+      className = "",
+      children,
+      iconNode
+    } = _b, rest = __objRest(_b, [
+      "color",
+      "size",
+      "strokeWidth",
+      "absoluteStrokeWidth",
+      "className",
+      "children",
+      "iconNode"
+    ]);
+    return (0, import_react2.createElement)(
+      "svg",
+      __spreadValues(__spreadProps(__spreadValues({
+        ref
+      }, defaultAttributes), {
+        width: size,
+        height: size,
+        stroke: color,
+        strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
+        className: mergeClasses("lucide", className)
+      }), rest),
+      [
+        ...iconNode.map(([tag, attrs]) => (0, import_react2.createElement)(tag, attrs)),
+        ...Array.isArray(children) ? children : [children]
+      ]
+    );
+  }
+);
+
 // ../../node_modules/lucide-react/dist/esm/createLucideIcon.js
-var toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase().trim();
 var createLucideIcon = (iconName, iconNode) => {
-  const Component = (0, import_react2.forwardRef)(
+  const Component = (0, import_react3.forwardRef)(
     (_a, ref) => {
-      var _b = _a, { color = "currentColor", size = 24, strokeWidth = 2, absoluteStrokeWidth, className = "", children } = _b, rest = __objRest(_b, ["color", "size", "strokeWidth", "absoluteStrokeWidth", "className", "children"]);
-      return (0, import_react2.createElement)(
-        "svg",
-        __spreadValues(__spreadProps(__spreadValues({
-          ref
-        }, defaultAttributes), {
-          width: size,
-          height: size,
-          stroke: color,
-          strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
-          className: ["lucide", `lucide-${toKebabCase(iconName)}`, className].join(" ")
-        }), rest),
-        [
-          ...iconNode.map(([tag, attrs]) => (0, import_react2.createElement)(tag, attrs)),
-          ...Array.isArray(children) ? children : [children]
-        ]
-      );
+      var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+      return (0, import_react3.createElement)(Icon, __spreadValues({
+        ref,
+        iconNode,
+        className: mergeClasses(`lucide-${toKebabCase(iconName)}`, className)
+      }, props));
     }
   );
   Component.displayName = `${iconName}`;
   return Component;
 };
 
-// ../../node_modules/lucide-react/dist/esm/icons/check-circle.js
-init_react_import();
-var CheckCircle = createLucideIcon("CheckCircle", [
-  ["path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14", key: "g774vq" }],
-  ["path", { d: "m9 11 3 3L22 4", key: "1pflzl" }]
-]);
-
 // ../../node_modules/lucide-react/dist/esm/icons/chevron-down.js
 init_react_import();
 var ChevronDown = createLucideIcon("ChevronDown", [
@@ -363,6 +404,13 @@ var ChevronRight = createLucideIcon("ChevronRight", [
 init_react_import();
 var ChevronUp = createLucideIcon("ChevronUp", [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]]);
 
+// ../../node_modules/lucide-react/dist/esm/icons/circle-check-big.js
+init_react_import();
+var CircleCheckBig = createLucideIcon("CircleCheckBig", [
+  ["path", { d: "M21.801 10A10 10 0 1 1 17 3.335", key: "yps3ct" }],
+  ["path", { d: "m9 11 3 3L22 4", key: "1pflzl" }]
+]);
+
 // ../../node_modules/lucide-react/dist/esm/icons/copy.js
 init_react_import();
 var Copy = createLucideIcon("Copy", [
@@ -370,6 +418,14 @@ var Copy = createLucideIcon("Copy", [
   ["path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2", key: "zix9uf" }]
 ]);
 
+// ../../node_modules/lucide-react/dist/esm/icons/ellipsis-vertical.js
+init_react_import();
+var EllipsisVertical = createLucideIcon("EllipsisVertical", [
+  ["circle", { cx: "12", cy: "12", r: "1", key: "41hilf" }],
+  ["circle", { cx: "12", cy: "5", r: "1", key: "gxeob9" }],
+  ["circle", { cx: "12", cy: "19", r: "1", key: "lyex9k" }]
+]);
+
 // ../../node_modules/lucide-react/dist/esm/icons/globe.js
 init_react_import();
 var Globe = createLucideIcon("Globe", [
@@ -393,12 +449,24 @@ var Layers = createLucideIcon("Layers", [
   [
     "path",
     {
-      d: "m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z",
-      key: "8b97xw"
+      d: "M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z",
+      key: "zw3jo"
+    }
+  ],
+  [
+    "path",
+    {
+      d: "M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12",
+      key: "1wduqc"
     }
   ],
-  ["path", { d: "m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65", key: "dd6zsq" }],
-  ["path", { d: "m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65", key: "ep9fru" }]
+  [
+    "path",
+    {
+      d: "M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17",
+      key: "kqbvx6"
+    }
+  ]
 ]);
 
 // ../../node_modules/lucide-react/dist/esm/icons/layout-grid.js
@@ -420,12 +488,19 @@ var Link = createLucideIcon("Link", [
 // ../../node_modules/lucide-react/dist/esm/icons/list.js
 init_react_import();
 var List = createLucideIcon("List", [
-  ["line", { x1: "8", x2: "21", y1: "6", y2: "6", key: "7ey8pc" }],
-  ["line", { x1: "8", x2: "21", y1: "12", y2: "12", key: "rjfblc" }],
-  ["line", { x1: "8", x2: "21", y1: "18", y2: "18", key: "c3b1m8" }],
-  ["line", { x1: "3", x2: "3.01", y1: "6", y2: "6", key: "1g7gq3" }],
-  ["line", { x1: "3", x2: "3.01", y1: "12", y2: "12", key: "1pjlvk" }],
-  ["line", { x1: "3", x2: "3.01", y1: "18", y2: "18", key: "28t2mc" }]
+  ["path", { d: "M3 12h.01", key: "nlz23k" }],
+  ["path", { d: "M3 18h.01", key: "1tta3j" }],
+  ["path", { d: "M3 6h.01", key: "1rqtza" }],
+  ["path", { d: "M8 12h13", key: "1za7za" }],
+  ["path", { d: "M8 18h13", key: "1lx6n3" }],
+  ["path", { d: "M8 6h13", key: "ik3vkj" }]
+]);
+
+// ../../node_modules/lucide-react/dist/esm/icons/lock-open.js
+init_react_import();
+var LockOpen = createLucideIcon("LockOpen", [
+  ["rect", { width: "18", height: "11", x: "3", y: "11", rx: "2", ry: "2", key: "1w4ew1" }],
+  ["path", { d: "M7 11V7a5 5 0 0 1 9.9-1", key: "1mm8w8" }]
 ]);
 
 // ../../node_modules/lucide-react/dist/esm/icons/lock.js
@@ -443,26 +518,18 @@ var Monitor = createLucideIcon("Monitor", [
   ["line", { x1: "12", x2: "12", y1: "17", y2: "21", key: "vw1qmm" }]
 ]);
 
-// ../../node_modules/lucide-react/dist/esm/icons/more-vertical.js
-init_react_import();
-var MoreVertical = createLucideIcon("MoreVertical", [
-  ["circle", { cx: "12", cy: "12", r: "1", key: "41hilf" }],
-  ["circle", { cx: "12", cy: "5", r: "1", key: "gxeob9" }],
-  ["circle", { cx: "12", cy: "19", r: "1", key: "lyex9k" }]
-]);
-
 // ../../node_modules/lucide-react/dist/esm/icons/panel-left.js
 init_react_import();
 var PanelLeft = createLucideIcon("PanelLeft", [
-  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2", key: "1m3agn" }],
-  ["line", { x1: "9", x2: "9", y1: "3", y2: "21", key: "13tij5" }]
+  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
+  ["path", { d: "M9 3v18", key: "fh3hqa" }]
 ]);
 
 // ../../node_modules/lucide-react/dist/esm/icons/panel-right.js
 init_react_import();
 var PanelRight = createLucideIcon("PanelRight", [
-  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2", key: "1m3agn" }],
-  ["line", { x1: "15", x2: "15", y1: "3", y2: "21", key: "1hpv9i" }]
+  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
+  ["path", { d: "M15 3v18", key: "14nvp0" }]
 ]);
 
 // ../../node_modules/lucide-react/dist/esm/icons/plus.js
@@ -476,7 +543,7 @@ var Plus = createLucideIcon("Plus", [
 init_react_import();
 var Redo2 = createLucideIcon("Redo2", [
   ["path", { d: "m15 14 5-5-5-5", key: "12vg1m" }],
-  ["path", { d: "M20 9H9.5A5.5 5.5 0 0 0 4 14.5v0A5.5 5.5 0 0 0 9.5 20H13", key: "19mnr4" }]
+  ["path", { d: "M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13", key: "6uklza" }]
 ]);
 
 // ../../node_modules/lucide-react/dist/esm/icons/search.js
@@ -534,14 +601,7 @@ var Type = createLucideIcon("Type", [
 init_react_import();
 var Undo2 = createLucideIcon("Undo2", [
   ["path", { d: "M9 14 4 9l5-5", key: "102s5s" }],
-  ["path", { d: "M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5v0a5.5 5.5 0 0 1-5.5 5.5H11", key: "llx8ln" }]
-]);
-
-// ../../node_modules/lucide-react/dist/esm/icons/unlock.js
-init_react_import();
-var Unlock = createLucideIcon("Unlock", [
-  ["rect", { width: "18", height: "11", x: "3", y: "11", rx: "2", ry: "2", key: "1w4ew1" }],
-  ["path", { d: "M7 11V7a5 5 0 0 1 9.9-1", key: "1mm8w8" }]
+  ["path", { d: "M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11", key: "f3b9sd" }]
 ]);
 
 // ../../node_modules/lucide-react/dist/esm/icons/zoom-in.js
@@ -566,7 +626,7 @@ init_react_import();
 
 // components/IconButton/IconButton.tsx
 init_react_import();
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/IconButton/IconButton.module.css#css-module
 init_react_import();
@@ -643,7 +703,7 @@ var IconButton = ({
   fullWidth,
   title
 }) => {
-  const [loading, setLoading] = (0, import_react3.useState)(false);
+  const [loading, setLoading] = (0, import_react4.useState)(false);
   const ElementType = href ? "a" : "button";
   const el = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     ElementType,
@@ -687,7 +747,7 @@ var import_dnd = require("@measured/dnd");
 
 // components/Puck/context.tsx
 init_react_import();
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // lib/get-item.ts
 init_react_import();
@@ -732,7 +792,7 @@ var import_ua_parser_js = require("ua-parser-js");
 
 // lib/use-resolved-permissions.ts
 init_react_import();
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // lib/flatten-data.ts
 init_react_import();
@@ -757,9 +817,9 @@ var getChanged = (newItem, oldItem) => {
 
 // lib/use-resolved-permissions.ts
 var useResolvedPermissions = (config, appState, globalPermissions, setComponentLoading, unsetComponentLoading) => {
-  const [cache3, setCache] = (0, import_react4.useState)({});
-  const [resolvedPermissions, setResolvedPermissions] = (0, import_react4.useState)({});
-  const resolveDataForItem = (0, import_react4.useCallback)(
+  const [cache3, setCache] = (0, import_react5.useState)({});
+  const [resolvedPermissions, setResolvedPermissions] = (0, import_react5.useState)({});
+  const resolveDataForItem = (0, import_react5.useCallback)(
     (item, force = false) => __async(void 0, null, function* () {
       var _a, _b, _c;
       const componentConfig = item.type === "root" ? config.root : config.components[item.type];
@@ -806,7 +866,7 @@ var useResolvedPermissions = (config, appState, globalPermissions, setComponentL
       force
     );
   };
-  const resolvePermissions = (0, import_react4.useCallback)(
+  const resolvePermissions = (0, import_react5.useCallback)(
     (..._0) => __async(void 0, [..._0], function* ({ item, type, root } = {}, force = false) {
       if (item) {
         yield resolveDataForItem(item, force);
@@ -825,16 +885,16 @@ var useResolvedPermissions = (config, appState, globalPermissions, setComponentL
     }),
     [config, appState]
   );
-  const refreshPermissions = (0, import_react4.useCallback)(
+  const refreshPermissions = (0, import_react5.useCallback)(
     (params) => __async(void 0, null, function* () {
       resolvePermissions(params, true);
     }),
     [config, appState]
   );
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     resolvePermissions();
   }, [config, appState.data]);
-  const getPermissions = (0, import_react4.useCallback)(
+  const getPermissions = (0, import_react5.useCallback)(
     ({ item, type, root } = {}) => {
       if (item) {
         const componentConfig = config.components[item.type];
@@ -862,7 +922,7 @@ var useResolvedPermissions = (config, appState, globalPermissions, setComponentL
 
 // lib/use-resolved-data.ts
 init_react_import();
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // lib/resolve-component-data.ts
 init_react_import();
@@ -959,12 +1019,12 @@ function resolveRootData(data, config) {
 
 // lib/use-resolved-data.ts
 var useResolvedData = (appState, config, dispatch, setComponentLoading, unsetComponentLoading, refreshPermissions) => {
-  const [{ resolverKey, newAppState }, setResolverState] = (0, import_react5.useState)({
+  const [{ resolverKey, newAppState }, setResolverState] = (0, import_react6.useState)({
     resolverKey: 0,
     newAppState: appState
   });
   const deferredSetStates = {};
-  const _setComponentLoading = (0, import_react5.useCallback)(
+  const _setComponentLoading = (0, import_react6.useCallback)(
     (id, loading, defer2 = 0) => {
       if (deferredSetStates[id]) {
         clearTimeout(deferredSetStates[id]);
@@ -1039,10 +1099,10 @@ var useResolvedData = (appState, config, dispatch, setComponentLoading, unsetCom
     });
     yield Promise.all(promises);
   });
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     runResolvers();
   }, [resolverKey]);
-  const resolveData = (0, import_react5.useCallback)((newAppState2 = appState) => {
+  const resolveData = (0, import_react6.useCallback)((newAppState2 = appState) => {
     setResolverState((curr) => ({
       resolverKey: curr.resolverKey + 1,
       newAppState: newAppState2
@@ -1102,18 +1162,18 @@ var defaultContext = {
   getPermissions: () => ({}),
   refreshPermissions: () => null
 };
-var appContext = (0, import_react6.createContext)(defaultContext);
+var appContext = (0, import_react7.createContext)(defaultContext);
 var AppProvider = ({
   children,
   value
 }) => {
-  const [zoomConfig, setZoomConfig] = (0, import_react6.useState)(defaultContext.zoomConfig);
-  const [status, setStatus] = (0, import_react6.useState)("LOADING");
-  (0, import_react6.useEffect)(() => {
+  const [zoomConfig, setZoomConfig] = (0, import_react7.useState)(defaultContext.zoomConfig);
+  const [status, setStatus] = (0, import_react7.useState)("LOADING");
+  (0, import_react7.useEffect)(() => {
     setStatus("MOUNTED");
   }, []);
-  const [safariFallbackMode, setSafariFallbackMode] = (0, import_react6.useState)(false);
-  (0, import_react6.useEffect)(() => {
+  const [safariFallbackMode, setSafariFallbackMode] = (0, import_react7.useState)(false);
+  (0, import_react7.useEffect)(() => {
     var _a, _b, _c;
     const ua = new import_ua_parser_js.UAParser(navigator.userAgent);
     const { browser } = ua.getResult();
@@ -1131,7 +1191,7 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
     }
   }, []);
   const selectedItem = value.state.ui.itemSelector ? getItem(value.state.ui.itemSelector, value.state.data) : void 0;
-  const [componentState, setComponentState] = (0, import_react6.useState)({});
+  const [componentState, setComponentState] = (0, import_react7.useState)({});
   const setComponentLoading = (id) => {
     setComponentState((prev) => {
       var _a;
@@ -1188,7 +1248,7 @@ See https://github.com/measuredco/puck/issues/411 for more information. This mes
   );
 };
 function useAppContext() {
-  const mainContext = (0, import_react6.useContext)(appContext);
+  const mainContext = (0, import_react7.useContext)(appContext);
   return __spreadProps(__spreadValues({}, mainContext), {
     // Helpers
     setUi: (ui, recordHistory) => {
@@ -1292,7 +1352,7 @@ var Draggable = ({
 };
 
 // components/AutoField/fields/ArrayField/index.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // components/DragIcon/index.tsx
 init_react_import();
@@ -1343,11 +1403,11 @@ var ArrayField = ({
     }),
     openId: ""
   };
-  const [localState, setLocalState] = (0, import_react7.useState)({ arrayState, value });
-  (0, import_react7.useEffect)(() => {
+  const [localState, setLocalState] = (0, import_react8.useState)({ arrayState, value });
+  (0, import_react8.useEffect)(() => {
     setLocalState({ arrayState, value });
   }, [value, state.ui.arrayState[id]]);
-  const mapArrayStateToUi = (0, import_react7.useCallback)(
+  const mapArrayStateToUi = (0, import_react8.useCallback)(
     (partialArrayState) => {
       return {
         arrayState: __spreadProps(__spreadValues({}, state.ui.arrayState), {
@@ -1357,13 +1417,13 @@ var ArrayField = ({
     },
     [arrayState]
   );
-  const getHighestIndex = (0, import_react7.useCallback)(() => {
+  const getHighestIndex = (0, import_react8.useCallback)(() => {
     return arrayState.items.reduce(
       (acc, item) => item._originalIndex > acc ? item._originalIndex : acc,
       -1
     );
   }, [arrayState]);
-  const regenerateArrayState = (0, import_react7.useCallback)(
+  const regenerateArrayState = (0, import_react8.useCallback)(
     (value2) => {
       let highestIndex = getHighestIndex();
       const newItems = Array.from(value2 || []).map((item, idx) => {
@@ -1382,12 +1442,12 @@ var ArrayField = ({
     },
     [arrayState]
   );
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (arrayState.items.length > 0) {
       setUi(mapArrayStateToUi(arrayState));
     }
   }, []);
-  const [hovering, setHovering] = (0, import_react7.useState)(false);
+  const [hovering, setHovering] = (0, import_react8.useState)(false);
   const forceReadOnly = getPermissions({ item: selectedItem }).edit === false;
   if (field.type !== "array" || !field.arrayFields) {
     return null;
@@ -1637,6 +1697,7 @@ var DefaultField = ({
           className: getClassName6("input"),
           autoComplete: "off",
           type: field.type,
+          title: label || name,
           name,
           value: typeof value === "undefined" ? "" : value.toString(),
           onChange: (e) => {
@@ -1659,11 +1720,11 @@ var DefaultField = ({
 
 // components/AutoField/fields/ExternalField/index.tsx
 init_react_import();
-var import_react11 = require("react");
+var import_react12 = require("react");
 
 // components/ExternalInput/index.tsx
 init_react_import();
-var import_react10 = require("react");
+var import_react11 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ExternalInput/styles.module.css#css-module
 init_react_import();
@@ -1671,7 +1732,7 @@ var styles_module_default6 = { "ExternalInput-actions": "_ExternalInput-actions_
 
 // components/Modal/index.tsx
 init_react_import();
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Modal/styles.module.css#css-module
 init_react_import();
@@ -1686,8 +1747,8 @@ var Modal = ({
   onClose,
   isOpen
 }) => {
-  const [rootEl, setRootEl] = (0, import_react8.useState)(null);
-  (0, import_react8.useEffect)(() => {
+  const [rootEl, setRootEl] = (0, import_react9.useState)(null);
+  (0, import_react9.useEffect)(() => {
     setRootEl(document.getElementById("puck-portal-root"));
   }, []);
   if (!rootEl) {
@@ -1734,7 +1795,7 @@ init_react_import();
 
 // components/Button/Button.tsx
 init_react_import();
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Button/Button.module.css#css-module
 init_react_import();
@@ -1757,8 +1818,8 @@ var Button = ({
   size = "medium",
   loading: loadingProp = false
 }) => {
-  const [loading, setLoading] = (0, import_react9.useState)(loadingProp);
-  (0, import_react9.useEffect)(() => setLoading(loadingProp), [loadingProp]);
+  const [loading, setLoading] = (0, import_react10.useState)(loadingProp);
+  (0, import_react10.useEffect)(() => setLoading(loadingProp), [loadingProp]);
   const ElementType = href ? "a" : type ? "button" : "span";
   const el = /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     ElementType,
@@ -1811,28 +1872,28 @@ var ExternalInput = ({
     mapRow = (val) => val,
     filterFields
   } = field || {};
-  const [data, setData] = (0, import_react10.useState)([]);
-  const [isOpen, setOpen] = (0, import_react10.useState)(false);
-  const [isLoading, setIsLoading] = (0, import_react10.useState)(true);
+  const [data, setData] = (0, import_react11.useState)([]);
+  const [isOpen, setOpen] = (0, import_react11.useState)(false);
+  const [isLoading, setIsLoading] = (0, import_react11.useState)(true);
   const hasFilterFields = !!filterFields;
-  const [filters, setFilters] = (0, import_react10.useState)(field.initialFilters || {});
-  const [filtersToggled, setFiltersToggled] = (0, import_react10.useState)(hasFilterFields);
-  const mappedData = (0, import_react10.useMemo)(() => {
+  const [filters, setFilters] = (0, import_react11.useState)(field.initialFilters || {});
+  const [filtersToggled, setFiltersToggled] = (0, import_react11.useState)(hasFilterFields);
+  const mappedData = (0, import_react11.useMemo)(() => {
     return data.map(mapRow);
   }, [data]);
-  const keys = (0, import_react10.useMemo)(() => {
+  const keys = (0, import_react11.useMemo)(() => {
     const validKeys = /* @__PURE__ */ new Set();
     for (const item of mappedData) {
       for (const key of Object.keys(item)) {
-        if (typeof item[key] === "string" || typeof item[key] === "number" || (0, import_react10.isValidElement)(item[key])) {
+        if (typeof item[key] === "string" || typeof item[key] === "number" || (0, import_react11.isValidElement)(item[key])) {
           validKeys.add(key);
         }
       }
     }
     return Array.from(validKeys);
   }, [mappedData]);
-  const [searchQuery, setSearchQuery] = (0, import_react10.useState)(field.initialQuery || "");
-  const search = (0, import_react10.useCallback)(
+  const [searchQuery, setSearchQuery] = (0, import_react11.useState)(field.initialQuery || "");
+  const search = (0, import_react11.useCallback)(
     (query, filters2) => __async(void 0, null, function* () {
       setIsLoading(true);
       const cacheKey = `${id}-${query}-${JSON.stringify(filters2)}`;
@@ -1845,7 +1906,7 @@ var ExternalInput = ({
     }),
     [id, field]
   );
-  const Footer = (0, import_react10.useCallback)(
+  const Footer = (0, import_react11.useCallback)(
     (props) => field.renderFooter ? field.renderFooter(props) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: getClassNameModal("footer"), children: [
       props.items.length,
       " result",
@@ -1853,7 +1914,7 @@ var ExternalInput = ({
     ] }),
     [field.renderFooter]
   );
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     search(searchQuery, filters);
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
@@ -1889,7 +1950,7 @@ var ExternalInput = ({
                 onChange(null);
               },
               disabled: readOnly,
-              children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Unlock, { size: 16 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(LockOpen, { size: 16 })
             }
           )
         ] }),
@@ -2016,7 +2077,7 @@ var ExternalField = ({
   var _a, _b, _c;
   const validField = field;
   const deprecatedField = field;
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (deprecatedField.adaptor) {
       console.error(
         "Warning: The `adaptor` API is deprecated. Please use updated APIs on the `external` field instead. This will be a breaking change in a future release."
@@ -2051,6 +2112,20 @@ var ExternalField = ({
 
 // components/AutoField/fields/RadioField/index.tsx
 init_react_import();
+var import_react13 = require("react");
+
+// lib/safe-json-parse.ts
+init_react_import();
+var safeJsonParse = (str) => {
+  try {
+    const jsonValue = JSON.parse(str);
+    return jsonValue;
+  } catch (e) {
+    return str;
+  }
+};
+
+// components/AutoField/fields/RadioField/index.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var getClassName11 = get_class_name_factory_default("Input", styles_module_default2);
 var RadioField = ({
@@ -2063,13 +2138,17 @@ var RadioField = ({
   label,
   Label
 }) => {
+  const flatOptions = (0, import_react13.useMemo)(
+    () => field.type === "radio" ? field.options.map(({ value: value2 }) => value2) : [],
+    [field]
+  );
   if (field.type !== "radio" || !field.options) {
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     Label,
     {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CheckCircle, { size: 16 }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CircleCheckBig, { size: 16 }),
       label: label || name,
       readOnly,
       el: "div",
@@ -2086,11 +2165,12 @@ var RadioField = ({
                 value: option.value,
                 name,
                 onChange: (e) => {
-                  if (e.currentTarget.value === "true" || e.currentTarget.value === "false") {
-                    onChange(JSON.parse(e.currentTarget.value));
-                    return;
+                  const jsonValue = safeJsonParse(e.target.value) || e.target.value;
+                  if (flatOptions.indexOf(jsonValue) > -1) {
+                    onChange(jsonValue);
+                  } else {
+                    onChange(e.target.value);
                   }
-                  onChange(e.currentTarget.value);
                 },
                 disabled: readOnly,
                 checked: value === option.value
@@ -2107,6 +2187,7 @@ var RadioField = ({
 
 // components/AutoField/fields/SelectField/index.tsx
 init_react_import();
+var import_react14 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var getClassName12 = get_class_name_factory_default("Input", styles_module_default2);
 var SelectField = ({
@@ -2119,6 +2200,10 @@ var SelectField = ({
   readOnly,
   id
 }) => {
+  const flatOptions = (0, import_react14.useMemo)(
+    () => field.type === "select" ? field.options.map(({ value: value2 }) => value2) : [],
+    [field]
+  );
   if (field.type !== "select" || !field.options) {
     return null;
   }
@@ -2132,14 +2217,16 @@ var SelectField = ({
         "select",
         {
           id,
+          title: label || name,
           className: getClassName12("input"),
           disabled: readOnly,
           onChange: (e) => {
-            if (e.currentTarget.value === "true" || e.currentTarget.value === "false") {
-              onChange(JSON.parse(e.currentTarget.value));
-              return;
+            const jsonValue = safeJsonParse(e.target.value) || e.target.value;
+            if (flatOptions.indexOf(jsonValue) > -1) {
+              onChange(jsonValue);
+            } else {
+              onChange(e.target.value);
             }
-            onChange(e.currentTarget.value);
           },
           value,
           children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
@@ -2218,7 +2305,7 @@ var ObjectField = ({
     Label,
     {
       label: label || name,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(MoreVertical, { size: 16 }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(EllipsisVertical, { size: 16 }),
       el: "div",
       readOnly,
       children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: getClassName14(), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("fieldset", { className: getClassName14("fieldset"), children: Object.keys(field.objectFields).map((fieldName) => {
@@ -2253,7 +2340,7 @@ var ObjectField = ({
 
 // lib/use-safe-id.ts
 init_react_import();
-var import_react12 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 
 // lib/generate-id.ts
 init_react_import();
@@ -2262,10 +2349,10 @@ var generateId = (type) => type ? `${type}-${(0, import_uuid.v4)()}` : (0, impor
 
 // lib/use-safe-id.ts
 var useSafeId = () => {
-  if (typeof import_react12.default.useId !== "undefined") {
-    return import_react12.default.useId();
+  if (typeof import_react15.default.useId !== "undefined") {
+    return import_react15.default.useId();
   }
-  const [id] = (0, import_react12.useState)(generateId());
+  const [id] = (0, import_react15.useState)(generateId());
   return id;
 };
 
@@ -2299,7 +2386,7 @@ var FieldLabelInternal2 = ({
   readOnly
 }) => {
   const { overrides } = useAppContext();
-  const Wrapper = (0, import_react13.useMemo)(
+  const Wrapper = (0, import_react16.useMemo)(
     () => overrides.fieldLabel || FieldLabel,
     [overrides]
   );
@@ -2352,7 +2439,7 @@ function AutoFieldInternal(props) {
     Label,
     id: resolvedId
   });
-  const onFocus = (0, import_react13.useCallback)(
+  const onFocus = (0, import_react16.useCallback)(
     (e) => {
       if (mergedProps.name && e.target.nodeName === "INPUT") {
         e.stopPropagation();
@@ -2366,7 +2453,7 @@ function AutoFieldInternal(props) {
     },
     [mergedProps.name]
   );
-  const onBlur = (0, import_react13.useCallback)((e) => {
+  const onBlur = (0, import_react16.useCallback)((e) => {
     if ("name" in e.target) {
       dispatch({
         type: "setUi",
@@ -2385,12 +2472,23 @@ function AutoFieldInternal(props) {
   }
   const children = defaultFields[field.type](mergedProps);
   const Render2 = render[field.type];
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassNameWrapper(), onFocus, onBlur, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Render2, __spreadProps(__spreadValues({}, mergedProps), { children })) });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    "div",
+    {
+      className: getClassNameWrapper(),
+      onFocus,
+      onBlur,
+      onClick: (e) => {
+        e.stopPropagation();
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Render2, __spreadProps(__spreadValues({}, mergedProps), { children }))
+    }
+  );
 }
 function AutoFieldPrivate(props) {
   const { state } = useAppContext();
   const { value, onChange } = props;
-  const [localValue, setLocalValue] = (0, import_react13.useState)(value);
+  const [localValue, setLocalValue] = (0, import_react16.useState)(value);
   const onChangeDb = (0, import_use_debounce.useDebouncedCallback)(
     (val, ui) => {
       onChange(val, ui);
@@ -2398,11 +2496,11 @@ function AutoFieldPrivate(props) {
     50,
     { leading: true }
   );
-  const onChangeLocal = (0, import_react13.useCallback)((val, ui) => {
+  const onChangeLocal = (0, import_react16.useCallback)((val, ui) => {
     setLocalValue(val);
     onChangeDb(val, ui);
   }, []);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (state.ui.field.focus !== props.name) {
       setLocalValue(value);
     }
@@ -2414,7 +2512,7 @@ function AutoFieldPrivate(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AutoFieldInternal, __spreadValues(__spreadValues({}, props), localProps));
 }
 function AutoField(props) {
-  const DefaultLabel = (0, import_react13.useMemo)(() => {
+  const DefaultLabel = (0, import_react16.useMemo)(() => {
     const DefaultLabel2 = (labelProps) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "div",
       __spreadProps(__spreadValues({}, labelProps), {
@@ -2434,11 +2532,11 @@ init_react_import();
 var styles_module_default10 = { "Drawer": "_Drawer_1oa7v_1", "DrawerItem--disabled": "_DrawerItem--disabled_1oa7v_5", "DrawerItem-draggable": "_DrawerItem-draggable_1oa7v_5", "DrawerItem-default": "_DrawerItem-default_1oa7v_11", "DrawerItem-draggableWrapper": "_DrawerItem-draggableWrapper_1oa7v_11", "DrawerItem": "_DrawerItem_1oa7v_5", "Drawer--isDraggingFrom": "_Drawer--isDraggingFrom_1oa7v_36", "DrawerItem-name": "_DrawerItem-name_1oa7v_54" };
 
 // components/Drawer/index.tsx
-var import_react14 = require("react");
+var import_react17 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var getClassName16 = get_class_name_factory_default("Drawer", styles_module_default10);
 var getClassNameItem2 = get_class_name_factory_default("DrawerItem", styles_module_default10);
-var drawerContext = (0, import_react14.createContext)({
+var drawerContext = (0, import_react17.createContext)({
   droppableId: ""
 });
 var DrawerDraggable = ({
@@ -2469,9 +2567,9 @@ var DrawerItem = ({
   index,
   isDragDisabled
 }) => {
-  const ctx = (0, import_react14.useContext)(drawerContext);
+  const ctx = (0, import_react17.useContext)(drawerContext);
   const resolvedId = `${ctx.droppableId}::${id || name}`;
-  const CustomInner = (0, import_react14.useMemo)(
+  const CustomInner = (0, import_react17.useMemo)(
     () => children || (({ children: children2, name: name2 }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: getClassNameItem2("default"), children: children2 })),
     [children]
   );
@@ -2512,11 +2610,11 @@ Drawer.Item = DrawerItem;
 
 // components/DropZone/index.tsx
 init_react_import();
-var import_react18 = require("react");
+var import_react21 = require("react");
 
 // components/DraggableComponent/index.tsx
 init_react_import();
-var import_react16 = require("react");
+var import_react19 = require("react");
 var import_dnd4 = require("@measured/dnd");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css#css-module
@@ -2525,10 +2623,10 @@ var styles_module_default11 = { "DraggableComponent": "_DraggableComponent_1bhad
 
 // lib/use-modifier-held.ts
 init_react_import();
-var import_react15 = require("react");
+var import_react18 = require("react");
 var useModifierHeld = (modifier) => {
-  const [modifierHeld, setModifierHeld] = (0, import_react15.useState)(false);
-  (0, import_react15.useEffect)(() => {
+  const [modifierHeld, setModifierHeld] = (0, import_react18.useState)(false);
+  (0, import_react18.useEffect)(() => {
     function downHandler({ key }) {
       if (key === modifier) {
         setModifierHeld(true);
@@ -2597,14 +2695,14 @@ var DraggableComponent = ({
   const { zoomConfig, status, overrides, selectedItem, getPermissions } = useAppContext();
   const isModifierHeld = useModifierHeld("Alt");
   const El = status !== "LOADING" ? import_dnd4.Draggable : DefaultDraggable;
-  (0, import_react16.useEffect)(onMount, []);
-  const [disableSecondaryAnimation, setDisableSecondaryAnimation] = (0, import_react16.useState)(false);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react19.useEffect)(onMount, []);
+  const [disableSecondaryAnimation, setDisableSecondaryAnimation] = (0, import_react19.useState)(false);
+  (0, import_react19.useEffect)(() => {
     if (isIos()) {
       setDisableSecondaryAnimation(true);
     }
   }, []);
-  const CustomActionBar = (0, import_react16.useMemo)(
+  const CustomActionBar = (0, import_react19.useMemo)(
     () => overrides.actionBar || DefaultActionBar,
     [overrides.actionBar]
   );
@@ -2682,7 +2780,7 @@ var styles_module_default12 = { "DropZone": "_DropZone_djoti_1", "DropZone-conte
 
 // components/DropZone/context.tsx
 init_react_import();
-var import_react17 = require("react");
+var import_react20 = require("react");
 var import_use_debounce2 = require("use-debounce");
 
 // lib/get-zone-id.ts
@@ -2699,29 +2797,29 @@ var getZoneId = (zoneCompound) => {
 
 // components/DropZone/context.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
-var dropZoneContext = (0, import_react17.createContext)(null);
+var dropZoneContext = (0, import_react20.createContext)(null);
 var DropZoneProvider = ({
   children,
   value
 }) => {
-  const [hoveringArea, setHoveringArea] = (0, import_react17.useState)(null);
-  const [hoveringZone, setHoveringZone] = (0, import_react17.useState)(
+  const [hoveringArea, setHoveringArea] = (0, import_react20.useState)(null);
+  const [hoveringZone, setHoveringZone] = (0, import_react20.useState)(
     rootDroppableId
   );
-  const [hoveringComponent, setHoveringComponent] = (0, import_react17.useState)();
+  const [hoveringComponent, setHoveringComponent] = (0, import_react20.useState)();
   const [hoveringAreaDb] = (0, import_use_debounce2.useDebounce)(hoveringArea, 75, { leading: false });
-  const [areasWithZones, setAreasWithZones] = (0, import_react17.useState)(
+  const [areasWithZones, setAreasWithZones] = (0, import_react20.useState)(
     {}
   );
-  const [activeZones, setActiveZones] = (0, import_react17.useState)({});
+  const [activeZones, setActiveZones] = (0, import_react20.useState)({});
   const { dispatch = null } = value ? value : {};
-  const registerZoneArea = (0, import_react17.useCallback)(
+  const registerZoneArea = (0, import_react20.useCallback)(
     (area) => {
       setAreasWithZones((latest) => __spreadProps(__spreadValues({}, latest), { [area]: true }));
     },
     [setAreasWithZones]
   );
-  const registerZone = (0, import_react17.useCallback)(
+  const registerZone = (0, import_react20.useCallback)(
     (zoneCompound) => {
       if (!dispatch) {
         return;
@@ -2734,7 +2832,7 @@ var DropZoneProvider = ({
     },
     [setActiveZones, dispatch]
   );
-  const unregisterZone = (0, import_react17.useCallback)(
+  const unregisterZone = (0, import_react20.useCallback)(
     (zoneCompound) => {
       if (!dispatch) {
         return;
@@ -2749,8 +2847,8 @@ var DropZoneProvider = ({
     },
     [setActiveZones, dispatch]
   );
-  const [pathData, setPathData] = (0, import_react17.useState)();
-  const registerPath = (0, import_react17.useCallback)(
+  const [pathData, setPathData] = (0, import_react20.useState)();
+  const registerPath = (0, import_react20.useCallback)(
     (selector) => {
       if (!(value == null ? void 0 : value.data)) {
         return;
@@ -2775,7 +2873,7 @@ var DropZoneProvider = ({
     },
     [value, setPathData]
   );
-  const [zoneWillDrag, setZoneWillDrag] = (0, import_react17.useState)("");
+  const [zoneWillDrag, setZoneWillDrag] = (0, import_react20.useState)("");
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_jsx_runtime23.Fragment, { children: value && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     dropZoneContext.Provider,
     {
@@ -2807,7 +2905,7 @@ var getClassName18 = get_class_name_factory_default("DropZone", styles_module_de
 function DropZoneEdit({ zone, allow, disallow, style }) {
   var _a;
   const appContext2 = useAppContext();
-  const ctx = (0, import_react18.useContext)(dropZoneContext);
+  const ctx = (0, import_react21.useContext)(dropZoneContext);
   const {
     // These all need setting via context
     data,
@@ -2826,12 +2924,12 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
   } = ctx || {};
   let content = data.content || [];
   let zoneCompound = rootDroppableId;
-  (0, import_react18.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (areaId && registerZoneArea) {
       registerZoneArea(areaId);
     }
   }, [areaId]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (ctx == null ? void 0 : ctx.registerZone) {
       ctx == null ? void 0 : ctx.registerZone(zoneCompound);
     }
@@ -3087,7 +3185,7 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
   );
 }
 function DropZoneRender({ zone }) {
-  const ctx = (0, import_react18.useContext)(dropZoneContext);
+  const ctx = (0, import_react21.useContext)(dropZoneContext);
   const { data, areaId = "root", config } = ctx || {};
   let zoneCompound = rootDroppableId;
   let content = (data == null ? void 0 : data.content) || [];
@@ -3119,7 +3217,7 @@ function DropZoneRender({ zone }) {
   }) });
 }
 function DropZone(props) {
-  const ctx = (0, import_react18.useContext)(dropZoneContext);
+  const ctx = (0, import_react21.useContext)(dropZoneContext);
   if ((ctx == null ? void 0 : ctx.mode) === "edit") {
     return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DropZoneEdit, __spreadValues({}, props));
   }
@@ -3128,11 +3226,11 @@ function DropZone(props) {
 
 // components/Puck/index.tsx
 init_react_import();
-var import_react32 = require("react");
+var import_react36 = require("react");
 
 // lib/use-placeholder-style.ts
 init_react_import();
-var import_react19 = require("react");
+var import_react22 = require("react");
 
 // lib/get-frame.ts
 init_react_import();
@@ -3147,7 +3245,7 @@ var getFrame = () => {
 // lib/use-placeholder-style.ts
 var usePlaceholderStyle = () => {
   const queryAttr = "data-rfd-drag-handle-draggable-id";
-  const [placeholderStyle, setPlaceholderStyle] = (0, import_react19.useState)();
+  const [placeholderStyle, setPlaceholderStyle] = (0, import_react22.useState)();
   const onDragStartOrUpdate = (draggedItem) => {
     var _a;
     const draggableId = draggedItem.draggableId;
@@ -3200,7 +3298,7 @@ var styles_module_default13 = { "SidebarSection": "_SidebarSection_125qe_1", "Si
 
 // lib/use-breadcrumbs.ts
 init_react_import();
-var import_react20 = require("react");
+var import_react23 = require("react");
 var convertPathDataToBreadcrumbs = (selectedItem, pathData, data) => {
   const id = selectedItem ? selectedItem == null ? void 0 : selectedItem.props.id : "";
   const currentPathData = pathData && id && pathData[id] ? __spreadValues({}, pathData[id]) : { label: "Page", path: [] };
@@ -3250,8 +3348,8 @@ var useBreadcrumbs = (renderCount) => {
     state: { data },
     selectedItem
   } = useAppContext();
-  const dzContext = (0, import_react20.useContext)(dropZoneContext);
-  return (0, import_react20.useMemo)(() => {
+  const dzContext = (0, import_react23.useContext)(dropZoneContext);
+  return (0, import_react23.useMemo)(() => {
     const breadcrumbs = convertPathDataToBreadcrumbs(
       selectedItem,
       dzContext == null ? void 0 : dzContext.pathData,
@@ -3735,7 +3833,23 @@ init_react_import();
 var styles_module_default16 = { "PuckFields": "_PuckFields_jp3lw_1", "PuckFields--isLoading": "_PuckFields--isLoading_jp3lw_6", "PuckFields-loadingOverlay": "_PuckFields-loadingOverlay_jp3lw_10", "PuckFields-loadingOverlayInner": "_PuckFields-loadingOverlayInner_jp3lw_25" };
 
 // components/Puck/components/Fields/index.tsx
-var import_react21 = require("react");
+var import_react25 = require("react");
+
+// lib/use-parent.ts
+init_react_import();
+var import_react24 = require("react");
+var useParent = (itemSelector) => {
+  var _a;
+  const { selectedItem, state } = useAppContext();
+  const { pathData } = (0, import_react24.useContext)(dropZoneContext) || {};
+  const item = itemSelector ? getItem(itemSelector, state.data) : selectedItem;
+  const breadcrumbs = convertPathDataToBreadcrumbs(item, pathData, state.data);
+  const lastItem = breadcrumbs[breadcrumbs.length - 1];
+  const parent = (lastItem == null ? void 0 : lastItem.selector) ? (_a = getItem(lastItem.selector, state.data)) != null ? _a : null : null;
+  return parent || null;
+};
+
+// components/Puck/components/Fields/index.tsx
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var getClassName21 = get_class_name_factory_default("PuckFields", styles_module_default16);
 var defaultPageFields = {
@@ -3749,23 +3863,24 @@ var DefaultFields = ({
 var useResolvedFields = () => {
   var _a, _b;
   const { selectedItem, state, config } = useAppContext();
+  const parent = useParent();
   const { data } = state;
   const rootFields = ((_a = config.root) == null ? void 0 : _a.fields) || defaultPageFields;
   const componentConfig = selectedItem ? config.components[selectedItem.type] : null;
-  const defaultFields = (0, import_react21.useMemo)(
+  const defaultFields = (0, import_react25.useMemo)(
     () => (selectedItem ? componentConfig == null ? void 0 : componentConfig.fields : rootFields) || {},
     [selectedItem, rootFields, componentConfig == null ? void 0 : componentConfig.fields]
   );
   const rootProps = data.root.props || data.root;
-  const [lastSelectedData, setLastSelectedData] = (0, import_react21.useState)({});
-  const [resolvedFields, setResolvedFields] = (0, import_react21.useState)(defaultFields);
-  const [fieldsLoading, setFieldsLoading] = (0, import_react21.useState)(false);
+  const [lastSelectedData, setLastSelectedData] = (0, import_react25.useState)({});
+  const [resolvedFields, setResolvedFields] = (0, import_react25.useState)(defaultFields);
+  const [fieldsLoading, setFieldsLoading] = (0, import_react25.useState)(false);
   const defaultResolveFields = (_componentData, _params) => defaultFields;
   const componentData = selectedItem ? selectedItem : { props: rootProps, readOnly: data.root.readOnly };
   const hasComponentResolver = selectedItem && (componentConfig == null ? void 0 : componentConfig.resolveFields);
   const hasRootResolver = !selectedItem && ((_b = config.root) == null ? void 0 : _b.resolveFields);
   const hasResolver = hasComponentResolver || hasRootResolver;
-  const resolveFields = (0, import_react21.useCallback)(
+  const resolveFields = (0, import_react25.useCallback)(
     (..._0) => __async(void 0, [..._0], function* (fields = {}) {
       var _a2;
       const lastData = ((_a2 = lastSelectedData.props) == null ? void 0 : _a2.id) === componentData.props.id ? lastSelectedData : null;
@@ -3779,7 +3894,8 @@ var useResolvedFields = () => {
             fields,
             lastFields: resolvedFields,
             lastData,
-            appState: state
+            appState: state,
+            parent
           }
         );
       }
@@ -3789,7 +3905,8 @@ var useResolvedFields = () => {
           fields,
           lastFields: resolvedFields,
           lastData,
-          appState: state
+          appState: state,
+          parent
         });
       }
       return defaultResolveFields(componentData, {
@@ -3801,7 +3918,7 @@ var useResolvedFields = () => {
     }),
     [data, config, componentData, selectedItem, resolvedFields, state]
   );
-  (0, import_react21.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (hasResolver) {
       setFieldsLoading(true);
       resolveFields(defaultFields).then((fields) => {
@@ -3811,7 +3928,7 @@ var useResolvedFields = () => {
     } else {
       setResolvedFields(defaultFields);
     }
-  }, [data, defaultFields, state.ui.itemSelector, hasResolver]);
+  }, [data, defaultFields, selectedItem, hasResolver]);
   return [resolvedFields, fieldsLoading];
 };
 var Fields = () => {
@@ -3832,7 +3949,7 @@ var Fields = () => {
   const componentResolving = selectedItem ? ((_a = componentState[selectedItem == null ? void 0 : selectedItem.props.id]) == null ? void 0 : _a.loadingCount) > 0 : ((_b = componentState["puck-root"]) == null ? void 0 : _b.loadingCount) > 0;
   const isLoading = fieldsResolving || componentResolving;
   const rootProps = data.root.props || data.root;
-  const Wrapper = (0, import_react21.useMemo)(() => overrides.fields || DefaultFields, [overrides]);
+  const Wrapper = (0, import_react25.useMemo)(() => overrides.fields || DefaultFields, [overrides]);
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     "form",
     {
@@ -3911,34 +4028,36 @@ var Fields = () => {
             const { edit } = getPermissions({
               item: selectedItem
             });
+            const id = `${selectedItem.props.id}_${field.type}_${fieldName}`;
             return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               AutoFieldPrivate,
               {
                 field,
                 name: fieldName,
-                id: `${selectedItem.props.id}_${fieldName}`,
+                id,
                 readOnly: !edit || readOnly[fieldName],
                 value: selectedItem.props[fieldName],
                 onChange
               },
-              `${selectedItem.props.id}_${fieldName}`
+              id
             );
           } else {
             const readOnly = data.root.readOnly || {};
             const { edit } = getPermissions({
               root: true
             });
+            const id = `root_${field.type}_${fieldName}`;
             return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               AutoFieldPrivate,
               {
                 field,
                 name: fieldName,
-                id: `root_${fieldName}`,
+                id,
                 readOnly: !edit || readOnly[fieldName],
                 value: rootProps[fieldName],
                 onChange
               },
-              `page_${fieldName}`
+              id
             );
           }
         }) }),
@@ -3953,7 +4072,7 @@ init_react_import();
 
 // lib/use-component-list.tsx
 init_react_import();
-var import_react22 = require("react");
+var import_react26 = require("react");
 
 // components/ComponentList/index.tsx
 init_react_import();
@@ -4031,8 +4150,8 @@ ComponentList.Item = ComponentListItem;
 // lib/use-component-list.tsx
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var useComponentList = (config, ui) => {
-  const [componentList, setComponentList] = (0, import_react22.useState)();
-  (0, import_react22.useEffect)(() => {
+  const [componentList, setComponentList] = (0, import_react26.useState)();
+  (0, import_react26.useEffect)(() => {
     var _a, _b, _c;
     if (Object.keys(ui.componentList).length > 0) {
       const matchedComponents = [];
@@ -4101,22 +4220,22 @@ var useComponentList = (config, ui) => {
 };
 
 // components/Puck/components/Components/index.tsx
-var import_react23 = require("react");
+var import_react27 = require("react");
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var Components = () => {
   const { config, state, overrides } = useAppContext();
   const componentList = useComponentList(config, state.ui);
-  const Wrapper = (0, import_react23.useMemo)(() => overrides.components || "div", [overrides]);
+  const Wrapper = (0, import_react27.useMemo)(() => overrides.components || "div", [overrides]);
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ComponentList, { id: "all" }) });
 };
 
 // components/Puck/components/Preview/index.tsx
 init_react_import();
-var import_react25 = require("react");
+var import_react29 = require("react");
 
 // components/AutoFrame/index.tsx
 init_react_import();
-var import_react24 = require("react");
+var import_react28 = require("react");
 var import_object_hash = __toESM(require("object-hash"));
 var import_react_dom2 = require("react-dom");
 var import_jsx_runtime31 = require("react/jsx-runtime");
@@ -4162,7 +4281,7 @@ var CopyHostStyles = ({
   onStylesLoaded = () => null
 }) => {
   const { document: doc, window: win } = useFrame();
-  (0, import_react24.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (!win || !doc) {
       return () => {
       };
@@ -4321,8 +4440,8 @@ var CopyHostStyles = ({
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, { children });
 };
-var autoFrameContext = (0, import_react24.createContext)({});
-var useFrame = () => (0, import_react24.useContext)(autoFrameContext);
+var autoFrameContext = (0, import_react28.createContext)({});
+var useFrame = () => (0, import_react28.useContext)(autoFrameContext);
 function AutoFrame(_a) {
   var _b = _a, {
     children,
@@ -4337,11 +4456,11 @@ function AutoFrame(_a) {
     "id",
     "onStylesLoaded"
   ]);
-  const [loaded, setLoaded] = (0, import_react24.useState)(false);
-  const [ctx, setCtx] = (0, import_react24.useState)({});
-  const ref = (0, import_react24.useRef)(null);
-  const [mountTarget, setMountTarget] = (0, import_react24.useState)();
-  (0, import_react24.useEffect)(() => {
+  const [loaded, setLoaded] = (0, import_react28.useState)(false);
+  const [ctx, setCtx] = (0, import_react28.useState)({});
+  const ref = (0, import_react28.useRef)(null);
+  const [mountTarget, setMountTarget] = (0, import_react28.useState)();
+  (0, import_react28.useEffect)(() => {
     var _a2;
     if (ref.current) {
       setCtx({
@@ -4377,7 +4496,7 @@ var import_jsx_runtime32 = require("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();
-  const Page = (0, import_react25.useCallback)(
+  const Page = (0, import_react29.useCallback)(
     (pageProps) => {
       var _a, _b;
       return ((_a = config.root) == null ? void 0 : _a.render) ? (_b = config.root) == null ? void 0 : _b.render(__spreadValues({
@@ -4386,7 +4505,7 @@ var Preview = ({ id = "puck-preview" }) => {
     },
     [config.root]
   );
-  const Frame = (0, import_react25.useMemo)(() => overrides.iframe, [overrides]);
+  const Frame = (0, import_react29.useMemo)(() => overrides.iframe, [overrides]);
   const rootProps = state.data.root.props || state.data.root;
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "div",
@@ -4475,7 +4594,7 @@ var scrollIntoView = (el) => {
 };
 
 // components/LayerTree/index.tsx
-var import_react26 = require("react");
+var import_react30 = require("react");
 
 // lib/is-child-of-zone.ts
 init_react_import();
@@ -4502,7 +4621,7 @@ var LayerTree = ({
   label
 }) => {
   const zones = data.zones || {};
-  const ctx = (0, import_react26.useContext)(dropZoneContext);
+  const ctx = (0, import_react30.useContext)(dropZoneContext);
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: getClassName24("zoneTitle"), children: [
       /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassName24("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Layers, { size: "16" }) }),
@@ -4608,13 +4727,13 @@ var LayerTree = ({
 };
 
 // components/Puck/components/Outline/index.tsx
-var import_react27 = require("react");
+var import_react31 = require("react");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var Outline = () => {
   const { dispatch, state, overrides, config } = useAppContext();
   const { data, ui } = state;
   const { itemSelector } = ui;
-  const setItemSelector = (0, import_react27.useCallback)(
+  const setItemSelector = (0, import_react31.useCallback)(
     (newItemSelector) => {
       dispatch({
         type: "setUi",
@@ -4623,7 +4742,7 @@ var Outline = () => {
     },
     []
   );
-  const Wrapper = (0, import_react27.useMemo)(() => overrides.outline || "div", [overrides]);
+  const Wrapper = (0, import_react31.useMemo)(() => overrides.outline || "div", [overrides]);
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(dropZoneContext.Consumer, { children: (ctx) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
     (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       LayerTree,
@@ -4712,19 +4831,19 @@ function usePuckHistory({
 
 // lib/use-history-store.ts
 init_react_import();
-var import_react28 = require("react");
+var import_react32 = require("react");
 var import_use_debounce3 = require("use-debounce");
 var EMPTY_HISTORY_INDEX = 0;
 function useHistoryStore(initialHistory) {
   var _a, _b;
-  const [histories, setHistories] = (0, import_react28.useState)(
+  const [histories, setHistories] = (0, import_react32.useState)(
     (_a = initialHistory == null ? void 0 : initialHistory.histories) != null ? _a : []
   );
   const updateHistories = (histories2) => {
     setHistories(histories2);
     setIndex(histories2.length - 1);
   };
-  const [index, setIndex] = (0, import_react28.useState)(
+  const [index, setIndex] = (0, import_react32.useState)(
     (_b = initialHistory == null ? void 0 : initialHistory.index) != null ? _b : EMPTY_HISTORY_INDEX
   );
   const hasPast = index > EMPTY_HISTORY_INDEX;
@@ -4884,11 +5003,11 @@ var getBox = function getBox2(el) {
 };
 
 // components/Puck/components/Canvas/index.tsx
-var import_react30 = require("react");
+var import_react34 = require("react");
 
 // components/ViewportControls/index.tsx
 init_react_import();
-var import_react29 = require("react");
+var import_react33 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css#css-module
 init_react_import();
@@ -4911,8 +5030,8 @@ var ViewportButton = ({
   onClick
 }) => {
   const { state } = useAppContext();
-  const [isActive, setIsActive] = (0, import_react29.useState)(false);
-  (0, import_react29.useEffect)(() => {
+  const [isActive, setIsActive] = (0, import_react33.useState)(false);
+  (0, import_react33.useEffect)(() => {
     setIsActive(width === state.ui.viewports.current.width);
   }, [width, state.ui.viewports.current.width]);
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
@@ -4948,7 +5067,7 @@ var ViewportControls = ({
   const defaultsContainAutoZoom = defaultZoomOptions.find(
     (option) => option.value === autoZoom
   );
-  const zoomOptions = (0, import_react29.useMemo)(
+  const zoomOptions = (0, import_react33.useMemo)(
     () => [
       ...defaultZoomOptions,
       ...defaultsContainAutoZoom ? [] : [
@@ -5071,17 +5190,17 @@ var Canvas = () => {
   const { status, iframe } = useAppContext();
   const { dispatch, state, overrides, setUi, zoomConfig, setZoomConfig } = useAppContext();
   const { ui } = state;
-  const frameRef = (0, import_react30.useRef)(null);
-  const [showTransition, setShowTransition] = (0, import_react30.useState)(false);
-  const defaultRender = (0, import_react30.useMemo)(() => {
+  const frameRef = (0, import_react34.useRef)(null);
+  const [showTransition, setShowTransition] = (0, import_react34.useState)(false);
+  const defaultRender = (0, import_react34.useMemo)(() => {
     const PuckDefault = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_jsx_runtime36.Fragment, { children });
     return PuckDefault;
   }, []);
-  const CustomPreview = (0, import_react30.useMemo)(
+  const CustomPreview = (0, import_react34.useMemo)(
     () => overrides.preview || defaultRender,
     [overrides]
   );
-  const getFrameDimensions = (0, import_react30.useCallback)(() => {
+  const getFrameDimensions = (0, import_react34.useCallback)(() => {
     if (frameRef.current) {
       const frame = frameRef.current;
       const box = getBox(frame);
@@ -5089,7 +5208,7 @@ var Canvas = () => {
     }
     return { width: 0, height: 0 };
   }, [frameRef]);
-  const resetAutoZoom = (0, import_react30.useCallback)(
+  const resetAutoZoom = (0, import_react34.useCallback)(
     (ui2 = state.ui) => {
       if (frameRef.current) {
         setZoomConfig(
@@ -5099,11 +5218,11 @@ var Canvas = () => {
     },
     [frameRef, zoomConfig, state.ui]
   );
-  (0, import_react30.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     setShowTransition(false);
     resetAutoZoom();
   }, [frameRef, ui.leftSideBarVisible, ui.rightSideBarVisible]);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     const { height: frameHeight } = getFrameDimensions();
     if (ui.viewports.current.height === "auto") {
       setZoomConfig(__spreadProps(__spreadValues({}, zoomConfig), {
@@ -5111,13 +5230,13 @@ var Canvas = () => {
       }));
     }
   }, [zoomConfig.zoom]);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (ZOOM_ON_CHANGE) {
       setShowTransition(true);
       resetAutoZoom(ui);
     }
   }, [ui.viewports.current.width]);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     const observer = new ResizeObserver(() => {
       setShowTransition(false);
       resetAutoZoom();
@@ -5129,8 +5248,8 @@ var Canvas = () => {
       observer.disconnect();
     };
   }, []);
-  const [showLoader, setShowLoader] = (0, import_react30.useState)(false);
-  (0, import_react30.useEffect)(() => {
+  const [showLoader, setShowLoader] = (0, import_react34.useState)(false);
+  (0, import_react34.useEffect)(() => {
     setTimeout(() => {
       setShowLoader(true);
     }, 500);
@@ -5233,7 +5352,7 @@ var insertComponent = (componentType, zone, index, {
 
 // lib/use-loaded-overrides.ts
 init_react_import();
-var import_react31 = require("react");
+var import_react35 = require("react");
 
 // lib/load-overrides.ts
 init_react_import();
@@ -5272,7 +5391,7 @@ var useLoadedOverrides = ({
   overrides,
   plugins
 }) => {
-  return (0, import_react31.useMemo)(() => {
+  return (0, import_react35.useMemo)(() => {
     return loadOverrides({ overrides, plugins });
   }, [plugins, overrides]);
 };
@@ -5311,7 +5430,7 @@ function Puck({
     enabled: true,
     waitForStyles: true
   }, _iframe);
-  const [generatedAppState] = (0, import_react32.useState)(() => {
+  const [generatedAppState] = (0, import_react36.useState)(() => {
     var _a2, _b, _c, _d, _e, _f, _g, _h, _i;
     const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUi);
     let clientUiState = {};
@@ -5383,22 +5502,22 @@ function Puck({
     histories,
     index: initialHistoryIndex
   });
-  const [reducer] = (0, import_react32.useState)(
+  const [reducer] = (0, import_react36.useState)(
     () => createReducer({
       config,
       record: historyStore.record,
       onAction
     })
   );
-  const [appState, dispatch] = (0, import_react32.useReducer)(
+  const [appState, dispatch] = (0, import_react36.useReducer)(
     reducer,
     flushZones(initialAppState)
   );
   const { data, ui } = appState;
   const history = usePuckHistory({ dispatch, initialAppState, historyStore });
-  const [menuOpen, setMenuOpen] = (0, import_react32.useState)(false);
+  const [menuOpen, setMenuOpen] = (0, import_react36.useState)(false);
   const { itemSelector, leftSideBarVisible, rightSideBarVisible } = ui;
-  const setItemSelector = (0, import_react32.useCallback)(
+  const setItemSelector = (0, import_react36.useCallback)(
     (newItemSelector) => {
       if (newItemSelector === itemSelector) return;
       dispatch({
@@ -5410,13 +5529,13 @@ function Puck({
     [itemSelector]
   );
   const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
-  (0, import_react32.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (onChange) onChange(data);
   }, [data]);
   const { onDragStartOrUpdate, placeholderStyle } = usePlaceholderStyle();
-  const [draggedItem, setDraggedItem] = (0, import_react32.useState)();
+  const [draggedItem, setDraggedItem] = (0, import_react36.useState)();
   const rootProps = data.root.props || data.root;
-  const toggleSidebars = (0, import_react32.useCallback)(
+  const toggleSidebars = (0, import_react36.useCallback)(
     (sidebar) => {
       const widerViewport = window.matchMedia("(min-width: 638px)").matches;
       const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
@@ -5430,7 +5549,7 @@ function Puck({
     },
     [dispatch, leftSideBarVisible, rightSideBarVisible]
   );
-  (0, import_react32.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (!window.matchMedia("(min-width: 638px)").matches) {
       dispatch({
         type: "setUi",
@@ -5453,7 +5572,7 @@ function Puck({
       window.removeEventListener("resize", handleResize);
     };
   }, []);
-  const defaultHeaderRender = (0, import_react32.useMemo)(() => {
+  const defaultHeaderRender = (0, import_react36.useMemo)(() => {
     if (renderHeader) {
       console.warn(
         "`renderHeader` is deprecated. Please use `overrides.header` and the `usePuck` hook instead"
@@ -5467,7 +5586,7 @@ function Puck({
     }
     return DefaultOverride;
   }, [renderHeader]);
-  const defaultHeaderActionsRender = (0, import_react32.useMemo)(() => {
+  const defaultHeaderActionsRender = (0, import_react36.useMemo)(() => {
     if (renderHeaderActions) {
       console.warn(
         "`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `usePuck` hook instead."
@@ -5484,20 +5603,20 @@ function Puck({
     overrides,
     plugins
   });
-  const CustomPuck = (0, import_react32.useMemo)(
+  const CustomPuck = (0, import_react36.useMemo)(
     () => loadedOverrides.puck || DefaultOverride,
     [loadedOverrides]
   );
-  const CustomHeader = (0, import_react32.useMemo)(
+  const CustomHeader = (0, import_react36.useMemo)(
     () => loadedOverrides.header || defaultHeaderRender,
     [loadedOverrides]
   );
-  const CustomHeaderActions = (0, import_react32.useMemo)(
+  const CustomHeaderActions = (0, import_react36.useMemo)(
     () => loadedOverrides.headerActions || defaultHeaderActionsRender,
     [loadedOverrides]
   );
-  const [mounted, setMounted] = (0, import_react32.useState)(false);
-  (0, import_react32.useEffect)(() => {
+  const [mounted, setMounted] = (0, import_react36.useState)(false);
+  (0, import_react36.useEffect)(() => {
     setMounted(true);
   }, []);
   const selectedComponentConfig = selectedItem && config.components[selectedItem.type];
@@ -5900,6 +6019,11 @@ var usePuck = () => {
     getPermissions,
     refreshPermissions
   } = useAppContext();
+  if (dispatch === defaultContext.dispatch) {
+    throw new Error(
+      "usePuck was used outside of the <Puck> component. The usePuck hook must be rendered within the <Puck> context as children, overrides or plugins as described in https://puckeditor.com/docs/api-reference/functions/use-puck."
+    );
+  }
   return {
     appState,
     config,
@@ -5950,25 +6074,33 @@ classnames/index.js:
   	http://jedwatson.github.io/classnames
   *)
 
+lucide-react/dist/esm/shared/src/utils.js:
+  (**
+   * @license lucide-react v0.468.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+
 lucide-react/dist/esm/defaultAttributes.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
    *)
 
-lucide-react/dist/esm/createLucideIcon.js:
+lucide-react/dist/esm/Icon.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
    *)
 
-lucide-react/dist/esm/icons/check-circle.js:
+lucide-react/dist/esm/createLucideIcon.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -5976,7 +6108,7 @@ lucide-react/dist/esm/icons/check-circle.js:
 
 lucide-react/dist/esm/icons/chevron-down.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -5984,7 +6116,7 @@ lucide-react/dist/esm/icons/chevron-down.js:
 
 lucide-react/dist/esm/icons/chevron-right.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -5992,7 +6124,15 @@ lucide-react/dist/esm/icons/chevron-right.js:
 
 lucide-react/dist/esm/icons/chevron-up.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+
+lucide-react/dist/esm/icons/circle-check-big.js:
+  (**
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -6000,7 +6140,15 @@ lucide-react/dist/esm/icons/chevron-up.js:
 
 lucide-react/dist/esm/icons/copy.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+
+lucide-react/dist/esm/icons/ellipsis-vertical.js:
+  (**
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -6008,7 +6156,7 @@ lucide-react/dist/esm/icons/copy.js:
 
 lucide-react/dist/esm/icons/globe.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -6016,7 +6164,7 @@ lucide-react/dist/esm/icons/globe.js:
 
 lucide-react/dist/esm/icons/hash.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -6024,7 +6172,7 @@ lucide-react/dist/esm/icons/hash.js:
 
 lucide-react/dist/esm/icons/layers.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -6032,7 +6180,7 @@ lucide-react/dist/esm/icons/layers.js:
 
 lucide-react/dist/esm/icons/layout-grid.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -6040,7 +6188,7 @@ lucide-react/dist/esm/icons/layout-grid.js:
 
 lucide-react/dist/esm/icons/link.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -6048,31 +6196,31 @@ lucide-react/dist/esm/icons/link.js:
 
 lucide-react/dist/esm/icons/list.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
    *)
 
-lucide-react/dist/esm/icons/lock.js:
+lucide-react/dist/esm/icons/lock-open.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
    *)
 
-lucide-react/dist/esm/icons/monitor.js:
+lucide-react/dist/esm/icons/lock.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
    *)
 
-lucide-react/dist/esm/icons/more-vertical.js:
+lucide-react/dist/esm/icons/monitor.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -6080,7 +6228,7 @@ lucide-react/dist/esm/icons/more-vertical.js:
 
 lucide-react/dist/esm/icons/panel-left.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -6088,7 +6236,7 @@ lucide-react/dist/esm/icons/panel-left.js:
 
 lucide-react/dist/esm/icons/panel-right.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -6096,7 +6244,7 @@ lucide-react/dist/esm/icons/panel-right.js:
 
 lucide-react/dist/esm/icons/plus.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -6104,7 +6252,7 @@ lucide-react/dist/esm/icons/plus.js:
 
 lucide-react/dist/esm/icons/redo-2.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -6112,7 +6260,7 @@ lucide-react/dist/esm/icons/redo-2.js:
 
 lucide-react/dist/esm/icons/search.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -6120,7 +6268,7 @@ lucide-react/dist/esm/icons/search.js:
 
 lucide-react/dist/esm/icons/sliders-horizontal.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -6128,7 +6276,7 @@ lucide-react/dist/esm/icons/sliders-horizontal.js:
 
 lucide-react/dist/esm/icons/smartphone.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -6136,7 +6284,7 @@ lucide-react/dist/esm/icons/smartphone.js:
 
 lucide-react/dist/esm/icons/tablet.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -6144,7 +6292,7 @@ lucide-react/dist/esm/icons/tablet.js:
 
 lucide-react/dist/esm/icons/trash.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -6152,7 +6300,7 @@ lucide-react/dist/esm/icons/trash.js:
 
 lucide-react/dist/esm/icons/type.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -6160,15 +6308,7 @@ lucide-react/dist/esm/icons/type.js:
 
 lucide-react/dist/esm/icons/undo-2.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
-lucide-react/dist/esm/icons/unlock.js:
-  (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -6176,7 +6316,7 @@ lucide-react/dist/esm/icons/unlock.js:
 
 lucide-react/dist/esm/icons/zoom-in.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -6184,7 +6324,7 @@ lucide-react/dist/esm/icons/zoom-in.js:
 
 lucide-react/dist/esm/icons/zoom-out.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -6192,7 +6332,7 @@ lucide-react/dist/esm/icons/zoom-out.js:
 
 lucide-react/dist/esm/lucide-react.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.