@gridsuite/commons-ui 0.239.0 → 0.240.0

package/dist/components/ui/reactHookForm/numbers/RangeInput.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useWatch } from "react-hook-form";
 import { FormattedMessage } from "react-intl";
 import { useMemo } from "react";
-import { FormControl, InputLabel, Grid } from "@mui/material";
+import { FormControl, InputLabel, Grid2 } from "@mui/material";
 import * as yup from "yup";
 import { FloatInput } from "./FloatInput.js";
 import { MuiSelectInput } from "../selectInputs/MuiSelectInput.js";
@@ -51,8 +51,8 @@ function RangeInput({ name, label }) {
   const isOperationTypeRange = useMemo(() => watchOperationType === RangeType.RANGE.id, [watchOperationType]);
   return /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, children: [
     /* @__PURE__ */ jsx(InputLabel, { sx: style.inputLegend, shrink: true, children: /* @__PURE__ */ jsx(FormattedMessage, { id: label }) }),
-    /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 0, children: [
-      /* @__PURE__ */ jsx(Grid, { item: true, style: isOperationTypeRange ? { flex: "min-content" } : {}, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 0, children: [
+      /* @__PURE__ */ jsx(Grid2, { style: isOperationTypeRange ? { flex: "min-content" } : {}, children: /* @__PURE__ */ jsx(
         MuiSelectInput,
         {
           name: `${name}.${FieldConstants.OPERATION_TYPE}`,
@@ -60,7 +60,7 @@ function RangeInput({ name, label }) {
           fullWidth: true
         }
       ) }),
-      /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
         FloatInput,
         {
           label: "",
@@ -72,7 +72,7 @@ function RangeInput({ name, label }) {
           }
         }
       ) }),
-      isOperationTypeRange && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+      isOperationTypeRange && /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
         FloatInput,
         {
           name: `${name}.${FieldConstants.VALUE_2}`,

package/dist/components/ui/reactHookForm/utils/functions.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { FormattedMessage } from "react-intl";
 import { getIn } from "yup";
-import { Grid } from "@mui/material";
+import { Grid2 } from "@mui/material";
 function genHelperError(...errors) {
   const inError = errors.find((e) => e);
   if (inError) {
@@ -20,7 +20,7 @@ const isFieldRequired = (fieldName, schema, values) => {
   return fieldSchema.describe({ parent: parentValues })?.optional === false;
 };
 const gridItem = (field, size = 6) => {
-  return /* @__PURE__ */ jsx(Grid, { item: true, xs: size, alignItems: "start", children: field });
+  return /* @__PURE__ */ jsx(Grid2, { size, sx: { alignItems: "start" }, children: field });
 };
 const toFloatOrNullValue = (value) => {
   if (value === "-") {

package/dist/features/authentication/AuthenticationRouter.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Grid } from "@mui/material";
+import { Stack } from "@mui/material";
 import { useCallback } from "react";
 import { Routes, Route, Navigate } from "react-router";
 import { Login } from "./Login.js";
@@ -26,7 +26,7 @@ function AuthenticationRouter({
       handleSilentRenewCallback(userManager.instance);
     }
   }, [userManager.instance]);
-  return /* @__PURE__ */ jsxs(Grid, { container: true, alignContent: "center", alignItems: "center", direction: "column", children: [
+  return /* @__PURE__ */ jsxs(Stack, { alignItems: "center", sx: { width: "100%" }, children: [
     userManager.error !== null && /* @__PURE__ */ jsxs("h1", { children: [
       "Error : Getting userManager; ",
       userManager.error

package/dist/features/authentication/AuthenticationRouterErrorDisplay.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { Grid } from "@mui/material";
+import { Grid2 } from "@mui/material";
 import { Logout } from "./Logout.js";
 import { logout } from "./utils/authService.js";
 import "./utils/userManagerMock.js";
@@ -8,8 +8,8 @@ import { ErrorInUserValidationAlert } from "./alert/ErrorInUserValidationAlert.j
 import { UnauthorizedAccessAlert } from "./alert/UnauthorizedAccessAlert.js";
 function AuthenticationRouterErrorDisplay({ errorState, instance, dispatch }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(Logout, { disabled: instance === null, onLogoutClick: () => logout(dispatch, instance) }) }),
-    /* @__PURE__ */ jsxs(Grid, { item: true, xs: 4, children: [
+    /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(Logout, { disabled: instance === null, onLogoutClick: () => logout(dispatch, instance) }) }),
+    /* @__PURE__ */ jsxs(Grid2, { size: 4, children: [
       errorState.logoutError && /* @__PURE__ */ jsx(ErrorInLogoutAlert, { userName: errorState.userName, message: errorState.logoutError.error.message }),
       errorState.userValidationError && /* @__PURE__ */ jsx(
         ErrorInUserValidationAlert,

package/dist/features/network-modifications/battery/creation/BatteryCreationForm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { Grid } from "@mui/material";
+import { Grid2 } from "@mui/material";
 import { filledTextField } from "../../common/form.utils.js";
 import { PropertiesForm } from "../../common/properties/PropertiesForm.js";
 import "react";
@@ -36,7 +36,7 @@ import "mui-nested-menu";
 import "react-resizable-panels";
 import "react-papaparse";
 import "../../common/properties/propertyUtils.js";
-import GridSection from "../../../../components/composite/grid/grid-section.js";
+import { GridSection } from "../../../../components/composite/grid/grid-section.js";
 import "react-dom";
 import "autosuggest-highlight/match";
 import "autosuggest-highlight/parse";
@@ -51,7 +51,7 @@ import "react-querybuilder";
 import "uuid";
 import "../../../../components/composite/filter/explicitNaming/ExplicitNamingFilterEditionDialog.js";
 import "../../../../components/composite/filter/utils/filterFormUtils.js";
-import GridItem from "../../../../components/composite/grid/grid-item.js";
+import { GridItem } from "../../../../components/composite/grid/grid-item.js";
 import "@react-querybuilder/material";
 import "../../../../components/composite/reactQueryBuilder/CustomReactQueryBuilder.js";
 import "../../../../components/composite/reactQueryBuilder/PropertyValueEditor.js";
@@ -103,21 +103,21 @@ function BatteryCreationForm({
     }
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
+    /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, children: [
       /* @__PURE__ */ jsx(GridItem, { size: 4, children: batteryIdField }),
       /* @__PURE__ */ jsx(GridItem, { size: 4, children: batteryNameField })
     ] }),
     /* @__PURE__ */ jsx(GridSection, { title: "Connectivity" }),
-    /* @__PURE__ */ jsx(Grid, { container: true, spacing: 2, children: /* @__PURE__ */ jsx(GridItem, { size: 12, children: connectivityForm }) }),
+    /* @__PURE__ */ jsx(Grid2, { container: true, spacing: 2, children: /* @__PURE__ */ jsx(GridItem, { size: 12, children: connectivityForm }) }),
     /* @__PURE__ */ jsx(GridSection, { title: "ActiveLimits" }),
-    /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
+    /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, children: [
       /* @__PURE__ */ jsx(GridItem, { size: 4, children: minimumActivePowerField }),
       /* @__PURE__ */ jsx(GridItem, { size: 4, children: maximumActivePowerField })
     ] }),
     /* @__PURE__ */ jsx(GridSection, { title: "ReactiveLimits" }),
     /* @__PURE__ */ jsx(ReactiveLimitsForm, {}),
     /* @__PURE__ */ jsx(SetPointsForm, {}),
-    /* @__PURE__ */ jsx(Grid, { container: true, spacing: 2, paddingTop: 2, children: /* @__PURE__ */ jsx(ActivePowerControlForm, {}) }),
+    /* @__PURE__ */ jsx(Grid2, { container: true, spacing: 2, paddingTop: 2, children: /* @__PURE__ */ jsx(ActivePowerControlForm, {}) }),
     /* @__PURE__ */ jsx(GridSection, { title: "ShortCircuit" }),
     /* @__PURE__ */ jsx(ShortCircuitForm, {}),
     /* @__PURE__ */ jsx(PropertiesForm, { networkElementType: "battery" })

package/dist/features/network-modifications/battery/modification/BatteryDialogHeader.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Grid, TextField } from "@mui/material";
+import { Grid2, TextField } from "@mui/material";
 import { filledTextField } from "../../common/form.utils.js";
 import "react";
 import "react-hook-form";
@@ -62,8 +62,8 @@ import "../../../../components/composite/report/report-treeview/treeview-item.js
 import "../../../../components/composite/report/report-viewer/context/report-viewer-context.js";
 import "../../common/regulatingTerminal/RegulatingTerminalForm.js";
 function BatteryDialogHeader({ batteryToModify, equipmentId }) {
-  return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, children: [
+    /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
       TextField,
       {
         size: "small",
@@ -77,7 +77,7 @@ function BatteryDialogHeader({ batteryToModify, equipmentId }) {
         ...filledTextField
       }
     ) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
       TextInput,
       {
         name: FieldConstants.EQUIPMENT_NAME,

package/dist/features/network-modifications/battery/modification/BatteryDialogTabsContent.js

@@ -1,9 +1,9 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { Box, Grid } from "@mui/material";
+import { Box, Grid2 } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import { BatteryDialogTab } from "./batteryTabs.utils.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 { PropertiesForm } from "../../common/properties/PropertiesForm.js";
 import "react";
 import "react-hook-form";
@@ -99,7 +99,7 @@ function BatteryDialogTabsContent({
     ] }),
     /* @__PURE__ */ jsxs(Box, { hidden: tabIndex !== BatteryDialogTab.LIMITS_AND_SETPOINTS_TAB, children: [
       /* @__PURE__ */ jsx(GridSection, { title: "Setpoints" }),
-      /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
+      /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, children: [
         /* @__PURE__ */ jsx(GridItem, { size: 4, children: /* @__PURE__ */ jsx(
           FloatInput,
           {
@@ -121,18 +121,18 @@ function BatteryDialogTabsContent({
           }
         ) })
       ] }),
-      /* @__PURE__ */ jsx(Grid, { container: true, spacing: 2, paddingTop: 2, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Grid2, { container: true, spacing: 2, paddingTop: 2, children: /* @__PURE__ */ jsx(
         ActivePowerControlForm,
         {
           isEquipmentModification: true,
           previousValues: batteryToModify?.activePowerControl
         }
       ) }),
-      /* @__PURE__ */ jsx(Grid, { container: true, spacing: 2, children: /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, children: [
+      /* @__PURE__ */ jsx(Grid2, { container: true, spacing: 2, children: /* @__PURE__ */ jsxs(Grid2, { size: 12, children: [
         /* @__PURE__ */ jsx("h3", { children: /* @__PURE__ */ jsx(FormattedMessage, { id: "Limits" }) }),
         /* @__PURE__ */ jsx("h4", { children: /* @__PURE__ */ jsx(FormattedMessage, { id: "ActiveLimits" }) })
       ] }) }),
-      /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
+      /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, children: [
         /* @__PURE__ */ jsx(GridItem, { size: 4, children: /* @__PURE__ */ jsx(
           FloatInput,
           {
@@ -154,7 +154,7 @@ function BatteryDialogTabsContent({
           }
         ) })
       ] }),
-      /* @__PURE__ */ jsx(Grid, { container: true, spacing: 2, children: /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx("h4", { children: /* @__PURE__ */ jsx(FormattedMessage, { id: "ReactiveLimits" }) }) }) }),
+      /* @__PURE__ */ jsx(Grid2, { container: true, spacing: 2, children: /* @__PURE__ */ jsx(Grid2, { size: 12, children: /* @__PURE__ */ jsx("h4", { children: /* @__PURE__ */ jsx(FormattedMessage, { id: "ReactiveLimits" }) }) }) }),
       /* @__PURE__ */ jsx(
         ReactiveLimitsForm,
         {

package/dist/features/network-modifications/battery/modification/BatteryModificationForm.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Grid } from "@mui/material";
+import { Stack, Grid2 } from "@mui/material";
 import { useWatch } from "react-hook-form";
 import { BatteryDialogHeader } from "./BatteryDialogHeader.js";
 import { BatteryDialogTabs } from "./BatteryDialogTabs.js";
@@ -22,9 +22,9 @@ function BatteryModificationForm({
     BatteryDialogTab.CONNECTIVITY_TAB
   );
   const equipmentId = useWatch({ name: FieldConstants.EQUIPMENT_ID });
-  return /* @__PURE__ */ jsxs(Grid, { container: true, direction: "column", spacing: 2, children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(BatteryDialogHeader, { batteryToModify, equipmentId }) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Stack, { spacing: 2, children: [
+    /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(BatteryDialogHeader, { batteryToModify, equipmentId }) }),
+    /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
       BatteryDialogTabs,
       {
         tabIndex,
@@ -32,7 +32,7 @@ function BatteryModificationForm({
         setTabIndex
       }
     ) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
       BatteryDialogTabsContent,
       {
         tabIndex,

package/dist/features/network-modifications/by-filter/assignment/assignment/assignment-form.js

@@ -43,7 +43,7 @@ import "mui-nested-menu";
 import "react-resizable-panels";
 import "react-papaparse";
 import { DataType } from "./assignment.type.js";
-import GridItem from "../../../../../components/composite/grid/grid-item.js";
+import { GridItem } from "../../../../../components/composite/grid/grid-item.js";
 import { EQUIPMENTS_FIELDS } from "./assignment-constants.js";
 import { EMPTY_FIELD_VALUE } from "./assignment-utils.js";
 const comparatorStrIgnoreCase = (str1, str2) => {

package/dist/features/network-modifications/by-filter/assignment/modification-by-assignment-form.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Box, Grid } from "@mui/material";
+import { Box, Grid2 } from "@mui/material";
 import { useFormContext } from "react-hook-form";
 import "@mui/icons-material";
 import "react-intl";
@@ -34,7 +34,7 @@ import "../../../../components/ui/snackbarProvider/SnackbarProvider.js";
 import "mui-nested-menu";
 import "react-resizable-panels";
 import "react-papaparse";
-import GridItem from "../../../../components/composite/grid/grid-item.js";
+import { GridItem } from "../../../../components/composite/grid/grid-item.js";
 import AssignmentForm from "./assignment/assignment-form.js";
 import { getAssignmentInitialValue } from "./assignment/assignment-utils.js";
 import { EQUIPMENTS_FIELDS } from "./assignment/assignment-constants.js";
@@ -75,8 +75,8 @@ function ModificationByAssignmentForm() {
     }
   );
   return /* @__PURE__ */ jsxs(Box, { sx: mergeSx(unscrollableDialogStyles.unscrollableContainer, { height: "100%" }), children: [
-    /* @__PURE__ */ jsx(Grid, { container: true, sx: unscrollableDialogStyles.unscrollableHeader, children: /* @__PURE__ */ jsx(GridItem, { size: 3.15, children: equipmentTypeField }) }),
-    /* @__PURE__ */ jsx(Grid, { container: true, sx: unscrollableDialogStyles.scrollableContent, children: /* @__PURE__ */ jsx(GridItem, { size: 12, children: assignmentsField }) })
+    /* @__PURE__ */ jsx(Grid2, { container: true, sx: unscrollableDialogStyles.unscrollableHeader, children: /* @__PURE__ */ jsx(GridItem, { size: 3.15, children: equipmentTypeField }) }),
+    /* @__PURE__ */ jsx(Grid2, { container: true, sx: unscrollableDialogStyles.scrollableContent, children: /* @__PURE__ */ jsx(GridItem, { size: 12, children: assignmentsField }) })
   ] });
 }
 export {

package/dist/features/network-modifications/by-filter/deletion/ByFilterDeletionForm.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Grid } from "@mui/material";
+import { Grid2 } from "@mui/material";
 import { useCallback } from "react";
 import { useWatch, useFormContext } from "react-hook-form";
 import "@mui/icons-material";
@@ -45,8 +45,8 @@ function ByFilterDeletionForm() {
   const handleEquipmentTypeChange = useCallback(() => {
     setValue(FieldConstants.FILTERS, []);
   }, [setValue]);
-  return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, pt: 1, children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, pt: 1, children: [
+    /* @__PURE__ */ jsx(Grid2, { size: "grow", children: /* @__PURE__ */ jsx(
       AutocompleteInput,
       {
         isOptionEqualToValue: richTypeEquals,
@@ -58,7 +58,7 @@ function ByFilterDeletionForm() {
         size: "small"
       }
     ) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid2, { size: "grow", children: /* @__PURE__ */ jsx(
       DirectoryItemsInput,
       {
         name: FieldConstants.FILTERS,

package/dist/features/network-modifications/common/activePowerControl/ActivePowerControlForm.js

@@ -8,7 +8,7 @@ import { CustomTooltip } from "../../../../components/ui/tooltip/CustomTooltip.j
 import { FieldConstants } from "../../../../utils/constants/fieldConstants.js";
 import "../../../../utils/conversionUtils.js";
 import "../../../../utils/types/equipmentType.js";
-import GridItem from "../../../../components/composite/grid/grid-item.js";
+import { GridItem } from "../../../../components/composite/grid/grid-item.js";
 import "../../../../components/ui/overflowableText/OverflowableText.js";
 import "localized-countries";
 import "localized-countries/data/fr";

package/dist/features/network-modifications/common/connectivity/BranchConnectivityForm.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import GridSection from "../../../../components/composite/grid/grid-section.js";
+import { GridSection } from "../../../../components/composite/grid/grid-section.js";
 import { FieldConstants } from "../../../../utils/constants/fieldConstants.js";
 import "../../../../utils/conversionUtils.js";
 import "../../../../utils/types/equipmentType.js";

package/dist/features/network-modifications/common/connectivity/ConnectivityForm.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Grid } from "@mui/material";
+import { Grid2 } from "@mui/material";
 import { useMemo } from "react";
 import { useIntl } from "react-intl";
 import { FieldConstants } from "../../../../utils/constants/fieldConstants.js";
@@ -54,8 +54,8 @@ function ConnectivityForm({
     return previousValues.terminalConnected ? intl.formatMessage({ id: "connected" }) : intl.formatMessage({ id: "disconnected" });
   }, [intl, previousValues, isEquipmentModification]);
   const previousConnectionDirectionLabel = isEquipmentModification ? getConnectionDirectionLabel(previousValues?.connectablePosition?.connectionDirection) ?? null : null;
-  return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 8, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, children: [
+    /* @__PURE__ */ jsx(Grid2, { size: 8, children: /* @__PURE__ */ jsx(
       VoltageLevelConnectivityForm,
       {
         id,
@@ -67,7 +67,7 @@ function ConnectivityForm({
         fetchBusesOrBusbarSections
       }
     ) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: isEquipmentModification ? /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid2, { size: 4, children: isEquipmentModification ? /* @__PURE__ */ jsx(
       CheckboxNullableInput,
       {
         name: `${id}.${FieldConstants.CONNECTED}`,
@@ -75,7 +75,7 @@ function ConnectivityForm({
         previousValue: previousConnectedField ?? void 0
       }
     ) : /* @__PURE__ */ jsx(SwitchInput, { name: `${id}.${FieldConstants.CONNECTED}`, label: "connected" }) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
       TextInput,
       {
         name: `${id}.${FieldConstants.CONNECTION_NAME}`,
@@ -83,7 +83,7 @@ function ConnectivityForm({
         previousValue: isEquipmentModification ? previousValues?.connectablePosition?.connectionName ?? void 0 : void 0
       }
     ) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
       SelectInput,
       {
         name: `${id}.${FieldConstants.CONNECTION_DIRECTION}`,
@@ -96,7 +96,7 @@ function ConnectivityForm({
         size: "small"
       }
     ) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
       PositionForm,
       {
         id,

package/dist/features/network-modifications/common/connectivity/PositionForm.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { Grid, IconButton } from "@mui/material";
+import { Grid2, IconButton } from "@mui/material";
 import { ExploreOutlined, ExploreOffOutlined } from "@mui/icons-material";
 import { useState, useCallback, useMemo } from "react";
 import { useWatch } from "react-hook-form";
@@ -64,8 +64,8 @@ function PositionForm({
     }
     return "NoVoltageLevelPositionMessage";
   }, [isNodeBuilt, voltageLevelForPositionIcon]);
-  return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, children: [
+    /* @__PURE__ */ jsx(Grid2, { size: "grow", children: /* @__PURE__ */ jsx(
       IntegerInput,
       {
         name: `${id}.${FieldConstants.CONNECTION_POSITION}`,
@@ -75,7 +75,7 @@ function PositionForm({
       }
     ) }),
     PositionDiagramPane && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Grid, { item: true, xs: 1, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Grid2, { size: 1, children: /* @__PURE__ */ jsx(
         IconButton,
         {
           ...isNodeBuilt && voltageLevelForPositionIcon && { onClick: handleClickOpenDiagramPane },

package/dist/features/network-modifications/common/connectivity/VoltageLevelConnectivityForm.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Grid } from "@mui/material";
+import { Grid2 } from "@mui/material";
 import { useState, useRef, useCallback, useMemo, useEffect } from "react";
 import { useWatch } from "react-hook-form";
 import "@mui/icons-material";
@@ -107,8 +107,8 @@ function VoltageLevelConnectivityForm({
       setBusOrBusbarSectionOptions([]);
     }
   }, [fetchBusesOrBusbarSections, voltageLevelOptions, watchVoltageLevelId]);
-  return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, children: [
+    /* @__PURE__ */ jsx(Grid2, { size: "grow", children: /* @__PURE__ */ jsx(
       AutocompleteInput,
       {
         isOptionEqualToValue: areIdsEqual,
@@ -131,7 +131,7 @@ function VoltageLevelConnectivityForm({
         size: "small"
       }
     ) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid2, { size: "grow", children: /* @__PURE__ */ jsx(
       AutocompleteInput,
       {
         allowNewValue: true,

package/dist/features/network-modifications/common/measurements/BranchActiveReactivePowerMeasurementsForm.js

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { PowerMeasurementsForm } from "./PowerMeasurementsForm.js";
-import GridSection from "../../../../components/composite/grid/grid-section.js";
+import { GridSection } from "../../../../components/composite/grid/grid-section.js";
 function BranchActiveReactivePowerMeasurementsForm({
   equipmentToModify
 }) {

package/dist/features/network-modifications/common/measurements/BusbarSectionVoltageMeasurementsForm.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useFieldArray } from "react-hook-form";
-import { Grid2 } from "@mui/material";
+import { Stack, Grid2 } from "@mui/material";
 import { useIntl, FormattedMessage } from "react-intl";
 import { VoltageAdornment } from "../../../../utils/constants/adornments.js";
 import { FieldConstants } from "../../../../utils/constants/fieldConstants.js";
@@ -69,7 +69,7 @@ function BusbarSectionVoltageMeasurementsForm({
   });
   const intl = useIntl();
   const sortedFields = fields.map((field, i) => ({ ...field, originalIndex: i })).sort((a, b) => a.busbarSectionId.localeCompare(b.busbarSectionId));
-  return /* @__PURE__ */ jsxs(Grid2, { container: true, direction: "column", spacing: 1, children: [
+  return /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
     fields.length === 0 && /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(FormattedMessage, { id: "NoBusbarSectionFound" }) }),
     sortedFields.map((field) => {
       const { busbarSectionId: bbsId, originalIndex } = field;

package/dist/features/network-modifications/common/measurements/PowerMeasurementsForm.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Grid } from "@mui/material";
+import { Stack, Grid2 } from "@mui/material";
 import { PowerWithValidityForm } from "./PowerWithValidityForm.js";
 import { FieldConstants } from "../../../../utils/constants/fieldConstants.js";
 import "../../../../utils/conversionUtils.js";
@@ -31,8 +31,8 @@ function PowerMeasurementsForm({
     activePowerId = `${idPrefix}.${activePowerId}`;
     reactivePowerId = `${idPrefix}.${reactivePowerId}`;
   }
-  return /* @__PURE__ */ jsxs(Grid, { container: true, direction: "column", spacing: 2, children: [
-    !reactivePowerOnly && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Stack, { spacing: 2, children: [
+    !reactivePowerOnly && /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
       PowerWithValidityForm,
       {
         id: activePowerId,
@@ -40,7 +40,7 @@ function PowerMeasurementsForm({
         measurement: activePowerMeasurement
       }
     ) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
       PowerWithValidityForm,
       {
         id: reactivePowerId,

package/dist/features/network-modifications/common/measurements/PowerWithValidityForm.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { useIntl } from "react-intl";
-import { Grid } from "@mui/material";
+import { Grid2 } from "@mui/material";
 import { CheckboxNullableInput } from "../../../../components/ui/reactHookForm/CheckboxNullableInput.js";
 import "@mui/icons-material";
 import "../../../../components/ui/overflowableText/OverflowableText.js";
@@ -42,8 +42,8 @@ function PowerWithValidityForm({ id, field, measurement }) {
     }
     return measurement.validity ? intl.formatMessage({ id: "ValidMeasurement" }) : intl.formatMessage({ id: "InvalidMeasurement" });
   }, [intl, measurement?.validity]);
-  return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, children: [
+    /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
       FloatInput,
       {
         name: `${id}.${FieldConstants.VALUE}`,
@@ -53,7 +53,7 @@ function PowerWithValidityForm({ id, field, measurement }) {
         clearable: true
       }
     ) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid2, { children: /* @__PURE__ */ jsx(
       CheckboxNullableInput,
       {
         name: `${id}.${FieldConstants.VALIDITY}`,

package/dist/features/network-modifications/common/properties/PropertiesForm.js

@@ -3,7 +3,7 @@ import { useState, useEffect, useCallback } from "react";
 import { useWatch, useFormContext } from "react-hook-form";
 import { fetchPredefinedProperties, initializedProperty } from "./propertyUtils.js";
 import { PropertyForm } from "./PropertyForm.js";
-import GridSection from "../../../../components/composite/grid/grid-section.js";
+import { GridSection } from "../../../../components/composite/grid/grid-section.js";
 import { FieldConstants } from "../../../../utils/constants/fieldConstants.js";
 import "../../../../utils/conversionUtils.js";
 import "../../../../utils/types/equipmentType.js";

package/dist/features/network-modifications/common/properties/PropertyForm.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 } from "@mui/material";
+import { Grid2 } from "@mui/material";
 import { FieldConstants } from "../../../../utils/constants/fieldConstants.js";
 import "../../../../utils/conversionUtils.js";
 import "../../../../utils/types/equipmentType.js";
@@ -53,14 +53,14 @@ function PropertyForm({ name, index, predefinedProperties }) {
     return values.sort((a, b) => a.localeCompare(b));
   }, [watchPropertyName, predefinedProperties]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    watchPropertyDeletionMark || watchPropertyAdded === false && watchPropertyPreviousValue ? /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
+    watchPropertyDeletionMark || watchPropertyAdded === false && watchPropertyPreviousValue ? /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
       TextInput,
       {
         name: `${name}.${index}.${FieldConstants.NAME}`,
         label: "PropertyName",
         formProps: { disabled: true, ...italicFontTextField }
       }
-    ) }) : /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
+    ) }) : /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
       AutocompleteInput,
       {
         name: `${name}.${index}.${FieldConstants.NAME}`,
@@ -70,7 +70,7 @@ function PropertyForm({ name, index, predefinedProperties }) {
         allowNewValue: true
       }
     ) }),
-    watchPropertyDeletionMark ? /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
+    watchPropertyDeletionMark ? /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
       TextInput,
       {
         name: `${name}.${index}.${FieldConstants.VALUE}`,
@@ -78,7 +78,7 @@ function PropertyForm({ name, index, predefinedProperties }) {
         previousValue: watchPropertyPreviousValue,
         formProps: { disabled: true, ...italicFontTextField }
       }
-    ) }) : /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsx(
+    ) }) : /* @__PURE__ */ jsx(Grid2, { size: 4, children: /* @__PURE__ */ jsx(
       AutocompleteInput,
       {
         name: `${name}.${index}.${FieldConstants.VALUE}`,

package/dist/features/network-modifications/common/reactiveLimits/ReactiveLimitsForm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useWatch } from "react-hook-form";
-import { Grid } from "@mui/material";
+import { Grid2 } from "@mui/material";
 import { ReactiveCapabilityCurveTableForm } from "./reactiveCapabilityCurve/ReactiveCapabilityCurveTableForm.js";
 import { ReactivePowerAdornment } from "../../../../utils/constants/adornments.js";
 import { FieldConstants } from "../../../../utils/constants/fieldConstants.js";
@@ -34,7 +34,7 @@ import "../../../../components/ui/snackbarProvider/SnackbarProvider.js";
 import "mui-nested-menu";
 import "react-resizable-panels";
 import "react-papaparse";
-import GridItem from "../../../../components/composite/grid/grid-item.js";
+import { GridItem } from "../../../../components/composite/grid/grid-item.js";
 import { REACTIVE_LIMIT_TYPES } from "./reactiveLimits.utils.js";
 const headerIds = ["ActivePowerText", "MinimumReactivePower", "MaximumReactivePower"];
 function ReactiveLimitsForm({
@@ -85,7 +85,7 @@ function ReactiveLimitsForm({
       disabled: !isReactiveCapabilityCurveOn
     }
   );
-  return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
+  return /* @__PURE__ */ jsxs(Grid2, { container: true, spacing: 2, children: [
     /* @__PURE__ */ jsx(GridItem, { size: 12, children: reactiveCapabilityCurveChoiceRadioField }),
     !isReactiveCapabilityCurveOn && /* @__PURE__ */ jsx(GridItem, { size: 4, children: minimumReactivePowerField }),
     !isReactiveCapabilityCurveOn && /* @__PURE__ */ jsx(GridItem, { size: 4, children: maximumReactivePowerField }),

package/dist/features/network-modifications/common/reactiveLimits/reactiveCapabilityCurve/ReactiveCapabilityCurveRowForm.js

@@ -32,7 +32,7 @@ import "../../../../../components/ui/snackbarProvider/SnackbarProvider.js";
 import "mui-nested-menu";
 import "react-resizable-panels";
 import "react-papaparse";
-import GridItem from "../../../../../components/composite/grid/grid-item.js";
+import { GridItem } from "../../../../../components/composite/grid/grid-item.js";
 function ReactiveCapabilityCurveRowForm({
   id,
   index,