From 6a2a1dbf2290f1a9c29cff11472106e974db5cc7 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 19 Jul 2024 13:35:16 +0200
Subject: [PATCH] DataViews: Refactor to prepare exposing the underlying UI
 pieces (#63694)

Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
---
 packages/base-styles/_z-index.scss            |   3 +-
 .../dataform/index.tsx}                       |   4 +-
 .../dataviews-bulk-actions-toolbar/index.tsx} |  58 +-
 .../dataviews-bulk-actions-toolbar/style.scss |  45 +
 .../dataviews-bulk-actions/index.tsx}         |  54 +-
 .../dataviews-bulk-actions/style.scss         |   7 +
 .../src/components/dataviews-context/index.ts |  47 +
 .../dataviews-filters}/add-filter.tsx         |   6 +-
 .../dataviews-filters}/filter-summary.tsx     |  28 +-
 .../dataviews-filters/index.tsx}              |  32 +-
 .../dataviews-filters}/reset-filters.tsx      |   2 +-
 .../dataviews-filters}/search-widget.tsx      |  28 +-
 .../components/dataviews-filters/style.scss   | 252 +++++
 .../dataviews-item-actions/index.tsx}         |   4 +-
 .../dataviews-item-actions/style.scss         |   3 +
 .../src/components/dataviews-layout/index.tsx |  49 +
 .../dataviews-pagination/index.tsx}           |  28 +-
 .../dataviews-pagination/style.scss           |  26 +
 .../dataviews-search/index.tsx}               |  15 +-
 .../dataviews-selection-checkbox/index.tsx}   |  12 +-
 .../dataviews-selection-checkbox/style.scss   |  14 +
 .../dataviews-view-config/index.tsx}          |  29 +-
 .../src/components/dataviews/index.tsx        | 123 +++
 .../src/components/dataviews/style.scss       |  97 ++
 packages/dataviews/src/dataviews.tsx          | 178 ----
 packages/dataviews/src/index.ts               |   4 +-
 packages/dataviews/src/layouts/grid/index.tsx |   6 +-
 .../dataviews/src/layouts/grid/style.scss     | 128 +++
 packages/dataviews/src/layouts/list/index.tsx |   5 +-
 .../dataviews/src/layouts/list/style.scss     | 189 ++++
 .../dataviews/src/layouts/table/index.tsx     |   6 +-
 .../dataviews/src/layouts/table/style.scss    | 201 ++++
 packages/dataviews/src/style.scss             | 962 +-----------------
 33 files changed, 1354 insertions(+), 1291 deletions(-)
 rename packages/dataviews/src/{dataform.tsx => components/dataform/index.tsx} (94%)
 rename packages/dataviews/src/{bulk-actions-toolbar.tsx => components/dataviews-bulk-actions-toolbar/index.tsx} (82%)
 create mode 100644 packages/dataviews/src/components/dataviews-bulk-actions-toolbar/style.scss
 rename packages/dataviews/src/{bulk-actions.tsx => components/dataviews-bulk-actions/index.tsx} (87%)
 create mode 100644 packages/dataviews/src/components/dataviews-bulk-actions/style.scss
 create mode 100644 packages/dataviews/src/components/dataviews-context/index.ts
 rename packages/dataviews/src/{ => components/dataviews-filters}/add-filter.tsx (92%)
 rename packages/dataviews/src/{ => components/dataviews-filters}/filter-summary.tsx (92%)
 rename packages/dataviews/src/{filters.tsx => components/dataviews-filters/index.tsx} (75%)
 rename packages/dataviews/src/{ => components/dataviews-filters}/reset-filters.tsx (94%)
 rename packages/dataviews/src/{ => components/dataviews-filters}/search-widget.tsx (88%)
 create mode 100644 packages/dataviews/src/components/dataviews-filters/style.scss
 rename packages/dataviews/src/{item-actions.tsx => components/dataviews-item-actions/index.tsx} (98%)
 create mode 100644 packages/dataviews/src/components/dataviews-item-actions/style.scss
 create mode 100644 packages/dataviews/src/components/dataviews-layout/index.tsx
 rename packages/dataviews/src/{pagination.tsx => components/dataviews-pagination/index.tsx} (83%)
 create mode 100644 packages/dataviews/src/components/dataviews-pagination/style.scss
 rename packages/dataviews/src/{search.tsx => components/dataviews-search/index.tsx} (77%)
 rename packages/dataviews/src/{single-selection-checkbox.tsx => components/dataviews-selection-checkbox/index.tsx} (80%)
 create mode 100644 packages/dataviews/src/components/dataviews-selection-checkbox/style.scss
 rename packages/dataviews/src/{view-actions.tsx => components/dataviews-view-config/index.tsx} (91%)
 create mode 100644 packages/dataviews/src/components/dataviews/index.tsx
 create mode 100644 packages/dataviews/src/components/dataviews/style.scss
 delete mode 100644 packages/dataviews/src/dataviews.tsx
 create mode 100644 packages/dataviews/src/layouts/grid/style.scss
 create mode 100644 packages/dataviews/src/layouts/list/style.scss
 create mode 100644 packages/dataviews/src/layouts/table/style.scss

diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index a110c0052b56eb..b8a9088cfd72cc 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -131,6 +131,7 @@ $z-layers: (
 	".block-editor-template-part__selection-modal": 1000001,
 	".block-editor-block-rename-modal": 1000001,
 	".edit-site-list__rename-modal": 1000001,
+	".dataviews-bulk-actions__modal": 1000001,
 	".dataviews-action-modal": 1000001,
 	".editor-action-modal": 1000001,
 	".editor-post-template__swap-template-modal": 1000001,
@@ -208,7 +209,7 @@ $z-layers: (
 	".dataviews-view-table thead": 1,
 
 	// Ensure quick actions toolbar appear above pagination
-	".dataviews-bulk-actions": 2,
+	".dataviews-bulk-actions-toolbar": 2,
 );
 
 @function z-index( $key ) {
diff --git a/packages/dataviews/src/dataform.tsx b/packages/dataviews/src/components/dataform/index.tsx
similarity index 94%
rename from packages/dataviews/src/dataform.tsx
rename to packages/dataviews/src/components/dataform/index.tsx
index b81e1c4ae83d37..e61fea075c9b5a 100644
--- a/packages/dataviews/src/dataform.tsx
+++ b/packages/dataviews/src/components/dataform/index.tsx
@@ -12,8 +12,8 @@ import { useCallback, useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import type { Form, Field, NormalizedField } from './types';
-import { normalizeFields } from './normalize-fields';
+import type { Form, Field, NormalizedField } from '../../types';
+import { normalizeFields } from '../../normalize-fields';
 
 type DataFormProps< Item > = {
 	data: Item;
diff --git a/packages/dataviews/src/bulk-actions-toolbar.tsx b/packages/dataviews/src/components/dataviews-bulk-actions-toolbar/index.tsx
similarity index 82%
rename from packages/dataviews/src/bulk-actions-toolbar.tsx
rename to packages/dataviews/src/components/dataviews-bulk-actions-toolbar/index.tsx
index c62cd6a5ee9d44..c25328db6a108a 100644
--- a/packages/dataviews/src/bulk-actions-toolbar.tsx
+++ b/packages/dataviews/src/components/dataviews-bulk-actions-toolbar/index.tsx
@@ -8,7 +8,7 @@ import {
 	__unstableMotion as motion,
 	__unstableAnimatePresence as AnimatePresence,
 } from '@wordpress/components';
-import { useMemo, useState, useRef } from '@wordpress/element';
+import { useMemo, useState, useRef, useContext } from '@wordpress/element';
 import { _n, sprintf, __ } from '@wordpress/i18n';
 import { closeSmall } from '@wordpress/icons';
 import { useReducedMotion } from '@wordpress/compose';
@@ -17,10 +17,13 @@ import { useRegistry } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { ActionWithModal } from './item-actions';
-import type { Action } from './types';
-import type { ActionTriggerProps } from './item-actions';
-import type { SetSelection } from './private-types';
+import { useSomeItemHasAPossibleBulkAction } from '../dataviews-bulk-actions';
+import DataViewsContext from '../dataviews-context';
+import { ActionWithModal } from '../dataviews-item-actions';
+import { LAYOUT_GRID, LAYOUT_TABLE } from '../../constants';
+import type { Action } from '../../types';
+import type { ActionTriggerProps } from '../dataviews-item-actions';
+import type { SetSelection } from '../../private-types';
 
 interface ActionButtonProps< Item > {
 	action: Action< Item >;
@@ -36,14 +39,6 @@ interface ToolbarContentProps< Item > {
 	onChangeSelection: SetSelection;
 }
 
-interface BulkActionsToolbarProps< Item > {
-	data: Item[];
-	selection: string[];
-	actions: Action< Item >[];
-	onChangeSelection: SetSelection;
-	getItemId: ( item: Item ) => string;
-}
-
 const SNACKBAR_VARIANTS = {
 	init: {
 		bottom: -48,
@@ -136,7 +131,7 @@ function renderToolbarContent< Item >(
 	return (
 		<>
 			<ToolbarGroup>
-				<div className="dataviews-bulk-actions__selection-count">
+				<div className="dataviews-bulk-actions-toolbar__selection-count">
 					{ selection.length === 1
 						? __( '1 item selected' )
 						: sprintf(
@@ -214,13 +209,14 @@ function ToolbarContent< Item >( {
 	return buttons.current;
 }
 
-export default function BulkActionsToolbar< Item >( {
-	data,
-	selection,
-	actions = EMPTY_ARRAY,
-	onChangeSelection,
-	getItemId,
-}: BulkActionsToolbarProps< Item > ) {
+function _BulkActionsToolbar() {
+	const {
+		data,
+		selection,
+		actions = EMPTY_ARRAY,
+		onChangeSelection,
+		getItemId,
+	} = useContext( DataViewsContext );
 	const isReducedMotion = useReducedMotion();
 	const selectedItems = useMemo( () => {
 		return data.filter( ( item ) =>
@@ -258,10 +254,10 @@ export default function BulkActionsToolbar< Item >( {
 				animate="open"
 				exit="exit"
 				variants={ isReducedMotion ? undefined : SNACKBAR_VARIANTS }
-				className="dataviews-bulk-actions"
+				className="dataviews-bulk-actions-toolbar"
 			>
 				<Toolbar label={ __( 'Bulk actions' ) }>
-					<div className="dataviews-bulk-actions-toolbar-wrapper">
+					<div className="dataviews-bulk-actions-toolbar__wrapper">
 						<ToolbarContent
 							selection={ selection }
 							actionsToShow={ actionsToShow }
@@ -274,3 +270,19 @@ export default function BulkActionsToolbar< Item >( {
 		</AnimatePresence>
 	);
 }
+
+export default function BulkActionsToolbar() {
+	const { data, actions = [], view } = useContext( DataViewsContext );
+	const hasPossibleBulkAction = useSomeItemHasAPossibleBulkAction(
+		actions,
+		data
+	);
+	if (
+		! [ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) ||
+		! hasPossibleBulkAction
+	) {
+		return null;
+	}
+
+	return <_BulkActionsToolbar />;
+}
diff --git a/packages/dataviews/src/components/dataviews-bulk-actions-toolbar/style.scss b/packages/dataviews/src/components/dataviews-bulk-actions-toolbar/style.scss
new file mode 100644
index 00000000000000..21e6c2ad4d4d64
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews-bulk-actions-toolbar/style.scss
@@ -0,0 +1,45 @@
+.dataviews-bulk-actions-toolbar {
+	position: sticky;
+	display: flex;
+	flex-direction: column;
+	align-content: center;
+	flex-wrap: wrap;
+	width: fit-content;
+	margin-left: auto;
+	margin-right: auto;
+	bottom: $grid-unit-30;
+	z-index: z-index(".dataviews-bulk-actions-toolbar");
+
+	.components-accessible-toolbar {
+		border-color: $gray-300;
+		box-shadow: $shadow-popover;
+
+		.components-toolbar-group {
+			border-color: $gray-200;
+
+			&:last-child {
+				border: 0;
+			}
+		}
+	}
+
+	.dataviews-bulk-actions-toolbar__selection-count {
+		display: flex;
+		align-items: center;
+		margin: 0 $grid-unit-10 0 $grid-unit-10;
+	}
+}
+
+.dataviews-bulk-actions-toolbar__wrapper {
+	display: flex;
+	flex-grow: 1;
+	width: 100%;
+
+	.components-toolbar-group {
+		align-items: center;
+	}
+
+	.components-button.is-busy {
+		max-height: $button-size;
+	}
+}
diff --git a/packages/dataviews/src/bulk-actions.tsx b/packages/dataviews/src/components/dataviews-bulk-actions/index.tsx
similarity index 87%
rename from packages/dataviews/src/bulk-actions.tsx
rename to packages/dataviews/src/components/dataviews-bulk-actions/index.tsx
index ff36d7f7bc2098..2047307bd7e90e 100644
--- a/packages/dataviews/src/bulk-actions.tsx
+++ b/packages/dataviews/src/components/dataviews-bulk-actions/index.tsx
@@ -7,15 +7,16 @@ import {
 	Modal,
 } from '@wordpress/components';
 import { __, sprintf, _n } from '@wordpress/i18n';
-import { useMemo, useState, useCallback } from '@wordpress/element';
+import { useMemo, useState, useCallback, useContext } from '@wordpress/element';
 import { useRegistry } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import { unlock } from './lock-unlock';
-import type { Action, ActionModal } from './types';
-import type { SetSelection } from './private-types';
+import DataViewsContext from '../dataviews-context';
+import { LAYOUT_TABLE, LAYOUT_GRID } from '../../constants';
+import { unlock } from '../../lock-unlock';
+import type { Action, ActionModal } from '../../types';
 
 const {
 	DropdownMenuV2: DropdownMenu,
@@ -43,14 +44,6 @@ interface ActionsMenuGroupProps< Item > {
 	setActionWithModal: ( action?: ActionModal< Item > ) => void;
 }
 
-interface BulkActionsProps< Item > {
-	data: Item[];
-	actions: Action< Item >[];
-	selection: string[];
-	onChangeSelection: SetSelection;
-	getItemId: ( item: Item ) => string;
-}
-
 export function useHasAPossibleBulkAction< Item >(
 	actions: Action< Item >[],
 	item: Item
@@ -105,7 +98,7 @@ function ActionWithModal< Item >( {
 			title={ ! hideModalHeader ? label : undefined }
 			__experimentalHideHeader={ !! hideModalHeader }
 			onRequestClose={ onCloseModal }
-			overlayClassName="dataviews-action-modal"
+			overlayClassName="dataviews-bulk-actions__modal"
 		>
 			<RenderModal
 				items={ eligibleItems }
@@ -180,20 +173,21 @@ function ActionsMenuGroup< Item >( {
 	);
 }
 
-export default function BulkActions< Item >( {
-	data,
-	actions,
-	selection,
-	onChangeSelection,
-	getItemId,
-}: BulkActionsProps< Item > ) {
+function _BulkActions() {
+	const {
+		data,
+		actions = [],
+		selection,
+		onChangeSelection,
+		getItemId,
+	} = useContext( DataViewsContext );
 	const bulkActions = useMemo(
 		() => actions.filter( ( action ) => action.supportsBulk ),
 		[ actions ]
 	);
 	const [ isMenuOpen, onMenuOpenChange ] = useState( false );
 	const [ actionWithModal, setActionWithModal ] = useState<
-		ActionModal< Item > | undefined
+		ActionModal< any > | undefined
 	>();
 	const selectableItems = useMemo( () => {
 		return data.filter( ( item ) => {
@@ -227,7 +221,7 @@ export default function BulkActions< Item >( {
 				style={ { minWidth: '240px' } }
 				trigger={
 					<Button
-						className="dataviews-bulk-edit-button"
+						className="dataviews-bulk-actions__edit-button"
 						__next40pxDefaultSize
 						variant="tertiary"
 						size="compact"
@@ -288,3 +282,19 @@ export default function BulkActions< Item >( {
 		</>
 	);
 }
+
+export default function BulkActions() {
+	const { data, actions = [], view } = useContext( DataViewsContext );
+	const hasPossibleBulkAction = useSomeItemHasAPossibleBulkAction(
+		actions,
+		data
+	);
+	if (
+		! [ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) ||
+		! hasPossibleBulkAction
+	) {
+		return null;
+	}
+
+	return <_BulkActions />;
+}
diff --git a/packages/dataviews/src/components/dataviews-bulk-actions/style.scss b/packages/dataviews/src/components/dataviews-bulk-actions/style.scss
new file mode 100644
index 00000000000000..71f76ce9a6c16f
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews-bulk-actions/style.scss
@@ -0,0 +1,7 @@
+.dataviews-bulk-actions__modal {
+	z-index: z-index(".dataviews-bulk-actions__modal");
+}
+
+.dataviews-bulk-actions__edit-button.components-button {
+	flex-shrink: 0;
+}
diff --git a/packages/dataviews/src/components/dataviews-context/index.ts b/packages/dataviews/src/components/dataviews-context/index.ts
new file mode 100644
index 00000000000000..39e5e09015658e
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews-context/index.ts
@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { View, Action, NormalizedField } from '../../types';
+import type { SetSelection } from '../../private-types';
+import { LAYOUT_TABLE } from '../../constants';
+
+type DataViewsContextType< Item > = {
+	view: View;
+	onChangeView: ( view: View ) => void;
+	fields: NormalizedField< Item >[];
+	actions?: Action< Item >[];
+	data: Item[];
+	isLoading?: boolean;
+	paginationInfo: {
+		totalItems: number;
+		totalPages: number;
+	};
+	selection: string[];
+	onChangeSelection: SetSelection;
+	openedFilter: string | null;
+	setOpenedFilter: ( openedFilter: string | null ) => void;
+	getItemId: ( item: Item ) => string;
+};
+
+const DataViewsContext = createContext< DataViewsContextType< any > >( {
+	view: { type: LAYOUT_TABLE },
+	onChangeView: () => {},
+	fields: [],
+	data: [],
+	paginationInfo: {
+		totalItems: 0,
+		totalPages: 0,
+	},
+	selection: [],
+	onChangeSelection: () => {},
+	setOpenedFilter: () => {},
+	openedFilter: null,
+	getItemId: ( item ) => item.id,
+} );
+
+export default DataViewsContext;
diff --git a/packages/dataviews/src/add-filter.tsx b/packages/dataviews/src/components/dataviews-filters/add-filter.tsx
similarity index 92%
rename from packages/dataviews/src/add-filter.tsx
rename to packages/dataviews/src/components/dataviews-filters/add-filter.tsx
index 095ca9c3a8425f..38dda38c96e70f 100644
--- a/packages/dataviews/src/add-filter.tsx
+++ b/packages/dataviews/src/components/dataviews-filters/add-filter.tsx
@@ -16,8 +16,8 @@ import { forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { unlock } from './lock-unlock';
-import type { NormalizedFilter, View } from './types';
+import { unlock } from '../../lock-unlock';
+import type { NormalizedFilter, View } from '../../types';
 
 const {
 	DropdownMenuV2: DropdownMenu,
@@ -46,7 +46,7 @@ function AddFilter(
 				<Button
 					accessibleWhenDisabled
 					size="compact"
-					className="dataviews-filters-button"
+					className="dataviews-filters__button"
 					variant="tertiary"
 					disabled={ ! inactiveFilters.length }
 					ref={ ref }
diff --git a/packages/dataviews/src/filter-summary.tsx b/packages/dataviews/src/components/dataviews-filters/filter-summary.tsx
similarity index 92%
rename from packages/dataviews/src/filter-summary.tsx
rename to packages/dataviews/src/components/dataviews-filters/filter-summary.tsx
index 95b06324d95dba..7e4c7db9a29aa9 100644
--- a/packages/dataviews/src/filter-summary.tsx
+++ b/packages/dataviews/src/components/dataviews-filters/filter-summary.tsx
@@ -35,8 +35,14 @@ import {
 	OPERATOR_IS_NONE,
 	OPERATOR_IS_ALL,
 	OPERATOR_IS_NOT_ALL,
-} from './constants';
-import type { Filter, NormalizedFilter, Operator, Option, View } from './types';
+} from '../../constants';
+import type {
+	Filter,
+	NormalizedFilter,
+	Operator,
+	Option,
+	View,
+} from '../../types';
 
 interface FilterTextProps {
 	activeElements: Option[];
@@ -65,8 +71,10 @@ const FilterText = ( {
 	}
 
 	const filterTextWrappers = {
-		Name: <span className="dataviews-filter-summary__filter-text-name" />,
-		Value: <span className="dataviews-filter-summary__filter-text-value" />,
+		Name: <span className="dataviews-filters__summary-filter-text-name" />,
+		Value: (
+			<span className="dataviews-filters__summary-filter-text-value" />
+		),
 	};
 
 	if ( filterInView?.operator === OPERATOR_IS_ANY ) {
@@ -166,9 +174,9 @@ function OperatorSelector( {
 			<HStack
 				spacing={ 2 }
 				justify="flex-start"
-				className="dataviews-filter-summary__operators-container"
+				className="dataviews-filters__summary-operators-container"
 			>
-				<FlexItem className="dataviews-filter-summary__operators-filter-name">
+				<FlexItem className="dataviews-filters__summary-operators-filter-name">
 					{ filter.name }
 				</FlexItem>
 
@@ -239,13 +247,13 @@ export default function FilterSummary( {
 	return (
 		<Dropdown
 			defaultOpen={ openedFilter === filter.field }
-			contentClassName="dataviews-filter-summary__popover"
+			contentClassName="dataviews-filters__summary-popover"
 			popoverProps={ { placement: 'bottom-start', role: 'dialog' } }
 			onClose={ () => {
 				toggleRef.current?.focus();
 			} }
 			renderToggle={ ( { isOpen, onToggle } ) => (
-				<div className="dataviews-filter-summary__chip-container">
+				<div className="dataviews-filters__summary-chip-container">
 					<Tooltip
 						text={ sprintf(
 							/* translators: 1: Filter name. */
@@ -256,7 +264,7 @@ export default function FilterSummary( {
 					>
 						<div
 							className={ clsx(
-								'dataviews-filter-summary__chip',
+								'dataviews-filters__summary-chip',
 								{
 									'has-reset': canResetOrRemove,
 									'has-values': hasValues,
@@ -289,7 +297,7 @@ export default function FilterSummary( {
 						>
 							<button
 								className={ clsx(
-									'dataviews-filter-summary__chip-remove',
+									'dataviews-filters__summary-chip-remove',
 									{ 'has-values': hasValues }
 								) }
 								onClick={ () => {
diff --git a/packages/dataviews/src/filters.tsx b/packages/dataviews/src/components/dataviews-filters/index.tsx
similarity index 75%
rename from packages/dataviews/src/filters.tsx
rename to packages/dataviews/src/components/dataviews-filters/index.tsx
index ca3de9626b48e7..c35bb454b329f8 100644
--- a/packages/dataviews/src/filters.tsx
+++ b/packages/dataviews/src/components/dataviews-filters/index.tsx
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { memo, useRef } from '@wordpress/element';
+import { memo, useContext, useRef } from '@wordpress/element';
 import { __experimentalHStack as HStack } from '@wordpress/components';
 
 /**
@@ -10,25 +10,14 @@ import { __experimentalHStack as HStack } from '@wordpress/components';
 import FilterSummary from './filter-summary';
 import AddFilter from './add-filter';
 import ResetFilters from './reset-filters';
-import { sanitizeOperators } from './utils';
-import { ALL_OPERATORS, OPERATOR_IS, OPERATOR_IS_NOT } from './constants';
-import type { NormalizedField, NormalizedFilter, View } from './types';
+import DataViewsContext from '../dataviews-context';
+import { sanitizeOperators } from '../../utils';
+import { ALL_OPERATORS, OPERATOR_IS, OPERATOR_IS_NOT } from '../../constants';
+import type { NormalizedFilter } from '../../types';
 
-interface FiltersProps< Item > {
-	fields: NormalizedField< Item >[];
-	view: View;
-	onChangeView: ( view: View ) => void;
-	openedFilter: string | null;
-	setOpenedFilter: ( openedFilter: string | null ) => void;
-}
-
-function _Filters< Item >( {
-	fields,
-	view,
-	onChangeView,
-	openedFilter,
-	setOpenedFilter,
-}: FiltersProps< Item > ) {
+function Filters() {
+	const { fields, view, onChangeView, openedFilter, setOpenedFilter } =
+		useContext( DataViewsContext );
 	const addFilterRef = useRef< HTMLButtonElement >( null );
 	const filters: NormalizedFilter[] = [];
 	fields.forEach( ( field ) => {
@@ -119,7 +108,4 @@ function _Filters< Item >( {
 	);
 }
 
-// A type assertion is used here to keep the type argument.
-const Filters = memo( _Filters ) as typeof _Filters;
-
-export default Filters;
+export default memo( Filters );
diff --git a/packages/dataviews/src/reset-filters.tsx b/packages/dataviews/src/components/dataviews-filters/reset-filters.tsx
similarity index 94%
rename from packages/dataviews/src/reset-filters.tsx
rename to packages/dataviews/src/components/dataviews-filters/reset-filters.tsx
index 5c155ac7f05cca..4e4c44d8a1c311 100644
--- a/packages/dataviews/src/reset-filters.tsx
+++ b/packages/dataviews/src/components/dataviews-filters/reset-filters.tsx
@@ -7,7 +7,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import type { NormalizedFilter, View } from './types';
+import type { NormalizedFilter, View } from '../../types';
 
 interface ResetFilterProps {
 	filters: NormalizedFilter[];
diff --git a/packages/dataviews/src/search-widget.tsx b/packages/dataviews/src/components/dataviews-filters/search-widget.tsx
similarity index 88%
rename from packages/dataviews/src/search-widget.tsx
rename to packages/dataviews/src/components/dataviews-filters/search-widget.tsx
index d65d58635405a3..3516ff23b28503 100644
--- a/packages/dataviews/src/search-widget.tsx
+++ b/packages/dataviews/src/components/dataviews-filters/search-widget.tsx
@@ -21,8 +21,8 @@ import { SVG, Circle } from '@wordpress/primitives';
 /**
  * Internal dependencies
  */
-import { unlock } from './lock-unlock';
-import type { Filter, NormalizedFilter, View } from './types';
+import { unlock } from '../../lock-unlock';
+import type { Filter, NormalizedFilter, View } from '../../types';
 
 const {
 	CompositeV2: Composite,
@@ -101,7 +101,7 @@ function ListBox( { view, filter, onChangeView }: SearchWidgetProps ) {
 		<Composite
 			store={ compositeStore }
 			role="listbox"
-			className="dataviews-search-widget-listbox"
+			className="dataviews-filters__search-widget-listbox"
 			aria-label={ sprintf(
 				/* translators: List of items for a filter. 1: Filter name. e.g.: "List of: Author". */
 				__( 'List of: %1$s' ),
@@ -124,7 +124,7 @@ function ListBox( { view, filter, onChangeView }: SearchWidgetProps ) {
 								<div
 									aria-label={ element.label }
 									role="option"
-									className="dataviews-search-widget-listitem"
+									className="dataviews-filters__search-widget-listitem"
 								/>
 							}
 							onClick={ () => {
@@ -174,7 +174,7 @@ function ListBox( { view, filter, onChangeView }: SearchWidgetProps ) {
 						/>
 					}
 				>
-					<span className="dataviews-search-widget-listitem-check">
+					<span className="dataviews-filters__search-widget-listitem-check">
 						{ filter.singleSelection &&
 							currentValue === element.value && (
 								<Icon icon={ radioCheck } />
@@ -187,7 +187,7 @@ function ListBox( { view, filter, onChangeView }: SearchWidgetProps ) {
 					<span>
 						{ element.label }
 						{ !! element.description && (
-							<span className="dataviews-search-widget-listitem-description">
+							<span className="dataviews-filters__search-widget-listitem-description">
 								{ element.description }
 							</span>
 						) }
@@ -247,7 +247,7 @@ function ComboboxList( { view, filter, onChangeView }: SearchWidgetProps ) {
 			} }
 			setValue={ setSearchValue }
 		>
-			<div className="dataviews-search-widget-filter-combobox__wrapper">
+			<div className="dataviews-filters__search-widget-filter-combobox__wrapper">
 				<Ariakit.ComboboxLabel
 					render={
 						<VisuallyHidden>
@@ -260,14 +260,14 @@ function ComboboxList( { view, filter, onChangeView }: SearchWidgetProps ) {
 				<Ariakit.Combobox
 					autoSelect="always"
 					placeholder={ __( 'Search' ) }
-					className="dataviews-search-widget-filter-combobox__input"
+					className="dataviews-filters__search-widget-filter-combobox__input"
 				/>
-				<div className="dataviews-search-widget-filter-combobox__icon">
+				<div className="dataviews-filters__search-widget-filter-combobox__icon">
 					<Icon icon={ search } />
 				</div>
 			</div>
 			<Ariakit.ComboboxList
-				className="dataviews-search-widget-filter-combobox-list"
+				className="dataviews-filters__search-widget-filter-combobox-list"
 				alwaysVisible
 			>
 				{ matches.map( ( element ) => {
@@ -275,12 +275,12 @@ function ComboboxList( { view, filter, onChangeView }: SearchWidgetProps ) {
 						<Ariakit.ComboboxItem
 							key={ element.value }
 							value={ element.value }
-							className="dataviews-search-widget-listitem"
+							className="dataviews-filters__search-widget-listitem"
 							hideOnClick={ false }
 							setValueOnClick={ false }
 							focusOnHover
 						>
-							<span className="dataviews-search-widget-listitem-check">
+							<span className="dataviews-filters__search-widget-listitem-check">
 								{ filter.singleSelection &&
 									currentValue === element.value && (
 										<Icon icon={ radioCheck } />
@@ -292,11 +292,11 @@ function ComboboxList( { view, filter, onChangeView }: SearchWidgetProps ) {
 							</span>
 							<span>
 								<Ariakit.ComboboxItemValue
-									className="dataviews-search-widget-filter-combobox-item-value"
+									className="dataviews-filters__search-widget-filter-combobox-item-value"
 									value={ element.label }
 								/>
 								{ !! element.description && (
-									<span className="dataviews-search-widget-listitem-description">
+									<span className="dataviews-filters__search-widget-listitem-description">
 										{ element.description }
 									</span>
 								) }
diff --git a/packages/dataviews/src/components/dataviews-filters/style.scss b/packages/dataviews/src/components/dataviews-filters/style.scss
new file mode 100644
index 00000000000000..26e5e613fcbe44
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews-filters/style.scss
@@ -0,0 +1,252 @@
+.dataviews-filters__button {
+	position: relative;
+}
+
+.dataviews-filters__reset-button.dataviews-filters__reset-button[aria-disabled="true"] {
+	&,
+	&:hover {
+		opacity: 0;
+	}
+
+	&:focus {
+		opacity: 1;
+	}
+}
+
+.dataviews-filters__summary-popover {
+	.components-popover__content {
+		width: 230px;
+		padding: 0;
+		border-radius: $grid-unit-05;
+	}
+}
+
+.dataviews-filters__summary-operators-container {
+	padding: $grid-unit-10 $grid-unit-10 0;
+
+	&:has(+ .dataviews-filters__search-widget-listbox) {
+		border-bottom: 1px solid $gray-200;
+		padding-bottom: $grid-unit-10;
+	}
+
+	&:empty {
+		display: none;
+	}
+
+	.dataviews-filters__summary-operators-filter-name {
+		color: $gray-700;
+	}
+}
+
+.dataviews-filters__summary-chip-container {
+	position: relative;
+	white-space: pre-wrap;
+
+	.dataviews-filters__summary-chip {
+		border-radius: $grid-unit-20;
+		border: 1px solid transparent;
+		cursor: pointer;
+		padding: $grid-unit-05 $grid-unit-15;
+		min-height: $grid-unit-40;
+		background: $gray-100;
+		color: $gray-800;
+		position: relative;
+		display: flex;
+		align-items: center;
+
+		&.has-reset {
+			padding-inline-end: $button-size-small + $grid-unit-05;
+		}
+
+		&:hover,
+		&:focus-visible,
+		&[aria-expanded="true"] {
+			background: $gray-200;
+			color: $gray-900;
+		}
+
+		&.has-values {
+			color: var(--wp-admin-theme-color);
+			background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+
+			&:hover,
+			&[aria-expanded="true"] {
+				background: rgba(var(--wp-admin-theme-color--rgb), 0.12);
+			}
+		}
+
+		&:focus-visible {
+			outline: none;
+			box-shadow:
+				0 0 0 var(--wp-admin-border-width-focus)
+				var(--wp-admin-theme-color);
+		}
+
+		.dataviews-filters-__summary-filter-text-name {
+			font-weight: 500;
+		}
+	}
+
+	.dataviews-filters__summary-chip-remove {
+		width: $icon-size;
+		height: $icon-size;
+		border-radius: 50%;
+		border: 0;
+		padding: 0;
+		position: absolute;
+		right: $grid-unit-05;
+		top: 50%;
+		transform: translateY(-50%);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: transparent;
+		cursor: pointer;
+
+		svg {
+			fill: $gray-700;
+		}
+
+		&:hover,
+		&:focus {
+			background: $gray-200;
+			svg {
+				fill: $gray-900;
+			}
+		}
+
+		&.has-values {
+			svg {
+				fill: var(--wp-admin-theme-color);
+			}
+			&:hover {
+				background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
+			}
+		}
+
+		&:focus-visible {
+			outline: none;
+			box-shadow:
+				0 0 0 var(--wp-admin-border-width-focus)
+				var(--wp-admin-theme-color);
+		}
+	}
+}
+
+.dataviews-filters__search-widget-filter-combobox-list {
+	max-height: $grid-unit * 23;
+	padding: $grid-unit-05;
+	overflow: auto;
+	border-top: 1px solid $gray-200;
+
+	.dataviews-filters__search-widget-filter-combobox-item-value {
+		[data-user-value] {
+			font-weight: 600;
+		}
+	}
+}
+
+.dataviews-filters__search-widget-listbox {
+	max-height: $grid-unit * 23;
+	padding: $grid-unit-05;
+	overflow: auto;
+}
+
+.dataviews-filters__search-widget-listitem {
+	display: flex;
+	align-items: center;
+	gap: $grid-unit-10;
+	border-radius: $radius-block-ui;
+	box-sizing: border-box;
+	padding: $grid-unit-10 $grid-unit-15;
+	cursor: default;
+	margin-block-end: 2px;
+
+	&:last-child {
+		margin-block-end: 0;
+	}
+
+	&:hover,
+	&[data-active-item],
+	&:focus {
+		background-color: var(--wp-admin-theme-color);
+		color: $white;
+
+		.dataviews-filters__search-widget-listitem-check {
+			fill: $white;
+		}
+
+		.dataviews-filters__search-widget-listitem-description {
+			color: $white;
+		}
+	}
+
+	.dataviews-filters__search-widget-listitem-check {
+		width: 24px;
+		height: 24px;
+		flex-shrink: 0;
+	}
+
+	.dataviews-filters__search-widget-listitem-description {
+		display: block;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		font-size: $helptext-font-size;
+		line-height: 16px;
+		color: $gray-700;
+	}
+}
+
+.dataviews-filters__search-widget-filter-combobox__wrapper {
+	position: relative;
+	padding: $grid-unit-10;
+
+	.dataviews-filters__search-widget-filter-combobox__input {
+		@include input-control;
+		display: block;
+		padding: 0 $grid-unit-40 0 $grid-unit-10;
+		background: $gray-100;
+		border: none;
+		width: 100%;
+		height: $grid-unit-40;
+
+		// Unset inherited values.
+		margin-left: 0;
+		margin-right: 0;
+
+		/* Fonts smaller than 16px causes mobile safari to zoom. */
+		font-size: $mobile-text-min-font-size;
+		@include break-small {
+			font-size: $default-font-size;
+		}
+
+		&:focus {
+			background: $white;
+			box-shadow:
+				inset 0 0 0 var(--wp-admin-border-width-focus)
+				var(--wp-admin-theme-color);
+		}
+
+		&::placeholder {
+			color: $gray-700;
+		}
+
+		&::-webkit-search-decoration,
+		&::-webkit-search-cancel-button,
+		&::-webkit-search-results-button,
+		&::-webkit-search-results-decoration {
+			-webkit-appearance: none;
+		}
+	}
+
+	.dataviews-filters__search-widget-filter-combobox__icon {
+		position: absolute;
+		right: $grid-unit-15;
+		top: 50%;
+		transform: translateY(-50%);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: $icon-size;
+	}
+}
diff --git a/packages/dataviews/src/item-actions.tsx b/packages/dataviews/src/components/dataviews-item-actions/index.tsx
similarity index 98%
rename from packages/dataviews/src/item-actions.tsx
rename to packages/dataviews/src/components/dataviews-item-actions/index.tsx
index 08d82d060b74ca..53b468c1ab7d3e 100644
--- a/packages/dataviews/src/item-actions.tsx
+++ b/packages/dataviews/src/components/dataviews-item-actions/index.tsx
@@ -20,8 +20,8 @@ import { useRegistry } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { unlock } from './lock-unlock';
-import type { Action, ActionModal as ActionModalType } from './types';
+import { unlock } from '../../lock-unlock';
+import type { Action, ActionModal as ActionModalType } from '../../types';
 
 const {
 	DropdownMenuV2: DropdownMenu,
diff --git a/packages/dataviews/src/components/dataviews-item-actions/style.scss b/packages/dataviews/src/components/dataviews-item-actions/style.scss
new file mode 100644
index 00000000000000..9a0327ccb673ff
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews-item-actions/style.scss
@@ -0,0 +1,3 @@
+.dataviews-action-modal {
+	z-index: z-index(".dataviews-action-modal");
+}
diff --git a/packages/dataviews/src/components/dataviews-layout/index.tsx b/packages/dataviews/src/components/dataviews-layout/index.tsx
new file mode 100644
index 00000000000000..960dcf304c0180
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews-layout/index.tsx
@@ -0,0 +1,49 @@
+/**
+ * External dependencies
+ */
+import type { ComponentType } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DataViewsContext from '../dataviews-context';
+import { VIEW_LAYOUTS } from '../../layouts';
+import type { ViewBaseProps } from '../../types';
+
+export default function DataViewsLayout() {
+	const {
+		actions = [],
+		data,
+		fields,
+		getItemId,
+		isLoading,
+		view,
+		onChangeView,
+		selection,
+		onChangeSelection,
+		setOpenedFilter,
+	} = useContext( DataViewsContext );
+
+	const ViewComponent = VIEW_LAYOUTS.find( ( v ) => v.type === view.type )
+		?.component as ComponentType< ViewBaseProps< any > >;
+
+	return (
+		<ViewComponent
+			actions={ actions }
+			data={ data }
+			fields={ fields }
+			getItemId={ getItemId }
+			isLoading={ isLoading }
+			onChangeView={ onChangeView }
+			onChangeSelection={ onChangeSelection }
+			selection={ selection }
+			setOpenedFilter={ setOpenedFilter }
+			view={ view }
+		/>
+	);
+}
diff --git a/packages/dataviews/src/pagination.tsx b/packages/dataviews/src/components/dataviews-pagination/index.tsx
similarity index 83%
rename from packages/dataviews/src/pagination.tsx
rename to packages/dataviews/src/components/dataviews-pagination/index.tsx
index 99688e076e53be..f8ebf41469d949 100644
--- a/packages/dataviews/src/pagination.tsx
+++ b/packages/dataviews/src/components/dataviews-pagination/index.tsx
@@ -6,29 +6,21 @@ import {
 	__experimentalHStack as HStack,
 	SelectControl,
 } from '@wordpress/components';
-import { createInterpolateElement, memo } from '@wordpress/element';
+import { createInterpolateElement, memo, useContext } from '@wordpress/element';
 import { sprintf, __, _x } from '@wordpress/i18n';
 import { next, previous } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import type { View } from './types';
+import DataViewsContext from '../dataviews-context';
 
-interface PaginationProps {
-	view: View;
-	onChangeView: ( view: View ) => void;
-	paginationInfo: {
-		totalItems: number;
-		totalPages: number;
-	};
-}
-
-const Pagination = memo( function Pagination( {
-	view,
-	onChangeView,
-	paginationInfo: { totalItems = 0, totalPages },
-}: PaginationProps ) {
+function DataViewsPagination() {
+	const {
+		view,
+		onChangeView,
+		paginationInfo: { totalItems = 0, totalPages },
+	} = useContext( DataViewsContext );
 	if ( ! totalItems || ! totalPages ) {
 		return null;
 	}
@@ -113,6 +105,6 @@ const Pagination = memo( function Pagination( {
 			</HStack>
 		)
 	);
-} );
+}
 
-export default Pagination;
+export default memo( DataViewsPagination );
diff --git a/packages/dataviews/src/components/dataviews-pagination/style.scss b/packages/dataviews/src/components/dataviews-pagination/style.scss
new file mode 100644
index 00000000000000..4e754ab90fa54a
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews-pagination/style.scss
@@ -0,0 +1,26 @@
+.dataviews-pagination {
+	position: sticky;
+	bottom: 0;
+	left: 0;
+	background-color: $white;
+	padding: $grid-unit-15 $grid-unit-60;
+	border-top: $border-width solid $gray-100;
+	color: $gray-700;
+	flex-shrink: 0;
+	transition: padding ease-out 0.1s;
+	@include reduce-motion("transition");
+}
+
+.dataviews-pagination__page-selection {
+	font-size: 11px;
+	text-transform: uppercase;
+	font-weight: 500;
+	color: $gray-900;
+}
+
+/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
+@container (max-width: 430px) {
+	.dataviews-pagination {
+		padding: $grid-unit-15 $grid-unit-30;
+	}
+}
diff --git a/packages/dataviews/src/search.tsx b/packages/dataviews/src/components/dataviews-search/index.tsx
similarity index 77%
rename from packages/dataviews/src/search.tsx
rename to packages/dataviews/src/components/dataviews-search/index.tsx
index 7929a9bd0eb3cb..5e5ce705e11195 100644
--- a/packages/dataviews/src/search.tsx
+++ b/packages/dataviews/src/components/dataviews-search/index.tsx
@@ -2,26 +2,21 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useEffect, useRef, memo } from '@wordpress/element';
+import { useEffect, useRef, memo, useContext } from '@wordpress/element';
 import { SearchControl } from '@wordpress/components';
 import { useDebouncedInput } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-import type { View } from './types';
+import DataViewsContext from '../dataviews-context';
 
 interface SearchProps {
 	label?: string;
-	view: View;
-	onChangeView: ( view: View ) => void;
 }
 
-const Search = memo( function Search( {
-	label,
-	view,
-	onChangeView,
-}: SearchProps ) {
+const DataViewsSearch = memo( function Search( { label }: SearchProps ) {
+	const { view, onChangeView } = useContext( DataViewsContext );
 	const [ search, setSearch, debouncedSearch ] = useDebouncedInput(
 		view.search
 	);
@@ -54,4 +49,4 @@ const Search = memo( function Search( {
 	);
 } );
 
-export default Search;
+export default DataViewsSearch;
diff --git a/packages/dataviews/src/single-selection-checkbox.tsx b/packages/dataviews/src/components/dataviews-selection-checkbox/index.tsx
similarity index 80%
rename from packages/dataviews/src/single-selection-checkbox.tsx
rename to packages/dataviews/src/components/dataviews-selection-checkbox/index.tsx
index 52f20d7a35f629..b81bdad9a54614 100644
--- a/packages/dataviews/src/single-selection-checkbox.tsx
+++ b/packages/dataviews/src/components/dataviews-selection-checkbox/index.tsx
@@ -7,10 +7,10 @@ import { CheckboxControl } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import type { Field } from './types';
-import type { SetSelection } from './private-types';
+import type { Field } from '../../types';
+import type { SetSelection } from '../../private-types';
 
-interface SingleSelectionCheckboxProps< Item > {
+interface DataViewsSelectionCheckboxProps< Item > {
 	selection: string[];
 	onChangeSelection: SetSelection;
 	item: Item;
@@ -19,14 +19,14 @@ interface SingleSelectionCheckboxProps< Item > {
 	disabled: boolean;
 }
 
-export default function SingleSelectionCheckbox< Item >( {
+export default function DataViewsSelectionCheckbox< Item >( {
 	selection,
 	onChangeSelection,
 	item,
 	getItemId,
 	primaryField,
 	disabled,
-}: SingleSelectionCheckboxProps< Item > ) {
+}: DataViewsSelectionCheckboxProps< Item > ) {
 	const id = getItemId( item );
 	const checked = ! disabled && selection.includes( id );
 	let selectionLabel;
@@ -44,7 +44,7 @@ export default function SingleSelectionCheckbox< Item >( {
 	}
 	return (
 		<CheckboxControl
-			className="dataviews-view-table-selection-checkbox"
+			className="dataviews-selection-checkbox"
 			__nextHasNoMarginBottom
 			aria-label={ selectionLabel }
 			aria-disabled={ disabled }
diff --git a/packages/dataviews/src/components/dataviews-selection-checkbox/style.scss b/packages/dataviews/src/components/dataviews-selection-checkbox/style.scss
new file mode 100644
index 00000000000000..d2724cae3feb9b
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews-selection-checkbox/style.scss
@@ -0,0 +1,14 @@
+.dataviews-selection-checkbox {
+	// Experimental override for CheckboxControl size (fragile)
+	--checkbox-input-size: 24px;
+	@include break-small() {
+		--checkbox-input-size: 16px;
+	}
+
+	line-height: 0;
+	flex-shrink: 0;
+
+	.components-checkbox-control__input-container {
+		margin: 0;
+	}
+}
diff --git a/packages/dataviews/src/view-actions.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
similarity index 91%
rename from packages/dataviews/src/view-actions.tsx
rename to packages/dataviews/src/components/dataviews-view-config/index.tsx
index 0493cfb5efea1f..6dca75fbe057a4 100644
--- a/packages/dataviews/src/view-actions.tsx
+++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -12,16 +12,17 @@ import {
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
-import { memo } from '@wordpress/element';
+import { memo, useContext } from '@wordpress/element';
 import { cog } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import { unlock } from './lock-unlock';
-import { SORTING_DIRECTIONS, sortLabels } from './constants';
-import { VIEW_LAYOUTS, getMandatoryFields } from './layouts';
-import type { NormalizedField, View, SupportedLayouts } from './types';
+import { unlock } from '../../lock-unlock';
+import { SORTING_DIRECTIONS, sortLabels } from '../../constants';
+import { VIEW_LAYOUTS, getMandatoryFields } from '../../layouts';
+import type { NormalizedField, View, SupportedLayouts } from '../../types';
+import DataViewsContext from '../dataviews-context';
 
 const {
 	DropdownMenuV2: DropdownMenu,
@@ -55,10 +56,7 @@ interface SortMenuProps< Item > {
 	onChangeView: ( view: View ) => void;
 }
 
-interface ViewActionsProps< Item > {
-	fields: NormalizedField< Item >[];
-	view: View;
-	onChangeView: ( view: View ) => void;
+interface ViewActionsProps {
 	defaultLayouts?: SupportedLayouts;
 }
 
@@ -282,12 +280,8 @@ function SortMenu< Item >( {
 	);
 }
 
-function _ViewActions< Item >( {
-	fields,
-	view,
-	onChangeView,
-	defaultLayouts,
-}: ViewActionsProps< Item > ) {
+function _DataViewsViewConfig( { defaultLayouts }: ViewActionsProps ) {
+	const { view, fields, onChangeView } = useContext( DataViewsContext );
 	const activeView = VIEW_LAYOUTS.find( ( v ) => view.type === v.type );
 	return (
 		<>
@@ -345,7 +339,6 @@ function _ViewActions< Item >( {
 	);
 }
 
-// A type assertion is used here to keep the type argument.
-const ViewActions = memo( _ViewActions ) as typeof _ViewActions;
+const DataViewsViewConfig = memo( _DataViewsViewConfig );
 
-export default ViewActions;
+export default DataViewsViewConfig;
diff --git a/packages/dataviews/src/components/dataviews/index.tsx b/packages/dataviews/src/components/dataviews/index.tsx
new file mode 100644
index 00000000000000..618e04773c084e
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews/index.tsx
@@ -0,0 +1,123 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalHStack as HStack } from '@wordpress/components';
+import { useMemo, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { default as DataViewsBulkActions } from '../dataviews-bulk-actions';
+import DataViewsBulkActionsToolbar from '../dataviews-bulk-actions-toolbar';
+import DataViewsContext from '../dataviews-context';
+import DataViewsFilters from '../dataviews-filters';
+import DataViewsLayout from '../dataviews-layout';
+import DataviewsPagination from '../dataviews-pagination';
+import DataViewsSearch from '../dataviews-search';
+import DataViewsViewConfig from '../dataviews-view-config';
+import { normalizeFields } from '../../normalize-fields';
+import type { Action, Field, View, SupportedLayouts } from '../../types';
+import type { SelectionOrUpdater } from '../../private-types';
+
+type ItemWithId = { id: string };
+
+type DataViewsProps< Item > = {
+	view: View;
+	onChangeView: ( view: View ) => void;
+	fields: Field< Item >[];
+	search?: boolean;
+	searchLabel?: string;
+	actions?: Action< Item >[];
+	data: Item[];
+	isLoading?: boolean;
+	paginationInfo: {
+		totalItems: number;
+		totalPages: number;
+	};
+	defaultLayouts: SupportedLayouts;
+	selection?: string[];
+	onChangeSelection?: ( items: string[] ) => void;
+} & ( Item extends ItemWithId
+	? { getItemId?: ( item: Item ) => string }
+	: { getItemId: ( item: Item ) => string } );
+
+const defaultGetItemId = ( item: ItemWithId ) => item.id;
+
+export default function DataViews< Item >( {
+	view,
+	onChangeView,
+	fields,
+	search = true,
+	searchLabel = undefined,
+	actions = [],
+	data,
+	getItemId = defaultGetItemId,
+	isLoading = false,
+	paginationInfo,
+	defaultLayouts,
+	selection: selectionProperty,
+	onChangeSelection,
+}: DataViewsProps< Item > ) {
+	const [ selectionState, setSelectionState ] = useState< string[] >( [] );
+	const isUncontrolled =
+		selectionProperty === undefined || onChangeSelection === undefined;
+	const selection = isUncontrolled ? selectionState : selectionProperty;
+	const [ openedFilter, setOpenedFilter ] = useState< string | null >( null );
+	function setSelectionWithChange( value: SelectionOrUpdater ) {
+		const newValue =
+			typeof value === 'function' ? value( selection ) : value;
+		if ( isUncontrolled ) {
+			setSelectionState( newValue );
+		}
+		if ( onChangeSelection ) {
+			onChangeSelection( newValue );
+		}
+	}
+	const _fields = useMemo( () => normalizeFields( fields ), [ fields ] );
+	const _selection = useMemo( () => {
+		return selection.filter( ( id ) =>
+			data.some( ( item ) => getItemId( item ) === id )
+		);
+	}, [ selection, data, getItemId ] );
+
+	return (
+		<DataViewsContext.Provider
+			value={ {
+				view,
+				onChangeView,
+				fields: _fields,
+				actions,
+				data,
+				isLoading,
+				paginationInfo,
+				selection: _selection,
+				onChangeSelection: setSelectionWithChange,
+				openedFilter,
+				setOpenedFilter,
+				getItemId,
+			} }
+		>
+			<div className="dataviews-wrapper">
+				<HStack
+					alignment="top"
+					justify="start"
+					className="dataviews__view-actions"
+				>
+					<HStack
+						justify="start"
+						className="dataviews-filters__container"
+						wrap
+					>
+						{ search && <DataViewsSearch label={ searchLabel } /> }
+						<DataViewsFilters />
+					</HStack>
+					<DataViewsBulkActions />
+					<DataViewsViewConfig defaultLayouts={ defaultLayouts } />
+				</HStack>
+				<DataViewsLayout />
+				<DataviewsPagination />
+				<DataViewsBulkActionsToolbar />
+			</div>
+		</DataViewsContext.Provider>
+	);
+}
diff --git a/packages/dataviews/src/components/dataviews/style.scss b/packages/dataviews/src/components/dataviews/style.scss
new file mode 100644
index 00000000000000..6b8af6a90007dd
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews/style.scss
@@ -0,0 +1,97 @@
+.dataviews-wrapper {
+	height: 100%;
+	overflow: auto;
+	box-sizing: border-box;
+	scroll-padding-bottom: $grid-unit-80;
+	/* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
+	container: dataviews-wrapper / inline-size;
+	display: flex;
+	flex-direction: column;
+}
+
+.dataviews__view-actions {
+	box-sizing: border-box;
+	padding: $grid-unit-20 $grid-unit-60;
+	flex-shrink: 0;
+	position: sticky;
+	left: 0;
+	transition: padding ease-out 0.1s;
+	@include reduce-motion("transition");
+
+	.components-search-control {
+		.components-base-control__field {
+			max-width: 240px;
+		}
+	}
+}
+
+.dataviews-view-list__primary-field,
+.dataviews-view-grid__primary-field,
+.dataviews-view-table__primary-field {
+	font-size: $default-font-size;
+	font-weight: 500;
+	color: $gray-700;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	width: 100%;
+
+	a {
+		text-decoration: none;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		overflow: hidden;
+		display: block;
+		flex-grow: 0;
+		color: $gray-900;
+
+		&:hover {
+			color: var(--wp-admin-theme-color);
+		}
+		@include link-reset();
+	}
+
+	button.components-button.is-link {
+		text-decoration: none;
+		font-weight: inherit;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		overflow: hidden;
+		display: block;
+		width: 100%;
+		color: $gray-900;
+		&:hover {
+			color: var(--wp-admin-theme-color);
+		}
+	}
+}
+
+.dataviews-no-results,
+.dataviews-loading {
+	padding: 0 $grid-unit-60;
+	flex-grow: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: padding ease-out 0.1s;
+	@include reduce-motion("transition");
+}
+
+/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
+@container (max-width: 430px) {
+	.dataviews__view-actions {
+		padding: $grid-unit-15 $grid-unit-30;
+
+		.components-search-control {
+			.components-base-control__field {
+				max-width: 112px;
+			}
+		}
+	}
+
+	.dataviews-view-grid,
+	.dataviews-no-results,
+	.dataviews-loading {
+		padding-left: $grid-unit-30;
+		padding-right: $grid-unit-30;
+	}
+}
diff --git a/packages/dataviews/src/dataviews.tsx b/packages/dataviews/src/dataviews.tsx
deleted file mode 100644
index ecefb6f0dccdca..00000000000000
--- a/packages/dataviews/src/dataviews.tsx
+++ /dev/null
@@ -1,178 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentType } from 'react';
-
-/**
- * WordPress dependencies
- */
-import { __experimentalHStack as HStack } from '@wordpress/components';
-import { useMemo, useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import Pagination from './pagination';
-import ViewActions from './view-actions';
-import Filters from './filters';
-import Search from './search';
-import { LAYOUT_TABLE, LAYOUT_GRID } from './constants';
-import { VIEW_LAYOUTS } from './layouts';
-import {
-	default as BulkActions,
-	useSomeItemHasAPossibleBulkAction,
-} from './bulk-actions';
-import { normalizeFields } from './normalize-fields';
-import BulkActionsToolbar from './bulk-actions-toolbar';
-import type {
-	Action,
-	Field,
-	View,
-	ViewBaseProps,
-	SupportedLayouts,
-} from './types';
-import type { SelectionOrUpdater } from './private-types';
-
-type ItemWithId = { id: string };
-
-type DataViewsProps< Item > = {
-	view: View;
-	onChangeView: ( view: View ) => void;
-	fields: Field< Item >[];
-	search?: boolean;
-	searchLabel?: string;
-	actions?: Action< Item >[];
-	data: Item[];
-	isLoading?: boolean;
-	paginationInfo: {
-		totalItems: number;
-		totalPages: number;
-	};
-	defaultLayouts: SupportedLayouts;
-	selection?: string[];
-	onChangeSelection?: ( items: string[] ) => void;
-} & ( Item extends ItemWithId
-	? { getItemId?: ( item: Item ) => string }
-	: { getItemId: ( item: Item ) => string } );
-
-const defaultGetItemId = ( item: ItemWithId ) => item.id;
-
-export default function DataViews< Item >( {
-	view,
-	onChangeView,
-	fields,
-	search = true,
-	searchLabel = undefined,
-	actions = [],
-	data,
-	getItemId = defaultGetItemId,
-	isLoading = false,
-	paginationInfo,
-	defaultLayouts,
-	selection: selectionProperty,
-	onChangeSelection,
-}: DataViewsProps< Item > ) {
-	const [ selectionState, setSelectionState ] = useState< string[] >( [] );
-	const isUncontrolled =
-		selectionProperty === undefined || onChangeSelection === undefined;
-	const selection = isUncontrolled ? selectionState : selectionProperty;
-	const [ openedFilter, setOpenedFilter ] = useState< string | null >( null );
-
-	function setSelectionWithChange( value: SelectionOrUpdater ) {
-		const newValue =
-			typeof value === 'function' ? value( selection ) : value;
-		if ( isUncontrolled ) {
-			setSelectionState( newValue );
-		}
-		if ( onChangeSelection ) {
-			onChangeSelection( newValue );
-		}
-	}
-
-	const ViewComponent = VIEW_LAYOUTS.find( ( v ) => v.type === view.type )
-		?.component as ComponentType< ViewBaseProps< Item > >;
-	const _fields = useMemo( () => normalizeFields( fields ), [ fields ] );
-
-	const hasPossibleBulkAction = useSomeItemHasAPossibleBulkAction(
-		actions,
-		data
-	);
-	const _selection = useMemo( () => {
-		return selection.filter( ( id ) =>
-			data.some( ( item ) => getItemId( item ) === id )
-		);
-	}, [ selection, data, getItemId ] );
-	return (
-		<div className="dataviews-wrapper">
-			<HStack
-				alignment="top"
-				justify="start"
-				className="dataviews-filters__view-actions"
-			>
-				<HStack
-					justify="start"
-					className="dataviews-filters__container"
-					wrap
-				>
-					{ search && (
-						<Search
-							label={ searchLabel }
-							view={ view }
-							onChangeView={ onChangeView }
-						/>
-					) }
-					<Filters
-						fields={ _fields }
-						view={ view }
-						onChangeView={ onChangeView }
-						openedFilter={ openedFilter }
-						setOpenedFilter={ setOpenedFilter }
-					/>
-				</HStack>
-				{ [ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) &&
-					hasPossibleBulkAction && (
-						<BulkActions
-							actions={ actions }
-							data={ data }
-							onChangeSelection={ setSelectionWithChange }
-							selection={ _selection }
-							getItemId={ getItemId }
-						/>
-					) }
-				<ViewActions
-					fields={ _fields }
-					view={ view }
-					onChangeView={ onChangeView }
-					defaultLayouts={ defaultLayouts }
-				/>
-			</HStack>
-			<ViewComponent
-				actions={ actions }
-				data={ data }
-				fields={ _fields }
-				getItemId={ getItemId }
-				isLoading={ isLoading }
-				onChangeView={ onChangeView }
-				onChangeSelection={ setSelectionWithChange }
-				selection={ _selection }
-				setOpenedFilter={ setOpenedFilter }
-				view={ view }
-			/>
-			<Pagination
-				view={ view }
-				onChangeView={ onChangeView }
-				paginationInfo={ paginationInfo }
-			/>
-			{ [ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) &&
-				hasPossibleBulkAction && (
-					<BulkActionsToolbar
-						data={ data }
-						actions={ actions }
-						selection={ _selection }
-						onChangeSelection={ setSelectionWithChange }
-						getItemId={ getItemId }
-					/>
-				) }
-		</div>
-	);
-}
diff --git a/packages/dataviews/src/index.ts b/packages/dataviews/src/index.ts
index f4750bbbd2cd5d..8b6e53e1ff7293 100644
--- a/packages/dataviews/src/index.ts
+++ b/packages/dataviews/src/index.ts
@@ -1,5 +1,5 @@
-export { default as DataViews } from './dataviews';
+export { default as DataViews } from './components/dataviews';
+export { default as DataForm } from './components/dataform';
 export { VIEW_LAYOUTS } from './layouts';
 export { filterSortAndPaginate } from './filter-and-sort-data-view';
 export type * from './types';
-export { default as DataForm } from './dataform';
diff --git a/packages/dataviews/src/layouts/grid/index.tsx b/packages/dataviews/src/layouts/grid/index.tsx
index 7f1eda35e4a7cc..0e94843dd34e53 100644
--- a/packages/dataviews/src/layouts/grid/index.tsx
+++ b/packages/dataviews/src/layouts/grid/index.tsx
@@ -19,9 +19,9 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import ItemActions from '../../item-actions';
-import SingleSelectionCheckbox from '../../single-selection-checkbox';
-import { useHasAPossibleBulkAction } from '../../bulk-actions';
+import ItemActions from '../../components/dataviews-item-actions';
+import SingleSelectionCheckbox from '../../components/dataviews-selection-checkbox';
+import { useHasAPossibleBulkAction } from '../../components/dataviews-bulk-actions';
 import type { Action, NormalizedField, ViewGridProps } from '../../types';
 import type { SetSelection } from '../../private-types';
 
diff --git a/packages/dataviews/src/layouts/grid/style.scss b/packages/dataviews/src/layouts/grid/style.scss
new file mode 100644
index 00000000000000..9e18c82a441702
--- /dev/null
+++ b/packages/dataviews/src/layouts/grid/style.scss
@@ -0,0 +1,128 @@
+.dataviews-view-grid {
+	margin-bottom: auto;
+	grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
+	grid-template-rows: max-content;
+	padding: 0 $grid-unit-60 $grid-unit-30;
+	transition: padding ease-out 0.1s;
+	@include reduce-motion("transition");
+
+	@include break-mobile() {
+		grid-template-columns: repeat(2, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency
+	}
+
+	@include break-xlarge() {
+		grid-template-columns: repeat(3, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency
+	}
+
+	@include break-huge() {
+		grid-template-columns: repeat(4, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency
+	}
+
+	.dataviews-view-grid__card {
+		height: 100%;
+		justify-content: flex-start;
+
+		.dataviews-view-grid__title-actions {
+			padding: $grid-unit-10 0 $grid-unit-05;
+		}
+
+		.dataviews-view-grid__primary-field {
+			min-height: $grid-unit-40; // Preserve layout when there is no ellipsis button
+		}
+
+		&.is-selected {
+			.dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
+				color: $gray-900;
+			}
+		}
+	}
+
+	.dataviews-view-grid__media {
+		width: 100%;
+		min-height: 200px;
+		aspect-ratio: 1/1;
+		background-color: $gray-100;
+		border-radius: $grid-unit-05;
+		position: relative;
+
+		img {
+			object-fit: cover;
+			width: 100%;
+			height: 100%;
+		}
+
+		&::after {
+			content: "";
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.1);
+			border-radius: $grid-unit-05;
+			pointer-events: none;
+		}
+	}
+
+	.dataviews-view-grid__fields {
+		position: relative;
+		font-size: 12px;
+		line-height: 16px;
+
+		&:not(:empty) {
+			padding: 0 0 $grid-unit-15;
+		}
+
+		.dataviews-view-grid__field {
+			align-items: flex-start;
+			min-height: $grid-unit-30;
+
+			&:not(.is-column) {
+				align-items: center;
+
+				.dataviews-view-grid__field-name {
+					width: 35%;
+				}
+
+				.dataviews-view-grid__field-value {
+					width: 65%;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+				}
+			}
+
+			&.is-column {
+				& + .is-row {
+					margin-top: $grid-unit-05;
+				}
+			}
+
+			.dataviews-view-grid__field-name {
+				color: $gray-700;
+			}
+		}
+	}
+
+	.dataviews-view-grid__badge-fields {
+		&:not(:empty) {
+			padding-bottom: $grid-unit-15;
+		}
+
+		.dataviews-view-grid__field-value {
+			width: fit-content;
+			background: $gray-100;
+			padding: 0 $grid-unit-10;
+			min-height: $grid-unit-30;
+			border-radius: $radius-block-ui;
+			display: flex;
+			align-items: center;
+			font-size: 12px;
+		}
+	}
+}
+
+.dataviews-view-grid__field-value:empty,
+.dataviews-view-grid__field:empty {
+	display: none;
+}
diff --git a/packages/dataviews/src/layouts/list/index.tsx b/packages/dataviews/src/layouts/list/index.tsx
index 9cfe727c42b199..68d9f39f447f1e 100644
--- a/packages/dataviews/src/layouts/list/index.tsx
+++ b/packages/dataviews/src/layouts/list/index.tsx
@@ -33,7 +33,10 @@ import { useRegistry } from '@wordpress/data';
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
-import { ActionsDropdownMenuGroup, ActionModal } from '../../item-actions';
+import {
+	ActionsDropdownMenuGroup,
+	ActionModal,
+} from '../../components/dataviews-item-actions';
 import type { Action, NormalizedField, ViewListProps } from '../../types';
 
 interface ListViewItemProps< Item > {
diff --git a/packages/dataviews/src/layouts/list/style.scss b/packages/dataviews/src/layouts/list/style.scss
new file mode 100644
index 00000000000000..09f29a73b74d2d
--- /dev/null
+++ b/packages/dataviews/src/layouts/list/style.scss
@@ -0,0 +1,189 @@
+.dataviews-view-list {
+	margin: 0 0 auto;
+
+	li {
+		margin: 0;
+		cursor: pointer;
+		border-top: 1px solid $gray-100;
+
+		.dataviews-view-list__item-wrapper {
+			position: relative;
+			border-radius: $grid-unit-05;
+
+			> * {
+				width: 100%;
+			}
+		}
+
+		.dataviews-view-list__item-actions {
+			position: absolute;
+			top: $grid-unit-20;
+			right: 0;
+
+
+			> div {
+				height: $button-size-small;
+			}
+
+			.components-button {
+				opacity: 0;
+			}
+		}
+
+		&:has(.dataviews-view-list__fields:empty) {
+			.dataviews-view-list__item-actions {
+				top: 50%;
+				transform: translateY(-50%);
+			}
+		}
+
+		&.is-selected,
+		&.is-hovered,
+		&:focus-within {
+			.dataviews-view-list__item-actions {
+				background: #f8f8f8;
+				padding-left: $grid-unit-10;
+				margin-right: $grid-unit-30;
+				box-shadow: -12px 0 8px 0 #f8f8f8;
+
+				.components-button {
+					opacity: 1;
+					position: static;
+				}
+			}
+		}
+
+		&.is-selected {
+			.dataviews-view-list__item-actions {
+				background-color: rgb(247 248 255);
+				box-shadow: -12px 0 8px 0 rgb(247 248 255);
+			}
+		}
+
+		&.is-selected.is-selected {
+			border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
+
+			& + li {
+				border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
+			}
+		}
+
+		&:not(.is-selected) {
+			.dataviews-view-list__primary-field {
+				color: $gray-900;
+			}
+			&:hover,
+			&:focus-within {
+				color: var(--wp-admin-theme-color);
+				background-color: #f8f8f8;
+
+				.dataviews-view-list__primary-field,
+				.dataviews-view-list__fields {
+					color: var(--wp-admin-theme-color);
+				}
+			}
+		}
+
+	}
+
+	li.is-selected,
+	li.is-selected:focus-within {
+		.dataviews-view-list__item-wrapper {
+			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+			color: $gray-900;
+
+			.dataviews-view-list__primary-field,
+			.dataviews-view-list__fields {
+				color: var(--wp-admin-theme-color);
+			}
+		}
+	}
+
+	.dataviews-view-list__item {
+		padding: $grid-unit-20 $grid-unit-30;
+		width: 100%;
+		scroll-margin: $grid-unit-10 0;
+
+		&:focus-visible {
+			&::before {
+				position: absolute;
+				content: "";
+				top: calc(var(--wp-admin-border-width-focus) + 1px);
+				right: var(--wp-admin-border-width-focus);
+				bottom: var(--wp-admin-border-width-focus);
+				left: var(--wp-admin-border-width-focus);
+				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+				border-radius: $radius-block-ui;
+			}
+		}
+		.dataviews-view-list__primary-field {
+			min-height: $grid-unit-30;
+			line-height: $grid-unit-30;
+			overflow: hidden;
+		}
+	}
+
+	.dataviews-view-list__media-wrapper {
+		width: $grid-unit-05 * 13;
+		height: $grid-unit-05 * 13;
+		overflow: hidden;
+		position: relative;
+		flex-shrink: 0;
+		background-color: $gray-100;
+		border-radius: $grid-unit-05;
+
+		img {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
+
+		&::after {
+			content: "";
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.1);
+			border-radius: $grid-unit-05;
+		}
+	}
+
+	.dataviews-view-list__media-placeholder {
+		min-width: $grid-unit-40;
+		height: $grid-unit-40;
+		background-color: $gray-200;
+	}
+
+	.dataviews-view-list__field-wrapper {
+		min-height: $grid-unit-05 * 13; // Ensures title is centrally aligned when all fields are hidden
+	}
+
+	.dataviews-view-list__fields {
+		color: $gray-700;
+		display: flex;
+		gap: $grid-unit-15;
+		row-gap: $grid-unit-05;
+		flex-wrap: wrap;
+		font-size: 12px;
+
+		&:empty {
+			display: none;
+		}
+
+		.dataviews-view-list__field {
+			&:has(.dataviews-view-list__field-value:empty) {
+				display: none;
+			}
+		}
+
+		.dataviews-view-list__field-value {
+			line-height: $grid-unit-05 * 6;
+		}
+	}
+
+	& + .dataviews-pagination {
+		justify-content: space-between;
+	}
+}
diff --git a/packages/dataviews/src/layouts/table/index.tsx b/packages/dataviews/src/layouts/table/index.tsx
index d1df60578a165d..934cff9e23affa 100644
--- a/packages/dataviews/src/layouts/table/index.tsx
+++ b/packages/dataviews/src/layouts/table/index.tsx
@@ -24,13 +24,13 @@ import {
 /**
  * Internal dependencies
  */
-import SingleSelectionCheckbox from '../../single-selection-checkbox';
-import ItemActions from '../../item-actions';
+import SingleSelectionCheckbox from '../../components/dataviews-selection-checkbox';
+import ItemActions from '../../components/dataviews-item-actions';
 import { sortValues } from '../../constants';
 import {
 	useSomeItemHasAPossibleBulkAction,
 	useHasAPossibleBulkAction,
-} from '../../bulk-actions';
+} from '../../components/dataviews-bulk-actions';
 import type {
 	Action,
 	NormalizedField,
diff --git a/packages/dataviews/src/layouts/table/style.scss b/packages/dataviews/src/layouts/table/style.scss
new file mode 100644
index 00000000000000..debec8afc63745
--- /dev/null
+++ b/packages/dataviews/src/layouts/table/style.scss
@@ -0,0 +1,201 @@
+.dataviews-view-table {
+	width: 100%;
+	text-indent: 0;
+	border-color: inherit;
+	border-collapse: collapse;
+	position: relative;
+	color: $gray-700;
+	margin-bottom: auto;
+
+	a {
+		text-decoration: none;
+		color: $gray-900;
+		font-weight: 500;
+	}
+	th {
+		text-align: left;
+		color: $gray-900;
+		font-weight: normal;
+		font-size: $default-font-size;
+	}
+	td,
+	th {
+		padding: $grid-unit-15;
+		white-space: nowrap;
+
+		&.dataviews-view-table__actions-column {
+			text-align: right;
+		}
+
+		&.dataviews-view-table__checkbox-column {
+			padding-right: 0;
+		}
+	}
+	tr {
+		border-top: 1px solid $gray-100;
+
+		.dataviews-view-table-header-button {
+			gap: $grid-unit-05;
+		}
+
+		td:first-child,
+		th:first-child {
+			padding-left: $grid-unit-60;
+
+			.dataviews-view-table-header-button,
+			.dataviews-view-table-header {
+				margin-left: - #{$grid-unit-10};
+			}
+		}
+
+		td:last-child,
+		th:last-child {
+			padding-right: $grid-unit-60;
+		}
+
+		&:last-child {
+			border-bottom: 0;
+		}
+
+		&.is-hovered {
+			background-color: #f8f8f8;
+		}
+
+		.components-checkbox-control__input.components-checkbox-control__input {
+			opacity: 0;
+
+			&:checked,
+			&:indeterminate,
+			&:focus {
+				opacity: 1;
+			}
+		}
+
+		.dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
+			opacity: 0;
+		}
+
+		&:focus-within,
+		&.is-hovered,
+		&:hover {
+			.components-checkbox-control__input,
+			.dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
+				opacity: 1;
+			}
+		}
+
+		@media (hover: none) {
+			// Show checkboxes and quick-actions on devices that do not support hover.
+			.components-checkbox-control__input.components-checkbox-control__input,
+			.dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
+				opacity: 1;
+			}
+		}
+
+		&.is-ed {
+			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+			color: $gray-700;
+
+			&,
+			& + tr {
+				border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
+			}
+
+			&:hover {
+				background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
+			}
+		}
+	}
+	thead {
+		position: sticky;
+		inset-block-start: 0;
+		z-index: z-index(".dataviews-view-table thead");
+
+		tr {
+			border: 0;
+		}
+		th {
+			background-color: $white;
+			padding-top: $grid-unit-10;
+			padding-bottom: $grid-unit-10;
+			padding-left: $grid-unit-15;
+			font-size: 11px;
+			text-transform: uppercase;
+			font-weight: 500;
+
+			&:has(.dataviews-view-table-header-button):not(:first-child) {
+				padding-left: $grid-unit-05;
+			}
+		}
+	}
+	tbody {
+		td {
+			vertical-align: top;
+		}
+		.dataviews-view-table__cell-content-wrapper {
+			min-height: $grid-unit-40;
+			display: flex;
+			align-items: center;
+		}
+
+		.components-v-stack > .dataviews-view-table__cell-content-wrapper:not(:first-child) {
+			min-height: 0;
+		}
+	}
+	.dataviews-view-table-header-button {
+		padding: $grid-unit-05 $grid-unit-10;
+		font-size: 11px;
+		text-transform: uppercase;
+		font-weight: 500;
+
+		&:not(:hover) {
+			color: $gray-900;
+		}
+
+		span {
+			speak: none;
+
+			&:empty {
+				display: none;
+			}
+		}
+	}
+
+	.dataviews-view-table-header {
+		padding-left: $grid-unit-05;
+	}
+
+	.dataviews-view-table__actions-column {
+		width: 1%;
+	}
+
+	&:has(tr.is-selected) {
+		.components-checkbox-control__input {
+			opacity: 1;
+		}
+	}
+}
+
+.dataviews-view-table__cell-content-wrapper:empty {
+	display: none;
+}
+
+/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
+@container (max-width: 430px) {
+	.dataviews-view-table tr td:first-child,
+	.dataviews-view-table tr th:first-child {
+		padding-left: $grid-unit-30;
+	}
+
+	.dataviews-view-table tr td:last-child,
+	.dataviews-view-table tr th:last-child {
+		padding-right: $grid-unit-30;
+	}
+}
+
+.dataviews-view-table-selection-checkbox {
+	--checkbox-input-size: 24px;
+	@include break-small() {
+		--checkbox-input-size: 16px;
+	}
+}
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index ce0e4c812ff03a..49d897d9cc4d97 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -1,951 +1,11 @@
-.dataviews-wrapper {
-	height: 100%;
-	overflow: auto;
-	box-sizing: border-box;
-	scroll-padding-bottom: $grid-unit-80;
-	/* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
-	container: dataviews-wrapper / inline-size;
-	display: flex;
-	flex-direction: column;
-}
-
-.dataviews-filters__view-actions {
-	box-sizing: border-box;
-	padding: $grid-unit-20 $grid-unit-60;
-	flex-shrink: 0;
-	position: sticky;
-	left: 0;
-	transition: padding ease-out 0.1s;
-	@include reduce-motion("transition");
-
-	.components-search-control {
-		.components-base-control__field {
-			max-width: 240px;
-		}
-	}
-}
-
-.dataviews-filters__container {
-	.dataviews-filters__reset-button[aria-disabled="true"] {
-		&,
-		&:hover {
-			opacity: 0;
-		}
-
-		&:focus {
-			opacity: 1;
-		}
-	}
-}
-
-.dataviews-filters-button {
-	position: relative;
-}
-
-.dataviews-pagination {
-	position: sticky;
-	bottom: 0;
-	left: 0;
-	background-color: $white;
-	padding: $grid-unit-15 $grid-unit-60;
-	border-top: $border-width solid $gray-100;
-	color: $gray-700;
-	flex-shrink: 0;
-	transition: padding ease-out 0.1s;
-	@include reduce-motion("transition");
-}
-
-.dataviews-pagination__page-selection {
-	font-size: 11px;
-	text-transform: uppercase;
-	font-weight: 500;
-	color: $gray-900;
-}
-
-.dataviews-filters-options {
-	margin: $grid-unit-40 0 $grid-unit-20;
-}
-
-.dataviews-view-table {
-	width: 100%;
-	text-indent: 0;
-	border-color: inherit;
-	border-collapse: collapse;
-	position: relative;
-	color: $gray-700;
-	margin-bottom: auto;
-
-	a {
-		text-decoration: none;
-		color: $gray-900;
-		font-weight: 500;
-	}
-	th {
-		text-align: left;
-		color: $gray-900;
-		font-weight: normal;
-		font-size: $default-font-size;
-	}
-	td,
-	th {
-		padding: $grid-unit-15;
-		white-space: nowrap;
-
-		&.dataviews-view-table__actions-column {
-			text-align: right;
-		}
-
-		&.dataviews-view-table__checkbox-column {
-			padding-right: 0;
-		}
-	}
-	tr {
-		border-top: 1px solid $gray-100;
-
-		.dataviews-view-table-header-button {
-			gap: $grid-unit-05;
-		}
-
-		td:first-child,
-		th:first-child {
-			padding-left: $grid-unit-60;
-
-			.dataviews-view-table-header-button,
-			.dataviews-view-table-header {
-				margin-left: - #{$grid-unit-10};
-			}
-		}
-
-		td:last-child,
-		th:last-child {
-			padding-right: $grid-unit-60;
-		}
-
-		&:last-child {
-			border-bottom: 0;
-		}
-
-		&.is-hovered {
-			background-color: #f8f8f8;
-		}
-
-		.components-checkbox-control__input.components-checkbox-control__input {
-			opacity: 0;
-
-			&:checked,
-			&:indeterminate,
-			&:focus {
-				opacity: 1;
-			}
-		}
-
-		.dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
-			opacity: 0;
-		}
-
-		&:focus-within,
-		&.is-hovered,
-		&:hover {
-			.components-checkbox-control__input,
-			.dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
-				opacity: 1;
-			}
-		}
-
-		@media (hover: none) {
-			// Show checkboxes and quick-actions on devices that do not support hover.
-			.components-checkbox-control__input.components-checkbox-control__input,
-			.dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
-				opacity: 1;
-			}
-		}
-
-		&.is-selected {
-			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
-			color: $gray-700;
-
-			&,
-			& + tr {
-				border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
-			}
-
-			&:hover {
-				background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
-			}
-		}
-	}
-	thead {
-		position: sticky;
-		inset-block-start: 0;
-		z-index: z-index(".dataviews-view-table thead");
-
-		tr {
-			border: 0;
-		}
-		th {
-			background-color: $white;
-			padding-top: $grid-unit-10;
-			padding-bottom: $grid-unit-10;
-			padding-left: $grid-unit-15;
-			font-size: 11px;
-			text-transform: uppercase;
-			font-weight: 500;
-
-			&:has(.dataviews-view-table-header-button):not(:first-child) {
-				padding-left: $grid-unit-05;
-			}
-		}
-	}
-	tbody {
-		td {
-			vertical-align: top;
-		}
-		.dataviews-view-table__cell-content-wrapper {
-			min-height: $grid-unit-40;
-			display: flex;
-			align-items: center;
-		}
-
-		.components-v-stack > .dataviews-view-table__cell-content-wrapper:not(:first-child) {
-			min-height: 0;
-		}
-	}
-	.dataviews-view-table-header-button {
-		padding: $grid-unit-05 $grid-unit-10;
-		font-size: 11px;
-		text-transform: uppercase;
-		font-weight: 500;
-
-		&:not(:hover) {
-			color: $gray-900;
-		}
-
-		span {
-			speak: none;
-
-			&:empty {
-				display: none;
-			}
-		}
-	}
-
-	.dataviews-view-table-header {
-		padding-left: $grid-unit-05;
-	}
-
-	.dataviews-view-table__actions-column {
-		width: 1%;
-	}
-
-	&:has(tr.is-selected) {
-		.components-checkbox-control__input {
-			opacity: 1;
-		}
-	}
-}
-
-.dataviews-view-table__cell-content-wrapper:empty,
-.dataviews-view-grid__field-value:empty,
-.dataviews-view-grid__field:empty {
-	display: none;
-}
-
-.dataviews-view-list__primary-field,
-.dataviews-view-grid__primary-field,
-.dataviews-view-table__primary-field {
-	font-size: $default-font-size;
-	font-weight: 500;
-	color: $gray-700;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	width: 100%;
-
-	a {
-		text-decoration: none;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		overflow: hidden;
-		display: block;
-		flex-grow: 0;
-		color: $gray-900;
-
-		&:hover {
-			color: var(--wp-admin-theme-color);
-		}
-		@include link-reset();
-	}
-
-	button.components-button.is-link {
-		text-decoration: none;
-		font-weight: inherit;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		overflow: hidden;
-		display: block;
-		width: 100%;
-		color: $gray-900;
-		&:hover {
-			color: var(--wp-admin-theme-color);
-		}
-	}
-}
-
-.dataviews-view-grid {
-	margin-bottom: auto;
-	grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
-	grid-template-rows: max-content;
-	padding: 0 $grid-unit-60 $grid-unit-30;
-	transition: padding ease-out 0.1s;
-	@include reduce-motion("transition");
-
-	@include break-mobile() {
-		grid-template-columns: repeat(2, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency
-	}
-
-	@include break-xlarge() {
-		grid-template-columns: repeat(3, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency
-	}
-
-	@include break-huge() {
-		grid-template-columns: repeat(4, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency
-	}
-
-	.dataviews-view-grid__card {
-		height: 100%;
-		justify-content: flex-start;
-
-		.dataviews-view-grid__title-actions {
-			padding: $grid-unit-10 0 $grid-unit-05;
-		}
-
-		.dataviews-view-grid__primary-field {
-			min-height: $grid-unit-40; // Preserve layout when there is no ellipsis button
-		}
-
-		&.is-selected {
-			.dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
-				color: $gray-900;
-			}
-		}
-	}
-
-	.dataviews-view-grid__media {
-		width: 100%;
-		min-height: 200px;
-		aspect-ratio: 1/1;
-		background-color: $gray-100;
-		border-radius: $grid-unit-05;
-		position: relative;
-
-		img {
-			object-fit: cover;
-			width: 100%;
-			height: 100%;
-		}
-
-		&::after {
-			content: "";
-			position: absolute;
-			top: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-			box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.1);
-			border-radius: $grid-unit-05;
-			pointer-events: none;
-		}
-	}
-
-	.dataviews-view-grid__fields {
-		position: relative;
-		font-size: 12px;
-		line-height: 16px;
-
-		&:not(:empty) {
-			padding: 0 0 $grid-unit-15;
-		}
-
-		.dataviews-view-grid__field {
-			align-items: flex-start;
-			min-height: $grid-unit-30;
-
-			&:not(.is-column) {
-				align-items: center;
-
-				.dataviews-view-grid__field-name {
-					width: 35%;
-				}
-
-				.dataviews-view-grid__field-value {
-					width: 65%;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					white-space: nowrap;
-				}
-			}
-
-			&.is-column {
-				& + .is-row {
-					margin-top: $grid-unit-05;
-				}
-			}
-
-			.dataviews-view-grid__field-name {
-				color: $gray-700;
-			}
-		}
-	}
-
-	.dataviews-view-grid__badge-fields {
-		&:not(:empty) {
-			padding-bottom: $grid-unit-15;
-		}
-
-		.dataviews-view-grid__field-value {
-			width: fit-content;
-			background: $gray-100;
-			padding: 0 $grid-unit-10;
-			min-height: $grid-unit-30;
-			border-radius: $radius-block-ui;
-			display: flex;
-			align-items: center;
-			font-size: 12px;
-		}
-	}
-}
-
-.dataviews-view-list {
-	margin: 0 0 auto;
-
-	li {
-		margin: 0;
-		cursor: pointer;
-		border-top: 1px solid $gray-100;
-
-		.dataviews-view-list__item-wrapper {
-			position: relative;
-			border-radius: $grid-unit-05;
-
-			> * {
-				width: 100%;
-			}
-		}
-
-		.dataviews-view-list__item-actions {
-			position: absolute;
-			top: $grid-unit-20;
-			right: 0;
-
-
-			> div {
-				height: $button-size-small;
-			}
-
-			.components-button {
-				opacity: 0;
-			}
-		}
-
-		&:has(.dataviews-view-list__fields:empty) {
-			.dataviews-view-list__item-actions {
-				top: 50%;
-				transform: translateY(-50%);
-			}
-		}
-
-		&.is-selected,
-		&.is-hovered,
-		&:focus-within {
-			.dataviews-view-list__item-actions {
-				background: #f8f8f8;
-				padding-left: $grid-unit-10;
-				margin-right: $grid-unit-30;
-				box-shadow: -12px 0 8px 0 #f8f8f8;
-
-				.components-button {
-					opacity: 1;
-					position: static;
-				}
-			}
-		}
-
-		&.is-selected {
-			.dataviews-view-list__item-actions {
-				background-color: rgb(247 248 255);
-				box-shadow: -12px 0 8px 0 rgb(247 248 255);
-			}
-		}
-
-		&.is-selected.is-selected {
-			border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
-
-			& + li {
-				border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
-			}
-		}
-
-		&:not(.is-selected) {
-			.dataviews-view-list__primary-field {
-				color: $gray-900;
-			}
-			&:hover,
-			&:focus-within {
-				color: var(--wp-admin-theme-color);
-				background-color: #f8f8f8;
-
-				.dataviews-view-list__primary-field,
-				.dataviews-view-list__fields {
-					color: var(--wp-admin-theme-color);
-				}
-			}
-		}
-
-	}
-
-	li.is-selected,
-	li.is-selected:focus-within {
-		.dataviews-view-list__item-wrapper {
-			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
-			color: $gray-900;
-
-			.dataviews-view-list__primary-field,
-			.dataviews-view-list__fields {
-				color: var(--wp-admin-theme-color);
-			}
-		}
-	}
-
-	.dataviews-view-list__item {
-		padding: $grid-unit-20 $grid-unit-30;
-		width: 100%;
-		scroll-margin: $grid-unit-10 0;
-
-		&:focus-visible {
-			&::before {
-				position: absolute;
-				content: "";
-				top: calc(var(--wp-admin-border-width-focus) + 1px);
-				right: var(--wp-admin-border-width-focus);
-				bottom: var(--wp-admin-border-width-focus);
-				left: var(--wp-admin-border-width-focus);
-				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-				border-radius: $radius-block-ui;
-			}
-		}
-		.dataviews-view-list__primary-field {
-			min-height: $grid-unit-30;
-			line-height: $grid-unit-30;
-			overflow: hidden;
-		}
-	}
-
-	.dataviews-view-list__media-wrapper {
-		width: $grid-unit-05 * 13;
-		height: $grid-unit-05 * 13;
-		overflow: hidden;
-		position: relative;
-		flex-shrink: 0;
-		background-color: $gray-100;
-		border-radius: $grid-unit-05;
-
-		img {
-			width: 100%;
-			height: 100%;
-			object-fit: cover;
-		}
-
-		&::after {
-			content: "";
-			position: absolute;
-			top: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-			box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.1);
-			border-radius: $grid-unit-05;
-		}
-	}
-
-	.dataviews-view-list__media-placeholder {
-		min-width: $grid-unit-40;
-		height: $grid-unit-40;
-		background-color: $gray-200;
-	}
-
-	.dataviews-view-list__field-wrapper {
-		min-height: $grid-unit-05 * 13; // Ensures title is centrally aligned when all fields are hidden
-	}
-
-	.dataviews-view-list__fields {
-		color: $gray-700;
-		display: flex;
-		gap: $grid-unit-15;
-		row-gap: $grid-unit-05;
-		flex-wrap: wrap;
-		font-size: 12px;
-
-		&:empty {
-			display: none;
-		}
-
-		.dataviews-view-list__field {
-			&:has(.dataviews-view-list__field-value:empty) {
-				display: none;
-			}
-		}
-
-		.dataviews-view-list__field-value {
-			line-height: $grid-unit-05 * 6;
-		}
-	}
-
-	& + .dataviews-pagination {
-		justify-content: space-between;
-	}
-
-}
-
-.dataviews-action-modal {
-	z-index: z-index(".dataviews-action-modal");
-}
-
-.dataviews-no-results,
-.dataviews-loading {
-	padding: 0 $grid-unit-60;
-	flex-grow: 1;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	transition: padding ease-out 0.1s;
-	@include reduce-motion("transition");
-}
-
-.dataviews-view-table-selection-checkbox {
-	// Experimental override for CheckboxControl size (fragile)
-	--checkbox-input-size: 24px;
-	@include break-small() {
-		--checkbox-input-size: 16px;
-	}
-
-	line-height: 0;
-	flex-shrink: 0;
-
-	.components-checkbox-control__input-container {
-		margin: 0;
-	}
-}
-
-.dataviews-bulk-edit-button.components-button {
-	flex-shrink: 0;
-}
-
-.dataviews-filter-summary__popover {
-	.components-popover__content {
-		width: 230px;
-		padding: 0;
-		border-radius: $grid-unit-05;
-	}
-}
-
-.dataviews-search-widget-filter-combobox-list {
-	max-height: $grid-unit * 23;
-	padding: $grid-unit-05;
-	overflow: auto;
-	border-top: 1px solid $gray-200;
-
-	.dataviews-search-widget-filter-combobox-item-value {
-		[data-user-value] {
-			font-weight: 600;
-		}
-	}
-}
-
-.dataviews-search-widget-listbox {
-	max-height: $grid-unit * 23;
-	padding: $grid-unit-05;
-	overflow: auto;
-}
-
-.dataviews-search-widget-listitem {
-	display: flex;
-	align-items: center;
-	gap: $grid-unit-10;
-	border-radius: $radius-block-ui;
-	box-sizing: border-box;
-	padding: $grid-unit-10 $grid-unit-15;
-	cursor: default;
-	margin-block-end: 2px;
-
-	&:last-child {
-		margin-block-end: 0;
-	}
-
-	&:hover,
-	&[data-active-item],
-	&:focus {
-		background-color: var(--wp-admin-theme-color);
-		color: $white;
-
-		.dataviews-search-widget-listitem-check {
-			fill: $white;
-		}
-
-		.dataviews-search-widget-listitem-description {
-			color: $white;
-		}
-	}
-
-	.dataviews-search-widget-listitem-check {
-		width: 24px;
-		height: 24px;
-		flex-shrink: 0;
-	}
-
-	.dataviews-search-widget-listitem-description {
-		display: block;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		font-size: $helptext-font-size;
-		line-height: 16px;
-		color: $gray-700;
-	}
-}
-
-.dataviews-search-widget-filter-combobox__wrapper {
-	position: relative;
-	padding: $grid-unit-10;
-
-	.dataviews-search-widget-filter-combobox__input {
-		@include input-control;
-		display: block;
-		padding: 0 $grid-unit-40 0 $grid-unit-10;
-		background: $gray-100;
-		border: none;
-		width: 100%;
-		height: $grid-unit-40;
-
-		// Unset inherited values.
-		margin-left: 0;
-		margin-right: 0;
-
-		/* Fonts smaller than 16px causes mobile safari to zoom. */
-		font-size: $mobile-text-min-font-size;
-		@include break-small {
-			font-size: $default-font-size;
-		}
-
-		&:focus {
-			background: $white;
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-		}
-
-		&::placeholder {
-			color: $gray-700;
-		}
-
-		&::-webkit-search-decoration,
-		&::-webkit-search-cancel-button,
-		&::-webkit-search-results-button,
-		&::-webkit-search-results-decoration {
-			-webkit-appearance: none;
-		}
-	}
-
-	.dataviews-search-widget-filter-combobox__icon {
-		position: absolute;
-		right: $grid-unit-15;
-		top: 50%;
-		transform: translateY(-50%);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: $icon-size;
-	}
-}
-
-.dataviews-filter-summary__operators-container {
-	padding: $grid-unit-10 $grid-unit-10 0;
-
-	&:has(+ .dataviews-search-widget-listbox) {
-		border-bottom: 1px solid $gray-200;
-		padding-bottom: $grid-unit-10;
-	}
-
-	&:empty {
-		display: none;
-	}
-
-	.dataviews-filter-summary__operators-filter-name {
-		color: $gray-700;
-	}
-}
-
-.dataviews-filter-summary__chip-container {
-	position: relative;
-	white-space: pre-wrap;
-
-	.dataviews-filter-summary__chip {
-		border-radius: $grid-unit-20;
-		border: 1px solid transparent;
-		cursor: pointer;
-		padding: $grid-unit-05 $grid-unit-15;
-		min-height: $grid-unit-40;
-		background: $gray-100;
-		color: $gray-800;
-		position: relative;
-		display: flex;
-		align-items: center;
-
-		&.has-reset {
-			padding-inline-end: $button-size-small + $grid-unit-05;
-		}
-
-		&:hover,
-		&:focus-visible,
-		&[aria-expanded="true"] {
-			background: $gray-200;
-			color: $gray-900;
-		}
-
-		&.has-values {
-			color: var(--wp-admin-theme-color);
-			background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
-
-			&:hover,
-			&[aria-expanded="true"] {
-				background: rgba(var(--wp-admin-theme-color--rgb), 0.12);
-			}
-		}
-
-		&:focus-visible {
-			outline: none;
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-		}
-
-		.dataviews-filter-summary__filter-text-name {
-			font-weight: 500;
-		}
-	}
-
-	.dataviews-filter-summary__chip-remove {
-		width: $icon-size;
-		height: $icon-size;
-		border-radius: 50%;
-		border: 0;
-		padding: 0;
-		position: absolute;
-		right: $grid-unit-05;
-		top: 50%;
-		transform: translateY(-50%);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		background: transparent;
-		cursor: pointer;
-
-		svg {
-			fill: $gray-700;
-		}
-
-		&:hover,
-		&:focus {
-			background: $gray-200;
-			svg {
-				fill: $gray-900;
-			}
-		}
-
-		&.has-values {
-			svg {
-				fill: var(--wp-admin-theme-color);
-			}
-			&:hover {
-				background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
-			}
-		}
-
-		&:focus-visible {
-			outline: none;
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-		}
-	}
-}
-
-/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
-@container (max-width: 430px) {
-	.dataviews-pagination,
-	.dataviews-filters__view-actions {
-		padding: $grid-unit-15 $grid-unit-30;
-	}
-
-	.dataviews-filters__view-actions {
-		.components-search-control {
-			.components-base-control__field {
-				max-width: 112px;
-			}
-		}
-	}
-
-	.dataviews-view-table tr td:first-child,
-	.dataviews-view-table tr th:first-child {
-		padding-left: $grid-unit-30;
-	}
-
-	.dataviews-view-table tr td:last-child,
-	.dataviews-view-table tr th:last-child {
-		padding-right: $grid-unit-30;
-	}
-
-	.dataviews-view-grid,
-	.dataviews-no-results,
-	.dataviews-loading {
-		padding-left: $grid-unit-30;
-		padding-right: $grid-unit-30;
-	}
-}
-
-.dataviews-bulk-actions-toolbar-wrapper {
-	display: flex;
-	flex-grow: 1;
-	width: 100%;
-
-	.components-toolbar-group {
-		align-items: center;
-	}
-
-	.components-button.is-busy {
-		max-height: $button-size;
-	}
-}
-
-.dataviews-bulk-actions {
-	position: sticky;
-	display: flex;
-	flex-direction: column;
-	align-content: center;
-	flex-wrap: wrap;
-	width: fit-content;
-	margin-left: auto;
-	margin-right: auto;
-	bottom: $grid-unit-30;
-	z-index: z-index(".dataviews-bulk-actions");
-
-	.components-accessible-toolbar {
-		border-color: $gray-300;
-		box-shadow: $shadow-popover;
-
-		.components-toolbar-group {
-			border-color: $gray-200;
-
-			&:last-child {
-				border: 0;
-			}
-		}
-	}
-
-	.dataviews-bulk-actions__selection-count {
-		display: flex;
-		align-items: center;
-		margin: 0 $grid-unit-10 0 $grid-unit-10;
-	}
-}
+@import "./components/dataviews/style.scss";
+@import "./components/dataviews-bulk-actions/style.scss";
+@import "./components/dataviews-bulk-actions-toolbar/style.scss";
+@import "./components/dataviews-filters/style.scss";
+@import "./components/dataviews-pagination/style.scss";
+@import "./components/dataviews-item-actions/style.scss";
+@import "./components/dataviews-selection-checkbox/style.scss";
+
+@import "./layouts/grid/style.scss";
+@import "./layouts/list/style.scss";
+@import "./layouts/table/style.scss";