@opengeoweb/sigmet-airmet 4.2.0 → 4.4.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('@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';
+    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('@turf/turf'), require('@opengeoweb/shared'), require('@opengeoweb/theme'), require('moment'), require('lodash'), require('react-redux'), require('@opengeoweb/core')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', 'react-hook-form', '@opengeoweb/form-fields', '@opengeoweb/api', 'immer', '@turf/turf', '@opengeoweb/shared', '@opengeoweb/theme', 'moment', 'lodash', 'react-redux', '@opengeoweb/core'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.SigmetAirmet = {}, global.React, global.material, global.reactHookForm, global.formFields, global.api, global.produce, global.turf, global.shared, global.theme, global.moment, global.lodash, global.reactRedux, global.core));
+})(this, (function (exports, React, material, reactHookForm, formFields, api, produce, turf, shared, theme, moment, lodash, reactRedux, core) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -133,6 +133,188 @@
         return to.concat(ar || Array.prototype.slice.call(from));
     }
 
+    var type = "FeatureCollection";
+    var features = [
+    	{
+    		type: "Feature",
+    		geometry: {
+    			type: "Polygon",
+    			coordinates: [
+    				[
+    					[
+    						5,
+    						55
+    					],
+    					[
+    						4.331914,
+    						55.332644
+    					],
+    					[
+    						3.368817,
+    						55.764314
+    					],
+    					[
+    						2.761908,
+    						54.379261
+    					],
+    					[
+    						3.15576,
+    						52.913554
+    					],
+    					[
+    						2.000002,
+    						51.500002
+    					],
+    					[
+    						3.370001,
+    						51.369722
+    					],
+    					[
+    						3.370527,
+    						51.36867
+    					],
+    					[
+    						3.362223,
+    						51.320002
+    					],
+    					[
+    						3.36389,
+    						51.313608
+    					],
+    					[
+    						3.373613,
+    						51.309999
+    					],
+    					[
+    						3.952501,
+    						51.214441
+    					],
+    					[
+    						4.397501,
+    						51.452776
+    					],
+    					[
+    						5.078611,
+    						51.391665
+    					],
+    					[
+    						5.848333,
+    						51.139444
+    					],
+    					[
+    						5.651667,
+    						50.824717
+    					],
+    					[
+    						6.011797,
+    						50.757273
+    					],
+    					[
+    						5.934168,
+    						51.036386
+    					],
+    					[
+    						6.222223,
+    						51.361666
+    					],
+    					[
+    						5.94639,
+    						51.811663
+    					],
+    					[
+    						6.405001,
+    						51.830828
+    					],
+    					[
+    						7.053095,
+    						52.237764
+    					],
+    					[
+    						7.031389,
+    						52.268885
+    					],
+    					[
+    						7.063612,
+    						52.346109
+    					],
+    					[
+    						7.065557,
+    						52.385828
+    					],
+    					[
+    						7.133055,
+    						52.888887
+    					],
+    					[
+    						7.14218,
+    						52.898244
+    					],
+    					[
+    						7.191667,
+    						53.3
+    					],
+    					[
+    						6.5,
+    						53.666667
+    					],
+    					[
+    						6.500002,
+    						55.000002
+    					],
+    					[
+    						5,
+    						55
+    					]
+    				]
+    			]
+    		},
+    		properties: {
+    			centlong: 4.98042633,
+    			REGION: "EUR",
+    			StateName: "Netherlands",
+    			FIRname: "AMSTERDAM FIR",
+    			StateCode: "NLD",
+    			centlat: 52.8618788,
+    			ICAOCODE: "EHAA"
+    		}
+    	}
+    ];
+    var firArea = {
+    	type: type,
+    	features: features
+    };
+
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * 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)
+     * */
+    /**
+     * Function to translate the geojson data to a GeoJSON.FeatureCollection
+     */
+
+    var getFir = function getFir() {
+      return firArea;
+    };
+    /**
+     * Function to check if the given geojson object has 'fir' selectionType property
+     */
+
+    var isFir = function isFir(geojson) {
+      return geojson && geojson.features && geojson.features[0].properties['selectionType'] === 'fir';
+    };
+
     var srsAndBboxDefault = {
       bbox: {
         left: -1205884.85699446,
@@ -448,438 +630,29 @@
       StartOrEndDrawing["end"] = "end";
     })(StartOrEndDrawing || (StartOrEndDrawing = {}));
 
-    /* *
-     * Licensed under the Apache License, Version 2.0 (the "License");
-     * you may not use this file except in compliance with the License.
-     * You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * 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)
-     * */
-    var adagucBaseUrl = 'https://adaguc-server-geoweb.geoweb.knmi.cloud/adagucserver';
-    var KNMIGeoWebOverlays = {
-      name: 'KNMIGeoWebOverlays',
-      url: adagucBaseUrl + "?dataset=OVL",
-      id: 'knmigeoweboverlays'
-    };
-    var northSeaPlatforms = {
-      service: KNMIGeoWebOverlays.url,
-      name: 'northseastations',
-      format: 'image/png',
-      layerType: core.mapTypes.LayerType.overLayer,
-      enabled: true
-    };
-    var majorAirportsEHAA = {
-      service: KNMIGeoWebOverlays.url,
-      name: 'airports',
-      format: 'image/png',
-      layerType: core.mapTypes.LayerType.overLayer,
-      enabled: true
-    };
+    var getDrawModeFromSelectionType = function getDrawModeFromSelectionType(selectionType) {
+      switch (selectionType) {
+        case 'point':
+          return MapDrawMode.POINT;
 
-    var allowOneGeoJSONFeature = function allowOneGeoJSONFeature(mode, geojson) {
-      switch (mode) {
-        case MapDrawMode.BOX:
-        case MapDrawMode.POLYGON:
-          return geojson.features[0].geometry.coordinates.length > 1 ? produce__default["default"](geojson, function (draft) {
-            draft.features[0].geometry.coordinates = [draft.features[0].geometry.coordinates[1]];
-          }) : geojson;
+        case 'box':
+          return MapDrawMode.BOX;
+
+        case 'fir':
+          return MapDrawMode.FIR;
 
+        case 'poly':
         default:
-          return geojson;
+          return MapDrawMode.POLYGON;
       }
     };
-
-    var MapViewGeoJson = function MapViewGeoJson(_a) {
-      var geoJSONs = _a.geoJSONs,
-          _b = _a.setLayerGeoJSONs,
-          setLayerGeoJSONs = _b === void 0 ? function () {} : _b,
-          _c = _a.layerDrawModes,
-          layerDrawModes = _c === void 0 ? {
-        start: null,
-        end: null
-      } : _c,
-          _d = _a.drawMode,
-          drawMode = _d === void 0 ? {
-        start: null,
-        end: null
-      } : _d,
-          _e = _a.setDrawMode,
-          setDrawMode = _e === void 0 ? function () {} : _e,
-          _f = _a.exitDrawModeCallbackStart,
-          exitDrawModeCallbackStart = _f === void 0 ? function () {} : _f,
-          _g = _a.exitDrawModeCallbackEnd,
-          exitDrawModeCallbackEnd = _g === void 0 ? function () {} : _g;
-      var dispatch = reactRedux.useDispatch();
-      var firstMap = reactRedux.useSelector(function (store) {
-        return core.mapSelectors.getFirstMap(store);
-      }, reactRedux.shallowEqual);
-      var firstMapId = firstMap && firstMap.id ? firstMap.id : null;
-      var mapLayers = reactRedux.useSelector(function (store) {
-        return core.mapSelectors.getMapLayers(store, firstMapId);
-      }, reactRedux.shallowEqual);
-      var mapDimensions = reactRedux.useSelector(function (store) {
-        return core.mapSelectors.getMapDimensions(store, firstMapId);
-      }, reactRedux.shallowEqual);
-      var mapId = React__namespace.useRef("sigmet-" + core.generateMapId()).current;
-      var timesliderId = React__namespace.useRef("sigmet-" + core.generateTimesliderId()).current;
-      var syncGroupAddGroup = React__namespace.useCallback(function (payload) {
-        dispatch(core.SyncGroups.actions.syncGroupAddGroup(payload));
-      }, [dispatch]);
-      var syncGroupAddTarget = React__namespace.useCallback(function (payload) {
-        dispatch(core.SyncGroups.actions.syncGroupAddTarget(payload));
-      }, [dispatch]);
-      React__namespace.useEffect(function () {
-        if (mapLayers && mapLayers.length) {
-          // use maplayers, but change layerId and current mapId
-          var layers = mapLayers.map(function (layer) {
-            return __assign(__assign({}, layer), {
-              id: core.generateLayerId(),
-              mapId: mapId
-            });
-          });
-          dispatch(core.mapActions.setLayers({
-            mapId: mapId,
-            layers: layers
-          }));
-        }
-
-        if (mapDimensions && mapDimensions.length) {
-          dispatch(core.mapActions.mapChangeDimension({
-            mapId: mapId,
-            dimension: mapDimensions[0],
-            origin: 'MapViewGeoJson'
-          }));
-        }
-
-        dispatch(core.mapActions.setBaseLayers({
-          mapId: mapId,
-          layers: [__assign(__assign({}, core.publicLayers.baseLayerGrey), {
-            id: "baselayer-" + mapId
-          }), __assign(__assign({}, core.publicLayers.overLayer), {
-            id: "countryborders-" + mapId
-          }), __assign(__assign({}, northSeaPlatforms), {
-            id: "northseaplatforms-" + mapId
-          }), __assign(__assign({}, majorAirportsEHAA), {
-            id: "majorairportsehaa-" + mapId
-          })]
-        }));
-        dispatch(core.mapActions.setBbox({
-          mapId: mapId,
-          bbox: srsAndBboxDefault.bbox,
-          srs: srsAndBboxDefault.srs
-        }));
-        syncGroupAddGroup({
-          groupId: 'Time_SigmetAirmet',
-          title: 'Group 1 for sigmet/airmet map',
-          type: core.SyncGroups.constants.SYNCGROUPS_TYPE_SETTIME
-        });
-        syncGroupAddTarget({
-          groupId: 'Time_SigmetAirmet',
-          targetId: mapId
-        });
-        syncGroupAddTarget({
-          groupId: 'Time_SigmetAirmet',
-          targetId: timesliderId
-        }); // eslint-disable-next-line react-hooks/exhaustive-deps
-      }, []);
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        style: {
-          position: 'relative',
-          height: '99%'
-        },
-        "data-testid": "MapView"
-      }, /*#__PURE__*/React__namespace.createElement(core.MapControls, null, /*#__PURE__*/React__namespace.createElement(core.LayerManagerMapButtonConnect, {
-        source: "module",
-        mapId: mapId
-      }), /*#__PURE__*/React__namespace.createElement(core.LegendMapButtonConnect, {
-        source: "module",
-        mapId: mapId
-      }), /*#__PURE__*/React__namespace.createElement(core.MultiDimensionSelectMapButtonsConnect, {
-        source: "module",
-        mapId: mapId
-      })), /*#__PURE__*/React__namespace.createElement(core.MapViewConnect, {
-        mapId: mapId
-      }, /*#__PURE__*/React__namespace.createElement(core.MapViewLayer, {
-        id: "geojsonlayer-fir-" + mapId,
-        isInEditMode: false,
-        geojson: geoJSONs.fir
-      }), /*#__PURE__*/React__namespace.createElement(core.MapViewLayer, {
-        id: "geojsonlayer-end-" + mapId,
-        isInEditMode: drawMode.end !== null && layerDrawModes.end !== null,
-        geojson: geoJSONs.end,
-        drawMode: layerDrawModes.end,
-        updateGeojson: function updateGeojson(geojson) {
-          var end = allowOneGeoJSONFeature(layerDrawModes.end, geojson);
-          setLayerGeoJSONs(__assign(__assign({}, geoJSONs), {
-            end: end
-          }));
-        },
-        exitDrawModeCallback: function exitDrawModeCallback() {
-          setDrawMode({
-            start: null,
-            end: null
-          });
-          exitDrawModeCallbackEnd();
-        },
-        featureNrToEdit: 0
-      }), /*#__PURE__*/React__namespace.createElement(core.MapViewLayer, {
-        id: "geojsonlayer-start-" + mapId,
-        isInEditMode: drawMode.start !== null && layerDrawModes.start !== null,
-        geojson: geoJSONs.start,
-        drawMode: layerDrawModes.start,
-        updateGeojson: function updateGeojson(geojson) {
-          var start = allowOneGeoJSONFeature(layerDrawModes.start, geojson);
-          setLayerGeoJSONs(__assign(__assign({}, geoJSONs), {
-            start: start
-          }));
-        },
-        exitDrawModeCallback: function exitDrawModeCallback() {
-          setDrawMode({
-            start: null,
-            end: null
-          });
-          exitDrawModeCallbackStart();
-        },
-        featureNrToEdit: 0
-      }), /*#__PURE__*/React__namespace.createElement(core.MapViewLayer, {
-        id: "geojsonlayer-intersection-end-" + mapId,
-        isInEditMode: false,
-        geojson: geoJSONs.intersectionEnd
-      }), /*#__PURE__*/React__namespace.createElement(core.MapViewLayer, {
-        id: "geojsonlayer-intersection-start-" + mapId,
-        isInEditMode: false,
-        geojson: geoJSONs.intersectionStart
-      })), /*#__PURE__*/React__namespace.createElement("div", {
-        style: {
-          position: 'absolute',
-          left: '0',
-          bottom: '0',
-          zIndex: 1000,
-          width: '100%'
-        }
-      }, /*#__PURE__*/React__namespace.createElement(core.TimeSliderConnect, {
-        sourceId: timesliderId,
-        mapId: mapId
-      })), /*#__PURE__*/React__namespace.createElement(core.LegendConnect, {
-        showMapId: true,
-        mapId: mapId
-      }));
-    };
-
-    var type = "FeatureCollection";
-    var features = [
-    	{
-    		type: "Feature",
-    		geometry: {
-    			type: "Polygon",
-    			coordinates: [
-    				[
-    					[
-    						5,
-    						55
-    					],
-    					[
-    						4.331914,
-    						55.332644
-    					],
-    					[
-    						3.368817,
-    						55.764314
-    					],
-    					[
-    						2.761908,
-    						54.379261
-    					],
-    					[
-    						3.15576,
-    						52.913554
-    					],
-    					[
-    						2.000002,
-    						51.500002
-    					],
-    					[
-    						3.370001,
-    						51.369722
-    					],
-    					[
-    						3.370527,
-    						51.36867
-    					],
-    					[
-    						3.362223,
-    						51.320002
-    					],
-    					[
-    						3.36389,
-    						51.313608
-    					],
-    					[
-    						3.373613,
-    						51.309999
-    					],
-    					[
-    						3.952501,
-    						51.214441
-    					],
-    					[
-    						4.397501,
-    						51.452776
-    					],
-    					[
-    						5.078611,
-    						51.391665
-    					],
-    					[
-    						5.848333,
-    						51.139444
-    					],
-    					[
-    						5.651667,
-    						50.824717
-    					],
-    					[
-    						6.011797,
-    						50.757273
-    					],
-    					[
-    						5.934168,
-    						51.036386
-    					],
-    					[
-    						6.222223,
-    						51.361666
-    					],
-    					[
-    						5.94639,
-    						51.811663
-    					],
-    					[
-    						6.405001,
-    						51.830828
-    					],
-    					[
-    						7.053095,
-    						52.237764
-    					],
-    					[
-    						7.031389,
-    						52.268885
-    					],
-    					[
-    						7.063612,
-    						52.346109
-    					],
-    					[
-    						7.065557,
-    						52.385828
-    					],
-    					[
-    						7.133055,
-    						52.888887
-    					],
-    					[
-    						7.14218,
-    						52.898244
-    					],
-    					[
-    						7.191667,
-    						53.3
-    					],
-    					[
-    						6.5,
-    						53.666667
-    					],
-    					[
-    						6.500002,
-    						55.000002
-    					],
-    					[
-    						5,
-    						55
-    					]
-    				]
-    			]
-    		},
-    		properties: {
-    			centlong: 4.98042633,
-    			REGION: "EUR",
-    			StateName: "Netherlands",
-    			FIRname: "AMSTERDAM FIR",
-    			StateCode: "NLD",
-    			centlat: 52.8618788,
-    			ICAOCODE: "EHAA"
-    		}
-    	}
-    ];
-    var firArea = {
-    	type: type,
-    	features: features
-    };
-
-    /* *
-     * Licensed under the Apache License, Version 2.0 (the "License");
-     * you may not use this file except in compliance with the License.
-     * You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * 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)
-     * */
-    /**
-     * Function to translate the geojson data to a GeoJSON.FeatureCollection
-     */
-
-    var getFir = function getFir() {
-      return firArea;
-    };
-    /**
-     * Function to check if the given geojson object has 'fir' selectionType property
-     */
-
-    var isFir = function isFir(geojson) {
-      return geojson && geojson.features && geojson.features[0].properties['selectionType'] === 'fir';
-    };
-
-    var getDrawModeFromSelectionType = function getDrawModeFromSelectionType(selectionType) {
-      switch (selectionType) {
-        case 'point':
-          return MapDrawMode.POINT;
-
-        case 'box':
-          return MapDrawMode.BOX;
-
-        case 'fir':
-          return MapDrawMode.FIR;
-
-        case 'poly':
-        default:
-          return MapDrawMode.POLYGON;
-      }
-    };
-    /**
-     * Adds properties to the first geojson feature based on the given property object.
-     * It only extends or changes the properties which are defined in styleConfig,
-     * all other properties in the geojson are left unchanged.
-     * @param geojson
-     * @param featureProperties
-     */
+    /**
+     * Adds properties to the first geojson feature based on the given property object.
+     * It only extends or changes the properties which are defined in styleConfig,
+     * all other properties in the geojson are left unchanged.
+     * @param geojson
+     * @param featureProperties
+     */
 
 
     var addFeatureProperties = function addFeatureProperties(geojson, featureProperties) {
@@ -1112,21 +885,19 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var styles$4 = {
-      productForm: {
-        overflowY: 'scroll',
-        overflowX: 'hidden',
-        height: '100%',
-        width: '100%'
-      },
+    var styles$2 = {
       label: {
-        paddingTop: '15px'
+        fontSize: '0.875rem',
+        marginTop: 2,
+        textAlign: 'right'
       },
       body: {
         paddingTop: '17px'
       },
       containerItem: {
-        paddingTop: '8px'
+        ' .MuiTypography-subtitle1': {
+          marginTop: 1
+        }
       },
       volcanicField: {
         marginBottom: 2
@@ -1154,7 +925,22 @@
         opacity: '1'
       },
       drawSection: {
-        padding: '10px 0px'
+        '+ .MuiGrid-item': {
+          paddingTop: 5
+        },
+        ' .MuiTypography-subtitle1': {
+          marginTop: 1
+        }
+      },
+      helperText: {
+        ' .MuiFormHelperText-root': {
+          position: 'absolute',
+          top: 56,
+          '&.Mui-error': {
+            top: 'auto',
+            position: 'relative'
+          }
+        }
       }
     };
 
@@ -1180,6 +966,31 @@
       }, restProps));
     };
 
+    var ProductFormFieldLayout = function ProductFormFieldLayout(_a) {
+      var title = _a.title,
+          children = _a.children,
+          props = __rest(_a, ["title", "children"]);
+
+      return /*#__PURE__*/React__default["default"].createElement(material.Grid, __assign({
+        item: true,
+        container: true,
+        spacing: 3
+      }, props), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true,
+        xs: 4,
+        container: true,
+        justifyContent: "flex-end"
+      }, title && /*#__PURE__*/React__default["default"].createElement(material.Typography, {
+        variant: "subtitle1",
+        sx: styles$2.label
+      }, title)), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true,
+        xs: 8,
+        container: true,
+        justifyContent: "flex-start"
+      }, children));
+    };
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -1193,33 +1004,17 @@
      * 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 Change = function Change(_a) {
       var isDisabled = _a.isDisabled,
           isReadOnly = _a.isReadOnly;
-      var watch = reactHookForm.useFormContext().watch;
       var isRequired = shared.useDraftFormHelpers().isRequired;
-      return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        container: true,
-        spacing: 2,
-        sx: styles$4.containerItem
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 4,
-        container: true,
-        justifyContent: "flex-end"
-      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        variant: "subtitle1",
-        sx: styles$4.label
-      }, "Change")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 8,
-        container: true,
-        justifyContent: "flex-start"
+      return /*#__PURE__*/React__default["default"].createElement(ProductFormFieldLayout, {
+        title: "Change",
+        sx: styles$2.containerItem
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 12
@@ -1230,23 +1025,24 @@
             isRequired: isRequired
           }
         },
-        disabled: isDisabled
-      }, (!isReadOnly || watch('change') === 'WKN') && /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
+        disabled: isDisabled,
+        isReadOnly: isReadOnly
+      }, /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
         value: "WKN",
         label: "Weakening",
         disabled: isDisabled,
         "data-testid": "change-WKN"
-      }), (!isReadOnly || watch('change') === 'NC') && /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
+      }), /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
         value: "NC",
         label: "No change",
         disabled: isDisabled,
         "data-testid": "change-NC"
-      }), (!isReadOnly || watch('change') === 'INTSF') && /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
+      }), /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
         value: "INTSF",
         label: "Intensifying",
         disabled: isDisabled,
         "data-testid": "change-INTSF"
-      })))));
+      }))));
     };
 
     /* *
@@ -1262,22 +1058,19 @@
      * 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 styles$3 = {
-      drawButtons: {
-        color: '#0075a9',
-        borderRadius: '5px',
-        border: 'solid 1px #0075a9',
-        padding: '2px'
-      },
-      drawButtonsSelected: {
-        color: 'white',
-        backgroundColor: '#0075a9',
+    var styles$1 = {
+      radioInput: {
+        padding: 1,
         borderRadius: '5px',
-        border: 'solid 1px #0075a9',
-        padding: '2px'
+        backgroundColor: 'geowebColors.buttons.tool.default.fill',
+        color: 'geowebColors.buttons.tool.default.color',
+        '&.Mui-checked': {
+          backgroundColor: 'geowebColors.buttons.primary.default.fill',
+          color: 'geowebColors.buttons.primary.default.color'
+        }
       }
     };
 
@@ -1291,88 +1084,74 @@
         xs: 12,
         container: true,
         justifyContent: "space-between",
-        "data-testid": "drawtools"
+        "data-testid": "drawtools",
+        spacing: 1
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true
       }, /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
         title: "Drop a point as " + type + " position"
       }, /*#__PURE__*/React__default["default"].createElement(material.Radio, {
-        icon: /*#__PURE__*/React__default["default"].createElement(theme.Location, {
-          sx: styles$3.drawButtons
-        }),
+        icon: /*#__PURE__*/React__default["default"].createElement(theme.Location, null),
         value: true,
-        checkedIcon: /*#__PURE__*/React__default["default"].createElement(theme.Location, {
-          sx: styles$3.drawButtonsSelected
-        }),
+        checkedIcon: /*#__PURE__*/React__default["default"].createElement(theme.Location, null),
         checked: drawMode === MapDrawMode.POINT,
         onChange: function onChange() {
           setDrawMode(MapDrawMode.POINT);
         },
-        "data-testid": "drawtools-point"
+        "data-testid": "drawtools-point",
+        sx: styles$1.radioInput
       }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true
       }, /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
         title: "Draw a box as " + type + " position"
       }, /*#__PURE__*/React__default["default"].createElement(material.Radio, {
-        icon: /*#__PURE__*/React__default["default"].createElement(theme.DrawRegion, {
-          sx: styles$3.drawButtons
-        }),
-        checkedIcon: /*#__PURE__*/React__default["default"].createElement(theme.DrawRegion, {
-          sx: styles$3.drawButtonsSelected
-        }),
+        icon: /*#__PURE__*/React__default["default"].createElement(theme.DrawRegion, null),
+        checkedIcon: /*#__PURE__*/React__default["default"].createElement(theme.DrawRegion, null),
         checked: drawMode === MapDrawMode.BOX,
         onChange: function onChange() {
           setDrawMode(MapDrawMode.BOX);
         },
-        "data-testid": "drawtools-box"
+        "data-testid": "drawtools-box",
+        sx: styles$1.radioInput
       }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true
       }, /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
         title: "Draw a shape as " + type + " position"
       }, /*#__PURE__*/React__default["default"].createElement(material.Radio, {
-        icon: /*#__PURE__*/React__default["default"].createElement(theme.DrawPolygon, {
-          sx: styles$3.drawButtons
-        }),
-        checkedIcon: /*#__PURE__*/React__default["default"].createElement(theme.DrawPolygon, {
-          sx: styles$3.drawButtonsSelected
-        }),
+        icon: /*#__PURE__*/React__default["default"].createElement(theme.DrawPolygon, null),
+        checkedIcon: /*#__PURE__*/React__default["default"].createElement(theme.DrawPolygon, null),
         checked: drawMode === MapDrawMode.POLYGON,
         onChange: function onChange() {
           setDrawMode(MapDrawMode.POLYGON);
         },
-        "data-testid": "drawtools-polygon"
+        "data-testid": "drawtools-polygon",
+        sx: styles$1.radioInput
       }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true
       }, /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
         title: "Set FIR as " + type + " position"
       }, /*#__PURE__*/React__default["default"].createElement(material.Radio, {
-        icon: /*#__PURE__*/React__default["default"].createElement(theme.DrawFIRLand, {
-          sx: styles$3.drawButtons
-        }),
-        checkedIcon: /*#__PURE__*/React__default["default"].createElement(theme.DrawFIRLand, {
-          sx: styles$3.drawButtonsSelected
-        }),
+        icon: /*#__PURE__*/React__default["default"].createElement(theme.DrawFIRLand, null),
+        checkedIcon: /*#__PURE__*/React__default["default"].createElement(theme.DrawFIRLand, null),
         checked: drawMode === MapDrawMode.FIR,
         onChange: function onChange() {
           setDrawMode(MapDrawMode.FIR);
         },
-        "data-testid": "drawtools-fir"
+        "data-testid": "drawtools-fir",
+        sx: styles$1.radioInput
       }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true
       }, /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
         title: "Remove geometry"
       }, /*#__PURE__*/React__default["default"].createElement(material.Radio, {
-        icon: /*#__PURE__*/React__default["default"].createElement(theme.Delete, {
-          sx: styles$3.drawButtons
-        }),
-        checkedIcon: /*#__PURE__*/React__default["default"].createElement(theme.Delete, {
-          sx: styles$3.drawButtonsSelected
-        }),
+        icon: /*#__PURE__*/React__default["default"].createElement(theme.Delete, null),
+        checkedIcon: /*#__PURE__*/React__default["default"].createElement(theme.Delete, null),
         checked: drawMode === MapDrawMode.DELETE,
         onChange: function onChange() {
           setDrawMode(MapDrawMode.DELETE);
         },
-        "data-testid": "drawtools-delete"
+        "data-testid": "drawtools-delete",
+        sx: styles$1.radioInput
       }))));
     };
 
@@ -1603,47 +1382,86 @@
       if (productListItem === null) return 'new';
       return canBeOptions.includes('PUBLISHED') ? 'edit' : 'view';
     };
+    var buttonStyle = {
+      minWidth: 96
+    };
     var getProductFormLifecycleButtons = function getProductFormLifecycleButtons(canBe, onButtonPress) {
-      return /*#__PURE__*/React__namespace.createElement(material.Grid, {
-        container: true,
-        spacing: 1,
-        justifyContent: "flex-end"
-      }, canBe.includes('DISCARDED') && /*#__PURE__*/React__namespace.createElement(material.Grid, {
-        item: true
-      }, /*#__PURE__*/React__namespace.createElement(material.Button, {
-        color: "secondary",
-        onClick: function onClick() {
-          onButtonPress('DISCARDED');
-        },
+      var hasDiscardButton = canBe.includes('DISCARDED');
+
+      var onDiscard = function onDiscard() {
+        return onButtonPress('DISCARDED');
+      };
+
+      var hasSaveButton = canBe.includes('DRAFTED');
+
+      var onSave = function onSave() {
+        return onButtonPress('DRAFT');
+      };
+
+      var hasCancelButton = canBe.includes('CANCELLED');
+
+      var onCancel = function onCancel() {
+        return onButtonPress('CANCELLED');
+      };
+
+      var hasPublishButton = canBe.includes('PUBLISHED');
+
+      var onPublish = function onPublish() {
+        return onButtonPress('PUBLISHED');
+      };
+
+      return /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: {
+          display: 'flex',
+          justifyContent: 'flex-end',
+          'button:not(:first-of-type)': {
+            marginLeft: 1
+          }
+        }
+      }, /*#__PURE__*/React__namespace.createElement(material.Box, {
+        display: {
+          xs: 'none',
+          lg: 'block'
+        }
+      }, hasDiscardButton && /*#__PURE__*/React__namespace.createElement(material.Button, {
+        variant: "flat",
+        onClick: onDiscard,
+        sx: buttonStyle,
         "data-testid": "productform-dialog-discard"
-      }, "Discard")), canBe.includes('DRAFTED') && /*#__PURE__*/React__namespace.createElement(material.Grid, {
-        item: true
-      }, /*#__PURE__*/React__namespace.createElement(material.Button, {
-        color: "secondary",
-        variant: "outlined",
-        onClick: function onClick() {
-          onButtonPress('DRAFT');
-        },
+      }, "DISCARD"), hasSaveButton && /*#__PURE__*/React__namespace.createElement(material.Button, {
+        variant: "tertiary",
+        onClick: onSave,
+        sx: buttonStyle,
         "data-testid": "productform-dialog-draft"
-      }, "Save")), canBe.includes('CANCELLED') && /*#__PURE__*/React__namespace.createElement(material.Grid, {
-        item: true
-      }, /*#__PURE__*/React__namespace.createElement(material.Button, {
-        color: "secondary",
-        variant: "contained",
-        onClick: function onClick() {
-          onButtonPress('CANCELLED');
-        },
+      }, "Save"), hasCancelButton && /*#__PURE__*/React__namespace.createElement(material.Button, {
+        variant: "tertiary",
+        onClick: onCancel,
+        sx: buttonStyle,
         "data-testid": "productform-dialog-cancel"
-      }, "Cancel")), canBe.includes('PUBLISHED') && /*#__PURE__*/React__namespace.createElement(material.Grid, {
-        item: true
-      }, /*#__PURE__*/React__namespace.createElement(material.Button, {
-        color: "secondary",
-        variant: "contained",
-        onClick: function onClick() {
-          onButtonPress('PUBLISHED');
-        },
+      }, "Cancel"), hasPublishButton && /*#__PURE__*/React__namespace.createElement(material.Button, {
+        variant: "primary",
+        onClick: onPublish,
+        sx: buttonStyle,
         "data-testid": "productform-dialog-publish"
-      }, "Publish")));
+      }, "Publish")), /*#__PURE__*/React__namespace.createElement(material.Box, {
+        display: {
+          lg: 'none'
+        }
+      }, /*#__PURE__*/React__namespace.createElement(shared.ToggleMenu, {
+        menuItems: __spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(hasDiscardButton ? [{
+          text: 'Discard',
+          action: onDiscard
+        }] : [])), __read(hasSaveButton ? [{
+          text: 'Save',
+          action: onSave
+        }] : [])), __read(hasCancelButton ? [{
+          text: 'Cancel',
+          action: onCancel
+        }] : [])), __read(hasPublishButton ? [{
+          text: 'Publish',
+          action: onPublish
+        }] : []))
+      })));
     };
     var hasValue = function hasValue(value) {
       return value !== null && value.toString() !== 'NaN';
@@ -1777,6 +1595,13 @@
         }
       });
     };
+    var getFieldLabel = function getFieldLabel(title, isDisabled, action) {
+      if (action === void 0) {
+        action = 'Select';
+      }
+
+      return isDisabled ? title : action + " " + title.toLowerCase();
+    };
 
     var location_indicator_mwo$1 = "EHDB";
     var firareas$1 = {
@@ -1921,30 +1746,15 @@
           reset = _c.reset,
           clearErrors = _c.clearErrors;
 
-      var isRequired = shared.useDraftFormHelpers().isRequired;
-      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
-
-      var allowedLevelUnitsForFir = getAllowedUnits(selectedFIR, allowedUnits, 'level_unit', LevelUnits);
-      return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        container: true,
-        spacing: 2,
-        sx: styles$4.containerItem
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 4,
-        container: true,
-        justifyContent: "flex-end"
-      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        variant: "subtitle1",
-        sx: styles$4.label
-      }, "Levels")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 8,
-        container: true,
-        justifyContent: "flex-start"
+      var isRequired = shared.useDraftFormHelpers().isRequired;
+      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
+
+      var allowedLevelUnitsForFir = getAllowedUnits(selectedFIR, allowedUnits, 'level_unit', LevelUnits);
+      return /*#__PURE__*/React__default["default"].createElement(ProductFormFieldLayout, {
+        title: "Levels",
+        sx: styles$2.containerItem
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 12
@@ -1956,6 +1766,7 @@
           }
         },
         disabled: isDisabled,
+        isReadOnly: isReadOnly,
         onChange: function onChange() {
           // Reset default value for the level value to '' so when it rerenders it uses this empty default value
           var currentValues = getValues();
@@ -1975,7 +1786,7 @@
 
           clearErrors(['level', 'lowerLevel']);
         }
-      }, (!isReadOnly || watch('levelInfoMode') === 'AT' || watch('levelInfoMode') === 'TOPS') && /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
+      }, /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
         value: "AT",
         label: "At",
         checked: watch('levelInfoMode') === 'AT' || watch('levelInfoMode') === 'TOPS',
@@ -1984,11 +1795,15 @@
       }), watch('levelInfoMode') === 'AT' || watch('levelInfoMode') === 'TOPS' ? /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 12,
-        container: true
+        container: true,
+        spacing: 2,
+        justifyItems: "flex-end",
+        alignItems: "flex-end"
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        xs: 3
-      }, (!isReadOnly || watch('levelInfoMode') === 'TOPS') && /*#__PURE__*/React__default["default"].createElement(material.FormControlLabel, {
+        xs: 12,
+        md: 3
+      }, /*#__PURE__*/React__default["default"].createElement(material.FormControlLabel, {
         control: /*#__PURE__*/React__default["default"].createElement(material.Checkbox, {
           checked: watch('levelInfoMode') === 'TOPS',
           onChange: function onChange() {
@@ -2003,7 +1818,8 @@
         label: "Tops"
       })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        xs: 3
+        xs: 4,
+        md: 3
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormSelect, {
         name: "level.unit",
         label: "Unit",
@@ -2012,8 +1828,9 @@
             isRequired: isRequired
           }
         },
-        sx: styles$4.unit,
+        sx: styles$2.unit,
         disabled: isDisabled,
+        isReadOnly: isReadOnly,
         defaultValue: 'FL',
         onChange: function onChange() {
           if (getValues('level.value') || getValues('level.value') === 0) {
@@ -2029,7 +1846,8 @@
         }, allowedLevelUnitsForFir[key]);
       }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        xs: 6
+        xs: 8,
+        md: 6
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormNumberField, {
         name: "level.value",
         "data-testid": "level.value",
@@ -2053,8 +1871,9 @@
           }
         },
         disabled: isDisabled,
+        isReadOnly: isReadOnly,
         autoFocus: true
-      }))) : null, (!isReadOnly || watch('levelInfoMode') === 'BETW' || watch('levelInfoMode') === 'BETW_SFC') && /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
+      }))) : null, /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
         value: "BETW",
         label: "Between",
         checked: watch('levelInfoMode') === 'BETW' || watch('levelInfoMode') === 'BETW_SFC',
@@ -2063,13 +1882,16 @@
       }), watch('levelInfoMode') === 'BETW' || watch('levelInfoMode') === 'BETW_SFC' ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 12,
-        container: true
+        container: true,
+        spacing: 2
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        xs: 3
+        xs: 12,
+        md: 3
       }), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        xs: 3
+        xs: 4,
+        md: 3
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormSelect, {
         name: "level.unit",
         label: "Unit",
@@ -2082,8 +1904,9 @@
             }
           }
         },
-        sx: styles$4.unit,
+        sx: styles$2.unit,
         disabled: isDisabled,
+        isReadOnly: isReadOnly,
         defaultValue: 'FL',
         onChange: function onChange() {
           trigger(__spreadArray(__spreadArray(__spreadArray([], __read(getValues('level.value') || getValues('level.value') === 0 ? ['level.value'] : [])), __read(getValues('lowerLevel.value') || getValues('lowerLevel.value') === 0 ? ['lowerLevel.value'] : [])), ['lowerLevel.unit']));
@@ -2097,11 +1920,12 @@
         }, allowedLevelUnitsForFir[key]);
       }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        xs: 6
+        xs: 8,
+        md: 6
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormNumberField, {
         name: "level.value",
         label: "Upper level",
-        sx: styles$4.levelField,
+        sx: styles$2.levelField,
         rules: {
           validate: {
             isRequired: isRequired,
@@ -2121,6 +1945,7 @@
           }
         },
         disabled: isDisabled,
+        isReadOnly: isReadOnly,
         onChange: function onChange() {
           return (getValues('lowerLevel.value') || getValues('lowerLevel.value') === 0) && trigger('lowerLevel.value');
         },
@@ -2128,11 +1953,15 @@
       }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 12,
-        container: true
+        container: true,
+        spacing: 2,
+        justifyItems: "flex-end",
+        alignItems: "flex-end"
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        xs: 3
-      }, (!isReadOnly || watch('levelInfoMode') === 'BETW_SFC') && /*#__PURE__*/React__default["default"].createElement(material.FormControlLabel, {
+        xs: 12,
+        md: 3
+      }, /*#__PURE__*/React__default["default"].createElement(material.FormControlLabel, {
         control: /*#__PURE__*/React__default["default"].createElement(material.Checkbox, {
           checked: watch('levelInfoMode') === 'BETW_SFC',
           onChange: function onChange() {
@@ -2149,7 +1978,8 @@
         label: "SFC"
       })), watch('levelInfoMode') !== 'BETW_SFC' && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        xs: 3
+        xs: 4,
+        md: 3
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormSelect, {
         name: "lowerLevel.unit",
         label: "Unit",
@@ -2162,8 +1992,9 @@
             }
           }
         },
-        sx: styles$4.unit,
+        sx: styles$2.unit,
         disabled: isDisabled,
+        isReadOnly: isReadOnly,
         defaultValue: getValues('level.unit') || 'FL',
         onChange: function onChange() {
           if (getValues('lowerLevel.value') || getValues('lowerLevel.value') === 0) {
@@ -2181,7 +2012,8 @@
         }, allowedLevelUnitsForFir[key]);
       }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        xs: 6
+        xs: 8,
+        md: 6
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormNumberField, {
         name: "lowerLevel.value",
         label: "Lower level",
@@ -2207,8 +2039,9 @@
             }
           }
         },
-        disabled: isDisabled
-      }))))) : null, (!isReadOnly || watch('levelInfoMode') === 'ABV' || watch('levelInfoMode') === 'TOPS_ABV') && /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
+        disabled: isDisabled,
+        isReadOnly: isReadOnly
+      }))))) : null, /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
         value: "ABV",
         label: "Above",
         disabled: isDisabled,
@@ -2217,11 +2050,15 @@
       }), watch('levelInfoMode') === 'ABV' || watch('levelInfoMode') === 'TOPS_ABV' ? /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 12,
-        container: true
+        container: true,
+        spacing: 2,
+        justifyItems: "flex-end",
+        alignItems: "flex-end"
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        xs: 3
-      }, (!isReadOnly || watch('levelInfoMode') === 'TOPS_ABV') && /*#__PURE__*/React__default["default"].createElement(material.FormControlLabel, {
+        xs: 12,
+        md: 3
+      }, /*#__PURE__*/React__default["default"].createElement(material.FormControlLabel, {
         control: /*#__PURE__*/React__default["default"].createElement(material.Checkbox, {
           checked: watch('levelInfoMode') === 'TOPS_ABV',
           onChange: function onChange() {
@@ -2235,7 +2072,8 @@
         "data-testid": "levels-TOPS_ABV"
       })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        xs: 3
+        xs: 4,
+        md: 3
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormSelect, {
         name: "level.unit",
         label: "Unit",
@@ -2244,8 +2082,9 @@
             isRequired: isRequired
           }
         },
-        sx: styles$4.unit,
+        sx: styles$2.unit,
         disabled: isDisabled,
+        isReadOnly: isReadOnly,
         defaultValue: 'FL',
         onChange: function onChange() {
           if (getValues('level.value') || getValues('level.value') === 0) {
@@ -2261,7 +2100,8 @@
         }, allowedLevelUnitsForFir[key]);
       }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        xs: 6
+        xs: 8,
+        md: 6
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormNumberField, {
         name: "level.value",
         label: "Level",
@@ -2284,8 +2124,9 @@
           }
         },
         disabled: isDisabled,
+        isReadOnly: isReadOnly,
         autoFocus: true
-      }))) : null))));
+      }))) : null)));
     };
 
     /* *
@@ -2301,8 +2142,8 @@
      * 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 ObservationForecast = function ObservationForecast(_a) {
@@ -2315,20 +2156,13 @@
           getValues = _b.getValues;
 
       var isRequired = shared.useDraftFormHelpers().isRequired;
-      return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        container: true,
-        spacing: 2
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 4,
-        container: true,
-        justifyContent: "flex-end"
-      }), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 8,
-        container: true,
-        justifyContent: "flex-start"
+      return /*#__PURE__*/React__default["default"].createElement(ProductFormFieldLayout, {
+        sx: {
+          paddingTop: '8px!important',
+          '+ .MuiGrid-item': {
+            paddingTop: 5
+          }
+        }
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormRadioGroup, {
         name: "isObservationOrForecast",
         disabled: isDisabled,
@@ -2341,7 +2175,8 @@
           if (getValues('observationOrForecastTime')) {
             trigger('observationOrForecastTime');
           }
-        }
+        },
+        isReadOnly: isReadOnly
       }, (!isReadOnly || watch('isObservationOrForecast') === 'OBS') && /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
         value: "OBS",
         label: "Observed",
@@ -2352,7 +2187,7 @@
         label: "Forecast",
         disabled: isDisabled,
         "data-testid": "isObservationOrForecast-FCST"
-      }))));
+      })));
     };
 
     /* *
@@ -2368,8 +2203,8 @@
      * 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 ForecastTimeValidation = 'Forecast time should lie between the valid start and valid end time';
 
@@ -2382,27 +2217,14 @@
         return null;
       } : _b;
       var watch = reactHookForm.useFormContext().watch;
-      return (!isReadOnly || watch('observationOrForecastTime') !== null) && /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        container: true,
-        spacing: 2
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 4,
-        container: true,
-        justifyContent: "flex-end"
-      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        variant: "subtitle1",
-        sx: styles$4.label
-      }, "At")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 8,
-        container: true,
-        justifyContent: "flex-start"
+      var label = getFieldLabel('Date and time', isReadOnly);
+      return (!isReadOnly || watch('observationOrForecastTime') !== null) && /*#__PURE__*/React__default["default"].createElement(ProductFormFieldLayout, {
+        title: "At"
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormDateTime, {
         disablePast: watch('isObservationOrForecast') === 'FCST',
         disableFuture: watch('isObservationOrForecast') === 'OBS',
         name: "observationOrForecastTime",
+        label: label,
         rules: {
           validate: {
             isValidDate: formFields.isValidDate,
@@ -2415,14 +2237,17 @@
           }
         },
         disabled: isDisabled,
+        isReadOnly: isReadOnly,
         helperText: helperText,
-        onChange: onChange
-      })));
+        onChange: onChange,
+        sx: styles$2.helperText
+      }));
     };
 
     var Phenomenon = function Phenomenon(_a) {
       var productType = _a.productType,
           isDisabled = _a.isDisabled,
+          isReadOnly = _a.isReadOnly,
           _b = _a.onChange,
           _onChange = _b === void 0 ? function () {
         return null;
@@ -2434,30 +2259,17 @@
           trigger = _c.trigger;
 
       var phenomenaList = productType === 'sigmet' ? SigmetPhenomena : AirmetPhenomena;
-      return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        container: true,
-        spacing: 2
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 4,
-        container: true,
-        justifyContent: "flex-end"
-      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        variant: "subtitle1",
-        sx: styles$4.label
-      }, "What")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 8,
-        container: true,
-        justifyContent: "flex-start"
+      var label = getFieldLabel('Phenomenon', isReadOnly);
+      return /*#__PURE__*/React__default["default"].createElement(ProductFormFieldLayout, {
+        title: "What"
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormSelect, {
         name: "phenomenon",
-        label: "Select phenomenon",
+        label: label,
         rules: {
           required: true
         },
         disabled: isDisabled,
+        isReadOnly: isReadOnly,
         "data-testid": "phenomenon",
         onChange: function onChange() {
           if (getValues('movementType') === 'NO_VA_EXP') {
@@ -2485,7 +2297,7 @@
           value: key,
           key: key
         }, phenomenaList[key]);
-      }))));
+      })));
     };
 
     /* *
@@ -2501,8 +2313,8 @@
      * 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 noIntersectionMessage$1 = 'The start position needs to be (partly) inside the FIR';
     var maximum6PointsMessage$1 = 'The start position drawing allows a maximum of 6 individual points';
@@ -2522,22 +2334,9 @@
           watch = _c.watch;
 
       var isDraft = shared.useDraftFormHelpers().isDraft;
-      return !isReadOnly && /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        container: true,
-        spacing: 2,
-        sx: styles$4.drawSection
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 4,
-        container: true,
-        justifyContent: "flex-end"
-      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        variant: "subtitle1",
-        sx: styles$4.label
-      }, "Start position")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 8,
+      return !isReadOnly && /*#__PURE__*/React__default["default"].createElement(ProductFormFieldLayout, {
+        title: "Start position",
+        sx: styles$2.drawSection,
         "data-testid": "startGeometry"
       }, /*#__PURE__*/React__default["default"].createElement(DrawTools, {
         type: StartOrEndDrawing.start,
@@ -2547,7 +2346,7 @@
         }
       }), drawMode[StartOrEndDrawing.start] && /*#__PURE__*/React__default["default"].createElement(material.FormHelperText, {
         variant: "filled",
-        sx: styles$4.quitDrawModeMessage
+        sx: styles$2.quitDrawModeMessage
       }, exitDrawModeMessage), !!errors.startGeometry && /*#__PURE__*/React__default["default"].createElement(material.FormHelperText, {
         error: true,
         variant: "filled"
@@ -2577,7 +2376,7 @@
         }
       }), /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormHiddenInput, {
         name: "startGeometryIntersect"
-      })));
+      }));
     };
 
     /* *
@@ -2593,8 +2392,8 @@
      * 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 movementStepValMessageKT = 'Speed should be rounded to the nearest 5kt';
     var movementStepValMessageKMH = 'Speed should be rounded to the nearest 10kmh';
@@ -2671,24 +2470,9 @@
       var selectedFIR = watch('locationIndicatorATSR'); // Get allowed movement units based on selected FIR - if no FIR selected, allow all units
 
       var allowedMovementUnitsForFir = getAllowedUnits(selectedFIR, allowedUnits, 'movement_unit', MovementUnit);
-      return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        container: true,
-        spacing: 2,
-        sx: styles$4.containerItem
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 4,
-        container: true,
-        justifyContent: "flex-end"
-      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        variant: "subtitle1",
-        sx: styles$4.label
-      }, "Progress")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 8,
-        container: true,
-        justifyContent: "flex-start"
+      return /*#__PURE__*/React__default["default"].createElement(ProductFormFieldLayout, {
+        title: "Progress",
+        sx: styles$2.containerItem
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 12
@@ -2702,18 +2486,19 @@
         },
         onChange: function onChange() {
           return setDrawModeType ? setDrawModeType(MapDrawMode.DELETE, StartOrEndDrawing.end) : null;
-        }
-      }, watch('phenomenon') === 'VA_CLD' && (!isReadOnly || movementType === 'NO_VA_EXP') && /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
+        },
+        isReadOnly: isReadOnly
+      }, watch('phenomenon') === 'VA_CLD' && /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
         value: "NO_VA_EXP",
         label: "No volcanic ash expected",
         disabled: isDisabled,
         "data-testid": "movementType-NO_VA_EXP"
-      }), (!isReadOnly || movementType === 'STATIONARY') && /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
+      }), /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
         value: "STATIONARY",
         label: "Stationary",
         disabled: isDisabled,
         "data-testid": "movementType-STATIONARY"
-      }), (!isReadOnly || movementType === 'MOVEMENT') && /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
+      }), /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
         value: "MOVEMENT",
         label: "Movement",
         disabled: isDisabled,
@@ -2727,8 +2512,9 @@
         rules: {
           validate: isRequired
         },
-        sx: styles$4.movement,
+        sx: styles$2.movement,
         disabled: isDisabled,
+        isReadOnly: isReadOnly,
         "data-testid": "movement-movementDirection",
         onChange: function onChange(event) {
           event.stopPropagation();
@@ -2754,8 +2540,9 @@
         rules: {
           validate: isRequired
         },
-        sx: styles$4.unit,
+        sx: styles$2.unit,
         disabled: isDisabled,
+        isReadOnly: isReadOnly,
         defaultValue: 'KT',
         "data-testid": "movement-movementUnit",
         onChange: function onChange(event) {
@@ -2797,11 +2584,12 @@
           }
         },
         disabled: isDisabled,
+        isReadOnly: isReadOnly,
         "data-testid": "movement-movementSpeed",
         onChange: function onChange(event) {
           return event && event.stopPropagation();
         }
-      })))), productType === 'sigmet' && (!isReadOnly || movementType === 'FORECAST_POSITION') && /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
+      })))), productType === 'sigmet' && /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
         value: "FORECAST_POSITION",
         label: "End position",
         disabled: isDisabled,
@@ -2810,7 +2598,7 @@
         item: true,
         xs: 12,
         "data-testid": "endGeometry",
-        sx: styles$4.drawSection
+        sx: styles$2.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,
@@ -2820,7 +2608,7 @@
         }
       }), drawMode[StartOrEndDrawing.end] && /*#__PURE__*/React__default["default"].createElement(material.FormHelperText, {
         variant: "filled",
-        sx: styles$4.quitDrawModeMessage
+        sx: styles$2.quitDrawModeMessage
       }, exitDrawModeMessage), !!errors.endGeometry && /*#__PURE__*/React__default["default"].createElement(material.FormHelperText, {
         error: true,
         variant: "filled"
@@ -2850,7 +2638,7 @@
         }
       }), /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormHiddenInput, {
         name: "endGeometryIntersect"
-      })))));
+      }))));
     };
 
     /* *
@@ -2866,13 +2654,14 @@
      * 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 SelectFIR = function SelectFIR(_a) {
       var productType = _a.productType,
-          isDisabled = _a.isDisabled;
+          isDisabled = _a.isDisabled,
+          isReadOnly = _a.isReadOnly;
       var setValue = reactHookForm.useFormContext().setValue;
       var isRequired = shared.useDraftFormHelpers().isRequired;
       var config = productType === 'sigmet' ? sigmetConfig : airmetConfig;
@@ -2882,33 +2671,19 @@
           optionsFIR = _b.optionsFIR,
           allFIRS = _b.allFIRS;
 
-      return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        container: true,
-        spacing: 2,
-        sx: styles$4.containerItem
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 4,
-        container: true,
-        justifyContent: "flex-end"
-      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        variant: "subtitle1",
-        sx: styles$4.label
-      }, "Where")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 8,
-        container: true,
-        justifyContent: "flex-start"
+      return /*#__PURE__*/React__default["default"].createElement(ProductFormFieldLayout, {
+        title: "Where",
+        sx: styles$2.containerItem
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormSelect, {
         name: "locationIndicatorATSR",
-        label: "Select FIR",
+        label: isReadOnly ? 'FIR' : 'Select FIR',
         rules: {
           validate: {
             isRequired: isRequired
           }
         },
         disabled: isDisabled,
+        isReadOnly: isReadOnly,
         defaultValue: defaultATSR,
         onChange: function onChange(changeEvent) {
           setValue('locationIndicatorATSU', allFIRS[changeEvent.target.value].location_indicator_atsu);
@@ -2931,7 +2706,7 @@
       }), /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormHiddenInput, {
         name: "firGeometry",
         defaultValue: getFir()
-      })));
+      }));
     };
 
     /* *
@@ -2947,33 +2722,17 @@
      * 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 Type = function Type(_a) {
       var isReadOnly = _a.isReadOnly,
           isDisabled = _a.isDisabled;
-      var watch = reactHookForm.useFormContext().watch;
       var isRequired = shared.useDraftFormHelpers().isRequired;
-      return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        container: true,
-        spacing: 2,
-        sx: styles$4.containerItem
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 4,
-        container: true,
-        justifyContent: "flex-end"
-      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        variant: "subtitle1",
-        sx: styles$4.label
-      }, "Type")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 8,
-        container: true,
-        justifyContent: "flex-start"
+      return /*#__PURE__*/React__default["default"].createElement(ProductFormFieldLayout, {
+        title: "Type",
+        sx: styles$2.containerItem
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 12
@@ -2985,23 +2744,24 @@
           }
         },
         disabled: isDisabled,
+        isReadOnly: isReadOnly,
         defaultValue: "NORMAL"
-      }, (!isReadOnly || watch('type') === 'NORMAL') && /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
+      }, /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
         value: "NORMAL",
         label: "Normal",
         disabled: isDisabled,
         "data-testid": "type-NORMAL"
-      }), (!isReadOnly || watch('type') === 'TEST') && /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
+      }), /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
         value: "TEST",
         label: "Test",
         disabled: isDisabled,
         "data-testid": "type-TEST"
-      }), (!isReadOnly || watch('type') === 'EXERCISE') && /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
+      }), /*#__PURE__*/React__default["default"].createElement(RadioButtonAndLabel, {
         value: "EXERCISE",
         label: "Exercise",
         disabled: isDisabled,
         "data-testid": "type-EXERCISE"
-      })))));
+      }))));
     };
 
     /* *
@@ -3017,14 +2777,19 @@
      * 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 VALID_FROM_TIME_DELAY_IN_MINUTES = 30;
+    var VALID_FROM_ERROR_BEFORE_CURRENT = 'Valid from time cannot be before current time';
+    var getValidFromXHoursBeforeMessage = function getValidFromXHoursBeforeMessage(hours) {
+      return "Valid from time can be no more than " + hours + " hours after current time";
+    };
 
     var ValidFrom = function ValidFrom(_a) {
       var productType = _a.productType,
           isDisabled = _a.isDisabled,
+          isReadOnly = _a.isReadOnly,
           _b = _a.onChange,
           _onChange = _b === void 0 ? function () {
         return null;
@@ -3036,26 +2801,13 @@
 
       var isRequired = shared.useDraftFormHelpers().isRequired;
       var config = productType === 'sigmet' ? sigmetConfig : airmetConfig;
-      return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        container: true,
-        spacing: 2
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 4,
-        container: true,
-        justifyContent: "flex-end"
-      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        variant: "subtitle1",
-        sx: styles$4.label
-      }, "Valid from")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 8,
-        container: true,
-        justifyContent: "flex-start"
+      var label = getFieldLabel('Date and time', isReadOnly);
+      return /*#__PURE__*/React__default["default"].createElement(ProductFormFieldLayout, {
+        title: "Valid from"
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormDateTime, {
         disablePast: true,
         name: "validDateStart",
+        label: label,
         defaultNullValue: moment__default["default"].utc().add(VALID_FROM_TIME_DELAY_IN_MINUTES, 'minutes').format('YYYY-MM-DDTHH:mm:ss[Z]'),
         rules: {
           validate: {
@@ -3063,11 +2815,11 @@
             isValidDate: formFields.isValidDate,
             // The validity start can not be before the current time
             isValueBeforeCurrentTime: function isValueBeforeCurrentTime(value) {
-              return formFields.isXHoursBefore(value, moment__default["default"].utc().format(), 0) || 'Valid from time cannot be before current time';
+              return formFields.isXHoursBefore(value, moment__default["default"].utc().format(), 0) || VALID_FROM_ERROR_BEFORE_CURRENT;
             },
             // The current time can be no more than 4 hours before the validity start (12 for VA/TC SIGMET)
             isCurrentTimeXHoursBeforeValue: function isCurrentTimeXHoursBeforeValue(value) {
-              return formFields.isXHoursBefore(moment__default["default"].utc().format(), value, getHoursBeforeValidity(getValues('phenomenon'), getValues('locationIndicatorATSR'), config)) || "Valid from time can be no more than " + getHoursBeforeValidity(getValues('phenomenon'), getValues('locationIndicatorATSR'), config) + " hours after current time";
+              return formFields.isXHoursBefore(moment__default["default"].utc().format(), value, getHoursBeforeValidity(getValues('phenomenon'), getValues('locationIndicatorATSR'), config)) || getValidFromXHoursBeforeMessage(getHoursBeforeValidity(getValues('phenomenon'), getValues('locationIndicatorATSR'), config));
             }
           }
         },
@@ -3083,10 +2835,8 @@
           _onChange();
         },
         disabled: isDisabled,
+        isReadOnly: isReadOnly,
         "data-testid": "valid-from"
-      })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 6
       }));
     };
 
@@ -3103,8 +2853,8 @@
      * 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 DEFAULT_VALID_TIME_SIGMET = 3;
     var DEFAULT_VALID_TIME_AIRMET = 1;
@@ -3115,6 +2865,7 @@
     var ValidUntil = function ValidUntil(_a) {
       var productType = _a.productType,
           isDisabled = _a.isDisabled,
+          isReadOnly = _a.isReadOnly,
           _b = _a.onChange,
           _onChange = _b === void 0 ? function () {
         return null;
@@ -3125,28 +2876,15 @@
           trigger = _c.trigger;
 
       var isRequired = shared.useDraftFormHelpers().isRequired;
+      var label = getFieldLabel('Date and time', isReadOnly);
       var config = productType === 'sigmet' ? sigmetConfig : airmetConfig;
       var defaultHoursValid = getDefaultHoursValid(productType);
-      return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        container: true,
-        spacing: 2
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 4,
-        container: true,
-        justifyContent: "flex-end"
-      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        variant: "subtitle1",
-        sx: styles$4.label
-      }, "Valid until")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 8,
-        container: true,
-        justifyContent: "flex-start"
+      return /*#__PURE__*/React__default["default"].createElement(ProductFormFieldLayout, {
+        title: "Valid until"
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormDateTime, {
         disablePast: true,
         name: "validDateEnd",
+        label: label,
         defaultNullValue: moment__default["default"].utc().add(defaultHoursValid, 'hour').add(VALID_FROM_TIME_DELAY_IN_MINUTES, 'minutes').format('YYYY-MM-DDTHH:mm:ss[Z]'),
         rules: {
           validate: {
@@ -3163,6 +2901,7 @@
           }
         },
         disabled: isDisabled,
+        isReadOnly: isReadOnly,
         onChange: function onChange() {
           if (getValues('validDateStart')) {
             trigger('validDateStart');
@@ -3174,29 +2913,9 @@
 
           _onChange();
         }
-      })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 6
       }));
     };
 
-    /* *
-     * Licensed under the Apache License, Version 2.0 (the "License");
-     * you may not use this file except in compliance with the License.
-     * You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * 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)
-     * */
-
     var VolcanicFields = function VolcanicFields(_a) {
       var isDisabled = _a.isDisabled,
           isReadOnly = _a.isReadOnly,
@@ -3224,7 +2943,7 @@
       }, (!isReadOnly || !!watch('vaSigmetVolcanoName')) && /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 12,
-        sx: styles$4.volcanicField
+        sx: styles$2.volcanicField
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormTextField, {
         name: "vaSigmetVolcanoName",
         label: "Volcano name",
@@ -3233,7 +2952,8 @@
         },
         disabled: isDisabled,
         helperText: helperText,
-        upperCase: true
+        upperCase: true,
+        isReadOnly: isReadOnly
       })), (!isReadOnly || !!watch('vaSigmetVolcanoCoordinates.latitude')) && /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 6
@@ -3252,12 +2972,13 @@
             }
           }
         },
-        sx: styles$4.latitude,
+        sx: __assign(__assign({}, styles$2.latitude), styles$2.helperText),
         disabled: isDisabled,
         helperText: helperText,
         onChange: function onChange() {
           return trigger('vaSigmetVolcanoCoordinates.longitude');
-        }
+        },
+        isReadOnly: isReadOnly
       })), (!isReadOnly || !!watch('vaSigmetVolcanoCoordinates.longitude')) && /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 6
@@ -3280,7 +3001,9 @@
         helperText: helperText,
         onChange: function onChange() {
           return trigger('vaSigmetVolcanoCoordinates.latitude');
-        }
+        },
+        sx: styles$2.helperText,
+        isReadOnly: isReadOnly
       }))));
     };
 
@@ -3316,12 +3039,15 @@
 
     var SurfaceVisibility = function SurfaceVisibility(_a) {
       var isDisabled = _a.isDisabled,
+          isReadOnly = _a.isReadOnly,
           _b = _a.onChange,
           _onChange = _b === void 0 ? function () {
         return null;
       } : _b;
 
       var isRequired = shared.useDraftFormHelpers().isRequired;
+      var visibilityLabel = getFieldLabel('Visibility', isReadOnly);
+      var visibilityCauseLabel = getFieldLabel('Cause', isReadOnly);
       return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         container: true,
@@ -3339,11 +3065,11 @@
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 12,
-        sx: styles$4.surfaceVisibility
+        sx: styles$2.surfaceVisibility
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormNumberField, {
         name: "visibilityValue",
         "data-testid": "surfaceVisibility-visibilityValue",
-        label: "Select visibility",
+        label: visibilityLabel,
         helperText: "Value in meters",
         rules: {
           min: {
@@ -3359,19 +3085,21 @@
             validateSurfaceVisibility: validateSurfaceVisibility
           }
         },
-        disabled: isDisabled
+        disabled: isDisabled,
+        isReadOnly: isReadOnly
       })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 12
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormSelect, {
         name: "visibilityCause",
-        label: "Select cause",
+        label: visibilityCauseLabel,
         rules: {
           validate: {
             isRequired: isRequired
           }
         },
         disabled: isDisabled,
+        isReadOnly: isReadOnly,
         "data-testid": "surfaceVisibility-visibilityCause",
         onChange: function onChange(event) {
           event.stopPropagation();
@@ -3412,6 +3140,7 @@
 
     var SurfaceWind = function SurfaceWind(_a) {
       var isDisabled = _a.isDisabled,
+          isReadOnly = _a.isReadOnly,
           _b = _a.onChange,
           _onChange = _b === void 0 ? function () {
         return null;
@@ -3427,6 +3156,8 @@
       var selectedFIR = watch('locationIndicatorATSR'); // Get allowed speed units based on selected FIR - if no FIR selected, allow all units
 
       var allowedWindUnitsForFir = getAllowedUnits(selectedFIR, allowedUnits, 'surfacewind_unit', WindUnit);
+      var windLabel = getFieldLabel('Wind direction', isReadOnly, 'Set');
+      var speedLabel = getFieldLabel('Speed', isReadOnly, 'Set');
       return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         container: true,
@@ -3444,10 +3175,10 @@
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 12,
-        sx: styles$4.surfaceWind
+        sx: styles$2.surfaceWind
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormNumberField, {
         name: "windDirection",
-        label: "Set wind direction",
+        label: windLabel,
         helperText: "Value in degrees",
         rules: {
           min: {
@@ -3464,6 +3195,7 @@
           }
         },
         disabled: isDisabled,
+        isReadOnly: isReadOnly,
         "data-testid": "surfaceWind-windDirection"
       })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
@@ -3480,8 +3212,9 @@
             isRequired: isRequired
           }
         },
-        sx: styles$4.unit,
+        sx: styles$2.unit,
         disabled: isDisabled,
+        isReadOnly: isReadOnly,
         defaultValue: 'KT',
         "data-testid": "surfaceWind-windUnit",
         onChange: function onChange() {
@@ -3501,7 +3234,7 @@
         xs: 7
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormNumberField, {
         name: "windSpeed",
-        label: "Set speed",
+        label: speedLabel,
         rules: {
           validate: {
             isRequired: isRequired,
@@ -3517,6 +3250,7 @@
           }
         },
         disabled: isDisabled,
+        isReadOnly: isReadOnly,
         "data-testid": "surfaceWind-windSpeed"
       })))));
     };
@@ -3582,7 +3316,7 @@
         item: true,
         container: true,
         spacing: 2,
-        sx: styles$4.containerItem
+        sx: styles$2.containerItem
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 4,
@@ -3590,7 +3324,7 @@
         justifyContent: "flex-end"
       }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "subtitle1",
-        sx: styles$4.label
+        sx: styles$2.label
       }, "Levels")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 8,
@@ -3609,7 +3343,10 @@
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 4
-      }, (!isReadOnly || watch('cloudLevelInfoMode') === 'BETW_ABV' || watch('cloudLevelInfoMode') === 'BETW_SFC_ABV') && /*#__PURE__*/React__default["default"].createElement(material.FormControlLabel, {
+      }, (!isReadOnly || watch('cloudLevelInfoMode') === 'BETW_ABV' || watch('cloudLevelInfoMode') === 'BETW_SFC_ABV') && /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormFormControl, {
+        disabled: isDisabled,
+        isReadOnly: isReadOnly
+      }, /*#__PURE__*/React__default["default"].createElement(material.FormControlLabel, {
         control: /*#__PURE__*/React__default["default"].createElement(material.Checkbox, {
           checked: watch('cloudLevelInfoMode') === 'BETW_ABV' || watch('cloudLevelInfoMode') === 'BETW_SFC_ABV',
           onChange: function onChange() {
@@ -3645,7 +3382,7 @@
         }),
         "data-testid": "cloudLevels-Above",
         label: "Above"
-      })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+      }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 3
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormSelect, {
@@ -3657,8 +3394,9 @@
             isRequired: isRequired
           }
         },
-        sx: styles$4.unit,
+        sx: styles$2.unit,
         disabled: isDisabled,
+        isReadOnly: isReadOnly,
         defaultValue: 'FT',
         onChange: function onChange() {
           if (getValues('cloudLevel.value') || getValues('cloudLevel.value') === 0) {
@@ -3686,7 +3424,7 @@
         name: "cloudLevel.value",
         label: "Upper level",
         "data-testid": "cloudLevel-value",
-        sx: styles$4.levelField,
+        sx: styles$2.levelField,
         rules: {
           validate: {
             isRequired: isRequired,
@@ -3705,6 +3443,7 @@
           }
         },
         disabled: isDisabled,
+        isReadOnly: isReadOnly,
         onChange: function onChange() {
           return (getValues('cloudLowerLevel.value') || getValues('cloudLowerLevel.value') === 0) && trigger('cloudLowerLevel.value');
         }
@@ -3715,7 +3454,10 @@
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 4
-      }, (!isReadOnly || watch('cloudLevelInfoMode') === 'BETW_SFC' || watch('cloudLevelInfoMode') === 'BETW_SFC_ABV') && /*#__PURE__*/React__default["default"].createElement(material.FormControlLabel, {
+      }, (!isReadOnly || watch('cloudLevelInfoMode') === 'BETW_SFC' || watch('cloudLevelInfoMode') === 'BETW_SFC_ABV') && /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormFormControl, {
+        disabled: isDisabled,
+        isReadOnly: isReadOnly
+      }, /*#__PURE__*/React__default["default"].createElement(material.FormControlLabel, {
         control: /*#__PURE__*/React__default["default"].createElement(material.Checkbox, {
           checked: watch('cloudLevelInfoMode') === 'BETW_SFC' || watch('cloudLevelInfoMode') === 'BETW_SFC_ABV',
           onChange: function onChange() {
@@ -3751,7 +3493,7 @@
         }),
         "data-testid": "cloudLevels-SFC",
         label: "SFC"
-      })), watch('cloudLevelInfoMode') !== 'BETW_SFC' && watch('cloudLevelInfoMode') !== 'BETW_SFC_ABV' && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+      }))), watch('cloudLevelInfoMode') !== 'BETW_SFC' && watch('cloudLevelInfoMode') !== 'BETW_SFC_ABV' && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 3
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormSelect, {
@@ -3763,8 +3505,9 @@
             isRequired: isRequired
           }
         },
-        sx: styles$4.unit,
+        sx: styles$2.unit,
         disabled: isDisabled,
+        isReadOnly: isReadOnly,
         defaultValue: getValues('cloudLevel.unit') ? getValues('cloudLevel.unit') : 'FT',
         onChange: function onChange() {
           if (getValues('cloudLowerLevel.value') || getValues('cloudLowerLevel.value') === 0) {
@@ -3813,26 +3556,11 @@
             }
           }
         },
-        disabled: isDisabled
+        disabled: isDisabled,
+        isReadOnly: isReadOnly
       })))))));
     };
 
-    var styles$2 = {
-      tacOutput: {
-        paddingTop: '16px',
-        whiteSpace: 'break-spaces'
-      },
-      tacLine: {
-        backgroundColor: '#FFF',
-        margin: '0',
-        padding: '.1em .1em .1em 0.8em',
-        textIndent: '-0.7em',
-        borderRadius: '3px',
-        '&:hover': {
-          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) {
@@ -3894,45 +3622,377 @@
                 ];
             }
           });
-        });
-      };
-
-      React__default["default"].useEffect(function () {
-        if (shouldRetrieveTAC(initialProduct)) {
-          retrieveTAC(initialProduct);
-        } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-      }, []);
-
-      var update = function update(formValues) {
-        if (shouldRetrieveTAC(formValues)) {
-          retrieveTAC(formValues);
-        } else if (isMounted.current) {
-          setTAC(noTAC);
+        });
+      };
+
+      React__default["default"].useEffect(function () {
+        if (shouldRetrieveTAC(initialProduct)) {
+          retrieveTAC(initialProduct);
+        } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+      }, []);
+
+      var update = function update(formValues) {
+        if (shouldRetrieveTAC(formValues)) {
+          retrieveTAC(formValues);
+        } else if (isMounted.current) {
+          setTAC(noTAC);
+        }
+      }; // eslint-disable-next-line react-hooks/exhaustive-deps
+
+
+      var delayedQuery = React__default["default"].useCallback(lodash.debounce(update, 1000), []);
+      return [TAC, delayedQuery];
+    };
+
+    var ProductFormTAC = function ProductFormTAC(_a) {
+      var tac = _a.tac;
+      var tacLines = tac.split('\n');
+      var hasTac = tacLines.length && tacLines.toString() !== noTAC;
+      return /*#__PURE__*/React__default["default"].createElement(material.Typography, {
+        variant: "body2",
+        component: "div",
+        sx: {
+          paddingTop: '16px',
+          whiteSpace: 'break-spaces'
+        },
+        "data-testid": "productform-tac-message"
+      }, tacLines.map(function (line) {
+        return /*#__PURE__*/React__default["default"].createElement(material.Box, {
+          component: "p",
+          key: line,
+          sx: {
+            margin: 0,
+            fontSize: hasTac ? '1.125rem' : '1rem',
+            fontWeight: 'normal',
+            fontStretch: 'normal',
+            fontStyle: 'normal',
+            lineHeight: 1.56,
+            letterSpacing: '0.5px'
+          },
+          "data-testid": "productform-tac-message-line"
+        }, line);
+      }));
+    };
+
+    var IssuedAt = function IssuedAt(_a) {
+      var date = _a.date,
+          isReadOnly = _a.isReadOnly;
+      return /*#__PURE__*/React__default["default"].createElement(ProductFormFieldLayout, {
+        title: "Issued at"
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true,
+        xs: 12
+      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
+        variant: "body2",
+        sx: __assign(__assign({}, styles$2.body), {
+          fontSize: '1rem',
+          color: isReadOnly ? 'geowebColors.typographyAndIcons.text' : 'geowebColors.buttons.primary.disabled.color'
+        })
+      }, date)));
+    };
+
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * */
+
+    var Tac = function Tac(_a) {
+      var tac = _a.tac,
+          children = _a.children;
+      return /*#__PURE__*/React__default["default"].createElement(ProductFormFieldLayout, {
+        title: "TAC",
+        sx: {
+          paddingTop: 2
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true,
+        xs: 12
+      }, /*#__PURE__*/React__default["default"].createElement(ProductFormTAC, {
+        tac: tac
+      }), children));
+    };
+
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * 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)
+     * */
+    var adagucBaseUrl = 'https://adaguc-server-geoweb.geoweb.knmi.cloud/adagucserver';
+    var KNMIGeoWebOverlays = {
+      name: 'KNMIGeoWebOverlays',
+      url: adagucBaseUrl + "?dataset=OVL",
+      id: 'knmigeoweboverlays'
+    };
+    var northSeaPlatforms = {
+      service: KNMIGeoWebOverlays.url,
+      name: 'northseastations',
+      format: 'image/png',
+      layerType: core.mapTypes.LayerType.overLayer,
+      enabled: true
+    };
+    var majorAirportsEHAA = {
+      service: KNMIGeoWebOverlays.url,
+      name: 'airports',
+      format: 'image/png',
+      layerType: core.mapTypes.LayerType.overLayer,
+      enabled: true
+    };
+
+    var allowOneGeoJSONFeature = function allowOneGeoJSONFeature(mode, geojson) {
+      switch (mode) {
+        case MapDrawMode.BOX:
+        case MapDrawMode.POLYGON:
+          return geojson.features[0].geometry.coordinates.length > 1 ? produce__default["default"](geojson, function (draft) {
+            draft.features[0].geometry.coordinates = [draft.features[0].geometry.coordinates[1]];
+          }) : geojson;
+
+        default:
+          return geojson;
+      }
+    };
+
+    var MapViewGeoJson = function MapViewGeoJson(_a) {
+      var geoJSONs = _a.geoJSONs,
+          _b = _a.setLayerGeoJSONs,
+          setLayerGeoJSONs = _b === void 0 ? function () {} : _b,
+          _c = _a.layerDrawModes,
+          layerDrawModes = _c === void 0 ? {
+        start: null,
+        end: null
+      } : _c,
+          _d = _a.drawMode,
+          drawMode = _d === void 0 ? {
+        start: null,
+        end: null
+      } : _d,
+          _e = _a.setDrawMode,
+          setDrawMode = _e === void 0 ? function () {} : _e,
+          _f = _a.exitDrawModeCallbackStart,
+          exitDrawModeCallbackStart = _f === void 0 ? function () {} : _f,
+          _g = _a.exitDrawModeCallbackEnd,
+          exitDrawModeCallbackEnd = _g === void 0 ? function () {} : _g;
+      var dispatch = reactRedux.useDispatch();
+      var firstMap = reactRedux.useSelector(function (store) {
+        return core.mapSelectors.getFirstMap(store);
+      }, reactRedux.shallowEqual);
+      var firstMapId = firstMap && firstMap.id ? firstMap.id : null;
+      var mapLayers = reactRedux.useSelector(function (store) {
+        return core.mapSelectors.getMapLayers(store, firstMapId);
+      }, reactRedux.shallowEqual);
+      var mapDimensions = reactRedux.useSelector(function (store) {
+        return core.mapSelectors.getMapDimensions(store, firstMapId);
+      }, reactRedux.shallowEqual);
+      var mapId = React__namespace.useRef("sigmet-" + core.generateMapId()).current;
+      var timesliderId = React__namespace.useRef("sigmet-" + core.generateTimesliderId()).current;
+      var syncGroupAddGroup = React__namespace.useCallback(function (payload) {
+        dispatch(core.SyncGroups.actions.syncGroupAddGroup(payload));
+      }, [dispatch]);
+      var syncGroupAddTarget = React__namespace.useCallback(function (payload) {
+        dispatch(core.SyncGroups.actions.syncGroupAddTarget(payload));
+      }, [dispatch]);
+      React__namespace.useEffect(function () {
+        if (mapLayers && mapLayers.length) {
+          // use maplayers, but change layerId and current mapId
+          var layers = mapLayers.map(function (layer) {
+            return __assign(__assign({}, layer), {
+              id: core.generateLayerId(),
+              mapId: mapId
+            });
+          });
+          dispatch(core.mapActions.setLayers({
+            mapId: mapId,
+            layers: layers
+          }));
+        }
+
+        if (mapDimensions && mapDimensions.length) {
+          dispatch(core.mapActions.mapChangeDimension({
+            mapId: mapId,
+            dimension: mapDimensions[0],
+            origin: 'MapViewGeoJson'
+          }));
+        }
+
+        dispatch(core.mapActions.setBaseLayers({
+          mapId: mapId,
+          layers: [__assign(__assign({}, core.publicLayers.baseLayerGrey), {
+            id: "baselayer-" + mapId
+          }), __assign(__assign({}, core.publicLayers.overLayer), {
+            id: "countryborders-" + mapId
+          }), __assign(__assign({}, northSeaPlatforms), {
+            id: "northseaplatforms-" + mapId
+          }), __assign(__assign({}, majorAirportsEHAA), {
+            id: "majorairportsehaa-" + mapId
+          })]
+        }));
+        dispatch(core.mapActions.setBbox({
+          mapId: mapId,
+          bbox: srsAndBboxDefault.bbox,
+          srs: srsAndBboxDefault.srs
+        }));
+        syncGroupAddGroup({
+          groupId: 'Time_SigmetAirmet',
+          title: 'Group 1 for sigmet/airmet map',
+          type: core.SyncGroups.constants.SYNCGROUPS_TYPE_SETTIME
+        });
+        syncGroupAddTarget({
+          groupId: 'Time_SigmetAirmet',
+          targetId: mapId
+        });
+        syncGroupAddTarget({
+          groupId: 'Time_SigmetAirmet',
+          targetId: timesliderId
+        }); // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, []);
+      return /*#__PURE__*/React__namespace.createElement("div", {
+        style: {
+          position: 'relative',
+          height: '100%'
+        },
+        "data-testid": "MapView"
+      }, /*#__PURE__*/React__namespace.createElement(core.MapControls, null, /*#__PURE__*/React__namespace.createElement(core.LayerManagerMapButtonConnect, {
+        source: "module",
+        mapId: mapId
+      }), /*#__PURE__*/React__namespace.createElement(core.LegendMapButtonConnect, {
+        source: "module",
+        mapId: mapId
+      }), /*#__PURE__*/React__namespace.createElement(core.MultiDimensionSelectMapButtonsConnect, {
+        source: "module",
+        mapId: mapId
+      })), /*#__PURE__*/React__namespace.createElement(core.MapViewConnect, {
+        mapId: mapId
+      }, /*#__PURE__*/React__namespace.createElement(core.MapViewLayer, {
+        id: "geojsonlayer-fir-" + mapId,
+        isInEditMode: false,
+        geojson: geoJSONs.fir
+      }), /*#__PURE__*/React__namespace.createElement(core.MapViewLayer, {
+        id: "geojsonlayer-end-" + mapId,
+        isInEditMode: drawMode.end !== null && layerDrawModes.end !== null,
+        geojson: geoJSONs.end,
+        drawMode: layerDrawModes.end,
+        updateGeojson: function updateGeojson(geojson) {
+          var end = allowOneGeoJSONFeature(layerDrawModes.end, geojson);
+          setLayerGeoJSONs(__assign(__assign({}, geoJSONs), {
+            end: end
+          }));
+        },
+        exitDrawModeCallback: function exitDrawModeCallback() {
+          setDrawMode({
+            start: null,
+            end: null
+          });
+          exitDrawModeCallbackEnd();
+        },
+        featureNrToEdit: 0
+      }), /*#__PURE__*/React__namespace.createElement(core.MapViewLayer, {
+        id: "geojsonlayer-start-" + mapId,
+        isInEditMode: drawMode.start !== null && layerDrawModes.start !== null,
+        geojson: geoJSONs.start,
+        drawMode: layerDrawModes.start,
+        updateGeojson: function updateGeojson(geojson) {
+          var start = allowOneGeoJSONFeature(layerDrawModes.start, geojson);
+          setLayerGeoJSONs(__assign(__assign({}, geoJSONs), {
+            start: start
+          }));
+        },
+        exitDrawModeCallback: function exitDrawModeCallback() {
+          setDrawMode({
+            start: null,
+            end: null
+          });
+          exitDrawModeCallbackStart();
+        },
+        featureNrToEdit: 0
+      }), /*#__PURE__*/React__namespace.createElement(core.MapViewLayer, {
+        id: "geojsonlayer-intersection-end-" + mapId,
+        isInEditMode: false,
+        geojson: geoJSONs.intersectionEnd
+      }), /*#__PURE__*/React__namespace.createElement(core.MapViewLayer, {
+        id: "geojsonlayer-intersection-start-" + mapId,
+        isInEditMode: false,
+        geojson: geoJSONs.intersectionStart
+      })), /*#__PURE__*/React__namespace.createElement("div", {
+        style: {
+          position: 'absolute',
+          left: '0',
+          bottom: '0',
+          zIndex: 1000,
+          width: '100%'
         }
-      }; // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, /*#__PURE__*/React__namespace.createElement(core.TimeSliderConnect, {
+        sourceId: timesliderId,
+        mapId: mapId
+      })), /*#__PURE__*/React__namespace.createElement(core.LegendConnect, {
+        showMapId: true,
+        mapId: mapId
+      }));
+    };
 
+    var ProductFormLayout = function ProductFormLayout(_a) {
+      var _b, _c, _d;
 
-      var delayedQuery = React__default["default"].useCallback(lodash.debounce(update, 1000), []);
-      return [TAC, delayedQuery];
-    };
+      var children = _a.children,
+          geojsonProps = __rest(_a, ["children"]);
 
-    var ProductFormTAC = function ProductFormTAC(_a) {
-      var tac = _a.tac;
-      var tacLines = tac.split('\n');
-      return /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        variant: "body2",
-        component: "div",
-        sx: styles$2.tacOutput,
-        "data-testid": "productform-tac-message"
-      }, tacLines.map(function (line) {
-        return /*#__PURE__*/React__default["default"].createElement(material.Box, {
-          component: "p",
-          key: line,
-          sx: styles$2.tacLine,
-          "data-testid": "productform-tac-message-line"
-        }, line);
-      }));
+      var theme = material.useTheme();
+      return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        container: true,
+        sx: (_b = {
+          height: '100%',
+          overflowY: 'auto'
+        }, _b[theme.breakpoints.up('sm')] = {
+          overflowY: 'hidden'
+        }, _b)
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true,
+        xs: 12,
+        sm: 6,
+        lg: 8,
+        sx: (_c = {
+          height: 400,
+          padding: 2
+        }, _c[theme.breakpoints.up('sm')] = {
+          height: '100%',
+          padding: 0
+        }, _c)
+      }, /*#__PURE__*/React__default["default"].createElement(MapViewGeoJson, __assign({}, geojsonProps))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true,
+        xs: 12,
+        sm: 6,
+        lg: 4,
+        sx: (_d = {
+          paddingTop: 5,
+          paddingBottom: 5,
+          paddingRight: 2
+        }, _d[theme.breakpoints.up('sm')] = {
+          overflowY: 'auto',
+          height: '100%'
+        }, _d)
+      }, children));
     };
 
     var SigmetForm = function SigmetForm(_a) {
@@ -4031,13 +4091,14 @@
       }, [drawMode.start, drawMode.end, isReadOnly, isDisabled]);
 
       var renderForm = function renderForm() {
-        return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
           container: true,
           direction: "column",
-          spacing: 2
+          spacing: 5
         }, !isCancelSigmet && /*#__PURE__*/React__default["default"].createElement(Phenomenon, {
           productType: "sigmet",
           isDisabled: isDisabled,
+          isReadOnly: isReadOnly,
           onChange: onChangeForm
         }), !isCancelSigmet && /*#__PURE__*/React__default["default"].createElement(ObservationForecast, {
           isDisabled: isDisabled,
@@ -4054,14 +4115,17 @@
         }), /*#__PURE__*/React__default["default"].createElement(ValidFrom, {
           productType: "sigmet",
           isDisabled: isDisabled,
+          isReadOnly: isReadOnly,
           onChange: onChangeForm
         }), /*#__PURE__*/React__default["default"].createElement(ValidUntil, {
           productType: "sigmet",
           isDisabled: isDisabled,
+          isReadOnly: isReadOnly,
           onChange: onChangeForm
-        })), /*#__PURE__*/React__default["default"].createElement(SelectFIR, {
+        }), /*#__PURE__*/React__default["default"].createElement(SelectFIR, {
           productType: "sigmet",
-          isDisabled: isDisabled
+          isDisabled: isDisabled,
+          isReadOnly: isReadOnly
         }), /*#__PURE__*/React__default["default"].createElement(StartGeometry, {
           isReadOnly: isReadOnly,
           drawMode: drawMode,
@@ -4087,74 +4151,19 @@
         }), !isCancelSigmet && /*#__PURE__*/React__default["default"].createElement(Change, {
           isDisabled: isDisabled,
           isReadOnly: isReadOnly
-        }), isCancelSigmet && watch('vaSigmetMoveToFIR') && /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-          item: true,
-          container: true,
-          spacing: 2
-        }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-          item: true,
-          xs: 4,
-          container: true,
-          justifyContent: "flex-end"
-        }), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-          item: true,
-          xs: 8,
-          container: true,
-          justifyContent: "flex-start"
-        }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        }), isCancelSigmet && watch('vaSigmetMoveToFIR') && /*#__PURE__*/React__default["default"].createElement(ProductFormFieldLayout, null, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
           item: true,
           xs: 12
         }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
           variant: "body2",
-          sx: styles$4.body,
+          sx: styles$2.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,
-          sx: styles$4.containerItem
-        }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-          item: true,
-          xs: 4,
-          container: true,
-          justifyContent: "flex-end"
-        }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-          variant: "subtitle1",
-          sx: styles$4.label
-        }, "Issued at")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-          item: true,
-          xs: 8,
-          container: true,
-          justifyContent: "flex-start"
-        }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-          item: true,
-          xs: 12
-        }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-          variant: "body2",
-          sx: styles$4.body
-        }, getProductIssueDate(initialSigmet, initialCancelSigmet)))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-          item: true,
-          container: true,
-          spacing: 2
-        }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-          item: true,
-          xs: 4,
-          container: true,
-          justifyContent: "flex-end"
-        }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-          variant: "subtitle1",
-          sx: styles$4.label
-        }, "TAC")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-          item: true,
-          xs: 8,
-          container: true,
-          justifyContent: "flex-start"
-        }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-          item: true,
-          xs: 12
-        }, /*#__PURE__*/React__default["default"].createElement(ProductFormTAC, {
+        }, "Volcanic Cloud is moving in the direction of:", ' ', /*#__PURE__*/React__default["default"].createElement("b", null, " ", watch('vaSigmetMoveToFIR'))))), /*#__PURE__*/React__default["default"].createElement(IssuedAt, {
+          date: getProductIssueDate(initialSigmet, initialCancelSigmet),
+          isReadOnly: isReadOnly
+        }), /*#__PURE__*/React__default["default"].createElement(Tac, {
           tac: tac
-        })))), /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormHiddenInput, {
+        }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormHiddenInput, {
           name: "sequence",
           defaultValue: "-1"
         }),
@@ -4183,15 +4192,7 @@
         style: {
           width: '100%'
         }
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        container: true,
-        style: {
-          height: '100%'
-        }
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 8
-      }, /*#__PURE__*/React__default["default"].createElement(MapViewGeoJson, {
+      }, /*#__PURE__*/React__default["default"].createElement(ProductFormLayout, {
         geoJSONs: geoJSONs,
         setLayerGeoJSONs: function setLayerGeoJSONs(geoJSONs) {
           return _setLayerGeoJSONs(createInterSections(geoJSONs));
@@ -4201,11 +4202,7 @@
         setDrawMode: setDrawMode,
         exitDrawModeCallbackStart: updateStartDrawing,
         exitDrawModeCallbackEnd: updateEndDrawing
-      })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 4,
-        sx: styles$4.productForm
-      }, renderForm())));
+      }, renderForm()));
     };
 
     var AirmetForm = function AirmetForm(_a) {
@@ -4284,18 +4281,21 @@
       }, [drawMode.start, isReadOnly, isDisabled]);
 
       var renderForm = function renderForm() {
-        return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
           container: true,
           direction: "column",
-          spacing: 2
+          spacing: 6
         }, !isCancelAirmet && /*#__PURE__*/React__default["default"].createElement(Phenomenon, {
           productType: "airmet",
           isDisabled: isDisabled,
+          isReadOnly: isReadOnly,
           onChange: onChangeForm
         }), !isCancelAirmet && phenomenon === 'SFC_VIS' && /*#__PURE__*/React__default["default"].createElement(SurfaceVisibility, {
+          isReadOnly: isReadOnly,
           isDisabled: isDisabled,
           onChange: onChangeForm
         }), !isCancelAirmet && phenomenon === 'SFC_WIND' && /*#__PURE__*/React__default["default"].createElement(SurfaceWind, {
+          isReadOnly: isReadOnly,
           isDisabled: isDisabled,
           onChange: onChangeForm
         }), !isCancelAirmet && /*#__PURE__*/React__default["default"].createElement(ObservationForecast, {
@@ -4308,14 +4308,17 @@
           onChange: onChangeForm
         }), /*#__PURE__*/React__default["default"].createElement(ValidFrom, {
           productType: "airmet",
+          isReadOnly: isReadOnly,
           isDisabled: isDisabled,
           onChange: onChangeForm
         }), /*#__PURE__*/React__default["default"].createElement(ValidUntil, {
           productType: "airmet",
+          isReadOnly: isReadOnly,
           isDisabled: isDisabled,
           onChange: onChangeForm
-        })), /*#__PURE__*/React__default["default"].createElement(SelectFIR, {
+        }), /*#__PURE__*/React__default["default"].createElement(SelectFIR, {
           productType: "airmet",
+          isReadOnly: isReadOnly,
           isDisabled: isDisabled
         }), /*#__PURE__*/React__default["default"].createElement(StartGeometry, {
           isReadOnly: isReadOnly,
@@ -4341,53 +4344,12 @@
         }), !isCancelAirmet && /*#__PURE__*/React__default["default"].createElement(Change, {
           isDisabled: isDisabled,
           isReadOnly: isReadOnly
-        }), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-          item: true,
-          container: true,
-          spacing: 2,
-          sx: styles$4.containerItem
-        }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-          item: true,
-          xs: 4,
-          container: true,
-          justifyContent: "flex-end"
-        }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-          variant: "subtitle1",
-          sx: styles$4.label
-        }, "Issued at")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-          item: true,
-          xs: 8,
-          container: true,
-          justifyContent: "flex-start"
-        }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-          item: true,
-          xs: 12
-        }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-          variant: "body2",
-          sx: styles$4.body
-        }, getProductIssueDate(initialAirmet, initialCancelAirmet)))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-          item: true,
-          container: true,
-          spacing: 2
-        }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-          item: true,
-          xs: 4,
-          container: true,
-          justifyContent: "flex-end"
-        }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-          variant: "subtitle1",
-          sx: styles$4.label
-        }, "TAC")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-          item: true,
-          xs: 8,
-          container: true,
-          justifyContent: "flex-start"
-        }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-          item: true,
-          xs: 12
-        }, /*#__PURE__*/React__default["default"].createElement(ProductFormTAC, {
+        }), /*#__PURE__*/React__default["default"].createElement(IssuedAt, {
+          isReadOnly: isReadOnly,
+          date: getProductIssueDate(initialAirmet, initialCancelAirmet)
+        }), /*#__PURE__*/React__default["default"].createElement(Tac, {
           tac: tac
-        })))), /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormHiddenInput, {
+        }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormHiddenInput, {
           name: "sequence",
           defaultValue: "-1"
         }),
@@ -4416,15 +4378,7 @@
         style: {
           width: '100%'
         }
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        container: true,
-        style: {
-          height: '100%'
-        }
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 8
-      }, /*#__PURE__*/React__default["default"].createElement(MapViewGeoJson, {
+      }, /*#__PURE__*/React__default["default"].createElement(ProductFormLayout, {
         geoJSONs: geoJSONs,
         setLayerGeoJSONs: function setLayerGeoJSONs(geoJSONs) {
           return _setLayerGeoJSONs(createInterSections(geoJSONs));
@@ -4433,45 +4387,24 @@
         drawMode: drawMode,
         setDrawMode: setDrawMode,
         exitDrawModeCallbackStart: updateStartDrawing
-      })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 4,
-        sx: styles$4.productForm
-      }, renderForm())));
-    };
-
-    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,
-        padding: '4px 20px'
-      },
-      dialogTitle: {
-        display: 'flex',
-        justifyContent: 'center',
-        textAlign: 'center'
-      },
-      dialogChildren: {
-        display: 'flex',
-        padding: '20px',
-        minHeight: 200,
-        minWidth: 400,
-        height: '100%',
-        paddingTop: '20px!important'
-      }
+      }, renderForm()));
     };
 
     var ContentDialog = function ContentDialog(_a) {
+      var _b, _c;
+
       var open = _a.open,
           toggleDialogStatus = _a.toggleDialogStatus,
           title = _a.title,
           children = _a.children,
           options = _a.options,
           onClose = _a.onClose,
-          _b = _a.alertBanner,
-          alertBanner = _b === void 0 ? null : _b,
+          _d = _a.alertBanner,
+          alertBanner = _d === void 0 ? null : _d,
           other = __rest(_a, ["open", "toggleDialogStatus", "title", "children", "options", "onClose", "alertBanner"]);
 
+      var theme$1 = material.useTheme();
+
       var handleClose = function handleClose() {
         if (onClose) {
           onClose();
@@ -4485,53 +4418,77 @@
         open: open,
         onClose: handleClose,
         maxWidth: other.maxWidth ? other.maxWidth : 'lg'
-      }, other), /*#__PURE__*/React__namespace.createElement(material.DialogTitle, {
-        sx: styles$1.dialogHeader
+      }, other, {
+        sx: {
+          ' .MuiPaper-root': {
+            minWidth: 300
+          }
+        }
+      }), /*#__PURE__*/React__namespace.createElement(material.DialogTitle, {
+        sx: (_b = {
+          boxShadow: 1,
+          zIndex: 1,
+          padding: 0,
+          height: 48,
+          display: 'flex',
+          paddingLeft: 2,
+          paddingRight: 2
+        }, _b[theme$1.breakpoints.up('sm')] = {
+          paddingLeft: 3,
+          paddingRight: 3
+        }, _b),
+        component: "div"
       }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
         container: true,
         alignItems: "center"
       }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true,
-        xs: true
+        xs: 4
       }, /*#__PURE__*/React__namespace.createElement(material.Button, {
         onClick: handleClose,
-        color: "secondary",
-        size: "medium",
-        startIcon: /*#__PURE__*/React__namespace.createElement(theme.ChevronLeft, {
-          color: "secondary"
-        }),
-        "data-testid": "contentdialog-close"
-      }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
-        variant: "subtitle1",
-        color: "secondary"
-      }, "BACK"))), /*#__PURE__*/React__namespace.createElement(material.Grid, {
+        variant: "flat",
+        startIcon: /*#__PURE__*/React__namespace.createElement(theme.ChevronLeft, null),
+        "data-testid": "contentdialog-close",
+        sx: (_c = {}, _c[theme$1.breakpoints.down('md')] = {
+          textIndent: -999999,
+          width: 24,
+          minWidth: 24,
+          height: 24,
+          ' .MuiSvgIcon-root': {
+            marginRight: 0
+          }
+        }, _c)
+      }, "BACK")), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true,
-        xs: true,
-        sx: styles$1.dialogTitle
+        xs: 4,
+        sx: {
+          display: 'flex',
+          justifyContent: 'center',
+          textAlign: 'center'
+        }
       }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
         "data-testid": "dialogTitle",
-        variant: "h6"
+        variant: "h6",
+        sx: {
+          fontSize: '1.0rem',
+          textOverflow: 'ellipsis',
+          overflow: 'hidden',
+          whiteSpace: 'nowrap'
+        }
       }, title)), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true,
-        xs: true
-      }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
-        container: true
-      }, options)))), alertBanner !== null && alertBanner, /*#__PURE__*/React__namespace.createElement(material.DialogContent, {
-        sx: styles$1.dialogChildren
+        xs: 4
+      }, options))), alertBanner !== null && alertBanner, /*#__PURE__*/React__namespace.createElement(material.DialogContent, {
+        sx: {
+          display: 'flex',
+          padding: 0,
+          minHeight: 200,
+          height: '100%'
+        }
       }, children));
     };
 
     var styles = {
-      cardWrapper: {
-        width: '100%'
-      },
-      cardContent: {
-        width: '100%',
-        padding: '14px',
-        '&:last-child': {
-          paddingBottom: '14px'
-        }
-      },
       activeStatus: {
         color: '#72bb23',
         paddingLeft: '6px',
@@ -4565,27 +4522,40 @@
       if (cancelsSeqId !== null) {
         return /*#__PURE__*/React__default["default"].createElement(shared.StatusTag, {
           content: "cancels " + cancelsSeqId,
-          color: "red"
+          color: "red",
+          sx: {
+            width: '80px'
+          }
         });
       }
 
       if (product.status === 'CANCELLED') {
         return /*#__PURE__*/React__default["default"].createElement(shared.StatusTag, {
           content: "cancelled " + product.sequence,
-          color: "red"
+          color: "red",
+          sx: {
+            width: '80px'
+          }
         });
       }
 
       if (moment__default["default"](product.validDateEnd) < moment__default["default"].utc(new Date())) {
         return /*#__PURE__*/React__default["default"].createElement(shared.StatusTag, {
           content: "expired",
-          color: "grey"
+          color: "grey",
+          sx: {
+            width: '80px'
+          }
         });
       }
 
       return /*#__PURE__*/React__default["default"].createElement(shared.StatusTag, {
         content: product.status.toLowerCase(),
-        color: product.status === 'PUBLISHED' ? 'green' : 'grey'
+        color: product.status === 'PUBLISHED' ? 'green' : 'grey',
+        sx: {
+          marginRight: '0!important',
+          width: '80px'
+        }
       });
     };
 
@@ -4613,6 +4583,16 @@
       return moment__default["default"].utc(startDate).format('DD MMM YYYY, HH:mm') + " - " + moment__default["default"].utc(endDate).format(format) + " UTC";
     };
 
+    var ProductListRowHeader = function ProductListRowHeader(_a) {
+      var title = _a.title;
+      return /*#__PURE__*/React__default["default"].createElement(material.Typography, {
+        sx: {
+          color: 'geowebColors.textInputField.label.rgba',
+          fontSize: '0.75rem'
+        }
+      }, title);
+    };
+
     var ProductListRow = function ProductListRow(_a) {
       var product = _a.product,
           productType = _a.productType;
@@ -4647,80 +4627,123 @@
       return /*#__PURE__*/React__default["default"].createElement(material.Card, {
         elevation: 0,
         variant: "outlined",
-        sx: styles.cardWrapper
-      }, /*#__PURE__*/React__default["default"].createElement(material.CardContent, {
-        sx: styles.cardContent
+        // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+        sx: function sx(theme) {
+          var _a;
+
+          return _a = {
+            width: '100%',
+            paddingLeft: 1,
+            paddingRight: 1,
+            paddingTop: 1.5,
+            paddingBottom: 1.5,
+            '&:last-child': {
+              paddingBottom: 1.5
+            }
+          }, _a[theme.breakpoints.up('sm')] = {
+            paddingLeft: 4,
+            paddingRight: 4,
+            paddingTop: 2,
+            paddingBottom: 2,
+            '&:last-child': {
+              paddingBottom: 2
+            }
+          }, _a;
+        }
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true,
         alignItems: "center",
-        spacing: 1
-      }, /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
-        title: phenomenon !== null ? getPhenomenon(productType, phenomenon) : '',
-        placement: "bottom-start"
+        spacing: 2
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 3,
-        sm: 3,
-        md: 1
-      }, phenomenon !== null && /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        variant: "overline"
-      }, productType.toUpperCase()), /*#__PURE__*/React__default["default"].createElement(material.Typography, {
+        sm: 1
+      }, phenomenon !== null && /*#__PURE__*/React__default["default"].createElement(ProductListRowHeader, {
+        title: productType.toUpperCase()
+      }), /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
+        title: phenomenon !== null ? getPhenomenon(productType, phenomenon) : '',
+        placement: "bottom-start"
+      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "subtitle2",
         noWrap: true,
         sx: styles.font
       }, phenomenon !== null ? phenomenon : 'Cancel'))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        xs: 3,
-        sm: 2,
-        md: 1
-      }, /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
-        "data-testid": "productlistrow-tactooltip",
-        title: /*#__PURE__*/React__default["default"].createElement("div", {
+        xs: 9,
+        sm: 3
+      }, /*#__PURE__*/React__default["default"].createElement(ProductListRowHeader, {
+        title: "Issue time"
+      }), /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
+        title: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ProductListRowHeader, {
+          title: "TAC"
+        }), /*#__PURE__*/React__default["default"].createElement(material.Typography, {
           style: {
             whiteSpace: 'pre-line'
+          },
+          variant: "subtitle2",
+          sx: __assign(__assign({}, styles.font), {
+            color: 'geowebColors.typographyAndIcons.text',
+            fontSize: '1.125rem',
+            fontWeight: 'normal',
+            fontStyle: 'normal',
+            lineHeight: '28px',
+            letterSpacing: '0.5px'
+          })
+        }, TAC)),
+        placement: "bottom-start",
+        componentsProps: {
+          tooltip: {
+            sx: {
+              bgcolor: 'geowebColors.background.surface',
+              boxShadow: 8,
+              '& .MuiTooltip-arrow': {
+                color: 'common.black'
+              },
+              maxWidth: 472
+            }
           }
-        }, TAC),
-        placement: "bottom-start"
-      }, /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement(theme.Info, {
-        "data-testid": "productlistrow-tacicon",
-        color: "secondary"
-      })))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 9,
-        sm: 10,
-        md: 3,
-        lg: 2
+        }
       }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        variant: "overline"
-      }, "Issue time"), /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "subtitle2",
         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, {
+      }, 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,
         xs: 12,
-        sm: 8,
-        md: 5,
-        lg: 6
-      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        variant: "overline"
-      }, "Valid time"), /*#__PURE__*/React__default["default"].createElement(material.Typography, {
+        sm: 6
+      }, /*#__PURE__*/React__default["default"].createElement(ProductListRowHeader, {
+        title: "Valid time"
+      }), /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "subtitle2",
         sx: styles.font,
         "data-testid": "validTime"
       }, validTime)), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        xs: 6,
-        sm: 4,
-        md: 2,
-        container: true
+        xs: 12,
+        sm: 2,
+        container: true,
+        justifyContent: "center",
+        // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+        sx: function sx(theme) {
+          var _a;
+
+          return _a = {}, _a[theme.breakpoints.up('sm')] = {
+            justifyContent: 'right',
+            button: {
+              marginRight: 3
+            },
+            ' .statusTag': {
+              marginRight: 3
+            }
+          }, _a;
+        }
       }, product.status === 'DRAFT' ? /*#__PURE__*/React__default["default"].createElement(material.Button, {
-        color: "secondary",
-        size: "small",
-        startIcon: /*#__PURE__*/React__default["default"].createElement(theme.Edit, {
-          color: "secondary"
-        })
-      }, "Draft") : getStatusTagList(product, cancelsSeqId), product.status === 'PUBLISHED' && cancelsSeqId === null && getActiveStatus(product)))));
+        sx: {
+          marginTop: '6px'
+        },
+        variant: "flat",
+        startIcon: /*#__PURE__*/React__default["default"].createElement(theme.Edit, null)
+      }, "DRAFT") : getStatusTagList(product, cancelsSeqId), product.status === 'PUBLISHED' && cancelsSeqId === null && getActiveStatus(product))));
     };
 
     /* *
@@ -4756,10 +4779,12 @@
         item: true,
         justifyContent: "flex-end"
       }, /*#__PURE__*/React__default["default"].createElement(material.Button, {
-        variant: "contained",
-        color: "secondary",
+        variant: "primary",
         "data-testid": "productListCreateButton",
-        onClick: onClickNewProduct
+        onClick: onClickNewProduct,
+        sx: {
+          textTransform: 'initial'
+        }
       }, "Create a new ", productType.toUpperCase())), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         sx: {
@@ -4771,7 +4796,11 @@
         title: "An error has occurred while retrieving the list, please try again",
         info: error.message ? error.message : '',
         dataTestId: "productList-alert"
-      }), productList && /*#__PURE__*/React__default["default"].createElement(material.List, null, productList.map(function (productListItem, index) {
+      }), productList && /*#__PURE__*/React__default["default"].createElement(material.List, {
+        sx: {
+          paddingTop: 4
+        }
+      }, productList.map(function (productListItem, index) {
         var product = productListItem[productType];
         return /*#__PURE__*/React__default["default"].createElement(material.ListItem, {
           "data-testid": "productListItem",
@@ -5026,6 +5055,11 @@
         options: getProductFormLifecycleButtons(productCanBe, onProductButtonPress),
         style: {
           zIndex: 1000
+        },
+        sx: {
+          ' .MuiDialogContent-root': {
+            overflowY: 'hidden'
+          }
         }
       }, productType === 'sigmet' ? /*#__PURE__*/React__namespace.createElement(SigmetForm, {
         mode: mode,