@opengeoweb/sigmet-airmet 4.2.0 → 4.3.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 { 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,
@@ -260,602 +442,177 @@ var geoJSONTemplate = {
   POLYGON: {
     start: emptyPolygonGeoJSONStart,
     end: emptyPolygonGeoJSONEnd
-  },
-  FIR: {
-    start: null,
-    end: null
-  }
-};
-
-/**
- * The possible phenomena for the sigmet
- */
-var SigmetPhenomena;
-
-(function (SigmetPhenomena) {
-  SigmetPhenomena["EMBD_TS"] = "Embedded thunderstorm(s)";
-  SigmetPhenomena["EMBD_TSGR"] = "Embedded thunderstorm(s) with hail";
-  SigmetPhenomena["FRQ_TS"] = "Frequent thunderstorm(s)";
-  SigmetPhenomena["FRQ_TSGR"] = "Frequent thunderstorm(s) with hail";
-  SigmetPhenomena["HVY_DS"] = "Heavy duststorm";
-  SigmetPhenomena["HVY_SS"] = "Heavy sandstorm";
-  SigmetPhenomena["OBSC_TS"] = "Obscured thunderstorm(s)";
-  SigmetPhenomena["OBSC_TSGR"] = "Obscured thunderstorm(s) with hail";
-  SigmetPhenomena["RDOACT_CLD"] = "Radioactive cloud";
-  SigmetPhenomena["SEV_ICE"] = "Severe icing";
-  SigmetPhenomena["SEV_ICE_FRZ_RN"] = "Severe icing due to freezing rain";
-  SigmetPhenomena["SEV_MTW"] = "Severe mountain wave";
-  SigmetPhenomena["SEV_TURB"] = "Severe turbulence";
-  SigmetPhenomena["SQL_TS"] = "Squall line";
-  SigmetPhenomena["SQL_TSGR"] = "Squall line thunderstorm(s) with hail"; // 'TC' = 'Tropical cyclone',     // Don't show this option in the list because it will be not used by KNMI.
-
-  SigmetPhenomena["VA_CLD"] = "Volcanic ash cloud";
-})(SigmetPhenomena || (SigmetPhenomena = {}));
-/**
- * The possible phenomena for the airmet
- */
-
-
-var AirmetPhenomena;
-
-(function (AirmetPhenomena) {
-  AirmetPhenomena["SFC_VIS"] = "Surface visibility";
-  AirmetPhenomena["SFC_WIND"] = "Surface wind";
-  AirmetPhenomena["OVC_CLD"] = "Overcast cloud";
-  AirmetPhenomena["BKN_CLD"] = "Broken cloud";
-  AirmetPhenomena["ISOL_CB"] = "Isolated cumulonimbus cloud";
-  AirmetPhenomena["OCNL_CB"] = "Occasional cumulonimbus cloud";
-  AirmetPhenomena["FRQ_CB"] = "Frequent cumulonimbus cloud";
-  AirmetPhenomena["ISOL_TS"] = "Isolated thunderstorm(s)";
-  AirmetPhenomena["OCNL_TS"] = "Occasional thunderstorm(s)";
-  AirmetPhenomena["ISOL_TSGR"] = "Isolated thunderstorm(s) with hail";
-  AirmetPhenomena["OCNL_TSGR"] = "Occasional thunderstorm(s) with hail";
-  AirmetPhenomena["ISOL_TCU"] = "Isolated towering cumulus cloud";
-  AirmetPhenomena["OCNL_TCU"] = "Occasional towering cumulus cloud";
-  AirmetPhenomena["FRQ_TCU"] = "Frequent towering cumulus cloud";
-  AirmetPhenomena["MOD_ICE"] = "Moderate icing";
-  AirmetPhenomena["MOD_MTW"] = "Moderate mountain wave";
-  AirmetPhenomena["MOD_TURB"] = "Moderate turbulence";
-  AirmetPhenomena["MT_OBSC"] = "Mountains obscured";
-})(AirmetPhenomena || (AirmetPhenomena = {}));
-
-var VisibilityCause;
-
-(function (VisibilityCause) {
-  VisibilityCause["DZ"] = "Drizzle";
-  VisibilityCause["DU"] = "Dust";
-  VisibilityCause["PO"] = "Dust or sand devil";
-  VisibilityCause["DS"] = "Dust storm";
-  VisibilityCause["FG"] = "Fog";
-  VisibilityCause["FC"] = "Funnel clouds";
-  VisibilityCause["GR"] = "Hail";
-  VisibilityCause["HZ"] = "Haze";
-  VisibilityCause["PL"] = "Ice pellets";
-  VisibilityCause["BR"] = "Mist";
-  VisibilityCause["RA"] = "Rain";
-  VisibilityCause["SA"] = "Sand";
-  VisibilityCause["SS"] = "Sand storm";
-  VisibilityCause["FU"] = "Smoke";
-  VisibilityCause["SN"] = "Snow";
-  VisibilityCause["SG"] = "Snow grains";
-  VisibilityCause["GS"] = "Soft hail";
-  VisibilityCause["SQ"] = "Squalls";
-  VisibilityCause["VA"] = "Volcanic Ash";
-})(VisibilityCause || (VisibilityCause = {}));
-/* Speed unit, e.g. 'KT', 'KMH' */
-
-
-var MovementUnit;
-
-(function (MovementUnit) {
-  MovementUnit["KT"] = "kt";
-  MovementUnit["KMH"] = "kmh";
-})(MovementUnit || (MovementUnit = {}));
-
-var WindUnit;
-
-(function (WindUnit) {
-  WindUnit["KT"] = "kt";
-  WindUnit["MPS"] = "mps";
-})(WindUnit || (WindUnit = {}));
-
-var ProductStatusDescription;
-
-(function (ProductStatusDescription) {
-  ProductStatusDescription["DRAFT"] = "Draft";
-  ProductStatusDescription["PUBLISHED"] = "Published";
-  ProductStatusDescription["CANCELLED"] = "Cancelled";
-  ProductStatusDescription["EXPIRED"] = "Expired";
-})(ProductStatusDescription || (ProductStatusDescription = {}));
-
-var CloudLevelUnits;
-
-(function (CloudLevelUnits) {
-  CloudLevelUnits["FT"] = "ft";
-  CloudLevelUnits["M"] = "m";
-})(CloudLevelUnits || (CloudLevelUnits = {}));
-
-var LevelUnits;
-
-(function (LevelUnits) {
-  LevelUnits["FT"] = "ft";
-  LevelUnits["M"] = "m";
-  LevelUnits["FL"] = "FL";
-})(LevelUnits || (LevelUnits = {}));
-
-var Direction;
-
-(function (Direction) {
-  Direction["N"] = "N";
-  Direction["NNE"] = "NNE";
-  Direction["NE"] = "NE";
-  Direction["ENE"] = "ENE";
-  Direction["E"] = "E";
-  Direction["ESE"] = "ESE";
-  Direction["SE"] = "SE";
-  Direction["SSE"] = "SSE";
-  Direction["S"] = "S";
-  Direction["SSW"] = "SSW";
-  Direction["SW"] = "SW";
-  Direction["WSW"] = "WSW";
-  Direction["W"] = "W";
-  Direction["WNW"] = "WNW";
-  Direction["NW"] = "NW";
-  Direction["NNW"] = "NNW";
-})(Direction || (Direction = {}));
-var isInstanceOfCancelSigmet = function isInstanceOfCancelSigmet(obj) {
-  return 'cancelsSigmetSequenceId' in obj;
-};
-var isInstanceOfCancelAirmet = function isInstanceOfCancelAirmet(obj) {
-  return 'cancelsAirmetSequenceId' in obj;
-};
-var isInstanceOfSigmetOrAirmet = function isInstanceOfSigmetOrAirmet(obj) {
-  return 'phenomenon' in obj;
-};
-var isInstanceOfCancelSigmetOrAirmet = function isInstanceOfCancelSigmetOrAirmet(obj) {
-  return 'cancelsSigmetSequenceId' in obj || 'cancelsAirmetSequenceId' in obj;
-};
-var MapDrawMode;
-
-(function (MapDrawMode) {
-  MapDrawMode["POINT"] = "POINT";
-  MapDrawMode["BOX"] = "BOX";
-  MapDrawMode["POLYGON"] = "POLYGON";
-  MapDrawMode["FIR"] = "FIR";
-  MapDrawMode["DELETE"] = "DELETE";
-})(MapDrawMode || (MapDrawMode = {}));
-
-var StartOrEndDrawing;
-
-(function (StartOrEndDrawing) {
-  StartOrEndDrawing["start"] = "start";
-  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
-};
-
-/* *
- * 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;
-
-    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)
- * */
+  },
+  FIR: {
+    start: null,
+    end: null
+  }
+};
+
 /**
- * Function to translate the geojson data to a GeoJSON.FeatureCollection
+ * The possible phenomena for the sigmet
  */
+var SigmetPhenomena;
 
-var getFir = function getFir() {
-  return firArea;
-};
+(function (SigmetPhenomena) {
+  SigmetPhenomena["EMBD_TS"] = "Embedded thunderstorm(s)";
+  SigmetPhenomena["EMBD_TSGR"] = "Embedded thunderstorm(s) with hail";
+  SigmetPhenomena["FRQ_TS"] = "Frequent thunderstorm(s)";
+  SigmetPhenomena["FRQ_TSGR"] = "Frequent thunderstorm(s) with hail";
+  SigmetPhenomena["HVY_DS"] = "Heavy duststorm";
+  SigmetPhenomena["HVY_SS"] = "Heavy sandstorm";
+  SigmetPhenomena["OBSC_TS"] = "Obscured thunderstorm(s)";
+  SigmetPhenomena["OBSC_TSGR"] = "Obscured thunderstorm(s) with hail";
+  SigmetPhenomena["RDOACT_CLD"] = "Radioactive cloud";
+  SigmetPhenomena["SEV_ICE"] = "Severe icing";
+  SigmetPhenomena["SEV_ICE_FRZ_RN"] = "Severe icing due to freezing rain";
+  SigmetPhenomena["SEV_MTW"] = "Severe mountain wave";
+  SigmetPhenomena["SEV_TURB"] = "Severe turbulence";
+  SigmetPhenomena["SQL_TS"] = "Squall line";
+  SigmetPhenomena["SQL_TSGR"] = "Squall line thunderstorm(s) with hail"; // 'TC' = 'Tropical cyclone',     // Don't show this option in the list because it will be not used by KNMI.
+
+  SigmetPhenomena["VA_CLD"] = "Volcanic ash cloud";
+})(SigmetPhenomena || (SigmetPhenomena = {}));
 /**
- * Function to check if the given geojson object has 'fir' selectionType property
+ * The possible phenomena for the airmet
  */
 
-var isFir = function isFir(geojson) {
-  return geojson && geojson.features && geojson.features[0].properties['selectionType'] === 'fir';
+
+var AirmetPhenomena;
+
+(function (AirmetPhenomena) {
+  AirmetPhenomena["SFC_VIS"] = "Surface visibility";
+  AirmetPhenomena["SFC_WIND"] = "Surface wind";
+  AirmetPhenomena["OVC_CLD"] = "Overcast cloud";
+  AirmetPhenomena["BKN_CLD"] = "Broken cloud";
+  AirmetPhenomena["ISOL_CB"] = "Isolated cumulonimbus cloud";
+  AirmetPhenomena["OCNL_CB"] = "Occasional cumulonimbus cloud";
+  AirmetPhenomena["FRQ_CB"] = "Frequent cumulonimbus cloud";
+  AirmetPhenomena["ISOL_TS"] = "Isolated thunderstorm(s)";
+  AirmetPhenomena["OCNL_TS"] = "Occasional thunderstorm(s)";
+  AirmetPhenomena["ISOL_TSGR"] = "Isolated thunderstorm(s) with hail";
+  AirmetPhenomena["OCNL_TSGR"] = "Occasional thunderstorm(s) with hail";
+  AirmetPhenomena["ISOL_TCU"] = "Isolated towering cumulus cloud";
+  AirmetPhenomena["OCNL_TCU"] = "Occasional towering cumulus cloud";
+  AirmetPhenomena["FRQ_TCU"] = "Frequent towering cumulus cloud";
+  AirmetPhenomena["MOD_ICE"] = "Moderate icing";
+  AirmetPhenomena["MOD_MTW"] = "Moderate mountain wave";
+  AirmetPhenomena["MOD_TURB"] = "Moderate turbulence";
+  AirmetPhenomena["MT_OBSC"] = "Mountains obscured";
+})(AirmetPhenomena || (AirmetPhenomena = {}));
+
+var VisibilityCause;
+
+(function (VisibilityCause) {
+  VisibilityCause["DZ"] = "Drizzle";
+  VisibilityCause["DU"] = "Dust";
+  VisibilityCause["PO"] = "Dust or sand devil";
+  VisibilityCause["DS"] = "Dust storm";
+  VisibilityCause["FG"] = "Fog";
+  VisibilityCause["FC"] = "Funnel clouds";
+  VisibilityCause["GR"] = "Hail";
+  VisibilityCause["HZ"] = "Haze";
+  VisibilityCause["PL"] = "Ice pellets";
+  VisibilityCause["BR"] = "Mist";
+  VisibilityCause["RA"] = "Rain";
+  VisibilityCause["SA"] = "Sand";
+  VisibilityCause["SS"] = "Sand storm";
+  VisibilityCause["FU"] = "Smoke";
+  VisibilityCause["SN"] = "Snow";
+  VisibilityCause["SG"] = "Snow grains";
+  VisibilityCause["GS"] = "Soft hail";
+  VisibilityCause["SQ"] = "Squalls";
+  VisibilityCause["VA"] = "Volcanic Ash";
+})(VisibilityCause || (VisibilityCause = {}));
+/* Speed unit, e.g. 'KT', 'KMH' */
+
+
+var MovementUnit;
+
+(function (MovementUnit) {
+  MovementUnit["KT"] = "kt";
+  MovementUnit["KMH"] = "kmh";
+})(MovementUnit || (MovementUnit = {}));
+
+var WindUnit;
+
+(function (WindUnit) {
+  WindUnit["KT"] = "kt";
+  WindUnit["MPS"] = "mps";
+})(WindUnit || (WindUnit = {}));
+
+var ProductStatusDescription;
+
+(function (ProductStatusDescription) {
+  ProductStatusDescription["DRAFT"] = "Draft";
+  ProductStatusDescription["PUBLISHED"] = "Published";
+  ProductStatusDescription["CANCELLED"] = "Cancelled";
+  ProductStatusDescription["EXPIRED"] = "Expired";
+})(ProductStatusDescription || (ProductStatusDescription = {}));
+
+var CloudLevelUnits;
+
+(function (CloudLevelUnits) {
+  CloudLevelUnits["FT"] = "ft";
+  CloudLevelUnits["M"] = "m";
+})(CloudLevelUnits || (CloudLevelUnits = {}));
+
+var LevelUnits;
+
+(function (LevelUnits) {
+  LevelUnits["FT"] = "ft";
+  LevelUnits["M"] = "m";
+  LevelUnits["FL"] = "FL";
+})(LevelUnits || (LevelUnits = {}));
+
+var Direction;
+
+(function (Direction) {
+  Direction["N"] = "N";
+  Direction["NNE"] = "NNE";
+  Direction["NE"] = "NE";
+  Direction["ENE"] = "ENE";
+  Direction["E"] = "E";
+  Direction["ESE"] = "ESE";
+  Direction["SE"] = "SE";
+  Direction["SSE"] = "SSE";
+  Direction["S"] = "S";
+  Direction["SSW"] = "SSW";
+  Direction["SW"] = "SW";
+  Direction["WSW"] = "WSW";
+  Direction["W"] = "W";
+  Direction["WNW"] = "WNW";
+  Direction["NW"] = "NW";
+  Direction["NNW"] = "NNW";
+})(Direction || (Direction = {}));
+var isInstanceOfCancelSigmet = function isInstanceOfCancelSigmet(obj) {
+  return 'cancelsSigmetSequenceId' in obj;
+};
+var isInstanceOfCancelAirmet = function isInstanceOfCancelAirmet(obj) {
+  return 'cancelsAirmetSequenceId' in obj;
+};
+var isInstanceOfSigmetOrAirmet = function isInstanceOfSigmetOrAirmet(obj) {
+  return 'phenomenon' in obj;
 };
+var isInstanceOfCancelSigmetOrAirmet = function isInstanceOfCancelSigmetOrAirmet(obj) {
+  return 'cancelsSigmetSequenceId' in obj || 'cancelsAirmetSequenceId' in obj;
+};
+var MapDrawMode;
+
+(function (MapDrawMode) {
+  MapDrawMode["POINT"] = "POINT";
+  MapDrawMode["BOX"] = "BOX";
+  MapDrawMode["POLYGON"] = "POLYGON";
+  MapDrawMode["FIR"] = "FIR";
+  MapDrawMode["DELETE"] = "DELETE";
+})(MapDrawMode || (MapDrawMode = {}));
+
+var StartOrEndDrawing;
+
+(function (StartOrEndDrawing) {
+  StartOrEndDrawing["start"] = "start";
+  StartOrEndDrawing["end"] = "end";
+})(StartOrEndDrawing || (StartOrEndDrawing = {}));
 
 var getDrawModeFromSelectionType = function getDrawModeFromSelectionType(selectionType) {
   switch (selectionType) {
@@ -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,8 +1030,8 @@ 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) {
@@ -1249,24 +1044,9 @@ var Change = function Change(_ref) {
   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
@@ -1293,7 +1073,7 @@ var Change = function Change(_ref) {
     label: "Intensifying",
     disabled: isDisabled,
     "data-testid": "change-INTSF"
-  })))));
+  }))));
 };
 
 /* *
@@ -1309,22 +1089,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 +1115,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 +1391,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';
@@ -1953,24 +1755,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
@@ -2010,10 +1797,14 @@ 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
+    xs: 12,
+    md: 3
   }, (!isReadOnly || watch('levelInfoMode') === 'TOPS') && /*#__PURE__*/React__default.createElement(FormControlLabel, {
     control: /*#__PURE__*/React__default.createElement(Checkbox, {
       checked: watch('levelInfoMode') === 'TOPS',
@@ -2029,7 +1820,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,7 +1830,7 @@ var Levels = function Levels(_ref) {
         isRequired: isRequired
       }
     },
-    sx: styles$4.unit,
+    sx: styles$2.unit,
     disabled: isDisabled,
     defaultValue: 'FL',
     onChange: function onChange() {
@@ -2055,7 +1847,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",
@@ -2092,13 +1885,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,7 +1908,7 @@ var Levels = function Levels(_ref) {
         }
       }
     },
-    sx: styles$4.unit,
+    sx: styles$2.unit,
     disabled: isDisabled,
     defaultValue: 'FL',
     onChange: function onChange() {
@@ -2127,11 +1923,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,
@@ -2161,10 +1958,14 @@ 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
+    xs: 12,
+    md: 3
   }, (!isReadOnly || watch('levelInfoMode') === 'BETW_SFC') && /*#__PURE__*/React__default.createElement(FormControlLabel, {
     control: /*#__PURE__*/React__default.createElement(Checkbox, {
       checked: watch('levelInfoMode') === 'BETW_SFC',
@@ -2182,7 +1983,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,7 +1998,7 @@ var Levels = function Levels(_ref) {
         }
       }
     },
-    sx: styles$4.unit,
+    sx: styles$2.unit,
     disabled: isDisabled,
     defaultValue: getValues('level.unit') || 'FL',
     onChange: function onChange() {
@@ -2215,7 +2017,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",
@@ -2255,10 +2058,14 @@ 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
+    xs: 12,
+    md: 3
   }, (!isReadOnly || watch('levelInfoMode') === 'TOPS_ABV') && /*#__PURE__*/React__default.createElement(FormControlLabel, {
     control: /*#__PURE__*/React__default.createElement(Checkbox, {
       checked: watch('levelInfoMode') === 'TOPS_ABV',
@@ -2273,7 +2080,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,7 +2090,7 @@ var Levels = function Levels(_ref) {
         isRequired: isRequired
       }
     },
-    sx: styles$4.unit,
+    sx: styles$2.unit,
     disabled: isDisabled,
     defaultValue: 'FL',
     onChange: function onChange() {
@@ -2299,7 +2107,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",
@@ -2326,7 +2135,7 @@ var Levels = function Levels(_ref) {
     },
     disabled: isDisabled,
     autoFocus: true
-  }))) : null))));
+  }))) : null)));
 };
 
 /* *
@@ -2342,8 +2151,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 +2167,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,
@@ -2395,7 +2197,7 @@ var ObservationForecast = function ObservationForecast(_ref) {
     label: "Forecast",
     disabled: isDisabled,
     "data-testid": "isObservationOrForecast-FCST"
-  }))));
+  })));
 };
 
 /* *
@@ -2411,8 +2213,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,23 +2230,8 @@ 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"
+  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',
@@ -2462,8 +2249,9 @@ var ObservationForecastTime = function ObservationForecastTime(_ref) {
     },
     disabled: isDisabled,
     helperText: helperText,
-    onChange: onChange
-  })));
+    onChange: onChange,
+    sx: styles$2.helperText
+  }));
 };
 
 var Phenomenon = function Phenomenon(_ref) {
@@ -2480,23 +2268,8 @@ 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"
+  return /*#__PURE__*/React__default.createElement(ProductFormFieldLayout, {
+    title: "What"
   }, /*#__PURE__*/React__default.createElement(ReactHookFormSelect, {
     name: "phenomenon",
     label: "Select phenomenon",
@@ -2531,7 +2304,7 @@ var Phenomenon = function Phenomenon(_ref) {
       value: key,
       key: key
     }, phenomenaList[key]);
-  }))));
+  })));
 };
 
 /* *
@@ -2547,8 +2320,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';
@@ -2570,22 +2343,9 @@ var StartGeometry = function StartGeometry(_ref) {
   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,
+  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 +2355,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 +2385,7 @@ var StartGeometry = function StartGeometry(_ref) {
     }
   }), /*#__PURE__*/React__default.createElement(ReactHookFormHiddenInput, {
     name: "startGeometryIntersect"
-  })));
+  }));
 };
 
 /* *
@@ -2641,8 +2401,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 +2482,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
@@ -2778,7 +2523,7 @@ var Progress = function Progress(_ref) {
     rules: {
       validate: isRequired
     },
-    sx: styles$4.movement,
+    sx: styles$2.movement,
     disabled: isDisabled,
     "data-testid": "movement-movementDirection",
     onChange: function onChange(event) {
@@ -2805,7 +2550,7 @@ var Progress = function Progress(_ref) {
     rules: {
       validate: isRequired
     },
-    sx: styles$4.unit,
+    sx: styles$2.unit,
     disabled: isDisabled,
     defaultValue: 'KT',
     "data-testid": "movement-movementUnit",
@@ -2864,7 +2609,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 +2619,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 +2649,7 @@ var Progress = function Progress(_ref) {
     }
   }), /*#__PURE__*/React__default.createElement(ReactHookFormHiddenInput, {
     name: "endGeometryIntersect"
-  })))));
+  }))));
 };
 
 /* *
@@ -2920,8 +2665,8 @@ 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) {
@@ -2941,24 +2686,9 @@ 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",
@@ -2990,7 +2720,7 @@ var SelectFIR = function SelectFIR(_ref) {
   }), /*#__PURE__*/React__default.createElement(ReactHookFormHiddenInput, {
     name: "firGeometry",
     defaultValue: getFir()
-  })));
+  }));
 };
 
 /* *
@@ -3006,8 +2736,8 @@ 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) {
@@ -3020,24 +2750,9 @@ var Type = function Type(_ref) {
   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
@@ -3065,7 +2780,7 @@ var Type = function Type(_ref) {
     label: "Exercise",
     disabled: isDisabled,
     "data-testid": "type-EXERCISE"
-  })))));
+  }))));
 };
 
 /* *
@@ -3081,10 +2796,14 @@ 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,
@@ -3102,23 +2821,8 @@ 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"
+  return /*#__PURE__*/React__default.createElement(ProductFormFieldLayout, {
+    title: "Valid from"
   }, /*#__PURE__*/React__default.createElement(ReactHookFormDateTime, {
     disablePast: true,
     name: "validDateStart",
@@ -3129,11 +2833,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));
         }
       }
     },
@@ -3150,9 +2854,6 @@ var ValidFrom = function ValidFrom(_ref) {
     },
     disabled: isDisabled,
     "data-testid": "valid-from"
-  })), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 6
   }));
 };
 
@@ -3169,8 +2870,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;
@@ -3188,30 +2889,15 @@ var ValidUntil = function ValidUntil(_ref) {
 
   var _useFormContext = useFormContext(),
       getValues = _useFormContext.getValues,
-      trigger = _useFormContext.trigger;
-
-  var _useDraftFormHelpers = useDraftFormHelpers(),
-      isRequired = _useDraftFormHelpers.isRequired;
-
-  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"
+      trigger = _useFormContext.trigger;
+
+  var _useDraftFormHelpers = useDraftFormHelpers(),
+      isRequired = _useDraftFormHelpers.isRequired;
+
+  var config = productType === 'sigmet' ? sigmetConfig : airmetConfig;
+  var defaultHoursValid = getDefaultHoursValid(productType);
+  return /*#__PURE__*/React__default.createElement(ProductFormFieldLayout, {
+    title: "Valid until"
   }, /*#__PURE__*/React__default.createElement(ReactHookFormDateTime, {
     disablePast: true,
     name: "validDateEnd",
@@ -3242,9 +2928,6 @@ var ValidUntil = function ValidUntil(_ref) {
 
       _onChange();
     }
-  })), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 6
   }));
 };
 
@@ -3292,7 +2975,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",
@@ -3320,7 +3003,7 @@ 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() {
@@ -3348,7 +3031,8 @@ var VolcanicFields = function VolcanicFields(_ref) {
     helperText: helperText,
     onChange: function onChange() {
       return trigger('vaSigmetVolcanoCoordinates.latitude');
-    }
+    },
+    sx: styles$2.helperText
   }))));
 };
 
@@ -3409,7 +3093,7 @@ 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",
@@ -3518,7 +3202,7 @@ 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",
@@ -3554,7 +3238,7 @@ var SurfaceWind = function SurfaceWind(_ref) {
         isRequired: isRequired
       }
     },
-    sx: styles$4.unit,
+    sx: styles$2.unit,
     disabled: isDisabled,
     defaultValue: 'KT',
     "data-testid": "surfaceWind-windUnit",
@@ -3662,7 +3346,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 +3354,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,
@@ -3737,7 +3421,7 @@ var CloudLevels = function CloudLevels(_ref) {
         isRequired: isRequired
       }
     },
-    sx: styles$4.unit,
+    sx: styles$2.unit,
     disabled: isDisabled,
     defaultValue: 'FT',
     onChange: function onChange() {
@@ -3766,7 +3450,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,
@@ -3845,7 +3529,7 @@ var CloudLevels = function CloudLevels(_ref) {
         isRequired: isRequired
       }
     },
-    sx: styles$4.unit,
+    sx: styles$2.unit,
     disabled: isDisabled,
     defaultValue: getValues('cloudLevel.unit') ? getValues('cloudLevel.unit') : 'FT',
     onChange: function onChange() {
@@ -3902,22 +3586,6 @@ var CloudLevels = function CloudLevels(_ref) {
   })))))));
 };
 
-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) {
@@ -3992,29 +3660,391 @@ var useTAC = function useTAC(initialProduct, getTAC) {
     } 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];
+  }; // 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;
+  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: 'geowebColors.buttons.primary.disabled.color'
+    })
+  }, date)));
+};
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+
+var Tac = function Tac(_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));
+};
+
+/* *
+ * 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
+};
+
+/* *
+ * 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;
+
+    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: '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%'
+    }
+  }, /*#__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,10 +4147,10 @@ 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,
@@ -4145,7 +4175,7 @@ var SigmetForm = function SigmetForm(_ref) {
       productType: "sigmet",
       isDisabled: isDisabled,
       onChange: onChangeForm
-    })), /*#__PURE__*/React__default.createElement(SelectFIR, {
+    }), /*#__PURE__*/React__default.createElement(SelectFIR, {
       productType: "sigmet",
       isDisabled: isDisabled
     }), /*#__PURE__*/React__default.createElement(StartGeometry, {
@@ -4173,74 +4203,18 @@ 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)
+    }), /*#__PURE__*/React__default.createElement(Tac, {
       tac: tac
-    })))), /*#__PURE__*/React__default.createElement(ReactHookFormHiddenInput, {
+    }, /*#__PURE__*/React__default.createElement(ReactHookFormHiddenInput, {
       name: "sequence",
       defaultValue: "-1"
     }),
@@ -4269,15 +4243,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 +4253,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,10 +4336,10 @@ 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,
@@ -4404,7 +4366,7 @@ var AirmetForm = function AirmetForm(_ref) {
       productType: "airmet",
       isDisabled: isDisabled,
       onChange: onChangeForm
-    })), /*#__PURE__*/React__default.createElement(SelectFIR, {
+    }), /*#__PURE__*/React__default.createElement(SelectFIR, {
       productType: "airmet",
       isDisabled: isDisabled
     }), /*#__PURE__*/React__default.createElement(StartGeometry, {
@@ -4431,53 +4393,11 @@ 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, {
+      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 +4426,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 +4435,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 +4449,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 +4464,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',
@@ -4673,7 +4586,10 @@ var getStatusTagList = function getStatusTagList(product) {
 
   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'
+    }
   });
 };
 
@@ -4701,9 +4617,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 +4666,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 +4814,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 +4831,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 +5101,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,