@opengeoweb/warnings 12.8.0 → 12.10.0

package/index.esm.js

@@ -1,20 +1,20 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useDispatch, useSelector } from 'react-redux';
-import { Polygons, ExitDomain, Share, Edit, Delete, CoastalEvent, TemperatureLow, TemperatureHigh, Rain, Snow, Lightning, Fog, Wind, Thunderstorm, VulcanicEruption, Haze, FreezingPrecipitation, ModerateAircraftIcing, SevereAircraftIcing, ModerateTurbulence, SevereTurbulence, SandStorm, RadioactiveMaterials, DrawPolygon, Visibility, Add, breakpoints, Options, Close, ChevronDown, ChevronUp, Copy, Update, Cancel, Success, Expire, Remove, ArrowUpCompact, ArrowDownCompact } from '@opengeoweb/theme';
+import { Polygons, ExitDomain, Share, Edit, Delete, CoastalEvent, TemperatureLow, TemperatureHigh, Rain, Snow, Lightning, Fog, Wind, Thunderstorm, VulcanicEruption, Haze, FreezingPrecipitation, ModerateAircraftIcing, SevereAircraftIcing, ModerateTurbulence, SevereTurbulence, SandStorm, RadioactiveMaterials, DrawPolygon, Visibility, Add, ArrowUpCompact, ArrowDownCompact, breakpoints, DragHandle, Options, Close, ChevronDown, ChevronUp, Copy, Update, Cancel, Success, Expire, Remove } from '@opengeoweb/theme';
 import { uiTypes, uiActions, getSingularDrawtoolDrawLayerId, drawingToolSelectors, layerSelectors, uiSelectors, drawingToolActions, layerActions, mapListener, layersListener, drawingToolListener, syncGroupsListener, openlayersListener, syncGroupsReducer, drawingToolReducer, uiReducer, layerReducer, mapReducer, useSetupDialog, genericSelectors, useUpdateSharedData, genericActions, selectorMemoizationOptions } from '@opengeoweb/store';
 import { defaultPolygon, emptyGeoJSON, MapControlButton, getIcon, rewindGeometry, getGeoJSONPropertyValue, currentlySupportedDrawModes, defaultLayers, viewUtils, OpenLayersMapView, MapControls, OpenLayersZoomControl, OpenLayersLayer, OpenLayersFeatureLayer, genericOpenLayersFeatureStyle } from '@opengeoweb/webmap-react';
-import { SHARED_NAMESPACE, useConfirmationDialog, dateUtils, ToggleMenu, calculateStartSize, ToolContainerDraggable, AlertBanner, sessionStorageProvider, ConfirmationDialog, usePrevious, CustomIconButton, CustomTooltip, Avatar, getInitials, SwitchButton, CustomToggleButton, Filter, FilterChip, FilterOption, StatusTag, LastUpdateTime, getAxiosErrorMessage, ErrorBoundary } from '@opengeoweb/shared';
+import { SHARED_NAMESPACE, useConfirmationDialog, dateUtils, ToggleMenu, calculateStartSize, ToolContainerDraggable, AlertBanner, sessionStorageProvider, ConfirmationDialog, usePrevious, CustomIconButton, CustomTooltip, Avatar, getInitials, SwitchButton, FilterChip, TooltipSelect, CustomToggleButton, Filter, FilterOption, StatusTag, LastUpdateTime, getAxiosErrorMessage, ErrorBoundary } from '@opengeoweb/shared';
 import { createEntityAdapter, createSlice, createSelector, createListenerMiddleware, current, combineReducers, configureStore } from '@reduxjs/toolkit';
 import { defaultBbox } from '@opengeoweb/core';
 import { FORM_FIELDS_NAMESPACE, useDraftFormHelpers, ReactHookFormSelect, ReactHookFormHiddenInput, isValidGeoJsonCoordinates, ReactHookFormTextField, ReactHookFormProvider, defaultFormOptions, errorMessages, isEmpty, ReactHookFormDateTime, isXHoursAfter, isXHoursBefore } from '@opengeoweb/form-fields';
-import { SA_NAMESPACE, isInstanceOfCancelSigmet, getDefaultValidFromValue, isInstanceOfCancelAirmet, getTacGeometry, getMaxPolygonPoints, getDefaultValidUntilValue, useShortTestHelpers, SigmetForm, AirmetForm, ProductAction, getConfirmationDialogCancelLabel, getConfirmationDialogButtonLabel, getConfirmationDialogContent, getConfirmationDialogTitle, isVAPhenomenon, CancelSigmetVolcanicMovements, createAirmetPostParameter, createSigmetPostParameter, prepareCancelSigmet, getProductFormMode } from '@opengeoweb/sigmet-airmet';
+import { SA_NAMESPACE, isInstanceOfCancelSigmet, getDefaultValidFromValue, isInstanceOfCancelAirmet, getTacGeometry, getMaxPolygonPoints, getDefaultValidUntilValue, useShortTestHelpers, ProductAction, SigmetForm, AirmetForm, getConfirmationDialogCancelLabel, getConfirmationDialogButtonLabel, getConfirmationDialogContent, getConfirmationDialogTitle, isVAPhenomenon, CancelSigmetVolcanicMovements, createAirmetPostParameter, createSigmetPostParameter, prepareCancelSigmet, getProductFormMode } from '@opengeoweb/sigmet-airmet';
 import { LayerType, generateMapId } from '@opengeoweb/webmap';
 import { t } from 'i18next';
 import { useTranslation } from 'react-i18next';
 import * as React from 'react';
 import React__default, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
 import { useAuthenticationContext as useAuthenticationContext$1 } from '@opengeoweb/authentication';
-import { styled, Box, Typography, ListItem, Paper, ListItemButton, Stack, Grid, LinearProgress, Button, MenuItem, FormHelperText, Card, CardContent, Tabs, Tab, CircularProgress, Menu, DialogTitle, DialogContent, Switch, ListItemText } from '@mui/material';
+import { styled, Box, Typography, ListItem, Paper, ListItemButton, Stack, Grid, LinearProgress, Button, MenuItem, FormHelperText, Card, CardContent, Tabs, Tab, useTheme, FormControl, IconButton, CircularProgress, Menu, DialogTitle, DialogContent, Switch, ListItemText } from '@mui/material';
 import { VariableSizeList } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { getHeaders, handleResponse, AirmetPhenomena, SigmetPhenomena, useAuthQuery, useAuthenticationContext, optimisticUpdate, ProductStatus } from '@opengeoweb/api';
@@ -22,6 +22,7 @@ import { useQueryClient, useMutation } from '@tanstack/react-query';
 import { snackbarListener, snackbarReducer, snackbarActions, snackbarTypes } from '@opengeoweb/snackbar';
 import { useFormContext, useForm, FormProvider } from 'react-hook-form';
 import { isEqual, cloneDeep, clamp, concat, groupBy, pick } from 'lodash';
+import { ReactSortable } from 'react-sortablejs';
 
 var en = {
 	"drawing-tool-form-tools": "Tools",
@@ -55,6 +56,8 @@ var en = {
 	"object-manager-object-selected": "object selected",
 	"object-manager-share-menu": "Share object to",
 	"public-warning-title": "Public Warning",
+	"maritime-warning-coastal-title": "Coastal Waters",
+	"maritime-warning-northsea-title": "North Sea Districts",
 	"close-warning-dialog-title": "Close warning",
 	"warning-edit-mode-title": "Switch to edit mode",
 	"warning-edit-mode-description": "This warning is already in edit mode by another user and important information could get lost in the switching process.",
@@ -210,7 +213,39 @@ var en = {
 	"aviation-discard-success": "{{warningType}} has been discarded!",
 	"error-auth-login": "This feature is protected by authentication. Please log in to proceed",
 	"cancel-warningType": "Cancel {{warningType}}",
-	cancelling: "Cancelling"
+	cancelling: "Cancelling",
+	"maritime-new-warning": "New warning",
+	"maritime-add-area": "Add",
+	"maritime-no-area-selected": "(no area selected)",
+	"maritime-no-district-selected": "(no district selected)",
+	"maritime-backing": "Backing",
+	"maritime-veering": "Veering",
+	"maritime-no-change": "No change",
+	"maritime-windforce": "{{value}} Bft",
+	"maritime-header-direction": "Direction",
+	"maritime-header-direction-from": "Direction from",
+	"maritime-header-direction-to": "Direction to",
+	"maritime-header-windforce": "Bft",
+	"maritime-header-areas": "Areas",
+	"maritime-header-districts": "Districts",
+	"maritime-header-change": "Change",
+	"maritime-direction-n": "North",
+	"maritime-direction-nne": "North to Northeast",
+	"maritime-direction-ne": "Northeast",
+	"maritime-direction-nen": "Northeast to North",
+	"maritime-direction-e": "East",
+	"maritime-direction-ese": "East to Southeast",
+	"maritime-direction-se": "Southeast",
+	"maritime-direction-ses": "Southeast to South",
+	"maritime-direction-s": "South",
+	"maritime-direction-ssw": "South to Southwest",
+	"maritime-direction-sw": "Southwest",
+	"maritime-direction-sww": "Southwest to West",
+	"maritime-direction-w": "West",
+	"maritime-direction-wnw": "West to Northwest",
+	"maritime-direction-nw": "Northwest",
+	"maritime-direction-nwn": "Northwest to North",
+	"maritime-delete-button": "Delete"
 };
 var nl = {
 	"drawing-tool-form-tools": "Gereedschap",
@@ -244,6 +279,8 @@ var nl = {
 	"object-manager-object-selected": "object geselecteerd",
 	"object-manager-share-menu": "Object delen naar",
 	"public-warning-title": "Publieke Waarschuwing",
+	"maritime-warning-coastal-title": "Kust Wateren",
+	"maritime-warning-northsea-title": "Noordzee Districten",
 	"close-warning-dialog-title": "Waarschuwing sluiten",
 	"warning-edit-mode-title": "Wissel naar bewerken",
 	"warning-edit-mode-description": "Deze waarschuwing wordt al bewerkt door een andere gebruiker en belangrijke informatie kan verloren gaan.",
@@ -360,7 +397,39 @@ var nl = {
 	"aviation-discard-success": "niet vertaald",
 	"error-auth-login": "Deze functie wordt beschermd door authenticatie. Log in om verder te gaan",
 	"cancel-warningType": "Annuleer {{warningType}}",
-	cancelling: "Annuleren"
+	cancelling: "Annuleren",
+	"maritime-new-warning": "Nieuwe waarschuwing",
+	"maritime-add-area": "Toevoegen",
+	"maritime-no-area-selected": "(geen gebied geselecteerd)",
+	"maritime-no-district-selected": "(geen district geselecteerd)",
+	"maritime-backing": "Krimpend",
+	"maritime-veering": "Ruimend",
+	"maritime-no-change": "Geen wijziging",
+	"maritime-windforce": "{{value}} Bft",
+	"maritime-header-direction": "Richting",
+	"maritime-header-direction-from": "Richting van",
+	"maritime-header-direction-to": "Richting naar",
+	"maritime-header-windforce": "Bft",
+	"maritime-header-areas": "Gebieden",
+	"maritime-header-districts": "Districten",
+	"maritime-header-change": "Wijziging",
+	"maritime-direction-n": "Noord",
+	"maritime-direction-nne": "Noord tot noordoost",
+	"maritime-direction-ne": "Noordoost",
+	"maritime-direction-nen": "Noordoost tot noord",
+	"maritime-direction-e": "Oost",
+	"maritime-direction-ese": "Oost tot zuidoost",
+	"maritime-direction-se": "Zuidoost",
+	"maritime-direction-ses": "Zuidoost tot zuid",
+	"maritime-direction-s": "Zuid",
+	"maritime-direction-ssw": "Zuid tot zuidwest",
+	"maritime-direction-sw": "Zuidwest",
+	"maritime-direction-sww": "Zuidwest tot west",
+	"maritime-direction-w": "West",
+	"maritime-direction-wnw": "West tot noordwest",
+	"maritime-direction-nw": "Noordwest",
+	"maritime-direction-nwn": "Noordwest tot noord",
+	"maritime-delete-button": "Verwijderen"
 };
 var fi = {
 	"drawing-tool-form-tools": "Työkalut",
@@ -394,6 +463,8 @@ var fi = {
 	"object-manager-object-selected": "objekti valittuna",
 	"object-manager-share-menu": "Jaa objekti",
 	"public-warning-title": "Julkiset varoitukset",
+	"maritime-warning-coastal-title": "ei käännetty",
+	"maritime-warning-northsea-title": "ei käännetty",
 	"close-warning-dialog-title": "Sulje varoitukset",
 	"warning-edit-mode-title": "Vaihda editointitilaan",
 	"warning-edit-mode-description": "Tämä varoitus on jo editointitilassa toisen käyttäjän toimesta. Tärkeää tietoa saatetaan menettää, jos editointitilaa vaihdetaan.",
@@ -544,6 +615,8 @@ var no = {
 	"object-manager-object-selected": "objekt er valgt",
 	"object-manager-share-menu": "Del objekt med",
 	"public-warning-title": "Farevarsel",
+	"maritime-warning-coastal-title": "ikke oversatt",
+	"maritime-warning-northsea-title": "ikke oversatt",
 	"close-warning-dialog-title": "Lukk farevarsel",
 	"warning-edit-mode-title": "Bytt til editeringsmodus",
 	"warning-edit-mode-description": "Dette varselet er allerede under endring av en annen bruker. Viktig informasjon kan gå tapt ved å bytte",
@@ -1048,9 +1121,9 @@ var drawAdapter = createEntityAdapter({
     return draw.drawingInstanceId;
   }
 });
-var initialState$2 = drawAdapter.getInitialState();
+var initialState$3 = drawAdapter.getInitialState();
 var slice$2 = createSlice({
-  initialState: initialState$2,
+  initialState: initialState$3,
   name: 'drawingForm',
   reducers: {
     setDrawValues: function setDrawValues(draft, action) {
@@ -2134,9 +2207,9 @@ var publicWarningDialogType = uiTypes.DialogTypes.PublicWarnings;
  * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
 var TAKEOVER_MESSAGE = 'You are no longer the editor of this warning';
-var initialState$1 = {};
+var initialState$2 = {};
 var slice$1 = createSlice({
-  initialState: initialState$1,
+  initialState: initialState$2,
   name: 'publicWarningForm',
   reducers: {
     setFormValues: function setFormValues(draft, action) {
@@ -2452,14 +2525,14 @@ var publicWarningsAdapter = createEntityAdapter({
     return warning.id;
   }
 });
-var initialState = {
+var initialState$1 = {
   warnings: publicWarningsAdapter.getInitialState(),
   isLoading: true,
   lastUpdatedTime: '',
   filterState: {}
 };
 var slice = createSlice({
-  initialState: initialState,
+  initialState: initialState$1,
   name: 'publicWarnings',
   reducers: {
     setWarningFilters: function setWarningFilters(draft, action) {
@@ -5569,124 +5642,1212 @@ var ValidUntil = function ValidUntil(_ref) {
   });
 };
 
-var _excluded$4 = ["IS_DRAFT", "object", "translation-select"];
-var useScrollTopOnError = function useScrollTopOnError(error) {
-  var ref = React.useRef(null);
-  React.useEffect(function () {
-    if (error != null && error.message && ref.current) {
-      ref.current.scrollTop = 0;
-    }
-  }, [error]);
-  return ref;
-};
-var getEmptyPublicWarning = function getEmptyPublicWarning() {
-  var currentTime = new Date();
-  var validFromTime = dateUtils.add(currentTime, {
-    minutes: 15
+var AreaList = /*#__PURE__*/React__default.memo(function (_ref) {
+  var areas = _ref.areas,
+    selected = _ref.selected,
+    disabled = _ref.disabled,
+    onClickItem = _ref.onClickItem;
+  return jsx(Stack, {
+    "data-testid": "arealist",
+    direction: "row",
+    spacing: 1,
+    sx: {
+      display: 'block',
+      '.MuiChip-root': {
+        margin: 0,
+        marginRight: 1,
+        marginBottom: 1
+      }
+    },
+    children: areas.map(function (area) {
+      var isDisabled = disabled.includes(area.id);
+      var isSelected = !isDisabled && selected.includes(area.id);
+      return jsx(FilterChip, {
+        id: area.id,
+        label: area.label,
+        isSelected: isSelected,
+        isDisabled: isDisabled,
+        onClick: function onClick() {
+          return onClickItem == null ? void 0 : onClickItem(area.id);
+        },
+        size: "medium"
+      }, area.id);
+    })
   });
-  var validUntilTime = dateUtils.add(currentTime, {
-    hours: 6,
-    minutes: 15
+});
+
+var _excluded$4 = ["title", "width", "onClick", "isSorted", "sortDirection", "sortable"];
+var sharedArrowIconStyles = {
+  fontSize: '0.9rem'
+};
+var WarningListHeaderContent = function WarningListHeaderContent(_ref) {
+  var title = _ref.title,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 76 : _ref$width,
+    _onClick = _ref.onClick,
+    isSorted = _ref.isSorted,
+    sortDirection = _ref.sortDirection,
+    sortable = _ref.sortable,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+  return jsx(Grid, {
+    sx: Object.assign({}, props.sx, {
+      width: width,
+      cursor: _onClick ? 'pointer' : 'default'
+    }),
+    onClick: function onClick(e) {
+      e.stopPropagation(); // Ensure click only affects this column
+      _onClick == null || _onClick();
+    },
+    children: jsxs(Box, {
+      sx: {
+        display: 'flex',
+        alignItems: 'center',
+        overflow: 'hidden',
+        fontWeight: 'normal',
+        textOverflow: 'ellipsis',
+        fontSize: 12,
+        lineHeight: 1.33,
+        height: 16,
+        color: 'geowebColors.captions.captionStatus.rgba'
+      },
+      children: [title, sortable && jsx(Box, {
+        sx: {
+          display: 'flex',
+          alignItems: 'center',
+          marginLeft: '4px',
+          color: isSorted ? '#186DFF' : 'inherit'
+        },
+        children: isSorted && sortDirection === 'asc' ? jsx(ArrowUpCompact, {
+          sx: Object.assign({}, sharedArrowIconStyles),
+          "data-testid": "ArrowUpIcon"
+        }) : jsx(ArrowDownCompact, {
+          sx: Object.assign({}, sharedArrowIconStyles),
+          "data-testid": "ArrowDownIcon"
+        })
+      })]
+    })
   });
-  return {
-    id: '',
-    phenomenon: '',
-    validFrom: dateUtils.dateToString(validFromTime),
-    validUntil: dateUtils.dateToString(validUntilTime),
-    level: '',
-    probability: 30,
-    descriptionOriginal: '',
-    descriptionTranslation: '',
-    areas: []
-  };
 };
-var getFormData = function getFormData(publicWarningsDetails, object) {
-  var data = Object.assign({
-    IS_DRAFT: '',
-    'translation-select': ''
-  }, publicWarningsDetails ? Object.assign({}, getEmptyPublicWarning(), publicWarningsDetails) : getEmptyPublicWarning(), {
-    object: object
+
+var AssignedAreas = function AssignedAreas(_ref) {
+  var _sx;
+  var assignedAreas = _ref.assignedAreas,
+    selectedAreaIds = _ref.selectedAreaIds,
+    onAddClick = _ref.onAddClick,
+    onDeleteClick = _ref.onDeleteClick,
+    onToggleSelectArea = _ref.onToggleSelectArea,
+    _ref$shouldShowDistri = _ref.shouldShowDistricts,
+    shouldShowDistricts = _ref$shouldShowDistri === void 0 ? false : _ref$shouldShowDistri;
+  var _useWarningsTranslati = useWarningsTranslation(),
+    t = _useWarningsTranslati.t;
+  var assignedAreaIds = React__default.useMemo(function () {
+    return new Set(assignedAreas.map(function (area) {
+      return area.id;
+    }));
+  }, [assignedAreas]);
+  // can add the selected areas when they don't appear in the assigned area list
+  var canAddSelectedAreas = React__default.useMemo(function () {
+    return selectedAreaIds.length > 0 && selectedAreaIds.every(function (id) {
+      return !assignedAreaIds.has(id);
+    });
+  }, [selectedAreaIds, assignedAreaIds]);
+  var theme = useTheme();
+  return jsxs(Box, {
+    sx: {
+      display: 'flex',
+      gridArea: 'areas',
+      gap: 1,
+      minHeight: 32,
+      marginLeft: 1,
+      paddingInline: 0.5,
+      borderRadius: 1
+    },
+    style: {
+      backgroundColor: canAddSelectedAreas ? theme.palette.geowebColors.cards.cardContainerMouseOver : undefined
+    },
+    children: [assignedAreas.length === 0 && jsx(Typography, {
+      variant: "caption",
+      color: "textSecondary",
+      sx: {
+        alignSelf: 'center'
+      },
+      children: shouldShowDistricts ? t('maritime-no-district-selected') : t('maritime-no-area-selected')
+    }), jsx(Box, {
+      sx: (_sx = {
+        flexGrow: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 0.5,
+        paddingBlock: 0.5,
+        alignItems: 'flex-start'
+      }, _sx["@container maritime (min-width: " + breakpoints.tablet + "px)"] = {
+        flexWrap: 'wrap',
+        flexDirection: 'row'
+      }, _sx),
+      children: assignedAreas.map(function (area) {
+        var isSelected = selectedAreaIds.includes(area.id);
+        return jsx(FilterChip, {
+          size: "small",
+          id: area.id,
+          label: area.label,
+          isSelected: isSelected,
+          onClick: function onClick() {
+            return onToggleSelectArea(area.id);
+          },
+          onClickIcon: isSelected ? function () {
+            return onDeleteClick(area.id);
+          } : undefined
+        }, area.id);
+      })
+    }), jsx(AddButton, {
+      show: canAddSelectedAreas,
+      onClick: onAddClick
+    })]
   });
-  return data;
 };
-// tablet breakpoint - 2 padding * 2 for both sides
-var containerQueryBreakpoint = "@container (min-width: " + (breakpoints.tablet - 32) + "px)";
-var spinnerSx = {
-  width: '16px!important',
-  height: '16px!important',
-  position: 'absolute',
-  top: 0,
-  bottom: 0,
-  margin: 'auto',
-  marginLeft: 1
+var AddButton = function AddButton(_ref2) {
+  var onClick = _ref2.onClick,
+    show = _ref2.show;
+  var _useWarningsTranslati2 = useWarningsTranslation(),
+    t = _useWarningsTranslati2.t;
+  return jsx(Button, {
+    onClick: onClick,
+    variant: "primary",
+    style: {
+      visibility: show ? 'visible' : 'hidden'
+    },
+    sx: function sx(theme) {
+      return Object.assign({
+        alignSelf: 'flex-start',
+        height: 16,
+        minWidth: 0,
+        flexShrink: 0,
+        marginTop: 0.5
+      }, theme.typography.caption);
+    },
+    children: t('maritime-add-area')
+  });
 };
-var ContainerWrapper = styled('div')(function () {
-  return {
-    containerType: 'size',
-    height: '100%'
-  };
-});
-var ContainerFormWrapper = styled('div')(function (_ref) {
-  var _ref2;
-  var _ref$isReadOnly = _ref.isReadOnly,
-    isReadOnly = _ref$isReadOnly === void 0 ? false : _ref$isReadOnly,
-    theme = _ref.theme;
-  return _ref2 = {
-    padding: theme.spacing(2),
-    height: isReadOnly ? '100%' : "calc(100% - 206px)",
-    overflowY: 'auto'
-  }, _ref2[containerQueryBreakpoint] = {
-    height: isReadOnly ? '100%' : 'calc(100% - 88px)'
-  }, _ref2;
-});
-var sm6Width = 'calc(100% * 6 / var(--Grid-columns) - (var(--Grid-columns) - 6) * (var(--Grid-columnSpacing) / var(--Grid-columns)))';
-var sm4Width = 'calc(100% * 4 / var(--Grid-columns) - (var(--Grid-columns) - 4) * (var(--Grid-columnSpacing) / var(--Grid-columns)))';
-var ContainerGrid = styled('div')(function (_ref3) {
-  var _ref4;
-  var theme = _ref3.theme;
-  return _ref4 = {
-    backgroundColor: theme.palette.background.paper,
-    '.MuiGrid-grid-sm-6, .MuiGrid-grid-sm-4': {
+
+var WarningListSelect = /*#__PURE__*/React__default.memo(function (_ref) {
+  var options = _ref.options,
+    value = _ref.value,
+    label = _ref.label,
+    _onChange = _ref.onChange,
+    renderOption = _ref.renderOption,
+    renderValue = _ref.renderValue,
+    gridArea = _ref.gridArea,
+    additionalStyling = _ref.additionalStyling,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled;
+  var currentIndex = options.findIndex(function (option) {
+    return option.value === value;
+  });
+  return jsx(FormControl, {
+    style: {
       width: '100%',
-      minWidth: '100%'
-    }
-  }, _ref4[containerQueryBreakpoint] = {
-    '.MuiGrid-grid-sm-6': {
-      width: sm6Width,
-      minWidth: sm6Width
+      gridArea: gridArea
     },
-    '.MuiGrid-grid-sm-4': {
-      width: sm4Width,
-      minWidth: sm4Width
-    }
-  }, _ref4;
+    children: jsxs(TooltipSelect, {
+      disableUnderline: true,
+      tooltip: "",
+      style: {
+        maxWidth: '100%'
+      },
+      isEnabled: !isDisabled,
+      disabled: isDisabled,
+      value: value != null ? value : '',
+      SelectDisplayProps: {
+        'aria-label': label
+      },
+      list: options,
+      additionalStyling: additionalStyling,
+      currentIndex: currentIndex > -1 ? currentIndex : undefined,
+      renderValue: renderValue,
+      onChange: function onChange(event) {
+        _onChange(event.target.value);
+      },
+      onChangeMouseWheel: function onChangeMouseWheel(event) {
+        _onChange(event.value);
+      },
+      children: [jsx(MenuItem, {
+        disabled: true,
+        sx: {
+          display: 'none'
+        }
+      }), options.map(function (option, index) {
+        if (renderOption) {
+          return renderOption(option, index);
+        }
+        return jsx(MenuItem, {
+          value: option.value,
+          sx: function sx(theme) {
+            return {
+              '&.MuiMenuItem-root': Object.assign({}, theme.typography.caption)
+            };
+          },
+          children: typeof option.label === 'function' ? option.label(t) : option.label
+        }, option.value);
+      })]
+    })
+  });
 });
-var prepareFormValues = function prepareFormValues(data) {
-  // remove unneeded fields
-  data.IS_DRAFT;
-    data.object;
-    data['translation-select'];
-    var productToPost = _objectWithoutPropertiesLoose(data, _excluded$4);
-  // remove empty fields
-  return Object.keys(productToPost).reduce(function (warningDetail, fieldName) {
-    var key = fieldName;
-    var fieldValue = productToPost[key];
-    if (Array.isArray(fieldValue)) {
-      if (!fieldValue.length || fieldValue[0].geoJSON === null) {
-        return warningDetail;
+
+var WindForceLevel;
+(function (WindForceLevel) {
+  WindForceLevel["moderate"] = "moderate";
+  WindForceLevel["severe"] = "severe";
+  WindForceLevel["extreme"] = "extreme";
+})(WindForceLevel || (WindForceLevel = {}));
+var windForceStyles = {
+  moderate: {
+    color: '#FAE21E',
+    textColor: '#051039',
+    borderColor: '#FBFE02'
+  },
+  severe: {
+    color: '#E27000',
+    textColor: '#051039',
+    borderColor: '#FEAE02'
+  },
+  extreme: {
+    color: '#D62A20',
+    textColor: '#ffffff',
+    borderColor: '#FF0000'
+  }
+};
+var WindForceSelect = function WindForceSelect(_ref) {
+  var onChange = _ref.onChange,
+    value = _ref.value,
+    gridArea = _ref.gridArea,
+    options = _ref.options;
+  var warningListOptions = React__default.useMemo(function () {
+    return options.map(function (option) {
+      return {
+        value: option.value,
+        label: option.value
+      };
+    });
+  }, [options]);
+  var _useWarningsTranslati = useWarningsTranslation(),
+    t = _useWarningsTranslati.t;
+  var renderValue = React__default.useCallback(function (optionValue) {
+    var option = options.find(function (option) {
+      return option.value === optionValue;
+    });
+    var level = option.level;
+    var colors = windForceStyles[level];
+    return jsx(Box, {
+      sx: {
+        background: colors.color,
+        color: colors.textColor,
+        width: 'calc(100% + 24px)',
+        padding: [1.5, 1],
+        marginLeft: -1
+      },
+      children: optionValue
+    });
+  }, [options]);
+  var renderOption = React__default.useCallback(function (option, index) {
+    var level = options[index].level;
+    var colors = windForceStyles[level];
+    return jsx(MenuItem, {
+      value: option.value,
+      sx: function sx(theme) {
+        return {
+          '&.MuiMenuItem-root': Object.assign({
+            padding: 1
+          }, theme.typography.caption),
+          '.MuiSelect-select & ': {
+            marginLeft: '-8px'
+          }
+        };
+      },
+      children: jsx(Box, {
+        sx: {
+          background: colors.color,
+          color: colors.textColor,
+          width: '100%',
+          padding: [1.5, 1]
+        },
+        children: t('maritime-windforce', {
+          value: option.value
+        })
+      })
+    }, option.value);
+  }, [t, options]);
+  // change the arrow color for the select when the selected option has the level "extreme"
+  var option = options.find(function (option) {
+    return option.value === value;
+  });
+  var arrowColor = (option == null ? void 0 : option.level) === WindForceLevel.extreme ? '#fff' : undefined;
+  return jsx(WarningListSelect, {
+    label: t('maritime-header-windforce'),
+    gridArea: gridArea,
+    options: warningListOptions,
+    value: value,
+    onChange: onChange,
+    renderOption: renderOption,
+    renderValue: renderValue,
+    additionalStyling: {
+      '& .MuiSvgIcon-root': {
+        fill: arrowColor
       }
     }
-    if (fieldValue) {
-      var _Object$assign;
-      return Object.assign({}, warningDetail, (_Object$assign = {}, _Object$assign[key] = fieldValue, _Object$assign));
-    }
-    return warningDetail;
-  }, {});
+  });
 };
-var getErrors = function getErrors(errors) {
-  return errors ? errors == null ? void 0 : errors.split(/\r?\n/).reduce(function (allErrors, error, index) {
-    if (index === 0) {
-      return Object.assign({}, allErrors, {
+
+var windDirections = [{
+  value: 'NORTH',
+  label: function label(t) {
+    return t('maritime-direction-n');
+  }
+}, {
+  value: 'NORTH_TO_NORTHEAST',
+  label: function label(t) {
+    return t('maritime-direction-nne');
+  }
+}, {
+  value: 'NORTHEAST',
+  label: function label(t) {
+    return t('maritime-direction-ne');
+  }
+}, {
+  value: 'NORTHEAST_TO_NORTH',
+  label: function label(t) {
+    return t('maritime-direction-nen');
+  }
+}, {
+  value: 'EAST',
+  label: function label(t) {
+    return t('maritime-direction-e');
+  }
+}, {
+  value: 'EAST_TO_SOUTHEAST',
+  label: function label(t) {
+    return t('maritime-direction-ese');
+  }
+}, {
+  value: 'SOUTHEAST',
+  label: function label(t) {
+    return t('maritime-direction-se');
+  }
+}, {
+  value: 'SOUTHEAST_TO_SOUTH',
+  label: function label(t) {
+    return t('maritime-direction-ses');
+  }
+}, {
+  value: 'SOUTH',
+  label: function label(t) {
+    return t('maritime-direction-s');
+  }
+}, {
+  value: 'SOUTH_TO_SOUTHWEST',
+  label: function label(t) {
+    return t('maritime-direction-ssw');
+  }
+}, {
+  value: 'SOUTHWEST',
+  label: function label(t) {
+    return t('maritime-direction-sw');
+  }
+}, {
+  value: 'SOUTHWEST_TO_WEST',
+  label: function label(t) {
+    return t('maritime-direction-sww');
+  }
+}, {
+  value: 'WEST',
+  label: function label(t) {
+    return t('maritime-direction-w');
+  }
+}, {
+  value: 'WEST_TO_NORTHWEST',
+  label: function label(t) {
+    return t('maritime-direction-wnw');
+  }
+}, {
+  value: 'NORTHWEST',
+  label: function label(t) {
+    return t('maritime-direction-nw');
+  }
+}, {
+  value: 'NORTHWEST_TO_NORTH',
+  label: function label(t) {
+    return t('maritime-direction-nwn');
+  }
+}];
+var change = [{
+  value: 'NO_CHANGE',
+  label: function label(t) {
+    return t('maritime-no-change');
+  }
+}, {
+  value: 'BACKING',
+  label: function label(t) {
+    return t('maritime-backing');
+  }
+}, {
+  value: 'VEERING',
+  label: function label(t) {
+    return t('maritime-veering');
+  }
+}];
+var windForce = [{
+  level: WindForceLevel.extreme,
+  value: '12'
+}, {
+  level: WindForceLevel.extreme,
+  value: '11'
+}, {
+  level: WindForceLevel.extreme,
+  value: '10'
+}, {
+  level: WindForceLevel.severe,
+  value: '9'
+}, {
+  level: WindForceLevel.severe,
+  value: '8'
+}, {
+  level: WindForceLevel.moderate,
+  value: '7'
+}, {
+  level: WindForceLevel.moderate,
+  value: '6'
+}];
+
+var WarningListDragHandle = function WarningListDragHandle() {
+  return jsx(CustomIconButton, {
+    className: "handle",
+    tabIndex: -1,
+    disableTouchRipple: true,
+    sx: {
+      '&.handle:hover': function handleHover(theme) {
+        return Object.assign({}, theme.palette.geowebColors.layerManager.dragHandleHover);
+      },
+      cursor: 'grab',
+      marginTop: 0.5
+    },
+    children: jsx(DragHandle, {})
+  });
+};
+
+var WarningListItem$1 = /*#__PURE__*/React__default.memo(function (_ref) {
+  var warning = _ref.warning,
+    areas = _ref.areas,
+    selectedAreaIds = _ref.selectedAreaIds,
+    onAddClick = _ref.onAddClick,
+    onRemove = _ref.onRemove,
+    onChange = _ref.onChange,
+    onToggleSelectArea = _ref.onToggleSelectArea,
+    onRemoveArea = _ref.onRemoveArea,
+    _ref$shouldShowDistri = _ref.shouldShowDistricts,
+    shouldShowDistricts = _ref$shouldShowDistri === void 0 ? false : _ref$shouldShowDistri;
+  var areasById = React__default.useMemo(function () {
+    return new Map(areas.map(function (area) {
+      return [area.id, area];
+    }));
+  }, [areas]);
+  var assignedAreas = React__default.useMemo(function () {
+    return warning.assignedAreaIds.map(function (areaId) {
+      return areasById.get(areaId);
+    });
+  }, [warning.assignedAreaIds, areasById]);
+  var _useWarningsTranslati = useWarningsTranslation(),
+    t = _useWarningsTranslati.t;
+  var handleChangeFromDirection = React__default.useCallback(function (value) {
+    onChange(warning.id, {
+      windDirectionFrom: value
+    });
+  }, [onChange, warning.id]);
+  var handleChangeWindForce = React__default.useCallback(function (value) {
+    onChange(warning.id, {
+      windForce: value
+    });
+  }, [onChange, warning]);
+  var handleChangeWindChangeType = React__default.useCallback(function (value) {
+    onChange(warning.id, {
+      changeType: value
+    });
+    if (value === 'NO_CHANGE') {
+      onChange(warning.id, {
+        windDirectionTo: ''
+      });
+    }
+  }, [onChange, warning]);
+  var handleChangeToDirection = React__default.useCallback(function (value) {
+    onChange(warning.id, {
+      windDirectionTo: value
+    });
+  }, [onChange, warning]);
+  var handleAddClick = React__default.useCallback(function () {
+    onAddClick(warning.id);
+  }, [warning.id, onAddClick]);
+  var shouldDisableDirTo = warning.changeType === 'NO_CHANGE';
+  return jsxs(StyledItem, {
+    "data-testid": "maritime-warning",
+    children: [jsx(WarningListDragHandle, {}), jsx(WarningListSelect, {
+      gridArea: "dirFrom",
+      label: t('maritime-header-direction-from'),
+      options: windDirections,
+      onChange: handleChangeFromDirection,
+      value: warning.windDirectionFrom
+    }), jsx(WindForceSelect, {
+      gridArea: "windForce",
+      value: warning.windForce,
+      options: windForce,
+      onChange: handleChangeWindForce
+    }), jsx(AssignedAreas, {
+      assignedAreas: assignedAreas,
+      selectedAreaIds: selectedAreaIds,
+      onAddClick: handleAddClick,
+      onToggleSelectArea: onToggleSelectArea,
+      onDeleteClick: onRemoveArea,
+      shouldShowDistricts: shouldShowDistricts
+    }), jsx(WarningListSelect, {
+      gridArea: "changeType",
+      label: t('maritime-header-change'),
+      options: change,
+      onChange: handleChangeWindChangeType,
+      value: warning.changeType
+    }), jsx(WarningListSelect, {
+      gridArea: "dirTo",
+      label: t('maritime-header-direction-to'),
+      options: windDirections,
+      onChange: handleChangeToDirection,
+      value: warning.windDirectionTo,
+      isDisabled: shouldDisableDirTo
+    }), jsx(IconButton, {
+      sx: {
+        gridArea: 'delete',
+        justifySelf: 'end',
+        padding: 0,
+        marginTop: 0.5
+      },
+      size: "small",
+      onClick: function onClick() {
+        return onRemove(warning.id);
+      },
+      "aria-label": t('maritime-delete-button'),
+      children: jsx(Delete, {})
+    })]
+  });
+});
+var StyledItem = styled('div')(function (_ref2) {
+  var _ref3;
+  var theme = _ref2.theme;
+  return _ref3 = {
+    marginBottom: theme.spacing(0.25),
+    backgroundColor: theme.palette.geowebColors.cards.cardContainer,
+    borderColor: theme.palette.geowebColors.cards.cardContainerBorder,
+    borderRadius: theme.shape.borderRadius,
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    display: 'grid',
+    alignItems: 'start',
+    gap: theme.spacing(0.5),
+    paddingInline: theme.spacing(0.25),
+    // styling for small windows
+    gridTemplateAreas: "\n        \"drag dirFrom    dirFrom windForce delete\"\n        \".    areas      areas   areas     .\"\n        \".    changeType dirTo dirTo       .\" \n    ",
+    gridTemplateColumns: '24px minmax(87px, 1fr) 1fr minmax(60px, 1fr) 24px'
+  }, _ref3["@container maritime (min-width: " + breakpoints.tablet + "px)"] = {
+    gridTemplateAreas: "\n        \"drag dirFrom windForce areas changeType dirTo delete\" \n    ",
+    gridTemplateColumns: 'var(--grid-columns)'
+  }, _ref3;
+});
+
+var WarningList = function WarningList(_ref) {
+  var _sx;
+  var warnings = _ref.warnings,
+    areas = _ref.areas,
+    selectedAreaIds = _ref.selectedAreaIds,
+    onAddSelectedAreas = _ref.onAddSelectedAreas,
+    onRemoveWarning = _ref.onRemoveWarning,
+    onRemoveArea = _ref.onRemoveArea,
+    onChangeWarning = _ref.onChangeWarning,
+    onToggleSelectArea = _ref.onToggleSelectArea,
+    onMoveWarning = _ref.onMoveWarning,
+    _ref$shouldShowDistri = _ref.shouldShowDistricts,
+    shouldShowDistricts = _ref$shouldShowDistri === void 0 ? false : _ref$shouldShowDistri;
+  var _useWarningsTranslati = useWarningsTranslation(),
+    t = _useWarningsTranslati.t;
+  var onSort = React__default.useCallback(function (event) {
+    onMoveWarning(event.oldIndex, event.newIndex);
+  }, [onMoveWarning]);
+  return jsxs(Box, {
+    "data-testid": "warninglist",
+    sx: {
+      display: 'flex',
+      flexDirection: 'column',
+      minHeight: 0,
+      '--grid-columns': '30px 150px 60px 2fr 100px 100px 1fr' // FIXME modify this using breakpoints
+    },
+    children: [jsxs(Box, {
+      sx: (_sx = {
+        display: 'none'
+      }, _sx["@container maritime (min-width: " + breakpoints.tablet + "px)"] = {
+        display: 'grid'
+      }, _sx.gridTemplateColumns = 'var(--grid-columns)', _sx.gap = 0.5, _sx.paddingBlockEnd = 1, _sx.justifyItems = 'center', _sx['& > *'] = {
+        width: 'auto !important'
+      }, _sx),
+      children: [jsx(WarningListHeaderContent, {
+        title: t('maritime-header-direction'),
+        sx: {
+          gridColumnStart: 2
+        }
+      }), jsx(WarningListHeaderContent, {
+        title: t('maritime-header-windforce')
+      }), jsx(WarningListHeaderContent, {
+        title: shouldShowDistricts ? t('maritime-header-districts') : t('maritime-header-areas')
+      }), jsx(WarningListHeaderContent, {
+        title: t('maritime-header-change')
+      }), jsx(WarningListHeaderContent, {
+        title: t('maritime-header-direction')
+      })]
+    }), jsx(ReactSortable, {
+      tag: "div",
+      list: warnings,
+      onSort: onSort,
+      setList: function setList() {},
+      animation: 200,
+      handle: ".handle",
+      direction: "vertical",
+      style: {
+        minHeight: 0,
+        overflow: 'auto'
+      },
+      children: warnings.map(function (warning) {
+        return jsx(WarningListItem$1, {
+          warning: warning,
+          areas: areas,
+          selectedAreaIds: selectedAreaIds,
+          onToggleSelectArea: onToggleSelectArea,
+          onAddClick: onAddSelectedAreas,
+          onRemove: onRemoveWarning,
+          onChange: onChangeWarning,
+          onRemoveArea: onRemoveArea,
+          shouldShowDistricts: shouldShowDistricts
+        }, warning.id);
+      })
+    })]
+  });
+};
+
+var MaritimeWarningsForm = function MaritimeWarningsForm(_ref) {
+  var _sx, _sx2, _sx3;
+  var areas = _ref.areas,
+    selectedAreaIds = _ref.selectedAreaIds,
+    modified = _ref.modified,
+    warnings = _ref.warnings,
+    onToggleSelectArea = _ref.onToggleSelectArea,
+    onAddSelectedAreas = _ref.onAddSelectedAreas,
+    onRemoveWarning = _ref.onRemoveWarning,
+    onRemoveArea = _ref.onRemoveArea,
+    onAddWarning = _ref.onAddWarning,
+    onChangeWarning = _ref.onChangeWarning,
+    onSubmit = _ref.onSubmit,
+    onClear = _ref.onClear,
+    onMoveWarning = _ref.onMoveWarning,
+    _ref$shouldShowDistri = _ref.shouldShowDistricts,
+    shouldShowDistricts = _ref$shouldShowDistri === void 0 ? false : _ref$shouldShowDistri;
+  var _useWarningsTranslati = useWarningsTranslation(),
+    t = _useWarningsTranslati.t;
+  var disabledAreaIds = warnings.flatMap(function (warning) {
+    return warning.assignedAreaIds;
+  });
+  return jsxs(Stack, {
+    direction: "column",
+    spacing: 3,
+    sx: (_sx = {
+      height: '100%',
+      containerName: 'maritime',
+      containerType: 'inline-size',
+      padding: 2
+    }, _sx["@container maritime (min-width: " + breakpoints.tablet + "px)"] = {
+      padding: 3
+    }, _sx),
+    children: [jsx(AreaList, {
+      areas: areas,
+      selected: selectedAreaIds,
+      disabled: disabledAreaIds,
+      onClickItem: onToggleSelectArea
+    }), jsx(WarningList, {
+      warnings: warnings,
+      areas: areas,
+      selectedAreaIds: selectedAreaIds,
+      onAddSelectedAreas: onAddSelectedAreas,
+      onRemoveWarning: onRemoveWarning,
+      onChangeWarning: onChangeWarning,
+      onToggleSelectArea: onToggleSelectArea,
+      onRemoveArea: onRemoveArea,
+      onMoveWarning: onMoveWarning,
+      shouldShowDistricts: shouldShowDistricts
+    }), jsxs(Button, {
+      onClick: onAddWarning,
+      variant: "tertiary",
+      size: "small",
+      sx: {
+        alignSelf: 'flex-start',
+        paddingInline: 2
+      },
+      children: [jsx(Add, {}), t('maritime-new-warning')]
+    }), jsxs(Stack, {
+      spacing: 2,
+      direction: "row",
+      sx: (_sx2 = {}, _sx2["@container maritime (min-width: " + breakpoints.tablet + "px)"] = {
+        position: 'absolute',
+        bottom: 0,
+        right: 0,
+        padding: 3
+      }, _sx2),
+      children: [jsx(Button, {
+        onClick: onClear,
+        variant: "tertiary",
+        size: "small",
+        sx: {
+          width: '134px'
+        },
+        children: t('warning-button-clear')
+      }), jsx(Button, {
+        variant: "primary",
+        size: "small",
+        sx: (_sx3 = {
+          width: '134px'
+        }, _sx3["@container maritime (min-width: " + breakpoints.tablet + "px)"] = {
+          marginLeft: '24px!important'
+        }, _sx3),
+        disabled: !modified,
+        onClick: onSubmit,
+        children: t('warning-button-publish')
+      })]
+    })]
+  });
+};
+
+/* *
+ * 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 2025 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2025 - Finnish Meteorological Institute (FMI)
+ * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+var localWarningId = 0;
+function createWarning() {
+  localWarningId += 1;
+  return {
+    assignedAreaIds: [],
+    id: "local-warning-" + localWarningId
+  };
+}
+var initialState = {
+  selectedAreaIds: [],
+  warnings: [createWarning()],
+  modified: false
+};
+function reducer(state, action) {
+  switch (action.type) {
+    case 'changeWarning':
+      {
+        return Object.assign({}, state, {
+          warnings: state.warnings.map(function (warning) {
+            if (warning.id !== action.id) {
+              return warning;
+            }
+            return Object.assign({}, warning, action.newValues);
+          }),
+          modified: true
+        });
+      }
+    case 'toggleSelectArea':
+      {
+        if (state.selectedAreaIds.includes(action.id)) {
+          return Object.assign({}, state, {
+            selectedAreaIds: state.selectedAreaIds.filter(function (areaId) {
+              return areaId !== action.id;
+            })
+          });
+        }
+        return Object.assign({}, state, {
+          selectedAreaIds: [].concat(state.selectedAreaIds, [action.id])
+        });
+      }
+    case 'removeArea':
+      {
+        return Object.assign({}, state, {
+          selectedAreaIds: state.selectedAreaIds.filter(function (areaId) {
+            return areaId !== action.areaId;
+          }),
+          warnings: state.warnings.map(function (warning) {
+            var warningHasASelectedArea = warning.assignedAreaIds.some(function (areaId) {
+              return areaId === action.areaId;
+            });
+            if (warningHasASelectedArea) {
+              return Object.assign({}, warning, {
+                assignedAreaIds: warning.assignedAreaIds.filter(function (areaId) {
+                  return areaId !== action.areaId;
+                })
+              });
+            }
+            return warning;
+          }),
+          modified: true
+        });
+      }
+    case 'newWarning':
+      {
+        return Object.assign({}, state, {
+          warnings: [].concat(state.warnings, [createWarning()])
+        });
+      }
+    case 'addSelectedAreasToWarning':
+      {
+        var selectedAreaIdsSet = new Set(state.selectedAreaIds);
+        return Object.assign({}, state, {
+          warnings: state.warnings.map(function (warning) {
+            // remove the selected areas from other warnings
+            if (warning.id !== action.id) {
+              var warningHasASelectedArea = warning.assignedAreaIds.some(function (areaId) {
+                return selectedAreaIdsSet.has(areaId);
+              });
+              // don't modify the warning if it does not have a selected area
+              if (!warningHasASelectedArea) {
+                return warning;
+              }
+              return Object.assign({}, warning, {
+                assignedAreaIds: warning.assignedAreaIds.filter(function (areaId) {
+                  return !selectedAreaIdsSet.has(areaId);
+                })
+              });
+            }
+            // add the area to the given warning
+            var newAreaIds = new Set([].concat(warning.assignedAreaIds, state.selectedAreaIds));
+            return Object.assign({}, warning, {
+              assignedAreaIds: Array.from(newAreaIds)
+            });
+          }),
+          selectedAreaIds: [],
+          modified: true
+        });
+      }
+    case 'removeWarning':
+      {
+        var newWarnings = state.warnings.filter(function (warning) {
+          return warning.id !== action.id;
+        });
+        return Object.assign({}, state, {
+          warnings: newWarnings.length > 0 ? newWarnings : initialState.warnings,
+          modified: true
+        });
+      }
+    case 'clearWarnings':
+      {
+        return Object.assign({}, initialState, {
+          modified: true
+        });
+      }
+    case 'moveWarning':
+      {
+        var oldWarning = state.warnings[action.oldIndex];
+        var _newWarnings = [].concat(state.warnings);
+        _newWarnings.splice(action.oldIndex, 1);
+        _newWarnings.splice(action.newIndex, 0, oldWarning);
+        return Object.assign({}, state, {
+          warnings: _newWarnings,
+          modified: true
+        });
+      }
+    case 'initialize':
+      {
+        if (action.warnings.length === 0) {
+          return initialState;
+        }
+        return Object.assign({}, state, {
+          warnings: action.warnings,
+          selectedAreaIds: []
+        });
+      }
+    default:
+      {
+        return state;
+      }
+  }
+}
+function useMaritimeWarningsFormState() {
+  return React__default.useReducer(reducer, initialState);
+}
+
+var areasByDomain = {
+  northSeaDistricts: [{
+    id: 'DOGGER',
+    label: 'Dogger'
+  }, {
+    id: 'DOVER',
+    label: 'Dover'
+  }, {
+    id: 'HUMBER',
+    label: 'Humber'
+  }, {
+    id: 'THAMES',
+    label: 'Thames'
+  }],
+  coastalWaters: [{
+    id: 'VLISSINGEN',
+    label: 'Vlissingen'
+  }, {
+    id: 'ZIERIKZEE',
+    label: 'Zierikzee'
+  }, {
+    id: 'HOEK_VAN_HOLLAND',
+    label: 'Hoek van Holland'
+  }, {
+    id: 'IJMUIDEN',
+    label: 'Ijmuiden'
+  }, {
+    id: 'TEXEL',
+    label: 'Texel'
+  }]
+};
+
+var MaritimeWarningsFormConnect = function MaritimeWarningsFormConnect(_ref) {
+  var domain = _ref.domain;
+  var areas = areasByDomain[domain];
+  var shouldShowDistricts = domain === 'northSeaDistricts';
+  var _useMaritimeWarningsF = useMaritimeWarningsFormState(),
+    state = _useMaritimeWarningsF[0],
+    dispatch = _useMaritimeWarningsF[1];
+  React__default.useEffect(function () {
+    // FIXME: replace this by warnings from api
+    dispatch({
+      type: 'initialize',
+      warnings: Array.from({
+        length: 1
+      }).map(function (_, index) {
+        return {
+          assignedAreaIds: [],
+          id: (index + 1).toString(),
+          windDirectionFrom: '',
+          windDirectionTo: '',
+          changeType: 'NO_CHANGE'
+        };
+      })
+    });
+  }, [dispatch]);
+  var onToggleSelectArea = React__default.useCallback(function (id) {
+    React__default.startTransition(function () {
+      dispatch({
+        type: 'toggleSelectArea',
+        id: id
+      });
+    });
+  }, [dispatch]);
+  var onAddSelectedAreas = React__default.useCallback(function (id) {
+    React__default.startTransition(function () {
+      dispatch({
+        type: 'addSelectedAreasToWarning',
+        id: id
+      });
+    });
+  }, [dispatch]);
+  var onRemoveWarning = React__default.useCallback(function (id) {
+    React__default.startTransition(function () {
+      dispatch({
+        type: 'removeWarning',
+        id: id
+      });
+    });
+  }, [dispatch]);
+  var onAddWarning = React__default.useCallback(function () {
+    React__default.startTransition(function () {
+      dispatch({
+        type: 'newWarning'
+      });
+    });
+  }, [dispatch]);
+  var onChangeWarning = React__default.useCallback(function (id, newValues) {
+    React__default.startTransition(function () {
+      dispatch({
+        type: 'changeWarning',
+        id: id,
+        newValues: newValues
+      });
+    });
+  }, [dispatch]);
+  var onRemoveArea = React__default.useCallback(function (areaId) {
+    React__default.startTransition(function () {
+      dispatch({
+        type: 'removeArea',
+        areaId: areaId
+      });
+    });
+  }, [dispatch]);
+  var onClear = React__default.useCallback(function () {
+    React__default.startTransition(function () {
+      dispatch({
+        type: 'clearWarnings'
+      });
+    });
+  }, [dispatch]);
+  var onMoveWarning = React__default.useCallback(function (oldIndex, newIndex) {
+    dispatch({
+      type: 'moveWarning',
+      oldIndex: oldIndex,
+      newIndex: newIndex
+    });
+  }, [dispatch]);
+  var onSubmit = React__default.useCallback(function () {
+    // eslint-disable-next-line no-console
+    console.log(state.warnings);
+    // FIXME: add logic for submission
+  }, [state]);
+  return jsx(MaritimeWarningsForm, {
+    areas: areas,
+    selectedAreaIds: state.selectedAreaIds,
+    warnings: state.warnings,
+    modified: state.modified,
+    onToggleSelectArea: onToggleSelectArea,
+    onAddSelectedAreas: onAddSelectedAreas,
+    onRemoveWarning: onRemoveWarning,
+    onRemoveArea: onRemoveArea,
+    onAddWarning: onAddWarning,
+    onChangeWarning: onChangeWarning,
+    onMoveWarning: onMoveWarning,
+    onClear: onClear,
+    onSubmit: onSubmit,
+    shouldShowDistricts: shouldShowDistricts
+  });
+};
+
+var _excluded$3 = ["IS_DRAFT", "object", "translation-select"];
+var useScrollTopOnError = function useScrollTopOnError(error) {
+  var ref = React.useRef(null);
+  React.useEffect(function () {
+    if (error != null && error.message && ref.current) {
+      ref.current.scrollTop = 0;
+    }
+  }, [error]);
+  return ref;
+};
+var getEmptyPublicWarning = function getEmptyPublicWarning() {
+  var currentTime = new Date();
+  var validFromTime = dateUtils.add(currentTime, {
+    minutes: 15
+  });
+  var validUntilTime = dateUtils.add(currentTime, {
+    hours: 6,
+    minutes: 15
+  });
+  return {
+    id: '',
+    phenomenon: '',
+    validFrom: dateUtils.dateToString(validFromTime),
+    validUntil: dateUtils.dateToString(validUntilTime),
+    level: '',
+    probability: 30,
+    descriptionOriginal: '',
+    descriptionTranslation: '',
+    areas: []
+  };
+};
+var getFormData = function getFormData(publicWarningsDetails, object) {
+  var data = Object.assign({
+    IS_DRAFT: '',
+    'translation-select': ''
+  }, publicWarningsDetails ? Object.assign({}, getEmptyPublicWarning(), publicWarningsDetails) : getEmptyPublicWarning(), {
+    object: object
+  });
+  return data;
+};
+// tablet breakpoint - 2 padding * 2 for both sides
+var containerQueryBreakpoint = "@container (min-width: " + (breakpoints.tablet - 32) + "px)";
+var spinnerSx = {
+  width: '16px!important',
+  height: '16px!important',
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  margin: 'auto',
+  marginLeft: 1
+};
+var ContainerWrapper = styled('div')(function () {
+  return {
+    containerType: 'size',
+    height: '100%'
+  };
+});
+var ContainerFormWrapper = styled('div')(function (_ref) {
+  var _ref2;
+  var _ref$isReadOnly = _ref.isReadOnly,
+    isReadOnly = _ref$isReadOnly === void 0 ? false : _ref$isReadOnly,
+    _ref$addPadding = _ref.addPadding,
+    addPadding = _ref$addPadding === void 0 ? true : _ref$addPadding,
+    theme = _ref.theme;
+  return _ref2 = {
+    padding: addPadding ? theme.spacing(2) : 0,
+    height: isReadOnly ? '100%' : "calc(100% - 206px)",
+    overflowY: 'auto'
+  }, _ref2[containerQueryBreakpoint] = {
+    height: isReadOnly ? '100%' : 'calc(100% - 88px)'
+  }, _ref2;
+});
+var sm6Width = 'calc(100% * 6 / var(--Grid-columns) - (var(--Grid-columns) - 6) * (var(--Grid-columnSpacing) / var(--Grid-columns)))';
+var sm4Width = 'calc(100% * 4 / var(--Grid-columns) - (var(--Grid-columns) - 4) * (var(--Grid-columnSpacing) / var(--Grid-columns)))';
+var ContainerGrid = styled('div')(function (_ref3) {
+  var _ref4;
+  var theme = _ref3.theme;
+  return _ref4 = {
+    backgroundColor: theme.palette.background.paper,
+    '.MuiGrid-grid-sm-6, .MuiGrid-grid-sm-4': {
+      width: '100%',
+      minWidth: '100%'
+    }
+  }, _ref4[containerQueryBreakpoint] = {
+    '.MuiGrid-grid-sm-6': {
+      width: sm6Width,
+      minWidth: sm6Width
+    },
+    '.MuiGrid-grid-sm-4': {
+      width: sm4Width,
+      minWidth: sm4Width
+    }
+  }, _ref4;
+});
+var prepareFormValues = function prepareFormValues(data) {
+  // remove unneeded fields
+  data.IS_DRAFT;
+    data.object;
+    data['translation-select'];
+    var productToPost = _objectWithoutPropertiesLoose(data, _excluded$3);
+  // remove empty fields
+  return Object.keys(productToPost).reduce(function (warningDetail, fieldName) {
+    var key = fieldName;
+    var fieldValue = productToPost[key];
+    if (Array.isArray(fieldValue)) {
+      if (!fieldValue.length || fieldValue[0].geoJSON === null) {
+        return warningDetail;
+      }
+    }
+    if (fieldValue) {
+      var _Object$assign;
+      return Object.assign({}, warningDetail, (_Object$assign = {}, _Object$assign[key] = fieldValue, _Object$assign));
+    }
+    return warningDetail;
+  }, {});
+};
+var getErrors = function getErrors(errors) {
+  return errors ? errors == null ? void 0 : errors.split(/\r?\n/).reduce(function (allErrors, error, index) {
+    if (index === 0) {
+      return Object.assign({}, allErrors, {
         title: error
       });
     }
@@ -6166,22 +7327,36 @@ var Form = function Form(_ref5) {
   var ref = useScrollTopOnError(error);
   var _useProductConfig = useProductConfig(warningType),
     aviationConfig = _useProductConfig.data;
-  return jsxs(ContainerWrapper, {
-    children: [jsxs(ContainerFormWrapper, {
-      isReadOnly: isReadOnly,
-      ref: ref,
-      "data-testid": "scroll-container",
-      children: [errors && jsx(Box, {
-        sx: {
-          marginBottom: 2
-        },
-        children: jsx(AlertBanner, {
-          title: errors.title,
-          info: errors.errors,
-          shouldClose: true,
-          severity: error == null ? void 0 : error.severity
-        })
-      }), selectedAviationProduct ? jsx(Box, {
+  var isMaritimeWarning = warningType === 'maritimeWarningCoastal' || warningType === 'maritimeWarningNorthSea';
+  var getFormContent = function getFormContent() {
+    // Aviation forms
+    if (selectedAviationProduct) {
+      if (warningType === 'sigmet') {
+        return jsx(Box, {
+          sx: {
+            maxWidth: {
+              xs: '550px',
+              sm: '750px'
+            },
+            marginLeft: '-80px'
+          },
+          children: jsx(SigmetForm, {
+            showMap: false,
+            mode: mode,
+            initialSigmet: selectedAviationProduct !== undefined && !isInstanceOfCancelSigmet(selectedAviationProduct) ? selectedAviationProduct : null,
+            isCancelSigmet: selectedAviationProduct !== undefined && isInstanceOfCancelSigmet(selectedAviationProduct),
+            initialCancelSigmet: selectedAviationProduct !== undefined && isInstanceOfCancelSigmet(selectedAviationProduct) ? selectedAviationProduct : null,
+            productConfig: aviationConfig,
+            product: selectedAviationProduct,
+            getTAC: function getTAC(product) {
+              return fetchSigmetTAC(product);
+            },
+            storedGeoJSON: storedStartGeoJSON,
+            storedEndGeoJSON: storedEndGeoJSON
+          })
+        });
+      }
+      return jsx(Box, {
         sx: {
           maxWidth: {
             xs: '550px',
@@ -6189,20 +7364,7 @@ var Form = function Form(_ref5) {
           },
           marginLeft: '-80px'
         },
-        children: warningType === 'sigmet' ? jsx(SigmetForm, {
-          showMap: false,
-          mode: mode,
-          initialSigmet: selectedAviationProduct !== undefined && !isInstanceOfCancelSigmet(selectedAviationProduct) ? selectedAviationProduct : null,
-          isCancelSigmet: selectedAviationProduct !== undefined && isInstanceOfCancelSigmet(selectedAviationProduct),
-          initialCancelSigmet: selectedAviationProduct !== undefined && isInstanceOfCancelSigmet(selectedAviationProduct) ? selectedAviationProduct : null,
-          productConfig: aviationConfig,
-          product: selectedAviationProduct,
-          getTAC: function getTAC(product) {
-            return fetchSigmetTAC(product);
-          },
-          storedGeoJSON: storedStartGeoJSON,
-          storedEndGeoJSON: storedEndGeoJSON
-        }) : jsx(AirmetForm, {
+        children: jsx(AirmetForm, {
           showMap: false,
           mode: mode,
           isCancelAirmet: selectedAviationProduct !== undefined && isInstanceOfCancelAirmet(selectedAviationProduct),
@@ -6215,48 +7377,85 @@ var Form = function Form(_ref5) {
           },
           storedGeoJSON: storedStartGeoJSON
         })
-      }) : jsx(ContainerGrid, {
-        children: jsxs(Grid, {
+      });
+    }
+    if (warningType === 'maritimeWarningCoastal') {
+      return jsx(MaritimeWarningsFormConnect, {
+        domain: "coastalWaters"
+      });
+    }
+    if (warningType === 'maritimeWarningNorthSea') {
+      return jsx(MaritimeWarningsFormConnect, {
+        domain: "northSeaDistricts"
+      });
+    }
+    // Public warnings form
+    return jsx(ContainerGrid, {
+      children: jsxs(Grid, {
+        size: {
+          xs: 12
+        },
+        container: true,
+        rowSpacing: 2,
+        columnSpacing: 2,
+        children: [jsx(Grid, {
+          size: {
+            xs: 12
+          },
+          children: jsx(Phenomenon, {
+            isDisabled: areFieldsDisabled,
+            isReadOnly: isReadOnly
+          })
+        }), jsx(Grid, {
+          size: {
+            xs: 12
+          },
+          children: jsx(AreaField, {
+            onEditObject: function onEditObject() {},
+            onViewObject: function onViewObject() {},
+            onDeleteObject: function onDeleteObject() {},
+            onAddObject: onAddObject,
+            isDisabled: areFieldsDisabled || isReadOnly
+          })
+        }), jsx(Grid, {
+          size: {
+            xs: 12
+          },
+          children: jsx(WarningsMapView, {
+            geojsonFeature: geoJSONFeature,
+            defaultMapPreset: defaultMapPreset,
+            isSnapshot: isSnapshot
+          })
+        }), jsx(Grid, {
+          size: {
+            xs: 12,
+            sm: 6
+          },
+          children: jsx(ValidFrom, {
+            isDisabled: areFieldsDisabled,
+            isReadOnly: isReadOnly
+          })
+        }), jsx(Grid, {
+          size: {
+            xs: 12,
+            sm: 6
+          },
+          children: jsx(ValidUntil, {
+            isDisabled: areFieldsDisabled,
+            isReadOnly: isReadOnly
+          })
+        }), jsxs(Grid, {
           size: {
             xs: 12
           },
           container: true,
-          rowSpacing: 2,
-          columnSpacing: 2,
+          spacing: 2,
           children: [jsx(Grid, {
-            size: {
-              xs: 12
-            },
-            children: jsx(Phenomenon, {
-              isDisabled: areFieldsDisabled,
-              isReadOnly: isReadOnly
-            })
-          }), jsx(Grid, {
-            size: {
-              xs: 12
-            },
-            children: jsx(AreaField, {
-              onEditObject: function onEditObject() {},
-              onViewObject: function onViewObject() {},
-              onDeleteObject: function onDeleteObject() {},
-              onAddObject: onAddObject,
-              isDisabled: areFieldsDisabled || isReadOnly
-            })
-          }), jsx(Grid, {
-            size: {
-              xs: 12
-            },
-            children: jsx(WarningsMapView, {
-              geojsonFeature: geoJSONFeature,
-              defaultMapPreset: defaultMapPreset,
-              isSnapshot: isSnapshot
-            })
-          }), jsx(Grid, {
             size: {
               xs: 12,
               sm: 6
             },
-            children: jsx(ValidFrom, {
+            children: jsx(LevelField, {
               isDisabled: areFieldsDisabled,
               isReadOnly: isReadOnly
             })
@@ -6265,56 +7464,50 @@ var Form = function Form(_ref5) {
               xs: 12,
               sm: 6
             },
-            children: jsx(ValidUntil, {
+            children: jsx(ProbabilityField, {
               isDisabled: areFieldsDisabled,
               isReadOnly: isReadOnly
             })
-          }), jsxs(Grid, {
-            size: {
-              xs: 12
-            },
-            container: true,
-            spacing: 2,
-            children: [jsx(Grid, {
-              size: {
-                xs: 12,
-                sm: 6
-              },
-              children: jsx(LevelField, {
-                isDisabled: areFieldsDisabled,
-                isReadOnly: isReadOnly
-              })
-            }), jsx(Grid, {
-              size: {
-                xs: 12,
-                sm: 6
-              },
-              children: jsx(ProbabilityField, {
-                isDisabled: areFieldsDisabled,
-                isReadOnly: isReadOnly
-              })
-            })]
-          }), jsx(Grid, {
+          })]
+        }), jsx(Grid, {
+          size: {
+            xs: 12
+          },
+          container: true,
+          spacing: 2,
+          children: jsx(Grid, {
             size: {
               xs: 12
             },
-            container: true,
-            spacing: 2,
-            children: jsx(Grid, {
-              size: {
-                xs: 12
-              },
-              children: jsx(DescriptionField, {
-                isDisabled: areFieldsDisabled,
-                isReadOnly: isReadOnly
-              })
+            children: jsx(DescriptionField, {
+              isDisabled: areFieldsDisabled,
+              isReadOnly: isReadOnly
             })
-          })]
+          })
+        })]
+      })
+    });
+  };
+  return jsxs(ContainerWrapper, {
+    children: [jsxs(ContainerFormWrapper, {
+      isReadOnly: isReadOnly,
+      ref: ref,
+      "data-testid": "scroll-container",
+      addPadding: !isMaritimeWarning,
+      children: [errors && jsx(Box, {
+        sx: {
+          marginBottom: 2
+        },
+        children: jsx(AlertBanner, {
+          title: errors.title,
+          info: errors.errors,
+          shouldClose: true,
+          severity: error == null ? void 0 : error.severity
         })
-      }), jsx(DraftFieldHelper, {}), jsx(ReactHookFormHiddenInput, {
+      }), getFormContent(), jsx(DraftFieldHelper, {}), jsx(ReactHookFormHiddenInput, {
         name: "id"
       })]
-    }), formState !== 'cancel' && !isReadOnly && jsx(Box, {
+    }), warningType !== 'maritimeWarningCoastal' && warningType !== 'maritimeWarningNorthSea' && formState !== 'cancel' && !isReadOnly && jsx(Box, {
       sx: {
         padding: '24px 10px 14px 10px',
         position: 'absolute',
@@ -6399,7 +7592,7 @@ var Form = function Form(_ref5) {
           })]
         })
       })
-    }), formState === 'cancel' && jsx(Box, {
+    }), warningType !== 'maritimeWarningCoastal' && warningType !== 'maritimeWarningNorthSea' && formState === 'cancel' && jsx(Box, {
       sx: {
         padding: '24px 10px 14px 10px',
         position: 'absolute',
@@ -7810,6 +9003,9 @@ var ExpandableFilterChip = function ExpandableFilterChip(_ref) {
           onClick: function onClick(ref) {
             return setAnchorEl(ref);
           },
+          onClickIcon: function onClickIcon(ref) {
+            return setAnchorEl(ref);
+          },
           isDisabled: isDisabled,
           size: "medium",
           actionIcon: jsxs(Grid, {
@@ -8000,14 +9196,14 @@ var FilterList = function FilterList(_ref) {
   });
 };
 
-var _excluded$3 = ["totalWarnings", "status", "isExpanded", "onClick"];
+var _excluded$2 = ["totalWarnings", "status", "isExpanded", "onClick"];
 var HEADER_SIZE = 32;
 var WarningListItemSeperator = function WarningListItemSeperator(_ref) {
   var totalWarnings = _ref.totalWarnings,
     status = _ref.status,
     isExpanded = _ref.isExpanded,
     onClick = _ref.onClick,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   var _useWarningsTranslati = useWarningsTranslation(),
     t = _useWarningsTranslati.t;
   var getStatus = function getStatus(status) {
@@ -8048,7 +9244,7 @@ var WarningListItemSeperator = function WarningListItemSeperator(_ref) {
   }));
 };
 
-var _excluded$2 = ["title", "status", "children", "width"];
+var _excluded$1 = ["title", "status", "children", "width"];
 var WarningListColumnContent = function WarningListColumnContent(_ref) {
   var _sx;
   var title = _ref.title,
@@ -8056,7 +9252,7 @@ var WarningListColumnContent = function WarningListColumnContent(_ref) {
     children = _ref.children,
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? 76 : _ref$width,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   return jsxs(Grid, {
     sx: Object.assign({}, props.sx, {
       width: width
@@ -8233,7 +9429,7 @@ var WarningListItemMenu = function WarningListItemMenu(_ref) {
   }
 };
 
-var _excluded$1 = ["warning", "activeWarningId", "highlightedItem", "onSelectWarning", "onEditWarning", "onDeleteWarning", "onDeleteReviewWarning", "onExpireWarning", "onWithdrawWarning", "onActionAviationWarning"];
+var _excluded = ["warning", "activeWarningId", "highlightedItem", "onSelectWarning", "onEditWarning", "onDeleteWarning", "onDeleteReviewWarning", "onExpireWarning", "onWithdrawWarning", "onActionAviationWarning"];
 var renderLevelText = function renderLevelText(levelString) {
   if (!levelString) {
     return null;
@@ -8330,7 +9526,7 @@ var WarningListItem = function WarningListItem(_ref) {
     onWithdrawWarning = _ref$onWithdrawWarnin === void 0 ? function () {} : _ref$onWithdrawWarnin,
     _ref$onActionAviation = _ref.onActionAviationWarning,
     onActionAviationWarning = _ref$onActionAviation === void 0 ? function () {} : _ref$onActionAviation,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var _useWarningsTranslati = useWarningsTranslation(),
     t = _useWarningsTranslati.t;
   var phenomenonDetails = allPhenomenaDict[warning.warningDetail.phenomenon];
@@ -8571,6 +9767,8 @@ var NewWarningButton = function NewWarningButton(_ref) {
     isDefaultOpen = _ref$isDefaultOpen === void 0 ? false : _ref$isDefaultOpen;
   var _useWarningsTranslati = useWarningsTranslation(),
     t = _useWarningsTranslati.t;
+  var config = sessionStorageProvider.getConfig();
+  var showMartimeWarningOption = !!config.GW_WARNINGS_MARITIME_WARNINGS;
   var _React$useState = React__default.useState(null),
     anchorEl = _React$useState[0],
     setAnchorEl = _React$useState[1];
@@ -8666,64 +9864,27 @@ var NewWarningButton = function NewWarningButton(_ref) {
         children: jsx(ListItemText, {
           children: BUTTON_SIGMET
         })
-      }, "Sigmet")]
+      }, "Sigmet"), showMartimeWarningOption ? jsxs(Fragment, {
+        children: [jsx(MenuItem, {
+          onClick: function onClick(event) {
+            onCreateNewWarning('maritimeWarningCoastal', event);
+          },
+          children: jsx(ListItemText, {
+            children: t('maritime-warning-coastal-title').toUpperCase()
+          })
+        }, "MaritimeWarningCoastal"), jsx(MenuItem, {
+          onClick: function onClick(event) {
+            onCreateNewWarning('maritimeWarningNorthSea', event);
+          },
+          children: jsx(ListItemText, {
+            children: t('maritime-warning-northsea-title').toUpperCase()
+          })
+        }, "MaritimeWarningNorthSea")]
+      }) : null]
     })]
   });
 };
 
-var _excluded = ["title", "width", "onClick", "isSorted", "sortDirection", "sortable"];
-var sharedArrowIconStyles = {
-  fontSize: '0.9rem'
-};
-var WarningListHeaderContent = function WarningListHeaderContent(_ref) {
-  var title = _ref.title,
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? 76 : _ref$width,
-    _onClick = _ref.onClick,
-    isSorted = _ref.isSorted,
-    sortDirection = _ref.sortDirection,
-    sortable = _ref.sortable,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return jsx(Grid, {
-    sx: Object.assign({}, props.sx, {
-      width: width,
-      cursor: _onClick ? 'pointer' : 'default'
-    }),
-    onClick: function onClick(e) {
-      e.stopPropagation(); // Ensure click only affects this column
-      _onClick == null || _onClick();
-    },
-    children: jsxs(Box, {
-      sx: {
-        display: 'flex',
-        alignItems: 'center',
-        overflow: 'hidden',
-        fontWeight: 'normal',
-        textOverflow: 'ellipsis',
-        fontSize: 12,
-        lineHeight: 1.33,
-        height: 16,
-        color: 'geowebColors.captions.captionStatus.rgba'
-      },
-      children: [title, sortable && jsx(Box, {
-        sx: {
-          display: 'flex',
-          alignItems: 'center',
-          marginLeft: '4px',
-          color: isSorted ? '#186DFF' : 'inherit'
-        },
-        children: isSorted && sortDirection === 'asc' ? jsx(ArrowUpCompact, {
-          sx: Object.assign({}, sharedArrowIconStyles),
-          "data-testid": "ArrowUpIcon"
-        }) : jsx(ArrowDownCompact, {
-          sx: Object.assign({}, sharedArrowIconStyles),
-          "data-testid": "ArrowDownIcon"
-        })
-      })]
-    })
-  });
-};
-
 var groupWarningsOnStatus = function groupWarningsOnStatus(warnings, sortState) {
   var key = sortState.key,
     direction = sortState.direction;
@@ -9825,6 +10986,8 @@ var PublicWarningListConnect = function PublicWarningListConnect(_ref) {
 
 var warningListViewPreset = {
   componentType: 'WarningList'};
+var maritimeWarningsViewPreset = {
+  componentType: 'MaritimeWarnings'};
 var componentsLookUp = function componentsLookUp(payload) {
   var id = payload.id,
     componentType = payload.componentType,
@@ -9838,6 +11001,12 @@ var componentsLookUp = function componentsLookUp(payload) {
           presetFilterState: initialProps.filterState
         })
       });
+    case maritimeWarningsViewPreset.componentType:
+      return jsx(ErrorBoundary, {
+        children: jsx(MaritimeWarningsFormConnect, {
+          domain: initialProps.domain || 'northSeaDistricts'
+        })
+      });
     default:
       return null;
   }