@opengeoweb/sigmet-airmet 3.0.0 → 4.0.0

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material'), require('react-hook-form'), require('@opengeoweb/form-fields'), require('@opengeoweb/api'), require('immer'), require('react-redux'), require('@opengeoweb/core'), require('@turf/turf'), require('@mui/styles/makeStyles'), require('@opengeoweb/shared'), require('@opengeoweb/theme'), require('moment'), require('lodash')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', 'react-hook-form', '@opengeoweb/form-fields', '@opengeoweb/api', 'immer', 'react-redux', '@opengeoweb/core', '@turf/turf', '@mui/styles/makeStyles', '@opengeoweb/shared', '@opengeoweb/theme', 'moment', 'lodash'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.SigmetAirmet = {}, global.React, global.material, global.reactHookForm, global.formFields, global.api, global.produce, global.reactRedux, global.core, global.turf, global.makeStyles, global.shared, global.theme, global.moment, global.lodash));
-})(this, (function (exports, React, material, reactHookForm, formFields, api, produce, reactRedux, core, turf, makeStyles, shared, theme, moment, lodash) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material'), require('react-hook-form'), require('@opengeoweb/form-fields'), require('@opengeoweb/api'), require('immer'), require('react-redux'), require('@opengeoweb/core'), require('@turf/turf'), require('@opengeoweb/shared'), require('@opengeoweb/theme'), require('moment'), require('lodash')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', 'react-hook-form', '@opengeoweb/form-fields', '@opengeoweb/api', 'immer', 'react-redux', '@opengeoweb/core', '@turf/turf', '@opengeoweb/shared', '@opengeoweb/theme', 'moment', 'lodash'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.SigmetAirmet = {}, global.React, global.material, global.reactHookForm, global.formFields, global.api, global.produce, global.reactRedux, global.core, global.turf, global.shared, global.theme, global.moment, global.lodash));
+})(this, (function (exports, React, material, reactHookForm, formFields, api, produce, reactRedux, core, turf, shared, theme, moment, lodash) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -28,7 +28,6 @@
     var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
     var produce__default = /*#__PURE__*/_interopDefaultLegacy(produce);
     var turf__namespace = /*#__PURE__*/_interopNamespace(turf);
-    var makeStyles__default = /*#__PURE__*/_interopDefaultLegacy(makeStyles);
     var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
 
     /*! *****************************************************************************
@@ -1113,7 +1112,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$6 = makeStyles__default["default"]({
+    var styles$4 = {
       productForm: {
         overflowY: 'scroll',
         overflowX: 'hidden',
@@ -1130,19 +1129,19 @@
         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%'
@@ -1157,7 +1156,7 @@
       drawSection: {
         padding: '10px 0px'
       }
-    });
+    };
 
     var RadioButtonAndLabel = function RadioButtonAndLabel(props) {
       var value = props.value,
@@ -1203,12 +1202,11 @@
           isReadOnly = _a.isReadOnly;
       var watch = reactHookForm.useFormContext().watch;
       var isRequired = shared.useDraftFormHelpers().isRequired;
-      var classes = useStyles$6();
       return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         container: true,
         spacing: 2,
-        className: classes.containerItem
+        sx: styles$4.containerItem
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 4,
@@ -1216,7 +1214,7 @@
         justifyContent: "flex-end"
       }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "subtitle1",
-        className: classes.label
+        sx: styles$4.label
       }, "Change")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 8,
@@ -1267,7 +1265,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$5 = makeStyles__default["default"]({
+    var styles$3 = {
       drawButtons: {
         color: '#0075a9',
         borderRadius: '5px',
@@ -1281,14 +1279,13 @@
         border: 'solid 1px #0075a9',
         padding: '2px'
       }
-    });
+    };
 
     var DrawTools = function DrawTools(_a) {
       var _b = _a.type,
           type = _b === void 0 ? '' : _b,
           drawMode = _a.drawMode,
           setDrawMode = _a.setDrawMode;
-      var classes = useStyles$5();
       return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 12,
@@ -1301,11 +1298,11 @@
         title: "Drop a point as " + type + " position"
       }, /*#__PURE__*/React__default["default"].createElement(material.Radio, {
         icon: /*#__PURE__*/React__default["default"].createElement(theme.Location, {
-          className: classes.drawButtons
+          sx: styles$3.drawButtons
         }),
         value: true,
         checkedIcon: /*#__PURE__*/React__default["default"].createElement(theme.Location, {
-          className: classes.drawButtonsSelected
+          sx: styles$3.drawButtonsSelected
         }),
         checked: drawMode === MapDrawMode.POINT,
         onChange: function onChange() {
@@ -1318,10 +1315,10 @@
         title: "Draw a box as " + type + " position"
       }, /*#__PURE__*/React__default["default"].createElement(material.Radio, {
         icon: /*#__PURE__*/React__default["default"].createElement(theme.DrawRegion, {
-          className: classes.drawButtons
+          sx: styles$3.drawButtons
         }),
         checkedIcon: /*#__PURE__*/React__default["default"].createElement(theme.DrawRegion, {
-          className: classes.drawButtonsSelected
+          sx: styles$3.drawButtonsSelected
         }),
         checked: drawMode === MapDrawMode.BOX,
         onChange: function onChange() {
@@ -1334,10 +1331,10 @@
         title: "Draw a shape as " + type + " position"
       }, /*#__PURE__*/React__default["default"].createElement(material.Radio, {
         icon: /*#__PURE__*/React__default["default"].createElement(theme.DrawPolygon, {
-          className: classes.drawButtons
+          sx: styles$3.drawButtons
         }),
         checkedIcon: /*#__PURE__*/React__default["default"].createElement(theme.DrawPolygon, {
-          className: classes.drawButtonsSelected
+          sx: styles$3.drawButtonsSelected
         }),
         checked: drawMode === MapDrawMode.POLYGON,
         onChange: function onChange() {
@@ -1350,10 +1347,10 @@
         title: "Set FIR as " + type + " position"
       }, /*#__PURE__*/React__default["default"].createElement(material.Radio, {
         icon: /*#__PURE__*/React__default["default"].createElement(theme.DrawFIRLand, {
-          className: classes.drawButtons
+          sx: styles$3.drawButtons
         }),
         checkedIcon: /*#__PURE__*/React__default["default"].createElement(theme.DrawFIRLand, {
-          className: classes.drawButtonsSelected
+          sx: styles$3.drawButtonsSelected
         }),
         checked: drawMode === MapDrawMode.FIR,
         onChange: function onChange() {
@@ -1366,10 +1363,10 @@
         title: "Remove geometry"
       }, /*#__PURE__*/React__default["default"].createElement(material.Radio, {
         icon: /*#__PURE__*/React__default["default"].createElement(theme.Delete, {
-          className: classes.drawButtons
+          sx: styles$3.drawButtons
         }),
         checkedIcon: /*#__PURE__*/React__default["default"].createElement(theme.Delete, {
-          className: classes.drawButtonsSelected
+          sx: styles$3.drawButtonsSelected
         }),
         checked: drawMode === MapDrawMode.DELETE,
         onChange: function onChange() {
@@ -1925,7 +1922,6 @@
           clearErrors = _c.clearErrors;
 
       var isRequired = shared.useDraftFormHelpers().isRequired;
-      var classes = useStyles$6();
       var config = productType === 'sigmet' ? sigmetConfig : airmetConfig;
       var allowedUnits = useProductSettings(config).allowedUnits;
       var selectedFIR = watch('locationIndicatorATSR'); // Get allowed level units based on selected FIR - if no FIR selected, allow all default units
@@ -1935,7 +1931,7 @@
         item: true,
         container: true,
         spacing: 2,
-        className: classes.containerItem
+        sx: styles$4.containerItem
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 4,
@@ -1943,7 +1939,7 @@
         justifyContent: "flex-end"
       }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "subtitle1",
-        className: classes.label
+        sx: styles$4.label
       }, "Levels")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 8,
@@ -2016,7 +2012,7 @@
             isRequired: isRequired
           }
         },
-        className: classes.unit,
+        sx: styles$4.unit,
         disabled: isDisabled,
         defaultValue: 'FL',
         onChange: function onChange() {
@@ -2086,7 +2082,7 @@
             }
           }
         },
-        className: classes.unit,
+        sx: styles$4.unit,
         disabled: isDisabled,
         defaultValue: 'FL',
         onChange: function onChange() {
@@ -2105,7 +2101,7 @@
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormNumberField, {
         name: "level.value",
         label: "Upper level",
-        className: classes.levelField,
+        sx: styles$4.levelField,
         rules: {
           validate: {
             isRequired: isRequired,
@@ -2166,7 +2162,7 @@
             }
           }
         },
-        className: classes.unit,
+        sx: styles$4.unit,
         disabled: isDisabled,
         defaultValue: getValues('level.unit') || 'FL',
         onChange: function onChange() {
@@ -2248,7 +2244,7 @@
             isRequired: isRequired
           }
         },
-        className: classes.unit,
+        sx: styles$4.unit,
         disabled: isDisabled,
         defaultValue: 'FL',
         onChange: function onChange() {
@@ -2386,7 +2382,6 @@
         return null;
       } : _b;
       var watch = reactHookForm.useFormContext().watch;
-      var classes = useStyles$6();
       return (!isReadOnly || watch('observationOrForecastTime') !== null) && /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         container: true,
@@ -2398,7 +2393,7 @@
         justifyContent: "flex-end"
       }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "subtitle1",
-        className: classes.label
+        sx: styles$4.label
       }, "At")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 8,
@@ -2438,7 +2433,6 @@
           setValue = _c.setValue,
           trigger = _c.trigger;
 
-      var classes = useStyles$6();
       var phenomenaList = productType === 'sigmet' ? SigmetPhenomena : AirmetPhenomena;
       return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
@@ -2451,7 +2445,7 @@
         justifyContent: "flex-end"
       }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "subtitle1",
-        className: classes.label
+        sx: styles$4.label
       }, "What")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 8,
@@ -2522,7 +2516,6 @@
           drawMode = _a.drawMode,
           geoJSONs = _a.geoJSONs,
           setDrawModeType = _a.setDrawModeType;
-      var classes = useStyles$6();
 
       var _c = reactHookForm.useFormContext(),
           errors = _c.errors,
@@ -2533,7 +2526,7 @@
         item: true,
         container: true,
         spacing: 2,
-        className: classes.drawSection
+        sx: styles$4.drawSection
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 4,
@@ -2541,7 +2534,7 @@
         justifyContent: "flex-end"
       }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "subtitle1",
-        className: classes.label
+        sx: styles$4.label
       }, "Start position")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 8,
@@ -2554,7 +2547,7 @@
         }
       }), drawMode[StartOrEndDrawing.start] && /*#__PURE__*/React__default["default"].createElement(material.FormHelperText, {
         variant: "filled",
-        className: classes.quitDrawModeMessage
+        sx: styles$4.quitDrawModeMessage
       }, exitDrawModeMessage), !!errors.startGeometry && /*#__PURE__*/React__default["default"].createElement(material.FormHelperText, {
         error: true,
         variant: "filled"
@@ -2662,8 +2655,6 @@
         return null;
       } : _d;
 
-      var classes = useStyles$6();
-
       var _e = reactHookForm.useFormContext(),
           watch = _e.watch,
           getValues = _e.getValues,
@@ -2684,7 +2675,7 @@
         item: true,
         container: true,
         spacing: 2,
-        className: classes.containerItem
+        sx: styles$4.containerItem
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 4,
@@ -2692,7 +2683,7 @@
         justifyContent: "flex-end"
       }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "subtitle1",
-        className: classes.label
+        sx: styles$4.label
       }, "Progress")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 8,
@@ -2736,7 +2727,7 @@
         rules: {
           validate: isRequired
         },
-        className: classes.movement,
+        sx: styles$4.movement,
         disabled: isDisabled,
         "data-testid": "movement-movementDirection",
         onChange: function onChange(event) {
@@ -2763,7 +2754,7 @@
         rules: {
           validate: isRequired
         },
-        className: classes.unit,
+        sx: styles$4.unit,
         disabled: isDisabled,
         defaultValue: 'KT',
         "data-testid": "movement-movementUnit",
@@ -2819,7 +2810,7 @@
         item: true,
         xs: 12,
         "data-testid": "endGeometry",
-        className: classes.drawSection
+        sx: styles$4.drawSection
       }, !isReadOnly && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(DrawTools, {
         "data-testid": "endGeometry-drawTools",
         type: StartOrEndDrawing.end,
@@ -2829,7 +2820,7 @@
         }
       }), drawMode[StartOrEndDrawing.end] && /*#__PURE__*/React__default["default"].createElement(material.FormHelperText, {
         variant: "filled",
-        className: classes.quitDrawModeMessage
+        sx: styles$4.quitDrawModeMessage
       }, exitDrawModeMessage), !!errors.endGeometry && /*#__PURE__*/React__default["default"].createElement(material.FormHelperText, {
         error: true,
         variant: "filled"
@@ -2882,7 +2873,6 @@
     var SelectFIR = function SelectFIR(_a) {
       var productType = _a.productType,
           isDisabled = _a.isDisabled;
-      var classes = useStyles$6();
       var setValue = reactHookForm.useFormContext().setValue;
       var isRequired = shared.useDraftFormHelpers().isRequired;
       var config = productType === 'sigmet' ? sigmetConfig : airmetConfig;
@@ -2896,7 +2886,7 @@
         item: true,
         container: true,
         spacing: 2,
-        className: classes.containerItem
+        sx: styles$4.containerItem
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 4,
@@ -2904,7 +2894,7 @@
         justifyContent: "flex-end"
       }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "subtitle1",
-        className: classes.label
+        sx: styles$4.label
       }, "Where")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 8,
@@ -2966,12 +2956,11 @@
           isDisabled = _a.isDisabled;
       var watch = reactHookForm.useFormContext().watch;
       var isRequired = shared.useDraftFormHelpers().isRequired;
-      var classes = useStyles$6();
       return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         container: true,
         spacing: 2,
-        className: classes.containerItem
+        sx: styles$4.containerItem
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 4,
@@ -2979,7 +2968,7 @@
         justifyContent: "flex-end"
       }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "subtitle1",
-        className: classes.label
+        sx: styles$4.label
       }, "Type")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 8,
@@ -3045,7 +3034,6 @@
           getValues = _c.getValues,
           trigger = _c.trigger;
 
-      var classes = useStyles$6();
       var isRequired = shared.useDraftFormHelpers().isRequired;
       var config = productType === 'sigmet' ? sigmetConfig : airmetConfig;
       return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
@@ -3059,7 +3047,7 @@
         justifyContent: "flex-end"
       }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "subtitle1",
-        className: classes.label
+        sx: styles$4.label
       }, "Valid from")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 8,
@@ -3137,7 +3125,6 @@
           trigger = _c.trigger;
 
       var isRequired = shared.useDraftFormHelpers().isRequired;
-      var classes = useStyles$6();
       var config = productType === 'sigmet' ? sigmetConfig : airmetConfig;
       var defaultHoursValid = getDefaultHoursValid(productType);
       return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
@@ -3151,7 +3138,7 @@
         justifyContent: "flex-end"
       }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "subtitle1",
-        className: classes.label
+        sx: styles$4.label
       }, "Valid until")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 8,
@@ -3220,7 +3207,6 @@
           trigger = _b.trigger,
           getValues = _b.getValues;
 
-      var classes = useStyles$6();
       return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         container: true,
@@ -3238,7 +3224,7 @@
       }, (!isReadOnly || !!watch('vaSigmetVolcanoName')) && /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 12,
-        className: classes.volcanicField
+        sx: styles$4.volcanicField
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormTextField, {
         name: "vaSigmetVolcanoName",
         label: "Volcano name",
@@ -3266,7 +3252,7 @@
             }
           }
         },
-        className: classes.latitude,
+        sx: styles$4.latitude,
         disabled: isDisabled,
         helperText: helperText,
         onChange: function onChange() {
@@ -3335,7 +3321,6 @@
         return null;
       } : _b;
 
-      var classes = useStyles$6();
       var isRequired = shared.useDraftFormHelpers().isRequired;
       return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
@@ -3354,7 +3339,7 @@
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 12,
-        className: classes.surfaceVisibility
+        sx: styles$4.surfaceVisibility
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormNumberField, {
         name: "visibilityValue",
         "data-testid": "surfaceVisibility-visibilityValue",
@@ -3438,7 +3423,6 @@
           watch = _c.watch;
 
       var isRequired = shared.useDraftFormHelpers().isRequired;
-      var classes = useStyles$6();
       var allowedUnits = useProductSettings(airmetConfig).allowedUnits;
       var selectedFIR = watch('locationIndicatorATSR'); // Get allowed speed units based on selected FIR - if no FIR selected, allow all units
 
@@ -3460,7 +3444,7 @@
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 12,
-        className: classes.surfaceWind
+        sx: styles$4.surfaceWind
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormNumberField, {
         name: "windDirection",
         label: "Set wind direction",
@@ -3496,7 +3480,7 @@
             isRequired: isRequired
           }
         },
-        className: classes.unit,
+        sx: styles$4.unit,
         disabled: isDisabled,
         defaultValue: 'KT',
         "data-testid": "surfaceWind-windUnit",
@@ -3590,7 +3574,6 @@
           getValues = _c.getValues;
 
       var isRequired = shared.useDraftFormHelpers().isRequired;
-      var classes = useStyles$6();
       var allowedUnits = useProductSettings(airmetConfig).allowedUnits;
       var selectedFIR = watch('locationIndicatorATSR'); // Get allowed cloud level units based on selected FIR - if no FIR selected, allow all default units
 
@@ -3599,7 +3582,7 @@
         item: true,
         container: true,
         spacing: 2,
-        className: classes.containerItem
+        sx: styles$4.containerItem
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 4,
@@ -3607,7 +3590,7 @@
         justifyContent: "flex-end"
       }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "subtitle1",
-        className: classes.label
+        sx: styles$4.label
       }, "Levels")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 8,
@@ -3674,7 +3657,7 @@
             isRequired: isRequired
           }
         },
-        className: classes.unit,
+        sx: styles$4.unit,
         disabled: isDisabled,
         defaultValue: 'FT',
         onChange: function onChange() {
@@ -3703,7 +3686,7 @@
         name: "cloudLevel.value",
         label: "Upper level",
         "data-testid": "cloudLevel-value",
-        className: classes.levelField,
+        sx: styles$4.levelField,
         rules: {
           validate: {
             isRequired: isRequired,
@@ -3780,7 +3763,7 @@
             isRequired: isRequired
           }
         },
-        className: classes.unit,
+        sx: styles$4.unit,
         disabled: isDisabled,
         defaultValue: getValues('cloudLevel.unit') ? getValues('cloudLevel.unit') : 'FT',
         onChange: function onChange() {
@@ -3834,7 +3817,7 @@
       })))))));
     };
 
-    var useStyles$4 = makeStyles__default["default"]({
+    var styles$2 = {
       tacOutput: {
         paddingTop: '16px',
         whiteSpace: 'break-spaces'
@@ -3849,7 +3832,7 @@
           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) {
@@ -3936,17 +3919,17 @@
 
     var ProductFormTAC = function ProductFormTAC(_a) {
       var tac = _a.tac;
-      var classes = useStyles$4();
       var tacLines = tac.split('\n');
       return /*#__PURE__*/React__default["default"].createElement(material.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["default"].createElement("p", {
+        return /*#__PURE__*/React__default["default"].createElement(material.Box, {
+          component: "p",
           key: line,
-          className: classes.tacLine,
+          sx: styles$2.tacLine,
           "data-testid": "productform-tac-message-line"
         }, line);
       }));
@@ -3962,7 +3945,6 @@
           initialCancelSigmet = _d === void 0 ? null : _d,
           _e = _a.showMap,
           showMap = _e === void 0 ? true : _e;
-      var classes = useStyles$6();
       var api$1 = api.useApiContext().api;
 
       var _f = reactHookForm.useFormContext(),
@@ -4124,13 +4106,13 @@
           xs: 12
         }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
           variant: "body2",
-          className: classes.body,
+          sx: styles$4.body,
           "data-testid": "vaSigmetMoveToFIR"
         }, "Volcanic Cloud is moving in the direction of:", ' ', /*#__PURE__*/React__default["default"].createElement("b", null, " ", watch('vaSigmetMoveToFIR')))))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
           item: true,
           container: true,
           spacing: 2,
-          className: classes.containerItem
+          sx: styles$4.containerItem
         }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
           item: true,
           xs: 4,
@@ -4138,7 +4120,7 @@
           justifyContent: "flex-end"
         }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
           variant: "subtitle1",
-          className: classes.label
+          sx: styles$4.label
         }, "Issued at")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
           item: true,
           xs: 8,
@@ -4149,7 +4131,7 @@
           xs: 12
         }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
           variant: "body2",
-          className: classes.body
+          sx: styles$4.body
         }, getProductIssueDate(initialSigmet, initialCancelSigmet)))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
           item: true,
           container: true,
@@ -4161,7 +4143,7 @@
           justifyContent: "flex-end"
         }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
           variant: "subtitle1",
-          className: classes.label
+          sx: styles$4.label
         }, "TAC")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
           item: true,
           xs: 8,
@@ -4222,7 +4204,7 @@
       })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 4,
-        className: classes.productForm
+        sx: styles$4.productForm
       }, renderForm())));
     };
 
@@ -4236,7 +4218,6 @@
           initialCancelAirmet = _d === void 0 ? null : _d,
           _e = _a.showMap,
           showMap = _e === void 0 ? true : _e;
-      var classes = useStyles$6();
       var api$1 = api.useApiContext().api;
 
       var _f = reactHookForm.useFormContext(),
@@ -4364,7 +4345,7 @@
           item: true,
           container: true,
           spacing: 2,
-          className: classes.containerItem
+          sx: styles$4.containerItem
         }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
           item: true,
           xs: 4,
@@ -4372,7 +4353,7 @@
           justifyContent: "flex-end"
         }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
           variant: "subtitle1",
-          className: classes.label
+          sx: styles$4.label
         }, "Issued at")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
           item: true,
           xs: 8,
@@ -4383,7 +4364,7 @@
           xs: 12
         }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
           variant: "body2",
-          className: classes.body
+          sx: styles$4.body
         }, getProductIssueDate(initialAirmet, initialCancelAirmet)))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
           item: true,
           container: true,
@@ -4395,7 +4376,7 @@
           justifyContent: "flex-end"
         }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
           variant: "subtitle1",
-          className: classes.label
+          sx: styles$4.label
         }, "TAC")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
           item: true,
           xs: 8,
@@ -4455,11 +4436,11 @@
       })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 4,
-        className: classes.productForm
+        sx: styles$4.productForm
       }, renderForm())));
     };
 
-    var useStyles$3 = makeStyles__default["default"]({
+    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,
@@ -4472,17 +4453,13 @@
       },
       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,
@@ -4495,8 +4472,6 @@
           alertBanner = _b === void 0 ? null : _b,
           other = __rest(_a, ["open", "toggleDialogStatus", "title", "children", "options", "onClose", "alertBanner"]);
 
-      var classes = useStyles$3();
-
       var handleClose = function handleClose() {
         if (onClose) {
           onClose();
@@ -4509,10 +4484,9 @@
         "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__namespace.createElement(material.DialogTitle, {
-        className: classes.dialogHeader
+        sx: styles$1.dialogHeader
       }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
         container: true,
         alignItems: "center"
@@ -4533,7 +4507,7 @@
       }, "BACK"))), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true,
         xs: true,
-        className: classes.dialogTitle
+        sx: styles$1.dialogTitle
       }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
         "data-testid": "dialogTitle",
         variant: "h6"
@@ -4543,11 +4517,31 @@
       }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
         container: true
       }, options)))), alertBanner !== null && alertBanner, /*#__PURE__*/React__namespace.createElement(material.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__default["default"](product.validDateEnd) < moment__default["default"].utc(new Date())) {
         return null;
@@ -4556,10 +4550,10 @@
       var active = moment__default["default"](product.validDateStart) <= moment__default["default"].utc(new Date());
       return active ? /*#__PURE__*/React__default["default"].createElement(theme.Success, {
         "data-testid": "status-active",
-        className: className
+        sx: styles.activeStatus
       }) : /*#__PURE__*/React__default["default"].createElement(theme.Clock, {
         "data-testid": "status-inactive",
-        className: className
+        sx: styles.activeStatus
       });
     };
 
@@ -4611,27 +4605,6 @@
       return product.cancelsAirmetSequenceId;
     };
 
-    var useStyles$2 = makeStyles__default["default"]({
-      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 '-';
@@ -4643,7 +4616,6 @@
     var ProductListRow = function ProductListRow(_a) {
       var product = _a.product,
           productType = _a.productType;
-      var classes = useStyles$2();
       var api$1 = api.useApiContext().api;
       var isMounted = shared.useIsMounted().isMounted;
 
@@ -4675,9 +4647,9 @@
       return /*#__PURE__*/React__default["default"].createElement(material.Card, {
         elevation: 0,
         variant: "outlined",
-        className: classes.cardWrapper
+        sx: styles.cardWrapper
       }, /*#__PURE__*/React__default["default"].createElement(material.CardContent, {
-        className: classes.cardContent
+        sx: styles.cardContent
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true,
         alignItems: "center",
@@ -4695,7 +4667,7 @@
       }, productType.toUpperCase()), /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "subtitle2",
         noWrap: true,
-        className: classes.font
+        sx: styles.font
       }, phenomenon !== null ? phenomenon : 'Cancel'))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 3,
@@ -4722,7 +4694,7 @@
         variant: "overline"
       }, "Issue time"), /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "subtitle2",
-        className: classes.font,
+        sx: styles.font,
         "data-testid": "issueTime"
       }, product.issueDate ? moment__default["default"].utc(product.issueDate).format('DD MMM YYYY, HH:mm') + " UTC" : '(Not published)')), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
@@ -4734,7 +4706,7 @@
         variant: "overline"
       }, "Valid time"), /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "subtitle2",
-        className: classes.font,
+        sx: styles.font,
         "data-testid": "validTime"
       }, validTime)), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
@@ -4748,7 +4720,7 @@
         startIcon: /*#__PURE__*/React__default["default"].createElement(theme.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)))));
     };
 
     /* *
@@ -4767,19 +4739,6 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$1 = makeStyles__default["default"]({
-      errorMessage: {
-        width: '1200px',
-        marginTop: '10px'
-      },
-      listBody: {
-        width: '100%',
-        minHeight: '600px'
-      },
-      listItem: {
-        padding: '2px'
-      }
-    });
 
     var ProductList = function ProductList(_a) {
       var productType = _a.productType,
@@ -4788,7 +4747,6 @@
           error = _a.error,
           onClickProductRow = _a.onClickProductRow,
           onClickNewProduct = _a.onClickNewProduct;
-      var classes = useStyles$1();
       return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true,
         direction: "column",
@@ -4804,7 +4762,10 @@
         onClick: onClickNewProduct
       }, "Create a new ", productType.toUpperCase())), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        className: classes.listBody
+        sx: {
+          width: '100%',
+          minHeight: '600px'
+        }
       }, error && /*#__PURE__*/React__default["default"].createElement(shared.AlertBanner, {
         severity: "error",
         title: "An error has occurred while retrieving the list, please try again",
@@ -4819,7 +4780,9 @@
             onClickProductRow(productListItem);
           },
           key: product.sequence && product.issueDate ? product.sequence + "-" + product.issueDate : "draft-" + index,
-          className: classes.listItem
+          sx: {
+            padding: '2px'
+          }
         }, /*#__PURE__*/React__default["default"].createElement(ProductListRow, {
           product: product,
           productType: productType
@@ -4877,13 +4840,6 @@
       })));
     };
 
-    var useStyles = makeStyles__default["default"]({
-      backdrop: {
-        zIndex: 1500,
-        color: '#fff'
-      }
-    });
-
     var isVAPhenomenon = function isVAPhenomenon(product, action) {
       return action === 'CANCELLED' && product !== null && !isInstanceOfCancelSigmetOrAirmet(product) && product.phenomenon === 'VA_CLD';
     };
@@ -4906,7 +4862,6 @@
           productType = _a.productType,
           productCanBe = _a.productCanBe,
           product = _a.product;
-      var classes = useStyles();
       var api$1 = api.useApiContext().api;
       var apiCall = productType === 'sigmet' ? api$1.postSigmet : api$1.postAirmet;
 
@@ -5085,7 +5040,10 @@
       }), /*#__PURE__*/React__namespace.createElement(DraftFieldHelper, null), /*#__PURE__*/React__namespace.createElement(material.Backdrop, {
         "data-testid": "loader",
         open: showLoader,
-        className: classes.backdrop
+        sx: {
+          zIndex: 1500,
+          color: '#fff'
+        }
       }, /*#__PURE__*/React__namespace.createElement(material.CircularProgress, {
         color: "inherit"
       })));
@@ -5205,10 +5163,8 @@
       }));
     };
 
-    var createApi = function createApi(url, appUrl, auth, setAuth, authTokenUrl, authClientId) {
-      var axiosInstance = api.createApiInstance(url, appUrl, auth, setAuth, authTokenUrl, authClientId);
+    var getApiRoutes = function getApiRoutes(axiosInstance) {
       return {
-        // api data
         getSigmetList: function getSigmetList() {
           return axiosInstance.get('/sigmetlist');
         },
@@ -5218,18 +5174,23 @@
         getSigmetTAC: function getSigmetTAC(sigmetData) {
           return axiosInstance.post('/sigmet2tac', __assign({}, sigmetData));
         },
-        postAirmet: function postAirmet(formData) {
-          return axiosInstance.post('/airmet', __assign({}, formData));
-        },
         getAirmetList: function getAirmetList() {
           return axiosInstance.get('/airmetlist');
         },
+        postAirmet: function postAirmet(formData) {
+          return axiosInstance.post('/airmet', __assign({}, formData));
+        },
         getAirmetTAC: function getAirmetTAC(sigmetData) {
           return axiosInstance.post('/airmet2tac', __assign({}, sigmetData));
         }
       };
     };
 
+    var createApi = function createApi(url, appUrl, auth, setAuth, authTokenUrl, authClientId) {
+      var axiosInstance = api.createApiInstance(url, appUrl, auth, setAuth, authTokenUrl, authClientId);
+      return getApiRoutes(axiosInstance);
+    };
+
     exports.AirmetForm = AirmetForm;
     exports.ContentDialog = ContentDialog;
     exports.MapViewGeoJson = MapViewGeoJson;