@gridsuite/commons-ui 0.259.0 → 0.261.0

package/dist/features/network-modifications/substation/modification/SubstationModificationForm.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Stack, Grid2, TextField } from "@mui/material";
+import { Stack, Grid, TextField } from "@mui/material";
 import { useIntl } from "react-intl";
 import { useWatch } from "react-hook-form";
 import "@mui/icons-material";
@@ -69,22 +69,24 @@ function SubstationModificationForm({ substationToModify }) {
   const { translate } = useLocalizedCountries(locale);
   const equipmentId = useWatch({ name: FieldConstants.EQUIPMENT_ID });
   return /* @__PURE__ */ jsxs(Stack, { spacing: 2, children: [
-    /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, children: [
-      /* @__PURE__ */ jsx(Grid2, { size: "grow", children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
+      /* @__PURE__ */ jsx(Grid, { size: "grow", children: /* @__PURE__ */ jsx(
         TextField,
         {
           size: "small",
           fullWidth: true,
           label: "ID",
           value: equipmentId ?? "",
-          InputProps: {
-            readOnly: true
+          slotProps: {
+            input: {
+              readOnly: true
+            }
           },
           disabled: true,
           ...filledTextField
         }
       ) }),
-      /* @__PURE__ */ jsx(Grid2, { size: "grow", children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Grid, { size: "grow", children: /* @__PURE__ */ jsx(
         TextInput,
         {
           name: FieldConstants.EQUIPMENT_NAME,
@@ -94,7 +96,7 @@ function SubstationModificationForm({ substationToModify }) {
           clearable: true
         }
       ) }),
-      /* @__PURE__ */ jsx(Grid2, { size: "grow", children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Grid, { size: "grow", children: /* @__PURE__ */ jsx(
         CountrySelectionInput,
         {
           name: FieldConstants.COUNTRY,
@@ -105,7 +107,7 @@ function SubstationModificationForm({ substationToModify }) {
         }
       ) })
     ] }) }),
-    /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(PropertiesForm, { networkElementType: "substation", isModification: true }) })
+    /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(PropertiesForm, { networkElementType: "substation", isModification: true }) })
   ] });
 }
 export {

package/dist/features/network-modifications/voltageLevel/creation/VoltageLevelCreationForm.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Stack, Grid2, Tabs, Tab, Box } from "@mui/material";
+import { Stack, Grid, Tabs, Tab, Box } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import { useWatch } from "react-hook-form";
 import "@mui/icons-material";
@@ -82,8 +82,8 @@ function VoltageLevelCreationForm({
   );
   const watchHideBusBarSection = useWatch({ name: FieldConstants.HIDE_BUS_BAR_SECTION });
   return /* @__PURE__ */ jsxs(Stack, { spacing: 2, children: [
-    /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, children: [
-      /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
+      /* @__PURE__ */ jsx(Grid, { size: 4, children: /* @__PURE__ */ jsx(
         TextInput,
         {
           name: FieldConstants.EQUIPMENT_ID,
@@ -91,16 +91,18 @@ function VoltageLevelCreationForm({
           formProps: { autoFocus: true, ...filledTextField }
         }
       ) }),
-      /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(TextInput, { name: FieldConstants.EQUIPMENT_NAME, label: "Name", formProps: filledTextField }) })
+      /* @__PURE__ */ jsx(Grid, { size: 4, children: /* @__PURE__ */ jsx(TextInput, { name: FieldConstants.EQUIPMENT_NAME, label: "Name", formProps: filledTextField }) })
     ] }) }),
-    /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsxs(
       Tabs,
       {
         value: tabIndex,
         variant: "scrollable",
         onChange: (_, newValue) => setTabIndex(newValue),
-        TabIndicatorProps: {
-          sx: getTabIndicatorStyle(tabIndexesWithError, tabIndex)
+        slotProps: {
+          indicator: {
+            sx: getTabIndicatorStyle(tabIndexesWithError, tabIndex)
+          }
         },
         children: [
           /* @__PURE__ */ jsx(
@@ -135,7 +137,7 @@ function VoltageLevelCreationForm({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxs(Grid2, { children: [
+    /* @__PURE__ */ jsxs(Grid, { children: [
       /* @__PURE__ */ jsx(Box, { hidden: tabIndex !== VoltageLevelTab.SUBSTATION_TAB, children: /* @__PURE__ */ jsx(
         SubstationTab,
         {

package/dist/features/network-modifications/voltageLevel/creation/tabs/characteristicsTab/CharacteristicsTab.js

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useWatch } from "react-hook-form";
-import { Grid2 } from "@mui/material";
+import { Grid } from "@mui/material";
 import { GridSection } from "../../../../../../components/composite/grid/grid-section.js";
 import { VoltageAdornment, KiloAmpereAdornment } from "../../../../../../utils/constants/adornments.js";
 import { FieldConstants } from "../../../../../../utils/constants/fieldConstants.js";
@@ -37,8 +37,8 @@ function CharacteristicsTab() {
   const watchHideNominalVoltage = useWatch({ name: FieldConstants.HIDE_NOMINAL_VOLTAGE });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(GridSection, { title: "VoltageText" }),
-    /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, children: [
-      !watchHideNominalVoltage && /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
+      !watchHideNominalVoltage && /* @__PURE__ */ jsx(Grid, { size: 4, children: /* @__PURE__ */ jsx(
         FloatInput,
         {
           name: FieldConstants.NOMINAL_V,
@@ -46,7 +46,7 @@ function CharacteristicsTab() {
           adornment: VoltageAdornment
         }
       ) }),
-      /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Grid, { size: 4, children: /* @__PURE__ */ jsx(
         FloatInput,
         {
           name: FieldConstants.LOW_VOLTAGE_LIMIT,
@@ -54,7 +54,7 @@ function CharacteristicsTab() {
           adornment: VoltageAdornment
         }
       ) }),
-      /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Grid, { size: 4, children: /* @__PURE__ */ jsx(
         FloatInput,
         {
           name: FieldConstants.HIGH_VOLTAGE_LIMIT,
@@ -64,8 +64,8 @@ function CharacteristicsTab() {
       ) })
     ] }),
     /* @__PURE__ */ jsx(GridSection, { title: "ShortCircuit" }),
-    /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, children: [
-      /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
+      /* @__PURE__ */ jsx(Grid, { size: 4, children: /* @__PURE__ */ jsx(
         FloatInput,
         {
           name: FieldConstants.LOW_SHORT_CIRCUIT_CURRENT_LIMIT,
@@ -73,7 +73,7 @@ function CharacteristicsTab() {
           adornment: KiloAmpereAdornment
         }
       ) }),
-      /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Grid, { size: 4, children: /* @__PURE__ */ jsx(
         FloatInput,
         {
           name: FieldConstants.HIGH_SHORT_CIRCUIT_CURRENT_LIMIT,

package/dist/features/network-modifications/voltageLevel/creation/tabs/structureTab/StructureTab.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { Grid2 } from "@mui/material";
+import { Grid } from "@mui/material";
 import { useEffect } from "react";
 import { useFormContext, useWatch } from "react-hook-form";
 import { GridSection } from "../../../../../../components/composite/grid/grid-section.js";
@@ -44,9 +44,9 @@ function StructureTab() {
   const displayOmnibus = watchBusBarCount > 1 || watchSectionCount > 1;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(GridSection, { title: "BusBarSections" }),
-    /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, children: [
-      /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(IntegerInput, { name: FieldConstants.BUS_BAR_COUNT, label: "BusBarCount" }) }),
-      /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(IntegerInput, { name: FieldConstants.SECTION_COUNT, label: "numberOfSections" }) })
+    /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
+      /* @__PURE__ */ jsx(Grid, { size: 4, children: /* @__PURE__ */ jsx(IntegerInput, { name: FieldConstants.BUS_BAR_COUNT, label: "BusBarCount" }) }),
+      /* @__PURE__ */ jsx(Grid, { size: 4, children: /* @__PURE__ */ jsx(IntegerInput, { name: FieldConstants.SECTION_COUNT, label: "numberOfSections" }) })
     ] }),
     /* @__PURE__ */ jsx(SwitchesBetweenSections, {}),
     displayOmnibus && /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/features/network-modifications/voltageLevel/creation/tabs/structureTab/couplingOmnibus/CouplingOmnibusCreation.js

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
 import { useFormContext } from "react-hook-form";
-import { Grid2 } from "@mui/material";
+import { Grid } from "@mui/material";
 import { AutocompleteInput } from "../../../../../../../components/ui/reactHookForm/autocompleteInputs/AutocompleteInput.js";
 import { FieldConstants } from "../../../../../../../utils/constants/fieldConstants.js";
 import "../../../../../../../utils/conversionUtils.js";
@@ -24,7 +24,7 @@ function CouplingOmnibusCreation({ index, sectionOptions }) {
     return () => unsubscribe();
   }, [subscribe, trigger, getValues, index]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid, { size: 4, children: /* @__PURE__ */ jsx(
       AutocompleteInput,
       {
         allowNewValue: true,
@@ -35,7 +35,7 @@ function CouplingOmnibusCreation({ index, sectionOptions }) {
         size: "small"
       }
     ) }),
-    /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid, { size: 4, children: /* @__PURE__ */ jsx(
       AutocompleteInput,
       {
         allowNewValue: true,

package/dist/features/network-modifications/voltageLevel/creation/tabs/structureTab/switchesBetweenSections/SwitchesBetweenSections.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { Grid2 } from "@mui/material";
+import { Grid } from "@mui/material";
 import { useCallback, useRef, useEffect } from "react";
 import { useFormContext, useFieldArray, useWatch } from "react-hook-form";
 import { useIntl } from "react-intl";
@@ -76,7 +76,7 @@ function SwitchesBetweenSections() {
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(GridSection, { title: "SwitchesBetweenSections" }),
-    /* @__PURE__ */ jsx(Grid2, { container: true, spacing: 2, pt: 1, children: rows.map((value, index) => /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid, { container: true, spacing: 2, pt: 1, children: rows.map((value, index) => /* @__PURE__ */ jsx(Grid, { size: 4, children: /* @__PURE__ */ jsx(
       EnumInput,
       {
         options: Object.values(SWITCH_TYPE),

package/dist/features/network-modifications/voltageLevel/creation/tabs/substationTab/SubstationCreationSection.js

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useIntl } from "react-intl";
-import { Grid2, IconButton } from "@mui/material";
+import { Grid, IconButton } from "@mui/material";
 import { Delete } from "@mui/icons-material";
 import { CustomTooltip } from "../../../../../../components/ui/tooltip/CustomTooltip.js";
 import "../../../../../../components/ui/overflowableText/OverflowableText.js";
@@ -74,11 +74,11 @@ function SubstationCreationSection({
   const intl = useIntl();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(GridSection, { title: "CreateSubstation" }),
-    /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, children: [
-      /* @__PURE__ */ jsx(Grid2, { size: "grow", children: /* @__PURE__ */ jsx(TextInput, { name: FieldConstants.SUBSTATION_CREATION_ID, label: "SubstationId" }) }),
-      /* @__PURE__ */ jsx(Grid2, { size: "grow", children: /* @__PURE__ */ jsx(TextInput, { name: FieldConstants.SUBSTATION_NAME, label: "substationName" }) }),
-      /* @__PURE__ */ jsx(Grid2, { size: "grow", children: /* @__PURE__ */ jsx(CountrySelectionInput, { name: FieldConstants.COUNTRY, label: "Country", size: "small" }) }),
-      showDeleteButton && onDelete && /* @__PURE__ */ jsx(Grid2, { size: 1, children: /* @__PURE__ */ jsx(CustomTooltip, { title: intl.formatMessage({ id: "DeleteRows" }), children: /* @__PURE__ */ jsx(IconButton, { onClick: onDelete, children: /* @__PURE__ */ jsx(Delete, {}) }) }) })
+    /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
+      /* @__PURE__ */ jsx(Grid, { size: "grow", children: /* @__PURE__ */ jsx(TextInput, { name: FieldConstants.SUBSTATION_CREATION_ID, label: "SubstationId" }) }),
+      /* @__PURE__ */ jsx(Grid, { size: "grow", children: /* @__PURE__ */ jsx(TextInput, { name: FieldConstants.SUBSTATION_NAME, label: "substationName" }) }),
+      /* @__PURE__ */ jsx(Grid, { size: "grow", children: /* @__PURE__ */ jsx(CountrySelectionInput, { name: FieldConstants.COUNTRY, label: "Country", size: "small" }) }),
+      showDeleteButton && onDelete && /* @__PURE__ */ jsx(Grid, { size: 1, children: /* @__PURE__ */ jsx(CustomTooltip, { title: intl.formatMessage({ id: "DeleteRows" }), children: /* @__PURE__ */ jsx(IconButton, { onClick: onDelete, children: /* @__PURE__ */ jsx(Delete, {}) }) }) })
     ] }),
     /* @__PURE__ */ jsx(PropertiesForm, { id: FieldConstants.SUBSTATION_CREATION, networkElementType: "substation" })
   ] });

package/dist/features/network-modifications/voltageLevel/creation/tabs/substationTab/SubstationTab.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useWatch, useFormContext } from "react-hook-form";
 import { FormattedMessage } from "react-intl";
-import { Grid2 } from "@mui/material";
+import { Grid } from "@mui/material";
 import { useCallback, useEffect } from "react";
 import { FieldConstants } from "../../../../../../utils/constants/fieldConstants.js";
 import "../../../../../../utils/conversionUtils.js";
@@ -56,8 +56,8 @@ function SubstationTab({ substationOptions, showDeleteButton }) {
       });
     }
   }, [setValue, getValues, watchAddSubstationCreation]);
-  return watchAddSubstationCreation ? /* @__PURE__ */ jsx(SubstationCreationSection, { showDeleteButton, onDelete: handleDeleteSubstationCreation }) : /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, pt: 2, children: [
-    /* @__PURE__ */ jsx(Grid2, { size: 4, children: substationOptions ? /* @__PURE__ */ jsx(
+  return watchAddSubstationCreation ? /* @__PURE__ */ jsx(SubstationCreationSection, { showDeleteButton, onDelete: handleDeleteSubstationCreation }) : /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, pt: 2, children: [
+    /* @__PURE__ */ jsx(Grid, { size: 4, children: substationOptions ? /* @__PURE__ */ jsx(
       AutocompleteInput,
       {
         name: FieldConstants.SUBSTATION_ID,
@@ -70,8 +70,8 @@ function SubstationTab({ substationOptions, showDeleteButton }) {
         noOptionsText: ""
       }
     ) : /* @__PURE__ */ jsx(TextInput, { name: FieldConstants.SUBSTATION_ID, label: "SUBSTATION" }) }),
-    /* @__PURE__ */ jsx(Grid2, { mt: 0.75, children: /* @__PURE__ */ jsx(FormattedMessage, { id: "Or" }) }),
-    /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(AddButton, { label: "CreateSubstation", onClick: handleCreateSubstation }) })
+    /* @__PURE__ */ jsx(Grid, { mt: 0.75, children: /* @__PURE__ */ jsx(FormattedMessage, { id: "Or" }) }),
+    /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(AddButton, { label: "CreateSubstation", onClick: handleCreateSubstation }) })
   ] });
 }
 export {

package/dist/features/network-modifications/voltageLevel/modification/VoltageLevelModificationForm.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState } from "react";
-import { Stack, Grid2, TextField, Tabs, Tab, Box } from "@mui/material";
+import { Stack, Grid, TextField, Tabs, Tab, Box } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import { useWatch } from "react-hook-form";
 import { VoltageAdornment, KiloAmpereAdornment } from "../../../../utils/constants/adornments.js";
@@ -82,22 +82,24 @@ function VoltageLevelModificationForm({
     /* CHARACTERISTICS_TAB */
   );
   return /* @__PURE__ */ jsxs(Stack, { spacing: 2, children: [
-    /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, children: [
-      /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
+      /* @__PURE__ */ jsx(Grid, { size: 4, children: /* @__PURE__ */ jsx(
         TextField,
         {
           size: "small",
           fullWidth: true,
           label: "ID",
           value: equipmentId ?? "",
-          InputProps: {
-            readOnly: true
+          slotProps: {
+            input: {
+              readOnly: true
+            }
           },
           disabled: true,
           ...filledTextField
         }
       ) }),
-      /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Grid, { size: 4, children: /* @__PURE__ */ jsx(
         TextInput,
         {
           name: FieldConstants.EQUIPMENT_NAME,
@@ -107,7 +109,7 @@ function VoltageLevelModificationForm({
           previousValue: voltageLevelToModify?.name ?? void 0
         }
       ) }),
-      !watchHideSubstationField && /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
+      !watchHideSubstationField && /* @__PURE__ */ jsx(Grid, { size: 4, children: /* @__PURE__ */ jsx(
         AutocompleteInput,
         {
           allowNewValue: true,
@@ -123,14 +125,16 @@ function VoltageLevelModificationForm({
         }
       ) })
     ] }) }),
-    /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsxs(
       Tabs,
       {
         value: tabIndex,
         variant: "scrollable",
         onChange: (_event, newValue) => setTabIndex(newValue),
-        TabIndicatorProps: {
-          sx: getTabIndicatorStyle([], tabIndex)
+        slotProps: {
+          indicator: {
+            sx: getTabIndicatorStyle([], tabIndex)
+          }
         },
         children: [
           /* @__PURE__ */ jsx(
@@ -158,11 +162,11 @@ function VoltageLevelModificationForm({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxs(Grid2, { children: [
-      /* @__PURE__ */ jsx(Box, { hidden: tabIndex !== 0, children: /* @__PURE__ */ jsxs(Grid2, { children: [
+    /* @__PURE__ */ jsxs(Grid, { children: [
+      /* @__PURE__ */ jsx(Box, { hidden: tabIndex !== 0, children: /* @__PURE__ */ jsxs(Grid, { children: [
         /* @__PURE__ */ jsx(GridSection, { title: "VoltageText" }),
-        /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, children: [
-          /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
+          /* @__PURE__ */ jsx(Grid, { size: 4, children: /* @__PURE__ */ jsx(
             FloatInput,
             {
               name: FieldConstants.NOMINAL_V,
@@ -172,7 +176,7 @@ function VoltageLevelModificationForm({
               previousValue: voltageLevelToModify?.nominalV
             }
           ) }),
-          /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(Grid, { size: 4, children: /* @__PURE__ */ jsx(
             FloatInput,
             {
               name: FieldConstants.LOW_VOLTAGE_LIMIT,
@@ -182,7 +186,7 @@ function VoltageLevelModificationForm({
               previousValue: voltageLevelToModify?.lowVoltageLimit ?? void 0
             }
           ) }),
-          /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(Grid, { size: 4, children: /* @__PURE__ */ jsx(
             FloatInput,
             {
               name: FieldConstants.HIGH_VOLTAGE_LIMIT,
@@ -194,8 +198,8 @@ function VoltageLevelModificationForm({
           ) })
         ] }),
         /* @__PURE__ */ jsx(GridSection, { title: "ShortCircuit" }),
-        /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, children: [
-          /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
+          /* @__PURE__ */ jsx(Grid, { size: 4, children: /* @__PURE__ */ jsx(
             FloatInput,
             {
               name: FieldConstants.LOW_SHORT_CIRCUIT_CURRENT_LIMIT,
@@ -205,7 +209,7 @@ function VoltageLevelModificationForm({
               previousValue: voltageLevelToModify?.identifiableShortCircuit?.ipMin ?? void 0
             }
           ) }),
-          /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(Grid, { size: 4, children: /* @__PURE__ */ jsx(
             FloatInput,
             {
               name: FieldConstants.HIGH_SHORT_CIRCUIT_CURRENT_LIMIT,

package/dist/features/parameters/common/line-separator.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
-import { Grid2, Divider } from "@mui/material";
+import { Grid, Divider } from "@mui/material";
 function LineSeparator() {
-  return /* @__PURE__ */ jsx(Grid2, { size: 12, children: /* @__PURE__ */ jsx(Divider, {}) });
+  return /* @__PURE__ */ jsx(Grid, { size: 12, children: /* @__PURE__ */ jsx(Divider, {}) });
 }
 export {
   LineSeparator

package/dist/features/parameters/common/parameter-field.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Grid2, Typography, Chip } from "@mui/material";
+import { Grid, Typography, Chip } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import { CustomTooltip } from "../../../components/ui/tooltip/CustomTooltip.js";
 import { parametersStyles } from "../parameters-style.js";
@@ -88,13 +88,13 @@ function ParameterField({
             fullWidth: true,
             multiple: true,
             size: "small",
-            renderTags: (val, getTagsProps) => val.map((code, index) => /* @__PURE__ */ jsx(
+            renderValue: (val, getItemProps) => val.map((code, index) => /* @__PURE__ */ jsx(
               Chip,
               {
                 "data-testid": `${id}.${name}.${code}`,
                 size: "small",
                 label: code,
-                ...getTagsProps({ index })
+                ...getItemProps({ index })
               },
               code
             ))
@@ -108,9 +108,9 @@ function ParameterField({
   };
   const LABEL_GRID_SIZE = type !== ParameterType.COUNTRIES ? 8 : 3;
   const INPUT_GRID_SIZE = 12 - LABEL_GRID_SIZE;
-  return /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 1, paddingTop: 1, justifyContent: "space-between", sx: { width: "100%" }, children: [
-    /* @__PURE__ */ jsx(Grid2, { size: LABEL_GRID_SIZE, children: /* @__PURE__ */ jsx(CustomTooltip, { title: description, children: /* @__PURE__ */ jsx(Typography, { sx: parametersStyles.parameterName, children: label ? /* @__PURE__ */ jsx(FormattedMessage, { id: label }) : name }) }, name) }),
-    /* @__PURE__ */ jsx(Grid2, { container: true, size: INPUT_GRID_SIZE, sx: parametersStyles.controlItem, children: renderField() })
+  return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 1, paddingTop: 1, justifyContent: "space-between", sx: { width: "100%" }, children: [
+    /* @__PURE__ */ jsx(Grid, { size: LABEL_GRID_SIZE, children: /* @__PURE__ */ jsx(CustomTooltip, { title: description, children: /* @__PURE__ */ jsx(Typography, { sx: parametersStyles.parameterName, children: label ? /* @__PURE__ */ jsx(FormattedMessage, { id: label }) : name }) }, name) }),
+    /* @__PURE__ */ jsx(Grid, { container: true, size: INPUT_GRID_SIZE, sx: parametersStyles.controlItem, children: renderField() })
   ] }, name);
 }
 export {

package/dist/features/parameters/common/parameter-layout/parameter-layout.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Stack, Grid2, Typography, ButtonGroup, Tooltip, Box, LinearProgress } from "@mui/material";
+import { Stack, Grid, Typography, ButtonGroup, Tooltip, Box, LinearProgress } from "@mui/material";
 import { Upload, RestartAlt } from "@mui/icons-material";
 import { useState, useCallback } from "react";
 import { useIntl, FormattedMessage } from "react-intl";
@@ -79,9 +79,9 @@ function ParameterLayout({
   const intl = useIntl();
   return /* @__PURE__ */ jsxs(Stack, { sx: styles.stack, children: [
     (title || selectParameterHandler || resetHandler) && /* @__PURE__ */ jsxs(Stack, { sx: styles.title, children: [
-      /* @__PURE__ */ jsxs(Grid2, { container: true, sx: { alignItems: "center", justifyContent: "space-between" }, paddingBottom: 1, children: [
-        /* @__PURE__ */ jsx(Grid2, { size: "auto", children: title && !isXsScreen && /* @__PURE__ */ jsx(Typography, { variant: "h6", children: /* @__PURE__ */ jsx(FormattedMessage, { id: title }) }) }),
-        /* @__PURE__ */ jsx(Grid2, { size: "auto", children: /* @__PURE__ */ jsxs(ButtonGroup, { children: [
+      /* @__PURE__ */ jsxs(Grid, { container: true, sx: { alignItems: "center", justifyContent: "space-between" }, paddingBottom: 1, children: [
+        /* @__PURE__ */ jsx(Grid, { size: "auto", children: title && !isXsScreen && /* @__PURE__ */ jsx(Typography, { variant: "h6", children: /* @__PURE__ */ jsx(FormattedMessage, { id: title }) }) }),
+        /* @__PURE__ */ jsx(Grid, { size: "auto", children: /* @__PURE__ */ jsxs(ButtonGroup, { children: [
           selectParameterHandler && /* @__PURE__ */ jsx(
             LabelledButton,
             {
@@ -107,9 +107,9 @@ function ParameterLayout({
     /* @__PURE__ */ jsx(Box, { sx: styles.content, children: isLoading ? /* @__PURE__ */ jsx(LinearProgress, {}) : children }),
     /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
       /* @__PURE__ */ jsx(LineSeparator, {}),
-      /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 1, children: [
-        createParameter && /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(LabelledButton, { label: "save", "data-testid": "SaveButton", callback: handleSaveClick }) }),
-        validateHandler && /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 1, children: [
+        createParameter && /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(LabelledButton, { label: "save", "data-testid": "SaveButton", callback: handleSaveClick }) }),
+        validateHandler && /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(
           SubmitButton,
           {
             variant: "contained",

package/dist/features/parameters/common/parameter-table-field/parameter-table-field.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Grid2, Typography } from "@mui/material";
+import { Grid, Typography } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import { useFieldArray, useFormContext } from "react-hook-form";
 import { Info } from "@mui/icons-material";
@@ -84,8 +84,8 @@ function ParameterTableField({
     },
     [isValidRow, onChange]
   );
-  return /* @__PURE__ */ jsxs(Grid2, { container: true, sx: sxContainerProps, size: 12, children: [
-    label && /* @__PURE__ */ jsxs(Grid2, { container: true, alignItems: "center", paddingBottom: 2, paddingTop: 2, children: [
+  return /* @__PURE__ */ jsxs(Grid, { container: true, sx: sxContainerProps, size: 12, children: [
+    label && /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "center", paddingBottom: 2, paddingTop: 2, children: [
       /* @__PURE__ */ jsx(Typography, { component: "span", variant: "h6", children: /* @__PURE__ */ jsx(FormattedMessage, { id: label }) }),
       tooltipProps && /* @__PURE__ */ jsx(
         CustomTooltip,

package/dist/features/parameters/common/parameters.js

@@ -1,20 +1,22 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { FormattedMessage } from "react-intl";
-import { Typography, Box, Button, Grid2, Switch } from "@mui/material";
+import { Typography, Box, Button, Grid, Switch } from "@mui/material";
 import { parametersStyles } from "../parameters-style.js";
 function LabelledButton({ callback, label, ...props }) {
   return /* @__PURE__ */ jsx(Button, { onClick: callback, ...props, children: /* @__PURE__ */ jsx(FormattedMessage, { id: label }) });
 }
 function SwitchWithLabel({ value, label, callback }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Grid2, { size: 8, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: label }) }),
-    /* @__PURE__ */ jsx(Grid2, { container: true, size: 4, sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid, { size: 8, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: label }) }),
+    /* @__PURE__ */ jsx(Grid, { container: true, size: 4, sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(
       Switch,
       {
         checked: value,
         onChange: callback,
         value,
-        inputProps: { "aria-label": "primary checkbox" }
+        slotProps: {
+          input: { "aria-label": "primary checkbox" }
+        }
       }
     ) })
   ] });

package/dist/features/parameters/common/provider-param.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Grid2 } from "@mui/material";
+import { Grid } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import { LineSeparator } from "./line-separator.js";
 import { parametersStyles } from "../parameters-style.js";
@@ -40,9 +40,9 @@ const styles = {
   }
 };
 function ProviderParam({ options, id, sx }) {
-  return /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 1, sx: mergeSx(styles.providerParam, sx), justifyContent: "space-between", children: [
-    /* @__PURE__ */ jsx(Grid2, { size: "auto", sx: mergeSx(parametersStyles.parameterName, { paddingRight: 2 }), children: /* @__PURE__ */ jsx(FormattedMessage, { id: "Provider" }) }),
-    /* @__PURE__ */ jsx(Grid2, { size: "auto", sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(MuiSelectInput, { name: PROVIDER, size: "small", options, "data-testid": `${id}Provider` }) }),
+  return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 1, sx: mergeSx(styles.providerParam, sx), justifyContent: "space-between", children: [
+    /* @__PURE__ */ jsx(Grid, { size: "auto", sx: mergeSx(parametersStyles.parameterName, { paddingRight: 2 }), children: /* @__PURE__ */ jsx(FormattedMessage, { id: "Provider" }) }),
+    /* @__PURE__ */ jsx(Grid, { size: "auto", sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(MuiSelectInput, { name: PROVIDER, size: "small", options, "data-testid": `${id}Provider` }) }),
     /* @__PURE__ */ jsx(LineSeparator, {})
   ] });
 }

package/dist/features/parameters/common/widget/parameter-float.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Grid2 } from "@mui/material";
+import { Grid } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import { CustomTooltip } from "../../../../components/ui/tooltip/CustomTooltip.js";
 import "@mui/icons-material";
@@ -40,9 +40,9 @@ function ParameterFloat({
   labelSize,
   inputSize
 }) {
-  const content = /* @__PURE__ */ jsxs(Grid2, { container: true, direction: "row", spacing: 1, paddingTop: 3, sx: { width: "100%" }, children: [
-    /* @__PURE__ */ jsx(Grid2, { size: labelSize, sx: style, children: /* @__PURE__ */ jsx(FormattedMessage, { id: label }) }),
-    /* @__PURE__ */ jsx(Grid2, { size: inputSize, children: /* @__PURE__ */ jsx(FloatInput, { name, adornment }) })
+  const content = /* @__PURE__ */ jsxs(Grid, { container: true, direction: "row", spacing: 1, paddingTop: 3, sx: { width: "100%" }, children: [
+    /* @__PURE__ */ jsx(Grid, { size: labelSize, sx: style, children: /* @__PURE__ */ jsx(FormattedMessage, { id: label }) }),
+    /* @__PURE__ */ jsx(Grid, { size: inputSize, children: /* @__PURE__ */ jsx(FloatInput, { name, adornment }) })
   ] });
   if (tooltip) {
     return /* @__PURE__ */ jsx(CustomTooltip, { title: /* @__PURE__ */ jsx(FormattedMessage, { id: tooltip }), children: content });

package/dist/features/parameters/common/widget/parameter-group.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Settings, ExpandCircleDown, ExpandMore } from "@mui/icons-material";
-import { Grid2, Accordion, AccordionSummary, Typography, AccordionDetails } from "@mui/material";
+import { Grid, Accordion, AccordionSummary, Typography, AccordionDetails } from "@mui/material";
 import { useState } from "react";
 import { FormattedMessage } from "react-intl";
 import { parametersStyles } from "../../parameters-style.js";
@@ -14,7 +14,7 @@ function ParameterGroup({
   children
 }) {
   const [mouseHover, setMouseHover] = useState(false);
-  return /* @__PURE__ */ jsx(Grid2, { size: 12, sx: parametersStyles.subgroupParameters, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(Grid, { size: 12, sx: parametersStyles.subgroupParameters, children: /* @__PURE__ */ jsxs(
     Accordion,
     {
       sx: parametersStyles.subgroupParametersAccordion,

package/dist/features/parameters/common/widget/parameter-line-directory-items-input.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Grid2 } from "@mui/material";
+import { Grid } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import { parametersStyles } from "../../parameters-style.js";
 import "@mui/icons-material";
@@ -39,9 +39,9 @@ function ParameterLineDirectoryItemsInput({
   hideErrorMessage,
   allowMultiSelect = true
 }) {
-  return /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 1, paddingTop: 1, paddingBottom: 1, sx: { width: "100%" }, children: [
-    /* @__PURE__ */ jsx(Grid2, { size: 7, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: label }) }),
-    /* @__PURE__ */ jsx(Grid2, { size: 5, sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 1, paddingTop: 1, paddingBottom: 1, sx: { width: "100%" }, children: [
+    /* @__PURE__ */ jsx(Grid, { size: 7, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: label }) }),
+    /* @__PURE__ */ jsx(Grid, { size: 5, sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(
       DirectoryItemsInput,
       {
         name,