@opengeoweb/sigmet-airmet 4.2.0 → 4.4.0

package/index.esm.js

@@ -1,18 +1,18 @@
 import * as React from 'react';
 import React__default from 'react';
-import { FormControlLabel, Radio, Grid, Typography, Tooltip, Button, Checkbox, MenuItem, FormHelperText, Box, Dialog, DialogTitle, DialogContent, Card, CardContent, List, ListItem, Skeleton, Backdrop, CircularProgress } from '@mui/material';
+import { FormControlLabel, Radio, Grid, Typography, Tooltip, Box, Button, Checkbox, MenuItem, FormHelperText, useTheme, Dialog, DialogTitle, DialogContent, Card, List, ListItem, Skeleton, Backdrop, CircularProgress } from '@mui/material';
 import { useFormContext } from 'react-hook-form';
-import { ReactHookFormRadioGroup, ReactHookFormSelect, ReactHookFormNumberField, isInteger, isValidMax, isValidMin, isEmpty, ReactHookFormDateTime, isValidDate, isBefore, isBetween, hasMaxFeaturePoints, hasMulitpleIntersections, ReactHookFormHiddenInput, isMaximumOneDrawing, hasIntersectionWithFIR, isValidGeoJsonCoordinates, isXHoursBefore, isAfter, isXHoursAfter, ReactHookFormTextField, containsNoCommas, isLatitude, isNonOrBothCoordinates, isLongitude, errorMessages, isGeometryDirty, ReactHookFormProvider, defaultFormOptions } from '@opengeoweb/form-fields';
+import { ReactHookFormRadioGroup, ReactHookFormSelect, ReactHookFormNumberField, isInteger, isValidMax, isValidMin, isEmpty, ReactHookFormDateTime, isValidDate, isBefore, isBetween, hasMaxFeaturePoints, hasMulitpleIntersections, ReactHookFormHiddenInput, isMaximumOneDrawing, hasIntersectionWithFIR, isValidGeoJsonCoordinates, isXHoursBefore, isAfter, isXHoursAfter, ReactHookFormTextField, containsNoCommas, isLatitude, isNonOrBothCoordinates, isLongitude, errorMessages, ReactHookFormFormControl, isGeometryDirty, ReactHookFormProvider, defaultFormOptions } from '@opengeoweb/form-fields';
 import { useApiContext, useApi, createApiInstance } from '@opengeoweb/api';
 import produce, { produce as produce$1 } from 'immer';
-import { useDispatch, useSelector, shallowEqual } from 'react-redux';
-import { mapTypes, mapSelectors, generateMapId, generateTimesliderId, SyncGroups, generateLayerId, mapActions, publicLayers, MapControls, LayerManagerMapButtonConnect, LegendMapButtonConnect, MultiDimensionSelectMapButtonsConnect, MapViewConnect, MapViewLayer, TimeSliderConnect, LegendConnect } from '@opengeoweb/core';
 import * as turf from '@turf/turf';
 import { polygonToLineString, booleanClockwise, rewind } from '@turf/turf';
-import { useDraftFormHelpers, useIsMounted, StatusTag, AlertBanner, usePreventBrowserClose, useConfirmationDialog, isAxiosError, getAxiosErrorMessage, ConfirmationServiceProvider, usePoller } from '@opengeoweb/shared';
-import { Location, DrawRegion, DrawPolygon, DrawFIRLand, Delete, ChevronLeft, Info, Edit, Success, Clock } from '@opengeoweb/theme';
+import { useDraftFormHelpers, ToggleMenu, useIsMounted, StatusTag, AlertBanner, usePreventBrowserClose, useConfirmationDialog, isAxiosError, getAxiosErrorMessage, ConfirmationServiceProvider, usePoller } from '@opengeoweb/shared';
+import { Location, DrawRegion, DrawPolygon, DrawFIRLand, Delete, ChevronLeft, Edit, Success, Clock } from '@opengeoweb/theme';
 import moment from 'moment';
 import { debounce } from 'lodash';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
+import { mapTypes, mapSelectors, generateMapId, generateTimesliderId, SyncGroups, generateLayerId, mapActions, publicLayers, MapControls, LayerManagerMapButtonConnect, LegendMapButtonConnect, MultiDimensionSelectMapButtonsConnect, MapViewConnect, MapViewLayer, TimeSliderConnect, LegendConnect } from '@opengeoweb/core';
 
 function _typeof(obj) {
   "@babel/helpers - typeof";
@@ -117,6 +117,188 @@ function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
+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,
@@ -432,443 +614,18 @@ var StartOrEndDrawing;
   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: "".concat(adagucBaseUrl, "?dataset=OVL"),
-  id: 'knmigeoweboverlays'
-};
-var northSeaPlatforms = {
-  service: KNMIGeoWebOverlays.url,
-  name: 'northseastations',
-  format: 'image/png',
-  layerType: mapTypes.LayerType.overLayer,
-  enabled: true
-};
-var majorAirportsEHAA = {
-  service: KNMIGeoWebOverlays.url,
-  name: 'airports',
-  format: 'image/png',
-  layerType: mapTypes.LayerType.overLayer,
-  enabled: true
-};
+var getDrawModeFromSelectionType = function getDrawModeFromSelectionType(selectionType) {
+  switch (selectionType) {
+    case 'point':
+      return MapDrawMode.POINT;
 
-/* *
- * 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 allowOneGeoJSONFeature = function allowOneGeoJSONFeature(mode, geojson) {
-  switch (mode) {
-    case MapDrawMode.BOX:
-    case MapDrawMode.POLYGON:
-      return geojson.features[0].geometry.coordinates.length > 1 ? produce(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;
 
-    default:
-      return geojson;
-  }
-};
-
-var MapViewGeoJson = function MapViewGeoJson(_ref) {
-  var geoJSONs = _ref.geoJSONs,
-      _ref$setLayerGeoJSONs = _ref.setLayerGeoJSONs,
-      setLayerGeoJSONs = _ref$setLayerGeoJSONs === void 0 ? function () {} : _ref$setLayerGeoJSONs,
-      _ref$layerDrawModes = _ref.layerDrawModes,
-      layerDrawModes = _ref$layerDrawModes === void 0 ? {
-    start: null,
-    end: null
-  } : _ref$layerDrawModes,
-      _ref$drawMode = _ref.drawMode,
-      drawMode = _ref$drawMode === void 0 ? {
-    start: null,
-    end: null
-  } : _ref$drawMode,
-      _ref$setDrawMode = _ref.setDrawMode,
-      setDrawMode = _ref$setDrawMode === void 0 ? function () {} : _ref$setDrawMode,
-      _ref$exitDrawModeCall = _ref.exitDrawModeCallbackStart,
-      exitDrawModeCallbackStart = _ref$exitDrawModeCall === void 0 ? function () {} : _ref$exitDrawModeCall,
-      _ref$exitDrawModeCall2 = _ref.exitDrawModeCallbackEnd,
-      exitDrawModeCallbackEnd = _ref$exitDrawModeCall2 === void 0 ? function () {} : _ref$exitDrawModeCall2;
-  var dispatch = useDispatch();
-  var firstMap = useSelector(function (store) {
-    return mapSelectors.getFirstMap(store);
-  }, shallowEqual);
-  var firstMapId = firstMap && firstMap.id ? firstMap.id : null;
-  var mapLayers = useSelector(function (store) {
-    return mapSelectors.getMapLayers(store, firstMapId);
-  }, shallowEqual);
-  var mapDimensions = useSelector(function (store) {
-    return mapSelectors.getMapDimensions(store, firstMapId);
-  }, shallowEqual);
-  var mapId = React.useRef("sigmet-".concat(generateMapId())).current;
-  var timesliderId = React.useRef("sigmet-".concat(generateTimesliderId())).current;
-  var syncGroupAddGroup = React.useCallback(function (payload) {
-    dispatch(SyncGroups.actions.syncGroupAddGroup(payload));
-  }, [dispatch]);
-  var syncGroupAddTarget = React.useCallback(function (payload) {
-    dispatch(SyncGroups.actions.syncGroupAddTarget(payload));
-  }, [dispatch]);
-  React.useEffect(function () {
-    if (mapLayers && mapLayers.length) {
-      // use maplayers, but change layerId and current mapId
-      var layers = mapLayers.map(function (layer) {
-        return Object.assign(Object.assign({}, layer), {
-          id: generateLayerId(),
-          mapId: mapId
-        });
-      });
-      dispatch(mapActions.setLayers({
-        mapId: mapId,
-        layers: layers
-      }));
-    }
-
-    if (mapDimensions && mapDimensions.length) {
-      dispatch(mapActions.mapChangeDimension({
-        mapId: mapId,
-        dimension: mapDimensions[0],
-        origin: 'MapViewGeoJson'
-      }));
-    }
-
-    dispatch(mapActions.setBaseLayers({
-      mapId: mapId,
-      layers: [Object.assign(Object.assign({}, publicLayers.baseLayerGrey), {
-        id: "baselayer-".concat(mapId)
-      }), Object.assign(Object.assign({}, publicLayers.overLayer), {
-        id: "countryborders-".concat(mapId)
-      }), Object.assign(Object.assign({}, northSeaPlatforms), {
-        id: "northseaplatforms-".concat(mapId)
-      }), Object.assign(Object.assign({}, majorAirportsEHAA), {
-        id: "majorairportsehaa-".concat(mapId)
-      })]
-    }));
-    dispatch(mapActions.setBbox({
-      mapId: mapId,
-      bbox: srsAndBboxDefault.bbox,
-      srs: srsAndBboxDefault.srs
-    }));
-    syncGroupAddGroup({
-      groupId: 'Time_SigmetAirmet',
-      title: 'Group 1 for sigmet/airmet map',
-      type: 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.createElement("div", {
-    style: {
-      position: 'relative',
-      height: '99%'
-    },
-    "data-testid": "MapView"
-  }, /*#__PURE__*/React.createElement(MapControls, null, /*#__PURE__*/React.createElement(LayerManagerMapButtonConnect, {
-    source: "module",
-    mapId: mapId
-  }), /*#__PURE__*/React.createElement(LegendMapButtonConnect, {
-    source: "module",
-    mapId: mapId
-  }), /*#__PURE__*/React.createElement(MultiDimensionSelectMapButtonsConnect, {
-    source: "module",
-    mapId: mapId
-  })), /*#__PURE__*/React.createElement(MapViewConnect, {
-    mapId: mapId
-  }, /*#__PURE__*/React.createElement(MapViewLayer, {
-    id: "geojsonlayer-fir-".concat(mapId),
-    isInEditMode: false,
-    geojson: geoJSONs.fir
-  }), /*#__PURE__*/React.createElement(MapViewLayer, {
-    id: "geojsonlayer-end-".concat(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(Object.assign(Object.assign({}, geoJSONs), {
-        end: end
-      }));
-    },
-    exitDrawModeCallback: function exitDrawModeCallback() {
-      setDrawMode({
-        start: null,
-        end: null
-      });
-      exitDrawModeCallbackEnd();
-    },
-    featureNrToEdit: 0
-  }), /*#__PURE__*/React.createElement(MapViewLayer, {
-    id: "geojsonlayer-start-".concat(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(Object.assign(Object.assign({}, geoJSONs), {
-        start: start
-      }));
-    },
-    exitDrawModeCallback: function exitDrawModeCallback() {
-      setDrawMode({
-        start: null,
-        end: null
-      });
-      exitDrawModeCallbackStart();
-    },
-    featureNrToEdit: 0
-  }), /*#__PURE__*/React.createElement(MapViewLayer, {
-    id: "geojsonlayer-intersection-end-".concat(mapId),
-    isInEditMode: false,
-    geojson: geoJSONs.intersectionEnd
-  }), /*#__PURE__*/React.createElement(MapViewLayer, {
-    id: "geojsonlayer-intersection-start-".concat(mapId),
-    isInEditMode: false,
-    geojson: geoJSONs.intersectionStart
-  })), /*#__PURE__*/React.createElement("div", {
-    style: {
-      position: 'absolute',
-      left: '0',
-      bottom: '0',
-      zIndex: 1000,
-      width: '100%'
-    }
-  }, /*#__PURE__*/React.createElement(TimeSliderConnect, {
-    sourceId: timesliderId,
-    mapId: mapId
-  })), /*#__PURE__*/React.createElement(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':
+    case 'poly':
     default:
       return MapDrawMode.POLYGON;
   }
@@ -1117,21 +874,19 @@ var createInterSections = function createInterSections(geoJSONs) {
  * 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
@@ -1159,7 +914,22 @@ var styles$4 = {
     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'
+      }
+    }
   }
 };
 
@@ -1222,6 +992,31 @@ var RadioButtonAndLabel = function RadioButtonAndLabel(props) {
   }, restProps));
 };
 
+var ProductFormFieldLayout = function ProductFormFieldLayout(_a) {
+  var title = _a.title,
+      children = _a.children,
+      props = __rest(_a, ["title", "children"]);
+
+  return /*#__PURE__*/React__default.createElement(Grid, Object.assign({
+    item: true,
+    container: true,
+    spacing: 3
+  }, props), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: 4,
+    container: true,
+    justifyContent: "flex-end"
+  }, title && /*#__PURE__*/React__default.createElement(Typography, {
+    variant: "subtitle1",
+    sx: styles$2.label
+  }, title)), /*#__PURE__*/React__default.createElement(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.
@@ -1235,38 +1030,20 @@ var RadioButtonAndLabel = function RadioButtonAndLabel(props) {
  * 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(_ref) {
   var isDisabled = _ref.isDisabled,
       isReadOnly = _ref.isReadOnly;
 
-  var _useFormContext = useFormContext(),
-      watch = _useFormContext.watch;
-
   var _useDraftFormHelpers = useDraftFormHelpers(),
       isRequired = _useDraftFormHelpers.isRequired;
 
-  return /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    container: true,
-    spacing: 2,
-    sx: styles$4.containerItem
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 4,
-    container: true,
-    justifyContent: "flex-end"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "subtitle1",
-    sx: styles$4.label
-  }, "Change")), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 8,
-    container: true,
-    justifyContent: "flex-start"
+  return /*#__PURE__*/React__default.createElement(ProductFormFieldLayout, {
+    title: "Change",
+    sx: styles$2.containerItem
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12
@@ -1277,23 +1054,24 @@ var Change = function Change(_ref) {
         isRequired: isRequired
       }
     },
-    disabled: isDisabled
-  }, (!isReadOnly || watch('change') === 'WKN') && /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
+    disabled: isDisabled,
+    isReadOnly: isReadOnly
+  }, /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
     value: "WKN",
     label: "Weakening",
     disabled: isDisabled,
     "data-testid": "change-WKN"
-  }), (!isReadOnly || watch('change') === 'NC') && /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
+  }), /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
     value: "NC",
     label: "No change",
     disabled: isDisabled,
     "data-testid": "change-NC"
-  }), (!isReadOnly || watch('change') === 'INTSF') && /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
+  }), /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
     value: "INTSF",
     label: "Intensifying",
     disabled: isDisabled,
     "data-testid": "change-INTSF"
-  })))));
+  }))));
 };
 
 /* *
@@ -1309,22 +1087,19 @@ var Change = function Change(_ref) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
-var 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'
+    }
   }
 };
 
@@ -1338,88 +1113,74 @@ var DrawTools = function DrawTools(_ref) {
     xs: 12,
     container: true,
     justifyContent: "space-between",
-    "data-testid": "drawtools"
+    "data-testid": "drawtools",
+    spacing: 1
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true
   }, /*#__PURE__*/React__default.createElement(Tooltip, {
     title: "Drop a point as ".concat(type, " position")
   }, /*#__PURE__*/React__default.createElement(Radio, {
-    icon: /*#__PURE__*/React__default.createElement(Location, {
-      sx: styles$3.drawButtons
-    }),
+    icon: /*#__PURE__*/React__default.createElement(Location, null),
     value: true,
-    checkedIcon: /*#__PURE__*/React__default.createElement(Location, {
-      sx: styles$3.drawButtonsSelected
-    }),
+    checkedIcon: /*#__PURE__*/React__default.createElement(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.createElement(Grid, {
     item: true
   }, /*#__PURE__*/React__default.createElement(Tooltip, {
     title: "Draw a box as ".concat(type, " position")
   }, /*#__PURE__*/React__default.createElement(Radio, {
-    icon: /*#__PURE__*/React__default.createElement(DrawRegion, {
-      sx: styles$3.drawButtons
-    }),
-    checkedIcon: /*#__PURE__*/React__default.createElement(DrawRegion, {
-      sx: styles$3.drawButtonsSelected
-    }),
+    icon: /*#__PURE__*/React__default.createElement(DrawRegion, null),
+    checkedIcon: /*#__PURE__*/React__default.createElement(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.createElement(Grid, {
     item: true
   }, /*#__PURE__*/React__default.createElement(Tooltip, {
     title: "Draw a shape as ".concat(type, " position")
   }, /*#__PURE__*/React__default.createElement(Radio, {
-    icon: /*#__PURE__*/React__default.createElement(DrawPolygon, {
-      sx: styles$3.drawButtons
-    }),
-    checkedIcon: /*#__PURE__*/React__default.createElement(DrawPolygon, {
-      sx: styles$3.drawButtonsSelected
-    }),
+    icon: /*#__PURE__*/React__default.createElement(DrawPolygon, null),
+    checkedIcon: /*#__PURE__*/React__default.createElement(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.createElement(Grid, {
     item: true
   }, /*#__PURE__*/React__default.createElement(Tooltip, {
     title: "Set FIR as ".concat(type, " position")
   }, /*#__PURE__*/React__default.createElement(Radio, {
-    icon: /*#__PURE__*/React__default.createElement(DrawFIRLand, {
-      sx: styles$3.drawButtons
-    }),
-    checkedIcon: /*#__PURE__*/React__default.createElement(DrawFIRLand, {
-      sx: styles$3.drawButtonsSelected
-    }),
+    icon: /*#__PURE__*/React__default.createElement(DrawFIRLand, null),
+    checkedIcon: /*#__PURE__*/React__default.createElement(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.createElement(Grid, {
     item: true
   }, /*#__PURE__*/React__default.createElement(Tooltip, {
     title: "Remove geometry"
   }, /*#__PURE__*/React__default.createElement(Radio, {
-    icon: /*#__PURE__*/React__default.createElement(Delete, {
-      sx: styles$3.drawButtons
-    }),
-    checkedIcon: /*#__PURE__*/React__default.createElement(Delete, {
-      sx: styles$3.drawButtonsSelected
-    }),
+    icon: /*#__PURE__*/React__default.createElement(Delete, null),
+    checkedIcon: /*#__PURE__*/React__default.createElement(Delete, null),
     checked: drawMode === MapDrawMode.DELETE,
     onChange: function onChange() {
       setDrawMode(MapDrawMode.DELETE);
     },
-    "data-testid": "drawtools-delete"
+    "data-testid": "drawtools-delete",
+    sx: styles$1.radioInput
   }))));
 };
 
@@ -1628,47 +1389,86 @@ var getProductFormMode = function getProductFormMode(canBeOptions, productListIt
   if (productListItem === null) return 'new';
   return canBeOptions.includes('PUBLISHED') ? 'edit' : 'view';
 };
+var buttonStyle = {
+  minWidth: 96
+};
 var getProductFormLifecycleButtons = function getProductFormLifecycleButtons(canBe, onButtonPress) {
-  return /*#__PURE__*/React.createElement(Grid, {
-    container: true,
-    spacing: 1,
-    justifyContent: "flex-end"
-  }, canBe.includes('DISCARDED') && /*#__PURE__*/React.createElement(Grid, {
-    item: true
-  }, /*#__PURE__*/React.createElement(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.createElement(Box, {
+    sx: {
+      display: 'flex',
+      justifyContent: 'flex-end',
+      'button:not(:first-of-type)': {
+        marginLeft: 1
+      }
+    }
+  }, /*#__PURE__*/React.createElement(Box, {
+    display: {
+      xs: 'none',
+      lg: 'block'
+    }
+  }, hasDiscardButton && /*#__PURE__*/React.createElement(Button, {
+    variant: "flat",
+    onClick: onDiscard,
+    sx: buttonStyle,
     "data-testid": "productform-dialog-discard"
-  }, "Discard")), canBe.includes('DRAFTED') && /*#__PURE__*/React.createElement(Grid, {
-    item: true
-  }, /*#__PURE__*/React.createElement(Button, {
-    color: "secondary",
-    variant: "outlined",
-    onClick: function onClick() {
-      onButtonPress('DRAFT');
-    },
+  }, "DISCARD"), hasSaveButton && /*#__PURE__*/React.createElement(Button, {
+    variant: "tertiary",
+    onClick: onSave,
+    sx: buttonStyle,
     "data-testid": "productform-dialog-draft"
-  }, "Save")), canBe.includes('CANCELLED') && /*#__PURE__*/React.createElement(Grid, {
-    item: true
-  }, /*#__PURE__*/React.createElement(Button, {
-    color: "secondary",
-    variant: "contained",
-    onClick: function onClick() {
-      onButtonPress('CANCELLED');
-    },
+  }, "Save"), hasCancelButton && /*#__PURE__*/React.createElement(Button, {
+    variant: "tertiary",
+    onClick: onCancel,
+    sx: buttonStyle,
     "data-testid": "productform-dialog-cancel"
-  }, "Cancel")), canBe.includes('PUBLISHED') && /*#__PURE__*/React.createElement(Grid, {
-    item: true
-  }, /*#__PURE__*/React.createElement(Button, {
-    color: "secondary",
-    variant: "contained",
-    onClick: function onClick() {
-      onButtonPress('PUBLISHED');
-    },
+  }, "Cancel"), hasPublishButton && /*#__PURE__*/React.createElement(Button, {
+    variant: "primary",
+    onClick: onPublish,
+    sx: buttonStyle,
     "data-testid": "productform-dialog-publish"
-  }, "Publish")));
+  }, "Publish")), /*#__PURE__*/React.createElement(Box, {
+    display: {
+      lg: 'none'
+    }
+  }, /*#__PURE__*/React.createElement(ToggleMenu, {
+    menuItems: [].concat(_toConsumableArray(hasDiscardButton ? [{
+      text: 'Discard',
+      action: onDiscard
+    }] : []), _toConsumableArray(hasSaveButton ? [{
+      text: 'Save',
+      action: onSave
+    }] : []), _toConsumableArray(hasCancelButton ? [{
+      text: 'Cancel',
+      action: onCancel
+    }] : []), _toConsumableArray(hasPublishButton ? [{
+      text: 'Publish',
+      action: onPublish
+    }] : []))
+  })));
 };
 var hasValue = function hasValue(value) {
   return value !== null && value.toString() !== 'NaN';
@@ -1798,6 +1598,10 @@ var rewindGeometry = function rewindGeometry(geoJSON) {
     }
   });
 };
+var getFieldLabel = function getFieldLabel(title, isDisabled) {
+  var action = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'Select';
+  return isDisabled ? title : "".concat(action, " ").concat(title.toLowerCase());
+};
 
 var location_indicator_mwo$1 = "EHDB";
 var firareas$1 = {
@@ -1953,24 +1757,9 @@ var Levels = function Levels(_ref) {
   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.createElement(Grid, {
-    item: true,
-    container: true,
-    spacing: 2,
-    sx: styles$4.containerItem
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 4,
-    container: true,
-    justifyContent: "flex-end"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "subtitle1",
-    sx: styles$4.label
-  }, "Levels")), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 8,
-    container: true,
-    justifyContent: "flex-start"
+  return /*#__PURE__*/React__default.createElement(ProductFormFieldLayout, {
+    title: "Levels",
+    sx: styles$2.containerItem
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12
@@ -1982,6 +1771,7 @@ var Levels = function Levels(_ref) {
       }
     },
     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();
@@ -2001,7 +1791,7 @@ var Levels = function Levels(_ref) {
 
       clearErrors(['level', 'lowerLevel']);
     }
-  }, (!isReadOnly || watch('levelInfoMode') === 'AT' || watch('levelInfoMode') === 'TOPS') && /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
+  }, /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
     value: "AT",
     label: "At",
     checked: watch('levelInfoMode') === 'AT' || watch('levelInfoMode') === 'TOPS',
@@ -2010,11 +1800,15 @@ var Levels = function Levels(_ref) {
   }), watch('levelInfoMode') === 'AT' || watch('levelInfoMode') === 'TOPS' ? /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12,
-    container: true
+    container: true,
+    spacing: 2,
+    justifyItems: "flex-end",
+    alignItems: "flex-end"
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    xs: 3
-  }, (!isReadOnly || watch('levelInfoMode') === 'TOPS') && /*#__PURE__*/React__default.createElement(FormControlLabel, {
+    xs: 12,
+    md: 3
+  }, /*#__PURE__*/React__default.createElement(FormControlLabel, {
     control: /*#__PURE__*/React__default.createElement(Checkbox, {
       checked: watch('levelInfoMode') === 'TOPS',
       onChange: function onChange() {
@@ -2029,7 +1823,8 @@ var Levels = function Levels(_ref) {
     label: "Tops"
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    xs: 3
+    xs: 4,
+    md: 3
   }, /*#__PURE__*/React__default.createElement(ReactHookFormSelect, {
     name: "level.unit",
     label: "Unit",
@@ -2038,8 +1833,9 @@ var Levels = function Levels(_ref) {
         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) {
@@ -2055,7 +1851,8 @@ var Levels = function Levels(_ref) {
     }, allowedLevelUnitsForFir[key]);
   }))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    xs: 6
+    xs: 8,
+    md: 6
   }, /*#__PURE__*/React__default.createElement(ReactHookFormNumberField, {
     name: "level.value",
     "data-testid": "level.value",
@@ -2082,8 +1879,9 @@ var Levels = function Levels(_ref) {
       }
     },
     disabled: isDisabled,
+    isReadOnly: isReadOnly,
     autoFocus: true
-  }))) : null, (!isReadOnly || watch('levelInfoMode') === 'BETW' || watch('levelInfoMode') === 'BETW_SFC') && /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
+  }))) : null, /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
     value: "BETW",
     label: "Between",
     checked: watch('levelInfoMode') === 'BETW' || watch('levelInfoMode') === 'BETW_SFC',
@@ -2092,13 +1890,16 @@ var Levels = function Levels(_ref) {
   }), watch('levelInfoMode') === 'BETW' || watch('levelInfoMode') === 'BETW_SFC' ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12,
-    container: true
+    container: true,
+    spacing: 2
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    xs: 3
+    xs: 12,
+    md: 3
   }), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    xs: 3
+    xs: 4,
+    md: 3
   }, /*#__PURE__*/React__default.createElement(ReactHookFormSelect, {
     name: "level.unit",
     label: "Unit",
@@ -2112,8 +1913,9 @@ var Levels = function Levels(_ref) {
         }
       }
     },
-    sx: styles$4.unit,
+    sx: styles$2.unit,
     disabled: isDisabled,
+    isReadOnly: isReadOnly,
     defaultValue: 'FL',
     onChange: function onChange() {
       trigger([].concat(_toConsumableArray(getValues('level.value') || getValues('level.value') === 0 ? ['level.value'] : []), _toConsumableArray(getValues('lowerLevel.value') || getValues('lowerLevel.value') === 0 ? ['lowerLevel.value'] : []), ['lowerLevel.unit']));
@@ -2127,11 +1929,12 @@ var Levels = function Levels(_ref) {
     }, allowedLevelUnitsForFir[key]);
   }))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    xs: 6
+    xs: 8,
+    md: 6
   }, /*#__PURE__*/React__default.createElement(ReactHookFormNumberField, {
     name: "level.value",
     label: "Upper level",
-    sx: styles$4.levelField,
+    sx: styles$2.levelField,
     rules: {
       validate: {
         isRequired: isRequired,
@@ -2154,6 +1957,7 @@ var Levels = function Levels(_ref) {
       }
     },
     disabled: isDisabled,
+    isReadOnly: isReadOnly,
     onChange: function onChange() {
       return (getValues('lowerLevel.value') || getValues('lowerLevel.value') === 0) && trigger('lowerLevel.value');
     },
@@ -2161,11 +1965,15 @@ var Levels = function Levels(_ref) {
   }))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12,
-    container: true
+    container: true,
+    spacing: 2,
+    justifyItems: "flex-end",
+    alignItems: "flex-end"
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    xs: 3
-  }, (!isReadOnly || watch('levelInfoMode') === 'BETW_SFC') && /*#__PURE__*/React__default.createElement(FormControlLabel, {
+    xs: 12,
+    md: 3
+  }, /*#__PURE__*/React__default.createElement(FormControlLabel, {
     control: /*#__PURE__*/React__default.createElement(Checkbox, {
       checked: watch('levelInfoMode') === 'BETW_SFC',
       onChange: function onChange() {
@@ -2182,7 +1990,8 @@ var Levels = function Levels(_ref) {
     label: "SFC"
   })), watch('levelInfoMode') !== 'BETW_SFC' && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    xs: 3
+    xs: 4,
+    md: 3
   }, /*#__PURE__*/React__default.createElement(ReactHookFormSelect, {
     name: "lowerLevel.unit",
     label: "Unit",
@@ -2196,8 +2005,9 @@ var Levels = function Levels(_ref) {
         }
       }
     },
-    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) {
@@ -2215,7 +2025,8 @@ var Levels = function Levels(_ref) {
     }, allowedLevelUnitsForFir[key]);
   }))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    xs: 6
+    xs: 8,
+    md: 6
   }, /*#__PURE__*/React__default.createElement(ReactHookFormNumberField, {
     name: "lowerLevel.value",
     label: "Lower level",
@@ -2245,8 +2056,9 @@ var Levels = function Levels(_ref) {
         }
       }
     },
-    disabled: isDisabled
-  }))))) : null, (!isReadOnly || watch('levelInfoMode') === 'ABV' || watch('levelInfoMode') === 'TOPS_ABV') && /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
+    disabled: isDisabled,
+    isReadOnly: isReadOnly
+  }))))) : null, /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
     value: "ABV",
     label: "Above",
     disabled: isDisabled,
@@ -2255,11 +2067,15 @@ var Levels = function Levels(_ref) {
   }), watch('levelInfoMode') === 'ABV' || watch('levelInfoMode') === 'TOPS_ABV' ? /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12,
-    container: true
+    container: true,
+    spacing: 2,
+    justifyItems: "flex-end",
+    alignItems: "flex-end"
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    xs: 3
-  }, (!isReadOnly || watch('levelInfoMode') === 'TOPS_ABV') && /*#__PURE__*/React__default.createElement(FormControlLabel, {
+    xs: 12,
+    md: 3
+  }, /*#__PURE__*/React__default.createElement(FormControlLabel, {
     control: /*#__PURE__*/React__default.createElement(Checkbox, {
       checked: watch('levelInfoMode') === 'TOPS_ABV',
       onChange: function onChange() {
@@ -2273,7 +2089,8 @@ var Levels = function Levels(_ref) {
     "data-testid": "levels-TOPS_ABV"
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    xs: 3
+    xs: 4,
+    md: 3
   }, /*#__PURE__*/React__default.createElement(ReactHookFormSelect, {
     name: "level.unit",
     label: "Unit",
@@ -2282,8 +2099,9 @@ var Levels = function Levels(_ref) {
         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) {
@@ -2299,7 +2117,8 @@ var Levels = function Levels(_ref) {
     }, allowedLevelUnitsForFir[key]);
   }))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    xs: 6
+    xs: 8,
+    md: 6
   }, /*#__PURE__*/React__default.createElement(ReactHookFormNumberField, {
     name: "level.value",
     label: "Level",
@@ -2325,8 +2144,9 @@ var Levels = function Levels(_ref) {
       }
     },
     disabled: isDisabled,
+    isReadOnly: isReadOnly,
     autoFocus: true
-  }))) : null))));
+  }))) : null)));
 };
 
 /* *
@@ -2342,8 +2162,8 @@ var Levels = function Levels(_ref) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 
 var ObservationForecast = function ObservationForecast(_ref) {
@@ -2358,20 +2178,13 @@ var ObservationForecast = function ObservationForecast(_ref) {
   var _useDraftFormHelpers = useDraftFormHelpers(),
       isRequired = _useDraftFormHelpers.isRequired;
 
-  return /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    container: true,
-    spacing: 2
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 4,
-    container: true,
-    justifyContent: "flex-end"
-  }), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 8,
-    container: true,
-    justifyContent: "flex-start"
+  return /*#__PURE__*/React__default.createElement(ProductFormFieldLayout, {
+    sx: {
+      paddingTop: '8px!important',
+      '+ .MuiGrid-item': {
+        paddingTop: 5
+      }
+    }
   }, /*#__PURE__*/React__default.createElement(ReactHookFormRadioGroup, {
     name: "isObservationOrForecast",
     disabled: isDisabled,
@@ -2384,7 +2197,8 @@ var ObservationForecast = function ObservationForecast(_ref) {
       if (getValues('observationOrForecastTime')) {
         trigger('observationOrForecastTime');
       }
-    }
+    },
+    isReadOnly: isReadOnly
   }, (!isReadOnly || watch('isObservationOrForecast') === 'OBS') && /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
     value: "OBS",
     label: "Observed",
@@ -2395,7 +2209,7 @@ var ObservationForecast = function ObservationForecast(_ref) {
     label: "Forecast",
     disabled: isDisabled,
     "data-testid": "isObservationOrForecast-FCST"
-  }))));
+  })));
 };
 
 /* *
@@ -2411,8 +2225,8 @@ var ObservationForecast = function ObservationForecast(_ref) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 var ForecastTimeValidation = 'Forecast time should lie between the valid start and valid end time';
 
@@ -2428,27 +2242,14 @@ var ObservationForecastTime = function ObservationForecastTime(_ref) {
   var _useFormContext = useFormContext(),
       watch = _useFormContext.watch;
 
-  return (!isReadOnly || watch('observationOrForecastTime') !== null) && /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    container: true,
-    spacing: 2
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 4,
-    container: true,
-    justifyContent: "flex-end"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "subtitle1",
-    sx: styles$4.label
-  }, "At")), /*#__PURE__*/React__default.createElement(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.createElement(ProductFormFieldLayout, {
+    title: "At"
   }, /*#__PURE__*/React__default.createElement(ReactHookFormDateTime, {
     disablePast: watch('isObservationOrForecast') === 'FCST',
     disableFuture: watch('isObservationOrForecast') === 'OBS',
     name: "observationOrForecastTime",
+    label: label,
     rules: {
       validate: {
         isValidDate: isValidDate,
@@ -2461,14 +2262,17 @@ var ObservationForecastTime = function ObservationForecastTime(_ref) {
       }
     },
     disabled: isDisabled,
+    isReadOnly: isReadOnly,
     helperText: helperText,
-    onChange: onChange
-  })));
+    onChange: onChange,
+    sx: styles$2.helperText
+  }));
 };
 
 var Phenomenon = function Phenomenon(_ref) {
   var productType = _ref.productType,
       isDisabled = _ref.isDisabled,
+      isReadOnly = _ref.isReadOnly,
       _ref$onChange = _ref.onChange,
       _onChange = _ref$onChange === void 0 ? function () {
     return null;
@@ -2480,30 +2284,17 @@ var Phenomenon = function Phenomenon(_ref) {
       trigger = _useFormContext.trigger;
 
   var phenomenaList = productType === 'sigmet' ? SigmetPhenomena : AirmetPhenomena;
-  return /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    container: true,
-    spacing: 2
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 4,
-    container: true,
-    justifyContent: "flex-end"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "subtitle1",
-    sx: styles$4.label
-  }, "What")), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 8,
-    container: true,
-    justifyContent: "flex-start"
+  var label = getFieldLabel('Phenomenon', isReadOnly);
+  return /*#__PURE__*/React__default.createElement(ProductFormFieldLayout, {
+    title: "What"
   }, /*#__PURE__*/React__default.createElement(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') {
@@ -2531,7 +2322,7 @@ var Phenomenon = function Phenomenon(_ref) {
       value: key,
       key: key
     }, phenomenaList[key]);
-  }))));
+  })));
 };
 
 /* *
@@ -2547,8 +2338,8 @@ var Phenomenon = function Phenomenon(_ref) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 var 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';
@@ -2559,33 +2350,20 @@ var multiIntersectionsMessage = 'The drawn polygon has multiple intersections wi
 var StartGeometry = function StartGeometry(_ref) {
   var _ref$isReadOnly = _ref.isReadOnly,
       isReadOnly = _ref$isReadOnly === void 0 ? false : _ref$isReadOnly,
-      drawMode = _ref.drawMode,
-      geoJSONs = _ref.geoJSONs,
-      setDrawModeType = _ref.setDrawModeType;
-
-  var _useFormContext = useFormContext(),
-      errors = _useFormContext.errors,
-      watch = _useFormContext.watch;
-
-  var _useDraftFormHelpers = useDraftFormHelpers(),
-      isDraft = _useDraftFormHelpers.isDraft;
-
-  return !isReadOnly && /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    container: true,
-    spacing: 2,
-    sx: styles$4.drawSection
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 4,
-    container: true,
-    justifyContent: "flex-end"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "subtitle1",
-    sx: styles$4.label
-  }, "Start position")), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 8,
+      drawMode = _ref.drawMode,
+      geoJSONs = _ref.geoJSONs,
+      setDrawModeType = _ref.setDrawModeType;
+
+  var _useFormContext = useFormContext(),
+      errors = _useFormContext.errors,
+      watch = _useFormContext.watch;
+
+  var _useDraftFormHelpers = useDraftFormHelpers(),
+      isDraft = _useDraftFormHelpers.isDraft;
+
+  return !isReadOnly && /*#__PURE__*/React__default.createElement(ProductFormFieldLayout, {
+    title: "Start position",
+    sx: styles$2.drawSection,
     "data-testid": "startGeometry"
   }, /*#__PURE__*/React__default.createElement(DrawTools, {
     type: StartOrEndDrawing.start,
@@ -2595,7 +2373,7 @@ var StartGeometry = function StartGeometry(_ref) {
     }
   }), drawMode[StartOrEndDrawing.start] && /*#__PURE__*/React__default.createElement(FormHelperText, {
     variant: "filled",
-    sx: styles$4.quitDrawModeMessage
+    sx: styles$2.quitDrawModeMessage
   }, exitDrawModeMessage), !!errors.startGeometry && /*#__PURE__*/React__default.createElement(FormHelperText, {
     error: true,
     variant: "filled"
@@ -2625,7 +2403,7 @@ var StartGeometry = function StartGeometry(_ref) {
     }
   }), /*#__PURE__*/React__default.createElement(ReactHookFormHiddenInput, {
     name: "startGeometryIntersect"
-  })));
+  }));
 };
 
 /* *
@@ -2641,8 +2419,8 @@ var StartGeometry = function StartGeometry(_ref) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 var movementStepValMessageKT = 'Speed should be rounded to the nearest 5kt';
 var movementStepValMessageKMH = 'Speed should be rounded to the nearest 10kmh';
@@ -2722,24 +2500,9 @@ var Progress = function Progress(_ref) {
   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.createElement(Grid, {
-    item: true,
-    container: true,
-    spacing: 2,
-    sx: styles$4.containerItem
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 4,
-    container: true,
-    justifyContent: "flex-end"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "subtitle1",
-    sx: styles$4.label
-  }, "Progress")), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 8,
-    container: true,
-    justifyContent: "flex-start"
+  return /*#__PURE__*/React__default.createElement(ProductFormFieldLayout, {
+    title: "Progress",
+    sx: styles$2.containerItem
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12
@@ -2753,18 +2516,19 @@ var Progress = function Progress(_ref) {
     },
     onChange: function onChange() {
       return setDrawModeType ? setDrawModeType(MapDrawMode.DELETE, StartOrEndDrawing.end) : null;
-    }
-  }, watch('phenomenon') === 'VA_CLD' && (!isReadOnly || movementType === 'NO_VA_EXP') && /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
+    },
+    isReadOnly: isReadOnly
+  }, watch('phenomenon') === 'VA_CLD' && /*#__PURE__*/React__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.createElement(RadioButtonAndLabel, {
+  }), /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
     value: "STATIONARY",
     label: "Stationary",
     disabled: isDisabled,
     "data-testid": "movementType-STATIONARY"
-  }), (!isReadOnly || movementType === 'MOVEMENT') && /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
+  }), /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
     value: "MOVEMENT",
     label: "Movement",
     disabled: isDisabled,
@@ -2778,8 +2542,9 @@ var Progress = function Progress(_ref) {
     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();
@@ -2805,8 +2570,9 @@ var Progress = function Progress(_ref) {
     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) {
@@ -2851,11 +2617,12 @@ var Progress = function Progress(_ref) {
       }
     },
     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.createElement(RadioButtonAndLabel, {
+  })))), productType === 'sigmet' && /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
     value: "FORECAST_POSITION",
     label: "End position",
     disabled: isDisabled,
@@ -2864,7 +2631,7 @@ var Progress = function Progress(_ref) {
     item: true,
     xs: 12,
     "data-testid": "endGeometry",
-    sx: styles$4.drawSection
+    sx: styles$2.drawSection
   }, !isReadOnly && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DrawTools, {
     "data-testid": "endGeometry-drawTools",
     type: StartOrEndDrawing.end,
@@ -2874,7 +2641,7 @@ var Progress = function Progress(_ref) {
     }
   }), drawMode[StartOrEndDrawing.end] && /*#__PURE__*/React__default.createElement(FormHelperText, {
     variant: "filled",
-    sx: styles$4.quitDrawModeMessage
+    sx: styles$2.quitDrawModeMessage
   }, exitDrawModeMessage), !!errors.endGeometry && /*#__PURE__*/React__default.createElement(FormHelperText, {
     error: true,
     variant: "filled"
@@ -2904,7 +2671,7 @@ var Progress = function Progress(_ref) {
     }
   }), /*#__PURE__*/React__default.createElement(ReactHookFormHiddenInput, {
     name: "endGeometryIntersect"
-  })))));
+  }))));
 };
 
 /* *
@@ -2920,13 +2687,14 @@ var Progress = function Progress(_ref) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 
 var SelectFIR = function SelectFIR(_ref) {
   var productType = _ref.productType,
-      isDisabled = _ref.isDisabled;
+      isDisabled = _ref.isDisabled,
+      isReadOnly = _ref.isReadOnly;
 
   var _useFormContext = useFormContext(),
       setValue = _useFormContext.setValue;
@@ -2941,33 +2709,19 @@ var SelectFIR = function SelectFIR(_ref) {
       optionsFIR = _useProductSettings.optionsFIR,
       allFIRS = _useProductSettings.allFIRS;
 
-  return /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    container: true,
-    spacing: 2,
-    sx: styles$4.containerItem
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 4,
-    container: true,
-    justifyContent: "flex-end"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "subtitle1",
-    sx: styles$4.label
-  }, "Where")), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 8,
-    container: true,
-    justifyContent: "flex-start"
+  return /*#__PURE__*/React__default.createElement(ProductFormFieldLayout, {
+    title: "Where",
+    sx: styles$2.containerItem
   }, /*#__PURE__*/React__default.createElement(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);
@@ -2990,7 +2744,7 @@ var SelectFIR = function SelectFIR(_ref) {
   }), /*#__PURE__*/React__default.createElement(ReactHookFormHiddenInput, {
     name: "firGeometry",
     defaultValue: getFir()
-  })));
+  }));
 };
 
 /* *
@@ -3006,38 +2760,20 @@ var SelectFIR = function SelectFIR(_ref) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 
 var Type = function Type(_ref) {
   var isReadOnly = _ref.isReadOnly,
       isDisabled = _ref.isDisabled;
 
-  var _useFormContext = useFormContext(),
-      watch = _useFormContext.watch;
-
   var _useDraftFormHelpers = useDraftFormHelpers(),
       isRequired = _useDraftFormHelpers.isRequired;
 
-  return /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    container: true,
-    spacing: 2,
-    sx: styles$4.containerItem
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 4,
-    container: true,
-    justifyContent: "flex-end"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "subtitle1",
-    sx: styles$4.label
-  }, "Type")), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 8,
-    container: true,
-    justifyContent: "flex-start"
+  return /*#__PURE__*/React__default.createElement(ProductFormFieldLayout, {
+    title: "Type",
+    sx: styles$2.containerItem
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12
@@ -3049,23 +2785,24 @@ var Type = function Type(_ref) {
       }
     },
     disabled: isDisabled,
+    isReadOnly: isReadOnly,
     defaultValue: "NORMAL"
-  }, (!isReadOnly || watch('type') === 'NORMAL') && /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
+  }, /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
     value: "NORMAL",
     label: "Normal",
     disabled: isDisabled,
     "data-testid": "type-NORMAL"
-  }), (!isReadOnly || watch('type') === 'TEST') && /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
+  }), /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
     value: "TEST",
     label: "Test",
     disabled: isDisabled,
     "data-testid": "type-TEST"
-  }), (!isReadOnly || watch('type') === 'EXERCISE') && /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
+  }), /*#__PURE__*/React__default.createElement(RadioButtonAndLabel, {
     value: "EXERCISE",
     label: "Exercise",
     disabled: isDisabled,
     "data-testid": "type-EXERCISE"
-  })))));
+  }))));
 };
 
 /* *
@@ -3081,14 +2818,19 @@ var Type = function Type(_ref) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 var 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 ".concat(hours, " hours after current time");
+};
 
 var ValidFrom = function ValidFrom(_ref) {
   var productType = _ref.productType,
       isDisabled = _ref.isDisabled,
+      isReadOnly = _ref.isReadOnly,
       _ref$onChange = _ref.onChange,
       _onChange = _ref$onChange === void 0 ? function () {
     return null;
@@ -3102,26 +2844,13 @@ var ValidFrom = function ValidFrom(_ref) {
       isRequired = _useDraftFormHelpers.isRequired;
 
   var config = productType === 'sigmet' ? sigmetConfig : airmetConfig;
-  return /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    container: true,
-    spacing: 2
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 4,
-    container: true,
-    justifyContent: "flex-end"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "subtitle1",
-    sx: styles$4.label
-  }, "Valid from")), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 8,
-    container: true,
-    justifyContent: "flex-start"
+  var label = getFieldLabel('Date and time', isReadOnly);
+  return /*#__PURE__*/React__default.createElement(ProductFormFieldLayout, {
+    title: "Valid from"
   }, /*#__PURE__*/React__default.createElement(ReactHookFormDateTime, {
     disablePast: true,
     name: "validDateStart",
+    label: label,
     defaultNullValue: moment.utc().add(VALID_FROM_TIME_DELAY_IN_MINUTES, 'minutes').format('YYYY-MM-DDTHH:mm:ss[Z]'),
     rules: {
       validate: {
@@ -3129,11 +2858,11 @@ var ValidFrom = function ValidFrom(_ref) {
         isValidDate: isValidDate,
         // The validity start can not be before the current time
         isValueBeforeCurrentTime: function isValueBeforeCurrentTime(value) {
-          return isXHoursBefore(value, moment.utc().format(), 0) || 'Valid from time cannot be before current time';
+          return isXHoursBefore(value, moment.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 isXHoursBefore(moment.utc().format(), value, getHoursBeforeValidity(getValues('phenomenon'), getValues('locationIndicatorATSR'), config)) || "Valid from time can be no more than ".concat(getHoursBeforeValidity(getValues('phenomenon'), getValues('locationIndicatorATSR'), config), " hours after current time");
+          return isXHoursBefore(moment.utc().format(), value, getHoursBeforeValidity(getValues('phenomenon'), getValues('locationIndicatorATSR'), config)) || getValidFromXHoursBeforeMessage(getHoursBeforeValidity(getValues('phenomenon'), getValues('locationIndicatorATSR'), config));
         }
       }
     },
@@ -3149,10 +2878,8 @@ var ValidFrom = function ValidFrom(_ref) {
       _onChange();
     },
     disabled: isDisabled,
+    isReadOnly: isReadOnly,
     "data-testid": "valid-from"
-  })), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 6
   }));
 };
 
@@ -3169,8 +2896,8 @@ var ValidFrom = function ValidFrom(_ref) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 var DEFAULT_VALID_TIME_SIGMET = 3;
 var DEFAULT_VALID_TIME_AIRMET = 1;
@@ -3181,6 +2908,7 @@ var getDefaultHoursValid = function getDefaultHoursValid(productType) {
 var ValidUntil = function ValidUntil(_ref) {
   var productType = _ref.productType,
       isDisabled = _ref.isDisabled,
+      isReadOnly = _ref.isReadOnly,
       _ref$onChange = _ref.onChange,
       _onChange = _ref$onChange === void 0 ? function () {
     return null;
@@ -3193,28 +2921,15 @@ var ValidUntil = function ValidUntil(_ref) {
   var _useDraftFormHelpers = useDraftFormHelpers(),
       isRequired = _useDraftFormHelpers.isRequired;
 
+  var label = getFieldLabel('Date and time', isReadOnly);
   var config = productType === 'sigmet' ? sigmetConfig : airmetConfig;
   var defaultHoursValid = getDefaultHoursValid(productType);
-  return /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    container: true,
-    spacing: 2
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 4,
-    container: true,
-    justifyContent: "flex-end"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "subtitle1",
-    sx: styles$4.label
-  }, "Valid until")), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 8,
-    container: true,
-    justifyContent: "flex-start"
+  return /*#__PURE__*/React__default.createElement(ProductFormFieldLayout, {
+    title: "Valid until"
   }, /*#__PURE__*/React__default.createElement(ReactHookFormDateTime, {
     disablePast: true,
     name: "validDateEnd",
+    label: label,
     defaultNullValue: moment.utc().add(defaultHoursValid, 'hour').add(VALID_FROM_TIME_DELAY_IN_MINUTES, 'minutes').format('YYYY-MM-DDTHH:mm:ss[Z]'),
     rules: {
       validate: {
@@ -3231,6 +2946,7 @@ var ValidUntil = function ValidUntil(_ref) {
       }
     },
     disabled: isDisabled,
+    isReadOnly: isReadOnly,
     onChange: function onChange() {
       if (getValues('validDateStart')) {
         trigger('validDateStart');
@@ -3242,9 +2958,6 @@ var ValidUntil = function ValidUntil(_ref) {
 
       _onChange();
     }
-  })), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 6
   }));
 };
 
@@ -3292,7 +3005,7 @@ var VolcanicFields = function VolcanicFields(_ref) {
   }, (!isReadOnly || !!watch('vaSigmetVolcanoName')) && /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12,
-    sx: styles$4.volcanicField
+    sx: styles$2.volcanicField
   }, /*#__PURE__*/React__default.createElement(ReactHookFormTextField, {
     name: "vaSigmetVolcanoName",
     label: "Volcano name",
@@ -3301,7 +3014,8 @@ var VolcanicFields = function VolcanicFields(_ref) {
     },
     disabled: isDisabled,
     helperText: helperText,
-    upperCase: true
+    upperCase: true,
+    isReadOnly: isReadOnly
   })), (!isReadOnly || !!watch('vaSigmetVolcanoCoordinates.latitude')) && /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 6
@@ -3320,12 +3034,13 @@ var VolcanicFields = function VolcanicFields(_ref) {
         }
       }
     },
-    sx: styles$4.latitude,
+    sx: Object.assign(Object.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.createElement(Grid, {
     item: true,
     xs: 6
@@ -3348,7 +3063,9 @@ var VolcanicFields = function VolcanicFields(_ref) {
     helperText: helperText,
     onChange: function onChange() {
       return trigger('vaSigmetVolcanoCoordinates.latitude');
-    }
+    },
+    sx: styles$2.helperText,
+    isReadOnly: isReadOnly
   }))));
 };
 
@@ -3384,6 +3101,7 @@ var validateSurfaceVisibility = function validateSurfaceVisibility(value) {
 
 var SurfaceVisibility = function SurfaceVisibility(_ref) {
   var isDisabled = _ref.isDisabled,
+      isReadOnly = _ref.isReadOnly,
       _ref$onChange = _ref.onChange,
       _onChange = _ref$onChange === void 0 ? function () {
     return null;
@@ -3392,6 +3110,8 @@ var SurfaceVisibility = function SurfaceVisibility(_ref) {
   var _useDraftFormHelpers = useDraftFormHelpers(),
       isRequired = _useDraftFormHelpers.isRequired;
 
+  var visibilityLabel = getFieldLabel('Visibility', isReadOnly);
+  var visibilityCauseLabel = getFieldLabel('Cause', isReadOnly);
   return /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     container: true,
@@ -3409,11 +3129,11 @@ var SurfaceVisibility = function SurfaceVisibility(_ref) {
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12,
-    sx: styles$4.surfaceVisibility
+    sx: styles$2.surfaceVisibility
   }, /*#__PURE__*/React__default.createElement(ReactHookFormNumberField, {
     name: "visibilityValue",
     "data-testid": "surfaceVisibility-visibilityValue",
-    label: "Select visibility",
+    label: visibilityLabel,
     helperText: "Value in meters",
     rules: {
       min: {
@@ -3429,19 +3149,21 @@ var SurfaceVisibility = function SurfaceVisibility(_ref) {
         validateSurfaceVisibility: validateSurfaceVisibility
       }
     },
-    disabled: isDisabled
+    disabled: isDisabled,
+    isReadOnly: isReadOnly
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12
   }, /*#__PURE__*/React__default.createElement(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();
@@ -3482,6 +3204,7 @@ var validateSurfaceWindDirection = function validateSurfaceWindDirection(value)
 
 var SurfaceWind = function SurfaceWind(_ref) {
   var isDisabled = _ref.isDisabled,
+      isReadOnly = _ref.isReadOnly,
       _ref$onChange = _ref.onChange,
       _onChange = _ref$onChange === void 0 ? function () {
     return null;
@@ -3501,6 +3224,8 @@ var SurfaceWind = function SurfaceWind(_ref) {
   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.createElement(Grid, {
     item: true,
     container: true,
@@ -3518,10 +3243,10 @@ var SurfaceWind = function SurfaceWind(_ref) {
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12,
-    sx: styles$4.surfaceWind
+    sx: styles$2.surfaceWind
   }, /*#__PURE__*/React__default.createElement(ReactHookFormNumberField, {
     name: "windDirection",
-    label: "Set wind direction",
+    label: windLabel,
     helperText: "Value in degrees",
     rules: {
       min: {
@@ -3538,6 +3263,7 @@ var SurfaceWind = function SurfaceWind(_ref) {
       }
     },
     disabled: isDisabled,
+    isReadOnly: isReadOnly,
     "data-testid": "surfaceWind-windDirection"
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
@@ -3554,8 +3280,9 @@ var SurfaceWind = function SurfaceWind(_ref) {
         isRequired: isRequired
       }
     },
-    sx: styles$4.unit,
+    sx: styles$2.unit,
     disabled: isDisabled,
+    isReadOnly: isReadOnly,
     defaultValue: 'KT',
     "data-testid": "surfaceWind-windUnit",
     onChange: function onChange() {
@@ -3575,7 +3302,7 @@ var SurfaceWind = function SurfaceWind(_ref) {
     xs: 7
   }, /*#__PURE__*/React__default.createElement(ReactHookFormNumberField, {
     name: "windSpeed",
-    label: "Set speed",
+    label: speedLabel,
     rules: {
       validate: {
         isRequired: isRequired,
@@ -3593,6 +3320,7 @@ var SurfaceWind = function SurfaceWind(_ref) {
       }
     },
     disabled: isDisabled,
+    isReadOnly: isReadOnly,
     "data-testid": "surfaceWind-windSpeed"
   })))));
 };
@@ -3662,7 +3390,7 @@ var CloudLevels = function CloudLevels(_ref) {
     item: true,
     container: true,
     spacing: 2,
-    sx: styles$4.containerItem
+    sx: styles$2.containerItem
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 4,
@@ -3670,7 +3398,7 @@ var CloudLevels = function CloudLevels(_ref) {
     justifyContent: "flex-end"
   }, /*#__PURE__*/React__default.createElement(Typography, {
     variant: "subtitle1",
-    sx: styles$4.label
+    sx: styles$2.label
   }, "Levels")), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 8,
@@ -3689,7 +3417,10 @@ var CloudLevels = function CloudLevels(_ref) {
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 4
-  }, (!isReadOnly || watch('cloudLevelInfoMode') === 'BETW_ABV' || watch('cloudLevelInfoMode') === 'BETW_SFC_ABV') && /*#__PURE__*/React__default.createElement(FormControlLabel, {
+  }, (!isReadOnly || watch('cloudLevelInfoMode') === 'BETW_ABV' || watch('cloudLevelInfoMode') === 'BETW_SFC_ABV') && /*#__PURE__*/React__default.createElement(ReactHookFormFormControl, {
+    disabled: isDisabled,
+    isReadOnly: isReadOnly
+  }, /*#__PURE__*/React__default.createElement(FormControlLabel, {
     control: /*#__PURE__*/React__default.createElement(Checkbox, {
       checked: watch('cloudLevelInfoMode') === 'BETW_ABV' || watch('cloudLevelInfoMode') === 'BETW_SFC_ABV',
       onChange: function onChange() {
@@ -3725,7 +3456,7 @@ var CloudLevels = function CloudLevels(_ref) {
     }),
     "data-testid": "cloudLevels-Above",
     label: "Above"
-  })), /*#__PURE__*/React__default.createElement(Grid, {
+  }))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 3
   }, /*#__PURE__*/React__default.createElement(ReactHookFormSelect, {
@@ -3737,8 +3468,9 @@ var CloudLevels = function CloudLevels(_ref) {
         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) {
@@ -3766,7 +3498,7 @@ var CloudLevels = function CloudLevels(_ref) {
     name: "cloudLevel.value",
     label: "Upper level",
     "data-testid": "cloudLevel-value",
-    sx: styles$4.levelField,
+    sx: styles$2.levelField,
     rules: {
       validate: {
         isRequired: isRequired,
@@ -3787,6 +3519,7 @@ var CloudLevels = function CloudLevels(_ref) {
       }
     },
     disabled: isDisabled,
+    isReadOnly: isReadOnly,
     onChange: function onChange() {
       return (getValues('cloudLowerLevel.value') || getValues('cloudLowerLevel.value') === 0) && trigger('cloudLowerLevel.value');
     }
@@ -3797,7 +3530,10 @@ var CloudLevels = function CloudLevels(_ref) {
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 4
-  }, (!isReadOnly || watch('cloudLevelInfoMode') === 'BETW_SFC' || watch('cloudLevelInfoMode') === 'BETW_SFC_ABV') && /*#__PURE__*/React__default.createElement(FormControlLabel, {
+  }, (!isReadOnly || watch('cloudLevelInfoMode') === 'BETW_SFC' || watch('cloudLevelInfoMode') === 'BETW_SFC_ABV') && /*#__PURE__*/React__default.createElement(ReactHookFormFormControl, {
+    disabled: isDisabled,
+    isReadOnly: isReadOnly
+  }, /*#__PURE__*/React__default.createElement(FormControlLabel, {
     control: /*#__PURE__*/React__default.createElement(Checkbox, {
       checked: watch('cloudLevelInfoMode') === 'BETW_SFC' || watch('cloudLevelInfoMode') === 'BETW_SFC_ABV',
       onChange: function onChange() {
@@ -3833,7 +3569,7 @@ var CloudLevels = function CloudLevels(_ref) {
     }),
     "data-testid": "cloudLevels-SFC",
     label: "SFC"
-  })), watch('cloudLevelInfoMode') !== 'BETW_SFC' && watch('cloudLevelInfoMode') !== 'BETW_SFC_ABV' && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Grid, {
+  }))), watch('cloudLevelInfoMode') !== 'BETW_SFC' && watch('cloudLevelInfoMode') !== 'BETW_SFC_ABV' && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 3
   }, /*#__PURE__*/React__default.createElement(ReactHookFormSelect, {
@@ -3845,8 +3581,9 @@ var CloudLevels = function CloudLevels(_ref) {
         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) {
@@ -3898,26 +3635,11 @@ var CloudLevels = function CloudLevels(_ref) {
         }
       }
     },
-    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) {
@@ -3930,91 +3652,454 @@ var shouldRetrieveTAC = function shouldRetrieveTAC(product) {
     return true;
   }
 
-  return false;
+  return false;
+};
+var useTAC = function useTAC(initialProduct, getTAC) {
+  var _React$useState = React__default.useState(noTAC),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      TAC = _React$useState2[0],
+      setTAC = _React$useState2[1];
+
+  var _useIsMounted = useIsMounted(),
+      isMounted = _useIsMounted.isMounted;
+
+  var retrieveTAC = function retrieveTAC(product) {
+    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var result;
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              _context.next = 3;
+              return getTAC(product);
+
+            case 3:
+              result = _context.sent;
+
+              if (isMounted.current) {
+                setTAC(result.data);
+              }
+
+              _context.next = 10;
+              break;
+
+            case 7:
+              _context.prev = 7;
+              _context.t0 = _context["catch"](0);
+
+              if (isMounted.current) {
+                setTAC(noTAC);
+              }
+
+            case 10:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 7]]);
+    }));
+  };
+
+  React__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.useCallback(debounce(update, 1000), []);
+  return [TAC, delayedQuery];
+};
+
+var ProductFormTAC = function ProductFormTAC(_ref) {
+  var tac = _ref.tac;
+  var tacLines = tac.split('\n');
+  var hasTac = tacLines.length && tacLines.toString() !== noTAC;
+  return /*#__PURE__*/React__default.createElement(Typography, {
+    variant: "body2",
+    component: "div",
+    sx: {
+      paddingTop: '16px',
+      whiteSpace: 'break-spaces'
+    },
+    "data-testid": "productform-tac-message"
+  }, tacLines.map(function (line) {
+    return /*#__PURE__*/React__default.createElement(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);
+  }));
+};
+
+/* *
+ * 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 IssuedAt = function IssuedAt(_ref) {
+  var date = _ref.date,
+      isReadOnly = _ref.isReadOnly;
+  return /*#__PURE__*/React__default.createElement(ProductFormFieldLayout, {
+    title: "Issued at"
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: 12
+  }, /*#__PURE__*/React__default.createElement(Typography, {
+    variant: "body2",
+    sx: Object.assign(Object.assign({}, styles$2.body), {
+      fontSize: '1rem',
+      color: isReadOnly ? 'geowebColors.typographyAndIcons.text' : 'geowebColors.buttons.primary.disabled.color'
+    })
+  }, date)));
 };
-var useTAC = function useTAC(initialProduct, getTAC) {
-  var _React$useState = React__default.useState(noTAC),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      TAC = _React$useState2[0],
-      setTAC = _React$useState2[1];
 
-  var _useIsMounted = useIsMounted(),
-      isMounted = _useIsMounted.isMounted;
+/* *
+ * 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 retrieveTAC = function retrieveTAC(product) {
-    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-      var result;
-      return regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              _context.prev = 0;
-              _context.next = 3;
-              return getTAC(product);
+var Tac = function Tac(_ref) {
+  var tac = _ref.tac,
+      children = _ref.children;
+  return /*#__PURE__*/React__default.createElement(ProductFormFieldLayout, {
+    title: "TAC",
+    sx: {
+      paddingTop: 2
+    }
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: 12
+  }, /*#__PURE__*/React__default.createElement(ProductFormTAC, {
+    tac: tac
+  }), children));
+};
 
-            case 3:
-              result = _context.sent;
+/* *
+ * 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: "".concat(adagucBaseUrl, "?dataset=OVL"),
+  id: 'knmigeoweboverlays'
+};
+var northSeaPlatforms = {
+  service: KNMIGeoWebOverlays.url,
+  name: 'northseastations',
+  format: 'image/png',
+  layerType: mapTypes.LayerType.overLayer,
+  enabled: true
+};
+var majorAirportsEHAA = {
+  service: KNMIGeoWebOverlays.url,
+  name: 'airports',
+  format: 'image/png',
+  layerType: mapTypes.LayerType.overLayer,
+  enabled: true
+};
 
-              if (isMounted.current) {
-                setTAC(result.data);
-              }
+/* *
+ * 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 allowOneGeoJSONFeature = function allowOneGeoJSONFeature(mode, geojson) {
+  switch (mode) {
+    case MapDrawMode.BOX:
+    case MapDrawMode.POLYGON:
+      return geojson.features[0].geometry.coordinates.length > 1 ? produce(geojson, function (draft) {
+        draft.features[0].geometry.coordinates = [draft.features[0].geometry.coordinates[1]];
+      }) : geojson;
 
-              _context.next = 10;
-              break;
+    default:
+      return geojson;
+  }
+};
 
-            case 7:
-              _context.prev = 7;
-              _context.t0 = _context["catch"](0);
+var MapViewGeoJson = function MapViewGeoJson(_ref) {
+  var geoJSONs = _ref.geoJSONs,
+      _ref$setLayerGeoJSONs = _ref.setLayerGeoJSONs,
+      setLayerGeoJSONs = _ref$setLayerGeoJSONs === void 0 ? function () {} : _ref$setLayerGeoJSONs,
+      _ref$layerDrawModes = _ref.layerDrawModes,
+      layerDrawModes = _ref$layerDrawModes === void 0 ? {
+    start: null,
+    end: null
+  } : _ref$layerDrawModes,
+      _ref$drawMode = _ref.drawMode,
+      drawMode = _ref$drawMode === void 0 ? {
+    start: null,
+    end: null
+  } : _ref$drawMode,
+      _ref$setDrawMode = _ref.setDrawMode,
+      setDrawMode = _ref$setDrawMode === void 0 ? function () {} : _ref$setDrawMode,
+      _ref$exitDrawModeCall = _ref.exitDrawModeCallbackStart,
+      exitDrawModeCallbackStart = _ref$exitDrawModeCall === void 0 ? function () {} : _ref$exitDrawModeCall,
+      _ref$exitDrawModeCall2 = _ref.exitDrawModeCallbackEnd,
+      exitDrawModeCallbackEnd = _ref$exitDrawModeCall2 === void 0 ? function () {} : _ref$exitDrawModeCall2;
+  var dispatch = useDispatch();
+  var firstMap = useSelector(function (store) {
+    return mapSelectors.getFirstMap(store);
+  }, shallowEqual);
+  var firstMapId = firstMap && firstMap.id ? firstMap.id : null;
+  var mapLayers = useSelector(function (store) {
+    return mapSelectors.getMapLayers(store, firstMapId);
+  }, shallowEqual);
+  var mapDimensions = useSelector(function (store) {
+    return mapSelectors.getMapDimensions(store, firstMapId);
+  }, shallowEqual);
+  var mapId = React.useRef("sigmet-".concat(generateMapId())).current;
+  var timesliderId = React.useRef("sigmet-".concat(generateTimesliderId())).current;
+  var syncGroupAddGroup = React.useCallback(function (payload) {
+    dispatch(SyncGroups.actions.syncGroupAddGroup(payload));
+  }, [dispatch]);
+  var syncGroupAddTarget = React.useCallback(function (payload) {
+    dispatch(SyncGroups.actions.syncGroupAddTarget(payload));
+  }, [dispatch]);
+  React.useEffect(function () {
+    if (mapLayers && mapLayers.length) {
+      // use maplayers, but change layerId and current mapId
+      var layers = mapLayers.map(function (layer) {
+        return Object.assign(Object.assign({}, layer), {
+          id: generateLayerId(),
+          mapId: mapId
+        });
+      });
+      dispatch(mapActions.setLayers({
+        mapId: mapId,
+        layers: layers
+      }));
+    }
 
-              if (isMounted.current) {
-                setTAC(noTAC);
-              }
+    if (mapDimensions && mapDimensions.length) {
+      dispatch(mapActions.mapChangeDimension({
+        mapId: mapId,
+        dimension: mapDimensions[0],
+        origin: 'MapViewGeoJson'
+      }));
+    }
 
-            case 10:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee, null, [[0, 7]]);
+    dispatch(mapActions.setBaseLayers({
+      mapId: mapId,
+      layers: [Object.assign(Object.assign({}, publicLayers.baseLayerGrey), {
+        id: "baselayer-".concat(mapId)
+      }), Object.assign(Object.assign({}, publicLayers.overLayer), {
+        id: "countryborders-".concat(mapId)
+      }), Object.assign(Object.assign({}, northSeaPlatforms), {
+        id: "northseaplatforms-".concat(mapId)
+      }), Object.assign(Object.assign({}, majorAirportsEHAA), {
+        id: "majorairportsehaa-".concat(mapId)
+      })]
     }));
-  };
-
-  React__default.useEffect(function () {
-    if (shouldRetrieveTAC(initialProduct)) {
-      retrieveTAC(initialProduct);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    dispatch(mapActions.setBbox({
+      mapId: mapId,
+      bbox: srsAndBboxDefault.bbox,
+      srs: srsAndBboxDefault.srs
+    }));
+    syncGroupAddGroup({
+      groupId: 'Time_SigmetAirmet',
+      title: 'Group 1 for sigmet/airmet map',
+      type: 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
   }, []);
-
-  var update = function update(formValues) {
-    if (shouldRetrieveTAC(formValues)) {
-      retrieveTAC(formValues);
-    } else if (isMounted.current) {
-      setTAC(noTAC);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'relative',
+      height: '100%'
+    },
+    "data-testid": "MapView"
+  }, /*#__PURE__*/React.createElement(MapControls, null, /*#__PURE__*/React.createElement(LayerManagerMapButtonConnect, {
+    source: "module",
+    mapId: mapId
+  }), /*#__PURE__*/React.createElement(LegendMapButtonConnect, {
+    source: "module",
+    mapId: mapId
+  }), /*#__PURE__*/React.createElement(MultiDimensionSelectMapButtonsConnect, {
+    source: "module",
+    mapId: mapId
+  })), /*#__PURE__*/React.createElement(MapViewConnect, {
+    mapId: mapId
+  }, /*#__PURE__*/React.createElement(MapViewLayer, {
+    id: "geojsonlayer-fir-".concat(mapId),
+    isInEditMode: false,
+    geojson: geoJSONs.fir
+  }), /*#__PURE__*/React.createElement(MapViewLayer, {
+    id: "geojsonlayer-end-".concat(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(Object.assign(Object.assign({}, geoJSONs), {
+        end: end
+      }));
+    },
+    exitDrawModeCallback: function exitDrawModeCallback() {
+      setDrawMode({
+        start: null,
+        end: null
+      });
+      exitDrawModeCallbackEnd();
+    },
+    featureNrToEdit: 0
+  }), /*#__PURE__*/React.createElement(MapViewLayer, {
+    id: "geojsonlayer-start-".concat(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(Object.assign(Object.assign({}, geoJSONs), {
+        start: start
+      }));
+    },
+    exitDrawModeCallback: function exitDrawModeCallback() {
+      setDrawMode({
+        start: null,
+        end: null
+      });
+      exitDrawModeCallbackStart();
+    },
+    featureNrToEdit: 0
+  }), /*#__PURE__*/React.createElement(MapViewLayer, {
+    id: "geojsonlayer-intersection-end-".concat(mapId),
+    isInEditMode: false,
+    geojson: geoJSONs.intersectionEnd
+  }), /*#__PURE__*/React.createElement(MapViewLayer, {
+    id: "geojsonlayer-intersection-start-".concat(mapId),
+    isInEditMode: false,
+    geojson: geoJSONs.intersectionStart
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      left: '0',
+      bottom: '0',
+      zIndex: 1000,
+      width: '100%'
     }
-  }; // eslint-disable-next-line react-hooks/exhaustive-deps
-
-
-  var delayedQuery = React__default.useCallback(debounce(update, 1000), []);
-  return [TAC, delayedQuery];
+  }, /*#__PURE__*/React.createElement(TimeSliderConnect, {
+    sourceId: timesliderId,
+    mapId: mapId
+  })), /*#__PURE__*/React.createElement(LegendConnect, {
+    showMapId: true,
+    mapId: mapId
+  }));
 };
 
-var ProductFormTAC = function ProductFormTAC(_ref) {
-  var tac = _ref.tac;
-  var tacLines = tac.split('\n');
-  return /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "body2",
-    component: "div",
-    sx: styles$2.tacOutput,
-    "data-testid": "productform-tac-message"
-  }, tacLines.map(function (line) {
-    return /*#__PURE__*/React__default.createElement(Box, {
-      component: "p",
-      key: line,
-      sx: styles$2.tacLine,
-      "data-testid": "productform-tac-message-line"
-    }, line);
-  }));
+var ProductFormLayout = function ProductFormLayout(_a) {
+  var children = _a.children,
+      geojsonProps = __rest(_a, ["children"]);
+
+  var theme = useTheme();
+  return /*#__PURE__*/React__default.createElement(Grid, {
+    container: true,
+    sx: _defineProperty({
+      height: '100%',
+      overflowY: 'auto'
+    }, theme.breakpoints.up('sm'), {
+      overflowY: 'hidden'
+    })
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: 12,
+    sm: 6,
+    lg: 8,
+    sx: _defineProperty({
+      height: 400,
+      padding: 2
+    }, theme.breakpoints.up('sm'), {
+      height: '100%',
+      padding: 0
+    })
+  }, /*#__PURE__*/React__default.createElement(MapViewGeoJson, Object.assign({}, geojsonProps))), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: 12,
+    sm: 6,
+    lg: 4,
+    sx: _defineProperty({
+      paddingTop: 5,
+      paddingBottom: 5,
+      paddingRight: 2
+    }, theme.breakpoints.up('sm'), {
+      overflowY: 'auto',
+      height: '100%'
+    })
+  }, children));
 };
 
 var SigmetForm = function SigmetForm(_ref) {
@@ -4117,13 +4202,14 @@ var SigmetForm = function SigmetForm(_ref) {
   }, [drawMode.start, drawMode.end, isReadOnly, isDisabled]);
 
   var renderForm = function renderForm() {
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Grid, {
+    return /*#__PURE__*/React__default.createElement(Grid, {
       container: true,
       direction: "column",
-      spacing: 2
+      spacing: 5
     }, !isCancelSigmet && /*#__PURE__*/React__default.createElement(Phenomenon, {
       productType: "sigmet",
       isDisabled: isDisabled,
+      isReadOnly: isReadOnly,
       onChange: onChangeForm
     }), !isCancelSigmet && /*#__PURE__*/React__default.createElement(ObservationForecast, {
       isDisabled: isDisabled,
@@ -4140,14 +4226,17 @@ var SigmetForm = function SigmetForm(_ref) {
     }), /*#__PURE__*/React__default.createElement(ValidFrom, {
       productType: "sigmet",
       isDisabled: isDisabled,
+      isReadOnly: isReadOnly,
       onChange: onChangeForm
     }), /*#__PURE__*/React__default.createElement(ValidUntil, {
       productType: "sigmet",
       isDisabled: isDisabled,
+      isReadOnly: isReadOnly,
       onChange: onChangeForm
-    })), /*#__PURE__*/React__default.createElement(SelectFIR, {
+    }), /*#__PURE__*/React__default.createElement(SelectFIR, {
       productType: "sigmet",
-      isDisabled: isDisabled
+      isDisabled: isDisabled,
+      isReadOnly: isReadOnly
     }), /*#__PURE__*/React__default.createElement(StartGeometry, {
       isReadOnly: isReadOnly,
       drawMode: drawMode,
@@ -4173,74 +4262,19 @@ var SigmetForm = function SigmetForm(_ref) {
     }), !isCancelSigmet && /*#__PURE__*/React__default.createElement(Change, {
       isDisabled: isDisabled,
       isReadOnly: isReadOnly
-    }), isCancelSigmet && watch('vaSigmetMoveToFIR') && /*#__PURE__*/React__default.createElement(Grid, {
-      item: true,
-      container: true,
-      spacing: 2
-    }, /*#__PURE__*/React__default.createElement(Grid, {
-      item: true,
-      xs: 4,
-      container: true,
-      justifyContent: "flex-end"
-    }), /*#__PURE__*/React__default.createElement(Grid, {
-      item: true,
-      xs: 8,
-      container: true,
-      justifyContent: "flex-start"
-    }, /*#__PURE__*/React__default.createElement(Grid, {
+    }), isCancelSigmet && watch('vaSigmetMoveToFIR') && /*#__PURE__*/React__default.createElement(ProductFormFieldLayout, null, /*#__PURE__*/React__default.createElement(Grid, {
       item: true,
       xs: 12
     }, /*#__PURE__*/React__default.createElement(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.createElement("b", null, " ", watch('vaSigmetMoveToFIR')))))), /*#__PURE__*/React__default.createElement(Grid, {
-      item: true,
-      container: true,
-      spacing: 2,
-      sx: styles$4.containerItem
-    }, /*#__PURE__*/React__default.createElement(Grid, {
-      item: true,
-      xs: 4,
-      container: true,
-      justifyContent: "flex-end"
-    }, /*#__PURE__*/React__default.createElement(Typography, {
-      variant: "subtitle1",
-      sx: styles$4.label
-    }, "Issued at")), /*#__PURE__*/React__default.createElement(Grid, {
-      item: true,
-      xs: 8,
-      container: true,
-      justifyContent: "flex-start"
-    }, /*#__PURE__*/React__default.createElement(Grid, {
-      item: true,
-      xs: 12
-    }, /*#__PURE__*/React__default.createElement(Typography, {
-      variant: "body2",
-      sx: styles$4.body
-    }, getProductIssueDate(initialSigmet, initialCancelSigmet)))), /*#__PURE__*/React__default.createElement(Grid, {
-      item: true,
-      container: true,
-      spacing: 2
-    }, /*#__PURE__*/React__default.createElement(Grid, {
-      item: true,
-      xs: 4,
-      container: true,
-      justifyContent: "flex-end"
-    }, /*#__PURE__*/React__default.createElement(Typography, {
-      variant: "subtitle1",
-      sx: styles$4.label
-    }, "TAC")), /*#__PURE__*/React__default.createElement(Grid, {
-      item: true,
-      xs: 8,
-      container: true,
-      justifyContent: "flex-start"
-    }, /*#__PURE__*/React__default.createElement(Grid, {
-      item: true,
-      xs: 12
-    }, /*#__PURE__*/React__default.createElement(ProductFormTAC, {
+    }, "Volcanic Cloud is moving in the direction of:", ' ', /*#__PURE__*/React__default.createElement("b", null, " ", watch('vaSigmetMoveToFIR'))))), /*#__PURE__*/React__default.createElement(IssuedAt, {
+      date: getProductIssueDate(initialSigmet, initialCancelSigmet),
+      isReadOnly: isReadOnly
+    }), /*#__PURE__*/React__default.createElement(Tac, {
       tac: tac
-    })))), /*#__PURE__*/React__default.createElement(ReactHookFormHiddenInput, {
+    }, /*#__PURE__*/React__default.createElement(ReactHookFormHiddenInput, {
       name: "sequence",
       defaultValue: "-1"
     }),
@@ -4269,15 +4303,7 @@ var SigmetForm = function SigmetForm(_ref) {
     style: {
       width: '100%'
     }
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    container: true,
-    style: {
-      height: '100%'
-    }
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 8
-  }, /*#__PURE__*/React__default.createElement(MapViewGeoJson, {
+  }, /*#__PURE__*/React__default.createElement(ProductFormLayout, {
     geoJSONs: geoJSONs,
     setLayerGeoJSONs: function setLayerGeoJSONs(geoJSONs) {
       return _setLayerGeoJSONs(createInterSections(geoJSONs));
@@ -4287,11 +4313,7 @@ var SigmetForm = function SigmetForm(_ref) {
     setDrawMode: setDrawMode,
     exitDrawModeCallbackStart: updateStartDrawing,
     exitDrawModeCallbackEnd: updateEndDrawing
-  })), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 4,
-    sx: styles$4.productForm
-  }, renderForm())));
+  }, renderForm()));
 };
 
 var AirmetForm = function AirmetForm(_ref) {
@@ -4374,18 +4396,21 @@ var AirmetForm = function AirmetForm(_ref) {
   }, [drawMode.start, isReadOnly, isDisabled]);
 
   var renderForm = function renderForm() {
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Grid, {
+    return /*#__PURE__*/React__default.createElement(Grid, {
       container: true,
       direction: "column",
-      spacing: 2
+      spacing: 6
     }, !isCancelAirmet && /*#__PURE__*/React__default.createElement(Phenomenon, {
       productType: "airmet",
       isDisabled: isDisabled,
+      isReadOnly: isReadOnly,
       onChange: onChangeForm
     }), !isCancelAirmet && phenomenon === 'SFC_VIS' && /*#__PURE__*/React__default.createElement(SurfaceVisibility, {
+      isReadOnly: isReadOnly,
       isDisabled: isDisabled,
       onChange: onChangeForm
     }), !isCancelAirmet && phenomenon === 'SFC_WIND' && /*#__PURE__*/React__default.createElement(SurfaceWind, {
+      isReadOnly: isReadOnly,
       isDisabled: isDisabled,
       onChange: onChangeForm
     }), !isCancelAirmet && /*#__PURE__*/React__default.createElement(ObservationForecast, {
@@ -4398,14 +4423,17 @@ var AirmetForm = function AirmetForm(_ref) {
       onChange: onChangeForm
     }), /*#__PURE__*/React__default.createElement(ValidFrom, {
       productType: "airmet",
+      isReadOnly: isReadOnly,
       isDisabled: isDisabled,
       onChange: onChangeForm
     }), /*#__PURE__*/React__default.createElement(ValidUntil, {
       productType: "airmet",
+      isReadOnly: isReadOnly,
       isDisabled: isDisabled,
       onChange: onChangeForm
-    })), /*#__PURE__*/React__default.createElement(SelectFIR, {
+    }), /*#__PURE__*/React__default.createElement(SelectFIR, {
       productType: "airmet",
+      isReadOnly: isReadOnly,
       isDisabled: isDisabled
     }), /*#__PURE__*/React__default.createElement(StartGeometry, {
       isReadOnly: isReadOnly,
@@ -4431,53 +4459,12 @@ var AirmetForm = function AirmetForm(_ref) {
     }), !isCancelAirmet && /*#__PURE__*/React__default.createElement(Change, {
       isDisabled: isDisabled,
       isReadOnly: isReadOnly
-    }), /*#__PURE__*/React__default.createElement(Grid, {
-      item: true,
-      container: true,
-      spacing: 2,
-      sx: styles$4.containerItem
-    }, /*#__PURE__*/React__default.createElement(Grid, {
-      item: true,
-      xs: 4,
-      container: true,
-      justifyContent: "flex-end"
-    }, /*#__PURE__*/React__default.createElement(Typography, {
-      variant: "subtitle1",
-      sx: styles$4.label
-    }, "Issued at")), /*#__PURE__*/React__default.createElement(Grid, {
-      item: true,
-      xs: 8,
-      container: true,
-      justifyContent: "flex-start"
-    }, /*#__PURE__*/React__default.createElement(Grid, {
-      item: true,
-      xs: 12
-    }, /*#__PURE__*/React__default.createElement(Typography, {
-      variant: "body2",
-      sx: styles$4.body
-    }, getProductIssueDate(initialAirmet, initialCancelAirmet)))), /*#__PURE__*/React__default.createElement(Grid, {
-      item: true,
-      container: true,
-      spacing: 2
-    }, /*#__PURE__*/React__default.createElement(Grid, {
-      item: true,
-      xs: 4,
-      container: true,
-      justifyContent: "flex-end"
-    }, /*#__PURE__*/React__default.createElement(Typography, {
-      variant: "subtitle1",
-      sx: styles$4.label
-    }, "TAC")), /*#__PURE__*/React__default.createElement(Grid, {
-      item: true,
-      xs: 8,
-      container: true,
-      justifyContent: "flex-start"
-    }, /*#__PURE__*/React__default.createElement(Grid, {
-      item: true,
-      xs: 12
-    }, /*#__PURE__*/React__default.createElement(ProductFormTAC, {
+    }), /*#__PURE__*/React__default.createElement(IssuedAt, {
+      isReadOnly: isReadOnly,
+      date: getProductIssueDate(initialAirmet, initialCancelAirmet)
+    }), /*#__PURE__*/React__default.createElement(Tac, {
       tac: tac
-    })))), /*#__PURE__*/React__default.createElement(ReactHookFormHiddenInput, {
+    }, /*#__PURE__*/React__default.createElement(ReactHookFormHiddenInput, {
       name: "sequence",
       defaultValue: "-1"
     }),
@@ -4506,15 +4493,7 @@ var AirmetForm = function AirmetForm(_ref) {
     style: {
       width: '100%'
     }
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    container: true,
-    style: {
-      height: '100%'
-    }
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 8
-  }, /*#__PURE__*/React__default.createElement(MapViewGeoJson, {
+  }, /*#__PURE__*/React__default.createElement(ProductFormLayout, {
     geoJSONs: geoJSONs,
     setLayerGeoJSONs: function setLayerGeoJSONs(geoJSONs) {
       return _setLayerGeoJSONs(createInterSections(geoJSONs));
@@ -4523,32 +4502,7 @@ var AirmetForm = function AirmetForm(_ref) {
     drawMode: drawMode,
     setDrawMode: setDrawMode,
     exitDrawModeCallbackStart: updateStartDrawing
-  })), /*#__PURE__*/React__default.createElement(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) {
@@ -4562,6 +4516,8 @@ var ContentDialog = function ContentDialog(_a) {
       alertBanner = _a$alertBanner === void 0 ? null : _a$alertBanner,
       other = __rest(_a, ["open", "toggleDialogStatus", "title", "children", "options", "onClose", "alertBanner"]);
 
+  var theme = useTheme();
+
   var handleClose = function handleClose() {
     if (onClose) {
       onClose();
@@ -4575,53 +4531,77 @@ var ContentDialog = function ContentDialog(_a) {
     open: open,
     onClose: handleClose,
     maxWidth: other.maxWidth ? other.maxWidth : 'lg'
-  }, other), /*#__PURE__*/React.createElement(DialogTitle, {
-    sx: styles$1.dialogHeader
+  }, other, {
+    sx: {
+      ' .MuiPaper-root': {
+        minWidth: 300
+      }
+    }
+  }), /*#__PURE__*/React.createElement(DialogTitle, {
+    sx: _defineProperty({
+      boxShadow: 1,
+      zIndex: 1,
+      padding: 0,
+      height: 48,
+      display: 'flex',
+      paddingLeft: 2,
+      paddingRight: 2
+    }, theme.breakpoints.up('sm'), {
+      paddingLeft: 3,
+      paddingRight: 3
+    }),
+    component: "div"
   }, /*#__PURE__*/React.createElement(Grid, {
     container: true,
     alignItems: "center"
   }, /*#__PURE__*/React.createElement(Grid, {
     item: true,
-    xs: true
+    xs: 4
   }, /*#__PURE__*/React.createElement(Button, {
     onClick: handleClose,
-    color: "secondary",
-    size: "medium",
-    startIcon: /*#__PURE__*/React.createElement(ChevronLeft, {
-      color: "secondary"
-    }),
-    "data-testid": "contentdialog-close"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    variant: "subtitle1",
-    color: "secondary"
-  }, "BACK"))), /*#__PURE__*/React.createElement(Grid, {
+    variant: "flat",
+    startIcon: /*#__PURE__*/React.createElement(ChevronLeft, null),
+    "data-testid": "contentdialog-close",
+    sx: _defineProperty({}, theme.breakpoints.down('md'), {
+      textIndent: -999999,
+      width: 24,
+      minWidth: 24,
+      height: 24,
+      ' .MuiSvgIcon-root': {
+        marginRight: 0
+      }
+    })
+  }, "BACK")), /*#__PURE__*/React.createElement(Grid, {
     item: true,
-    xs: true,
-    sx: styles$1.dialogTitle
+    xs: 4,
+    sx: {
+      display: 'flex',
+      justifyContent: 'center',
+      textAlign: 'center'
+    }
   }, /*#__PURE__*/React.createElement(Typography, {
     "data-testid": "dialogTitle",
-    variant: "h6"
+    variant: "h6",
+    sx: {
+      fontSize: '1.0rem',
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap'
+    }
   }, title)), /*#__PURE__*/React.createElement(Grid, {
     item: true,
-    xs: true
-  }, /*#__PURE__*/React.createElement(Grid, {
-    container: true
-  }, options)))), alertBanner !== null && alertBanner, /*#__PURE__*/React.createElement(DialogContent, {
-    sx: styles$1.dialogChildren
+    xs: 4
+  }, options))), alertBanner !== null && alertBanner, /*#__PURE__*/React.createElement(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',
@@ -4653,27 +4633,40 @@ var getStatusTagList = function getStatusTagList(product) {
   if (cancelsSeqId !== null) {
     return /*#__PURE__*/React__default.createElement(StatusTag, {
       content: "cancels ".concat(cancelsSeqId),
-      color: "red"
+      color: "red",
+      sx: {
+        width: '80px'
+      }
     });
   }
 
   if (product.status === 'CANCELLED') {
     return /*#__PURE__*/React__default.createElement(StatusTag, {
       content: "cancelled ".concat(product.sequence),
-      color: "red"
+      color: "red",
+      sx: {
+        width: '80px'
+      }
     });
   }
 
   if (moment(product.validDateEnd) < moment.utc(new Date())) {
     return /*#__PURE__*/React__default.createElement(StatusTag, {
       content: "expired",
-      color: "grey"
+      color: "grey",
+      sx: {
+        width: '80px'
+      }
     });
   }
 
   return /*#__PURE__*/React__default.createElement(StatusTag, {
     content: product.status.toLowerCase(),
-    color: product.status === 'PUBLISHED' ? 'green' : 'grey'
+    color: product.status === 'PUBLISHED' ? 'green' : 'grey',
+    sx: {
+      marginRight: '0!important',
+      width: '80px'
+    }
   });
 };
 
@@ -4701,9 +4694,19 @@ var formatValidTime = function formatValidTime(startDate, endDate, format) {
   return "".concat(moment.utc(startDate).format('DD MMM YYYY, HH:mm'), " - ").concat(moment.utc(endDate).format(format), " UTC");
 };
 
-var ProductListRow = function ProductListRow(_ref) {
-  var product = _ref.product,
-      productType = _ref.productType;
+var ProductListRowHeader = function ProductListRowHeader(_ref) {
+  var title = _ref.title;
+  return /*#__PURE__*/React__default.createElement(Typography, {
+    sx: {
+      color: 'geowebColors.textInputField.label.rgba',
+      fontSize: '0.75rem'
+    }
+  }, title);
+};
+
+var ProductListRow = function ProductListRow(_ref2) {
+  var product = _ref2.product,
+      productType = _ref2.productType;
 
   var _useApiContext = useApiContext(),
       api = _useApiContext.api;
@@ -4740,80 +4743,119 @@ var ProductListRow = function ProductListRow(_ref) {
   return /*#__PURE__*/React__default.createElement(Card, {
     elevation: 0,
     variant: "outlined",
-    sx: styles.cardWrapper
-  }, /*#__PURE__*/React__default.createElement(CardContent, {
-    sx: styles.cardContent
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    sx: function sx(theme) {
+      return _defineProperty({
+        width: '100%',
+        paddingLeft: 1,
+        paddingRight: 1,
+        paddingTop: 1.5,
+        paddingBottom: 1.5,
+        '&:last-child': {
+          paddingBottom: 1.5
+        }
+      }, theme.breakpoints.up('sm'), {
+        paddingLeft: 4,
+        paddingRight: 4,
+        paddingTop: 2,
+        paddingBottom: 2,
+        '&:last-child': {
+          paddingBottom: 2
+        }
+      });
+    }
   }, /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     alignItems: "center",
-    spacing: 1
-  }, /*#__PURE__*/React__default.createElement(Tooltip, {
-    title: phenomenon !== null ? getPhenomenon(productType, phenomenon) : '',
-    placement: "bottom-start"
+    spacing: 2
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 3,
-    sm: 3,
-    md: 1
-  }, phenomenon !== null && /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "overline"
-  }, productType.toUpperCase()), /*#__PURE__*/React__default.createElement(Typography, {
+    sm: 1
+  }, phenomenon !== null && /*#__PURE__*/React__default.createElement(ProductListRowHeader, {
+    title: productType.toUpperCase()
+  }), /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: phenomenon !== null ? getPhenomenon(productType, phenomenon) : '',
+    placement: "bottom-start"
+  }, /*#__PURE__*/React__default.createElement(Typography, {
     variant: "subtitle2",
     noWrap: true,
     sx: styles.font
   }, phenomenon !== null ? phenomenon : 'Cancel'))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    xs: 3,
-    sm: 2,
-    md: 1
-  }, /*#__PURE__*/React__default.createElement(Tooltip, {
-    "data-testid": "productlistrow-tactooltip",
-    title: /*#__PURE__*/React__default.createElement("div", {
+    xs: 9,
+    sm: 3
+  }, /*#__PURE__*/React__default.createElement(ProductListRowHeader, {
+    title: "Issue time"
+  }), /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ProductListRowHeader, {
+      title: "TAC"
+    }), /*#__PURE__*/React__default.createElement(Typography, {
       style: {
         whiteSpace: 'pre-line'
+      },
+      variant: "subtitle2",
+      sx: Object.assign(Object.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.createElement("span", null, /*#__PURE__*/React__default.createElement(Info, {
-    "data-testid": "productlistrow-tacicon",
-    color: "secondary"
-  })))), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 9,
-    sm: 10,
-    md: 3,
-    lg: 2
+    }
   }, /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "overline"
-  }, "Issue time"), /*#__PURE__*/React__default.createElement(Typography, {
     variant: "subtitle2",
     sx: styles.font,
     "data-testid": "issueTime"
-  }, product.issueDate ? "".concat(moment.utc(product.issueDate).format('DD MMM YYYY, HH:mm'), " UTC") : '(Not published)')), /*#__PURE__*/React__default.createElement(Grid, {
+  }, product.issueDate ? "".concat(moment.utc(product.issueDate).format('DD MMM YYYY, HH:mm'), " UTC") : '(Not published)'))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12,
-    sm: 8,
-    md: 5,
-    lg: 6
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "overline"
-  }, "Valid time"), /*#__PURE__*/React__default.createElement(Typography, {
+    sm: 6
+  }, /*#__PURE__*/React__default.createElement(ProductListRowHeader, {
+    title: "Valid time"
+  }), /*#__PURE__*/React__default.createElement(Typography, {
     variant: "subtitle2",
     sx: styles.font,
     "data-testid": "validTime"
   }, validTime)), /*#__PURE__*/React__default.createElement(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) {
+      return _defineProperty({}, theme.breakpoints.up('sm'), {
+        justifyContent: 'right',
+        button: {
+          marginRight: 3
+        },
+        ' .statusTag': {
+          marginRight: 3
+        }
+      });
+    }
   }, product.status === 'DRAFT' ? /*#__PURE__*/React__default.createElement(Button, {
-    color: "secondary",
-    size: "small",
-    startIcon: /*#__PURE__*/React__default.createElement(Edit, {
-      color: "secondary"
-    })
-  }, "Draft") : getStatusTagList(product, cancelsSeqId), product.status === 'PUBLISHED' && cancelsSeqId === null && getActiveStatus(product)))));
+    sx: {
+      marginTop: '6px'
+    },
+    variant: "flat",
+    startIcon: /*#__PURE__*/React__default.createElement(Edit, null)
+  }, "DRAFT") : getStatusTagList(product, cancelsSeqId), product.status === 'PUBLISHED' && cancelsSeqId === null && getActiveStatus(product))));
 };
 
 /* *
@@ -4849,10 +4891,12 @@ var ProductList = function ProductList(_ref) {
     item: true,
     justifyContent: "flex-end"
   }, /*#__PURE__*/React__default.createElement(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.createElement(Grid, {
     item: true,
     sx: {
@@ -4864,7 +4908,11 @@ var ProductList = function ProductList(_ref) {
     title: "An error has occurred while retrieving the list, please try again",
     info: error.message ? error.message : '',
     dataTestId: "productList-alert"
-  }), productList && /*#__PURE__*/React__default.createElement(List, null, productList.map(function (productListItem, index) {
+  }), productList && /*#__PURE__*/React__default.createElement(List, {
+    sx: {
+      paddingTop: 4
+    }
+  }, productList.map(function (productListItem, index) {
     var product = productListItem[productType];
     return /*#__PURE__*/React__default.createElement(ListItem, {
       "data-testid": "productListItem",
@@ -5130,6 +5178,11 @@ var ProductFormDialogContent = function ProductFormDialogContent(_ref) {
     options: getProductFormLifecycleButtons(productCanBe, onProductButtonPress),
     style: {
       zIndex: 1000
+    },
+    sx: {
+      ' .MuiDialogContent-root': {
+        overflowY: 'hidden'
+      }
     }
   }, productType === 'sigmet' ? /*#__PURE__*/React.createElement(SigmetForm, {
     mode: mode,