@wordpress/dataviews 14.1.1-next.v.202604091042.0 → 14.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "14.1.1-next.v.202604091042.0+668146787",
+	"version": "14.2.0",
 	"description": "DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -53,20 +53,20 @@
 	"sideEffects": false,
 	"dependencies": {
 		"@ariakit/react": "^0.4.21",
-		"@wordpress/base-styles": "^6.19.1-next.v.202604091042.0+668146787",
-		"@wordpress/components": "^32.5.2-next.v.202604091042.0+668146787",
-		"@wordpress/compose": "^7.43.1-next.v.202604091042.0+668146787",
-		"@wordpress/data": "^10.43.1-next.v.202604091042.0+668146787",
-		"@wordpress/date": "^5.43.1-next.v.202604091042.0+668146787",
-		"@wordpress/deprecated": "^4.43.1-next.v.202604091042.0+668146787",
-		"@wordpress/element": "^6.44.1-next.v.202604091042.0+668146787",
-		"@wordpress/i18n": "^6.17.1-next.v.202604091042.0+668146787",
-		"@wordpress/icons": "^12.1.1-next.v.202604091042.0+668146787",
-		"@wordpress/keycodes": "^4.43.1-next.v.202604091042.0+668146787",
-		"@wordpress/primitives": "^4.43.1-next.v.202604091042.0+668146787",
-		"@wordpress/private-apis": "^1.43.1-next.v.202604091042.0+668146787",
-		"@wordpress/ui": "^0.11.1-next.v.202604091042.0+668146787",
-		"@wordpress/warning": "^3.43.1-next.v.202604091042.0+668146787",
+		"@wordpress/base-styles": "^7.0.0",
+		"@wordpress/components": "^33.0.0",
+		"@wordpress/compose": "^7.45.0",
+		"@wordpress/data": "^10.45.0",
+		"@wordpress/date": "^5.45.0",
+		"@wordpress/deprecated": "^4.45.0",
+		"@wordpress/element": "^6.45.0",
+		"@wordpress/i18n": "^6.18.0",
+		"@wordpress/icons": "^13.0.0",
+		"@wordpress/keycodes": "^4.45.0",
+		"@wordpress/primitives": "^4.45.0",
+		"@wordpress/private-apis": "^1.45.0",
+		"@wordpress/ui": "^0.12.0",
+		"@wordpress/warning": "^3.45.0",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
 		"date-fns": "^4.1.0",
@@ -92,5 +92,5 @@
 	"scripts": {
 		"build:wp": "node build.cjs"
 	},
-	"gitHead": "73606df74f1c38a084bfa5db97205259ef817593"
+	"gitHead": "8c229eaed0e88c9827e2da3d73a78f9ddd77714b"
 }

package/src/components/dataform-controls/array.tsx

@@ -22,7 +22,8 @@ export default function ArrayControl< Item >( {
 	markWhenOptional,
 	validity,
 }: DataFormControlProps< Item > ) {
-	const { label, placeholder, getValue, setValue, isValid } = field;
+	const { label, placeholder, description, getValue, setValue, isValid } =
+		field;
 	const value = getValue( { item: data } );
 	const disabled = field.isDisabled( { item: data, field } );
 
@@ -88,7 +89,7 @@ export default function ArrayControl< Item >( {
 				return true;
 			} }
 			__experimentalExpandOnFocus={ elements && elements.length > 0 }
-			__experimentalShowHowTo={ ! field.isValid?.elements }
+			help={ description ?? ( field.isValid?.elements ? '' : undefined ) }
 			displayTransform={ ( token: any ) => {
 				// For existing tokens (element objects), display their label
 				if ( typeof token === 'object' && 'label' in token ) {

package/src/components/dataform-controls/date.tsx

@@ -38,6 +38,7 @@ import { Stack } from '@wordpress/ui';
  * Internal dependencies
  */
 import RelativeDateControl from './utils/relative-date-control';
+import useDisabledDateMatchers from './utils/use-disabled-date-matchers';
 import {
 	OPERATOR_IN_THE_PAST,
 	OPERATOR_OVER,
@@ -318,6 +319,9 @@ function CalendarDateControl< Item >( {
 	const [ isTouched, setIsTouched ] = useState( false );
 	const validityTargetRef = useRef< HTMLInputElement >( null );
 
+	const { minConstraint, maxConstraint, disabledMatchers } =
+		useDisabledDateMatchers( isValid, parseDate );
+
 	const onChangeCallback = useCallback(
 		( newValue: string | undefined ) =>
 			onChange( setValue( { item: data, value: newValue } ) ),
@@ -440,6 +444,8 @@ function CalendarDateControl< Item >( {
 						onChange={ handleManualDateChange }
 						required={ !! field.isValid?.required }
 						disabled={ disabled }
+						min={ minConstraint }
+						max={ maxConstraint }
 					/>
 
 					{ /* Calendar widget */ }
@@ -453,7 +459,8 @@ function CalendarDateControl< Item >( {
 						onMonthChange={ setCalendarMonth }
 						timeZone={ timezoneString || undefined }
 						weekStartsOn={ weekStartsOn }
-						disabled={ disabled }
+						disabled={ disabled || disabledMatchers }
+						disableNavigation={ disabled }
 					/>
 				</Stack>
 			</BaseControl>
@@ -475,6 +482,7 @@ function CalendarDateRangeControl< Item >( {
 		description,
 		getValue,
 		setValue,
+		isValid,
 		format: fieldFormat,
 	} = field;
 	const disabled = field.isDisabled( { item: data, field } );
@@ -492,6 +500,9 @@ function CalendarDateRangeControl< Item >( {
 		( fieldFormat as FormatDate ).weekStartsOn ??
 		getSettings().l10n.startOfWeek;
 
+	const { minConstraint, maxConstraint, disabledMatchers } =
+		useDisabledDateMatchers( isValid, parseDate );
+
 	const onChangeCallback = useCallback(
 		( newValue: DateRange ) => {
 			onChange(
@@ -673,6 +684,8 @@ function CalendarDateRangeControl< Item >( {
 							}
 							required={ !! field.isValid?.required }
 							disabled={ disabled }
+							min={ minConstraint }
+							max={ maxConstraint }
 						/>
 						<InputControl
 							__next40pxDefaultSize
@@ -686,6 +699,8 @@ function CalendarDateRangeControl< Item >( {
 							}
 							required={ !! field.isValid?.required }
 							disabled={ disabled }
+							min={ minConstraint }
+							max={ maxConstraint }
 						/>
 					</Stack>
 
@@ -697,7 +712,7 @@ function CalendarDateRangeControl< Item >( {
 						onMonthChange={ setCalendarMonth }
 						timeZone={ timezone.string || undefined }
 						weekStartsOn={ weekStartsOn }
-						disabled={ disabled }
+						disabled={ disabled || disabledMatchers }
 					/>
 				</Stack>
 			</BaseControl>

package/src/components/dataform-controls/datetime.tsx

@@ -16,6 +16,7 @@ import { Stack } from '@wordpress/ui';
 import type { DataFormControlProps, FormatDatetime } from '../../types';
 import { OPERATOR_IN_THE_PAST, OPERATOR_OVER } from '../../constants';
 import RelativeDateControl from './utils/relative-date-control';
+import useDisabledDateMatchers from './utils/use-disabled-date-matchers';
 import getCustomValidity from './utils/get-custom-validity';
 import parseDateTime from '../../field-types/utils/parse-date-time';
 import { unlock } from '../../lock-unlock';
@@ -55,6 +56,9 @@ function CalendarDateTimeControl< Item >( {
 		useRef< ReturnType< typeof setTimeout > >( undefined );
 	const previousFocusRef = useRef< Element | null >( null );
 
+	const { minConstraint, maxConstraint, disabledMatchers } =
+		useDisabledDateMatchers( isValid, parseDateTime );
+
 	const onChangeCallback = useCallback(
 		( newValue: string | undefined ) =>
 			onChange( setValue( { item: data, value: newValue } ) ),
@@ -181,6 +185,16 @@ function CalendarDateTimeControl< Item >( {
 					value={ formatDateTime( value ) }
 					onChange={ handleManualDateTimeChange }
 					disabled={ disabled }
+					min={
+						minConstraint
+							? formatDateTime( minConstraint )
+							: undefined
+					}
+					max={
+						maxConstraint
+							? formatDateTime( maxConstraint )
+							: undefined
+					}
 				/>
 				{ /* Calendar widget */ }
 				{ ! compact && (
@@ -196,7 +210,7 @@ function CalendarDateTimeControl< Item >( {
 						onMonthChange={ setCalendarMonth }
 						timeZone={ timezoneString || undefined }
 						weekStartsOn={ weekStartsOn }
-						disabled={ disabled }
+						disabled={ disabled || disabledMatchers }
 					/>
 				) }
 			</Stack>

package/src/components/dataform-controls/utils/use-disabled-date-matchers.ts

@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { NormalizedRules } from '../../../types';
+
+type DateMatcher = { before: Date } | { after: Date };
+
+export default function useDisabledDateMatchers< Item >(
+	isValid: NormalizedRules< Item >,
+	parseDateFn: ( dateString?: string ) => Date | null
+): {
+	minConstraint: string | undefined;
+	maxConstraint: string | undefined;
+	disabledMatchers: DateMatcher[] | undefined;
+} {
+	const minConstraint =
+		typeof isValid.min?.constraint === 'string'
+			? isValid.min.constraint
+			: undefined;
+	const maxConstraint =
+		typeof isValid.max?.constraint === 'string'
+			? isValid.max.constraint
+			: undefined;
+
+	const disabledMatchers = useMemo( () => {
+		const matchers: DateMatcher[] = [];
+		if ( minConstraint ) {
+			const minDate = parseDateFn( minConstraint );
+			if ( minDate ) {
+				matchers.push( { before: minDate } );
+			}
+		}
+		if ( maxConstraint ) {
+			const maxDate = parseDateFn( maxConstraint );
+			if ( maxDate ) {
+				matchers.push( { after: maxDate } );
+			}
+		}
+		return matchers.length > 0 ? matchers : undefined;
+	}, [ minConstraint, maxConstraint, parseDateFn ] );
+
+	return { minConstraint, maxConstraint, disabledMatchers };
+}

package/src/components/dataform-layouts/card/index.tsx

@@ -9,9 +9,6 @@ import {
 	useRef,
 	useState,
 } from '@wordpress/element';
-// TODO: enable in the ESlint rule once we complete
-// https://github.com/WordPress/gutenberg/issues/76135.
-// eslint-disable-next-line @wordpress/use-recommended-components
 import { Card, CollapsibleCard, Stack } from '@wordpress/ui';
 
 /**

package/src/components/dataform-layouts/panel/style.scss

@@ -8,7 +8,7 @@
 	display: flex;
 	width: 100%;
 	min-height: $grid-unit-30;
-	cursor: pointer;
+	cursor: var(--wpds-cursor-control);
 	align-items: flex-start;
 	border-radius: $radius-small;
 	isolation: isolate;
@@ -44,7 +44,7 @@
 
 		.dataforms-layouts-panel__field-control {
 			color: $gray-700;
-			font-weight: var(--wpds-font-weight-regular);
+			font-weight: var(--wpds-typography-font-weight-regular);
 		}
 	}
 }
@@ -92,7 +92,6 @@
 	line-height: $grid-unit-05 * 5;
 	hyphens: auto;
 	color: $gray-700;
-	text-transform: capitalize;
 
 	.components-base-control__label {
 		display: inline;
@@ -123,12 +122,12 @@
 	flex-grow: 1;
 	min-width: 0;
 	min-height: $grid-unit-30;
-	line-height: var(--wpds-font-line-height-md);
+	line-height: var(--wpds-typography-line-height-md);
 	display: flex;
 	align-items: center;
 	overflow: hidden;
 	word-break: break-word;
-	font-weight: var(--wpds-font-weight-medium);
+	font-weight: var(--wpds-typography-font-weight-medium);
 
 	> * {
 		min-width: 0;

package/src/components/dataform-layouts/panel/summary-button.tsx

@@ -157,7 +157,6 @@ export default function SummaryButton< Item >( {
 				<Button
 					className="dataforms-layouts-panel__field-trigger-icon"
 					label={ ariaLabel }
-					showTooltip={ false }
 					icon={ pencil }
 					size="small"
 					aria-expanded={ ariaExpanded }

package/src/components/dataviews-context/index.ts

@@ -15,7 +15,7 @@ import type {
 	View,
 	Action,
 	NormalizedField,
-	SupportedLayouts,
+	NormalizedSupportedLayouts,
 	NormalizedFilter,
 } from '../../types';
 import type { SetSelection } from '../../types/private';
@@ -50,7 +50,7 @@ type DataViewsContextType< Item > = {
 	resizeObserverRef:
 		| ( ( element?: HTMLDivElement | null ) => void )
 		| React.RefObject< HTMLDivElement >;
-	defaultLayouts: SupportedLayouts;
+	defaultLayouts: NormalizedSupportedLayouts;
 	filters: NormalizedFilter[];
 	isShowingFilter: boolean;
 	setIsShowingFilter: ( value: boolean ) => void;

package/src/components/dataviews-filters/search-widget.tsx

@@ -12,13 +12,9 @@ import clsx from 'clsx';
 import { useInstanceId } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 import { useState, useMemo, useDeferredValue } from '@wordpress/element';
-import {
-	VisuallyHidden,
-	Icon,
-	Composite,
-	Spinner,
-} from '@wordpress/components';
+import { Icon, Composite, Spinner } from '@wordpress/components';
 import { search, check } from '@wordpress/icons';
+import { VisuallyHidden } from '@wordpress/ui';
 
 /**
  * Internal dependencies
@@ -267,15 +263,9 @@ function ComboboxList( { view, filter, onChangeView }: SearchWidgetProps ) {
 			setValue={ setSearchValue }
 		>
 			<div className="dataviews-filters__search-widget-filter-combobox__wrapper">
-				<Ariakit.ComboboxLabel
-					render={
-						<VisuallyHidden>
-							{ __( 'Search items' ) }
-						</VisuallyHidden>
-					}
-				>
+				<VisuallyHidden render={ <Ariakit.ComboboxLabel /> }>
 					{ __( 'Search items' ) }
-				</Ariakit.ComboboxLabel>
+				</VisuallyHidden>
 				<Ariakit.Combobox
 					autoSelect="always"
 					placeholder={ __( 'Search' ) }

package/src/components/dataviews-filters/style.scss

@@ -76,7 +76,7 @@
 	.dataviews-filters__summary-chip {
 		border-radius: $grid-unit-20;
 		border: $border-width solid transparent;
-		cursor: pointer;
+		cursor: var(--wpds-cursor-control);
 		padding: $grid-unit-05 $grid-unit-15;
 		min-height: $grid-unit-40;
 		background: $gray-100;
@@ -137,7 +137,7 @@
 		align-items: center;
 		justify-content: center;
 		background: transparent;
-		cursor: pointer;
+		cursor: var(--wpds-cursor-control);
 
 		svg {
 			fill: $gray-700;

package/src/components/dataviews-layouts/activity/activity-item.tsx

@@ -6,11 +6,10 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { VisuallyHidden } from '@wordpress/components';
 import { useRef, useContext, useMemo } from '@wordpress/element';
 import { useRegistry } from '@wordpress/data';
 import { useViewportMatch } from '@wordpress/compose';
-import { Stack } from '@wordpress/ui';
+import { Stack, VisuallyHidden } from '@wordpress/ui';
 
 /**
  * Internal dependencies
@@ -162,8 +161,8 @@ function ActivityItem< Item >(
 								className="dataviews-view-activity__item-field"
 							>
 								<VisuallyHidden
-									as="span"
 									className="dataviews-view-activity__item-field-label"
+									render={ <span /> }
 								>
 									{ field.label }
 								</VisuallyHidden>

package/src/components/dataviews-layouts/activity/style.scss

@@ -35,7 +35,7 @@
 			overflow: hidden;
 
 			&--clickable {
-				cursor: pointer;
+				cursor: var(--wpds-cursor-control);
 
 				&:focus-visible {
 					outline: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color);

package/src/components/dataviews-layouts/grid/composite-grid.tsx

@@ -43,7 +43,7 @@ import type {
 } from '../../../types';
 import type { SetSelection } from '../../../types/private';
 import { ItemClickWrapper } from '../utils/item-click-wrapper';
-const { Badge } = unlock( componentsPrivateApis );
+const { Badge: WCBadge } = unlock( componentsPrivateApis );
 import { useGridColumns } from './preview-size-picker';
 import { GridItems } from '../utils/grid-items';
 import {
@@ -273,7 +273,7 @@ const GridItem = forwardRef< HTMLDivElement, GridItemProps< any > >(
 						>
 							{ badgeFields.map( ( field ) => {
 								return (
-									<Badge
+									<WCBadge
 										key={ field.id }
 										className="dataviews-view-grid__field-value"
 									>
@@ -281,7 +281,7 @@ const GridItem = forwardRef< HTMLDivElement, GridItemProps< any > >(
 											item={ item }
 											field={ field }
 										/>
-									</Badge>
+									</WCBadge>
 								);
 							} ) }
 						</Stack>

package/src/components/dataviews-layouts/grid/style.scss

@@ -250,7 +250,7 @@
 }
 
 .dataviews-view-grid__media--clickable {
-	cursor: pointer;
+	cursor: var(--wpds-cursor-control);
 }
 
 .dataviews-view-grid__group-header {

package/src/components/dataviews-layouts/list/index.tsx

@@ -11,7 +11,6 @@ import {
 	Button,
 	privateApis as componentsPrivateApis,
 	Spinner,
-	VisuallyHidden,
 	Composite,
 } from '@wordpress/components';
 import {
@@ -25,7 +24,7 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import { moreVertical } from '@wordpress/icons';
 import { useRegistry } from '@wordpress/data';
-import { Stack } from '@wordpress/ui';
+import { Stack, VisuallyHidden } from '@wordpress/ui';
 
 /**
  * Internal dependencies
@@ -355,8 +354,8 @@ function ListItem< Item >( {
 									className="dataviews-view-list__field"
 								>
 									<VisuallyHidden
-										as="span"
 										className="dataviews-view-list__field-label"
+										render={ <span /> }
 									>
 										{ field.label }
 									</VisuallyHidden>

package/src/components/dataviews-layouts/list/style.scss

@@ -115,7 +115,7 @@ div.dataviews-view-list {
 		border: none;
 		background: none;
 		padding: 0;
-		cursor: pointer;
+		cursor: var(--wpds-cursor-control);
 
 		&:focus-visible {
 			outline: none;

package/src/components/dataviews-layouts/picker-grid/index.tsx

@@ -33,7 +33,7 @@ import type {
 } from '../../../types';
 import type { SetSelection } from '../../../types/private';
 import { GridItems } from '../utils/grid-items';
-const { Badge } = unlock( componentsPrivateApis );
+const { Badge: WCBadge } = unlock( componentsPrivateApis );
 import getDataByGroup from '../utils/get-data-by-group';
 import { useGridColumns } from '../grid/preview-size-picker';
 import {
@@ -78,14 +78,10 @@ function GridItem< Item >( {
 }: GridItemProps< Item > ) {
 	const { showTitle = true, showMedia = true, showDescription = true } = view;
 	const id = getItemId( item );
-	const elementRef = useRef< HTMLElement | null >( null );
+	const elementRef = useRef< HTMLButtonElement >( null );
 
 	const isSelected = selection.includes( id );
 
-	const setElementRef = ( element: HTMLElement | null ) => {
-		elementRef.current = element;
-	};
-
 	useIntersectionObserver( elementRef, posinset );
 
 	const renderedMediaField = mediaField?.render ? (
@@ -102,7 +98,7 @@ function GridItem< Item >( {
 
 	return (
 		<Composite.Item
-			ref={ setElementRef }
+			ref={ elementRef }
 			aria-label={
 				titleField
 					? titleField.getValue( { item } ) || __( '(no title)' )
@@ -179,7 +175,7 @@ function GridItem< Item >( {
 					>
 						{ badgeFields.map( ( field ) => {
 							return (
-								<Badge
+								<WCBadge
 									key={ field.id }
 									className="dataviews-view-picker-grid__field-value"
 								>
@@ -187,7 +183,7 @@ function GridItem< Item >( {
 										item={ item }
 										field={ field }
 									/>
-								</Badge>
+								</WCBadge>
 							);
 						} ) }
 					</Stack>

package/src/components/dataviews-layouts/picker-grid/style.scss

@@ -174,7 +174,7 @@
 }
 
 .dataviews-view-picker-grid__media--clickable {
-	cursor: pointer;
+	cursor: var(--wpds-cursor-control);
 }
 
 .dataviews-view-picker-grid-group__header {

package/src/components/dataviews-layouts/picker-table/index.tsx

@@ -100,11 +100,7 @@ function TableRow< Item >( {
 	const isSelected = selection.includes( id );
 
 	const [ isHovered, setIsHovered ] = useState( false );
-	const elementRef = useRef< HTMLElement | null >( null );
-
-	const setElementRef = ( element: HTMLElement | null ) => {
-		elementRef.current = element;
-	};
+	const elementRef = useRef< HTMLButtonElement >( null );
 
 	useIntersectionObserver( elementRef, posinset );
 	const {
@@ -129,7 +125,7 @@ function TableRow< Item >( {
 	return (
 		<Composite.Item
 			key={ id }
-			ref={ setElementRef }
+			ref={ elementRef }
 			render={ ( { children, ...props } ) => (
 				<tr
 					className={ clsx( 'dataviews-view-table__row', {
@@ -162,6 +158,7 @@ function TableRow< Item >( {
 		>
 			<td
 				className="dataviews-view-table__checkbox-column"
+				// eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
 				role="presentation"
 			>
 				<div className="dataviews-view-table__cell-content-wrapper">
@@ -179,7 +176,10 @@ function TableRow< Item >( {
 			</td>
 
 			{ hasPrimaryColumn && (
-				<td role="presentation">
+				<td
+					// eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
+					role="presentation"
+				>
 					<ColumnPrimary
 						item={ item }
 						titleField={ showTitle ? titleField : undefined }
@@ -204,6 +204,7 @@ function TableRow< Item >( {
 							maxWidth,
 							minWidth,
 						} }
+						// eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
 						role="presentation"
 					>
 						<TableColumnField
@@ -414,6 +415,7 @@ function ViewPickerTable< Item >( {
 											1
 										}
 										className="dataviews-view-table__group-header-cell"
+										// eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
 										role="presentation"
 									>
 										{ view.groupBy?.showLabel === false

package/src/components/dataviews-layouts/picker-table/style.scss

@@ -36,7 +36,7 @@
 
 	// When used in picker context, ensure row selection works as expected
 	.dataviews-view-table__row {
-		cursor: pointer;
+		cursor: var(--wpds-cursor-control);
 
 		&.is-selected {
 			// Ensure selected rows are visually distinct

package/src/components/dataviews-layouts/table/index.tsx

@@ -267,7 +267,6 @@ function TableRow< Item >( {
 				// itself (to toggle row selection) without erroneously
 				// intercepting click events from ItemActions.
 
-				/* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
 				<td
 					className={ clsx( 'dataviews-view-table__actions-column', {
 						'dataviews-view-table__actions-column--sticky': true,
@@ -278,7 +277,6 @@ function TableRow< Item >( {
 				>
 					<ItemActions item={ item } actions={ actions } />
 				</td>
-				/* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
 			) }
 		</tr>
 	);

package/src/dataform/stories/content.story.tsx

@@ -297,7 +297,7 @@ export const HighLevelHelpText: Story = {
 				fields: [
 					{
 						id: 'accountForm',
-						label: 'Account Information',
+						label: 'Account information',
 						description:
 							'We collect this information to create your account and provide personalized services. Your data will be kept secure and used only for account management and service improvements.',
 						children: [ 'name', 'email', 'phone' ],