@opengeoweb/warnings 19.6.1 → 20.0.0

package/dist/index.esm.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 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 { Polygons, Edit, Delete, ExitDomain, ChevronDown, DrawPolygon, Remove, Options, Waterspouts, Snow, FreezingRain, CoastalEvent, TemperatureLow, TemperatureHigh, Rain, Lightning, Fog, Wind, Thunderstorm, SevereMountainWaves, VulcanicEruption, Haze, FreezingPrecipitation, ModerateAircraftIcing, SevereAircraftIcing, ModerateTurbulence, SevereTurbulence, SandStorm, RadioactiveMaterials, DrawMask, 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, rewindGeometry, removeTransientFeatureProperties, defaultSmoothLine, defaultLineString, defaultFreehandLine, defaultOval, defaultCircle, defaultRotatableBox, defaultSquare, defaultLocation, defaultPoint, defaultSplit, defaultDelete, getDrawModeIdFromSelectionType, getIcon, getGeoJSONPropertyValue, FEATURE_DRAW_SECONDARY_STROKE_COLOR, 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, 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,22 +13,20 @@ 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, Menu, ListSubheader, FormHelperText, Paper, Card, CardContent, FormControl, CircularProgress, 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';
 import { snackbarListener, snackbarReducer, snackbarActions, snackbarTypes } from '@opengeoweb/snackbar';
-import { isEqual, cloneDeep, clamp, concat, groupBy, pick } from 'lodash';
+import { isEqual, cloneDeep, clamp, omit, concat, groupBy, pick } from 'lodash';
 import { useFormContext, useFieldArray, useForm, FormProvider, useWatch } from 'react-hook-form';
-import { isEmpty, createEmpty, extend } from 'ol/extent';
+import { bbox, intersect, featureCollection, union, bboxClip, polygonToLine, lineSplit, along, length, booleanPointInPolygon, area } from '@turf/turf';
+import { intersects, buffer, getWidth, getHeight, 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';
+import { useTheme as useTheme$1 } from '@mui/material/styles';
 import { http, HttpResponse, passthrough, delay } from 'msw';
 
 var en = {
@@ -118,6 +116,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",
@@ -144,6 +143,9 @@ var en = {
 	"warning-phenomenon-low-temp": "Low temperature",
 	"warning-phenomenon-funnel-cloud": "Funnel cloud",
 	"warning-phenomenon-coastal-event": "Coastal event",
+	"warning-phenomenon-freezing-rain": "Freezing rain",
+	"warning-phenomenon-snow": "Snow",
+	"warning-phenomenon-waterspouts": "Waterspouts",
 	"warning-probability-moderate-level-invalid": "Probability should be at least 30% when level is moderate",
 	"warning-valid-from": "Valid from",
 	"warning-valid-until": "Valid until",
@@ -403,6 +405,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",
@@ -410,8 +414,17 @@ var en = {
 	"drawing-tool-form-object-name-unique": "This object name is already in use",
 	"drawing-tool-form-object-name-max-length": "An object name can be at most {{maxLength}} characters",
 	"drawing-tool-form-object-delete": "Delete object",
+	"drawing-tool-form-masks": "Masks",
+	"drawing-tool-form-masks-clear": "Clear",
+	"drawing-tool-form-masks-tooltip": "Select a mask to clip your drawing",
+	"drawing-tool-form-masks-empty": "No masks available. Please contact your administrator.",
+	"drawing-tool-form-mask-no-overlap": "The drawing does not overlap with the selected mask",
+	"drawing-tool-form-mask-clip-error": "The drawing could not be clipped with the selected mask",
+	"drawing-tool-form-mask-saved": "Saved mask",
 	"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 +513,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",
@@ -513,15 +527,18 @@ var nl = {
 	"warning-level-letter-SIG": "SIG",
 	"warning-level-letter-AIR": "AIR",
 	"warning-phenomenon": "Fenomeen",
-	"warning-phenomenon-wind": "Wind",
-	"warning-phenomenon-fog": "Dichte mist",
+	"warning-phenomenon-wind": "Windstoten",
+	"warning-phenomenon-fog": "Mist",
 	"warning-phenomenon-thunderstorm": "Onweersbuien",
 	"warning-phenomenon-snow-ice": "Sneeuw/gladheid",
 	"warning-phenomenon-rain": "Zware regen",
 	"warning-phenomenon-high-temp": "Hitte",
-	"warning-phenomenon-low-temp": "Koude",
+	"warning-phenomenon-low-temp": "Kou",
 	"warning-phenomenon-funnel-cloud": "Hozen",
 	"warning-phenomenon-coastal-event": "Kust incident",
+	"warning-phenomenon-freezing-rain": "Gladheid door ijzel",
+	"warning-phenomenon-snow": "Gladheid door sneeuw",
+	"warning-phenomenon-waterspouts": "Waterhozen",
 	"warning-probability-moderate-level-invalid": "Waarschijnlijkheid moet tenminste 30% zijn als Niveau Gematigd is",
 	"warning-valid-from": "Geldig vanaf",
 	"warning-valid-until": "Geldig tot",
@@ -740,6 +757,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",
@@ -747,8 +766,17 @@ var nl = {
 	"drawing-tool-form-object-name-unique": "Deze objectnaam is al in gebruik",
 	"drawing-tool-form-object-name-max-length": "Een objectnaam mag maximaal {{maxLength}} tekens bevatten",
 	"drawing-tool-form-object-delete": "Object verwijderen",
+	"drawing-tool-form-masks": "Maskers",
+	"drawing-tool-form-masks-clear": "Wissen",
+	"drawing-tool-form-masks-tooltip": "Selecteer een masker om je tekening bij te snijden",
+	"drawing-tool-form-masks-empty": "Geen maskers beschikbaar. Neem contact op met je beheerder.",
+	"drawing-tool-form-mask-no-overlap": "De tekening overlapt niet met het geselecteerde masker",
+	"drawing-tool-form-mask-clip-error": "De tekening kon niet worden bijgesneden met het geselecteerde masker",
+	"drawing-tool-form-mask-saved": "Opgeslagen masker",
 	"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 +865,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",
@@ -859,6 +888,9 @@ var fi = {
 	"warning-phenomenon-low-temp": "Alhainen lämpötila",
 	"warning-phenomenon-funnel-cloud": "Suppilopilvi",
 	"warning-phenomenon-coastal-event": "Rannikon sääilmiö",
+	"warning-phenomenon-freezing-rain": "Jäätävä sade",
+	"warning-phenomenon-snow": "Lumi",
+	"warning-phenomenon-waterspouts": "Vesipatsas",
 	"warning-probability-moderate-level-invalid": "Todennäköisyys tulisi olla vähintään 30% sääilmiön vakavuuden ollessa kohtalainen",
 	"warning-valid-from": "Voimassa alkaen",
 	"warning-valid-until": "Voimassa kunnes",
@@ -1029,6 +1061,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",
@@ -1036,8 +1070,17 @@ var fi = {
 	"drawing-tool-form-object-name-unique": "ei käännetty",
 	"drawing-tool-form-object-name-max-length": "ei käännetty",
 	"drawing-tool-form-object-delete": "ei käännetty",
+	"drawing-tool-form-masks": "ei käännetty",
+	"drawing-tool-form-masks-clear": "ei käännetty",
+	"drawing-tool-form-masks-tooltip": "ei käännetty",
+	"drawing-tool-form-masks-empty": "ei käännetty",
+	"drawing-tool-form-mask-no-overlap": "ei käännetty",
+	"drawing-tool-form-mask-clip-error": "ei käännetty",
+	"drawing-tool-form-mask-saved": "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 +1169,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",
@@ -1148,6 +1192,9 @@ var no = {
 	"warning-phenomenon-low-temp": "Lav temperatur",
 	"warning-phenomenon-funnel-cloud": "Tornado",
 	"warning-phenomenon-coastal-event": "Kysthendelse",
+	"warning-phenomenon-freezing-rain": "Underkjølt regn",
+	"warning-phenomenon-snow": "Snø",
+	"warning-phenomenon-waterspouts": "Vannløpere",
 	"warning-probability-moderate-level-invalid": "Sannsynlighet bør være minst 30% når level er moderat",
 	"warning-valid-from": "Gyldig fra",
 	"warning-valid-until": "Gyldig til",
@@ -1316,6 +1363,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",
@@ -1323,8 +1372,17 @@ var no = {
 	"drawing-tool-form-object-name-unique": "ikke oversatt",
 	"drawing-tool-form-object-name-max-length": "ikke oversatt",
 	"drawing-tool-form-object-delete": "ikke oversatt",
+	"drawing-tool-form-masks": "ikke oversatt",
+	"drawing-tool-form-masks-clear": "ikke oversatt",
+	"drawing-tool-form-masks-tooltip": "ikke oversatt",
+	"drawing-tool-form-masks-empty": "ikke oversatt",
+	"drawing-tool-form-mask-no-overlap": "ikke oversatt",
+	"drawing-tool-form-mask-clip-error": "ikke oversatt",
+	"drawing-tool-form-mask-saved": "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 +1411,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);
@@ -1518,6 +1607,20 @@ function _regeneratorDefine(e, r, n, t) {
     }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2));
   }, _regeneratorDefine(e, r, n, t);
 }
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r);
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (String )(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
 function _unsupportedIterableToArray(r, a) {
   if (r) {
     if ("string" == typeof r) return _arrayLikeToArray(r, a);
@@ -2095,6 +2198,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 +2304,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')
               }))
@@ -3310,6 +3421,19 @@ var Phenomenon$1;
   Phenomenon["lowTemp"] = "lowTemp";
   Phenomenon["coastalEvent"] = "coastalEvent";
 })(Phenomenon$1 || (Phenomenon$1 = {}));
+var WarningEventPhenomenon;
+(function (WarningEventPhenomenon) {
+  WarningEventPhenomenon["fog"] = "fog";
+  WarningEventPhenomenon["freezingRain"] = "freezingRain";
+  WarningEventPhenomenon["highTemp"] = "highTemp";
+  WarningEventPhenomenon["lowTemp"] = "lowTemp";
+  WarningEventPhenomenon["rain"] = "rain";
+  WarningEventPhenomenon["snow"] = "snow";
+  WarningEventPhenomenon["thunderstorm"] = "thunderstorm";
+  WarningEventPhenomenon["waterspouts"] = "waterspouts";
+  WarningEventPhenomenon["wind"] = "wind";
+  WarningEventPhenomenon["coastalEvent"] = "coastalEvent";
+})(WarningEventPhenomenon || (WarningEventPhenomenon = {}));
 var emptyFilterId = 'unspecified';
 var defaultDomainFilter = {
   aviation: false,
@@ -3334,23 +3458,21 @@ var makeFilterFromList = function makeFilterFromList(options, value) {
     return property ? Object.assign({}, acc, (_Object$assign = {}, _Object$assign[property] = value, _Object$assign)) : acc;
   }, (_options$reduce = {}, _options$reduce[emptyFilterId] = value, _options$reduce));
 };
-var AllPhenomena = Object.assign({}, AirmetPhenomena, SigmetPhenomena, Phenomenon$1);
+var AllPhenomena = Object.assign({}, AirmetPhenomena, SigmetPhenomena, Phenomenon$1, WarningEventPhenomenon);
 var AllPhenomenaKeys = Object.fromEntries(Object.keys(AllPhenomena).map(function (key) {
   return [key, key];
 }));
 var domainPhenomena = {
   aviation: [].concat(Object.keys(SigmetPhenomena), Object.keys(AirmetPhenomena)),
   maritime: [Phenomenon$1.wind],
-  "public": [].concat(Object.keys(Phenomenon$1))
+  "public": [].concat(Object.keys(Phenomenon$1), Object.keys(WarningEventPhenomenon))
 };
 var defaultPhenomenonFilter = makeFilterFromList(Object.keys(AllPhenomenaKeys));
 var getSelectedOptions = function getSelectedOptions(options) {
   if (options === void 0) {
     options = {};
   }
-  var selectedOptions = Object.keys(options).filter(function (key) {
-    return options[key];
-  });
+  var selectedOptions = Object.values(options).filter(Boolean);
   var allSelected = selectedOptions.length === Object.keys(options).length;
   return {
     noSelectedOptions: selectedOptions.length,
@@ -3750,7 +3872,8 @@ var defaultExpandedWarningSections = {
 var initialWarningFilterPanelState = Object.assign({}, initialFilters, {
   expandedSections: defaultExpandedWarningSections,
   hoveredWarningIds: [],
-  hiddenWarningIds: []
+  hiddenWarningIds: [],
+  warningListActionRequest: undefined
 });
 var initialState$2 = {};
 var slice$1 = createSlice({
@@ -3787,6 +3910,18 @@ var slice$1 = createSlice({
       draft[action.payload.panelId] = Object.assign({}, currentPanelState, {
         hiddenWarningIds: (_action$payload$warni2 = action.payload.warningIds) != null ? _action$payload$warni2 : []
       });
+    },
+    requestWarningListAction: function requestWarningListAction(draft, action) {
+      var currentPanelState = draft[action.payload.panelId] || initialWarningFilterPanelState;
+      draft[action.payload.panelId] = Object.assign({}, currentPanelState, {
+        warningListActionRequest: action.payload.request
+      });
+    },
+    clearWarningListActionRequest: function clearWarningListActionRequest(draft, action) {
+      var currentPanelState = draft[action.payload.panelId];
+      if (currentPanelState) {
+        currentPanelState.warningListActionRequest = undefined;
+      }
     }
   }
 });
@@ -3819,11 +3954,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 +3969,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 +4001,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 +4020,7 @@ var slice = createSlice({
         delete draft.selectedEventId;
         delete draft.isFormDirty;
         delete draft.warningType;
+        delete draft.selectedDrawing;
       }
     });
   }
@@ -4022,6 +4160,12 @@ var getWarningPhenomenaIcon = function getWarningPhenomenaIcon(key) {
       return jsx(TemperatureLow, {});
     case 'coastalEvent':
       return jsx(CoastalEvent, {});
+    case 'freezingRain':
+      return jsx(FreezingRain, {});
+    case 'snow':
+      return jsx(Snow, {});
+    case 'waterspouts':
+      return jsx(Waterspouts, {});
     default:
       return undefined;
   }
@@ -4238,7 +4382,44 @@ var warningPhenomena = [{
   key: 'MT_OBSC',
   isAviation: true
 }];
-var allPhenomenaDict = warningPhenomena.reduce(function (list, item) {
+var warningEventPhenomena = [{
+  translationKey: 'warning-phenomenon-fog',
+  key: 'fog',
+  isAviation: false
+}, {
+  translationKey: 'warning-phenomenon-freezing-rain',
+  key: 'freezingRain',
+  isAviation: false
+}, {
+  translationKey: 'warning-phenomenon-high-temp',
+  key: 'highTemp',
+  isAviation: false
+}, {
+  translationKey: 'warning-phenomenon-low-temp',
+  key: 'lowTemp',
+  isAviation: false
+}, {
+  translationKey: 'warning-phenomenon-rain',
+  key: 'rain',
+  isAviation: false
+}, {
+  translationKey: 'warning-phenomenon-snow',
+  key: 'snow',
+  isAviation: false
+}, {
+  translationKey: 'warning-phenomenon-thunderstorm',
+  key: 'thunderstorm',
+  isAviation: false
+}, {
+  translationKey: 'warning-phenomenon-waterspouts',
+  key: 'waterspouts',
+  isAviation: false
+}, {
+  translationKey: 'warning-phenomenon-wind',
+  key: 'wind',
+  isAviation: false
+}];
+var allPhenomenaDict = [].concat(warningPhenomena, warningEventPhenomena).reduce(function (list, item) {
   var _Object$assign;
   return Object.assign({}, list, (_Object$assign = {}, _Object$assign[item.key] = item, _Object$assign));
 }, {});
@@ -4247,14 +4428,21 @@ var getPhenomenaIcon = function getPhenomenaIcon(key) {
 };
 var Phenomenon = function Phenomenon(_ref) {
   var isDisabled = _ref.isDisabled,
-    isReadOnly = _ref.isReadOnly;
+    isReadOnly = _ref.isReadOnly,
+    _ref$isWarningEvent = _ref.isWarningEvent,
+    isWarningEvent = _ref$isWarningEvent === void 0 ? false : _ref$isWarningEvent;
   var _useWarningsTranslati = useWarningsTranslation(),
     t = _useWarningsTranslati.t;
   var _useDraftFormHelpers = useDraftFormHelpers(),
     isRequired = _useDraftFormHelpers.isRequired;
-  // These phenomena are sent to Public Warning Form
-  var warningFormPhenomena = warningPhenomena.filter(function (phenomenon) {
+  var phenomenaList = isWarningEvent ? warningEventPhenomena : warningPhenomena;
+  // These phenomena are sent to Form
+  var warningFormPhenomena = phenomenaList.filter(function (phenomenon) {
     return !phenomenon.isAviation && phenomenon.key !== emptyFilterId;
+  })
+  // sort alphabeticaly
+  .sort(function (phenomenonA, phenomenonB) {
+    return t(phenomenonA.translationKey).localeCompare(t(phenomenonB.translationKey));
   });
   return jsx(ReactHookFormSelect, {
     disabled: isDisabled || isReadOnly,
@@ -4272,15 +4460,20 @@ var Phenomenon = function Phenomenon(_ref) {
         children: jsxs(Grid, {
           container: true,
           sx: {
-            justifyContent: 'space-between'
+            alignItems: 'center',
+            flexWrap: 'nowrap',
+            gap: 1,
+            justifyContent: 'flex-start'
           },
           children: [jsx(Grid, {
-            children: t(phenomenon.translationKey)
-          }), jsx(Grid, {
             sx: {
-              minWidth: 56
+              alignItems: 'center',
+              display: 'flex',
+              flexShrink: 0
             },
             children: getPhenomenaIcon(phenomenon.key)
+          }), jsx(Grid, {
+            children: t(phenomenon.translationKey)
           })]
         })
       }, phenomenon.key);
@@ -4289,7 +4482,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 +4510,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);
@@ -4378,10 +4571,8 @@ var getTranslationKey = function getTranslationKey(optionId, id) {
     }
     return optionId;
   }
-  var phenomena = warningPhenomena.find(function (phenomenon) {
-    return phenomenon.key === optionId;
-  });
-  return phenomena ? phenomena.translationKey : "warning-" + id + "-" + optionId;
+  var phenomenon = allPhenomenaDict[optionId];
+  return phenomenon ? phenomenon.translationKey : "warning-" + id + "-" + optionId;
 };
 var getIdFromUrl = function getIdFromUrl(url) {
   var splitString = url == null ? void 0 : url.split('/');
@@ -5065,6 +5256,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 +5464,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,
@@ -5555,6 +5750,7 @@ var AreaDrawingManagerConnect = function AreaDrawingManagerConnect(_ref2) {
     setSelectedDrawingId(drawingId);
   };
   useEffect(function () {
+    var _drawingDetails$trans, _drawingDetails$trans2;
     if (!selectedDrawingId || !drawingDetails || (drawingDetails == null ? void 0 : drawingDetails.id) !== selectedDrawingId || isFetchingDetails) {
       return;
     }
@@ -5563,7 +5759,7 @@ var AreaDrawingManagerConnect = function AreaDrawingManagerConnect(_ref2) {
       id: selectedDrawingId,
       drawingInstanceId: drawingDialogType
     }));
-    openDrawDialog(drawingDetails.geoJSON);
+    openDrawDialog((_drawingDetails$trans = (_drawingDetails$trans2 = drawingDetails.transformation) == null ? void 0 : _drawingDetails$trans2.original) != null ? _drawingDetails$trans : drawingDetails.geoJSON);
     setSelectedDrawingId(undefined);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedDrawingId, drawingDetails, dispatch, isFetchingDetails]);
@@ -5603,7 +5799,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: {
@@ -5817,23 +6022,7 @@ var DrawingTool = function DrawingTool(_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 2026 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2026 - Finnish Meteorological Institute (FMI)
- * Copyright 2026 - The Norwegian Meteorological Institute (MET Norway)
- * */
+var _excluded$b = ["opacity", "geoJSON", "features"];
 var MAX_OBJECT_NAME_LENGTH = 64;
 var formatDefaultObjectName = function formatDefaultObjectName(position) {
   return "Object " + position;
@@ -5936,6 +6125,160 @@ var addObjectNamesToGeoJSON = function addObjectNamesToGeoJSON(geoJSON, objectNa
     })
   });
 };
+var getDrawingToSubmit = function getDrawingToSubmit(formValues) {
+  // form only values which should not be submitted
+  formValues.opacity;
+    var geoJSON = formValues.geoJSON,
+    _formValues$features = formValues.features,
+    features = _formValues$features === void 0 ? [] : _formValues$features,
+    submitValues = _objectWithoutPropertiesLoose(formValues, _excluded$b);
+  var objectNamesByFeatureId = features.reduce(function (objectNames, _ref2) {
+    var _Object$assign;
+    var featureId = _ref2.featureId,
+      objectName = _ref2.objectName;
+    return Object.assign({}, objectNames, (_Object$assign = {}, _Object$assign[featureId] = objectName, _Object$assign));
+  }, {});
+  return Object.assign({}, submitValues, {
+    // rewind geometry so the winding order is correct
+    geoJSON: rewindGeometry(removeTransientFeatureProperties(addObjectNamesToGeoJSON(geoJSON, objectNamesByFeatureId)))
+  });
+};
+
+var DrawingToolFormMasks = function DrawingToolFormMasks(_ref) {
+  var masks = _ref.masks,
+    selectedMaskId = _ref.selectedMaskId,
+    onSelectMask = _ref.onSelectMask,
+    onHoverMask = _ref.onHoverMask,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$isLoadingMasks = _ref.isLoadingMasks,
+    isLoadingMasks = _ref$isLoadingMasks === void 0 ? false : _ref$isLoadingMasks;
+  var _useWarningsTranslati = useWarningsTranslation(),
+    t = _useWarningsTranslati.t;
+  var _React$useState = React.useState(null),
+    anchorEl = _React$useState[0],
+    setAnchorEl = _React$useState[1];
+  var isOpen = Boolean(anchorEl);
+  var selectedMask = masks.find(function (mask) {
+    return mask.id === selectedMaskId;
+  });
+  var closeMenu = function closeMenu() {
+    setAnchorEl(null);
+    onHoverMask(undefined);
+  };
+  var hoverMask = function hoverMask(maskId) {
+    if (isOpen) {
+      onHoverMask(maskId);
+    }
+  };
+  return jsxs(Fragment, {
+    children: [jsx(CustomIconButton, {
+      "data-testid": "drawingToolForm-masks-button",
+      disabled: isDisabled,
+      isSelected: isOpen || !!selectedMask,
+      onClick: function onClick(event) {
+        return setAnchorEl(event.currentTarget);
+      },
+      size: "medium",
+      tooltipTitle: selectedMask ? t('drawing-tool-form-masks') + ": " + selectedMask.objectName : t('drawing-tool-form-masks-tooltip'),
+      variant: "tool",
+      children: jsx(DrawMask, {})
+    }), jsxs(Menu, {
+      anchorEl: anchorEl,
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'center'
+      },
+      disableAutoFocusItem: true,
+      onClose: closeMenu,
+      open: isOpen,
+      slotProps: {
+        backdrop: {
+          style: {
+            opacity: 0,
+            transition: 'none'
+          }
+        },
+        paper: {
+          sx: {
+            minWidth: 200
+          }
+        },
+        transition: {
+          onExited: function onExited() {
+            return onHoverMask(undefined);
+          }
+        }
+      },
+      transformOrigin: {
+        vertical: 'top',
+        horizontal: 'center'
+      },
+      children: [jsxs(ListSubheader, {
+        "data-testid": "drawingToolForm-masks-title",
+        sx: {
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          gap: 2,
+          ' .MuiSvgIcon-root': {
+            mr: 0
+          }
+        },
+        children: [jsx(Typography, {
+          sx: {
+            fontSize: '12px'
+          },
+          children: t('drawing-tool-form-masks')
+        }), selectedMask ? jsx(Button, {
+          "data-testid": "drawingToolForm-masks-clear",
+          endIcon: jsx(Delete, {}),
+          onClick: function onClick() {
+            onSelectMask(undefined);
+            closeMenu();
+          },
+          size: "small",
+          sx: {
+            minWidth: 0,
+            mr: -1
+          },
+          variant: "flat",
+          children: t('drawing-tool-form-masks-clear')
+        }) : null]
+      }), isLoadingMasks ? jsx(Typography, {
+        "data-testid": "drawingToolForm-masks-loading",
+        sx: {
+          padding: 1,
+          fontSize: 14
+        },
+        children: t('loading')
+      }) : null, !isLoadingMasks && masks.length === 0 ? jsx(Typography, {
+        "data-testid": "drawingToolForm-masks-empty",
+        sx: {
+          padding: 1,
+          fontSize: 14,
+          maxWidth: 260
+        },
+        children: t('drawing-tool-form-masks-empty')
+      }) : null, masks.map(function (mask) {
+        return jsx(MenuItem, {
+          onClick: function onClick() {
+            onSelectMask(mask.id === selectedMaskId ? undefined : mask.id);
+            closeMenu();
+          },
+          onMouseEnter: function onMouseEnter() {
+            return hoverMask(mask.id);
+          },
+          onMouseLeave: function onMouseLeave() {
+            return hoverMask(undefined);
+          },
+          selected: mask.id === selectedMaskId,
+          children: mask.objectName
+        }, mask.id);
+      })]
+    })]
+  });
+};
 
 var opacityOptions = [100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0];
 var drawToolConfig = [{
@@ -6001,7 +6344,13 @@ var DrawingToolFormContentsNoMemo = function DrawingToolFormContentsNoMemo(_ref)
     onDeleteObject = _ref.onDeleteObject,
     opacity = _ref.opacity,
     onSubmit = _ref.onSubmit,
-    geoJSONProperties = _ref.geoJSONProperties;
+    geoJSONProperties = _ref.geoJSONProperties,
+    masks = _ref.masks,
+    isLoadingMasks = _ref.isLoadingMasks,
+    maskError = _ref.maskError,
+    selectedMaskId = _ref.selectedMaskId,
+    onSelectMask = _ref.onSelectMask,
+    onHoverMask = _ref.onHoverMask;
   var _useWarningsTranslati = useWarningsTranslation(),
     t = _useWarningsTranslati.t;
   var hasErrors = Object.keys(errors).length > 0;
@@ -6116,6 +6465,28 @@ var DrawingToolFormContentsNoMemo = function DrawingToolFormContentsNoMemo(_ref)
               }
             }
           })]
+        }), jsxs(Grid, {
+          container: true,
+          sx: {
+            marginBottom: 1
+          },
+          children: [jsx(DrawingToolFormMasks, {
+            isDisabled: isLoading,
+            isLoadingMasks: isLoadingMasks,
+            masks: masks,
+            onHoverMask: onHoverMask,
+            onSelectMask: onSelectMask,
+            selectedMaskId: selectedMaskId
+          }), maskError ? jsx(FormHelperText, {
+            "data-testid": "drawingToolForm-masks-error",
+            error: true,
+            sx: {
+              marginLeft: 0,
+              width: '100%'
+            },
+            variant: "filled",
+            children: t(maskError)
+          }) : null]
         }), jsx(Grid, {
           container: true,
           size: "grow",
@@ -6264,7 +6635,7 @@ var DrawingToolFormContentsNoMemo = function DrawingToolFormContentsNoMemo(_ref)
       },
       children: jsx(Button, {
         "data-testid": "saveDrawingFormButton",
-        disabled: isLoading || hasErrors,
+        disabled: isLoading || hasErrors || !!maskError,
         onClick: onSubmit,
         sx: {
           width: '100%',
@@ -6320,7 +6691,9 @@ var useFormDirty = function useFormDirty(_ref) {
   }, [isLoading, error, previousIsLoading, onSuccess]);
 };
 
-var _excluded$b = ["opacity", "geoJSON", "features"];
+var emptyMasks$1 = [];
+var noopSelectMask = function noopSelectMask() {};
+var noopHoverMask = function noopHoverMask() {};
 var getDrawingName = function getDrawingName(drawingName) {
   return drawingName || dateUtils.dateToString(new Date(), dateUtils.DATE_FORMAT_DATEPICKER, true) + " UTC";
 };
@@ -6355,7 +6728,17 @@ var DrawingToolForm = function DrawingToolForm(_ref) {
     onDeleteFeature = _ref$onDeleteFeature === void 0 ? function () {} : _ref$onDeleteFeature,
     _ref$onFormDirty = _ref.onFormDirty,
     onFormDirty = _ref$onFormDirty === void 0 ? function () {} : _ref$onFormDirty,
-    geoJSON = _ref.geoJSON;
+    geoJSON = _ref.geoJSON,
+    _ref$masks = _ref.masks,
+    masks = _ref$masks === void 0 ? emptyMasks$1 : _ref$masks,
+    _ref$isLoadingMasks = _ref.isLoadingMasks,
+    isLoadingMasks = _ref$isLoadingMasks === void 0 ? false : _ref$isLoadingMasks,
+    maskError = _ref.maskError,
+    selectedMaskId = _ref.selectedMaskId,
+    _ref$onSelectMask = _ref.onSelectMask,
+    onSelectMask = _ref$onSelectMask === void 0 ? noopSelectMask : _ref$onSelectMask,
+    _ref$onHoverMask = _ref.onHoverMask,
+    onHoverMask = _ref$onHoverMask === void 0 ? noopHoverMask : _ref$onHoverMask;
   var _useFormContext = useFormContext(),
     handleSubmit = _useFormContext.handleSubmit,
     setValue = _useFormContext.setValue,
@@ -6441,24 +6824,8 @@ var DrawingToolForm = function DrawingToolForm(_ref) {
   }, [isLoading, isInEditMode, geoJSON, setValue]);
   var onSubmit = React.useCallback(function (formValues) {
     onDeactivateTool();
-    // remove unneeded properties
-    formValues.opacity;
-      var geoJSON = formValues.geoJSON,
-      _formValues$features = formValues.features,
-      features = _formValues$features === void 0 ? [] : _formValues$features,
-      allFormValues = _objectWithoutPropertiesLoose(formValues, _excluded$b);
-    var objectNamesByFeatureId = features.reduce(function (objectNames, _ref3) {
-      var _Object$assign;
-      var featureId = _ref3.featureId,
-        objectName = _ref3.objectName;
-      return Object.assign({}, objectNames, (_Object$assign = {}, _Object$assign[featureId] = objectName, _Object$assign));
-    }, {});
-    var geoJSONWithObjectNames = addObjectNamesToGeoJSON(geoJSON, objectNamesByFeatureId);
-    // rewind geometry
-    var rewindedGeometry = rewindGeometry(geoJSONWithObjectNames);
-    onSubmitForm(Object.assign({}, allFormValues, {
-      id: id,
-      geoJSON: rewindedGeometry
+    onSubmitForm(Object.assign({}, getDrawingToSubmit(formValues), {
+      id: id
     }));
   }, [id, onDeactivateTool, onSubmitForm]);
   var opacity = React.useMemo(function () {
@@ -6500,14 +6867,20 @@ var DrawingToolForm = function DrawingToolForm(_ref) {
     isDirty: isDirty,
     isInEditMode: isInEditMode,
     isLoading: isLoading,
+    isLoadingMasks: isLoadingMasks,
+    maskError: maskError,
+    masks: masks,
     onBlurName: onBlurName,
     onBlurObjectName: onBlurObjectName,
     onChangeDrawMode: onChangeDrawMode,
     onChangeOpacity: onChangeOpacity,
     onDeleteObject: onDeleteFeature,
     onFocusObject: onSelectFeature,
+    onHoverMask: onHoverMask,
+    onSelectMask: onSelectMask,
     onSubmit: handleSubmit(onSubmit),
-    opacity: opacity
+    opacity: opacity,
+    selectedMaskId: selectedMaskId
   });
 };
 var Wrapper = function Wrapper(props) {
@@ -6531,6 +6904,357 @@ var Wrapper = function Wrapper(props) {
   });
 };
 
+var CLIPPED_RESULT_FILL_OPACITY = 0.4;
+var MASKED_FILL_OPACITY_KEY = 'maskedFillOpacity';
+var getDrawnFeatureIndexes = function getDrawnFeatureIndexes(geoJSON) {
+  return geoJSON.features.reduce(function (indexes, feature, index) {
+    return isGeoJSONGeometryEmpty(feature) ? indexes : [].concat(indexes, [index]);
+  }, []);
+};
+var getFeatureIndexesToHideFill = function getFeatureIndexesToHideFill(geoJSON) {
+  return getDrawnFeatureIndexes(geoJSON).filter(function (index) {
+    var _geoJSON$features$ind;
+    return ((_geoJSON$features$ind = geoJSON.features[index].properties) == null ? void 0 : _geoJSON$features$ind['fill-opacity']) !== 0;
+  });
+};
+var getFeatureIndexesToRestoreFill = function getFeatureIndexesToRestoreFill(geoJSON) {
+  return geoJSON.features.reduce(function (indexes, feature, index) {
+    var _feature$properties;
+    return ((_feature$properties = feature.properties) == null ? void 0 : _feature$properties[MASKED_FILL_OPACITY_KEY]) !== undefined ? [].concat(indexes, [index]) : indexes;
+  }, []);
+};
+var restoreMaskedFillProperties = function restoreMaskedFillProperties(properties) {
+  if ((properties == null ? void 0 : properties[MASKED_FILL_OPACITY_KEY]) === undefined) {
+    return properties;
+  }
+  var fillOpacity = properties[MASKED_FILL_OPACITY_KEY],
+    restProperties = _objectWithoutPropertiesLoose(properties, [MASKED_FILL_OPACITY_KEY].map(_toPropertyKey));
+  return fillOpacity === null ? omit(restProperties, 'fill-opacity') : Object.assign({}, restProperties, {
+    'fill-opacity': fillOpacity
+  });
+};
+var restoreMaskedFill = function restoreMaskedFill(geoJSON) {
+  return Object.assign({}, geoJSON, {
+    features: geoJSON.features.map(function (feature) {
+      return Object.assign({}, feature, {
+        properties: restoreMaskedFillProperties(feature.properties)
+      });
+    })
+  });
+};
+var maskPolygonCache = new WeakMap();
+var maskPartsCache = new WeakMap();
+var clippedGeometryCache = new WeakMap();
+var isPolygonFeature = function isPolygonFeature(feature) {
+  var _feature$geometry, _feature$geometry2;
+  return ((_feature$geometry = feature.geometry) == null ? void 0 : _feature$geometry.type) === 'Polygon' || ((_feature$geometry2 = feature.geometry) == null ? void 0 : _feature$geometry2.type) === 'MultiPolygon';
+};
+var getMaskPolygon = function getMaskPolygon(mask) {
+  var _polygons$;
+  var cachedMaskPolygon = maskPolygonCache.get(mask);
+  if (cachedMaskPolygon !== undefined) {
+    return cachedMaskPolygon;
+  }
+  var polygons = mask.features.filter(isPolygonFeature);
+  var maskPolygon = polygons.length > 1 ? union(featureCollection(polygons)) : (_polygons$ = polygons[0]) != null ? _polygons$ : null;
+  maskPolygonCache.set(mask, maskPolygon);
+  return maskPolygon;
+};
+var getMaskParts = function getMaskParts(mask) {
+  var cachedMaskParts = maskPartsCache.get(mask);
+  if (cachedMaskParts) {
+    return cachedMaskParts;
+  }
+  var maskParts = mask.features.filter(isPolygonFeature).map(function (polygon) {
+    return {
+      polygon: polygon,
+      bbox: bbox(polygon)
+    };
+  });
+  maskPartsCache.set(mask, maskParts);
+  return maskParts;
+};
+var padBBox = function padBBox(geometryBBox) {
+  return buffer(geometryBBox, Math.max(getWidth(geometryBBox), getHeight(geometryBBox)) * 0.01 + 1e-6);
+};
+var removeEmptyRings = function removeEmptyRings(polygon) {
+  var isRing = function isRing(ring) {
+    return ring.length > 3;
+  };
+  if (polygon.geometry.type === 'Polygon') {
+    return Object.assign({}, polygon, {
+      geometry: Object.assign({}, polygon.geometry, {
+        coordinates: polygon.geometry.coordinates.filter(isRing)
+      })
+    });
+  }
+  return Object.assign({}, polygon, {
+    geometry: Object.assign({}, polygon.geometry, {
+      coordinates: polygon.geometry.coordinates.map(function (rings) {
+        return rings.filter(isRing);
+      }).filter(function (rings) {
+        return rings.length > 0;
+      })
+    })
+  });
+};
+var getMaskPolygonInBBox = function getMaskPolygonInBBox(maskPolygon, maskBBox, geometryBBox) {
+  if (!intersects(maskBBox, geometryBBox)) {
+    return null;
+  }
+  var clippedMask = removeEmptyRings(bboxClip(maskPolygon, padBBox(geometryBBox)));
+  return clippedMask.geometry.coordinates.length ? clippedMask : null;
+};
+var isPointInMask = function isPointInMask(position, maskPolygon) {
+  return booleanPointInPolygon(position, maskPolygon);
+};
+var clipLine = function clipLine(coordinates, maskPolygon, splitterPolygon) {
+  var line = {
+    type: 'Feature',
+    properties: {},
+    geometry: {
+      type: 'LineString',
+      coordinates: coordinates
+    }
+  };
+  var outline = polygonToLine(splitterPolygon);
+  var outlines = outline.type === 'FeatureCollection' ? outline.features : [outline];
+  var segments = outlines.reduce(function (currentSegments, splitter) {
+    return currentSegments.flatMap(function (segment) {
+      var split = lineSplit(segment, splitter);
+      return split.features.length ? split.features : [segment];
+    });
+  }, [line]);
+  return segments.filter(function (segment) {
+    var midpoint = along(segment, length(segment) / 2);
+    return isPointInMask(midpoint.geometry.coordinates, maskPolygon);
+  }).map(function (segment) {
+    return segment.geometry.coordinates;
+  });
+};
+var isPointInAnyMaskPart = function isPointInAnyMaskPart(position, mask) {
+  return getMaskParts(mask).some(function (part) {
+    return isPointInMask(position, part.polygon);
+  });
+};
+var clipGeometry = function clipGeometry(geometry, mask) {
+  switch (geometry.type) {
+    case 'Polygon':
+    case 'MultiPolygon':
+      {
+        var _union$geometry, _union;
+        var geometryBBox = bbox(geometry);
+        var feature = {
+          type: 'Feature',
+          properties: {},
+          geometry: geometry
+        };
+        var clippedParts = getMaskParts(mask).reduce(function (result, part) {
+          var maskInBBox = getMaskPolygonInBBox(part.polygon, part.bbox, geometryBBox);
+          var clippedPart = maskInBBox && intersect(featureCollection([feature, maskInBBox]));
+          return clippedPart ? [].concat(result, [clippedPart]) : result;
+        }, []);
+        if (clippedParts.length <= 1) {
+          var _clippedParts$0$geome, _clippedParts$;
+          return (_clippedParts$0$geome = (_clippedParts$ = clippedParts[0]) == null ? void 0 : _clippedParts$.geometry) != null ? _clippedParts$0$geome : null;
+        }
+        return (_union$geometry = (_union = union(featureCollection(clippedParts))) == null ? void 0 : _union.geometry) != null ? _union$geometry : null;
+      }
+    case 'LineString':
+    case 'MultiLineString':
+      {
+        var maskPolygon = getMaskPolygon(mask);
+        var maskInBBox = maskPolygon && getMaskPolygonInBBox(maskPolygon, bbox(maskPolygon), bbox(geometry));
+        if (!maskPolygon || !maskInBBox) {
+          return null;
+        }
+        var lines = geometry.type === 'LineString' ? [geometry.coordinates] : geometry.coordinates;
+        var clipped = lines.flatMap(function (line) {
+          return clipLine(line, maskPolygon, maskInBBox);
+        });
+        if (clipped.length === 0) {
+          return null;
+        }
+        return clipped.length === 1 ? {
+          type: 'LineString',
+          coordinates: clipped[0]
+        } : {
+          type: 'MultiLineString',
+          coordinates: clipped
+        };
+      }
+    case 'Point':
+      return isPointInAnyMaskPart(geometry.coordinates, mask) ? geometry : null;
+    case 'MultiPoint':
+      {
+        var points = geometry.coordinates.filter(function (point) {
+          return isPointInAnyMaskPart(point, mask);
+        });
+        return points.length ? {
+          type: 'MultiPoint',
+          coordinates: points
+        } : null;
+      }
+    default:
+      return geometry;
+  }
+};
+var getClippedGeometry = function getClippedGeometry(geometry, mask) {
+  var _clippedGeometryCache;
+  var cachedByMask = (_clippedGeometryCache = clippedGeometryCache.get(geometry)) != null ? _clippedGeometryCache : new WeakMap();
+  if (cachedByMask.has(mask)) {
+    return cachedByMask.get(mask);
+  }
+  var clippedGeometry = clipGeometry(geometry, mask);
+  cachedByMask.set(mask, clippedGeometry);
+  clippedGeometryCache.set(geometry, cachedByMask);
+  return clippedGeometry;
+};
+var clipGeoJSONWithMask = function clipGeoJSONWithMask(geoJSON, mask) {
+  if (getMaskParts(mask).length === 0) {
+    return Object.assign({}, geoJSON, {
+      features: []
+    });
+  }
+  var features = geoJSON.features.reduce(function (result, feature) {
+    if (!feature.geometry || isGeoJSONGeometryEmpty(feature)) {
+      return result;
+    }
+    var geometry = getClippedGeometry(feature.geometry, mask);
+    return geometry ? [].concat(result, [Object.assign({}, feature, {
+      geometry: geometry
+    })]) : result;
+  }, []);
+  return Object.assign({}, geoJSON, {
+    features: features
+  });
+};
+var findMaskForTransformation = function findMaskForTransformation(masks, transformation) {
+  if (!transformation) {
+    return undefined;
+  }
+  var getGeometries = function getGeometries(geoJSON) {
+    return geoJSON.features.map(function (feature) {
+      return feature.geometry;
+    });
+  };
+  var transformationGeometries = getGeometries(transformation.mask);
+  return masks.find(function (mask) {
+    return isEqual(getGeometries(mask.geoJSON), transformationGeometries);
+  });
+};
+var buildClippedHighlightGeoJSON = function buildClippedHighlightGeoJSON(clipped) {
+  return Object.assign({}, clipped, {
+    features: clipped.features.map(function (feature, index) {
+      var _feature$id;
+      return Object.assign({}, feature, {
+        id: "mask-result-" + ((_feature$id = feature.id) != null ? _feature$id : index),
+        properties: Object.assign({}, feature.properties, {
+          isReadonly: true,
+          mapFeatureClass: 'default',
+          isSelected: false,
+          fill: '#186DFF',
+          'fill-opacity': CLIPPED_RESULT_FILL_OPACITY,
+          'stroke-width': 0,
+          'stroke-opacity': 0
+        })
+      });
+    })
+  });
+};
+
+/* *
+ * 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 2026 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2026 - Finnish Meteorological Institute (FMI)
+ * Copyright 2026 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+var MASK_PREVIEW_FILL_OPACITY = 0;
+var getMaskPreviewLayerId = function getMaskPreviewLayerId(mapId) {
+  return "drawing-mask-preview-" + mapId;
+};
+var getClippedResultLayerId = function getClippedResultLayerId(mapId) {
+  return "drawing-mask-result-" + mapId;
+};
+var buildMaskPreviewGeoJSON = function buildMaskPreviewGeoJSON(mask) {
+  return Object.assign({}, mask.geoJSON, {
+    features: mask.geoJSON.features.map(function (feature, index) {
+      var _feature$id;
+      return Object.assign({}, feature, {
+        id: (_feature$id = feature.id) != null ? _feature$id : "mask-" + mask.id + "-" + index,
+        properties: Object.assign({}, feature.properties, {
+          isReadonly: true,
+          mapFeatureClass: 'default',
+          isSelected: false,
+          // TODO https://gitlab.com/opengeoweb/opengeoweb/-/work_items/7413: remove this property and make the hover effect based on selectionType
+          selectionType: 'fir',
+          fill: FEATURE_DRAW_SECONDARY_STROKE_COLOR,
+          'fill-opacity': MASK_PREVIEW_FILL_OPACITY,
+          'stroke-width': 3,
+          stroke: '#F59E0B'
+        })
+      });
+    })
+  });
+};
+var useReadonlyFeatureLayer = function useReadonlyFeatureLayer(mapId, layerId, geojson) {
+  var dispatch = useDispatch();
+  React.useEffect(function () {
+    if (!mapId) {
+      return undefined;
+    }
+    dispatch(layerActions.addLayer({
+      mapId: mapId,
+      layerId: layerId,
+      layer: {
+        geojson: emptyGeoJSON,
+        layerType: LayerType.featureLayer,
+        isSelectable: false,
+        isInEditMode: false,
+        enabled: true
+      },
+      origin: 'warnings-lib'
+    }));
+    return function () {
+      dispatch(layerActions.layerDelete({
+        layerId: layerId,
+        mapId: mapId
+      }));
+    };
+  }, [dispatch, layerId, mapId]);
+  React.useEffect(function () {
+    if (mapId) {
+      dispatch(layerActions.layerChangeGeojson({
+        layerId: layerId,
+        geojson: geojson
+      }));
+    }
+  }, [dispatch, geojson, layerId, mapId]);
+};
+var useMaskPreviewLayer = function useMaskPreviewLayer(mapId, mask) {
+  var geojson = React.useMemo(function () {
+    return mask ? buildMaskPreviewGeoJSON(mask) : emptyGeoJSON;
+  }, [mask]);
+  useReadonlyFeatureLayer(mapId, getMaskPreviewLayerId(mapId), geojson);
+};
+var useClippedResultLayer = function useClippedResultLayer(mapId, clippedGeoJSON) {
+  var geojson = React.useMemo(function () {
+    return clippedGeoJSON ? buildClippedHighlightGeoJSON(clippedGeoJSON) : emptyGeoJSON;
+  }, [clippedGeoJSON]);
+  useReadonlyFeatureLayer(mapId, getClippedResultLayerId(mapId), geojson);
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -6604,7 +7328,149 @@ var useSelectDrawFeature = function useSelectDrawFeature(layerId) {
   }, [dispatch, geoJSON, layerId, selectedFeatureIds]);
 };
 
+var emptyMasks = [];
+var SAVED_MASK_ID = 'saved-mask';
+var useRestoreSavedMask = function useRestoreSavedMask(drawingId, masks, isLoadingMasks, onRestoreMask) {
+  var _useWarningsTranslati = useWarningsTranslation(),
+    t = _useWarningsTranslati.t;
+  var _useDrawingDetails = useDrawingDetails(drawingId),
+    drawingDetails = _useDrawingDetails.data;
+  var restoredDrawingIdRef = React.useRef(undefined);
+  var _React$useState = React.useState(),
+    unmatchedSavedMask = _React$useState[0],
+    setUnmatchedSavedMask = _React$useState[1];
+  React.useEffect(function () {
+    if (!drawingId || restoredDrawingIdRef.current === drawingId || (drawingDetails == null ? void 0 : drawingDetails.id) !== drawingId || isLoadingMasks) {
+      return;
+    }
+    restoredDrawingIdRef.current = drawingId;
+    var savedMask = findMaskForTransformation(masks, drawingDetails.transformation);
+    if (savedMask) {
+      onRestoreMask(savedMask.id);
+      return;
+    }
+    if (drawingDetails.transformation) {
+      setUnmatchedSavedMask({
+        id: SAVED_MASK_ID,
+        objectName: t('drawing-tool-form-mask-saved'),
+        geoJSON: drawingDetails.transformation.mask,
+        lastUpdatedTime: drawingDetails.lastUpdatedTime,
+        scope: 'user'
+      });
+      onRestoreMask(SAVED_MASK_ID);
+    }
+  }, [drawingDetails, drawingId, isLoadingMasks, masks, onRestoreMask, t]);
+  return unmatchedSavedMask;
+};
+var useClippedGeoJSON = function useClippedGeoJSON(mapId, geoJSON, mask) {
+  var result = React.useMemo(function () {
+    if (!mask || !geoJSON) {
+      return {};
+    }
+    try {
+      return {
+        clippedGeoJSON: clipGeoJSONWithMask(geoJSON, mask.geoJSON)
+      };
+    } catch (_unused) {
+      return {
+        hasClipError: true
+      };
+    }
+  }, [geoJSON, mask]);
+  useClippedResultLayer(mapId, result.clippedGeoJSON);
+  return result;
+};
+var getMaskError = function getMaskError(_ref, geoJSON) {
+  var clippedGeoJSON = _ref.clippedGeoJSON,
+    hasClipError = _ref.hasClipError;
+  if (hasClipError) {
+    return 'drawing-tool-form-mask-clip-error';
+  }
+  var hasDrawnFeatures = !!geoJSON && getDrawnFeatureIndexes(geoJSON).length > 0;
+  return clippedGeoJSON && hasDrawnFeatures && !clippedGeoJSON.features.length ? 'drawing-tool-form-mask-no-overlap' : undefined;
+};
+var useHideFillOutsideMask = function useHideFillOutsideMask(layerId, geoJSON, isMaskSelected) {
+  var dispatch = useDispatch();
+  React.useEffect(function () {
+    if (!layerId || !geoJSON) {
+      return;
+    }
+    if (isMaskSelected) {
+      getFeatureIndexesToHideFill(geoJSON).forEach(function (targetFeatureIndex) {
+        var _geoJSON$features$tar, _geoJSON$features$tar2, _properties;
+        dispatch(layerActions.updateFeatureProperties({
+          layerId: layerId,
+          properties: (_properties = {
+            'fill-opacity': 0
+          }, _properties[MASKED_FILL_OPACITY_KEY] = (_geoJSON$features$tar = (_geoJSON$features$tar2 = geoJSON.features[targetFeatureIndex].properties) == null ? void 0 : _geoJSON$features$tar2['fill-opacity']) != null ? _geoJSON$features$tar : null, _properties),
+          targetFeatureIndex: targetFeatureIndex,
+          origin: 'DrawingToolFormConnect'
+        }));
+      });
+      return;
+    }
+    getFeatureIndexesToRestoreFill(geoJSON).forEach(function (targetFeatureIndex) {
+      var _geoJSON$features$tar3, _geoJSON$features$tar4, _properties2;
+      dispatch(layerActions.updateFeatureProperties({
+        layerId: layerId,
+        properties: (_properties2 = {
+          'fill-opacity': (_geoJSON$features$tar3 = (_geoJSON$features$tar4 = geoJSON.features[targetFeatureIndex].properties) == null ? void 0 : _geoJSON$features$tar4[MASKED_FILL_OPACITY_KEY]) != null ? _geoJSON$features$tar3 : undefined
+        }, _properties2[MASKED_FILL_OPACITY_KEY] = undefined, _properties2),
+        targetFeatureIndex: targetFeatureIndex,
+        origin: 'DrawingToolFormConnect'
+      }));
+    });
+  }, [dispatch, geoJSON, isMaskSelected, layerId]);
+};
+var useDrawingToolMasks = function useDrawingToolMasks(drawingId, geoJSON) {
+  var _masks$find;
+  var dispatch = useDispatch();
+  var _useDrawings = useDrawings({
+      keywords: 'mask'
+    }),
+    _useDrawings$data = _useDrawings.data,
+    fetchedMasks = _useDrawings$data === void 0 ? emptyMasks : _useDrawings$data,
+    isLoading = _useDrawings.isLoading;
+  var _React$useState2 = React.useState(),
+    selectedMaskId = _React$useState2[0],
+    setSelectedMaskId = _React$useState2[1];
+  var _React$useState3 = React.useState(),
+    hoveredMaskId = _React$useState3[0],
+    setHoveredMaskId = _React$useState3[1];
+  var mapId = useSelector(function (store) {
+    return uiSelectors.getDialogMapId(store, drawingDialogType);
+  });
+  var unmatchedSavedMask = useRestoreSavedMask(drawingId, fetchedMasks, isLoading, setSelectedMaskId);
+  var masks = React.useMemo(function () {
+    return unmatchedSavedMask ? [].concat(fetchedMasks, [unmatchedSavedMask]) : fetchedMasks;
+  }, [fetchedMasks, unmatchedSavedMask]);
+  var selectedMask = masks.find(function (mask) {
+    return mask.id === selectedMaskId;
+  });
+  var previewMask = (_masks$find = masks.find(function (mask) {
+    return mask.id === hoveredMaskId;
+  })) != null ? _masks$find : selectedMask;
+  useMaskPreviewLayer(mapId, previewMask);
+  var clipResult = useClippedGeoJSON(mapId, geoJSON, selectedMask);
+  var onSelectMask = React.useCallback(function (maskId) {
+    setSelectedMaskId(maskId);
+    dispatch(warningsDrawingsActions.setFormDirty({
+      drawingInstanceId: drawingDialogType,
+      isFormDirty: true
+    }));
+  }, [dispatch]);
+  return {
+    masks: masks,
+    isLoading: isLoading,
+    selectedMask: selectedMask,
+    selectedMaskId: selectedMaskId,
+    maskError: getMaskError(clipResult, geoJSON),
+    onSelectMask: onSelectMask,
+    onHoverMask: setHoveredMaskId
+  };
+};
 var DrawingToolFormConnect = function DrawingToolFormConnect() {
+  var _drawing$id;
   var dispatch = useDispatch();
   var _useMutateSaveOrUpdat = useMutateSaveOrUpdateDrawing(),
     saveOrUpdateDrawing = _useMutateSaveOrUpdat.mutate,
@@ -6631,23 +7497,65 @@ var DrawingToolFormConnect = function DrawingToolFormConnect() {
     return getWarningFormDirty(store, drawingDialogType);
   });
   usePreventBrowserClose(isFormDirty || isLayerInEditMode);
+  var _useDrawingToolMasks = useDrawingToolMasks((_drawing$id = drawing == null ? void 0 : drawing.id) != null ? _drawing$id : '', layerFeatureGeoJSON),
+    masks = _useDrawingToolMasks.masks,
+    isLoadingMasks = _useDrawingToolMasks.isLoading,
+    selectedMask = _useDrawingToolMasks.selectedMask,
+    selectedMaskId = _useDrawingToolMasks.selectedMaskId,
+    maskError = _useDrawingToolMasks.maskError,
+    onSelectMask = _useDrawingToolMasks.onSelectMask,
+    onHoverMask = _useDrawingToolMasks.onHoverMask;
+  useHideFillOutsideMask(drawTool == null ? void 0 : drawTool.geoJSONLayerId, layerFeatureGeoJSON, !!selectedMask);
+  var formGeoJSONRef = React.useRef(undefined);
+  var formGeoJSON = React.useMemo(function () {
+    var restoredGeoJSON = layerFeatureGeoJSON && restoreMaskedFill(layerFeatureGeoJSON);
+    if (!isEqual(formGeoJSONRef.current, restoredGeoJSON)) {
+      formGeoJSONRef.current = restoredGeoJSON;
+    }
+    return formGeoJSONRef.current;
+  }, [layerFeatureGeoJSON]);
+  var geoJSONProperties = React.useMemo(function () {
+    return restoreMaskedFillProperties(featureLayerGeoJSONProperties);
+  }, [featureLayerGeoJSONProperties]);
   var onSubmitForm = React.useCallback(function (formValues) {
+    var original = formValues.geoJSON;
     saveOrUpdateDrawing({
       id: drawing == null ? void 0 : drawing.id,
-      data: {
-        geoJSON: formValues.geoJSON,
+      data: Object.assign({
+        geoJSON: selectedMask ? clipGeoJSONWithMask(original, selectedMask.geoJSON) : original,
         objectName: formValues.objectName,
         scope: 'user'
-      }
+      }, selectedMask && {
+        transformation: {
+          mask: selectedMask.geoJSON,
+          original: original
+        }
+      })
     });
-  }, [drawing == null ? void 0 : drawing.id, saveOrUpdateDrawing]);
+  }, [drawing == null ? void 0 : drawing.id, saveOrUpdateDrawing, selectedMask]);
   var onChangeGeoJSONProperties = React.useCallback(function (properties) {
+    var layerId = drawTool == null ? void 0 : drawTool.geoJSONLayerId;
     dispatch(layerActions.updateFeatureProperties({
-      layerId: drawTool == null ? void 0 : drawTool.geoJSONLayerId,
+      layerId: layerId,
       properties: properties,
       origin: 'DrawingToolFormConnect'
     }));
-  }, [dispatch, drawTool == null ? void 0 : drawTool.geoJSONLayerId]);
+    var fillOpacity = properties == null ? void 0 : properties['fill-opacity'];
+    if (!selectedMask || typeof fillOpacity !== 'number') {
+      return;
+    }
+    getDrawnFeatureIndexes(layerFeatureGeoJSON != null ? layerFeatureGeoJSON : emptyGeoJSON).forEach(function (targetFeatureIndex) {
+      var _properties3;
+      dispatch(layerActions.updateFeatureProperties({
+        layerId: layerId,
+        properties: (_properties3 = {
+          'fill-opacity': 0
+        }, _properties3[MASKED_FILL_OPACITY_KEY] = fillOpacity, _properties3),
+        targetFeatureIndex: targetFeatureIndex,
+        origin: 'DrawingToolFormConnect'
+      }));
+    });
+  }, [dispatch, drawTool == null ? void 0 : drawTool.geoJSONLayerId, layerFeatureGeoJSON, selectedMask]);
   var onChangeObjectName = React.useCallback(function (featureId, objectName) {
     var _layerFeatureGeoJSON$;
     var featureIndex = ((_layerFeatureGeoJSON$ = layerFeatureGeoJSON == null ? void 0 : layerFeatureGeoJSON.features) != null ? _layerFeatureGeoJSON$ : []).findIndex(function (feature) {
@@ -6711,11 +7619,14 @@ var DrawingToolFormConnect = function DrawingToolFormConnect() {
     dialogError: error == null ? void 0 : error.message,
     drawModes: drawTool == null ? void 0 : drawTool.drawModes,
     drawingName: drawing == null ? void 0 : drawing.objectName,
-    geoJSON: layerFeatureGeoJSON,
-    geoJSONProperties: featureLayerGeoJSONProperties,
+    geoJSON: formGeoJSON,
+    geoJSONProperties: geoJSONProperties,
     id: drawing == null ? void 0 : drawing.id,
     isInEditMode: isLayerInEditMode,
     isLoading: isPending,
+    isLoadingMasks: isLoadingMasks,
+    maskError: maskError,
+    masks: masks,
     onChangeDrawMode: onChangeDrawMode,
     onChangeName: onChangeName,
     onChangeObjectName: onChangeObjectName,
@@ -6723,8 +7634,11 @@ var DrawingToolFormConnect = function DrawingToolFormConnect() {
     onDeactivateTool: onDeactivateTool,
     onDeleteFeature: onDeleteFeature,
     onFormDirty: onChangeFormDirty,
+    onHoverMask: onHoverMask,
     onSelectFeature: onSelectFeature,
-    onSubmitForm: onSubmitForm
+    onSelectMask: onSelectMask,
+    onSubmitForm: onSubmitForm,
+    selectedMaskId: selectedMaskId
   });
 };
 
@@ -8773,6 +9687,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 +9772,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;
@@ -8876,9 +9829,15 @@ var WarningsMapView = function WarningsMapView(_ref) {
     // fallback
     viewUtils.setViewFromFeature(view, geojsonFeature);
   }, [defaultBbox$1, geojsonFeature, geojsonExtent, view]);
+  var defaultBboxBounds = defaultBbox$1 == null ? void 0 : defaultBbox$1.bbox;
+  var bboxKey = defaultBboxBounds ? [defaultBboxBounds.left, defaultBboxBounds.bottom, defaultBboxBounds.right, defaultBboxBounds.top].join(',') : '';
+  var extentKey = geojsonExtent ? geojsonExtent.join(',') : '';
+  var fitKey = viewSrs + "|" + bboxKey + "|" + extentKey;
+  var fitViewToExtentRef = React.useRef(fitViewToExtent);
+  fitViewToExtentRef.current = fitViewToExtent;
   React.useEffect(function () {
-    fitViewToExtent();
-  }, [fitViewToExtent]);
+    fitViewToExtentRef.current();
+  }, [fitKey, view]);
   return jsx("div", {
     ref: containerRef,
     style: size,
@@ -8897,7 +9856,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 +12370,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 +12493,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 +12520,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 +12676,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 +12691,7 @@ var Form = function Form(_ref5) {
           }, _callee4);
         }));
         return function (_x) {
-          return _ref9.apply(this, arguments);
+          return _ref0.apply(this, arguments);
         };
       }())();
     }
@@ -11733,7 +12700,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 +12715,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 +12742,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 +12760,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 +12775,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 +12797,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 +12836,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 +12872,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 +12907,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 +12934,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 +12948,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 +13988,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 +14003,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 +14107,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 +14123,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 +14145,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 +14178,7 @@ var AreaDrawingLoaderConnect = function AreaDrawingLoaderConnect(_ref) {
     source: uiSource,
     startPosition: {
       top: 104,
-      left: 50
+      left: 450
     },
     title: t('area-drawing-loader-title')
   });
@@ -14253,16 +15241,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 +15293,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 +16569,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 +16611,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 +16618,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 +16808,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 +16846,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 +16897,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 +16931,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 +17019,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 +17049,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 +17059,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 +17082,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 +17169,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 +17296,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 +17334,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 +17346,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 +17358,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 +17457,7 @@ var WarningEventItem = function WarningEventItem(_ref) {
                   height: '100%'
                 },
                 children: [jsx(CustomIconButton, {
-                  disabled: readOnlyWarning,
+                  disabled: true,
                   isSelected: false,
                   onClick: function onClick() {},
                   sx: {
@@ -16378,7 +17467,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 +17499,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 +17562,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 +17882,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 +17891,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 +17938,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 +17978,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 +18042,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 +18145,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 +18162,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 +18270,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;
@@ -17296,24 +18412,12 @@ var WarningEventFormContent = function WarningEventFormContent(_ref) {
             }), jsx(Box, {
               sx: {
                 flex: '1.3 1 120px',
-                position: 'relative',
-                '& .MuiSelect-select .MuiGrid-container': {
-                  flexWrap: 'nowrap',
-                  alignItems: 'center',
-                  flexDirection: 'row-reverse',
-                  justifyContent: 'flex-end !important',
-                  gap: 1
-                },
-                '& .MuiSelect-select .MuiGrid-container > .MuiGrid-root:last-child': {
-                  minWidth: 'auto'
-                },
-                '& .MuiSelect-select .MuiSvgIcon-root': {
-                  fontSize: '1.2rem'
-                }
+                position: 'relative'
               },
               children: jsx(Phenomenon, {
                 isDisabled: areEventFieldsDisabled || !isNewOrDraftEvent,
-                isReadOnly: isReadOnly
+                isReadOnly: isReadOnly,
+                isWarningEvent: true
               })
             }), jsx(Box, {
               sx: {
@@ -17487,11 +18591,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 +18904,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 +19013,7 @@ var WarningEventFormDialogContent = function WarningEventFormDialogContent(_ref)
         isReadOnly: isReadOnly,
         isSnapshot: isSnapshot,
         isSummaryDialogOpen: isSummaryOpen,
+        onAddDrawing: onAddDrawing,
         onCancel: closeDialog,
         onChangeFormMode: onChangeFormMode,
         onDelete: onDelete,
@@ -17911,6 +19021,7 @@ var WarningEventFormDialogContent = function WarningEventFormDialogContent(_ref)
         onOpenWarningSummary: onOpenSummary,
         onPublish: onPublish,
         onSaveDraft: onSaveDraft,
+        selectedDrawing: selectedDrawing,
         selectedEvent: selectedEvent,
         shouldHideFormToggleMode: shouldHideFormToggleMode
       })
@@ -17948,40 +19059,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) {
@@ -18017,6 +19094,9 @@ var getHoveredWarningIdsByPanelId = createSelector(getWarningsFilterPanelById, f
 var getHiddenWarningIdsByPanelId = createSelector(getWarningsFilterPanelById, function (panelState) {
   return (panelState == null ? void 0 : panelState.hiddenWarningIds) || [];
 }, selectorMemoizationOptions);
+var getWarningListActionRequestByPanelId = createSelector(getWarningsFilterPanelById, function (panelState) {
+  return panelState == null ? void 0 : panelState.warningListActionRequest;
+}, selectorMemoizationOptions);
 var getWarningsPresetById = createSelector(getWarningsFilterPanelById, function (panelState) {
   if (!panelState) {
     return {
@@ -18035,6 +19115,7 @@ var selectors = /*#__PURE__*/Object.freeze({
   getExpandedSectionsByPanelId: getExpandedSectionsByPanelId,
   getHiddenWarningIdsByPanelId: getHiddenWarningIdsByPanelId,
   getHoveredWarningIdsByPanelId: getHoveredWarningIdsByPanelId,
+  getWarningListActionRequestByPanelId: getWarningListActionRequestByPanelId,
   getWarningsFilterById: getWarningsFilterById,
   getWarningsFilters: getWarningsFilters,
   getWarningsPresetById: getWarningsPresetById
@@ -18058,6 +19139,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 +19188,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 +19379,7 @@ var WarningEventDialogConnect = function WarningEventDialogConnect(_ref) {
                           dispatch(warningsEventFormActions.setFormValues({
                             formState: isReadOnly ? 'readonly' : ''
                           }));
+                          closeAreaDrawingLoader();
                         case 1:
                           return _context5.a(2);
                       }
@@ -18348,6 +19437,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 +19461,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 +19478,7 @@ var WarningEventDialogConnect = function WarningEventDialogConnect(_ref) {
     onPublish: onPublishForm,
     onSaveDraft: onSaveDraft,
     order: dialogOrder,
+    selectedDrawing: selectedDrawing,
     selectedEvent: event,
     shouldHideFormToggleMode: shouldHideFormToggleMode,
     size: size,
@@ -19950,7 +21048,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 +21078,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 +21086,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 +21245,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: {
@@ -20381,16 +21433,14 @@ var RowComponent = function RowComponent(_ref) {
 var groupWarningsOnStatus = function groupWarningsOnStatus(warnings, sortState) {
   var key = sortState.key,
     direction = sortState.direction;
-  var sortedWarnings = warnings.sort(function (warningA, warningB) {
+  var sortedWarnings = warnings.slice().sort(function (warningA, warningB) {
     var _dateStringB$localeCo;
     var dateStringA = key === 'lastUpdatedTime' ? warningA[key] : warningA.warningDetail[key];
     var dateStringB = key === 'lastUpdatedTime' ? warningB[key] : warningB.warningDetail[key];
     return (_dateStringB$localeCo = dateStringB == null ? void 0 : dateStringB.localeCompare(dateStringA != null ? dateStringA : '')) != null ? _dateStringB$localeCo : 0;
   });
-  if (direction === 'asc') {
-    sortedWarnings.reverse();
-  }
-  var groupedWarnings = groupBy(sortedWarnings, function (warning) {
+  var directionSortedWarnings = direction === 'asc' ? sortedWarnings.slice().reverse() : sortedWarnings;
+  var groupedWarnings = groupBy(directionSortedWarnings, function (warning) {
     var _warning$status;
     var status = (_warning$status = warning.status) != null ? _warning$status : mapProductStatusToWarningStatus(warning.productStatus);
     switch (status) {
@@ -20882,12 +21932,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 +22010,7 @@ var useWarningListFeatureSync = function useWarningListFeatureSync(_ref) {
       if (shouldExcludeWarningFromFeatureSync({
         hiddenWarningIds: hiddenWarningIds,
         hasMatchingAreaId: hasMatchingAreaId,
+        selectedFormWarning: selectedFormWarning,
         selectedWarningId: selectedWarningId,
         warningIds: warningIds
       })) {
@@ -20976,7 +22034,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);
@@ -21891,6 +22949,9 @@ var PublicWarningListConnect = function PublicWarningListConnect(_ref) {
   var hiddenWarningIdsArray = useSelector(function (store) {
     return getHiddenWarningIdsByPanelId(store, panelId);
   });
+  var warningListActionRequest = useSelector(function (store) {
+    return getWarningListActionRequestByPanelId(store, panelId);
+  });
   var hiddenWarningIds = React.useMemo(function () {
     return new Set(hiddenWarningIdsArray);
   }, [hiddenWarningIdsArray]);
@@ -22173,6 +23234,57 @@ var PublicWarningListConnect = function PublicWarningListConnect(_ref) {
     });
     void refetchWarnings();
   };
+  var warningListActionHandlersRef = React.useRef({
+    deleteReviewWarning: deleteReviewWarning,
+    deleteWarning: deleteWarning,
+    editWarning: editWarning,
+    expireWarning: expireWarning,
+    handleAviationProductClick: handleAviationProductClick,
+    handleMaritimeProductClick: handleMaritimeProductClick,
+    withdrawWarning: withdrawWarning
+  });
+  warningListActionHandlersRef.current = {
+    deleteReviewWarning: deleteReviewWarning,
+    deleteWarning: deleteWarning,
+    editWarning: editWarning,
+    expireWarning: expireWarning,
+    handleAviationProductClick: handleAviationProductClick,
+    handleMaritimeProductClick: handleMaritimeProductClick,
+    withdrawWarning: withdrawWarning
+  };
+  React.useEffect(function () {
+    if (!warningListActionRequest) {
+      return;
+    }
+    dispatch(warningsFiltersActions.clearWarningListActionRequest({
+      panelId: panelId
+    }));
+    var warning = warningListActionRequest.warning;
+    var handlers = warningListActionHandlersRef.current;
+    switch (warningListActionRequest.type) {
+      case 'edit':
+        void handlers.editWarning(warning);
+        break;
+      case 'delete':
+        handlers.deleteWarning(warning);
+        break;
+      case 'deleteReview':
+        handlers.deleteReviewWarning(warning);
+        break;
+      case 'expire':
+        handlers.expireWarning(warning);
+        break;
+      case 'withdraw':
+        handlers.withdrawWarning(warning);
+        break;
+      case 'aviation':
+        handlers.handleAviationProductClick(warning, warningListActionRequest.actionType);
+        break;
+      case 'maritime':
+        handlers.handleMaritimeProductClick(warning, warningListActionRequest.actionType);
+        break;
+    }
+  }, [dispatch, panelId, warningListActionRequest]);
   var onRemoveSuccessHooks = function onRemoveSuccessHooks(warningId) {
     setConfirmDialogOptions(undefined);
     // Close warning dialog if needed
@@ -22479,6 +23591,97 @@ var PublicWarningListConnect = function PublicWarningListConnect(_ref) {
   });
 };
 
+var WarningBlockMenu = function WarningBlockMenu(_ref) {
+  var _warning$id;
+  var effectiveStatus = _ref.effectiveStatus,
+    hasWarningContent = _ref.hasWarningContent,
+    isAviation = _ref.isAviation,
+    level = _ref.level,
+    onMenuInteraction = _ref.onMenuInteraction,
+    onMenuLeave = _ref.onMenuLeave,
+    warning = _ref.warning,
+    warningListItemActions = _ref.warningListItemActions;
+  var _useWarningsTranslati = useWarningsTranslation(),
+    t = _useWarningsTranslati.t;
+  var theme = useTheme$1();
+  if (!warningListItemActions) {
+    return null;
+  }
+  var tertiaryButton = theme.palette.geowebColors.buttons.tertiary;
+  var primaryButton = theme.palette.geowebColors.buttons.primary;
+  var defaultIconColor = theme.palette.geowebColors.typographyAndIcons.icon;
+  var primaryIconColor = theme.palette.geowebColors.typographyAndIcons.buttonIcon;
+  var menuButtonSize = theme.spacing(2.5);
+  var menuButtonBorderWidth = theme.spacing(0.125);
+  var menuIconColor = effectiveStatus === PublicWarningStatus.PUBLISHED && (isAviation || level === WarningLevel.extreme || level === WarningLevel.severe) ? primaryIconColor : defaultIconColor;
+  var hoverMenuIconColor = theme.palette.mode === 'dark' ? primaryIconColor : defaultIconColor;
+  return jsx(Box$1, {
+    onClick: function onClick(event) {
+      event.stopPropagation();
+      onMenuInteraction == null || onMenuInteraction();
+    },
+    onFocus: onMenuInteraction,
+    onKeyDown: function onKeyDown(event) {
+      event.stopPropagation();
+      onMenuInteraction == null || onMenuInteraction();
+    },
+    onMouseDown: onMenuInteraction,
+    onMouseEnter: onMenuInteraction,
+    onMouseLeave: onMenuLeave,
+    sx: {
+      display: 'flex',
+      flex: "0 0 " + menuButtonSize,
+      margin: hasWarningContent ? undefined : '0 auto'
+    },
+    children: jsx(ToggleMenu, {
+      buttonIcon: jsx(Options, {}),
+      buttonSx: {
+        backgroundColor: tertiaryButton["default"].fill,
+        border: menuButtonBorderWidth + " solid " + tertiaryButton["default"].fill,
+        color: menuIconColor,
+        height: menuButtonSize,
+        minHeight: menuButtonSize,
+        minWidth: menuButtonSize,
+        padding: 0,
+        width: menuButtonSize,
+        '&.flat': {
+          backgroundColor: tertiaryButton["default"].fill,
+          borderColor: tertiaryButton["default"].fill,
+          color: menuIconColor
+        },
+        '&.flat:hover, &.flat.Mui-focusVisible': {
+          backgroundColor: tertiaryButton.mouseOver.fill,
+          borderColor: tertiaryButton["default"].borderColor,
+          color: hoverMenuIconColor
+        },
+        '&.flat:active, &.flat.Mui-selected, &.flat.Mui-selected:hover': {
+          backgroundColor: primaryButton["default"].fill,
+          borderColor: tertiaryButton["default"].borderColor,
+          color: primaryIconColor
+        },
+        '&.flat[class*="sizeSmall"]': {
+          height: menuButtonSize,
+          width: menuButtonSize
+        },
+        '&.flat.Mui-focusVisible': {
+          outline: tertiaryButton.focus.outline,
+          outlineOffset: 0
+        }
+      },
+      buttonTestId: "warning-block-menu-" + ((_warning$id = warning.id) != null ? _warning$id : 'unknown'),
+      menuItems: WarningListItemMenu(Object.assign({
+        warning: warning,
+        t: t
+      }, warningListItemActions)),
+      menuPosition: "bottom",
+      menuTitle: t('warning-list-button-options'),
+      tooltipTitle: t('warning-list-button-options'),
+      variant: "flat"
+    })
+  });
+};
+
+var MIN_WIDTH_FOR_LETTER = 75;
 /**
  * Gets the author/editor from a warning.
  * For airmet/sigmet warnings, author is in sigmetAirmetDetails.
@@ -22524,9 +23727,7 @@ var getTooltipContent = function getTooltipContent(warning, t) {
   } else if (!isAviation) {
     warningTypeLabel = t('timeline-tooltip-public-warning');
   }
-  var phenomenonEntry = warningPhenomena.find(function (entry) {
-    return entry.key === warningDetail.phenomenon;
-  });
+  var phenomenonEntry = allPhenomenaDict[warningDetail.phenomenon];
   var phenomenonLabel = phenomenonEntry ? t(phenomenonEntry.translationKey) : warningDetail.phenomenon;
   var probability = type === 'warningsEvent' ? (_probablityOptions$fi = probablityOptions.find(function (probability) {
     return probability.value === warningDetail.probability;
@@ -22557,16 +23758,26 @@ var getTooltipContent = function getTooltipContent(warning, t) {
   });
 };
 var WarningBlock = /*#__PURE__*/React.memo(function (_ref) {
+  var _warning$id;
   var warning = _ref.warning,
     _ref$highlighted = _ref.highlighted,
     highlighted = _ref$highlighted === void 0 ? false : _ref$highlighted,
     left = _ref.left,
     onHoverWarning = _ref.onHoverWarning,
+    onSelectWarning = _ref.onSelectWarning,
     top = _ref.top,
+    warningListItemActions = _ref.warningListItemActions,
     width = _ref.width;
   var _useWarningsTranslati = useWarningsTranslation(),
     t = _useWarningsTranslati.t;
   var theme = useTheme();
+  var _React$useState = React.useState(false),
+    isTooltipOpen = _React$useState[0],
+    setIsTooltipOpen = _React$useState[1];
+  var _React$useState2 = React.useState(false),
+    isTooltipSuppressed = _React$useState2[0],
+    setIsTooltipSuppressed = _React$useState2[1];
+  var isTooltipSuppressedRef = React.useRef(false);
   var warningDetail = warning.warningDetail,
     type = warning.type;
   var author = getWarningAuthor(warning);
@@ -22582,7 +23793,7 @@ var WarningBlock = /*#__PURE__*/React.memo(function (_ref) {
   var size = getBlockSize(width);
   var highlightOutlineColor = theme.palette.geowebColors.typographyAndIcons.iconLinkActive;
   var elements = [];
-  if (size === 's' || size === 'l') {
+  if (size === 'l' || width >= MIN_WIDTH_FOR_LETTER) {
     elements.push(jsx(Box, {
       sx: {
         fontSize: 16,
@@ -22593,7 +23804,7 @@ var WarningBlock = /*#__PURE__*/React.memo(function (_ref) {
       children: letter
     }, "letter"));
   }
-  if (size !== 'xxs') {
+  if (size === 'l' || size === 's') {
     elements.push(jsx(Box, {
       sx: {
         display: 'flex',
@@ -22616,25 +23827,75 @@ var WarningBlock = /*#__PURE__*/React.memo(function (_ref) {
       })
     }, "avatar"));
   }
+  var warningMenu = size !== 'xxs' ? jsx(WarningBlockMenu, {
+    effectiveStatus: effectiveStatus,
+    hasWarningContent: elements.length > 0,
+    isAviation: isAviation,
+    level: level,
+    onMenuInteraction: function onMenuInteraction() {
+      isTooltipSuppressedRef.current = true;
+      setIsTooltipOpen(false);
+      setIsTooltipSuppressed(true);
+    },
+    onMenuLeave: function onMenuLeave() {
+      isTooltipSuppressedRef.current = false;
+      setIsTooltipSuppressed(false);
+    },
+    warning: warning,
+    warningListItemActions: warningListItemActions
+  }) : null;
+  var warningBlockPadding = '4px 8px';
+  if (warningMenu) {
+    warningBlockPadding = size === 'xs' ? '4px 0' : '4px 2px 4px 8px';
+  }
   return jsx(Tooltip, {
+    onClose: function onClose() {
+      return setIsTooltipOpen(false);
+    },
+    onOpen: function onOpen() {
+      if (isTooltipSuppressed || isTooltipSuppressedRef.current) {
+        return;
+      }
+      setIsTooltipOpen(true);
+    },
+    open: isTooltipOpen,
     placement: "top",
     title: getTooltipContent(warning, t),
-    children: jsx(Box, {
+    children: jsxs(Box, {
+      "aria-label": "warning timeline block for " + ((_warning$id = warning.id) != null ? _warning$id : ''),
       "data-highlighted": highlighted ? 'true' : 'false',
       "data-testid": "warning-block",
+      onClick: function onClick() {
+        isTooltipSuppressedRef.current = true;
+        setIsTooltipOpen(false);
+        setIsTooltipSuppressed(true);
+        onSelectWarning == null || onSelectWarning(warning);
+      },
+      onKeyDown: function onKeyDown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault();
+          isTooltipSuppressedRef.current = true;
+          setIsTooltipOpen(false);
+          setIsTooltipSuppressed(true);
+          onSelectWarning == null || onSelectWarning(warning);
+        }
+      },
       onMouseEnter: function onMouseEnter() {
         return onHoverWarning == null ? void 0 : onHoverWarning(warning.id);
       },
       onMouseLeave: function onMouseLeave() {
-        return onHoverWarning == null ? void 0 : onHoverWarning(undefined);
+        isTooltipSuppressedRef.current = false;
+        setIsTooltipSuppressed(false);
+        onHoverWarning == null || onHoverWarning(undefined);
       },
+      role: "button",
       sx: {
         position: 'absolute',
         left: left,
         top: top,
         width: width,
         height: 28,
-        padding: '4px 8px',
+        padding: warningBlockPadding,
         background: background,
         border: border,
         borderRadius: 1,
@@ -22644,12 +23905,24 @@ var WarningBlock = /*#__PURE__*/React.memo(function (_ref) {
         justifyContent: elements.length === 1 ? 'center' : 'space-between',
         overflow: 'hidden',
         zIndex: highlighted ? 11 : 1,
+        cursor: 'pointer',
         '&:hover': {
           boxShadow: "0 0 0 2px " + highlightOutlineColor,
           zIndex: 11
         }
       },
-      children: elements
+      tabIndex: 0,
+      children: [elements.length ? jsx(Box, {
+        sx: {
+          display: 'flex',
+          alignItems: 'center',
+          flex: '1 1 0',
+          justifyContent: elements.length === 1 ? 'center' : 'space-between',
+          minWidth: 0,
+          overflow: 'hidden'
+        },
+        children: elements
+      }) : null, warningMenu]
     })
   });
 });
@@ -22742,15 +24015,20 @@ var TimelineBackground = function TimelineBackground(_ref) {
 var WarningBlocksLayer = /*#__PURE__*/React.memo(function (_ref2) {
   var warningBlocks = _ref2.warningBlocks,
     hoveredWarningId = _ref2.hoveredWarningId,
-    onHoverWarning = _ref2.onHoverWarning;
+    onHoverWarning = _ref2.onHoverWarning,
+    onSelectWarning = _ref2.onSelectWarning,
+    selectedWarningId = _ref2.selectedWarningId,
+    warningListItemActions = _ref2.warningListItemActions;
   return jsx(Fragment, {
     children: warningBlocks.map(function (warningLayout) {
       return jsx(WarningBlock, {
-        highlighted: hoveredWarningId === warningLayout.warning.id,
+        highlighted: hoveredWarningId === warningLayout.warning.id || selectedWarningId === warningLayout.warning.id,
         left: warningLayout.left,
         onHoverWarning: onHoverWarning,
+        onSelectWarning: onSelectWarning,
         top: warningLayout.top,
         warning: warningLayout.warning,
+        warningListItemActions: warningListItemActions,
         width: warningLayout.width
       }, warningLayout.key);
     })
@@ -22852,13 +24130,17 @@ var WARNING_BLOCK_HEIGHT = 34;
 var DEFAULT_VISIBLE_ROWS = 10;
 var TIMELINE_BAR_HEIGHT = 40;
 var TIMELINE_TOP_PADDING = 8;
+var TIMELINE_SCROLLBAR_CLEARANCE = 16;
 var MS_PER_HOUR = 60 * 60 * 1000;
 var MS_PER_DAY = 24 * MS_PER_HOUR;
 var DEFAULT_VISIBLE_HOURS = 4 * 24;
 var WarningsTimeline = function WarningsTimeline(_ref) {
   var warnings = _ref.warnings,
     hoveredWarningId = _ref.hoveredWarningId,
-    onHoverWarning = _ref.onHoverWarning;
+    onHoverWarning = _ref.onHoverWarning,
+    onSelectWarning = _ref.onSelectWarning,
+    selectedWarningId = _ref.selectedWarningId,
+    warningListItemActions = _ref.warningListItemActions;
   var timelineWarnings = React.useMemo(function () {
     var _warnings$filter;
     return (_warnings$filter = warnings == null ? void 0 : warnings.filter(function (warning) {
@@ -22997,7 +24279,7 @@ var WarningsTimeline = function WarningsTimeline(_ref) {
     }
   }, [contentWidth, timelineEnd, timelineStart]);
   var timelineRowsHeight = Math.max(timelineWarnings.length * WARNING_BLOCK_HEIGHT + TIMELINE_TOP_PADDING, DEFAULT_VISIBLE_ROWS * WARNING_BLOCK_HEIGHT + TIMELINE_TOP_PADDING);
-  var timelineCanvasHeight = Math.max(containerSize.height, timelineRowsHeight);
+  var timelineCanvasHeight = Math.max(containerSize.height, timelineRowsHeight + TIMELINE_SCROLLBAR_CLEARANCE);
   var warningBlocks = React.useMemo(function () {
     return timelineWarnings.map(function (warning, index) {
       var _warning$id;
@@ -23085,7 +24367,10 @@ var WarningsTimeline = function WarningsTimeline(_ref) {
           }) : null, jsx(WarningBlocksLayer, {
             hoveredWarningId: hoveredWarningId,
             onHoverWarning: onHoverWarning,
-            warningBlocks: warningBlocks
+            onSelectWarning: onSelectWarning,
+            selectedWarningId: selectedWarningId,
+            warningBlocks: warningBlocks,
+            warningListItemActions: warningListItemActions
           })]
         })
       })
@@ -23146,6 +24431,7 @@ var WarningsTimelineConnect = function WarningsTimelineConnect(_ref) {
   var _useAuthenticationCon = useAuthenticationContext$1(),
     isLoggedIn = _useAuthenticationCon.isLoggedIn;
   var dispatch = useDispatch();
+  var confirmDialog = useConfirmationDialog();
   var workspaceViewsById = useSelector(function (state) {
     return syncGroupsSelector.getWorkspaceViewsById(state);
   });
@@ -23187,6 +24473,11 @@ var WarningsTimelineConnect = function WarningsTimelineConnect(_ref) {
   var hoveredWarningId = isUsingLocalHoverOverride ? localHoveredWarningId : (_hoveredLinkedFeature = hoveredLinkedFeatureIds[0]) != null ? _hoveredLinkedFeature : hoveredLocalWarningIds[0];
   var _useWarnings = useWarnings(!isLoggedIn || !sourcePanelId, savedFilterState.time),
     combinedWarnings = _useWarnings.combinedWarnings;
+  var isFormDirty = useSelector(getSelectedPublicIsFormDirty);
+  var selectedWarningId = useSelector(getSelectedWarningId);
+  var warningType = useSelector(getWarningType);
+  var _useWarningEventActio = useWarningEventActions(sourcePanelId || '', savedFilterState.time),
+    openWarningsEventDialog = _useWarningEventActio.openWarningsEventDialog;
   var byFilterState = React.useMemo(function () {
     return createWarningFilterPredicate(combinedWarnings, savedFilterState);
   }, [combinedWarnings, savedFilterState]);
@@ -23233,6 +24524,148 @@ var WarningsTimelineConnect = function WarningsTimelineConnect(_ref) {
       setIsUsingLocalHoverOverride(false);
     }, WARNING_HOVER_DISPATCH_DELAY);
   }, [dispatch, linkedTargetIds.length, ownedFeatureLayerIds, sourcePanelId]);
+  var openPublicWarningDialog = React.useCallback(/*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(warning) {
+      var mayProceed;
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.n) {
+          case 0:
+            if (sourcePanelId) {
+              _context.n = 1;
+              break;
+            }
+            return _context.a(2);
+          case 1:
+            if (!isFormDirty) {
+              _context.n = 3;
+              break;
+            }
+            _context.n = 2;
+            return confirmDialog(warningFormConfirmationOptions$2(t)).then(function () {
+              return true;
+            })["catch"](function () {
+              return false;
+            });
+          case 2:
+            mayProceed = _context.v;
+            if (mayProceed) {
+              _context.n = 3;
+              break;
+            }
+            return _context.a(2);
+          case 3:
+            dispatch(warningsFormActions.openPublicWarningFormDialog({
+              warning: warning,
+              formState: 'readonly',
+              warningType: warning.type || warningType,
+              panelId: sourcePanelId
+            }));
+          case 4:
+            return _context.a(2);
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [confirmDialog, dispatch, isFormDirty, sourcePanelId, t, warningType]);
+  var warningListItemActions = React.useMemo(function () {
+    return {
+      onEditWarning: function onEditWarning(warning) {
+        if (!sourcePanelId) {
+          return;
+        }
+        dispatch(warningsFiltersActions.requestWarningListAction({
+          panelId: sourcePanelId,
+          request: {
+            type: 'edit',
+            warning: warning
+          }
+        }));
+      },
+      onDeleteWarning: function onDeleteWarning(warning) {
+        if (!sourcePanelId) {
+          return;
+        }
+        dispatch(warningsFiltersActions.requestWarningListAction({
+          panelId: sourcePanelId,
+          request: {
+            type: 'delete',
+            warning: warning
+          }
+        }));
+      },
+      onDeleteReviewWarning: function onDeleteReviewWarning(warning) {
+        if (!sourcePanelId) {
+          return;
+        }
+        dispatch(warningsFiltersActions.requestWarningListAction({
+          panelId: sourcePanelId,
+          request: {
+            type: 'deleteReview',
+            warning: warning
+          }
+        }));
+      },
+      onExpireWarning: function onExpireWarning(warning) {
+        if (!sourcePanelId) {
+          return;
+        }
+        dispatch(warningsFiltersActions.requestWarningListAction({
+          panelId: sourcePanelId,
+          request: {
+            type: 'expire',
+            warning: warning
+          }
+        }));
+      },
+      onWithdrawWarning: function onWithdrawWarning(warning) {
+        if (!sourcePanelId) {
+          return;
+        }
+        dispatch(warningsFiltersActions.requestWarningListAction({
+          panelId: sourcePanelId,
+          request: {
+            type: 'withdraw',
+            warning: warning
+          }
+        }));
+      },
+      onActionAviationWarning: function onActionAviationWarning(warning, actionType) {
+        if (!sourcePanelId) {
+          return;
+        }
+        dispatch(warningsFiltersActions.requestWarningListAction({
+          panelId: sourcePanelId,
+          request: {
+            type: 'aviation',
+            warning: warning,
+            actionType: actionType
+          }
+        }));
+      },
+      onActionMaritimeWarning: function onActionMaritimeWarning(warning, actionType) {
+        if (!sourcePanelId) {
+          return;
+        }
+        dispatch(warningsFiltersActions.requestWarningListAction({
+          panelId: sourcePanelId,
+          request: {
+            type: 'maritime',
+            warning: warning,
+            actionType: actionType
+          }
+        }));
+      }
+    };
+  }, [dispatch, sourcePanelId]);
+  var selectWarning = React.useCallback(function (warning) {
+    if (warning.type === 'warningsEvent') {
+      void openWarningsEventDialog('readonly', warning);
+      return;
+    }
+    void openPublicWarningDialog(warning);
+  }, [openPublicWarningDialog, openWarningsEventDialog]);
   React.useEffect(function () {
     return function () {
       if (!sourcePanelId) {
@@ -23267,6 +24700,9 @@ var WarningsTimelineConnect = function WarningsTimelineConnect(_ref) {
   return jsx(WarningsTimeline, {
     hoveredWarningId: hoveredWarningId,
     onHoverWarning: handleHoverWarning,
+    onSelectWarning: selectWarning,
+    selectedWarningId: selectedWarningId,
+    warningListItemActions: warningListItemActions,
     warnings: warnings
   });
 };
@@ -23454,8 +24890,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 +24917,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
+								]
+							]
+						]
+					}
 				}
 			]
 		}
@@ -28983,6 +30477,269 @@ var maritimeConfig = {
 	validation: validation
 };
 
+var maskListJSON = [
+	{
+		id: "mask-nl-territory",
+		objectName: "NL Territory",
+		lastUpdatedTime: "2026-09-01T10:00:00Z",
+		scope: "global",
+		keywords: "mask",
+		geoJSON: {
+			type: "FeatureCollection",
+			features: [
+				{
+					type: "Feature",
+					id: "mask-nl-territory-feature",
+					properties: {
+						fill: "#186DFF",
+						"fill-opacity": 0.2,
+						stroke: "#186DFF",
+						"stroke-width": 2,
+						"stroke-opacity": 1,
+						selectionType: "poly",
+						objectName: "NL Territory"
+					},
+					geometry: {
+						type: "Polygon",
+						coordinates: [
+							[
+								[
+									3.3,
+									50.7
+								],
+								[
+									7.2,
+									50.7
+								],
+								[
+									7.2,
+									53.7
+								],
+								[
+									3.3,
+									53.7
+								],
+								[
+									3.3,
+									50.7
+								]
+							]
+						]
+					}
+				}
+			]
+		}
+	},
+	{
+		id: "mask-nl-land",
+		objectName: "NL Land",
+		lastUpdatedTime: "2026-09-01T10:00:00Z",
+		scope: "global",
+		keywords: "mask",
+		geoJSON: {
+			type: "FeatureCollection",
+			features: [
+				{
+					type: "Feature",
+					id: "mask-nl-land-feature",
+					properties: {
+						fill: "#186DFF",
+						"fill-opacity": 0.2,
+						stroke: "#186DFF",
+						"stroke-width": 2,
+						"stroke-opacity": 1,
+						selectionType: "poly",
+						objectName: "NL Land"
+					},
+					geometry: {
+						type: "Polygon",
+						coordinates: [
+							[
+								[
+									3.4,
+									50.75
+								],
+								[
+									7.2,
+									50.75
+								],
+								[
+									7.2,
+									53.5
+								],
+								[
+									3.4,
+									53.5
+								],
+								[
+									3.4,
+									50.75
+								]
+							]
+						]
+					}
+				}
+			]
+		}
+	},
+	{
+		id: "mask-fir-land-sea",
+		objectName: "FIR Land and Sea",
+		lastUpdatedTime: "2026-09-01T10:00:00Z",
+		scope: "global",
+		keywords: "mask",
+		geoJSON: {
+			type: "FeatureCollection",
+			features: [
+				{
+					type: "Feature",
+					id: "mask-fir-land-sea-feature",
+					properties: {
+						fill: "#186DFF",
+						"fill-opacity": 0.2,
+						stroke: "#186DFF",
+						"stroke-width": 2,
+						"stroke-opacity": 1,
+						selectionType: "poly",
+						objectName: "FIR Land and Sea"
+					},
+					geometry: {
+						type: "Polygon",
+						coordinates: [
+							[
+								[
+									2,
+									51
+								],
+								[
+									7.2,
+									51
+								],
+								[
+									7.2,
+									55
+								],
+								[
+									2,
+									55
+								],
+								[
+									2,
+									51
+								]
+							]
+						]
+					}
+				}
+			]
+		}
+	},
+	{
+		id: "mask-fir-sea",
+		objectName: "FIR Sea",
+		lastUpdatedTime: "2026-09-01T10:00:00Z",
+		scope: "global",
+		keywords: "mask",
+		geoJSON: {
+			type: "FeatureCollection",
+			features: [
+				{
+					type: "Feature",
+					id: "mask-fir-sea-feature",
+					properties: {
+						fill: "#186DFF",
+						"fill-opacity": 0.2,
+						stroke: "#186DFF",
+						"stroke-width": 2,
+						"stroke-opacity": 1,
+						selectionType: "poly",
+						objectName: "FIR Sea"
+					},
+					geometry: {
+						type: "Polygon",
+						coordinates: [
+							[
+								[
+									2,
+									51.5
+								],
+								[
+									4.5,
+									51.5
+								],
+								[
+									4.5,
+									55
+								],
+								[
+									2,
+									55
+								],
+								[
+									2,
+									51.5
+								]
+							]
+						]
+					}
+				}
+			]
+		}
+	},
+	{
+		id: "mask-fir-land",
+		objectName: "FIR Land",
+		lastUpdatedTime: "2026-09-01T10:00:00Z",
+		scope: "global",
+		keywords: "mask",
+		geoJSON: {
+			type: "FeatureCollection",
+			features: [
+				{
+					type: "Feature",
+					id: "mask-fir-land-feature",
+					properties: {
+						fill: "#186DFF",
+						"fill-opacity": 0.2,
+						stroke: "#186DFF",
+						"stroke-width": 2,
+						"stroke-opacity": 1,
+						selectionType: "poly",
+						objectName: "FIR Land"
+					},
+					geometry: {
+						type: "Polygon",
+						coordinates: [
+							[
+								[
+									3.4,
+									51
+								],
+								[
+									7.2,
+									51
+								],
+								[
+									7.2,
+									53.5
+								],
+								[
+									3.4,
+									53.5
+								],
+								[
+									3.4,
+									51
+								]
+							]
+						]
+					}
+				}
+			]
+		}
+	}
+];
+
 var predefinedAreaListJSON = [
 	{
 		id: "northsea_districts",
@@ -114758,7 +116515,7 @@ var warningEventsListJSON = [
 				status: "DRAFT_PUBLISHED",
 				areas: [
 					{
-						objectName: "low temp 1",
+						objectName: "Coastal zone north",
 						geoJSON: {
 							type: "FeatureCollection",
 							features: [
@@ -114794,8 +116551,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 +116568,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 +116682,7 @@ var warningEventsListJSON = [
 				status: "PUBLISHED",
 				areas: [
 					{
-						objectName: "wind test name",
+						objectName: "Coastal zone west",
 						geoJSON: {
 							type: "FeatureCollection",
 							features: [
@@ -114914,8 +116758,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 +116783,375 @@ var warningEventsListJSON = [
 				status: "PUBLISHED",
 				areas: [
 					{
-						objectName: "test name",
+						objectName: "IJsselmeer",
+						geoJSON: {
+							type: "FeatureCollection",
+							features: [
+								{
+									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"
+								}
+							]
+						}
+					}
+				],
+				validFrom: "2026-07-20T04:00:00Z",
+				validUntil: "2026-07-20T06:00:00Z",
+				level: "severe",
+				probability: 30,
+				domain: "public",
+				warningProposalSource: "",
+				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",
+		mode: "ACTUAL",
+		eventId: "event3",
+		linked_to_id: "downstreamid_98475",
+		lastUpdatedTime: "2026-07-10T00:00:00Z",
+		phenomenon: "thunderstorm",
+		validFrom: "2026-07-10T11:00:00Z",
+		validUntil: "2026-07-10T19:00:00Z",
+		incident: "Storm Marcel",
+		warningEventType: "WARNING",
+		texts: {
+			headlineOriginal: "Donders en bliksem!",
+			headlineTranslation: "Thunder and lightning",
+			conciseSummaryOriginal: "",
+			conciseSummaryTranslation: "",
+			descriptionOriginal: "Kijk maar uit hoor!",
+			descriptionTranslation: "You'd better watch out!"
+		},
+		warnings: [
+			{
+				id: "event3-warning1",
+				status: "EXPIRED",
+				eventId: "event3",
+				phenomenon: "thunderstorm",
+				areas: [
+					{
+						objectName: "Inland north",
+						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"
+								}
+							]
+						}
+					}
+				],
+				validFrom: "2026-07-10T11:00:00Z",
+				validUntil: "2026-07-10T19:00:00Z",
+				level: "moderate",
+				probability: 30,
+				domain: "public",
+				authority: "KNMI",
+				incident: "Storm Marcel"
+			},
+			{
+				id: "event3-warning2",
+				status: "EXPIRED",
+				eventId: "event3",
+				phenomenon: "thunderstorm",
+				areas: [
+					{
+						objectName: "Inland east",
 						geoJSON: {
 							type: "FeatureCollection",
 							features: [
@@ -115005,178 +117219,10 @@ var warningEventsListJSON = [
 										"stroke-width": 2,
 										selectionType: "poly",
 										warning_level: "1",
-										"stroke-opacity": 1
-									}
-								}
-							]
-						}
-					}
-				],
-				validFrom: "2026-07-20T04:00:00Z",
-				validUntil: "2026-07-20T06:00:00Z",
-				level: "severe",
-				probability: 30,
-				domain: "public",
-				warningProposalSource: "",
-				authority: "KNMI",
-				incident: "Storm "
-			}
-		]
-	},
-	{
-		status: "EXPIRED",
-		mode: "ACTUAL",
-		eventId: "event3",
-		linked_to_id: "downstreamid_98475",
-		lastUpdatedTime: "2026-07-10T00:00:00Z",
-		phenomenon: "thunderstorm",
-		validFrom: "2026-07-10T11:00:00Z",
-		validUntil: "2026-07-10T19:00:00Z",
-		incident: "Storm Marcel",
-		warningEventType: "WARNING",
-		texts: {
-			headlineOriginal: "Donders en bliksem!",
-			headlineTranslation: "Thunder and lightning",
-			conciseSummaryOriginal: "",
-			conciseSummaryTranslation: "",
-			descriptionOriginal: "Kijk maar uit hoor!",
-			descriptionTranslation: "You'd better watch out!"
-		},
-		warnings: [
-			{
-				id: "event3-warning1",
-				status: "EXPIRED",
-				eventId: "event3",
-				phenomenon: "thunderstorm",
-				areas: [
-					{
-						objectName: "test name",
-						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
-												]
-											]
-										]
+										"stroke-opacity": 1,
+										objectName: "Inland east"
 									},
-									properties: {
-										fill: "#ff7800",
-										stroke: "#ff7800",
-										"fill-opacity": 0.2,
-										"stroke-width": 2,
-										selectionType: "poly",
-										"stroke-opacity": 1
-									}
-								}
-							]
-						}
-					}
-				],
-				validFrom: "2026-07-10T11:00:00Z",
-				validUntil: "2026-07-10T19:00:00Z",
-				level: "moderate",
-				probability: 30,
-				domain: "public",
-				authority: "KNMI",
-				incident: "Storm Marcel"
-			},
-			{
-				id: "event3-warning2",
-				status: "EXPIRED",
-				eventId: "event3",
-				phenomenon: "thunderstorm",
-				areas: [
-					{
-						objectName: "test name",
-						geoJSON: {
-							type: "FeatureCollection",
-							features: [
-								{
-									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
-									}
+									id: "drawing-storm-marcel-object-2"
 								}
 							]
 						}
@@ -115198,7 +117244,7 @@ var warningEventsListJSON = [
 				phenomenon: "thunderstorm",
 				areas: [
 					{
-						objectName: "test name 3",
+						objectName: "Inland south",
 						geoJSON: {
 							type: "FeatureCollection",
 							features: [
@@ -115233,8 +117279,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 +117296,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"
+					}
+				]
+			}
+		}
 	}
 ];
 
@@ -117012,6 +119249,7 @@ sessionStorageProvider.setConfig({
 });
 var drawingList = drawingListJSON;
 var drawingsListFullContent = drawingsListFullContentJSON;
+var maskList = maskListJSON;
 var predefinedAreaList = predefinedAreaListJSON;
 var warningList = warningListJSON.map(function (pw) {
   return Object.assign({}, pw, {
@@ -117125,17 +119363,24 @@ var maritimeWarningEndpoints = [http.post('*/maritime/', /*#__PURE__*/_asyncToGe
 })))];
 var drawingEndpoints = [http.get(/^.*\/drawings\/predefinedAreas$/, function () {
   return HttpResponse.json(predefinedAreaList);
+}), http.get(/^.*\/drawings$/, function (_ref6) {
+  var request = _ref6.request;
+  var keywords = new URL(request.url).searchParams.get('keywords');
+  if (keywords !== 'mask') {
+    return undefined;
+  }
+  return HttpResponse.json(maskList);
 }), http.get(/^.*\/drawings$/, function () {
   return HttpResponse.json(drawingList);
 }), http.get(/^.*\/area-keywords$/, function () {
   return HttpResponse.json(areaKeywordList);
 }), http.post(/^.*\/drawings\/$/, /*#__PURE__*/function () {
-  var _ref7 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5(_ref6) {
+  var _ref8 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5(_ref7) {
     var request, body;
     return _regenerator().w(function (_context5) {
       while (1) switch (_context5.n) {
         case 0:
-          request = _ref6.request;
+          request = _ref7.request;
           _context5.n = 1;
           return request.json();
         case 1:
@@ -117150,15 +119395,15 @@ var drawingEndpoints = [http.get(/^.*\/drawings\/predefinedAreas$/, function ()
     }, _callee5);
   }));
   return function (_x) {
-    return _ref7.apply(this, arguments);
+    return _ref8.apply(this, arguments);
   };
 }()), http.post(/^.*\/drawings\/([^/]+)\/$/, /*#__PURE__*/function () {
-  var _ref9 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6(_ref8) {
+  var _ref0 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6(_ref9) {
     var params, drawingId, drawing;
     return _regenerator().w(function (_context6) {
       while (1) switch (_context6.n) {
         case 0:
-          params = _ref8.params;
+          params = _ref9.params;
           drawingId = params[0];
           drawing = drawingsListFullContent.find(function (drawing) {
             return drawing.id === drawingId;
@@ -117172,11 +119417,11 @@ var drawingEndpoints = [http.get(/^.*\/drawings\/predefinedAreas$/, function ()
     }, _callee6);
   }));
   return function (_x2) {
-    return _ref9.apply(this, arguments);
+    return _ref0.apply(this, arguments);
   };
 }())];
-var warningEventsEndpoints = [http.get(/^.*\/events$/, function (_ref0) {
-  var request = _ref0.request;
+var warningEventsEndpoints = [http.get(/^.*\/events$/, function (_ref1) {
+  var request = _ref1.request;
   var url = new URL(request.url);
   var startTime = url.searchParams.get('start_time');
   var endTime = url.searchParams.get('end_time');