@opengeoweb/sigmet-airmet 4.2.0 → 4.3.0

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material'), require('react-hook-form'), require('@opengeoweb/form-fields'), require('@opengeoweb/api'), require('immer'), require('react-redux'), require('@opengeoweb/core'), require('@turf/turf'), require('@opengeoweb/shared'), require('@opengeoweb/theme'), require('moment'), require('lodash')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', 'react-hook-form', '@opengeoweb/form-fields', '@opengeoweb/api', 'immer', 'react-redux', '@opengeoweb/core', '@turf/turf', '@opengeoweb/shared', '@opengeoweb/theme', 'moment', 'lodash'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.SigmetAirmet = {}, global.React, global.material, global.reactHookForm, global.formFields, global.api, global.produce, global.reactRedux, global.core, global.turf, global.shared, global.theme, global.moment, global.lodash));
-})(this, (function (exports, React, material, reactHookForm, formFields, api, produce, reactRedux, core, turf, shared, theme, moment, lodash) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material'), require('react-hook-form'), require('@opengeoweb/form-fields'), require('@opengeoweb/api'), require('immer'), require('@turf/turf'), require('@opengeoweb/shared'), require('@opengeoweb/theme'), require('moment'), require('lodash'), require('react-redux'), require('@opengeoweb/core')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', 'react-hook-form', '@opengeoweb/form-fields', '@opengeoweb/api', 'immer', '@turf/turf', '@opengeoweb/shared', '@opengeoweb/theme', 'moment', 'lodash', 'react-redux', '@opengeoweb/core'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.SigmetAirmet = {}, global.React, global.material, global.reactHookForm, global.formFields, global.api, global.produce, global.turf, global.shared, global.theme, global.moment, global.lodash, global.reactRedux, global.core));
+})(this, (function (exports, React, material, reactHookForm, formFields, api, produce, turf, shared, theme, moment, lodash, reactRedux, core) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -133,548 +133,6 @@
         return to.concat(ar || Array.prototype.slice.call(from));
     }
 
-    var srsAndBboxDefault = {
-      bbox: {
-        left: -1205884.85699446,
-        bottom: 5808323.764379622,
-        right: 2219822.701688853,
-        top: 8298305.647311475
-      },
-      srs: 'EPSG:3857'
-    };
-    var featurePropsStart = {
-      stroke: '#f24a00',
-      'stroke-width': 1.5,
-      'stroke-opacity': 1,
-      fill: '#f24a00',
-      'fill-opacity': 0.25
-    };
-    var featurePropsEnd = {
-      stroke: '#6e1e91',
-      'stroke-width': 1.5,
-      'stroke-opacity': 1,
-      fill: '#6e1e91',
-      'fill-opacity': 0.25
-    };
-    var featurePropsIntersectionStart = {
-      stroke: '#f24a00',
-      'stroke-width': 1.5,
-      'stroke-opacity': 1,
-      fill: '#f24a00',
-      'fill-opacity': 0.5
-    };
-    var featurePropsIntersectionEnd = {
-      stroke: '#6e1e91',
-      'stroke-width': 1.5,
-      'stroke-opacity': 1,
-      fill: '#6e1e91',
-      'fill-opacity': 0.5
-    };
-    var featurePropsFIR = {
-      stroke: '#0075a9',
-      'stroke-width': 1.5,
-      'stroke-opacity': 1,
-      fill: '#0075a9',
-      'fill-opacity': 0.0
-    };
-    var featurePropsUnStyled = {
-      stroke: '#FF0000',
-      'stroke-width': 10.0,
-      'stroke-opacity': 1,
-      fill: '#0000FF',
-      'fill-opacity': 1.0
-    };
-    var emptyPolygonGeoJSONStart = {
-      type: 'FeatureCollection',
-      features: [{
-        type: 'Feature',
-        properties: __assign(__assign({}, featurePropsUnStyled), {
-          selectionType: 'poly'
-        }),
-        geometry: {
-          type: 'Polygon',
-          coordinates: [[]]
-        }
-      }]
-    };
-    var emptyPolygonGeoJSONEnd = {
-      type: 'FeatureCollection',
-      features: [{
-        type: 'Feature',
-        properties: __assign(__assign({}, featurePropsUnStyled), {
-          selectionType: 'poly'
-        }),
-        geometry: {
-          type: 'Polygon',
-          coordinates: [[]]
-        }
-      }]
-    };
-    var emptyBoxGeoJSONStart = {
-      type: 'FeatureCollection',
-      features: [{
-        type: 'Feature',
-        properties: __assign({
-          _adaguctype: 'box',
-          selectionType: 'box'
-        }, featurePropsUnStyled),
-        geometry: {
-          type: 'Polygon',
-          coordinates: [[]]
-        }
-      }]
-    };
-    var emptyBoxGeoJSONEnd = {
-      type: 'FeatureCollection',
-      features: [{
-        type: 'Feature',
-        properties: __assign({
-          _adaguctype: 'box',
-          selectionType: 'box'
-        }, featurePropsUnStyled),
-        geometry: {
-          type: 'Polygon',
-          coordinates: [[]]
-        }
-      }]
-    };
-    var emptyPointsGeojsonStart = {
-      type: 'FeatureCollection',
-      features: [{
-        type: 'Feature',
-        properties: __assign(__assign({}, featurePropsUnStyled), {
-          selectionType: 'point'
-        }),
-        geometry: {
-          type: 'Point',
-          coordinates: []
-        }
-      }]
-    };
-    var emptyPointsGeojsonEnd = {
-      type: 'FeatureCollection',
-      features: [{
-        type: 'Feature',
-        properties: __assign(__assign({}, featurePropsUnStyled), {
-          selectionType: 'point'
-        }),
-        geometry: {
-          type: 'Point',
-          coordinates: []
-        }
-      }]
-    };
-    var geoJSONTemplate = {
-      POINT: {
-        start: emptyPointsGeojsonStart,
-        end: emptyPointsGeojsonEnd
-      },
-      BOX: {
-        start: emptyBoxGeoJSONStart,
-        end: emptyBoxGeoJSONEnd
-      },
-      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: adagucBaseUrl + "?dataset=OVL",
-      id: 'knmigeoweboverlays'
-    };
-    var northSeaPlatforms = {
-      service: KNMIGeoWebOverlays.url,
-      name: 'northseastations',
-      format: 'image/png',
-      layerType: core.mapTypes.LayerType.overLayer,
-      enabled: true
-    };
-    var majorAirportsEHAA = {
-      service: KNMIGeoWebOverlays.url,
-      name: 'airports',
-      format: 'image/png',
-      layerType: core.mapTypes.LayerType.overLayer,
-      enabled: true
-    };
-
-    var allowOneGeoJSONFeature = function allowOneGeoJSONFeature(mode, geojson) {
-      switch (mode) {
-        case MapDrawMode.BOX:
-        case MapDrawMode.POLYGON:
-          return geojson.features[0].geometry.coordinates.length > 1 ? produce__default["default"](geojson, function (draft) {
-            draft.features[0].geometry.coordinates = [draft.features[0].geometry.coordinates[1]];
-          }) : geojson;
-
-        default:
-          return geojson;
-      }
-    };
-
-    var MapViewGeoJson = function MapViewGeoJson(_a) {
-      var geoJSONs = _a.geoJSONs,
-          _b = _a.setLayerGeoJSONs,
-          setLayerGeoJSONs = _b === void 0 ? function () {} : _b,
-          _c = _a.layerDrawModes,
-          layerDrawModes = _c === void 0 ? {
-        start: null,
-        end: null
-      } : _c,
-          _d = _a.drawMode,
-          drawMode = _d === void 0 ? {
-        start: null,
-        end: null
-      } : _d,
-          _e = _a.setDrawMode,
-          setDrawMode = _e === void 0 ? function () {} : _e,
-          _f = _a.exitDrawModeCallbackStart,
-          exitDrawModeCallbackStart = _f === void 0 ? function () {} : _f,
-          _g = _a.exitDrawModeCallbackEnd,
-          exitDrawModeCallbackEnd = _g === void 0 ? function () {} : _g;
-      var dispatch = reactRedux.useDispatch();
-      var firstMap = reactRedux.useSelector(function (store) {
-        return core.mapSelectors.getFirstMap(store);
-      }, reactRedux.shallowEqual);
-      var firstMapId = firstMap && firstMap.id ? firstMap.id : null;
-      var mapLayers = reactRedux.useSelector(function (store) {
-        return core.mapSelectors.getMapLayers(store, firstMapId);
-      }, reactRedux.shallowEqual);
-      var mapDimensions = reactRedux.useSelector(function (store) {
-        return core.mapSelectors.getMapDimensions(store, firstMapId);
-      }, reactRedux.shallowEqual);
-      var mapId = React__namespace.useRef("sigmet-" + core.generateMapId()).current;
-      var timesliderId = React__namespace.useRef("sigmet-" + core.generateTimesliderId()).current;
-      var syncGroupAddGroup = React__namespace.useCallback(function (payload) {
-        dispatch(core.SyncGroups.actions.syncGroupAddGroup(payload));
-      }, [dispatch]);
-      var syncGroupAddTarget = React__namespace.useCallback(function (payload) {
-        dispatch(core.SyncGroups.actions.syncGroupAddTarget(payload));
-      }, [dispatch]);
-      React__namespace.useEffect(function () {
-        if (mapLayers && mapLayers.length) {
-          // use maplayers, but change layerId and current mapId
-          var layers = mapLayers.map(function (layer) {
-            return __assign(__assign({}, layer), {
-              id: core.generateLayerId(),
-              mapId: mapId
-            });
-          });
-          dispatch(core.mapActions.setLayers({
-            mapId: mapId,
-            layers: layers
-          }));
-        }
-
-        if (mapDimensions && mapDimensions.length) {
-          dispatch(core.mapActions.mapChangeDimension({
-            mapId: mapId,
-            dimension: mapDimensions[0],
-            origin: 'MapViewGeoJson'
-          }));
-        }
-
-        dispatch(core.mapActions.setBaseLayers({
-          mapId: mapId,
-          layers: [__assign(__assign({}, core.publicLayers.baseLayerGrey), {
-            id: "baselayer-" + mapId
-          }), __assign(__assign({}, core.publicLayers.overLayer), {
-            id: "countryborders-" + mapId
-          }), __assign(__assign({}, northSeaPlatforms), {
-            id: "northseaplatforms-" + mapId
-          }), __assign(__assign({}, majorAirportsEHAA), {
-            id: "majorairportsehaa-" + mapId
-          })]
-        }));
-        dispatch(core.mapActions.setBbox({
-          mapId: mapId,
-          bbox: srsAndBboxDefault.bbox,
-          srs: srsAndBboxDefault.srs
-        }));
-        syncGroupAddGroup({
-          groupId: 'Time_SigmetAirmet',
-          title: 'Group 1 for sigmet/airmet map',
-          type: core.SyncGroups.constants.SYNCGROUPS_TYPE_SETTIME
-        });
-        syncGroupAddTarget({
-          groupId: 'Time_SigmetAirmet',
-          targetId: mapId
-        });
-        syncGroupAddTarget({
-          groupId: 'Time_SigmetAirmet',
-          targetId: timesliderId
-        }); // eslint-disable-next-line react-hooks/exhaustive-deps
-      }, []);
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        style: {
-          position: 'relative',
-          height: '99%'
-        },
-        "data-testid": "MapView"
-      }, /*#__PURE__*/React__namespace.createElement(core.MapControls, null, /*#__PURE__*/React__namespace.createElement(core.LayerManagerMapButtonConnect, {
-        source: "module",
-        mapId: mapId
-      }), /*#__PURE__*/React__namespace.createElement(core.LegendMapButtonConnect, {
-        source: "module",
-        mapId: mapId
-      }), /*#__PURE__*/React__namespace.createElement(core.MultiDimensionSelectMapButtonsConnect, {
-        source: "module",
-        mapId: mapId
-      })), /*#__PURE__*/React__namespace.createElement(core.MapViewConnect, {
-        mapId: mapId
-      }, /*#__PURE__*/React__namespace.createElement(core.MapViewLayer, {
-        id: "geojsonlayer-fir-" + mapId,
-        isInEditMode: false,
-        geojson: geoJSONs.fir
-      }), /*#__PURE__*/React__namespace.createElement(core.MapViewLayer, {
-        id: "geojsonlayer-end-" + mapId,
-        isInEditMode: drawMode.end !== null && layerDrawModes.end !== null,
-        geojson: geoJSONs.end,
-        drawMode: layerDrawModes.end,
-        updateGeojson: function updateGeojson(geojson) {
-          var end = allowOneGeoJSONFeature(layerDrawModes.end, geojson);
-          setLayerGeoJSONs(__assign(__assign({}, geoJSONs), {
-            end: end
-          }));
-        },
-        exitDrawModeCallback: function exitDrawModeCallback() {
-          setDrawMode({
-            start: null,
-            end: null
-          });
-          exitDrawModeCallbackEnd();
-        },
-        featureNrToEdit: 0
-      }), /*#__PURE__*/React__namespace.createElement(core.MapViewLayer, {
-        id: "geojsonlayer-start-" + mapId,
-        isInEditMode: drawMode.start !== null && layerDrawModes.start !== null,
-        geojson: geoJSONs.start,
-        drawMode: layerDrawModes.start,
-        updateGeojson: function updateGeojson(geojson) {
-          var start = allowOneGeoJSONFeature(layerDrawModes.start, geojson);
-          setLayerGeoJSONs(__assign(__assign({}, geoJSONs), {
-            start: start
-          }));
-        },
-        exitDrawModeCallback: function exitDrawModeCallback() {
-          setDrawMode({
-            start: null,
-            end: null
-          });
-          exitDrawModeCallbackStart();
-        },
-        featureNrToEdit: 0
-      }), /*#__PURE__*/React__namespace.createElement(core.MapViewLayer, {
-        id: "geojsonlayer-intersection-end-" + mapId,
-        isInEditMode: false,
-        geojson: geoJSONs.intersectionEnd
-      }), /*#__PURE__*/React__namespace.createElement(core.MapViewLayer, {
-        id: "geojsonlayer-intersection-start-" + mapId,
-        isInEditMode: false,
-        geojson: geoJSONs.intersectionStart
-      })), /*#__PURE__*/React__namespace.createElement("div", {
-        style: {
-          position: 'absolute',
-          left: '0',
-          bottom: '0',
-          zIndex: 1000,
-          width: '100%'
-        }
-      }, /*#__PURE__*/React__namespace.createElement(core.TimeSliderConnect, {
-        sourceId: timesliderId,
-        mapId: mapId
-      })), /*#__PURE__*/React__namespace.createElement(core.LegendConnect, {
-        showMapId: true,
-        mapId: mapId
-      }));
-    };
-
     var type = "FeatureCollection";
     var features = [
     	{
@@ -826,36 +284,351 @@
     	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)
-     * */
+    /* *
+     * 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,
+        bottom: 5808323.764379622,
+        right: 2219822.701688853,
+        top: 8298305.647311475
+      },
+      srs: 'EPSG:3857'
+    };
+    var featurePropsStart = {
+      stroke: '#f24a00',
+      'stroke-width': 1.5,
+      'stroke-opacity': 1,
+      fill: '#f24a00',
+      'fill-opacity': 0.25
+    };
+    var featurePropsEnd = {
+      stroke: '#6e1e91',
+      'stroke-width': 1.5,
+      'stroke-opacity': 1,
+      fill: '#6e1e91',
+      'fill-opacity': 0.25
+    };
+    var featurePropsIntersectionStart = {
+      stroke: '#f24a00',
+      'stroke-width': 1.5,
+      'stroke-opacity': 1,
+      fill: '#f24a00',
+      'fill-opacity': 0.5
+    };
+    var featurePropsIntersectionEnd = {
+      stroke: '#6e1e91',
+      'stroke-width': 1.5,
+      'stroke-opacity': 1,
+      fill: '#6e1e91',
+      'fill-opacity': 0.5
+    };
+    var featurePropsFIR = {
+      stroke: '#0075a9',
+      'stroke-width': 1.5,
+      'stroke-opacity': 1,
+      fill: '#0075a9',
+      'fill-opacity': 0.0
+    };
+    var featurePropsUnStyled = {
+      stroke: '#FF0000',
+      'stroke-width': 10.0,
+      'stroke-opacity': 1,
+      fill: '#0000FF',
+      'fill-opacity': 1.0
+    };
+    var emptyPolygonGeoJSONStart = {
+      type: 'FeatureCollection',
+      features: [{
+        type: 'Feature',
+        properties: __assign(__assign({}, featurePropsUnStyled), {
+          selectionType: 'poly'
+        }),
+        geometry: {
+          type: 'Polygon',
+          coordinates: [[]]
+        }
+      }]
+    };
+    var emptyPolygonGeoJSONEnd = {
+      type: 'FeatureCollection',
+      features: [{
+        type: 'Feature',
+        properties: __assign(__assign({}, featurePropsUnStyled), {
+          selectionType: 'poly'
+        }),
+        geometry: {
+          type: 'Polygon',
+          coordinates: [[]]
+        }
+      }]
+    };
+    var emptyBoxGeoJSONStart = {
+      type: 'FeatureCollection',
+      features: [{
+        type: 'Feature',
+        properties: __assign({
+          _adaguctype: 'box',
+          selectionType: 'box'
+        }, featurePropsUnStyled),
+        geometry: {
+          type: 'Polygon',
+          coordinates: [[]]
+        }
+      }]
+    };
+    var emptyBoxGeoJSONEnd = {
+      type: 'FeatureCollection',
+      features: [{
+        type: 'Feature',
+        properties: __assign({
+          _adaguctype: 'box',
+          selectionType: 'box'
+        }, featurePropsUnStyled),
+        geometry: {
+          type: 'Polygon',
+          coordinates: [[]]
+        }
+      }]
+    };
+    var emptyPointsGeojsonStart = {
+      type: 'FeatureCollection',
+      features: [{
+        type: 'Feature',
+        properties: __assign(__assign({}, featurePropsUnStyled), {
+          selectionType: 'point'
+        }),
+        geometry: {
+          type: 'Point',
+          coordinates: []
+        }
+      }]
+    };
+    var emptyPointsGeojsonEnd = {
+      type: 'FeatureCollection',
+      features: [{
+        type: 'Feature',
+        properties: __assign(__assign({}, featurePropsUnStyled), {
+          selectionType: 'point'
+        }),
+        geometry: {
+          type: 'Point',
+          coordinates: []
+        }
+      }]
+    };
+    var geoJSONTemplate = {
+      POINT: {
+        start: emptyPointsGeojsonStart,
+        end: emptyPointsGeojsonEnd
+      },
+      BOX: {
+        start: emptyBoxGeoJSONStart,
+        end: emptyBoxGeoJSONEnd
+      },
+      POLYGON: {
+        start: emptyPolygonGeoJSONStart,
+        end: emptyPolygonGeoJSONEnd
+      },
+      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) {
@@ -1112,21 +885,19 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var styles$4 = {
-      productForm: {
-        overflowY: 'scroll',
-        overflowX: 'hidden',
-        height: '100%',
-        width: '100%'
-      },
+    var styles$2 = {
       label: {
-        paddingTop: '15px'
+        fontSize: '0.875rem',
+        marginTop: 2,
+        textAlign: 'right'
       },
       body: {
         paddingTop: '17px'
       },
       containerItem: {
-        paddingTop: '8px'
+        ' .MuiTypography-subtitle1': {
+          marginTop: 1
+        }
       },
       volcanicField: {
         marginBottom: 2
@@ -1154,7 +925,22 @@
         opacity: '1'
       },
       drawSection: {
-        padding: '10px 0px'
+        '+ .MuiGrid-item': {
+          paddingTop: 5
+        },
+        ' .MuiTypography-subtitle1': {
+          marginTop: 1
+        }
+      },
+      helperText: {
+        ' .MuiFormHelperText-root': {
+          position: 'absolute',
+          top: 56,
+          '&.Mui-error': {
+            top: 'auto',
+            position: 'relative'
+          }
+        }
       }
     };
 
@@ -1180,6 +966,31 @@
       }, restProps));
     };
 
+    var ProductFormFieldLayout = function ProductFormFieldLayout(_a) {
+      var title = _a.title,
+          children = _a.children,
+          props = __rest(_a, ["title", "children"]);
+
+      return /*#__PURE__*/React__default["default"].createElement(material.Grid, __assign({
+        item: true,
+        container: true,
+        spacing: 3
+      }, props), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true,
+        xs: 4,
+        container: true,
+        justifyContent: "flex-end"
+      }, title && /*#__PURE__*/React__default["default"].createElement(material.Typography, {
+        variant: "subtitle1",
+        sx: styles$2.label
+      }, title)), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true,
+        xs: 8,
+        container: true,
+        justifyContent: "flex-start"
+      }, children));
+    };
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -1193,8 +1004,8 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
 
     var Change = function Change(_a) {
@@ -1202,24 +1013,9 @@
           isReadOnly = _a.isReadOnly;
       var watch = reactHookForm.useFormContext().watch;
       var isRequired = shared.useDraftFormHelpers().isRequired;
-      return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        container: true,
-        spacing: 2,
-        sx: styles$4.containerItem
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 4,
-        container: true,
-        justifyContent: "flex-end"
-      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        variant: "subtitle1",
-        sx: styles$4.label
-      }, "Change")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 8,
-        container: true,
-        justifyContent: "flex-start"
+      return /*#__PURE__*/React__default["default"].createElement(ProductFormFieldLayout, {
+        title: "Change",
+        sx: styles$2.containerItem
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 12
@@ -1246,7 +1042,7 @@
         label: "Intensifying",
         disabled: isDisabled,
         "data-testid": "change-INTSF"
-      })))));
+      }))));
     };
 
     /* *
@@ -1262,22 +1058,19 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
-    var styles$3 = {
-      drawButtons: {
-        color: '#0075a9',
-        borderRadius: '5px',
-        border: 'solid 1px #0075a9',
-        padding: '2px'
-      },
-      drawButtonsSelected: {
-        color: 'white',
-        backgroundColor: '#0075a9',
+    var styles$1 = {
+      radioInput: {
+        padding: 1,
         borderRadius: '5px',
-        border: 'solid 1px #0075a9',
-        padding: '2px'
+        backgroundColor: 'geowebColors.buttons.tool.default.fill',
+        color: 'geowebColors.buttons.tool.default.color',
+        '&.Mui-checked': {
+          backgroundColor: 'geowebColors.buttons.primary.default.fill',
+          color: 'geowebColors.buttons.primary.default.color'
+        }
       }
     };
 
@@ -1291,88 +1084,74 @@
         xs: 12,
         container: true,
         justifyContent: "space-between",
-        "data-testid": "drawtools"
+        "data-testid": "drawtools",
+        spacing: 1
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true
       }, /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
         title: "Drop a point as " + type + " position"
       }, /*#__PURE__*/React__default["default"].createElement(material.Radio, {
-        icon: /*#__PURE__*/React__default["default"].createElement(theme.Location, {
-          sx: styles$3.drawButtons
-        }),
+        icon: /*#__PURE__*/React__default["default"].createElement(theme.Location, null),
         value: true,
-        checkedIcon: /*#__PURE__*/React__default["default"].createElement(theme.Location, {
-          sx: styles$3.drawButtonsSelected
-        }),
+        checkedIcon: /*#__PURE__*/React__default["default"].createElement(theme.Location, null),
         checked: drawMode === MapDrawMode.POINT,
         onChange: function onChange() {
           setDrawMode(MapDrawMode.POINT);
         },
-        "data-testid": "drawtools-point"
+        "data-testid": "drawtools-point",
+        sx: styles$1.radioInput
       }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true
       }, /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
         title: "Draw a box as " + type + " position"
       }, /*#__PURE__*/React__default["default"].createElement(material.Radio, {
-        icon: /*#__PURE__*/React__default["default"].createElement(theme.DrawRegion, {
-          sx: styles$3.drawButtons
-        }),
-        checkedIcon: /*#__PURE__*/React__default["default"].createElement(theme.DrawRegion, {
-          sx: styles$3.drawButtonsSelected
-        }),
+        icon: /*#__PURE__*/React__default["default"].createElement(theme.DrawRegion, null),
+        checkedIcon: /*#__PURE__*/React__default["default"].createElement(theme.DrawRegion, null),
         checked: drawMode === MapDrawMode.BOX,
         onChange: function onChange() {
           setDrawMode(MapDrawMode.BOX);
         },
-        "data-testid": "drawtools-box"
+        "data-testid": "drawtools-box",
+        sx: styles$1.radioInput
       }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true
       }, /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
         title: "Draw a shape as " + type + " position"
       }, /*#__PURE__*/React__default["default"].createElement(material.Radio, {
-        icon: /*#__PURE__*/React__default["default"].createElement(theme.DrawPolygon, {
-          sx: styles$3.drawButtons
-        }),
-        checkedIcon: /*#__PURE__*/React__default["default"].createElement(theme.DrawPolygon, {
-          sx: styles$3.drawButtonsSelected
-        }),
+        icon: /*#__PURE__*/React__default["default"].createElement(theme.DrawPolygon, null),
+        checkedIcon: /*#__PURE__*/React__default["default"].createElement(theme.DrawPolygon, null),
         checked: drawMode === MapDrawMode.POLYGON,
         onChange: function onChange() {
           setDrawMode(MapDrawMode.POLYGON);
         },
-        "data-testid": "drawtools-polygon"
+        "data-testid": "drawtools-polygon",
+        sx: styles$1.radioInput
       }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true
       }, /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
         title: "Set FIR as " + type + " position"
       }, /*#__PURE__*/React__default["default"].createElement(material.Radio, {
-        icon: /*#__PURE__*/React__default["default"].createElement(theme.DrawFIRLand, {
-          sx: styles$3.drawButtons
-        }),
-        checkedIcon: /*#__PURE__*/React__default["default"].createElement(theme.DrawFIRLand, {
-          sx: styles$3.drawButtonsSelected
-        }),
+        icon: /*#__PURE__*/React__default["default"].createElement(theme.DrawFIRLand, null),
+        checkedIcon: /*#__PURE__*/React__default["default"].createElement(theme.DrawFIRLand, null),
         checked: drawMode === MapDrawMode.FIR,
         onChange: function onChange() {
           setDrawMode(MapDrawMode.FIR);
         },
-        "data-testid": "drawtools-fir"
+        "data-testid": "drawtools-fir",
+        sx: styles$1.radioInput
       }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true
       }, /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
         title: "Remove geometry"
       }, /*#__PURE__*/React__default["default"].createElement(material.Radio, {
-        icon: /*#__PURE__*/React__default["default"].createElement(theme.Delete, {
-          sx: styles$3.drawButtons
-        }),
-        checkedIcon: /*#__PURE__*/React__default["default"].createElement(theme.Delete, {
-          sx: styles$3.drawButtonsSelected
-        }),
+        icon: /*#__PURE__*/React__default["default"].createElement(theme.Delete, null),
+        checkedIcon: /*#__PURE__*/React__default["default"].createElement(theme.Delete, null),
         checked: drawMode === MapDrawMode.DELETE,
         onChange: function onChange() {
           setDrawMode(MapDrawMode.DELETE);
         },
-        "data-testid": "drawtools-delete"
+        "data-testid": "drawtools-delete",
+        sx: styles$1.radioInput
       }))));
     };
 
@@ -1603,47 +1382,86 @@
       if (productListItem === null) return 'new';
       return canBeOptions.includes('PUBLISHED') ? 'edit' : 'view';
     };
+    var buttonStyle = {
+      minWidth: 96
+    };
     var getProductFormLifecycleButtons = function getProductFormLifecycleButtons(canBe, onButtonPress) {
-      return /*#__PURE__*/React__namespace.createElement(material.Grid, {
-        container: true,
-        spacing: 1,
-        justifyContent: "flex-end"
-      }, canBe.includes('DISCARDED') && /*#__PURE__*/React__namespace.createElement(material.Grid, {
-        item: true
-      }, /*#__PURE__*/React__namespace.createElement(material.Button, {
-        color: "secondary",
-        onClick: function onClick() {
-          onButtonPress('DISCARDED');
-        },
+      var hasDiscardButton = canBe.includes('DISCARDED');
+
+      var onDiscard = function onDiscard() {
+        return onButtonPress('DISCARDED');
+      };
+
+      var hasSaveButton = canBe.includes('DRAFTED');
+
+      var onSave = function onSave() {
+        return onButtonPress('DRAFT');
+      };
+
+      var hasCancelButton = canBe.includes('CANCELLED');
+
+      var onCancel = function onCancel() {
+        return onButtonPress('CANCELLED');
+      };
+
+      var hasPublishButton = canBe.includes('PUBLISHED');
+
+      var onPublish = function onPublish() {
+        return onButtonPress('PUBLISHED');
+      };
+
+      return /*#__PURE__*/React__namespace.createElement(material.Box, {
+        sx: {
+          display: 'flex',
+          justifyContent: 'flex-end',
+          'button:not(:first-of-type)': {
+            marginLeft: 1
+          }
+        }
+      }, /*#__PURE__*/React__namespace.createElement(material.Box, {
+        display: {
+          xs: 'none',
+          lg: 'block'
+        }
+      }, hasDiscardButton && /*#__PURE__*/React__namespace.createElement(material.Button, {
+        variant: "flat",
+        onClick: onDiscard,
+        sx: buttonStyle,
         "data-testid": "productform-dialog-discard"
-      }, "Discard")), canBe.includes('DRAFTED') && /*#__PURE__*/React__namespace.createElement(material.Grid, {
-        item: true
-      }, /*#__PURE__*/React__namespace.createElement(material.Button, {
-        color: "secondary",
-        variant: "outlined",
-        onClick: function onClick() {
-          onButtonPress('DRAFT');
-        },
+      }, "DISCARD"), hasSaveButton && /*#__PURE__*/React__namespace.createElement(material.Button, {
+        variant: "tertiary",
+        onClick: onSave,
+        sx: buttonStyle,
         "data-testid": "productform-dialog-draft"
-      }, "Save")), canBe.includes('CANCELLED') && /*#__PURE__*/React__namespace.createElement(material.Grid, {
-        item: true
-      }, /*#__PURE__*/React__namespace.createElement(material.Button, {
-        color: "secondary",
-        variant: "contained",
-        onClick: function onClick() {
-          onButtonPress('CANCELLED');
-        },
+      }, "Save"), hasCancelButton && /*#__PURE__*/React__namespace.createElement(material.Button, {
+        variant: "tertiary",
+        onClick: onCancel,
+        sx: buttonStyle,
         "data-testid": "productform-dialog-cancel"
-      }, "Cancel")), canBe.includes('PUBLISHED') && /*#__PURE__*/React__namespace.createElement(material.Grid, {
-        item: true
-      }, /*#__PURE__*/React__namespace.createElement(material.Button, {
-        color: "secondary",
-        variant: "contained",
-        onClick: function onClick() {
-          onButtonPress('PUBLISHED');
-        },
+      }, "Cancel"), hasPublishButton && /*#__PURE__*/React__namespace.createElement(material.Button, {
+        variant: "primary",
+        onClick: onPublish,
+        sx: buttonStyle,
         "data-testid": "productform-dialog-publish"
-      }, "Publish")));
+      }, "Publish")), /*#__PURE__*/React__namespace.createElement(material.Box, {
+        display: {
+          lg: 'none'
+        }
+      }, /*#__PURE__*/React__namespace.createElement(shared.ToggleMenu, {
+        menuItems: __spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(hasDiscardButton ? [{
+          text: 'Discard',
+          action: onDiscard
+        }] : [])), __read(hasSaveButton ? [{
+          text: 'Save',
+          action: onSave
+        }] : [])), __read(hasCancelButton ? [{
+          text: 'Cancel',
+          action: onCancel
+        }] : [])), __read(hasPublishButton ? [{
+          text: 'Publish',
+          action: onPublish
+        }] : []))
+      })));
     };
     var hasValue = function hasValue(value) {
       return value !== null && value.toString() !== 'NaN';
@@ -1927,24 +1745,9 @@
       var selectedFIR = watch('locationIndicatorATSR'); // Get allowed level units based on selected FIR - if no FIR selected, allow all default units
 
       var allowedLevelUnitsForFir = getAllowedUnits(selectedFIR, allowedUnits, 'level_unit', LevelUnits);
-      return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        container: true,
-        spacing: 2,
-        sx: styles$4.containerItem
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 4,
-        container: true,
-        justifyContent: "flex-end"
-      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        variant: "subtitle1",
-        sx: styles$4.label
-      }, "Levels")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 8,
-        container: true,
-        justifyContent: "flex-start"
+      return /*#__PURE__*/React__default["default"].createElement(ProductFormFieldLayout, {
+        title: "Levels",
+        sx: styles$2.containerItem
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 12
@@ -1984,10 +1787,14 @@
       }), watch('levelInfoMode') === 'AT' || watch('levelInfoMode') === 'TOPS' ? /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 12,
-        container: true
+        container: true,
+        spacing: 2,
+        justifyItems: "flex-end",
+        alignItems: "flex-end"
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        xs: 3
+        xs: 12,
+        md: 3
       }, (!isReadOnly || watch('levelInfoMode') === 'TOPS') && /*#__PURE__*/React__default["default"].createElement(material.FormControlLabel, {
         control: /*#__PURE__*/React__default["default"].createElement(material.Checkbox, {
           checked: watch('levelInfoMode') === 'TOPS',
@@ -2003,7 +1810,8 @@
         label: "Tops"
       })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        xs: 3
+        xs: 4,
+        md: 3
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormSelect, {
         name: "level.unit",
         label: "Unit",
@@ -2012,7 +1820,7 @@
             isRequired: isRequired
           }
         },
-        sx: styles$4.unit,
+        sx: styles$2.unit,
         disabled: isDisabled,
         defaultValue: 'FL',
         onChange: function onChange() {
@@ -2029,7 +1837,8 @@
         }, allowedLevelUnitsForFir[key]);
       }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        xs: 6
+        xs: 8,
+        md: 6
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormNumberField, {
         name: "level.value",
         "data-testid": "level.value",
@@ -2063,13 +1872,16 @@
       }), watch('levelInfoMode') === 'BETW' || watch('levelInfoMode') === 'BETW_SFC' ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 12,
-        container: true
+        container: true,
+        spacing: 2
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        xs: 3
+        xs: 12,
+        md: 3
       }), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        xs: 3
+        xs: 4,
+        md: 3
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormSelect, {
         name: "level.unit",
         label: "Unit",
@@ -2082,7 +1894,7 @@
             }
           }
         },
-        sx: styles$4.unit,
+        sx: styles$2.unit,
         disabled: isDisabled,
         defaultValue: 'FL',
         onChange: function onChange() {
@@ -2097,11 +1909,12 @@
         }, allowedLevelUnitsForFir[key]);
       }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        xs: 6
+        xs: 8,
+        md: 6
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormNumberField, {
         name: "level.value",
         label: "Upper level",
-        sx: styles$4.levelField,
+        sx: styles$2.levelField,
         rules: {
           validate: {
             isRequired: isRequired,
@@ -2128,10 +1941,14 @@
       }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 12,
-        container: true
+        container: true,
+        spacing: 2,
+        justifyItems: "flex-end",
+        alignItems: "flex-end"
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        xs: 3
+        xs: 12,
+        md: 3
       }, (!isReadOnly || watch('levelInfoMode') === 'BETW_SFC') && /*#__PURE__*/React__default["default"].createElement(material.FormControlLabel, {
         control: /*#__PURE__*/React__default["default"].createElement(material.Checkbox, {
           checked: watch('levelInfoMode') === 'BETW_SFC',
@@ -2149,7 +1966,8 @@
         label: "SFC"
       })), watch('levelInfoMode') !== 'BETW_SFC' && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        xs: 3
+        xs: 4,
+        md: 3
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormSelect, {
         name: "lowerLevel.unit",
         label: "Unit",
@@ -2162,7 +1980,7 @@
             }
           }
         },
-        sx: styles$4.unit,
+        sx: styles$2.unit,
         disabled: isDisabled,
         defaultValue: getValues('level.unit') || 'FL',
         onChange: function onChange() {
@@ -2181,7 +1999,8 @@
         }, allowedLevelUnitsForFir[key]);
       }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        xs: 6
+        xs: 8,
+        md: 6
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormNumberField, {
         name: "lowerLevel.value",
         label: "Lower level",
@@ -2217,10 +2036,14 @@
       }), watch('levelInfoMode') === 'ABV' || watch('levelInfoMode') === 'TOPS_ABV' ? /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 12,
-        container: true
+        container: true,
+        spacing: 2,
+        justifyItems: "flex-end",
+        alignItems: "flex-end"
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        xs: 3
+        xs: 12,
+        md: 3
       }, (!isReadOnly || watch('levelInfoMode') === 'TOPS_ABV') && /*#__PURE__*/React__default["default"].createElement(material.FormControlLabel, {
         control: /*#__PURE__*/React__default["default"].createElement(material.Checkbox, {
           checked: watch('levelInfoMode') === 'TOPS_ABV',
@@ -2235,7 +2058,8 @@
         "data-testid": "levels-TOPS_ABV"
       })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        xs: 3
+        xs: 4,
+        md: 3
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormSelect, {
         name: "level.unit",
         label: "Unit",
@@ -2244,7 +2068,7 @@
             isRequired: isRequired
           }
         },
-        sx: styles$4.unit,
+        sx: styles$2.unit,
         disabled: isDisabled,
         defaultValue: 'FL',
         onChange: function onChange() {
@@ -2261,7 +2085,8 @@
         }, allowedLevelUnitsForFir[key]);
       }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        xs: 6
+        xs: 8,
+        md: 6
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormNumberField, {
         name: "level.value",
         label: "Level",
@@ -2285,7 +2110,7 @@
         },
         disabled: isDisabled,
         autoFocus: true
-      }))) : null))));
+      }))) : null)));
     };
 
     /* *
@@ -2301,8 +2126,8 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
 
     var ObservationForecast = function ObservationForecast(_a) {
@@ -2315,20 +2140,13 @@
           getValues = _b.getValues;
 
       var isRequired = shared.useDraftFormHelpers().isRequired;
-      return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        container: true,
-        spacing: 2
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 4,
-        container: true,
-        justifyContent: "flex-end"
-      }), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 8,
-        container: true,
-        justifyContent: "flex-start"
+      return /*#__PURE__*/React__default["default"].createElement(ProductFormFieldLayout, {
+        sx: {
+          paddingTop: '8px!important',
+          '+ .MuiGrid-item': {
+            paddingTop: 5
+          }
+        }
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormRadioGroup, {
         name: "isObservationOrForecast",
         disabled: isDisabled,
@@ -2352,7 +2170,7 @@
         label: "Forecast",
         disabled: isDisabled,
         "data-testid": "isObservationOrForecast-FCST"
-      }))));
+      })));
     };
 
     /* *
@@ -2368,8 +2186,8 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
     var ForecastTimeValidation = 'Forecast time should lie between the valid start and valid end time';
 
@@ -2382,23 +2200,8 @@
         return null;
       } : _b;
       var watch = reactHookForm.useFormContext().watch;
-      return (!isReadOnly || watch('observationOrForecastTime') !== null) && /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        container: true,
-        spacing: 2
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 4,
-        container: true,
-        justifyContent: "flex-end"
-      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        variant: "subtitle1",
-        sx: styles$4.label
-      }, "At")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 8,
-        container: true,
-        justifyContent: "flex-start"
+      return (!isReadOnly || watch('observationOrForecastTime') !== null) && /*#__PURE__*/React__default["default"].createElement(ProductFormFieldLayout, {
+        title: "At"
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormDateTime, {
         disablePast: watch('isObservationOrForecast') === 'FCST',
         disableFuture: watch('isObservationOrForecast') === 'OBS',
@@ -2416,8 +2219,9 @@
         },
         disabled: isDisabled,
         helperText: helperText,
-        onChange: onChange
-      })));
+        onChange: onChange,
+        sx: styles$2.helperText
+      }));
     };
 
     var Phenomenon = function Phenomenon(_a) {
@@ -2434,23 +2238,8 @@
           trigger = _c.trigger;
 
       var phenomenaList = productType === 'sigmet' ? SigmetPhenomena : AirmetPhenomena;
-      return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        container: true,
-        spacing: 2
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 4,
-        container: true,
-        justifyContent: "flex-end"
-      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        variant: "subtitle1",
-        sx: styles$4.label
-      }, "What")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 8,
-        container: true,
-        justifyContent: "flex-start"
+      return /*#__PURE__*/React__default["default"].createElement(ProductFormFieldLayout, {
+        title: "What"
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormSelect, {
         name: "phenomenon",
         label: "Select phenomenon",
@@ -2485,7 +2274,7 @@
           value: key,
           key: key
         }, phenomenaList[key]);
-      }))));
+      })));
     };
 
     /* *
@@ -2501,8 +2290,8 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
     var noIntersectionMessage$1 = 'The start position needs to be (partly) inside the FIR';
     var maximum6PointsMessage$1 = 'The start position drawing allows a maximum of 6 individual points';
@@ -2522,22 +2311,9 @@
           watch = _c.watch;
 
       var isDraft = shared.useDraftFormHelpers().isDraft;
-      return !isReadOnly && /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        container: true,
-        spacing: 2,
-        sx: styles$4.drawSection
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 4,
-        container: true,
-        justifyContent: "flex-end"
-      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        variant: "subtitle1",
-        sx: styles$4.label
-      }, "Start position")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 8,
+      return !isReadOnly && /*#__PURE__*/React__default["default"].createElement(ProductFormFieldLayout, {
+        title: "Start position",
+        sx: styles$2.drawSection,
         "data-testid": "startGeometry"
       }, /*#__PURE__*/React__default["default"].createElement(DrawTools, {
         type: StartOrEndDrawing.start,
@@ -2547,7 +2323,7 @@
         }
       }), drawMode[StartOrEndDrawing.start] && /*#__PURE__*/React__default["default"].createElement(material.FormHelperText, {
         variant: "filled",
-        sx: styles$4.quitDrawModeMessage
+        sx: styles$2.quitDrawModeMessage
       }, exitDrawModeMessage), !!errors.startGeometry && /*#__PURE__*/React__default["default"].createElement(material.FormHelperText, {
         error: true,
         variant: "filled"
@@ -2577,7 +2353,7 @@
         }
       }), /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormHiddenInput, {
         name: "startGeometryIntersect"
-      })));
+      }));
     };
 
     /* *
@@ -2593,8 +2369,8 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
     var movementStepValMessageKT = 'Speed should be rounded to the nearest 5kt';
     var movementStepValMessageKMH = 'Speed should be rounded to the nearest 10kmh';
@@ -2671,24 +2447,9 @@
       var selectedFIR = watch('locationIndicatorATSR'); // Get allowed movement units based on selected FIR - if no FIR selected, allow all units
 
       var allowedMovementUnitsForFir = getAllowedUnits(selectedFIR, allowedUnits, 'movement_unit', MovementUnit);
-      return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        container: true,
-        spacing: 2,
-        sx: styles$4.containerItem
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 4,
-        container: true,
-        justifyContent: "flex-end"
-      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        variant: "subtitle1",
-        sx: styles$4.label
-      }, "Progress")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 8,
-        container: true,
-        justifyContent: "flex-start"
+      return /*#__PURE__*/React__default["default"].createElement(ProductFormFieldLayout, {
+        title: "Progress",
+        sx: styles$2.containerItem
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 12
@@ -2727,7 +2488,7 @@
         rules: {
           validate: isRequired
         },
-        sx: styles$4.movement,
+        sx: styles$2.movement,
         disabled: isDisabled,
         "data-testid": "movement-movementDirection",
         onChange: function onChange(event) {
@@ -2754,7 +2515,7 @@
         rules: {
           validate: isRequired
         },
-        sx: styles$4.unit,
+        sx: styles$2.unit,
         disabled: isDisabled,
         defaultValue: 'KT',
         "data-testid": "movement-movementUnit",
@@ -2810,7 +2571,7 @@
         item: true,
         xs: 12,
         "data-testid": "endGeometry",
-        sx: styles$4.drawSection
+        sx: styles$2.drawSection
       }, !isReadOnly && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(DrawTools, {
         "data-testid": "endGeometry-drawTools",
         type: StartOrEndDrawing.end,
@@ -2820,7 +2581,7 @@
         }
       }), drawMode[StartOrEndDrawing.end] && /*#__PURE__*/React__default["default"].createElement(material.FormHelperText, {
         variant: "filled",
-        sx: styles$4.quitDrawModeMessage
+        sx: styles$2.quitDrawModeMessage
       }, exitDrawModeMessage), !!errors.endGeometry && /*#__PURE__*/React__default["default"].createElement(material.FormHelperText, {
         error: true,
         variant: "filled"
@@ -2850,7 +2611,7 @@
         }
       }), /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormHiddenInput, {
         name: "endGeometryIntersect"
-      })))));
+      }))));
     };
 
     /* *
@@ -2866,8 +2627,8 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
 
     var SelectFIR = function SelectFIR(_a) {
@@ -2882,24 +2643,9 @@
           optionsFIR = _b.optionsFIR,
           allFIRS = _b.allFIRS;
 
-      return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        container: true,
-        spacing: 2,
-        sx: styles$4.containerItem
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 4,
-        container: true,
-        justifyContent: "flex-end"
-      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        variant: "subtitle1",
-        sx: styles$4.label
-      }, "Where")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 8,
-        container: true,
-        justifyContent: "flex-start"
+      return /*#__PURE__*/React__default["default"].createElement(ProductFormFieldLayout, {
+        title: "Where",
+        sx: styles$2.containerItem
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormSelect, {
         name: "locationIndicatorATSR",
         label: "Select FIR",
@@ -2931,7 +2677,7 @@
       }), /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormHiddenInput, {
         name: "firGeometry",
         defaultValue: getFir()
-      })));
+      }));
     };
 
     /* *
@@ -2947,8 +2693,8 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
 
     var Type = function Type(_a) {
@@ -2956,24 +2702,9 @@
           isDisabled = _a.isDisabled;
       var watch = reactHookForm.useFormContext().watch;
       var isRequired = shared.useDraftFormHelpers().isRequired;
-      return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        container: true,
-        spacing: 2,
-        sx: styles$4.containerItem
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 4,
-        container: true,
-        justifyContent: "flex-end"
-      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        variant: "subtitle1",
-        sx: styles$4.label
-      }, "Type")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 8,
-        container: true,
-        justifyContent: "flex-start"
+      return /*#__PURE__*/React__default["default"].createElement(ProductFormFieldLayout, {
+        title: "Type",
+        sx: styles$2.containerItem
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 12
@@ -3001,7 +2732,7 @@
         label: "Exercise",
         disabled: isDisabled,
         "data-testid": "type-EXERCISE"
-      })))));
+      }))));
     };
 
     /* *
@@ -3017,10 +2748,14 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
     var VALID_FROM_TIME_DELAY_IN_MINUTES = 30;
+    var VALID_FROM_ERROR_BEFORE_CURRENT = 'Valid from time cannot be before current time';
+    var getValidFromXHoursBeforeMessage = function getValidFromXHoursBeforeMessage(hours) {
+      return "Valid from time can be no more than " + hours + " hours after current time";
+    };
 
     var ValidFrom = function ValidFrom(_a) {
       var productType = _a.productType,
@@ -3036,23 +2771,8 @@
 
       var isRequired = shared.useDraftFormHelpers().isRequired;
       var config = productType === 'sigmet' ? sigmetConfig : airmetConfig;
-      return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        container: true,
-        spacing: 2
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 4,
-        container: true,
-        justifyContent: "flex-end"
-      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        variant: "subtitle1",
-        sx: styles$4.label
-      }, "Valid from")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 8,
-        container: true,
-        justifyContent: "flex-start"
+      return /*#__PURE__*/React__default["default"].createElement(ProductFormFieldLayout, {
+        title: "Valid from"
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormDateTime, {
         disablePast: true,
         name: "validDateStart",
@@ -3063,11 +2783,11 @@
             isValidDate: formFields.isValidDate,
             // The validity start can not be before the current time
             isValueBeforeCurrentTime: function isValueBeforeCurrentTime(value) {
-              return formFields.isXHoursBefore(value, moment__default["default"].utc().format(), 0) || 'Valid from time cannot be before current time';
+              return formFields.isXHoursBefore(value, moment__default["default"].utc().format(), 0) || VALID_FROM_ERROR_BEFORE_CURRENT;
             },
             // The current time can be no more than 4 hours before the validity start (12 for VA/TC SIGMET)
             isCurrentTimeXHoursBeforeValue: function isCurrentTimeXHoursBeforeValue(value) {
-              return formFields.isXHoursBefore(moment__default["default"].utc().format(), value, getHoursBeforeValidity(getValues('phenomenon'), getValues('locationIndicatorATSR'), config)) || "Valid from time can be no more than " + getHoursBeforeValidity(getValues('phenomenon'), getValues('locationIndicatorATSR'), config) + " hours after current time";
+              return formFields.isXHoursBefore(moment__default["default"].utc().format(), value, getHoursBeforeValidity(getValues('phenomenon'), getValues('locationIndicatorATSR'), config)) || getValidFromXHoursBeforeMessage(getHoursBeforeValidity(getValues('phenomenon'), getValues('locationIndicatorATSR'), config));
             }
           }
         },
@@ -3084,9 +2804,6 @@
         },
         disabled: isDisabled,
         "data-testid": "valid-from"
-      })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 6
       }));
     };
 
@@ -3103,8 +2820,8 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
     var DEFAULT_VALID_TIME_SIGMET = 3;
     var DEFAULT_VALID_TIME_AIRMET = 1;
@@ -3124,26 +2841,11 @@
           getValues = _c.getValues,
           trigger = _c.trigger;
 
-      var isRequired = shared.useDraftFormHelpers().isRequired;
-      var config = productType === 'sigmet' ? sigmetConfig : airmetConfig;
-      var defaultHoursValid = getDefaultHoursValid(productType);
-      return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        container: true,
-        spacing: 2
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 4,
-        container: true,
-        justifyContent: "flex-end"
-      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        variant: "subtitle1",
-        sx: styles$4.label
-      }, "Valid until")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 8,
-        container: true,
-        justifyContent: "flex-start"
+      var isRequired = shared.useDraftFormHelpers().isRequired;
+      var config = productType === 'sigmet' ? sigmetConfig : airmetConfig;
+      var defaultHoursValid = getDefaultHoursValid(productType);
+      return /*#__PURE__*/React__default["default"].createElement(ProductFormFieldLayout, {
+        title: "Valid until"
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormDateTime, {
         disablePast: true,
         name: "validDateEnd",
@@ -3174,29 +2876,9 @@
 
           _onChange();
         }
-      })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 6
       }));
     };
 
-    /* *
-     * Licensed under the Apache License, Version 2.0 (the "License");
-     * you may not use this file except in compliance with the License.
-     * You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
-     * */
-
     var VolcanicFields = function VolcanicFields(_a) {
       var isDisabled = _a.isDisabled,
           isReadOnly = _a.isReadOnly,
@@ -3224,7 +2906,7 @@
       }, (!isReadOnly || !!watch('vaSigmetVolcanoName')) && /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 12,
-        sx: styles$4.volcanicField
+        sx: styles$2.volcanicField
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormTextField, {
         name: "vaSigmetVolcanoName",
         label: "Volcano name",
@@ -3252,7 +2934,7 @@
             }
           }
         },
-        sx: styles$4.latitude,
+        sx: __assign(__assign({}, styles$2.latitude), styles$2.helperText),
         disabled: isDisabled,
         helperText: helperText,
         onChange: function onChange() {
@@ -3280,7 +2962,8 @@
         helperText: helperText,
         onChange: function onChange() {
           return trigger('vaSigmetVolcanoCoordinates.latitude');
-        }
+        },
+        sx: styles$2.helperText
       }))));
     };
 
@@ -3339,7 +3022,7 @@
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 12,
-        sx: styles$4.surfaceVisibility
+        sx: styles$2.surfaceVisibility
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormNumberField, {
         name: "visibilityValue",
         "data-testid": "surfaceVisibility-visibilityValue",
@@ -3444,7 +3127,7 @@
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 12,
-        sx: styles$4.surfaceWind
+        sx: styles$2.surfaceWind
       }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormNumberField, {
         name: "windDirection",
         label: "Set wind direction",
@@ -3480,7 +3163,7 @@
             isRequired: isRequired
           }
         },
-        sx: styles$4.unit,
+        sx: styles$2.unit,
         disabled: isDisabled,
         defaultValue: 'KT',
         "data-testid": "surfaceWind-windUnit",
@@ -3582,7 +3265,7 @@
         item: true,
         container: true,
         spacing: 2,
-        sx: styles$4.containerItem
+        sx: styles$2.containerItem
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 4,
@@ -3590,7 +3273,7 @@
         justifyContent: "flex-end"
       }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "subtitle1",
-        sx: styles$4.label
+        sx: styles$2.label
       }, "Levels")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 8,
@@ -3657,7 +3340,7 @@
             isRequired: isRequired
           }
         },
-        sx: styles$4.unit,
+        sx: styles$2.unit,
         disabled: isDisabled,
         defaultValue: 'FT',
         onChange: function onChange() {
@@ -3686,7 +3369,7 @@
         name: "cloudLevel.value",
         label: "Upper level",
         "data-testid": "cloudLevel-value",
-        sx: styles$4.levelField,
+        sx: styles$2.levelField,
         rules: {
           validate: {
             isRequired: isRequired,
@@ -3763,7 +3446,7 @@
             isRequired: isRequired
           }
         },
-        sx: styles$4.unit,
+        sx: styles$2.unit,
         disabled: isDisabled,
         defaultValue: getValues('cloudLevel.unit') ? getValues('cloudLevel.unit') : 'FT',
         onChange: function onChange() {
@@ -3817,22 +3500,6 @@
       })))))));
     };
 
-    var styles$2 = {
-      tacOutput: {
-        paddingTop: '16px',
-        whiteSpace: 'break-spaces'
-      },
-      tacLine: {
-        backgroundColor: '#FFF',
-        margin: '0',
-        padding: '.1em .1em .1em 0.8em',
-        textIndent: '-0.7em',
-        borderRadius: '3px',
-        '&:hover': {
-          backgroundColor: '#F4F4F4'
-        }
-      }
-    };
     var noTAC = 'Missing data: no TAC can be generated'; // Ensure we have enough data to retrieve a TAC
 
     var shouldRetrieveTAC = function shouldRetrieveTAC(product) {
@@ -3894,45 +3561,376 @@
                 ];
             }
           });
-        });
-      };
-
-      React__default["default"].useEffect(function () {
-        if (shouldRetrieveTAC(initialProduct)) {
-          retrieveTAC(initialProduct);
-        } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-      }, []);
-
-      var update = function update(formValues) {
-        if (shouldRetrieveTAC(formValues)) {
-          retrieveTAC(formValues);
-        } else if (isMounted.current) {
-          setTAC(noTAC);
+        });
+      };
+
+      React__default["default"].useEffect(function () {
+        if (shouldRetrieveTAC(initialProduct)) {
+          retrieveTAC(initialProduct);
+        } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+      }, []);
+
+      var update = function update(formValues) {
+        if (shouldRetrieveTAC(formValues)) {
+          retrieveTAC(formValues);
+        } else if (isMounted.current) {
+          setTAC(noTAC);
+        }
+      }; // eslint-disable-next-line react-hooks/exhaustive-deps
+
+
+      var delayedQuery = React__default["default"].useCallback(lodash.debounce(update, 1000), []);
+      return [TAC, delayedQuery];
+    };
+
+    var ProductFormTAC = function ProductFormTAC(_a) {
+      var tac = _a.tac;
+      var tacLines = tac.split('\n');
+      var hasTac = tacLines.length && tacLines.toString() !== noTAC;
+      return /*#__PURE__*/React__default["default"].createElement(material.Typography, {
+        variant: "body2",
+        component: "div",
+        sx: {
+          paddingTop: '16px',
+          whiteSpace: 'break-spaces'
+        },
+        "data-testid": "productform-tac-message"
+      }, tacLines.map(function (line) {
+        return /*#__PURE__*/React__default["default"].createElement(material.Box, {
+          component: "p",
+          key: line,
+          sx: {
+            margin: 0,
+            fontSize: hasTac ? '1.125rem' : '1rem',
+            fontWeight: 'normal',
+            fontStretch: 'normal',
+            fontStyle: 'normal',
+            lineHeight: 1.56,
+            letterSpacing: '0.5px'
+          },
+          "data-testid": "productform-tac-message-line"
+        }, line);
+      }));
+    };
+
+    var IssuedAt = function IssuedAt(_a) {
+      var date = _a.date;
+      return /*#__PURE__*/React__default["default"].createElement(ProductFormFieldLayout, {
+        title: "Issued at"
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true,
+        xs: 12
+      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
+        variant: "body2",
+        sx: __assign(__assign({}, styles$2.body), {
+          fontSize: '1rem',
+          color: 'geowebColors.buttons.primary.disabled.color'
+        })
+      }, date)));
+    };
+
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * */
+
+    var Tac = function Tac(_a) {
+      var tac = _a.tac,
+          children = _a.children;
+      return /*#__PURE__*/React__default["default"].createElement(ProductFormFieldLayout, {
+        title: "TAC",
+        sx: {
+          paddingTop: 2
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true,
+        xs: 12
+      }, /*#__PURE__*/React__default["default"].createElement(ProductFormTAC, {
+        tac: tac
+      }), children));
+    };
+
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * */
+    var adagucBaseUrl = 'https://adaguc-server-geoweb.geoweb.knmi.cloud/adagucserver';
+    var KNMIGeoWebOverlays = {
+      name: 'KNMIGeoWebOverlays',
+      url: adagucBaseUrl + "?dataset=OVL",
+      id: 'knmigeoweboverlays'
+    };
+    var northSeaPlatforms = {
+      service: KNMIGeoWebOverlays.url,
+      name: 'northseastations',
+      format: 'image/png',
+      layerType: core.mapTypes.LayerType.overLayer,
+      enabled: true
+    };
+    var majorAirportsEHAA = {
+      service: KNMIGeoWebOverlays.url,
+      name: 'airports',
+      format: 'image/png',
+      layerType: core.mapTypes.LayerType.overLayer,
+      enabled: true
+    };
+
+    var allowOneGeoJSONFeature = function allowOneGeoJSONFeature(mode, geojson) {
+      switch (mode) {
+        case MapDrawMode.BOX:
+        case MapDrawMode.POLYGON:
+          return geojson.features[0].geometry.coordinates.length > 1 ? produce__default["default"](geojson, function (draft) {
+            draft.features[0].geometry.coordinates = [draft.features[0].geometry.coordinates[1]];
+          }) : geojson;
+
+        default:
+          return geojson;
+      }
+    };
+
+    var MapViewGeoJson = function MapViewGeoJson(_a) {
+      var geoJSONs = _a.geoJSONs,
+          _b = _a.setLayerGeoJSONs,
+          setLayerGeoJSONs = _b === void 0 ? function () {} : _b,
+          _c = _a.layerDrawModes,
+          layerDrawModes = _c === void 0 ? {
+        start: null,
+        end: null
+      } : _c,
+          _d = _a.drawMode,
+          drawMode = _d === void 0 ? {
+        start: null,
+        end: null
+      } : _d,
+          _e = _a.setDrawMode,
+          setDrawMode = _e === void 0 ? function () {} : _e,
+          _f = _a.exitDrawModeCallbackStart,
+          exitDrawModeCallbackStart = _f === void 0 ? function () {} : _f,
+          _g = _a.exitDrawModeCallbackEnd,
+          exitDrawModeCallbackEnd = _g === void 0 ? function () {} : _g;
+      var dispatch = reactRedux.useDispatch();
+      var firstMap = reactRedux.useSelector(function (store) {
+        return core.mapSelectors.getFirstMap(store);
+      }, reactRedux.shallowEqual);
+      var firstMapId = firstMap && firstMap.id ? firstMap.id : null;
+      var mapLayers = reactRedux.useSelector(function (store) {
+        return core.mapSelectors.getMapLayers(store, firstMapId);
+      }, reactRedux.shallowEqual);
+      var mapDimensions = reactRedux.useSelector(function (store) {
+        return core.mapSelectors.getMapDimensions(store, firstMapId);
+      }, reactRedux.shallowEqual);
+      var mapId = React__namespace.useRef("sigmet-" + core.generateMapId()).current;
+      var timesliderId = React__namespace.useRef("sigmet-" + core.generateTimesliderId()).current;
+      var syncGroupAddGroup = React__namespace.useCallback(function (payload) {
+        dispatch(core.SyncGroups.actions.syncGroupAddGroup(payload));
+      }, [dispatch]);
+      var syncGroupAddTarget = React__namespace.useCallback(function (payload) {
+        dispatch(core.SyncGroups.actions.syncGroupAddTarget(payload));
+      }, [dispatch]);
+      React__namespace.useEffect(function () {
+        if (mapLayers && mapLayers.length) {
+          // use maplayers, but change layerId and current mapId
+          var layers = mapLayers.map(function (layer) {
+            return __assign(__assign({}, layer), {
+              id: core.generateLayerId(),
+              mapId: mapId
+            });
+          });
+          dispatch(core.mapActions.setLayers({
+            mapId: mapId,
+            layers: layers
+          }));
+        }
+
+        if (mapDimensions && mapDimensions.length) {
+          dispatch(core.mapActions.mapChangeDimension({
+            mapId: mapId,
+            dimension: mapDimensions[0],
+            origin: 'MapViewGeoJson'
+          }));
+        }
+
+        dispatch(core.mapActions.setBaseLayers({
+          mapId: mapId,
+          layers: [__assign(__assign({}, core.publicLayers.baseLayerGrey), {
+            id: "baselayer-" + mapId
+          }), __assign(__assign({}, core.publicLayers.overLayer), {
+            id: "countryborders-" + mapId
+          }), __assign(__assign({}, northSeaPlatforms), {
+            id: "northseaplatforms-" + mapId
+          }), __assign(__assign({}, majorAirportsEHAA), {
+            id: "majorairportsehaa-" + mapId
+          })]
+        }));
+        dispatch(core.mapActions.setBbox({
+          mapId: mapId,
+          bbox: srsAndBboxDefault.bbox,
+          srs: srsAndBboxDefault.srs
+        }));
+        syncGroupAddGroup({
+          groupId: 'Time_SigmetAirmet',
+          title: 'Group 1 for sigmet/airmet map',
+          type: core.SyncGroups.constants.SYNCGROUPS_TYPE_SETTIME
+        });
+        syncGroupAddTarget({
+          groupId: 'Time_SigmetAirmet',
+          targetId: mapId
+        });
+        syncGroupAddTarget({
+          groupId: 'Time_SigmetAirmet',
+          targetId: timesliderId
+        }); // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, []);
+      return /*#__PURE__*/React__namespace.createElement("div", {
+        style: {
+          position: 'relative',
+          height: '100%'
+        },
+        "data-testid": "MapView"
+      }, /*#__PURE__*/React__namespace.createElement(core.MapControls, null, /*#__PURE__*/React__namespace.createElement(core.LayerManagerMapButtonConnect, {
+        source: "module",
+        mapId: mapId
+      }), /*#__PURE__*/React__namespace.createElement(core.LegendMapButtonConnect, {
+        source: "module",
+        mapId: mapId
+      }), /*#__PURE__*/React__namespace.createElement(core.MultiDimensionSelectMapButtonsConnect, {
+        source: "module",
+        mapId: mapId
+      })), /*#__PURE__*/React__namespace.createElement(core.MapViewConnect, {
+        mapId: mapId
+      }, /*#__PURE__*/React__namespace.createElement(core.MapViewLayer, {
+        id: "geojsonlayer-fir-" + mapId,
+        isInEditMode: false,
+        geojson: geoJSONs.fir
+      }), /*#__PURE__*/React__namespace.createElement(core.MapViewLayer, {
+        id: "geojsonlayer-end-" + mapId,
+        isInEditMode: drawMode.end !== null && layerDrawModes.end !== null,
+        geojson: geoJSONs.end,
+        drawMode: layerDrawModes.end,
+        updateGeojson: function updateGeojson(geojson) {
+          var end = allowOneGeoJSONFeature(layerDrawModes.end, geojson);
+          setLayerGeoJSONs(__assign(__assign({}, geoJSONs), {
+            end: end
+          }));
+        },
+        exitDrawModeCallback: function exitDrawModeCallback() {
+          setDrawMode({
+            start: null,
+            end: null
+          });
+          exitDrawModeCallbackEnd();
+        },
+        featureNrToEdit: 0
+      }), /*#__PURE__*/React__namespace.createElement(core.MapViewLayer, {
+        id: "geojsonlayer-start-" + mapId,
+        isInEditMode: drawMode.start !== null && layerDrawModes.start !== null,
+        geojson: geoJSONs.start,
+        drawMode: layerDrawModes.start,
+        updateGeojson: function updateGeojson(geojson) {
+          var start = allowOneGeoJSONFeature(layerDrawModes.start, geojson);
+          setLayerGeoJSONs(__assign(__assign({}, geoJSONs), {
+            start: start
+          }));
+        },
+        exitDrawModeCallback: function exitDrawModeCallback() {
+          setDrawMode({
+            start: null,
+            end: null
+          });
+          exitDrawModeCallbackStart();
+        },
+        featureNrToEdit: 0
+      }), /*#__PURE__*/React__namespace.createElement(core.MapViewLayer, {
+        id: "geojsonlayer-intersection-end-" + mapId,
+        isInEditMode: false,
+        geojson: geoJSONs.intersectionEnd
+      }), /*#__PURE__*/React__namespace.createElement(core.MapViewLayer, {
+        id: "geojsonlayer-intersection-start-" + mapId,
+        isInEditMode: false,
+        geojson: geoJSONs.intersectionStart
+      })), /*#__PURE__*/React__namespace.createElement("div", {
+        style: {
+          position: 'absolute',
+          left: '0',
+          bottom: '0',
+          zIndex: 1000,
+          width: '100%'
         }
-      }; // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, /*#__PURE__*/React__namespace.createElement(core.TimeSliderConnect, {
+        sourceId: timesliderId,
+        mapId: mapId
+      })), /*#__PURE__*/React__namespace.createElement(core.LegendConnect, {
+        showMapId: true,
+        mapId: mapId
+      }));
+    };
 
+    var ProductFormLayout = function ProductFormLayout(_a) {
+      var _b, _c, _d;
 
-      var delayedQuery = React__default["default"].useCallback(lodash.debounce(update, 1000), []);
-      return [TAC, delayedQuery];
-    };
+      var children = _a.children,
+          geojsonProps = __rest(_a, ["children"]);
 
-    var ProductFormTAC = function ProductFormTAC(_a) {
-      var tac = _a.tac;
-      var tacLines = tac.split('\n');
-      return /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        variant: "body2",
-        component: "div",
-        sx: styles$2.tacOutput,
-        "data-testid": "productform-tac-message"
-      }, tacLines.map(function (line) {
-        return /*#__PURE__*/React__default["default"].createElement(material.Box, {
-          component: "p",
-          key: line,
-          sx: styles$2.tacLine,
-          "data-testid": "productform-tac-message-line"
-        }, line);
-      }));
+      var theme = material.useTheme();
+      return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        container: true,
+        sx: (_b = {
+          height: '100%',
+          overflowY: 'auto'
+        }, _b[theme.breakpoints.up('sm')] = {
+          overflowY: 'hidden'
+        }, _b)
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true,
+        xs: 12,
+        sm: 6,
+        lg: 8,
+        sx: (_c = {
+          height: 400,
+          padding: 2
+        }, _c[theme.breakpoints.up('sm')] = {
+          height: '100%',
+          padding: 0
+        }, _c)
+      }, /*#__PURE__*/React__default["default"].createElement(MapViewGeoJson, __assign({}, geojsonProps))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true,
+        xs: 12,
+        sm: 6,
+        lg: 4,
+        sx: (_d = {
+          paddingTop: 5,
+          paddingBottom: 5,
+          paddingRight: 2
+        }, _d[theme.breakpoints.up('sm')] = {
+          overflowY: 'auto',
+          height: '100%'
+        }, _d)
+      }, children));
     };
 
     var SigmetForm = function SigmetForm(_a) {
@@ -4031,10 +4029,10 @@
       }, [drawMode.start, drawMode.end, isReadOnly, isDisabled]);
 
       var renderForm = function renderForm() {
-        return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
           container: true,
           direction: "column",
-          spacing: 2
+          spacing: 5
         }, !isCancelSigmet && /*#__PURE__*/React__default["default"].createElement(Phenomenon, {
           productType: "sigmet",
           isDisabled: isDisabled,
@@ -4059,7 +4057,7 @@
           productType: "sigmet",
           isDisabled: isDisabled,
           onChange: onChangeForm
-        })), /*#__PURE__*/React__default["default"].createElement(SelectFIR, {
+        }), /*#__PURE__*/React__default["default"].createElement(SelectFIR, {
           productType: "sigmet",
           isDisabled: isDisabled
         }), /*#__PURE__*/React__default["default"].createElement(StartGeometry, {
@@ -4087,74 +4085,18 @@
         }), !isCancelSigmet && /*#__PURE__*/React__default["default"].createElement(Change, {
           isDisabled: isDisabled,
           isReadOnly: isReadOnly
-        }), isCancelSigmet && watch('vaSigmetMoveToFIR') && /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-          item: true,
-          container: true,
-          spacing: 2
-        }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-          item: true,
-          xs: 4,
-          container: true,
-          justifyContent: "flex-end"
-        }), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-          item: true,
-          xs: 8,
-          container: true,
-          justifyContent: "flex-start"
-        }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        }), isCancelSigmet && watch('vaSigmetMoveToFIR') && /*#__PURE__*/React__default["default"].createElement(ProductFormFieldLayout, null, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
           item: true,
           xs: 12
         }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
           variant: "body2",
-          sx: styles$4.body,
+          sx: styles$2.body,
           "data-testid": "vaSigmetMoveToFIR"
-        }, "Volcanic Cloud is moving in the direction of:", ' ', /*#__PURE__*/React__default["default"].createElement("b", null, " ", watch('vaSigmetMoveToFIR')))))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-          item: true,
-          container: true,
-          spacing: 2,
-          sx: styles$4.containerItem
-        }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-          item: true,
-          xs: 4,
-          container: true,
-          justifyContent: "flex-end"
-        }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-          variant: "subtitle1",
-          sx: styles$4.label
-        }, "Issued at")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-          item: true,
-          xs: 8,
-          container: true,
-          justifyContent: "flex-start"
-        }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-          item: true,
-          xs: 12
-        }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-          variant: "body2",
-          sx: styles$4.body
-        }, getProductIssueDate(initialSigmet, initialCancelSigmet)))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-          item: true,
-          container: true,
-          spacing: 2
-        }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-          item: true,
-          xs: 4,
-          container: true,
-          justifyContent: "flex-end"
-        }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-          variant: "subtitle1",
-          sx: styles$4.label
-        }, "TAC")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-          item: true,
-          xs: 8,
-          container: true,
-          justifyContent: "flex-start"
-        }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-          item: true,
-          xs: 12
-        }, /*#__PURE__*/React__default["default"].createElement(ProductFormTAC, {
+        }, "Volcanic Cloud is moving in the direction of:", ' ', /*#__PURE__*/React__default["default"].createElement("b", null, " ", watch('vaSigmetMoveToFIR'))))), /*#__PURE__*/React__default["default"].createElement(IssuedAt, {
+          date: getProductIssueDate(initialSigmet, initialCancelSigmet)
+        }), /*#__PURE__*/React__default["default"].createElement(Tac, {
           tac: tac
-        })))), /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormHiddenInput, {
+        }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormHiddenInput, {
           name: "sequence",
           defaultValue: "-1"
         }),
@@ -4183,15 +4125,7 @@
         style: {
           width: '100%'
         }
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        container: true,
-        style: {
-          height: '100%'
-        }
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 8
-      }, /*#__PURE__*/React__default["default"].createElement(MapViewGeoJson, {
+      }, /*#__PURE__*/React__default["default"].createElement(ProductFormLayout, {
         geoJSONs: geoJSONs,
         setLayerGeoJSONs: function setLayerGeoJSONs(geoJSONs) {
           return _setLayerGeoJSONs(createInterSections(geoJSONs));
@@ -4201,11 +4135,7 @@
         setDrawMode: setDrawMode,
         exitDrawModeCallbackStart: updateStartDrawing,
         exitDrawModeCallbackEnd: updateEndDrawing
-      })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 4,
-        sx: styles$4.productForm
-      }, renderForm())));
+      }, renderForm()));
     };
 
     var AirmetForm = function AirmetForm(_a) {
@@ -4284,10 +4214,10 @@
       }, [drawMode.start, isReadOnly, isDisabled]);
 
       var renderForm = function renderForm() {
-        return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
           container: true,
           direction: "column",
-          spacing: 2
+          spacing: 6
         }, !isCancelAirmet && /*#__PURE__*/React__default["default"].createElement(Phenomenon, {
           productType: "airmet",
           isDisabled: isDisabled,
@@ -4314,7 +4244,7 @@
           productType: "airmet",
           isDisabled: isDisabled,
           onChange: onChangeForm
-        })), /*#__PURE__*/React__default["default"].createElement(SelectFIR, {
+        }), /*#__PURE__*/React__default["default"].createElement(SelectFIR, {
           productType: "airmet",
           isDisabled: isDisabled
         }), /*#__PURE__*/React__default["default"].createElement(StartGeometry, {
@@ -4341,53 +4271,11 @@
         }), !isCancelAirmet && /*#__PURE__*/React__default["default"].createElement(Change, {
           isDisabled: isDisabled,
           isReadOnly: isReadOnly
-        }), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-          item: true,
-          container: true,
-          spacing: 2,
-          sx: styles$4.containerItem
-        }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-          item: true,
-          xs: 4,
-          container: true,
-          justifyContent: "flex-end"
-        }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-          variant: "subtitle1",
-          sx: styles$4.label
-        }, "Issued at")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-          item: true,
-          xs: 8,
-          container: true,
-          justifyContent: "flex-start"
-        }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-          item: true,
-          xs: 12
-        }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-          variant: "body2",
-          sx: styles$4.body
-        }, getProductIssueDate(initialAirmet, initialCancelAirmet)))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-          item: true,
-          container: true,
-          spacing: 2
-        }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-          item: true,
-          xs: 4,
-          container: true,
-          justifyContent: "flex-end"
-        }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-          variant: "subtitle1",
-          sx: styles$4.label
-        }, "TAC")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-          item: true,
-          xs: 8,
-          container: true,
-          justifyContent: "flex-start"
-        }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-          item: true,
-          xs: 12
-        }, /*#__PURE__*/React__default["default"].createElement(ProductFormTAC, {
+        }), /*#__PURE__*/React__default["default"].createElement(IssuedAt, {
+          date: getProductIssueDate(initialAirmet, initialCancelAirmet)
+        }), /*#__PURE__*/React__default["default"].createElement(Tac, {
           tac: tac
-        })))), /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormHiddenInput, {
+        }, /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormHiddenInput, {
           name: "sequence",
           defaultValue: "-1"
         }),
@@ -4416,15 +4304,7 @@
         style: {
           width: '100%'
         }
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        container: true,
-        style: {
-          height: '100%'
-        }
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 8
-      }, /*#__PURE__*/React__default["default"].createElement(MapViewGeoJson, {
+      }, /*#__PURE__*/React__default["default"].createElement(ProductFormLayout, {
         geoJSONs: geoJSONs,
         setLayerGeoJSONs: function setLayerGeoJSONs(geoJSONs) {
           return _setLayerGeoJSONs(createInterSections(geoJSONs));
@@ -4433,45 +4313,24 @@
         drawMode: drawMode,
         setDrawMode: setDrawMode,
         exitDrawModeCallbackStart: updateStartDrawing
-      })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 4,
-        sx: styles$4.productForm
-      }, renderForm())));
-    };
-
-    var styles$1 = {
-      dialogHeader: {
-        boxShadow: '0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.14)',
-        zIndex: 1,
-        padding: '4px 20px'
-      },
-      dialogTitle: {
-        display: 'flex',
-        justifyContent: 'center',
-        textAlign: 'center'
-      },
-      dialogChildren: {
-        display: 'flex',
-        padding: '20px',
-        minHeight: 200,
-        minWidth: 400,
-        height: '100%',
-        paddingTop: '20px!important'
-      }
+      }, renderForm()));
     };
 
     var ContentDialog = function ContentDialog(_a) {
+      var _b, _c;
+
       var open = _a.open,
           toggleDialogStatus = _a.toggleDialogStatus,
           title = _a.title,
           children = _a.children,
           options = _a.options,
           onClose = _a.onClose,
-          _b = _a.alertBanner,
-          alertBanner = _b === void 0 ? null : _b,
+          _d = _a.alertBanner,
+          alertBanner = _d === void 0 ? null : _d,
           other = __rest(_a, ["open", "toggleDialogStatus", "title", "children", "options", "onClose", "alertBanner"]);
 
+      var theme$1 = material.useTheme();
+
       var handleClose = function handleClose() {
         if (onClose) {
           onClose();
@@ -4485,53 +4344,77 @@
         open: open,
         onClose: handleClose,
         maxWidth: other.maxWidth ? other.maxWidth : 'lg'
-      }, other), /*#__PURE__*/React__namespace.createElement(material.DialogTitle, {
-        sx: styles$1.dialogHeader
+      }, other, {
+        sx: {
+          ' .MuiPaper-root': {
+            minWidth: 300
+          }
+        }
+      }), /*#__PURE__*/React__namespace.createElement(material.DialogTitle, {
+        sx: (_b = {
+          boxShadow: 1,
+          zIndex: 1,
+          padding: 0,
+          height: 48,
+          display: 'flex',
+          paddingLeft: 2,
+          paddingRight: 2
+        }, _b[theme$1.breakpoints.up('sm')] = {
+          paddingLeft: 3,
+          paddingRight: 3
+        }, _b),
+        component: "div"
       }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
         container: true,
         alignItems: "center"
       }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true,
-        xs: true
+        xs: 4
       }, /*#__PURE__*/React__namespace.createElement(material.Button, {
         onClick: handleClose,
-        color: "secondary",
-        size: "medium",
-        startIcon: /*#__PURE__*/React__namespace.createElement(theme.ChevronLeft, {
-          color: "secondary"
-        }),
-        "data-testid": "contentdialog-close"
-      }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
-        variant: "subtitle1",
-        color: "secondary"
-      }, "BACK"))), /*#__PURE__*/React__namespace.createElement(material.Grid, {
+        variant: "flat",
+        startIcon: /*#__PURE__*/React__namespace.createElement(theme.ChevronLeft, null),
+        "data-testid": "contentdialog-close",
+        sx: (_c = {}, _c[theme$1.breakpoints.down('md')] = {
+          textIndent: -999999,
+          width: 24,
+          minWidth: 24,
+          height: 24,
+          ' .MuiSvgIcon-root': {
+            marginRight: 0
+          }
+        }, _c)
+      }, "BACK")), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true,
-        xs: true,
-        sx: styles$1.dialogTitle
+        xs: 4,
+        sx: {
+          display: 'flex',
+          justifyContent: 'center',
+          textAlign: 'center'
+        }
       }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
         "data-testid": "dialogTitle",
-        variant: "h6"
+        variant: "h6",
+        sx: {
+          fontSize: '1.0rem',
+          textOverflow: 'ellipsis',
+          overflow: 'hidden',
+          whiteSpace: 'nowrap'
+        }
       }, title)), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true,
-        xs: true
-      }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
-        container: true
-      }, options)))), alertBanner !== null && alertBanner, /*#__PURE__*/React__namespace.createElement(material.DialogContent, {
-        sx: styles$1.dialogChildren
+        xs: 4
+      }, options))), alertBanner !== null && alertBanner, /*#__PURE__*/React__namespace.createElement(material.DialogContent, {
+        sx: {
+          display: 'flex',
+          padding: 0,
+          minHeight: 200,
+          height: '100%'
+        }
       }, children));
     };
 
     var styles = {
-      cardWrapper: {
-        width: '100%'
-      },
-      cardContent: {
-        width: '100%',
-        padding: '14px',
-        '&:last-child': {
-          paddingBottom: '14px'
-        }
-      },
       activeStatus: {
         color: '#72bb23',
         paddingLeft: '6px',
@@ -4585,7 +4468,10 @@
 
       return /*#__PURE__*/React__default["default"].createElement(shared.StatusTag, {
         content: product.status.toLowerCase(),
-        color: product.status === 'PUBLISHED' ? 'green' : 'grey'
+        color: product.status === 'PUBLISHED' ? 'green' : 'grey',
+        sx: {
+          marginRight: '0!important'
+        }
       });
     };
 
@@ -4613,6 +4499,16 @@
       return moment__default["default"].utc(startDate).format('DD MMM YYYY, HH:mm') + " - " + moment__default["default"].utc(endDate).format(format) + " UTC";
     };
 
+    var ProductListRowHeader = function ProductListRowHeader(_a) {
+      var title = _a.title;
+      return /*#__PURE__*/React__default["default"].createElement(material.Typography, {
+        sx: {
+          color: 'geowebColors.textInputField.label.rgba',
+          fontSize: '0.75rem'
+        }
+      }, title);
+    };
+
     var ProductListRow = function ProductListRow(_a) {
       var product = _a.product,
           productType = _a.productType;
@@ -4647,80 +4543,123 @@
       return /*#__PURE__*/React__default["default"].createElement(material.Card, {
         elevation: 0,
         variant: "outlined",
-        sx: styles.cardWrapper
-      }, /*#__PURE__*/React__default["default"].createElement(material.CardContent, {
-        sx: styles.cardContent
+        // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+        sx: function sx(theme) {
+          var _a;
+
+          return _a = {
+            width: '100%',
+            paddingLeft: 1,
+            paddingRight: 1,
+            paddingTop: 1.5,
+            paddingBottom: 1.5,
+            '&:last-child': {
+              paddingBottom: 1.5
+            }
+          }, _a[theme.breakpoints.up('sm')] = {
+            paddingLeft: 4,
+            paddingRight: 4,
+            paddingTop: 2,
+            paddingBottom: 2,
+            '&:last-child': {
+              paddingBottom: 2
+            }
+          }, _a;
+        }
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true,
         alignItems: "center",
-        spacing: 1
-      }, /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
-        title: phenomenon !== null ? getPhenomenon(productType, phenomenon) : '',
-        placement: "bottom-start"
+        spacing: 2
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 3,
-        sm: 3,
-        md: 1
-      }, phenomenon !== null && /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        variant: "overline"
-      }, productType.toUpperCase()), /*#__PURE__*/React__default["default"].createElement(material.Typography, {
+        sm: 1
+      }, phenomenon !== null && /*#__PURE__*/React__default["default"].createElement(ProductListRowHeader, {
+        title: productType.toUpperCase()
+      }), /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
+        title: phenomenon !== null ? getPhenomenon(productType, phenomenon) : '',
+        placement: "bottom-start"
+      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "subtitle2",
         noWrap: true,
         sx: styles.font
       }, phenomenon !== null ? phenomenon : 'Cancel'))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        xs: 3,
-        sm: 2,
-        md: 1
-      }, /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
-        "data-testid": "productlistrow-tactooltip",
-        title: /*#__PURE__*/React__default["default"].createElement("div", {
+        xs: 9,
+        sm: 3
+      }, /*#__PURE__*/React__default["default"].createElement(ProductListRowHeader, {
+        title: "Issue time"
+      }), /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
+        title: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ProductListRowHeader, {
+          title: "TAC"
+        }), /*#__PURE__*/React__default["default"].createElement(material.Typography, {
           style: {
             whiteSpace: 'pre-line'
+          },
+          variant: "subtitle2",
+          sx: __assign(__assign({}, styles.font), {
+            color: 'geowebColors.typographyAndIcons.text',
+            fontSize: '1.125rem',
+            fontWeight: 'normal',
+            fontStyle: 'normal',
+            lineHeight: '28px',
+            letterSpacing: '0.5px'
+          })
+        }, TAC)),
+        placement: "bottom-start",
+        componentsProps: {
+          tooltip: {
+            sx: {
+              bgcolor: 'geowebColors.background.surface',
+              boxShadow: 8,
+              '& .MuiTooltip-arrow': {
+                color: 'common.black'
+              },
+              maxWidth: 472
+            }
           }
-        }, TAC),
-        placement: "bottom-start"
-      }, /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement(theme.Info, {
-        "data-testid": "productlistrow-tacicon",
-        color: "secondary"
-      })))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 9,
-        sm: 10,
-        md: 3,
-        lg: 2
+        }
       }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        variant: "overline"
-      }, "Issue time"), /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "subtitle2",
         sx: styles.font,
         "data-testid": "issueTime"
-      }, product.issueDate ? moment__default["default"].utc(product.issueDate).format('DD MMM YYYY, HH:mm') + " UTC" : '(Not published)')), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+      }, product.issueDate ? moment__default["default"].utc(product.issueDate).format('DD MMM YYYY, HH:mm') + " UTC" : '(Not published)'))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 12,
-        sm: 8,
-        md: 5,
-        lg: 6
-      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
-        variant: "overline"
-      }, "Valid time"), /*#__PURE__*/React__default["default"].createElement(material.Typography, {
+        sm: 6
+      }, /*#__PURE__*/React__default["default"].createElement(ProductListRowHeader, {
+        title: "Valid time"
+      }), /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "subtitle2",
         sx: styles.font,
         "data-testid": "validTime"
       }, validTime)), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        xs: 6,
-        sm: 4,
-        md: 2,
-        container: true
+        xs: 12,
+        sm: 2,
+        container: true,
+        justifyContent: "center",
+        // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+        sx: function sx(theme) {
+          var _a;
+
+          return _a = {}, _a[theme.breakpoints.up('sm')] = {
+            justifyContent: 'right',
+            button: {
+              marginRight: 3
+            },
+            ' .statusTag': {
+              marginRight: 3
+            }
+          }, _a;
+        }
       }, product.status === 'DRAFT' ? /*#__PURE__*/React__default["default"].createElement(material.Button, {
-        color: "secondary",
-        size: "small",
-        startIcon: /*#__PURE__*/React__default["default"].createElement(theme.Edit, {
-          color: "secondary"
-        })
-      }, "Draft") : getStatusTagList(product, cancelsSeqId), product.status === 'PUBLISHED' && cancelsSeqId === null && getActiveStatus(product)))));
+        sx: {
+          marginTop: '6px'
+        },
+        variant: "flat",
+        startIcon: /*#__PURE__*/React__default["default"].createElement(theme.Edit, null)
+      }, "DRAFT") : getStatusTagList(product, cancelsSeqId), product.status === 'PUBLISHED' && cancelsSeqId === null && getActiveStatus(product))));
     };
 
     /* *
@@ -4756,10 +4695,12 @@
         item: true,
         justifyContent: "flex-end"
       }, /*#__PURE__*/React__default["default"].createElement(material.Button, {
-        variant: "contained",
-        color: "secondary",
+        variant: "primary",
         "data-testid": "productListCreateButton",
-        onClick: onClickNewProduct
+        onClick: onClickNewProduct,
+        sx: {
+          textTransform: 'initial'
+        }
       }, "Create a new ", productType.toUpperCase())), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         sx: {
@@ -4771,7 +4712,11 @@
         title: "An error has occurred while retrieving the list, please try again",
         info: error.message ? error.message : '',
         dataTestId: "productList-alert"
-      }), productList && /*#__PURE__*/React__default["default"].createElement(material.List, null, productList.map(function (productListItem, index) {
+      }), productList && /*#__PURE__*/React__default["default"].createElement(material.List, {
+        sx: {
+          paddingTop: 4
+        }
+      }, productList.map(function (productListItem, index) {
         var product = productListItem[productType];
         return /*#__PURE__*/React__default["default"].createElement(material.ListItem, {
           "data-testid": "productListItem",
@@ -5026,6 +4971,11 @@
         options: getProductFormLifecycleButtons(productCanBe, onProductButtonPress),
         style: {
           zIndex: 1000
+        },
+        sx: {
+          ' .MuiDialogContent-root': {
+            overflowY: 'hidden'
+          }
         }
       }, productType === 'sigmet' ? /*#__PURE__*/React__namespace.createElement(SigmetForm, {
         mode: mode,