@opengeoweb/warnings 9.28.0 → 9.29.0

package/index.esm.js

@@ -10,10 +10,10 @@ import { useTranslation } from 'react-i18next';
 import '@opengeoweb/core';
 import { FORM_FIELDS_NAMESPACE, useDraftFormHelpers, ReactHookFormSelect, ReactHookFormHiddenInput, isValidGeoJsonCoordinates, ReactHookFormTextField, ReactHookFormProvider, defaultFormOptions, errorMessages, ReactHookFormDateTime, isXHoursBefore, isXHoursAfter, isEmpty } from '@opengeoweb/form-fields';
 import { generateMapId, LayerType, getWMJSMapById, getGeoCoordFromLatLong, WMBBOX } from '@opengeoweb/webmap';
-import { snackbarActions } from '@opengeoweb/snackbar';
+import { snackbarActions, snackbarTypes } from '@opengeoweb/snackbar';
 import * as React from 'react';
 import React__default, { useState, useEffect, useRef } from 'react';
-import { styled, Box, Typography, ListItem, Grid, Paper, ListItemButton, Stack, LinearProgress, Button, MenuItem, ListItemIcon, FormHelperText, Tabs, Tab, Card, CardContent, CircularProgress, Menu, DialogTitle, DialogContent, Switch } from '@mui/material';
+import { styled, Box, Typography, ListItem, Grid2, Paper, ListItemButton, Stack, LinearProgress, Button, MenuItem, FormHelperText, Tabs, Tab, Card, CardContent, CircularProgress, Menu, DialogTitle, DialogContent, Switch } from '@mui/material';
 import { VariableSizeList } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { getApi, createApiInstance, createNonAuthApiInstance, createFakeApiInstance, ApiProvider, ProductStatus, useAirmetList, useSigmetList } from '@opengeoweb/api';
@@ -43,8 +43,8 @@ var en = {
 	"delete-dialog-title": "Delete object",
 	"delete-dialog-description": "Are you sure you want to delete",
 	"delete-succes": "has been deleted",
-	"update-succes": "has been updated",
-	"save-succes": "has been saved",
+	"update-succes": "Object \"{{objectName}}\" has been updated!",
+	"save-succes": "Object \"{{objectName}}\" has been saved!",
 	"object-manager-no-objects": "No objects found",
 	"object-manager-options-menu": "Object options",
 	"object-manager-button-edit": "Edit",
@@ -116,14 +116,18 @@ var en = {
 	"warning-list-status-draft": "Drafts",
 	"warning-list-status-published": "Published",
 	"warning-list-status-todo": "Reviews",
-	"warning-list-status-expired": "Expired (last 24 hours)",
+	"warning-list-status-expired": "Expired & Withdrawn (last 24 hours)",
 	"warning-list-header-incident": "Incident",
+	"warning-list-header-incidents": "Incidents",
 	"warning-list-header-last-update": "Last update",
 	"warning-list-header-start-time": "Start time",
 	"warning-list-header-end-time": "End time",
 	"warning-list-header-domain": "Domain",
+	"warning-list-header-domains": "Domains",
 	"warning-list-header-phenomenon": "Phenomenon",
+	"warning-list-header-phenomena": "Phenomena",
 	"warning-list-header-level": "Level",
+	"warning-list-header-levels": "Levels",
 	"warning-list-header-status": "Status",
 	"warning-list-header-draft": "DRAFT",
 	"area-object-loader-title": "Add Areas & Objects",
@@ -184,7 +188,11 @@ var en = {
 	"warning-dialog-expire-succes": "Warning has been expired",
 	"warning-dialog-expire-title": "Expire warning",
 	"warning-dialog-expire-confirm": "Expire",
-	"warning-dialog-expire-description": "Are you sure you want to expire this warning?"
+	"warning-dialog-expire-description": "Are you sure you want to expire this warning?",
+	"warning-dialog-withdraw-succes": "Warning has been withdrawn",
+	"warning-dialog-withdraw-title": "Withdraw warning",
+	"warning-dialog-withdraw-confirm": "Withdraw",
+	"warning-dialog-withdraw-description": "Are you sure you want to withdraw this warning?"
 };
 var nl = {
 	"drawing-tool-form-tools": "Gereedschap",
@@ -206,8 +214,8 @@ var nl = {
 	"delete-dialog-title": "Object verwijderen",
 	"delete-dialog-description": "Weet je zeker dat je dit object wilt verwijderen:",
 	"delete-succes": "is verwijderd",
-	"update-succes": "is bijgewerkt",
-	"save-succes": "is opgeslagen",
+	"update-succes": "Object \"{{objectName}}\" is bijgewerkt!",
+	"save-succes": "Object \"{{objectName}}\" is opgeslagen!",
 	"object-manager-no-objects": "Geen objecten gevonden",
 	"object-manager-options-menu": "Object acties",
 	"object-manager-button-edit": "Bewerken",
@@ -279,14 +287,18 @@ var nl = {
 	"warning-list-status-draft": "Concepten",
 	"warning-list-status-published": "Gepubliceerd",
 	"warning-list-status-todo": "Te doen",
-	"warning-list-status-expired": "Verlopen (laatste 24 uur)",
+	"warning-list-status-expired": "Verlopen en Ingetrokken (laatste 24 uur)",
 	"warning-list-header-incident": "Incident",
+	"warning-list-header-incidents": "Incidenten",
 	"warning-list-header-last-update": "Laatste update",
 	"warning-list-header-start-time": "Starttijd",
 	"warning-list-header-end-time": "Eindtijd",
 	"warning-list-header-domain": "Domein",
+	"warning-list-header-domains": "Domeinen",
 	"warning-list-header-phenomenon": "Fenomeen",
+	"warning-list-header-phenomena": "Fenomenen",
 	"warning-list-header-level": "Niveau",
+	"warning-list-header-levels": "Niveaus",
 	"warning-list-header-status": "Status",
 	"warning-list-header-draft": "CONCEPT",
 	"area-object-loader-title": "Gebieden & Objecten toevoegen",
@@ -310,7 +322,11 @@ var nl = {
 	"warning-dialog-expire-succes": "Waarschuwing laten verlopen is succesvol",
 	"warning-dialog-expire-title": "Waarschuwing laten verlopen",
 	"warning-dialog-expire-confirm": "Verlopen",
-	"warning-dialog-expire-description": "Weet je zeker dat je deze waarschuwing wilt laten verlopen?"
+	"warning-dialog-expire-description": "Weet je zeker dat je deze waarschuwing wilt laten verlopen?",
+	"warning-dialog-withdraw-succes": "Waarschuwing is succesvol ingetrokken",
+	"warning-dialog-withdraw-title": "Waarschuwing intrekken",
+	"warning-dialog-withdraw-confirm": "Intrekken",
+	"warning-dialog-withdraw-description": "Weet je zeker dat je deze waarschuwing wilt intrekken?"
 };
 var fi = {
 	"drawing-tool-form-tools": "Työkalut",
@@ -332,8 +348,8 @@ var fi = {
 	"delete-dialog-title": "Poista objekti",
 	"delete-dialog-description": "Haluatko varmasti poistaa objektin?",
 	"delete-succes": "on poistettu",
-	"update-succes": "on päivitetty",
-	"save-succes": "on tallennettu",
+	"update-succes": "Objekti \"{{objectName}}\" on päivitetty!",
+	"save-succes": "Objekti \"{{objectName}}\" on tallennettu!",
 	"object-manager-no-objects": "Objektia ei löytynyt",
 	"object-manager-options-menu": "Objektin lisävalinnat",
 	"object-manager-button-edit": "Muokkaa",
@@ -407,12 +423,16 @@ var fi = {
 	"warning-list-status-todo": "Arvostelua",
 	"warning-list-status-expired": "Vanhentunutta (viimeiset 24 tuntia)",
 	"warning-list-header-incident": "Ongelmaa",
+	"warning-list-header-incidents": "Ongelmia",
 	"warning-list-header-last-update": "Viimeisin päivitys",
 	"warning-list-header-start-time": "Alkamisen ajankohta",
 	"warning-list-header-end-time": "Päättymisen ajankohta",
 	"warning-list-header-domain": "Domain",
+	"warning-list-header-domains": "Domains",
 	"warning-list-header-phenomenon": "Sääilmiö",
+	"warning-list-header-phenomena": "Sääilmiöt",
 	"warning-list-header-level": "Taso",
+	"warning-list-header-levels": "Tasot",
 	"warning-list-header-status": "Tila",
 	"warning-list-header-draft": "LUONNOS",
 	"area-object-loader-title": "ei käännetty",
@@ -436,7 +456,11 @@ var fi = {
 	"warning-dialog-expire-succes": "ei käännetty",
 	"warning-dialog-expire-title": "ei käännetty",
 	"warning-dialog-expire-confirm": "ei käännetty",
-	"warning-dialog-expire-description": "ei käännetty"
+	"warning-dialog-expire-description": "ei käännetty",
+	"warning-dialog-withdraw-succes": "ei käännetty",
+	"warning-dialog-withdraw-title": "ei käännetty",
+	"warning-dialog-withdraw-confirm": "ei käännetty",
+	"warning-dialog-withdraw-description": "ei käännetty"
 };
 var no = {
 	"drawing-tool-form-tools": "Verktøy",
@@ -458,8 +482,8 @@ var no = {
 	"delete-dialog-title": "Slett objekt",
 	"delete-dialog-description": "Er du sikker på at du vil slette?",
 	"delete-succes": "er slettet",
-	"update-succes": "er oppdatert",
-	"save-succes": "er lagret",
+	"update-succes": "Objekt \"{{objectName}}\" er oppdatert!",
+	"save-succes": "Objekt \"{{objectName}}\" er lagret!",
 	"object-manager-no-objects": "Fant ingen objekter",
 	"object-manager-options-menu": "Objektvalg",
 	"object-manager-button-edit": "Endre",
@@ -533,12 +557,16 @@ var no = {
 	"warning-list-status-todo": "Til sjekk",
 	"warning-list-status-expired": "Utgått (siste 24 timer)",
 	"warning-list-header-incident": "Hendelse",
+	"warning-list-header-incidents": "Hendelser",
 	"warning-list-header-last-update": "Sist oppdatert",
 	"warning-list-header-start-time": "Starttid",
 	"warning-list-header-end-time": "Sluttid",
 	"warning-list-header-domain": "Domene",
+	"warning-list-header-domains": "Domener",
 	"warning-list-header-phenomenon": "Fenomen",
-	"warning-list-header-level": "Level",
+	"warning-list-header-phenomena": "Fenomener",
+	"warning-list-header-level": "Grad",
+	"warning-list-header-levels": "Grad",
 	"warning-list-header-status": "Status",
 	"warning-list-header-draft": "UTKAST",
 	"area-object-loader-title": "Legg til områder og objekter",
@@ -562,7 +590,11 @@ var no = {
 	"warning-dialog-expire-succes": "ikke oversatt",
 	"warning-dialog-expire-title": "ikke oversatt",
 	"warning-dialog-expire-confirm": "ikke oversatt",
-	"warning-dialog-expire-description": "ikke oversatt"
+	"warning-dialog-expire-description": "ikke oversatt",
+	"warning-dialog-withdraw-succes": "ikke oversatt",
+	"warning-dialog-withdraw-title": "ikke oversatt",
+	"warning-dialog-withdraw-confirm": "ikke oversatt",
+	"warning-dialog-withdraw-description": "ikke oversatt"
 };
 var warningsTranslations = {
 	en: en,
@@ -1690,43 +1722,43 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-/* *
- * 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)
+/* *
+ * 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)
  * */
 const objectDialogType = uiTypes.DialogTypes.ObjectManager;
 const drawingDialogType = uiTypes.DialogTypes.DrawingTool;
 const areaObjectLoaderType = uiTypes.DialogTypes.AreaObjectLoader;
 
-/* *
- * 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)
+/* *
+ * 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)
  * */
 const drawAdapter = createEntityAdapter({
   selectId: draw => draw.drawingInstanceId
@@ -1808,22 +1840,22 @@ const {
 } = slice$2;
 const drawActions = slice$2.actions;
 
-/* *
- * 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)
+/* *
+ * 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)
  * */
 const {
   selectById: selectDrawByInstanceId
@@ -1843,22 +1875,22 @@ const translateKeyOutsideComponents = (key, params = undefined) => i18n.t(key, O
 }, params));
 const useWarningsTranslation = () => useTranslation(ns);
 
-/* *
- * 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)
+/* *
+ * 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)
  * */
 const confirmationDialogOptions = t => {
   return {
@@ -2783,22 +2815,22 @@ $$g({ target: 'Array', proto: true, arity: 1, forced: FORCED$4 }, {
   }
 });
 
-/* *
- * 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)
+/* *
+ * 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)
  * */
 const DATE_FORMAT_HEADER = 'EEEE, MMMM dd';
 
@@ -2959,12 +2991,11 @@ const Objects = ({
             children: jsx(ListItem, Object.assign({
               style: style,
               disablePadding: true,
-              secondaryAction: jsxs(Grid, Object.assign({
+              secondaryAction: jsxs(Grid2, Object.assign({
                 container: true,
                 rowSpacing: 1
               }, {
-                children: [jsx(Grid, Object.assign({
-                  item: true,
+                children: [jsx(Grid2, Object.assign({
                   className: "objectActions"
                 }, {
                   children: jsx(ToggleMenu, {
@@ -2999,8 +3030,7 @@ const Objects = ({
                       icon: jsx(ExitDomain, {})
                     }]
                   })
-                })), object.scope === 'user' && jsx(Grid, Object.assign({
-                  item: true,
+                })), object.scope === 'user' && jsx(Grid2, Object.assign({
                   className: "objectActions"
                 }, {
                   children: jsx(ToggleMenu, {
@@ -3198,22 +3228,22 @@ const ObjectManager = ({
   }));
 };
 
-/* *
- * 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)
+/* *
+ * 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)
  * */
 const API_NAME = 'warnings';
 const getIdFromUrl = url => {
@@ -3330,22 +3360,22 @@ const ConfirmDeleteDialog = ({
   }));
 };
 
-/* *
- * 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)
+/* *
+ * 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)
  * */
 const publicWarningDialogType = uiTypes.DialogTypes.PublicWarnings;
 
@@ -3992,20 +4022,18 @@ const Phenomenon = ({
     children: warningFormPhenomena.map(phenomenon => jsx(MenuItem, Object.assign({
       value: phenomenon.key
     }, {
-      children: jsxs(Grid, Object.assign({
+      children: jsxs(Grid2, Object.assign({
         container: true,
         justifyContent: "space-between"
       }, {
-        children: [jsx(Grid, Object.assign({
-          item: true
-        }, {
+        children: [jsx(Grid2, {
           children: t(phenomenon.translationKey)
-        })), jsx(Grid, Object.assign({
-          item: true
+        }), jsx(Grid2, Object.assign({
+          sx: {
+            minWidth: 56
+          }
         }, {
-          children: jsx(ListItemIcon, {
-            children: getPhenomenaIcon(phenomenon.key)
-          })
+          children: getPhenomenaIcon(phenomenon.key)
         }))]
       }))
     }), phenomenon.key))
@@ -4021,15 +4049,18 @@ var WarningLevel;
 const LevelColors = {
   moderate: {
     color: '#FAE21E',
-    textColor: '#051039'
+    textColor: '#051039',
+    borderColor: '#FBFE02'
   },
   severe: {
     color: '#E27000',
-    textColor: '#051039'
+    textColor: '#051039',
+    borderColor: '#FEAE02'
   },
   extreme: {
     color: '#D62A20',
-    textColor: '#ffffff'
+    textColor: '#ffffff',
+    borderColor: '#FF0000'
   }
 };
 const getLevelStyle = levelColor => ({
@@ -4038,7 +4069,8 @@ const getLevelStyle = levelColor => ({
   paddingLeft: 0.5,
   paddingRight: 0.5,
   paddingBottom: '1px',
-  marginLeft: -0.5
+  marginLeft: -0.5,
+  border: levelColor ? `solid 1px ${levelColor.borderColor}` : 'none'
 });
 const levelOptions = [Object.assign({
   translationKey: 'warning-level-moderate',
@@ -4338,22 +4370,22 @@ const {
 } = slice$1;
 const publicWarningActions = slice$1.actions;
 
-/* *
- * 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)
+/* *
+ * 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)
  * */
 const TAKEOVER_MESSAGE = 'You are no longer the editor of this warning';
 const initialState = {};
@@ -4583,6 +4615,7 @@ const ObjectManagerConnect = ({
   };
   const openSnackbar = message => {
     dispatch(snackbarActions.openSnackbar({
+      type: snackbarTypes.SnackbarMessageType.VERBATIM_MESSAGE,
       message
     }));
   };
@@ -9780,6 +9813,62 @@ var warningListJSON = [
 			descriptionTranslation: "windy"
 		}
 	},
+	{
+		id: "3f756602-937d-11ee-a1bf-4k3k3k",
+		lastUpdatedTime: "2023-12-05T16:47:43Z",
+		status: "WITHDRAWN",
+		warningDetail: {
+			phenomenon: "thunderstorm",
+			areas: [
+				{
+					objectName: "test name",
+					geoJSON: {
+						type: "FeatureCollection",
+						features: [
+							{
+								type: "Feature",
+								geometry: {
+									type: "Polygon",
+									coordinates: [
+										[
+											[
+												5.0950448864466225,
+												53.492000941975654
+											],
+											[
+												4.280148780801422,
+												52.46455621916433
+											],
+											[
+												6.878229305858475,
+												52.98133263853793
+											],
+											[
+												5.0950448864466225,
+												53.492000941975654
+											]
+										]
+									]
+								},
+								properties: {
+									fill: "#ff7800",
+									stroke: "#ff7800",
+									"fill-opacity": 0.2,
+									"stroke-width": 2,
+									selectionType: "poly",
+									"stroke-opacity": 1
+								}
+							}
+						]
+					}
+				}
+			],
+			validFrom: "2023-12-07T14:47:34Z",
+			validUntil: "2023-12-09T20:47:34Z",
+			level: "moderate",
+			probability: 50
+		}
+	},
 	{
 		id: "4b94edb8-937d-11ee-b619-0ab3cf8a98c1",
 		lastUpdatedTime: "2023-12-05T14:48:04Z",
@@ -9894,22 +9983,22 @@ var warningListJSON = [
 	}
 ];
 
-/* *
- * 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)
+/* *
+ * 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)
  * */
 const drawingList = drawingListJSON;
 const drawingsListFullContent = drawingsListFullContentJSON;
@@ -10190,22 +10279,22 @@ $$8({ global: true, forced: parseInt !== $parseInt }, {
   parseInt: $parseInt
 });
 
-/* *
- * 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)
+/* *
+ * 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)
  * */
 const useFormDirty = ({
   isDirty,
@@ -10268,28 +10357,23 @@ const DrawingToolFormContentsNoMemo = ({
           title: dialogError,
           shouldClose: true
         })
-      })), jsxs(Grid, Object.assign({
+      })), jsxs(Grid2, Object.assign({
         "data-testid": "drawingToolForm",
         container: true,
         direction: "column",
         spacing: 1,
         padding: 2
       }, {
-        children: [jsx(Grid, Object.assign({
-          item: true
-        }, {
+        children: [jsx(Grid2, {
           children: jsx(Typography, Object.assign({
             variant: "body2"
           }, {
             children: t('drawing-tool-form-tools')
           }))
-        })), jsx(Grid, Object.assign({
-          item: true,
+        }), jsx(Grid2, Object.assign({
           container: true
         }, {
-          children: jsxs(Grid, Object.assign({
-            item: true
-          }, {
+          children: jsxs(Grid2, {
             children: [drawModes.map(mode => jsx(CustomIconButton, Object.assign({
               variant: "tool",
               tooltipTitle: mode.title,
@@ -10331,15 +10415,16 @@ const DrawingToolFormContentsNoMemo = ({
                 }
               }
             })]
-          }))
-        })), jsx(Grid, Object.assign({
-          item: true,
-          container: true
+          })
+        })), jsx(Grid2, Object.assign({
+          container: true,
+          size: "grow"
         }, {
-          children: jsx(Grid, Object.assign({
-            item: true,
-            xs: 12,
-            sm: 6
+          children: jsx(Grid2, Object.assign({
+            size: {
+              xs: 12,
+              sm: 6
+            }
           }, {
             children: jsx(ReactHookFormSelect, Object.assign({
               name: "opacity",
@@ -10359,9 +10444,7 @@ const DrawingToolFormContentsNoMemo = ({
               }), opacity))
             }))
           }))
-        })), jsxs(Grid, Object.assign({
-          item: true
-        }, {
+        })), jsxs(Grid2, {
           children: [jsx(ReactHookFormTextField, {
             name: "objectName",
             label: t('drawing-tool-form-object-name'),
@@ -10375,7 +10458,7 @@ const DrawingToolFormContentsNoMemo = ({
           }), jsx(ReactHookFormHiddenInput, {
             name: "id"
           })]
-        }))]
+        })]
       }))]
     })), jsx(Box, Object.assign({
       sx: {
@@ -11426,22 +11509,24 @@ const ContainerFormWrapper = styled('div')(({
     height: 'calc(100% - 88px)'
   }
 }));
+const sm6Width = 'calc(100% * 6 / var(--Grid-columns) - (var(--Grid-columns) - 6) * (var(--Grid-columnSpacing) / var(--Grid-columns)))';
+const sm4Width = 'calc(100% * 4 / var(--Grid-columns) - (var(--Grid-columns) - 4) * (var(--Grid-columnSpacing) / var(--Grid-columns)))';
 const ContainerGrid = styled('div')(({
   theme
 }) => ({
   backgroundColor: theme.palette.background.paper,
-  '.MuiGrid-grid-sm-6, .MuiGrid-grid-sm-4': {
+  '.MuiGrid2-grid-sm-6, .MuiGrid2-grid-sm-4': {
     width: '100%',
     minWidth: '100%'
   },
   [containerQueryBreakpoint]: {
-    '.MuiGrid-grid-sm-6': {
-      width: '50%',
-      minWidth: '50%'
+    '.MuiGrid2-grid-sm-6': {
+      width: sm6Width,
+      minWidth: sm6Width
     },
-    '.MuiGrid-grid-sm-4': {
-      width: '33.33%',
-      minWidth: '33.33%'
+    '.MuiGrid2-grid-sm-4': {
+      width: sm4Width,
+      minWidth: sm4Width
     }
   }
 }));
@@ -11610,108 +11695,104 @@ const Form = ({
             shouldClose: true,
             severity: _error === null || _error === void 0 ? void 0 : _error.severity
           })
-        })), jsxs(Grid, Object.assign({
+        })), jsxs(Grid2, Object.assign({
+          size: {
+            xs: 12
+          },
           container: true,
-          rowSpacing: 2
+          rowSpacing: 2,
+          columnSpacing: 2
         }, {
-          children: [jsx(Grid, Object.assign({
-            item: true,
-            xs: 12
+          children: [jsx(Grid2, Object.assign({
+            size: {
+              xs: 12
+            }
           }, {
             children: jsx(Phenomenon, {
               isDisabled: areFieldsDisabled,
               isReadOnly: _isReadOnly2
             })
-          })), jsx(Grid, Object.assign({
-            item: true,
-            xs: 12
-          }, {
-            children: jsx(Grid, Object.assign({
-              item: true,
+          })), jsx(Grid2, Object.assign({
+            size: {
               xs: 12
-            }, {
-              children: jsx(AreaField, {
-                onEditObject: () => {},
-                onViewObject: () => {},
-                onDeleteObject: () => {},
-                onAddObject: _onAddObject,
-                isDisabled: areFieldsDisabled || _isReadOnly2
-              })
-            }))
-          })), jsx(Grid, Object.assign({
-            item: true,
-            xs: 12,
-            container: true
+            }
           }, {
-            children: jsx(Grid, Object.assign({
-              item: true,
+            children: jsx(AreaField, {
+              onEditObject: () => {},
+              onViewObject: () => {},
+              onDeleteObject: () => {},
+              onAddObject: _onAddObject,
+              isDisabled: areFieldsDisabled || _isReadOnly2
+            })
+          })), jsx(Grid2, Object.assign({
+            size: {
               xs: 12
-            }, {
-              children: jsx(WarningsMapView, {
-                geojsonFeature: geoJSONFeature,
-                defaultBbox: defaultBbox,
-                isSnapshot: _isSnapshot
-              })
-            }))
-          })), jsxs(Grid, Object.assign({
-            item: true,
-            xs: 12,
-            container: true,
-            spacing: 2
+            }
           }, {
-            children: [jsx(Grid, Object.assign({
-              item: true,
+            children: jsx(WarningsMapView, {
+              geojsonFeature: geoJSONFeature,
+              defaultBbox: defaultBbox,
+              isSnapshot: _isSnapshot
+            })
+          })), jsx(Grid2, Object.assign({
+            size: {
               xs: 12,
               sm: 6
-            }, {
-              children: jsx(ValidFrom, {
-                isDisabled: areFieldsDisabled,
-                isReadOnly: _isReadOnly2
-              })
-            })), jsx(Grid, Object.assign({
-              item: true,
+            }
+          }, {
+            children: jsx(ValidFrom, {
+              isDisabled: areFieldsDisabled,
+              isReadOnly: _isReadOnly2
+            })
+          })), jsx(Grid2, Object.assign({
+            size: {
               xs: 12,
               sm: 6
-            }, {
-              children: jsx(ValidUntil, {
-                isDisabled: areFieldsDisabled,
-                isReadOnly: _isReadOnly2
-              })
-            }))]
-          })), jsxs(Grid, Object.assign({
-            item: true,
-            xs: 12,
+            }
+          }, {
+            children: jsx(ValidUntil, {
+              isDisabled: areFieldsDisabled,
+              isReadOnly: _isReadOnly2
+            })
+          })), jsxs(Grid2, Object.assign({
+            size: {
+              xs: 12
+            },
             container: true,
             spacing: 2
           }, {
-            children: [jsx(Grid, Object.assign({
-              item: true,
-              xs: 12,
-              sm: 6
+            children: [jsx(Grid2, Object.assign({
+              size: {
+                xs: 12,
+                sm: 6
+              }
             }, {
               children: jsx(LevelField, {
                 isDisabled: areFieldsDisabled,
                 isReadOnly: _isReadOnly2
               })
-            })), jsx(Grid, Object.assign({
-              item: true,
-              xs: 12,
-              sm: 6
+            })), jsx(Grid2, Object.assign({
+              size: {
+                xs: 12,
+                sm: 6
+              }
             }, {
               children: jsx(ProbabilityField, {
                 isDisabled: areFieldsDisabled,
                 isReadOnly: _isReadOnly2
               })
             }))]
-          })), jsx(Grid, Object.assign({
-            item: true,
-            xs: 12,
+          })), jsx(Grid2, Object.assign({
+            size: {
+              xs: 12
+            },
             container: true,
             spacing: 2
           }, {
-            children: jsx(Grid, Object.assign({
-              item: true,
-              xs: 12
+            children: jsx(Grid2, Object.assign({
+              size: {
+                xs: 12
+              }
             }, {
               children: jsx(DescriptionField, {
                 isDisabled: areFieldsDisabled,
@@ -11735,14 +11816,15 @@ const Form = ({
       }
     }, {
       children: jsx(ContainerGrid, {
-        children: jsxs(Grid, Object.assign({
+        children: jsxs(Grid2, Object.assign({
           container: true,
           spacing: 2
         }, {
-          children: [jsx(Grid, Object.assign({
-            item: true,
-            xs: 12,
-            sm: 4
+          children: [jsx(Grid2, Object.assign({
+            size: {
+              xs: 12,
+              sm: 4
+            }
           }, {
             children: jsx(Button, Object.assign({
               variant: "tertiary",
@@ -11755,10 +11837,11 @@ const Form = ({
             }, {
               children: t('warning-button-clear')
             }))
-          })), jsx(Grid, Object.assign({
-            item: true,
-            xs: 12,
-            sm: 4
+          })), jsx(Grid2, Object.assign({
+            size: {
+              xs: 12,
+              sm: 4
+            }
           }, {
             children: jsx(Button, Object.assign({
               variant: "tertiary",
@@ -11781,10 +11864,11 @@ const Form = ({
                 })]
               }))
             }))
-          })), jsx(Grid, Object.assign({
-            item: true,
-            xs: 12,
-            sm: 4
+          })), jsx(Grid2, Object.assign({
+            size: {
+              xs: 12,
+              sm: 4
+            }
           }, {
             children: jsx(Button, Object.assign({
               variant: "primary",
@@ -11828,22 +11912,22 @@ const PublicWarningsForm = props => {
   }));
 };
 
-/* *
- * 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)
+/* *
+ * 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)
  * */
 const getPublicWarningStore = store => {
   if (store && store.publicWarningForm) {
@@ -11874,22 +11958,22 @@ const getPublicWarningFormError = createSelector(getPublicWarningStore, publicWa
 const getSelectedPublicWarningId = createSelector(getPublicWarningStore, publicWarningStore => (publicWarningStore === null || publicWarningStore === void 0 ? void 0 : publicWarningStore.selectedPublicWarningId) || '');
 const getSelectedPublicIsFormDirty = createSelector(getPublicWarningStore, publicWarningStore => (publicWarningStore === null || publicWarningStore === void 0 ? void 0 : publicWarningStore.isFormDirty) || false);
 
-/* *
- * 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)
+/* *
+ * 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 PublicWarningStatus;
 (function (PublicWarningStatus) {
@@ -11899,6 +11983,7 @@ var PublicWarningStatus;
   PublicWarningStatus["TODO"] = "TODO";
   PublicWarningStatus["EXPIRED"] = "EXPIRED";
   PublicWarningStatus["IGNORED"] = "IGNORED";
+  PublicWarningStatus["WITHDRAWN"] = "WITHDRAWN";
 })(PublicWarningStatus || (PublicWarningStatus = {}));
 
 const PublicWarningsFormConnect = ({
@@ -13737,7 +13822,7 @@ const PublicWarningsFormDialogConnect = ({
 };
 
 const actionButton = amount => {
-  return jsxs(Grid, Object.assign({
+  return jsxs(Grid2, Object.assign({
     container: true,
     alignItems: "center",
     style: {
@@ -13885,7 +13970,7 @@ const FilterChipWithOptions = ({
           padding: '0px 24px 16px 24px'
         }
       }, {
-        children: [jsxs(Grid, Object.assign({
+        children: [jsxs(Grid2, Object.assign({
           container: true,
           justifyContent: "space-between",
           alignItems: "center"
@@ -14113,98 +14198,6 @@ const WarningListItemSeperator = _a => {
   }));
 };
 
-/* *
- * 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 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2024 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-const transformAirmetToWarningFormat = apiAirmet => {
-  const airmet = apiAirmet.airmet;
-  return {
-    id: apiAirmet.uuid,
-    lastUpdatedTime: apiAirmet.lastUpdateDate,
-    productStatus: airmet.status,
-    warningDetail: {
-      descriptionOriginal: '',
-      descriptionTranslation: '',
-      areas: [{
-        geoJSON: airmet.startGeometry,
-        objectName: airmet.locationIndicatorATSR
-      }],
-      phenomenon: airmet.phenomenon,
-      validFrom: airmet.validDateStart,
-      validUntil: airmet.validDateEnd,
-      level: 'AIR',
-      probability: 0,
-      incident: airmet.sequence
-    }
-  };
-};
-const transformSigmetToWarningFormat = apiSigmet => {
-  const sigmet = apiSigmet.sigmet;
-  return {
-    id: apiSigmet.uuid,
-    lastUpdatedTime: apiSigmet.lastUpdateDate,
-    productStatus: sigmet.status,
-    warningDetail: {
-      descriptionOriginal: '',
-      descriptionTranslation: '',
-      areas: [{
-        geoJSON: sigmet.startGeometry,
-        objectName: sigmet.locationIndicatorATSR
-      }],
-      phenomenon: sigmet.phenomenon,
-      validFrom: sigmet.validDateStart,
-      validUntil: sigmet.validDateEnd,
-      level: 'SIG',
-      probability: 0,
-      incident: sigmet.sequence
-    }
-  };
-};
-const mapProductStatusToWarningStatus = productStatus => {
-  switch (productStatus) {
-    case ProductStatus.PUBLISHED:
-      return PublicWarningStatus.PUBLISHED;
-    case ProductStatus.DRAFT:
-      return PublicWarningStatus.DRAFT;
-    case ProductStatus.CANCELLED:
-    case ProductStatus.EXPIRED:
-    case ProductStatus.DISCARDED:
-    default:
-      return PublicWarningStatus.EXPIRED;
-  }
-};
-
-function useOverflowCheck(text) {
-  const ref = React__default.useRef(null);
-  const [isOverflowing, setIsOverflowing] = React__default.useState(false);
-  React__default.useEffect(() => {
-    const checkOverflow = () => {
-      if (ref.current) {
-        setIsOverflowing(ref.current.scrollWidth > ref.current.clientWidth);
-      }
-    };
-    checkOverflow();
-  }, [text]);
-  return {
-    ref,
-    isOverflowing
-  };
-}
-
 const getSortedStatus = status => {
   switch (status) {
     case 'DRAFT_PUBLISHED':
@@ -14256,49 +14249,23 @@ const getWarningWithProposalId = warning => {
     })
   });
 };
-const getStatusIcon = warning => {
-  const getStatusTag = (content, color, icon = null) => jsx(StatusTag, {
-    content: content,
-    color: color,
-    sx: {
-      width: 'inherit',
-      height: '16px',
-      marginRight: 2
-    },
-    icon: icon
-  });
-  const status = warning.status || mapProductStatusToWarningStatus(warning.productStatus);
-  switch (status) {
-    case 'TODO':
-      return null;
-    case 'DRAFT':
-      return jsx(Box, Object.assign({
-        sx: {
-          height: '16px',
-          padding: '0px',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          color: 'geowebColors.iconButtons.flat.default.color'
-        }
-      }, {
-        children: jsx(Edit, {})
-      }));
-    case 'DRAFT_PUBLISHED':
-      return getStatusTag('Pub', 'green', jsx(Edit, {
-        sx: {
-          width: 20,
-          height: 20,
-          marginTop: '3px'
-        }
-      }));
-    case 'PUBLISHED':
-      return getStatusTag('Pub', 'green');
-    case 'EXPIRED':
-    default:
-      return getStatusTag('Exp', 'grey');
-  }
-};
+function useOverflowCheck(text) {
+  const ref = React__default.useRef(null);
+  const [isOverflowing, setIsOverflowing] = React__default.useState(false);
+  React__default.useEffect(() => {
+    const checkOverflow = () => {
+      if (ref.current) {
+        setIsOverflowing(ref.current.scrollWidth > ref.current.clientWidth);
+      }
+    };
+    checkOverflow();
+  }, [text]);
+  return {
+    ref,
+    isOverflowing
+  };
+}
+
 const WarningListColumnContent = _a => {
   var {
       title,
@@ -14307,9 +14274,7 @@ const WarningListColumnContent = _a => {
       width = 76
     } = _a,
     props = __rest(_a, ["title", "status", "children", "width"]);
-  return jsxs(Grid, Object.assign({
-    item: true
-  }, props, {
+  return jsxs(Grid2, Object.assign({
     sx: Object.assign(Object.assign({}, props.sx), {
       width
     })
@@ -14322,7 +14287,7 @@ const WarningListColumnContent = _a => {
         fontSize: 10,
         lineHeight: 1.6,
         height: 12,
-        color: status === 'EXPIRED' ? 'geowebColors.typographyAndIcons.inactiveText' : 'geowebColors.captions.captionStatus.rgba',
+        color: status === PublicWarningStatus.EXPIRED || status === PublicWarningStatus.WITHDRAWN ? 'geowebColors.typographyAndIcons.inactiveText' : 'geowebColors.captions.captionStatus.rgba',
         display: 'block',
         [`@container publicWarningList (min-width: ${breakpoints.desktop}px)`]: {
           display: 'none'
@@ -14335,19 +14300,21 @@ const WarningListColumnContent = _a => {
         overflow: 'visible',
         fontSize: 12,
         lineHeight: 1.2,
-        color: status === 'EXPIRED' ? 'geowebColors.typographyAndIcons.inactiveText' : 'geowebColors.typographyAndIcons.text'
+        color: status === PublicWarningStatus.EXPIRED || status === PublicWarningStatus.WITHDRAWN ? 'geowebColors.typographyAndIcons.inactiveText' : 'geowebColors.typographyAndIcons.text'
       }
     }, {
       children: children || '-'
     }))]
   }));
 };
-const getMenuItems = ({
+
+const WarningListItemMenu = ({
   warning,
   onEditWarning: _onEditWarning = () => {},
   onDeleteWarning: _onDeleteWarning = () => {},
   onDeleteReviewWarning: _onDeleteReviewWarning = () => {},
   onExpireWarning: _onExpireWarning = () => {},
+  onWithdrawWarning: _onWithdrawWarning = () => {},
   t
 }) => {
   const duplicate = {
@@ -14358,7 +14325,7 @@ const getMenuItems = ({
   // disable Expire option if warning is not active
   const shouldDisableExpire = !dateUtils.isBetween(dateUtils.getNowUtc(), dateUtils.createDate(warning.warningDetail.validFrom), dateUtils.createDate(warning.warningDetail.validUntil), '[]');
   switch (warning.status) {
-    case 'PUBLISHED':
+    case PublicWarningStatus.PUBLISHED:
       return [{
         text: t('warning-list-button-update'),
         action: () => _onEditWarning(getWarningWithLinkedToId(warning)),
@@ -14370,14 +14337,15 @@ const getMenuItems = ({
         isDisabled: shouldDisableExpire
       }, {
         text: t('warning-list-button-withdraw'),
-        action: () => null,
+        action: () => _onWithdrawWarning(warning),
         icon: jsx(Remove, {}),
-        isDisabled: true
+        isDisabled: false
       }];
-    case 'EXPIRED':
+    case PublicWarningStatus.EXPIRED:
+    case PublicWarningStatus.WITHDRAWN:
       return [duplicate];
-    case 'DRAFT':
-    case 'DRAFT_PUBLISHED':
+    case PublicWarningStatus.DRAFT:
+    case PublicWarningStatus.DRAFT_PUBLISHED:
       return [{
         text: t('object-manager-button-edit'),
         action: () => _onEditWarning(warning),
@@ -14387,7 +14355,7 @@ const getMenuItems = ({
         action: () => _onDeleteWarning(warning.id, warning.editor),
         icon: jsx(Delete, {})
       }];
-    case 'TODO':
+    case PublicWarningStatus.TODO:
       return [{
         text: t('warning-list-button-use'),
         action: () => _onEditWarning(getWarningWithProposalId(warning)),
@@ -14401,19 +14369,162 @@ const getMenuItems = ({
       return [];
   }
 };
+
+/* *
+ * 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 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2024 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+const transformAirmetToWarningFormat = apiAirmet => {
+  const airmet = apiAirmet.airmet;
+  return {
+    id: apiAirmet.uuid,
+    lastUpdatedTime: apiAirmet.lastUpdateDate,
+    productStatus: airmet.status,
+    warningDetail: {
+      descriptionOriginal: '',
+      descriptionTranslation: '',
+      areas: [{
+        geoJSON: airmet.startGeometry,
+        objectName: airmet.locationIndicatorATSR
+      }],
+      phenomenon: airmet.phenomenon,
+      validFrom: airmet.validDateStart,
+      validUntil: airmet.validDateEnd,
+      level: 'AIR',
+      probability: 0,
+      incident: airmet.sequence
+    }
+  };
+};
+const transformSigmetToWarningFormat = apiSigmet => {
+  const sigmet = apiSigmet.sigmet;
+  return {
+    id: apiSigmet.uuid,
+    lastUpdatedTime: apiSigmet.lastUpdateDate,
+    productStatus: sigmet.status,
+    warningDetail: {
+      descriptionOriginal: '',
+      descriptionTranslation: '',
+      areas: [{
+        geoJSON: sigmet.startGeometry,
+        objectName: sigmet.locationIndicatorATSR
+      }],
+      phenomenon: sigmet.phenomenon,
+      validFrom: sigmet.validDateStart,
+      validUntil: sigmet.validDateEnd,
+      level: 'SIG',
+      probability: 0,
+      incident: sigmet.sequence
+    }
+  };
+};
+const mapProductStatusToWarningStatus = productStatus => {
+  switch (productStatus) {
+    case ProductStatus.PUBLISHED:
+      return PublicWarningStatus.PUBLISHED;
+    case ProductStatus.DRAFT:
+      return PublicWarningStatus.DRAFT;
+    case ProductStatus.CANCELLED:
+    case ProductStatus.EXPIRED:
+    case ProductStatus.DISCARDED:
+    default:
+      return PublicWarningStatus.EXPIRED;
+  }
+};
+
+const renderLevelText = levelString => {
+  if (!levelString) {
+    return null;
+  }
+  const firstLetter = levelString[0];
+  const restLetters = levelString.slice(1, levelString.length);
+  return jsxs(Box, {
+    children: [jsx(Box, Object.assign({
+      component: "span",
+      sx: {
+        textTransform: 'uppercase'
+      }
+    }, {
+      children: firstLetter
+    })), jsx(Box, Object.assign({
+      className: "level-suffix",
+      component: "span"
+    }, {
+      children: restLetters
+    }))]
+  });
+};
+const renderStatusIcon = status => {
+  const getStatusTag = (content, color, icon = null) => jsx(StatusTag, {
+    content: content,
+    color: color,
+    sx: {
+      width: 'inherit',
+      height: '16px',
+      marginRight: 4
+    },
+    icon: icon
+  });
+  switch (status) {
+    case PublicWarningStatus.TODO:
+      return null;
+    case PublicWarningStatus.DRAFT:
+      return jsx(Box, Object.assign({
+        sx: {
+          height: '16px',
+          padding: '0px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          color: 'geowebColors.iconButtons.flat.default.color',
+          marginRight: 2
+        }
+      }, {
+        children: jsx(Edit, {})
+      }));
+    case PublicWarningStatus.DRAFT_PUBLISHED:
+      return getStatusTag('Pub', 'green', jsx(Edit, {
+        sx: {
+          width: 20,
+          height: 20,
+          marginTop: '3px'
+        }
+      }));
+    case PublicWarningStatus.PUBLISHED:
+      return getStatusTag('Pub', 'green');
+    case PublicWarningStatus.WITHDRAWN:
+      return getStatusTag('Wdn', 'red');
+    case PublicWarningStatus.EXPIRED:
+    default:
+      return getStatusTag('Exp', 'grey');
+  }
+};
 const WarningListItem = _a => {
   var _b, _c;
   var {
       warning,
-      status,
       activeWarningId,
       onSelectWarning = () => {},
       onEditWarning = () => {},
       onDeleteWarning = () => {},
       onDeleteReviewWarning = () => {},
-      onExpireWarning = () => {}
+      onExpireWarning = () => {},
+      onWithdrawWarning = () => {}
     } = _a,
-    props = __rest(_a, ["warning", "status", "activeWarningId", "onSelectWarning", "onEditWarning", "onDeleteWarning", "onDeleteReviewWarning", "onExpireWarning"]);
+    props = __rest(_a, ["warning", "activeWarningId", "onSelectWarning", "onEditWarning", "onDeleteWarning", "onDeleteReviewWarning", "onExpireWarning", "onWithdrawWarning"]);
   const {
     t
   } = useWarningsTranslation();
@@ -14429,13 +14540,21 @@ const WarningListItem = _a => {
     isOverflowing: isPhenomenonOverflowing
   } = useOverflowCheck(phenomenonText);
   const levelDetails = levelOptionsDict[warning.warningDetail.level];
+  const status = warning.status || mapProductStatusToWarningStatus(warning.productStatus);
+  const levelTranslation = levelDetails === null || levelDetails === void 0 ? void 0 : levelDetails.translationKey;
+  const defaultLevelText = React__default.useMemo(() => {
+    if (!levelTranslation) {
+      return '-';
+    }
+    return t(levelTranslation);
+  }, [levelTranslation, t]);
   return jsx(ListItem, Object.assign({
     sx: {
       marginBottom: 0.25,
       minHeight: '32px',
       padding: '0 0',
-      backgroundColor: status === 'EXPIRED' ? 'geowebColors.cards.cardContainerDisabled' : 'geowebColors.cards.cardContainer',
-      borderColor: status === 'EXPIRED' ? 'geowebColors.cards.cardContainerDisabledBorder' : 'geowebColors.cards.cardContainerBorder',
+      backgroundColor: status === PublicWarningStatus.EXPIRED || status === PublicWarningStatus.WITHDRAWN ? 'geowebColors.cards.cardContainerDisabled' : 'geowebColors.cards.cardContainer',
+      borderColor: status === PublicWarningStatus.EXPIRED || status === PublicWarningStatus.WITHDRAWN ? 'geowebColors.cards.cardContainerDisabledBorder' : 'geowebColors.cards.cardContainerBorder',
       borderRadius: 1,
       borderWidth: activeWarningId === warning.id ? '1px' : '1px',
       borderStyle: 'solid'
@@ -14445,13 +14564,14 @@ const WarningListItem = _a => {
       tooltipTitle: t('warning-list-button-options'),
       menuPosition: "bottom",
       "aria-label": t('warning-list-button-options'),
-      menuItems: getMenuItems({
+      menuItems: WarningListItemMenu({
         warning,
         t,
         onEditWarning,
         onDeleteReviewWarning,
         onDeleteWarning,
-        onExpireWarning
+        onExpireWarning,
+        onWithdrawWarning
       }),
       buttonIcon: jsx(Options, {})
     }),
@@ -14474,19 +14594,17 @@ const WarningListItem = _a => {
       "aria-label": `warning item for ${warning.id}`,
       selected: activeWarningId === warning.id
     }, {
-      children: jsxs(Grid, Object.assign({
+      children: jsxs(Grid2, Object.assign({
         className: "warning-list",
         container: true,
-        item: true,
-        xs: true,
         rowSpacing: 0,
-        columnSpacing: 2,
-        alignItems: "center"
+        columnSpacing: 0,
+        alignItems: "center",
+        size: "grow"
       }, {
         children: [jsx(WarningListColumnContent, Object.assign({
           title: t('warning-list-header-incident'),
-          status: status,
-          width: 142
+          status: status
         }, {
           children: warning.productStatus !== 'DRAFT' ? warning.warningDetail.incident : ''
         })), jsx(WarningListColumnContent, Object.assign({
@@ -14554,7 +14672,7 @@ const WarningListItem = _a => {
             })), jsx(Box, Object.assign({
               sx: {
                 position: 'absolute',
-                right: 0,
+                right: 16,
                 bottom: -6
               }
             }, {
@@ -14563,31 +14681,39 @@ const WarningListItem = _a => {
           }))
         })), jsx(WarningListColumnContent, Object.assign({
           title: t('warning-list-header-level'),
-          status: status
+          status: status,
+          sx: {
+            [`@container publicWarningList (min-width: ${breakpoints.desktop}px)`]: {
+              width: 56
+            }
+          }
         }, {
           children: jsx(Box, Object.assign({
             component: "span",
-            sx: getLevelStyle(levelDetails)
+            sx: Object.assign(Object.assign({}, getLevelStyle(levelDetails)), {
+              fontWeight: 'bold',
+              padding: 0,
+              marginRight: 2,
+              display: 'flex',
+              alignContent: 'center',
+              justifyContent: 'center',
+              flexWrap: 'wrap',
+              [`@container publicWarningList (min-width: ${breakpoints.desktop}px)`]: {
+                marginRight: 0,
+                height: '32px',
+                '.level-suffix': {
+                  display: 'none'
+                }
+              }
+            })
           }, {
             children: (() => {
-              var _a, _b;
-              if ((_a = warning.warningDetail) === null || _a === void 0 ? void 0 : _a.level) {
-                if (levelDetails === null || levelDetails === void 0 ? void 0 : levelDetails.translationKey) {
-                  // Public warning level
-                  return t(levelDetails.translationKey);
-                }
-                if ((_b = warning.warningDetail) === null || _b === void 0 ? void 0 : _b.level) {
-                  // Aviation level
-                  return jsx("span", Object.assign({
-                    style: {
-                      fontWeight: 'bold'
-                    }
-                  }, {
-                    children: warning.warningDetail.level
-                  }));
-                }
+              var _a;
+              if (((_a = warning.warningDetail) === null || _a === void 0 ? void 0 : _a.level) && !levelTranslation) {
+                // Show sigmet-airmet level
+                return warning.warningDetail.level;
               }
-              return '-';
+              return renderLevelText(defaultLevelText);
             })()
           }))
         })), jsx(WarningListColumnContent, Object.assign({
@@ -14629,12 +14755,12 @@ const WarningListItem = _a => {
               position: 'relative'
             }
           }, {
-            children: [getStatusIcon(warning), warning.editor && jsx(Box, Object.assign({
+            children: [renderStatusIcon(status), warning.editor && jsx(Box, Object.assign({
               sx: {
                 width: '16px',
                 position: 'absolute',
                 top: '1px',
-                right: '-12px'
+                right: '4px'
               }
             }, {
               children: jsx(WarningAvatar, {
@@ -14648,29 +14774,6 @@ const WarningListItem = _a => {
   }), warning.id);
 };
 
-const useHasScrollbar = (containerRef, scrollRef) => {
-  const [hasScrollbar, setHasScrollbar] = React__default.useState(false);
-  React__default.useEffect(() => {
-    let resizeObserver;
-    if (containerRef && containerRef.current && scrollRef) {
-      resizeObserver = new ResizeObserver(entry => {
-        var _a;
-        const containerHeight = entry[0].target.clientHeight;
-        const scrollHeight = (_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollHeight;
-        if (scrollHeight !== undefined) {
-          setHasScrollbar(scrollHeight > containerHeight);
-        }
-      });
-      resizeObserver.observe(containerRef.current);
-    }
-    return () => {
-      if (resizeObserver) {
-        resizeObserver.disconnect();
-      }
-    };
-  }, [containerRef, scrollRef]);
-  return hasScrollbar;
-};
 const sortWarningsOnStatus = warnings => {
   return warnings.reduce((allWarnings, warning) => {
     const status = warning.status || mapProductStatusToWarningStatus(warning.productStatus);
@@ -14689,7 +14792,7 @@ const sortWarningsOnStatus = warnings => {
         todo: allWarnings === null || allWarnings === void 0 ? void 0 : allWarnings.todo.concat(warning)
       });
     }
-    if (status === PublicWarningStatus.EXPIRED) {
+    if (status === PublicWarningStatus.EXPIRED || status === PublicWarningStatus.WITHDRAWN) {
       return Object.assign(Object.assign({}, allWarnings), {
         expired: allWarnings === null || allWarnings === void 0 ? void 0 : allWarnings.expired.concat(warning)
       });
@@ -14708,9 +14811,7 @@ const WarningListHeaderContent = _a => {
       width = 76
     } = _a,
     props = __rest(_a, ["title", "width"]);
-  return jsx(Grid, Object.assign({
-    item: true
-  }, props, {
+  return jsx(Grid2, Object.assign({
     sx: Object.assign(Object.assign({}, props.sx), {
       width
     })
@@ -14749,6 +14850,7 @@ const PublicWarningList = ({
   onDeleteReviewWarning: _onDeleteReviewWarning = () => {},
   onClickAllChip: _onClickAllChip = () => {},
   onExpireWarning: _onExpireWarning = () => {},
+  onWithdrawWarning: _onWithdrawWarning = () => {},
   isAllChipSelected: _isAllChipSelected = true
 }) => {
   const {
@@ -14773,24 +14875,22 @@ const PublicWarningList = ({
     if (item.totalWarnings !== undefined) {
       return 36;
     }
-    if (width <= 400) {
+    if (width < 400) {
       return 201;
     }
-    if (width <= 500) {
+    if (width < 500) {
       return 101;
     }
-    if (width <= breakpoints.tablet) {
+    if (width < breakpoints.tablet) {
       return 81;
     }
-    if (width <= breakpoints.desktop) {
+    if (width < breakpoints.desktop) {
       return 71;
     }
     return 34;
   };
   const filterRef = React__default.useRef(null);
-  const scrollContainerRef = React__default.useRef(null);
   const listRef = React__default.useRef(null);
-  const listInnerRef = React__default.useRef(null);
   const resetListIndex = () => {
     if (listRef.current) {
       listRef.current.resetAfterIndex(0, true);
@@ -14802,7 +14902,6 @@ const PublicWarningList = ({
     }
   }, [_warnings]);
   const filterHeight = useGetFilterHeight(filterRef);
-  const hasScrollbar = useHasScrollbar(scrollContainerRef, listInnerRef);
   return jsxs(Box, Object.assign({
     sx: {
       padding: 3,
@@ -14813,13 +14912,13 @@ const PublicWarningList = ({
     },
     "data-testid": "publicWarningList"
   }, {
-    children: [jsxs(Grid, Object.assign({
+    children: [jsxs(Grid2, Object.assign({
       container: true,
       justifyItems: "flex-end",
       ref: filterRef,
       sx: {
         [`@container publicWarningList (max-width: ${breakpoints.tablet}px)`]: {
-          ' .MuiGrid-grid-sm-12': {
+          ' .MuiGrid2-grid-sm-12': {
             maxWidth: '100%',
             flexBasis: '100%'
           },
@@ -14832,15 +14931,16 @@ const PublicWarningList = ({
         }
       }
     }, {
-      children: [jsx(Grid, Object.assign({
+      children: [jsx(Grid2, Object.assign({
         className: "warning-filter",
-        item: true,
-        xs: 12,
-        sm: 12,
-        md: 8,
         order: {
           xs: 2,
           md: 1
+        },
+        size: {
+          xs: 12,
+          sm: 12,
+          md: 8
         }
       }, {
         children: jsx(FilterList, {
@@ -14852,12 +14952,8 @@ const PublicWarningList = ({
           setShowSigmet: setShowSigmet,
           setShowAirmet: setShowAirmet
         })
-      })), jsxs(Grid, Object.assign({
+      })), jsxs(Grid2, Object.assign({
         className: "create-warning",
-        item: true,
-        xs: 12,
-        sm: 12,
-        md: 4,
         order: {
           xs: 1,
           md: 2
@@ -14866,7 +14962,12 @@ const PublicWarningList = ({
           display: 'flex'
         },
         justifyContent: "flex-end",
-        alignItems: "self-start"
+        alignItems: "self-start",
+        size: {
+          xs: 12,
+          sm: 12,
+          md: 4
+        }
       }, {
         children: [lastUpdatedTime && jsx(Box, Object.assign({
           sx: {
@@ -14900,28 +15001,26 @@ const PublicWarningList = ({
     }), _isLoading && jsx(LinearProgress, {
       "data-testid": "loading-bar",
       color: "secondary"
-    }), !error && jsxs(Grid, Object.assign({
+    }), !error && jsxs(Grid2, Object.assign({
       container: true,
       rowSpacing: 0,
-      columnSpacing: 2,
+      columnSpacing: 0,
       alignItems: "center",
       justifyContent: "space-between",
+      size: "grow",
       sx: {
         maxWidth: '100%',
         display: 'none',
         marginTop: '4px',
-        [`@container publicWarningList (min-width: ${breakpoints.desktop}px)`]: Object.assign({
+        [`@container publicWarningList (min-width: ${breakpoints.desktop}px)`]: {
           display: 'flex'
-        }, hasScrollbar && {
-          paddingRight: 2
-        })
+        }
       }
     }, {
       children: [jsx(WarningListHeaderContent, {
-        title: t('warning-list-header-incident'),
-        width: 142,
+        title: t('warning-list-header-incidents'),
         sx: {
-          marginLeft: 1
+          paddingLeft: 2
         }
       }), jsx(WarningListHeaderContent, {
         title: `${t('warning-list-header-last-update')} UTC`,
@@ -14933,12 +15032,17 @@ const PublicWarningList = ({
         title: `${t('warning-list-header-end-time')} UTC`,
         width: 142
       }), jsx(WarningListHeaderContent, {
-        title: t('warning-list-header-domain')
+        title: t('warning-list-header-domains')
       }), jsx(WarningListHeaderContent, {
-        title: t('warning-list-header-phenomenon'),
+        title: t('warning-list-header-phenomena'),
         width: 140
       }), jsx(WarningListHeaderContent, {
-        title: t('warning-list-header-level')
+        title: t('warning-list-header-levels'),
+        sx: {
+          [`@container publicWarningList (min-width: ${breakpoints.desktop}px)`]: {
+            width: 56
+          }
+        }
       }), jsx(WarningListHeaderContent, {
         title: t('areas'),
         width: 100
@@ -14954,8 +15058,7 @@ const PublicWarningList = ({
       sx: {
         height: `calc(100% - ${filterHeight}px)`,
         minHeight: '206px'
-      },
-      ref: scrollContainerRef
+      }
     }, {
       children: jsx(AutoSizer, Object.assign({
         onResize: resetListIndex
@@ -14968,8 +15071,7 @@ const PublicWarningList = ({
           width: _width,
           itemCount: items.length,
           itemSize: index => getItemSize(index, _width),
-          ref: listRef,
-          innerRef: listInnerRef
+          ref: listRef
         }, {
           children: ({
             index,
@@ -14988,14 +15090,14 @@ const PublicWarningList = ({
             const publicWarning = warning;
             return jsx(WarningListItem, {
               style: style,
-              status: publicWarning.status,
               warning: publicWarning,
               onSelectWarning: _onSelectWarning,
               onEditWarning: _onEditWarning,
               onDeleteWarning: _onDeleteWarning,
               onDeleteReviewWarning: _onDeleteReviewWarning,
               activeWarningId: _selectedPublicWarningId,
-              onExpireWarning: _onExpireWarning
+              onExpireWarning: _onExpireWarning,
+              onWithdrawWarning: _onWithdrawWarning
             }, key);
           }
         }))
@@ -15253,8 +15355,21 @@ const PublicWarningListConnect = () => {
       callback: () => onRemoveSuccess(expiredWarning.id, t('warning-dialog-expire-succes'))
     });
   });
+  const withdrawWarning = warning => __awaiter(void 0, void 0, void 0, function* () {
+    const withdrawWarning = Object.assign(Object.assign({}, warning), {
+      status: PublicWarningStatus.WITHDRAWN
+    });
+    setConfirmDialogOptions({
+      confirmLabel: t('warning-dialog-withdraw-confirm'),
+      title: t('warning-dialog-withdraw-title'),
+      description: t('warning-dialog-withdraw-description'),
+      request: () => warningsApi.updateWarning(withdrawWarning.id, withdrawWarning),
+      callback: () => onRemoveSuccess(withdrawWarning.id, t('warning-dialog-withdraw-succes'))
+    });
+  });
   const openSnackbar = message => {
     dispatch(snackbarActions.openSnackbar({
+      type: snackbarTypes.SnackbarMessageType.VERBATIM_MESSAGE,
       message
     }));
   };
@@ -15331,6 +15446,7 @@ const PublicWarningListConnect = () => {
       onDeleteWarning: deleteWarning,
       onDeleteReviewWarning: deleteReviewWarning,
       onExpireWarning: expireWarning,
+      onWithdrawWarning: withdrawWarning,
       selectedPublicWarningId: selectedPublicWarningId,
       lastUpdatedTime: lastUpdatedTime,
       onRefetchWarnings: fetchWarnings,
@@ -15400,7 +15516,7 @@ const componentsLookUp = (payload, apiProps) => {
 };
 
 const getErrorMessage = error => isAxiosError(error) ? getAxiosErrorMessage(error) : error.message;
-const getToggleEditorSuccessMessage = isEditor => translateKeyOutsideComponents(isEditor ? 'warning-editor-add-editor' : 'warning-editor-remove-editor');
+const getToggleEditorSuccessMessage = isEditor => isEditor ? 'warning-editor-add-editor' : 'warning-editor-remove-editor';
 const publicWarningFormListener = createListenerMiddleware();
 publicWarningFormListener.startListening({
   actionCreator: publicWarningFormActions.toggleEditorWarning,
@@ -15421,7 +15537,10 @@ publicWarningFormListener.startListening({
       listenerApi.dispatch(publicWarningFormActions.toggleEditorWarningSuccess({
         isEditor,
         username,
-        message: getToggleEditorSuccessMessage(isEditor)
+        message: {
+          type: snackbarTypes.SnackbarMessageType.TRANSLATABLE_MESSAGE,
+          key: getToggleEditorSuccessMessage(isEditor)
+        }
       }));
     } catch (error) {
       const isDialogOpen = uiSelectors.getisDialogOpen(listenerApi.getState(), publicWarningDialogType);
@@ -15442,7 +15561,10 @@ publicWarningFormListener.startListening({
       const publishedWarning = yield saveOrUpdateWarning(publicWarning);
       listenerApi.dispatch(publicWarningFormActions.publishWarningSuccess({
         publicWarning: publishedWarning,
-        message: translateKeyOutsideComponents('warning-publish-succes')
+        message: {
+          type: snackbarTypes.SnackbarMessageType.TRANSLATABLE_MESSAGE,
+          key: 'warning-publish-succes'
+        }
       }));
       listenerApi.dispatch(uiActions.setToggleOpenDialog({
         type: publicWarningDialogType,
@@ -15467,7 +15589,10 @@ publicWarningFormListener.startListening({
       const savedWarning = yield saveOrUpdateWarning(publicWarning);
       listenerApi.dispatch(publicWarningFormActions.saveWarningSuccess({
         publicWarning: savedWarning,
-        message: translateKeyOutsideComponents('warning-save-succes')
+        message: {
+          type: snackbarTypes.SnackbarMessageType.TRANSLATABLE_MESSAGE,
+          key: 'warning-save-succes'
+        }
       }));
     } catch (error) {
       const isDialogOpen = uiSelectors.getisDialogOpen(listenerApi.getState(), publicWarningDialogType);
@@ -15485,9 +15610,7 @@ publicWarningFormListener.startListening({
     const {
       message
     } = payload;
-    listenerApi.dispatch(snackbarActions.openSnackbar({
-      message
-    }));
+    listenerApi.dispatch(snackbarActions.openSnackbar(message));
     const isDialogOpen = uiSelectors.getisDialogOpen(listenerApi.getState(), publicWarningDialogType);
     toggleDialogLoadingEffect(listenerApi.dispatch, isDialogOpen, false);
   })
@@ -15565,22 +15688,22 @@ publicWarningFormListener.startListening({
   })
 });
 
-/* *
- * 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)
+/* *
+ * 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)
  * */
 const getLastUpdatedTimeFormatted = () => dateUtils.dateToString(dateUtils.utc(), dateUtils.DATE_FORMAT_HOURS);
 const publicWarningsListener = createListenerMiddleware();
@@ -15621,24 +15744,30 @@ publicWarningsListener.startListening({
   })
 });
 
-/* *
- * 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 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2024 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+/* *
+ * 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 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2024 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
-const getSnackbarMessage = (objectName, id) => id ? `Object "${objectName}" ${translateKeyOutsideComponents('update-succes')}!` : `Object "${objectName}" ${translateKeyOutsideComponents('save-succes')}!`;
+const getSnackbarMessage = (objectName, id) => ({
+  type: snackbarTypes.SnackbarMessageType.TRANSLATABLE_MESSAGE,
+  key: id ? 'update-succes' : 'save-succes',
+  params: {
+    objectName
+  }
+});
 const drawingsListener = createListenerMiddleware();
 drawingsListener.startListening({
   actionCreator: drawActions.submitDrawValues,
@@ -15670,9 +15799,7 @@ drawingsListener.startListening({
         type: drawingDialogType,
         error: ''
       }));
-      listenerApi.dispatch(snackbarActions.openSnackbar({
-        message: getSnackbarMessage(formValues.objectName, id)
-      }));
+      listenerApi.dispatch(snackbarActions.openSnackbar(getSnackbarMessage(formValues.objectName, id)));
       listenerApi.dispatch(uiActions.toggleIsLoadingDialog({
         isLoading: false,
         type: drawingDialogType
@@ -15694,22 +15821,22 @@ drawingsListener.startListening({
   })
 });
 
-/* *
- * 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)
+/* *
+ * 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)
  * */
 const drawingModuleConfig = {
   id: 'drawing-module',