@opengeoweb/warnings 8.2.0 → 8.3.1

package/index.esm.js

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import React__default, { useContext, useRef, useCallback, useDebugValue, Fragment, useState, useEffect } from 'react';
 import 'react-dom';
-import { Polygons, Edit, Delete, DrawPolygon, Visibility, Add, breakpoints } from '@opengeoweb/theme';
-import { uiActions, uiTypes, getSingularDrawtoolDrawLayerId, drawtoolSelectors, layerSelectors, uiSelectors, mapStoreActions, drawtoolActions, layerActions, snackbarActions, getGeoJSONPropertyValue } from '@opengeoweb/store';
-import { emptyGeoJSON, MapControlButton, getIcon, currentlySupportedDrawModes } from '@opengeoweb/webmap-react';
+import { Polygons, Share, ExitDomain, Edit, Delete, DrawPolygon, Visibility, Add, breakpoints, CoastalEvent, Fog, TemperatureHigh, TemperatureLow, Rain, Snow, Lightning, Wind } from '@opengeoweb/theme';
+import { uiActions, uiTypes, getSingularDrawtoolDrawLayerId, drawtoolSelectors, layerSelectors, uiSelectors, mapStoreActions, drawtoolActions, layerActions, snackbarActions } from '@opengeoweb/store';
+import { emptyGeoJSON, MapControlButton, getGeoJSONPropertyValue, getIcon, currentlySupportedDrawModes } from '@opengeoweb/webmap-react';
 import { useSetupDialog } from '@opengeoweb/core';
 import { dateUtils, ToggleMenu, calculateStartSize, ToolContainerDraggable, AlertBanner, ConfirmationDialog, getAxiosErrorMessage, CustomIconButton, SwitchButton, isAxiosError } from '@opengeoweb/shared';
-import { Typography, List, ListItem, Paper, ListItemButton, Box, Stack, LinearProgress, Grid, FormHelperText, MenuItem, Button, Tabs, Tab, FormControl, Card, CardContent, styled, FormControlLabel, Radio } from '@mui/material';
+import { Typography, List, ListItem, Paper, ListItemButton, Stack, LinearProgress, Box, Button, Grid, FormHelperText, MenuItem, Tabs, Tab, FormControl, Card, CardContent, styled, ListItemIcon, FormControlLabel, Radio } from '@mui/material';
 import { getApi, createApiInstance, createNonAuthApiInstance, createFakeApiInstance, ApiProvider } from '@opengeoweb/api';
 import { ReactHookFormProvider, defaultFormOptions, ReactHookFormHiddenInput, isValidGeoJsonCoordinates, ReactHookFormSelect, ReactHookFormTextField, ReactHookFormDateTime, ReactHookFormRadioGroup } from '@opengeoweb/form-fields';
 
@@ -486,12 +486,12 @@ function getContext() {
 
 const ReactReduxContext = /*#__PURE__*/getContext();
 
-/**
- * Hook factory, which creates a `useReduxContext` hook bound to a given context. This is a low-level
- * hook that you should usually not need to call directly.
- *
- * @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.
- * @returns {Function} A `useReduxContext` hook bound to the specified context.
+/**
+ * Hook factory, which creates a `useReduxContext` hook bound to a given context. This is a low-level
+ * hook that you should usually not need to call directly.
+ *
+ * @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.
+ * @returns {Function} A `useReduxContext` hook bound to the specified context.
  */
 function createReduxContextHook(context = ReactReduxContext) {
   return function useReduxContext() {
@@ -504,21 +504,21 @@ function createReduxContextHook(context = ReactReduxContext) {
     return contextValue;
   };
 }
-/**
- * A hook to access the value of the `ReactReduxContext`. This is a low-level
- * hook that you should usually not need to call directly.
- *
- * @returns {any} the value of the `ReactReduxContext`
- *
- * @example
- *
- * import React from 'react'
- * import { useReduxContext } from 'react-redux'
- *
- * export const CounterComponent = () => {
- *   const { store } = useReduxContext()
- *   return <div>{store.getState()}</div>
- * }
+/**
+ * A hook to access the value of the `ReactReduxContext`. This is a low-level
+ * hook that you should usually not need to call directly.
+ *
+ * @returns {any} the value of the `ReactReduxContext`
+ *
+ * @example
+ *
+ * import React from 'react'
+ * import { useReduxContext } from 'react-redux'
+ *
+ * export const CounterComponent = () => {
+ *   const { store } = useReduxContext()
+ *   return <div>{store.getState()}</div>
+ * }
  */
 
 const useReduxContext = /*#__PURE__*/createReduxContextHook();
@@ -533,11 +533,11 @@ const initializeUseSelector = fn => {
 };
 
 const refEquality = (a, b) => a === b;
-/**
- * Hook factory, which creates a `useSelector` hook bound to a given context.
- *
- * @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.
- * @returns {Function} A `useSelector` hook bound to the specified context.
+/**
+ * Hook factory, which creates a `useSelector` hook bound to a given context.
+ *
+ * @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.
+ * @returns {Function} A `useSelector` hook bound to the specified context.
  */
 
 
@@ -585,10 +585,21 @@ function createSelectorHook(context = ReactReduxContext) {
             const toCompare = selector(state);
 
             if (!equalityFn(selected, toCompare)) {
+              let stack = undefined;
+
+              try {
+                throw new Error();
+              } catch (e) {
+                ({
+                  stack
+                } = e);
+              }
+
               console.warn('Selector ' + (selector.name || 'unknown') + ' returned a different result when called with the same parameters. This can lead to unnecessary rerenders.' + '\nSelectors that return a new reference (such as an object or an array) should be memoized: https://redux.js.org/usage/deriving-data-selectors#optimizing-selectors-with-memoization', {
                 state,
                 selected,
-                selected2: toCompare
+                selected2: toCompare,
+                stack
               });
             }
           }
@@ -598,7 +609,19 @@ function createSelectorHook(context = ReactReduxContext) {
           if (finalNoopCheck === 'always' || finalNoopCheck === 'once' && firstRun.current) {
             // @ts-ignore
             if (selected === state) {
-              console.warn('Selector ' + (selector.name || 'unknown') + ' returned the root state when called. This can lead to unnecessary rerenders.' + '\nSelectors that return the entire state are almost certainly a mistake, as they will cause a rerender whenever *anything* in state changes.');
+              let stack = undefined;
+
+              try {
+                throw new Error();
+              } catch (e) {
+                ({
+                  stack
+                } = e);
+              }
+
+              console.warn('Selector ' + (selector.name || 'unknown') + ' returned the root state when called. This can lead to unnecessary rerenders.' + '\nSelectors that return the entire state are almost certainly a mistake, as they will cause a rerender whenever *anything* in state changes.', {
+                stack
+              });
             }
           }
 
@@ -614,28 +637,28 @@ function createSelectorHook(context = ReactReduxContext) {
     return selectedState;
   };
 }
-/**
- * A hook to access the redux store's state. This hook takes a selector function
- * as an argument. The selector is called with the store state.
- *
- * This hook takes an optional equality comparison function as the second parameter
- * that allows you to customize the way the selected state is compared to determine
- * whether the component needs to be re-rendered.
- *
- * @param {Function} selector the selector function
- * @param {Function=} equalityFn the function that will be used to determine equality
- *
- * @returns {any} the selected state
- *
- * @example
- *
- * import React from 'react'
- * import { useSelector } from 'react-redux'
- *
- * export const CounterComponent = () => {
- *   const counter = useSelector(state => state.counter)
- *   return <div>{counter}</div>
- * }
+/**
+ * A hook to access the redux store's state. This hook takes a selector function
+ * as an argument. The selector is called with the store state.
+ *
+ * This hook takes an optional equality comparison function as the second parameter
+ * that allows you to customize the way the selected state is compared to determine
+ * whether the component needs to be re-rendered.
+ *
+ * @param {Function} selector the selector function
+ * @param {Function=} equalityFn the function that will be used to determine equality
+ *
+ * @returns {any} the selected state
+ *
+ * @example
+ *
+ * import React from 'react'
+ * import { useSelector } from 'react-redux'
+ *
+ * export const CounterComponent = () => {
+ *   const counter = useSelector(state => state.counter)
+ *   return <div>{counter}</div>
+ * }
  */
 
 const useSelector = /*#__PURE__*/createSelectorHook();
@@ -1106,11 +1129,11 @@ reactIs_development.typeOf = typeOf;
 
 if (process.env.NODE_ENV === 'production') ;
 
-/**
- * Hook factory, which creates a `useStore` hook bound to a given context.
- *
- * @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.
- * @returns {Function} A `useStore` hook bound to the specified context.
+/**
+ * Hook factory, which creates a `useStore` hook bound to a given context.
+ *
+ * @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.
+ * @returns {Function} A `useStore` hook bound to the specified context.
  */
 
 function createStoreHook(context = ReactReduxContext) {
@@ -1125,29 +1148,29 @@ function createStoreHook(context = ReactReduxContext) {
     return store;
   };
 }
-/**
- * A hook to access the redux store.
- *
- * @returns {any} the redux store
- *
- * @example
- *
- * import React from 'react'
- * import { useStore } from 'react-redux'
- *
- * export const ExampleComponent = () => {
- *   const store = useStore()
- *   return <div>{store.getState()}</div>
- * }
+/**
+ * A hook to access the redux store.
+ *
+ * @returns {any} the redux store
+ *
+ * @example
+ *
+ * import React from 'react'
+ * import { useStore } from 'react-redux'
+ *
+ * export const ExampleComponent = () => {
+ *   const store = useStore()
+ *   return <div>{store.getState()}</div>
+ * }
  */
 
 const useStore = /*#__PURE__*/createStoreHook();
 
-/**
- * Hook factory, which creates a `useDispatch` hook bound to a given context.
- *
- * @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.
- * @returns {Function} A `useDispatch` hook bound to the specified context.
+/**
+ * Hook factory, which creates a `useDispatch` hook bound to a given context.
+ *
+ * @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.
+ * @returns {Function} A `useDispatch` hook bound to the specified context.
  */
 
 function createDispatchHook(context = ReactReduxContext) {
@@ -1159,26 +1182,26 @@ function createDispatchHook(context = ReactReduxContext) {
     return store.dispatch;
   };
 }
-/**
- * A hook to access the redux `dispatch` function.
- *
- * @returns {any|function} redux store's `dispatch` function
- *
- * @example
- *
- * import React, { useCallback } from 'react'
- * import { useDispatch } from 'react-redux'
- *
- * export const CounterComponent = ({ value }) => {
- *   const dispatch = useDispatch()
- *   const increaseCounter = useCallback(() => dispatch({ type: 'increase-counter' }), [])
- *   return (
- *     <div>
- *       <span>{value}</span>
- *       <button onClick={increaseCounter}>Increase counter</button>
- *     </div>
- *   )
- * }
+/**
+ * A hook to access the redux `dispatch` function.
+ *
+ * @returns {any|function} redux store's `dispatch` function
+ *
+ * @example
+ *
+ * import React, { useCallback } from 'react'
+ * import { useDispatch } from 'react-redux'
+ *
+ * export const CounterComponent = ({ value }) => {
+ *   const dispatch = useDispatch()
+ *   const increaseCounter = useCallback(() => dispatch({ type: 'increase-counter' }), [])
+ *   return (
+ *     <div>
+ *       <span>{value}</span>
+ *       <button onClick={increaseCounter}>Increase counter</button>
+ *     </div>
+ *   )
+ * }
  */
 
 const useDispatch = /*#__PURE__*/createDispatchHook();
@@ -1555,6 +1578,39 @@ function isPlainObject(value) {
     }
     return proto === baseProto;
 }
+// src/createAction.ts
+function createAction(type, prepareAction) {
+    function actionCreator() {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        if (prepareAction) {
+            var prepared = prepareAction.apply(void 0, args);
+            if (!prepared) {
+                throw new Error("prepareAction did not return an object");
+            }
+            return __spreadValues(__spreadValues({
+                type: type,
+                payload: prepared.payload
+            }, "meta" in prepared && { meta: prepared.meta }), "error" in prepared && { error: prepared.error });
+        }
+        return { type: type, payload: args[0] };
+    }
+    actionCreator.toString = function () { return "" + type; };
+    actionCreator.type = type;
+    actionCreator.match = function (action) { return action.type === type; };
+    return actionCreator;
+}
+function isAction(action) {
+    return isPlainObject(action) && "type" in action;
+}
+function isFSA(action) {
+    return isAction(action) && typeof action.type === "string" && Object.keys(action).every(isValidKey);
+}
+function isValidKey(key) {
+    return ["type", "payload", "error", "meta"].indexOf(key) > -1;
+}
 /** @class */ ((function (_super) {
     __extends(MiddlewareArray, _super);
     function MiddlewareArray() {
@@ -1637,39 +1693,6 @@ function freezeDraftable(val) {
 process.env.NODE_ENV === "production";
 // src/configureStore.ts
 process.env.NODE_ENV === "production";
-// src/createAction.ts
-function createAction(type, prepareAction) {
-    function actionCreator() {
-        var args = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            args[_i] = arguments[_i];
-        }
-        if (prepareAction) {
-            var prepared = prepareAction.apply(void 0, args);
-            if (!prepared) {
-                throw new Error("prepareAction did not return an object");
-            }
-            return __spreadValues(__spreadValues({
-                type: type,
-                payload: prepared.payload
-            }, "meta" in prepared && { meta: prepared.meta }), "error" in prepared && { error: prepared.error });
-        }
-        return { type: type, payload: args[0] };
-    }
-    actionCreator.toString = function () { return "" + type; };
-    actionCreator.type = type;
-    actionCreator.match = function (action) { return action.type === type; };
-    return actionCreator;
-}
-function isAction(action) {
-    return isPlainObject(action) && "type" in action;
-}
-function isFSA(action) {
-    return isAction(action) && typeof action.type === "string" && Object.keys(action).every(isValidKey);
-}
-function isValidKey(key) {
-    return ["type", "payload", "error", "meta"].indexOf(key) > -1;
-}
 // src/mapBuilders.ts
 function executeReducerBuilderCallback(builderCallback) {
     var actionsMap = {};
@@ -1686,8 +1709,11 @@ function executeReducerBuilderCallback(builderCallback) {
                 }
             }
             var type = typeof typeOrActionCreator === "string" ? typeOrActionCreator : typeOrActionCreator.type;
+            if (!type) {
+                throw new Error("`builder.addCase` cannot be called with an empty action type");
+            }
             if (type in actionsMap) {
-                throw new Error("addCase cannot be called with two reducers for the same action type");
+                throw new Error("`builder.addCase` cannot be called with two reducers for the same action type");
             }
             actionsMap[type] = reducer;
             return builder;
@@ -2439,9 +2465,9 @@ var drawAdapter = createEntityAdapter({
     return draw.drawingInstanceId;
   }
 });
-var initialState = drawAdapter.getInitialState();
-var slice = createSlice({
-  initialState: initialState,
+var initialState$1 = drawAdapter.getInitialState();
+var slice$1 = createSlice({
+  initialState: initialState$1,
   name: 'draw',
   reducers: {
     setDrawValues: function setDrawValues(draft, action) {
@@ -2474,8 +2500,8 @@ var slice = createSlice({
     });
   }
 });
-var reducer = slice.reducer;
-var drawActions = slice.actions;
+var reducer$1 = slice$1.reducer;
+var drawActions = slice$1.actions;
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -3215,6 +3241,25 @@ 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)
+ * */
+var DATE_FORMAT = 'dd/MM/yyyy HH:mm';
+var DATE_FORMAT_UTC = "yyyy-MM-dd'T'HH:mm:ss'Z'";
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -3232,11 +3277,19 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
 var NO_OBJECTS_FOUND = 'No objects found';
+var BUTTON_EDIT$1 = 'Edit';
+var BUTTON_DELETE$1 = 'Delete';
+var BUTTON_SHARE = 'Share';
+var BUTTON_AIRMET = 'AIRMET';
+var BUTTON_SIGMET = 'SIGMET';
+var BUTTON_PUBLIC_WARNING = 'PUBLIC WARNING';
+var MENU_SHARE = 'Share object to';
 var Objects = function Objects(_ref) {
   var objects = _ref.objects,
     onClickObject = _ref.onClickObject,
     onClickEdit = _ref.onClickEdit,
     onClickDelete = _ref.onClickDelete,
+    onClickShare = _ref.onClickShare,
     activeObject = _ref.activeObject,
     _ref$isLoading = _ref.isLoading,
     isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading;
@@ -3250,7 +3303,12 @@ var Objects = function Objects(_ref) {
       variant: "body1"
     }, NO_OBJECTS_FOUND);
   }
-  return /*#__PURE__*/React__default.createElement(List, null, objects.map(function (object) {
+  return /*#__PURE__*/React__default.createElement(List, {
+    sx: {
+      height: 'calc( 100% - 80px )',
+      overflow: 'auto'
+    }
+  }, objects.map(function (object) {
     var objectDate = dateUtils.isoStringToDate(object.lastUpdatedTime);
     var header = dateUtils.dateToString(objectDate, 'EEEE, MMMM dd', true);
     var isNewDay = !headerList.find(function (item) {
@@ -3263,56 +3321,88 @@ var Objects = function Objects(_ref) {
       key: object.id
     }, isNewDay && /*#__PURE__*/React__default.createElement(Typography, {
       sx: {
-        paddingLeft: '20px'
+        paddingLeft: 2.5,
+        opacity: 0.67
       },
       variant: "caption"
-    }, header), /*#__PURE__*/React__default.createElement(ListItem, Object.assign({
-      disablePadding: true
-    }, object.scope === 'user' && {
-      secondaryAction: /*#__PURE__*/React__default.createElement(ToggleMenu, {
+    }, header), /*#__PURE__*/React__default.createElement(ListItem, {
+      disablePadding: true,
+      sx: {
+        '& .MuiListItemSecondaryAction-root': {
+          right: '8px'
+        }
+      },
+      secondaryAction: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ToggleMenu, {
+        buttonSx: {
+          marginRight: object.scope === 'user' ? 1 : 4
+        },
+        buttonIcon: /*#__PURE__*/React__default.createElement(Share, null),
+        menuTitle: MENU_SHARE,
+        tooltipTitle: BUTTON_SHARE,
+        menuPosition: "bottom",
+        "aria-label": BUTTON_SHARE,
+        menuItems: [{
+          text: BUTTON_AIRMET,
+          action: function action() {},
+          icon: /*#__PURE__*/React__default.createElement(ExitDomain, null),
+          isDisabled: true
+        }, {
+          text: BUTTON_SIGMET,
+          action: function action() {},
+          icon: /*#__PURE__*/React__default.createElement(ExitDomain, null),
+          isDisabled: true
+        }, {
+          text: BUTTON_PUBLIC_WARNING,
+          action: function action() {
+            onClickShare(object);
+          },
+          icon: /*#__PURE__*/React__default.createElement(ExitDomain, null)
+        }]
+      }), object.scope === 'user' && /*#__PURE__*/React__default.createElement(ToggleMenu, {
         menuTitle: "Object options",
         tooltipTitle: "Object options",
         menuPosition: "bottom",
         "aria-label": "Options",
         menuItems: [{
-          text: 'Edit',
+          text: BUTTON_EDIT$1,
           action: function action() {
             onClickEdit(object.id);
           },
           icon: /*#__PURE__*/React__default.createElement(Edit, null)
         }, {
-          text: 'Delete',
+          text: BUTTON_DELETE$1,
           action: function action() {
             onClickDelete(object.id);
           },
           icon: /*#__PURE__*/React__default.createElement(Delete, null)
         }]
-      })
-    }), /*#__PURE__*/React__default.createElement(Paper, {
-      elevation: 1,
+      }))
+    }, /*#__PURE__*/React__default.createElement(Paper, {
+      elevation: 0,
       sx: {
         width: '100%',
-        margin: 0.5,
-        backgroundColor: 'geowebColors.background.surface'
+        margin: 0.25,
+        backgroundColor: 'geowebColors.background.surface',
+        border: 'solid 1px',
+        borderColor: 'geowebColors.cards.cardContainerBorder'
       }
     }, /*#__PURE__*/React__default.createElement(ListItemButton, {
       onClick: function onClick() {
         onClickObject(object);
-      }
-    }, activeObject === object.id && /*#__PURE__*/React__default.createElement(Box, {
-      sx: {
-        backgroundColor: 'geowebColors.captions.captionInformation.color',
-        width: '4px',
-        height: '100%',
-        position: 'absolute',
-        left: 0
       },
-      className: "active"
-    }), /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement(Typography, {
+      selected: activeObject === object.id,
+      sx: {
+        padding: 1,
+        height: '44px'
+      }
+    }, /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement(Typography, {
       variant: "caption"
-    }, object.scope === 'global' && 'Global: ', dateUtils.dateToString(objectDate, 'dd/MM/yyyy HH:ss', true), ' ', "UTC"), /*#__PURE__*/React__default.createElement(Typography, {
-      variant: "body2"
-    }, object.objectName))))));
+    }, object.objectName), /*#__PURE__*/React__default.createElement(Typography, {
+      variant: "caption",
+      sx: {
+        opacity: 0.67
+      }
+    }, object.scope === 'global' && 'Global: ', dateUtils.dateToString(objectDate, DATE_FORMAT, true), ' ', "UTC"))))));
   }));
 };
 
@@ -3328,6 +3418,7 @@ var DEFAULT_OBJECT_MANAGER_MIN_SIZE = {
   width: 160,
   height: 300
 };
+var BUTTON_ADD_OBJECT$1 = 'Add a new object';
 var ObjectManager = function ObjectManager(_ref) {
   var bounds = _ref.bounds,
     onClose = _ref.onClose,
@@ -3355,6 +3446,10 @@ var ObjectManager = function ObjectManager(_ref) {
     onEditDrawing = _ref$onEditDrawing === void 0 ? function () {} : _ref$onEditDrawing,
     _ref$onDeleteDrawing = _ref.onDeleteDrawing,
     onDeleteDrawing = _ref$onDeleteDrawing === void 0 ? function () {} : _ref$onDeleteDrawing,
+    _ref$onShareObject = _ref.onShareObject,
+    onShareObject = _ref$onShareObject === void 0 ? function () {} : _ref$onShareObject,
+    _ref$onCreateNewObjec = _ref.onCreateNewObject,
+    onCreateNewObject = _ref$onCreateNewObjec === void 0 ? function () {} : _ref$onCreateNewObjec,
     _ref$activeDrawingId = _ref.activeDrawingId,
     activeDrawingId = _ref$activeDrawingId === void 0 ? '' : _ref$activeDrawingId,
     error = _ref.error,
@@ -3397,6 +3492,12 @@ var ObjectManager = function ObjectManager(_ref) {
       if (dragSize !== sizeInState) {
         setSizeInState(dragSize);
       }
+    },
+    sx: {
+      footer: {
+        backgroundColor: 'inherit',
+        boxShadow: 'none'
+      }
     }
   }, isLoading && /*#__PURE__*/React.createElement(LinearProgress, {
     "data-testid": "loading-bar",
@@ -3414,9 +3515,28 @@ var ObjectManager = function ObjectManager(_ref) {
     onClickObject: onClickDrawing,
     onClickEdit: onEditDrawing,
     onClickDelete: onDeleteDrawing,
+    onClickShare: onShareObject,
     activeObject: activeDrawingId,
     isLoading: isLoading
-  }));
+  }), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      padding: '24px 8px 16px 8px',
+      position: 'absolute',
+      bottom: 0,
+      width: '100%',
+      backgroundColor: 'geowebColors.background.surfaceApp',
+      boxShadow: '0 2px 4px 0 rgba(0, 0, 0, 0.5)',
+      zIndex: 1
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "tertiary",
+    onClick: onCreateNewObject,
+    sx: {
+      width: '100%',
+      textTransform: 'none',
+      fontSize: '12px'
+    }
+  }, BUTTON_ADD_OBJECT$1)));
 };
 
 /* *
@@ -3573,6 +3693,63 @@ var ConfirmDeleteDialog = function ConfirmDeleteDialog(_ref) {
   }));
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * */
+var publicWarningDialogType = uiTypes.DialogTypes.PublicWarnings;
+
+/* *
+ * 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)
+ * */
+var initialState = {};
+var slice = createSlice({
+  initialState: initialState,
+  name: 'publicWarningForm',
+  reducers: {
+    setFormValues: function setFormValues(draft, action) {
+      draft.object = action.payload.object;
+    }
+  },
+  extraReducers: function extraReducers(builder) {
+    builder.addCase(uiActions.setToggleOpenDialog, function (draft, action) {
+      var _action$payload = action.payload,
+        type = _action$payload.type,
+        setOpen = _action$payload.setOpen;
+      if (type === publicWarningDialogType && setOpen === false) {
+        delete draft.object;
+      }
+    });
+  }
+});
+var reducer = slice.reducer;
+var publicWarningActions = slice.actions;
+
 var getDeleteSucces = function getDeleteSucces(objectName) {
   return "".concat(objectName, " has been deleted");
 };
@@ -3758,6 +3935,23 @@ var ObjectManagerConnect = function ObjectManagerConnect(_ref) {
   var onClose = function onClose() {
     closeObjectDialog();
   };
+  var onShareObject = function onShareObject(object) {
+    dispatch(publicWarningActions.setFormValues({
+      object: {
+        id: object.id,
+        lastUpdatedTime: object.lastUpdatedTime,
+        objectName: object.objectName
+      }
+    }));
+    dispatch(uiActions.setToggleOpenDialog({
+      setOpen: true,
+      type: publicWarningDialogType
+    }));
+  };
+  var onCreateNewObject = function onCreateNewObject() {
+    closeObjectDialog();
+    openDrawDialog();
+  };
   var onDeleteSuccess = function onDeleteSuccess(objectId, objectName) {
     // close confirm dialog
     setConfirmDialogOptions(undefined);
@@ -3799,6 +3993,8 @@ var ObjectManagerConnect = function ObjectManagerConnect(_ref) {
     onClickDrawing: onClickDrawing,
     onEditDrawing: onEditDrawing,
     onDeleteDrawing: onDeleteDrawing,
+    onShareObject: onShareObject,
+    onCreateNewObject: onCreateNewObject,
     activeDrawingId: activeDrawingId,
     error: uiError,
     isLoading: loading
@@ -4825,8 +5021,6 @@ var DrawingTool = function DrawingTool(_ref) {
     source = _ref$source === void 0 ? 'app' : _ref$source,
     _ref$isLoading = _ref.isLoading,
     isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
-    _ref$isDocked = _ref.isDocked,
-    isDocked = _ref$isDocked === void 0 ? false : _ref$isDocked,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? DERFAULT_DRAW_TOOL_SIZE : _ref$size,
     _ref$startPosition = _ref.startPosition,
@@ -4842,12 +5036,6 @@ var DrawingTool = function DrawingTool(_ref) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     sizeInState = _React$useState2[0],
     setSizeInState = _React$useState2[1];
-  React.useEffect(function () {
-    if (size !== sizeInState && isDocked && isOpen) {
-      setSizeInState(size);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [size, isOpen]);
   return /*#__PURE__*/React.createElement(ToolContainerDraggable, {
     title: title,
     startSize: sizeInState,
@@ -4874,21 +5062,6 @@ var DrawingTool = function DrawingTool(_ref) {
         boxShadow: 'none'
       }
     },
-    // TODO: Re-enable when we put back in the floating version when drawing tools become available: https://gitlab.com/opengeoweb/opengeoweb/-/issues/3872
-    // rightHeaderComponent={
-    //   <CustomIconButton
-    //     tooltipTitle={isDocked ? 'Undock' : 'Dock'}
-    //     data-testid="dockedBtn"
-    //     disableRipple
-    //     onClick={(): void => onToggleDock()}
-    //   >
-    //     {isDocked ? (
-    //       <CollapseWindow data-testid="dockedDrawingTool-collapse" />
-    //     ) : (
-    //       <ExpandWindow data-testid="dockedDrawingTool-uncollapse" />
-    //     )}
-    //   </CustomIconButton>
-    // }
     onResizeStop: function onResizeStop(_event, _direction, node) {
       var width = node.offsetWidth,
         height = node.offsetHeight;
@@ -22155,7 +22328,7 @@ var lodash = {exports: {}};
 
 var opacityOptions = [100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0];
 var getObjectName = function getObjectName(objectName) {
-  return objectName || "".concat(dateUtils.dateToString(new Date(), 'dd/MM/yyyy HH:mm', true), " UTC");
+  return objectName || "".concat(dateUtils.dateToString(new Date(), DATE_FORMAT, true), " UTC");
 };
 var SAVE_OBJECT_BUTTON = 'Save new object';
 var UPDATE_OBJECT_BUTTON = 'Update object';
@@ -22283,7 +22456,8 @@ var DrawingToolForm = function DrawingToolForm(_ref) {
       },
       "data-testid": mode.drawModeId,
       onKeyDown: onKeyDown,
-      disabled: isLoading
+      disabled: isLoading,
+      size: "medium"
     }, getIcon(mode.drawModeId));
   }), isInEditMode && /*#__PURE__*/React.createElement(Typography, {
     component: "span",
@@ -22359,7 +22533,8 @@ var DrawingToolForm = function DrawingToolForm(_ref) {
     onClick: onSubmit,
     sx: {
       width: '100%',
-      textTransform: 'none'
+      textTransform: 'none',
+      fontSize: '12px'
     },
     "data-testid": "saveDrawingFormButton",
     disabled: isLoading || hasErrors
@@ -22499,10 +22674,7 @@ var DrawingToolFormConnect = function DrawingToolFormConnect() {
  * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
-var getDialogType = function getDialogType(mapId, isMultiMap, isDocked) {
-  if (isDocked) {
-    return "".concat(uiTypes.DialogTypes.DockedDrawingTool, "-").concat(mapId);
-  }
+var getDialogType = function getDialogType(mapId, isMultiMap) {
   if (isMultiMap) {
     return "".concat(uiTypes.DialogTypes.DrawingTool, "-").concat(mapId);
   }
@@ -22518,15 +22690,13 @@ var DrawingToolConnect = function DrawingToolConnect(_ref) {
     initialMapId = _ref$mapId === void 0 ? null : _ref$mapId,
     _ref$isMultiMap = _ref.isMultiMap,
     isMultiMap = _ref$isMultiMap === void 0 ? false : _ref$isMultiMap,
-    _ref$isDocked = _ref.isDocked,
-    isDocked = _ref$isDocked === void 0 ? false : _ref$isDocked,
     _ref$source = _ref.source,
     source = _ref$source === void 0 ? 'app' : _ref$source;
-  var dialogType = getDialogType(initialMapId, isMultiMap, isDocked);
+  var dialogType = getDialogType(initialMapId, isMultiMap);
   var activeMapId = useSelector(function (store) {
     return uiSelectors.getDialogMapId(store, dialogType);
   });
-  // In case of a docked drawing toolbox or multimap, use the map id that is passed
+  // In case of a multimap, use the map id that is passed
   // For floating drawingtoolbox, use the currently active, selected mapid
   var mapId = initialMapId || activeMapId;
   var _useCloseDrawDialog = useCloseDrawDialog({
@@ -22541,29 +22711,6 @@ var DrawingToolConnect = function DrawingToolConnect(_ref) {
     uiSource = _useSetupDialog.uiSource,
     uiIsLoading = _useSetupDialog.uiIsLoading,
     setFocused = _useSetupDialog.setFocused;
-  // TODO: Re-enable when we put back in the floating version when drawing tools become available: https://gitlab.com/opengeoweb/opengeoweb/-/issues/3872
-  // const onToggleDock = (): void => {
-  //   onCloseDialog();
-  //   if (isDocked) {
-  //     // Close docked drawingtool and open the floating drawingtool
-  //     dispatch(
-  //       uiActions.setActiveMapIdForDialog({
-  //         type: uiTypes.DialogTypes.DrawingTool,
-  //         mapId,
-  //         setOpen: true,
-  //         source,
-  //       }),
-  //     );
-  //   } else {
-  //     // Close the floating drawingtool and open docked drawingtool
-  //     dispatch(
-  //       uiActions.setToggleOpenDialog({
-  //         type: `${uiTypes.DialogTypes.DockedDrawingTool}-${mapId}`,
-  //         setOpen: true,
-  //       }),
-  //     );
-  //   }
-  // };
   var shownTitle = showMapIdInTitle ? "".concat(title, " ").concat(mapId) : title;
   var onClose = function onClose() {
     closeDrawDialog();
@@ -22593,10 +22740,8 @@ var DrawingToolConnect = function DrawingToolConnect(_ref) {
     order: dialogOrder,
     source: uiSource,
     isLoading: uiIsLoading,
-    // onToggleDock={onToggleDock}
     setFocused: setFocused,
     headerSize: "xs",
-    isDocked: isDocked,
     startPosition: {
       top: 134,
       left: 50
@@ -22604,13 +22749,113 @@ var DrawingToolConnect = function DrawingToolConnect(_ref) {
   }, /*#__PURE__*/React.createElement(DrawingToolFormConnect, null));
 };
 
-var LABEL_DESCRIPTION_ORIGINAL = 'Description original';
-var LABEL_DESCRIPTION_TRANSLATION = 'Description translation';
-function a11yProps(index) {
-  return {
-    id: "tab-".concat(index),
-    'aria-controls': "tabpanel-".concat(index)
-  };
+var DEFAULT_WARNING_DIALOG_SIZE = {
+  width: 320,
+  height: 800
+};
+var DEFAULT_WARNING_DIALOG_POSITION = {
+  top: 8,
+  left: 60
+};
+var DEFAULT_WARNING_DIALOG_MIN_SIZE = {
+  width: 320,
+  height: 300
+};
+var DIALOG_TITLE = 'Public Warning';
+var PublicWarnings = function PublicWarnings(_ref) {
+  var bounds = _ref.bounds,
+    onClose = _ref.onClose,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? DIALOG_TITLE : _ref$title,
+    isOpen = _ref.isOpen,
+    _ref$onMouseDown = _ref.onMouseDown,
+    onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
+    _ref$order = _ref.order,
+    order = _ref$order === void 0 ? 0 : _ref$order,
+    _ref$source = _ref.source,
+    source = _ref$source === void 0 ? 'app' : _ref$source,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? DEFAULT_WARNING_DIALOG_SIZE : _ref$size,
+    _ref$startPosition = _ref.startPosition,
+    startPosition = _ref$startPosition === void 0 ? DEFAULT_WARNING_DIALOG_POSITION : _ref$startPosition,
+    _ref$setFocused = _ref.setFocused,
+    setFocused = _ref$setFocused === void 0 ? function () {} : _ref$setFocused,
+    _ref$headerSize = _ref.headerSize,
+    headerSize = _ref$headerSize === void 0 ? 'xs' : _ref$headerSize,
+    children = _ref.children;
+  var minSize = DEFAULT_WARNING_DIALOG_MIN_SIZE;
+  var startSizeCalc = calculateStartSize(minSize, size, startPosition);
+  var _React$useState = React.useState(startSizeCalc),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    sizeInState = _React$useState2[0],
+    setSizeInState = _React$useState2[1];
+  return /*#__PURE__*/React.createElement(ToolContainerDraggable, {
+    title: title,
+    startSize: sizeInState,
+    minWidth: minSize.width,
+    minHeight: minSize.height,
+    startPosition: startPosition,
+    isOpen: isOpen,
+    onClose: onClose,
+    headerSize: headerSize,
+    bounds: bounds,
+    onMouseDown: onMouseDown,
+    onFocus: function onFocus() {
+      return setFocused(true);
+    },
+    onBlur: function onBlur() {
+      return setFocused(false);
+    },
+    order: order,
+    source: source,
+    onResizeStop: function onResizeStop(_event, _direction, node) {
+      var width = node.offsetWidth,
+        height = node.offsetHeight;
+      setSizeInState({
+        width: width,
+        height: height
+      });
+    },
+    onDragEnd: function onDragEnd(_position, dragSize) {
+      if (dragSize !== sizeInState) {
+        setSizeInState(dragSize);
+      }
+    },
+    leftHeaderComponent: /*#__PURE__*/React.createElement("div", null),
+    rightHeaderComponent: /*#__PURE__*/React.createElement(Box, {
+      sx: {
+        flex: 1,
+        overflow: 'hidden',
+        display: 'flex',
+        justifyContent: 'flex-end',
+        position: 'absolute',
+        right: 32,
+        backgroundColor: 'geowebColors.background.surface',
+        height: 24,
+        paddingLeft: 1
+      }
+    }, /*#__PURE__*/React.createElement(Box, {
+      sx: {
+        position: 'relative',
+        top: -7
+      }
+    }, /*#__PURE__*/React.createElement(SwitchButton, null))),
+    sx: {
+      footer: {
+        backgroundColor: 'inherit',
+        boxShadow: 'none'
+      }
+    }
+  }, children);
+};
+
+var LABEL_DESCRIPTION_ORIGINAL = 'Description original';
+var LABEL_DESCRIPTION_TRANSLATION = 'Description translation';
+function a11yProps(index) {
+  return {
+    id: "tab-".concat(index),
+    'aria-controls': "tabpanel-".concat(index)
+  };
 }
 var tabStyle = {
   width: '50%',
@@ -22636,7 +22881,8 @@ var CustomTabPanel = function CustomTabPanel(props) {
     sx: {
       position: 'absolute',
       zIndex: 1,
-      width: 122,
+      width: '50%',
+      maxWidth: '360px',
       paddingLeft: 1.5,
       '.MuiInputBase-root': {
         marginTop: 0,
@@ -22717,6 +22963,10 @@ var BUTTON_DELETE = 'Delete';
 var BUTTON_VIEW = 'View';
 var BUTTON_EDIT = 'Edit';
 var OBJECTS_MENU = 'Object options';
+var NO_OBJECT = 'No object selected';
+var formatDate = function formatDate(lastUpdatedTime) {
+  return dateUtils.dateToString(dateUtils.isoStringToDate(lastUpdatedTime), "".concat(DATE_FORMAT, " 'UTC'"));
+};
 var AreaField = function AreaField(_ref) {
   var _ref$onEditObject = _ref.onEditObject,
     onEditObject = _ref$onEditObject === void 0 ? function () {} : _ref$onEditObject,
@@ -22727,7 +22977,13 @@ var AreaField = function AreaField(_ref) {
     _ref$onAddObject = _ref.onAddObject,
     onAddObject = _ref$onAddObject === void 0 ? function () {} : _ref$onAddObject,
     _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled;
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$id = _ref.id,
+    id = _ref$id === void 0 ? '' : _ref$id,
+    _ref$lastUpdatedTime = _ref.lastUpdatedTime,
+    lastUpdatedTime = _ref$lastUpdatedTime === void 0 ? '' : _ref$lastUpdatedTime,
+    _ref$objectName = _ref.objectName,
+    objectName = _ref$objectName === void 0 ? NO_OBJECT : _ref$objectName;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Typography, {
     variant: "h3",
     color: "text.secondary",
@@ -22754,11 +23010,12 @@ var AreaField = function AreaField(_ref) {
       fontSize: '0.75rem',
       fontWeight: 'normal',
       lineHeight: 1.83
-    }
-  }, "Object name"), /*#__PURE__*/React__default.createElement(Typography, {
+    },
+    role: "heading"
+  }, objectName), /*#__PURE__*/React__default.createElement(Typography, {
     variant: "body2",
     color: "text.secondary"
-  }, "09/01/2023 21:00 UTC"), /*#__PURE__*/React__default.createElement(ToggleMenu, {
+  }, lastUpdatedTime ? formatDate(lastUpdatedTime) : ''), id ? /*#__PURE__*/React__default.createElement(ToggleMenu, {
     menuTitle: OBJECTS_MENU,
     tooltipTitle: OBJECTS_MENU,
     buttonSx: {
@@ -22784,7 +23041,9 @@ var AreaField = function AreaField(_ref) {
       action: onDeleteObject,
       icon: /*#__PURE__*/React__default.createElement(Delete, null)
     }]
-  }))), /*#__PURE__*/React__default.createElement(Button, {
+  }) : null)), /*#__PURE__*/React__default.createElement(ReactHookFormHiddenInput, {
+    name: "objectId"
+  }), /*#__PURE__*/React__default.createElement(Button, {
     sx: {
       marginTop: 1
     },
@@ -22796,6 +23055,23 @@ var AreaField = function AreaField(_ref) {
   }, BUTTON_ADD_OBJECT));
 };
 
+var getEmptyPublicWarning = function getEmptyPublicWarning(object) {
+  var currentTime = new Date();
+  var validToTime = dateUtils.add(currentTime, {
+    hours: 6
+  });
+  return {
+    phenomenon: '',
+    validFrom: dateUtils.dateToString(currentTime, DATE_FORMAT_UTC, true),
+    validUntil: dateUtils.dateToString(validToTime, DATE_FORMAT_UTC, true),
+    leadtime: LABEL_CURRENT,
+    level: '',
+    probability: 30,
+    descriptionOriginal: '',
+    descriptionTranslation: '',
+    objectId: (object === null || object === void 0 ? void 0 : object.id) || ''
+  };
+};
 // tablet breakpoint - 2 padding * 2 for both sides
 var containerQueryBreakpoint = "@container (min-width: ".concat(breakpoints.tablet - 32, "px)");
 var LABEL_PHENOMENON = 'Phenomenon';
@@ -22805,10 +23081,57 @@ var LABEL_CURRENT = 'Current';
 var LABEL_EARLY = 'Early';
 var LABEL_LEVEL = 'Level';
 var LABEL_PROBABILITY = 'Probability';
-var BUTTON_CANCEL = 'Cancel';
+var BUTTON_CLEAR = 'Clear';
 var BUTTON_SAVE = 'Save';
 var BUTTON_PUBLISH = 'Publish';
 var dateFormat = 'DD/MM/YYYY HH:mm';
+var probablityOptions = [100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0];
+var levelOptions = [{
+  title: 'Moderate',
+  key: 'moderate',
+  color: '#FAE21E'
+}, {
+  title: 'Severe',
+  key: 'severe',
+  color: '#E27000'
+}, {
+  title: 'Extreme',
+  key: 'extreme',
+  color: '#D62A20'
+}];
+var warningPhenomena = [{
+  title: 'Coastal event',
+  key: 'coastalEvent',
+  icon: /*#__PURE__*/React.createElement(CoastalEvent, null)
+}, {
+  title: 'Fog',
+  key: 'fog',
+  icon: /*#__PURE__*/React.createElement(Fog, null)
+}, {
+  title: 'High temperature',
+  key: 'highTemp',
+  icon: /*#__PURE__*/React.createElement(TemperatureHigh, null)
+}, {
+  title: 'Low temperature',
+  key: 'lowTemp',
+  icon: /*#__PURE__*/React.createElement(TemperatureLow, null)
+}, {
+  title: 'Rain',
+  key: 'rain',
+  icon: /*#__PURE__*/React.createElement(Rain, null)
+}, {
+  title: 'Snow/ice',
+  key: 'snowIce',
+  icon: /*#__PURE__*/React.createElement(Snow, null)
+}, {
+  title: 'Thunderstorm',
+  key: 'thunderstorm',
+  icon: /*#__PURE__*/React.createElement(Lightning, null)
+}, {
+  title: 'Wind',
+  key: 'wind',
+  icon: /*#__PURE__*/React.createElement(Wind, null)
+}];
 var ContainerWrapper = styled('div')(function () {
   return {
     containerType: 'size',
@@ -22846,7 +23169,14 @@ var ContainerGrid = styled('div')(function (_ref3) {
 });
 var Form = function Form(_ref5) {
   var _ref5$isDisabled = _ref5.isDisabled,
-    isDisabled = _ref5$isDisabled === void 0 ? false : _ref5$isDisabled;
+    isDisabled = _ref5$isDisabled === void 0 ? false : _ref5$isDisabled,
+    object = _ref5.object;
+  var _useFormContext = useFormContext(),
+    watch = _useFormContext.watch;
+  var selectedLevel = watch('level');
+  var levelDetails = levelOptions.find(function (level) {
+    return level.key === selectedLevel;
+  });
   return /*#__PURE__*/React.createElement(ContainerWrapper, null, /*#__PURE__*/React.createElement(ContainerFormWrapper, null, /*#__PURE__*/React.createElement(ContainerGrid, null, /*#__PURE__*/React.createElement(Grid, {
     container: true,
     rowSpacing: 2
@@ -22857,9 +23187,19 @@ var Form = function Form(_ref5) {
     name: "phenomenon",
     label: LABEL_PHENOMENON,
     rules: {}
-  }, /*#__PURE__*/React.createElement(MenuItem, {
-    value: "undefined"
-  }, "(undefined)"))), /*#__PURE__*/React.createElement(Grid, {
+  }, warningPhenomena.map(function (phenomenon) {
+    return /*#__PURE__*/React.createElement(MenuItem, {
+      key: phenomenon.key,
+      value: phenomenon.key
+    }, /*#__PURE__*/React.createElement(Grid, {
+      container: true,
+      justifyContent: "space-between"
+    }, /*#__PURE__*/React.createElement(Grid, {
+      item: true
+    }, phenomenon.title), /*#__PURE__*/React.createElement(Grid, {
+      item: true
+    }, /*#__PURE__*/React.createElement(ListItemIcon, null, phenomenon.icon))));
+  }))), /*#__PURE__*/React.createElement(Grid, {
     item: true,
     xs: 12
   }, /*#__PURE__*/React.createElement(Grid, {
@@ -22870,7 +23210,10 @@ var Form = function Form(_ref5) {
     onEditObject: function onEditObject() {},
     onViewObject: function onViewObject() {},
     onDeleteObject: function onDeleteObject() {},
-    onAddObject: function onAddObject() {}
+    onAddObject: function onAddObject() {},
+    id: object === null || object === void 0 ? void 0 : object.id,
+    objectName: object === null || object === void 0 ? void 0 : object.objectName,
+    lastUpdatedTime: object === null || object === void 0 ? void 0 : object.lastUpdatedTime
   }))), /*#__PURE__*/React.createElement(Grid, {
     item: true,
     xs: 12,
@@ -22947,20 +23290,53 @@ var Form = function Form(_ref5) {
   }, /*#__PURE__*/React.createElement(ReactHookFormSelect, {
     name: "level",
     label: LABEL_LEVEL,
-    rules: {}
-  }, /*#__PURE__*/React.createElement(MenuItem, {
-    value: "undefined"
-  }, "(undefined)"))), /*#__PURE__*/React.createElement(Grid, {
+    rules: {},
+    sx: {
+      '& .MuiSelect-select.MuiSelect-filled': {
+        backgroundColor: (levelDetails === null || levelDetails === void 0 ? void 0 : levelDetails.color) || 'none',
+        backgroundClip: 'content-box'
+      }
+    }
+  }, levelOptions.map(function (level) {
+    return /*#__PURE__*/React.createElement(MenuItem, {
+      value: level.key,
+      key: level.key,
+      sx: {
+        '&.MuiMenuItem-root ': {
+          background: level.color,
+          backgroundClip: 'content-box',
+          '&:hover': {
+            backgroundColor: "".concat(level.color),
+            backgroundClip: 'content-box',
+            boxShadow: function boxShadow(theme) {
+              return "inset -16px -6px ".concat(theme.palette.geowebColors.cards.cardContainerMouseOver, ", inset 16px 6px ").concat(theme.palette.geowebColors.cards.cardContainerMouseOver);
+            }
+          },
+          '&.Mui-selected': {
+            backgroundColor: "".concat(level.color),
+            '&:hover': {
+              boxShadow: function boxShadow(theme) {
+                return "inset 4px 0px 0px 0px ".concat(theme.palette.geowebColors.typographyAndIcons.iconLinkActive, ", inset -16px -6px ").concat(theme.palette.geowebColors.cards.cardContainerMouseOver, ", inset 16px 6px ").concat(theme.palette.geowebColors.cards.cardContainerMouseOver);
+              }
+            }
+          }
+        }
+      }
+    }, "\xA0", level.title);
+  }))), /*#__PURE__*/React.createElement(Grid, {
     item: true,
     xs: 12,
     sm: 6
   }, /*#__PURE__*/React.createElement(ReactHookFormSelect, {
-    name: "probabilty",
+    name: "probability",
     label: LABEL_PROBABILITY,
     rules: {}
-  }, /*#__PURE__*/React.createElement(MenuItem, {
-    value: "undefined"
-  }, "(undefined)")))), /*#__PURE__*/React.createElement(Grid, {
+  }, probablityOptions.map(function (probability) {
+    return /*#__PURE__*/React.createElement(MenuItem, {
+      value: probability,
+      key: probability
+    }, probability, " %");
+  })))), /*#__PURE__*/React.createElement(Grid, {
     item: true,
     xs: 12,
     container: true,
@@ -22992,7 +23368,7 @@ var Form = function Form(_ref5) {
       marginBottom: 1
     },
     disabled: isDisabled
-  }, BUTTON_CANCEL)), /*#__PURE__*/React.createElement(Grid, {
+  }, BUTTON_CLEAR)), /*#__PURE__*/React.createElement(Grid, {
     item: true,
     xs: 12,
     sm: 4
@@ -23016,108 +23392,66 @@ var Form = function Form(_ref5) {
   }, BUTTON_PUBLISH))))));
 };
 var PublicWarningsForm = function PublicWarningsForm(props) {
-  return /*#__PURE__*/React.createElement(ReactHookFormProvider, null, /*#__PURE__*/React.createElement(Form, Object.assign({}, props)));
+  var object = props.object,
+    publicWarningDetails = props.publicWarningDetails;
+  var publicWarningFormData = publicWarningDetails || getEmptyPublicWarning(object);
+  return /*#__PURE__*/React.createElement(ReactHookFormProvider, {
+    options: Object.assign(Object.assign({}, defaultFormOptions), {
+      defaultValues: publicWarningFormData
+    })
+  }, /*#__PURE__*/React.createElement(Form, Object.assign({}, props)));
 };
 
-var DEFAULT_WARNING_DIALOG_SIZE = {
-  width: 320,
-  height: 800
-};
-var DEFAULT_WARNING_DIALOG_POSITION = {
-  top: 8,
-  left: 60
-};
-var DEFAULT_WARNING_DIALOG_MIN_SIZE = {
-  width: 320,
-  height: 300
+/* *
+ * 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)
+ * */
+var getPublicWarningStore = function getPublicWarningStore(store) {
+  if (store && store.publicWarningForm) {
+    return store.publicWarningForm;
+  }
+  return null;
 };
-var DIALOG_TITLE = 'Public Warning';
-var PublicWarnings = function PublicWarnings(_ref) {
-  var bounds = _ref.bounds,
-    onClose = _ref.onClose,
-    _ref$title = _ref.title,
-    title = _ref$title === void 0 ? DIALOG_TITLE : _ref$title,
-    isOpen = _ref.isOpen,
-    _ref$onMouseDown = _ref.onMouseDown,
-    onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
-    _ref$order = _ref.order,
-    order = _ref$order === void 0 ? 0 : _ref$order,
-    _ref$source = _ref.source,
-    source = _ref$source === void 0 ? 'app' : _ref$source,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? DEFAULT_WARNING_DIALOG_SIZE : _ref$size,
-    _ref$startPosition = _ref.startPosition,
-    startPosition = _ref$startPosition === void 0 ? DEFAULT_WARNING_DIALOG_POSITION : _ref$startPosition,
-    _ref$setFocused = _ref.setFocused,
-    setFocused = _ref$setFocused === void 0 ? function () {} : _ref$setFocused,
-    _ref$headerSize = _ref.headerSize,
-    headerSize = _ref$headerSize === void 0 ? 'xs' : _ref$headerSize;
-  var minSize = DEFAULT_WARNING_DIALOG_MIN_SIZE;
-  var startSizeCalc = calculateStartSize(minSize, size, startPosition);
-  var _React$useState = React.useState(startSizeCalc),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    sizeInState = _React$useState2[0],
-    setSizeInState = _React$useState2[1];
-  return /*#__PURE__*/React.createElement(ToolContainerDraggable, {
-    title: title,
-    startSize: sizeInState,
-    minWidth: minSize.width,
-    minHeight: minSize.height,
-    startPosition: startPosition,
-    isOpen: isOpen,
-    onClose: onClose,
-    headerSize: headerSize,
-    bounds: bounds,
-    onMouseDown: onMouseDown,
-    onFocus: function onFocus() {
-      return setFocused(true);
-    },
-    onBlur: function onBlur() {
-      return setFocused(false);
-    },
-    order: order,
-    source: source,
-    onResizeStop: function onResizeStop(_event, _direction, node) {
-      var width = node.offsetWidth,
-        height = node.offsetHeight;
-      setSizeInState({
-        width: width,
-        height: height
-      });
-    },
-    onDragEnd: function onDragEnd(_position, dragSize) {
-      if (dragSize !== sizeInState) {
-        setSizeInState(dragSize);
-      }
-    },
-    leftHeaderComponent: /*#__PURE__*/React.createElement("div", null),
-    rightHeaderComponent: /*#__PURE__*/React.createElement(Box, {
-      sx: {
-        flex: 1,
-        overflow: 'hidden',
-        display: 'flex',
-        justifyContent: 'flex-end',
-        position: 'absolute',
-        right: 32,
-        backgroundColor: 'geowebColors.background.surface',
-        height: 24,
-        paddingLeft: 1
-      }
-    }, /*#__PURE__*/React.createElement(Box, {
-      sx: {
-        position: 'relative',
-        top: -7
-      }
-    }, /*#__PURE__*/React.createElement(SwitchButton, null))),
-    sx: {
-      footer: {
-        backgroundColor: 'inherit',
-        boxShadow: 'none'
-      }
-    }
-  }, /*#__PURE__*/React.createElement(PublicWarningsForm, {
-    isDisabled: true
-  }));
+var getPublicWarningObject = createSelector(getPublicWarningStore, function (publicWarningStore) {
+  return publicWarningStore.object;
+});
+
+/* *
+ * 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)
+ * */
+var PublicWarningsFormConnect = function PublicWarningsFormConnect() {
+  var publicWarningObject = useSelector(function (store) {
+    return getPublicWarningObject(store);
+  });
+  return /*#__PURE__*/React.createElement(PublicWarningsForm, {
+    isDisabled: true,
+    object: publicWarningObject
+  });
 };
 
 /* *
@@ -23136,7 +23470,6 @@ var PublicWarnings = function PublicWarnings(_ref) {
  * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
-var publicWarningDialogType = uiTypes.DialogTypes.PublicWarnings;
 var PublicWarningsConnect = function PublicWarningsConnect(_ref) {
   var bounds = _ref.bounds,
     _ref$source = _ref.source,
@@ -23159,7 +23492,7 @@ var PublicWarningsConnect = function PublicWarningsConnect(_ref) {
     source: uiSource,
     bounds: bounds,
     startPosition: startPosition
-  });
+  }, /*#__PURE__*/React__default.createElement(PublicWarningsFormConnect, null));
 };
 
 var createSymbol = function createSymbol(name) {
@@ -23729,9 +24062,10 @@ function drawingSaga() {
 var drawingModuleConfig = {
   id: 'drawing-module',
   reducersMap: {
-    drawings: reducer
+    drawings: reducer$1,
+    publicWarningForm: reducer
   },
   sagas: [drawingSaga]
 };
 
-export { DIALOG_TITLE, DrawingToolConnect, Wrapper as DrawingToolForm, DrawingToolFormConnect, DrawingToolMapButtonConnect, ObjectManagerConnect, ObjectManagerMapButtonConnect, PublicWarnings, PublicWarningsConnect, WarningsModuleProvider, drawingModuleConfig, publicWarningDialogType, useObjectDrawDialogAction };
+export { DIALOG_TITLE, DrawingToolConnect, Wrapper as DrawingToolForm, DrawingToolFormConnect, DrawingToolMapButtonConnect, ObjectManagerConnect, ObjectManagerMapButtonConnect, PublicWarnings, PublicWarningsConnect, WarningsModuleProvider, drawingModuleConfig, useObjectDrawDialogAction };