@wordpress/dataviews 13.0.0 → 13.1.0

package/build-wp/index.js

@@ -734,7 +734,41 @@ function useConstrainedTabbing() {
 var use_constrained_tabbing_default = useConstrainedTabbing;
 
 // ../compose/build-module/hooks/use-copy-to-clipboard/index.mjs
-import Clipboard from "clipboard";
+async function copyToClipboard(text, trigger) {
+  if (!trigger) {
+    return false;
+  }
+  const { ownerDocument } = trigger;
+  if (!ownerDocument) {
+    return false;
+  }
+  const { defaultView } = ownerDocument;
+  try {
+    if (defaultView?.navigator?.clipboard?.writeText) {
+      await defaultView.navigator.clipboard.writeText(text);
+      return true;
+    }
+    const textarea = ownerDocument.createElement("textarea");
+    textarea.value = text;
+    textarea.setAttribute("readonly", "");
+    textarea.style.position = "fixed";
+    textarea.style.left = "-9999px";
+    textarea.style.top = "-9999px";
+    ownerDocument.body.appendChild(textarea);
+    textarea.select();
+    const success = ownerDocument.execCommand("copy");
+    textarea.remove();
+    return success;
+  } catch {
+    return false;
+  }
+}
+function clearSelection(trigger) {
+  if ("focus" in trigger && typeof trigger.focus === "function") {
+    trigger.focus();
+  }
+  trigger.ownerDocument?.defaultView?.getSelection()?.removeAllRanges();
+}
 function useUpdatedRef(value) {
   const ref = useRef(value);
   useLayoutEffect(() => {
@@ -746,19 +780,24 @@ function useCopyToClipboard(text, onSuccess) {
   const textRef = useUpdatedRef(text);
   const onSuccessRef = useUpdatedRef(onSuccess);
   return useRefEffect((node) => {
-    const clipboard = new Clipboard(node, {
-      text() {
-        return typeof textRef.current === "function" ? textRef.current() : textRef.current || "";
+    let isActive = true;
+    const handleClick = async () => {
+      const textToCopy = typeof textRef.current === "function" ? textRef.current() : textRef.current || "";
+      const success = await copyToClipboard(textToCopy, node);
+      if (!isActive) {
+        return;
       }
-    });
-    clipboard.on("success", ({ clearSelection }) => {
-      clearSelection();
-      if (onSuccessRef.current) {
-        onSuccessRef.current();
+      if (success) {
+        clearSelection(node);
+        if (onSuccessRef.current) {
+          onSuccessRef.current();
+        }
       }
-    });
+    };
+    node.addEventListener("click", handleClick);
     return () => {
-      clipboard.destroy();
+      isActive = false;
+      node.removeEventListener("click", handleClick);
     };
   }, []);
 }
@@ -1036,27 +1075,30 @@ function useEvent(callback) {
 }
 
 // ../compose/build-module/hooks/use-media-query/index.mjs
-var matchMediaCache = /* @__PURE__ */ new Map();
-function getMediaQueryList(query) {
+var perWindowCache = /* @__PURE__ */ new WeakMap();
+function getMediaQueryList(view, query) {
   if (!query) {
     return null;
   }
+  const matchMediaCache = perWindowCache.get(view) ?? /* @__PURE__ */ new Map();
+  if (!perWindowCache.has(view)) {
+    perWindowCache.set(view, matchMediaCache);
+  }
   let match = matchMediaCache.get(query);
   if (match) {
     return match;
   }
-  if (typeof window !== "undefined" && typeof window.matchMedia === "function") {
-    match = window.matchMedia(query);
+  if (typeof view?.matchMedia === "function") {
+    match = view.matchMedia(query);
     matchMediaCache.set(query, match);
     return match;
   }
   return null;
 }
-function useMediaQuery(query) {
+function useMediaQuery(query, view = window) {
   const source = useMemo(() => {
-    const mediaQueryList = getMediaQueryList(query);
+    const mediaQueryList = getMediaQueryList(view, query);
     return {
-      /** @type {(onStoreChange: () => void) => () => void} */
       subscribe(onStoreChange) {
         if (!mediaQueryList) {
           return () => {
@@ -1074,7 +1116,7 @@ function useMediaQuery(query) {
         return mediaQueryList?.matches ?? false;
       }
     };
-  }, [query]);
+  }, [view, query]);
   return useSyncExternalStore(
     source.subscribe,
     source.getValue,
@@ -1119,10 +1161,10 @@ var ViewportMatchWidthContext = createContext(
   null
 );
 ViewportMatchWidthContext.displayName = "ViewportMatchWidthContext";
-var useViewportMatch = (breakpoint2, operator = ">=") => {
+var useViewportMatch = (breakpoint2, operator = ">=", view = window) => {
   const simulatedWidth = useContext(ViewportMatchWidthContext);
   const mediaQuery = !simulatedWidth && `(${CONDITIONS[operator]}: ${BREAKPOINTS[breakpoint2]}px)`;
-  const mediaQueryResult = useMediaQuery(mediaQuery || void 0);
+  const mediaQueryResult = useMediaQuery(mediaQuery || void 0, view);
   if (simulatedWidth) {
     return OPERATOR_EVALUATORS[operator](
       BREAKPOINTS[breakpoint2],
@@ -1255,10 +1297,10 @@ function useObservableValue(map, name) {
 // ../ui/build-module/badge/badge.mjs
 import { useRender, mergeProps } from "@base-ui/react";
 import clsx from "clsx";
-if (typeof document !== "undefined" && true && !document.head.querySelector("style[data-wp-hash='244b5c59c0']")) {
+if (typeof document !== "undefined" && true && !document.head.querySelector("style[data-wp-hash='d16010fae9']")) {
   const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "244b5c59c0");
-  style.appendChild(document.createTextNode('@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._96e6251aad1a6136__badge{border-radius:var(--wpds-border-radius-lg,8px);font-family:var(--wpds-font-family-body,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-size:var(--wpds-font-size-sm,12px);font-weight:var(--wpds-font-weight-regular,400);line-height:var(--wpds-font-line-height-xs,16px);padding-block:var(--wpds-dimension-padding-xs,4px);padding-inline:var(--wpds-dimension-padding-sm,8px)}._99f7158cb520f750__is-high-intent{background-color:var(--wpds-color-bg-surface-error,#f6e6e3);color:var(--wpds-color-fg-content-error,#470000)}.c20ebef2365bc8b7__is-medium-intent{background-color:var(--wpds-color-bg-surface-warning,#fde6bd);color:var(--wpds-color-fg-content-warning,#2e1900)}._365e1626c6202e52__is-low-intent{background-color:var(--wpds-color-bg-surface-caution,#fee994);color:var(--wpds-color-fg-content-caution,#281d00)}._33f8198127ddf4ef__is-stable-intent{background-color:var(--wpds-color-bg-surface-success,#c5f7cc);color:var(--wpds-color-fg-content-success,#002900)}._04c1aca8fc449412__is-informational-intent{background-color:var(--wpds-color-bg-surface-info,#deebfa);color:var(--wpds-color-fg-content-info,#001b4f)}._90726e69d495ec19__is-draft-intent{background-color:var(--wpds-color-bg-surface-neutral-weak,#f0f0f0);color:var(--wpds-color-fg-content-neutral,#1e1e1e)}._898f4a544993bd39__is-none-intent{background-color:var(--wpds-color-bg-surface-neutral,#f8f8f8);color:var(--wpds-color-fg-content-neutral-weak,#6d6d6d)}}'));
+  style.setAttribute("data-wp-hash", "d16010fae9");
+  style.appendChild(document.createTextNode('@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._96e6251aad1a6136__badge{border-radius:var(--wpds-border-radius-lg,8px);font-family:var(--wpds-font-family-body,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-size:var(--wpds-font-size-sm,12px);font-weight:var(--wpds-font-weight-regular,400);line-height:var(--wpds-font-line-height-xs,16px);padding-block:var(--wpds-dimension-padding-xs,4px);padding-inline:var(--wpds-dimension-padding-sm,8px)}._99f7158cb520f750__is-high-intent{background-color:var(--wpds-color-bg-surface-error,#f6e6e3);color:var(--wpds-color-fg-content-error,#470000)}.c20ebef2365bc8b7__is-medium-intent{background-color:var(--wpds-color-bg-surface-warning,#fde6bd);color:var(--wpds-color-fg-content-warning,#2e1900)}._365e1626c6202e52__is-low-intent{background-color:var(--wpds-color-bg-surface-caution,#fee994);color:var(--wpds-color-fg-content-caution,#281d00)}._33f8198127ddf4ef__is-stable-intent{background-color:var(--wpds-color-bg-surface-success,#c5f7cc);color:var(--wpds-color-fg-content-success,#002900)}._04c1aca8fc449412__is-informational-intent{background-color:var(--wpds-color-bg-surface-info,#deebfa);color:var(--wpds-color-fg-content-info,#001b4f)}._90726e69d495ec19__is-draft-intent{background-color:var(--wpds-color-bg-surface-neutral-weak,#f0f0f0);color:var(--wpds-color-fg-content-neutral,#1e1e1e)}._898f4a544993bd39__is-none-intent{background-color:var(--wpds-color-bg-surface-neutral-strong,#fff);border:var(--wpds-border-width-xs,1px) solid var(--wpds-color-stroke-surface-neutral,#d8d8d8);color:var(--wpds-color-fg-content-neutral,#1e1e1e);padding-block:calc(var(--wpds-dimension-padding-xs, 4px) - var(--wpds-border-width-xs, 1px));padding-inline:calc(var(--wpds-dimension-padding-sm, 8px) - var(--wpds-border-width-xs, 1px))}}'));
   document.head.appendChild(style);
 }
 var style_default = { "badge": "_96e6251aad1a6136__badge", "is-high-intent": "_99f7158cb520f750__is-high-intent", "is-medium-intent": "c20ebef2365bc8b7__is-medium-intent", "is-low-intent": "_365e1626c6202e52__is-low-intent", "is-stable-intent": "_33f8198127ddf4ef__is-stable-intent", "is-informational-intent": "_04c1aca8fc449412__is-informational-intent", "is-draft-intent": "_90726e69d495ec19__is-draft-intent", "is-none-intent": "_898f4a544993bd39__is-none-intent" };
@@ -1298,7 +1340,7 @@ function addContainer(ariaLive = "polite") {
   container.className = "a11y-speak-region";
   container.setAttribute(
     "style",
-    "position:absolute;margin:-1px;padding:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);border:0;word-wrap:normal !important;"
+    "position:absolute;margin:-1px;padding:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);border:0;word-wrap:normal !important;word-break:normal !important;"
   );
   container.setAttribute("aria-live", ariaLive);
   container.setAttribute("aria-relevant", "additions text");
@@ -1319,7 +1361,7 @@ function addIntroText() {
   introText.textContent = __2("Notifications");
   introText.setAttribute(
     "style",
-    "position:absolute;margin:-1px;padding:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);border:0;word-wrap:normal !important;"
+    "position:absolute;margin:-1px;padding:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);border:0;word-wrap:normal !important;word-break:normal !important;"
   );
   introText.setAttribute("hidden", "");
   const { body } = document;
@@ -1569,6 +1611,7 @@ var unseen_default = /* @__PURE__ */ jsx37(SVG, { xmlns: "http://www.w3.org/2000
 
 // ../private-apis/build-module/implementation.mjs
 var CORE_MODULES_USING_PRIVATE_APIS = [
+  "@wordpress/admin-ui",
   "@wordpress/block-directory",
   "@wordpress/block-editor",
   "@wordpress/block-library",
@@ -1765,7 +1808,7 @@ var dataviews_context_default = DataViewsContext;
 import { __ as __35, isRTL as isRTL12 } from "@wordpress/i18n";
 
 // src/components/dataviews-layouts/table/index.tsx
-import clsx34 from "clsx";
+import clsx32 from "clsx";
 import { __ as __23, sprintf as sprintf6, isRTL as isRTL10 } from "@wordpress/i18n";
 
 // ../components/build-module/composite/index.mjs
@@ -2753,7 +2796,7 @@ function UnforwardedTooltip(props, ref) {
       alternative: "`placement` prop"
     });
   }
-  computedPlacement = computedPlacement || "bottom";
+  computedPlacement = computedPlacement || "top";
   const tooltipStore = Ariakit8.useTooltipStore({
     placement: computedPlacement,
     showTimeout: delay
@@ -2989,7 +3032,8 @@ var visuallyHidden = {
   padding: 0,
   position: "absolute",
   width: "1px",
-  wordWrap: "normal"
+  wordWrap: "normal",
+  wordBreak: "normal"
 };
 
 // ../components/build-module/view/component.mjs
@@ -12371,97 +12415,9 @@ var {
   unlock: unlock2
 } = __dangerousOptInToUnstableAPIsOnlyForCoreModules("I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.", "@wordpress/components");
 
-// ../components/build-module/avatar/component.mjs
+// ../components/build-module/badge/index.mjs
 import clsx30 from "clsx";
 import { jsx as _jsx107, jsxs as _jsxs32 } from "react/jsx-runtime";
-function Avatar({
-  className: className2,
-  src,
-  name,
-  label,
-  badge = false,
-  size: size3 = "default",
-  borderColor: borderColor2,
-  status,
-  statusIndicator,
-  style,
-  ...props
-}) {
-  const showBadge = badge && !!name;
-  const initials = name ? name.split(/\s+/).slice(0, 2).map((word) => word[0]).join("").toUpperCase() : void 0;
-  const customProperties = {
-    ...style,
-    ...src ? {
-      "--components-avatar-url": `url(${src})`
-    } : {},
-    ...borderColor2 ? {
-      "--components-avatar-outline-color": borderColor2
-    } : {}
-  };
-  const avatar = /* @__PURE__ */ _jsxs32("div", {
-    className: clsx30("components-avatar", className2, {
-      "has-avatar-border-color": !!borderColor2,
-      "has-src": !!src,
-      "has-badge": showBadge,
-      "is-small": size3 === "small",
-      "has-status": !!status,
-      [`is-${status}`]: !!status
-    }),
-    style: customProperties,
-    role: "img",
-    "aria-label": name,
-    ...props,
-    children: [/* @__PURE__ */ _jsxs32("span", {
-      className: "components-avatar__image",
-      children: [!src && initials, !!status && !!statusIndicator && /* @__PURE__ */ _jsx107("span", {
-        className: "components-avatar__status-indicator",
-        children: /* @__PURE__ */ _jsx107(icon_default2, {
-          icon: statusIndicator
-        })
-      })]
-    }), showBadge && /* @__PURE__ */ _jsx107("span", {
-      className: "components-avatar__name",
-      children: label || name
-    })]
-  });
-  if (name && (!showBadge || label)) {
-    return /* @__PURE__ */ _jsx107(tooltip_default, {
-      text: name,
-      children: avatar
-    });
-  }
-  return avatar;
-}
-var component_default24 = Avatar;
-
-// ../components/build-module/avatar-group/component.mjs
-import clsx31 from "clsx";
-import { jsx as _jsx108, jsxs as _jsxs33 } from "react/jsx-runtime";
-function AvatarGroup({
-  className: className2,
-  max = 3,
-  children,
-  ...props
-}) {
-  const childArray = Children.toArray(children);
-  const visible = childArray.slice(0, max);
-  const overflowCount = childArray.length - max;
-  return /* @__PURE__ */ _jsxs33("div", {
-    role: "group",
-    className: clsx31("components-avatar-group", className2),
-    ...props,
-    children: [visible, overflowCount > 0 && /* @__PURE__ */ _jsx108("span", {
-      className: "components-avatar-group__overflow",
-      "aria-label": `${overflowCount} more`,
-      children: `+${overflowCount}`
-    })]
-  });
-}
-var component_default25 = AvatarGroup;
-
-// ../components/build-module/badge/index.mjs
-import clsx32 from "clsx";
-import { jsx as _jsx109, jsxs as _jsxs34 } from "react/jsx-runtime";
 function contextBasedIcon(intent = "default") {
   switch (intent) {
     case "info":
@@ -12484,20 +12440,20 @@ function Badge3({
 }) {
   const icon = contextBasedIcon(intent);
   const hasIcon = !!icon;
-  return /* @__PURE__ */ _jsx109("span", {
-    className: clsx32("components-badge", className2, {
+  return /* @__PURE__ */ _jsx107("span", {
+    className: clsx30("components-badge", className2, {
       [`is-${intent}`]: intent,
       "has-icon": hasIcon
     }),
     ...props,
-    children: /* @__PURE__ */ _jsxs34("span", {
+    children: /* @__PURE__ */ _jsxs32("span", {
       className: "components-badge__flex-wrapper",
-      children: [hasIcon && /* @__PURE__ */ _jsx109(icon_default2, {
+      children: [hasIcon && /* @__PURE__ */ _jsx107(icon_default2, {
         icon,
         size: 16,
         fill: "currentColor",
         className: "components-badge__icon"
-      }), /* @__PURE__ */ _jsx109("span", {
+      }), /* @__PURE__ */ _jsx107("span", {
         className: "components-badge__content",
         children
       })]
@@ -12514,9 +12470,9 @@ import { DayPicker } from "react-day-picker";
 import { enUS } from "react-day-picker/locale";
 
 // ../components/build-module/calendar/utils/day-cell.mjs
-import { jsx as _jsx110, jsxs as _jsxs35 } from "react/jsx-runtime";
+import { jsx as _jsx108, jsxs as _jsxs33 } from "react/jsx-runtime";
 var PreviewDashStartAndEnd = () => {
-  return /* @__PURE__ */ _jsx110("svg", {
+  return /* @__PURE__ */ _jsx108("svg", {
     viewBox: "0 0 32 32",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
@@ -12524,13 +12480,13 @@ var PreviewDashStartAndEnd = () => {
     strokeDasharray: "3.7677",
     strokeDashoffset: "3.2",
     strokeWidth: "1",
-    children: /* @__PURE__ */ _jsx110("path", {
+    children: /* @__PURE__ */ _jsx108("path", {
       d: "M29.5,0.5 h-27 a2,2 0 0 0 -2,2 v27 a2,2 0 0 0 2,2 h27 a2,2 0 0 0 2,-2 v-27 a2,2 0 0 0 -2,-2"
     })
   });
 };
 var PreviewDashStart = () => {
-  return /* @__PURE__ */ _jsx110("svg", {
+  return /* @__PURE__ */ _jsx108("svg", {
     viewBox: "0 0 32 32",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
@@ -12538,13 +12494,13 @@ var PreviewDashStart = () => {
     strokeDasharray: "3.84516",
     strokeDashoffset: "1.9226",
     strokeWidth: "1",
-    children: /* @__PURE__ */ _jsx110("path", {
+    children: /* @__PURE__ */ _jsx108("path", {
       d: "M32,0.5 h-29.5 a2,2 0 0 0 -2,2 v27 a2,2 0 0 0 2,2 h30"
     })
   });
 };
 var PreviewDashMiddle = () => {
-  return /* @__PURE__ */ _jsxs35("svg", {
+  return /* @__PURE__ */ _jsxs33("svg", {
     viewBox: "0 0 32 32",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
@@ -12552,12 +12508,12 @@ var PreviewDashMiddle = () => {
     strokeDasharray: "3.9 4",
     strokeDashoffset: "2",
     strokeWidth: "1",
-    children: [/* @__PURE__ */ _jsx110("line", {
+    children: [/* @__PURE__ */ _jsx108("line", {
       x1: "0",
       y1: "0.5",
       x2: "100",
       y2: "0.5"
-    }), /* @__PURE__ */ _jsx110("line", {
+    }), /* @__PURE__ */ _jsx108("line", {
       x1: "0",
       y1: "31.5",
       x2: "100",
@@ -12566,7 +12522,7 @@ var PreviewDashMiddle = () => {
   });
 };
 var PreviewDashEnd = () => {
-  return /* @__PURE__ */ _jsx110("svg", {
+  return /* @__PURE__ */ _jsx108("svg", {
     viewBox: "0 0 32 32",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
@@ -12574,7 +12530,7 @@ var PreviewDashEnd = () => {
     strokeDasharray: "3.84516",
     strokeDashoffset: "1.9226",
     strokeWidth: "1",
-    children: /* @__PURE__ */ _jsx110("path", {
+    children: /* @__PURE__ */ _jsx108("path", {
       d: "M0,0.5 h29.5 a2,2 0 0 1 2,2 v27 a2,2 0 0 1 -2,2 h-29.5"
     })
   });
@@ -12596,9 +12552,9 @@ function Day(props) {
   } else if (modifiers.preview) {
     PreviewDash = PreviewDashMiddle;
   }
-  return /* @__PURE__ */ _jsxs35("td", {
+  return /* @__PURE__ */ _jsxs33("td", {
     ...tdProps,
-    children: [PreviewDash && /* @__PURE__ */ _jsx110(PreviewDash, {}), children]
+    children: [PreviewDash && /* @__PURE__ */ _jsx108(PreviewDash, {}), children]
   });
 }
 
@@ -12607,6 +12563,7 @@ var CLASSNAMES = {
   root: "components-calendar",
   day: "components-calendar__day",
   day_button: "components-calendar__day-button",
+  outside: "components-calendar__day--outside",
   caption_label: "components-calendar__caption-label",
   button_next: "components-calendar__button-next",
   button_previous: "components-calendar__button-previous",
@@ -12794,7 +12751,7 @@ var useLocalizationProps = ({
 };
 
 // ../components/build-module/calendar/date-calendar/index.mjs
-import { jsx as _jsx111 } from "react/jsx-runtime";
+import { jsx as _jsx109 } from "react/jsx-runtime";
 var DateCalendar = ({
   defaultSelected,
   selected: selectedProp,
@@ -12817,7 +12774,7 @@ var DateCalendar = ({
     value: selectedProp,
     onChange
   });
-  return /* @__PURE__ */ _jsx111(DayPicker, {
+  return /* @__PURE__ */ _jsx109(DayPicker, {
     ...COMMON_PROPS,
     ...localizationProps,
     ...props,
@@ -12832,7 +12789,7 @@ var DateCalendar = ({
 import { differenceInCalendarDays } from "date-fns";
 import { DayPicker as DayPicker2, rangeContainsModifiers } from "react-day-picker";
 import { enUS as enUS2 } from "react-day-picker/locale";
-import { jsx as _jsx112 } from "react/jsx-runtime";
+import { jsx as _jsx110 } from "react/jsx-runtime";
 function usePreviewRange({
   selected,
   hoveredDate,
@@ -12938,7 +12895,7 @@ var DateRangeCalendar = ({
       preview_end: previewRange?.to
     };
   }, [previewRange]);
-  return /* @__PURE__ */ _jsx112(DayPicker2, {
+  return /* @__PURE__ */ _jsx110(DayPicker2, {
     ...COMMON_PROPS,
     ...localizationProps,
     ...props,
@@ -12961,8 +12918,8 @@ var DateRangeCalendar = ({
 import { __ as __17 } from "@wordpress/i18n";
 
 // ../components/build-module/validated-form-controls/validity-indicator.mjs
-import clsx33 from "clsx";
-import { jsx as _jsx113, jsxs as _jsxs36 } from "react/jsx-runtime";
+import clsx31 from "clsx";
+import { jsx as _jsx111, jsxs as _jsxs34 } from "react/jsx-runtime";
 function ValidityIndicator({
   type,
   message
@@ -12971,11 +12928,11 @@ function ValidityIndicator({
     valid: published_default,
     invalid: error_default
   };
-  return /* @__PURE__ */ _jsxs36("p", {
-    className: clsx33("components-validated-control__indicator", `is-${type}`),
-    children: [type === "validating" ? /* @__PURE__ */ _jsx113(spinner_default, {
+  return /* @__PURE__ */ _jsxs34("p", {
+    className: clsx31("components-validated-control__indicator", `is-${type}`),
+    children: [type === "validating" ? /* @__PURE__ */ _jsx111(spinner_default, {
       className: "components-validated-control__indicator-spinner"
-    }) : /* @__PURE__ */ _jsx113(icon_default2, {
+    }) : /* @__PURE__ */ _jsx111(icon_default2, {
       className: "components-validated-control__indicator-icon",
       icon: ICON[type],
       size: 16,
@@ -12985,15 +12942,15 @@ function ValidityIndicator({
 }
 
 // ../components/build-module/validated-form-controls/control-with-error.mjs
-import { Fragment as _Fragment13, jsxs as _jsxs37, jsx as _jsx114 } from "react/jsx-runtime";
+import { Fragment as _Fragment13, jsxs as _jsxs35, jsx as _jsx112 } from "react/jsx-runtime";
 function appendRequiredIndicator(label, required, markWhenOptional) {
   if (required && !markWhenOptional) {
-    return /* @__PURE__ */ _jsxs37(_Fragment13, {
+    return /* @__PURE__ */ _jsxs35(_Fragment13, {
       children: [label, " ", `(${__17("Required")})`]
     });
   }
   if (!required && markWhenOptional) {
-    return /* @__PURE__ */ _jsxs37(_Fragment13, {
+    return /* @__PURE__ */ _jsxs35(_Fragment13, {
       children: [label, " ", `(${__17("Optional")})`]
     });
   }
@@ -13097,27 +13054,27 @@ function UnforwardedControlWithError({
   };
   const message = () => {
     if (errorMessage) {
-      return /* @__PURE__ */ _jsx114(ValidityIndicator, {
+      return /* @__PURE__ */ _jsx112(ValidityIndicator, {
         type: "invalid",
         message: errorMessage
       });
     }
     if (statusMessage?.type) {
-      return /* @__PURE__ */ _jsx114(ValidityIndicator, {
+      return /* @__PURE__ */ _jsx112(ValidityIndicator, {
         type: statusMessage.type,
         message: statusMessage.message
       });
     }
     return null;
   };
-  return /* @__PURE__ */ _jsxs37("div", {
+  return /* @__PURE__ */ _jsxs35("div", {
     className,
     ref: forwardedRef,
     onBlur,
     children: [cloneElement(children, {
       label: appendRequiredIndicator(children.props.label, required, markWhenOptional),
       required
-    }), /* @__PURE__ */ _jsx114("div", {
+    }), /* @__PURE__ */ _jsx112("div", {
       "aria-live": "polite",
       children: showMessage && message()
     })]
@@ -13127,7 +13084,7 @@ var ControlWithError = forwardRef(UnforwardedControlWithError);
 ControlWithError.displayName = "ControlWithError";
 
 // ../components/build-module/validated-form-controls/components/checkbox-control.mjs
-import { jsx as _jsx115 } from "react/jsx-runtime";
+import { jsx as _jsx113 } from "react/jsx-runtime";
 var UnforwardedValidatedCheckboxControl = ({
   required,
   customValidity,
@@ -13136,13 +13093,13 @@ var UnforwardedValidatedCheckboxControl = ({
 }, forwardedRef) => {
   const validityTargetRef = useRef(null);
   const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);
-  return /* @__PURE__ */ _jsx115(ControlWithError, {
+  return /* @__PURE__ */ _jsx113(ControlWithError, {
     required,
     markWhenOptional,
     ref: mergedRefs,
     customValidity,
     getValidityTarget: () => validityTargetRef.current?.querySelector('input[type="checkbox"]'),
-    children: /* @__PURE__ */ _jsx115(
+    children: /* @__PURE__ */ _jsx113(
       checkbox_control_default,
       {
         ...restProps
@@ -13154,7 +13111,7 @@ var ValidatedCheckboxControl = forwardRef(UnforwardedValidatedCheckboxControl);
 ValidatedCheckboxControl.displayName = "ValidatedCheckboxControl";
 
 // ../components/build-module/validated-form-controls/components/combobox-control.mjs
-import { jsx as _jsx116 } from "react/jsx-runtime";
+import { jsx as _jsx114 } from "react/jsx-runtime";
 var UnforwardedValidatedComboboxControl = ({
   required,
   customValidity,
@@ -13171,13 +13128,13 @@ var UnforwardedValidatedComboboxControl = ({
   }, [required]);
   return (
     // TODO: Bug - Missing value error is not cleared immediately on change, waits for blur.
-    /* @__PURE__ */ _jsx116(ControlWithError, {
+    /* @__PURE__ */ _jsx114(ControlWithError, {
       required,
       markWhenOptional,
       ref: mergedRefs,
       customValidity,
       getValidityTarget: () => validityTargetRef.current?.querySelector('input[role="combobox"]'),
-      children: /* @__PURE__ */ _jsx116(combobox_control_default, {
+      children: /* @__PURE__ */ _jsx114(combobox_control_default, {
         __next40pxDefaultSize: true,
         ...restProps
       })
@@ -13188,7 +13145,7 @@ var ValidatedComboboxControl = forwardRef(UnforwardedValidatedComboboxControl);
 ValidatedComboboxControl.displayName = "ValidatedComboboxControl";
 
 // ../components/build-module/validated-form-controls/components/form-token-field.mjs
-import { jsx as _jsx117, jsxs as _jsxs38 } from "react/jsx-runtime";
+import { jsx as _jsx115, jsxs as _jsxs36 } from "react/jsx-runtime";
 var UnforwardedValidatedFormTokenField = ({
   required,
   customValidity,
@@ -13196,19 +13153,19 @@ var UnforwardedValidatedFormTokenField = ({
   ...restProps
 }, forwardedRef) => {
   const validityTargetRef = useRef(null);
-  return /* @__PURE__ */ _jsxs38("div", {
+  return /* @__PURE__ */ _jsxs36("div", {
     className: "components-validated-control__wrapper-with-error-delegate",
     ref: forwardedRef,
-    children: [/* @__PURE__ */ _jsx117(ControlWithError, {
+    children: [/* @__PURE__ */ _jsx115(ControlWithError, {
       required,
       markWhenOptional,
       customValidity,
       getValidityTarget: () => validityTargetRef.current,
-      children: /* @__PURE__ */ _jsx117(FormTokenField, {
+      children: /* @__PURE__ */ _jsx115(FormTokenField, {
         __next40pxDefaultSize: true,
         ...restProps
       })
-    }), /* @__PURE__ */ _jsx117("input", {
+    }), /* @__PURE__ */ _jsx115("input", {
       className: "components-validated-control__error-delegate",
       type: "text",
       ref: validityTargetRef,
@@ -13227,7 +13184,7 @@ var ValidatedFormTokenField = forwardRef(UnforwardedValidatedFormTokenField);
 ValidatedFormTokenField.displayName = "ValidatedFormTokenField";
 
 // ../components/build-module/validated-form-controls/components/input-control.mjs
-import { jsx as _jsx118 } from "react/jsx-runtime";
+import { jsx as _jsx116 } from "react/jsx-runtime";
 var UnforwardedValidatedInputControl = ({
   required,
   customValidity,
@@ -13236,12 +13193,12 @@ var UnforwardedValidatedInputControl = ({
 }, forwardedRef) => {
   const validityTargetRef = useRef(null);
   const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);
-  return /* @__PURE__ */ _jsx118(ControlWithError, {
+  return /* @__PURE__ */ _jsx116(ControlWithError, {
     required,
     markWhenOptional,
     customValidity,
     getValidityTarget: () => validityTargetRef.current,
-    children: /* @__PURE__ */ _jsx118(input_control_default, {
+    children: /* @__PURE__ */ _jsx116(input_control_default, {
       __next40pxDefaultSize: true,
       ref: mergedRefs,
       ...restProps
@@ -13252,7 +13209,7 @@ var ValidatedInputControl = forwardRef(UnforwardedValidatedInputControl);
 ValidatedInputControl.displayName = "ValidatedInputControl";
 
 // ../components/build-module/validated-form-controls/components/number-control.mjs
-import { jsx as _jsx119 } from "react/jsx-runtime";
+import { jsx as _jsx117 } from "react/jsx-runtime";
 var UnforwardedValidatedNumberControl = ({
   required,
   customValidity,
@@ -13261,12 +13218,12 @@ var UnforwardedValidatedNumberControl = ({
 }, forwardedRef) => {
   const validityTargetRef = useRef(null);
   const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);
-  return /* @__PURE__ */ _jsx119(ControlWithError, {
+  return /* @__PURE__ */ _jsx117(ControlWithError, {
     required,
     markWhenOptional,
     customValidity,
     getValidityTarget: () => validityTargetRef.current,
-    children: /* @__PURE__ */ _jsx119(number_control_default, {
+    children: /* @__PURE__ */ _jsx117(number_control_default, {
       __next40pxDefaultSize: true,
       ref: mergedRefs,
       ...restProps
@@ -13277,7 +13234,7 @@ var ValidatedNumberControl = forwardRef(UnforwardedValidatedNumberControl);
 ValidatedNumberControl.displayName = "ValidatedNumberControl";
 
 // ../components/build-module/validated-form-controls/components/radio-control.mjs
-import { jsx as _jsx120 } from "react/jsx-runtime";
+import { jsx as _jsx118 } from "react/jsx-runtime";
 var UnforwardedValidatedRadioControl = ({
   required,
   customValidity,
@@ -13286,13 +13243,13 @@ var UnforwardedValidatedRadioControl = ({
 }, forwardedRef) => {
   const validityTargetRef = useRef(null);
   const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);
-  return /* @__PURE__ */ _jsx120(ControlWithError, {
+  return /* @__PURE__ */ _jsx118(ControlWithError, {
     required,
     markWhenOptional,
     ref: mergedRefs,
     customValidity,
     getValidityTarget: () => validityTargetRef.current?.querySelector('input[type="radio"]'),
-    children: /* @__PURE__ */ _jsx120(radio_control_default, {
+    children: /* @__PURE__ */ _jsx118(radio_control_default, {
       ...restProps
     })
   });
@@ -13301,7 +13258,7 @@ var ValidatedRadioControl = forwardRef(UnforwardedValidatedRadioControl);
 ValidatedRadioControl.displayName = "ValidatedRadioControl";
 
 // ../components/build-module/validated-form-controls/components/select-control.mjs
-import { jsx as _jsx121 } from "react/jsx-runtime";
+import { jsx as _jsx119 } from "react/jsx-runtime";
 var UnforwardedValidatedSelectControl = ({
   required,
   customValidity,
@@ -13310,12 +13267,12 @@ var UnforwardedValidatedSelectControl = ({
 }, forwardedRef) => {
   const validityTargetRef = useRef(null);
   const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);
-  return /* @__PURE__ */ _jsx121(ControlWithError, {
+  return /* @__PURE__ */ _jsx119(ControlWithError, {
     required,
     markWhenOptional,
     customValidity,
     getValidityTarget: () => validityTargetRef.current,
-    children: /* @__PURE__ */ _jsx121(select_control_default, {
+    children: /* @__PURE__ */ _jsx119(select_control_default, {
       __next40pxDefaultSize: true,
       ref: mergedRefs,
       ...restProps
@@ -13326,7 +13283,7 @@ var ValidatedSelectControl = forwardRef(UnforwardedValidatedSelectControl);
 ValidatedSelectControl.displayName = "ValidatedSelectControl";
 
 // ../components/build-module/validated-form-controls/components/text-control.mjs
-import { jsx as _jsx122 } from "react/jsx-runtime";
+import { jsx as _jsx120 } from "react/jsx-runtime";
 var UnforwardedValidatedTextControl = ({
   required,
   customValidity,
@@ -13335,12 +13292,12 @@ var UnforwardedValidatedTextControl = ({
 }, forwardedRef) => {
   const validityTargetRef = useRef(null);
   const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);
-  return /* @__PURE__ */ _jsx122(ControlWithError, {
+  return /* @__PURE__ */ _jsx120(ControlWithError, {
     required,
     markWhenOptional,
     customValidity,
     getValidityTarget: () => validityTargetRef.current,
-    children: /* @__PURE__ */ _jsx122(text_control_default, {
+    children: /* @__PURE__ */ _jsx120(text_control_default, {
       __next40pxDefaultSize: true,
       ref: mergedRefs,
       ...restProps
@@ -13351,7 +13308,7 @@ var ValidatedTextControl = forwardRef(UnforwardedValidatedTextControl);
 ValidatedTextControl.displayName = "ValidatedTextControl";
 
 // ../components/build-module/validated-form-controls/components/textarea-control.mjs
-import { jsx as _jsx123 } from "react/jsx-runtime";
+import { jsx as _jsx121 } from "react/jsx-runtime";
 var UnforwardedValidatedTextareaControl = ({
   required,
   customValidity,
@@ -13360,12 +13317,12 @@ var UnforwardedValidatedTextareaControl = ({
 }, forwardedRef) => {
   const validityTargetRef = useRef(null);
   const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);
-  return /* @__PURE__ */ _jsx123(ControlWithError, {
+  return /* @__PURE__ */ _jsx121(ControlWithError, {
     required,
     markWhenOptional,
     customValidity,
     getValidityTarget: () => validityTargetRef.current,
-    children: /* @__PURE__ */ _jsx123(textarea_control_default, {
+    children: /* @__PURE__ */ _jsx121(textarea_control_default, {
       ref: mergedRefs,
       ...restProps
     })
@@ -13375,7 +13332,7 @@ var ValidatedTextareaControl = forwardRef(UnforwardedValidatedTextareaControl);
 ValidatedTextareaControl.displayName = "ValidatedTextareaControl";
 
 // ../components/build-module/validated-form-controls/components/toggle-control.mjs
-import { jsx as _jsx124 } from "react/jsx-runtime";
+import { jsx as _jsx122 } from "react/jsx-runtime";
 var UnforwardedValidatedToggleControl = ({
   required,
   customValidity,
@@ -13384,12 +13341,12 @@ var UnforwardedValidatedToggleControl = ({
 }, forwardedRef) => {
   const validityTargetRef = useRef(null);
   const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);
-  return /* @__PURE__ */ _jsx124(ControlWithError, {
+  return /* @__PURE__ */ _jsx122(ControlWithError, {
     required,
     markWhenOptional,
     customValidity,
     getValidityTarget: () => validityTargetRef.current,
-    children: /* @__PURE__ */ _jsx124(toggle_control_default, {
+    children: /* @__PURE__ */ _jsx122(toggle_control_default, {
       ref: mergedRefs,
       required,
       ...restProps
@@ -13400,7 +13357,7 @@ var ValidatedToggleControl = forwardRef(UnforwardedValidatedToggleControl);
 ValidatedToggleControl.displayName = "ValidatedToggleControl";
 
 // ../components/build-module/validated-form-controls/components/toggle-group-control.mjs
-import { jsx as _jsx125, jsxs as _jsxs39 } from "react/jsx-runtime";
+import { jsx as _jsx123, jsxs as _jsxs37 } from "react/jsx-runtime";
 var UnforwardedValidatedToggleGroupControl = ({
   required,
   customValidity,
@@ -13409,19 +13366,19 @@ var UnforwardedValidatedToggleGroupControl = ({
 }, forwardedRef) => {
   const validityTargetRef = useRef(null);
   const nameAttr = useId();
-  return /* @__PURE__ */ _jsxs39("div", {
+  return /* @__PURE__ */ _jsxs37("div", {
     className: "components-validated-control__wrapper-with-error-delegate",
-    children: [/* @__PURE__ */ _jsx125(ControlWithError, {
+    children: [/* @__PURE__ */ _jsx123(ControlWithError, {
       required,
       markWhenOptional,
       customValidity,
       getValidityTarget: () => validityTargetRef.current,
-      children: /* @__PURE__ */ _jsx125(component_default10, {
+      children: /* @__PURE__ */ _jsx123(component_default10, {
         __next40pxDefaultSize: true,
         ref: forwardedRef,
         ...restProps
       })
-    }), /* @__PURE__ */ _jsx125("input", {
+    }), /* @__PURE__ */ _jsx123("input", {
       className: "components-validated-control__error-delegate",
       type: "radio",
       ref: validityTargetRef,
@@ -13444,8 +13401,6 @@ ValidatedToggleGroupControl.displayName = "ValidatedToggleGroupControl";
 var privateApis = {};
 lock2(privateApis, {
   __experimentalPopoverLegacyPositionToPlacement: positionToPlacement,
-  Avatar: component_default24,
-  AvatarGroup: component_default25,
   ComponentsContext,
   Tabs,
   Theme: theme_default,
@@ -14498,7 +14453,7 @@ function ColumnPrimary({
 }
 var column_primary_default = ColumnPrimary;
 
-// src/components/dataviews-layouts/table/use-is-horizontal-scroll-end.ts
+// src/components/dataviews-layouts/table/use-scroll-state.ts
 import { isRTL as isRTL9 } from "@wordpress/i18n";
 var isScrolledToEnd = (element) => {
   if (isRTL9()) {
@@ -14507,40 +14462,37 @@ var isScrolledToEnd = (element) => {
   }
   return element.scrollLeft + element.clientWidth >= element.scrollWidth - 1;
 };
-function useIsHorizontalScrollEnd({
+function useScrollState({
   scrollContainerRef,
-  enabled = false
+  enabledHorizontal = false
 }) {
   const [isHorizontalScrollEnd, setIsHorizontalScrollEnd] = useState(false);
-  const handleIsHorizontalScrollEnd = useDebounce(
-    useCallback(() => {
-      const scrollContainer = scrollContainerRef.current;
-      if (scrollContainer) {
-        setIsHorizontalScrollEnd(isScrolledToEnd(scrollContainer));
-      }
-    }, [scrollContainerRef, setIsHorizontalScrollEnd]),
-    200
-  );
+  const [isVerticallyScrolled, setIsVerticallyScrolled] = useState(false);
+  const handleScroll = useCallback(() => {
+    const scrollContainer = scrollContainerRef.current;
+    if (!scrollContainer) {
+      return;
+    }
+    if (enabledHorizontal) {
+      setIsHorizontalScrollEnd(isScrolledToEnd(scrollContainer));
+    }
+    setIsVerticallyScrolled(scrollContainer.scrollTop > 0);
+  }, [scrollContainerRef, enabledHorizontal]);
   useEffect(() => {
-    if (typeof window === "undefined" || !enabled || !scrollContainerRef.current) {
+    if (typeof window === "undefined" || !scrollContainerRef.current) {
       return () => {
       };
     }
-    handleIsHorizontalScrollEnd();
-    scrollContainerRef.current.addEventListener(
-      "scroll",
-      handleIsHorizontalScrollEnd
-    );
-    window.addEventListener("resize", handleIsHorizontalScrollEnd);
+    const scrollContainer = scrollContainerRef.current;
+    handleScroll();
+    scrollContainer.addEventListener("scroll", handleScroll);
+    window.addEventListener("resize", handleScroll);
     return () => {
-      scrollContainerRef.current?.removeEventListener(
-        "scroll",
-        handleIsHorizontalScrollEnd
-      );
-      window.removeEventListener("resize", handleIsHorizontalScrollEnd);
+      scrollContainer.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("resize", handleScroll);
     };
-  }, [scrollContainerRef, enabled]);
-  return isHorizontalScrollEnd;
+  }, [scrollContainerRef, enabledHorizontal, handleScroll]);
+  return { isHorizontalScrollEnd, isVerticallyScrolled };
 }
 
 // src/components/dataviews-layouts/utils/get-data-by-group.ts
@@ -14701,7 +14653,7 @@ function TableColumnField({
   if (!field) {
     return null;
   }
-  const className2 = clsx34("dataviews-view-table__cell-content-wrapper", {
+  const className2 = clsx32("dataviews-view-table__cell-content-wrapper", {
     "dataviews-view-table__cell-align-end": align === "end",
     "dataviews-view-table__cell-align-center": align === "center"
   });
@@ -14742,7 +14694,7 @@ function TableRow({
   return /* @__PURE__ */ jsxs6(
     "tr",
     {
-      className: clsx34("dataviews-view-table__row", {
+      className: clsx32("dataviews-view-table__row", {
         "is-selected": hasPossibleBulkAction && isSelected,
         "has-bulk-actions": hasPossibleBulkAction
       }),
@@ -14828,7 +14780,7 @@ function TableRow({
         /* @__PURE__ */ jsx45(
           "td",
           {
-            className: clsx34("dataviews-view-table__actions-column", {
+            className: clsx32("dataviews-view-table__actions-column", {
               "dataviews-view-table__actions-column--sticky": true,
               "dataviews-view-table__actions-column--stuck": isActionsColumnSticky
             }),
@@ -14871,9 +14823,9 @@ function ViewTable({
     }
   });
   const tableNoticeId = useId();
-  const isHorizontalScrollEnd = useIsHorizontalScrollEnd({
+  const { isHorizontalScrollEnd, isVerticallyScrolled } = useScrollState({
     scrollContainerRef: containerRef,
-    enabled: !!actions?.length
+    enabledHorizontal: !!actions?.length
   });
   const hasBulkActions = useSomeItemHasAPossibleBulkAction(actions, data);
   if (nextHeaderMenuToFocus) {
@@ -14933,7 +14885,7 @@ function ViewTable({
     return /* @__PURE__ */ jsx45(
       "div",
       {
-        className: clsx34("dataviews-no-results", {
+        className: clsx32("dataviews-no-results", {
           "is-refreshing": isDelayedLoading
         }),
         id: tableNoticeId,
@@ -14945,7 +14897,7 @@ function ViewTable({
     /* @__PURE__ */ jsxs6(
       "table",
       {
-        className: clsx34("dataviews-view-table", className2, {
+        className: clsx32("dataviews-view-table", className2, {
           [`has-${view.layout?.density}-density`]: view.layout?.density && ["compact", "comfortable"].includes(
             view.layout.density
           ),
@@ -14963,10 +14915,10 @@ function ViewTable({
             columns.map((column, index) => /* @__PURE__ */ jsx45(
               "col",
               {
-                className: clsx34(
+                className: clsx32(
                   `dataviews-view-table__col-${column}`,
                   {
-                    "dataviews-view-table__col-first-expand": !hasPrimaryColumn && index === columns.length - 1
+                    "dataviews-view-table__col-expand": !hasPrimaryColumn && index === columns.length - 1
                   }
                 )
               },
@@ -14983,97 +14935,106 @@ function ViewTable({
               children: /* @__PURE__ */ jsx45(PropertiesSection, { showLabel: false })
             }
           ),
-          /* @__PURE__ */ jsx45("thead", { onContextMenu: handleHeaderContextMenu, children: /* @__PURE__ */ jsxs6("tr", { className: "dataviews-view-table__row", children: [
-            hasBulkActions && /* @__PURE__ */ jsx45(
-              "th",
-              {
-                className: "dataviews-view-table__checkbox-column",
-                scope: "col",
-                onContextMenu: handleHeaderContextMenu,
-                children: /* @__PURE__ */ jsx45(
-                  BulkSelectionCheckbox,
+          /* @__PURE__ */ jsx45(
+            "thead",
+            {
+              className: clsx32({
+                "dataviews-view-table__thead--stuck": isVerticallyScrolled
+              }),
+              onContextMenu: handleHeaderContextMenu,
+              children: /* @__PURE__ */ jsxs6("tr", { className: "dataviews-view-table__row", children: [
+                hasBulkActions && /* @__PURE__ */ jsx45(
+                  "th",
                   {
-                    selection,
-                    onChangeSelection,
-                    data,
-                    actions,
-                    getItemId
+                    className: "dataviews-view-table__checkbox-column",
+                    scope: "col",
+                    onContextMenu: handleHeaderContextMenu,
+                    children: /* @__PURE__ */ jsx45(
+                      BulkSelectionCheckbox,
+                      {
+                        selection,
+                        onChangeSelection,
+                        data,
+                        actions,
+                        getItemId
+                      }
+                    )
                   }
-                )
-              }
-            ),
-            hasPrimaryColumn && /* @__PURE__ */ jsx45("th", { scope: "col", children: titleField && /* @__PURE__ */ jsx45(
-              column_header_menu_default,
-              {
-                ref: headerMenuRef(
-                  titleField.id,
-                  0
                 ),
-                fieldId: titleField.id,
-                view,
-                fields,
-                onChangeView,
-                onHide,
-                setOpenedFilter,
-                canMove: false,
-                canInsertLeft: isRtl ? view.layout?.enableMoving ?? true : false,
-                canInsertRight: isRtl ? false : view.layout?.enableMoving ?? true
-              }
-            ) }),
-            columns.map((column, index) => {
-              const { width, maxWidth, minWidth, align } = view.layout?.styles?.[column] ?? {};
-              const field = fields.find(
-                (f) => f.id === column
-              );
-              const effectiveAlign = getEffectiveAlign(
-                align,
-                field?.type
-              );
-              const canInsertOrMove = view.layout?.enableMoving ?? true;
-              return /* @__PURE__ */ jsx45(
-                "th",
-                {
-                  style: {
-                    width,
-                    maxWidth,
-                    minWidth,
-                    textAlign: effectiveAlign
-                  },
-                  "aria-sort": view.sort?.direction && view.sort?.field === column ? sortValues[view.sort.direction] : void 0,
-                  scope: "col",
-                  children: /* @__PURE__ */ jsx45(
-                    column_header_menu_default,
+                hasPrimaryColumn && /* @__PURE__ */ jsx45("th", { scope: "col", children: titleField && /* @__PURE__ */ jsx45(
+                  column_header_menu_default,
+                  {
+                    ref: headerMenuRef(
+                      titleField.id,
+                      0
+                    ),
+                    fieldId: titleField.id,
+                    view,
+                    fields,
+                    onChangeView,
+                    onHide,
+                    setOpenedFilter,
+                    canMove: false,
+                    canInsertLeft: isRtl ? view.layout?.enableMoving ?? true : false,
+                    canInsertRight: isRtl ? false : view.layout?.enableMoving ?? true
+                  }
+                ) }),
+                columns.map((column, index) => {
+                  const { width, maxWidth, minWidth, align } = view.layout?.styles?.[column] ?? {};
+                  const field = fields.find(
+                    (f) => f.id === column
+                  );
+                  const effectiveAlign = getEffectiveAlign(
+                    align,
+                    field?.type
+                  );
+                  const canInsertOrMove = view.layout?.enableMoving ?? true;
+                  return /* @__PURE__ */ jsx45(
+                    "th",
                     {
-                      ref: headerMenuRef(column, index),
-                      fieldId: column,
-                      view,
-                      fields,
-                      onChangeView,
-                      onHide,
-                      setOpenedFilter,
-                      canMove: canInsertOrMove,
-                      canInsertLeft: canInsertOrMove,
-                      canInsertRight: canInsertOrMove
-                    }
-                  )
-                },
-                column
-              );
-            }),
-            !!actions?.length && /* @__PURE__ */ jsx45(
-              "th",
-              {
-                className: clsx34(
-                  "dataviews-view-table__actions-column",
+                      style: {
+                        width,
+                        maxWidth,
+                        minWidth,
+                        textAlign: effectiveAlign
+                      },
+                      "aria-sort": view.sort?.direction && view.sort?.field === column ? sortValues[view.sort.direction] : void 0,
+                      scope: "col",
+                      children: /* @__PURE__ */ jsx45(
+                        column_header_menu_default,
+                        {
+                          ref: headerMenuRef(column, index),
+                          fieldId: column,
+                          view,
+                          fields,
+                          onChangeView,
+                          onHide,
+                          setOpenedFilter,
+                          canMove: canInsertOrMove,
+                          canInsertLeft: canInsertOrMove,
+                          canInsertRight: canInsertOrMove
+                        }
+                      )
+                    },
+                    column
+                  );
+                }),
+                !!actions?.length && /* @__PURE__ */ jsx45(
+                  "th",
                   {
-                    "dataviews-view-table__actions-column--sticky": true,
-                    "dataviews-view-table__actions-column--stuck": !isHorizontalScrollEnd
+                    className: clsx32(
+                      "dataviews-view-table__actions-column",
+                      {
+                        "dataviews-view-table__actions-column--sticky": true,
+                        "dataviews-view-table__actions-column--stuck": !isHorizontalScrollEnd
+                      }
+                    ),
+                    children: /* @__PURE__ */ jsx45("span", { className: "dataviews-view-table-header", children: __23("Actions") })
                   }
-                ),
-                children: /* @__PURE__ */ jsx45("span", { className: "dataviews-view-table-header", children: __23("Actions") })
-              }
-            )
-          ] }) }),
+                )
+              ] })
+            }
+          ),
           hasData && groupField && dataByGroup ? Array.from(dataByGroup.entries()).map(
             ([groupName, groupItems]) => /* @__PURE__ */ jsxs6("tbody", { children: [
               /* @__PURE__ */ jsx45("tr", { className: "dataviews-view-table__group-header-row", children: /* @__PURE__ */ jsx45(
@@ -15146,11 +15107,11 @@ function ViewTable({
 var table_default = ViewTable;
 
 // src/components/dataviews-layouts/grid/index.tsx
-import clsx36 from "clsx";
+import clsx34 from "clsx";
 import { __ as __26, sprintf as sprintf8 } from "@wordpress/i18n";
 
 // src/components/dataviews-layouts/grid/composite-grid.tsx
-import clsx35 from "clsx";
+import clsx33 from "clsx";
 import { __ as __25, sprintf as sprintf7 } from "@wordpress/i18n";
 
 // src/components/dataviews-layouts/grid/preview-size-picker.tsx
@@ -15267,7 +15228,7 @@ var GridItem = forwardRef(function GridItem2({
       direction: "column",
       ...props,
       ref,
-      className: clsx35(
+      className: clsx33(
         props.className,
         "dataviews-view-grid__row__gridcell",
         "dataviews-view-grid__card",
@@ -15296,7 +15257,7 @@ var GridItem = forwardRef(function GridItem2({
             isItemClickable: isItemClickable2,
             onClickItem,
             renderItemLink,
-            className: clsx35("dataviews-view-grid__media", {
+            className: clsx33("dataviews-view-grid__media", {
               "dataviews-view-grid__media--placeholder": !rendersMediaField
             }),
             ...mediaA11yProps,
@@ -15457,7 +15418,11 @@ function CompositeGrid({
     Composite2,
     {
       role: isInfiniteScroll ? "feed" : "grid",
-      className: clsx35("dataviews-view-grid", className2),
+      className: clsx33("dataviews-view-grid", className2, {
+        [`has-${view.layout?.density}-density`]: view.layout?.density && ["compact", "comfortable"].includes(
+          view.layout.density
+        )
+      }),
       focusWrap: true,
       "aria-busy": isLoading,
       "aria-rowcount": isInfiniteScroll ? void 0 : totalRows,
@@ -15551,7 +15516,7 @@ function ViewGrid({
     return /* @__PURE__ */ jsx48(
       "div",
       {
-        className: clsx36("dataviews-no-results", {
+        className: clsx34("dataviews-no-results", {
           "is-refreshing": isDelayedLoading
         }),
         children: empty
@@ -15559,7 +15524,7 @@ function ViewGrid({
     );
   }
   const gridProps = {
-    className: clsx36(className2, {
+    className: clsx34(className2, {
       "is-refreshing": !isInfiniteScroll && isDelayedLoading
     }),
     inert: !isInfiniteScroll && !!isLoading ? "true" : void 0,
@@ -15619,7 +15584,7 @@ function ViewGrid({
 var grid_default = ViewGrid;
 
 // src/components/dataviews-layouts/list/index.tsx
-import clsx37 from "clsx";
+import clsx35 from "clsx";
 import { __ as __27, sprintf as sprintf9 } from "@wordpress/i18n";
 import { useRegistry as useRegistry3 } from "@wordpress/data";
 import { Fragment as Fragment7, jsx as jsx49, jsxs as jsxs9 } from "react/jsx-runtime";
@@ -15831,7 +15796,7 @@ function ListItem({
         )
       ),
       role: infiniteScrollEnabled ? "article" : "row",
-      className: clsx37({
+      className: clsx35({
         "is-selected": isSelected,
         "is-hovered": isHovered
       }),
@@ -16046,7 +16011,7 @@ function ViewList(props) {
     return /* @__PURE__ */ jsx49(
       "div",
       {
-        className: clsx37("dataviews-no-results", {
+        className: clsx35("dataviews-no-results", {
           "is-refreshing": isDelayedLoading
         }),
         children: empty
@@ -16069,7 +16034,7 @@ function ViewList(props) {
           {
             direction: "column",
             gap: "lg",
-            className: clsx37("dataviews-view-list", className2),
+            className: clsx35("dataviews-view-list", className2),
             children: Array.from(dataByGroup.entries()).map(
               ([groupName, groupItems]) => /* @__PURE__ */ jsxs9(
                 Stack,
@@ -16120,7 +16085,7 @@ function ViewList(props) {
         ref: compositeRef,
         id: baseId,
         render: /* @__PURE__ */ jsx49("div", {}),
-        className: clsx37("dataviews-view-list", className2, {
+        className: clsx35("dataviews-view-list", className2, {
           [`has-${view.layout?.density}-density`]: view.layout?.density && ["compact", "comfortable"].includes(
             view.layout.density
           ),
@@ -16158,7 +16123,7 @@ function ViewList(props) {
 }
 
 // src/components/dataviews-layouts/activity/index.tsx
-import clsx39 from "clsx";
+import clsx37 from "clsx";
 
 // src/components/dataviews-layouts/activity/activity-group.tsx
 import { __ as __28, sprintf as sprintf10 } from "@wordpress/i18n";
@@ -16198,7 +16163,7 @@ function ActivityGroup({
 }
 
 // src/components/dataviews-layouts/activity/activity-item.tsx
-import clsx38 from "clsx";
+import clsx36 from "clsx";
 import { useRegistry as useRegistry4 } from "@wordpress/data";
 import { jsx as jsx51, jsxs as jsxs11 } from "react/jsx-runtime";
 function ActivityItem(props) {
@@ -16271,7 +16236,7 @@ function ActivityItem(props) {
       role: infiniteScrollEnabled ? "article" : void 0,
       "aria-posinset": posinset,
       "aria-setsize": infiniteScrollEnabled ? paginationInfo.totalItems : void 0,
-      className: clsx38(
+      className: clsx36(
         "dataviews-view-activity__item",
         density === "compact" && "is-compact",
         density === "balanced" && "is-balanced",
@@ -16410,7 +16375,7 @@ function ViewActivity(props) {
     return /* @__PURE__ */ jsx52(
       "div",
       {
-        className: clsx39("dataviews-no-results", {
+        className: clsx37("dataviews-no-results", {
           "is-refreshing": isDelayedLoading
         }),
         children: empty
@@ -16418,7 +16383,7 @@ function ViewActivity(props) {
     );
   }
   const isInert = !isInfiniteScroll && !!isLoading;
-  const wrapperClassName = clsx39("dataviews-view-activity", className2, {
+  const wrapperClassName = clsx37("dataviews-view-activity", className2, {
     "is-refreshing": !isInfiniteScroll && isDelayedLoading
   });
   const groupedEntries = dataByGroup ? Array.from(dataByGroup.entries()) : [];
@@ -16467,7 +16432,7 @@ function ViewActivity(props) {
 }
 
 // src/components/dataviews-layouts/picker-grid/index.tsx
-import clsx41 from "clsx";
+import clsx39 from "clsx";
 import { __ as __31, sprintf as sprintf12 } from "@wordpress/i18n";
 
 // src/components/dataviews-picker-footer/index.tsx
@@ -16735,14 +16700,14 @@ function DataViewsPickerFooter() {
 }
 
 // src/components/dataviews-layouts/utils/grid-items.tsx
-import clsx40 from "clsx";
+import clsx38 from "clsx";
 import { jsx as jsx55 } from "react/jsx-runtime";
 var GridItems = forwardRef(({ className: className2, previewSize, ...props }, ref) => {
   return /* @__PURE__ */ jsx55(
     "div",
     {
       ref,
-      className: clsx40("dataviews-view-grid-items", className2),
+      className: clsx38("dataviews-view-grid-items", className2),
       style: {
         gridTemplateColumns: previewSize && `repeat(auto-fill, minmax(${previewSize}px, 1fr))`
       },
@@ -16790,7 +16755,7 @@ function GridItem3({
       role: "option",
       "aria-posinset": posinset,
       "aria-setsize": setsize,
-      className: clsx41("dataviews-view-picker-grid__card", {
+      className: clsx39("dataviews-view-picker-grid__card", {
         "is-selected": isSelected
       }),
       "aria-selected": isSelected,
@@ -17000,9 +16965,14 @@ function ViewPickerGrid({
           orientation: "horizontal",
           role: "listbox",
           "aria-multiselectable": isMultiselect,
-          className: clsx41(
+          className: clsx39(
             "dataviews-view-picker-grid",
-            className2
+            className2,
+            {
+              [`has-${view.layout?.density}-density`]: view.layout?.density && ["compact", "comfortable"].includes(
+                view.layout.density
+              )
+            }
           ),
           "aria-label": itemListLabel,
           render: ({ children, ...props }) => /* @__PURE__ */ jsx56(
@@ -17070,9 +17040,15 @@ function ViewPickerGrid({
           render: /* @__PURE__ */ jsx56(
             GridItems,
             {
-              className: clsx41(
+              className: clsx39(
                 "dataviews-view-picker-grid",
-                className2
+                className2,
+                {
+                  [`has-${view.layout?.density}-density`]: view.layout?.density && [
+                    "compact",
+                    "comfortable"
+                  ].includes(view.layout.density)
+                }
               ),
               previewSize: usedPreviewSize,
               "aria-busy": isLoading,
@@ -17118,7 +17094,7 @@ function ViewPickerGrid({
       !hasData && /* @__PURE__ */ jsx56(
         "div",
         {
-          className: clsx41({
+          className: clsx39({
             "dataviews-loading": isLoading,
             "dataviews-no-results": !isLoading
           }),
@@ -17132,7 +17108,7 @@ function ViewPickerGrid({
 var picker_grid_default = ViewPickerGrid;
 
 // src/components/dataviews-layouts/picker-table/index.tsx
-import clsx42 from "clsx";
+import clsx40 from "clsx";
 import { __ as __32, sprintf as sprintf13 } from "@wordpress/i18n";
 import { Fragment as Fragment10, jsx as jsx57, jsxs as jsxs16 } from "react/jsx-runtime";
 function TableColumnField2({
@@ -17145,7 +17121,7 @@ function TableColumnField2({
   if (!field) {
     return null;
   }
-  const className2 = clsx42("dataviews-view-table__cell-content-wrapper", {
+  const className2 = clsx40("dataviews-view-table__cell-content-wrapper", {
     "dataviews-view-table__cell-align-end": align === "end",
     "dataviews-view-table__cell-align-center": align === "center"
   });
@@ -17188,7 +17164,7 @@ function TableRow2({
       render: ({ children, ...props }) => /* @__PURE__ */ jsx57(
         "tr",
         {
-          className: clsx42("dataviews-view-table__row", {
+          className: clsx40("dataviews-view-table__row", {
             "is-selected": isSelected,
             "is-hovered": isHovered
           }),
@@ -17333,7 +17309,7 @@ function ViewPickerTable({
     /* @__PURE__ */ jsxs16(
       "table",
       {
-        className: clsx42(
+        className: clsx40(
           "dataviews-view-table",
           "dataviews-view-picker-table",
           className2,
@@ -17494,7 +17470,7 @@ function ViewPickerTable({
     /* @__PURE__ */ jsxs16(
       "div",
       {
-        className: clsx42({
+        className: clsx40({
           "dataviews-loading": isLoading,
           "dataviews-no-results": !hasData && !isLoading
         }),
@@ -17509,9 +17485,64 @@ function ViewPickerTable({
 }
 var picker_table_default = ViewPickerTable;
 
+// src/components/dataviews-layouts/utils/density-picker.tsx
+import { __ as __33, _x as _x2 } from "@wordpress/i18n";
+import { jsx as jsx58, jsxs as jsxs17 } from "react/jsx-runtime";
+function DensityPicker() {
+  const context = useContext(dataviews_context_default);
+  const view = context.view;
+  return /* @__PURE__ */ jsxs17(
+    component_default10,
+    {
+      size: "__unstable-large",
+      label: __33("Density"),
+      value: view.layout?.density || "balanced",
+      onChange: (value) => {
+        context.onChangeView({
+          ...view,
+          layout: {
+            ...view.layout,
+            density: value
+          }
+        });
+      },
+      isBlock: true,
+      children: [
+        /* @__PURE__ */ jsx58(
+          component_default12,
+          {
+            value: "comfortable",
+            label: _x2(
+              "Comfortable",
+              "Density option for DataView layout"
+            )
+          },
+          "comfortable"
+        ),
+        /* @__PURE__ */ jsx58(
+          component_default12,
+          {
+            value: "balanced",
+            label: _x2("Balanced", "Density option for DataView layout")
+          },
+          "balanced"
+        ),
+        /* @__PURE__ */ jsx58(
+          component_default12,
+          {
+            value: "compact",
+            label: _x2("Compact", "Density option for DataView layout")
+          },
+          "compact"
+        )
+      ]
+    }
+  );
+}
+
 // src/components/dataviews-layouts/utils/preview-size-picker.tsx
-import { __ as __33 } from "@wordpress/i18n";
-import { jsx as jsx58 } from "react/jsx-runtime";
+import { __ as __34 } from "@wordpress/i18n";
+import { jsx as jsx59 } from "react/jsx-runtime";
 var imageSizes2 = [
   {
     value: 120,
@@ -17554,12 +17585,12 @@ function PreviewSizePicker() {
       value: index
     };
   });
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx59(
     range_control_default,
     {
       __next40pxDefaultSize: true,
       showTooltip: false,
-      label: __33("Preview size"),
+      label: __34("Preview size"),
       value: previewSizeToUse,
       min: 0,
       max: breakValues.length - 1,
@@ -17579,59 +17610,13 @@ function PreviewSizePicker() {
   );
 }
 
-// src/components/dataviews-layouts/utils/density-picker.tsx
-import { __ as __34, _x as _x2 } from "@wordpress/i18n";
-import { jsx as jsx59, jsxs as jsxs17 } from "react/jsx-runtime";
-function DensityPicker() {
-  const context = useContext(dataviews_context_default);
-  const view = context.view;
-  return /* @__PURE__ */ jsxs17(
-    component_default10,
-    {
-      size: "__unstable-large",
-      label: __34("Density"),
-      value: view.layout?.density || "balanced",
-      onChange: (value) => {
-        context.onChangeView({
-          ...view,
-          layout: {
-            ...view.layout,
-            density: value
-          }
-        });
-      },
-      isBlock: true,
-      children: [
-        /* @__PURE__ */ jsx59(
-          component_default12,
-          {
-            value: "comfortable",
-            label: _x2(
-              "Comfortable",
-              "Density option for DataView layout"
-            )
-          },
-          "comfortable"
-        ),
-        /* @__PURE__ */ jsx59(
-          component_default12,
-          {
-            value: "balanced",
-            label: _x2("Balanced", "Density option for DataView layout")
-          },
-          "balanced"
-        ),
-        /* @__PURE__ */ jsx59(
-          component_default12,
-          {
-            value: "compact",
-            label: _x2("Compact", "Density option for DataView layout")
-          },
-          "compact"
-        )
-      ]
-    }
-  );
+// src/components/dataviews-layouts/utils/grid-config-options.tsx
+import { Fragment as Fragment11, jsx as jsx60, jsxs as jsxs18 } from "react/jsx-runtime";
+function GridConfigOptions() {
+  return /* @__PURE__ */ jsxs18(Fragment11, { children: [
+    /* @__PURE__ */ jsx60(DensityPicker, {}),
+    /* @__PURE__ */ jsx60(PreviewSizePicker, {})
+  ] });
 }
 
 // src/components/dataviews-layouts/index.ts
@@ -17648,7 +17633,7 @@ var VIEW_LAYOUTS = [
     label: __35("Grid"),
     component: grid_default,
     icon: category_default,
-    viewConfigOptions: PreviewSizePicker
+    viewConfigOptions: GridConfigOptions
   },
   {
     type: LAYOUT_LIST,
@@ -17669,7 +17654,7 @@ var VIEW_LAYOUTS = [
     label: __35("Grid"),
     component: picker_grid_default,
     icon: category_default,
-    viewConfigOptions: PreviewSizePicker,
+    viewConfigOptions: GridConfigOptions,
     isPicker: true
   },
   {
@@ -17683,13 +17668,13 @@ var VIEW_LAYOUTS = [
 ];
 
 // src/components/dataviews-filters/filter.tsx
-import clsx44 from "clsx";
+import clsx42 from "clsx";
 import { __ as __38, sprintf as sprintf16 } from "@wordpress/i18n";
 
 // src/components/dataviews-filters/search-widget.tsx
 import * as Ariakit21 from "@ariakit/react";
 import removeAccents2 from "remove-accents";
-import clsx43 from "clsx";
+import clsx41 from "clsx";
 import { __ as __36, sprintf as sprintf14 } from "@wordpress/i18n";
 
 // src/components/dataviews-filters/utils.ts
@@ -17748,7 +17733,7 @@ function useElements({
 }
 
 // src/components/dataviews-filters/search-widget.tsx
-import { jsx as jsx60, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs19 } from "react/jsx-runtime";
 function normalizeSearchInput(input = "") {
   return removeAccents2(input.trim().toLowerCase());
 }
@@ -17765,22 +17750,22 @@ function generateFilterElementCompositeItemId(prefix, filterElementValue) {
   return `${prefix}-${filterElementValue}`;
 }
 var MultiSelectionOption = ({ selected }) => {
-  return /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsx61(
     "span",
     {
-      className: clsx43(
+      className: clsx41(
         "dataviews-filters__search-widget-listitem-multi-selection",
         { "is-selected": selected }
       ),
-      children: selected && /* @__PURE__ */ jsx60(icon_default2, { icon: check_default })
+      children: selected && /* @__PURE__ */ jsx61(icon_default2, { icon: check_default })
     }
   );
 };
 var SingleSelectionOption = ({ selected }) => {
-  return /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsx61(
     "span",
     {
-      className: clsx43(
+      className: clsx41(
         "dataviews-filters__search-widget-listitem-single-selection",
         { "is-selected": selected }
       )
@@ -17802,7 +17787,7 @@ function ListBox({ view, filter, onChangeView }) {
     (f) => f.field === filter.field
   );
   const currentValue = getCurrentValue(filter, currentFilter);
-  return /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsx61(
     Composite2,
     {
       virtualFocus: true,
@@ -17826,18 +17811,18 @@ function ListBox({ view, filter, onChangeView }) {
           );
         }
       },
-      render: /* @__PURE__ */ jsx60(Composite2.Typeahead, {}),
-      children: filter.elements.map((element) => /* @__PURE__ */ jsxs18(
+      render: /* @__PURE__ */ jsx61(Composite2.Typeahead, {}),
+      children: filter.elements.map((element) => /* @__PURE__ */ jsxs19(
         Composite2.Hover,
         {
-          render: /* @__PURE__ */ jsx60(
+          render: /* @__PURE__ */ jsx61(
             Composite2.Item,
             {
               id: generateFilterElementCompositeItemId(
                 baseId,
                 element.value
               ),
-              render: /* @__PURE__ */ jsx60(
+              render: /* @__PURE__ */ jsx61(
                 "div",
                 {
                   "aria-label": element.label,
@@ -17884,19 +17869,19 @@ function ListBox({ view, filter, onChangeView }) {
             }
           ),
           children: [
-            filter.singleSelection && /* @__PURE__ */ jsx60(
+            filter.singleSelection && /* @__PURE__ */ jsx61(
               SingleSelectionOption,
               {
                 selected: currentValue === element.value
               }
             ),
-            !filter.singleSelection && /* @__PURE__ */ jsx60(
+            !filter.singleSelection && /* @__PURE__ */ jsx61(
               MultiSelectionOption,
               {
                 selected: currentValue.includes(element.value)
               }
             ),
-            /* @__PURE__ */ jsx60(
+            /* @__PURE__ */ jsx61(
               "span",
               {
                 className: "dataviews-filters__search-widget-listitem-value",
@@ -17924,7 +17909,7 @@ function ComboboxList2({ view, filter, onChangeView }) {
       (item2) => normalizeSearchInput(item2.label).includes(normalizedSearch)
     );
   }, [filter.elements, deferredSearchValue]);
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(
     Ariakit21.ComboboxProvider,
     {
       selectedValue: currentValue,
@@ -17956,15 +17941,15 @@ function ComboboxList2({ view, filter, onChangeView }) {
       },
       setValue: setSearchValue,
       children: [
-        /* @__PURE__ */ jsxs18("div", { className: "dataviews-filters__search-widget-filter-combobox__wrapper", children: [
-          /* @__PURE__ */ jsx60(
+        /* @__PURE__ */ jsxs19("div", { className: "dataviews-filters__search-widget-filter-combobox__wrapper", children: [
+          /* @__PURE__ */ jsx61(
             Ariakit21.ComboboxLabel,
             {
-              render: /* @__PURE__ */ jsx60(component_default2, { children: __36("Search items") }),
+              render: /* @__PURE__ */ jsx61(component_default2, { children: __36("Search items") }),
               children: __36("Search items")
             }
           ),
-          /* @__PURE__ */ jsx60(
+          /* @__PURE__ */ jsx61(
             Ariakit21.Combobox,
             {
               autoSelect: "always",
@@ -17972,16 +17957,16 @@ function ComboboxList2({ view, filter, onChangeView }) {
               className: "dataviews-filters__search-widget-filter-combobox__input"
             }
           ),
-          /* @__PURE__ */ jsx60("div", { className: "dataviews-filters__search-widget-filter-combobox__icon", children: /* @__PURE__ */ jsx60(icon_default2, { icon: search_default }) })
+          /* @__PURE__ */ jsx61("div", { className: "dataviews-filters__search-widget-filter-combobox__icon", children: /* @__PURE__ */ jsx61(icon_default2, { icon: search_default }) })
         ] }),
-        /* @__PURE__ */ jsxs18(
+        /* @__PURE__ */ jsxs19(
           Ariakit21.ComboboxList,
           {
             className: "dataviews-filters__search-widget-filter-combobox-list",
             alwaysVisible: true,
             children: [
               matches.map((element) => {
-                return /* @__PURE__ */ jsxs18(
+                return /* @__PURE__ */ jsxs19(
                   Ariakit21.ComboboxItem,
                   {
                     resetValueOnSelect: false,
@@ -17991,13 +17976,13 @@ function ComboboxList2({ view, filter, onChangeView }) {
                     setValueOnClick: false,
                     focusOnHover: true,
                     children: [
-                      filter.singleSelection && /* @__PURE__ */ jsx60(
+                      filter.singleSelection && /* @__PURE__ */ jsx61(
                         SingleSelectionOption,
                         {
                           selected: currentValue === element.value
                         }
                       ),
-                      !filter.singleSelection && /* @__PURE__ */ jsx60(
+                      !filter.singleSelection && /* @__PURE__ */ jsx61(
                         MultiSelectionOption,
                         {
                           selected: currentValue.includes(
@@ -18005,20 +17990,20 @@ function ComboboxList2({ view, filter, onChangeView }) {
                           )
                         }
                       ),
-                      /* @__PURE__ */ jsxs18(
+                      /* @__PURE__ */ jsxs19(
                         "span",
                         {
                           className: "dataviews-filters__search-widget-listitem-value",
                           title: element.label,
                           children: [
-                            /* @__PURE__ */ jsx60(
+                            /* @__PURE__ */ jsx61(
                               Ariakit21.ComboboxItemValue,
                               {
                                 className: "dataviews-filters__search-widget-filter-combobox-item-value",
                                 value: element.label
                               }
                             ),
-                            !!element.description && /* @__PURE__ */ jsx60("span", { className: "dataviews-filters__search-widget-listitem-description", children: element.description })
+                            !!element.description && /* @__PURE__ */ jsx61("span", { className: "dataviews-filters__search-widget-listitem-description", children: element.description })
                           ]
                         }
                       )
@@ -18027,7 +18012,7 @@ function ComboboxList2({ view, filter, onChangeView }) {
                   element.value
                 );
               }),
-              !matches.length && /* @__PURE__ */ jsx60("p", { children: __36("No results found") })
+              !matches.length && /* @__PURE__ */ jsx61("p", { children: __36("No results found") })
             ]
           }
         )
@@ -18041,18 +18026,18 @@ function SearchWidget(props) {
     getElements: props.filter.getElements
   });
   if (isLoading) {
-    return /* @__PURE__ */ jsx60("div", { className: "dataviews-filters__search-widget-no-elements", children: /* @__PURE__ */ jsx60(spinner_default, {}) });
+    return /* @__PURE__ */ jsx61("div", { className: "dataviews-filters__search-widget-no-elements", children: /* @__PURE__ */ jsx61(spinner_default, {}) });
   }
   if (elements.length === 0) {
-    return /* @__PURE__ */ jsx60("div", { className: "dataviews-filters__search-widget-no-elements", children: __36("No elements found") });
+    return /* @__PURE__ */ jsx61("div", { className: "dataviews-filters__search-widget-no-elements", children: __36("No elements found") });
   }
   const Widget = elements.length > 10 ? ComboboxList2 : ListBox;
-  return /* @__PURE__ */ jsx60(Widget, { ...props, filter: { ...props.filter, elements } });
+  return /* @__PURE__ */ jsx61(Widget, { ...props, filter: { ...props.filter, elements } });
 }
 
 // src/components/dataviews-filters/input-widget.tsx
 import fastDeepEqual2 from "fast-deep-equal/es6/index.js";
-import { jsx as jsx61 } from "react/jsx-runtime";
+import { jsx as jsx62 } from "react/jsx-runtime";
 function InputWidget({
   filter,
   view,
@@ -18116,13 +18101,13 @@ function InputWidget({
   if (!field || !field.Edit || !currentFilter) {
     return null;
   }
-  return /* @__PURE__ */ jsx61(
+  return /* @__PURE__ */ jsx62(
     component_default3,
     {
       className: "dataviews-filters__user-input-widget",
       gap: 2.5,
       direction: "column",
-      children: /* @__PURE__ */ jsx61(
+      children: /* @__PURE__ */ jsx62(
         field.Edit,
         {
           hideLabelFromVision: true,
@@ -18140,10 +18125,10 @@ function InputWidget({
 import { subDays, subWeeks, subMonths, subYears } from "date-fns";
 import { __ as __37, sprintf as sprintf15 } from "@wordpress/i18n";
 import { getDate } from "@wordpress/date";
-import { jsx as jsx62 } from "react/jsx-runtime";
+import { jsx as jsx63 } from "react/jsx-runtime";
 var filterTextWrappers = {
-  Name: /* @__PURE__ */ jsx62("span", { className: "dataviews-filters__summary-filter-text-name" }),
-  Value: /* @__PURE__ */ jsx62("span", { className: "dataviews-filters__summary-filter-text-value" })
+  Name: /* @__PURE__ */ jsx63("span", { className: "dataviews-filters__summary-filter-text-name" }),
+  Value: /* @__PURE__ */ jsx63("span", { className: "dataviews-filters__summary-filter-text-value" })
 };
 function getRelativeDate(value, unit) {
   switch (unit) {
@@ -18679,7 +18664,7 @@ var isSingleSelectionOperator = (name) => OPERATORS.filter((op) => op.selection
 var isRegisteredOperator = (name) => OPERATORS.some((op) => op.name === name);
 
 // src/components/dataviews-filters/filter.tsx
-import { jsx as jsx63, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs20 } from "react/jsx-runtime";
 var ENTER = "Enter";
 var SPACE = " ";
 var FilterText = ({
@@ -18713,7 +18698,7 @@ function OperatorSelector({
     (_filter) => _filter.field === filter.field
   );
   const value = currentFilter?.operator || filter.operators[0];
-  return operatorOptions.length > 1 && /* @__PURE__ */ jsxs19(
+  return operatorOptions.length > 1 && /* @__PURE__ */ jsxs20(
     Stack,
     {
       direction: "row",
@@ -18722,8 +18707,8 @@ function OperatorSelector({
       className: "dataviews-filters__summary-operators-container",
       align: "center",
       children: [
-        /* @__PURE__ */ jsx63(component_default4, { className: "dataviews-filters__summary-operators-filter-name", children: filter.name }),
-        /* @__PURE__ */ jsx63(
+        /* @__PURE__ */ jsx64(component_default4, { className: "dataviews-filters__summary-operators-filter-name", children: filter.name }),
+        /* @__PURE__ */ jsx64(
           select_control_default,
           {
             className: "dataviews-filters__summary-operators-filter-select",
@@ -18849,7 +18834,7 @@ function Filter({
   const isLocked = filterInView?.isLocked;
   const hasValues = !isLocked && filterInView?.value !== void 0;
   const canResetOrRemove = !isLocked && (!isPrimary || hasValues);
-  return /* @__PURE__ */ jsx63(
+  return /* @__PURE__ */ jsx64(
     dropdown_default,
     {
       defaultOpen: openedFilter === filter.field,
@@ -18858,8 +18843,8 @@ function Filter({
       onClose: () => {
         toggleRef.current?.focus();
       },
-      renderToggle: ({ isOpen, onToggle }) => /* @__PURE__ */ jsxs19("div", { className: "dataviews-filters__summary-chip-container", children: [
-        /* @__PURE__ */ jsx63(
+      renderToggle: ({ isOpen, onToggle }) => /* @__PURE__ */ jsxs20("div", { className: "dataviews-filters__summary-chip-container", children: [
+        /* @__PURE__ */ jsx64(
           tooltip_default,
           {
             text: sprintf16(
@@ -18868,10 +18853,10 @@ function Filter({
               filter.name.toLowerCase()
             ),
             placement: "top",
-            children: /* @__PURE__ */ jsx63(
+            children: /* @__PURE__ */ jsx64(
               "div",
               {
-                className: clsx44(
+                className: clsx42(
                   "dataviews-filters__summary-chip",
                   {
                     "has-reset": canResetOrRemove,
@@ -18896,7 +18881,7 @@ function Filter({
                 "aria-pressed": isOpen,
                 "aria-expanded": isOpen,
                 ref: toggleRef,
-                children: /* @__PURE__ */ jsx63(
+                children: /* @__PURE__ */ jsx64(
                   FilterText,
                   {
                     activeElements,
@@ -18908,15 +18893,15 @@ function Filter({
             )
           }
         ),
-        canResetOrRemove && /* @__PURE__ */ jsx63(
+        canResetOrRemove && /* @__PURE__ */ jsx64(
           tooltip_default,
           {
             text: isPrimary ? __38("Reset") : __38("Remove"),
             placement: "top",
-            children: /* @__PURE__ */ jsx63(
+            children: /* @__PURE__ */ jsx64(
               "button",
               {
-                className: clsx44(
+                className: clsx42(
                   "dataviews-filters__summary-chip-remove",
                   { "has-values": hasValues }
                 ),
@@ -18934,16 +18919,16 @@ function Filter({
                     toggleRef.current?.focus();
                   }
                 },
-                children: /* @__PURE__ */ jsx63(icon_default2, { icon: close_small_default })
+                children: /* @__PURE__ */ jsx64(icon_default2, { icon: close_small_default })
               }
             )
           }
         )
       ] }),
       renderContent: () => {
-        return /* @__PURE__ */ jsxs19(Stack, { direction: "column", justify: "flex-start", children: [
-          /* @__PURE__ */ jsx63(OperatorSelector, { ...commonProps }),
-          commonProps.filter.hasElements ? /* @__PURE__ */ jsx63(
+        return /* @__PURE__ */ jsxs20(Stack, { direction: "column", justify: "flex-start", children: [
+          /* @__PURE__ */ jsx64(OperatorSelector, { ...commonProps }),
+          commonProps.filter.hasElements ? /* @__PURE__ */ jsx64(
             SearchWidget,
             {
               ...commonProps,
@@ -18952,7 +18937,7 @@ function Filter({
                 elements
               }
             }
-          ) : /* @__PURE__ */ jsx63(InputWidget, { ...commonProps, fields })
+          ) : /* @__PURE__ */ jsx64(InputWidget, { ...commonProps, fields })
         ] });
       }
     }
@@ -18961,7 +18946,7 @@ function Filter({
 
 // src/components/dataviews-filters/add-filter.tsx
 import { __ as __39 } from "@wordpress/i18n";
-import { jsx as jsx64, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs21 } from "react/jsx-runtime";
 var { Menu: Menu7 } = unlock3(privateApis);
 function AddFilterMenu({
   filters,
@@ -18971,10 +18956,10 @@ function AddFilterMenu({
   triggerProps
 }) {
   const inactiveFilters = filters.filter((filter) => !filter.isVisible);
-  return /* @__PURE__ */ jsxs20(Menu7, { children: [
-    /* @__PURE__ */ jsx64(Menu7.TriggerButton, { ...triggerProps }),
-    /* @__PURE__ */ jsx64(Menu7.Popover, { children: inactiveFilters.map((filter) => {
-      return /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsxs21(Menu7, { children: [
+    /* @__PURE__ */ jsx65(Menu7.TriggerButton, { ...triggerProps }),
+    /* @__PURE__ */ jsx65(Menu7.Popover, { children: inactiveFilters.map((filter) => {
+      return /* @__PURE__ */ jsx65(
         Menu7.Item,
         {
           onClick: () => {
@@ -18992,7 +18977,7 @@ function AddFilterMenu({
               ]
             });
           },
-          children: /* @__PURE__ */ jsx64(Menu7.ItemLabel, { children: filter.name })
+          children: /* @__PURE__ */ jsx65(Menu7.ItemLabel, { children: filter.name })
         },
         filter.field
       );
@@ -19004,11 +18989,11 @@ function AddFilter({ filters, view, onChangeView, setOpenedFilter }, ref) {
     return null;
   }
   const inactiveFilters = filters.filter((filter) => !filter.isVisible);
-  return /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsx65(
     AddFilterMenu,
     {
       triggerProps: {
-        render: /* @__PURE__ */ jsx64(
+        render: /* @__PURE__ */ jsx65(
           button_default,
           {
             accessibleWhenDisabled: true,
@@ -19029,7 +19014,7 @@ var add_filter_default = forwardRef(AddFilter);
 
 // src/components/dataviews-filters/reset-filters.tsx
 import { __ as __40 } from "@wordpress/i18n";
-import { jsx as jsx65 } from "react/jsx-runtime";
+import { jsx as jsx66 } from "react/jsx-runtime";
 function ResetFilter({
   filters,
   view,
@@ -19041,7 +19026,7 @@ function ResetFilter({
   const isDisabled = !view.search && !view.filters?.some(
     (_filter) => !_filter.isLocked && (_filter.value !== void 0 || !isPrimary(_filter.field))
   );
-  return /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsx66(
     button_default,
     {
       disabled: isDisabled,
@@ -19113,12 +19098,12 @@ function useFilters(fields, view) {
 var use_filters_default = useFilters;
 
 // src/components/dataviews-filters/filters.tsx
-import { jsx as jsx66 } from "react/jsx-runtime";
+import { jsx as jsx67 } from "react/jsx-runtime";
 function Filters({ className: className2 }) {
   const { fields, view, onChangeView, openedFilter, setOpenedFilter } = useContext(dataviews_context_default);
   const addFilterRef = useRef(null);
   const filters = use_filters_default(fields, view);
-  const addFilter = /* @__PURE__ */ jsx66(
+  const addFilter = /* @__PURE__ */ jsx67(
     add_filter_default,
     {
       filters,
@@ -19135,7 +19120,7 @@ function Filters({ className: className2 }) {
   }
   const filterComponents = [
     ...visibleFilters.map((filter) => {
-      return /* @__PURE__ */ jsx66(
+      return /* @__PURE__ */ jsx67(
         Filter,
         {
           filter,
@@ -19151,7 +19136,7 @@ function Filters({ className: className2 }) {
     addFilter
   ];
   filterComponents.push(
-    /* @__PURE__ */ jsx66(
+    /* @__PURE__ */ jsx67(
       ResetFilter,
       {
         filters,
@@ -19161,7 +19146,7 @@ function Filters({ className: className2 }) {
       "reset-filters"
     )
   );
-  return /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsx67(
     Stack,
     {
       direction: "row",
@@ -19178,7 +19163,7 @@ var filters_default = memo(Filters);
 
 // src/components/dataviews-filters/toggle.tsx
 import { __ as __41, _x as _x3 } from "@wordpress/i18n";
-import { Fragment as Fragment11, jsx as jsx67, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx68, jsxs as jsxs22 } from "react/jsx-runtime";
 function FiltersToggle() {
   const {
     filters,
@@ -19219,7 +19204,7 @@ function FiltersToggle() {
   const hasPrimaryOrLockedFilters = filters.some(
     (filter) => filter.isPrimary || filter.isLocked
   );
-  const buttonComponent = /* @__PURE__ */ jsx67(
+  const buttonComponent = /* @__PURE__ */ jsx68(
     button_default,
     {
       ref: buttonRef,
@@ -19231,7 +19216,7 @@ function FiltersToggle() {
       ...hasVisibleFilters ? toggleFiltersButtonProps : addFilterButtonProps
     }
   );
-  return /* @__PURE__ */ jsx67("div", { className: "dataviews-filters__container-visibility-toggle", children: !hasVisibleFilters ? /* @__PURE__ */ jsx67(
+  return /* @__PURE__ */ jsx68("div", { className: "dataviews-filters__container-visibility-toggle", children: !hasVisibleFilters ? /* @__PURE__ */ jsx68(
     AddFilterMenu,
     {
       filters,
@@ -19240,7 +19225,7 @@ function FiltersToggle() {
       setOpenedFilter,
       triggerProps: { render: buttonComponent }
     }
-  ) : /* @__PURE__ */ jsx67(
+  ) : /* @__PURE__ */ jsx68(
     FilterVisibilityToggle,
     {
       buttonRef,
@@ -19260,27 +19245,27 @@ function FilterVisibilityToggle({
     },
     [buttonRef]
   );
-  return /* @__PURE__ */ jsxs21(Fragment11, { children: [
+  return /* @__PURE__ */ jsxs22(Fragment12, { children: [
     children,
-    !!filtersCount && /* @__PURE__ */ jsx67("span", { className: "dataviews-filters-toggle__count", children: filtersCount })
+    !!filtersCount && /* @__PURE__ */ jsx68("span", { className: "dataviews-filters-toggle__count", children: filtersCount })
   ] });
 }
 var toggle_default = FiltersToggle;
 
 // src/components/dataviews-filters/filters-toggled.tsx
-import { jsx as jsx68 } from "react/jsx-runtime";
+import { jsx as jsx69 } from "react/jsx-runtime";
 function FiltersToggled(props) {
   const { isShowingFilter } = useContext(dataviews_context_default);
   if (!isShowingFilter) {
     return null;
   }
-  return /* @__PURE__ */ jsx68(filters_default, { ...props });
+  return /* @__PURE__ */ jsx69(filters_default, { ...props });
 }
 var filters_toggled_default = FiltersToggled;
 
 // src/components/dataviews-layout/index.tsx
 import { __ as __42 } from "@wordpress/i18n";
-import { jsx as jsx69 } from "react/jsx-runtime";
+import { jsx as jsx70 } from "react/jsx-runtime";
 function DataViewsLayout({ className: className2 }) {
   const {
     actions = [],
@@ -19299,15 +19284,22 @@ function DataViewsLayout({ className: className2 }) {
     isItemClickable: isItemClickable2,
     renderItemLink,
     defaultLayouts,
-    empty = /* @__PURE__ */ jsx69("p", { children: __42("No results") })
+    containerRef,
+    empty = /* @__PURE__ */ jsx70("p", { children: __42("No results") })
   } = useContext(dataviews_context_default);
+  const isDelayedInitialLoading = useDelayedLoading(!hasInitiallyLoaded, {
+    delay: 200
+  });
   if (!hasInitiallyLoaded) {
-    return null;
+    if (!isDelayedInitialLoading) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx70("div", { className: "dataviews-loading", children: /* @__PURE__ */ jsx70("p", { children: /* @__PURE__ */ jsx70(spinner_default, {}) }) });
   }
   const ViewComponent = VIEW_LAYOUTS.find(
     (v) => v.type === view.type && defaultLayouts[v.type]
   )?.component;
-  return /* @__PURE__ */ jsx69(
+  return /* @__PURE__ */ jsx70("div", { className: "dataviews-layout__container", ref: containerRef, children: /* @__PURE__ */ jsx70(
     ViewComponent,
     {
       className: className2,
@@ -19327,12 +19319,12 @@ function DataViewsLayout({ className: className2 }) {
       view,
       empty
     }
-  );
+  ) });
 }
 
 // src/components/dataviews-footer/index.tsx
-import clsx45 from "clsx";
-import { jsx as jsx70, jsxs as jsxs22 } from "react/jsx-runtime";
+import clsx43 from "clsx";
+import { jsx as jsx71, jsxs as jsxs23 } from "react/jsx-runtime";
 var EMPTY_ARRAY5 = [];
 function DataViewsFooter() {
   const {
@@ -19350,24 +19342,24 @@ function DataViewsFooter() {
   if (!isRefreshing && (!totalItems || !totalPages || totalPages <= 1 && !hasBulkActions)) {
     return null;
   }
-  return (!!totalItems || isRefreshing) && /* @__PURE__ */ jsx70(
+  return (!!totalItems || isRefreshing) && /* @__PURE__ */ jsx71(
     "div",
     {
       className: "dataviews-footer",
       inert: isRefreshing ? "true" : void 0,
-      children: /* @__PURE__ */ jsxs22(
+      children: /* @__PURE__ */ jsxs23(
         Stack,
         {
           direction: "row",
           justify: "end",
           align: "center",
-          className: clsx45("dataviews-footer__content", {
+          className: clsx43("dataviews-footer__content", {
             "is-refreshing": isDelayedRefreshing
           }),
           gap: "sm",
           children: [
-            hasBulkActions && /* @__PURE__ */ jsx70(BulkActionsFooter, {}),
-            /* @__PURE__ */ jsx70(dataviews_pagination_default, {})
+            hasBulkActions && /* @__PURE__ */ jsx71(BulkActionsFooter, {}),
+            /* @__PURE__ */ jsx71(dataviews_pagination_default, {})
           ]
         }
       )
@@ -19377,7 +19369,7 @@ function DataViewsFooter() {
 
 // src/components/dataviews-search/index.tsx
 import { __ as __43 } from "@wordpress/i18n";
-import { jsx as jsx71 } from "react/jsx-runtime";
+import { jsx as jsx72 } from "react/jsx-runtime";
 var DataViewsSearch = memo(function Search({ label }) {
   const { view, onChangeView } = useContext(dataviews_context_default);
   const [search, setSearch, debouncedSearch] = useDebouncedInput(
@@ -19404,7 +19396,7 @@ var DataViewsSearch = memo(function Search({ label }) {
     }
   }, [debouncedSearch]);
   const searchLabel = label || __43("Search");
-  return /* @__PURE__ */ jsx71(
+  return /* @__PURE__ */ jsx72(
     search_control_default,
     {
       className: "dataviews-search",
@@ -19423,7 +19415,7 @@ import { __ as __45, _x as _x4 } from "@wordpress/i18n";
 
 // src/components/dataviews-view-config/infinite-scroll-toggle.tsx
 import { __ as __44 } from "@wordpress/i18n";
-import { jsx as jsx72 } from "react/jsx-runtime";
+import { jsx as jsx73 } from "react/jsx-runtime";
 function InfiniteScrollToggle() {
   const context = useContext(dataviews_context_default);
   const { view, onChangeView } = context;
@@ -19431,7 +19423,7 @@ function InfiniteScrollToggle() {
   if (!context.hasInfiniteScrollHandler) {
     return null;
   }
-  return /* @__PURE__ */ jsx72(
+  return /* @__PURE__ */ jsx73(
     toggle_control_default,
     {
       label: __44("Enable infinite scroll"),
@@ -19450,7 +19442,7 @@ function InfiniteScrollToggle() {
 }
 
 // src/components/dataviews-view-config/index.tsx
-import { Fragment as Fragment12, jsx as jsx73, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx74, jsxs as jsxs24 } from "react/jsx-runtime";
 var { Menu: Menu8 } = unlock3(privateApis);
 var DATAVIEWS_CONFIG_POPOVER_PROPS = {
   className: "dataviews-config__popover",
@@ -19464,11 +19456,11 @@ function ViewTypeMenu() {
     return null;
   }
   const activeView = VIEW_LAYOUTS.find((v) => view.type === v.type);
-  return /* @__PURE__ */ jsxs23(Menu8, { children: [
-    /* @__PURE__ */ jsx73(
+  return /* @__PURE__ */ jsxs24(Menu8, { children: [
+    /* @__PURE__ */ jsx74(
       Menu8.TriggerButton,
       {
-        render: /* @__PURE__ */ jsx73(
+        render: /* @__PURE__ */ jsx74(
           button_default,
           {
             size: "compact",
@@ -19478,14 +19470,14 @@ function ViewTypeMenu() {
         )
       }
     ),
-    /* @__PURE__ */ jsx73(Menu8.Popover, { children: availableLayouts.map((layout) => {
+    /* @__PURE__ */ jsx74(Menu8.Popover, { children: availableLayouts.map((layout) => {
       const config = VIEW_LAYOUTS.find(
         (v) => v.type === layout
       );
       if (!config) {
         return null;
       }
-      return /* @__PURE__ */ jsx73(
+      return /* @__PURE__ */ jsx74(
         Menu8.RadioItem,
         {
           value: layout,
@@ -19512,7 +19504,7 @@ function ViewTypeMenu() {
             }
             warning("Invalid dataview");
           },
-          children: /* @__PURE__ */ jsx73(Menu8.ItemLabel, { children: config.label })
+          children: /* @__PURE__ */ jsx74(Menu8.ItemLabel, { children: config.label })
         },
         layout
       );
@@ -19532,7 +19524,7 @@ function SortFieldControl() {
       };
     });
   }, [fields]);
-  return /* @__PURE__ */ jsx73(
+  return /* @__PURE__ */ jsx74(
     select_control_default,
     {
       __next40pxDefaultSize: true,
@@ -19564,7 +19556,7 @@ function SortDirectionControl() {
   if (!value && view.sort?.field) {
     value = "desc";
   }
-  return /* @__PURE__ */ jsx73(
+  return /* @__PURE__ */ jsx74(
     component_default10,
     {
       className: "dataviews-view-config__sort-direction",
@@ -19590,7 +19582,7 @@ function SortDirectionControl() {
         warning("Invalid direction");
       },
       children: SORTING_DIRECTIONS.map((direction) => {
-        return /* @__PURE__ */ jsx73(
+        return /* @__PURE__ */ jsx74(
           component_default13,
           {
             value: direction,
@@ -19609,7 +19601,7 @@ function ItemsPerPageControl() {
   if (!config || !config.perPageSizes || config.perPageSizes.length < 2 || config.perPageSizes.length > 6 || infiniteScrollEnabled) {
     return null;
   }
-  return /* @__PURE__ */ jsx73(
+  return /* @__PURE__ */ jsx74(
     component_default10,
     {
       __next40pxDefaultSize: true,
@@ -19626,7 +19618,7 @@ function ItemsPerPageControl() {
         });
       },
       children: config.perPageSizes.map((value) => {
-        return /* @__PURE__ */ jsx73(
+        return /* @__PURE__ */ jsx74(
           component_default12,
           {
             value,
@@ -19644,7 +19636,7 @@ function ResetViewButton() {
     return null;
   }
   const isDisabled = onReset === false;
-  return /* @__PURE__ */ jsx73(
+  return /* @__PURE__ */ jsx74(
     button_default,
     {
       variant: "tertiary",
@@ -19671,7 +19663,7 @@ function DataviewsViewConfigDropdown() {
     (layout) => layout.type === view.type
   );
   const isModified = typeof onReset === "function";
-  return /* @__PURE__ */ jsx73(
+  return /* @__PURE__ */ jsx74(
     dropdown_default,
     {
       expandOnMobile: true,
@@ -19680,8 +19672,8 @@ function DataviewsViewConfigDropdown() {
         id: popoverId
       },
       renderToggle: ({ onToggle, isOpen }) => {
-        return /* @__PURE__ */ jsxs23("div", { className: "dataviews-view-config__toggle-wrapper", children: [
-          /* @__PURE__ */ jsx73(
+        return /* @__PURE__ */ jsxs24("div", { className: "dataviews-view-config__toggle-wrapper", children: [
+          /* @__PURE__ */ jsx74(
             button_default,
             {
               size: "compact",
@@ -19695,22 +19687,22 @@ function DataviewsViewConfigDropdown() {
               "aria-controls": popoverId
             }
           ),
-          isModified && /* @__PURE__ */ jsx73("span", { className: "dataviews-view-config__modified-indicator" })
+          isModified && /* @__PURE__ */ jsx74("span", { className: "dataviews-view-config__modified-indicator" })
         ] });
       },
-      renderContent: () => /* @__PURE__ */ jsx73(
+      renderContent: () => /* @__PURE__ */ jsx74(
         dropdown_content_wrapper_default,
         {
           paddingSize: "medium",
           className: "dataviews-config__popover-content-wrapper",
-          children: /* @__PURE__ */ jsxs23(
+          children: /* @__PURE__ */ jsxs24(
             Stack,
             {
               direction: "column",
               className: "dataviews-view-config",
               gap: "xl",
               children: [
-                /* @__PURE__ */ jsxs23(
+                /* @__PURE__ */ jsxs24(
                   Stack,
                   {
                     direction: "row",
@@ -19718,7 +19710,7 @@ function DataviewsViewConfigDropdown() {
                     align: "center",
                     className: "dataviews-view-config__header",
                     children: [
-                      /* @__PURE__ */ jsx73(
+                      /* @__PURE__ */ jsx74(
                         component_default16,
                         {
                           level: 2,
@@ -19726,27 +19718,27 @@ function DataviewsViewConfigDropdown() {
                           children: __45("Appearance")
                         }
                       ),
-                      /* @__PURE__ */ jsx73(ResetViewButton, {})
+                      /* @__PURE__ */ jsx74(ResetViewButton, {})
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsxs23(Stack, { direction: "column", gap: "lg", children: [
-                  /* @__PURE__ */ jsxs23(
+                /* @__PURE__ */ jsxs24(Stack, { direction: "column", gap: "lg", children: [
+                  /* @__PURE__ */ jsxs24(
                     Stack,
                     {
                       direction: "row",
                       gap: "sm",
                       className: "dataviews-view-config__sort-controls",
                       children: [
-                        /* @__PURE__ */ jsx73(SortFieldControl, {}),
-                        /* @__PURE__ */ jsx73(SortDirectionControl, {})
+                        /* @__PURE__ */ jsx74(SortFieldControl, {}),
+                        /* @__PURE__ */ jsx74(SortDirectionControl, {})
                       ]
                     }
                   ),
-                  !!activeLayout?.viewConfigOptions && /* @__PURE__ */ jsx73(activeLayout.viewConfigOptions, {}),
-                  /* @__PURE__ */ jsx73(InfiniteScrollToggle, {}),
-                  /* @__PURE__ */ jsx73(ItemsPerPageControl, {}),
-                  /* @__PURE__ */ jsx73(PropertiesSection, {})
+                  !!activeLayout?.viewConfigOptions && /* @__PURE__ */ jsx74(activeLayout.viewConfigOptions, {}),
+                  /* @__PURE__ */ jsx74(InfiniteScrollToggle, {}),
+                  /* @__PURE__ */ jsx74(ItemsPerPageControl, {}),
+                  /* @__PURE__ */ jsx74(PropertiesSection, {})
                 ] })
               ]
             }
@@ -19757,9 +19749,9 @@ function DataviewsViewConfigDropdown() {
   );
 }
 function _DataViewsViewConfig() {
-  return /* @__PURE__ */ jsxs23(Fragment12, { children: [
-    /* @__PURE__ */ jsx73(ViewTypeMenu, {}),
-    /* @__PURE__ */ jsx73(DataviewsViewConfigDropdown, {})
+  return /* @__PURE__ */ jsxs24(Fragment13, { children: [
+    /* @__PURE__ */ jsx74(ViewTypeMenu, {}),
+    /* @__PURE__ */ jsx74(DataviewsViewConfigDropdown, {})
   ] });
 }
 var DataViewsViewConfig = memo(_DataViewsViewConfig);
@@ -19789,7 +19781,7 @@ function getCustomValidity(isValid, validity) {
 }
 
 // src/components/dataform-controls/checkbox.tsx
-import { jsx as jsx74 } from "react/jsx-runtime";
+import { jsx as jsx75 } from "react/jsx-runtime";
 var { ValidatedCheckboxControl: ValidatedCheckboxControl2 } = unlock3(privateApis);
 function Checkbox({
   field,
@@ -19805,7 +19797,7 @@ function Checkbox({
       setValue({ item: data, value: !getValue({ item: data }) })
     );
   }, [data, getValue, onChange, setValue]);
-  return /* @__PURE__ */ jsx74(
+  return /* @__PURE__ */ jsx75(
     ValidatedCheckboxControl2,
     {
       required: !!field.isValid?.required,
@@ -19821,7 +19813,7 @@ function Checkbox({
 }
 
 // src/components/dataform-controls/combobox.tsx
-import { jsx as jsx75 } from "react/jsx-runtime";
+import { jsx as jsx76 } from "react/jsx-runtime";
 var { ValidatedComboboxControl: ValidatedComboboxControl2 } = unlock3(privateApis);
 function Combobox2({
   data,
@@ -19841,9 +19833,9 @@ function Combobox2({
     getElements: field.getElements
   });
   if (isLoading) {
-    return /* @__PURE__ */ jsx75(spinner_default, {});
+    return /* @__PURE__ */ jsx76(spinner_default, {});
   }
-  return /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsx76(
     ValidatedComboboxControl2,
     {
       required: !!field.isValid?.required,
@@ -19862,14 +19854,13 @@ function Combobox2({
 }
 
 // src/components/dataform-controls/datetime.tsx
-import { format } from "date-fns";
 import { __ as __47 } from "@wordpress/i18n";
-import { getSettings } from "@wordpress/date";
+import { dateI18n, getDate as getDate3, getSettings } from "@wordpress/date";
 
 // src/components/dataform-controls/utils/relative-date-control.tsx
-import clsx46 from "clsx";
+import clsx44 from "clsx";
 import { __ as __46 } from "@wordpress/i18n";
-import { jsx as jsx76, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx77, jsxs as jsxs25 } from "react/jsx-runtime";
 var TIME_UNITS_OPTIONS = {
   [OPERATOR_IN_THE_PAST]: [
     { value: "days", label: __46("Days") },
@@ -19893,7 +19884,7 @@ function RelativeDateControl({
   operator
 }) {
   const options2 = TIME_UNITS_OPTIONS[operator === OPERATOR_IN_THE_PAST ? "inThePast" : "over"];
-  const { id, label, getValue, setValue } = field;
+  const { id, label, description, getValue, setValue } = field;
   const fieldValue = getValue({ item: data });
   const { value: relValue = "", unit = options2[0].value } = fieldValue && typeof fieldValue === "object" ? fieldValue : {};
   const onChangeValue = useCallback(
@@ -19914,15 +19905,16 @@ function RelativeDateControl({
     ),
     [onChange, setValue, data, relValue]
   );
-  return /* @__PURE__ */ jsx76(
+  return /* @__PURE__ */ jsx77(
     base_control_default,
     {
       id,
-      className: clsx46(className2, "dataviews-controls__relative-date"),
+      className: clsx44(className2, "dataviews-controls__relative-date"),
       label,
       hideLabelFromVision,
-      children: /* @__PURE__ */ jsxs24(Stack, { direction: "row", gap: "sm", children: [
-        /* @__PURE__ */ jsx76(
+      help: description,
+      children: /* @__PURE__ */ jsxs25(Stack, { direction: "row", gap: "sm", children: [
+        /* @__PURE__ */ jsx77(
           number_control_default,
           {
             __next40pxDefaultSize: true,
@@ -19934,7 +19926,7 @@ function RelativeDateControl({
             onChange: onChangeValue
           }
         ),
-        /* @__PURE__ */ jsx76(
+        /* @__PURE__ */ jsx77(
           select_control_default,
           {
             className: "dataviews-controls__relative-date-unit",
@@ -19963,16 +19955,13 @@ function parseDateTime(dateTimeString) {
 }
 
 // src/components/dataform-controls/datetime.tsx
-import { jsx as jsx77, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx78, jsxs as jsxs26 } from "react/jsx-runtime";
 var { DateCalendar: DateCalendar2, ValidatedInputControl: ValidatedInputControl2 } = unlock3(privateApis);
-var formatDateTime = (date) => {
-  if (!date) {
+var formatDateTime = (value) => {
+  if (!value) {
     return "";
   }
-  if (typeof date === "string") {
-    return date;
-  }
-  return format(date, "yyyy-MM-dd'T'HH:mm");
+  return dateI18n("Y-m-d\\TH:i", getDate3(value));
 };
 function CalendarDateTimeControl({
   data,
@@ -20007,17 +19996,14 @@ function CalendarDateTimeControl({
     (newDate) => {
       let dateTimeValue;
       if (newDate) {
-        let finalDateTime = newDate;
+        const wpDate = dateI18n("Y-m-d", newDate);
+        let wpTime;
         if (value) {
-          const currentDateTime = parseDateTime(value);
-          if (currentDateTime) {
-            finalDateTime = new Date(newDate);
-            finalDateTime.setHours(currentDateTime.getHours());
-            finalDateTime.setMinutes(
-              currentDateTime.getMinutes()
-            );
-          }
+          wpTime = dateI18n("H:i", getDate3(value));
+        } else {
+          wpTime = dateI18n("H:i", newDate);
         }
+        const finalDateTime = getDate3(`${wpDate}T${wpTime}`);
         dateTimeValue = finalDateTime.toISOString();
         onChangeCallback(dateTimeValue);
         if (validationTimeoutRef.current) {
@@ -20043,7 +20029,7 @@ function CalendarDateTimeControl({
   const handleManualDateTimeChange = useCallback(
     (newValue) => {
       if (newValue) {
-        const dateTime = new Date(newValue);
+        const dateTime = getDate3(newValue);
         onChangeCallback(dateTime.toISOString());
         const parsedDate = parseDateTime(dateTime.toISOString());
         if (parsedDate) {
@@ -20066,27 +20052,15 @@ function CalendarDateTimeControl({
   } else if (!isValid?.required && markWhenOptional && !hideLabelFromVision) {
     displayLabel = `${label} (${__47("Optional")})`;
   }
-  return /* @__PURE__ */ jsx77(
+  return /* @__PURE__ */ jsx78(
     base_control_default,
     {
       id,
       label: displayLabel,
       help: description,
       hideLabelFromVision,
-      children: /* @__PURE__ */ jsxs25(Stack, { direction: "column", gap: "lg", children: [
-        /* @__PURE__ */ jsx77(
-          DateCalendar2,
-          {
-            style: { width: "100%" },
-            selected: value ? parseDateTime(value) || void 0 : void 0,
-            onSelect: onSelectDate,
-            month: calendarMonth,
-            onMonthChange: setCalendarMonth,
-            timeZone: timezoneString || void 0,
-            weekStartsOn
-          }
-        ),
-        /* @__PURE__ */ jsx77(
+      children: /* @__PURE__ */ jsxs26(Stack, { direction: "column", gap: "lg", children: [
+        /* @__PURE__ */ jsx78(
           ValidatedInputControl2,
           {
             ref: inputControlRef,
@@ -20096,11 +20070,21 @@ function CalendarDateTimeControl({
             type: "datetime-local",
             label: __47("Date time"),
             hideLabelFromVision: true,
-            value: value ? formatDateTime(
-              parseDateTime(value) || void 0
-            ) : "",
+            value: formatDateTime(value),
             onChange: handleManualDateTimeChange
           }
+        ),
+        /* @__PURE__ */ jsx78(
+          DateCalendar2,
+          {
+            style: { width: "100%" },
+            selected: value ? parseDateTime(value) || void 0 : void 0,
+            onSelect: onSelectDate,
+            month: calendarMonth,
+            onMonthChange: setCalendarMonth,
+            timeZone: timezoneString || void 0,
+            weekStartsOn
+          }
         )
       ] })
     }
@@ -20116,7 +20100,7 @@ function DateTime({
   validity
 }) {
   if (operator === OPERATOR_IN_THE_PAST || operator === OPERATOR_OVER) {
-    return /* @__PURE__ */ jsx77(
+    return /* @__PURE__ */ jsx78(
       RelativeDateControl,
       {
         className: "dataviews-controls__datetime",
@@ -20128,7 +20112,7 @@ function DateTime({
       }
     );
   }
-  return /* @__PURE__ */ jsx77(
+  return /* @__PURE__ */ jsx78(
     CalendarDateTimeControl,
     {
       data,
@@ -20142,9 +20126,9 @@ function DateTime({
 }
 
 // src/components/dataform-controls/date.tsx
-import clsx47 from "clsx";
+import clsx45 from "clsx";
 import {
-  format as format2,
+  format,
   isValid as isValidDate2,
   subMonths as subMonths2,
   subDays as subDays2,
@@ -20153,20 +20137,20 @@ import {
   startOfYear
 } from "date-fns";
 import { __ as __48 } from "@wordpress/i18n";
-import { getDate as getDate3, getSettings as getSettings2 } from "@wordpress/date";
-import { jsx as jsx78, jsxs as jsxs26 } from "react/jsx-runtime";
+import { getDate as getDate4, getSettings as getSettings2 } from "@wordpress/date";
+import { jsx as jsx79, jsxs as jsxs27 } from "react/jsx-runtime";
 var { DateCalendar: DateCalendar3, DateRangeCalendar: DateRangeCalendar2 } = unlock3(privateApis);
 var DATE_PRESETS = [
   {
     id: "today",
     label: __48("Today"),
-    getValue: () => getDate3(null)
+    getValue: () => getDate4(null)
   },
   {
     id: "yesterday",
     label: __48("Yesterday"),
     getValue: () => {
-      const today = getDate3(null);
+      const today = getDate4(null);
       return subDays2(today, 1);
     }
   },
@@ -20174,7 +20158,7 @@ var DATE_PRESETS = [
     id: "past-week",
     label: __48("Past week"),
     getValue: () => {
-      const today = getDate3(null);
+      const today = getDate4(null);
       return subDays2(today, 7);
     }
   },
@@ -20182,7 +20166,7 @@ var DATE_PRESETS = [
     id: "past-month",
     label: __48("Past month"),
     getValue: () => {
-      const today = getDate3(null);
+      const today = getDate4(null);
       return subMonths2(today, 1);
     }
   }
@@ -20192,7 +20176,7 @@ var DATE_RANGE_PRESETS = [
     id: "last-7-days",
     label: __48("Last 7 days"),
     getValue: () => {
-      const today = getDate3(null);
+      const today = getDate4(null);
       return [subDays2(today, 7), today];
     }
   },
@@ -20200,7 +20184,7 @@ var DATE_RANGE_PRESETS = [
     id: "last-30-days",
     label: __48("Last 30 days"),
     getValue: () => {
-      const today = getDate3(null);
+      const today = getDate4(null);
       return [subDays2(today, 30), today];
     }
   },
@@ -20208,7 +20192,7 @@ var DATE_RANGE_PRESETS = [
     id: "month-to-date",
     label: __48("Month to date"),
     getValue: () => {
-      const today = getDate3(null);
+      const today = getDate4(null);
       return [startOfMonth(today), today];
     }
   },
@@ -20216,7 +20200,7 @@ var DATE_RANGE_PRESETS = [
     id: "last-year",
     label: __48("Last year"),
     getValue: () => {
-      const today = getDate3(null);
+      const today = getDate4(null);
       return [subYears2(today, 1), today];
     }
   },
@@ -20224,7 +20208,7 @@ var DATE_RANGE_PRESETS = [
     id: "year-to-date",
     label: __48("Year to date"),
     getValue: () => {
-      const today = getDate3(null);
+      const today = getDate4(null);
       return [startOfYear(today), today];
     }
   }
@@ -20233,14 +20217,14 @@ var parseDate = (dateString) => {
   if (!dateString) {
     return null;
   }
-  const parsed = getDate3(dateString);
+  const parsed = getDate4(dateString);
   return parsed && isValidDate2(parsed) ? parsed : null;
 };
 var formatDate = (date) => {
   if (!date) {
     return "";
   }
-  return typeof date === "string" ? date : format2(date, "yyyy-MM-dd");
+  return typeof date === "string" ? date : format(date, "yyyy-MM-dd");
 };
 function ValidatedDateControl({
   field,
@@ -20312,17 +20296,17 @@ function ValidatedDateControl({
       setIsTouched(true);
     }
   };
-  return /* @__PURE__ */ jsxs26("div", { onBlur, children: [
+  return /* @__PURE__ */ jsxs27("div", { onBlur, children: [
     children,
-    /* @__PURE__ */ jsx78("div", { "aria-live": "polite", children: customValidity && /* @__PURE__ */ jsxs26(
+    /* @__PURE__ */ jsx79("div", { "aria-live": "polite", children: customValidity && /* @__PURE__ */ jsxs27(
       "p",
       {
-        className: clsx47(
+        className: clsx45(
           "components-validated-control__indicator",
           customValidity.type === "invalid" ? "is-invalid" : void 0
         ),
         children: [
-          /* @__PURE__ */ jsx78(
+          /* @__PURE__ */ jsx79(
             icon_default2,
             {
               className: "components-validated-control__indicator-icon",
@@ -20348,6 +20332,7 @@ function CalendarDateControl({
   const {
     id,
     label,
+    description,
     setValue,
     getValue,
     isValid,
@@ -20371,7 +20356,7 @@ function CalendarDateControl({
   );
   const onSelectDate = useCallback(
     (newDate) => {
-      const dateValue = newDate ? format2(newDate, "yyyy-MM-dd") : void 0;
+      const dateValue = newDate ? format(newDate, "yyyy-MM-dd") : void 0;
       onChangeCallback(dateValue);
       setSelectedPresetId(null);
       setIsTouched(true);
@@ -20412,7 +20397,7 @@ function CalendarDateControl({
   } else if (!isValid?.required && markWhenOptional) {
     displayLabel = `${label} (${__48("Optional")})`;
   }
-  return /* @__PURE__ */ jsx78(
+  return /* @__PURE__ */ jsx79(
     ValidatedDateControl,
     {
       field,
@@ -20420,15 +20405,16 @@ function CalendarDateControl({
       inputRefs: validityTargetRef,
       isTouched,
       setIsTouched,
-      children: /* @__PURE__ */ jsx78(
+      children: /* @__PURE__ */ jsx79(
         base_control_default,
         {
           id,
           className: "dataviews-controls__date",
           label: displayLabel,
+          help: description,
           hideLabelFromVision,
-          children: /* @__PURE__ */ jsxs26(Stack, { direction: "column", gap: "lg", children: [
-            /* @__PURE__ */ jsxs26(
+          children: /* @__PURE__ */ jsxs27(Stack, { direction: "column", gap: "lg", children: [
+            /* @__PURE__ */ jsxs27(
               Stack,
               {
                 direction: "row",
@@ -20438,7 +20424,7 @@ function CalendarDateControl({
                 children: [
                   DATE_PRESETS.map((preset) => {
                     const isSelected = selectedPresetId === preset.id;
-                    return /* @__PURE__ */ jsx78(
+                    return /* @__PURE__ */ jsx79(
                       button_default,
                       {
                         className: "dataviews-controls__date-preset",
@@ -20451,7 +20437,7 @@ function CalendarDateControl({
                       preset.id
                     );
                   }),
-                  /* @__PURE__ */ jsx78(
+                  /* @__PURE__ */ jsx79(
                     button_default,
                     {
                       className: "dataviews-controls__date-preset",
@@ -20466,7 +20452,7 @@ function CalendarDateControl({
                 ]
               }
             ),
-            /* @__PURE__ */ jsx78(
+            /* @__PURE__ */ jsx79(
               input_control_default,
               {
                 __next40pxDefaultSize: true,
@@ -20479,7 +20465,7 @@ function CalendarDateControl({
                 required: !!field.isValid?.required
               }
             ),
-            /* @__PURE__ */ jsx78(
+            /* @__PURE__ */ jsx79(
               DateCalendar3,
               {
                 style: { width: "100%" },
@@ -20505,7 +20491,14 @@ function CalendarDateRangeControl({
   markWhenOptional,
   validity
 }) {
-  const { id, label, getValue, setValue, format: fieldFormat } = field;
+  const {
+    id,
+    label,
+    description,
+    getValue,
+    setValue,
+    format: fieldFormat
+  } = field;
   let value;
   const fieldValue = getValue({ item: data });
   if (Array.isArray(fieldValue) && fieldValue.length === 2 && fieldValue.every((date) => typeof date === "string")) {
@@ -20600,7 +20593,7 @@ function CalendarDateRangeControl({
   } else if (!field.isValid?.required && markWhenOptional) {
     displayLabel = `${label} (${__48("Optional")})`;
   }
-  return /* @__PURE__ */ jsx78(
+  return /* @__PURE__ */ jsx79(
     ValidatedDateControl,
     {
       field,
@@ -20608,15 +20601,16 @@ function CalendarDateRangeControl({
       inputRefs: [fromInputRef, toInputRef],
       isTouched,
       setIsTouched,
-      children: /* @__PURE__ */ jsx78(
+      children: /* @__PURE__ */ jsx79(
         base_control_default,
         {
           id,
           className: "dataviews-controls__date",
           label: displayLabel,
+          help: description,
           hideLabelFromVision,
-          children: /* @__PURE__ */ jsxs26(Stack, { direction: "column", gap: "lg", children: [
-            /* @__PURE__ */ jsxs26(
+          children: /* @__PURE__ */ jsxs27(Stack, { direction: "column", gap: "lg", children: [
+            /* @__PURE__ */ jsxs27(
               Stack,
               {
                 direction: "row",
@@ -20626,7 +20620,7 @@ function CalendarDateRangeControl({
                 children: [
                   DATE_RANGE_PRESETS.map((preset) => {
                     const isSelected = selectedPresetId === preset.id;
-                    return /* @__PURE__ */ jsx78(
+                    return /* @__PURE__ */ jsx79(
                       button_default,
                       {
                         className: "dataviews-controls__date-preset",
@@ -20639,7 +20633,7 @@ function CalendarDateRangeControl({
                       preset.id
                     );
                   }),
-                  /* @__PURE__ */ jsx78(
+                  /* @__PURE__ */ jsx79(
                     button_default,
                     {
                       className: "dataviews-controls__date-preset",
@@ -20654,7 +20648,7 @@ function CalendarDateRangeControl({
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs26(
+            /* @__PURE__ */ jsxs27(
               Stack,
               {
                 direction: "row",
@@ -20662,7 +20656,7 @@ function CalendarDateRangeControl({
                 justify: "space-between",
                 className: "dataviews-controls__date-range-inputs",
                 children: [
-                  /* @__PURE__ */ jsx78(
+                  /* @__PURE__ */ jsx79(
                     input_control_default,
                     {
                       __next40pxDefaultSize: true,
@@ -20675,7 +20669,7 @@ function CalendarDateRangeControl({
                       required: !!field.isValid?.required
                     }
                   ),
-                  /* @__PURE__ */ jsx78(
+                  /* @__PURE__ */ jsx79(
                     input_control_default,
                     {
                       __next40pxDefaultSize: true,
@@ -20691,7 +20685,7 @@ function CalendarDateRangeControl({
                 ]
               }
             ),
-            /* @__PURE__ */ jsx78(
+            /* @__PURE__ */ jsx79(
               DateRangeCalendar2,
               {
                 style: { width: "100%" },
@@ -20719,7 +20713,7 @@ function DateControl({
   validity
 }) {
   if (operator === OPERATOR_IN_THE_PAST || operator === OPERATOR_OVER) {
-    return /* @__PURE__ */ jsx78(
+    return /* @__PURE__ */ jsx79(
       RelativeDateControl,
       {
         className: "dataviews-controls__date",
@@ -20732,7 +20726,7 @@ function DateControl({
     );
   }
   if (operator === OPERATOR_BETWEEN) {
-    return /* @__PURE__ */ jsx78(
+    return /* @__PURE__ */ jsx79(
       CalendarDateRangeControl,
       {
         data,
@@ -20744,7 +20738,7 @@ function DateControl({
       }
     );
   }
-  return /* @__PURE__ */ jsx78(
+  return /* @__PURE__ */ jsx79(
     CalendarDateControl,
     {
       data,
@@ -20758,7 +20752,7 @@ function DateControl({
 }
 
 // src/components/dataform-controls/select.tsx
-import { jsx as jsx79 } from "react/jsx-runtime";
+import { jsx as jsx80 } from "react/jsx-runtime";
 var { ValidatedSelectControl: ValidatedSelectControl2 } = unlock3(privateApis);
 function Select2({
   data,
@@ -20780,9 +20774,9 @@ function Select2({
     getElements: field.getElements
   });
   if (isLoading) {
-    return /* @__PURE__ */ jsx79(spinner_default, {});
+    return /* @__PURE__ */ jsx80(spinner_default, {});
   }
-  return /* @__PURE__ */ jsx79(
+  return /* @__PURE__ */ jsx80(
     ValidatedSelectControl2,
     {
       required: !!field.isValid?.required,
@@ -20801,7 +20795,7 @@ function Select2({
 }
 
 // src/components/dataform-controls/adaptive-select.tsx
-import { jsx as jsx80 } from "react/jsx-runtime";
+import { jsx as jsx81 } from "react/jsx-runtime";
 var ELEMENTS_THRESHOLD = 10;
 function AdaptiveSelect(props) {
   const { field } = props;
@@ -20810,13 +20804,13 @@ function AdaptiveSelect(props) {
     getElements: field.getElements
   });
   if (elements.length >= ELEMENTS_THRESHOLD) {
-    return /* @__PURE__ */ jsx80(Combobox2, { ...props });
+    return /* @__PURE__ */ jsx81(Combobox2, { ...props });
   }
-  return /* @__PURE__ */ jsx80(Select2, { ...props });
+  return /* @__PURE__ */ jsx81(Select2, { ...props });
 }
 
 // src/components/dataform-controls/utils/validated-input.tsx
-import { jsx as jsx81 } from "react/jsx-runtime";
+import { jsx as jsx82 } from "react/jsx-runtime";
 var { ValidatedInputControl: ValidatedInputControl3 } = unlock3(privateApis);
 function ValidatedText({
   data,
@@ -20840,7 +20834,7 @@ function ValidatedText({
     ),
     [data, setValue, onChange]
   );
-  return /* @__PURE__ */ jsx81(
+  return /* @__PURE__ */ jsx82(
     ValidatedInputControl3,
     {
       required: !!isValid.required,
@@ -20864,7 +20858,7 @@ function ValidatedText({
 }
 
 // src/components/dataform-controls/email.tsx
-import { jsx as jsx82 } from "react/jsx-runtime";
+import { jsx as jsx83 } from "react/jsx-runtime";
 function Email({
   data,
   field,
@@ -20873,7 +20867,7 @@ function Email({
   markWhenOptional,
   validity
 }) {
-  return /* @__PURE__ */ jsx82(
+  return /* @__PURE__ */ jsx83(
     ValidatedText,
     {
       ...{
@@ -20884,14 +20878,14 @@ function Email({
         markWhenOptional,
         validity,
         type: "email",
-        prefix: /* @__PURE__ */ jsx82(input_prefix_wrapper_default, { variant: "icon", children: /* @__PURE__ */ jsx82(icon_default2, { icon: envelope_default }) })
+        prefix: /* @__PURE__ */ jsx83(input_prefix_wrapper_default, { variant: "icon", children: /* @__PURE__ */ jsx83(icon_default2, { icon: envelope_default }) })
       }
     }
   );
 }
 
 // src/components/dataform-controls/telephone.tsx
-import { jsx as jsx83 } from "react/jsx-runtime";
+import { jsx as jsx84 } from "react/jsx-runtime";
 function Telephone({
   data,
   field,
@@ -20900,7 +20894,7 @@ function Telephone({
   markWhenOptional,
   validity
 }) {
-  return /* @__PURE__ */ jsx83(
+  return /* @__PURE__ */ jsx84(
     ValidatedText,
     {
       ...{
@@ -20911,14 +20905,14 @@ function Telephone({
         markWhenOptional,
         validity,
         type: "tel",
-        prefix: /* @__PURE__ */ jsx83(input_prefix_wrapper_default, { variant: "icon", children: /* @__PURE__ */ jsx83(icon_default2, { icon: mobile_default }) })
+        prefix: /* @__PURE__ */ jsx84(input_prefix_wrapper_default, { variant: "icon", children: /* @__PURE__ */ jsx84(icon_default2, { icon: mobile_default }) })
       }
     }
   );
 }
 
 // src/components/dataform-controls/url.tsx
-import { jsx as jsx84 } from "react/jsx-runtime";
+import { jsx as jsx85 } from "react/jsx-runtime";
 function Url({
   data,
   field,
@@ -20927,7 +20921,7 @@ function Url({
   markWhenOptional,
   validity
 }) {
-  return /* @__PURE__ */ jsx84(
+  return /* @__PURE__ */ jsx85(
     ValidatedText,
     {
       ...{
@@ -20938,7 +20932,7 @@ function Url({
         markWhenOptional,
         validity,
         type: "url",
-        prefix: /* @__PURE__ */ jsx84(input_prefix_wrapper_default, { variant: "icon", children: /* @__PURE__ */ jsx84(icon_default2, { icon: link_default }) })
+        prefix: /* @__PURE__ */ jsx85(input_prefix_wrapper_default, { variant: "icon", children: /* @__PURE__ */ jsx85(icon_default2, { icon: link_default }) })
       }
     }
   );
@@ -20946,7 +20940,7 @@ function Url({
 
 // src/components/dataform-controls/utils/validated-number.tsx
 import { __ as __49 } from "@wordpress/i18n";
-import { jsx as jsx85, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx86, jsxs as jsxs28 } from "react/jsx-runtime";
 var { ValidatedNumberControl: ValidatedNumberControl2 } = unlock3(privateApis);
 function toNumberOrEmpty(value) {
   if (value === "" || value === void 0) {
@@ -20970,12 +20964,12 @@ function BetweenControls({
     (newValue) => onChange([min, toNumberOrEmpty(newValue)]),
     [onChange, min]
   );
-  return /* @__PURE__ */ jsx85(
+  return /* @__PURE__ */ jsx86(
     base_control_default,
     {
       help: __49("The max. value must be greater than the min. value."),
-      children: /* @__PURE__ */ jsxs27(component_default3, { direction: "row", gap: 4, children: [
-        /* @__PURE__ */ jsx85(
+      children: /* @__PURE__ */ jsxs28(component_default3, { direction: "row", gap: 4, children: [
+        /* @__PURE__ */ jsx86(
           number_control_default,
           {
             label: __49("Min."),
@@ -20987,7 +20981,7 @@ function BetweenControls({
             step
           }
         ),
-        /* @__PURE__ */ jsx85(
+        /* @__PURE__ */ jsx86(
           number_control_default,
           {
             label: __49("Max."),
@@ -21048,7 +21042,7 @@ function ValidatedNumber({
     )) {
       valueBetween = value;
     }
-    return /* @__PURE__ */ jsx85(
+    return /* @__PURE__ */ jsx86(
       BetweenControls,
       {
         value: valueBetween,
@@ -21058,7 +21052,7 @@ function ValidatedNumber({
       }
     );
   }
-  return /* @__PURE__ */ jsx85(
+  return /* @__PURE__ */ jsx86(
     ValidatedNumberControl2,
     {
       required: !!isValid.required,
@@ -21078,19 +21072,19 @@ function ValidatedNumber({
 }
 
 // src/components/dataform-controls/integer.tsx
-import { jsx as jsx86 } from "react/jsx-runtime";
+import { jsx as jsx87 } from "react/jsx-runtime";
 function Integer(props) {
-  return /* @__PURE__ */ jsx86(ValidatedNumber, { ...props });
+  return /* @__PURE__ */ jsx87(ValidatedNumber, { ...props });
 }
 
 // src/components/dataform-controls/number.tsx
-import { jsx as jsx87 } from "react/jsx-runtime";
+import { jsx as jsx88 } from "react/jsx-runtime";
 function Number2(props) {
-  return /* @__PURE__ */ jsx87(ValidatedNumber, { ...props });
+  return /* @__PURE__ */ jsx88(ValidatedNumber, { ...props });
 }
 
 // src/components/dataform-controls/radio.tsx
-import { jsx as jsx88 } from "react/jsx-runtime";
+import { jsx as jsx89 } from "react/jsx-runtime";
 var { ValidatedRadioControl: ValidatedRadioControl2 } = unlock3(privateApis);
 function Radio2({
   data,
@@ -21111,9 +21105,9 @@ function Radio2({
     [data, onChange, setValue]
   );
   if (isLoading) {
-    return /* @__PURE__ */ jsx88(spinner_default, {});
+    return /* @__PURE__ */ jsx89(spinner_default, {});
   }
-  return /* @__PURE__ */ jsx88(
+  return /* @__PURE__ */ jsx89(
     ValidatedRadioControl2,
     {
       required: !!field.isValid?.required,
@@ -21130,7 +21124,7 @@ function Radio2({
 }
 
 // src/components/dataform-controls/text.tsx
-import { jsx as jsx89 } from "react/jsx-runtime";
+import { jsx as jsx90 } from "react/jsx-runtime";
 function Text3({
   data,
   field,
@@ -21141,7 +21135,7 @@ function Text3({
   validity
 }) {
   const { prefix, suffix } = config || {};
-  return /* @__PURE__ */ jsx89(
+  return /* @__PURE__ */ jsx90(
     ValidatedText,
     {
       ...{
@@ -21159,7 +21153,7 @@ function Text3({
 }
 
 // src/components/dataform-controls/toggle.tsx
-import { jsx as jsx90 } from "react/jsx-runtime";
+import { jsx as jsx91 } from "react/jsx-runtime";
 var { ValidatedToggleControl: ValidatedToggleControl2 } = unlock3(privateApis);
 function Toggle({
   field,
@@ -21175,7 +21169,7 @@ function Toggle({
       setValue({ item: data, value: !getValue({ item: data }) })
     );
   }, [onChange, setValue, data, getValue]);
-  return /* @__PURE__ */ jsx90(
+  return /* @__PURE__ */ jsx91(
     ValidatedToggleControl2,
     {
       required: !!isValid.required,
@@ -21191,7 +21185,7 @@ function Toggle({
 }
 
 // src/components/dataform-controls/textarea.tsx
-import { jsx as jsx91 } from "react/jsx-runtime";
+import { jsx as jsx92 } from "react/jsx-runtime";
 var { ValidatedTextareaControl: ValidatedTextareaControl2 } = unlock3(privateApis);
 function Textarea({
   data,
@@ -21209,7 +21203,7 @@ function Textarea({
     (newValue) => onChange(setValue({ item: data, value: newValue })),
     [data, onChange, setValue]
   );
-  return /* @__PURE__ */ jsx91(
+  return /* @__PURE__ */ jsx92(
     ValidatedTextareaControl2,
     {
       required: !!isValid.required,
@@ -21230,7 +21224,7 @@ function Textarea({
 }
 
 // src/components/dataform-controls/toggle-group.tsx
-import { jsx as jsx92 } from "react/jsx-runtime";
+import { jsx as jsx93 } from "react/jsx-runtime";
 var { ValidatedToggleGroupControl: ValidatedToggleGroupControl2 } = unlock3(privateApis);
 function ToggleGroup({
   data,
@@ -21251,13 +21245,13 @@ function ToggleGroup({
     getElements: field.getElements
   });
   if (isLoading) {
-    return /* @__PURE__ */ jsx92(spinner_default, {});
+    return /* @__PURE__ */ jsx93(spinner_default, {});
   }
   if (elements.length === 0) {
     return null;
   }
   const selectedOption = elements.find((el) => el.value === value);
-  return /* @__PURE__ */ jsx92(
+  return /* @__PURE__ */ jsx93(
     ValidatedToggleGroupControl2,
     {
       required: !!field.isValid?.required,
@@ -21270,7 +21264,7 @@ function ToggleGroup({
       onChange: onChangeControl,
       value,
       hideLabelFromVision,
-      children: elements.map((el) => /* @__PURE__ */ jsx92(
+      children: elements.map((el) => /* @__PURE__ */ jsx93(
         component_default12,
         {
           label: el.label,
@@ -21283,7 +21277,7 @@ function ToggleGroup({
 }
 
 // src/components/dataform-controls/array.tsx
-import { jsx as jsx93 } from "react/jsx-runtime";
+import { jsx as jsx94 } from "react/jsx-runtime";
 var { ValidatedFormTokenField: ValidatedFormTokenField2 } = unlock3(privateApis);
 function ArrayControl({
   data,
@@ -21321,9 +21315,9 @@ function ArrayControl({
     [onChange, setValue, data]
   );
   if (isLoading) {
-    return /* @__PURE__ */ jsx93(spinner_default, {});
+    return /* @__PURE__ */ jsx94(spinner_default, {});
   }
-  return /* @__PURE__ */ jsx93(
+  return /* @__PURE__ */ jsx94(
     ValidatedFormTokenField2,
     {
       required: !!isValid?.required,
@@ -21361,9 +21355,9 @@ function ArrayControl({
           const element = elements.find(
             (el) => el.value === item2
           );
-          return /* @__PURE__ */ jsx93("span", { children: element?.label || item2 });
+          return /* @__PURE__ */ jsx94("span", { children: element?.label || item2 });
         }
-        return /* @__PURE__ */ jsx93("span", { children: item2 });
+        return /* @__PURE__ */ jsx94("span", { children: item2 });
       }
     }
   );
@@ -21372,28 +21366,28 @@ function ArrayControl({
 // src/components/dataform-controls/color.tsx
 import { colord as colord7 } from "colord";
 import { __ as __50 } from "@wordpress/i18n";
-import { jsx as jsx94 } from "react/jsx-runtime";
+import { jsx as jsx95 } from "react/jsx-runtime";
 var { ValidatedInputControl: ValidatedInputControl4 } = unlock3(privateApis);
 var ColorPickerDropdown = ({
   color,
   onColorChange
 }) => {
   const validColor = color && colord7(color).isValid() ? color : "#ffffff";
-  return /* @__PURE__ */ jsx94(
+  return /* @__PURE__ */ jsx95(
     dropdown_default,
     {
       className: "dataviews-controls__color-picker-dropdown",
       popoverProps: { resize: false },
-      renderToggle: ({ onToggle }) => /* @__PURE__ */ jsx94(
+      renderToggle: ({ onToggle }) => /* @__PURE__ */ jsx95(
         button_default,
         {
           onClick: onToggle,
           "aria-label": __50("Open color picker"),
           size: "small",
-          icon: () => /* @__PURE__ */ jsx94(color_indicator_default, { colorValue: validColor })
+          icon: () => /* @__PURE__ */ jsx95(color_indicator_default, { colorValue: validColor })
         }
       ),
-      renderContent: () => /* @__PURE__ */ jsx94(dropdown_content_wrapper_default, { paddingSize: "none", children: /* @__PURE__ */ jsx94(
+      renderContent: () => /* @__PURE__ */ jsx95(dropdown_content_wrapper_default, { paddingSize: "none", children: /* @__PURE__ */ jsx95(
         LegacyAdapter,
         {
           color: validColor,
@@ -21426,7 +21420,7 @@ function Color({
     },
     [data, onChange, setValue]
   );
-  return /* @__PURE__ */ jsx94(
+  return /* @__PURE__ */ jsx95(
     ValidatedInputControl4,
     {
       required: !!field.isValid?.required,
@@ -21439,7 +21433,7 @@ function Color({
       onChange: handleInputChange,
       hideLabelFromVision,
       type: "text",
-      prefix: /* @__PURE__ */ jsx94(input_prefix_wrapper_default, { variant: "control", children: /* @__PURE__ */ jsx94(
+      prefix: /* @__PURE__ */ jsx95(input_prefix_wrapper_default, { variant: "control", children: /* @__PURE__ */ jsx95(
         ColorPickerDropdown,
         {
           color: value,
@@ -21452,7 +21446,7 @@ function Color({
 
 // src/components/dataform-controls/password.tsx
 import { __ as __51 } from "@wordpress/i18n";
-import { jsx as jsx95 } from "react/jsx-runtime";
+import { jsx as jsx96 } from "react/jsx-runtime";
 function Password({
   data,
   field,
@@ -21465,7 +21459,7 @@ function Password({
   const toggleVisibility = useCallback(() => {
     setIsVisible((prev) => !prev);
   }, []);
-  return /* @__PURE__ */ jsx95(
+  return /* @__PURE__ */ jsx96(
     ValidatedText,
     {
       ...{
@@ -21476,7 +21470,7 @@ function Password({
         markWhenOptional,
         validity,
         type: isVisible2 ? "text" : "password",
-        suffix: /* @__PURE__ */ jsx95(input_suffix_wrapper_default, { variant: "control", children: /* @__PURE__ */ jsx95(
+        suffix: /* @__PURE__ */ jsx96(input_suffix_wrapper_default, { variant: "control", children: /* @__PURE__ */ jsx96(
           button_default,
           {
             icon: isVisible2 ? unseen_default : seen_default,
@@ -21496,7 +21490,7 @@ function hasElements(field) {
 }
 
 // src/components/dataform-controls/index.tsx
-import { jsx as jsx96 } from "react/jsx-runtime";
+import { jsx as jsx97 } from "react/jsx-runtime";
 var FORM_CONTROLS = {
   adaptiveSelect: AdaptiveSelect,
   array: ArrayControl,
@@ -21528,7 +21522,7 @@ function createConfiguredControl(config) {
     return null;
   }
   return function ConfiguredControl(props) {
-    return /* @__PURE__ */ jsx96(BaseControlType, { ...props, config: controlConfig });
+    return /* @__PURE__ */ jsx97(BaseControlType, { ...props, config: controlConfig });
   };
 }
 function getControl(field, fallback) {
@@ -21626,13 +21620,13 @@ function RenderFromElements({
 }
 
 // src/field-types/utils/render-default.tsx
-import { jsx as jsx97 } from "react/jsx-runtime";
+import { jsx as jsx98 } from "react/jsx-runtime";
 function render2({
   item: item2,
   field
 }) {
   if (field.hasElements) {
-    return /* @__PURE__ */ jsx97(RenderFromElements, { item: item2, field });
+    return /* @__PURE__ */ jsx98(RenderFromElements, { item: item2, field });
   }
   return field.getValueFormatted({ item: item2, field });
 }
@@ -21783,7 +21777,7 @@ function isValidMax(item2, field) {
 }
 
 // src/field-types/integer.tsx
-var format3 = {
+var format2 = {
   separatorThousand: ","
 };
 function getValueFormatted2({
@@ -21800,7 +21794,7 @@ function getValueFormatted2({
   }
   let formatInteger;
   if (field.type !== "integer") {
-    formatInteger = format3;
+    formatInteger = format2;
   } else {
     formatInteger = field.format;
   }
@@ -21852,7 +21846,7 @@ var integer_default = {
     OPERATOR_IS_ALL,
     OPERATOR_IS_NOT_ALL
   ],
-  format: format3,
+  format: format2,
   getValueFormatted: getValueFormatted2,
   validate: {
     required: isValidRequired,
@@ -21865,7 +21859,7 @@ var integer_default = {
 
 // src/field-types/number.tsx
 import { __ as __54 } from "@wordpress/i18n";
-var format4 = {
+var format3 = {
   separatorThousand: ",",
   separatorDecimal: ".",
   decimals: 2
@@ -21884,7 +21878,7 @@ function getValueFormatted3({
   }
   let formatNumber;
   if (field.type !== "number") {
-    formatNumber = format4;
+    formatNumber = format3;
   } else {
     formatNumber = field.format;
   }
@@ -21935,7 +21929,7 @@ var number_default = {
     OPERATOR_IS_ALL,
     OPERATOR_IS_NOT_ALL
   ],
-  format: format4,
+  format: format3,
   getValueFormatted: getValueFormatted3,
   validate: {
     required: isValidRequired,
@@ -21980,8 +21974,8 @@ var text_default = {
 };
 
 // src/field-types/datetime.tsx
-import { dateI18n, getDate as getDate4, getSettings as getSettings3 } from "@wordpress/date";
-var format5 = {
+import { dateI18n as dateI18n2, getDate as getDate5, getSettings as getSettings3 } from "@wordpress/date";
+var format4 = {
   datetime: getSettings3().formats.datetime,
   weekStartsOn: getSettings3().l10n.startOfWeek
 };
@@ -21995,11 +21989,11 @@ function getValueFormatted4({
   }
   let formatDatetime;
   if (field.type !== "datetime") {
-    formatDatetime = format5;
+    formatDatetime = format4;
   } else {
     formatDatetime = field.format;
   }
-  return dateI18n(formatDatetime.datetime, getDate4(value));
+  return dateI18n2(formatDatetime.datetime, getDate5(value));
 }
 var sort = (a, b, direction) => {
   const timeA = new Date(a).getTime();
@@ -22033,7 +22027,7 @@ var datetime_default = {
     OPERATOR_IN_THE_PAST,
     OPERATOR_OVER
   ],
-  format: format5,
+  format: format4,
   getValueFormatted: getValueFormatted4,
   validate: {
     required: isValidRequired,
@@ -22042,8 +22036,8 @@ var datetime_default = {
 };
 
 // src/field-types/date.tsx
-import { dateI18n as dateI18n2, getDate as getDate5, getSettings as getSettings4 } from "@wordpress/date";
-var format6 = {
+import { dateI18n as dateI18n3, getDate as getDate6, getSettings as getSettings4 } from "@wordpress/date";
+var format5 = {
   date: getSettings4().formats.date,
   weekStartsOn: getSettings4().l10n.startOfWeek
 };
@@ -22057,11 +22051,11 @@ function getValueFormatted5({
   }
   let formatDate2;
   if (field.type !== "date") {
-    formatDate2 = format6;
+    formatDate2 = format5;
   } else {
     formatDate2 = field.format;
   }
-  return dateI18n2(formatDate2.date, getDate5(value));
+  return dateI18n3(formatDate2.date, getDate6(value));
 }
 var sort2 = (a, b, direction) => {
   const timeA = new Date(a).getTime();
@@ -22097,7 +22091,7 @@ var date_default = {
     OPERATOR_OVER,
     OPERATOR_BETWEEN
   ],
-  format: format6,
+  format: format5,
   getValueFormatted: getValueFormatted5,
   validate: {
     required: isValidRequired,
@@ -22311,17 +22305,17 @@ var telephone_default = {
 // src/field-types/color.tsx
 import { colord as colord8 } from "colord";
 import { __ as __57 } from "@wordpress/i18n";
-import { jsx as jsx98, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx99, jsxs as jsxs29 } from "react/jsx-runtime";
 function render4({ item: item2, field }) {
   if (field.hasElements) {
-    return /* @__PURE__ */ jsx98(RenderFromElements, { item: item2, field });
+    return /* @__PURE__ */ jsx99(RenderFromElements, { item: item2, field });
   }
   const value = get_value_formatted_default_default({ item: item2, field });
   if (!value || !colord8(value).isValid()) {
     return value;
   }
-  return /* @__PURE__ */ jsxs28("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-    /* @__PURE__ */ jsx98(
+  return /* @__PURE__ */ jsxs29("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+    /* @__PURE__ */ jsx99(
       "div",
       {
         style: {
@@ -22334,7 +22328,7 @@ function render4({ item: item2, field }) {
         }
       }
     ),
-    /* @__PURE__ */ jsx98("span", { children: value })
+    /* @__PURE__ */ jsx99("span", { children: value })
   ] });
 }
 function isValidCustom6(item2, field) {
@@ -22617,7 +22611,7 @@ function useData(data, isLoading, paginationInfo) {
 }
 
 // src/dataviews/index.tsx
-import { Fragment as Fragment13, jsx as jsx99, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx100, jsxs as jsxs30 } from "react/jsx-runtime";
 var defaultGetItemId = (item2) => item2.id;
 var defaultIsItemClickable = () => true;
 var EMPTY_ARRAY6 = [];
@@ -22629,8 +22623,8 @@ function DefaultUI({
   search = true,
   searchLabel = void 0
 }) {
-  return /* @__PURE__ */ jsxs29(Fragment13, { children: [
-    /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs30(Fragment14, { children: [
+    /* @__PURE__ */ jsxs30(
       Stack,
       {
         direction: "row",
@@ -22639,7 +22633,7 @@ function DefaultUI({
         className: "dataviews__view-actions",
         gap: "xs",
         children: [
-          /* @__PURE__ */ jsxs29(
+          /* @__PURE__ */ jsxs30(
             Stack,
             {
               direction: "row",
@@ -22647,21 +22641,21 @@ function DefaultUI({
               gap: "sm",
               className: "dataviews__search",
               children: [
-                search && /* @__PURE__ */ jsx99(dataviews_search_default, { label: searchLabel }),
-                /* @__PURE__ */ jsx99(toggle_default, {})
+                search && /* @__PURE__ */ jsx100(dataviews_search_default, { label: searchLabel }),
+                /* @__PURE__ */ jsx100(toggle_default, {})
               ]
             }
           ),
-          /* @__PURE__ */ jsxs29(Stack, { direction: "row", gap: "xs", style: { flexShrink: 0 }, children: [
-            /* @__PURE__ */ jsx99(dataviews_view_config_default, {}),
+          /* @__PURE__ */ jsxs30(Stack, { direction: "row", gap: "xs", style: { flexShrink: 0 }, children: [
+            /* @__PURE__ */ jsx100(dataviews_view_config_default, {}),
             header
           ] })
         ]
       }
     ),
-    /* @__PURE__ */ jsx99(filters_toggled_default, { className: "dataviews-filters__container" }),
-    /* @__PURE__ */ jsx99(DataViewsLayout, {}),
-    /* @__PURE__ */ jsx99(DataViewsFooter, {})
+    /* @__PURE__ */ jsx100(filters_toggled_default, { className: "dataviews-filters__container" }),
+    /* @__PURE__ */ jsx100(DataViewsLayout, {}),
+    /* @__PURE__ */ jsx100(DataViewsFooter, {})
   ] });
 }
 function DataViews({
@@ -22733,8 +22727,13 @@ function DataViews({
       setIsShowingFilter(true);
     }
   }, [hasPrimaryOrLockedFilters, isShowingFilter]);
+  const {
+    data: displayData,
+    paginationInfo: displayPaginationInfo,
+    hasInitiallyLoaded
+  } = useData(data, isLoading, paginationInfo);
   useEffect(() => {
-    if (!view.infiniteScrollEnabled || !containerRef.current) {
+    if (!hasInitiallyLoaded || !view.infiniteScrollEnabled || !containerRef.current) {
       return;
     }
     const handleScroll = throttle((event) => {
@@ -22752,7 +22751,11 @@ function DataViews({
       container.removeEventListener("scroll", handleScroll);
       handleScroll.cancel();
     };
-  }, [infiniteScrollHandler, view.infiniteScrollEnabled]);
+  }, [
+    hasInitiallyLoaded,
+    infiniteScrollHandler,
+    view.infiniteScrollEnabled
+  ]);
   const defaultLayouts = useMemo(
     () => Object.fromEntries(
       Object.entries(defaultLayoutsProperty).filter(
@@ -22765,15 +22768,10 @@ function DataViews({
     ),
     [defaultLayoutsProperty]
   );
-  const {
-    data: displayData,
-    paginationInfo: displayPaginationInfo,
-    hasInitiallyLoaded
-  } = useData(data, isLoading, paginationInfo);
   if (!defaultLayouts[view.type]) {
     return null;
   }
-  return /* @__PURE__ */ jsx99(
+  return /* @__PURE__ */ jsx100(
     dataviews_context_default.Provider,
     {
       value: {
@@ -22806,7 +22804,7 @@ function DataViews({
         hasInfiniteScrollHandler: !!infiniteScrollHandler,
         onReset
       },
-      children: /* @__PURE__ */ jsx99("div", { className: "dataviews-wrapper", ref: containerRef, children: children ?? /* @__PURE__ */ jsx99(
+      children: /* @__PURE__ */ jsx100("div", { className: "dataviews-wrapper", children: children ?? /* @__PURE__ */ jsx100(
         DefaultUI,
         {
           header,
@@ -22831,7 +22829,7 @@ DataViewsSubComponents.Footer = DataViewsFooter;
 var dataviews_default = DataViewsSubComponents;
 
 // src/dataviews-picker/index.tsx
-import { Fragment as Fragment14, jsx as jsx100, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx101, jsxs as jsxs31 } from "react/jsx-runtime";
 var isItemClickable = () => false;
 var dataViewsPickerLayouts = VIEW_LAYOUTS.filter(
   (viewLayout) => viewLayout.isPicker
@@ -22842,8 +22840,8 @@ function DefaultUI2({
   search = true,
   searchLabel = void 0
 }) {
-  return /* @__PURE__ */ jsxs30(Fragment14, { children: [
-    /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs31(Fragment15, { children: [
+    /* @__PURE__ */ jsxs31(
       Stack,
       {
         direction: "row",
@@ -22852,7 +22850,7 @@ function DefaultUI2({
         className: "dataviews__view-actions",
         gap: "xs",
         children: [
-          /* @__PURE__ */ jsxs30(
+          /* @__PURE__ */ jsxs31(
             Stack,
             {
               direction: "row",
@@ -22860,18 +22858,18 @@ function DefaultUI2({
               justify: "start",
               className: "dataviews__search",
               children: [
-                search && /* @__PURE__ */ jsx100(dataviews_search_default, { label: searchLabel }),
-                /* @__PURE__ */ jsx100(toggle_default, {})
+                search && /* @__PURE__ */ jsx101(dataviews_search_default, { label: searchLabel }),
+                /* @__PURE__ */ jsx101(toggle_default, {})
               ]
             }
           ),
-          /* @__PURE__ */ jsx100(Stack, { direction: "row", gap: "xs", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx100(dataviews_view_config_default, {}) })
+          /* @__PURE__ */ jsx101(Stack, { direction: "row", gap: "xs", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx101(dataviews_view_config_default, {}) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx100(filters_toggled_default, { className: "dataviews-filters__container" }),
-    /* @__PURE__ */ jsx100(DataViewsLayout, {}),
-    /* @__PURE__ */ jsx100(DataViewsPickerFooter, {})
+    /* @__PURE__ */ jsx101(filters_toggled_default, { className: "dataviews-filters__container" }),
+    /* @__PURE__ */ jsx101(DataViewsLayout, {}),
+    /* @__PURE__ */ jsx101(DataViewsPickerFooter, {})
   ] });
 }
 function DataViewsPicker({
@@ -22962,7 +22960,7 @@ function DataViewsPicker({
   if (!defaultLayouts[view.type]) {
     return null;
   }
-  return /* @__PURE__ */ jsx100(
+  return /* @__PURE__ */ jsx101(
     dataviews_context_default.Provider,
     {
       value: {
@@ -22992,7 +22990,7 @@ function DataViewsPicker({
         hasInitiallyLoaded: true,
         hasInfiniteScrollHandler: !!infiniteScrollHandler
       },
-      children: /* @__PURE__ */ jsx100("div", { className: "dataviews-picker-wrapper", ref: containerRef, children: children ?? /* @__PURE__ */ jsx100(DefaultUI2, { search, searchLabel }) })
+      children: /* @__PURE__ */ jsx101("div", { className: "dataviews-picker-wrapper", children: children ?? /* @__PURE__ */ jsx101(DefaultUI2, { search, searchLabel }) })
     }
   );
 }
@@ -23009,7 +23007,7 @@ DataViewsPickerSubComponents.ViewConfig = DataviewsViewConfigDropdown;
 var dataviews_picker_default = DataViewsPickerSubComponents;
 
 // src/components/dataform-context/index.tsx
-import { jsx as jsx101 } from "react/jsx-runtime";
+import { jsx as jsx102 } from "react/jsx-runtime";
 var DataFormContext = createContext({
   fields: []
 });
@@ -23018,14 +23016,15 @@ function DataFormProvider({
   fields,
   children
 }) {
-  return /* @__PURE__ */ jsx101(DataFormContext.Provider, { value: { fields }, children });
+  return /* @__PURE__ */ jsx102(DataFormContext.Provider, { value: { fields }, children });
 }
 var dataform_context_default = DataFormContext;
 
 // src/components/dataform-layouts/regular/index.tsx
-import clsx48 from "clsx";
+import clsx46 from "clsx";
 
 // src/components/dataform-layouts/normalize-form.ts
+import { __ as __58 } from "@wordpress/i18n";
 var DEFAULT_LAYOUT = {
   type: "regular",
   labelPosition: "top"
@@ -23051,10 +23050,27 @@ function normalizeLayout(layout) {
   } else if (layout?.type === "panel") {
     const summary = layout.summary ?? [];
     const normalizedSummary = Array.isArray(summary) ? summary : [summary];
+    const openAs = layout?.openAs;
+    let normalizedOpenAs;
+    if (typeof openAs === "object" && openAs.type === "modal") {
+      normalizedOpenAs = {
+        type: "modal",
+        applyLabel: openAs.applyLabel?.trim() || __58("Apply"),
+        cancelLabel: openAs.cancelLabel?.trim() || __58("Cancel")
+      };
+    } else if (openAs === "modal") {
+      normalizedOpenAs = {
+        type: "modal",
+        applyLabel: __58("Apply"),
+        cancelLabel: __58("Cancel")
+      };
+    } else {
+      normalizedOpenAs = { type: "dropdown" };
+    }
     normalizedLayout = {
       type: "panel",
       labelPosition: layout?.labelPosition ?? "side",
-      openAs: layout?.openAs ?? "dropdown",
+      openAs: normalizedOpenAs,
       summary: normalizedSummary,
       editVisibility: layout?.editVisibility ?? "on-hover"
     };
@@ -23126,15 +23142,15 @@ function normalizeForm(form) {
 var normalize_form_default = normalizeForm;
 
 // src/components/dataform-layouts/regular/index.tsx
-import { Fragment as Fragment15, jsx as jsx102, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx103, jsxs as jsxs32 } from "react/jsx-runtime";
 function Header2({ title }) {
-  return /* @__PURE__ */ jsx102(
+  return /* @__PURE__ */ jsx103(
     Stack,
     {
       direction: "column",
       className: "dataforms-layouts-regular__header",
       gap: "lg",
-      children: /* @__PURE__ */ jsx102(Stack, { direction: "row", align: "center", children: /* @__PURE__ */ jsx102(component_default16, { level: 2, size: 13, children: title }) })
+      children: /* @__PURE__ */ jsx103(Stack, { direction: "row", align: "center", children: /* @__PURE__ */ jsx103(component_default16, { level: 2, size: 13, children: title }) })
     }
   );
 }
@@ -23156,9 +23172,9 @@ function FormRegularField({
     [field]
   );
   if (!!field.children) {
-    return /* @__PURE__ */ jsxs31(Fragment15, { children: [
-      !hideLabelFromVision && field.label && /* @__PURE__ */ jsx102(Header2, { title: field.label }),
-      /* @__PURE__ */ jsx102(
+    return /* @__PURE__ */ jsxs32(Fragment16, { children: [
+      !hideLabelFromVision && field.label && /* @__PURE__ */ jsx103(Header2, { title: field.label }),
+      /* @__PURE__ */ jsx103(
         DataFormLayout,
         {
           data,
@@ -23177,30 +23193,30 @@ function FormRegularField({
     return null;
   }
   if (labelPosition === "side") {
-    return /* @__PURE__ */ jsxs31(
+    return /* @__PURE__ */ jsxs32(
       Stack,
       {
         direction: "row",
         className: "dataforms-layouts-regular__field",
         gap: "sm",
         children: [
-          /* @__PURE__ */ jsx102(
+          /* @__PURE__ */ jsx103(
             "div",
             {
-              className: clsx48(
+              className: clsx46(
                 "dataforms-layouts-regular__field-label",
                 `dataforms-layouts-regular__field-label--label-position-${labelPosition}`
               ),
-              children: /* @__PURE__ */ jsx102(base_control_default.VisualLabel, { children: fieldDefinition.label })
+              children: /* @__PURE__ */ jsx103(base_control_default.VisualLabel, { children: fieldDefinition.label })
             }
           ),
-          /* @__PURE__ */ jsx102("div", { className: "dataforms-layouts-regular__field-control", children: fieldDefinition.readOnly === true ? /* @__PURE__ */ jsx102(
+          /* @__PURE__ */ jsx103("div", { className: "dataforms-layouts-regular__field-control", children: fieldDefinition.readOnly === true ? /* @__PURE__ */ jsx103(
             fieldDefinition.render,
             {
               item: data,
               field: fieldDefinition
             }
-          ) : /* @__PURE__ */ jsx102(
+          ) : /* @__PURE__ */ jsx103(
             fieldDefinition.Edit,
             {
               data,
@@ -23216,16 +23232,16 @@ function FormRegularField({
       }
     );
   }
-  return /* @__PURE__ */ jsx102("div", { className: "dataforms-layouts-regular__field", children: fieldDefinition.readOnly === true ? /* @__PURE__ */ jsx102(Fragment15, { children: /* @__PURE__ */ jsxs31(Fragment15, { children: [
-    !hideLabelFromVision && labelPosition !== "none" && /* @__PURE__ */ jsx102(base_control_default.VisualLabel, { children: fieldDefinition.label }),
-    /* @__PURE__ */ jsx102(
+  return /* @__PURE__ */ jsx103("div", { className: "dataforms-layouts-regular__field", children: fieldDefinition.readOnly === true ? /* @__PURE__ */ jsx103(Fragment16, { children: /* @__PURE__ */ jsxs32(Fragment16, { children: [
+    !hideLabelFromVision && labelPosition !== "none" && /* @__PURE__ */ jsx103(base_control_default.VisualLabel, { children: fieldDefinition.label }),
+    /* @__PURE__ */ jsx103(
       fieldDefinition.render,
       {
         item: data,
         field: fieldDefinition
       }
     )
-  ] }) }) : /* @__PURE__ */ jsx102(
+  ] }) }) : /* @__PURE__ */ jsx103(
     fieldDefinition.Edit,
     {
       data,
@@ -23240,16 +23256,15 @@ function FormRegularField({
 
 // src/components/dataform-layouts/panel/modal.tsx
 import deepMerge2 from "deepmerge";
-import { __ as __59 } from "@wordpress/i18n";
 
 // src/components/dataform-layouts/panel/summary-button.tsx
-import clsx50 from "clsx";
+import clsx48 from "clsx";
 import { sprintf as sprintf17, _x as _x5 } from "@wordpress/i18n";
 
 // src/components/dataform-layouts/panel/utils/get-label-classname.ts
-import clsx49 from "clsx";
+import clsx47 from "clsx";
 function getLabelClassName(labelPosition, showError) {
-  return clsx49(
+  return clsx47(
     "dataforms-layouts-panel__field-label",
     `dataforms-layouts-panel__field-label--label-position-${labelPosition}`,
     { "has-error": showError }
@@ -23258,10 +23273,10 @@ function getLabelClassName(labelPosition, showError) {
 var get_label_classname_default = getLabelClassName;
 
 // src/components/dataform-layouts/panel/utils/get-label-content.tsx
-import { jsx as jsx103, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx104, jsxs as jsxs33 } from "react/jsx-runtime";
 function getLabelContent(showError, errorMessage, fieldLabel) {
-  return showError ? /* @__PURE__ */ jsx103(tooltip_default, { text: errorMessage, placement: "top", children: /* @__PURE__ */ jsxs32("span", { className: "dataforms-layouts-panel__field-label-error-content", children: [
-    /* @__PURE__ */ jsx103(icon_default2, { icon: error_default, size: 16 }),
+  return showError ? /* @__PURE__ */ jsx104(tooltip_default, { text: errorMessage, placement: "top", children: /* @__PURE__ */ jsxs33("span", { className: "dataforms-layouts-panel__field-label-error-content", children: [
+    /* @__PURE__ */ jsx104(icon_default2, { icon: error_default, size: 16 }),
     fieldLabel
   ] }) }) : fieldLabel;
 }
@@ -23303,7 +23318,7 @@ function getFirstValidationError(validity) {
 var get_first_validation_error_default = getFirstValidationError;
 
 // src/components/dataform-layouts/panel/summary-button.tsx
-import { jsx as jsx104, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx105, jsxs as jsxs34 } from "react/jsx-runtime";
 function SummaryButton({
   data,
   field,
@@ -23320,7 +23335,7 @@ function SummaryButton({
   const showError = touched && !!errorMessage;
   const labelClassName = get_label_classname_default(labelPosition, showError);
   const labelContent = get_label_content_default(showError, errorMessage, fieldLabel);
-  const className2 = clsx50(
+  const className2 = clsx48(
     "dataforms-layouts-panel__field-trigger",
     `dataforms-layouts-panel__field-trigger--label-${labelPosition}`,
     {
@@ -23355,7 +23370,7 @@ function SummaryButton({
       onClick();
     }
   };
-  return /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs34(
     "div",
     {
       ref: rowRef,
@@ -23363,14 +23378,14 @@ function SummaryButton({
       onClick: !disabled ? handleRowClick : void 0,
       onKeyDown: !disabled ? handleKeyDown : void 0,
       children: [
-        labelPosition !== "none" && /* @__PURE__ */ jsx104("span", { className: labelClassName, children: labelContent }),
-        labelPosition === "none" && showError && /* @__PURE__ */ jsx104(tooltip_default, { text: errorMessage, placement: "top", children: /* @__PURE__ */ jsx104("span", { className: "dataforms-layouts-panel__field-label-error-content", children: /* @__PURE__ */ jsx104(icon_default2, { icon: error_default, size: 16 }) }) }),
-        /* @__PURE__ */ jsx104(
+        labelPosition !== "none" && /* @__PURE__ */ jsx105("span", { className: labelClassName, children: labelContent }),
+        labelPosition === "none" && showError && /* @__PURE__ */ jsx105(tooltip_default, { text: errorMessage, placement: "top", children: /* @__PURE__ */ jsx105("span", { className: "dataforms-layouts-panel__field-label-error-content", children: /* @__PURE__ */ jsx105(icon_default2, { icon: error_default, size: 16 }) }) }),
+        /* @__PURE__ */ jsx105(
           "span",
           {
             id: `${controlId}`,
             className: "dataforms-layouts-panel__field-control",
-            children: summaryFields.length > 1 ? /* @__PURE__ */ jsx104(
+            children: summaryFields.length > 1 ? /* @__PURE__ */ jsx105(
               "span",
               {
                 style: {
@@ -23380,11 +23395,11 @@ function SummaryButton({
                   width: "100%",
                   gap: "2px"
                 },
-                children: summaryFields.map((summaryField) => /* @__PURE__ */ jsx104(
+                children: summaryFields.map((summaryField) => /* @__PURE__ */ jsx105(
                   "span",
                   {
                     style: { width: "100%" },
-                    children: /* @__PURE__ */ jsx104(
+                    children: /* @__PURE__ */ jsx105(
                       summaryField.render,
                       {
                         item: data,
@@ -23395,7 +23410,7 @@ function SummaryButton({
                   summaryField.id
                 ))
               }
-            ) : summaryFields.map((summaryField) => /* @__PURE__ */ jsx104(
+            ) : summaryFields.map((summaryField) => /* @__PURE__ */ jsx105(
               summaryField.render,
               {
                 item: data,
@@ -23405,7 +23420,7 @@ function SummaryButton({
             ))
           }
         ),
-        !disabled && /* @__PURE__ */ jsx104(
+        !disabled && /* @__PURE__ */ jsx105(
           button_default,
           {
             className: "dataforms-layouts-panel__field-trigger-icon",
@@ -23426,7 +23441,7 @@ function SummaryButton({
 // src/hooks/use-form-validity.ts
 import deepMerge from "deepmerge";
 import fastDeepEqual3 from "fast-deep-equal/es6/index.js";
-import { __ as __58 } from "@wordpress/i18n";
+import { __ as __59 } from "@wordpress/i18n";
 function isFormValid(formValidity) {
   if (!formValidity) {
     return true;
@@ -23556,7 +23571,7 @@ function handleElementsValidationAsync(promise, formField, promiseHandler) {
           {
             elements: {
               type: "invalid",
-              message: __58("Could not validate elements.")
+              message: __59("Could not validate elements.")
             }
           },
           [...path, formField.id]
@@ -23575,7 +23590,7 @@ function handleElementsValidationAsync(promise, formField, promiseHandler) {
           {
             elements: {
               type: "invalid",
-              message: __58(
+              message: __59(
                 "Value must be one of the elements."
               )
             }
@@ -23601,7 +23616,7 @@ function handleElementsValidationAsync(promise, formField, promiseHandler) {
     if (error instanceof Error) {
       errorMessage = error.message;
     } else {
-      errorMessage = String(error) || __58(
+      errorMessage = String(error) || __59(
         "Unknown error when running elements validation asynchronously."
       );
     }
@@ -23660,7 +23675,7 @@ function handleCustomValidationAsync(promise, formField, promiseHandler) {
         {
           custom: {
             type: "invalid",
-            message: __58("Validation could not be processed.")
+            message: __59("Validation could not be processed.")
           }
         },
         [...path, formField.id]
@@ -23675,7 +23690,7 @@ function handleCustomValidationAsync(promise, formField, promiseHandler) {
     if (error instanceof Error) {
       errorMessage = error.message;
     } else {
-      errorMessage = String(error) || __58(
+      errorMessage = String(error) || __59(
         "Unknown error when running custom validation asynchronously."
       );
     }
@@ -23704,7 +23719,7 @@ function validateFormField(item2, formField, promiseHandler) {
     return {
       pattern: {
         type: "invalid",
-        message: __58("Value does not match the required pattern.")
+        message: __59("Value does not match the required pattern.")
       }
     };
   }
@@ -23712,7 +23727,7 @@ function validateFormField(item2, formField, promiseHandler) {
     return {
       min: {
         type: "invalid",
-        message: __58("Value is below the minimum.")
+        message: __59("Value is below the minimum.")
       }
     };
   }
@@ -23720,7 +23735,7 @@ function validateFormField(item2, formField, promiseHandler) {
     return {
       max: {
         type: "invalid",
-        message: __58("Value is above the maximum.")
+        message: __59("Value is above the maximum.")
       }
     };
   }
@@ -23728,7 +23743,7 @@ function validateFormField(item2, formField, promiseHandler) {
     return {
       minLength: {
         type: "invalid",
-        message: __58("Value is too short.")
+        message: __59("Value is too short.")
       }
     };
   }
@@ -23736,7 +23751,7 @@ function validateFormField(item2, formField, promiseHandler) {
     return {
       maxLength: {
         type: "invalid",
-        message: __58("Value is too long.")
+        message: __59("Value is too long.")
       }
     };
   }
@@ -23744,7 +23759,7 @@ function validateFormField(item2, formField, promiseHandler) {
     return {
       elements: {
         type: "invalid",
-        message: __58("Value must be one of the elements.")
+        message: __59("Value must be one of the elements.")
       }
     };
   }
@@ -23767,7 +23782,7 @@ function validateFormField(item2, formField, promiseHandler) {
       if (error instanceof Error) {
         errorMessage = error.message;
       } else {
-        errorMessage = String(error) || __58("Unknown error when running custom validation.");
+        errorMessage = String(error) || __59("Unknown error when running custom validation.");
       }
       return {
         custom: {
@@ -23794,14 +23809,14 @@ function validateFormField(item2, formField, promiseHandler) {
     );
     fieldValidity.elements = {
       type: "validating",
-      message: __58("Validating\u2026")
+      message: __59("Validating\u2026")
     };
   }
   if (customError instanceof Promise) {
     handleCustomValidationAsync(customError, formField, promiseHandler);
     fieldValidity.custom = {
       type: "validating",
-      message: __58("Validating\u2026")
+      message: __59("Validating\u2026")
     };
   }
   if (Object.keys(fieldValidity).length > 0) {
@@ -23993,7 +24008,7 @@ function useFieldFromFormField(field) {
 var use_field_from_form_field_default = useFieldFromFormField;
 
 // src/components/dataform-layouts/panel/modal.tsx
-import { Fragment as Fragment16, jsx as jsx105, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx106, jsxs as jsxs35 } from "react/jsx-runtime";
 function ModalContent({
   data,
   field,
@@ -24002,6 +24017,8 @@ function ModalContent({
   onClose,
   touched
 }) {
+  const { openAs } = field.layout;
+  const { applyLabel, cancelLabel } = openAs;
   const { fields } = useContext(dataform_context_default);
   const [changes, setChanges] = useState({});
   const modalData = useMemo(() => {
@@ -24048,7 +24065,7 @@ function ModalContent({
   const contentRef = useRef(null);
   const mergedRef = useMergeRefs([focusOnMountRef, contentRef]);
   useReportValidity(contentRef, touched);
-  return /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs35(
     modal_default,
     {
       className: "dataforms-layouts-panel__modal",
@@ -24057,14 +24074,14 @@ function ModalContent({
       title: fieldLabel,
       size: "medium",
       children: [
-        /* @__PURE__ */ jsx105("div", { ref: mergedRef, children: /* @__PURE__ */ jsx105(
+        /* @__PURE__ */ jsx106("div", { ref: mergedRef, children: /* @__PURE__ */ jsx106(
           DataFormLayout,
           {
             data: modalData,
             form,
             onChange: handleOnChange,
             validity,
-            children: (FieldLayout, childField, childFieldValidity, markWhenOptional) => /* @__PURE__ */ jsx105(
+            children: (FieldLayout, childField, childFieldValidity, markWhenOptional) => /* @__PURE__ */ jsx106(
               FieldLayout,
               {
                 data: modalData,
@@ -24078,30 +24095,30 @@ function ModalContent({
             )
           }
         ) }),
-        /* @__PURE__ */ jsxs34(
+        /* @__PURE__ */ jsxs35(
           Stack,
           {
             direction: "row",
             className: "dataforms-layouts-panel__modal-footer",
             gap: "md",
             children: [
-              /* @__PURE__ */ jsx105(component_default6, { style: { flex: 1 } }),
-              /* @__PURE__ */ jsx105(
+              /* @__PURE__ */ jsx106(component_default6, { style: { flex: 1 } }),
+              /* @__PURE__ */ jsx106(
                 button_default,
                 {
                   variant: "tertiary",
                   onClick: onClose,
                   __next40pxDefaultSize: true,
-                  children: __59("Cancel")
+                  children: cancelLabel
                 }
               ),
-              /* @__PURE__ */ jsx105(
+              /* @__PURE__ */ jsx106(
                 button_default,
                 {
                   variant: "primary",
                   onClick: onApply,
                   __next40pxDefaultSize: true,
-                  children: __59("Apply")
+                  children: applyLabel
                 }
               )
             ]
@@ -24127,8 +24144,8 @@ function PanelModal({
     setIsOpen(false);
     setTouched(true);
   };
-  return /* @__PURE__ */ jsxs34(Fragment16, { children: [
-    /* @__PURE__ */ jsx105(
+  return /* @__PURE__ */ jsxs35(Fragment17, { children: [
+    /* @__PURE__ */ jsx106(
       SummaryButton,
       {
         data,
@@ -24142,7 +24159,7 @@ function PanelModal({
         "aria-expanded": isOpen
       }
     ),
-    isOpen && /* @__PURE__ */ jsx105(
+    isOpen && /* @__PURE__ */ jsx106(
       ModalContent,
       {
         data,
@@ -24159,21 +24176,21 @@ var modal_default2 = PanelModal;
 
 // src/components/dataform-layouts/panel/dropdown.tsx
 import { __ as __60 } from "@wordpress/i18n";
-import { jsx as jsx106, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx107, jsxs as jsxs36 } from "react/jsx-runtime";
 function DropdownHeader({
   title,
   onClose
 }) {
-  return /* @__PURE__ */ jsx106(
+  return /* @__PURE__ */ jsx107(
     Stack,
     {
       direction: "column",
       className: "dataforms-layouts-panel__dropdown-header",
       gap: "lg",
-      children: /* @__PURE__ */ jsxs35(Stack, { direction: "row", gap: "sm", align: "center", children: [
-        title && /* @__PURE__ */ jsx106(component_default16, { level: 2, size: 13, children: title }),
-        /* @__PURE__ */ jsx106(component_default6, { style: { flex: 1 } }),
-        onClose && /* @__PURE__ */ jsx106(
+      children: /* @__PURE__ */ jsxs36(Stack, { direction: "row", gap: "sm", align: "center", children: [
+        title && /* @__PURE__ */ jsx107(component_default16, { level: 2, size: 13, children: title }),
+        /* @__PURE__ */ jsx107(component_default6, { style: { flex: 1 } }),
+        onClose && /* @__PURE__ */ jsx107(
           button_default,
           {
             label: __60("Close"),
@@ -24192,7 +24209,7 @@ function DropdownContentWithValidation({
 }) {
   const ref = useRef(null);
   useReportValidity(ref, touched);
-  return /* @__PURE__ */ jsx106("div", { ref, children });
+  return /* @__PURE__ */ jsx107("div", { ref, children });
 }
 function PanelDropdown({
   data,
@@ -24241,12 +24258,12 @@ function PanelDropdown({
   if (!fieldDefinition) {
     return null;
   }
-  return /* @__PURE__ */ jsx106(
+  return /* @__PURE__ */ jsx107(
     "div",
     {
       ref: setPopoverAnchor,
       className: "dataforms-layouts-panel__field-dropdown-anchor",
-      children: /* @__PURE__ */ jsx106(
+      children: /* @__PURE__ */ jsx107(
         dropdown_default,
         {
           contentClassName: "dataforms-layouts-panel__field-dropdown",
@@ -24257,7 +24274,7 @@ function PanelDropdown({
               setTouched(true);
             }
           },
-          renderToggle: ({ isOpen, onToggle }) => /* @__PURE__ */ jsx106(
+          renderToggle: ({ isOpen, onToggle }) => /* @__PURE__ */ jsx107(
             SummaryButton,
             {
               data,
@@ -24271,22 +24288,22 @@ function PanelDropdown({
               "aria-expanded": isOpen
             }
           ),
-          renderContent: ({ onClose }) => /* @__PURE__ */ jsx106(DropdownContentWithValidation, { touched, children: /* @__PURE__ */ jsxs35("div", { ref: dialogRef, ...dialogProps, children: [
-            /* @__PURE__ */ jsx106(
+          renderContent: ({ onClose }) => /* @__PURE__ */ jsx107(DropdownContentWithValidation, { touched, children: /* @__PURE__ */ jsxs36("div", { ref: dialogRef, ...dialogProps, children: [
+            /* @__PURE__ */ jsx107(
               DropdownHeader,
               {
                 title: fieldLabel,
                 onClose
               }
             ),
-            /* @__PURE__ */ jsx106(
+            /* @__PURE__ */ jsx107(
               DataFormLayout,
               {
                 data,
                 form,
                 onChange,
                 validity: formValidity,
-                children: (FieldLayout, childField, childFieldValidity, markWhenOptional) => /* @__PURE__ */ jsx106(
+                children: (FieldLayout, childField, childFieldValidity, markWhenOptional) => /* @__PURE__ */ jsx107(
                   FieldLayout,
                   {
                     data,
@@ -24309,7 +24326,7 @@ function PanelDropdown({
 var dropdown_default2 = PanelDropdown;
 
 // src/components/dataform-layouts/panel/index.tsx
-import { jsx as jsx107 } from "react/jsx-runtime";
+import { jsx as jsx108 } from "react/jsx-runtime";
 function FormPanelField({
   data,
   field,
@@ -24317,8 +24334,8 @@ function FormPanelField({
   validity
 }) {
   const layout = field.layout;
-  if (layout.openAs === "modal") {
-    return /* @__PURE__ */ jsx107(
+  if (layout.openAs.type === "modal") {
+    return /* @__PURE__ */ jsx108(
       modal_default2,
       {
         data,
@@ -24328,7 +24345,7 @@ function FormPanelField({
       }
     );
   }
-  return /* @__PURE__ */ jsx107(
+  return /* @__PURE__ */ jsx108(
     dropdown_default2,
     {
       data,
@@ -24341,7 +24358,7 @@ function FormPanelField({
 
 // src/components/dataform-layouts/validation-badge.tsx
 import { sprintf as sprintf18, _n as _n4 } from "@wordpress/i18n";
-import { jsx as jsx108 } from "react/jsx-runtime";
+import { jsx as jsx109 } from "react/jsx-runtime";
 function countInvalidFields(validity) {
   if (!validity) {
     return 0;
@@ -24370,7 +24387,7 @@ function ValidationBadge({
   if (invalidCount === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx108(Badge, { intent: "high", children: sprintf18(
+  return /* @__PURE__ */ jsx109(Badge, { intent: "high", children: sprintf18(
     /* translators: %d: Number of fields that need attention */
     _n4(
       "%d field needs attention",
@@ -24382,7 +24399,7 @@ function ValidationBadge({
 }
 
 // src/components/dataform-layouts/card/index.tsx
-import { Fragment as Fragment17, jsx as jsx109, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx110, jsxs as jsxs37 } from "react/jsx-runtime";
 function isSummaryFieldVisible(summaryField, summaryConfig, isOpen) {
   if (!summaryConfig || Array.isArray(summaryConfig) && summaryConfig.length === 0) {
     return false;
@@ -24452,7 +24469,7 @@ function FormCardField({
   const visibleSummaryFields = summaryFields.filter(
     (summaryField) => isSummaryFieldVisible(summaryField, layout.summary, isOpen)
   );
-  const validationBadge = touched && layout.isCollapsible ? /* @__PURE__ */ jsx109(ValidationBadge, { validity }) : null;
+  const validationBadge = touched && layout.isCollapsible ? /* @__PURE__ */ jsx110(ValidationBadge, { validity }) : null;
   const sizeCard = {
     blockStart: "medium",
     blockEnd: "medium",
@@ -24464,9 +24481,9 @@ function FormCardField({
   let bodyContent;
   if (field.children) {
     withHeader = !!label && layout.withHeader;
-    bodyContent = /* @__PURE__ */ jsxs36(Fragment17, { children: [
-      field.description && /* @__PURE__ */ jsx109("div", { className: "dataforms-layouts-card__field-description", children: field.description }),
-      /* @__PURE__ */ jsx109(
+    bodyContent = /* @__PURE__ */ jsxs37(Fragment18, { children: [
+      field.description && /* @__PURE__ */ jsx110("div", { className: "dataforms-layouts-card__field-description", children: field.description }),
+      /* @__PURE__ */ jsx110(
         DataFormLayout,
         {
           data,
@@ -24489,7 +24506,7 @@ function FormCardField({
     }
     label = fieldDefinition.label;
     withHeader = !!label && layout.withHeader;
-    bodyContent = /* @__PURE__ */ jsx109(
+    bodyContent = /* @__PURE__ */ jsx110(
       SingleFieldLayout,
       {
         data,
@@ -24507,8 +24524,8 @@ function FormCardField({
     inlineStart: "medium",
     inlineEnd: "medium"
   };
-  return /* @__PURE__ */ jsxs36(component_default18, { className: "dataforms-layouts-card__field", size: sizeCard, children: [
-    withHeader && /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs37(component_default18, { className: "dataforms-layouts-card__field", size: sizeCard, children: [
+    withHeader && /* @__PURE__ */ jsxs37(
       component_default21,
       {
         className: "dataforms-layouts-card__field-header",
@@ -24518,7 +24535,7 @@ function FormCardField({
         },
         isBorderless: true,
         children: [
-          /* @__PURE__ */ jsxs36(
+          /* @__PURE__ */ jsxs37(
             "div",
             {
               style: {
@@ -24531,7 +24548,7 @@ function FormCardField({
                 alignItems: "center"
               },
               children: [
-                /* @__PURE__ */ jsx109(
+                /* @__PURE__ */ jsx110(
                   "span",
                   {
                     id: titleId,
@@ -24540,8 +24557,8 @@ function FormCardField({
                   }
                 ),
                 validationBadge,
-                visibleSummaryFields.length > 0 && layout.withHeader && /* @__PURE__ */ jsx109("div", { className: "dataforms-layouts-card__field-summary", children: visibleSummaryFields.map(
-                  (summaryField) => /* @__PURE__ */ jsx109(
+                visibleSummaryFields.length > 0 && layout.withHeader && /* @__PURE__ */ jsx110("div", { className: "dataforms-layouts-card__field-summary", children: visibleSummaryFields.map(
+                  (summaryField) => /* @__PURE__ */ jsx110(
                     summaryField.render,
                     {
                       item: data,
@@ -24553,7 +24570,7 @@ function FormCardField({
               ]
             }
           ),
-          isCollapsible && /* @__PURE__ */ jsx109(
+          isCollapsible && /* @__PURE__ */ jsx110(
             button_default,
             {
               __next40pxDefaultSize: true,
@@ -24569,7 +24586,7 @@ function FormCardField({
     ),
     (isOpen || !withHeader) && // If it doesn't have a header, keep it open.
     // Otherwise, the card will not be visible.
-    /* @__PURE__ */ jsx109(
+    /* @__PURE__ */ jsx110(
       component_default20,
       {
         id: bodyId,
@@ -24584,19 +24601,19 @@ function FormCardField({
 }
 
 // src/components/dataform-layouts/row/index.tsx
-import { Fragment as Fragment18, jsx as jsx110, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx111, jsxs as jsxs38 } from "react/jsx-runtime";
 function Header3({ title }) {
-  return /* @__PURE__ */ jsx110(
+  return /* @__PURE__ */ jsx111(
     Stack,
     {
       direction: "column",
       className: "dataforms-layouts-row__header",
       gap: "lg",
-      children: /* @__PURE__ */ jsx110(Stack, { direction: "row", align: "center", children: /* @__PURE__ */ jsx110(component_default16, { level: 2, size: 13, children: title }) })
+      children: /* @__PURE__ */ jsx111(Stack, { direction: "row", align: "center", children: /* @__PURE__ */ jsx111(component_default16, { level: 2, size: 13, children: title }) })
     }
   );
 }
-var EMPTY_WRAPPER = ({ children }) => /* @__PURE__ */ jsx110(Fragment18, { children });
+var EMPTY_WRAPPER = ({ children }) => /* @__PURE__ */ jsx111(Fragment19, { children });
 function FormRowField({
   data,
   field,
@@ -24611,9 +24628,9 @@ function FormRowField({
       layout: DEFAULT_LAYOUT,
       fields: field.children
     };
-    return /* @__PURE__ */ jsxs37("div", { className: "dataforms-layouts-row__field", children: [
-      !hideLabelFromVision && field.label && /* @__PURE__ */ jsx110(Header3, { title: field.label }),
-      /* @__PURE__ */ jsx110(Stack, { direction: "row", align: layout.alignment, gap: "lg", children: /* @__PURE__ */ jsx110(
+    return /* @__PURE__ */ jsxs38("div", { className: "dataforms-layouts-row__field", children: [
+      !hideLabelFromVision && field.label && /* @__PURE__ */ jsx111(Header3, { title: field.label }),
+      /* @__PURE__ */ jsx111(Stack, { direction: "row", align: layout.alignment, gap: "lg", children: /* @__PURE__ */ jsx111(
         DataFormLayout,
         {
           data,
@@ -24621,12 +24638,12 @@ function FormRowField({
           onChange,
           validity: validity?.children,
           as: EMPTY_WRAPPER,
-          children: (FieldLayout, childField, childFieldValidity) => /* @__PURE__ */ jsx110(
+          children: (FieldLayout, childField, childFieldValidity) => /* @__PURE__ */ jsx111(
             "div",
             {
               className: "dataforms-layouts-row__field-control",
               style: layout.styles[childField.id],
-              children: /* @__PURE__ */ jsx110(
+              children: /* @__PURE__ */ jsx111(
                 FieldLayout,
                 {
                   data,
@@ -24648,7 +24665,7 @@ function FormRowField({
   if (!RegularLayout) {
     return null;
   }
-  return /* @__PURE__ */ jsx110(Fragment18, { children: /* @__PURE__ */ jsx110("div", { className: "dataforms-layouts-row__field-control", children: /* @__PURE__ */ jsx110(
+  return /* @__PURE__ */ jsx111(Fragment19, { children: /* @__PURE__ */ jsx111("div", { className: "dataforms-layouts-row__field-control", children: /* @__PURE__ */ jsx111(
     RegularLayout,
     {
       data,
@@ -24662,7 +24679,7 @@ function FormRowField({
 
 // src/components/dataform-layouts/details/index.tsx
 import { __ as __61 } from "@wordpress/i18n";
-import { jsx as jsx111, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx112, jsxs as jsxs39 } from "react/jsx-runtime";
 function FormDetailsField({
   data,
   field,
@@ -24709,17 +24726,17 @@ function FormDetailsField({
   const summaryField = summaryFieldId ? fields.find((fieldDef) => fieldDef.id === summaryFieldId) : void 0;
   let summaryContent;
   if (summaryField && summaryField.render) {
-    summaryContent = /* @__PURE__ */ jsx111(summaryField.render, { item: data, field: summaryField });
+    summaryContent = /* @__PURE__ */ jsx112(summaryField.render, { item: data, field: summaryField });
   } else {
     summaryContent = field.label || __61("More details");
   }
-  return /* @__PURE__ */ jsxs38(
+  return /* @__PURE__ */ jsxs39(
     "details",
     {
       ref: detailsRef,
       className: "dataforms-layouts-details__details",
       children: [
-        /* @__PURE__ */ jsx111("summary", { className: "dataforms-layouts-details__summary", children: /* @__PURE__ */ jsxs38(
+        /* @__PURE__ */ jsx112("summary", { className: "dataforms-layouts-details__summary", children: /* @__PURE__ */ jsxs39(
           Stack,
           {
             direction: "row",
@@ -24728,17 +24745,17 @@ function FormDetailsField({
             className: "dataforms-layouts-details__summary-content",
             children: [
               summaryContent,
-              touched && /* @__PURE__ */ jsx111(ValidationBadge, { validity })
+              touched && /* @__PURE__ */ jsx112(ValidationBadge, { validity })
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx111(
+        /* @__PURE__ */ jsx112(
           "div",
           {
             ref: contentRef,
             className: "dataforms-layouts-details__content",
             onBlur: handleBlur,
-            children: /* @__PURE__ */ jsx111(
+            children: /* @__PURE__ */ jsx112(
               DataFormLayout,
               {
                 data,
@@ -24755,12 +24772,12 @@ function FormDetailsField({
 }
 
 // src/components/dataform-layouts/index.tsx
-import { jsx as jsx112 } from "react/jsx-runtime";
+import { jsx as jsx113 } from "react/jsx-runtime";
 var FORM_FIELD_LAYOUTS = [
   {
     type: "regular",
     component: FormRegularField,
-    wrapper: ({ children }) => /* @__PURE__ */ jsx112(
+    wrapper: ({ children }) => /* @__PURE__ */ jsx113(
       Stack,
       {
         direction: "column",
@@ -24773,7 +24790,7 @@ var FORM_FIELD_LAYOUTS = [
   {
     type: "panel",
     component: FormPanelField,
-    wrapper: ({ children }) => /* @__PURE__ */ jsx112(
+    wrapper: ({ children }) => /* @__PURE__ */ jsx113(
       Stack,
       {
         direction: "column",
@@ -24786,7 +24803,7 @@ var FORM_FIELD_LAYOUTS = [
   {
     type: "card",
     component: FormCardField,
-    wrapper: ({ children }) => /* @__PURE__ */ jsx112(
+    wrapper: ({ children }) => /* @__PURE__ */ jsx113(
       Stack,
       {
         direction: "column",
@@ -24802,13 +24819,13 @@ var FORM_FIELD_LAYOUTS = [
     wrapper: ({
       children,
       layout
-    }) => /* @__PURE__ */ jsx112(
+    }) => /* @__PURE__ */ jsx113(
       Stack,
       {
         direction: "column",
         className: "dataforms-layouts__wrapper",
         gap: "lg",
-        children: /* @__PURE__ */ jsx112("div", { className: "dataforms-layouts-row__field", children: /* @__PURE__ */ jsx112(
+        children: /* @__PURE__ */ jsx113("div", { className: "dataforms-layouts-row__field", children: /* @__PURE__ */ jsx113(
           Stack,
           {
             direction: "row",
@@ -24830,8 +24847,8 @@ function getFormFieldLayout(type) {
 }
 
 // src/components/dataform-layouts/data-form-layout.tsx
-import { jsx as jsx113 } from "react/jsx-runtime";
-var DEFAULT_WRAPPER = ({ children }) => /* @__PURE__ */ jsx113(Stack, { direction: "column", className: "dataforms-layouts__wrapper", gap: "lg", children });
+import { jsx as jsx114 } from "react/jsx-runtime";
+var DEFAULT_WRAPPER = ({ children }) => /* @__PURE__ */ jsx114(Stack, { direction: "column", className: "dataforms-layouts__wrapper", gap: "lg", children });
 function DataFormLayout({
   data,
   form,
@@ -24854,7 +24871,7 @@ function DataFormLayout({
     );
   }
   const Wrapper4 = as ?? getFormFieldLayout(form.layout.type)?.wrapper ?? DEFAULT_WRAPPER;
-  return /* @__PURE__ */ jsx113(Wrapper4, { layout: form.layout, children: form.fields.map((formField) => {
+  return /* @__PURE__ */ jsx114(Wrapper4, { layout: form.layout, children: form.fields.map((formField) => {
     const FieldLayout = getFormFieldLayout(formField.layout.type)?.component;
     if (!FieldLayout) {
       return null;
@@ -24871,7 +24888,7 @@ function DataFormLayout({
         markWhenOptional
       );
     }
-    return /* @__PURE__ */ jsx113(
+    return /* @__PURE__ */ jsx114(
       FieldLayout,
       {
         data,
@@ -24886,7 +24903,7 @@ function DataFormLayout({
 }
 
 // src/dataform/index.tsx
-import { jsx as jsx114 } from "react/jsx-runtime";
+import { jsx as jsx115 } from "react/jsx-runtime";
 function DataForm({
   data,
   form,
@@ -24902,7 +24919,7 @@ function DataForm({
   if (!form.fields) {
     return null;
   }
-  return /* @__PURE__ */ jsx114(DataFormProvider, { fields: normalizedFields, children: /* @__PURE__ */ jsx114(
+  return /* @__PURE__ */ jsx115(DataFormProvider, { fields: normalizedFields, children: /* @__PURE__ */ jsx115(
     DataFormLayout,
     {
       data,