@opengeoweb/sigmet-airmet 3.0.0 → 4.0.0

package/index.esm.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import React__default from 'react';
-import { FormControlLabel, Radio, Grid, Typography, Tooltip, Button, Checkbox, MenuItem, FormHelperText, Dialog, DialogTitle, DialogContent, Card, CardContent, List, ListItem, Skeleton, Backdrop, CircularProgress } from '@mui/material';
+import { FormControlLabel, Radio, Grid, Typography, Tooltip, Button, Checkbox, MenuItem, FormHelperText, Box, Dialog, DialogTitle, DialogContent, Card, CardContent, List, ListItem, Skeleton, Backdrop, CircularProgress } from '@mui/material';
 import { useFormContext } from 'react-hook-form';
 import { ReactHookFormRadioGroup, ReactHookFormSelect, ReactHookFormNumberField, isInteger, isValidMax, isValidMin, isEmpty, ReactHookFormDateTime, isValidDate, isBefore, isBetween, hasMaxFeaturePoints, hasMulitpleIntersections, ReactHookFormHiddenInput, isMaximumOneDrawing, hasIntersectionWithFIR, isValidGeoJsonCoordinates, isXHoursBefore, isAfter, isXHoursAfter, ReactHookFormTextField, containsNoCommas, isLatitude, isNonOrBothCoordinates, isLongitude, errorMessages, isGeometryDirty, ReactHookFormProvider, defaultFormOptions } from '@opengeoweb/form-fields';
 import { useApiContext, useApi, createApiInstance } from '@opengeoweb/api';
@@ -9,7 +9,6 @@ import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import { mapTypes, mapSelectors, generateMapId, generateTimesliderId, SyncGroups, generateLayerId, mapActions, publicLayers, MapControls, LayerManagerMapButtonConnect, LegendMapButtonConnect, MultiDimensionSelectMapButtonsConnect, MapViewConnect, MapViewLayer, TimeSliderConnect, LegendConnect } from '@opengeoweb/core';
 import * as turf from '@turf/turf';
 import { polygonToLineString, booleanClockwise, rewind } from '@turf/turf';
-import makeStyles from '@mui/styles/makeStyles';
 import { useDraftFormHelpers, useIsMounted, StatusTag, AlertBanner, usePreventBrowserClose, useConfirmationDialog, isAxiosError, getAxiosErrorMessage, ConfirmationServiceProvider, usePoller } from '@opengeoweb/shared';
 import { Location, DrawRegion, DrawPolygon, DrawFIRLand, Delete, ChevronLeft, Info, Edit, Success, Clock } from '@opengeoweb/theme';
 import moment from 'moment';
@@ -1118,7 +1117,7 @@ var createInterSections = function createInterSections(geoJSONs) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$6 = makeStyles({
+var styles$4 = {
   productForm: {
     overflowY: 'scroll',
     overflowX: 'hidden',
@@ -1135,19 +1134,19 @@ var useStyles$6 = makeStyles({
     paddingTop: '8px'
   },
   volcanicField: {
-    marginBottom: 16
+    marginBottom: 2
   },
   surfaceVisibility: {
-    marginBottom: 16
+    marginBottom: 2
   },
   surfaceWind: {
-    marginBottom: 16
+    marginBottom: 2
   },
   levelField: {
-    marginBottom: 16
+    marginBottom: 2
   },
   movement: {
-    marginBottom: 16
+    marginBottom: 2
   },
   latitude: {
     width: '97%'
@@ -1162,7 +1161,7 @@ var useStyles$6 = makeStyles({
   drawSection: {
     padding: '10px 0px'
   }
-});
+};
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -1250,12 +1249,11 @@ var Change = function Change(_ref) {
   var _useDraftFormHelpers = useDraftFormHelpers(),
       isRequired = _useDraftFormHelpers.isRequired;
 
-  var classes = useStyles$6();
   return /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     container: true,
     spacing: 2,
-    className: classes.containerItem
+    sx: styles$4.containerItem
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 4,
@@ -1263,7 +1261,7 @@ var Change = function Change(_ref) {
     justifyContent: "flex-end"
   }, /*#__PURE__*/React__default.createElement(Typography, {
     variant: "subtitle1",
-    className: classes.label
+    sx: styles$4.label
   }, "Change")), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 8,
@@ -1314,7 +1312,7 @@ var Change = function Change(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$5 = makeStyles({
+var styles$3 = {
   drawButtons: {
     color: '#0075a9',
     borderRadius: '5px',
@@ -1328,14 +1326,13 @@ var useStyles$5 = makeStyles({
     border: 'solid 1px #0075a9',
     padding: '2px'
   }
-});
+};
 
 var DrawTools = function DrawTools(_ref) {
   var _ref$type = _ref.type,
       type = _ref$type === void 0 ? '' : _ref$type,
       drawMode = _ref.drawMode,
       setDrawMode = _ref.setDrawMode;
-  var classes = useStyles$5();
   return /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12,
@@ -1348,11 +1345,11 @@ var DrawTools = function DrawTools(_ref) {
     title: "Drop a point as ".concat(type, " position")
   }, /*#__PURE__*/React__default.createElement(Radio, {
     icon: /*#__PURE__*/React__default.createElement(Location, {
-      className: classes.drawButtons
+      sx: styles$3.drawButtons
     }),
     value: true,
     checkedIcon: /*#__PURE__*/React__default.createElement(Location, {
-      className: classes.drawButtonsSelected
+      sx: styles$3.drawButtonsSelected
     }),
     checked: drawMode === MapDrawMode.POINT,
     onChange: function onChange() {
@@ -1365,10 +1362,10 @@ var DrawTools = function DrawTools(_ref) {
     title: "Draw a box as ".concat(type, " position")
   }, /*#__PURE__*/React__default.createElement(Radio, {
     icon: /*#__PURE__*/React__default.createElement(DrawRegion, {
-      className: classes.drawButtons
+      sx: styles$3.drawButtons
     }),
     checkedIcon: /*#__PURE__*/React__default.createElement(DrawRegion, {
-      className: classes.drawButtonsSelected
+      sx: styles$3.drawButtonsSelected
     }),
     checked: drawMode === MapDrawMode.BOX,
     onChange: function onChange() {
@@ -1381,10 +1378,10 @@ var DrawTools = function DrawTools(_ref) {
     title: "Draw a shape as ".concat(type, " position")
   }, /*#__PURE__*/React__default.createElement(Radio, {
     icon: /*#__PURE__*/React__default.createElement(DrawPolygon, {
-      className: classes.drawButtons
+      sx: styles$3.drawButtons
     }),
     checkedIcon: /*#__PURE__*/React__default.createElement(DrawPolygon, {
-      className: classes.drawButtonsSelected
+      sx: styles$3.drawButtonsSelected
     }),
     checked: drawMode === MapDrawMode.POLYGON,
     onChange: function onChange() {
@@ -1397,10 +1394,10 @@ var DrawTools = function DrawTools(_ref) {
     title: "Set FIR as ".concat(type, " position")
   }, /*#__PURE__*/React__default.createElement(Radio, {
     icon: /*#__PURE__*/React__default.createElement(DrawFIRLand, {
-      className: classes.drawButtons
+      sx: styles$3.drawButtons
     }),
     checkedIcon: /*#__PURE__*/React__default.createElement(DrawFIRLand, {
-      className: classes.drawButtonsSelected
+      sx: styles$3.drawButtonsSelected
     }),
     checked: drawMode === MapDrawMode.FIR,
     onChange: function onChange() {
@@ -1413,10 +1410,10 @@ var DrawTools = function DrawTools(_ref) {
     title: "Remove geometry"
   }, /*#__PURE__*/React__default.createElement(Radio, {
     icon: /*#__PURE__*/React__default.createElement(Delete, {
-      className: classes.drawButtons
+      sx: styles$3.drawButtons
     }),
     checkedIcon: /*#__PURE__*/React__default.createElement(Delete, {
-      className: classes.drawButtonsSelected
+      sx: styles$3.drawButtonsSelected
     }),
     checked: drawMode === MapDrawMode.DELETE,
     onChange: function onChange() {
@@ -1948,7 +1945,6 @@ var Levels = function Levels(_ref) {
   var _useDraftFormHelpers = useDraftFormHelpers(),
       isRequired = _useDraftFormHelpers.isRequired;
 
-  var classes = useStyles$6();
   var config = productType === 'sigmet' ? sigmetConfig : airmetConfig;
 
   var _useProductSettings = useProductSettings(config),
@@ -1961,7 +1957,7 @@ var Levels = function Levels(_ref) {
     item: true,
     container: true,
     spacing: 2,
-    className: classes.containerItem
+    sx: styles$4.containerItem
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 4,
@@ -1969,7 +1965,7 @@ var Levels = function Levels(_ref) {
     justifyContent: "flex-end"
   }, /*#__PURE__*/React__default.createElement(Typography, {
     variant: "subtitle1",
-    className: classes.label
+    sx: styles$4.label
   }, "Levels")), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 8,
@@ -2042,7 +2038,7 @@ var Levels = function Levels(_ref) {
         isRequired: isRequired
       }
     },
-    className: classes.unit,
+    sx: styles$4.unit,
     disabled: isDisabled,
     defaultValue: 'FL',
     onChange: function onChange() {
@@ -2116,7 +2112,7 @@ var Levels = function Levels(_ref) {
         }
       }
     },
-    className: classes.unit,
+    sx: styles$4.unit,
     disabled: isDisabled,
     defaultValue: 'FL',
     onChange: function onChange() {
@@ -2135,7 +2131,7 @@ var Levels = function Levels(_ref) {
   }, /*#__PURE__*/React__default.createElement(ReactHookFormNumberField, {
     name: "level.value",
     label: "Upper level",
-    className: classes.levelField,
+    sx: styles$4.levelField,
     rules: {
       validate: {
         isRequired: isRequired,
@@ -2200,7 +2196,7 @@ var Levels = function Levels(_ref) {
         }
       }
     },
-    className: classes.unit,
+    sx: styles$4.unit,
     disabled: isDisabled,
     defaultValue: getValues('level.unit') || 'FL',
     onChange: function onChange() {
@@ -2286,7 +2282,7 @@ var Levels = function Levels(_ref) {
         isRequired: isRequired
       }
     },
-    className: classes.unit,
+    sx: styles$4.unit,
     disabled: isDisabled,
     defaultValue: 'FL',
     onChange: function onChange() {
@@ -2432,7 +2428,6 @@ var ObservationForecastTime = function ObservationForecastTime(_ref) {
   var _useFormContext = useFormContext(),
       watch = _useFormContext.watch;
 
-  var classes = useStyles$6();
   return (!isReadOnly || watch('observationOrForecastTime') !== null) && /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     container: true,
@@ -2444,7 +2439,7 @@ var ObservationForecastTime = function ObservationForecastTime(_ref) {
     justifyContent: "flex-end"
   }, /*#__PURE__*/React__default.createElement(Typography, {
     variant: "subtitle1",
-    className: classes.label
+    sx: styles$4.label
   }, "At")), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 8,
@@ -2484,7 +2479,6 @@ var Phenomenon = function Phenomenon(_ref) {
       setValue = _useFormContext.setValue,
       trigger = _useFormContext.trigger;
 
-  var classes = useStyles$6();
   var phenomenaList = productType === 'sigmet' ? SigmetPhenomena : AirmetPhenomena;
   return /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
@@ -2497,7 +2491,7 @@ var Phenomenon = function Phenomenon(_ref) {
     justifyContent: "flex-end"
   }, /*#__PURE__*/React__default.createElement(Typography, {
     variant: "subtitle1",
-    className: classes.label
+    sx: styles$4.label
   }, "What")), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 8,
@@ -2568,7 +2562,6 @@ var StartGeometry = function StartGeometry(_ref) {
       drawMode = _ref.drawMode,
       geoJSONs = _ref.geoJSONs,
       setDrawModeType = _ref.setDrawModeType;
-  var classes = useStyles$6();
 
   var _useFormContext = useFormContext(),
       errors = _useFormContext.errors,
@@ -2581,7 +2574,7 @@ var StartGeometry = function StartGeometry(_ref) {
     item: true,
     container: true,
     spacing: 2,
-    className: classes.drawSection
+    sx: styles$4.drawSection
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 4,
@@ -2589,7 +2582,7 @@ var StartGeometry = function StartGeometry(_ref) {
     justifyContent: "flex-end"
   }, /*#__PURE__*/React__default.createElement(Typography, {
     variant: "subtitle1",
-    className: classes.label
+    sx: styles$4.label
   }, "Start position")), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 8,
@@ -2602,7 +2595,7 @@ var StartGeometry = function StartGeometry(_ref) {
     }
   }), drawMode[StartOrEndDrawing.start] && /*#__PURE__*/React__default.createElement(FormHelperText, {
     variant: "filled",
-    className: classes.quitDrawModeMessage
+    sx: styles$4.quitDrawModeMessage
   }, exitDrawModeMessage), !!errors.startGeometry && /*#__PURE__*/React__default.createElement(FormHelperText, {
     error: true,
     variant: "filled"
@@ -2710,8 +2703,6 @@ var Progress = function Progress(_ref) {
     return null;
   } : _ref$onChange;
 
-  var classes = useStyles$6();
-
   var _useFormContext = useFormContext(),
       watch = _useFormContext.watch,
       getValues = _useFormContext.getValues,
@@ -2735,7 +2726,7 @@ var Progress = function Progress(_ref) {
     item: true,
     container: true,
     spacing: 2,
-    className: classes.containerItem
+    sx: styles$4.containerItem
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 4,
@@ -2743,7 +2734,7 @@ var Progress = function Progress(_ref) {
     justifyContent: "flex-end"
   }, /*#__PURE__*/React__default.createElement(Typography, {
     variant: "subtitle1",
-    className: classes.label
+    sx: styles$4.label
   }, "Progress")), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 8,
@@ -2787,7 +2778,7 @@ var Progress = function Progress(_ref) {
     rules: {
       validate: isRequired
     },
-    className: classes.movement,
+    sx: styles$4.movement,
     disabled: isDisabled,
     "data-testid": "movement-movementDirection",
     onChange: function onChange(event) {
@@ -2814,7 +2805,7 @@ var Progress = function Progress(_ref) {
     rules: {
       validate: isRequired
     },
-    className: classes.unit,
+    sx: styles$4.unit,
     disabled: isDisabled,
     defaultValue: 'KT',
     "data-testid": "movement-movementUnit",
@@ -2873,7 +2864,7 @@ var Progress = function Progress(_ref) {
     item: true,
     xs: 12,
     "data-testid": "endGeometry",
-    className: classes.drawSection
+    sx: styles$4.drawSection
   }, !isReadOnly && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DrawTools, {
     "data-testid": "endGeometry-drawTools",
     type: StartOrEndDrawing.end,
@@ -2883,7 +2874,7 @@ var Progress = function Progress(_ref) {
     }
   }), drawMode[StartOrEndDrawing.end] && /*#__PURE__*/React__default.createElement(FormHelperText, {
     variant: "filled",
-    className: classes.quitDrawModeMessage
+    sx: styles$4.quitDrawModeMessage
   }, exitDrawModeMessage), !!errors.endGeometry && /*#__PURE__*/React__default.createElement(FormHelperText, {
     error: true,
     variant: "filled"
@@ -2936,7 +2927,6 @@ var Progress = function Progress(_ref) {
 var SelectFIR = function SelectFIR(_ref) {
   var productType = _ref.productType,
       isDisabled = _ref.isDisabled;
-  var classes = useStyles$6();
 
   var _useFormContext = useFormContext(),
       setValue = _useFormContext.setValue;
@@ -2955,7 +2945,7 @@ var SelectFIR = function SelectFIR(_ref) {
     item: true,
     container: true,
     spacing: 2,
-    className: classes.containerItem
+    sx: styles$4.containerItem
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 4,
@@ -2963,7 +2953,7 @@ var SelectFIR = function SelectFIR(_ref) {
     justifyContent: "flex-end"
   }, /*#__PURE__*/React__default.createElement(Typography, {
     variant: "subtitle1",
-    className: classes.label
+    sx: styles$4.label
   }, "Where")), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 8,
@@ -3030,12 +3020,11 @@ var Type = function Type(_ref) {
   var _useDraftFormHelpers = useDraftFormHelpers(),
       isRequired = _useDraftFormHelpers.isRequired;
 
-  var classes = useStyles$6();
   return /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     container: true,
     spacing: 2,
-    className: classes.containerItem
+    sx: styles$4.containerItem
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 4,
@@ -3043,7 +3032,7 @@ var Type = function Type(_ref) {
     justifyContent: "flex-end"
   }, /*#__PURE__*/React__default.createElement(Typography, {
     variant: "subtitle1",
-    className: classes.label
+    sx: styles$4.label
   }, "Type")), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 8,
@@ -3109,8 +3098,6 @@ var ValidFrom = function ValidFrom(_ref) {
       getValues = _useFormContext.getValues,
       trigger = _useFormContext.trigger;
 
-  var classes = useStyles$6();
-
   var _useDraftFormHelpers = useDraftFormHelpers(),
       isRequired = _useDraftFormHelpers.isRequired;
 
@@ -3126,7 +3113,7 @@ var ValidFrom = function ValidFrom(_ref) {
     justifyContent: "flex-end"
   }, /*#__PURE__*/React__default.createElement(Typography, {
     variant: "subtitle1",
-    className: classes.label
+    sx: styles$4.label
   }, "Valid from")), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 8,
@@ -3206,7 +3193,6 @@ var ValidUntil = function ValidUntil(_ref) {
   var _useDraftFormHelpers = useDraftFormHelpers(),
       isRequired = _useDraftFormHelpers.isRequired;
 
-  var classes = useStyles$6();
   var config = productType === 'sigmet' ? sigmetConfig : airmetConfig;
   var defaultHoursValid = getDefaultHoursValid(productType);
   return /*#__PURE__*/React__default.createElement(Grid, {
@@ -3220,7 +3206,7 @@ var ValidUntil = function ValidUntil(_ref) {
     justifyContent: "flex-end"
   }, /*#__PURE__*/React__default.createElement(Typography, {
     variant: "subtitle1",
-    className: classes.label
+    sx: styles$4.label
   }, "Valid until")), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 8,
@@ -3289,7 +3275,6 @@ var VolcanicFields = function VolcanicFields(_ref) {
       trigger = _useFormContext.trigger,
       getValues = _useFormContext.getValues;
 
-  var classes = useStyles$6();
   return /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     container: true,
@@ -3307,7 +3292,7 @@ var VolcanicFields = function VolcanicFields(_ref) {
   }, (!isReadOnly || !!watch('vaSigmetVolcanoName')) && /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12,
-    className: classes.volcanicField
+    sx: styles$4.volcanicField
   }, /*#__PURE__*/React__default.createElement(ReactHookFormTextField, {
     name: "vaSigmetVolcanoName",
     label: "Volcano name",
@@ -3335,7 +3320,7 @@ var VolcanicFields = function VolcanicFields(_ref) {
         }
       }
     },
-    className: classes.latitude,
+    sx: styles$4.latitude,
     disabled: isDisabled,
     helperText: helperText,
     onChange: function onChange() {
@@ -3404,8 +3389,6 @@ var SurfaceVisibility = function SurfaceVisibility(_ref) {
     return null;
   } : _ref$onChange;
 
-  var classes = useStyles$6();
-
   var _useDraftFormHelpers = useDraftFormHelpers(),
       isRequired = _useDraftFormHelpers.isRequired;
 
@@ -3426,7 +3409,7 @@ var SurfaceVisibility = function SurfaceVisibility(_ref) {
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12,
-    className: classes.surfaceVisibility
+    sx: styles$4.surfaceVisibility
   }, /*#__PURE__*/React__default.createElement(ReactHookFormNumberField, {
     name: "visibilityValue",
     "data-testid": "surfaceVisibility-visibilityValue",
@@ -3512,8 +3495,6 @@ var SurfaceWind = function SurfaceWind(_ref) {
   var _useDraftFormHelpers = useDraftFormHelpers(),
       isRequired = _useDraftFormHelpers.isRequired;
 
-  var classes = useStyles$6();
-
   var _useProductSettings = useProductSettings(airmetConfig),
       allowedUnits = _useProductSettings.allowedUnits;
 
@@ -3537,7 +3518,7 @@ var SurfaceWind = function SurfaceWind(_ref) {
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12,
-    className: classes.surfaceWind
+    sx: styles$4.surfaceWind
   }, /*#__PURE__*/React__default.createElement(ReactHookFormNumberField, {
     name: "windDirection",
     label: "Set wind direction",
@@ -3573,7 +3554,7 @@ var SurfaceWind = function SurfaceWind(_ref) {
         isRequired: isRequired
       }
     },
-    className: classes.unit,
+    sx: styles$4.unit,
     disabled: isDisabled,
     defaultValue: 'KT',
     "data-testid": "surfaceWind-windUnit",
@@ -3671,8 +3652,6 @@ var CloudLevels = function CloudLevels(_ref) {
   var _useDraftFormHelpers = useDraftFormHelpers(),
       isRequired = _useDraftFormHelpers.isRequired;
 
-  var classes = useStyles$6();
-
   var _useProductSettings = useProductSettings(airmetConfig),
       allowedUnits = _useProductSettings.allowedUnits;
 
@@ -3683,7 +3662,7 @@ var CloudLevels = function CloudLevels(_ref) {
     item: true,
     container: true,
     spacing: 2,
-    className: classes.containerItem
+    sx: styles$4.containerItem
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 4,
@@ -3691,7 +3670,7 @@ var CloudLevels = function CloudLevels(_ref) {
     justifyContent: "flex-end"
   }, /*#__PURE__*/React__default.createElement(Typography, {
     variant: "subtitle1",
-    className: classes.label
+    sx: styles$4.label
   }, "Levels")), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 8,
@@ -3758,7 +3737,7 @@ var CloudLevels = function CloudLevels(_ref) {
         isRequired: isRequired
       }
     },
-    className: classes.unit,
+    sx: styles$4.unit,
     disabled: isDisabled,
     defaultValue: 'FT',
     onChange: function onChange() {
@@ -3787,7 +3766,7 @@ var CloudLevels = function CloudLevels(_ref) {
     name: "cloudLevel.value",
     label: "Upper level",
     "data-testid": "cloudLevel-value",
-    className: classes.levelField,
+    sx: styles$4.levelField,
     rules: {
       validate: {
         isRequired: isRequired,
@@ -3866,7 +3845,7 @@ var CloudLevels = function CloudLevels(_ref) {
         isRequired: isRequired
       }
     },
-    className: classes.unit,
+    sx: styles$4.unit,
     disabled: isDisabled,
     defaultValue: getValues('cloudLevel.unit') ? getValues('cloudLevel.unit') : 'FT',
     onChange: function onChange() {
@@ -3923,7 +3902,7 @@ var CloudLevels = function CloudLevels(_ref) {
   })))))));
 };
 
-var useStyles$4 = makeStyles({
+var styles$2 = {
   tacOutput: {
     paddingTop: '16px',
     whiteSpace: 'break-spaces'
@@ -3938,7 +3917,7 @@ var useStyles$4 = makeStyles({
       backgroundColor: '#F4F4F4'
     }
   }
-});
+};
 var noTAC = 'Missing data: no TAC can be generated'; // Ensure we have enough data to retrieve a TAC
 
 var shouldRetrieveTAC = function shouldRetrieveTAC(product) {
@@ -4022,17 +4001,17 @@ var useTAC = function useTAC(initialProduct, getTAC) {
 
 var ProductFormTAC = function ProductFormTAC(_ref) {
   var tac = _ref.tac;
-  var classes = useStyles$4();
   var tacLines = tac.split('\n');
   return /*#__PURE__*/React__default.createElement(Typography, {
     variant: "body2",
     component: "div",
-    className: classes.tacOutput,
+    sx: styles$2.tacOutput,
     "data-testid": "productform-tac-message"
   }, tacLines.map(function (line) {
-    return /*#__PURE__*/React__default.createElement("p", {
+    return /*#__PURE__*/React__default.createElement(Box, {
+      component: "p",
       key: line,
-      className: classes.tacLine,
+      sx: styles$2.tacLine,
       "data-testid": "productform-tac-message-line"
     }, line);
   }));
@@ -4048,7 +4027,6 @@ var SigmetForm = function SigmetForm(_ref) {
       initialCancelSigmet = _ref$initialCancelSig === void 0 ? null : _ref$initialCancelSig,
       _ref$showMap = _ref.showMap,
       showMap = _ref$showMap === void 0 ? true : _ref$showMap;
-  var classes = useStyles$6();
 
   var _useApiContext = useApiContext(),
       api = _useApiContext.api;
@@ -4214,13 +4192,13 @@ var SigmetForm = function SigmetForm(_ref) {
       xs: 12
     }, /*#__PURE__*/React__default.createElement(Typography, {
       variant: "body2",
-      className: classes.body,
+      sx: styles$4.body,
       "data-testid": "vaSigmetMoveToFIR"
     }, "Volcanic Cloud is moving in the direction of:", ' ', /*#__PURE__*/React__default.createElement("b", null, " ", watch('vaSigmetMoveToFIR')))))), /*#__PURE__*/React__default.createElement(Grid, {
       item: true,
       container: true,
       spacing: 2,
-      className: classes.containerItem
+      sx: styles$4.containerItem
     }, /*#__PURE__*/React__default.createElement(Grid, {
       item: true,
       xs: 4,
@@ -4228,7 +4206,7 @@ var SigmetForm = function SigmetForm(_ref) {
       justifyContent: "flex-end"
     }, /*#__PURE__*/React__default.createElement(Typography, {
       variant: "subtitle1",
-      className: classes.label
+      sx: styles$4.label
     }, "Issued at")), /*#__PURE__*/React__default.createElement(Grid, {
       item: true,
       xs: 8,
@@ -4239,7 +4217,7 @@ var SigmetForm = function SigmetForm(_ref) {
       xs: 12
     }, /*#__PURE__*/React__default.createElement(Typography, {
       variant: "body2",
-      className: classes.body
+      sx: styles$4.body
     }, getProductIssueDate(initialSigmet, initialCancelSigmet)))), /*#__PURE__*/React__default.createElement(Grid, {
       item: true,
       container: true,
@@ -4251,7 +4229,7 @@ var SigmetForm = function SigmetForm(_ref) {
       justifyContent: "flex-end"
     }, /*#__PURE__*/React__default.createElement(Typography, {
       variant: "subtitle1",
-      className: classes.label
+      sx: styles$4.label
     }, "TAC")), /*#__PURE__*/React__default.createElement(Grid, {
       item: true,
       xs: 8,
@@ -4312,7 +4290,7 @@ var SigmetForm = function SigmetForm(_ref) {
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 4,
-    className: classes.productForm
+    sx: styles$4.productForm
   }, renderForm())));
 };
 
@@ -4326,7 +4304,6 @@ var AirmetForm = function AirmetForm(_ref) {
       initialCancelAirmet = _ref$initialCancelAir === void 0 ? null : _ref$initialCancelAir,
       _ref$showMap = _ref.showMap,
       showMap = _ref$showMap === void 0 ? true : _ref$showMap;
-  var classes = useStyles$6();
 
   var _useApiContext = useApiContext(),
       api = _useApiContext.api;
@@ -4458,7 +4435,7 @@ var AirmetForm = function AirmetForm(_ref) {
       item: true,
       container: true,
       spacing: 2,
-      className: classes.containerItem
+      sx: styles$4.containerItem
     }, /*#__PURE__*/React__default.createElement(Grid, {
       item: true,
       xs: 4,
@@ -4466,7 +4443,7 @@ var AirmetForm = function AirmetForm(_ref) {
       justifyContent: "flex-end"
     }, /*#__PURE__*/React__default.createElement(Typography, {
       variant: "subtitle1",
-      className: classes.label
+      sx: styles$4.label
     }, "Issued at")), /*#__PURE__*/React__default.createElement(Grid, {
       item: true,
       xs: 8,
@@ -4477,7 +4454,7 @@ var AirmetForm = function AirmetForm(_ref) {
       xs: 12
     }, /*#__PURE__*/React__default.createElement(Typography, {
       variant: "body2",
-      className: classes.body
+      sx: styles$4.body
     }, getProductIssueDate(initialAirmet, initialCancelAirmet)))), /*#__PURE__*/React__default.createElement(Grid, {
       item: true,
       container: true,
@@ -4489,7 +4466,7 @@ var AirmetForm = function AirmetForm(_ref) {
       justifyContent: "flex-end"
     }, /*#__PURE__*/React__default.createElement(Typography, {
       variant: "subtitle1",
-      className: classes.label
+      sx: styles$4.label
     }, "TAC")), /*#__PURE__*/React__default.createElement(Grid, {
       item: true,
       xs: 8,
@@ -4549,11 +4526,11 @@ var AirmetForm = function AirmetForm(_ref) {
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 4,
-    className: classes.productForm
+    sx: styles$4.productForm
   }, renderForm())));
 };
 
-var useStyles$3 = makeStyles({
+var styles$1 = {
   dialogHeader: {
     boxShadow: '0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.14)',
     zIndex: 1,
@@ -4566,17 +4543,13 @@ var useStyles$3 = makeStyles({
   },
   dialogChildren: {
     display: 'flex',
-    padding: 20,
+    padding: '20px',
     minHeight: 200,
     minWidth: 400,
-    height: '100%'
-  },
-  dialog: {
-    '& .MuiDialogContent-root': {
-      paddingTop: 20
-    }
+    height: '100%',
+    paddingTop: '20px!important'
   }
-});
+};
 
 var ContentDialog = function ContentDialog(_a) {
   var open = _a.open,
@@ -4589,8 +4562,6 @@ var ContentDialog = function ContentDialog(_a) {
       alertBanner = _a$alertBanner === void 0 ? null : _a$alertBanner,
       other = __rest(_a, ["open", "toggleDialogStatus", "title", "children", "options", "onClose", "alertBanner"]);
 
-  var classes = useStyles$3();
-
   var handleClose = function handleClose() {
     if (onClose) {
       onClose();
@@ -4603,10 +4574,9 @@ var ContentDialog = function ContentDialog(_a) {
     "data-testid": "contentDialog",
     open: open,
     onClose: handleClose,
-    maxWidth: other.maxWidth ? other.maxWidth : 'lg',
-    className: classes.dialog
+    maxWidth: other.maxWidth ? other.maxWidth : 'lg'
   }, other), /*#__PURE__*/React.createElement(DialogTitle, {
-    className: classes.dialogHeader
+    sx: styles$1.dialogHeader
   }, /*#__PURE__*/React.createElement(Grid, {
     container: true,
     alignItems: "center"
@@ -4627,7 +4597,7 @@ var ContentDialog = function ContentDialog(_a) {
   }, "BACK"))), /*#__PURE__*/React.createElement(Grid, {
     item: true,
     xs: true,
-    className: classes.dialogTitle
+    sx: styles$1.dialogTitle
   }, /*#__PURE__*/React.createElement(Typography, {
     "data-testid": "dialogTitle",
     variant: "h6"
@@ -4637,11 +4607,31 @@ var ContentDialog = function ContentDialog(_a) {
   }, /*#__PURE__*/React.createElement(Grid, {
     container: true
   }, options)))), alertBanner !== null && alertBanner, /*#__PURE__*/React.createElement(DialogContent, {
-    className: classes.dialogChildren
+    sx: styles$1.dialogChildren
   }, children));
 };
 
-var getActiveStatus = function getActiveStatus(product, className) {
+var styles = {
+  cardWrapper: {
+    width: '100%'
+  },
+  cardContent: {
+    width: '100%',
+    padding: '14px',
+    '&:last-child': {
+      paddingBottom: '14px'
+    }
+  },
+  activeStatus: {
+    color: '#72bb23',
+    paddingLeft: '6px',
+    paddingTop: '2px'
+  },
+  font: {
+    fontWeight: 'normal'
+  }
+};
+var getActiveStatus = function getActiveStatus(product) {
   // do not return an icon if product is expired
   if (moment(product.validDateEnd) < moment.utc(new Date())) {
     return null;
@@ -4650,10 +4640,10 @@ var getActiveStatus = function getActiveStatus(product, className) {
   var active = moment(product.validDateStart) <= moment.utc(new Date());
   return active ? /*#__PURE__*/React__default.createElement(Success, {
     "data-testid": "status-active",
-    className: className
+    sx: styles.activeStatus
   }) : /*#__PURE__*/React__default.createElement(Clock, {
     "data-testid": "status-inactive",
-    className: className
+    sx: styles.activeStatus
   });
 };
 
@@ -4703,27 +4693,6 @@ var getCancelSeqId = function getCancelSeqId(product) {
   return product.cancelsAirmetSequenceId;
 };
 
-var useStyles$2 = makeStyles({
-  cardWrapper: {
-    width: '100%'
-  },
-  cardContent: {
-    width: '100%',
-    padding: 14,
-    '&:last-child': {
-      paddingBottom: 14
-    }
-  },
-  activeStatus: {
-    color: '#72bb23',
-    paddingLeft: '6px',
-    paddingTop: '2px'
-  },
-  font: {
-    fontWeight: 'normal'
-  }
-});
-
 var formatValidTime = function formatValidTime(startDate, endDate, format) {
   if (!startDate || !endDate) {
     return '-';
@@ -4735,7 +4704,6 @@ var formatValidTime = function formatValidTime(startDate, endDate, format) {
 var ProductListRow = function ProductListRow(_ref) {
   var product = _ref.product,
       productType = _ref.productType;
-  var classes = useStyles$2();
 
   var _useApiContext = useApiContext(),
       api = _useApiContext.api;
@@ -4772,9 +4740,9 @@ var ProductListRow = function ProductListRow(_ref) {
   return /*#__PURE__*/React__default.createElement(Card, {
     elevation: 0,
     variant: "outlined",
-    className: classes.cardWrapper
+    sx: styles.cardWrapper
   }, /*#__PURE__*/React__default.createElement(CardContent, {
-    className: classes.cardContent
+    sx: styles.cardContent
   }, /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     alignItems: "center",
@@ -4792,7 +4760,7 @@ var ProductListRow = function ProductListRow(_ref) {
   }, productType.toUpperCase()), /*#__PURE__*/React__default.createElement(Typography, {
     variant: "subtitle2",
     noWrap: true,
-    className: classes.font
+    sx: styles.font
   }, phenomenon !== null ? phenomenon : 'Cancel'))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 3,
@@ -4819,7 +4787,7 @@ var ProductListRow = function ProductListRow(_ref) {
     variant: "overline"
   }, "Issue time"), /*#__PURE__*/React__default.createElement(Typography, {
     variant: "subtitle2",
-    className: classes.font,
+    sx: styles.font,
     "data-testid": "issueTime"
   }, product.issueDate ? "".concat(moment.utc(product.issueDate).format('DD MMM YYYY, HH:mm'), " UTC") : '(Not published)')), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
@@ -4831,7 +4799,7 @@ var ProductListRow = function ProductListRow(_ref) {
     variant: "overline"
   }, "Valid time"), /*#__PURE__*/React__default.createElement(Typography, {
     variant: "subtitle2",
-    className: classes.font,
+    sx: styles.font,
     "data-testid": "validTime"
   }, validTime)), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
@@ -4845,7 +4813,7 @@ var ProductListRow = function ProductListRow(_ref) {
     startIcon: /*#__PURE__*/React__default.createElement(Edit, {
       color: "secondary"
     })
-  }, "Draft") : getStatusTagList(product, cancelsSeqId), product.status === 'PUBLISHED' && cancelsSeqId === null && getActiveStatus(product, classes.activeStatus)))));
+  }, "Draft") : getStatusTagList(product, cancelsSeqId), product.status === 'PUBLISHED' && cancelsSeqId === null && getActiveStatus(product)))));
 };
 
 /* *
@@ -4864,19 +4832,6 @@ var ProductListRow = function ProductListRow(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$1 = makeStyles({
-  errorMessage: {
-    width: '1200px',
-    marginTop: '10px'
-  },
-  listBody: {
-    width: '100%',
-    minHeight: '600px'
-  },
-  listItem: {
-    padding: '2px'
-  }
-});
 
 var ProductList = function ProductList(_ref) {
   var productType = _ref.productType,
@@ -4885,7 +4840,6 @@ var ProductList = function ProductList(_ref) {
       error = _ref.error,
       onClickProductRow = _ref.onClickProductRow,
       onClickNewProduct = _ref.onClickNewProduct;
-  var classes = useStyles$1();
   return /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     direction: "column",
@@ -4901,7 +4855,10 @@ var ProductList = function ProductList(_ref) {
     onClick: onClickNewProduct
   }, "Create a new ", productType.toUpperCase())), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    className: classes.listBody
+    sx: {
+      width: '100%',
+      minHeight: '600px'
+    }
   }, error && /*#__PURE__*/React__default.createElement(AlertBanner, {
     severity: "error",
     title: "An error has occurred while retrieving the list, please try again",
@@ -4916,7 +4873,9 @@ var ProductList = function ProductList(_ref) {
         onClickProductRow(productListItem);
       },
       key: product.sequence && product.issueDate ? "".concat(product.sequence, "-").concat(product.issueDate) : "draft-".concat(index),
-      className: classes.listItem
+      sx: {
+        padding: '2px'
+      }
     }, /*#__PURE__*/React__default.createElement(ProductListRow, {
       product: product,
       productType: productType
@@ -4979,13 +4938,6 @@ var CancelSigmetVolcanicMovements = function CancelSigmetVolcanicMovements(_ref)
   })));
 };
 
-var useStyles = makeStyles({
-  backdrop: {
-    zIndex: 1500,
-    color: '#fff'
-  }
-});
-
 var isVAPhenomenon = function isVAPhenomenon(product, action) {
   return action === 'CANCELLED' && product !== null && !isInstanceOfCancelSigmetOrAirmet(product) && product.phenomenon === 'VA_CLD';
 };
@@ -5008,7 +4960,6 @@ var ProductFormDialogContent = function ProductFormDialogContent(_ref) {
       productType = _ref.productType,
       productCanBe = _ref.productCanBe,
       product = _ref.product;
-  var classes = useStyles();
 
   var _useApiContext = useApiContext(),
       api = _useApiContext.api;
@@ -5193,7 +5144,10 @@ var ProductFormDialogContent = function ProductFormDialogContent(_ref) {
   }), /*#__PURE__*/React.createElement(DraftFieldHelper, null), /*#__PURE__*/React.createElement(Backdrop, {
     "data-testid": "loader",
     open: showLoader,
-    className: classes.backdrop
+    sx: {
+      zIndex: 1500,
+      color: '#fff'
+    }
   }, /*#__PURE__*/React.createElement(CircularProgress, {
     color: "inherit"
   })));
@@ -5346,13 +5300,12 @@ var MetInfoWrapper = function MetInfoWrapper(_ref) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
-var createApi = function createApi(url, appUrl, auth, setAuth, authTokenUrl, authClientId) {
-  var axiosInstance = createApiInstance(url, appUrl, auth, setAuth, authTokenUrl, authClientId);
+
+var getApiRoutes = function getApiRoutes(axiosInstance) {
   return {
-    // api data
     getSigmetList: function getSigmetList() {
       return axiosInstance.get('/sigmetlist');
     },
@@ -5362,16 +5315,21 @@ var createApi = function createApi(url, appUrl, auth, setAuth, authTokenUrl, aut
     getSigmetTAC: function getSigmetTAC(sigmetData) {
       return axiosInstance.post('/sigmet2tac', Object.assign({}, sigmetData));
     },
-    postAirmet: function postAirmet(formData) {
-      return axiosInstance.post('/airmet', Object.assign({}, formData));
-    },
     getAirmetList: function getAirmetList() {
       return axiosInstance.get('/airmetlist');
     },
+    postAirmet: function postAirmet(formData) {
+      return axiosInstance.post('/airmet', Object.assign({}, formData));
+    },
     getAirmetTAC: function getAirmetTAC(sigmetData) {
       return axiosInstance.post('/airmet2tac', Object.assign({}, sigmetData));
     }
   };
 };
 
+var createApi = function createApi(url, appUrl, auth, setAuth, authTokenUrl, authClientId) {
+  var axiosInstance = createApiInstance(url, appUrl, auth, setAuth, authTokenUrl, authClientId);
+  return getApiRoutes(axiosInstance);
+};
+
 export { AirmetForm, ContentDialog, MapViewGeoJson, MetInfoWrapper, ProductList, ProductListRow, SigmetForm, createApi };