@measured/puck 0.14.0-canary.55740c4 → 0.14.0-canary.712fb8e

package/dist/index.js

@@ -8084,7 +8084,7 @@ var require_react_dom_development = __commonJS({
         var HostPortal = 4;
         var HostComponent = 5;
         var HostText = 6;
-        var Fragment14 = 7;
+        var Fragment13 = 7;
         var Mode = 8;
         var ContextConsumer = 9;
         var ContextProvider = 10;
@@ -9240,7 +9240,7 @@ var require_react_dom_development = __commonJS({
               return "DehydratedFragment";
             case ForwardRef:
               return getWrappedName$1(type, type.render, "ForwardRef");
-            case Fragment14:
+            case Fragment13:
               return "Fragment";
             case HostComponent:
               return type;
@@ -18911,7 +18911,7 @@ var require_react_dom_development = __commonJS({
             }
           }
           function updateFragment2(returnFiber, current2, fragment, lanes, key) {
-            if (current2 === null || current2.tag !== Fragment14) {
+            if (current2 === null || current2.tag !== Fragment13) {
               var created = createFiberFromFragment(fragment, returnFiber.mode, lanes, key);
               created.return = returnFiber;
               return created;
@@ -19314,7 +19314,7 @@ var require_react_dom_development = __commonJS({
               if (child.key === key) {
                 var elementType = element.type;
                 if (elementType === REACT_FRAGMENT_TYPE) {
-                  if (child.tag === Fragment14) {
+                  if (child.tag === Fragment13) {
                     deleteRemainingChildren(returnFiber, child.sibling);
                     var existing = useFiber(child, element.props.children);
                     existing.return = returnFiber;
@@ -23489,7 +23489,7 @@ var require_react_dom_development = __commonJS({
               var _resolvedProps2 = workInProgress2.elementType === type ? _unresolvedProps2 : resolveDefaultProps(type, _unresolvedProps2);
               return updateForwardRef(current2, workInProgress2, type, _resolvedProps2, renderLanes2);
             }
-            case Fragment14:
+            case Fragment13:
               return updateFragment(current2, workInProgress2, renderLanes2);
             case Mode:
               return updateMode(current2, workInProgress2, renderLanes2);
@@ -23762,7 +23762,7 @@ var require_react_dom_development = __commonJS({
             case SimpleMemoComponent:
             case FunctionComponent:
             case ForwardRef:
-            case Fragment14:
+            case Fragment13:
             case Mode:
             case Profiler:
             case ContextConsumer:
@@ -28021,7 +28021,7 @@ var require_react_dom_development = __commonJS({
           return fiber;
         }
         function createFiberFromFragment(elements, mode, lanes, key) {
-          var fiber = createFiber(Fragment14, elements, key, mode);
+          var fiber = createFiber(Fragment13, elements, key, mode);
           fiber.lanes = lanes;
           return fiber;
         }
@@ -29173,7 +29173,7 @@ var import_react2 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Button/Button.module.css#css-module
 init_react_import();
-var Button_module_default = { "Button": "_Button_1brfa_1", "Button--medium": "_Button--medium_1brfa_22", "Button--large": "_Button--large_1brfa_29", "Button-icon": "_Button-icon_1brfa_36", "Button--primary": "_Button--primary_1brfa_44", "Button--secondary": "_Button--secondary_1brfa_53", "Button--flush": "_Button--flush_1brfa_64", "Button--disabled": "_Button--disabled_1brfa_68", "Button--fullWidth": "_Button--fullWidth_1brfa_78" };
+var Button_module_default = { "Button": "_Button_8fn3a_1", "Button--medium": "_Button--medium_8fn3a_29", "Button--large": "_Button--large_8fn3a_37", "Button-icon": "_Button-icon_8fn3a_44", "Button--primary": "_Button--primary_8fn3a_48", "Button--secondary": "_Button--secondary_8fn3a_67", "Button--flush": "_Button--flush_8fn3a_82", "Button--disabled": "_Button--disabled_8fn3a_86", "Button--fullWidth": "_Button--fullWidth_8fn3a_93", "Button-spinner": "_Button-spinner_8fn3a_98" };
 
 // lib/get-class-name-factory.ts
 init_react_import();
@@ -29227,7 +29227,7 @@ var Button = ({
 }) => {
   const [loading, setLoading] = (0, import_react2.useState)(loadingProp);
   (0, import_react2.useEffect)(() => setLoading(loadingProp), [loadingProp]);
-  const ElementType = href ? "a" : onClick ? "button" : "div";
+  const ElementType = href ? "a" : type ? "button" : "span";
   const el = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     ElementType,
     {
@@ -29255,10 +29255,7 @@ var Button = ({
       children: [
         icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: getClassName("icon"), children: icon }),
         children,
-        loading && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-          "\xA0\xA0",
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_spinners.ClipLoader, { "aria-label": "loading", color: "inherit", size: "14px" })
-        ] })
+        loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: getClassName("spinner"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_spinners.ClipLoader, { "aria-label": "loading", color: "inherit", size: "14px" }) })
       ]
     }
   );
@@ -29271,7 +29268,7 @@ var import_dnd2 = require("@hello-pangea/dnd");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Drawer/styles.module.css#css-module
 init_react_import();
-var styles_module_default = { "DrawerItem": "_DrawerItem_1qydx_1", "DrawerItem-default": "_DrawerItem-default_1qydx_1", "DrawerItem-draggableWrapper": "_DrawerItem-draggableWrapper_1qydx_1", "DrawerItem-draggable": "_DrawerItem-draggable_1qydx_1", "Drawer": "_Drawer_1qydx_1", "Drawer--isDraggingFrom": "_Drawer--isDraggingFrom_1qydx_21", "DrawerItem-name": "_DrawerItem-name_1qydx_26" };
+var styles_module_default = { "Drawer": "_Drawer_6zh0b_1", "DrawerItem-default": "_DrawerItem-default_6zh0b_5", "DrawerItem-draggableWrapper": "_DrawerItem-draggableWrapper_6zh0b_5", "DrawerItem": "_DrawerItem_6zh0b_5", "DrawerItem-draggable": "_DrawerItem-draggable_6zh0b_5", "Drawer--isDraggingFrom": "_Drawer--isDraggingFrom_6zh0b_31", "DrawerItem-name": "_DrawerItem-name_6zh0b_47" };
 
 // components/Draggable/index.tsx
 init_react_import();
@@ -29350,7 +29347,7 @@ var replace = (list, index, newItem) => {
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/DragIcon/styles.module.css#css-module
 init_react_import();
-var styles_module_default2 = { "DragIcon": "_DragIcon_o29on_1" };
+var styles_module_default2 = { "DragIcon": "_DragIcon_1p5wn_1" };
 
 // components/DragIcon/index.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
@@ -29385,16 +29382,17 @@ var DrawerItem = ({
   name,
   children,
   id,
+  label,
   index
 }) => {
   const ctx = (0, import_react3.useContext)(drawerContext);
   const resolvedId = `${ctx.droppableId}::${id || name}`;
   const CustomInner = (0, import_react3.useMemo)(
-    () => children || (({ children: children2 }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: getClassNameItem("default"), children: children2 })),
+    () => children || (({ children: children2, name: name2 }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: getClassNameItem("default"), children: children2 })),
     [children]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DrawerDraggable, { id: resolvedId, index, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CustomInner, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: getClassNameItem("draggableWrapper"), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: getClassNameItem("draggable"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: getClassNameItem("name"), children: name }),
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DrawerDraggable, { id: resolvedId, index, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CustomInner, { name, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: getClassNameItem("draggableWrapper"), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: getClassNameItem("draggable"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: getClassNameItem("name"), children: label != null ? label : name }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: getClassNameItem("icon"), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DragIcon, {}) })
   ] }) }) }) });
 };
@@ -29430,7 +29428,7 @@ var import_dnd3 = require("@hello-pangea/dnd");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css#css-module
 init_react_import();
-var styles_module_default3 = { "DraggableComponent": "_DraggableComponent_foluk_1", "DraggableComponent--isDragging": "_DraggableComponent--isDragging_foluk_6", "DraggableComponent-contents": "_DraggableComponent-contents_foluk_12", "DraggableComponent-overlay": "_DraggableComponent-overlay_foluk_25", "DraggableComponent-loadingOverlay": "_DraggableComponent-loadingOverlay_foluk_39", "DraggableComponent--isLocked": "_DraggableComponent--isLocked_foluk_55", "DraggableComponent--forceHover": "_DraggableComponent--forceHover_foluk_61", "DraggableComponent--isSelected": "_DraggableComponent--isSelected_foluk_66", "DraggableComponent--indicativeHover": "_DraggableComponent--indicativeHover_foluk_71", "DraggableComponent-actions": "_DraggableComponent-actions_foluk_97", "DraggableComponent-actionsLabel": "_DraggableComponent-actionsLabel_foluk_120", "DraggableComponent-action": "_DraggableComponent-action_foluk_97" };
+var styles_module_default3 = { "DraggableComponent": "_DraggableComponent_1vpvt_1", "DraggableComponent--isDragging": "_DraggableComponent--isDragging_1vpvt_10", "DraggableComponent-contents": "_DraggableComponent-contents_1vpvt_16", "DraggableComponent-overlay": "_DraggableComponent-overlay_1vpvt_29", "DraggableComponent-loadingOverlay": "_DraggableComponent-loadingOverlay_1vpvt_42", "DraggableComponent--isLocked": "_DraggableComponent--isLocked_1vpvt_58", "DraggableComponent--forceHover": "_DraggableComponent--forceHover_1vpvt_64", "DraggableComponent--isSelected": "_DraggableComponent--isSelected_1vpvt_69", "DraggableComponent--indicativeHover": "_DraggableComponent--indicativeHover_1vpvt_74", "DraggableComponent-actions": "_DraggableComponent-actions_1vpvt_100", "DraggableComponent-actionsLabel": "_DraggableComponent-actionsLabel_1vpvt_125", "DraggableComponent-action": "_DraggableComponent-action_1vpvt_100" };
 
 // ../../node_modules/lucide-react/dist/esm/lucide-react.js
 init_react_import();
@@ -29618,6 +29616,20 @@ var Search = createLucideIcon("Search", [
   ["path", { d: "m21 21-4.3-4.3", key: "1qie3q" }]
 ]);
 
+// ../../node_modules/lucide-react/dist/esm/icons/sliders-horizontal.js
+init_react_import();
+var SlidersHorizontal = createLucideIcon("SlidersHorizontal", [
+  ["line", { x1: "21", x2: "14", y1: "4", y2: "4", key: "obuewd" }],
+  ["line", { x1: "10", x2: "3", y1: "4", y2: "4", key: "1q6298" }],
+  ["line", { x1: "21", x2: "12", y1: "12", y2: "12", key: "1iu8h1" }],
+  ["line", { x1: "8", x2: "3", y1: "12", y2: "12", key: "ntss68" }],
+  ["line", { x1: "21", x2: "16", y1: "20", y2: "20", key: "14d8ph" }],
+  ["line", { x1: "12", x2: "3", y1: "20", y2: "20", key: "m0wm8r" }],
+  ["line", { x1: "14", x2: "14", y1: "2", y2: "6", key: "14e1ph" }],
+  ["line", { x1: "8", x2: "8", y1: "10", y2: "14", key: "1i6ji0" }],
+  ["line", { x1: "16", x2: "16", y1: "18", y2: "22", key: "1lctlv" }]
+]);
+
 // ../../node_modules/lucide-react/dist/esm/icons/trash.js
 init_react_import();
 var Trash = createLucideIcon("Trash", [
@@ -29773,7 +29785,7 @@ var getItem = (selector, data, dynamicProps = {}) => {
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css#css-module
 init_react_import();
-var styles_module_default4 = { "DropZone": "_DropZone_i675d_1", "DropZone--zoomEnabled": "_DropZone--zoomEnabled_i675d_10", "DropZone-renderWrapper": "_DropZone-renderWrapper_i675d_14", "DropZone-content": "_DropZone-content_i675d_18", "DropZone--userIsDragging": "_DropZone--userIsDragging_i675d_23", "DropZone--draggingOverArea": "_DropZone--draggingOverArea_i675d_27", "DropZone--draggingNewComponent": "_DropZone--draggingNewComponent_i675d_28", "DropZone--isAreaSelected": "_DropZone--isAreaSelected_i675d_34", "DropZone--hoveringOverArea": "_DropZone--hoveringOverArea_i675d_35", "DropZone--isDisabled": "_DropZone--isDisabled_i675d_36", "DropZone--isRootZone": "_DropZone--isRootZone_i675d_37", "DropZone--hasChildren": "_DropZone--hasChildren_i675d_43", "DropZone--isDestination": "_DropZone--isDestination_i675d_48", "DropZone-item": "_DropZone-item_i675d_56", "DropZone-hitbox": "_DropZone-hitbox_i675d_60" };
+var styles_module_default4 = { "DropZone": "_DropZone_utidm_1", "DropZone--zoomEnabled": "_DropZone--zoomEnabled_utidm_10", "DropZone-renderWrapper": "_DropZone-renderWrapper_utidm_14", "DropZone-content": "_DropZone-content_utidm_18", "DropZone--userIsDragging": "_DropZone--userIsDragging_utidm_23", "DropZone--draggingOverArea": "_DropZone--draggingOverArea_utidm_27", "DropZone--draggingNewComponent": "_DropZone--draggingNewComponent_utidm_28", "DropZone--isAreaSelected": "_DropZone--isAreaSelected_utidm_34", "DropZone--hoveringOverArea": "_DropZone--hoveringOverArea_utidm_35", "DropZone--isDisabled": "_DropZone--isDisabled_utidm_36", "DropZone--isRootZone": "_DropZone--isRootZone_utidm_37", "DropZone--hasChildren": "_DropZone--hasChildren_utidm_43", "DropZone--isDestination": "_DropZone--isDestination_utidm_48", "DropZone-item": "_DropZone-item_utidm_56", "DropZone-hitbox": "_DropZone-hitbox_utidm_60" };
 
 // components/DropZone/context.tsx
 init_react_import();
@@ -30063,7 +30075,7 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
                 },
                 children: [
                   content.map((item, i) => {
-                    var _a2, _b;
+                    var _a2, _b, _c;
                     const componentId = item.props.id;
                     const defaultedProps = __spreadProps(__spreadValues(__spreadValues({}, (_a2 = config.components[item.type]) == null ? void 0 : _a2.defaultProps), item.props), {
                       puck: { renderDropZone: DropZone },
@@ -30093,14 +30105,14 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
                               children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                                 DraggableComponent,
                                 {
-                                  label: item.type.toString(),
+                                  label: (_b = config.components[item.type]["label"]) != null ? _b : item.type.toString(),
                                   id: `draggable-${componentId}`,
                                   index: i,
                                   isSelected,
                                   isLocked: userIsDragging,
                                   forceHover: hoveringComponent === componentId && !userIsDragging,
                                   indicativeHover: userIsDragging && containsZone && hoveringArea === componentId,
-                                  isLoading: (_b = appContext2.componentState[componentId]) == null ? void 0 : _b.loading,
+                                  isLoading: (_c = appContext2.componentState[componentId]) == null ? void 0 : _c.loading,
                                   onMount: () => {
                                     ctx.registerPath({
                                       index: i,
@@ -30188,7 +30200,7 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
                     {
                       "data-puck-placeholder": true,
                       style: __spreadProps(__spreadValues({}, placeholderStyle), {
-                        background: "var(--puck-color-azure-5)",
+                        background: "var(--puck-color-azure-06)",
                         opacity: 0.3,
                         zIndex: 0
                       })
@@ -30252,7 +30264,7 @@ var import_react10 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/IconButton/IconButton.module.css#css-module
 init_react_import();
-var IconButton_module_default = { "IconButton": "_IconButton_38xdr_1", "IconButton-title": "_IconButton-title_38xdr_18" };
+var IconButton_module_default = { "IconButton": "_IconButton_1xqlg_1", "IconButton-title": "_IconButton-title_1xqlg_33" };
 
 // components/IconButton/IconButton.tsx
 var import_react_spinners3 = require("react-spinners");
@@ -30367,14 +30379,14 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css#css-module
 init_react_import();
-var styles_module_default5 = { "SidebarSection": "_SidebarSection_170gs_1", "SidebarSection-title": "_SidebarSection-title_170gs_12", "SidebarSection--noBorderTop": "_SidebarSection--noBorderTop_170gs_20", "SidebarSection-content": "_SidebarSection-content_170gs_24", "SidebarSection--noPadding": "_SidebarSection--noPadding_170gs_28", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_170gs_41", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_170gs_52", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_170gs_41", "SidebarSection-heading": "_SidebarSection-heading_170gs_64", "SidebarSection-loadingOverlay": "_SidebarSection-loadingOverlay_170gs_68" };
+var styles_module_default5 = { "SidebarSection": "_SidebarSection_125qe_1", "SidebarSection-title": "_SidebarSection-title_125qe_12", "SidebarSection--noBorderTop": "_SidebarSection--noBorderTop_125qe_20", "SidebarSection-content": "_SidebarSection-content_125qe_24", "SidebarSection--noPadding": "_SidebarSection--noPadding_125qe_28", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_125qe_41", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_125qe_70", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_125qe_41", "SidebarSection-heading": "_SidebarSection-heading_125qe_82", "SidebarSection-loadingOverlay": "_SidebarSection-loadingOverlay_125qe_86" };
 
 // components/Heading/index.tsx
 init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Heading/styles.module.css#css-module
 init_react_import();
-var styles_module_default6 = { "Heading": "_Heading_1bvy5_1", "Heading--xxxxl": "_Heading--xxxxl_1bvy5_13", "Heading--xxxl": "_Heading--xxxl_1bvy5_19", "Heading--xxl": "_Heading--xxl_1bvy5_23", "Heading--xl": "_Heading--xl_1bvy5_27", "Heading--l": "_Heading--l_1bvy5_31", "Heading--m": "_Heading--m_1bvy5_35", "Heading--s": "_Heading--s_1bvy5_39", "Heading--xs": "_Heading--xs_1bvy5_43" };
+var styles_module_default6 = { "Heading": "_Heading_qxrry_1", "Heading--xxxxl": "_Heading--xxxxl_qxrry_12", "Heading--xxxl": "_Heading--xxxl_qxrry_18", "Heading--xxl": "_Heading--xxl_qxrry_22", "Heading--xl": "_Heading--xl_qxrry_26", "Heading--l": "_Heading--l_qxrry_30", "Heading--m": "_Heading--m_qxrry_34", "Heading--s": "_Heading--s_qxrry_38", "Heading--xs": "_Heading--xs_qxrry_42" };
 
 // components/Heading/index.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
@@ -30482,7 +30494,7 @@ var SidebarSection = ({
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: getClassName8("title"), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: getClassName8("breadcrumbs"), children: [
           showBreadcrumbs ? breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: getClassName8("breadcrumb"), children: [
             /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-              "div",
+              "button",
               {
                 className: getClassName8("breadcrumbLabel"),
                 onClick: () => setUi({ itemSelector: breadcrumb.selector }),
@@ -31000,7 +31012,10 @@ var useResolvedData = (appState, config, dispatch) => {
   );
   const runResolvers = () => __async(void 0, null, function* () {
     const newData = newAppState.data;
-    const flatContent = Object.keys(newData.zones || {}).reduce((acc, zone) => [...acc, ...newData.zones[zone]], newData.content).filter((item) => !!config.components[item.type].resolveData);
+    const flatContent = Object.keys(newData.zones || {}).reduce((acc, zone) => [...acc, ...newData.zones[zone]], newData.content).filter((item) => {
+      var _a;
+      return !!((_a = config.components[item.type]) == null ? void 0 : _a.resolveData);
+    });
     const applyIfChange = (dynamicDataMap, dynamicRoot) => {
       const processed = applyDynamicProps(
         appState.data,
@@ -31070,7 +31085,7 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/MenuBar/styles.module.css#css-module
 init_react_import();
-var styles_module_default7 = { "MenuBar": "_MenuBar_12sp7_1", "MenuBar--menuOpen": "_MenuBar--menuOpen_12sp7_14", "MenuBar-inner": "_MenuBar-inner_12sp7_29", "MenuBar-history": "_MenuBar-history_12sp7_45" };
+var styles_module_default7 = { "MenuBar": "_MenuBar_8pf8c_1", "MenuBar--menuOpen": "_MenuBar--menuOpen_8pf8c_14", "MenuBar-inner": "_MenuBar-inner_8pf8c_29", "MenuBar-history": "_MenuBar-history_8pf8c_45" };
 
 // components/MenuBar/index.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
@@ -31108,14 +31123,14 @@ var MenuBar = ({
             ChevronLeft,
             {
               size: 21,
-              stroke: hasPast ? "var(--puck-color-black)" : "var(--puck-color-grey-7)"
+              stroke: hasPast ? "var(--puck-color-black)" : "var(--puck-color-grey-08)"
             }
           ) }),
           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconButton, { title: "redo", disabled: !hasFuture, onClick: forward, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             ChevronRight,
             {
               size: 21,
-              stroke: hasFuture ? "var(--puck-color-black)" : "var(--puck-color-grey-7)"
+              stroke: hasFuture ? "var(--puck-color-black)" : "var(--puck-color-grey-08)"
             }
           ) })
         ] }),
@@ -31140,7 +31155,7 @@ var MenuBar = ({
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css#css-module
 init_react_import();
-var styles_module_default8 = { "Puck": "_Puck_17hk3_19", "Puck--leftSideBarVisible": "_Puck--leftSideBarVisible_17hk3_35", "Puck--rightSideBarVisible": "_Puck--rightSideBarVisible_17hk3_41", "Puck-header": "_Puck-header_17hk3_95", "Puck-headerInner": "_Puck-headerInner_17hk3_104", "Puck-headerToggle": "_Puck-headerToggle_17hk3_114", "Puck-rightSideBarToggle": "_Puck-rightSideBarToggle_17hk3_121", "Puck-leftSideBarToggle": "_Puck-leftSideBarToggle_17hk3_122", "Puck-headerTitle": "_Puck-headerTitle_17hk3_126", "Puck-headerPath": "_Puck-headerPath_17hk3_130", "Puck-headerTools": "_Puck-headerTools_17hk3_137", "Puck-menuButton": "_Puck-menuButton_17hk3_143", "Puck--menuOpen": "_Puck--menuOpen_17hk3_148", "Puck-leftSideBar": "_Puck-leftSideBar_17hk3_122", "Puck-frame": "_Puck-frame_17hk3_167", "Puck-root": "_Puck-root_17hk3_175", "Puck-rightSideBar": "_Puck-rightSideBar_17hk3_121" };
+var styles_module_default8 = { "Puck": "_Puck_1mnww_19", "Puck--leftSideBarVisible": "_Puck--leftSideBarVisible_1mnww_36", "Puck--rightSideBarVisible": "_Puck--rightSideBarVisible_1mnww_42", "Puck-header": "_Puck-header_1mnww_96", "Puck-headerInner": "_Puck-headerInner_1mnww_105", "Puck-headerToggle": "_Puck-headerToggle_1mnww_115", "Puck-rightSideBarToggle": "_Puck-rightSideBarToggle_1mnww_122", "Puck-leftSideBarToggle": "_Puck-leftSideBarToggle_1mnww_123", "Puck-headerTitle": "_Puck-headerTitle_1mnww_127", "Puck-headerPath": "_Puck-headerPath_1mnww_131", "Puck-headerTools": "_Puck-headerTools_1mnww_138", "Puck-menuButton": "_Puck-menuButton_1mnww_144", "Puck--menuOpen": "_Puck--menuOpen_1mnww_149", "Puck-leftSideBar": "_Puck-leftSideBar_1mnww_123", "Puck-frame": "_Puck-frame_1mnww_168", "Puck-root": "_Puck-root_1mnww_176", "Puck-rightSideBar": "_Puck-rightSideBar_1mnww_122" };
 
 // components/Puck/components/Fields/index.tsx
 init_react_import();
@@ -31151,7 +31166,7 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/styles.module.css#css-module
 init_react_import();
-var styles_module_default9 = { "Input": "_Input_1v7zr_1", "Input-label": "_Input-label_1v7zr_27", "Input-labelIcon": "_Input-labelIcon_1v7zr_35", "Input-disabledIcon": "_Input-disabledIcon_1v7zr_41", "Input-input": "_Input-input_1v7zr_46", "Input--readOnly": "_Input--readOnly_1v7zr_69", "Input-radioGroupItems": "_Input-radioGroupItems_1v7zr_87", "Input-radio": "_Input-radio_1v7zr_87", "Input-radioInner": "_Input-radioInner_1v7zr_104", "Input-radioInput": "_Input-radioInput_1v7zr_126" };
+var styles_module_default9 = { "Input": "_Input_1qi5b_1", "Input-label": "_Input-label_1qi5b_26", "Input-labelIcon": "_Input-labelIcon_1qi5b_34", "Input-disabledIcon": "_Input-disabledIcon_1qi5b_41", "Input-input": "_Input-input_1qi5b_46", "Input--readOnly": "_Input--readOnly_1qi5b_90", "Input-radioGroupItems": "_Input-radioGroupItems_1qi5b_101", "Input-radio": "_Input-radio_1qi5b_101", "Input-radioInner": "_Input-radioInner_1qi5b_118", "Input-radioInput": "_Input-radioInput_1qi5b_163" };
 
 // components/InputOrGroup/index.tsx
 var import_react18 = require("react");
@@ -31164,7 +31179,7 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/fields/ArrayField/styles.module.css#css-module
 init_react_import();
-var styles_module_default10 = { "ArrayField": "_ArrayField_1auyc_5", "ArrayField--isDraggingFrom": "_ArrayField--isDraggingFrom_1auyc_13", "ArrayField-addButton": "_ArrayField-addButton_1auyc_17", "ArrayField--hasItems": "_ArrayField--hasItems_1auyc_31", "ArrayFieldItem": "_ArrayFieldItem_1auyc_45", "ArrayFieldItem--isDragging": "_ArrayFieldItem--isDragging_1auyc_53", "ArrayFieldItem--isExpanded": "_ArrayFieldItem--isExpanded_1auyc_58", "ArrayFieldItem-summary": "_ArrayFieldItem-summary_1auyc_73", "ArrayFieldItem--readOnly": "_ArrayFieldItem--readOnly_1auyc_86", "ArrayFieldItem-body": "_ArrayFieldItem-body_1auyc_107", "ArrayFieldItem-fieldset": "_ArrayFieldItem-fieldset_1auyc_115", "ArrayFieldItem-rhs": "_ArrayFieldItem-rhs_1auyc_122", "ArrayFieldItem-actions": "_ArrayFieldItem-actions_1auyc_128", "ArrayFieldItem-action": "_ArrayFieldItem-action_1auyc_128" };
+var styles_module_default10 = { "ArrayField": "_ArrayField_1txra_5", "ArrayField--isDraggingFrom": "_ArrayField--isDraggingFrom_1txra_13", "ArrayField-addButton": "_ArrayField-addButton_1txra_17", "ArrayField--hasItems": "_ArrayField--hasItems_1txra_32", "ArrayFieldItem": "_ArrayFieldItem_1txra_61", "ArrayFieldItem--isDragging": "_ArrayFieldItem--isDragging_1txra_69", "ArrayFieldItem--isExpanded": "_ArrayFieldItem--isExpanded_1txra_74", "ArrayFieldItem-summary": "_ArrayFieldItem-summary_1txra_84", "ArrayFieldItem--readOnly": "_ArrayFieldItem--readOnly_1txra_108", "ArrayFieldItem-body": "_ArrayFieldItem-body_1txra_142", "ArrayFieldItem-fieldset": "_ArrayFieldItem-fieldset_1txra_150", "ArrayFieldItem-rhs": "_ArrayFieldItem-rhs_1txra_157", "ArrayFieldItem-actions": "_ArrayFieldItem-actions_1txra_163" };
 
 // components/InputOrGroup/fields/ArrayField/index.tsx
 var import_dnd5 = require("@hello-pangea/dnd");
@@ -31332,6 +31347,7 @@ var ArrayField = ({
                                   !readOnly && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: getClassNameItem2("actions"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: getClassNameItem2("action"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                                     IconButton,
                                     {
+                                      disabled: field.min !== void 0 && field.min >= localState.arrayState.items.length,
                                       onClick: (e) => {
                                         e.stopPropagation();
                                         const existingValue = [
@@ -31396,6 +31412,7 @@ var ArrayField = ({
                     "button",
                     {
                       className: getClassName10("addButton"),
+                      disabled: field.max !== void 0 && localState.arrayState.items.length >= field.max,
                       onClick: () => {
                         const existingValue = value || [];
                         const newValue = [
@@ -31405,7 +31422,7 @@ var ArrayField = ({
                         const newArrayState = regenerateArrayState(newValue);
                         onChange(newValue, mapArrayStateToUi(newArrayState));
                       },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Plus, { size: "21" })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Plus, { size: 21 })
                     }
                   )
                 ]
@@ -31456,6 +31473,7 @@ var DefaultField = ({
             }
           },
           readOnly,
+          tabIndex: readOnly ? -1 : void 0,
           id,
           min: field.type === "number" ? field.min : void 0,
           max: field.type === "number" ? field.max : void 0
@@ -31475,7 +31493,7 @@ var import_react16 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ExternalInput/styles.module.css#css-module
 init_react_import();
-var styles_module_default11 = { "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" };
+var styles_module_default11 = { "ExternalInput-actions": "_ExternalInput-actions_q3l5a_1", "ExternalInput-button": "_ExternalInput-button_q3l5a_5", "ExternalInput--dataSelected": "_ExternalInput--dataSelected_q3l5a_25", "ExternalInput-detachButton": "_ExternalInput-detachButton_q3l5a_32", "ExternalInputModal": "_ExternalInputModal_q3l5a_74", "ExternalInputModal-grid": "_ExternalInputModal-grid_q3l5a_84", "ExternalInputModal--filtersToggled": "_ExternalInputModal--filtersToggled_q3l5a_95", "ExternalInputModal-filters": "_ExternalInputModal-filters_q3l5a_100", "ExternalInputModal-masthead": "_ExternalInputModal-masthead_q3l5a_119", "ExternalInputModal-tableWrapper": "_ExternalInputModal-tableWrapper_q3l5a_128", "ExternalInputModal-table": "_ExternalInputModal-table_q3l5a_128", "ExternalInputModal-thead": "_ExternalInputModal-thead_q3l5a_144", "ExternalInputModal-th": "_ExternalInputModal-th_q3l5a_144", "ExternalInputModal-td": "_ExternalInputModal-td_q3l5a_159", "ExternalInputModal-tr": "_ExternalInputModal-tr_q3l5a_164", "ExternalInputModal-tbody": "_ExternalInputModal-tbody_q3l5a_171", "ExternalInputModal--hasData": "_ExternalInputModal--hasData_q3l5a_197", "ExternalInputModal-loadingBanner": "_ExternalInputModal-loadingBanner_q3l5a_201", "ExternalInputModal--isLoading": "_ExternalInputModal--isLoading_q3l5a_218", "ExternalInputModal-searchForm": "_ExternalInputModal-searchForm_q3l5a_222", "ExternalInputModal-search": "_ExternalInputModal-search_q3l5a_222", "ExternalInputModal-searchIcon": "_ExternalInputModal-searchIcon_q3l5a_259", "ExternalInputModal-searchIconText": "_ExternalInputModal-searchIconText_q3l5a_284", "ExternalInputModal-searchInput": "_ExternalInputModal-searchInput_q3l5a_294", "ExternalInputModal-searchActions": "_ExternalInputModal-searchActions_q3l5a_308", "ExternalInputModal-searchActionIcon": "_ExternalInputModal-searchActionIcon_q3l5a_321", "ExternalInputModal-footer": "_ExternalInputModal-footer_q3l5a_325" };
 
 // components/Modal/index.tsx
 init_react_import();
@@ -31483,7 +31501,7 @@ var import_react15 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Modal/styles.module.css#css-module
 init_react_import();
-var styles_module_default12 = { "Modal": "_Modal_hx2u6_1", "Modal--isOpen": "_Modal--isOpen_hx2u6_15", "Modal-inner": "_Modal-inner_hx2u6_19" };
+var styles_module_default12 = { "Modal": "_Modal_zud0i_1", "Modal--isOpen": "_Modal--isOpen_zud0i_15", "Modal-inner": "_Modal-inner_zud0i_19" };
 
 // components/Modal/index.tsx
 var import_react_dom = __toESM(require_react_dom());
@@ -31527,13 +31545,23 @@ var ExternalInput = ({
   name,
   id
 }) => {
-  const { mapProp = (val) => val } = field || {};
+  const {
+    mapProp = (val) => val,
+    mapRow = (val) => val,
+    filterFields
+  } = field || {};
   const [data, setData] = (0, import_react16.useState)([]);
   const [isOpen, setOpen] = (0, import_react16.useState)(false);
   const [isLoading, setIsLoading] = (0, import_react16.useState)(true);
+  const hasFilterFields = !!filterFields;
+  const [filters, setFilters] = (0, import_react16.useState)(field.initialFilters || {});
+  const [filtersToggled, setFiltersToggled] = (0, import_react16.useState)(hasFilterFields);
+  const mappedData = (0, import_react16.useMemo)(() => {
+    return data.map(mapRow);
+  }, [data]);
   const keys = (0, import_react16.useMemo)(() => {
     const validKeys = /* @__PURE__ */ new Set();
-    for (const item of data) {
+    for (const item of mappedData) {
       for (const key of Object.keys(item)) {
         if (typeof item[key] === "string" || typeof item[key] === "number") {
           validKeys.add(key);
@@ -31541,13 +31569,13 @@ var ExternalInput = ({
       }
     }
     return Array.from(validKeys);
-  }, [data]);
+  }, [mappedData]);
   const [searchQuery, setSearchQuery] = (0, import_react16.useState)(field.initialQuery || "");
   const search = (0, import_react16.useCallback)(
-    (query) => __async(void 0, null, function* () {
+    (query, filters2) => __async(void 0, null, function* () {
       setIsLoading(true);
-      const cacheKey = `${id}-${name}-${query}`;
-      const listData = dataCache[cacheKey] || (yield field.fetchList({ query }));
+      const cacheKey = `${id}-${name}-${query}-${JSON.stringify(filters2)}`;
+      const listData = dataCache[cacheKey] || (yield field.fetchList({ query, filters: filters2 }));
       if (listData) {
         setData(listData);
         setIsLoading(false);
@@ -31557,7 +31585,7 @@ var ExternalInput = ({
     [name, field]
   );
   (0, import_react16.useEffect)(() => {
-    search(searchQuery);
+    search(searchQuery, filters);
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "div",
@@ -31592,78 +31620,109 @@ var ExternalInput = ({
           )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Modal, { onClose: () => setOpen(false), isOpen, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-          "div",
+          "form",
           {
             className: getClassNameModal({
               isLoading,
               loaded: !isLoading,
-              hasData: data.length > 0
+              hasData: mappedData.length > 0,
+              filtersToggled
             }),
+            onSubmit: (e) => {
+              e.preventDefault();
+              search(searchQuery, filters);
+            },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: getClassNameModal("masthead"), children: [
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Heading, { rank: 2, size: "xxl", children: "Select content" }),
-                field.showSearch && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-                  "form",
-                  {
-                    className: getClassNameModal("searchForm"),
-                    onSubmit: (e) => {
-                      e.preventDefault();
-                      search(searchQuery);
-                    },
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: getClassNameModal("search"), children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: getClassNameModal("searchIconText"), children: "Search" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: getClassNameModal("searchIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Search, { size: "18" }) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.jsx)(Button, { type: "submit", loading: isLoading, disabled: isLoading, children: "Search" })
-                    ]
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: getClassNameModal("tableWrapper"), children: [
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("table", { className: getClassNameModal("table"), children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("thead", { className: getClassNameModal("thead"), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("tr", { className: getClassNameModal("tr"), children: keys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                    "th",
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: getClassNameModal("masthead"), children: field.showSearch ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: getClassNameModal("searchForm"), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: getClassNameModal("search"), children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: getClassNameModal("searchIconText"), children: "Search" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: getClassNameModal("searchIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Search, { size: "18" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                    "input",
+                    {
+                      className: getClassNameModal("searchInput"),
+                      name: "q",
+                      type: "search",
+                      placeholder: field.placeholder,
+                      onChange: (e) => {
+                        setSearchQuery(e.currentTarget.value);
+                      },
+                      autoComplete: "off",
+                      value: searchQuery
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: getClassNameModal("searchActions"), children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { type: "submit", loading: isLoading, fullWidth: true, children: "Search" }),
+                  hasFilterFields && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: getClassNameModal("searchActionIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                    IconButton,
                     {
-                      className: getClassNameModal("th"),
-                      style: { textAlign: "left" },
-                      children: key
+                      title: "Toggle filters",
+                      onClick: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        setFiltersToggled(!filtersToggled);
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SlidersHorizontal, { size: 20 })
+                    }
+                  ) })
+                ] })
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Heading, { rank: 2, size: "xs", children: field.placeholder || "Select data" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: getClassNameModal("grid"), children: [
+                hasFilterFields && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: getClassNameModal("filters"), children: hasFilterFields && Object.keys(filterFields).map((fieldName) => {
+                  const filterField = filterFields[fieldName];
+                  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                    InputOrGroup,
+                    {
+                      field: filterField,
+                      name: fieldName,
+                      id: `external_field_${fieldName}_filter`,
+                      label: filterField.label || fieldName,
+                      value: filters[fieldName],
+                      onChange: (value2) => {
+                        const newFilters = __spreadProps(__spreadValues({}, filters), { [fieldName]: value2 });
+                        setFilters(newFilters);
+                        search(searchQuery, newFilters);
+                      }
                     },
-                    key
-                  )) }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("tbody", { className: getClassNameModal("tbody"), children: data.map((item, i) => {
-                    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                      "tr",
+                    fieldName
+                  );
+                }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: getClassNameModal("tableWrapper"), children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("table", { className: getClassNameModal("table"), children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("thead", { className: getClassNameModal("thead"), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("tr", { className: getClassNameModal("tr"), children: keys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                      "th",
                       {
-                        style: { whiteSpace: "nowrap" },
-                        className: getClassNameModal("tr"),
-                        onClick: (e) => {
-                          onChange(mapProp(item));
-                          setOpen(false);
-                        },
-                        children: keys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("td", { className: getClassNameModal("td"), children: item[key] }, key))
+                        className: getClassNameModal("th"),
+                        style: { textAlign: "left" },
+                        children: key
                       },
-                      i
-                    );
-                  }) })
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: getClassNameModal("loadingBanner"), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_spinners5.ClipLoader, { size: 24, "aria-label": "Loading" }) })
+                      key
+                    )) }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("tbody", { className: getClassNameModal("tbody"), children: mappedData.map((item, i) => {
+                      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                        "tr",
+                        {
+                          style: { whiteSpace: "nowrap" },
+                          className: getClassNameModal("tr"),
+                          onClick: () => {
+                            onChange(mapProp(data[i]));
+                            setOpen(false);
+                          },
+                          children: keys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("td", { className: getClassNameModal("td"), children: item[key] }, key))
+                        },
+                        i
+                      );
+                    }) })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: getClassNameModal("loadingBanner"), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_spinners5.ClipLoader, { size: 24, "aria-label": "Loading" }) })
+                ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: getClassNameModal("noContentBanner"), children: "No results." })
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: getClassNameModal("footer"), children: [
+                mappedData.length,
+                " result",
+                mappedData.length === 1 ? "" : "s"
+              ] })
             ]
           }
         ) })
@@ -31709,6 +31768,7 @@ var ExternalField = ({
             // DEPRECATED
             placeholder: ((_a = deprecatedField.adaptor) == null ? void 0 : _a.name) ? `Select from ${deprecatedField.adaptor.name}` : validField.placeholder || "Select data",
             mapProp: ((_b = deprecatedField.adaptor) == null ? void 0 : _b.mapProp) || validField.mapProp,
+            mapRow: validField.mapRow,
             fetchList: ((_c = deprecatedField.adaptor) == null ? void 0 : _c.fetchList) ? () => __async(void 0, null, function* () {
               return yield deprecatedField.adaptor.fetchList(
                 deprecatedField.adaptorParams
@@ -31857,6 +31917,7 @@ var TextareaField = ({
           value: typeof value === "undefined" ? "" : value,
           onChange: (e) => onChange(e.currentTarget.value),
           readOnly,
+          tabIndex: readOnly ? -1 : void 0,
           rows: 5
         }
       )
@@ -31872,7 +31933,7 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/fields/ObjectField/styles.module.css#css-module
 init_react_import();
-var styles_module_default13 = { "ObjectField": "_ObjectField_56z4t_5", "ObjectField-fieldset": "_ObjectField-fieldset_56z4t_13" };
+var styles_module_default13 = { "ObjectField": "_ObjectField_15j63_5", "ObjectField-fieldset": "_ObjectField-fieldset_15j63_13" };
 
 // components/InputOrGroup/fields/ObjectField/index.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
@@ -32036,7 +32097,7 @@ var InputOrGroup = (_a) => {
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css#css-module
 init_react_import();
-var styles_module_default14 = { "PuckFields": "_PuckFields_1276r_1", "PuckFields-loadingOverlay": "_PuckFields-loadingOverlay_1276r_5" };
+var styles_module_default14 = { "PuckFields": "_PuckFields_17k3p_1", "PuckFields-loadingOverlay": "_PuckFields-loadingOverlay_17k3p_6" };
 
 // components/Puck/components/Fields/index.tsx
 var import_react19 = require("react");
@@ -32193,17 +32254,18 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ComponentList/styles.module.css#css-module
 init_react_import();
-var styles_module_default15 = { "ComponentList": "_ComponentList_1di93_1", "ComponentList--isExpanded": "_ComponentList--isExpanded_1di93_6", "ComponentList-content": "_ComponentList-content_1di93_10", "ComponentList-title": "_ComponentList-title_1di93_18", "ComponentList-titleIcon": "_ComponentList-titleIcon_1di93_39" };
+var styles_module_default15 = { "ComponentList": "_ComponentList_odh9d_1", "ComponentList--isExpanded": "_ComponentList--isExpanded_odh9d_5", "ComponentList-content": "_ComponentList-content_odh9d_9", "ComponentList-title": "_ComponentList-title_odh9d_17", "ComponentList-titleIcon": "_ComponentList-titleIcon_odh9d_53" };
 
 // components/ComponentList/index.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var getClassName20 = get_class_name_factory_default("ComponentList", styles_module_default15);
 var ComponentListItem = ({
   name,
+  label,
   index
 }) => {
   const { overrides } = useAppContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Drawer.Item, { name, index, children: overrides.componentItem });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Drawer.Item, { label, name, index, children: overrides.componentItem });
 };
 var ComponentList = ({
   children,
@@ -32214,7 +32276,7 @@ var ComponentList = ({
   const { expanded = true } = state.ui.componentList[id] || {};
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: getClassName20({ isExpanded: expanded }), children: [
     title && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-      "div",
+      "button",
       {
         className: getClassName20("title"),
         onClick: () => setUi({
@@ -32232,9 +32294,11 @@ var ComponentList = ({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: getClassName20("content"), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Drawer, { droppableId: `component-list${title ? `:${title}` : ""}`, children: children || Object.keys(config.components).map((componentKey, i) => {
+      var _a;
       return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         ComponentListItem,
         {
+          label: (_a = config.components[componentKey]["label"]) != null ? _a : componentKey,
           name: componentKey,
           index: i
         },
@@ -32265,10 +32329,12 @@ var useComponentList = (config, ui) => {
               id: categoryKey,
               title: category.title || categoryKey,
               children: category.components.map((componentName, i) => {
+                var _a2;
                 matchedComponents.push(componentName);
                 return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                   ComponentList.Item,
                   {
+                    label: (_a2 = config.components[componentName]["label"]) != null ? _a2 : componentName,
                     name: componentName,
                     index: i
                   },
@@ -32291,10 +32357,12 @@ var useComponentList = (config, ui) => {
               id: "other",
               title: ((_c = ui.componentList.other) == null ? void 0 : _c.title) || "Other",
               children: remainingComponents.map((componentName, i) => {
+                var _a2;
                 return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                   ComponentList.Item,
                   {
                     name: componentName,
+                    label: (_a2 = config.components[componentName]["label"]) != null ? _a2 : componentName,
                     index: i
                   },
                   componentName
@@ -32307,7 +32375,7 @@ var useComponentList = (config, ui) => {
       }
       setComponentList(_componentList);
     }
-  }, [config.categories, ui.componentList]);
+  }, [config.categories, config.components, ui.componentList]);
   return componentList;
 };
 
@@ -32378,7 +32446,7 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/styles.module.css#css-module
 init_react_import();
-var styles_module_default16 = { "LayerTree": "_LayerTree_o89yt_1", "LayerTree-zoneTitle": "_LayerTree-zoneTitle_o89yt_11", "LayerTree-helper": "_LayerTree-helper_o89yt_17", "Layer": "_Layer_o89yt_1", "Layer-inner": "_Layer-inner_o89yt_29", "Layer--containsZone": "_Layer--containsZone_o89yt_35", "Layer-clickable": "_Layer-clickable_o89yt_39", "Layer--isSelected": "_Layer--isSelected_o89yt_48", "Layer--isHovering": "_Layer--isHovering_o89yt_49", "Layer-chevron": "_Layer-chevron_o89yt_65", "Layer--childIsSelected": "_Layer--childIsSelected_o89yt_66", "Layer-zones": "_Layer-zones_o89yt_70", "Layer-title": "_Layer-title_o89yt_84", "Layer-name": "_Layer-name_o89yt_93", "Layer-icon": "_Layer-icon_o89yt_99", "Layer-zoneIcon": "_Layer-zoneIcon_o89yt_104" };
+var styles_module_default16 = { "LayerTree": "_LayerTree_1pgw8_1", "LayerTree-zoneTitle": "_LayerTree-zoneTitle_1pgw8_11", "LayerTree-helper": "_LayerTree-helper_1pgw8_17", "Layer": "_Layer_1pgw8_1", "Layer-inner": "_Layer-inner_1pgw8_29", "Layer--containsZone": "_Layer--containsZone_1pgw8_35", "Layer-clickable": "_Layer-clickable_1pgw8_39", "Layer--isSelected": "_Layer--isSelected_1pgw8_61", "Layer-chevron": "_Layer-chevron_1pgw8_77", "Layer--childIsSelected": "_Layer--childIsSelected_1pgw8_78", "Layer-zones": "_Layer-zones_1pgw8_82", "Layer-title": "_Layer-title_1pgw8_96", "Layer-name": "_Layer-name_1pgw8_105", "Layer-icon": "_Layer-icon_1pgw8_111", "Layer-zoneIcon": "_Layer-zoneIcon_1pgw8_116" };
 
 // lib/scroll-into-view.ts
 init_react_import();
@@ -32411,6 +32479,7 @@ var getClassName21 = get_class_name_factory_default("LayerTree", styles_module_d
 var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default16);
 var LayerTree = ({
   data,
+  config,
   zoneContent,
   itemSelector,
   setItemSelector,
@@ -32428,6 +32497,7 @@ var LayerTree = ({
     /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("ul", { className: getClassName21(), children: [
       zoneContent.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: getClassName21("helper"), children: "No items" }),
       zoneContent.map((item, i) => {
+        var _a;
         const isSelected = (itemSelector == null ? void 0 : itemSelector.index) === i && (itemSelector.zone === zone || itemSelector.zone === rootDroppableId && !zone);
         const zonesForItem = findZonesForArea(data, item.props.id);
         const containsZone = Object.keys(zonesForItem).length > 0;
@@ -32452,7 +32522,7 @@ var LayerTree = ({
             }),
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
-                "div",
+                "button",
                 {
                   className: getClassNameLayer("clickable"),
                   onClick: () => {
@@ -32492,7 +32562,7 @@ var LayerTree = ({
                     ),
                     /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: getClassNameLayer("title"), children: [
                       /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: getClassNameLayer("icon"), children: item.type === "Text" || item.type === "Heading" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Type, { size: "16" }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LayoutGrid, { size: "16" }) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: getClassNameLayer("name"), children: item.type })
+                      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: getClassNameLayer("name"), children: (_a = config.components[item.type]["label"]) != null ? _a : item.type })
                     ] })
                   ]
                 }
@@ -32500,6 +32570,7 @@ var LayerTree = ({
               containsZone && Object.keys(zonesForItem).map((zoneKey, idx) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                 LayerTree,
                 {
+                  config,
                   data,
                   zoneContent: zones[zoneKey],
                   setItemSelector,
@@ -32521,7 +32592,7 @@ var LayerTree = ({
 var import_react24 = require("react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var Outline = () => {
-  const { dispatch, state, overrides } = useAppContext();
+  const { dispatch, state, overrides, config } = useAppContext();
   const { data, ui } = state;
   const { itemSelector } = ui;
   const setItemSelector = (0, import_react24.useCallback)(
@@ -32538,6 +32609,7 @@ var Outline = () => {
     (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       LayerTree,
       {
+        config,
         data,
         label: areaContainsZones(data, "root") ? rootDroppableId : "",
         zoneContent: data.content,
@@ -32550,6 +32622,7 @@ var Outline = () => {
         return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           LayerTree,
           {
+            config,
             data,
             label: zoneKey,
             zone: zoneKey,
@@ -32690,6 +32763,7 @@ function Puck({
   headerTitle,
   headerPath
 }) {
+  var _a;
   const historyStore = useHistoryStore();
   const [reducer] = (0, import_react26.useState)(
     () => createReducer({ config, record: historyStore.record })
@@ -32799,8 +32873,8 @@ function Puck({
       console.warn(
         "`renderHeader` is deprecated. Please use `overrides.header` and the `usePuck` hook instead"
       );
-      const RenderHeader = (_a) => {
-        var _b = _a, { actions } = _b, props = __objRest(_b, ["actions"]);
+      const RenderHeader = (_a2) => {
+        var _b = _a2, { actions } = _b, props = __objRest(_b, ["actions"]);
         const Comp = renderHeader;
         return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
       };
@@ -33023,7 +33097,7 @@ function Puck({
                               "div",
                               {
                                 style: {
-                                  background: "var(--puck-color-grey-10)",
+                                  background: "var(--puck-color-grey-11)",
                                   height: "100%",
                                   flexGrow: 1
                                 }
@@ -33038,7 +33112,7 @@ function Puck({
                           noPadding: true,
                           noBorderTop: true,
                           showBreadcrumbs: true,
-                          title: selectedItem ? selectedItem.type : "Page",
+                          title: selectedItem ? (_a = config.components[selectedItem.type]["label"]) != null ? _a : selectedItem.type : "Page",
                           children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Fields, {})
                         }
                       ) })
@@ -33170,8 +33244,8 @@ var resolveAllData = (data, config, onResolveStart, onResolveEnd) => __async(voi
 // lib/use-puck.ts
 init_react_import();
 var usePuck = () => {
-  const { state: appState, config, dispatch } = useAppContext();
-  return { appState, config, dispatch };
+  const { state: appState, config, history, dispatch } = useAppContext();
+  return { appState, config, dispatch, history };
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -33415,6 +33489,14 @@ lucide-react/dist/esm/icons/search.js:
    * See the LICENSE file in the root directory of this source tree.
    *)
 
+lucide-react/dist/esm/icons/sliders-horizontal.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/trash.js:
   (**
    * @license lucide-react v0.298.0 - ISC