@wordpress/dataviews 13.0.0 → 13.1.1-next.v.202603102151.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);
     };
   }, []);
 }
@@ -1298,7 +1337,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 +1358,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;
@@ -1765,7 +1804,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 +2792,7 @@ function UnforwardedTooltip(props, ref) {
       alternative: "`placement` prop"
     });
   }
-  computedPlacement = computedPlacement || "bottom";
+  computedPlacement = computedPlacement || "top";
   const tooltipStore = Ariakit8.useTooltipStore({
     placement: computedPlacement,
     showTimeout: delay
@@ -2989,7 +3028,8 @@ var visuallyHidden = {
   padding: 0,
   position: "absolute",
   width: "1px",
-  wordWrap: "normal"
+  wordWrap: "normal",
+  wordBreak: "normal"
 };
 
 // ../components/build-module/view/component.mjs
@@ -12371,97 +12411,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 +12436,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 +12466,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 +12476,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 +12490,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 +12504,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 +12518,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 +12526,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 +12548,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 +12559,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 +12747,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 +12770,7 @@ var DateCalendar = ({
     value: selectedProp,
     onChange
   });
-  return /* @__PURE__ */ _jsx111(DayPicker, {
+  return /* @__PURE__ */ _jsx109(DayPicker, {
     ...COMMON_PROPS,
     ...localizationProps,
     ...props,
@@ -12832,7 +12785,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 +12891,7 @@ var DateRangeCalendar = ({
       preview_end: previewRange?.to
     };
   }, [previewRange]);
-  return /* @__PURE__ */ _jsx112(DayPicker2, {
+  return /* @__PURE__ */ _jsx110(DayPicker2, {
     ...COMMON_PROPS,
     ...localizationProps,
     ...props,
@@ -12961,8 +12914,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 +12924,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 +12938,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 +13050,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 +13080,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 +13089,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 +13107,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 +13124,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 +13141,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 +13149,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 +13180,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 +13189,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 +13205,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 +13214,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 +13230,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 +13239,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 +13254,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 +13263,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 +13279,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 +13288,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 +13304,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 +13313,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 +13328,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 +13337,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 +13353,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 +13362,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 +13397,6 @@ ValidatedToggleGroupControl.displayName = "ValidatedToggleGroupControl";
 var privateApis = {};
 lock2(privateApis, {
   __experimentalPopoverLegacyPositionToPlacement: positionToPlacement,
-  Avatar: component_default24,
-  AvatarGroup: component_default25,
   ComponentsContext,
   Tabs,
   Theme: theme_default,
@@ -14701,7 +14652,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 +14693,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 +14779,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
             }),
@@ -14933,7 +14884,7 @@ function ViewTable({
     return /* @__PURE__ */ jsx45(
       "div",
       {
-        className: clsx34("dataviews-no-results", {
+        className: clsx32("dataviews-no-results", {
           "is-refreshing": isDelayedLoading
         }),
         id: tableNoticeId,
@@ -14945,7 +14896,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 +14914,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
                   }
                 )
               },
@@ -15063,7 +15014,7 @@ function ViewTable({
             !!actions?.length && /* @__PURE__ */ jsx45(
               "th",
               {
-                className: clsx34(
+                className: clsx32(
                   "dataviews-view-table__actions-column",
                   {
                     "dataviews-view-table__actions-column--sticky": true,
@@ -15146,11 +15097,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 +15218,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 +15247,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 +15408,7 @@ function CompositeGrid({
     Composite2,
     {
       role: isInfiniteScroll ? "feed" : "grid",
-      className: clsx35("dataviews-view-grid", className2),
+      className: clsx33("dataviews-view-grid", className2),
       focusWrap: true,
       "aria-busy": isLoading,
       "aria-rowcount": isInfiniteScroll ? void 0 : totalRows,
@@ -15551,7 +15502,7 @@ function ViewGrid({
     return /* @__PURE__ */ jsx48(
       "div",
       {
-        className: clsx36("dataviews-no-results", {
+        className: clsx34("dataviews-no-results", {
           "is-refreshing": isDelayedLoading
         }),
         children: empty
@@ -15559,7 +15510,7 @@ function ViewGrid({
     );
   }
   const gridProps = {
-    className: clsx36(className2, {
+    className: clsx34(className2, {
       "is-refreshing": !isInfiniteScroll && isDelayedLoading
     }),
     inert: !isInfiniteScroll && !!isLoading ? "true" : void 0,
@@ -15619,7 +15570,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 +15782,7 @@ function ListItem({
         )
       ),
       role: infiniteScrollEnabled ? "article" : "row",
-      className: clsx37({
+      className: clsx35({
         "is-selected": isSelected,
         "is-hovered": isHovered
       }),
@@ -16046,7 +15997,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 +16020,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 +16071,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 +16109,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 +16149,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 +16222,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 +16361,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 +16369,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 +16418,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 +16686,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 +16741,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,7 +16951,7 @@ function ViewPickerGrid({
           orientation: "horizontal",
           role: "listbox",
           "aria-multiselectable": isMultiselect,
-          className: clsx41(
+          className: clsx39(
             "dataviews-view-picker-grid",
             className2
           ),
@@ -17070,7 +17021,7 @@ function ViewPickerGrid({
           render: /* @__PURE__ */ jsx56(
             GridItems,
             {
-              className: clsx41(
+              className: clsx39(
                 "dataviews-view-picker-grid",
                 className2
               ),
@@ -17118,7 +17069,7 @@ function ViewPickerGrid({
       !hasData && /* @__PURE__ */ jsx56(
         "div",
         {
-          className: clsx41({
+          className: clsx39({
             "dataviews-loading": isLoading,
             "dataviews-no-results": !isLoading
           }),
@@ -17132,7 +17083,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 +17096,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 +17139,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 +17284,7 @@ function ViewPickerTable({
     /* @__PURE__ */ jsxs16(
       "table",
       {
-        className: clsx42(
+        className: clsx40(
           "dataviews-view-table",
           "dataviews-view-picker-table",
           className2,
@@ -17494,7 +17445,7 @@ function ViewPickerTable({
     /* @__PURE__ */ jsxs16(
       "div",
       {
-        className: clsx42({
+        className: clsx40({
           "dataviews-loading": isLoading,
           "dataviews-no-results": !hasData && !isLoading
         }),
@@ -17683,13 +17634,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
@@ -17768,7 +17719,7 @@ var MultiSelectionOption = ({ selected }) => {
   return /* @__PURE__ */ jsx60(
     "span",
     {
-      className: clsx43(
+      className: clsx41(
         "dataviews-filters__search-widget-listitem-multi-selection",
         { "is-selected": selected }
       ),
@@ -17780,7 +17731,7 @@ var SingleSelectionOption = ({ selected }) => {
   return /* @__PURE__ */ jsx60(
     "span",
     {
-      className: clsx43(
+      className: clsx41(
         "dataviews-filters__search-widget-listitem-single-selection",
         { "is-selected": selected }
       )
@@ -18871,7 +18822,7 @@ function Filter({
             children: /* @__PURE__ */ jsx63(
               "div",
               {
-                className: clsx44(
+                className: clsx42(
                   "dataviews-filters__summary-chip",
                   {
                     "has-reset": canResetOrRemove,
@@ -18916,7 +18867,7 @@ function Filter({
             children: /* @__PURE__ */ jsx63(
               "button",
               {
-                className: clsx44(
+                className: clsx42(
                   "dataviews-filters__summary-chip-remove",
                   { "has-values": hasValues }
                 ),
@@ -19331,7 +19282,7 @@ function DataViewsLayout({ className: className2 }) {
 }
 
 // src/components/dataviews-footer/index.tsx
-import clsx45 from "clsx";
+import clsx43 from "clsx";
 import { jsx as jsx70, jsxs as jsxs22 } from "react/jsx-runtime";
 var EMPTY_ARRAY5 = [];
 function DataViewsFooter() {
@@ -19361,7 +19312,7 @@ function DataViewsFooter() {
           direction: "row",
           justify: "end",
           align: "center",
-          className: clsx45("dataviews-footer__content", {
+          className: clsx43("dataviews-footer__content", {
             "is-refreshing": isDelayedRefreshing
           }),
           gap: "sm",
@@ -19862,12 +19813,11 @@ 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";
 var TIME_UNITS_OPTIONS = {
@@ -19893,7 +19843,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(
@@ -19918,9 +19868,10 @@ function RelativeDateControl({
     base_control_default,
     {
       id,
-      className: clsx46(className2, "dataviews-controls__relative-date"),
+      className: clsx44(className2, "dataviews-controls__relative-date"),
       label,
       hideLabelFromVision,
+      help: description,
       children: /* @__PURE__ */ jsxs24(Stack, { direction: "row", gap: "sm", children: [
         /* @__PURE__ */ jsx76(
           number_control_default,
@@ -19965,14 +19916,11 @@ function parseDateTime(dateTimeString) {
 // src/components/dataform-controls/datetime.tsx
 import { jsx as jsx77, jsxs as jsxs25 } 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 +19955,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 +19988,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) {
@@ -20074,18 +20019,6 @@ function CalendarDateTimeControl({
       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(
           ValidatedInputControl2,
           {
@@ -20096,11 +20029,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__ */ jsx77(
+          DateCalendar2,
+          {
+            style: { width: "100%" },
+            selected: value ? parseDateTime(value) || void 0 : void 0,
+            onSelect: onSelectDate,
+            month: calendarMonth,
+            onMonthChange: setCalendarMonth,
+            timeZone: timezoneString || void 0,
+            weekStartsOn
+          }
         )
       ] })
     }
@@ -20142,9 +20085,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 +20096,20 @@ import {
   startOfYear
 } from "date-fns";
 import { __ as __48 } from "@wordpress/i18n";
-import { getDate as getDate3, getSettings as getSettings2 } from "@wordpress/date";
+import { getDate as getDate4, getSettings as getSettings2 } from "@wordpress/date";
 import { jsx as jsx78, jsxs as jsxs26 } 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 +20117,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 +20125,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 +20135,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 +20143,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 +20151,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 +20159,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 +20167,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 +20176,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,
@@ -20317,7 +20260,7 @@ function ValidatedDateControl({
     /* @__PURE__ */ jsx78("div", { "aria-live": "polite", children: customValidity && /* @__PURE__ */ jsxs26(
       "p",
       {
-        className: clsx47(
+        className: clsx45(
           "components-validated-control__indicator",
           customValidity.type === "invalid" ? "is-invalid" : void 0
         ),
@@ -20348,6 +20291,7 @@ function CalendarDateControl({
   const {
     id,
     label,
+    description,
     setValue,
     getValue,
     isValid,
@@ -20371,7 +20315,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);
@@ -20426,6 +20370,7 @@ function CalendarDateControl({
           id,
           className: "dataviews-controls__date",
           label: displayLabel,
+          help: description,
           hideLabelFromVision,
           children: /* @__PURE__ */ jsxs26(Stack, { direction: "column", gap: "lg", children: [
             /* @__PURE__ */ jsxs26(
@@ -20505,7 +20450,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")) {
@@ -20614,6 +20566,7 @@ function CalendarDateRangeControl({
           id,
           className: "dataviews-controls__date",
           label: displayLabel,
+          help: description,
           hideLabelFromVision,
           children: /* @__PURE__ */ jsxs26(Stack, { direction: "column", gap: "lg", children: [
             /* @__PURE__ */ jsxs26(
@@ -21783,7 +21736,7 @@ function isValidMax(item2, field) {
 }
 
 // src/field-types/integer.tsx
-var format3 = {
+var format2 = {
   separatorThousand: ","
 };
 function getValueFormatted2({
@@ -21800,7 +21753,7 @@ function getValueFormatted2({
   }
   let formatInteger;
   if (field.type !== "integer") {
-    formatInteger = format3;
+    formatInteger = format2;
   } else {
     formatInteger = field.format;
   }
@@ -21852,7 +21805,7 @@ var integer_default = {
     OPERATOR_IS_ALL,
     OPERATOR_IS_NOT_ALL
   ],
-  format: format3,
+  format: format2,
   getValueFormatted: getValueFormatted2,
   validate: {
     required: isValidRequired,
@@ -21865,7 +21818,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 +21837,7 @@ function getValueFormatted3({
   }
   let formatNumber;
   if (field.type !== "number") {
-    formatNumber = format4;
+    formatNumber = format3;
   } else {
     formatNumber = field.format;
   }
@@ -21935,7 +21888,7 @@ var number_default = {
     OPERATOR_IS_ALL,
     OPERATOR_IS_NOT_ALL
   ],
-  format: format4,
+  format: format3,
   getValueFormatted: getValueFormatted3,
   validate: {
     required: isValidRequired,
@@ -21980,8 +21933,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 +21948,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 +21986,7 @@ var datetime_default = {
     OPERATOR_IN_THE_PAST,
     OPERATOR_OVER
   ],
-  format: format5,
+  format: format4,
   getValueFormatted: getValueFormatted4,
   validate: {
     required: isValidRequired,
@@ -22042,8 +21995,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 +22010,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 +22050,7 @@ var date_default = {
     OPERATOR_OVER,
     OPERATOR_BETWEEN
   ],
-  format: format6,
+  format: format5,
   getValueFormatted: getValueFormatted5,
   validate: {
     required: isValidRequired,
@@ -23023,9 +22976,10 @@ function DataFormProvider({
 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 +23005,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"
     };
@@ -23187,7 +23158,7 @@ function FormRegularField({
           /* @__PURE__ */ jsx102(
             "div",
             {
-              className: clsx48(
+              className: clsx46(
                 "dataforms-layouts-regular__field-label",
                 `dataforms-layouts-regular__field-label--label-position-${labelPosition}`
               ),
@@ -23240,16 +23211,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 }
@@ -23320,7 +23290,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}`,
     {
@@ -23426,7 +23396,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 +23526,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 +23545,7 @@ function handleElementsValidationAsync(promise, formField, promiseHandler) {
           {
             elements: {
               type: "invalid",
-              message: __58(
+              message: __59(
                 "Value must be one of the elements."
               )
             }
@@ -23601,7 +23571,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 +23630,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 +23645,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 +23674,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 +23682,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 +23690,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 +23698,7 @@ function validateFormField(item2, formField, promiseHandler) {
     return {
       minLength: {
         type: "invalid",
-        message: __58("Value is too short.")
+        message: __59("Value is too short.")
       }
     };
   }
@@ -23736,7 +23706,7 @@ function validateFormField(item2, formField, promiseHandler) {
     return {
       maxLength: {
         type: "invalid",
-        message: __58("Value is too long.")
+        message: __59("Value is too long.")
       }
     };
   }
@@ -23744,7 +23714,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 +23737,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 +23764,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) {
@@ -24002,6 +23972,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(() => {
@@ -24092,7 +24064,7 @@ function ModalContent({
                   variant: "tertiary",
                   onClick: onClose,
                   __next40pxDefaultSize: true,
-                  children: __59("Cancel")
+                  children: cancelLabel
                 }
               ),
               /* @__PURE__ */ jsx105(
@@ -24101,7 +24073,7 @@ function ModalContent({
                   variant: "primary",
                   onClick: onApply,
                   __next40pxDefaultSize: true,
-                  children: __59("Apply")
+                  children: applyLabel
                 }
               )
             ]
@@ -24317,7 +24289,7 @@ function FormPanelField({
   validity
 }) {
   const layout = field.layout;
-  if (layout.openAs === "modal") {
+  if (layout.openAs.type === "modal") {
     return /* @__PURE__ */ jsx107(
       modal_default2,
       {