@gridsuite/commons-ui 0.239.0 → 0.240.0

package/dist/features/parameters/security-analysis/security-analysis-parameters-form.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { FormattedMessage } from "react-intl";
-import { Grid, Box, LinearProgress } from "@mui/material";
+import { Grid2, Box, LinearProgress } from "@mui/material";
 import "@mui/icons-material";
 import "../../../components/ui/overflowableText/OverflowableText.js";
 import "../../../utils/conversionUtils.js";
@@ -68,7 +68,7 @@ function SecurityAnalysisParametersForm({
     {
       validationSchema: securityAnalysisMethods.formSchema,
       ...securityAnalysisMethods.formMethods,
-      children: /* @__PURE__ */ jsx(Grid, { item: true, sx: { height: "100%" }, children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx(Grid2, { sx: { height: "100%" }, children: /* @__PURE__ */ jsx(
         Box,
         {
           sx: {
@@ -82,7 +82,7 @@ function SecurityAnalysisParametersForm({
             renderTitleFields?.(),
             securityAnalysisMethods.paramsFormInitialized ? /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsxs(
-                Grid,
+                Grid2,
                 {
                   container: true,
                   spacing: 1,
@@ -93,8 +93,8 @@ function SecurityAnalysisParametersForm({
                   },
                   justifyContent: "space-between",
                   children: [
-                    /* @__PURE__ */ jsx(Grid, { item: true, xs: "auto", sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: "Provider" }) }),
-                    /* @__PURE__ */ jsx(Grid, { item: true, xs: "auto", sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(
+                    /* @__PURE__ */ jsx(Grid2, { size: "auto", sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: "Provider" }) }),
+                    /* @__PURE__ */ jsx(Grid2, { container: true, size: "auto", sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(
                       MuiSelectInput,
                       {
                         name: PARAM_SA_PROVIDER,
@@ -115,7 +115,7 @@ function SecurityAnalysisParametersForm({
                     paddingLeft: 1
                   },
                   children: /* @__PURE__ */ jsxs(
-                    Grid,
+                    Grid2,
                     {
                       container: true,
                       sx: mergeSx(parametersStyles.scrollableGrid, {
@@ -132,7 +132,7 @@ function SecurityAnalysisParametersForm({
                             ref: contingencyTableApiRef
                           }
                         ),
-                        /* @__PURE__ */ jsx(Grid, { container: true, paddingTop: 4, paddingBottom: 2, children: /* @__PURE__ */ jsx(LineSeparator, {}) }),
+                        /* @__PURE__ */ jsx(Grid2, { container: true, paddingTop: 4, paddingBottom: 2, children: /* @__PURE__ */ jsx(LineSeparator, {}) }),
                         /* @__PURE__ */ jsx(
                           SecurityAnalysisParametersSelector,
                           {

package/dist/features/parameters/security-analysis/security-analysis-parameters-inline.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useState, useRef, useCallback, useEffect } from "react";
-import { Box, Grid } from "@mui/material";
+import { Box, Grid2 } from "@mui/material";
 import { useIntl, FormattedMessage } from "react-intl";
 import "../../../utils/conversionUtils.js";
 import { snackWithFallback } from "../../../utils/error.js";
@@ -113,10 +113,9 @@ function SecurityAnalysisParametersInline({
           /* @__PURE__ */ jsxs(Box, { sx: { flexGrow: 0 }, children: [
             /* @__PURE__ */ jsx(LineSeparator, {}),
             /* @__PURE__ */ jsxs(
-              Grid,
+              Grid2,
               {
                 container: true,
-                item: true,
                 sx: mergeSx(parametersStyles.controlParametersItem, parametersStyles.marginTopButton, {
                   paddingBottom: 0
                 }),

package/dist/features/parameters/security-analysis/security-analysis-parameters-selector.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useCallback, useMemo, useEffect } from "react";
 import { FormattedMessage } from "react-intl";
-import { Grid, Tabs, Tab } from "@mui/material";
+import { Grid2, Tabs, Tab } from "@mui/material";
 import "../../../utils/conversionUtils.js";
 import "../../../utils/types/equipmentType.js";
 import "@mui/icons-material";
@@ -59,7 +59,7 @@ function SecurityAnalysisParametersSelector({
       setTabSelected(TabValues.General);
     }
   }, [currentProvider]);
-  return /* @__PURE__ */ jsxs(Grid, { sx: { width: "100%" }, children: [
+  return /* @__PURE__ */ jsxs(Grid2, { sx: { width: "100%" }, children: [
     /* @__PURE__ */ jsx(Tabs, { value: tabValue, onChange: handleTabChange, children: TAB_INFO.filter((t) => isDeveloperMode || !t.developerModeOnly).map(
       (tab, index) => (tab.label !== TabValues[TabValues.LimitReductions] || currentProvider === PARAM_PROVIDER_OPENLOADFLOW && params?.limitReductions) && /* @__PURE__ */ jsx(
         Tab,
@@ -76,7 +76,7 @@ function SecurityAnalysisParametersSelector({
     ) }),
     TAB_INFO.filter((t) => isDeveloperMode || !t.developerModeOnly).map((tab, index) => /* @__PURE__ */ jsxs(TabPanel, { value: tabValue, index, children: [
       tabValue === TabValues.General && /* @__PURE__ */ jsx(ViolationsHidingParameters, {}),
-      tabValue === TabValues.LimitReductions && currentProvider === PARAM_PROVIDER_OPENLOADFLOW && params?.limitReductions && /* @__PURE__ */ jsx(Grid, { sx: { width: "100%" }, children: /* @__PURE__ */ jsx(LimitReductionsTableForm, { limits: params?.limitReductions ?? defaultLimitReductions }) })
+      tabValue === TabValues.LimitReductions && currentProvider === PARAM_PROVIDER_OPENLOADFLOW && params?.limitReductions && /* @__PURE__ */ jsx(Grid2, { sx: { width: "100%" }, children: /* @__PURE__ */ jsx(LimitReductionsTableForm, { limits: params?.limitReductions ?? defaultLimitReductions }) })
     ] }, tab.label))
   ] });
 }

package/dist/features/parameters/security-analysis/security-analysis-violations-hiding.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { Grid, Typography } from "@mui/material";
+import { Grid2, Typography } from "@mui/material";
 import { useIntl } from "react-intl";
 import { Info } from "@mui/icons-material";
 import { CustomTooltip } from "../../../components/ui/tooltip/CustomTooltip.js";
@@ -47,14 +47,13 @@ function SecurityAnalysisFields({
   isSingleField
 }) {
   const intl = useIntl();
-  return /* @__PURE__ */ jsxs(Grid, { sx: isSingleField ? parametersStyles.singleItem : parametersStyles.multipleItems, children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(Typography, { children: intl.formatMessage({ id: label }) }) }),
+  return /* @__PURE__ */ jsxs(Grid2, { sx: isSingleField ? parametersStyles.singleItem : parametersStyles.multipleItems, children: [
+    /* @__PURE__ */ jsx(Grid2, { size: 4, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(Typography, { children: intl.formatMessage({ id: label }) }) }),
     /* @__PURE__ */ jsx(
-      Grid,
+      Grid2,
       {
-        item: true,
         container: true,
-        xs: isSingleField ? 8 : 4,
+        size: isSingleField ? 8 : 4,
         sx: isSingleField ? parametersStyles.singleTextField : parametersStyles.firstTextField,
         children: /* @__PURE__ */ jsx(
           FloatInput,
@@ -68,7 +67,7 @@ function SecurityAnalysisFields({
         )
       }
     ),
-    !isSingleField && secondField && /* @__PURE__ */ jsx(Grid, { item: true, container: true, xs: 4, sx: parametersStyles.secondTextField, children: /* @__PURE__ */ jsx(
+    !isSingleField && secondField && /* @__PURE__ */ jsx(Grid2, { container: true, size: 4, sx: parametersStyles.secondTextField, children: /* @__PURE__ */ jsx(
       FloatInput,
       {
         name: secondField.name,
@@ -119,7 +118,7 @@ const fieldsToShow = [
 function ViolationsHidingParameters() {
   const intl = useIntl();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Grid, { container: true, spacing: 1, paddingBottom: 1, children: /* @__PURE__ */ jsxs(Grid, { item: true, xs: 8, sx: parametersStyles.text, children: [
+    /* @__PURE__ */ jsx(Grid2, { container: true, spacing: 1, paddingBottom: 1, children: /* @__PURE__ */ jsxs(Grid2, { size: 8, sx: parametersStyles.text, children: [
       /* @__PURE__ */ jsx(Typography, { children: intl.formatMessage({
         id: "securityAnalysis.violationsHiding"
       }) }),
@@ -132,9 +131,7 @@ function ViolationsHidingParameters() {
         }
       )
     ] }) }),
-    fieldsToShow?.map((item) => {
-      return /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(SecurityAnalysisFields, { ...item }) }, item.label);
-    })
+    fieldsToShow?.map((item) => /* @__PURE__ */ jsx(SecurityAnalysisFields, { ...item }, item.label))
   ] });
 }
 export {

package/dist/features/parameters/sensi/sensitivity-analysis-parameters-form.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Box, Grid, LinearProgress } from "@mui/material";
+import { Box, Grid2, LinearProgress } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import { parametersStyles } from "../parameters-style.js";
 import "@mui/icons-material";
@@ -73,7 +73,7 @@ function SensitivityAnalysisParametersForm({
         renderTitleFields?.(),
         sensitivityAnalysisMethods.paramsFormInitialized ? /* @__PURE__ */ jsxs(Box, { sx: mergeSx(parametersStyles.scrollableGrid, { paddingTop: 0, maxHeight: "100%" }), children: [
           /* @__PURE__ */ jsxs(
-            Grid,
+            Grid2,
             {
               container: true,
               spacing: 1,
@@ -84,8 +84,8 @@ function SensitivityAnalysisParametersForm({
               },
               justifyContent: "space-between",
               children: [
-                /* @__PURE__ */ jsx(Grid, { item: true, xs: 8, xl: 4, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: "Provider" }) }),
-                /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, xl: 2, sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx(Grid2, { size: { xs: 8, xl: 4 }, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: "Provider" }) }),
+                /* @__PURE__ */ jsx(Grid2, { size: { xs: 4, xl: 2 }, sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(
                   MuiSelectInput,
                   {
                     name: PROVIDER,
@@ -104,12 +104,12 @@ function SensitivityAnalysisParametersForm({
                 overflow: "auto",
                 paddingLeft: 1
               },
-              children: /* @__PURE__ */ jsxs(Grid, { container: true, children: [
-                /* @__PURE__ */ jsxs(Grid, { xl: 6, children: [
-                  /* @__PURE__ */ jsx(Grid, { container: true, paddingTop: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx(LineSeparator, {}) }),
+              children: /* @__PURE__ */ jsxs(Grid2, { container: true, children: [
+                /* @__PURE__ */ jsxs(Grid2, { size: { xl: 6 }, children: [
+                  /* @__PURE__ */ jsx(Grid2, { container: true, paddingTop: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx(LineSeparator, {}) }),
                   /* @__PURE__ */ jsx(SensitivityAnalysisFields, {})
                 ] }),
-                /* @__PURE__ */ jsx(Grid, { container: true, paddingTop: 4, paddingBottom: 2, children: /* @__PURE__ */ jsx(LineSeparator, {}) }),
+                /* @__PURE__ */ jsx(Grid2, { container: true, size: 12, paddingTop: 4, paddingBottom: 2, children: /* @__PURE__ */ jsx(LineSeparator, {}) }),
                 /* @__PURE__ */ jsx(
                   SensitivityParametersSelector,
                   {

package/dist/features/parameters/sensi/sensitivity-analysis-parameters-inline.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { Grid, DialogActions, Button } from "@mui/material";
+import { Grid2, DialogActions, Button } from "@mui/material";
 import { useState, useCallback, useEffect } from "react";
 import { useIntl, FormattedMessage } from "react-intl";
 import "../../../utils/conversionUtils.js";
@@ -121,7 +121,7 @@ function SensitivityAnalysisParametersInline({
       globalBuildStatus,
       renderActions: () => {
         return /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Grid, { item: true, container: true, children: /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx(Grid2, { container: true, children: /* @__PURE__ */ jsxs(
             DialogActions,
             {
               sx: mergeSx(parametersStyles.controlParametersItem, {

package/dist/features/parameters/sensi/sensitivity-parameters-fields.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Grid } from "@mui/material";
+import { Grid2 } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import { FLOW_FLOW_SENSITIVITY_VALUE_THRESHOLD, ANGLE_FLOW_SENSITIVITY_VALUE_THRESHOLD, FLOW_VOLTAGE_SENSITIVITY_VALUE_THRESHOLD } from "./constants.js";
 import "@mui/icons-material";
@@ -32,11 +32,10 @@ import "mui-nested-menu";
 import "react-resizable-panels";
 import "react-papaparse";
 function SensitivityAnalysisFields() {
-  return /* @__PURE__ */ jsxs(Grid, { container: true, children: [
+  return /* @__PURE__ */ jsxs(Grid2, { container: true, children: [
     /* @__PURE__ */ jsx(
-      Grid,
+      Grid2,
       {
-        item: true,
         sx: {
           fontWeight: "bold",
           marginBottom: "10px"
@@ -44,22 +43,22 @@ function SensitivityAnalysisFields() {
         children: /* @__PURE__ */ jsx(FormattedMessage, { id: "flowSensitivityValue" })
       }
     ),
-    /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 1, children: [
-      /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 1, children: [
+      /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
         FloatInput,
         {
           name: FLOW_FLOW_SENSITIVITY_VALUE_THRESHOLD,
           label: "flowFlowSensitivityValueThreshold"
         }
       ) }),
-      /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
         FloatInput,
         {
           name: ANGLE_FLOW_SENSITIVITY_VALUE_THRESHOLD,
           label: "angleFlowSensitivityValueThreshold"
         }
       ) }),
-      /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
         FloatInput,
         {
           name: FLOW_VOLTAGE_SENSITIVITY_VALUE_THRESHOLD,

package/dist/features/parameters/sensi/sensitivity-parameters-selector.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState, useCallback, useMemo, useEffect } from "react";
 import { useIntl, FormattedMessage } from "react-intl";
-import { Grid, Box, Tabs, Tab, Card, CardContent } from "@mui/material";
+import { Grid2, Box, Tabs, Tab, Card, CardContent } from "@mui/material";
 import { useFormContext } from "react-hook-form";
 import { SensiTabValues, SensiBranchesTabValues, COLUMNS_DEFINITIONS_INJECTIONS_SET, COLUMNS_DEFINITIONS_INJECTIONS, COLUMNS_DEFINITIONS_HVDCS, COLUMNS_DEFINITIONS_PSTS, COLUMNS_DEFINITIONS_NODES } from "./columns-definitions.js";
 import "../../../utils/conversionUtils.js";
@@ -139,7 +139,7 @@ function SensitivityParametersSelector({
       setTabValue(SensiTabValues.SensitivityBranches);
     }
   }, [isDeveloperMode]);
-  return /* @__PURE__ */ jsxs(Grid, { sx: { width: "100%" }, children: [
+  return /* @__PURE__ */ jsxs(Grid2, { sx: { width: "100%" }, children: [
     /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", width: "100%" }, children: [
       /* @__PURE__ */ jsx(Tabs, { value: tabValue, onChange: handleTabChange, children: tabInfo.map((tab, index) => /* @__PURE__ */ jsx(
         Tab,

package/dist/features/parameters/short-circuit/short-circuit-general-tab-panel.js

@@ -1,13 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useState, useMemo, useEffect } from "react";
-import { Grid } from "@mui/material";
+import { Grid2 } from "@mui/material";
 import { green, red } from "@mui/material/colors";
 import { Lens } from "@mui/icons-material";
 import { useWatch } from "react-hook-form";
 import { SHORT_CIRCUIT_INITIAL_VOLTAGE_PROFILE_MODE, SHORT_CIRCUIT_PREDEFINED_PARAMS, SHORT_CIRCUIT_WITH_LOADS, SHORT_CIRCUIT_WITH_SHUNT_COMPENSATORS, SHORT_CIRCUIT_WITH_VSC_CONVERTER_STATIONS, SHORT_CIRCUIT_WITH_NEUTRAL_POSITION, SHORT_CIRCUIT_ONLY_STARTED_GENERATORS_IN_CALCULATION_CLUSTER, SHORT_CIRCUIT_ONLY_STARTED_GENERATORS_OUTSIDE_CALCULATION_CLUSTER, intlPredefinedParametersOptions, intlInitialVoltageProfileMode, PredefinedParameters, InitialVoltage, SHORT_CIRCUIT_WITH_FEEDER_RESULT } from "./constants.js";
 import { VoltageTable } from "./short-circuit-voltage-table.js";
-import GridItem from "../../../components/composite/grid/grid-item.js";
-import GridSection from "../../../components/composite/grid/grid-section.js";
+import { GridItem } from "../../../components/composite/grid/grid-item.js";
+import { GridSection } from "../../../components/composite/grid/grid-section.js";
 import "react-intl";
 import "../../../components/ui/overflowableText/OverflowableText.js";
 import "../../../utils/conversionUtils.js";
@@ -122,9 +122,9 @@ const ShortCircuitGeneralTabPanel = forwardRef(
       const newPredefinedParameters = event.target.value;
       resetAll(newPredefinedParameters);
     };
-    const feederResult = /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "center", spacing: 2, direction: "row", children: [
-      /* @__PURE__ */ jsx(Grid, { item: true, xs: 10, children: /* @__PURE__ */ jsx(FieldLabel, { label: "descWithFeederResult" }) }),
-      /* @__PURE__ */ jsx(Grid, { item: true, xs: 2, children: /* @__PURE__ */ jsx(SwitchInput, { name: `${COMMON_PARAMETERS}.${SHORT_CIRCUIT_WITH_FEEDER_RESULT}` }) })
+    const feederResult = /* @__PURE__ */ jsxs(Grid2, { container: true, alignItems: "center", spacing: 2, direction: "row", children: [
+      /* @__PURE__ */ jsx(Grid2, { size: 10, children: /* @__PURE__ */ jsx(FieldLabel, { label: "descWithFeederResult" }) }),
+      /* @__PURE__ */ jsx(Grid2, { size: 2, children: /* @__PURE__ */ jsx(SwitchInput, { name: `${COMMON_PARAMETERS}.${SHORT_CIRCUIT_WITH_FEEDER_RESULT}` }) })
     ] });
     const predefinedParameters = /* @__PURE__ */ jsx(
       MuiSelectInput,
@@ -183,26 +183,26 @@ const ShortCircuitGeneralTabPanel = forwardRef(
       isIccMaxFeaturesDefaultConfiguration,
       isIccMinFeaturesDefaultConfiguration
     ]);
-    return /* @__PURE__ */ jsx(TabPanel, { index: ShortCircuitParametersTabValues.GENERAL, ref, ...othersTabPanelProps, children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, paddingLeft: 2, children: [
-      /* @__PURE__ */ jsx(Grid, { container: true, paddingTop: 2, xl: 6, children: /* @__PURE__ */ jsx(GridItem, { size: 10, children: feederResult }) }),
+    return /* @__PURE__ */ jsx(TabPanel, { index: ShortCircuitParametersTabValues.GENERAL, ref, ...othersTabPanelProps, children: /* @__PURE__ */ jsxs(Grid2, { container: true, paddingLeft: 2, children: [
+      /* @__PURE__ */ jsx(Grid2, { container: true, paddingTop: 2, size: { xl: 6 }, children: /* @__PURE__ */ jsx(GridItem, { size: 10, children: feederResult }) }),
       /* @__PURE__ */ jsx(GridSection, { title: "ShortCircuitPredefinedParameters", heading: 4 }),
-      /* @__PURE__ */ jsxs(Grid, { xl: 6, container: true, spacing: 1, alignItems: "center", children: [
+      /* @__PURE__ */ jsxs(Grid2, { size: { xl: 6 }, container: true, spacing: 1, alignItems: "center", children: [
         /* @__PURE__ */ jsx(GridItem, { size: 9, children: predefinedParameters }),
         /* @__PURE__ */ jsx(GridItem, { size: 2, children: statusToShow })
       ] }),
       /* @__PURE__ */ jsx(GridSection, { title: "ShortCircuitCharacteristics", heading: 4 }),
-      /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 5, children: [
-        /* @__PURE__ */ jsxs(Grid, { item: true, children: [
+      /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 5, size: 12, children: [
+        /* @__PURE__ */ jsxs(Grid2, { children: [
           /* @__PURE__ */ jsx(GridItem, { children: loads }),
           /* @__PURE__ */ jsx(GridItem, { children: shuntCompensators })
         ] }),
-        /* @__PURE__ */ jsxs(Grid, { item: true, xs: 8, children: [
+        /* @__PURE__ */ jsxs(Grid2, { size: 8, children: [
           /* @__PURE__ */ jsx(GridItem, { children: vsc }),
           /* @__PURE__ */ jsx(GridItem, { children: neutralPosition })
         ] })
       ] }),
       /* @__PURE__ */ jsx(GridSection, { title: "ShortCircuitVoltageProfileMode", heading: 4 }),
-      /* @__PURE__ */ jsx(Grid, { container: true, children: /* @__PURE__ */ jsx(GridItem, { size: 12, children: initialVoltageProfileModeField }) }),
+      /* @__PURE__ */ jsx(Grid2, { container: true, children: /* @__PURE__ */ jsx(GridItem, { size: 12, children: initialVoltageProfileModeField }) }),
       /* @__PURE__ */ jsx(VoltageTable, { voltageProfileMode: watchInitialVoltageProfileMode })
     ] }) });
   }

package/dist/features/parameters/short-circuit/short-circuit-parameters-content.js

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { useWatch } from "react-hook-form";
-import { Grid, Tabs, Tab, Box } from "@mui/material";
+import { Grid2, Tabs, Tab, Box } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import { getTabStyle, parametersStyles } from "../parameters-style.js";
 import { ShortCircuitParametersTabValues } from "./short-circuit-parameters-utils.js";
@@ -65,7 +65,7 @@ function ShortCircuitParametersContent({ shortCircuitMethods }) {
     [watchSpecificParameters]
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, sx: { width: "100%" }, children: /* @__PURE__ */ jsxs(Tabs, { value: selectedTab, onChange: handleTabChange, children: [
+    /* @__PURE__ */ jsx(Grid2, { sx: { width: "100%" }, children: /* @__PURE__ */ jsxs(Tabs, { value: selectedTab, onChange: handleTabChange, children: [
       /* @__PURE__ */ jsx(
         Tab,
         {
@@ -91,7 +91,7 @@ function ShortCircuitParametersContent({ shortCircuitMethods }) {
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsx(Box, { sx: styles.wrapper, children: /* @__PURE__ */ jsx(Grid, { container: true, sx: styles.container, children: /* @__PURE__ */ jsxs(Grid, { item: true, sx: styles.maxWidth, children: [
+    /* @__PURE__ */ jsx(Box, { sx: styles.wrapper, children: /* @__PURE__ */ jsx(Grid2, { container: true, sx: styles.container, children: /* @__PURE__ */ jsxs(Grid2, { sx: styles.maxWidth, children: [
       /* @__PURE__ */ jsx(ShortCircuitGeneralTabPanel, { resetAll, value: selectedTab }),
       isThereSpecificParameters && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(ShortCircuitStudyAreaTabPanel, { value: selectedTab }),

package/dist/features/parameters/short-circuit/short-circuit-parameters-form.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Box, Grid, LinearProgress } from "@mui/material";
+import { Box, Stack, Grid2, LinearProgress } from "@mui/material";
 import "@mui/icons-material";
 import "react-intl";
 import "../../../components/ui/overflowableText/OverflowableText.js";
@@ -46,14 +46,11 @@ function ShortCircuitParametersForm({
 }) {
   const { formMethods, formSchema, paramsLoaded } = shortCircuitMethods;
   return /* @__PURE__ */ jsx(CustomFormProvider, { validationSchema: formSchema, ...formMethods, removeOptional: true, children: /* @__PURE__ */ jsxs(Box, { sx: styles.shortCircuitParameters, children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, container: true, direction: "column", children: renderTitleFields?.() }),
-    paramsLoaded ? /* @__PURE__ */ jsx(Grid, { sx: parametersStyles.scrollableGrid, children: /* @__PURE__ */ jsx(ShortCircuitParametersContent, { shortCircuitMethods }) }) : /* @__PURE__ */ jsx(LinearProgress, {}),
+    /* @__PURE__ */ jsx(Stack, { children: renderTitleFields?.() }),
+    paramsLoaded ? /* @__PURE__ */ jsx(Grid2, { sx: parametersStyles.scrollableGrid, children: /* @__PURE__ */ jsx(ShortCircuitParametersContent, { shortCircuitMethods }) }) : /* @__PURE__ */ jsx(LinearProgress, {}),
     /* @__PURE__ */ jsx(
-      Grid,
+      Stack,
       {
-        item: true,
-        container: true,
-        direction: "column",
         sx: {
           position: "absolute",
           bottom: "15px"

package/dist/features/parameters/short-circuit/short-circuit-parameters-inline.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useCallback, useEffect } from "react";
-import { Box, Grid } from "@mui/material";
+import { Box, Grid2 } from "@mui/material";
 import { useIntl, FormattedMessage } from "react-intl";
 import "../../../utils/conversionUtils.js";
 import { snackWithFallback } from "../../../utils/error.js";
@@ -106,7 +106,7 @@ function ShortCircuitParametersInLine({
       shortCircuitMethods,
       renderActions: () => {
         return /* @__PURE__ */ jsxs(Box, { children: [
-          /* @__PURE__ */ jsxs(Grid, { container: true, item: true, children: [
+          /* @__PURE__ */ jsxs(Grid2, { container: true, children: [
             /* @__PURE__ */ jsx(
               LabelledButton,
               {

package/dist/features/parameters/short-circuit/short-circuit-power-electronics-tab-panel.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { Grid } from "@mui/material";
+import { Grid2 } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import { ShortCircuitIccMaterialTable } from "./short-circuit-icc-material-table.js";
 import "../../../utils/conversionUtils.js";
@@ -40,8 +40,8 @@ import "../common/contingency-table/contingency-table.js";
 import "../common/contingency-table/columns-definitions.js";
 import "@hookform/resolvers/yup";
 import "../../../components/composite/filter/HeaderFilterForm.js";
-import GridSection from "../../../components/composite/grid/grid-section.js";
-import GridItem from "../../../components/composite/grid/grid-item.js";
+import { GridSection } from "../../../components/composite/grid/grid-section.js";
+import { GridItem } from "../../../components/composite/grid/grid-item.js";
 import { SHORT_CIRCUIT_POWER_ELECTRONICS_MATERIALS, SHORT_CIRCUIT_POWER_ELECTRONICS_CLUSTERS, SHORT_CIRCUIT_MODEL_POWER_ELECTRONICS } from "./constants.js";
 import { ShortCircuitIccClusterTable } from "./short-circuit-icc-cluster-table.js";
 import { COLUMNS_DEFINITIONS_ICC_MATERIALS, COLUMNS_DEFINITIONS_ICC_CLUSTERS } from "./columns-definition.js";
@@ -65,13 +65,13 @@ function createRows() {
 }
 const ShortCircuitPowerElectronicsTabPanel = forwardRef(
   ({ ...othersTabPanelProps }, ref) => {
-    const modelPowerElectronics = /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "center", spacing: 2, direction: "row", children: [
-      /* @__PURE__ */ jsx(Grid, { item: true, xs: 10, children: /* @__PURE__ */ jsx(FieldLabel, { label: "ShortCircuitModelPowerElectronics" }) }),
-      /* @__PURE__ */ jsx(Grid, { item: true, xs: 2, children: /* @__PURE__ */ jsx(SwitchInput, { name: `${SPECIFIC_PARAMETERS}.${SHORT_CIRCUIT_MODEL_POWER_ELECTRONICS}` }) })
+    const modelPowerElectronics = /* @__PURE__ */ jsxs(Grid2, { container: true, alignItems: "center", spacing: 2, direction: "row", children: [
+      /* @__PURE__ */ jsx(Grid2, { size: 10, children: /* @__PURE__ */ jsx(FieldLabel, { label: "ShortCircuitModelPowerElectronics" }) }),
+      /* @__PURE__ */ jsx(Grid2, { size: 2, children: /* @__PURE__ */ jsx(SwitchInput, { name: `${SPECIFIC_PARAMETERS}.${SHORT_CIRCUIT_MODEL_POWER_ELECTRONICS}` }) })
     ] });
     return /* @__PURE__ */ jsxs(TabPanel, { index: ShortCircuitParametersTabValues.POWER_ELECTRONICS, ref, ...othersTabPanelProps, children: [
       /* @__PURE__ */ jsx(GridSection, { title: "ShortCircuitPowerElectronicsSection", heading: 4 }),
-      /* @__PURE__ */ jsx(Grid, { container: true, xl: 6, children: /* @__PURE__ */ jsx(GridItem, { size: 10, children: modelPowerElectronics }) }),
+      /* @__PURE__ */ jsx(Grid2, { container: true, size: { xl: 6 }, children: /* @__PURE__ */ jsx(GridItem, { size: 10, children: modelPowerElectronics }) }),
       /* @__PURE__ */ jsx(
         ShortCircuitIccMaterialTable,
         {

package/dist/features/parameters/short-circuit/short-circuit-study-area-tab-panel.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { Grid, Box } from "@mui/material";
+import { Grid2, Box } from "@mui/material";
 import { useFormContext } from "react-hook-form";
 import { ActivePowerAdornment } from "../../../utils/constants/adornments.js";
 import "../../../utils/conversionUtils.js";
@@ -44,8 +44,8 @@ import "../common/contingency-table/contingency-table.js";
 import "../common/contingency-table/columns-definitions.js";
 import "@hookform/resolvers/yup";
 import "../../../components/composite/filter/HeaderFilterForm.js";
-import GridSection from "../../../components/composite/grid/grid-section.js";
-import GridItem from "../../../components/composite/grid/grid-item.js";
+import { GridSection } from "../../../components/composite/grid/grid-section.js";
+import { GridItem } from "../../../components/composite/grid/grid-item.js";
 import { NODE_CLUSTER_FILTER_IDS, SHORT_CIRCUIT_ONLY_STARTED_GENERATORS_IN_CALCULATION_CLUSTER, onlyStartedGeneratorsOptions, STARTED_GENERATORS_IN_CALCULATION_CLUSTER_THRESHOLD, SHORT_CIRCUIT_ONLY_STARTED_GENERATORS_OUTSIDE_CALCULATION_CLUSTER, STARTED_GENERATORS_OUTSIDE_CALCULATION_CLUSTER_THRESHOLD } from "./constants.js";
 import { ShortCircuitParametersTabValues } from "./short-circuit-parameters-utils.js";
 const equipmentTypes = [EquipmentType.VOLTAGE_LEVEL];
@@ -111,7 +111,7 @@ const ShortCircuitStudyAreaTabPanel = forwardRef(
     );
     return /* @__PURE__ */ jsxs(TabPanel, { index: ShortCircuitParametersTabValues.STUDY_AREA, ref, ...othersTabPanelProps, children: [
       /* @__PURE__ */ jsx(GridSection, { title: "ShortCircuitInClusterFilter", heading: 4 }),
-      /* @__PURE__ */ jsx(Grid, { item: true, xs: true, sx: { paddingBottom: 4 }, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Grid2, { size: "grow", sx: { paddingBottom: 4 }, children: /* @__PURE__ */ jsx(
         DirectoryItemsInput,
         {
           titleId: "FiltersListsSelection",

package/dist/features/parameters/voltage-init/equipment-selection-parameters.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Grid, Alert } from "@mui/material";
+import { Stack, Alert, Grid2 } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import "@mui/icons-material";
 import "../../../components/ui/overflowableText/OverflowableText.js";
@@ -63,9 +63,9 @@ const initialEquipmentsSelectionType = {
   }
 };
 function EquipmentSelectionParameters() {
-  return /* @__PURE__ */ jsxs(Grid, { item: true, container: true, direction: "column", children: [
+  return /* @__PURE__ */ jsxs(Stack, { children: [
     /* @__PURE__ */ jsx(Alert, { sx: equipmentsSelectionStyles.alert, severity: "info", variant: "outlined", children: /* @__PURE__ */ jsx(FormattedMessage, { id: "VoltageInitParametersEquipmentsSelectionAlert" }) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, container: true, justifyContent: "flex-end", sx: equipmentsSelectionStyles.choiceContainer, children: /* @__PURE__ */ jsx(Grid, { item: true, xs: 5, sx: equipmentsSelectionStyles.choice, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid2, { container: true, justifyContent: "flex-end", sx: equipmentsSelectionStyles.choiceContainer, children: /* @__PURE__ */ jsx(Grid2, { size: 5, sx: equipmentsSelectionStyles.choice, children: /* @__PURE__ */ jsx(
       RadioInput,
       {
         name: GENERATORS_SELECTION_TYPE,
@@ -82,7 +82,7 @@ function EquipmentSelectionParameters() {
         hideErrorMessage: true
       }
     ),
-    /* @__PURE__ */ jsx(Grid, { item: true, container: true, justifyContent: "flex-end", sx: equipmentsSelectionStyles.choiceContainer, children: /* @__PURE__ */ jsx(Grid, { item: true, xs: 5, sx: equipmentsSelectionStyles.choice, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid2, { container: true, justifyContent: "flex-end", sx: equipmentsSelectionStyles.choiceContainer, children: /* @__PURE__ */ jsx(Grid2, { size: 5, sx: equipmentsSelectionStyles.choice, children: /* @__PURE__ */ jsx(
       RadioInput,
       {
         name: TRANSFORMERS_SELECTION_TYPE,
@@ -99,7 +99,7 @@ function EquipmentSelectionParameters() {
         hideErrorMessage: true
       }
     ),
-    /* @__PURE__ */ jsx(Grid, { item: true, container: true, justifyContent: "flex-end", sx: equipmentsSelectionStyles.choiceContainer, children: /* @__PURE__ */ jsx(Grid, { item: true, xs: 5, sx: equipmentsSelectionStyles.choice, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid2, { container: true, justifyContent: "flex-end", sx: equipmentsSelectionStyles.choiceContainer, children: /* @__PURE__ */ jsx(Grid2, { size: 5, sx: equipmentsSelectionStyles.choice, children: /* @__PURE__ */ jsx(
       RadioInput,
       {
         name: SHUNT_COMPENSATORS_SELECTION_TYPE,

package/dist/features/parameters/voltage-init/general-parameters.js

@@ -2,7 +2,7 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useFormContext, useWatch } from "react-hook-form";
 import { useCallback } from "react";
 import { FormattedMessage } from "react-intl";
-import { Grid, Alert, Box } from "@mui/material";
+import { Grid2, Alert, Box } from "@mui/material";
 import { GENERAL, GENERAL_APPLY_MODIFICATIONS, UPDATE_BUS_VOLTAGE, REACTIVE_SLACKS_THRESHOLD, SHUNT_COMPENSATOR_ACTIVATION_THRESHOLD } from "./constants.js";
 import { ReactivePowerAdornment } from "../../../utils/constants/adornments.js";
 import "../../../utils/conversionUtils.js";
@@ -65,7 +65,7 @@ function GeneralParameters({ withApplyModifications }) {
     },
     [setValue]
   );
-  return /* @__PURE__ */ jsxs(Grid, { children: [
+  return /* @__PURE__ */ jsxs(Grid2, { children: [
     withApplyModifications && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Alert, { sx: parametersStyles.adjustExistingLimitsInfo, severity: "info", variant: "outlined", children: /* @__PURE__ */ jsx(FormattedMessage, { id: "VoltageInitParametersGeneralSaveInfo" }) }),
       /* @__PURE__ */ jsx(

package/dist/features/parameters/voltage-init/voltage-init-parameters-form.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Box, Grid, LinearProgress, Tabs, Tab } from "@mui/material";
+import { Box, Grid2, Stack, LinearProgress, Tabs, Tab } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import { getTabStyle, getTabIndicatorStyle } from "../parameters-style.js";
 import "@mui/icons-material";
@@ -75,8 +75,8 @@ function VoltageInitParametersForm({
         position: "relative"
       },
       children: [
-        /* @__PURE__ */ jsxs(Grid, { item: true, container: true, sx: renderActions ? styles.gridWithActions : styles.gridWithoutActions, children: [
-          /* @__PURE__ */ jsx(Grid, { item: true, container: true, direction: "column", children: renderTitleFields?.() }),
+        /* @__PURE__ */ jsxs(Grid2, { container: true, sx: renderActions ? styles.gridWithActions : styles.gridWithoutActions, children: [
+          /* @__PURE__ */ jsx(Stack, { children: renderTitleFields?.() }),
           paramsLoading ? /* @__PURE__ */ jsx(LinearProgress, {}) : /* @__PURE__ */ jsxs(
             Box,
             {
@@ -122,7 +122,7 @@ function VoltageInitParametersForm({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsxs(Grid, { container: true, children: [
+                /* @__PURE__ */ jsxs(Grid2, { container: true, children: [
                   /* @__PURE__ */ jsx(TabPanel, { value: selectedTab, index: VoltageInitTabValues.GENERAL, children: /* @__PURE__ */ jsx(GeneralParameters, { withApplyModifications: renderActions != null }) }),
                   /* @__PURE__ */ jsx(TabPanel, { value: selectedTab, index: VoltageInitTabValues.VOLTAGE_LIMITS, children: /* @__PURE__ */ jsx(VoltageLimitsParameters, {}) }),
                   /* @__PURE__ */ jsx(TabPanel, { value: selectedTab, index: VoltageInitTabValues.EQUIPMENTS_SELECTION, children: /* @__PURE__ */ jsx(EquipmentSelectionParameters, {}) })
@@ -132,11 +132,8 @@ function VoltageInitParametersForm({
           )
         ] }),
         renderActions && /* @__PURE__ */ jsx(
-          Grid,
+          Stack,
           {
-            item: true,
-            container: true,
-            direction: "column",
             sx: {
               position: "fixed",
               bottom: "15px"

package/dist/features/parameters/voltage-init/voltage-init-parameters-inline.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useCallback, useEffect } from "react";
-import { Box, Grid } from "@mui/material";
+import { Box, Grid2 } from "@mui/material";
 import { useIntl, FormattedMessage } from "react-intl";
 import "../../../utils/conversionUtils.js";
 import { snackWithFallback } from "../../../utils/error.js";
@@ -115,7 +115,7 @@ function VoltageInitParametersInLine({
       voltageInitMethods,
       renderActions: () => {
         return /* @__PURE__ */ jsxs(Box, { children: [
-          /* @__PURE__ */ jsxs(Grid, { container: true, item: true, children: [
+          /* @__PURE__ */ jsxs(Grid2, { container: true, children: [
             /* @__PURE__ */ jsx(
               LabelledButton,
               {