@mui/x-data-grid-premium 8.27.0 → 8.27.2

package/CHANGELOG.md

@@ -5,6 +5,131 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.27.2
+
+_Feb 20, 2026_
+
+We'd like to extend a big thank you to the 3 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.27.2`
+
+Internal changes.
+
+#### `@mui/x-data-grid-pro@8.27.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.27.2`, plus:
+
+- [DataGridPro] Fix number input visibility in header filters (#21345) @michelengelen
+
+#### `@mui/x-data-grid-premium@8.27.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.27.2`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.27.2`
+
+- [DatePicker] Add keyboard support for selecting day, month, and year (#21399) @michelengelen
+
+#### `@mui/x-date-pickers-pro@8.27.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.27.2`, plus:
+
+- [DateRangePicker] Fix timezone update issue leading to `invalidRange` error (#21382) @michelengelen
+
+### Charts
+
+#### `@mui/x-charts@8.27.2`
+
+Internal changes.
+
+#### `@mui/x-charts-pro@8.27.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.27.2`, plus:
+
+- [charts-pro] Handle edge case in export image (#21206) @bernardobelchior
+
+#### `@mui/x-charts-premium@8.27.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@8.27.2`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.27.2`
+
+- [tree view] Focus item sibling on unmount instead of the 1st item (#21386) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.27.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.27.2`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.27.2`
+
+Internal changes.
+
+### Core
+
+- [code-infra] Only ignore `renovate[bot]` in changelog generation script (#21188) @bernardobelchior
+
+## v8.27.1
+
+<!-- generated comparing v8.27.0..v8.x -->
+
+_Feb 13, 2026_
+
+We'd like to extend a big thank you to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 📝 CSS bundler support is no longer needed for the Data Grid
+- 🐞 Bugfixes
+
+Special thanks go out to these community members for their valuable contributions:
+@sai6855
+
+The following team members contributed to this release:
+@arminmeh, @cherniavskii, @flaviendelangle, @mj12albert, @MBilalShafi
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.27.1`
+
+- [DataGrid] Hide column menu icon when there are no items (#21303) @MBilalShafi
+- [DataGrid] Migrate styled imports and remove `index.css` (#21176) @MBilalShafi
+- [DataGrid] Optimize `GridRootStyles` overrides resolver (#21251) @sai6855
+
+#### `@mui/x-data-grid-pro@8.27.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.27.1`, plus:
+
+- [DataGridPro] Fix column pinning issue with `restoreState` (#21305) @MBilalShafi
+- [DataGridPro] Fix lazy loading params for page with one row (#21238) @MBilalShafi
+- [DataGridPro] Properly extract parent path (#21301) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.27.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.27.1`, plus:
+
+- [DataGridPremium] Fix aggregation display when `initialState` has both `sortModel` and `pinnedColumns` (#21152) @mj12albert
+
+### Tree View
+
+#### `@mui/x-tree-view@8.27.1`
+
+- [tree view] Fix `apiRef.current.setItemExpansion()` (#21095) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.27.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.27.1`.
+
+### Core
+
+- [internal] Add CLI for translation using LLM (#21299) @cherniavskii
+
 ## v8.27.0
 
 _Feb 2, 2026_

package/DataGridPremium/DataGridPremium.js

@@ -50,7 +50,7 @@ const configuration = {
     useGridParamsOverridableMethods: _useGridParamsOverridableMethods.useGridParamsOverridableMethods
   }
 };
-const releaseInfo = "MTc2OTk5MDQwMDAwMA==";
+const releaseInfo = "MTc3MTU0NTYwMDAwMA==";
 const watermark = /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
   packageName: "x-data-grid-premium",
   releaseInfo: releaseInfo

package/components/GridBottomContainer.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _system = require("@mui/system");
+var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _useGridPrivateApiContext = require("../hooks/utils/useGridPrivateApiContext");
@@ -25,7 +25,7 @@ const useUtilityClasses = () => {
   };
   return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, {});
 };
-const Element = (0, _system.styled)('div', {
+const Element = (0, _styles.styled)('div', {
   slot: 'internal',
   shouldForwardProp: undefined
 })({

package/components/GridPremiumColumnMenu.d.ts

@@ -1,4 +1,5 @@
-import { type GridColumnMenuProps, type GridColumnMenuItemProps } from '@mui/x-data-grid-pro';
+import { type GridColumnMenuItemProps } from '@mui/x-data-grid-pro';
+import type { GridColumnMenuComponent } from '@mui/x-data-grid-pro/internals';
 import { GridColumnMenuAggregationItem } from "./columnMenu/menuItems/GridColumnMenuAggregationItem.js";
 import { GridColumnMenuManagePanelItem } from "./columnMenu/menuItems/GridColumnMenuManagePanelItem.js";
 export declare function GridColumnMenuGroupingItem(props: GridColumnMenuItemProps): import("react/jsx-runtime").JSX.Element;
@@ -34,4 +35,4 @@ export declare const GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM: {
     displayOrder: number;
   };
 };
-export declare const GridPremiumColumnMenu: import("react").ForwardRefExoticComponent<GridColumnMenuProps> | import("react").ForwardRefExoticComponent<GridColumnMenuProps & import("react").RefAttributes<HTMLUListElement>>;
+export declare const GridPremiumColumnMenu: GridColumnMenuComponent;

package/components/GridPremiumColumnMenu.js

@@ -49,4 +49,6 @@ const GridPremiumColumnMenu = exports.GridPremiumColumnMenu = (0, _forwardRef.fo
     ref: ref
   }));
 });
-if (process.env.NODE_ENV !== "production") GridPremiumColumnMenu.displayName = "GridPremiumColumnMenu";
+if (process.env.NODE_ENV !== "production") GridPremiumColumnMenu.displayName = "GridPremiumColumnMenu";
+GridPremiumColumnMenu.defaultSlots = GRID_COLUMN_MENU_SLOTS_PREMIUM;
+GridPremiumColumnMenu.defaultSlotProps = GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM;

package/components/aiAssistantPanel/GridAiAssistantPanel.js

@@ -11,7 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _internals = require("@mui/x-data-grid-pro/internals");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _system = require("@mui/system");
+var _styles = require("@mui/material/styles");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridAiAssistantSelectors = require("../../hooks/features/aiAssistant/gridAiAssistantSelectors");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
@@ -36,7 +36,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
 };
-const AiAssistantPanelRoot = (0, _system.styled)('div', {
+const AiAssistantPanelRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'AiAssistantPanel'
 })({
@@ -45,7 +45,7 @@ const AiAssistantPanelRoot = (0, _system.styled)('div', {
   maxHeight: 'none',
   overflow: 'hidden'
 });
-const AiAssistantPanelHeader = (0, _system.styled)('div', {
+const AiAssistantPanelHeader = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'AiAssistantPanelHeader'
 })({
@@ -58,7 +58,7 @@ const AiAssistantPanelHeader = (0, _system.styled)('div', {
   height: 52,
   padding: _internals.vars.spacing(0, 0.75, 0, 2)
 });
-const AiAssistantPanelTitleContainer = (0, _system.styled)('div', {
+const AiAssistantPanelTitleContainer = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'AiAssistantPanelTitleContainer'
 })({
@@ -67,7 +67,7 @@ const AiAssistantPanelTitleContainer = (0, _system.styled)('div', {
   flex: 1,
   overflow: 'hidden'
 });
-const AiAssistantPanelTitle = (0, _system.styled)('span', {
+const AiAssistantPanelTitle = (0, _styles.styled)('span', {
   name: 'MuiDataGrid',
   slot: 'AiAssistantPanelTitle'
 })({
@@ -75,7 +75,7 @@ const AiAssistantPanelTitle = (0, _system.styled)('span', {
   fontWeight: _internals.vars.typography.fontWeight.medium,
   marginTop: _internals.vars.spacing(0.25)
 });
-const AiAssistantPanelConversationTitle = (0, _system.styled)('span', {
+const AiAssistantPanelConversationTitle = (0, _styles.styled)('span', {
   name: 'MuiDataGrid',
   slot: 'AiAssistantPanelConversationTitle'
 })({
@@ -86,7 +86,7 @@ const AiAssistantPanelConversationTitle = (0, _system.styled)('span', {
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
-const AiAssistantPanelBody = (0, _system.styled)('div', {
+const AiAssistantPanelBody = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'AiAssistantPanelBody'
 })({
@@ -97,14 +97,14 @@ const AiAssistantPanelBody = (0, _system.styled)('div', {
   justifyContent: 'center',
   alignItems: 'center'
 });
-const AiAssistantPanelEmptyText = (0, _system.styled)('span', {
+const AiAssistantPanelEmptyText = (0, _styles.styled)('span', {
   name: 'MuiDataGrid',
   slot: 'AiAssistantPanelEmptyText'
 })({
   font: _internals.vars.typography.font.body,
   color: _internals.vars.colors.foreground.muted
 });
-const AiAssistantPanelFooter = (0, _system.styled)('div', {
+const AiAssistantPanelFooter = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'AiAssistantPanelFooter'
 })({

package/components/aiAssistantPanel/GridAiAssistantPanelConversation.js

@@ -11,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _system = require("@mui/system");
+var _styles = require("@mui/material/styles");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _prompt = require("../prompt");
@@ -26,14 +26,14 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
 };
-const AiAssistantPanelConversationRoot = (0, _system.styled)(_xDataGridPro.GridShadowScrollArea, {
+const AiAssistantPanelConversationRoot = (0, _styles.styled)(_xDataGridPro.GridShadowScrollArea, {
   name: 'MuiDataGrid',
   slot: 'AiAssistantPanelConversation'
 })({
   flexShrink: 0,
   height: '100%'
 });
-const AiAssistantPanelConversationList = (0, _system.styled)('ol', {
+const AiAssistantPanelConversationList = (0, _styles.styled)('ol', {
   name: 'MuiDataGrid',
   slot: 'AiAssistantPanelConversationList'
 })({

package/components/aiAssistantPanel/GridAiAssistantPanelSuggestions.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridAiAssistantPanelSuggestions = GridAiAssistantPanelSuggestions;
 var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _system = require("@mui/system");
+var _styles = require("@mui/material/styles");
 var _internals = require("@mui/x-data-grid-pro/internals");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
@@ -24,7 +24,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
 };
-const AiAssistantPanelSuggestionsRoot = (0, _system.styled)('div', {
+const AiAssistantPanelSuggestionsRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'AiAssistantPanelSuggestions'
 })({
@@ -32,7 +32,7 @@ const AiAssistantPanelSuggestionsRoot = (0, _system.styled)('div', {
   flexDirection: 'column',
   gap: _internals.vars.spacing(0.75)
 });
-const AiAssistantPanelSuggestionsList = (0, _system.styled)('div', {
+const AiAssistantPanelSuggestionsList = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'AiAssistantPanelSuggestionsList'
 })({
@@ -43,7 +43,7 @@ const AiAssistantPanelSuggestionsList = (0, _system.styled)('div', {
   margin: _internals.vars.spacing(-1),
   scrollbarWidth: 'thin'
 });
-const AiAssistantPanelSuggestionsLabel = (0, _system.styled)('div', {
+const AiAssistantPanelSuggestionsLabel = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'AiAssistantPanelSuggestionsLabel'
 })({

package/components/chartsPanel/GridChartsPanel.js

@@ -10,7 +10,7 @@ exports.GridChartsPanel = GridChartsPanel;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _system = require("@mui/system");
+var _styles = require("@mui/material/styles");
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _internals = require("@mui/x-data-grid-pro/internals");
 var _xDataGridPro = require("@mui/x-data-grid-pro");
@@ -22,7 +22,7 @@ var _gridChartsIntegrationSelectors = require("../../hooks/features/chartsIntegr
 var _useGridChartIntegration = require("../../hooks/utils/useGridChartIntegration");
 var _GridChartsPanelData = require("./data/GridChartsPanelData");
 var _jsxRuntime = require("react/jsx-runtime");
-const GridChartsPanelHeader = (0, _system.styled)('div', {
+const GridChartsPanelHeader = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ChartsPanelHeader'
 })({
@@ -32,7 +32,7 @@ const GridChartsPanelHeader = (0, _system.styled)('div', {
   padding: _internals.vars.spacing(1, 0.5, 0, 0.75),
   boxSizing: 'border-box'
 });
-const GridChartsPanelTitle = (0, _system.styled)('div', {
+const GridChartsPanelTitle = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ChartsPanelTitle'
 })({
@@ -41,7 +41,7 @@ const GridChartsPanelTitle = (0, _system.styled)('div', {
   marginLeft: _internals.vars.spacing(0.5),
   marginRight: 'auto'
 });
-const GridChartsPanelChartSelection = (0, _system.styled)('button', {
+const GridChartsPanelChartSelection = (0, _styles.styled)('button', {
   name: 'MuiDataGrid',
   slot: 'ChartsPanelChartSelection'
 })({

package/components/chartsPanel/chart/GridChartsPanelChart.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridChartsPanelChart = GridChartsPanelChart;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _system = require("@mui/system");
+var _styles = require("@mui/material/styles");
 var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _internals = require("@mui/x-data-grid-pro/internals");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
@@ -24,7 +24,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
 };
-const GridChartsManagementRoot = (0, _system.styled)('div', {
+const GridChartsManagementRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ChartsManagement'
 })({
@@ -33,7 +33,7 @@ const GridChartsManagementRoot = (0, _system.styled)('div', {
   justifyContent: 'space-between',
   height: '100%'
 });
-const GridChartTypeRoot = (0, _system.styled)('div', {
+const GridChartTypeRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ChartTypeRoot'
 })({
@@ -42,7 +42,7 @@ const GridChartTypeRoot = (0, _system.styled)('div', {
   gap: _internals.vars.spacing(1),
   padding: _internals.vars.spacing(1)
 });
-const GridChartTypeButton = (0, _system.styled)('button', {
+const GridChartTypeButton = (0, _styles.styled)('button', {
   name: 'MuiDataGrid',
   slot: 'ChartTypeSelectorButton',
   shouldForwardProp: prop => prop !== 'isSelected'

package/components/chartsPanel/customize/GridChartsPanelCustomize.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridChartsPanelCustomize = GridChartsPanelCustomize;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _system = require("@mui/system");
+var _styles = require("@mui/material/styles");
 var _internals = require("@mui/x-data-grid-pro/internals");
 var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _useGridApiContext = require("../../../hooks/utils/useGridApiContext");
@@ -19,16 +19,16 @@ var _CollapsibleTrigger = require("../../collapsible/CollapsibleTrigger");
 var _CollapsiblePanel = require("../../collapsible/CollapsiblePanel");
 var _useGridChartsIntegration = require("../../../hooks/features/chartsIntegration/useGridChartsIntegration");
 var _jsxRuntime = require("react/jsx-runtime");
-const GridChartsPanelCustomizeRoot = (0, _system.styled)(_xDataGridPro.GridShadowScrollArea)({
+const GridChartsPanelCustomizeRoot = (0, _styles.styled)(_xDataGridPro.GridShadowScrollArea)({
   height: '100%'
 });
-const GridChartsPanelCustomizeSection = (0, _system.styled)(_Collapsible.Collapsible, {
+const GridChartsPanelCustomizeSection = (0, _styles.styled)(_Collapsible.Collapsible, {
   name: 'MuiDataGrid',
   slot: 'ChartsPanelCustomizeSection'
 })({
   margin: _internals.vars.spacing(0.5, 1)
 });
-const GridChartsPanelCustomizePanel = (0, _system.styled)(_CollapsiblePanel.CollapsiblePanel, {
+const GridChartsPanelCustomizePanel = (0, _styles.styled)(_CollapsiblePanel.CollapsiblePanel, {
   name: 'MuiDataGrid',
   slot: 'chartsPanelSection'
 })({
@@ -37,7 +37,7 @@ const GridChartsPanelCustomizePanel = (0, _system.styled)(_CollapsiblePanel.Coll
   padding: _internals.vars.spacing(2, 1.5),
   gap: _internals.vars.spacing(3)
 });
-const GridChartsPanelCustomizePanelTitle = (0, _system.styled)('div', {
+const GridChartsPanelCustomizePanelTitle = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ChartsPanelCustomizePanelTitle'
 })({

package/components/chartsPanel/data/GridChartsPanelDataBody.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridChartsPanelDataBody = GridChartsPanelDataBody;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _system = require("@mui/system");
+var _styles = require("@mui/material/styles");
 var _internals = require("@mui/x-data-grid-pro/internals");
 var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
@@ -40,7 +40,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
 };
-const GridChartsPanelDataBodyRoot = (0, _system.styled)('div', {
+const GridChartsPanelDataBodyRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ChartsPanelDataBody'
 })({
@@ -49,7 +49,7 @@ const GridChartsPanelDataBodyRoot = (0, _system.styled)('div', {
   flexDirection: 'column',
   overflow: 'hidden'
 });
-const GridChartsPanelDataAvailableFields = (0, _system.styled)(_xDataGridPro.GridShadowScrollArea, {
+const GridChartsPanelDataAvailableFields = (0, _styles.styled)(_xDataGridPro.GridShadowScrollArea, {
   name: 'MuiDataGrid',
   slot: 'ChartsPanelDataAvailableFields'
 })({
@@ -63,7 +63,7 @@ const GridChartsPanelDataAvailableFields = (0, _system.styled)(_xDataGridPro.Gri
     backgroundColor: _internals.vars.colors.interactive.hover
   }
 });
-const GridChartsPanelDataSections = (0, _system.styled)(_resizablePanel.ResizablePanel, {
+const GridChartsPanelDataSections = (0, _styles.styled)(_resizablePanel.ResizablePanel, {
   name: 'MuiDataGrid',
   slot: 'ChartsPanelDataSections'
 })({
@@ -73,13 +73,13 @@ const GridChartsPanelDataSections = (0, _system.styled)(_resizablePanel.Resizabl
   display: 'flex',
   flexDirection: 'column'
 });
-const GridChartsPanelDataScrollArea = (0, _system.styled)(_xDataGridPro.GridShadowScrollArea, {
+const GridChartsPanelDataScrollArea = (0, _styles.styled)(_xDataGridPro.GridShadowScrollArea, {
   name: 'MuiDataGrid',
   slot: 'ChartsPanelDataScrollArea'
 })({
   height: '100%'
 });
-const GridChartsPanelDataSection = (0, _system.styled)(_collapsible.Collapsible, {
+const GridChartsPanelDataSection = (0, _styles.styled)(_collapsible.Collapsible, {
   name: 'MuiDataGrid',
   slot: 'ChartsPanelDataSection',
   shouldForwardProp: prop => prop !== 'disabled'
@@ -97,7 +97,7 @@ const GridChartsPanelDataSection = (0, _system.styled)(_collapsible.Collapsible,
     outline: `2px solid ${_internals.vars.colors.interactive.selected}`
   }
 }));
-const GridChartsPanelDataSectionTitle = (0, _system.styled)('div', {
+const GridChartsPanelDataSectionTitle = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ChartsPanelDataSectionTitle'
 })({
@@ -110,7 +110,7 @@ const GridChartsPanelDataSectionTitle = (0, _system.styled)('div', {
   font: _internals.vars.typography.font.body,
   fontWeight: _internals.vars.typography.fontWeight.medium
 });
-const GridChartsPanelDataFieldList = (0, _system.styled)('div', {
+const GridChartsPanelDataFieldList = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ChartsPanelDataFieldList'
 })({
@@ -119,7 +119,7 @@ const GridChartsPanelDataFieldList = (0, _system.styled)('div', {
   flexDirection: 'column',
   padding: _internals.vars.spacing(0.5, 0)
 });
-const GridChartsPanelDataPlaceholder = (0, _system.styled)('div', {
+const GridChartsPanelDataPlaceholder = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ChartsPanelDataPlaceholder'
 })({

package/components/chartsPanel/data/GridChartsPanelDataField.js

@@ -11,7 +11,7 @@ exports.GridChartsPanelDataField = GridChartsPanelDataField;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
-var _system = require("@mui/system");
+var _styles = require("@mui/material/styles");
 var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _internals = require("@mui/x-data-grid-pro/internals");
@@ -38,7 +38,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
 };
-const GridChartsPanelDataFieldRoot = (0, _system.styled)('div', {
+const GridChartsPanelDataFieldRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ChartsPanelDataField'
 })(({
@@ -87,7 +87,7 @@ const GridChartsPanelDataFieldRoot = (0, _system.styled)('div', {
     backgroundColor: _internals.vars.colors.interactive.hover
   }
 }));
-const GridChartsPanelDataFieldName = (0, _system.styled)('span', {
+const GridChartsPanelDataFieldName = (0, _styles.styled)('span', {
   name: 'MuiDataGrid',
   slot: 'ChartsPanelDataFieldName'
 })({
@@ -96,14 +96,14 @@ const GridChartsPanelDataFieldName = (0, _system.styled)('span', {
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
-const GridChartsPanelDataFieldActionContainer = (0, _system.styled)('div', {
+const GridChartsPanelDataFieldActionContainer = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ChartsPanelDataFieldActionContainer'
 })({
   display: 'flex',
   alignItems: 'center'
 });
-const GridChartsPanelDataFieldDragIcon = (0, _system.styled)('div', {
+const GridChartsPanelDataFieldDragIcon = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ChartsPanelDataFieldDragIcon'
 })({
@@ -118,7 +118,7 @@ const GridChartsPanelDataFieldDragIcon = (0, _system.styled)('div', {
     opacity: 0.3
   }
 });
-const GridChartsPanelDataFieldCheckbox = (0, _system.styled)(_internals.NotRendered, {
+const GridChartsPanelDataFieldCheckbox = (0, _styles.styled)(_internals.NotRendered, {
   name: 'MuiDataGrid',
   slot: 'ChartsPanelDataFieldCheckbox'
 })({

package/components/chartsPanel/data/GridChartsPanelDataSearch.js

@@ -9,7 +9,7 @@ exports.GridChartsPanelDataSearch = GridChartsPanelDataSearch;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _xDataGridPro = require("@mui/x-data-grid-pro");
-var _system = require("@mui/system");
+var _styles = require("@mui/material/styles");
 var _internals = require("@mui/x-data-grid-pro/internals");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _useGridApiContext = require("../../../hooks/utils/useGridApiContext");
@@ -24,7 +24,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
 };
-const GridChartsPanelDataSearchContainer = (0, _system.styled)('div', {
+const GridChartsPanelDataSearchContainer = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ChartsPanelDataSearchContainer'
 })({

package/components/collapsible/Collapsible.js

@@ -10,7 +10,7 @@ exports.Collapsible = Collapsible;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
-var _system = require("@mui/system");
+var _styles = require("@mui/material/styles");
 var _internals = require("@mui/x-data-grid-pro/internals");
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _xDataGridPro = require("@mui/x-data-grid-pro");
@@ -29,7 +29,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
 };
-const CollapsibleRoot = (0, _system.styled)('div', {
+const CollapsibleRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'Collapsible'
 })(({

package/components/collapsible/CollapsiblePanel.js

@@ -9,7 +9,7 @@ exports.CollapsiblePanel = CollapsiblePanel;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
-var _system = require("@mui/system");
+var _styles = require("@mui/material/styles");
 var _internals = require("@mui/x-data-grid-pro/internals");
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
@@ -28,7 +28,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
 };
-const CollapsiblePanelRoot = (0, _system.styled)('div', {
+const CollapsiblePanelRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'CollapsiblePanel'
 })({

package/components/collapsible/CollapsibleTrigger.js

@@ -9,7 +9,7 @@ exports.CollapsibleTrigger = CollapsibleTrigger;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
-var _system = require("@mui/system");
+var _styles = require("@mui/material/styles");
 var _internals = require("@mui/x-data-grid-pro/internals");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _xDataGridPro = require("@mui/x-data-grid-pro");
@@ -28,7 +28,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
 };
-const CollapsibleTriggerRoot = (0, _system.styled)('button', {
+const CollapsibleTriggerRoot = (0, _styles.styled)('button', {
   name: 'MuiDataGrid',
   slot: 'CollapsibleTrigger'
 })(({
@@ -56,7 +56,7 @@ const CollapsibleTriggerRoot = (0, _system.styled)('button', {
     outlineOffset: -2
   }
 }));
-const CollapsibleIcon = (0, _system.styled)('div', {
+const CollapsibleIcon = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'CollapsibleIcon'
 })(({