@automattic/vip-design-system 2.18.0 → 2.19.0

package/build/system/theme/index.js

@@ -16,6 +16,7 @@ var _ThemeBuilder = ThemeBuilder(Valet),
   ValetTheme = _ThemeBuilder.ValetTheme,
   getHeadingStyles = _ThemeBuilder.getHeadingStyles;
 var light = ColorBuilder(ValetTheme);
+var supportLabelDefaultTypography = getPropValue('support', 'label-default');
 
 // Dark
 var _ThemeBuilder2 = ThemeBuilder(ValetDark),
@@ -29,12 +30,6 @@ var outline = {
   outlineWidth: '1px',
   boxShadow: "0 0 0 1px " + getPropValue('focus', 'inset') + ", 0 0 0 3px " + getPropValue('focus')
 };
-var fonts = {
-  body: '-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"',
-  heading: 'inherit',
-  monospace: '"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace',
-  serif: 'recoletaregular, Georgia, serif'
-};
 var getComponentColors = function getComponentColors(theme, gColor, gVariants) {
   return {
     // Valet Theme Colors
@@ -175,13 +170,15 @@ var getComponentColors = function getComponentColors(theme, gColor, gVariants) {
 export default {
   outline: outline,
   space: getVariants('space'),
-  fonts: fonts,
+  fonts: {
+    monospace: getPropValue('fontFamily', 'monospace'),
+    "default": getPropValue('fontFamily', 'default')
+  },
   fontSizes: getVariants('fontSize.static'),
   breakpoints: generateBreakpoints(getVariants('breakpoint')),
   fontWeights: {
-    body: getPropValue('fontWeight', 'body'),
-    heading: getPropValue('fontWeight', 'heading'),
     regular: getPropValue('fontWeight', 'regular'),
+    semibold: getPropValue('fontWeight', 'semibold'),
     bold: getPropValue('fontWeight', 'bold'),
     medium: getPropValue('fontWeight', 'medium'),
     light: getPropValue('fontWeight', 'light')
@@ -276,9 +273,13 @@ export default {
       }
     }
   },
+  forms: {
+    label: _extends({}, supportLabelDefaultTypography)
+  },
   buttons: {
-    primary: {
-      fontFamily: 'body',
+    primary: _extends({}, supportLabelDefaultTypography, {
+      // Button label weight: theme `medium` (500).
+      fontWeight: 'medium',
       color: 'button.primary.label.default',
       bg: 'button.primary.background.default',
       border: '1px solid transparent',
@@ -287,7 +288,6 @@ export default {
       minHeight: '38px',
       display: 'inline-flex',
       cursor: 'pointer',
-      fontWeight: 'medium',
       boxShadow: 'none',
       borderRadius: 1,
       '&:hover': {
@@ -326,7 +326,7 @@ export default {
         backgroundColor: 'button.secondary.background.disabled',
         color: 'button.secondary.label.default'
       }
-    },
+    }),
     secondary: {
       variant: 'buttons.primary',
       color: 'button.secondary.label.default',
@@ -490,7 +490,14 @@ export default {
       variant: 'buttons.tertiary'
     }
   },
-  text: getHeadingStyles(),
+  text: _extends({}, getHeadingStyles(), getVariants('body'), {
+    'support-helper-text': getPropValue('support', 'helper-text'),
+    'support-label-xs': getPropValue('support', 'label-xs'),
+    'support-label-small': getPropValue('support', 'label-small'),
+    'support-label-default': getPropValue('support', 'label-default'),
+    'support-label-default-quiet': getPropValue('support', 'label-default-quiet'),
+    'support-label-default-loud': getPropValue('support', 'label-default-loud')
+  }),
   dialog: {
     modal: {
       position: 'fixed',
@@ -569,10 +576,10 @@ export default {
     }
   },
   styles: {
-    root: _extends({
-      fontFamily: 'body',
-      lineHeight: 'body',
-      fontWeight: 'body',
+    root: {
+      fontFamily: getPropValue('body', 'default').fontFamily,
+      lineHeight: getPropValue('body', 'default').lineHeight,
+      fontWeight: getPropValue('body', 'default').fontWeight,
       color: 'text',
       backgroundColor: 'backgrounds.primary',
       webkitFontSmoothing: 'antialiased',
@@ -589,11 +596,11 @@ export default {
         display: 'block'
       },
       pre: {
-        fontFamily: 'body'
+        fontFamily: 'default'
       },
       p: {
         color: 'text'
       }
-    }, getHeadingStyles())
+    }
   }
 };

package/docs/SETUP.md

@@ -41,7 +41,7 @@ Run:
 npm run dev
 ```
 
-You can then visit [http://localhost:60006/](http://localhost:60006/) to view.
+You can then visit [http://localhost:6006/](http://localhost:6006/) to view.
 
 ## Updating dependencies
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@automattic/vip-design-system",
-  "version": "2.18.0",
+  "version": "2.19.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/Automattic/vip-design-system"

package/src/system/Badge/Badge.tsx

@@ -27,6 +27,7 @@ export const Badge = forwardRef< HTMLDivElement, BadgeProps >(
 			as="span"
 			sx={ {
 				fontSize: 0,
+				letterSpacing: '0.01em',
 				padding: 0, // do we need padding declared twice here?
 				bg: `tag.${ variant }.background`,
 				color: `tag.${ variant }.text`,
@@ -35,7 +36,7 @@ export const Badge = forwardRef< HTMLDivElement, BadgeProps >(
 				px: 2,
 				display: 'inline-block',
 				borderRadius: 1,
-				fontWeight: 'heading',
+				fontWeight: 'medium',
 				a: {
 					color: `tag.${ variant }.text`,
 					'&:hover, &:focus, &:active': {

package/src/system/DescriptionList/DescriptionList.tsx

@@ -42,7 +42,6 @@ const TableComponent = ( { list, className, sx, title }: DescriptionListProps )
 			minWidth: 'auto',
 			'> tbody > tr': {
 				'> td, > th': {
-					fontWeight: 'heading',
 					border: 'none',
 					pl: 0,
 					'&:first-of-type': { pl: 0 },

package/src/system/Form/Label.tsx

@@ -13,9 +13,7 @@ import { RequiredLabel } from './RequiredLabel';
 
 export const baseLabelColor = 'input.label.default';
 export const baseLabelStyle = {
-	fontWeight: 'heading',
-	fontSize: 2,
-	lineHeight: 1.5,
+	variant: 'forms.label',
 	color: baseLabelColor,
 };
 

package/src/system/Form/RadioBoxGroup.jsx

@@ -72,7 +72,14 @@ const RadioOption = ( {
 				{ ...restOption }
 			/>
 			<div
-				sx={ { mb: 0, color: 'input.radio-box.label.primary.default', p: 3, pr: 0, flex: 'auto' } }
+				sx={ {
+					mb: 0,
+					color: 'input.radio-box.label.primary.default',
+					fontWeight: 'semibold',
+					p: 3,
+					pr: 0,
+					flex: 'auto',
+				} }
 			>
 				<label htmlFor={ forLabel } { ...labelProps }>
 					{ label }
@@ -82,7 +89,11 @@ const RadioOption = ( {
 						sx={ {
 							color: 'input.radio-box.label.secondary.default',
 							mb: 0,
+							mt: 1,
 							fontSize: 1,
+							fontWeight: 'regular',
+							letterSpacing: '0.01em',
+							lineHeight: '140%',
 							display: 'block',
 						} }
 						id={ describedById }

package/src/system/Form/RadioBoxGroup.stories.jsx

@@ -60,7 +60,12 @@ export const Primary = {
 	args: {
 		defaultValue: 'one',
 		options: [
-			{ label: 'One', value: 'one', description: 'This is a description' },
+			{
+				label: 'One',
+				value: 'one',
+				description:
+					'This is a longer description that allows us to see the text wrap and determine if the line height is correct',
+			},
 			{ label: 'Two', value: 'two', description: 'This is a description' },
 			{ label: 'Three', value: 'three', description: 'This is a description' },
 		],

package/src/system/Heading/Heading.stories.tsx

@@ -27,7 +27,16 @@ export const Default: Story = {
 			<Heading variant="h3">Heading Three</Heading>
 			<Heading variant="h4">Heading Four</Heading>
 			<Heading variant="h5">Heading Five</Heading>
-			<Heading variant="h6">Heading Six</Heading>
+
+			<Heading variant="h3" as="h1">
+				Heading One with Heading Three Styles
+			</Heading>
+			<Heading as="p" sx={ { variant: 'text.caps' } }>
+				Paragraph with Caps Styles
+			</Heading>
+			<Heading as="h3" sx={ { variant: 'text.caps' } }>
+				Heading Three with Caps Styles
+			</Heading>
 		</Box>
 	),
 };

package/src/system/Heading/Heading.tsx

@@ -20,10 +20,9 @@ export const Heading = forwardRef< HTMLHeadingElement, HeadingProps >(
 	( { variant = 'h3', sx, className, ...rest }: HeadingProps, ref: Ref< HTMLHeadingElement > ) => (
 		<ThemeHeading
 			as={ variant }
+			variant={ variant }
 			sx={ {
 				color: 'heading',
-				// pass variant prop to sx
-				variant: `text.${ variant.toString() }`,
 				...sx,
 			} }
 			className={ classNames( 'vip-heading-component', className ) }

package/src/system/Nav/styles/variants/menu.ts

@@ -51,8 +51,7 @@ export const menuItemLinkStyles: MixedStyleProp = {
 	borderRadius: 1,
 	color: 'text',
 	display: 'inline-flex',
-	fontSize: '0.875rem',
-	fontWeight: 'body',
+	variant: 'text.default',
 	height: 38,
 	mx: 0,
 	mb: 0,

package/src/system/Notice/Notice.tsx

@@ -240,7 +240,7 @@ export const Notice = React.forwardRef< HTMLDivElement, NoticeProps >(
 							as={ headingVariant }
 							sx={ {
 								color: textColor,
-								mb: 0,
+								mb: 1,
 								fontSize: 2,
 								fontWeight: 'bold',
 							} }

package/src/system/Pagination/Pagination.stories.tsx

@@ -21,10 +21,12 @@ const meta: Meta< typeof Pagination > = {
 				component: `
 A Pagination component for navigating paged data.
 
-## Variants
+## Modes
 
-- **full** (default): Shows individual page number buttons with ellipsis for large page counts.
-- **compact**: Shows a dropdown page selector instead of individual page numbers.
+- **Default**: Shows individual page number buttons with ellipsis for large page counts.
+- **Compact** (\`compact\` prop): Shows a dropdown page selector instead of individual page numbers.
+
+For cursor-based pagination with only prev/next arrows, see \`SimplePagination\`.
 
 ## Component Properties
 `,
@@ -42,12 +44,13 @@ const PaginationWithState = ( {
 	totalItems = 200,
 	initialItemsPerPage = 20,
 	displayItemsPerPageSelector = false,
+	compact = false,
 	...props
 }: {
 	initialPage?: number;
 	totalItems?: number;
 	initialItemsPerPage?: number;
-	variant?: 'full' | 'compact';
+	compact?: boolean;
 	pageSizeOptions?: number[];
 	displayItemsPerPageSelector?: boolean;
 } ) => {
@@ -62,6 +65,7 @@ const PaginationWithState = ( {
 			itemsPerPage={ itemsPerPage }
 			onPageChange={ setCurrentPage }
 			displayItemsPerPageSelector={ displayItemsPerPageSelector }
+			compact={ compact }
 			onItemsPerPageChange={ size => {
 				setItemsPerPage( size );
 				setCurrentPage( 1 );
@@ -84,12 +88,12 @@ const OpenEndedPaginationWithState = ( {
 	initialPage = 1,
 	initialItemsPerPage = 20,
 	hasNextPage,
-	...props
+	compact = false,
 }: {
 	initialPage?: number;
 	initialItemsPerPage?: number;
 	hasNextPage?: boolean;
-	variant?: 'full' | 'compact';
+	compact?: boolean;
 } ) => {
 	const [ currentPage, setCurrentPage ] = useState( initialPage );
 	const [ itemsPerPage, setItemsPerPage ] = useState( initialItemsPerPage );
@@ -104,7 +108,7 @@ const OpenEndedPaginationWithState = ( {
 				setCurrentPage( 1 );
 			} }
 			hasNextPage={ hasNextPage }
-			{ ...props }
+			compact={ compact }
 		>
 			<Flex sx={ { justifyContent: 'center', alignItems: 'center', verticalAlign: 'middle' } }>
 				<Badge variant="gold" sx={ { mr: 2 } }>
@@ -121,7 +125,6 @@ export const Primary: Story = {
 		currentPage: 1,
 		totalItems: 200,
 		itemsPerPage: 20,
-		variant: 'full',
 		displayItemsPerPageSelector: false,
 	},
 };
@@ -131,7 +134,7 @@ export const Default: Story = {
 };
 
 export const Compact: Story = {
-	render: () => <PaginationWithState variant="compact" />,
+	render: () => <PaginationWithState compact />,
 };
 
 export const FewPages: Story = {
@@ -212,7 +215,7 @@ export const OpenEnded: Story = {
 };
 
 export const OpenEndedCompact: Story = {
-	render: () => <OpenEndedPaginationWithState variant="compact" />,
+	render: () => <OpenEndedPaginationWithState compact />,
 };
 
 export const OpenEndedLastPage: Story = {

package/src/system/Pagination/Pagination.test.tsx

@@ -109,7 +109,7 @@ describe( '<Pagination />', () => {
 	} );
 
 	it( 'renders compact variant with Page text', () => {
-		render( <Pagination { ...defaultProps } variant="compact" currentPage={ 3 } /> );
+		render( <Pagination { ...defaultProps } compact currentPage={ 3 } /> );
 
 		expect( screen.getByText( 'Page' ) ).toBeInTheDocument();
 		expect( screen.getByText( 'of 10' ) ).toBeInTheDocument();
@@ -136,9 +136,7 @@ describe( '<Pagination />', () => {
 	} );
 
 	it( 'has no accessibility violations (compact variant)', async () => {
-		const { container } = render(
-			<Pagination { ...defaultProps } variant="compact" currentPage={ 5 } />
-		);
+		const { container } = render( <Pagination { ...defaultProps } compact currentPage={ 5 } /> );
 
 		expect( await axe( container ) ).toHaveNoViolations();
 	} );
@@ -304,7 +302,7 @@ describe( '<Pagination /> open-ended mode', () => {
 	} );
 
 	it( 'renders compact variant with "Page" but without "of Y"', () => {
-		render( <Pagination { ...openEndedProps } variant="compact" /> );
+		render( <Pagination { ...openEndedProps } compact /> );
 
 		expect( screen.getByText( 'Page' ) ).toBeInTheDocument();
 		expect( screen.queryByText( /of \d+/ ) ).not.toBeInTheDocument();
@@ -317,7 +315,7 @@ describe( '<Pagination /> open-ended mode', () => {
 	} );
 
 	it( 'has no accessibility violations (open-ended compact)', async () => {
-		const { container } = render( <Pagination { ...openEndedProps } variant="compact" /> );
+		const { container } = render( <Pagination { ...openEndedProps } compact /> );
 
 		expect( await axe( container ) ).toHaveNoViolations();
 	} );

package/src/system/Pagination/Pagination.tsx

@@ -1,13 +1,12 @@
 /** @jsxImportSource theme-ui */
 
-import classNames from 'classnames';
 import { forwardRef } from 'react';
 import { BiDotsHorizontalRounded } from 'react-icons/bi';
 import { MdChevronLeft, MdChevronRight } from 'react-icons/md';
-import { Flex, ThemeUIStyleObject } from 'theme-ui';
+import { Flex } from 'theme-ui';
 
+import { PaginationLayout, PaginationLayoutProps } from './PaginationLayout';
 import {
-	containerStyles,
 	navigationStyles,
 	pageButtonStyles,
 	activePageButtonStyles,
@@ -19,13 +18,7 @@ import { Button } from '../Button';
 import { Select } from '../NewForm';
 import { Text } from '../Text';
 
-export type PaginationVariant = 'full' | 'compact';
-
-export interface PaginationProps {
-	/** Whether to show the items-per-page dropdown selector.
-	 * @default false
-	 */
-	displayItemsPerPageSelector?: boolean;
+export interface PaginationProps extends PaginationLayoutProps {
 	/** The currently active page number (1-based). */
 	currentPage: number;
 	/** Total number of items across all pages. Used to compute totalPages if not provided. */
@@ -42,20 +35,15 @@ export interface PaginationProps {
 	hasNextPage?: boolean;
 	/** The maximum page number that can be reached. Used for open-ended pagination without totalPages. */
 	maxReachablePage?: number;
-	/** The display variant: 'full' shows page number buttons, 'compact' shows a page dropdown.
-	 * @default 'full'
+	/** When true, shows a compact dropdown page selector instead of individual page buttons.
+	 * @default false
 	 */
-	variant?: PaginationVariant;
-	/** Available page size options for the items-per-page selector.
-	 * @default [20, 50, 100]
+	compact?: boolean;
+	/** Display variant. Use 'compact' for dropdown page selector. Equivalent to the `compact` prop.
+	 * @default 'full'
+	 * @deprecated Use the `compact` prop instead, or `SimplePagination` for cursor-based navigation.
 	 */
-	pageSizeOptions?: number[];
-	/** Additional CSS class name for the pagination container. */
-	className?: string;
-	/** Theme UI style overrides. */
-	sx?: ThemeUIStyleObject;
-	/** Optional content rendered between the items-per-page selector and page navigation. */
-	children?: React.ReactNode;
+	variant?: 'full' | 'compact';
 }
 
 export type PageNumberItem = number | 'ellipsis';
@@ -132,28 +120,6 @@ export function getPageNumbers(
 	];
 }
 
-const ItemsPerPageSelect = ( {
-	itemsPerPage,
-	pageSizeOptions,
-	onItemsPerPageChange,
-}: {
-	itemsPerPage: number;
-	pageSizeOptions: number[];
-	onItemsPerPageChange: ( size: number ) => void;
-} ) => (
-	<Select
-		id="items-per-page"
-		aria-label="Items per page"
-		separator={ false }
-		value={ itemsPerPage }
-		options={ pageSizeOptions.map( size => ( {
-			value: size,
-			label: `${ size.toString() } / page`,
-		} ) ) }
-		onChange={ option => onItemsPerPageChange( Number( option?.value ) ) }
-	/>
-);
-
 const PageNumbers = ( {
 	currentPage,
 	totalPages,
@@ -235,12 +201,11 @@ const CompactPageSelector = ( {
 
 /**
  * A pagination control for navigating through paged content.
- * Supports full page-number buttons and compact dropdown modes, with optional items-per-page selection.
+ * Shows page-number buttons by default, or a compact dropdown when `compact` is true.
  */
 export const Pagination = forwardRef< HTMLElement, PaginationProps >(
 	(
 		{
-			displayItemsPerPageSelector = false,
 			currentPage,
 			totalItems,
 			totalPages,
@@ -249,8 +214,10 @@ export const Pagination = forwardRef< HTMLElement, PaginationProps >(
 			onItemsPerPageChange,
 			hasNextPage,
 			maxReachablePage,
-			variant = 'full',
-			pageSizeOptions = [ 20, 50, 100 ],
+			compact = false,
+			variant,
+			displayItemsPerPageSelector,
+			pageSizeOptions,
 			className,
 			sx,
 			children,
@@ -258,47 +225,45 @@ export const Pagination = forwardRef< HTMLElement, PaginationProps >(
 		},
 		ref
 	) => {
+		const isCompact = compact || variant === 'compact';
+
 		const resolvedTotalPages =
 			totalPages ??
 			( totalItems !== undefined ? Math.ceil( totalItems / itemsPerPage ) : undefined );
 
 		const isFirstPage = currentPage <= 1;
-		const isLastPage =
-			resolvedTotalPages !== undefined ? currentPage >= resolvedTotalPages : hasNextPage === false;
+		let isLastPage: boolean;
+		if ( resolvedTotalPages !== undefined ) {
+			isLastPage = currentPage >= resolvedTotalPages;
+		} else {
+			isLastPage = hasNextPage === false;
+		}
 
 		return (
-			<nav
+			<PaginationLayout
 				ref={ ref }
-				aria-label="Pagination"
-				className={ classNames( 'vip-pagination-component', className ) }
-				sx={ { ...containerStyles, ...sx } }
+				displayItemsPerPageSelector={ displayItemsPerPageSelector }
+				itemsPerPage={ itemsPerPage }
+				pageSizeOptions={ pageSizeOptions }
+				onItemsPerPageChange={ onItemsPerPageChange }
+				className={ className }
+				sx={ sx }
 				{ ...rest }
 			>
-				<Box>
-					{ displayItemsPerPageSelector && (
-						<ItemsPerPageSelect
-							itemsPerPage={ itemsPerPage }
-							pageSizeOptions={ pageSizeOptions }
-							onItemsPerPageChange={ onItemsPerPageChange }
-						/>
-					) }
-				</Box>
 				<Box sx={ { flex: 1 } }>{ children }</Box>
 				<Flex sx={ navigationStyles }>
-					{ variant === 'full' && (
-						<PageNumbers
+					{ isCompact ? (
+						<CompactPageSelector
 							currentPage={ currentPage }
 							totalPages={ resolvedTotalPages }
-							hasNextPage={ hasNextPage }
 							maxReachablePage={ maxReachablePage }
 							onPageChange={ onPageChange }
 						/>
-					) }
-
-					{ variant === 'compact' && (
-						<CompactPageSelector
+					) : (
+						<PageNumbers
 							currentPage={ currentPage }
 							totalPages={ resolvedTotalPages }
+							hasNextPage={ hasNextPage }
 							maxReachablePage={ maxReachablePage }
 							onPageChange={ onPageChange }
 						/>
@@ -322,7 +287,7 @@ export const Pagination = forwardRef< HTMLElement, PaginationProps >(
 						<MdChevronRight size={ 20 } />
 					</Button>
 				</Flex>
-			</nav>
+			</PaginationLayout>
 		);
 	}
 );

package/src/system/Pagination/PaginationLayout.tsx

@@ -0,0 +1,93 @@
+/** @jsxImportSource theme-ui */
+
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+import { ThemeUIStyleObject } from 'theme-ui';
+
+import { containerStyles } from './styles';
+import { Box } from '../Box';
+import { Select } from '../NewForm';
+
+export interface PaginationLayoutProps {
+	/** Whether to show the items-per-page dropdown selector.
+	 * @default false
+	 */
+	displayItemsPerPageSelector?: boolean;
+	/** Number of items displayed per page. */
+	itemsPerPage?: number;
+	/** Available page size options for the items-per-page selector.
+	 * @default [20, 50, 100]
+	 */
+	pageSizeOptions?: number[];
+	/** Callback fired when the user changes the items-per-page value. */
+	onItemsPerPageChange?: ( itemsPerPage: number ) => void;
+	/** Additional CSS class name for the pagination container. */
+	className?: string;
+	/** Theme UI style overrides. */
+	sx?: ThemeUIStyleObject;
+	/** Slot for variant-specific content (page numbers, arrows, etc.). */
+	children?: React.ReactNode;
+}
+
+const ItemsPerPageSelect = ( {
+	itemsPerPage,
+	pageSizeOptions,
+	onItemsPerPageChange,
+}: {
+	itemsPerPage: number;
+	pageSizeOptions: number[];
+	onItemsPerPageChange: ( size: number ) => void;
+} ) => (
+	<Select
+		id="items-per-page"
+		aria-label="Items per page"
+		separator={ false }
+		value={ itemsPerPage }
+		options={ pageSizeOptions.map( size => ( {
+			value: size,
+			label: `${ size.toString() } / page`,
+		} ) ) }
+		onChange={ option => onItemsPerPageChange( Number( option?.value ) ) }
+	/>
+);
+
+/**
+ * Shared layout wrapper for pagination components.
+ * Renders the nav landmark, optional items-per-page selector, and variant content.
+ */
+export const PaginationLayout = forwardRef< HTMLElement, PaginationLayoutProps >(
+	(
+		{
+			displayItemsPerPageSelector = false,
+			itemsPerPage,
+			pageSizeOptions = [ 20, 50, 100 ],
+			onItemsPerPageChange,
+			className,
+			sx,
+			children,
+			...rest
+		},
+		ref
+	) => (
+		<nav
+			ref={ ref }
+			aria-label="Pagination"
+			className={ classNames( 'vip-pagination-component', className ) }
+			sx={ { ...containerStyles, ...sx } }
+			{ ...rest }
+		>
+			<Box>
+				{ displayItemsPerPageSelector && itemsPerPage && onItemsPerPageChange && (
+					<ItemsPerPageSelect
+						itemsPerPage={ itemsPerPage }
+						pageSizeOptions={ pageSizeOptions }
+						onItemsPerPageChange={ onItemsPerPageChange }
+					/>
+				) }
+			</Box>
+			{ children }
+		</nav>
+	)
+);
+
+PaginationLayout.displayName = 'PaginationLayout';