@measured/puck 0.13.0-canary.28f24f9 → 0.13.0-canary.2e1b5ef

package/dist/{Config-ff244704.d.ts → Config-162394d8.d.ts}

@@ -65,9 +65,13 @@ type ExternalField<Props extends {
 }> = BaseField & {
     type: "external";
     placeholder?: string;
-    fetchList: () => Promise<any[] | null>;
+    fetchList: (params: {
+        query: string;
+    }) => Promise<any[] | null>;
     mapProp?: (value: any) => Props;
     getItemSummary: (item: Props, index?: number) => string;
+    showSearch?: boolean;
+    initialQuery?: string;
 };
 type CustomField<Props extends {
     [key: string]: any;

package/dist/index.css

@@ -656,13 +656,13 @@
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/ExternalInput/styles.module.css/#css-module-data */
-._ExternalInput_157li_1 {
+._ExternalInput_s6fxy_1 {
   font-family: var(--puck-font-stack);
 }
-._ExternalInput-actions_157li_5 {
+._ExternalInput-actions_s6fxy_5 {
   display: flex;
 }
-._ExternalInput-button_157li_9 {
+._ExternalInput-button_s6fxy_9 {
   display: flex;
   gap: 8px;
   align-items: center;
@@ -679,20 +679,20 @@
   overflow: hidden;
   flex-grow: 1;
 }
-._ExternalInput-button_157li_9:hover,
-._ExternalInput-detachButton_157li_28:hover {
+._ExternalInput-button_s6fxy_9:hover,
+._ExternalInput-detachButton_s6fxy_28:hover {
   cursor: pointer;
   background: var(--puck-color-azure-9);
   color: var(--puck-color-azure-4);
   z-index: 1;
 }
-._ExternalInput--dataSelected_157li_35 ._ExternalInput-button_157li_9 {
+._ExternalInput--dataSelected_s6fxy_35 ._ExternalInput-button_s6fxy_9 {
   color: var(--puck-color-grey-2);
   display: block;
   border-top-right-radius: 0px;
   border-bottom-right-radius: 0px;
 }
-._ExternalInput-detachButton_157li_28 {
+._ExternalInput-detachButton_s6fxy_28 {
   border: 1px solid var(--puck-color-grey-8);
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
@@ -705,22 +705,27 @@
   padding: 8px 12px;
   margin-left: -1px;
 }
-._ExternalInputModal_157li_56 {
+._ExternalInputModal_s6fxy_56 {
+  color: black;
   display: flex;
   flex-direction: column;
   position: relative;
   max-height: 90vh;
 }
-._ExternalInputModal-masthead_157li_63 {
+._ExternalInputModal-masthead_s6fxy_64 {
   background-color: white;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
   padding: 32px 24px;
 }
-._ExternalInputModal-tableWrapper_157li_68 {
+._ExternalInputModal-tableWrapper_s6fxy_72 {
+  position: relative;
   overflow-x: auto;
   overflow-y: auto;
   flex-grow: 1;
 }
-._ExternalInputModal-table_157li_68 {
+._ExternalInputModal-table_s6fxy_72 {
   border-collapse: unset;
   border-spacing: 0px;
   color: var(--puck-color-neutral-4);
@@ -728,64 +733,125 @@
   z-index: 0;
   min-width: 100%;
 }
-._ExternalInputModal-thead_157li_83 {
+._ExternalInputModal-thead_s6fxy_88 {
   position: sticky;
   top: 0;
   z-index: 1;
 }
-._ExternalInputModal-th_157li_83 {
+._ExternalInputModal-th_s6fxy_88 {
   border-bottom: 1px solid var(--puck-color-grey-8);
   border-top: 1px solid var(--puck-color-grey-8);
   font-weight: 700;
   padding: 16px 24px;
   opacity: 0.9;
 }
-._ExternalInputModal-td_157li_97 {
+._ExternalInputModal-td_s6fxy_102 {
   font-family: var(--puck-font-stack);
   padding: 16px 24px;
 }
-._ExternalInputModal-tr_157li_102:nth-of-type(n) {
+._ExternalInputModal-tr_s6fxy_107:nth-of-type(n) {
   background-color: white;
 }
-._ExternalInputModal-tr_157li_102:nth-of-type(2n) {
+._ExternalInputModal-tr_s6fxy_107:nth-of-type(2n) {
   background-color: var(--puck-color-grey-10);
 }
-._ExternalInputModal-tr_157li_102 ._ExternalInputModal-td_157li_97:first-of-type {
+._ExternalInputModal-tr_s6fxy_107 ._ExternalInputModal-td_s6fxy_102:first-of-type {
   font-weight: 500;
 }
-._ExternalInputModal-tbody_157li_114 ._ExternalInputModal-tr_157li_102:hover {
+._ExternalInputModal-tbody_s6fxy_119 ._ExternalInputModal-tr_s6fxy_107:hover {
   background: var(--puck-color-grey-11);
   color: var(--puck-color-azure-4);
   cursor: pointer;
   position: relative;
   margin-left: -5px;
 }
-._ExternalInputModal-tbody_157li_114 ._ExternalInputModal-tr_157li_102:hover ._ExternalInputModal-td_157li_97:first-of-type {
+._ExternalInputModal-tbody_s6fxy_119 ._ExternalInputModal-tr_s6fxy_107:hover ._ExternalInputModal-td_s6fxy_102:first-of-type {
   border-left: 4px solid var(--puck-color-azure-4);
   padding-left: 20px;
 }
-._ExternalInputModal-tableWrapper_157li_68 {
+._ExternalInputModal-tableWrapper_s6fxy_72 {
   display: none;
 }
-._ExternalInputModal--hasData_157li_133 ._ExternalInputModal-tableWrapper_157li_68 {
+._ExternalInputModal--hasData_s6fxy_138 ._ExternalInputModal-tableWrapper_s6fxy_72 {
   display: block;
 }
-._ExternalInputModal-loadingBanner_157li_137 {
+._ExternalInputModal-loadingBanner_s6fxy_142 {
   display: none;
-  background-color: white;
+  background-color: #ffffff90;
   padding: 64px;
   align-items: center;
   justify-content: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
 }
-._ExternalInputModal--isLoading_157li_145 ._ExternalInputModal-loadingBanner_157li_137 {
+._ExternalInputModal--isLoading_s6fxy_155 ._ExternalInputModal-loadingBanner_s6fxy_142 {
   display: flex;
 }
-._ExternalInputModal-noContentBanner_157li_149 {
+._ExternalInputModal-noContentBanner_s6fxy_159 {
   display: none;
+  border-top: 1px solid var(--puck-color-grey-8);
+  padding: 24px;
+  text-align: center;
 }
-._ExternalInputModal--loaded_157li_153:not(._ExternalInputModal--hasData_157li_133) ._ExternalInputModal-noContentBanner_157li_149 {
+._ExternalInputModal--loaded_s6fxy_166:not(._ExternalInputModal--hasData_s6fxy_138) ._ExternalInputModal-noContentBanner_s6fxy_159 {
   display: block;
-  padding: 24px;
+}
+._ExternalInputModal-searchForm_s6fxy_171 {
+  display: flex;
+  margin-left: auto;
+  height: 43px;
+  gap: 12px;
+}
+._ExternalInputModal-search_s6fxy_171 {
+  display: flex;
+  background: white;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--puck-color-grey-8);
+  border-radius: 4px;
+  width: 100%;
+}
+._ExternalInputModal-search_s6fxy_171:focus-within {
+  border-color: var(--puck-color-azure-4);
+  outline: var(--puck-color-azure-8) 4px solid;
+  outline-offset: 0;
+}
+._ExternalInputModal-searchIcon_s6fxy_194 {
+  align-items: center;
+  background: var(--puck-color-grey-11);
+  border-bottom-left-radius: 4px;
+  border-top-left-radius: 4px;
+  border-right: 1px solid var(--puck-color-grey-8);
+  color: var(--puck-color-grey-6);
+  display: flex;
+  justify-content: center;
+  padding: 12px 15px;
+}
+._ExternalInputModal-searchIconText_s6fxy_206 {
+  clip: rect(0 0 0 0);
+  clip-path: inset(100%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+._ExternalInputModal-searchInput_s6fxy_216 {
+  border: none;
+  border-radius: 4px;
+  background: white;
+  font-family: inherit;
+  font-size: 14px;
+  padding: 12px 15px;
+  width: 100%;
+}
+._ExternalInputModal-searchInput_s6fxy_216:focus {
+  border: none;
+  outline: none;
+  box-shadow: none;
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/Modal/styles.module.css/#css-module-data */

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { D as Data, C as Config, I as ItemSelector, U as UiState, A as AppState, M as MappedItem, R as RootDataWithProps, a as DefaultRootProps, b as RootData } from './Config-ff244704.js';
-export { d as Adaptor, c as ArrayField, p as ArrayState, l as BaseData, B as BaseField, k as ComponentConfig, m as ComponentData, i as Content, f as CustomField, g as DefaultComponentProps, q as DropZone, e as ExternalField, E as ExternalFieldWithAdaptor, F as Field, h as Fields, o as ItemWithId, P as PuckComponent, j as PuckContext, n as RootDataWithoutProps, S as SelectField, T as TextField } from './Config-ff244704.js';
+import { D as Data, C as Config, I as ItemSelector, U as UiState, A as AppState, M as MappedItem, R as RootDataWithProps, a as DefaultRootProps, b as RootData } from './Config-162394d8.js';
+export { d as Adaptor, c as ArrayField, p as ArrayState, l as BaseData, B as BaseField, k as ComponentConfig, m as ComponentData, i as Content, f as CustomField, g as DefaultComponentProps, q as DropZone, e as ExternalField, E as ExternalFieldWithAdaptor, F as Field, h as Fields, o as ItemWithId, P as PuckComponent, j as PuckContext, n as RootDataWithoutProps, S as SelectField, T as TextField } from './Config-162394d8.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode, CSSProperties, SyntheticEvent, ReactElement } from 'react';
@@ -99,7 +99,7 @@ type PuckAction = {
     recordHistory?: boolean;
 } & (ReorderAction | InsertAction | MoveAction | ReplaceAction | RemoveAction | DuplicateAction | SetAction | SetDataAction | SetUiAction | RegisterZoneAction | UnregisterZoneAction);
 
-declare const Button: ({ children, href, onClick, variant, type, disabled, tabIndex, newTab, fullWidth, icon, size, }: {
+declare const Button: ({ children, href, onClick, variant, type, disabled, tabIndex, newTab, fullWidth, icon, size, loading: loadingProp, }: {
     children: ReactNode;
     href?: string | undefined;
     onClick?: ((e: any) => void | Promise<void>) | undefined;
@@ -111,6 +111,7 @@ declare const Button: ({ children, href, onClick, variant, type, disabled, tabIn
     fullWidth?: boolean | undefined;
     icon?: ReactNode;
     size?: "medium" | "large" | undefined;
+    loading?: boolean | undefined;
 }) => react_jsx_runtime.JSX.Element;
 
 declare const IconButton: ({ children, href, onClick, variant, type, disabled, tabIndex, newTab, fullWidth, title, }: {

package/dist/index.js

@@ -8989,9 +8989,9 @@ var require_react_dom_development = __commonJS({
         if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== "undefined" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart === "function") {
           __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
         }
-        var React20 = require("react");
+        var React21 = require("react");
         var Scheduler = require_scheduler();
-        var ReactSharedInternals = React20.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+        var ReactSharedInternals = React21.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
         var suppressWarning = false;
         function setSuppressWarning(newSuppressWarning) {
           {
@@ -10596,7 +10596,7 @@ var require_react_dom_development = __commonJS({
           {
             if (props.value == null) {
               if (typeof props.children === "object" && props.children !== null) {
-                React20.Children.forEach(props.children, function(child) {
+                React21.Children.forEach(props.children, function(child) {
                   if (child == null) {
                     return;
                   }
@@ -19043,7 +19043,7 @@ var require_react_dom_development = __commonJS({
           }
         }
         var fakeInternalInstance = {};
-        var emptyRefsObject = new React20.Component().refs;
+        var emptyRefsObject = new React21.Component().refs;
         var didWarnAboutStateAssignmentForComponent;
         var didWarnAboutUninitializedState;
         var didWarnAboutGetSnapshotBeforeUpdateWithoutDidUpdate;
@@ -30170,9 +30170,11 @@ var Button = ({
   newTab,
   fullWidth,
   icon,
-  size = "medium"
+  size = "medium",
+  loading: loadingProp = false
 }) => {
-  const [loading, setLoading] = (0, import_react2.useState)(false);
+  const [loading, setLoading] = (0, import_react2.useState)(loadingProp);
+  (0, import_react2.useEffect)(() => setLoading(loadingProp), [loadingProp]);
   const ElementType = href ? "a" : "button";
   const el = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     ElementType,
@@ -30213,11 +30215,11 @@ var Button = ({
 
 // components/DropZone/index.tsx
 init_react_import();
-var import_react25 = require("react");
+var import_react26 = require("react");
 
 // components/DraggableComponent/index.tsx
 init_react_import();
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_dnd = require("@hello-pangea/dnd");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css#css-module
@@ -31366,7 +31368,7 @@ Plus.propTypes = {
 Plus.displayName = "Plus";
 var plus_default = Plus;
 
-// ../../node_modules/react-feather/dist/icons/sidebar.js
+// ../../node_modules/react-feather/dist/icons/search.js
 init_react_import();
 var import_react17 = __toESM(require("react"));
 var import_prop_types15 = __toESM(require_prop_types());
@@ -31416,7 +31418,7 @@ function _objectWithoutPropertiesLoose15(source, excluded) {
   }
   return target;
 }
-var Sidebar = (0, import_react17.forwardRef)(function(_ref, ref) {
+var Search = (0, import_react17.forwardRef)(function(_ref, ref) {
   var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, _ref$size = _ref.size, size = _ref$size === void 0 ? 24 : _ref$size, rest = _objectWithoutProperties15(_ref, ["color", "size"]);
   return /* @__PURE__ */ import_react17.default.createElement("svg", _extends15({
     ref,
@@ -31429,28 +31431,25 @@ var Sidebar = (0, import_react17.forwardRef)(function(_ref, ref) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, rest), /* @__PURE__ */ import_react17.default.createElement("rect", {
-    x: "3",
-    y: "3",
-    width: "18",
-    height: "18",
-    rx: "2",
-    ry: "2"
+  }, rest), /* @__PURE__ */ import_react17.default.createElement("circle", {
+    cx: "11",
+    cy: "11",
+    r: "8"
   }), /* @__PURE__ */ import_react17.default.createElement("line", {
-    x1: "9",
-    y1: "3",
-    x2: "9",
-    y2: "21"
+    x1: "21",
+    y1: "21",
+    x2: "16.65",
+    y2: "16.65"
   }));
 });
-Sidebar.propTypes = {
+Search.propTypes = {
   color: import_prop_types15.default.string,
   size: import_prop_types15.default.oneOfType([import_prop_types15.default.string, import_prop_types15.default.number])
 };
-Sidebar.displayName = "Sidebar";
-var sidebar_default = Sidebar;
+Search.displayName = "Search";
+var search_default = Search;
 
-// ../../node_modules/react-feather/dist/icons/trash.js
+// ../../node_modules/react-feather/dist/icons/sidebar.js
 init_react_import();
 var import_react18 = __toESM(require("react"));
 var import_prop_types16 = __toESM(require_prop_types());
@@ -31500,7 +31499,7 @@ function _objectWithoutPropertiesLoose16(source, excluded) {
   }
   return target;
 }
-var Trash = (0, import_react18.forwardRef)(function(_ref, ref) {
+var Sidebar = (0, import_react18.forwardRef)(function(_ref, ref) {
   var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, _ref$size = _ref.size, size = _ref$size === void 0 ? 24 : _ref$size, rest = _objectWithoutProperties16(_ref, ["color", "size"]);
   return /* @__PURE__ */ import_react18.default.createElement("svg", _extends16({
     ref,
@@ -31513,20 +31512,28 @@ var Trash = (0, import_react18.forwardRef)(function(_ref, ref) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, rest), /* @__PURE__ */ import_react18.default.createElement("polyline", {
-    points: "3 6 5 6 21 6"
-  }), /* @__PURE__ */ import_react18.default.createElement("path", {
-    d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
+  }, rest), /* @__PURE__ */ import_react18.default.createElement("rect", {
+    x: "3",
+    y: "3",
+    width: "18",
+    height: "18",
+    rx: "2",
+    ry: "2"
+  }), /* @__PURE__ */ import_react18.default.createElement("line", {
+    x1: "9",
+    y1: "3",
+    x2: "9",
+    y2: "21"
   }));
 });
-Trash.propTypes = {
+Sidebar.propTypes = {
   color: import_prop_types16.default.string,
   size: import_prop_types16.default.oneOfType([import_prop_types16.default.string, import_prop_types16.default.number])
 };
-Trash.displayName = "Trash";
-var trash_default = Trash;
+Sidebar.displayName = "Sidebar";
+var sidebar_default = Sidebar;
 
-// ../../node_modules/react-feather/dist/icons/type.js
+// ../../node_modules/react-feather/dist/icons/trash.js
 init_react_import();
 var import_react19 = __toESM(require("react"));
 var import_prop_types17 = __toESM(require_prop_types());
@@ -31576,7 +31583,7 @@ function _objectWithoutPropertiesLoose17(source, excluded) {
   }
   return target;
 }
-var Type = (0, import_react19.forwardRef)(function(_ref, ref) {
+var Trash = (0, import_react19.forwardRef)(function(_ref, ref) {
   var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, _ref$size = _ref.size, size = _ref$size === void 0 ? 24 : _ref$size, rest = _objectWithoutProperties17(_ref, ["color", "size"]);
   return /* @__PURE__ */ import_react19.default.createElement("svg", _extends17({
     ref,
@@ -31590,13 +31597,89 @@ var Type = (0, import_react19.forwardRef)(function(_ref, ref) {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }, rest), /* @__PURE__ */ import_react19.default.createElement("polyline", {
+    points: "3 6 5 6 21 6"
+  }), /* @__PURE__ */ import_react19.default.createElement("path", {
+    d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
+  }));
+});
+Trash.propTypes = {
+  color: import_prop_types17.default.string,
+  size: import_prop_types17.default.oneOfType([import_prop_types17.default.string, import_prop_types17.default.number])
+};
+Trash.displayName = "Trash";
+var trash_default = Trash;
+
+// ../../node_modules/react-feather/dist/icons/type.js
+init_react_import();
+var import_react20 = __toESM(require("react"));
+var import_prop_types18 = __toESM(require_prop_types());
+function _extends18() {
+  _extends18 = Object.assign || function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends18.apply(this, arguments);
+}
+function _objectWithoutProperties18(source, excluded) {
+  if (source == null)
+    return {};
+  var target = _objectWithoutPropertiesLoose18(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0)
+        continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key))
+        continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+function _objectWithoutPropertiesLoose18(source, excluded) {
+  if (source == null)
+    return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0)
+      continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+var Type = (0, import_react20.forwardRef)(function(_ref, ref) {
+  var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, _ref$size = _ref.size, size = _ref$size === void 0 ? 24 : _ref$size, rest = _objectWithoutProperties18(_ref, ["color", "size"]);
+  return /* @__PURE__ */ import_react20.default.createElement("svg", _extends18({
+    ref,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, rest), /* @__PURE__ */ import_react20.default.createElement("polyline", {
     points: "4 7 4 4 20 4 20 7"
-  }), /* @__PURE__ */ import_react19.default.createElement("line", {
+  }), /* @__PURE__ */ import_react20.default.createElement("line", {
     x1: "9",
     y1: "20",
     x2: "15",
     y2: "20"
-  }), /* @__PURE__ */ import_react19.default.createElement("line", {
+  }), /* @__PURE__ */ import_react20.default.createElement("line", {
     x1: "12",
     y1: "4",
     x2: "12",
@@ -31604,18 +31687,18 @@ var Type = (0, import_react19.forwardRef)(function(_ref, ref) {
   }));
 });
 Type.propTypes = {
-  color: import_prop_types17.default.string,
-  size: import_prop_types17.default.oneOfType([import_prop_types17.default.string, import_prop_types17.default.number])
+  color: import_prop_types18.default.string,
+  size: import_prop_types18.default.oneOfType([import_prop_types18.default.string, import_prop_types18.default.number])
 };
 Type.displayName = "Type";
 var type_default = Type;
 
 // ../../node_modules/react-feather/dist/icons/unlock.js
 init_react_import();
-var import_react20 = __toESM(require("react"));
-var import_prop_types18 = __toESM(require_prop_types());
-function _extends18() {
-  _extends18 = Object.assign || function(target) {
+var import_react21 = __toESM(require("react"));
+var import_prop_types19 = __toESM(require_prop_types());
+function _extends19() {
+  _extends19 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -31626,12 +31709,12 @@ function _extends18() {
     }
     return target;
   };
-  return _extends18.apply(this, arguments);
+  return _extends19.apply(this, arguments);
 }
-function _objectWithoutProperties18(source, excluded) {
+function _objectWithoutProperties19(source, excluded) {
   if (source == null)
     return {};
-  var target = _objectWithoutPropertiesLoose18(source, excluded);
+  var target = _objectWithoutPropertiesLoose19(source, excluded);
   var key, i;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -31646,7 +31729,7 @@ function _objectWithoutProperties18(source, excluded) {
   }
   return target;
 }
-function _objectWithoutPropertiesLoose18(source, excluded) {
+function _objectWithoutPropertiesLoose19(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -31660,9 +31743,9 @@ function _objectWithoutPropertiesLoose18(source, excluded) {
   }
   return target;
 }
-var Unlock = (0, import_react20.forwardRef)(function(_ref, ref) {
-  var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, _ref$size = _ref.size, size = _ref$size === void 0 ? 24 : _ref$size, rest = _objectWithoutProperties18(_ref, ["color", "size"]);
-  return /* @__PURE__ */ import_react20.default.createElement("svg", _extends18({
+var Unlock = (0, import_react21.forwardRef)(function(_ref, ref) {
+  var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, _ref$size = _ref.size, size = _ref$size === void 0 ? 24 : _ref$size, rest = _objectWithoutProperties19(_ref, ["color", "size"]);
+  return /* @__PURE__ */ import_react21.default.createElement("svg", _extends19({
     ref,
     xmlns: "http://www.w3.org/2000/svg",
     width: size,
@@ -31673,30 +31756,30 @@ var Unlock = (0, import_react20.forwardRef)(function(_ref, ref) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, rest), /* @__PURE__ */ import_react20.default.createElement("rect", {
+  }, rest), /* @__PURE__ */ import_react21.default.createElement("rect", {
     x: "3",
     y: "11",
     width: "18",
     height: "11",
     rx: "2",
     ry: "2"
-  }), /* @__PURE__ */ import_react20.default.createElement("path", {
+  }), /* @__PURE__ */ import_react21.default.createElement("path", {
     d: "M7 11V7a5 5 0 0 1 9.9-1"
   }));
 });
 Unlock.propTypes = {
-  color: import_prop_types18.default.string,
-  size: import_prop_types18.default.oneOfType([import_prop_types18.default.string, import_prop_types18.default.number])
+  color: import_prop_types19.default.string,
+  size: import_prop_types19.default.oneOfType([import_prop_types19.default.string, import_prop_types19.default.number])
 };
 Unlock.displayName = "Unlock";
 var unlock_default = Unlock;
 
 // lib/use-modifier-held.ts
 init_react_import();
-var import_react21 = require("react");
+var import_react22 = require("react");
 var useModifierHeld = (modifier) => {
-  const [modifierHeld, setModifierHeld] = (0, import_react21.useState)(false);
-  (0, import_react21.useEffect)(() => {
+  const [modifierHeld, setModifierHeld] = (0, import_react22.useState)(false);
+  (0, import_react22.useEffect)(() => {
     function downHandler({ key }) {
       if (key === modifier) {
         setModifierHeld(true);
@@ -31744,7 +31827,7 @@ var DraggableComponent = ({
   style
 }) => {
   const isModifierHeld = useModifierHeld("Alt");
-  (0, import_react22.useEffect)(onMount, []);
+  (0, import_react23.useEffect)(onMount, []);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     import_dnd.Draggable,
     {
@@ -31851,7 +31934,7 @@ var styles_module_default2 = { "DropZone": "_DropZone_1akqa_1", "DropZone-conten
 
 // components/DropZone/context.tsx
 init_react_import();
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_use_debounce = require("use-debounce");
 
 // lib/get-zone-id.ts
@@ -31868,29 +31951,29 @@ var getZoneId = (zoneCompound) => {
 
 // components/DropZone/context.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var dropZoneContext = (0, import_react23.createContext)(null);
+var dropZoneContext = (0, import_react24.createContext)(null);
 var DropZoneProvider = ({
   children,
   value
 }) => {
-  const [hoveringArea, setHoveringArea] = (0, import_react23.useState)(null);
-  const [hoveringZone, setHoveringZone] = (0, import_react23.useState)(
+  const [hoveringArea, setHoveringArea] = (0, import_react24.useState)(null);
+  const [hoveringZone, setHoveringZone] = (0, import_react24.useState)(
     rootDroppableId
   );
-  const [hoveringComponent, setHoveringComponent] = (0, import_react23.useState)();
+  const [hoveringComponent, setHoveringComponent] = (0, import_react24.useState)();
   const [hoveringAreaDb] = (0, import_use_debounce.useDebounce)(hoveringArea, 75, { leading: false });
-  const [areasWithZones, setAreasWithZones] = (0, import_react23.useState)(
+  const [areasWithZones, setAreasWithZones] = (0, import_react24.useState)(
     {}
   );
-  const [activeZones, setActiveZones] = (0, import_react23.useState)({});
+  const [activeZones, setActiveZones] = (0, import_react24.useState)({});
   const { dispatch = null } = value ? value : {};
-  const registerZoneArea = (0, import_react23.useCallback)(
+  const registerZoneArea = (0, import_react24.useCallback)(
     (area) => {
       setAreasWithZones((latest) => __spreadProps(__spreadValues({}, latest), { [area]: true }));
     },
     [setAreasWithZones]
   );
-  const registerZone = (0, import_react23.useCallback)(
+  const registerZone = (0, import_react24.useCallback)(
     (zoneCompound) => {
       if (!dispatch) {
         return;
@@ -31903,7 +31986,7 @@ var DropZoneProvider = ({
     },
     [setActiveZones, dispatch]
   );
-  const unregisterZone = (0, import_react23.useCallback)(
+  const unregisterZone = (0, import_react24.useCallback)(
     (zoneCompound) => {
       if (!dispatch) {
         return;
@@ -31918,8 +32001,8 @@ var DropZoneProvider = ({
     },
     [setActiveZones, dispatch]
   );
-  const [pathData, setPathData] = (0, import_react23.useState)();
-  const registerPath = (0, import_react23.useCallback)(
+  const [pathData, setPathData] = (0, import_react24.useState)();
+  const registerPath = (0, import_react24.useCallback)(
     (selector) => {
       if (!(value == null ? void 0 : value.data)) {
         return;
@@ -31969,7 +32052,7 @@ var DropZoneProvider = ({
 
 // components/Puck/context.tsx
 init_react_import();
-var import_react24 = require("react");
+var import_react25 = require("react");
 var defaultAppState = {
   data: { content: [], root: { title: "" } },
   ui: {
@@ -31980,7 +32063,7 @@ var defaultAppState = {
     componentList: {}
   }
 };
-var appContext = (0, import_react24.createContext)({
+var appContext = (0, import_react25.createContext)({
   state: defaultAppState,
   dispatch: () => null,
   config: { components: {} },
@@ -31988,7 +32071,7 @@ var appContext = (0, import_react24.createContext)({
 });
 var AppProvider = appContext.Provider;
 var useAppContext = () => {
-  const mainContext = (0, import_react24.useContext)(appContext);
+  const mainContext = (0, import_react25.useContext)(appContext);
   const selectedItem = mainContext.state.ui.itemSelector ? getItem(mainContext.state.ui.itemSelector, mainContext.state.data) : void 0;
   return __spreadProps(__spreadValues({}, mainContext), {
     // Helpers
@@ -32009,7 +32092,7 @@ var getClassName3 = get_class_name_factory_default("DropZone", styles_module_def
 function DropZoneEdit({ zone, allow, disallow, style }) {
   var _a;
   const appContext2 = useAppContext();
-  const ctx = (0, import_react25.useContext)(dropZoneContext);
+  const ctx = (0, import_react26.useContext)(dropZoneContext);
   const {
     // These all need setting via context
     data,
@@ -32026,12 +32109,12 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
   } = ctx || {};
   let content = data.content || [];
   let zoneCompound = rootDroppableId;
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (areaId && registerZoneArea) {
       registerZoneArea(areaId);
     }
   }, [areaId]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (ctx == null ? void 0 : ctx.registerZone) {
       ctx == null ? void 0 : ctx.registerZone(zoneCompound);
     }
@@ -32052,7 +32135,7 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
   const draggedDestinationId = draggedItem && ((_a = draggedItem.destination) == null ? void 0 : _a.droppableId);
   const [zoneArea] = getZoneId(zoneCompound);
   const [draggedSourceArea] = getZoneId(draggedSourceId);
-  const [userWillDrag, setUserWillDrag] = (0, import_react25.useState)(false);
+  const [userWillDrag, setUserWillDrag] = (0, import_react26.useState)(false);
   const userIsDragging = !!draggedItem;
   const draggingOverArea = userIsDragging && zoneArea === draggedSourceArea;
   const draggingNewComponent = draggedSourceId == null ? void 0 : draggedSourceId.startsWith("component-list");
@@ -32270,7 +32353,7 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
   );
 }
 function DropZoneRender({ zone }) {
-  const ctx = (0, import_react25.useContext)(dropZoneContext);
+  const ctx = (0, import_react26.useContext)(dropZoneContext);
   const { data, areaId = "root", config } = ctx || {};
   let zoneCompound = rootDroppableId;
   let content = (data == null ? void 0 : data.content) || [];
@@ -32302,7 +32385,7 @@ function DropZoneRender({ zone }) {
   }) });
 }
 function DropZone(props) {
-  const ctx = (0, import_react25.useContext)(dropZoneContext);
+  const ctx = (0, import_react26.useContext)(dropZoneContext);
   if ((ctx == null ? void 0 : ctx.mode) === "edit") {
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DropZoneEdit, __spreadValues({}, props));
   }
@@ -32314,7 +32397,7 @@ init_react_import();
 
 // components/IconButton/IconButton.tsx
 init_react_import();
-var import_react26 = require("react");
+var import_react27 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/IconButton/IconButton.module.css#css-module
 init_react_import();
@@ -32336,7 +32419,7 @@ var IconButton = ({
   fullWidth,
   title
 }) => {
-  const [loading, setLoading] = (0, import_react26.useState)(false);
+  const [loading, setLoading] = (0, import_react27.useState)(false);
   const ElementType = href ? "a" : "button";
   const el = /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     ElementType,
@@ -32377,7 +32460,7 @@ var IconButton = ({
 
 // components/Puck/index.tsx
 init_react_import();
-var import_react39 = require("react");
+var import_react40 = require("react");
 var import_dnd7 = require("@hello-pangea/dnd");
 
 // components/InputOrGroup/index.tsx
@@ -32388,7 +32471,7 @@ init_react_import();
 var styles_module_default3 = { "Input": "_Input_1jyrm_1", "Input-label": "_Input-label_1jyrm_27", "Input-labelIcon": "_Input-labelIcon_1jyrm_35", "Input-disabledIcon": "_Input-disabledIcon_1jyrm_41", "Input-input": "_Input-input_1jyrm_46", "Input--readOnly": "_Input--readOnly_1jyrm_69", "Input-radioGroupItems": "_Input-radioGroupItems_1jyrm_87", "Input-radio": "_Input-radio_1jyrm_87", "Input-radioInner": "_Input-radioInner_1jyrm_104", "Input-radioInput": "_Input-radioInput_1jyrm_126" };
 
 // components/InputOrGroup/index.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 
 // components/InputOrGroup/fields/index.tsx
 init_react_import();
@@ -32453,7 +32536,7 @@ var Draggable2 = ({
 };
 
 // components/InputOrGroup/fields/ArrayField/index.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 
 // components/DragIcon/index.tsx
 init_react_import();
@@ -32491,11 +32574,11 @@ var ArrayField = ({
     }),
     openId: ""
   };
-  const [localState, setLocalState] = (0, import_react27.useState)({ arrayState, value });
-  (0, import_react27.useEffect)(() => {
+  const [localState, setLocalState] = (0, import_react28.useState)({ arrayState, value });
+  (0, import_react28.useEffect)(() => {
     setLocalState({ arrayState, value });
   }, [value, state.ui.arrayState[id]]);
-  const mapArrayStateToUi = (0, import_react27.useCallback)(
+  const mapArrayStateToUi = (0, import_react28.useCallback)(
     (partialArrayState) => {
       return {
         arrayState: __spreadProps(__spreadValues({}, state.ui.arrayState), {
@@ -32505,13 +32588,13 @@ var ArrayField = ({
     },
     [arrayState]
   );
-  const getHighestIndex = (0, import_react27.useCallback)(() => {
+  const getHighestIndex = (0, import_react28.useCallback)(() => {
     return arrayState.items.reduce(
       (acc, item) => item._originalIndex > acc ? item._originalIndex : acc,
       -1
     );
   }, [arrayState]);
-  const regenerateArrayState = (0, import_react27.useCallback)(
+  const regenerateArrayState = (0, import_react28.useCallback)(
     (value2) => {
       let highestIndex = getHighestIndex();
       const newItems = Array.from(value2 || []).map((item, idx) => {
@@ -32530,10 +32613,10 @@ var ArrayField = ({
     },
     [arrayState]
   );
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     setUi(mapArrayStateToUi(arrayState));
   }, []);
-  const [hovering, setHovering] = (0, import_react27.useState)(false);
+  const [hovering, setHovering] = (0, import_react28.useState)(false);
   if (field.type !== "array" || !field.arrayFields) {
     return null;
   }
@@ -32762,19 +32845,19 @@ var DefaultField = ({
 
 // components/InputOrGroup/fields/ExternalField/index.tsx
 init_react_import();
-var import_react30 = require("react");
+var import_react31 = require("react");
 
 // components/ExternalInput/index.tsx
 init_react_import();
-var import_react29 = require("react");
+var import_react30 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ExternalInput/styles.module.css#css-module
 init_react_import();
-var styles_module_default6 = { "ExternalInput": "_ExternalInput_157li_1", "ExternalInput-actions": "_ExternalInput-actions_157li_5", "ExternalInput-button": "_ExternalInput-button_157li_9", "ExternalInput-detachButton": "_ExternalInput-detachButton_157li_28", "ExternalInput--dataSelected": "_ExternalInput--dataSelected_157li_35", "ExternalInputModal": "_ExternalInputModal_157li_56", "ExternalInputModal-masthead": "_ExternalInputModal-masthead_157li_63", "ExternalInputModal-tableWrapper": "_ExternalInputModal-tableWrapper_157li_68", "ExternalInputModal-table": "_ExternalInputModal-table_157li_68", "ExternalInputModal-thead": "_ExternalInputModal-thead_157li_83", "ExternalInputModal-th": "_ExternalInputModal-th_157li_83", "ExternalInputModal-td": "_ExternalInputModal-td_157li_97", "ExternalInputModal-tr": "_ExternalInputModal-tr_157li_102", "ExternalInputModal-tbody": "_ExternalInputModal-tbody_157li_114", "ExternalInputModal--hasData": "_ExternalInputModal--hasData_157li_133", "ExternalInputModal-loadingBanner": "_ExternalInputModal-loadingBanner_157li_137", "ExternalInputModal--isLoading": "_ExternalInputModal--isLoading_157li_145", "ExternalInputModal-noContentBanner": "_ExternalInputModal-noContentBanner_157li_149", "ExternalInputModal--loaded": "_ExternalInputModal--loaded_157li_153" };
+var styles_module_default6 = { "ExternalInput": "_ExternalInput_s6fxy_1", "ExternalInput-actions": "_ExternalInput-actions_s6fxy_5", "ExternalInput-button": "_ExternalInput-button_s6fxy_9", "ExternalInput-detachButton": "_ExternalInput-detachButton_s6fxy_28", "ExternalInput--dataSelected": "_ExternalInput--dataSelected_s6fxy_35", "ExternalInputModal": "_ExternalInputModal_s6fxy_56", "ExternalInputModal-masthead": "_ExternalInputModal-masthead_s6fxy_64", "ExternalInputModal-tableWrapper": "_ExternalInputModal-tableWrapper_s6fxy_72", "ExternalInputModal-table": "_ExternalInputModal-table_s6fxy_72", "ExternalInputModal-thead": "_ExternalInputModal-thead_s6fxy_88", "ExternalInputModal-th": "_ExternalInputModal-th_s6fxy_88", "ExternalInputModal-td": "_ExternalInputModal-td_s6fxy_102", "ExternalInputModal-tr": "_ExternalInputModal-tr_s6fxy_107", "ExternalInputModal-tbody": "_ExternalInputModal-tbody_s6fxy_119", "ExternalInputModal--hasData": "_ExternalInputModal--hasData_s6fxy_138", "ExternalInputModal-loadingBanner": "_ExternalInputModal-loadingBanner_s6fxy_142", "ExternalInputModal--isLoading": "_ExternalInputModal--isLoading_s6fxy_155", "ExternalInputModal-noContentBanner": "_ExternalInputModal-noContentBanner_s6fxy_159", "ExternalInputModal--loaded": "_ExternalInputModal--loaded_s6fxy_166", "ExternalInputModal-searchForm": "_ExternalInputModal-searchForm_s6fxy_171", "ExternalInputModal-search": "_ExternalInputModal-search_s6fxy_171", "ExternalInputModal-searchIcon": "_ExternalInputModal-searchIcon_s6fxy_194", "ExternalInputModal-searchIconText": "_ExternalInputModal-searchIconText_s6fxy_206", "ExternalInputModal-searchInput": "_ExternalInputModal-searchInput_s6fxy_216" };
 
 // components/Modal/index.tsx
 init_react_import();
-var import_react28 = require("react");
+var import_react29 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Modal/styles.module.css#css-module
 init_react_import();
@@ -32789,8 +32872,8 @@ var Modal = ({
   onClose,
   isOpen
 }) => {
-  const [rootEl, setRootEl] = (0, import_react28.useState)(null);
-  (0, import_react28.useEffect)(() => {
+  const [rootEl, setRootEl] = (0, import_react29.useState)(null);
+  (0, import_react29.useEffect)(() => {
     setRootEl(document.getElementById("puck-portal-root"));
   }, []);
   if (!rootEl) {
@@ -32846,10 +32929,10 @@ var ExternalInput = ({
   id
 }) => {
   const { mapProp = (val) => val } = field || {};
-  const [data, setData] = (0, import_react29.useState)([]);
-  const [isOpen, setOpen] = (0, import_react29.useState)(false);
-  const [isLoading, setIsLoading] = (0, import_react29.useState)(true);
-  const keys = (0, import_react29.useMemo)(() => {
+  const [data, setData] = (0, import_react30.useState)([]);
+  const [isOpen, setOpen] = (0, import_react30.useState)(false);
+  const [isLoading, setIsLoading] = (0, import_react30.useState)(true);
+  const keys = (0, import_react30.useMemo)(() => {
     const validKeys = /* @__PURE__ */ new Set();
     for (const item of data) {
       for (const key of Object.keys(item)) {
@@ -32860,15 +32943,22 @@ var ExternalInput = ({
     }
     return Array.from(validKeys);
   }, [data]);
-  (0, import_react29.useEffect)(() => {
-    (() => __async(void 0, null, function* () {
-      const listData = dataCache[name] || (yield field.fetchList());
+  const [searchQuery, setSearchQuery] = (0, import_react30.useState)(field.initialQuery || "");
+  const search = (0, import_react30.useCallback)(
+    (query) => __async(void 0, null, function* () {
+      setIsLoading(true);
+      const cacheKey = `${id}-${name}-${query}`;
+      const listData = dataCache[cacheKey] || (yield field.fetchList({ query }));
       if (listData) {
         setData(listData);
         setIsLoading(false);
-        dataCache[name] = listData;
+        dataCache[cacheKey] = listData;
       }
-    }))();
+    }),
+    [name, field]
+  );
+  (0, import_react30.useEffect)(() => {
+    search(searchQuery);
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "div",
@@ -32908,38 +32998,73 @@ var ExternalInput = ({
             className: getClassNameModal({
               isLoading,
               loaded: !isLoading,
-              hasData: !!data
+              hasData: data.length > 0
             }),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: getClassNameModal("masthead"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Heading, { rank: 2, size: "xxl", children: "Select content" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: getClassNameModal("tableWrapper"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("table", { className: getClassNameModal("table"), children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("thead", { className: getClassNameModal("thead"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tr", { className: getClassNameModal("tr"), children: keys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                  "th",
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: getClassNameModal("masthead"), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Heading, { rank: 2, size: "xxl", children: "Select content" }),
+                field.showSearch && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                  "form",
                   {
-                    className: getClassNameModal("th"),
-                    style: { textAlign: "left" },
-                    children: key
-                  },
-                  key
-                )) }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tbody", { className: getClassNameModal("tbody"), children: data.map((item, i) => {
-                  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                    "tr",
+                    className: getClassNameModal("searchForm"),
+                    onSubmit: (e) => {
+                      e.preventDefault();
+                      search(searchQuery);
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: getClassNameModal("search"), children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: getClassNameModal("searchIconText"), children: "Search" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: getClassNameModal("searchIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(search_default, { size: "18" }) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                          "input",
+                          {
+                            className: getClassNameModal("searchInput"),
+                            name: "q",
+                            type: "search",
+                            placeholder: "Search",
+                            onChange: (e) => {
+                              setSearchQuery(e.currentTarget.value);
+                            },
+                            autoComplete: "off",
+                            value: searchQuery
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { type: "submit", loading: isLoading, disabled: isLoading, children: "Search" })
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: getClassNameModal("tableWrapper"), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("table", { className: getClassNameModal("table"), children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("thead", { className: getClassNameModal("thead"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tr", { className: getClassNameModal("tr"), children: keys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                    "th",
                     {
-                      style: { whiteSpace: "nowrap" },
-                      className: getClassNameModal("tr"),
-                      onClick: (e) => {
-                        onChange(mapProp(item));
-                        setOpen(false);
-                      },
-                      children: keys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("td", { className: getClassNameModal("td"), children: item[key] }, key))
+                      className: getClassNameModal("th"),
+                      style: { textAlign: "left" },
+                      children: key
                     },
-                    i
-                  );
-                }) })
-              ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: getClassNameModal("noContentBanner"), children: "No content" }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: getClassNameModal("loadingBanner"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_spinners4.ClipLoader, { size: 24 }) })
+                    key
+                  )) }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tbody", { className: getClassNameModal("tbody"), children: data.map((item, i) => {
+                    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                      "tr",
+                      {
+                        style: { whiteSpace: "nowrap" },
+                        className: getClassNameModal("tr"),
+                        onClick: (e) => {
+                          onChange(mapProp(item));
+                          setOpen(false);
+                        },
+                        children: keys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("td", { className: getClassNameModal("td"), children: item[key] }, key))
+                      },
+                      i
+                    );
+                  }) })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: getClassNameModal("loadingBanner"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_spinners4.ClipLoader, { size: 24, "aria-label": "Loading" }) })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: getClassNameModal("noContentBanner"), children: "No results." })
             ]
           }
         ) })
@@ -32961,7 +33086,7 @@ var ExternalField = ({
   var _a, _b, _c;
   const validField = field;
   const deprecatedField = field;
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.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."
@@ -33183,7 +33308,7 @@ var FieldLabelInternal = ({
 var InputOrGroup = (_a) => {
   var _b = _a, { onChange } = _b, props = __objRest(_b, ["onChange"]);
   const { name, field, value, readOnly } = props;
-  const [localValue, setLocalValue] = (0, import_react31.useState)(value);
+  const [localValue, setLocalValue] = (0, import_react32.useState)(value);
   const onChangeDb = (0, import_use_debounce2.useDebouncedCallback)(
     (val, ui) => {
       onChange(val, ui);
@@ -33191,11 +33316,11 @@ var InputOrGroup = (_a) => {
     50,
     { leading: true }
   );
-  const onChangeLocal = (0, import_react31.useCallback)((val, ui) => {
+  const onChangeLocal = (0, import_react32.useCallback)((val, ui) => {
     setLocalValue(val);
     onChangeDb(val, ui);
   }, []);
-  (0, import_react31.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     setLocalValue(value);
   }, [value]);
   const localProps = {
@@ -33325,10 +33450,10 @@ ComponentList.Item = ComponentListItem;
 
 // lib/use-placeholder-style.ts
 init_react_import();
-var import_react32 = require("react");
+var import_react33 = require("react");
 var usePlaceholderStyle = () => {
   const queryAttr = "data-rfd-drag-handle-draggable-id";
-  const [placeholderStyle, setPlaceholderStyle] = (0, import_react32.useState)();
+  const [placeholderStyle, setPlaceholderStyle] = (0, import_react33.useState)();
   const onDragStartOrUpdate = (draggedItem) => {
     var _a;
     const draggableId = draggedItem.draggableId;
@@ -33380,7 +33505,7 @@ var styles_module_default10 = { "SidebarSection": "_SidebarSection_1uyg2_1", "Si
 
 // lib/use-breadcrumbs.ts
 init_react_import();
-var import_react33 = require("react");
+var import_react34 = 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: [] };
@@ -33430,8 +33555,8 @@ var useBreadcrumbs = (renderCount) => {
     state: { data },
     selectedItem
   } = useAppContext();
-  const dzContext = (0, import_react33.useContext)(dropZoneContext);
-  return (0, import_react33.useMemo)(() => {
+  const dzContext = (0, import_react34.useContext)(dropZoneContext);
+  return (0, import_react34.useMemo)(() => {
     const breadcrumbs = convertPathDataToBreadcrumbs(
       selectedItem,
       dzContext == null ? void 0 : dzContext.pathData,
@@ -33483,11 +33608,11 @@ init_react_import();
 
 // lib/use-puck-history.ts
 init_react_import();
-var import_react35 = require("react");
+var import_react36 = require("react");
 
 // lib/use-action-history.ts
 init_react_import();
-var import_react34 = require("react");
+var import_react35 = require("react");
 
 // lib/generate-id.ts
 init_react_import();
@@ -33497,8 +33622,8 @@ var generateId = (type) => `${type}-${(0, import_crypto.randomBytes)(20).toStrin
 // lib/use-action-history.ts
 var EMPTY_HISTORY_INDEX = -1;
 function useActionHistory() {
-  const [histories, setHistories] = (0, import_react34.useState)([]);
-  const [currentHistoryIndex, setCurrentHistoryIndex] = (0, import_react34.useState)(EMPTY_HISTORY_INDEX);
+  const [histories, setHistories] = (0, import_react35.useState)([]);
+  const [currentHistoryIndex, setCurrentHistoryIndex] = (0, import_react35.useState)(EMPTY_HISTORY_INDEX);
   const currentHistory = histories[currentHistoryIndex];
   const canRewind = currentHistoryIndex > EMPTY_HISTORY_INDEX;
   const canForward = currentHistoryIndex < histories.length - 1;
@@ -33577,7 +33702,7 @@ function usePuckHistory({
       dispatch
     });
   }, DEBOUNCE_TIME);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     historyEmitter.on(RECORD_DIFF, handleRecordDiff);
     return () => {
       historyEmitter.off(RECORD_DIFF, handleRecordDiff);
@@ -33939,7 +34064,7 @@ var scrollIntoView = (el) => {
 };
 
 // components/LayerTree/index.tsx
-var import_react36 = require("react");
+var import_react37 = require("react");
 
 // lib/find-zones-for-area.ts
 init_react_import();
@@ -33977,7 +34102,7 @@ var LayerTree = ({
   label
 }) => {
   const zones = data.zones || {};
-  const ctx = (0, import_react36.useContext)(dropZoneContext);
+  const ctx = (0, import_react37.useContext)(dropZoneContext);
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: getClassName17("zoneTitle"), children: [
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassName17("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(layers_default, { size: "16" }) }),
@@ -34102,11 +34227,11 @@ var flushZones = (appState) => {
 
 // lib/use-component-list.tsx
 init_react_import();
-var import_react37 = require("react");
+var import_react38 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var useComponentList = (config, ui) => {
-  const [componentList, setComponentList] = (0, import_react37.useState)();
-  (0, import_react37.useEffect)(() => {
+  const [componentList, setComponentList] = (0, import_react38.useState)();
+  (0, import_react38.useEffect)(() => {
     var _a, _b, _c;
     if (Object.keys(ui.componentList).length > 0) {
       const matchedComponents = [];
@@ -34172,7 +34297,7 @@ var useComponentList = (config, ui) => {
 
 // lib/use-resolved-data.ts
 init_react_import();
-var import_react38 = require("react");
+var import_react39 = require("react");
 
 // lib/resolve-component-data.ts
 init_react_import();
@@ -34287,13 +34412,13 @@ var resolveRootData = (data, config) => __async(void 0, null, function* () {
 
 // lib/use-resolved-data.ts
 var useResolvedData = (appState, config, dispatch) => {
-  const [{ resolverKey, newAppState }, setResolverState] = (0, import_react38.useState)({
+  const [{ resolverKey, newAppState }, setResolverState] = (0, import_react39.useState)({
     resolverKey: 0,
     newAppState: appState
   });
-  const [componentState, setComponentState] = (0, import_react38.useState)({});
+  const [componentState, setComponentState] = (0, import_react39.useState)({});
   const deferredSetStates = {};
-  const setComponentLoading = (0, import_react38.useCallback)(
+  const setComponentLoading = (0, import_react39.useCallback)(
     (id, loading, defer = 0) => {
       if (deferredSetStates[id]) {
         clearTimeout(deferredSetStates[id]);
@@ -34360,10 +34485,10 @@ var useResolvedData = (appState, config, dispatch) => {
     });
     yield Promise.all(promises);
   });
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     runResolvers();
   }, [resolverKey]);
-  const resolveData = (0, import_react38.useCallback)((newAppState2 = appState) => {
+  const resolveData = (0, import_react39.useCallback)((newAppState2 = appState) => {
     setResolverState((curr) => ({
       resolverKey: curr.resolverKey + 1,
       newAppState: newAppState2
@@ -34483,8 +34608,8 @@ function Puck({
   headerPath
 }) {
   var _a, _b;
-  const [reducer] = (0, import_react39.useState)(() => createReducer({ config }));
-  const [initialAppState] = (0, import_react39.useState)(__spreadProps(__spreadValues({}, defaultAppState), {
+  const [reducer] = (0, import_react40.useState)(() => createReducer({ config }));
+  const [initialAppState] = (0, import_react40.useState)(__spreadProps(__spreadValues({}, defaultAppState), {
     data: initialData,
     ui: __spreadProps(__spreadValues({}, defaultAppState.ui), {
       // Store categories under componentList on state to allow render functions and plugins to modify
@@ -34503,7 +34628,7 @@ function Puck({
       ) : {}
     })
   }));
-  const [appState, dispatch] = (0, import_react39.useReducer)(
+  const [appState, dispatch] = (0, import_react40.useReducer)(
     reducer,
     flushZones(initialAppState)
   );
@@ -34513,9 +34638,9 @@ function Puck({
     config,
     dispatch
   );
-  const [menuOpen, setMenuOpen] = (0, import_react39.useState)(false);
+  const [menuOpen, setMenuOpen] = (0, import_react40.useState)(false);
   const { itemSelector, leftSideBarVisible, rightSideBarVisible } = ui;
-  const setItemSelector = (0, import_react39.useCallback)(
+  const setItemSelector = (0, import_react40.useCallback)(
     (newItemSelector) => {
       dispatch({
         type: "setUi",
@@ -34525,7 +34650,7 @@ function Puck({
     []
   );
   const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
-  const Page = (0, import_react39.useCallback)(
+  const Page = (0, import_react40.useCallback)(
     (pageProps) => {
       var _a2, _b2;
       return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
@@ -34541,7 +34666,7 @@ function Puck({
     },
     [config.root]
   );
-  const PageFieldWrapper = (0, import_react39.useCallback)(
+  const PageFieldWrapper = (0, import_react40.useCallback)(
     (props) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       PluginRenderer,
       {
@@ -34554,7 +34679,7 @@ function Puck({
     ),
     []
   );
-  const ComponentFieldWrapper = (0, import_react39.useCallback)(
+  const ComponentFieldWrapper = (0, import_react40.useCallback)(
     (props) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       PluginRenderer,
       {
@@ -34567,7 +34692,7 @@ function Puck({
     ),
     []
   );
-  const ComponentListWrapper = (0, import_react39.useCallback)((props) => {
+  const ComponentListWrapper = (0, import_react40.useCallback)((props) => {
     const children = /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       PluginRenderer,
       {
@@ -34587,22 +34712,22 @@ function Puck({
   const FieldWrapper = itemSelector ? ComponentFieldWrapper : PageFieldWrapper;
   const rootFields = ((_a = config.root) == null ? void 0 : _a.fields) || defaultPageFields;
   let fields = selectedItem ? ((_b = config.components[selectedItem.type]) == null ? void 0 : _b.fields) || {} : rootFields;
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (onChange)
       onChange(data);
   }, [data]);
   const { onDragStartOrUpdate, placeholderStyle } = usePlaceholderStyle();
-  const [draggedItem, setDraggedItem] = (0, import_react39.useState)();
+  const [draggedItem, setDraggedItem] = (0, import_react40.useState)();
   const componentList = useComponentList(config, appState.ui);
   const rootProps = data.root.props || data.root;
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (Object.keys(data.root).length > 0 && !data.root.props) {
       console.error(
         "Warning: Defining props on `root` is deprecated. Please use `root.props`. This will be a breaking change in a future release."
       );
     }
   }, []);
-  const toggleSidebars = (0, import_react39.useCallback)(
+  const toggleSidebars = (0, import_react40.useCallback)(
     (sidebar) => {
       const widerViewport = window.matchMedia("(min-width: 638px)").matches;
       const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
@@ -34616,7 +34741,7 @@ function Puck({
     },
     [dispatch, leftSideBarVisible, rightSideBarVisible]
   );
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (!window.matchMedia("(min-width: 638px)").matches) {
       dispatch({
         type: "setUi",

package/dist/rsc.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as Config, D as Data } from './Config-ff244704.js';
+import { C as Config, D as Data } from './Config-162394d8.js';
 import 'react';
 
 declare function Render({ config, data }: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@measured/puck",
-  "version": "0.13.0-canary.28f24f9",
+  "version": "0.13.0-canary.2e1b5ef",
   "private": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",