@opengeoweb/sigmet-airmet 9.30.0 → 9.31.0

package/index.esm.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default from 'react';
-import { FormControlLabel, Radio, Grid, Typography, Box, Button, Checkbox, MenuItem, FormHelperText, useTheme, Dialog, DialogTitle, DialogContent, Card, LinearProgress, List, ListItemButton, Backdrop, CircularProgress } from '@mui/material';
+import { FormControlLabel, Radio, Grid2, Typography, Box, Button, Checkbox, MenuItem, FormHelperText, useTheme, Dialog, DialogTitle, DialogContent, Card, LinearProgress, List, ListItemButton, Backdrop, CircularProgress } from '@mui/material';
 import { useFormContext } from 'react-hook-form';
 import { FORM_FIELDS_NAMESPACE, useDraftFormHelpers, ReactHookFormRadioGroup, hasValidGeometry, ReactHookFormSelect, ReactHookFormNumberField, isInteger, isValidMax, isValidMin, isEmpty, ReactHookFormDateTime, countIntersectionPoints, hasMulitpleIntersections, ReactHookFormHiddenInput, isMaximumOneDrawing, isValidGeoJsonCoordinates, hasIntersectionWithFIR, isXHoursBefore, isXHoursAfter, ReactHookFormTextField, isLatitude, isNonOrBothCoordinates, isLongitude, ReactHookFormFormControl, isGeometryDirty, ReactHookFormProvider, defaultFormOptions } from '@opengeoweb/form-fields';
 import { useApiContext, useApi, createApiInstance, createNonAuthApiInstance, createFakeApiInstance, ApiProvider } from '@opengeoweb/api';
@@ -2287,6 +2287,16 @@ var StartOrEndDrawing;
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
+const formStyles = {
+  '.MuiSelect-select.MuiInputBase-input.MuiFilledInput-input': {
+    paddingTop: '17px',
+    paddingBottom: '0px'
+  },
+  '.MuiInputBase-input.MuiFilledInput-input': {
+    paddingTop: '15px',
+    paddingBottom: '2px'
+  }
+};
 const styles$2 = {
   label: {
     fontSize: '0.875rem',
@@ -2297,10 +2307,10 @@ const styles$2 = {
     paddingTop: '17px'
   },
   containerItem: {
+    marginTop: -1,
     ' .MuiTypography-subtitle1': {
       marginTop: 1
     },
-    paddingTop: '8px!important',
     '+ .MuiGrid-item': {
       paddingTop: 0
     },
@@ -2316,13 +2326,19 @@ const styles$2 = {
     }
   },
   volcanicField: {
-    marginBottom: 2
+    marginBottom: '14px',
+    '.MuiFormHelperText-root': {
+      marginTop: '2px'
+    }
   },
   surfaceVisibility: {
     marginBottom: 2
   },
   surfaceWind: {
-    marginBottom: 2
+    marginBottom: 2,
+    ' .MuiFormHelperText-root': {
+      lineHeight: '1.33em'
+    }
   },
   levelField: {
     marginBottom: 2
@@ -2334,21 +2350,38 @@ const styles$2 = {
     width: '97%',
     '.MuiFormControl-root.MuiTextField-root': {
       margin: 0
+    },
+    '.MuiFormHelperText-root': {
+      marginTop: '3px',
+      lineHeight: '1.33em'
     }
   },
   unit: {
     width: '95%'
   },
   quitDrawModeMessage: {
-    paddingBottom: '10px',
     opacity: '1'
   },
   drawSection: {
-    '+ .MuiGrid-item': {
-      paddingTop: 5
+    ' .MuiTypography-subtitle1': {
+      marginTop: 1
+    },
+    '.MuiFormHelperText-root': {
+      marginTop: '-21px',
+      lineHeight: '1.33em'
     },
+    '.MuiFormHelperText-root.Mui-error': {
+      marginTop: '-21px',
+      marginBottom: '-10px',
+      lineHeight: '1.33em'
+    }
+  },
+  drawSectionProgress: {
     ' .MuiTypography-subtitle1': {
       marginTop: 1
+    },
+    '.MuiFormHelperText-root': {
+      marginTop: 0
     }
   },
   helperText: {
@@ -2449,16 +2482,14 @@ const ProductFormFieldLayout = _a => {
       children
     } = _a,
     props = __rest(_a, ["title", "children"]);
-  return jsxs(Grid, Object.assign({
-    item: true,
+  return jsxs(Grid2, Object.assign({
     container: true,
     spacing: 3
   }, props, {
-    children: [jsx(Grid, Object.assign({
-      item: true,
-      xs: 4,
+    children: [jsx(Grid2, Object.assign({
       container: true,
-      justifyContent: "flex-end"
+      justifyContent: "flex-end",
+      size: 4
     }, {
       children: title && jsx(Typography, Object.assign({
         variant: "subtitle1",
@@ -2466,11 +2497,10 @@ const ProductFormFieldLayout = _a => {
       }, {
         children: title
       }))
-    })), jsx(Grid, Object.assign({
-      item: true,
-      xs: 8,
+    })), jsx(Grid2, Object.assign({
       container: true,
-      justifyContent: "flex-start"
+      justifyContent: "flex-start",
+      size: 8
     }, {
       children: children
     }))]
@@ -2548,39 +2578,43 @@ const Change = ({
   const fieldsDisabled = isDisabled || isShortTest();
   return jsx(ProductFormFieldLayout, Object.assign({
     title: t('change'),
-    sx: styles$2.containerItem
+    sx: {
+      '.MuiButtonBase-root.MuiRadio-root': {
+        padding: '6px',
+        marginLeft: '3px'
+      },
+      '.MuiTypography-root.MuiTypography-subtitle1': {
+        marginTop: 1
+      },
+      marginTop: -1
+    }
   }, {
-    children: jsx(Grid, Object.assign({
-      item: true,
-      xs: 12
+    children: jsxs(ReactHookFormRadioGroup, Object.assign({
+      name: "change",
+      rules: {
+        validate: {
+          isRequired
+        }
+      },
+      disabled: fieldsDisabled,
+      isReadOnly: isReadOnly
     }, {
-      children: jsxs(ReactHookFormRadioGroup, Object.assign({
-        name: "change",
-        rules: {
-          validate: {
-            isRequired
-          }
-        },
+      children: [jsx(RadioButtonAndLabel, {
+        value: "WKN",
+        label: t('weakening'),
         disabled: fieldsDisabled,
-        isReadOnly: isReadOnly
-      }, {
-        children: [jsx(RadioButtonAndLabel, {
-          value: "WKN",
-          label: t('weakening'),
-          disabled: fieldsDisabled,
-          "data-testid": "change-WKN"
-        }), jsx(RadioButtonAndLabel, {
-          value: "NC",
-          label: t('no-change'),
-          disabled: fieldsDisabled,
-          "data-testid": "change-NC"
-        }), jsx(RadioButtonAndLabel, {
-          value: "INTSF",
-          label: t('intensifying'),
-          disabled: fieldsDisabled,
-          "data-testid": "change-INTSF"
-        })]
-      }))
+        "data-testid": "change-WKN"
+      }), jsx(RadioButtonAndLabel, {
+        value: "NC",
+        label: t('no-change'),
+        disabled: fieldsDisabled,
+        "data-testid": "change-NC"
+      }), jsx(RadioButtonAndLabel, {
+        value: "INTSF",
+        label: t('intensifying'),
+        disabled: fieldsDisabled,
+        "data-testid": "change-INTSF"
+      })]
     }))
   }));
 };
@@ -3557,33 +3591,29 @@ const DrawTools = ({
   onChangeTool,
   isDisabled: _isDisabled = false
 }) => {
-  return jsx(Grid, Object.assign({
-    item: true,
-    xs: 12,
-    container: true,
-    justifyContent: "space-between",
+  return jsx(Box, Object.assign({
     "data-testid": "drawtools",
-    spacing: 1
+    sx: {
+      display: 'flex',
+      width: '100%',
+      justifyContent: 'space-between'
+    }
   }, {
-    children: tools.map(tool => jsx(Grid, Object.assign({
-      item: true
+    children: tools.map(tool => jsx(CustomTooltip, Object.assign({
+      title: tool.title
     }, {
-      children: jsx(CustomTooltip, Object.assign({
-        title: tool.title
-      }, {
-        children: jsx(Radio, {
-          icon: getToolIcon(tool.selectionType),
-          value: true,
-          checkedIcon: getToolIcon(tool.selectionType),
-          checked: activeTool === tool.drawModeId,
-          disabled: _isDisabled,
-          onChange: () => {
-            onChangeTool(tool);
-          },
-          "data-testid": tool.drawModeId,
-          sx: styles$1.radioInput
-        })
-      }))
+      children: jsx(Radio, {
+        icon: getToolIcon(tool.selectionType),
+        value: true,
+        checkedIcon: getToolIcon(tool.selectionType),
+        checked: activeTool === tool.drawModeId,
+        disabled: _isDisabled,
+        onChange: () => {
+          onChangeTool(tool);
+        },
+        "data-testid": tool.drawModeId,
+        sx: styles$1.radioInput
+      })
     }), tool.drawModeId))
   }));
 };
@@ -3743,82 +3773,168 @@ const Levels = ({
   }, [getValues, isRadioactiveCloud, levelInfoMode, radioactiveCloudLevel, setValue, trigger, unregister]);
   return jsx(ProductFormFieldLayout, Object.assign({
     title: t('levels'),
-    sx: styles$2.containerItem
+    sx: Object.assign(Object.assign({}, styles$2.containerItem), {
+      '.MuiFormHelperText-root.Mui-error': {
+        marginBottom: '-16px'
+      }
+    })
   }, {
-    children: jsx(Grid, Object.assign({
-      item: true,
-      xs: 12
-    }, {
-      children: jsxs(ReactHookFormRadioGroup, Object.assign({
-        name: "levelInfoMode",
-        rules: {
-          validate: {
-            isRequired
-          }
-        },
-        disabled: fieldsDisabled,
-        isReadOnly: isReadOnly,
-        onChange: () => {
-          // Reset default value for the level value to '' so when it rerenders it uses this empty default value
-          setValue('level.unit', 'FL');
-          setValue('level.value', null);
-          // Clear out errors for the levels
-          clearErrors(['level', 'lowerLevel']);
+    children: jsxs(ReactHookFormRadioGroup, Object.assign({
+      name: "levelInfoMode",
+      rules: {
+        validate: {
+          isRequired
         }
+      },
+      disabled: fieldsDisabled,
+      isReadOnly: isReadOnly,
+      onChange: () => {
+        // Reset default value for the level value to '' so when it rerenders it uses this empty default value
+        setValue('level.unit', 'FL');
+        setValue('level.value', null);
+        // Clear out errors for the levels
+        clearErrors(['level', 'lowerLevel']);
+      }
+    }, {
+      children: [jsx(RadioButtonAndLabel, {
+        value: "AT",
+        label: t('at'),
+        checked: levelInfoMode === 'AT' || levelInfoMode === 'TOPS',
+        "data-testid": "levels-AT",
+        disabled: fieldsDisabled
+      }), (levelInfoMode === 'AT' || levelInfoMode === 'TOPS') && !isRadioactiveCloud ? jsxs(Grid2, Object.assign({
+        container: true,
+        spacing: 2,
+        justifyItems: "flex-end",
+        alignItems: "flex-start"
       }, {
-        children: [jsx(RadioButtonAndLabel, {
-          value: "AT",
-          label: t('at'),
-          checked: levelInfoMode === 'AT' || levelInfoMode === 'TOPS',
-          "data-testid": "levels-AT",
-          disabled: fieldsDisabled
-        }), (levelInfoMode === 'AT' || levelInfoMode === 'TOPS') && !isRadioactiveCloud ? jsxs(Grid, Object.assign({
-          item: true,
-          xs: 12,
-          container: true,
-          spacing: 2,
-          justifyItems: "flex-end",
-          alignItems: "flex-end"
-        }, {
-          children: [jsx(Grid, Object.assign({
-            item: true,
+        children: [jsx(Grid2, Object.assign({
+          size: {
             xs: 12,
             md: 3
-          }, {
-            children: jsx(FormControlLabel, {
-              control: jsx(Checkbox, {
-                checked: levelInfoMode === 'TOPS',
-                onChange: () => {
-                  setValue('levelInfoMode', getValues('levelInfoMode') === 'AT' ? 'TOPS' : 'AT', {
-                    shouldDirty: true
-                  });
-                },
-                color: "secondary",
-                disabled: isDisabled
-              }),
-              "data-testid": "levels-TOPS",
-              label: t('levels-tops-label')
-            })
-          })), jsx(Grid, Object.assign({
-            item: true,
+          }
+        }, {
+          children: jsx(FormControlLabel, {
+            control: jsx(Checkbox, {
+              checked: levelInfoMode === 'TOPS',
+              onChange: () => {
+                setValue('levelInfoMode', getValues('levelInfoMode') === 'AT' ? 'TOPS' : 'AT', {
+                  shouldDirty: true
+                });
+              },
+              color: "secondary",
+              disabled: isDisabled
+            }),
+            "data-testid": "levels-TOPS",
+            label: t('levels-tops-label')
+          })
+        })), jsx(Grid2, Object.assign({
+          size: {
             xs: 4,
             md: 3
+          }
+        }, {
+          children: jsx(ReactHookFormSelect, Object.assign({
+            name: "level.unit",
+            label: t('unit-label'),
+            rules: {
+              validate: {
+                isRequired
+              }
+            },
+            sx: styles$2.unit,
+            size: "small",
+            disabled: isDisabled,
+            isReadOnly: isReadOnly,
+            defaultValue: 'FL',
+            onChange: () => {
+              triggerValidations(['level.value'], getValues, trigger);
+              _onChange();
+            }
+          }, {
+            children: Object.keys(allowedLevelUnitsForFir).map(key => jsx(MenuItem, Object.assign({
+              value: key
+            }, {
+              children: allowedLevelUnitsForFir[key]
+            }), key))
+          }))
+        })), jsx(Grid2, Object.assign({
+          size: {
+            xs: 8,
+            md: 6
+          }
+        }, {
+          children: jsx(ReactHookFormNumberField, {
+            name: "level.value",
+            "data-testid": "level.value",
+            label: t('level'),
+            rules: {
+              validate: {
+                isRequired,
+                isInteger,
+                max: value =>
+                // The max level depends on the unit
+                isValidMax(value, getMaxLevelValue(getValues('level.unit'), getFIRValue(), productConfig)) || t('levels-the-maximum-level', {
+                  levelUnit: LevelUnits[getValues('level.unit')],
+                  maxLevelValue: getMaxLevelValue(getValues('level.unit'), getFIRValue(), productConfig)
+                }),
+                min: value =>
+                // The min level depends on the unit
+                isValidMin(value, getMinLevelValue(getValues('level.unit'), getFIRValue(), productConfig)) || t('levels-the-minimum-level', {
+                  levelUnit: LevelUnits[getValues('level.unit')],
+                  minLevelValue: getMinLevelValue(getValues('level.unit'), getFIRValue(), productConfig)
+                }),
+                validateLevels: value =>
+                // level step depends on the unit
+                validateLevels(value, getValues('level.unit'), productConfig, getFIRValue())
+              }
+            },
+            size: "small",
+            disabled: isDisabled,
+            isReadOnly: isReadOnly,
+            autoFocus: true
+          })
+        }))]
+      })) : null, jsx(RadioButtonAndLabel, {
+        value: "BETW",
+        label: t('between'),
+        checked: levelInfoMode === 'BETW' || levelInfoMode === 'BETW_SFC',
+        "data-testid": "levels-BETW",
+        disabled: fieldsDisabled
+      }), levelInfoMode === 'BETW' || levelInfoMode === 'BETW_SFC' ? jsxs(Fragment, {
+        children: [jsxs(Grid2, Object.assign({
+          container: true,
+          spacing: 2
+        }, {
+          children: [jsx(Grid2, {
+            size: {
+              xs: 12,
+              md: 3
+            }
+          }), jsx(Grid2, Object.assign({
+            size: {
+              xs: 4,
+              md: 3
+            }
           }, {
             children: jsx(ReactHookFormSelect, Object.assign({
               name: "level.unit",
               label: t('unit-label'),
               rules: {
                 validate: {
-                  isRequired
+                  isRequired,
+                  validateLevelUnitCombinations: value =>
+                  // level step depends on the unit
+                  validateLevelUnitCombinations(value, levelInfoMode === 'BETW_SFC' ? 'SFC' : getValues('lowerLevel.unit'), t) === true
                 }
               },
-              sx: styles$2.unit,
               size: "small",
-              disabled: isDisabled,
+              sx: styles$2.unit,
+              disabled: fieldsDisabled,
               isReadOnly: isReadOnly,
               defaultValue: 'FL',
               onChange: () => {
-                triggerValidations(['level.value'], getValues, trigger);
+                triggerValidations(['level.value', 'lowerLevel.value', 'lowerLevel.unit'], getValues, trigger);
                 _onChange();
               }
             }, {
@@ -3828,15 +3944,18 @@ const Levels = ({
                 children: allowedLevelUnitsForFir[key]
               }), key))
             }))
-          })), jsx(Grid, Object.assign({
-            item: true,
-            xs: 8,
-            md: 6
+          })), jsx(Grid2, Object.assign({
+            size: {
+              xs: 8,
+              md: 6
+            }
           }, {
             children: jsx(ReactHookFormNumberField, {
+              value: level || '',
               name: "level.value",
-              "data-testid": "level.value",
-              label: t('level'),
+              label: t('levels-upper-level-label'),
+              sx: styles$2.levelField,
+              size: "small",
               rules: {
                 validate: {
                   isRequired,
@@ -3858,52 +3977,67 @@ const Levels = ({
                   validateLevels(value, getValues('level.unit'), productConfig, getFIRValue())
                 }
               },
-              size: "small",
-              disabled: isDisabled,
+              disabled: fieldsDisabled,
               isReadOnly: isReadOnly,
+              onChange: () => {
+                triggerValidations(['lowerLevel.value'], getValues, trigger);
+              },
               autoFocus: true
             })
           }))]
-        })) : null, jsx(RadioButtonAndLabel, {
-          value: "BETW",
-          label: t('between'),
-          checked: levelInfoMode === 'BETW' || levelInfoMode === 'BETW_SFC',
-          "data-testid": "levels-BETW",
-          disabled: fieldsDisabled
-        }), levelInfoMode === 'BETW' || levelInfoMode === 'BETW_SFC' ? jsxs(Fragment, {
-          children: [jsxs(Grid, Object.assign({
-            item: true,
-            xs: 12,
-            container: true,
-            spacing: 2
-          }, {
-            children: [jsx(Grid, {
-              item: true,
+        })), jsxs(Grid2, Object.assign({
+          container: true,
+          spacing: 2,
+          justifyItems: "flex-end",
+          alignItems: "flex-start"
+        }, {
+          children: [jsx(Grid2, Object.assign({
+            size: {
               xs: 12,
               md: 3
-            }), jsx(Grid, Object.assign({
-              item: true,
-              xs: 4,
-              md: 3
+            }
+          }, {
+            children: jsx(FormControlLabel, {
+              control: jsx(Checkbox, {
+                checked: levelInfoMode === 'BETW_SFC',
+                onChange: () => {
+                  getValues('level.unit') && trigger('level.unit');
+                  setValue('levelInfoMode', getValues('levelInfoMode') === 'BETW' ? 'BETW_SFC' : 'BETW', {
+                    shouldDirty: true
+                  });
+                },
+                name: "checkedF",
+                color: "secondary",
+                disabled: fieldsDisabled
+              }),
+              "data-testid": "levels-SFC",
+              label: "SFC"
+            })
+          })), levelInfoMode !== 'BETW_SFC' && jsxs(Fragment, {
+            children: [jsx(Grid2, Object.assign({
+              size: {
+                xs: 4,
+                md: 3
+              }
             }, {
               children: jsx(ReactHookFormSelect, Object.assign({
-                name: "level.unit",
+                name: "lowerLevel.unit",
                 label: t('unit-label'),
                 rules: {
                   validate: {
                     isRequired,
                     validateLevelUnitCombinations: value =>
                     // level step depends on the unit
-                    validateLevelUnitCombinations(value, levelInfoMode === 'BETW_SFC' ? 'SFC' : getValues('lowerLevel.unit'), t) === true
+                    validateLevelUnitCombinations(getValues('level.unit'), value, t)
                   }
                 },
                 size: "small",
                 sx: styles$2.unit,
-                disabled: fieldsDisabled,
+                disabled: isDisabled,
                 isReadOnly: isReadOnly,
-                defaultValue: 'FL',
+                defaultValue: getValues('level.unit') || 'FL',
                 onChange: () => {
-                  triggerValidations(['level.value', 'lowerLevel.value', 'lowerLevel.unit'], getValues, trigger);
+                  triggerValidations(['lowerLevel.value', 'level.unit'], getValues, trigger);
                   _onChange();
                 }
               }, {
@@ -3913,245 +4047,144 @@ const Levels = ({
                   children: allowedLevelUnitsForFir[key]
                 }), key))
               }))
-            })), jsx(Grid, Object.assign({
-              item: true,
-              xs: 8,
-              md: 6
+            })), jsx(Grid2, Object.assign({
+              size: {
+                xs: 8,
+                md: 6
+              }
             }, {
               children: jsx(ReactHookFormNumberField, {
-                value: level || '',
-                name: "level.value",
-                label: t('levels-upper-level-label'),
-                sx: styles$2.levelField,
-                size: "small",
+                name: "lowerLevel.value",
+                label: t('levels-lower-level-label'),
                 rules: {
                   validate: {
                     isRequired,
                     isInteger,
                     max: value =>
                     // The max level depends on the unit
-                    isValidMax(value, getMaxLevelValue(getValues('level.unit'), getFIRValue(), productConfig)) || t('levels-the-maximum-level', {
-                      levelUnit: LevelUnits[getValues('level.unit')],
-                      maxLevelValue: getMaxLevelValue(getValues('level.unit'), getFIRValue(), productConfig)
+                    isValidMax(value, getMaxLevelValue(getValues('lowerLevel.unit'), getFIRValue(), productConfig)) || t('levels-the-maximum-level', {
+                      levelUnit: LevelUnits[getValues('lowerLevel.unit')],
+                      maxLevelValue: getMaxLevelValue(getValues('lowerLevel.unit'), getFIRValue(), productConfig)
                     }),
                     min: value =>
                     // The min level depends on the unit
-                    isValidMin(value, getMinLevelValue(getValues('level.unit'), getFIRValue(), productConfig)) || t('levels-the-minimum-level', {
-                      levelUnit: LevelUnits[getValues('level.unit')],
-                      minLevelValue: getMinLevelValue(getValues('level.unit'), getFIRValue(), productConfig)
+                    isValidMin(value, getMinLevelValue(getValues('lowerLevel.unit'), getFIRValue(), productConfig)) || t('levels-the-minimum-level', {
+                      levelUnit: LevelUnits[getValues('lowerLevel.unit')],
+                      minLevelValue: getMinLevelValue(getValues('lowerLevel.unit'), getFIRValue(), productConfig)
                     }),
+                    isLevelLower: value =>
+                    // The lower level needs to be smaller than upper level
+                    isLevelLower(value, getValues('lowerLevel.unit'), getValues('level.value'), getValues('level.unit')),
                     validateLevels: value =>
                     // level step depends on the unit
-                    validateLevels(value, getValues('level.unit'), productConfig, getFIRValue())
+                    validateLevels(value, getValues('lowerLevel.unit'), productConfig, getFIRValue())
                   }
                 },
-                disabled: fieldsDisabled,
-                isReadOnly: isReadOnly,
-                onChange: () => {
-                  triggerValidations(['lowerLevel.value'], getValues, trigger);
-                },
-                autoFocus: true
+                size: "small",
+                disabled: isDisabled,
+                isReadOnly: isReadOnly
               })
             }))]
-          })), jsxs(Grid, Object.assign({
-            item: true,
-            xs: 12,
-            container: true,
-            spacing: 2,
-            justifyItems: "flex-end",
-            alignItems: "flex-end"
-          }, {
-            children: [jsx(Grid, Object.assign({
-              item: true,
-              xs: 12,
-              md: 3
-            }, {
-              children: jsx(FormControlLabel, {
-                control: jsx(Checkbox, {
-                  checked: levelInfoMode === 'BETW_SFC',
-                  onChange: () => {
-                    getValues('level.unit') && trigger('level.unit');
-                    setValue('levelInfoMode', getValues('levelInfoMode') === 'BETW' ? 'BETW_SFC' : 'BETW', {
-                      shouldDirty: true
-                    });
-                  },
-                  name: "checkedF",
-                  color: "secondary",
-                  disabled: fieldsDisabled
-                }),
-                "data-testid": "levels-SFC",
-                label: "SFC"
-              })
-            })), levelInfoMode !== 'BETW_SFC' && jsxs(Fragment, {
-              children: [jsx(Grid, Object.assign({
-                item: true,
-                xs: 4,
-                md: 3
-              }, {
-                children: jsx(ReactHookFormSelect, Object.assign({
-                  name: "lowerLevel.unit",
-                  label: t('unit-label'),
-                  rules: {
-                    validate: {
-                      isRequired,
-                      validateLevelUnitCombinations: value =>
-                      // level step depends on the unit
-                      validateLevelUnitCombinations(getValues('level.unit'), value, t)
-                    }
-                  },
-                  size: "small",
-                  sx: styles$2.unit,
-                  disabled: isDisabled,
-                  isReadOnly: isReadOnly,
-                  defaultValue: getValues('level.unit') || 'FL',
-                  onChange: () => {
-                    triggerValidations(['lowerLevel.value', 'level.unit'], getValues, trigger);
-                    _onChange();
-                  }
-                }, {
-                  children: Object.keys(allowedLevelUnitsForFir).map(key => jsx(MenuItem, Object.assign({
-                    value: key
-                  }, {
-                    children: allowedLevelUnitsForFir[key]
-                  }), key))
-                }))
-              })), jsx(Grid, Object.assign({
-                item: true,
-                xs: 8,
-                md: 6
-              }, {
-                children: jsx(ReactHookFormNumberField, {
-                  name: "lowerLevel.value",
-                  label: t('levels-lower-level-label'),
-                  rules: {
-                    validate: {
-                      isRequired,
-                      isInteger,
-                      max: value =>
-                      // The max level depends on the unit
-                      isValidMax(value, getMaxLevelValue(getValues('lowerLevel.unit'), getFIRValue(), productConfig)) || t('levels-the-maximum-level', {
-                        levelUnit: LevelUnits[getValues('lowerLevel.unit')],
-                        maxLevelValue: getMaxLevelValue(getValues('lowerLevel.unit'), getFIRValue(), productConfig)
-                      }),
-                      min: value =>
-                      // The min level depends on the unit
-                      isValidMin(value, getMinLevelValue(getValues('lowerLevel.unit'), getFIRValue(), productConfig)) || t('levels-the-minimum-level', {
-                        levelUnit: LevelUnits[getValues('lowerLevel.unit')],
-                        minLevelValue: getMinLevelValue(getValues('lowerLevel.unit'), getFIRValue(), productConfig)
-                      }),
-                      isLevelLower: value =>
-                      // The lower level needs to be smaller than upper level
-                      isLevelLower(value, getValues('lowerLevel.unit'), getValues('level.value'), getValues('level.unit')),
-                      validateLevels: value =>
-                      // level step depends on the unit
-                      validateLevels(value, getValues('lowerLevel.unit'), productConfig, getFIRValue())
-                    }
-                  },
-                  size: "small",
-                  disabled: isDisabled,
-                  isReadOnly: isReadOnly
-                })
-              }))]
-            })]
-          }))]
-        }) : null, jsx(RadioButtonAndLabel, {
-          value: "ABV",
-          label: t('above'),
-          disabled: fieldsDisabled,
-          checked: levelInfoMode === 'ABV' || levelInfoMode === 'TOPS_ABV',
-          "data-testid": "levels-ABV"
-        }), levelInfoMode === 'ABV' || levelInfoMode === 'TOPS_ABV' ? jsxs(Grid, Object.assign({
-          item: true,
-          xs: 12,
-          container: true,
-          spacing: 2,
-          justifyItems: "flex-end",
-          alignItems: "flex-end"
-        }, {
-          children: [jsx(Grid, Object.assign({
-            item: true,
+          })]
+        }))]
+      }) : null, jsx(RadioButtonAndLabel, {
+        value: "ABV",
+        label: t('above'),
+        disabled: fieldsDisabled,
+        checked: levelInfoMode === 'ABV' || levelInfoMode === 'TOPS_ABV',
+        "data-testid": "levels-ABV"
+      }), levelInfoMode === 'ABV' || levelInfoMode === 'TOPS_ABV' ? jsxs(Grid2, Object.assign({
+        container: true,
+        spacing: 2,
+        justifyItems: "flex-end",
+        alignItems: "flex-start"
+      }, {
+        children: [jsx(Grid2, Object.assign({
+          size: {
             xs: 12,
             md: 3
-          }, {
-            children: jsx(FormControlLabel, {
-              control: jsx(Checkbox, {
-                checked: levelInfoMode === 'TOPS_ABV',
-                onChange: () => {
-                  setValue('levelInfoMode', getValues('levelInfoMode') === 'ABV' ? 'TOPS_ABV' : 'ABV', {
-                    shouldDirty: true
-                  });
-                },
-                disabled: isDisabled
-              }),
-              label: t('levels-tops-label'),
-              "data-testid": "levels-TOPS_ABV"
-            })
-          })), jsx(Grid, Object.assign({
-            item: true,
+          }
+        }, {
+          children: jsx(FormControlLabel, {
+            control: jsx(Checkbox, {
+              checked: levelInfoMode === 'TOPS_ABV',
+              onChange: () => {
+                setValue('levelInfoMode', getValues('levelInfoMode') === 'ABV' ? 'TOPS_ABV' : 'ABV', {
+                  shouldDirty: true
+                });
+              },
+              disabled: isDisabled
+            }),
+            label: t('levels-tops-label'),
+            "data-testid": "levels-TOPS_ABV"
+          })
+        })), jsx(Grid2, Object.assign({
+          size: {
             xs: 4,
             md: 3
-          }, {
-            children: jsx(ReactHookFormSelect, Object.assign({
-              name: "level.unit",
-              label: t('unit-label'),
-              rules: {
-                validate: {
-                  isRequired
-                }
-              },
-              size: "small",
-              sx: styles$2.unit,
-              disabled: isDisabled,
-              isReadOnly: isReadOnly,
-              defaultValue: 'FL',
-              onChange: () => {
-                triggerValidations(['level.value'], getValues, trigger);
-                _onChange();
+          }
+        }, {
+          children: jsx(ReactHookFormSelect, Object.assign({
+            name: "level.unit",
+            label: t('unit-label'),
+            rules: {
+              validate: {
+                isRequired
               }
-            }, {
-              children: Object.keys(allowedLevelUnitsForFir).map(key => jsx(MenuItem, Object.assign({
-                value: key
-              }, {
-                children: allowedLevelUnitsForFir[key]
-              }), key))
-            }))
-          })), jsx(Grid, Object.assign({
-            item: true,
-            xs: 8,
-            md: 6
-          }, {
-            children: jsx(ReactHookFormNumberField, {
-              name: "level.value",
-              label: t('level'),
-              rules: {
-                validate: {
-                  isRequired,
-                  isInteger,
-                  max: value =>
-                  // The max level depends on the unit
-                  isValidMax(value, getMaxLevelValue(getValues('level.unit'), getFIRValue(), productConfig)) || t('levels-the-maximum-level', {
-                    levelUnit: LevelUnits[getValues('level.unit')],
-                    maxLevelValue: getMaxLevelValue(getValues('level.unit'), getFIRValue(), productConfig)
-                  }),
-                  min: value =>
-                  // The min level depends on the unit
-                  isValidMin(value, getMinLevelValue(getValues('level.unit'), getFIRValue(), productConfig)) || t('levels-the-minimum-level', {
-                    levelUnit: LevelUnits[getValues('level.unit')],
-                    minLevelValue: getMinLevelValue(getValues('level.unit'), getFIRValue(), productConfig)
-                  }),
-                  validateLevels: value =>
-                  // level step depends on the unit
-                  validateLevels(value, getValues('level.unit'), productConfig, getFIRValue())
-                }
-              },
-              size: "small",
-              disabled: isDisabled,
-              isReadOnly: isReadOnly,
-              autoFocus: true
-            })
-          }))]
-        })) : null]
-      }))
+            },
+            size: "small",
+            sx: styles$2.unit,
+            disabled: isDisabled,
+            isReadOnly: isReadOnly,
+            defaultValue: 'FL',
+            onChange: () => {
+              triggerValidations(['level.value'], getValues, trigger);
+              _onChange();
+            }
+          }, {
+            children: Object.keys(allowedLevelUnitsForFir).map(key => jsx(MenuItem, Object.assign({
+              value: key
+            }, {
+              children: allowedLevelUnitsForFir[key]
+            }), key))
+          }))
+        })), jsx(Grid2, Object.assign({
+          size: {
+            xs: 8,
+            md: 6
+          }
+        }, {
+          children: jsx(ReactHookFormNumberField, {
+            name: "level.value",
+            label: t('level'),
+            rules: {
+              validate: {
+                isRequired,
+                isInteger,
+                max: value =>
+                // The max level depends on the unit
+                isValidMax(value, getMaxLevelValue(getValues('level.unit'), getFIRValue(), productConfig)) || t('levels-the-maximum-level', {
+                  levelUnit: LevelUnits[getValues('level.unit')],
+                  maxLevelValue: getMaxLevelValue(getValues('level.unit'), getFIRValue(), productConfig)
+                }),
+                min: value =>
+                // The min level depends on the unit
+                isValidMin(value, getMinLevelValue(getValues('level.unit'), getFIRValue(), productConfig)) || t('levels-the-minimum-level', {
+                  levelUnit: LevelUnits[getValues('level.unit')],
+                  minLevelValue: getMinLevelValue(getValues('level.unit'), getFIRValue(), productConfig)
+                }),
+                validateLevels: value =>
+                // level step depends on the unit
+                validateLevels(value, getValues('level.unit'), productConfig, getFIRValue())
+              }
+            },
+            size: "small",
+            disabled: isDisabled,
+            isReadOnly: isReadOnly,
+            autoFocus: true
+          })
+        }))]
+      })) : null]
     }))
   }));
 };
@@ -4178,10 +4211,14 @@ const ObservationForecast = ({
   const fieldsDisabled = isDisabled || isShortTest();
   return jsx(ProductFormFieldLayout, Object.assign({
     sx: {
-      paddingTop: '8px!important',
+      marginTop: -1,
       '.MuiButtonBase-root.MuiRadio-root': {
         padding: '6px',
         marginLeft: '3px'
+      },
+      '.MuiFormHelperText-root.Mui-error': {
+        marginBottom: '-16px',
+        marginTop: '3px'
       }
     }
   }, {
@@ -4294,7 +4331,13 @@ const Phenomenon = ({
     handleSinglePhenomenaSelection();
   }
   return jsx(ProductFormFieldLayout, Object.assign({
-    title: t('phenomenon-title')
+    title: t('phenomenon-title'),
+    sx: {
+      '.MuiFormHelperText-root.Mui-error': {
+        marginBottom: '-22px',
+        marginTop: '2px'
+      }
+    }
   }, {
     children: jsx(ReactHookFormSelect, Object.assign({
       name: "phenomenon",
@@ -4423,222 +4466,209 @@ const Progress = ({
   const showMaxFeaturePointsWarning = intersectionPointCount > 7 && hasMaxFeaturePoints(geoJSONIntersection, maxPoints) && !activeTool && !errors.startGeometry && !isFir(geoJSON);
   const showMoreThan6PointsWarning = totalDrawnPoints > 7 && intersectionPointCount < 1 && !activeTool && !errors.startGeometry && !isFir(geoJSON);
   const showIntersectionAbove6PointsWarning = intersectingPolygonPointsTotal > 7 && intersectionPointCount > 1 && maxPoints > 7 && !activeTool && !errors.startGeometry && !isFir(geoJSON);
-  return jsx(ProductFormFieldLayout, Object.assign({
+  return jsxs(ProductFormFieldLayout, Object.assign({
     title: t('progress'),
     sx: styles$2.containerItem
   }, {
-    children: jsxs(Grid, Object.assign({
-      item: true,
-      xs: 12
-    }, {
-      children: [jsxs(ReactHookFormRadioGroup, Object.assign({
-        name: "movementType",
-        "data-testid": "movementType-group",
-        rules: {
-          validate: {
-            isRequired
-          }
-        },
-        isReadOnly: _isReadOnly,
-        onChange: () => {
-          const deleteTool = _tools === null || _tools === void 0 ? void 0 : _tools.find(tool => tool.value === 'DELETE');
-          if (deleteTool) {
-            _onChangeTool(deleteTool);
-          }
+    children: [jsxs(ReactHookFormRadioGroup, Object.assign({
+      name: "movementType",
+      "data-testid": "movementType-group",
+      rules: {
+        validate: {
+          isRequired
         }
-      }, {
-        children: [isVolcanicCloud && jsx(RadioButtonAndLabel, {
-          value: "NO_VA_EXP",
-          label: t('progress-radio-button-label-no-va-exp'),
+      },
+      isReadOnly: _isReadOnly,
+      onChange: () => {
+        const deleteTool = _tools === null || _tools === void 0 ? void 0 : _tools.find(tool => tool.value === 'DELETE');
+        if (deleteTool) {
+          _onChangeTool(deleteTool);
+        }
+      }
+    }, {
+      children: [isVolcanicCloud && jsx(RadioButtonAndLabel, {
+        value: "NO_VA_EXP",
+        label: t('progress-radio-button-label-no-va-exp'),
+        disabled: fieldsDisabled,
+        "data-testid": "movementType-NO_VA_EXP"
+      }), jsxs(Fragment, {
+        children: [jsx(RadioButtonAndLabel, {
+          value: "STATIONARY",
+          label: t('progress-radio-button-label-stationary'),
           disabled: fieldsDisabled,
-          "data-testid": "movementType-NO_VA_EXP"
-        }), jsxs(Fragment, {
-          children: [jsx(RadioButtonAndLabel, {
-            value: "STATIONARY",
-            label: t('progress-radio-button-label-stationary'),
-            disabled: fieldsDisabled,
-            "data-testid": "movementType-STATIONARY"
-          }), jsx(RadioButtonAndLabel, {
-            value: "MOVEMENT",
-            label: t('progress-radio-button-label-movement'),
-            disabled: fieldsDisabled,
-            "data-testid": "movementType-MOVEMENT"
-          }), isSigmet && isShortTestOrRdoact && jsx(RadioButtonAndLabel, {
-            value: "FORECAST_POSITION",
-            label: t('progress-radio-button-label-end-potision'),
-            disabled: fieldsDisabled,
-            "data-testid": "movementType-FORECAST_POSITION"
-          })]
-        }), movementType === 'MOVEMENT' && !isShortTestOrRdoact && jsxs(Fragment, {
-          children: [jsx(Grid, Object.assign({
-            item: true,
-            xs: 12
+          "data-testid": "movementType-STATIONARY"
+        }), jsx(RadioButtonAndLabel, {
+          value: "MOVEMENT",
+          label: t('progress-radio-button-label-movement'),
+          disabled: fieldsDisabled,
+          "data-testid": "movementType-MOVEMENT"
+        }), isSigmet && isShortTestOrRdoact && jsx(RadioButtonAndLabel, {
+          value: "FORECAST_POSITION",
+          label: t('progress-radio-button-label-end-potision'),
+          disabled: fieldsDisabled,
+          "data-testid": "movementType-FORECAST_POSITION"
+        })]
+      }), movementType === 'MOVEMENT' && !isShortTestOrRdoact && jsxs(Fragment, {
+        children: [jsx(Grid2, {
+          children: jsx(ReactHookFormSelect, Object.assign({
+            name: "movementDirection",
+            label: t('progress-movement-direction-label'),
+            rules: {
+              validate: {
+                isRequired
+              }
+            },
+            size: "small",
+            sx: styles$2.movement,
+            disabled: _isDisabled,
+            isReadOnly: _isReadOnly,
+            "data-testid": "movement-movementDirection",
+            onChange: event => {
+              event.stopPropagation();
+              _onChange();
+            },
+            autoFocus: true
+          }, {
+            children: Object.keys(Direction).map(key => jsx(MenuItem, Object.assign({
+              value: key
+            }, {
+              children: Direction[key]
+            }), key))
+          }))
+        }), jsxs(Grid2, Object.assign({
+          container: true
+        }, {
+          children: [jsx(Grid2, Object.assign({
+            size: 5
           }, {
             children: jsx(ReactHookFormSelect, Object.assign({
-              name: "movementDirection",
-              label: t('progress-movement-direction-label'),
+              name: "movementUnit",
+              label: t('progress-movement-unit-label'),
               rules: {
                 validate: {
                   isRequired
                 }
               },
               size: "small",
-              sx: styles$2.movement,
+              sx: styles$2.unit,
               disabled: _isDisabled,
               isReadOnly: _isReadOnly,
-              "data-testid": "movement-movementDirection",
+              defaultValue: 'KT',
+              "data-testid": "movement-movementUnit",
               onChange: event => {
                 event.stopPropagation();
+                triggerValidations(['movementSpeed'], getValues, trigger);
                 _onChange();
-              },
-              autoFocus: true
+              }
             }, {
-              children: Object.keys(Direction).map(key => jsx(MenuItem, Object.assign({
+              children: Object.keys(allowedMovementUnitsForFir).map(key => jsx(MenuItem, Object.assign({
                 value: key
               }, {
-                children: Direction[key]
+                children: MovementUnit[key]
               }), key))
             }))
-          })), jsxs(Grid, Object.assign({
-            item: true,
-            xs: 12,
-            container: true
+          })), jsx(Grid2, Object.assign({
+            size: 7
           }, {
-            children: [jsx(Grid, Object.assign({
-              item: true,
-              xs: 5
-            }, {
-              children: jsx(ReactHookFormSelect, Object.assign({
-                name: "movementUnit",
-                label: t('progress-movement-unit-label'),
-                rules: {
-                  validate: {
-                    isRequired
-                  }
-                },
-                size: "small",
-                sx: styles$2.unit,
-                disabled: _isDisabled,
-                isReadOnly: _isReadOnly,
-                defaultValue: 'KT',
-                "data-testid": "movement-movementUnit",
-                onChange: event => {
-                  event.stopPropagation();
-                  triggerValidations(['movementSpeed'], getValues, trigger);
-                  _onChange();
+            children: jsx(ReactHookFormNumberField, {
+              name: "movementSpeed",
+              label: t('progress-movement-speed-label'),
+              rules: {
+                validate: {
+                  isRequired,
+                  isInteger,
+                  min: value =>
+                  // The max level depends on the unit
+                  isValidMin(value, getMinMovementSpeedValue(getValues('movementUnit'), getFIRValue(), productConfig)) || t('progress-the-minimum-level-in-movement', {
+                    movementUnitType: MovementUnit[getValues('movementUnit')],
+                    movementUnit: getMinMovementSpeedValue(getValues('movementUnit'), getFIRValue(), productConfig)
+                  }),
+                  max: value =>
+                  // The max level depends on the unit
+                  isValidMax(value, getMaxMovementSpeedValue(getValues('movementUnit'), getFIRValue(), productConfig)) || t('progress-the-maxium-level-in-movement', {
+                    movementUnitType: MovementUnit[getValues('movementUnit')],
+                    movementUnit: getMaxMovementSpeedValue(getValues('movementUnit'), getFIRValue(), productConfig)
+                  }),
+                  validateMovementSteps: value =>
+                  // movement step depends on the unit
+                  validateMovementSteps(value, getValues('movementUnit'), productConfig, getFIRValue())
                 }
-              }, {
-                children: Object.keys(allowedMovementUnitsForFir).map(key => jsx(MenuItem, Object.assign({
-                  value: key
-                }, {
-                  children: MovementUnit[key]
-                }), key))
-              }))
-            })), jsx(Grid, Object.assign({
-              item: true,
-              xs: 7
-            }, {
-              children: jsx(ReactHookFormNumberField, {
-                name: "movementSpeed",
-                label: t('progress-movement-speed-label'),
-                rules: {
-                  validate: {
-                    isRequired,
-                    isInteger,
-                    min: value =>
-                    // The max level depends on the unit
-                    isValidMin(value, getMinMovementSpeedValue(getValues('movementUnit'), getFIRValue(), productConfig)) || t('progress-the-minimum-level-in-movement', {
-                      movementUnitType: MovementUnit[getValues('movementUnit')],
-                      movementUnit: getMinMovementSpeedValue(getValues('movementUnit'), getFIRValue(), productConfig)
-                    }),
-                    max: value =>
-                    // The max level depends on the unit
-                    isValidMax(value, getMaxMovementSpeedValue(getValues('movementUnit'), getFIRValue(), productConfig)) || t('progress-the-maxium-level-in-movement', {
-                      movementUnitType: MovementUnit[getValues('movementUnit')],
-                      movementUnit: getMaxMovementSpeedValue(getValues('movementUnit'), getFIRValue(), productConfig)
-                    }),
-                    validateMovementSteps: value =>
-                    // movement step depends on the unit
-                    validateMovementSteps(value, getValues('movementUnit'), productConfig, getFIRValue())
-                  }
-                },
-                size: "small",
-                disabled: _isDisabled,
-                isReadOnly: _isReadOnly,
-                "data-testid": "movement-movementSpeed",
-                onChange: event => event && event.stopPropagation()
-              })
-            }))]
-          }))]
-        }), isSigmet && !isShortTestOrRdoact && jsx(RadioButtonAndLabel, {
-          value: "FORECAST_POSITION",
-          label: t('progress-radio-button-label-end-potision'),
-          disabled: _isDisabled,
-          "data-testid": "movementType-FORECAST_POSITION"
-        })]
-      })), isSigmet && !isShortTestOrRdoact && movementType === 'FORECAST_POSITION' && jsxs(Grid, Object.assign({
-        item: true,
-        xs: 12,
-        "data-testid": "endGeometry",
-        sx: styles$2.drawSection
-      }, {
-        children: [!_isReadOnly && jsxs(Fragment, {
-          children: [jsx(DrawTools, {
-            "data-testid": "endGeometry-drawTools",
-            tools: _tools,
-            activeTool: activeTool,
-            onChangeTool: _onChangeTool
-          }), activeTool && jsx(FormHelperText, Object.assign({
-            variant: "filled",
-            sx: styles$2.quitDrawModeMessage
-          }, {
-            children: t('geometry-exit-draw-mode-message')
-          })), !!errors.endGeometry && jsx(FormHelperText, Object.assign({
-            error: true,
-            variant: "filled"
-          }, {
-            children: errors.endGeometry.message
-          })), /* non-blocking warnings */
-          showMaxFeaturePointsWarning && jsx(FormHelperText, Object.assign({
-            variant: "filled"
-          }, {
-            children: t('geometry-max-feature-points-message')
-          })), /* non-blocking warnings */
-          showMoreThan6PointsWarning && jsx(FormHelperText, Object.assign({
-            variant: "filled"
-          }, {
-            children: t('progress-more-than-6-points-message', {
-              totalDrawnPoints
-            })
-          })), /* non-blocking warnings */
-          showIntersectionAbove6PointsWarning && jsx(FormHelperText, Object.assign({
-            variant: "filled"
-          }, {
-            children: t('progress-intersection-above-6-points-message', {
-              intersectingPolygonPointsTotal
+              },
+              size: "small",
+              disabled: _isDisabled,
+              isReadOnly: _isReadOnly,
+              "data-testid": "movement-movementSpeed",
+              onChange: event => event && event.stopPropagation()
             })
-          })), hasMulitpleIntersections(geoJSONIntersection) && !activeTool && !errors.endGeometry && !isFir(geoJSON) && jsx(FormHelperText, Object.assign({
-            variant: "filled"
-          }, {
-            children: t('geometry-multi-intersections-message')
           }))]
-        }), jsx(ReactHookFormHiddenInput, {
-          name: "endGeometry",
-          rules: {
-            validate: {
-              maximumOneDrawing: value => isMaximumOneDrawing(value) || t('progress-only-one-position-drawing'),
-              coordinatesNotEmpty: value => getValues('movementType') === 'FORECAST_POSITION' && !isDraft() ? isValidGeoJsonCoordinates(value) || t('progress-coordinate-empty-message') : true,
-              intersectWithFIR: value => hasIntersectionWithFIR(value, getValues('endGeometryIntersect')) || t('progress-no-intersection-message'),
-              hasMaxFeaturePoints: value => isFir(value) ? true : !hasMaxFeaturePoints(value, maxPoints) || t('progress-maximumPointsMessage', {
-                maxPoints: maxPoints - 1
-              })
-            }
+        }))]
+      }), isSigmet && !isShortTestOrRdoact && jsx(RadioButtonAndLabel, {
+        value: "FORECAST_POSITION",
+        label: t('progress-radio-button-label-end-potision'),
+        disabled: _isDisabled,
+        "data-testid": "movementType-FORECAST_POSITION"
+      })]
+    })), isSigmet && !isShortTestOrRdoact && movementType === 'FORECAST_POSITION' && jsxs(Grid2, Object.assign({
+      "data-testid": "endGeometry",
+      sx: styles$2.drawSectionProgress,
+      size: 12
+    }, {
+      children: [!_isReadOnly && jsxs(Fragment, {
+        children: [jsx(DrawTools, {
+          "data-testid": "endGeometry-drawTools",
+          tools: _tools,
+          activeTool: activeTool,
+          onChangeTool: _onChangeTool
+        }), activeTool && jsx(FormHelperText, Object.assign({
+          variant: "filled",
+          sx: styles$2.quitDrawModeMessage
+        }, {
+          children: t('geometry-exit-draw-mode-message')
+        })), !!errors.endGeometry && jsx(FormHelperText, Object.assign({
+          error: true,
+          variant: "filled"
+        }, {
+          children: errors.endGeometry.message
+        })), /* non-blocking warnings */
+        showMaxFeaturePointsWarning && jsx(FormHelperText, Object.assign({
+          variant: "filled"
+        }, {
+          children: t('geometry-max-feature-points-message')
+        })), /* non-blocking warnings */
+        showMoreThan6PointsWarning && jsx(FormHelperText, Object.assign({
+          variant: "filled"
+        }, {
+          children: t('progress-more-than-6-points-message', {
+            totalDrawnPoints
+          })
+        })), /* non-blocking warnings */
+        showIntersectionAbove6PointsWarning && jsx(FormHelperText, Object.assign({
+          variant: "filled"
+        }, {
+          children: t('progress-intersection-above-6-points-message', {
+            intersectingPolygonPointsTotal
+          })
+        })), hasMulitpleIntersections(geoJSONIntersection) && !activeTool && !errors.endGeometry && !isFir(geoJSON) && jsx(FormHelperText, Object.assign({
+          variant: "filled"
+        }, {
+          children: t('geometry-multi-intersections-message')
+        }))]
+      }), jsx(ReactHookFormHiddenInput, {
+        name: "endGeometry",
+        rules: {
+          validate: {
+            maximumOneDrawing: value => isMaximumOneDrawing(value) || t('progress-only-one-position-drawing'),
+            coordinatesNotEmpty: value => getValues('movementType') === 'FORECAST_POSITION' && !isDraft() ? isValidGeoJsonCoordinates(value) || t('progress-coordinate-empty-message') : true,
+            intersectWithFIR: value => hasIntersectionWithFIR(value, getValues('endGeometryIntersect')) || t('progress-no-intersection-message'),
+            hasMaxFeaturePoints: value => isFir(value) ? true : !hasMaxFeaturePoints(value, maxPoints) || t('progress-maximumPointsMessage', {
+              maxPoints: maxPoints - 1
+            })
           }
-        }), jsx(ReactHookFormHiddenInput, {
-          name: "endGeometryIntersect"
-        })]
-      }))]
-    }))
+        }
+      }), jsx(ReactHookFormHiddenInput, {
+        name: "endGeometryIntersect"
+      })]
+    }))]
   }));
 };
 
@@ -4956,7 +4986,11 @@ const ValidFrom = ({
       disabled: isDisabled,
       isReadOnly: isReadOnly,
       "data-testid": "valid-from",
-      sx: styles$2.helperText
+      sx: Object.assign(Object.assign({}, styles$2.helperText), {
+        '.MuiFormHelperText-root.Mui-error': {
+          marginBottom: '-16px'
+        }
+      })
     })
   }));
 };
@@ -5036,7 +5070,11 @@ const ValidUntil = ({
         _onChange();
       },
       "data-testid": "valid-until",
-      sx: styles$2.helperText
+      sx: Object.assign(Object.assign({}, styles$2.helperText), {
+        '.MuiFormHelperText-root.Mui-error': {
+          marginBottom: '-16px'
+        }
+      })
     }, defaultValidUntilValue)
   }));
 };
@@ -5054,26 +5092,25 @@ const VolcanicFields = ({
     trigger,
     getValues
   } = useFormContext();
-  return jsxs(Grid, Object.assign({
-    item: true,
+  return jsx(Grid2, Object.assign({
     container: true,
     spacing: 2
   }, {
-    children: [jsx(Grid, {
-      item: true,
-      xs: 4,
-      container: true,
-      justifyContent: "flex-end"
-    }), jsxs(Grid, Object.assign({
-      item: true,
-      xs: 8,
+    children: jsxs(Grid2, Object.assign({
       container: true,
-      justifyContent: "flex-start"
+      justifyContent: "flex-start",
+      offset: 4,
+      size: 8,
+      spacing: 0,
+      sx: {
+        '.MuiFormHelperText-root': {
+          marginTop: '2px'
+        }
+      }
     }, {
-      children: [(!isReadOnly || !!watch('vaSigmetVolcanoName')) && jsx(Grid, Object.assign({
-        item: true,
-        xs: 12,
-        sx: styles$2.volcanicField
+      children: [(!isReadOnly || !!watch('vaSigmetVolcanoName')) && jsx(Grid2, Object.assign({
+        sx: styles$2.volcanicField,
+        size: 12
       }, {
         children: jsx(ReactHookFormTextField, {
           name: "vaSigmetVolcanoName",
@@ -5087,9 +5124,8 @@ const VolcanicFields = ({
           isReadOnly: isReadOnly,
           size: "small"
         })
-      })), (!isReadOnly || !!watch('vaSigmetVolcanoCoordinates.latitude')) && jsx(Grid, Object.assign({
-        item: true,
-        xs: 6
+      })), (!isReadOnly || !!watch('vaSigmetVolcanoCoordinates.latitude')) && jsx(Grid2, Object.assign({
+        size: 6
       }, {
         children: jsx(ReactHookFormNumberField, {
           name: "vaSigmetVolcanoCoordinates.latitude",
@@ -5109,9 +5145,8 @@ const VolcanicFields = ({
           onChange: () => trigger('vaSigmetVolcanoCoordinates.longitude'),
           isReadOnly: isReadOnly
         })
-      })), (!isReadOnly || !!watch('vaSigmetVolcanoCoordinates.longitude')) && jsx(Grid, Object.assign({
-        item: true,
-        xs: 6
+      })), (!isReadOnly || !!watch('vaSigmetVolcanoCoordinates.longitude')) && jsx(Grid2, Object.assign({
+        size: 6
       }, {
         children: jsx(ReactHookFormNumberField, {
           name: "vaSigmetVolcanoCoordinates.longitude",
@@ -5132,7 +5167,7 @@ const VolcanicFields = ({
           isReadOnly: isReadOnly
         })
       }))]
-    }))]
+    }))
   }));
 };
 
@@ -5179,26 +5214,22 @@ const SurfaceVisibility = ({
   const getFIRValue = () => getValues('locationIndicatorATSR');
   const visibilityLabel = getFieldLabel(t('surface-visibility'), isReadOnly);
   const visibilityCauseLabel = getFieldLabel(t('surface-visibility-cause'), isReadOnly);
-  return jsxs(Grid, Object.assign({
-    item: true,
+  return jsxs(Grid2, Object.assign({
     container: true,
     spacing: 2
   }, {
-    children: [jsx(Grid, {
-      item: true,
-      xs: 4,
+    children: [jsx(Grid2, {
       container: true,
-      justifyContent: "flex-end"
-    }), jsxs(Grid, Object.assign({
-      item: true,
-      xs: 8,
+      justifyContent: "flex-end",
+      size: 4
+    }), jsxs(Grid2, Object.assign({
       container: true,
-      justifyContent: "flex-start"
+      justifyContent: "flex-start",
+      size: 8
     }, {
-      children: [jsx(Grid, Object.assign({
-        item: true,
-        xs: 12,
-        sx: styles$2.surfaceVisibility
+      children: [jsx(Grid2, Object.assign({
+        sx: styles$2.surfaceVisibility,
+        size: 12
       }, {
         children: jsx(ReactHookFormNumberField, {
           name: "visibilityValue",
@@ -5223,11 +5254,18 @@ const SurfaceVisibility = ({
           },
           size: "small",
           disabled: isDisabled,
-          isReadOnly: isReadOnly
+          isReadOnly: isReadOnly,
+          sx: {
+            ' .MuiFormHelperText-root': {
+              lineHeight: '1.33em'
+            }
+          }
         })
-      })), jsx(Grid, Object.assign({
-        item: true,
-        xs: 12
+      })), jsx(Grid2, Object.assign({
+        size: 12,
+        sx: {
+          marginTop: -2
+        }
       }, {
         children: jsx(ReactHookFormSelect, Object.assign({
           name: "visibilityCause",
@@ -5294,26 +5332,22 @@ const SurfaceWind = ({
   const allowedWindUnitsForFir = getAllowedUnits(getFIRValue(), productConfig, 'surfacewind_unit', WindUnit);
   const windLabel = getFieldLabel(t('surface-wind-label'), isReadOnly, t('set'));
   const speedLabel = getFieldLabel(t('surface-wind-speed-label'), isReadOnly, t('set'));
-  return jsxs(Grid, Object.assign({
-    item: true,
+  return jsxs(Grid2, Object.assign({
     container: true,
     spacing: 2
   }, {
-    children: [jsx(Grid, {
-      item: true,
-      xs: 4,
+    children: [jsx(Grid2, {
       container: true,
-      justifyContent: "flex-end"
-    }), jsxs(Grid, Object.assign({
-      item: true,
-      xs: 8,
+      justifyContent: "flex-end",
+      size: 4
+    }), jsxs(Grid2, Object.assign({
       container: true,
-      justifyContent: "flex-start"
+      justifyContent: "flex-start",
+      size: 8
     }, {
-      children: [jsx(Grid, Object.assign({
-        item: true,
-        xs: 12,
-        sx: styles$2.surfaceWind
+      children: [jsx(Grid2, Object.assign({
+        sx: styles$2.surfaceWind,
+        size: 12
       }, {
         children: jsx(ReactHookFormNumberField, {
           name: "windDirection",
@@ -5338,14 +5372,16 @@ const SurfaceWind = ({
           isReadOnly: isReadOnly,
           "data-testid": "surfaceWind-windDirection"
         })
-      })), jsxs(Grid, Object.assign({
-        item: true,
-        xs: 12,
-        container: true
+      })), jsxs(Grid2, Object.assign({
+        container: true,
+        size: 12,
+        sx: {
+          marginTop: -2
+        },
+        spacing: 0
       }, {
-        children: [jsx(Grid, Object.assign({
-          item: true,
-          xs: 5
+        children: [jsx(Grid2, Object.assign({
+          size: 5
         }, {
           children: jsx(ReactHookFormSelect, Object.assign({
             name: "windUnit",
@@ -5372,9 +5408,8 @@ const SurfaceWind = ({
               children: allowedWindUnitsForFir[key]
             }), key))
           }))
-        })), jsx(Grid, Object.assign({
-          item: true,
-          xs: 7
+        })), jsx(Grid2, Object.assign({
+          size: 7
         }, {
           children: jsx(ReactHookFormNumberField, {
             name: "windSpeed",
@@ -5465,17 +5500,15 @@ const CloudLevels = ({
       unregister('cloudLowerLevel');
     }
   }, [cloudLevelInfoMode, unregister]);
-  return jsxs(Grid, Object.assign({
-    item: true,
+  return jsxs(Grid2, Object.assign({
     container: true,
     spacing: 2,
     sx: styles$2.containerItem
   }, {
-    children: [jsx(Grid, Object.assign({
-      item: true,
-      xs: 4,
+    children: [jsx(Grid2, Object.assign({
       container: true,
-      justifyContent: "flex-end"
+      justifyContent: "flex-end",
+      size: 4
     }, {
       children: jsx(Typography, Object.assign({
         variant: "subtitle1",
@@ -5483,27 +5516,23 @@ const CloudLevels = ({
       }, {
         children: t('levels')
       }))
-    })), jsx(Grid, Object.assign({
-      item: true,
-      xs: 8,
+    })), jsx(Grid2, Object.assign({
       container: true,
-      justifyContent: "flex-start"
+      justifyContent: "flex-start",
+      size: 8
     }, {
-      children: jsxs(Grid, Object.assign({
-        item: true,
-        xs: 12
+      children: jsxs(Grid2, Object.assign({
+        size: 12
       }, {
         children: [jsx(ReactHookFormHiddenInput, {
           name: "cloudLevelInfoMode",
           defaultValue: "BETW"
-        }), jsxs(Grid, Object.assign({
-          item: true,
-          xs: 12,
-          container: true
+        }), jsxs(Grid2, Object.assign({
+          container: true,
+          size: 12
         }, {
-          children: [jsx(Grid, Object.assign({
-            item: true,
-            xs: 4
+          children: [jsx(Grid2, Object.assign({
+            size: 4
           }, {
             children: (!isReadOnly || cloudLevelInfoMode === 'BETW_ABV' || cloudLevelInfoMode === 'BETW_SFC_ABV') && jsx(ReactHookFormFormControl, Object.assign({
               disabled: isDisabled,
@@ -5544,9 +5573,8 @@ const CloudLevels = ({
                 label: "Above"
               })
             }))
-          })), jsx(Grid, Object.assign({
-            item: true,
-            xs: 3
+          })), jsx(Grid2, Object.assign({
+            size: 3
           }, {
             children: jsx(ReactHookFormSelect, Object.assign({
               name: "cloudLevel.unit",
@@ -5575,9 +5603,8 @@ const CloudLevels = ({
                 children: allowedCloudLevelUnitsForFir[key]
               }), key))
             }))
-          })), jsx(Grid, Object.assign({
-            item: true,
-            xs: 5
+          })), jsx(Grid2, Object.assign({
+            size: 5
           }, {
             children: jsx(ReactHookFormNumberField, {
               name: "cloudLevel.value",
@@ -5605,14 +5632,12 @@ const CloudLevels = ({
               }
             })
           }))]
-        })), jsxs(Grid, Object.assign({
-          item: true,
-          xs: 12,
-          container: true
+        })), jsxs(Grid2, Object.assign({
+          container: true,
+          size: 12
         }, {
-          children: [jsx(Grid, Object.assign({
-            item: true,
-            xs: 4
+          children: [jsx(Grid2, Object.assign({
+            size: 4
           }, {
             children: (!isReadOnly || cloudLevelInfoMode === 'BETW_SFC' || cloudLevelInfoMode === 'BETW_SFC_ABV') && jsx(ReactHookFormFormControl, Object.assign({
               disabled: isDisabled,
@@ -5654,9 +5679,8 @@ const CloudLevels = ({
               })
             }))
           })), cloudLevelInfoMode !== 'BETW_SFC' && cloudLevelInfoMode !== 'BETW_SFC_ABV' && jsxs(Fragment, {
-            children: [jsx(Grid, Object.assign({
-              item: true,
-              xs: 3
+            children: [jsx(Grid2, Object.assign({
+              size: 3
             }, {
               children: jsx(ReactHookFormSelect, Object.assign({
                 name: "cloudLowerLevel.unit",
@@ -5685,9 +5709,8 @@ const CloudLevels = ({
                   children: allowedCloudLevelUnitsForFir[key]
                 }), key))
               }))
-            })), jsx(Grid, Object.assign({
-              item: true,
-              xs: 5
+            })), jsx(Grid2, Object.assign({
+              size: 5
             }, {
               children: jsx(ReactHookFormNumberField, {
                 name: "cloudLowerLevel.value",
@@ -5870,7 +5893,6 @@ const ProductFormTAC = ({
     variant: "body2",
     component: "div",
     sx: {
-      paddingTop: '16px',
       whiteSpace: 'break-spaces'
     },
     "data-testid": "productform-tac-message"
@@ -5882,7 +5904,8 @@ const ProductFormTAC = ({
         fontSize: '1.125rem',
         fontWeight: 'normal',
         lineHeight: 1.56,
-        letterSpacing: '0.5px'
+        letterSpacing: '0.5px',
+        marginTop: '2px'
       },
       "data-testid": "productform-tac-message-line"
     }, {
@@ -5904,27 +5927,19 @@ const IssuedAt = ({
     t
   } = useSigmetAirmetTranslation();
   return jsx(ProductFormFieldLayout, Object.assign({
+    title: t('issued-at'),
     sx: {
-      paddingTop: 0,
-      '+ .MuiGrid-item': {
-        paddingTop: 0
-      }
-    },
-    title: t('issued-at')
+      marginTop: -2
+    }
   }, {
-    children: jsx(Grid, Object.assign({
-      item: true,
-      xs: 12
+    children: jsx(Typography, Object.assign({
+      variant: "body2",
+      sx: Object.assign(Object.assign({}, styles$2.body), {
+        fontSize: '1rem',
+        color: isReadOnly ? 'geowebColors.typographyAndIcons.text' : 'geowebColors.buttons.primary.disabled.color'
+      })
     }, {
-      children: jsx(Typography, Object.assign({
-        variant: "body2",
-        sx: Object.assign(Object.assign({}, styles$2.body), {
-          fontSize: '1rem',
-          color: isReadOnly ? 'geowebColors.typographyAndIcons.text' : 'geowebColors.buttons.primary.disabled.color'
-        })
-      }, {
-        children: date
-      }))
+      children: date
     }))
   }));
 };
@@ -5934,21 +5949,19 @@ const Tac = ({
   children,
   product
 }) => {
-  return jsx(ProductFormFieldLayout, Object.assign({
+  return jsxs(ProductFormFieldLayout, Object.assign({
     title: "TAC",
     sx: {
-      paddingTop: 2
+      marginTop: -3,
+      '.MuiTypography-root.MuiTypography-subtitle1': {
+        marginTop: '2px'
+      }
     }
   }, {
-    children: jsxs(Grid, Object.assign({
-      item: true,
-      xs: 12
-    }, {
-      children: [jsx(ProductFormTAC, {
-        tac: tac,
-        product: product
-      }), children]
-    }))
+    children: [jsx(ProductFormTAC, {
+      tac: tac,
+      product: product
+    }), children]
   }));
 };
 
@@ -6074,7 +6087,7 @@ const ProductFormLayout = ({
   const theme = useTheme();
   const baseLayers = getBaseLayers(productConfig);
   const projection = getProjection(productConfig);
-  return jsxs(Grid, Object.assign({
+  return jsxs(Grid2, Object.assign({
     container: true,
     sx: {
       height: '100%',
@@ -6084,11 +6097,7 @@ const ProductFormLayout = ({
       }
     }
   }, {
-    children: [jsx(Grid, Object.assign({
-      item: true,
-      xs: 12,
-      sm: 6,
-      lg: 8,
+    children: [jsx(Grid2, Object.assign({
       sx: {
         height: 400,
         padding: 2,
@@ -6096,6 +6105,11 @@ const ProductFormLayout = ({
           height: '100%',
           padding: 0
         }
+      },
+      size: {
+        xs: 12,
+        sm: 6,
+        lg: 8
       }
     }, {
       children: jsx(MapViewGeoJson, {
@@ -6103,11 +6117,7 @@ const ProductFormLayout = ({
         projection: projection,
         geoJSONLayers: _geoJSONLayers
       })
-    })), jsx(Grid, Object.assign({
-      item: true,
-      xs: 12,
-      sm: 6,
-      lg: 4,
+    })), jsx(Grid2, Object.assign({
       sx: {
         paddingTop: 5,
         paddingBottom: 5,
@@ -6116,6 +6126,11 @@ const ProductFormLayout = ({
           overflowY: 'auto',
           height: '100%'
         }
+      },
+      size: {
+        xs: 12,
+        sm: 6,
+        lg: 4
       }
     }, {
       children: children
@@ -10588,26 +10603,11 @@ const SigmetForm = ({
     // update available phenomena for the FIR
     setPhenomenaList(newPhenomenaList);
   };
-  const renderForm = () => jsxs(Grid, Object.assign({
+  const renderForm = () => jsxs(Grid2, Object.assign({
     container: true,
     direction: "column",
     spacing: 2,
-    sx: {
-      '.MuiSelect-select.MuiInputBase-input.MuiFilledInput-input': {
-        paddingTop: '17px',
-        paddingBottom: '0px'
-      },
-      '.MuiInputBase-input.MuiFilledInput-input': {
-        paddingTop: '15px',
-        paddingBottom: '2px'
-      },
-      '+ .MuiGrid-item': {
-        paddingTop: '16px'
-      },
-      '.MuiFormHelperText-root': {
-        lineHeight: '1.33em'
-      }
-    }
+    sx: formStyles
   }, {
     children: [jsx(Type, {
       productType: "sigmet",
@@ -10677,19 +10677,16 @@ const SigmetForm = ({
       isDisabled: isDisabled,
       isReadOnly: isReadOnly
     }), _isCancelSigmet && watch('vaSigmetMoveToFIR') && jsx(ProductFormFieldLayout, {
-      children: jsx(Grid, Object.assign({
-        item: true,
-        xs: 12
+      children: jsxs(Typography, Object.assign({
+        variant: "body2",
+        sx: Object.assign(Object.assign({}, styles$2.body), {
+          marginBottom: '-4px'
+        }),
+        "data-testid": "vaSigmetMoveToFIR"
       }, {
-        children: jsxs(Typography, Object.assign({
-          variant: "body2",
-          sx: styles$2.body,
-          "data-testid": "vaSigmetMoveToFIR"
-        }, {
-          children: [t('vulcanic-cloud-moving-text'), ":", ' ', jsxs("b", {
-            children: [" ", watch('vaSigmetMoveToFIR')]
-          })]
-        }))
+        children: [t('vulcanic-cloud-moving-text'), ":", ' ', jsxs("b", {
+          children: [" ", watch('vaSigmetMoveToFIR')]
+        })]
       }))
     }), jsx(IssuedAt, {
       date: getProductIssueDate(_initialSigmet, _initialCancelSigmet),
@@ -10880,26 +10877,11 @@ const AirmetForm = ({
     const fieldnames = ['windDirection', 'windSpeed', 'visibilityValue', 'cloudLevel.value', 'cloudLowerLevel.value'];
     triggerValidations(fieldnames, getValues, trigger);
   };
-  const renderForm = () => jsxs(Grid, Object.assign({
+  const renderForm = () => jsxs(Grid2, Object.assign({
     container: true,
     direction: "column",
     spacing: 2,
-    sx: {
-      '.MuiSelect-select.MuiInputBase-input.MuiFilledInput-input': {
-        paddingTop: '17px',
-        paddingBottom: '0px'
-      },
-      '.MuiInputBase-input.MuiFilledInput-input': {
-        paddingTop: '15px',
-        paddingBottom: '2px'
-      },
-      '+ .MuiGrid-item': {
-        paddingTop: '16px'
-      },
-      '.MuiFormHelperText-root': {
-        lineHeight: '1.33em'
-      }
-    }
+    sx: formStyles
   }, {
     children: [jsx(Type, {
       productType: "airmet",
@@ -11071,13 +11053,13 @@ const ContentDialog = _a => {
       },
       component: "div"
     }, {
-      children: jsxs(Grid, Object.assign({
+      children: jsxs(Grid2, Object.assign({
         container: true,
-        alignItems: "center"
+        alignItems: "center",
+        size: "grow"
       }, {
-        children: [jsx(Grid, Object.assign({
-          item: true,
-          xs: 4
+        children: [jsx(Grid2, Object.assign({
+          size: 4
         }, {
           children: jsx(Button, Object.assign({
             onClick: handleClose,
@@ -11098,14 +11080,13 @@ const ContentDialog = _a => {
           }, {
             children: t('back')
           }))
-        })), jsx(Grid, Object.assign({
-          item: true,
-          xs: 4,
+        })), jsx(Grid2, Object.assign({
           sx: {
             display: 'flex',
             justifyContent: 'center',
             textAlign: 'center'
-          }
+          },
+          size: 4
         }, {
           children: jsx(Typography, Object.assign({
             "data-testid": "dialogTitle",
@@ -11119,9 +11100,8 @@ const ContentDialog = _a => {
           }, {
             children: title
           }))
-        })), jsx(Grid, Object.assign({
-          item: true,
-          xs: 4
+        })), jsx(Grid2, Object.assign({
+          size: 4
         }, {
           children: options
         }))]
@@ -11243,13 +11223,15 @@ const listRowStyles = {
   },
   '.col-3': {
     width: '100%',
-    flexBasis: '100%'
+    flexBasis: '100%',
+    paddingTop: 2
   },
   '.col-4': {
     width: '100%',
     flexBasis: '100%',
     justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'center',
+    paddingTop: 2
   },
   '@container productList (width > 720px)': {
     '.productListContainer': {
@@ -11269,13 +11251,15 @@ const listRowStyles = {
       },
       '.col-3': {
         width: '40%',
-        flexBasis: '40%'
+        flexBasis: '40%',
+        paddingTop: 0
       },
       '.col-4': {
         justifyContent: 'right',
         alignItems: 'center',
         width: '25%',
         flexBasis: '25%',
+        paddingTop: 0,
         button: {
           marginRight: 3
         },
@@ -11356,15 +11340,14 @@ const ProductListRow = ({
     children: jsx(Box, Object.assign({
       className: "productListContainer"
     }, {
-      children: jsxs(Grid, Object.assign({
+      children: jsxs(Grid2, Object.assign({
         container: true,
         alignItems: "center",
-        spacing: 2,
+        spacing: 0,
         className: "rowContainer"
       }, {
-        children: [jsxs(Grid, Object.assign({
-          className: "col-1",
-          item: true
+        children: [jsxs(Grid2, Object.assign({
+          className: "col-1"
         }, {
           children: [phenomenon !== null && jsx(ProductListRowHeader, {
             title: productType.toUpperCase()
@@ -11380,9 +11363,8 @@ const ProductListRow = ({
               children: phenomenon !== null ? getLabel(product) : 'Cancel'
             }))
           }))]
-        })), jsxs(Grid, Object.assign({
-          className: "col-2",
-          item: true
+        })), jsxs(Grid2, Object.assign({
+          className: "col-2"
         }, {
           children: [jsx(ProductListRowHeader, {
             title: t('issue-time')
@@ -11408,7 +11390,7 @@ const ProductListRow = ({
               }))]
             }),
             placement: "bottom-start",
-            componentsProps: {
+            slotProps: {
               tooltip: {
                 sx: {
                   bgcolor: 'geowebColors.background.surface',
@@ -11429,9 +11411,8 @@ const ProductListRow = ({
               children: product.issueDate ? `${dateUtils.dateToString(dateUtils.utc(product.issueDate), dateUtils.DATE_FORMAT_NAME_OF_MONTH)} UTC` : t('not-published')
             }))
           }))]
-        })), jsxs(Grid, Object.assign({
-          className: "col-3",
-          item: true
+        })), jsxs(Grid2, Object.assign({
+          className: "col-3"
         }, {
           children: [jsx(ProductListRowHeader, {
             title: t('valid-time')
@@ -11442,8 +11423,7 @@ const ProductListRow = ({
           }, {
             children: validTime
           }))]
-        })), jsxs(Grid, Object.assign({
-          item: true,
+        })), jsxs(Grid2, Object.assign({
           className: "col-4",
           container: true
         }, {
@@ -11475,14 +11455,13 @@ const ProductList = ({
     t
   } = useSigmetAirmetTranslation();
   const shouldHideCreateNew = error && (error.name === t('error-auth') || error.name === t('error-config'));
-  return jsxs(Grid, Object.assign({
+  return jsxs(Grid2, Object.assign({
     container: true,
     direction: "column",
     alignItems: "stretch"
   }, {
-    children: [jsx(Grid, Object.assign({
+    children: [jsx(Grid2, Object.assign({
       container: true,
-      item: true,
       justifyContent: "flex-end"
     }, {
       children: !shouldHideCreateNew && jsx(Button, Object.assign({
@@ -11497,8 +11476,7 @@ const ProductList = ({
           product: productType.toUpperCase()
         })
       }))
-    })), jsxs(Grid, Object.assign({
-      item: true,
+    })), jsxs(Grid2, Object.assign({
       sx: {
         width: '100%',
         minHeight: '600px',
@@ -14659,6 +14637,11 @@ const fakeSigmetList = [{
     sequence: 'A02V',
     issueDate: '2020-09-17T12:00:00Z',
     observationOrForecastTime: null,
+    vaSigmetVolcanoName: 'EYJAFJALLAJOKULL',
+    vaSigmetVolcanoCoordinates: {
+      latitude: 63.62,
+      longitude: -19.61
+    },
     validDateStart: '2020-09-17T13:00:00Z',
     validDateEnd: '2020-09-17T17:00:00Z',
     firName: 'AMSTERDAM FIR',