@opengeoweb/warnings 19.6.0 → 19.6.1-nightly-20260912

package/dist/index.esm.js

@@ -3,7 +3,7 @@ import { useDispatch, useSelector, useStore, shallowEqual } from 'react-redux';
 import { uiTypes, uiActions, getSingularDrawtoolDrawLayerId, drawingToolSelectors, layerSelectors, uiSelectors, layerActions, drawingToolActions, layerUtils, mapListener, layersListener, drawingToolListener, syncGroupsListener, openlayersListener, syncGroupsReducer, drawingToolReducer, uiReducer, layerReducer, mapReducer, useSetupDialog, PUBLIC_WARNING_DRAW_TOOL_ID, genericSelectors, useUpdateFeatureSyncLayers, genericActions, selectorMemoizationOptions, useRegisterFeatureSyncSource, syncGroupsSelector } from '@opengeoweb/store';
 import { Polygons, Edit, Delete, ExitDomain, ChevronDown, DrawPolygon, Remove, Options, CoastalEvent, TemperatureLow, TemperatureHigh, Rain, Snow, Lightning, Fog, Wind, Thunderstorm, SevereMountainWaves, VulcanicEruption, Haze, FreezingPrecipitation, ModerateAircraftIcing, SevereAircraftIcing, ModerateTurbulence, SevereTurbulence, SandStorm, RadioactiveMaterials, Visibility, Add, breakpoints, DragHandle, Info, ArrowUpCompact, ArrowDownCompact, CalendarToday, Expire, Cube, AlertBadge, ArrowDropDownDown, Extend24h, Copy, Update, Cancel, Success, VisibilityOff, ChevronUp, Close, Clock } from '@opengeoweb/theme';
 import { WEBMAP_REACT_NAMESPACE, defaultPolygon, emptyGeoJSON, MapControlButton, isGeoJSONGeometryEmpty, defaultSmoothLine, defaultLineString, defaultFreehandLine, defaultOval, defaultCircle, defaultRotatableBox, defaultSquare, defaultLocation, defaultPoint, defaultSplit, defaultDelete, getDrawModeIdFromSelectionType, getIcon, rewindGeometry, getGeoJSONPropertyValue, DRAWMODE, currentlySupportedDrawModes, defaultLayers, viewUtils, OpenLayersMapView, MapControls, OpenLayersZoomControl, OpenLayersLayer, OpenLayersFeatureLayer, genericOpenLayersFeatureStyle, DEFAULT_GEOJSON_STYLE_FILL_OPACITY, FEATURE_DRAW_FILL_COLOR, FEATURE_DRAW_SECONDARY_FILL_COLOR, FEATURE_DRAW_STROKE_COLOR } from '@opengeoweb/webmap-react';
-import { SHARED_NAMESPACE, useConfirmationDialog, dateUtils, ToggleMenu, calculateStartSize, ToolContainerDraggable, AlertBanner, sessionStorageProvider, ConfirmationDialog, CustomIconButton, usePrevious, usePreventBrowserClose, CustomTooltip, Avatar, getInitials, SwitchButton, Filter, CustomToggleButton, FilterChip, TooltipSelect, LastUpdateTime, StatusTag, FilterOption, getAxiosErrorMessage, CustomDialog, ConfirmationButtons, ErrorBoundary } from '@opengeoweb/shared';
+import { SHARED_NAMESPACE, useConfirmationDialog, dateUtils, sessionStorageProvider, ToggleMenu, calculateStartSize, ToolContainerDraggable, AlertBanner, ConfirmationDialog, CustomIconButton, usePrevious, usePreventBrowserClose, CustomTooltip, Avatar, getInitials, SwitchButton, Filter, CustomToggleButton, FilterChip, TooltipSelect, LastUpdateTime, DateTimePicker, StatusTag, FilterOption, getAxiosErrorMessage, CustomDialog, ConfirmationButtons, ErrorBoundary } from '@opengeoweb/shared';
 import { createEntityAdapter, createSlice, createSelector, createListenerMiddleware, combineReducers, configureStore } from '@reduxjs/toolkit';
 import { t } from 'i18next';
 import { useTranslation } from 'react-i18next';
@@ -13,7 +13,7 @@ import { SA_NAMESPACE, isInstanceOfCancelSigmet, getDefaultValidFromValue, isIns
 import { LayerType, generateMapId, webmapUtils } from '@opengeoweb/webmap';
 import React, { useRef, useState, useEffect, useCallback, useMemo } from 'react';
 import { useAuthenticationContext as useAuthenticationContext$1 } from '@opengeoweb/authentication';
-import { styled, Box, Typography, useTheme, Accordion, AccordionSummary, ListItem, ListItemButton, Stack, Grid, AccordionDetails, LinearProgress, Tabs, Tab, Button, MenuItem, FormHelperText, Paper, Card, CardContent, FormControl, CircularProgress, InputAdornment, Menu, ListSubheader, Chip, ListItemText, ListItemIcon, Tooltip, IconButton, Checkbox, DialogTitle, DialogContent, Switch, RadioGroup, FormControlLabel, Radio, Collapse } from '@mui/material';
+import { styled, Box, Typography, useTheme, Accordion, AccordionSummary, ListItem, ListItemButton, Stack, Grid, AccordionDetails, LinearProgress, Tabs, Tab, Button, MenuItem, FormHelperText, Paper, Card, CardContent, FormControl, CircularProgress, Menu, ListSubheader, Chip, ListItemText, ListItemIcon, Popover, RadioGroup, FormControlLabel, Radio, Tooltip, IconButton, Checkbox, DialogTitle, DialogContent, Switch, Collapse } from '@mui/material';
 import { List, useListRef } from 'react-window';
 import { useQueryClient, useMutation, queryOptions, QueryClient, useQuery } from '@tanstack/react-query';
 import { getHeaders, handleResponse, AirmetPhenomena, SigmetPhenomena, useAuthQuery, useAuthenticationContext, optimisticUpdate, ProductStatus, LevelUnits } from '@opengeoweb/api';
@@ -23,9 +23,6 @@ import { useFormContext, useFieldArray, useForm, FormProvider, useWatch } from '
 import { isEmpty, createEmpty, extend } from 'ol/extent';
 import GeoJSON from 'ol/format/GeoJSON';
 import { ReactSortable } from 'react-sortablejs';
-import { LocalizationProvider } from '@mui/x-date-pickers';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
-import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 import { intersect, area } from '@turf/turf';
 import Box$1 from '@mui/material/Box';
 import Tooltip$1 from '@mui/material/Tooltip';
@@ -118,6 +115,7 @@ var en = {
 	"warning-button-delete-polygon": "Delete polygon",
 	"warning-event-map-edit-drawing-tooltip": "Edit drawing",
 	"warning-event-map-remove-drawing-tooltip": "Remove drawing",
+	"warning-event-probability": "Probability (incl. - excl.)",
 	"warning-draw-tools-disabled": "Link a map to enable draw tools",
 	"warning-description-original": "Description original",
 	"warning-description-translation": "Description translation",
@@ -403,6 +401,8 @@ var en = {
 	"warning-event-validation-min-duration": "Warning must have a duration of at least one hour",
 	"warning-event-validation-overlap": "Warnings of the same level cannot overlap in time and/or area, delete or adjust one of the warnings",
 	"warning-event-validation-propbability-collapsed": "A probability is required",
+	"warning-event-validation-area-missing": "An area is required",
+	"warning-event-validation-area-non-polygon": "Area must be a polygon or multi-polygon",
 	"warning-event-open-summary-dialog-tooltip": "Open the summary dialog to enter detailed texts for all summary fields",
 	"drawing-tool-form-objects": "Objects",
 	"drawing-tool-form-object-name": "Object name",
@@ -411,7 +411,9 @@ var en = {
 	"drawing-tool-form-object-name-max-length": "An object name can be at most {{maxLength}} characters",
 	"drawing-tool-form-object-delete": "Delete object",
 	"warning-event-button-add-drawing": "Add a drawing to this event, then choose individual objects for each warning",
-	"warning-event-button-assign-object": "Assign an object from the chosen drawing to this warning"
+	"warning-event-button-assign-object": "Assign an object from the chosen drawing to this warning",
+	"warning-event-objects-menu-title": "Objects",
+	"warning-event-objects-menu-no-objects": "No objects available. Please first select a drawing via the 'Add drawing' button in the first warning"
 };
 var nl = {
 	"drawing-tool-form-tools": "Gereedschap",
@@ -500,6 +502,7 @@ var nl = {
 	"warning-button-delete-polygon": "Polygoon verwijderen",
 	"warning-event-map-edit-drawing-tooltip": "Tekening bewerken",
 	"warning-event-map-remove-drawing-tooltip": "Tekening verwijderen",
+	"warning-event-probability": "Waarschijnlijkheid (incl. - excl.)",
 	"warning-draw-tools-disabled": "Koppel een kaart om tekentools in te schakelen",
 	"warning-description-original": "Beschrijving origineel",
 	"warning-description-translation": "Beschrijving vertaling",
@@ -740,6 +743,8 @@ var nl = {
 	"warning-event-validation-min-duration": "De duur van een waarschuwing is minimaal 1 uur",
 	"warning-event-validation-overlap": "Waarschuwingen van hetzelfde niveau mogen niet overlappen in tijd en/of gebied, verwijder of pas een van de waarschuwingen aan",
 	"warning-event-validation-propbability-collapsed": "Een waarschijnlijkheid is verplicht",
+	"warning-event-validation-area-missing": "Een gebied is verplicht",
+	"warning-event-validation-area-non-polygon": "Gebied moet een polygoon of multi-polygoon zijn",
 	"warning-event-open-summary-dialog-tooltip": "Open de samenvatting pop-up om de gedetailleerde samenvattingen in te vullen",
 	"drawing-tool-form-objects": "Objecten",
 	"drawing-tool-form-object-name": "Objectnaam",
@@ -748,7 +753,9 @@ var nl = {
 	"drawing-tool-form-object-name-max-length": "Een objectnaam mag maximaal {{maxLength}} tekens bevatten",
 	"drawing-tool-form-object-delete": "Object verwijderen",
 	"warning-event-button-add-drawing": "Voeg een tekening toe aan dit event. Wijs daarna individuele objecten toe aan elke waarschuwing",
-	"warning-event-button-assign-object": "Wijs een object uit de gekozen tekening toe aan deze waarschuwing"
+	"warning-event-button-assign-object": "Wijs een object uit de gekozen tekening toe aan deze waarschuwing",
+	"warning-event-objects-menu-title": "Objecten",
+	"warning-event-objects-menu-no-objects": "Geen objecten beschikbaar, selecteer eerst een tekening via de 'Selecteer tekening' knop bij de eerste waarschuwing"
 };
 var fi = {
 	"drawing-tool-form-tools": "Työkalut",
@@ -837,6 +844,7 @@ var fi = {
 	"warning-button-delete-polygon": "Poista monikulmio",
 	"warning-event-map-edit-drawing-tooltip": "Muokkaa piirrosta",
 	"warning-event-map-remove-drawing-tooltip": "Poista piirros",
+	"warning-event-probability": "Todennäköisyys (ml. - pl.)",
 	"warning-draw-tools-disabled": "Linkitä kartta piirtotyökalujen ottamiseksi käyttöön",
 	"warning-description-original": "Alkuperäinen kuvaus",
 	"warning-description-translation": "Kuvauksen käännös",
@@ -1029,6 +1037,8 @@ var fi = {
 	"warning-event-validation-min-duration": "ei käännetty",
 	"warning-event-validation-overlap": "ei käännetty",
 	"warning-event-validation-propbability-collapsed": "ei käännetty",
+	"warning-event-validation-area-missing": "ei käännetty",
+	"warning-event-validation-area-non-polygon": "ei käännetty",
 	"warning-event-open-summary-dialog-tooltip": "ei käännetty",
 	"drawing-tool-form-objects": "ei käännetty",
 	"drawing-tool-form-object-name": "ei käännetty",
@@ -1037,7 +1047,9 @@ var fi = {
 	"drawing-tool-form-object-name-max-length": "ei käännetty",
 	"drawing-tool-form-object-delete": "ei käännetty",
 	"warning-event-button-add-drawing": "ei käännetty",
-	"warning-event-button-assign-object": "ei käännetty"
+	"warning-event-button-assign-object": "ei käännetty",
+	"warning-event-objects-menu-title": "ei käännetty",
+	"warning-event-objects-menu-no-objects": "ei käännetty"
 };
 var no = {
 	"drawing-tool-form-tools": "Verktøy",
@@ -1126,6 +1138,7 @@ var no = {
 	"warning-button-delete-polygon": "Slett polygon",
 	"warning-event-map-edit-drawing-tooltip": "Rediger tegning",
 	"warning-event-map-remove-drawing-tooltip": "Fjern tegning",
+	"warning-event-probability": "Sannsynlighet (inkl. - ekskl.)",
 	"warning-draw-tools-disabled": "Koble til et kart for å aktivere tegneverktøy",
 	"warning-description-original": "Original beskrivelse",
 	"warning-description-translation": "Oversatt beskrivelse",
@@ -1316,6 +1329,8 @@ var no = {
 	"warning-event-validation-min-duration": "ikke oversatt",
 	"warning-event-validation-overlap": "ikke oversatt",
 	"warning-event-validation-propbability-collapsed": "ikke oversatt",
+	"warning-event-validation-area-missing": "ikke oversatt",
+	"warning-event-validation-area-non-polygon": "ikke oversatt",
 	"warning-event-open-summary-dialog-tooltip": "ikke oversatt",
 	"drawing-tool-form-objects": "ikke oversatt",
 	"drawing-tool-form-object-name": "ikke oversatt",
@@ -1324,7 +1339,9 @@ var no = {
 	"drawing-tool-form-object-name-max-length": "ikke oversatt",
 	"drawing-tool-form-object-delete": "ikke oversatt",
 	"warning-event-button-add-drawing": "ikke oversatt",
-	"warning-event-button-assign-object": "ikke oversatt"
+	"warning-event-button-assign-object": "ikke oversatt",
+	"warning-event-objects-menu-title": "Objekter",
+	"warning-event-objects-menu-no-objects": "ikke oversatt"
 };
 var warningsTranslations = {
 	en: en,
@@ -1353,6 +1370,37 @@ var warningsTranslations = {
 var areaDrawingDialogType = uiTypes.DialogTypes.AreaDrawingManager;
 var drawingDialogType = uiTypes.DialogTypes.DrawingTool;
 var areaDrawingLoaderType = uiTypes.DialogTypes.AreaDrawingLoader;
+/**
+ * Returns the id to identify a single feature of a drawing by. Drawings saved
+ * with the drawing tool have a stable id on every feature (see
+ * `ensureFeatureIds` in the layer reducer), but drawings saved before that was
+ * introduced do not, so fall back to the position within the drawing.
+ * @param drawing The drawing the feature belongs to
+ * @param feature The feature to get the id for
+ * @param index The index of the feature within the drawing
+ * @returns id of the feature
+ */
+var getDrawingFeatureId = function getDrawingFeatureId(drawingId, feature, index) {
+  var _feature$id;
+  return String((_feature$id = feature.id) != null ? _feature$id : drawingId + "-" + index);
+};
+/**
+ * Makes sure every feature of a drawing has an id, so single features can be
+ * identified, selected and assigned.
+ * @param drawing The drawing to add feature ids to
+ * @returns the drawing, with an id on every feature
+ */
+var withDrawingFeatureIds = function withDrawingFeatureIds(drawing) {
+  return Object.assign({}, drawing, {
+    geoJSON: Object.assign({}, drawing.geoJSON, {
+      features: drawing.geoJSON.features.map(function (feature, index) {
+        return Object.assign({}, feature, {
+          id: getDrawingFeatureId(drawing.id, feature, index)
+        });
+      })
+    })
+  });
+};
 
 function _arrayLikeToArray(r, a) {
   (null == a || a > r.length) && (a = r.length);
@@ -2095,6 +2143,8 @@ var RowComponent$3 = function RowComponent(_ref) {
     activeDrawing = _ref.activeDrawing,
     t = _ref.t;
   var theme = useTheme();
+  var config = sessionStorageProvider.getConfig();
+  var showWarningsEventsOption = !!config.GW_FEATURE_WARNINGS_EVENT;
   var listItem = listInclHeaders[index];
   if (!listItem.isDrawing) {
     var header = headerList[listItem.index];
@@ -2199,10 +2249,16 @@ var RowComponent$3 = function RowComponent(_ref) {
                 }, {
                   text: t('public-warning-title').toUpperCase(),
                   action: function action() {
-                    onClickShare(drawing);
+                    onClickShare(drawing, 'public');
                   },
                   icon: jsx(ExitDomain, {})
-                }],
+                }].concat(showWarningsEventsOption ? [{
+                  text: t('public-warning-event-title').toUpperCase(),
+                  action: function action() {
+                    onClickShare(drawing, 'warningsEvent');
+                  },
+                  icon: jsx(ExitDomain, {})
+                }] : []),
                 secondaryMenuTitle: t('area-drawing-manager-share-menu'),
                 tooltipTitle: t('area-drawing-manager-options-menu')
               }))
@@ -3819,11 +3875,9 @@ var slice = createSlice({
       var _action$payload = action.payload,
         event = _action$payload.event,
         formState = _action$payload.formState;
-      // if (object) {
-      //   draft.object = object;
-      // }
       if (event) {
         draft.event = event;
+        draft.selectedDrawing = event.selectedDrawing && withDrawingFeatureIds(event.selectedDrawing);
       }
       if (formState !== undefined) {
         draft.formState = formState;
@@ -3836,8 +3890,8 @@ var slice = createSlice({
         formState = _action$payload2$form === void 0 ? '' : _action$payload2$form,
         panelId = _action$payload2.panelId,
         selectedEventId = _action$payload2.selectedEventId;
-      // draft.object = object;
       draft.event = event;
+      draft.selectedDrawing = (event == null ? void 0 : event.selectedDrawing) && withDrawingFeatureIds(event.selectedDrawing);
       draft.selectedEventId = selectedEventId || (event == null ? void 0 : event.eventId);
       draft.formState = formState;
       draft.panelId = panelId;
@@ -3868,6 +3922,10 @@ var slice = createSlice({
     },
     setSelectedEventId: function setSelectedEventId(draft, action) {
       draft.selectedEventId = action.payload;
+    },
+    setSelectedDrawing: function setSelectedDrawing(draft, action) {
+      var drawing = action.payload.drawing;
+      draft.selectedDrawing = drawing && withDrawingFeatureIds(drawing);
     }
   },
   extraReducers: function extraReducers(builder) {
@@ -3883,6 +3941,7 @@ var slice = createSlice({
         delete draft.selectedEventId;
         delete draft.isFormDirty;
         delete draft.warningType;
+        delete draft.selectedDrawing;
       }
     });
   }
@@ -4289,7 +4348,7 @@ var Phenomenon = function Phenomenon(_ref) {
 };
 
 var _excluded$c = ["id", "warningDetail", "status", "editor"],
-  _excluded2$1 = ["id", "linked_to_id", "proposal_id", "warning_handle_uuid"],
+  _excluded2$2 = ["id", "linked_to_id", "proposal_id", "warning_handle_uuid"],
   _excluded3 = ["published_warning_uuid"],
   _excluded4 = ["id"],
   _excluded5 = ["id", "warningDetail"],
@@ -4317,7 +4376,7 @@ var getWarningWithoutIdStatusEditor = function getWarningWithoutIdStatusEditor(w
     warningDetail.linked_to_id;
     warningDetail.proposal_id;
     warningDetail.warning_handle_uuid;
-    var cleanWarningDetail = _objectWithoutPropertiesLoose(warningDetail, _excluded2$1);
+    var cleanWarningDetail = _objectWithoutPropertiesLoose(warningDetail, _excluded2$2);
   var areas = (_warningDetail$areas = warningDetail.areas) == null ? void 0 : _warningDetail$areas.map(function (_ref) {
     _ref.published_warning_uuid;
       var area = _objectWithoutPropertiesLoose(_ref, _excluded3);
@@ -5065,6 +5124,10 @@ var useMutateWarningEvent = function useMutateWarningEvent(snackBarMessage) {
                   type: warningEventDialogType,
                   setOpen: false
                 }));
+                dispatch(uiActions.setToggleOpenDialog({
+                  type: uiTypes.DialogTypes.AreaDrawingLoader,
+                  setOpen: false
+                }));
               }
             case 2:
               return _context15.a(2);
@@ -5269,7 +5332,7 @@ var buildAreaGeoJSON = function buildAreaGeoJSON(drawing, options) {
     features: drawing.geoJSON.features.map(function (feature, index) {
       var _feature$id, _options$idPrefix, _ref, _feature$properties$o, _feature$properties, _feature$properties2;
       return Object.assign({}, feature, {
-        id: (_feature$id = feature.id) != null ? _feature$id : "" + ((_options$idPrefix = options.idPrefix) != null ? _options$idPrefix : '') + drawing.id + "-" + index,
+        id: (_feature$id = feature.id) != null ? _feature$id : "" + ((_options$idPrefix = options.idPrefix) != null ? _options$idPrefix : '') + getDrawingFeatureId(drawing.id, feature, index),
         properties: Object.assign({}, feature.properties, {
           areaId: drawing.id,
           areaFeatureName: (_ref = (_feature$properties$o = (_feature$properties = feature.properties) == null ? void 0 : _feature$properties.objectName) != null ? _feature$properties$o : (_feature$properties2 = feature.properties) == null ? void 0 : _feature$properties2.name) != null ? _ref : feature.id,
@@ -5603,7 +5666,16 @@ var AreaDrawingManagerConnect = function AreaDrawingManagerConnect(_ref2) {
     deleteHoverPreviewLayer();
     closeAreaDrawingDialog();
   };
-  var onShareDrawing = function onShareDrawing(drawing) {
+  var onShareDrawing = function onShareDrawing(drawing, type) {
+    if (type === 'warningsEvent') {
+      dispatch(warningsEventFormActions.openWarningsEventFormDialog({
+        event: {
+          selectedDrawing: drawing
+        },
+        formState: 'edit'
+      }));
+      return;
+    }
     dispatch(warningsFormActions.openPublicWarningFormDialog({
       object: drawing,
       warning: {
@@ -8773,6 +8845,43 @@ var AreaDrawingLoader = function AreaDrawingLoader(_ref) {
   });
 };
 
+/* *
+ * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+var EMPTY_WARNINGS_EVENT_FORM_STATE = {};
+var selectWarningsEventFormState = function selectWarningsEventFormState(store) {
+  if (store != null && store.warningsEventForm) {
+    return store.warningsEventForm;
+  }
+  return EMPTY_WARNINGS_EVENT_FORM_STATE;
+};
+var getWarningEvent = createSelector(selectWarningsEventFormState, function (store) {
+  return store == null ? void 0 : store.event;
+});
+var getSelectedEventId = createSelector(selectWarningsEventFormState, function (store) {
+  return (store == null ? void 0 : store.selectedEventId) || '';
+});
+var getWarningsEventIsFormDirty = createSelector(selectWarningsEventFormState, function (store) {
+  return (store == null ? void 0 : store.isFormDirty) || false;
+});
+var getWarningsEventSelectedDrawing = createSelector(selectWarningsEventFormState, function (store) {
+  return store == null ? void 0 : store.selectedDrawing;
+});
+
 var EXTENT_PADDING = 50;
 var DEFAULT_SIZE$1 = {
   height: '200px',
@@ -8821,7 +8930,9 @@ var WarningsMapView = function WarningsMapView(_ref) {
     _ref$showMapMousePosi = _ref.showMapMousePosition,
     showMapMousePosition = _ref$showMapMousePosi === void 0 ? true : _ref$showMapMousePosi,
     _ref$showZoomControls = _ref.showZoomControls,
-    showZoomControls = _ref$showZoomControls === void 0 ? true : _ref$showZoomControls;
+    showZoomControls = _ref$showZoomControls === void 0 ? true : _ref$showZoomControls,
+    clickOnFeature = _ref.clickOnFeature,
+    hoverSelect = _ref.hoverSelect;
   var containerRef = useRef(null);
   var defaultMapPresetBbox = geojsonFeature != null && geojsonFeature.features.length ? undefined : defaultBbox;
   var defaultBbox$1 = (defaultMapPreset == null ? void 0 : defaultMapPreset.proj) || defaultMapPresetBbox;
@@ -8897,7 +9008,9 @@ var WarningsMapView = function WarningsMapView(_ref) {
       }), !isSnapshot && jsx(OpenLayersLayer, Object.assign({}, defaultBaseLayer, {
         id: mapId + "_baseLayer"
       })), !!warningLayer.geojson && jsx(OpenLayersFeatureLayer, {
+        clickOnFeature: clickOnFeature,
         featureCollection: warningLayer.geojson,
+        hoverSelect: hoverSelect,
         style: genericOpenLayersFeatureStyle,
         zIndex: 1000
       }), !isSnapshot && jsx(OpenLayersLayer, Object.assign({}, defaultOverLayer, {
@@ -11409,7 +11522,8 @@ var MaritimeWarningsFormConnect = function MaritimeWarningsFormConnect(_ref) {
   });
 };
 
-var _excluded$7 = ["IS_DRAFT", "object", "translation-select"];
+var _excluded$7 = ["IS_DRAFT", "object", "translation-select"],
+  _excluded2$1 = ["isSelected", "highlightSelectedFeature", "boxSelectPreview"];
 var getEmptyPublicWarning = function getEmptyPublicWarning() {
   var currentTime = new Date();
   var validFromTime = dateUtils.add(currentTime, {
@@ -11531,7 +11645,7 @@ isAviationWarning) {
   }
   return Object.assign({}, geoJSON, {
     features: geoJSON.features.map(function (feature) {
-      var _feature$properties2, _feature$properties3;
+      var _feature$properties2;
       var colors;
       if (isAviationWarning) {
         var _feature$properties$i, _feature$properties;
@@ -11558,86 +11672,91 @@ isAviationWarning) {
         'stroke-width': 2,
         'stroke-opacity': 1
       };
+      var _ref5 = (_feature$properties2 = feature.properties) != null ? _feature$properties2 : {};
+        _ref5.isSelected;
+        _ref5.highlightSelectedFeature;
+        _ref5.boxSelectPreview;
+        var featureProperties = _objectWithoutPropertiesLoose(_ref5, _excluded2$1);
       return Object.assign({}, feature, {
-        properties: Object.assign({}, defaultProperties, feature.properties, {
-          fill: colors.color || ((_feature$properties2 = feature.properties) == null ? void 0 : _feature$properties2.fill),
-          stroke: colors.color || ((_feature$properties3 = feature.properties) == null ? void 0 : _feature$properties3.stroke)
+        properties: Object.assign({}, defaultProperties, featureProperties, {
+          fill: colors.color || featureProperties.fill,
+          stroke: colors.color || featureProperties.stroke
         })
       });
     })
   });
 }
-var Form = function Form(_ref5) {
+var Form = function Form(_ref6) {
   var _publicWarningDetails, _publicWarningDetails2;
-  var defaultMapPreset = _ref5.defaultMapPreset,
-    _ref5$onSaveForm = _ref5.onSaveForm,
-    onSaveForm = _ref5$onSaveForm === void 0 ? /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+  var defaultMapPreset = _ref6.defaultMapPreset,
+    _ref6$onSaveForm = _ref6.onSaveForm,
+    onSaveForm = _ref6$onSaveForm === void 0 ? /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
       return _regenerator().w(function (_context) {
         while (1) switch (_context.n) {
           case 0:
             return _context.a(2, null);
         }
       }, _callee);
-    })) : _ref5$onSaveForm,
-    _ref5$onPublishForm = _ref5.onPublishForm,
-    onPublishForm = _ref5$onPublishForm === void 0 ? /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
+    })) : _ref6$onSaveForm,
+    _ref6$onPublishForm = _ref6.onPublishForm,
+    onPublishForm = _ref6$onPublishForm === void 0 ? /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
       return _regenerator().w(function (_context2) {
         while (1) switch (_context2.n) {
           case 0:
             return _context2.a(2, null);
         }
       }, _callee2);
-    })) : _ref5$onPublishForm,
-    _ref5$onClearForm = _ref5.onClearForm,
-    onClearForm = _ref5$onClearForm === void 0 ? function () {} : _ref5$onClearForm,
-    _ref5$onCloseForm = _ref5.onCloseForm,
-    onCloseForm = _ref5$onCloseForm === void 0 ? function () {} : _ref5$onCloseForm,
-    _ref5$onSaveAviationF = _ref5.onSaveAviationForm,
-    onSaveAviationForm = _ref5$onSaveAviationF === void 0 ? /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
+    })) : _ref6$onPublishForm,
+    _ref6$onClearForm = _ref6.onClearForm,
+    onClearForm = _ref6$onClearForm === void 0 ? function () {} : _ref6$onClearForm,
+    _ref6$onCloseForm = _ref6.onCloseForm,
+    onCloseForm = _ref6$onCloseForm === void 0 ? function () {} : _ref6$onCloseForm,
+    _ref6$onSaveAviationF = _ref6.onSaveAviationForm,
+    onSaveAviationForm = _ref6$onSaveAviationF === void 0 ? /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
       return _regenerator().w(function (_context3) {
         while (1) switch (_context3.n) {
           case 0:
             return _context3.a(2, null);
         }
       }, _callee3);
-    })) : _ref5$onSaveAviationF,
-    object = _ref5.object,
-    publicWarningDetails = _ref5.publicWarningDetails,
-    _ref5$error = _ref5.error,
-    error = _ref5$error === void 0 ? {
+    })) : _ref6$onSaveAviationF,
+    object = _ref6.object,
+    publicWarningDetails = _ref6.publicWarningDetails,
+    _ref6$error = _ref6.error,
+    error = _ref6$error === void 0 ? {
       severity: 'error',
       message: ''
-    } : _ref5$error,
-    _ref5$isReadOnly = _ref5.isReadOnly,
-    isReadOnly = _ref5$isReadOnly === void 0 ? false : _ref5$isReadOnly,
-    _ref5$onFormDirty = _ref5.onFormDirty,
-    onFormDirty = _ref5$onFormDirty === void 0 ? function () {} : _ref5$onFormDirty,
-    _ref5$isSnapshot = _ref5.isSnapshot,
-    isSnapshot = _ref5$isSnapshot === void 0 ? false : _ref5$isSnapshot,
-    _ref5$onAddDrawing = _ref5.onAddDrawing,
-    onAddDrawing = _ref5$onAddDrawing === void 0 ? function () {} : _ref5$onAddDrawing,
-    selectedAviationProduct = _ref5.selectedAviationProduct,
-    _ref5$warningType = _ref5.warningType,
-    warningType = _ref5$warningType === void 0 ? 'public' : _ref5$warningType,
-    mode = _ref5.mode,
-    formState = _ref5.formState,
-    _ref5$onSetViewModeRe = _ref5.onSetViewModeResetArea,
-    onSetViewModeResetArea = _ref5$onSetViewModeRe === void 0 ? function () {} : _ref5$onSetViewModeRe,
-    storedStartGeoJSON = _ref5.storedStartGeoJSON,
-    storedEndGeoJSON = _ref5.storedEndGeoJSON,
-    _ref5$setWarningLevel = _ref5.setWarningLevel,
-    setWarningLevel = _ref5$setWarningLevel === void 0 ? function () {} : _ref5$setWarningLevel,
-    _ref5$linkedMapIds = _ref5.linkedMapIds,
-    linkedMapIds = _ref5$linkedMapIds === void 0 ? [] : _ref5$linkedMapIds,
-    _ref5$onDrawPolygon = _ref5.onDrawPolygon,
-    onDrawPolygon = _ref5$onDrawPolygon === void 0 ? function () {} : _ref5$onDrawPolygon,
-    _ref5$onDeletePolygon = _ref5.onDeletePolygon,
-    onDeletePolygon = _ref5$onDeletePolygon === void 0 ? function () {} : _ref5$onDeletePolygon,
-    _ref5$isDrawPolygonAc = _ref5.isDrawPolygonActive,
-    isDrawPolygonActive = _ref5$isDrawPolygonAc === void 0 ? false : _ref5$isDrawPolygonAc,
-    _ref5$isDrawingModeAc = _ref5.isDrawingModeActive,
-    isDrawingModeActive = _ref5$isDrawingModeAc === void 0 ? false : _ref5$isDrawingModeAc,
-    publicWarningStatus = _ref5.publicWarningStatus;
+    } : _ref6$error,
+    _ref6$isReadOnly = _ref6.isReadOnly,
+    isReadOnly = _ref6$isReadOnly === void 0 ? false : _ref6$isReadOnly,
+    _ref6$onFormDirty = _ref6.onFormDirty,
+    onFormDirty = _ref6$onFormDirty === void 0 ? function () {} : _ref6$onFormDirty,
+    _ref6$isSnapshot = _ref6.isSnapshot,
+    isSnapshot = _ref6$isSnapshot === void 0 ? false : _ref6$isSnapshot,
+    _ref6$onAddDrawing = _ref6.onAddDrawing,
+    onAddDrawing = _ref6$onAddDrawing === void 0 ? function () {} : _ref6$onAddDrawing,
+    selectedAviationProduct = _ref6.selectedAviationProduct,
+    _ref6$warningType = _ref6.warningType,
+    warningType = _ref6$warningType === void 0 ? 'public' : _ref6$warningType,
+    mode = _ref6.mode,
+    formState = _ref6.formState,
+    _ref6$onSetViewModeRe = _ref6.onSetViewModeResetArea,
+    onSetViewModeResetArea = _ref6$onSetViewModeRe === void 0 ? function () {} : _ref6$onSetViewModeRe,
+    storedStartGeoJSON = _ref6.storedStartGeoJSON,
+    storedEndGeoJSON = _ref6.storedEndGeoJSON,
+    _ref6$setWarningLevel = _ref6.setWarningLevel,
+    setWarningLevel = _ref6$setWarningLevel === void 0 ? function () {} : _ref6$setWarningLevel,
+    _ref6$linkedMapIds = _ref6.linkedMapIds,
+    linkedMapIds = _ref6$linkedMapIds === void 0 ? [] : _ref6$linkedMapIds,
+    _ref6$onDrawPolygon = _ref6.onDrawPolygon,
+    onDrawPolygon = _ref6$onDrawPolygon === void 0 ? function () {} : _ref6$onDrawPolygon,
+    _ref6$onDeletePolygon = _ref6.onDeletePolygon,
+    onDeletePolygon = _ref6$onDeletePolygon === void 0 ? function () {} : _ref6$onDeletePolygon,
+    _ref6$isDrawPolygonAc = _ref6.isDrawPolygonActive,
+    isDrawPolygonActive = _ref6$isDrawPolygonAc === void 0 ? false : _ref6$isDrawPolygonAc,
+    _ref6$isDrawingModeAc = _ref6.isDrawingModeActive,
+    isDrawingModeActive = _ref6$isDrawingModeAc === void 0 ? false : _ref6$isDrawingModeAc,
+    publicWarningStatus = _ref6.publicWarningStatus;
   var _React$useState = React.useState(false),
     isPublishing = _React$useState[0],
     setIsPublishing = _React$useState[1];
@@ -11709,7 +11828,7 @@ var Form = function Form(_ref5) {
     if (!isPublishing) {
       toggleIsDraft(false);
       void handleSubmit(/*#__PURE__*/function () {
-        var _ref9 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(data) {
+        var _ref0 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(data) {
           return _regenerator().w(function (_context4) {
             while (1) switch (_context4.n) {
               case 0:
@@ -11724,7 +11843,7 @@ var Form = function Form(_ref5) {
           }, _callee4);
         }));
         return function (_x) {
-          return _ref9.apply(this, arguments);
+          return _ref0.apply(this, arguments);
         };
       }())();
     }
@@ -11733,7 +11852,7 @@ var Form = function Form(_ref5) {
     if (!isSaving) {
       toggleIsDraft(true);
       void handleSubmit(/*#__PURE__*/function () {
-        var _ref0 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5(data) {
+        var _ref1 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5(data) {
           return _regenerator().w(function (_context5) {
             while (1) switch (_context5.n) {
               case 0:
@@ -11748,13 +11867,13 @@ var Form = function Form(_ref5) {
           }, _callee5);
         }));
         return function (_x2) {
-          return _ref0.apply(this, arguments);
+          return _ref1.apply(this, arguments);
         };
       }())();
     }
   };
   var showConfirmDialog = /*#__PURE__*/function () {
-    var _ref1 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6(action) {
+    var _ref10 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6(action) {
       return _regenerator().w(function (_context6) {
         while (1) switch (_context6.n) {
           case 0:
@@ -11775,11 +11894,11 @@ var Form = function Form(_ref5) {
       }, _callee6);
     }));
     return function showConfirmDialog(_x3) {
-      return _ref1.apply(this, arguments);
+      return _ref10.apply(this, arguments);
     };
   }();
   var cancelAviationProduct = /*#__PURE__*/function () {
-    var _ref10 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7(warningType) {
+    var _ref11 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7(warningType) {
       var result;
       return _regenerator().w(function (_context7) {
         while (1) switch (_context7.n) {
@@ -11793,7 +11912,7 @@ var Form = function Form(_ref5) {
       }, _callee7);
     }));
     return function cancelAviationProduct(_x4) {
-      return _ref10.apply(this, arguments);
+      return _ref11.apply(this, arguments);
     };
   }();
   var getPublishButtonLabel = function getPublishButtonLabel() {
@@ -11808,7 +11927,7 @@ var Form = function Form(_ref5) {
     return t('warning-button-publish');
   };
   var saveAviationDraft = /*#__PURE__*/function () {
-    var _ref11 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8(formValues, warningType) {
+    var _ref12 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8(formValues, warningType) {
       return _regenerator().w(function (_context8) {
         while (1) switch (_context8.n) {
           case 0:
@@ -11830,11 +11949,11 @@ var Form = function Form(_ref5) {
       }, _callee8);
     }));
     return function saveAviationDraft(_x5, _x6) {
-      return _ref11.apply(this, arguments);
+      return _ref12.apply(this, arguments);
     };
   }();
   var handleSubmitAviationProduct = /*#__PURE__*/function () {
-    var _ref12 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee1(action, warningType) {
+    var _ref13 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee1(action, warningType) {
       var _getFieldState$error, _getFieldState$error2, startGeometryErrorType, endGeometryErrorType, hasConfiguredIntersectionPointLimitError, _t3;
       return _regenerator().w(function (_context1) {
         while (1) switch (_context1.p = _context1.n) {
@@ -11869,7 +11988,7 @@ var Form = function Form(_ref5) {
           case 6:
             toggleIsDraft(false);
             void handleSubmit(/*#__PURE__*/function () {
-              var _ref13 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee9(formValues) {
+              var _ref14 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee9(formValues) {
                 return _regenerator().w(function (_context9) {
                   while (1) switch (_context9.p = _context9.n) {
                     case 0:
@@ -11905,7 +12024,7 @@ var Form = function Form(_ref5) {
                 }, _callee9, null, [[4, 6, 7, 8], [0, 2]]);
               }));
               return function (_x9) {
-                return _ref13.apply(this, arguments);
+                return _ref14.apply(this, arguments);
               };
             }())();
             return _context1.a(3, 19);
@@ -11940,7 +12059,7 @@ var Form = function Form(_ref5) {
             return _context1.a(3, 19);
           case 16:
             void handleSubmit(/*#__PURE__*/function () {
-              var _ref14 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee0(formValues) {
+              var _ref15 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee0(formValues) {
                 return _regenerator().w(function (_context0) {
                   while (1) switch (_context0.p = _context0.n) {
                     case 0:
@@ -11967,7 +12086,7 @@ var Form = function Form(_ref5) {
                 }, _callee0, null, [[0,, 4, 5]]);
               }));
               return function (_x0) {
-                return _ref14.apply(this, arguments);
+                return _ref15.apply(this, arguments);
               };
             }())();
             return _context1.a(3, 19);
@@ -11981,7 +12100,7 @@ var Form = function Form(_ref5) {
       }, _callee1, null, [[11, 13, 14, 15], [7, 9]]);
     }));
     return function handleSubmitAviationProduct(_x7, _x8) {
-      return _ref12.apply(this, arguments);
+      return _ref13.apply(this, arguments);
     };
   }();
   var onPressClear = function onPressClear() {
@@ -13021,7 +13140,7 @@ var AreaDrawingLoaderConnect = function AreaDrawingLoaderConnect(_ref) {
     fetchAreaError = _useAreaRequest.fetchAreaError,
     setAreas = _useAreaRequest.setAreas,
     isAreasLoading = _useAreaRequest.isAreasLoading;
-  var selectedAreas = useSelector(function (store) {
+  var publicWarningSelectedAreas = useSelector(function (store) {
     return getPublicWarningAreas(store);
   });
   var warningId = useSelector(function (store) {
@@ -13036,6 +13155,10 @@ var AreaDrawingLoaderConnect = function AreaDrawingLoaderConnect(_ref) {
   var isWarningDialogOpen = useSelector(function (store) {
     return uiSelectors.getisDialogOpen(store, publicWarningDialogType);
   });
+  var isWarningEventDialogOpen = useSelector(function (store) {
+    return uiSelectors.getisDialogOpen(store, warningEventDialogType);
+  });
+  var eventSelectedDrawing = useSelector(getWarningsEventSelectedDrawing);
   var hasPublicWarningDrawLayer = useSelector(function (store) {
     var _store$layers$allIds, _store$layers;
     return ((_store$layers$allIds = (_store$layers = store.layers) == null ? void 0 : _store$layers.allIds) != null ? _store$layers$allIds : []).some(function (layerId) {
@@ -13136,9 +13259,15 @@ var AreaDrawingLoaderConnect = function AreaDrawingLoaderConnect(_ref) {
   var onSearch = function onSearch(queryString) {
     return setSearchQuery(queryString);
   };
-  var onAddArea = function onAddArea(_ref4) {
-    var geoJSON = _ref4.geoJSON,
-      objectName = _ref4.objectName;
+  var onAddArea = function onAddArea(drawingListItem) {
+    var geoJSON = drawingListItem.geoJSON,
+      objectName = drawingListItem.objectName;
+    if (isWarningEventDialogOpen) {
+      dispatch(warningsEventFormActions.setSelectedDrawing({
+        drawing: drawingListItem
+      }));
+      return;
+    }
     dispatch(warningsFormActions.addArea({
       area: {
         geoJSON: geoJSON,
@@ -13146,9 +13275,15 @@ var AreaDrawingLoaderConnect = function AreaDrawingLoaderConnect(_ref) {
       }
     }));
   };
-  var onRemoveArea = function onRemoveArea(_ref5) {
-    var geoJSON = _ref5.geoJSON,
-      objectName = _ref5.objectName;
+  var onRemoveArea = function onRemoveArea(_ref4) {
+    var geoJSON = _ref4.geoJSON,
+      objectName = _ref4.objectName;
+    if (isWarningEventDialogOpen) {
+      dispatch(warningsEventFormActions.setSelectedDrawing({
+        drawing: undefined
+      }));
+      return;
+    }
     dispatch(warningsFormActions.removeArea({
       area: {
         geoJSON: geoJSON,
@@ -13162,6 +13297,11 @@ var AreaDrawingLoaderConnect = function AreaDrawingLoaderConnect(_ref) {
     }
   };
   var isChangeAreaDisabled = warningId !== undefined && typeof warningId === 'string' && warningId.length > 0 && warningStatus !== PublicWarningStatus.DRAFT && warningStatus !== PublicWarningStatus.DRAFT_PUBLISHED;
+  // When opened from the warning event form, show the drawing selected on the event
+  var selectedAreas = isWarningEventDialogOpen ? eventSelectedDrawing && [{
+    geoJSON: eventSelectedDrawing.geoJSON,
+    objectName: eventSelectedDrawing.objectName
+  }] : publicWarningSelectedAreas;
   var drawingError = uiError ? {
     type: areaDrawingLoaderType,
     error: uiError
@@ -13190,7 +13330,7 @@ var AreaDrawingLoaderConnect = function AreaDrawingLoaderConnect(_ref) {
     source: uiSource,
     startPosition: {
       top: 104,
-      left: 50
+      left: 450
     },
     title: t('area-drawing-loader-title')
   });
@@ -14253,16 +14393,6 @@ var EDIT_FIELD_SX = {
     fontSize: 16
   }
 };
-// The picker displays UTC times in the local-time based MUI picker
-var toPickerDate = function toPickerDate(utcDate) {
-  return new Date(utcDate.getTime() + utcDate.getTimezoneOffset() * 60000);
-};
-var toUtcDate = function toUtcDate(pickerDate) {
-  return new Date(pickerDate.getTime() - pickerDate.getTimezoneOffset() * 60000);
-};
-var OpenPickerIcon = function OpenPickerIcon() {
-  return jsx(CalendarToday, {});
-};
 var TimeField = function TimeField(_ref) {
   var field = _ref.field,
     label = _ref.label,
@@ -14315,70 +14445,43 @@ var TimeField = function TimeField(_ref) {
       width: TIME_FIELD_WIDTH,
       zIndex: 4
     },
-    children: isEditing && !isActive ? jsx(LocalizationProvider, {
-      dateAdapter: AdapterDateFns,
-      children: jsx(DateTimePicker, {
-        ampm: false,
-        autoFocus: true,
-        desktopModeMediaQuery: "@media (min-width: 720px)",
-        format: dateUtils.DATE_FORMAT_DATEPICKER,
-        label: label,
-        maxDateTime: toPickerDate(maxPickerDate),
-        minDateTime: minPickerDate ? toPickerDate(minPickerDate) : undefined,
-        onAccept: function onAccept(value) {
-          if (isPopupOpenRef.current && value) {
-            onCommitSession({
-              field: field,
-              value: toUtcDate(value)
-            });
-          }
-        },
-        onChange: function onChange(value) {
-          if (value) {
-            onDraftChange(field, toUtcDate(value));
-          }
-        },
-        onClose: function onClose() {
-          isPopupOpenRef.current = false;
-        },
-        onError: function onError(reason) {
-          onDraftValidityChange(field, reason != null);
-        },
-        onOpen: function onOpen() {
-          isPopupOpenRef.current = true;
-        },
-        slotProps: {
-          textField: {
-            variant: 'filled',
-            error: isDraftInvalid && draft != null,
-            slotProps: {
-              input: {
-                endAdornment: jsx(InputAdornment, {
-                  position: "end",
-                  children: "UTC"
-                })
-              }
-            }
-          },
-          field: {
-            openPickerButtonPosition: 'start'
-          },
-          openPickerButton: {
-            size: 'small',
-            sx: {
-              padding: 0
-            }
-          }
-        },
-        slots: {
-          openPickerIcon: OpenPickerIcon
-        },
-        sx: EDIT_FIELD_SX,
-        timeSteps: {
-          minutes: SNAP_MINUTES
-        },
-        value: toPickerDate(shownTime)
-      })
+    children: isEditing && !isActive ? jsx(DateTimePicker, {
+      autoFocus: true,
+      label: label,
+      maxDateTime: maxPickerDate,
+      minDateTime: minPickerDate,
+      onAccept: function onAccept(value) {
+        if (isPopupOpenRef.current && value) {
+          onCommitSession({
+            field: field,
+            value: value
+          });
+        }
+      },
+      onChange: function onChange(value) {
+        if (value) {
+          onDraftChange(field, value);
+        }
+      },
+      onClose: function onClose() {
+        isPopupOpenRef.current = false;
+      },
+      onError: function onError(reason) {
+        onDraftValidityChange(field, reason != null);
+      },
+      onOpen: function onOpen() {
+        isPopupOpenRef.current = true;
+      },
+      slotProps: {
+        textField: {
+          error: isDraftInvalid && draft != null
+        }
+      },
+      sx: EDIT_FIELD_SX,
+      timeSteps: {
+        minutes: SNAP_MINUTES
+      },
+      value: shownTime
     }) : jsxs(Box, {
       "data-testid": "warning-event-block-" + field + "-field",
       onDoubleClick: function onDoubleClick() {
@@ -15618,7 +15721,8 @@ var warningEventItemDefaultValues = {
   authority: '',
   phenomenon: '',
   type: 0,
-  warning_handle_uuid: ''
+  warning_handle_uuid: '',
+  areas: []
 };
 var buildDefaultWarningItem = function buildDefaultWarningItem(event) {
   var _getDefaultWarningTim = getDefaultWarningTimes(event.warningEventType),
@@ -15659,30 +15763,6 @@ var getInheritedEventFields = function getInheritedEventFields(values) {
     phenomenon: values.phenomenon
   };
 };
-// FAKE area that is needed for the BE PUBLISH until we implement the real area functionality
-var FAKE_AREAS = [{
-  objectName: 'Drawing name',
-  geoJSON: {
-    type: 'FeatureCollection',
-    features: [{
-      type: 'Feature',
-      geometry: {
-        type: 'Polygon',
-        coordinates: [[[4.62825, 53.0063], [4.82904, 53.35734], [5.78279, 53.53676], [4.8625, 52.63206], [4.47765, 52.60158], [4.62825, 53.0063]]]
-      },
-      properties: {
-        fill: '#fae21e',
-        stroke: '#fae21e',
-        'fill-opacity': 0.2,
-        'stroke-width': 2,
-        selectionType: 'poly',
-        warning_level: '1',
-        'stroke-opacity': 1,
-        objectName: 'Feature name'
-      }
-    }]
-  }
-}];
 var buildSubmitValues = function buildSubmitValues(values) {
   values.IS_DRAFT;
     var productToPost = _objectWithoutPropertiesLoose(values, _excluded$6);
@@ -15690,20 +15770,14 @@ var buildSubmitValues = function buildSubmitValues(values) {
   var eventToPost = Object.assign({}, productToPost, getEventValidity(productToPost.warnings), {
     warnings: productToPost.warnings.map(function (warning) {
       var joinedWarning = Object.assign({}, warning, inherited, {
-        domain: 'public',
-        // TODO REMOVE WHEN WE IMPLEMENT THE REAL AREAS FUNCTIONALITY
-        areas: FAKE_AREAS
+        domain: 'public'
       });
-      // Remove empty fields from all warnings
+      // Remove empty fields from all warnings, but always send `areas` (even
+      // when empty) so the backend can clear areas that were removed
       return Object.keys(joinedWarning).reduce(function (warningDetail, fieldName) {
         var key = fieldName;
         var fieldValue = joinedWarning[key];
-        if (Array.isArray(fieldValue)) {
-          if (!fieldValue.length || fieldValue[0].geoJSON === null) {
-            return warningDetail;
-          }
-        }
-        if (fieldValue) {
+        if (key === 'areas' || fieldValue) {
           var _Object$assign;
           return Object.assign({}, warningDetail, (_Object$assign = {}, _Object$assign[key] = fieldValue, _Object$assign));
         }
@@ -15886,7 +15960,7 @@ var probablityOptions = [{
   name: '60 - 90',
   value: 60
 }, {
-  name: '100',
+  name: '90 - 100',
   value: 100
 }];
 var getWarningTitle = function getWarningTitle(status, areas, index, t) {
@@ -15924,12 +15998,18 @@ var WarningEventItem = function WarningEventItem(_ref) {
     isCompact = _ref.isCompact,
     _ref$isDeleteButtonDi = _ref.isDeleteButtonDisabled,
     isDeleteButtonDisabled = _ref$isDeleteButtonDi === void 0 ? false : _ref$isDeleteButtonDi,
+    selectedDrawing = _ref.selectedDrawing,
+    _ref$onAddDrawing = _ref.onAddDrawing,
+    onAddDrawing = _ref$onAddDrawing === void 0 ? function () {} : _ref$onAddDrawing,
     onExpireWithdraw = _ref.onExpireWithdraw,
     onToggleCompact = _ref.onToggleCompact,
     onDeleteWarning = _ref.onDeleteWarning;
   var _React$useState = React.useState(null),
     menuAnchorEl = _React$useState[0],
     setMenuAnchorEl = _React$useState[1];
+  var _React$useState2 = React.useState(null),
+    menuMapAnchorEl = _React$useState2[0],
+    setMenuMapAnchorEl = _React$useState2[1];
   var _useWarningsTranslati = useWarningsTranslation(),
     t = _useWarningsTranslati.t;
   var _useFormContext = useFormContext(),
@@ -15969,6 +16049,9 @@ var WarningEventItem = function WarningEventItem(_ref) {
   var _getValidationErrors2 = getValidationErrors(["warnings." + index + ".probability"], fieldErrors),
     hasProbabilityError = _getValidationErrors2.hasErrors,
     probabilityError = _getValidationErrors2.errors;
+  var _getValidationErrors3 = getValidationErrors(["warnings." + index + ".areas"], fieldErrors),
+    hasAreaError = _getValidationErrors3.hasErrors,
+    areaError = _getValidationErrors3.errors;
   var revalidateOverlaps = React.useCallback(function () {
     var warnings = getValues('warnings');
     warnings.forEach(function (_warning, warningIndex) {
@@ -16000,6 +16083,76 @@ var WarningEventItem = function WarningEventItem(_ref) {
       }
     };
   }, [index, setValue, warningAreas, trigger, revalidateOverlaps]);
+  var readOnlyWarning = isReadOnly || warningStatus === PublicWarningStatus.EXPIRED || warningStatus === PublicWarningStatus.WITHDRAWN || eventStatus === PublicWarningStatus.EXPIRED || eventStatus === PublicWarningStatus.WITHDRAWN;
+  var assignedFeatureId = warningAreas == null || (_warningAreas$2 = warningAreas[0]) == null || (_warningAreas$2 = _warningAreas$2.geoJSON) == null || (_warningAreas$2 = _warningAreas$2.features) == null || (_warningAreas$2 = _warningAreas$2[0]) == null ? void 0 : _warningAreas$2.id;
+  var features = React.useMemo(function () {
+    var _selectedDrawing$geoJ, _selectedDrawing$geoJ2;
+    return (_selectedDrawing$geoJ = selectedDrawing == null || (_selectedDrawing$geoJ2 = selectedDrawing.geoJSON) == null ? void 0 : _selectedDrawing$geoJ2.features) != null ? _selectedDrawing$geoJ : [];
+  }, [selectedDrawing]);
+  // Assign the object picked from the selected drawing as the area of this warning
+  var onAssignFeature = React.useCallback(function (featureId) {
+    var _feature$properties$o, _feature$properties;
+    var feature = features.find(function (item) {
+      return String(item.id) === featureId;
+    });
+    if (!feature || featureId === assignedFeatureId) {
+      return;
+    }
+    var area = {
+      objectName: (_feature$properties$o = (_feature$properties = feature.properties) == null ? void 0 : _feature$properties.objectName) != null ? _feature$properties$o : '',
+      geoJSON: warningLevelFeatureColors(level, {
+        type: 'FeatureCollection',
+        features: [feature]
+      })
+    };
+    setValue("warnings." + index + ".areas", [area], {
+      shouldDirty: true
+    });
+    void trigger("warnings." + index + ".areas");
+  }, [features, assignedFeatureId, level, index, setValue, trigger]);
+  var hasAssignedArea = !!(warningAreas != null && (_warningAreas$3 = warningAreas[0]) != null && (_warningAreas$3 = _warningAreas$3.geoJSON) != null && (_warningAreas$3 = _warningAreas$3.features) != null && _warningAreas$3.length);
+  // As long as no area has been assigned to this warning, show all features of the
+  // selected drawing in blue. Once area is chosen, only show that one, in level color
+  var displayedGeoJSON = React.useMemo(function () {
+    var _selectedDrawing$geoJ3;
+    if (hasAssignedArea) {
+      return warningAreas[0].geoJSON;
+    }
+    if (!(selectedDrawing != null && (_selectedDrawing$geoJ3 = selectedDrawing.geoJSON) != null && (_selectedDrawing$geoJ3 = _selectedDrawing$geoJ3.features) != null && _selectedDrawing$geoJ3.length)) {
+      return undefined;
+    }
+    var blueFeatures = warningLevelFeatureColors(undefined, selectedDrawing.geoJSON);
+    // Outline only, no fill, as long as the feature has not been chosen
+    return Object.assign({}, blueFeatures, {
+      features: blueFeatures.features.map(function (feature) {
+        return Object.assign({}, feature, {
+          properties: Object.assign({}, feature.properties, {
+            'fill-opacity': 0
+          })
+        });
+      })
+    });
+  }, [hasAssignedArea, warningAreas, selectedDrawing]);
+  // Picking a feature directly on the map, only possible on an expanded, editable map
+  var canPickFeatureOnMap = !isCompact && !readOnlyWarning && !hasAssignedArea && features.length > 0;
+  var clickOnFeature = React.useMemo(function () {
+    return canPickFeatureOnMap ? {
+      onClick: function onClick(clickedFeatures) {
+        var _clickedFeatures$;
+        var featureId = (_clickedFeatures$ = clickedFeatures[0]) == null ? void 0 : _clickedFeatures$.getId();
+        if (featureId === undefined) {
+          return;
+        }
+        onAssignFeature(String(featureId));
+      },
+      hitTolerance: 5
+    } : undefined;
+  }, [canPickFeatureOnMap, onAssignFeature]);
+  var hoverSelect = React.useMemo(function () {
+    return canPickFeatureOnMap ? {
+      active: true
+    } : undefined;
+  }, [canPickFeatureOnMap]);
   // Until we implement the full validation, set every field to be required when publishing
   var _useDraftFormHelpers = useDraftFormHelpers(),
     isRequired = _useDraftFormHelpers.isRequired,
@@ -16018,9 +16171,8 @@ var WarningEventItem = function WarningEventItem(_ref) {
   var onWithdraw = function onWithdraw() {
     onExpireWithdraw(PublicWarningStatus.WITHDRAWN, index);
   };
-  var readOnlyWarning = isReadOnly || warningStatus === PublicWarningStatus.EXPIRED || warningStatus === PublicWarningStatus.WITHDRAWN || eventStatus === PublicWarningStatus.EXPIRED || eventStatus === PublicWarningStatus.WITHDRAWN;
   var warningTitle = getWarningTitle(status, warningAreas, index, t);
-  var mapTitle = (warningAreas == null || (_warningAreas$2 = warningAreas[0]) == null ? void 0 : _warningAreas$2.objectName) || undefined;
+  var mapTitle = (selectedDrawing == null ? void 0 : selectedDrawing.objectName) || (warningAreas == null || (_warningAreas$4 = warningAreas[0]) == null ? void 0 : _warningAreas$4.objectName) || undefined;
   return jsxs(Fragment, {
     children: [isCompact ? jsxs(Box, {
       sx: {
@@ -16049,7 +16201,7 @@ var WarningEventItem = function WarningEventItem(_ref) {
           sx: {
             fontSize: 14,
             flexShrink: 0,
-            width: "" + (hasValidationErrors || hasProbabilityError ? '93px' : '125px'),
+            width: "" + (hasValidationErrors || hasProbabilityError || hasAreaError ? '93px' : '125px'),
             display: '-webkit-box',
             WebkitLineClamp: 2,
             WebkitBoxOrient: 'vertical',
@@ -16059,11 +16211,13 @@ var WarningEventItem = function WarningEventItem(_ref) {
           },
           children: warningTitle
         })
-      }), !!(hasValidationErrors || hasProbabilityError) && jsx(CustomTooltip, {
+      }), !!(hasValidationErrors || hasProbabilityError || hasAreaError) && jsx(CustomTooltip, {
         title: t('warning-event-validation-warning-incomplete') + ": " + validationErrors.map(function (validationError) {
           return "" + validationError.message;
         }) + " " + probabilityError.map(function (validationError) {
           return "" + t('warning-event-validation-propbability-collapsed');
+        }) + areaError.map(function (validationError) {
+          return ", " + t('warning-event-validation-area-missing');
         }),
         children: jsx("span", {
           children: jsx(Info, {
@@ -16080,7 +16234,7 @@ var WarningEventItem = function WarningEventItem(_ref) {
         },
         children: jsx(WarningsMapView, {
           defaultMapPreset: defaultMapPreset,
-          geojsonFeature: (warningAreas == null || (_warningAreas$3 = warningAreas[0]) == null ? void 0 : _warningAreas$3.geoJSON) || undefined,
+          geojsonFeature: displayedGeoJSON,
           isSnapshot: isSnapshot,
           showMapMousePosition: false,
           showZoomControls: false,
@@ -16167,7 +16321,7 @@ var WarningEventItem = function WarningEventItem(_ref) {
           },
           children: jsx(ReactHookFormSelect, {
             disabled: readOnlyWarning,
-            label: t('warning-probability'),
+            label: t('warning-event-probability'),
             name: "warnings." + index + ".probability",
             rules: {
               validate: {
@@ -16294,9 +16448,33 @@ var WarningEventItem = function WarningEventItem(_ref) {
               height: 200,
               position: 'relative'
             },
-            children: [jsx(WarningsMapView, {
+            children: [!!hasAreaError && jsx(Box, {
+              sx: {
+                position: 'absolute',
+                top: '0px',
+                left: '40px',
+                width: 'calc(100% - 40px)',
+                zIndex: 1
+              },
+              children: jsx(AlertBanner, {
+                info: jsx(Fragment, {
+                  children: areaError.map(function (error, errorIndex) {
+                    return (
+                      // eslint-disable-next-line react/no-array-index-key
+                      jsx("div", {
+                        children: error.message
+                      }, errorIndex)
+                    );
+                  })
+                }),
+                severity: "error",
+                title: t('warning-event-validation-warning-incomplete')
+              })
+            }), jsx(WarningsMapView, {
+              clickOnFeature: clickOnFeature,
               defaultMapPreset: defaultMapPreset,
-              geojsonFeature: (warningAreas == null || (_warningAreas$4 = warningAreas[0]) == null ? void 0 : _warningAreas$4.geoJSON) || undefined,
+              geojsonFeature: displayedGeoJSON,
+              hoverSelect: hoverSelect,
               isSnapshot: isSnapshot,
               showMapMousePosition: false,
               size: {
@@ -16308,7 +16486,7 @@ var WarningEventItem = function WarningEventItem(_ref) {
               // Only show drawing loader on first warning
               index === 0 && jsx(CustomIconButton, {
                 isSelected: false,
-                onClick: function onClick() {},
+                onClick: onAddDrawing,
                 sx: {
                   position: 'absolute',
                   left: 8,
@@ -16320,7 +16498,9 @@ var WarningEventItem = function WarningEventItem(_ref) {
                 children: jsx(Polygons, {})
               }), jsx(CustomIconButton, {
                 isSelected: false,
-                onClick: function onClick() {},
+                onClick: function onClick(e) {
+                  return setMenuMapAnchorEl(e.currentTarget);
+                },
                 sx: {
                   position: 'absolute',
                   left: 8,
@@ -16330,6 +16510,67 @@ var WarningEventItem = function WarningEventItem(_ref) {
                 tooltipTitle: t('warning-event-button-assign-object'),
                 variant: "tool",
                 children: jsx(Cube, {})
+              }), jsx(Popover, {
+                anchorEl: menuMapAnchorEl,
+                anchorOrigin: {
+                  vertical: 'bottom',
+                  horizontal: 'left'
+                },
+                onClose: function onClose() {
+                  return setMenuMapAnchorEl(null);
+                },
+                open: Boolean(menuMapAnchorEl),
+                transformOrigin: {
+                  vertical: 'top',
+                  horizontal: 'left'
+                },
+                children: jsxs(Box, {
+                  sx: {
+                    padding: 1
+                  },
+                  children: [jsx(Typography, {
+                    sx: {
+                      fontSize: 12,
+                      fontWeight: 500,
+                      padding: 1
+                    },
+                    children: t('warning-event-objects-menu-title')
+                  }), features.length > 0 ? jsx(RadioGroup, {
+                    name: "warnings." + index + ".areas",
+                    onChange: function onChange(_event, value) {
+                      onAssignFeature(value);
+                      setMenuMapAnchorEl(null);
+                    },
+                    sx: {
+                      paddingX: 1
+                    },
+                    value: assignedFeatureId != null ? assignedFeatureId : '',
+                    children: features.map(function (feature, featureIndex) {
+                      var _feature$properties2;
+                      return jsx(FormControlLabel, {
+                        control: jsx(Radio, {
+                          size: "small"
+                        }),
+                        label: (feature == null || (_feature$properties2 = feature.properties) == null ? void 0 : _feature$properties2.objectName) || t('area-drawing-manager-object-name', {
+                          number: featureIndex + 1
+                        }),
+                        slotProps: {
+                          typography: {
+                            sx: {
+                              fontSize: 14
+                            }
+                          }
+                        },
+                        value: String(feature.id)
+                      }, String(feature.id));
+                    })
+                  }) : jsx(Typography, {
+                    sx: {
+                      padding: 1
+                    },
+                    children: t('warning-event-objects-menu-no-objects')
+                  })]
+                })
               })]
             })]
           }), !!mapTitle && jsx(Box, {
@@ -16368,7 +16609,7 @@ var WarningEventItem = function WarningEventItem(_ref) {
                   height: '100%'
                 },
                 children: [jsx(CustomIconButton, {
-                  disabled: readOnlyWarning,
+                  disabled: true,
                   isSelected: false,
                   onClick: function onClick() {},
                   sx: {
@@ -16378,7 +16619,7 @@ var WarningEventItem = function WarningEventItem(_ref) {
                   variant: "flat",
                   children: jsx(DrawPolygon, {})
                 }), jsx(CustomIconButton, {
-                  disabled: readOnlyWarning,
+                  disabled: true,
                   isSelected: false,
                   onClick: function onClick() {},
                   sx: {
@@ -16410,6 +16651,19 @@ var WarningEventItem = function WarningEventItem(_ref) {
           })
         })]
       })]
+    }), jsx(ReactHookFormHiddenInput, {
+      name: "warnings." + index + ".areas",
+      rules: {
+        validate: {
+          isRequired: function isRequired(value) {
+            return isDraft() || hasAreaData(value) ? true : t('warning-event-validation-area-missing');
+          },
+          isPolygonalFeature: function isPolygonalFeature$1(value) {
+            var _value$;
+            return !hasAreaData(value) || isPolygonalFeature(value == null || (_value$ = value[0]) == null || (_value$ = _value$.geoJSON) == null || (_value$ = _value$.features) == null ? void 0 : _value$[0]) ? true : t('warning-event-validation-area-non-polygon');
+          }
+        }
+      }
     }), jsx(ReactHookFormHiddenInput, {
       name: "warnings." + index + ".validFrom",
       rules: {
@@ -16460,8 +16714,8 @@ var WarningEventItem = function WarningEventItem(_ref) {
 };
 
 var SUMMARY_HEADLINE_LIMIT = 150;
-var SUMMARY_CONCISE_SUMMARY_LIMIT = 500;
-var SUMMARY_DESCRIPTION_LIMIT = 1500;
+var SUMMARY_CONCISE_SUMMARY_LIMIT = 1500;
+var SUMMARY_DESCRIPTION_LIMIT = 2500;
 var SUMMARY_TEXT_FIELDS = ['headlineOriginal', 'headlineTranslation', 'conciseSummaryOriginal', 'conciseSummaryTranslation', 'descriptionOriginal', 'descriptionTranslation'];
 var RemainingChars = function RemainingChars(_ref) {
   var _useWatch;
@@ -16780,7 +17034,7 @@ var WarningEventSummaryForm = function WarningEventSummaryForm(_ref2) {
             textTransform: 'none',
             fontSize: '12px'
           },
-          title: t('warning-event-summary-dialog-clear-button'),
+          title: t('warning-event-summary-dialog-clear-button-title'),
           variant: "tertiary",
           children: t('warning-event-summary-dialog-clear-button')
         }), jsx(Button, {
@@ -16789,7 +17043,7 @@ var WarningEventSummaryForm = function WarningEventSummaryForm(_ref2) {
             textTransform: 'none',
             fontSize: '12px'
           },
-          title: t('warning-event-summary-dialog-OK-button'),
+          title: t('warning-event-summary-dialog-OK-button-title'),
           variant: "primary",
           children: t('warning-event-summary-dialog-OK-button')
         })]
@@ -16836,6 +17090,8 @@ var WarningEventFormContent = function WarningEventFormContent(_ref) {
     isDefaultCollapsed = _ref$isDefaultCollaps === void 0 ? false : _ref$isDefaultCollaps,
     _ref$onCancel = _ref.onCancel,
     onCancel = _ref$onCancel === void 0 ? function () {} : _ref$onCancel,
+    _ref$onAddDrawing = _ref.onAddDrawing,
+    onAddDrawing = _ref$onAddDrawing === void 0 ? function () {} : _ref$onAddDrawing,
     _ref$onChangeFormMode = _ref.onChangeFormMode,
     onChangeFormMode = _ref$onChangeFormMode === void 0 ? function () {} : _ref$onChangeFormMode,
     _ref$onDelete = _ref.onDelete,
@@ -16874,6 +17130,7 @@ var WarningEventFormContent = function WarningEventFormContent(_ref) {
     }()) : _ref$onPublish,
     _ref$isSummaryDialogO = _ref.isSummaryDialogOpen,
     isSummaryDialogOpen = _ref$isSummaryDialogO === void 0 ? false : _ref$isSummaryDialogO,
+    selectedDrawing = _ref.selectedDrawing,
     selectedEvent = _ref.selectedEvent;
   var _useWarningsTranslati = useWarningsTranslation(),
     t = _useWarningsTranslati.t;
@@ -16937,26 +17194,38 @@ var WarningEventFormContent = function WarningEventFormContent(_ref) {
   React.useEffect(function () {
     // sync redux with react-hook-form
     reset(getFormData(selectedEvent));
-    // TODO once we implement areas
-    // setOriginalWarningAreas(publicWarningDetails?.areas);
   }, [eventId, reset, selectedEvent]);
   // When the editor gets set back to viewer and the form is dirty, reset any changes made
   React.useEffect(function () {
-    if (isReadOnly && Object.keys(dirtyFields).length > 0
-    // TODO once we implement areas
-    //   ||selectedEvent?.areas !== originalWarningAreas)
-    ) {
-      // // sync redux with react-hook-form
-      var oldEvent = Object.assign({}, selectedEvent);
-      reset(getFormData(oldEvent));
-      // TODO once we implement areas
-      // if (publicWarningDetails?.areas !== originalWarningAreas) {
-      //   // update the store to contain the original area again
-      //   onSetViewModeResetArea(originalWarningAreas || []);
-      // }
+    if (isReadOnly && Object.keys(dirtyFields).length > 0) {
+      reset(getFormData(selectedEvent));
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isReadOnly]);
+  // Apply a drawing picked in the Area & Drawing Loader to the form
+  React.useEffect(function () {
+    var _getValues, _getValues2;
+    if (((_getValues = getValues('selectedDrawing')) == null ? void 0 : _getValues.id) === (selectedDrawing == null ? void 0 : selectedDrawing.id)) {
+      return;
+    }
+    setValue('selectedDrawing', selectedDrawing, {
+      shouldDirty: true
+    });
+    // the areas of all warnings belong to the previous drawing, clear them.
+    // Finalised (expired/withdrawn) warnings are read-only, keep their areas
+    var currentEventStatus = getValues('status');
+    ((_getValues2 = getValues('warnings')) != null ? _getValues2 : []).forEach(function (warning, warningIndex) {
+      var _warning$status;
+      if (isWarningFinalised({
+        status: (_warning$status = warning.status) != null ? _warning$status : currentEventStatus
+      })) {
+        return;
+      }
+      setValue("warnings." + warningIndex + ".areas", [], {
+        shouldDirty: true
+      });
+    });
+  }, [selectedDrawing, setValue, getValues]);
   var warningEventType = useWatch({
     control: control,
     name: 'warningEventType'
@@ -17028,9 +17297,9 @@ var WarningEventFormContent = function WarningEventFormContent(_ref) {
     deleteCount = _React$useState5[0],
     setDeleteCount = _React$useState5[1];
   var onAddWarning = function onAddWarning() {
-    var _getValues;
+    var _getValues3;
     var newWarning = buildDefaultWarningItem(getValues());
-    var firstFinalisedIndex = ((_getValues = getValues('warnings')) != null ? _getValues : []).findIndex(isWarningFinalised);
+    var firstFinalisedIndex = ((_getValues3 = getValues('warnings')) != null ? _getValues3 : []).findIndex(isWarningFinalised);
     if (firstFinalisedIndex === -1) {
       append(newWarning);
       return;
@@ -17045,11 +17314,11 @@ var WarningEventFormContent = function WarningEventFormContent(_ref) {
   };
   // re-validate after the removal commits, react-hook-form shifts errors up
   React.useEffect(function () {
-    var _getValues2;
+    var _getValues4;
     if (!deleteCount) {
       return;
     }
-    var remainingWarnings = (_getValues2 = getValues('warnings')) != null ? _getValues2 : [];
+    var remainingWarnings = (_getValues4 = getValues('warnings')) != null ? _getValues4 : [];
     remainingWarnings.forEach(function (_warning, index) {
       void trigger("warnings." + index + ".validUntil");
     });
@@ -17153,7 +17422,6 @@ var WarningEventFormContent = function WarningEventFormContent(_ref) {
   var onChangeMode = function onChangeMode() {
     onChangeFormMode(!isReadOnly);
   };
-  // Until we implement the full validation, set every field to be required when publishing
   var _useDraftFormHelpers2 = useDraftFormHelpers(),
     _isRequired = _useDraftFormHelpers2.isRequired;
   var disabledWarningDeleteButton = fields.length <= 1;
@@ -17487,11 +17755,13 @@ var WarningEventFormContent = function WarningEventFormContent(_ref) {
                 isDeleteButtonDisabled: disabledWarningDeleteButton,
                 isReadOnly: isReadOnly,
                 isSnapshot: isSnapshot,
+                onAddDrawing: onAddDrawing,
                 onDeleteWarning: onDeleteWarning,
                 onExpireWithdraw: onExpireWithdraw,
                 onToggleCompact: function onToggleCompact() {
                   return toggleCompact(field.id);
-                }
+                },
+                selectedDrawing: selectedDrawing
               })
             }, field.id);
           })
@@ -17798,8 +18068,11 @@ var WarningEventFormDialogContent = function WarningEventFormDialogContent(_ref)
     size = _ref.size,
     source = _ref.source,
     startPosition = _ref.startPosition,
+    selectedDrawing = _ref.selectedDrawing,
     onClose = _ref.onClose,
     onMouseDown = _ref.onMouseDown,
+    _ref$onAddDrawing = _ref.onAddDrawing,
+    onAddDrawing = _ref$onAddDrawing === void 0 ? function () {} : _ref$onAddDrawing,
     _ref$onChangeFormMode = _ref.onChangeFormMode,
     onChangeFormMode = _ref$onChangeFormMode === void 0 ? function () {} : _ref$onChangeFormMode,
     _ref$onDelete = _ref.onDelete,
@@ -17904,6 +18177,7 @@ var WarningEventFormDialogContent = function WarningEventFormDialogContent(_ref)
         isReadOnly: isReadOnly,
         isSnapshot: isSnapshot,
         isSummaryDialogOpen: isSummaryOpen,
+        onAddDrawing: onAddDrawing,
         onCancel: closeDialog,
         onChangeFormMode: onChangeFormMode,
         onDelete: onDelete,
@@ -17911,6 +18185,7 @@ var WarningEventFormDialogContent = function WarningEventFormDialogContent(_ref)
         onOpenWarningSummary: onOpenSummary,
         onPublish: onPublish,
         onSaveDraft: onSaveDraft,
+        selectedDrawing: selectedDrawing,
         selectedEvent: selectedEvent,
         shouldHideFormToggleMode: shouldHideFormToggleMode
       })
@@ -17948,40 +18223,6 @@ var WarningEventFormDialog = function WarningEventFormDialog(_ref5) {
   });
 };
 
-/* *
- * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-var EMPTY_WARNINGS_EVENT_FORM_STATE = {};
-var selectWarningsEventFormState = function selectWarningsEventFormState(store) {
-  if (store != null && store.warningsEventForm) {
-    return store.warningsEventForm;
-  }
-  return EMPTY_WARNINGS_EVENT_FORM_STATE;
-};
-var getWarningEvent = createSelector(selectWarningsEventFormState, function (store) {
-  return store == null ? void 0 : store.event;
-});
-var getSelectedEventId = createSelector(selectWarningsEventFormState, function (store) {
-  return (store == null ? void 0 : store.selectedEventId) || '';
-});
-var getWarningsEventIsFormDirty = createSelector(selectWarningsEventFormState, function (store) {
-  return (store == null ? void 0 : store.isFormDirty) || false;
-});
-
 var _excluded$4 = ["expandedSections", "hoveredWarningIds", "hiddenWarningIds"];
 var getWarningsFilters = function getWarningsFilters(store) {
   if (store != null && store.warningsFilters) {
@@ -18058,6 +18299,7 @@ var WarningEventDialogConnect = function WarningEventDialogConnect(_ref) {
   var selectedEventId = useSelector(getSelectedEventId);
   var previousSelectedEventId = usePrevious(selectedEventId);
   var isFormDirty = useSelector(getWarningsEventIsFormDirty);
+  var selectedDrawing = useSelector(getWarningsEventSelectedDrawing);
   var savedFilterState = useSelector(getWarningsFilterById);
   var eventState = useSelector(getWarningEvent);
   var _ref2 = eventState || {},
@@ -18106,6 +18348,12 @@ var WarningEventDialogConnect = function WarningEventDialogConnect(_ref) {
     }));
     onCloseDialogSummary();
   };
+  var closeAreaDrawingLoader = function closeAreaDrawingLoader() {
+    dispatch(uiActions.setToggleOpenDialog({
+      type: uiTypes.DialogTypes.AreaDrawingLoader,
+      setOpen: false
+    }));
+  };
   var onFormDirty = function onFormDirty(isFormDirty) {
     dispatch(warningsEventFormActions.setFormDirty({
       isFormDirty: isFormDirty
@@ -18291,6 +18539,7 @@ var WarningEventDialogConnect = function WarningEventDialogConnect(_ref) {
                           dispatch(warningsEventFormActions.setFormValues({
                             formState: isReadOnly ? 'readonly' : ''
                           }));
+                          closeAreaDrawingLoader();
                         case 1:
                           return _context5.a(2);
                       }
@@ -18348,6 +18597,12 @@ var WarningEventDialogConnect = function WarningEventDialogConnect(_ref) {
       void setIsEditor(isReadOnly);
     }
   };
+  var onAddDrawing = function onAddDrawing() {
+    dispatch(uiActions.setToggleOpenDialog({
+      type: uiTypes.DialogTypes.AreaDrawingLoader,
+      setOpen: true
+    }));
+  };
   // Readonly in case you are not creating a new warning and you are not set as the editor
   var isReadOnly = formState === 'readonly' || !isEditor && status !== undefined;
   // Remove any errors when switching events
@@ -18366,11 +18621,13 @@ var WarningEventDialogConnect = function WarningEventDialogConnect(_ref) {
     isOpen: isDialogOpen,
     isReadOnly: isReadOnly,
     isSummaryOpen: isDialogOpenSummary,
+    onAddDrawing: onAddDrawing,
     onAddSummary: onAddSummary,
     onChangeFormMode: onChangeFormMode,
     onClose: function onClose() {
-      onCloseDialog();
       onCloseDialogSummary();
+      closeAreaDrawingLoader();
+      onCloseDialog();
     },
     onCloseSummary: onCloseDialogSummary,
     onDelete: onDeleteDraft,
@@ -18381,6 +18638,7 @@ var WarningEventDialogConnect = function WarningEventDialogConnect(_ref) {
     onPublish: onPublishForm,
     onSaveDraft: onSaveDraft,
     order: dialogOrder,
+    selectedDrawing: selectedDrawing,
     selectedEvent: event,
     shouldHideFormToggleMode: shouldHideFormToggleMode,
     size: size,
@@ -19950,7 +20208,6 @@ var ExpandableFilterChip = function ExpandableFilterChip(_ref) {
 };
 
 var TimeFilterChip = function TimeFilterChip(_ref) {
-  var _getPickerValue;
   var timeFilter = _ref.timeFilter,
     onUpdateTimeFilter = _ref.onUpdateTimeFilter;
   var _useWarningsTranslati = useWarningsTranslation(),
@@ -19981,7 +20238,6 @@ var TimeFilterChip = function TimeFilterChip(_ref) {
     onUpdateTimeFilter(newFilter);
   };
   var handleTempTimeChange = function handleTempTimeChange(field, value) {
-    var _dateUtils$setUTCDate;
     if (!value) {
       if (field === 'customStart') {
         setTempCustomStart(undefined);
@@ -19990,20 +20246,13 @@ var TimeFilterChip = function TimeFilterChip(_ref) {
       }
       return;
     }
-    var isoString = (_dateUtils$setUTCDate = dateUtils.setUTCDate(value)) == null ? void 0 : _dateUtils$setUTCDate.toISOString();
+    var isoString = value.toISOString();
     if (field === 'customStart') {
       setTempCustomStart(isoString);
     } else {
       setTempCustomEnd(isoString);
     }
   };
-  var getPickerValue = function getPickerValue(isoString) {
-    if (!isoString) {
-      return null;
-    }
-    var utc = new Date(isoString);
-    return new Date(utc.getUTCFullYear(), utc.getUTCMonth(), utc.getUTCDate(), utc.getUTCHours(), utc.getUTCMinutes());
-  };
   var handleApply = function handleApply() {
     onUpdateTimeFilter({
       mode: TimeFilterMode.custom,
@@ -20156,88 +20405,51 @@ var TimeFilterChip = function TimeFilterChip(_ref) {
             flexDirection: 'column',
             gap: 2
           },
-          children: [jsxs(LocalizationProvider, {
-            dateAdapter: AdapterDateFns,
-            children: [jsxs(Box, {
+          children: [jsxs(Box, {
+            sx: {
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center'
+            },
+            children: [jsx(Typography, {
               sx: {
-                display: 'flex',
-                justifyContent: 'space-between',
-                alignItems: 'center'
+                mr: 1
               },
-              children: [jsx(Typography, {
-                sx: {
-                  mr: 1
-                },
-                children: t('filter-start')
-              }), jsx(DateTimePicker, {
-                ampm: false,
-                format: dateUtils.DATE_FORMAT_DATEPICKER,
-                label: t('filter-choose-date-time'),
-                onChange: function onChange(value) {
-                  return handleTempTimeChange('customStart', value);
-                },
-                slotProps: {
-                  textField: {
-                    variant: 'filled',
-                    slotProps: {
-                      input: {
-                        endAdornment: jsx(InputAdornment, {
-                          position: "end",
-                          children: "UTC"
-                        })
-                      }
-                    }
-                  },
-                  field: {
-                    clearable: true,
-                    openPickerButtonPosition: 'start'
-                  }
-                },
-                timeSteps: {
-                  minutes: 1
-                },
-                value: (_getPickerValue = getPickerValue(pickerStartValue)) != null ? _getPickerValue : new Date(Date.now())
-              })]
-            }), jsxs(Box, {
+              children: t('filter-start')
+            }), jsx(DateTimePicker, {
+              label: t('filter-choose-date-time'),
+              onChange: function onChange(value) {
+                return handleTempTimeChange('customStart', value);
+              },
+              slotProps: {
+                field: {
+                  clearable: true
+                }
+              },
+              value: pickerStartValue ? new Date(pickerStartValue) : new Date(Date.now())
+            })]
+          }), jsxs(Box, {
+            sx: {
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center'
+            },
+            children: [jsx(Typography, {
               sx: {
-                display: 'flex',
-                justifyContent: 'space-between',
-                alignItems: 'center'
+                mr: 1
               },
-              children: [jsx(Typography, {
-                sx: {
-                  mr: 1
-                },
-                children: t('filter-end')
-              }), jsx(DateTimePicker, {
-                ampm: false,
-                format: dateUtils.DATE_FORMAT_DATEPICKER,
-                label: t('filter-choose-date-time'),
-                onChange: function onChange(value) {
-                  return handleTempTimeChange('customEnd', value);
-                },
-                slotProps: {
-                  textField: {
-                    variant: 'filled',
-                    slotProps: {
-                      input: {
-                        endAdornment: jsx(InputAdornment, {
-                          position: "end",
-                          children: "UTC"
-                        })
-                      }
-                    }
-                  },
-                  field: {
-                    clearable: true,
-                    openPickerButtonPosition: 'start'
-                  }
-                },
-                timeSteps: {
-                  minutes: 1
-                },
-                value: getPickerValue(pickerEndValue)
-              })]
+              children: t('filter-end')
+            }), jsx(DateTimePicker, {
+              label: t('filter-choose-date-time'),
+              onChange: function onChange(value) {
+                return handleTempTimeChange('customEnd', value);
+              },
+              slotProps: {
+                field: {
+                  clearable: true
+                }
+              },
+              value: pickerEndValue ? new Date(pickerEndValue) : null
             })]
           }), jsx(Box, {
             sx: {
@@ -20882,12 +21094,19 @@ var getSelectedFormAreaIds = function getSelectedFormAreaIds(selectedFormWarning
     return Boolean(areaId);
   }));
 };
+var isAviationWarning = function isAviationWarning(warning) {
+  return (warning == null ? void 0 : warning.type) === 'airmet' || (warning == null ? void 0 : warning.type) === 'sigmet';
+};
+var isUnsavedAviationCopy = function isUnsavedAviationCopy(warning) {
+  return isAviationWarning(warning) && Boolean(warning.id) && warning.sigmetAirmetDetails.uuid === undefined;
+};
 var shouldExcludeWarningFromFeatureSync = function shouldExcludeWarningFromFeatureSync(_ref) {
   var hiddenWarningIds = _ref.hiddenWarningIds,
     hasMatchingAreaId = _ref.hasMatchingAreaId,
     selectedWarningId = _ref.selectedWarningId,
-    warningIds = _ref.warningIds;
-  return warningIds.includes(selectedWarningId != null ? selectedWarningId : '') || hasMatchingAreaId || warningIds.some(function (warningId) {
+    warningIds = _ref.warningIds,
+    selectedFormWarning = _ref.selectedFormWarning;
+  return !isUnsavedAviationCopy(selectedFormWarning) && (warningIds.includes(selectedWarningId != null ? selectedWarningId : '') || hasMatchingAreaId) || warningIds.some(function (warningId) {
     return hiddenWarningIds.has(warningId);
   });
 };
@@ -20953,6 +21172,7 @@ var useWarningListFeatureSync = function useWarningListFeatureSync(_ref) {
       if (shouldExcludeWarningFromFeatureSync({
         hiddenWarningIds: hiddenWarningIds,
         hasMatchingAreaId: hasMatchingAreaId,
+        selectedFormWarning: selectedFormWarning,
         selectedWarningId: selectedWarningId,
         warningIds: warningIds
       })) {
@@ -20976,7 +21196,7 @@ var useWarningListFeatureSync = function useWarningListFeatureSync(_ref) {
     }).filter(function (feature) {
       return !!feature.id;
     });
-  }, [filteredWarningsByExpandedSections, hiddenWarningIds, selectedFormAreaIds, selectedWarningId]);
+  }, [filteredWarningsByExpandedSections, hiddenWarningIds, selectedFormAreaIds, selectedFormWarning, selectedWarningId]);
   useRegisterFeatureSyncSource(panelId);
   var warningFeatureCollection = React.useMemo(function () {
     return createWarningFeatureCollection(allFeatures);
@@ -23454,8 +23674,10 @@ var drawingListJSON = [
 						stroke: "#ff7800",
 						"stroke-width": 2,
 						"stroke-opacity": 1,
-						selectionType: "poly"
+						selectionType: "poly",
+						objectName: "Object 1"
 					},
+					id: "object-1",
 					geometry: {
 						type: "Polygon",
 						coordinates: [
@@ -23479,6 +23701,62 @@ var drawingListJSON = [
 							]
 						]
 					}
+				},
+				{
+					type: "Feature",
+					properties: {
+						fill: "#ff7800",
+						"fill-opacity": 0,
+						stroke: "#ff7800",
+						"stroke-width": 2,
+						"stroke-opacity": 1,
+						selectionType: "poly",
+						objectName: "Object 2"
+					},
+					id: "object-2",
+					geometry: {
+						type: "Polygon",
+						coordinates: [
+							[
+								[
+									3.31519,
+									52.58351
+								],
+								[
+									4.43387,
+									54.33682
+								],
+								[
+									6.62875,
+									54.20452
+								],
+								[
+									5.58087,
+									54.06348
+								],
+								[
+									5.01445,
+									53.08821
+								],
+								[
+									5.18438,
+									50.69441
+								],
+								[
+									4.26395,
+									52.36789
+								],
+								[
+									3.48512,
+									52.11643
+								],
+								[
+									3.31519,
+									52.58351
+								]
+							]
+						]
+					}
 				}
 			]
 		}
@@ -114758,7 +115036,7 @@ var warningEventsListJSON = [
 				status: "DRAFT_PUBLISHED",
 				areas: [
 					{
-						objectName: "low temp 1",
+						objectName: "Coastal zone north",
 						geoJSON: {
 							type: "FeatureCollection",
 							features: [
@@ -114794,8 +115072,10 @@ var warningEventsListJSON = [
 										"stroke-width": 2,
 										selectionType: "poly",
 										warning_level: "1",
-										"stroke-opacity": 1
-									}
+										"stroke-opacity": 1,
+										objectName: "Coastal zone north"
+									},
+									id: "drawing-storm-ciaran-object-1"
 								}
 							]
 						}
@@ -114809,7 +115089,92 @@ var warningEventsListJSON = [
 				authority: "KNMI",
 				incident: "Storm Ciaran"
 			}
-		]
+		],
+		selectedDrawing: {
+			id: "drawing-storm-ciaran",
+			objectName: "Storm Ciaran areas",
+			scope: "global",
+			lastUpdatedTime: "2026-07-21T15:00:00Z",
+			geoJSON: {
+				type: "FeatureCollection",
+				features: [
+					{
+						type: "Feature",
+						geometry: {
+							type: "Polygon",
+							coordinates: [
+								[
+									[
+										5.09504,
+										53.492
+									],
+									[
+										4.28015,
+										52.46456
+									],
+									[
+										6.87823,
+										52.98133
+									],
+									[
+										5.09504,
+										53.492
+									]
+								]
+							]
+						},
+						properties: {
+							fill: "#fae21e",
+							stroke: "#fae21e",
+							"fill-opacity": 0.2,
+							"stroke-width": 2,
+							selectionType: "poly",
+							warning_level: "1",
+							"stroke-opacity": 1,
+							objectName: "Coastal zone north"
+						},
+						id: "drawing-storm-ciaran-object-1"
+					},
+					{
+						type: "Feature",
+						geometry: {
+							type: "Polygon",
+							coordinates: [
+								[
+									[
+										5.09504,
+										53.492
+									],
+									[
+										4.28015,
+										52.46456
+									],
+									[
+										6.87823,
+										52.98133
+									],
+									[
+										5.09504,
+										53.492
+									]
+								]
+							]
+						},
+						properties: {
+							fill: "#fae21e",
+							stroke: "#fae21e",
+							"fill-opacity": 0.2,
+							"stroke-width": 2,
+							selectionType: "poly",
+							warning_level: "1",
+							"stroke-opacity": 1,
+							objectName: "Wadden Sea"
+						},
+						id: "drawing-storm-ciaran-object-2"
+					}
+				]
+			}
+		}
 	},
 	{
 		status: "PUBLISHED",
@@ -114838,7 +115203,7 @@ var warningEventsListJSON = [
 				status: "PUBLISHED",
 				areas: [
 					{
-						objectName: "wind test name",
+						objectName: "Coastal zone west",
 						geoJSON: {
 							type: "FeatureCollection",
 							features: [
@@ -114914,8 +115279,10 @@ var warningEventsListJSON = [
 										"stroke-width": 2,
 										selectionType: "poly",
 										warning_level: "1",
-										"stroke-opacity": 1
-									}
+										"stroke-opacity": 1,
+										objectName: "Coastal zone west"
+									},
+									id: "drawing-storm-coastal-object-1"
 								}
 							]
 						}
@@ -114937,7 +115304,7 @@ var warningEventsListJSON = [
 				status: "PUBLISHED",
 				areas: [
 					{
-						objectName: "test name",
+						objectName: "IJsselmeer",
 						geoJSON: {
 							type: "FeatureCollection",
 							features: [
@@ -115005,8 +115372,10 @@ var warningEventsListJSON = [
 										"stroke-width": 2,
 										selectionType: "poly",
 										warning_level: "1",
-										"stroke-opacity": 1
-									}
+										"stroke-opacity": 1,
+										objectName: "IJsselmeer"
+									},
+									id: "drawing-storm-coastal-object-2"
 								}
 							]
 						}
@@ -115021,7 +115390,201 @@ var warningEventsListJSON = [
 				authority: "KNMI",
 				incident: "Storm "
 			}
-		]
+		],
+		selectedDrawing: {
+			id: "drawing-storm-coastal",
+			objectName: "Coastal wind areas",
+			scope: "global",
+			lastUpdatedTime: "2026-07-20T00:00:00Z",
+			geoJSON: {
+				type: "FeatureCollection",
+				features: [
+					{
+						type: "Feature",
+						geometry: {
+							type: "Polygon",
+							coordinates: [
+								[
+									[
+										5.85,
+										53.5
+									],
+									[
+										5.88069,
+										53.53069
+									],
+									[
+										5.83071,
+										53.5276
+									],
+									[
+										5.65979,
+										53.53259
+									],
+									[
+										5.65843,
+										53.53262
+									],
+									[
+										5.58313,
+										53.53277
+									],
+									[
+										5.57114,
+										53.53133
+									],
+									[
+										5.48882,
+										53.51118
+									],
+									[
+										5.5,
+										53.5
+									],
+									[
+										5.6,
+										53.4
+									],
+									[
+										5.7,
+										53.38333
+									],
+									[
+										5.75,
+										53.4
+									],
+									[
+										5.8,
+										53.45
+									],
+									[
+										5.85,
+										53.5
+									]
+								]
+							]
+						},
+						properties: {
+							fill: "#fae21e",
+							stroke: "#fae21e",
+							"fill-opacity": 0.2,
+							"stroke-width": 2,
+							selectionType: "poly",
+							warning_level: "1",
+							"stroke-opacity": 1,
+							objectName: "Coastal zone west"
+						},
+						id: "drawing-storm-coastal-object-1"
+					},
+					{
+						type: "Feature",
+						geometry: {
+							type: "Polygon",
+							coordinates: [
+								[
+									[
+										4.9,
+										53.2
+									],
+									[
+										5,
+										53.3
+									],
+									[
+										4.9629,
+										53.3371
+									],
+									[
+										4.91659,
+										53.32006
+									],
+									[
+										4.91232,
+										53.31826
+									],
+									[
+										4.80795,
+										53.26843
+									],
+									[
+										4.7936,
+										53.25812
+									],
+									[
+										4.78373,
+										53.24347
+									],
+									[
+										4.77554,
+										53.22488
+									],
+									[
+										4.74595,
+										53.18851
+									],
+									[
+										4.8,
+										53.175
+									],
+									[
+										4.9,
+										53.2
+									]
+								]
+							]
+						},
+						properties: {
+							fill: "#fae21e",
+							stroke: "#fae21e",
+							"fill-opacity": 0.2,
+							"stroke-width": 2,
+							selectionType: "poly",
+							warning_level: "1",
+							"stroke-opacity": 1,
+							objectName: "IJsselmeer"
+						},
+						id: "drawing-storm-coastal-object-2"
+					},
+					{
+						type: "Feature",
+						geometry: {
+							type: "Polygon",
+							coordinates: [
+								[
+									[
+										5.09504,
+										53.492
+									],
+									[
+										4.28015,
+										52.46456
+									],
+									[
+										6.87823,
+										52.98133
+									],
+									[
+										5.09504,
+										53.492
+									]
+								]
+							]
+						},
+						properties: {
+							fill: "#fae21e",
+							stroke: "#fae21e",
+							"fill-opacity": 0.2,
+							"stroke-width": 2,
+							selectionType: "poly",
+							warning_level: "1",
+							"stroke-opacity": 1,
+							objectName: "Zeeland delta"
+						},
+						id: "drawing-storm-coastal-object-3"
+					}
+				]
+			}
+		}
 	},
 	{
 		status: "EXPIRED",
@@ -115050,7 +115613,7 @@ var warningEventsListJSON = [
 				phenomenon: "thunderstorm",
 				areas: [
 					{
-						objectName: "test name",
+						objectName: "Inland north",
 						geoJSON: {
 							type: "FeatureCollection",
 							features: [
@@ -115085,8 +115648,10 @@ var warningEventsListJSON = [
 										"fill-opacity": 0.2,
 										"stroke-width": 2,
 										selectionType: "poly",
-										"stroke-opacity": 1
-									}
+										"stroke-opacity": 1,
+										objectName: "Inland north"
+									},
+									id: "drawing-storm-marcel-object-1"
 								}
 							]
 						}
@@ -115107,7 +115672,7 @@ var warningEventsListJSON = [
 				phenomenon: "thunderstorm",
 				areas: [
 					{
-						objectName: "test name",
+						objectName: "Inland east",
 						geoJSON: {
 							type: "FeatureCollection",
 							features: [
@@ -115175,8 +115740,10 @@ var warningEventsListJSON = [
 										"stroke-width": 2,
 										selectionType: "poly",
 										warning_level: "1",
-										"stroke-opacity": 1
-									}
+										"stroke-opacity": 1,
+										objectName: "Inland east"
+									},
+									id: "drawing-storm-marcel-object-2"
 								}
 							]
 						}
@@ -115198,7 +115765,7 @@ var warningEventsListJSON = [
 				phenomenon: "thunderstorm",
 				areas: [
 					{
-						objectName: "test name 3",
+						objectName: "Inland south",
 						geoJSON: {
 							type: "FeatureCollection",
 							features: [
@@ -115233,8 +115800,10 @@ var warningEventsListJSON = [
 										"fill-opacity": 0.2,
 										"stroke-width": 2,
 										selectionType: "poly",
-										"stroke-opacity": 1
-									}
+										"stroke-opacity": 1,
+										objectName: "Inland south"
+									},
+									id: "drawing-storm-marcel-object-3"
 								}
 							]
 						}
@@ -115248,7 +115817,196 @@ var warningEventsListJSON = [
 				authority: "KNMI",
 				incident: "Storm Marcel"
 			}
-		]
+		],
+		selectedDrawing: {
+			id: "drawing-storm-marcel",
+			objectName: "Storm Marcel areas",
+			scope: "global",
+			lastUpdatedTime: "2026-07-10T00:00:00Z",
+			geoJSON: {
+				type: "FeatureCollection",
+				features: [
+					{
+						type: "Feature",
+						geometry: {
+							type: "Polygon",
+							coordinates: [
+								[
+									[
+										5.09504,
+										53.492
+									],
+									[
+										4.28015,
+										52.46456
+									],
+									[
+										6.87823,
+										52.98133
+									],
+									[
+										5.09504,
+										53.492
+									]
+								]
+							]
+						},
+						properties: {
+							fill: "#ff7800",
+							stroke: "#ff7800",
+							"fill-opacity": 0.2,
+							"stroke-width": 2,
+							selectionType: "poly",
+							"stroke-opacity": 1,
+							objectName: "Inland north"
+						},
+						id: "drawing-storm-marcel-object-1"
+					},
+					{
+						type: "Feature",
+						geometry: {
+							type: "Polygon",
+							coordinates: [
+								[
+									[
+										4.9,
+										53.2
+									],
+									[
+										5,
+										53.3
+									],
+									[
+										4.9629,
+										53.3371
+									],
+									[
+										4.91659,
+										53.32006
+									],
+									[
+										4.91232,
+										53.31826
+									],
+									[
+										4.80795,
+										53.26843
+									],
+									[
+										4.7936,
+										53.25812
+									],
+									[
+										4.78373,
+										53.24347
+									],
+									[
+										4.77554,
+										53.22488
+									],
+									[
+										4.74595,
+										53.18851
+									],
+									[
+										4.8,
+										53.175
+									],
+									[
+										4.9,
+										53.2
+									]
+								]
+							]
+						},
+						properties: {
+							fill: "#fae21e",
+							stroke: "#fae21e",
+							"fill-opacity": 0.2,
+							"stroke-width": 2,
+							selectionType: "poly",
+							warning_level: "1",
+							"stroke-opacity": 1,
+							objectName: "Inland east"
+						},
+						id: "drawing-storm-marcel-object-2"
+					},
+					{
+						type: "Feature",
+						geometry: {
+							type: "Polygon",
+							coordinates: [
+								[
+									[
+										5.09504,
+										53.492
+									],
+									[
+										4.28015,
+										52.46456
+									],
+									[
+										6.87823,
+										52.98133
+									],
+									[
+										5.09504,
+										53.492
+									]
+								]
+							]
+						},
+						properties: {
+							fill: "#ff7800",
+							stroke: "#ff7800",
+							"fill-opacity": 0.2,
+							"stroke-width": 2,
+							selectionType: "poly",
+							"stroke-opacity": 1,
+							objectName: "Inland south"
+						},
+						id: "drawing-storm-marcel-object-3"
+					},
+					{
+						type: "Feature",
+						geometry: {
+							type: "Polygon",
+							coordinates: [
+								[
+									[
+										5.09504,
+										53.492
+									],
+									[
+										4.28015,
+										52.46456
+									],
+									[
+										6.87823,
+										52.98133
+									],
+									[
+										5.09504,
+										53.492
+									]
+								]
+							]
+						},
+						properties: {
+							fill: "#fae21e",
+							stroke: "#fae21e",
+							"fill-opacity": 0.2,
+							"stroke-width": 2,
+							selectionType: "poly",
+							warning_level: "1",
+							"stroke-opacity": 1,
+							objectName: "Veluwe"
+						},
+						id: "drawing-storm-marcel-object-4"
+					}
+				]
+			}
+		}
 	}
 ];