@opengeoweb/shared 19.6.1 → 20.0.0

package/dist/index.esm.js

@@ -1,14 +1,17 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Box, Typography, useTheme, Tooltip, IconButton, Menu, ListSubheader, MenuItem, Grid, ListItemText, ListItemIcon, FormControlLabel, Radio, DialogTitle, Button, Dialog, DialogContent, DialogActions, Paper, CircularProgress, Alert, AlertTitle, Drawer, Link, Avatar as Avatar$1, ClickAwayListener, MenuList, RadioGroup, Portal, List, ListItem, Tabs, Tab, Backdrop, Slider, ToggleButton, styled, Select, Accordion, AccordionSummary, AccordionDetails, FormLabel, Switch, TextField, InputAdornment, Chip, Stack, debounce as debounce$1, ListItemButton, Checkbox } from '@mui/material';
+import { Box, Typography, useTheme, Tooltip, IconButton, Menu, ListSubheader, MenuItem, Grid, FormControlLabel, Radio, ListItemText, ListItemIcon, DialogTitle, Button, Dialog, DialogContent, DialogActions, Paper, CircularProgress, Alert, AlertTitle, Drawer, Link, Avatar as Avatar$1, ClickAwayListener, MenuList, RadioGroup, Portal, List, ListItem, Tabs, Tab, Backdrop, Slider, ToggleButton, styled, Select, Accordion, AccordionSummary, AccordionDetails, FormLabel, Switch, TextField, InputAdornment, Chip, Stack, debounce as debounce$1, ListItemButton, Checkbox, FormControl, InputLabel, FilledInput } from '@mui/material';
 import 'i18next';
 import { initReactI18next, useTranslation } from 'react-i18next';
 import React, { useRef, useEffect, useState, Component } from 'react';
 import Draggable from 'react-draggable';
 import { Resizable } from 're-resizable';
-import { Resize, BORDER_RADIUS, Options, ChevronUp, ChevronDown, Close, ChevronLeft, Exclamation, Success, Info, ChevronRight, GeoWebLogo, HamburgerMenu, Admin, useThemeContext, ThemeTypes, ArrowLeft, ArrowRight, KeyOption, ArrowUp, ArrowDown, KeyCommand, Search, Clear, Cached, Filter as Filter$1, Menu as Menu$1 } from '@opengeoweb/theme';
+import { Resize, BORDER_RADIUS, Options, Close, ChevronLeft, Exclamation, Success, Info, ChevronRight, GeoWebLogo, HamburgerMenu, Admin, useThemeContext, ThemeTypes, ArrowLeft, ArrowRight, KeyOption, ArrowUp, ArrowDown, KeyCommand, ChevronDown, Search, Clear, Cached, Filter as Filter$1, Menu as Menu$1, CalendarToday } from '@opengeoweb/theme';
 import { throttle, isEqual, merge, escapeRegExp, debounce } from 'lodash';
-import { add as add$1, startOfDay, addMinutes, addHours, format, differenceInDays as differenceInDays$1, differenceInHours as differenceInHours$1, differenceInMinutes as differenceInMinutes$1, differenceInMonths as differenceInMonths$1, differenceInSeconds as differenceInSeconds$1, differenceInYears as differenceInYears$1, fromUnixTime, getHours as getHours$1, isAfter as isAfter$1, isBefore as isBefore$1, isEqual as isEqual$1, isValid as isValid$1, parseISO, roundToNearestMinutes as roundToNearestMinutes$1, set as set$1, setSeconds as setSeconds$1, parse, sub as sub$1, getUnixTime, getDay, getDayOfYear, getMonth, getWeek, getYear, isWithinInterval } from 'date-fns';
+import { add as add$1, addMinutes, addHours, format, differenceInDays as differenceInDays$1, differenceInHours as differenceInHours$1, differenceInMinutes as differenceInMinutes$1, differenceInMonths as differenceInMonths$1, differenceInSeconds as differenceInSeconds$1, differenceInYears as differenceInYears$1, fromUnixTime, getHours as getHours$1, isAfter as isAfter$1, isBefore as isBefore$1, isEqual as isEqual$1, isValid as isValid$1, parseISO, roundToNearestMinutes as roundToNearestMinutes$1, set as set$1, setSeconds as setSeconds$1, parse, sub as sub$1, getUnixTime, getDay, getDayOfYear, getMonth, getWeek, getYear, isWithinInterval, startOfDay } from 'date-fns';
 import { fi as fi$1, nl as nl$1, nb, enGB } from 'date-fns/locale';
+import { DateTimePicker as DateTimePicker$1 } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 
 var en = {
 	"shared-choose-app-mode": "Choose your default app mode",
@@ -462,7 +465,7 @@ function _unsupportedIterableToArray(r, a) {
   }
 }
 
-var _excluded$e = ["content", "color", "icon", "sx"];
+var _excluded$f = ["content", "color", "icon", "sx"];
 var bgColors = {
   green: 'geowebColors.functional.successOutline.fill',
   grey: 'geowebColors.functional.disabledOutline.fill',
@@ -503,7 +506,7 @@ var StatusTag = function StatusTag(_ref) {
     color = _ref.color,
     icon = _ref.icon,
     sx = _ref.sx;
-    _objectWithoutPropertiesLoose(_ref, _excluded$e);
+    _objectWithoutPropertiesLoose(_ref, _excluded$f);
   return jsxs(Box, {
     className: "statusTag",
     "data-testid": "statusTag",
@@ -577,14 +580,14 @@ var useSharedTranslation = function useSharedTranslation() {
   return useTranslation([SHARED_NAMESPACE]);
 };
 
-var _excluded$d = ["bounds", "setIsDragging", "children", "onStop"];
+var _excluded$e = ["bounds", "setIsDragging", "children", "onStop"];
 var DraggableComponent$1 = function DraggableComponent(_ref) {
   var _ref$bounds = _ref.bounds,
     bounds = _ref$bounds === void 0 ? 'body' : _ref$bounds,
     setIsDragging = _ref.setIsDragging,
     children = _ref.children,
     onStop = _ref.onStop,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
   var onDragStart = function onDragStart(e) {
     // This makes sure that nothing is selected during drag
     setIsDragging == null || setIsDragging(true);
@@ -609,7 +612,7 @@ var DraggableComponent$1 = function DraggableComponent(_ref) {
   }));
 };
 
-var _excluded$c = ["children", "onResizeStart", "onResizeStop", "size", "setSize", "minHeight", "minWidth", "enable", "nodeRef"];
+var _excluded$d = ["children", "onResizeStart", "onResizeStop", "size", "setSize", "minHeight", "minWidth", "enable", "nodeRef"];
 var isDraggingClassName = 'is-dragging';
 var useBoundsProps = function useBoundsProps(nodeRef) {
   var _React$useState = React.useState({}),
@@ -652,7 +655,7 @@ var ResizeComponent = function ResizeComponent(_ref) {
       topLeft: true
     } : _ref$enable,
     nodeRef = _ref.nodeRef,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
   var theme = useTheme();
   var onStartResize = React.useCallback(function (event, _direction, node) {
     event.stopPropagation();
@@ -747,7 +750,7 @@ var CustomTooltip = function CustomTooltip(props) {
   }));
 };
 
-var _excluded$b = ["tooltipTitle", "variant", "isSelected", "shouldShowAsDisabled", "size", "children", "className", "tooltipProps", "shouldShowExtraOptionsIndicator", "optionsActive"];
+var _excluded$c = ["tooltipTitle", "variant", "isSelected", "shouldShowAsDisabled", "size", "children", "className", "tooltipProps", "shouldShowExtraOptionsIndicator", "optionsActive"];
 var CustomIconButtonNoMemo = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _defaultTooltipProps$;
   var _ref$tooltipTitle = _ref.tooltipTitle,
@@ -767,7 +770,7 @@ var CustomIconButtonNoMemo = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     shouldShowExtraOptionsIndicator = _ref$shouldShowExtraO === void 0 ? false : _ref$shouldShowExtraO,
     _ref$optionsActive = _ref.optionsActive,
     optionsActive = _ref$optionsActive === void 0 ? false : _ref$optionsActive,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   var classNames = [].concat(className ? [className] : [], isSelected ? ['Mui-selected'] : [], [variant]).join(' ');
   var tooltipTitle = (_defaultTooltipProps$ = defaultTooltipProps == null ? void 0 : defaultTooltipProps.title) != null ? _defaultTooltipProps$ : defaultTooltipTitle;
   var tooltipProps = React.useMemo(function () {
@@ -882,9 +885,6 @@ var ToggleMenu = function ToggleMenu(_ref) {
   var _React$useState = React.useState(null),
     anchorEl = _React$useState[0],
     setAnchorEl = _React$useState[1];
-  var _React$useState2 = React.useState({}),
-    expandedSubMenus = _React$useState2[0],
-    setExpandedSubMenus = _React$useState2[1];
   var isOpen = Boolean(anchorEl);
   var _getPosition = getPosition(menuPosition),
     anchorOrigin = _getPosition.anchorOrigin,
@@ -896,71 +896,16 @@ var ToggleMenu = function ToggleMenu(_ref) {
   var handleClose = function handleClose(event) {
     event.stopPropagation();
     setAnchorEl(null);
-    setExpandedSubMenus({});
   };
-  var toggleSubMenu = function toggleSubMenu(menuText) {
-    setExpandedSubMenus(function (currentExpandedSubMenus) {
-      var _Object$assign;
-      return Object.assign({}, currentExpandedSubMenus, (_Object$assign = {}, _Object$assign[menuText] = !currentExpandedSubMenus[menuText], _Object$assign));
-    });
-  };
-  var _renderMenuItems = function renderMenuItems(items, nestingLevel) {
-    if (nestingLevel === void 0) {
-      nestingLevel = 0;
-    }
+  var renderMenuItems = function renderMenuItems(items) {
     return items.map(function (menuItem) {
       var text = menuItem.text,
         icon = menuItem.icon,
         action = menuItem.action,
         isDisabled = menuItem.isDisabled,
         isSelected = menuItem.isSelected,
-        controlType = menuItem.controlType,
-        subMenuItems = menuItem.subMenuItems;
-      var hasSubMenuItems = Boolean(subMenuItems == null ? void 0 : subMenuItems.length);
+        controlType = menuItem.controlType;
       var isRadioControl = controlType === 'radio';
-      if (hasSubMenuItems) {
-        var isExpanded = Boolean(expandedSubMenus[text]);
-        return jsxs(React.Fragment, {
-          children: [jsx(MenuItem, {
-            "aria-expanded": isExpanded,
-            disabled: isDisabled,
-            onClick: function onClick(event) {
-              event.stopPropagation();
-              toggleSubMenu(text);
-            },
-            sx: nestingLevel > 0 ? {
-              pl: 2 + nestingLevel * 2
-            } : undefined,
-            children: jsxs(Grid, {
-              container: true,
-              size: "grow",
-              spacing: 2,
-              sx: {
-                justifyContent: 'space-between'
-              },
-              children: [jsx(Grid, {
-                children: jsx(ListItemText, {
-                  children: text
-                })
-              }), jsx(Grid, {
-                sx: {
-                  alignItems: 'flex-end'
-                },
-                children: jsx(ListItemIcon, {
-                  sx: {
-                    '&.MuiListItemIcon-root': {
-                      minWidth: '24px'
-                    }
-                  },
-                  children: isExpanded ? jsx(ChevronUp, {}) : jsx(ChevronDown, {})
-                })
-              })]
-            })
-          }), isExpanded ? jsx(Box, {
-            children: _renderMenuItems(subMenuItems, nestingLevel + 1)
-          }) : null]
-        }, text);
-      }
       return jsx(MenuItem, {
         disabled: isDisabled,
         onClick: function onClick(event) {
@@ -968,13 +913,10 @@ var ToggleMenu = function ToggleMenu(_ref) {
           handleClose(event);
         },
         selected: !isRadioControl && isSelected,
-        sx: nestingLevel > 0 ? {
-          pl: 2 + nestingLevel * 2
-        } : undefined,
         children: jsxs(Grid, {
           container: true,
           size: "grow",
-          spacing: 2,
+          spacing: isRadioControl ? 0 : 2,
           sx: {
             justifyContent: 'space-between'
           },
@@ -1067,7 +1009,7 @@ var ToggleMenu = function ToggleMenu(_ref) {
           },
           children: menuTitle
         })
-      }) : null, menuItems != null && menuItems.length ? _renderMenuItems(menuItems) : jsx("div", {}) // Needed to make the menu work without any menuItems
+      }) : null, menuItems != null && menuItems.length ? renderMenuItems(menuItems) : jsx("div", {}) // Needed to make the menu work without any menuItems
       , secondaryMenuTitle ? jsx(ListSubheader, {
         "data-testid": "toggleMenuSecondaryTitle",
         children: jsx(Typography, {
@@ -1076,7 +1018,7 @@ var ToggleMenu = function ToggleMenu(_ref) {
           },
           children: secondaryMenuTitle
         })
-      }) : null, secondaryMenuItems != null && secondaryMenuItems.length ? _renderMenuItems(secondaryMenuItems) : jsx("div", {}) // Needed to make the menu work without any menuItems
+      }) : null, secondaryMenuItems != null && secondaryMenuItems.length ? renderMenuItems(secondaryMenuItems) : jsx("div", {}) // Needed to make the menu work without any menuItems
       , children]
     })]
   });
@@ -1229,7 +1171,7 @@ var CustomDialogHeader = function CustomDialogHeader(_ref2) {
   });
 };
 
-var _excluded$a = ["defaultSize", "onResizeStop", "hasLayout", "minWidth"],
+var _excluded$b = ["defaultSize", "onResizeStop", "hasLayout", "minWidth"],
   _excluded2$2 = ["title", "onClose", "description", "actions", "children", "sx", "resizableDefaultSize", "isResizable", "hasLayout", "shouldRenderInline", "slotProps", "disableRestoreFocus", "headerActions", "minWidth"];
 var PaperComponent = function PaperComponent(_ref) {
   var _ref$defaultSize = _ref.defaultSize,
@@ -1242,7 +1184,7 @@ var PaperComponent = function PaperComponent(_ref) {
     hasLayout = _ref$hasLayout === void 0 ? true : _ref$hasLayout,
     _ref$minWidth = _ref.minWidth,
     minWidth = _ref$minWidth === void 0 ? 280 : _ref$minWidth,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   var maxWidth = '98%';
   var maxHeight = '98%';
   return jsx(ResizeComponent, Object.assign({
@@ -1467,7 +1409,7 @@ var ConfirmationButtons = function ConfirmationButtons(_ref) {
   });
 };
 
-var _excluded$9 = ["open", "title", "description", "confirmLabel", "cancelLabel", "onSubmit", "onClose", "content", "disableAutoFocus", "isLoading"],
+var _excluded$a = ["open", "title", "description", "confirmLabel", "cancelLabel", "onSubmit", "onClose", "content", "disableAutoFocus", "isLoading"],
   _excluded2$1 = ["catchOnCancel"];
 var ConfirmationDialog = function ConfirmationDialog(_ref) {
   var open = _ref.open,
@@ -1483,7 +1425,7 @@ var ConfirmationDialog = function ConfirmationDialog(_ref) {
     disableAutoFocus = _ref$disableAutoFocus === void 0 ? false : _ref$disableAutoFocus,
     _ref$isLoading = _ref.isLoading,
     isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+    other = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   other.catchOnCancel;
     var rest = _objectWithoutPropertiesLoose(other, _excluded2$1); // remove unwanted props
   var _useSharedTranslation = useSharedTranslation(),
@@ -2407,7 +2349,7 @@ ErrorBoundary.defaultProps = {
   onError: function onError() {}
 };
 
-var styles$5 = {
+var styles$6 = {
   small: {
     height: 16,
     width: 16,
@@ -2424,14 +2366,14 @@ var Avatar = function Avatar(_ref) {
   var theme = useTheme();
   return jsx(Avatar$1, {
     "data-testid": "avatar",
-    sx: Object.assign({}, styles$5[size], {
+    sx: Object.assign({}, styles$6[size], {
       bgcolor: author ? theme.palette.geowebColors.buttons.icon.disabled.color : undefined
     }),
     children: children
   });
 };
 
-var styles$4 = {
+var styles$5 = {
   container: {
     position: 'absolute',
     top: 38,
@@ -2501,7 +2443,7 @@ var UserMenu = function UserMenu(_ref) {
       })
     }), isOpen ? jsx(Paper, {
       "data-testid": "userMenu",
-      sx: styles$4.container,
+      sx: styles$5.container,
       children: jsx(ClickAwayListener, {
         mouseEvent: "onMouseDown",
         onClickAway: function onClickAway(event) {
@@ -2512,7 +2454,7 @@ var UserMenu = function UserMenu(_ref) {
           onClose();
         },
         children: jsx(MenuList, {
-          sx: styles$4.userMenu,
+          sx: styles$5.userMenu,
           variant: "menu",
           children: children
         })
@@ -2756,8 +2698,8 @@ var ToolHeader = function ToolHeader(_ref) {
   });
 };
 
-var _excluded$8 = ["title", "size", "children", "onClose", "isResizable", "isDraggable", "maxHeight", "elevation", "headerClassName", "leftHeaderComponent", "rightHeaderComponent", "dragHandleIcon", "closeIcon"];
-var styles$3 = {
+var _excluded$9 = ["title", "size", "children", "onClose", "isResizable", "isDraggable", "maxHeight", "elevation", "headerClassName", "leftHeaderComponent", "rightHeaderComponent", "dragHandleIcon", "closeIcon"];
+var styles$4 = {
   container: {
     overflow: 'hidden',
     borderRadius: 0,
@@ -2795,10 +2737,10 @@ var ToolContainer = function ToolContainer(_ref) {
     rightHeaderComponent = _ref$rightHeaderCompo === void 0 ? null : _ref$rightHeaderCompo,
     dragHandleIcon = _ref.dragHandleIcon,
     closeIcon = _ref.closeIcon,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
   return jsxs(Paper, Object.assign({
     elevation: elevation,
-    sx: styles$3.container
+    sx: styles$4.container
   }, props, {
     children: [jsx(ErrorBoundary, {
       children: jsx(ToolHeader, {
@@ -2816,7 +2758,7 @@ var ToolContainer = function ToolContainer(_ref) {
       style: {
         maxHeight: maxHeight
       },
-      sx: styles$3.content,
+      sx: styles$4.content,
       children: children
     }), isResizable ? jsx(ToolFooter, {}) : null]
   }));
@@ -2968,7 +2910,7 @@ var useHandleSizeFromOutsideComponent = function useHandleSizeFromOutsideCompone
   }, [isOpen, getBoundsNode]);
 };
 
-var _excluded$7 = ["title", "bounds", "cancel", "headerSize", "startSize", "startPosition", "startDraggablePosition", "children", "isOpen", "onClose", "initialMaxHeight", "fixTopPosition", "onChangeSize", "onMouseDown", "onResizeStop", "onDragEnd", "order", "source", "leftHeaderComponent", "rightHeaderComponent", "dragHandleIcon", "closeIcon", "className", "sx", "resetPositionOnOpen"];
+var _excluded$8 = ["title", "bounds", "cancel", "headerSize", "startSize", "startPosition", "startDraggablePosition", "children", "isOpen", "onClose", "initialMaxHeight", "fixTopPosition", "onChangeSize", "onMouseDown", "onResizeStop", "onDragEnd", "order", "source", "leftHeaderComponent", "rightHeaderComponent", "dragHandleIcon", "closeIcon", "className", "sx", "resetPositionOnOpen"];
 // calculate dialog size and position to 85% of screensize
 var calculateDialogSizeAndPosition = function calculateDialogSizeAndPosition() {
   var width = window.innerWidth * 0.85;
@@ -3072,7 +3014,7 @@ var DraggableComponent = function DraggableComponent(_ref) {
     sx = _ref$sx === void 0 ? {} : _ref$sx,
     _ref$resetPositionOnO = _ref.resetPositionOnOpen,
     resetPositionOnOpen = _ref$resetPositionOnO === void 0 ? false : _ref$resetPositionOnO,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   var zIndex = (source === 'app' ? BASE_Z_INDEX : 1000) + order;
   var elevation = BASE_ELEVATION + order;
   var nodeRef = React.useRef(null);
@@ -3229,7 +3171,7 @@ var segmentStyle = {
   letterSpacing: 0.25,
   justifyContent: 'center'
 };
-var styles$2 = {
+var styles$3 = {
   icon: Object.assign({}, segmentStyle, {
     backgroundColor: 'geowebColors.textInputField.default.rgba',
     width: 40,
@@ -3254,7 +3196,7 @@ var ShortCutSegment = function ShortCutSegment(_ref) {
     return jsx(Typography, {
       component: "span",
       "data-testid": "segment-divider",
-      sx: styles$2.divider,
+      sx: styles$3.divider,
       children: children
     });
   }
@@ -3262,7 +3204,7 @@ var ShortCutSegment = function ShortCutSegment(_ref) {
     return jsx(Typography, {
       component: "span",
       "data-testid": "segment-icon",
-      sx: styles$2.icon,
+      sx: styles$3.icon,
       children: children
     });
   }
@@ -3270,7 +3212,7 @@ var ShortCutSegment = function ShortCutSegment(_ref) {
     return jsx(Typography, {
       component: "span",
       "data-testid": "segment-connect",
-      sx: styles$2.connect,
+      sx: styles$3.connect,
       children: children
     });
   }
@@ -3724,7 +3666,7 @@ var TabPanel = function TabPanel(_ref) {
     children: value === index && children
   });
 };
-var styles$1 = {
+var styles$2 = {
   container: {
     margin: '0px 20px',
     maxHeight: '90vh'
@@ -3741,17 +3683,17 @@ var CheatSheet = function CheatSheet() {
     setActiveTab(newValue);
   };
   return jsxs(Box, {
-    sx: styles$1.container,
+    sx: styles$2.container,
     children: [jsxs(Tabs, {
       "aria-label": "platform",
       onChange: onChangeTab,
       value: activeTab,
       children: [jsx(Tab, {
         label: "Windows",
-        sx: styles$1.tab
+        sx: styles$2.tab
       }), jsx(Tab, {
         label: "Mac",
-        sx: styles$1.tab
+        sx: styles$2.tab
       })]
     }), jsx(TabPanel, {
       index: 0,
@@ -3880,7 +3822,7 @@ var getInitials = function getInitials(name) {
   }
 };
 
-var _excluded$6 = ["value", "orientation", "shouldAutoFocus", "extraStyles"];
+var _excluded$7 = ["value", "orientation", "shouldAutoFocus", "extraStyles"];
 var sliderHeaderStyle = {
   fontFamily: 'Roboto-Black, Roboto',
   fontSize: 12,
@@ -3939,7 +3881,7 @@ var CustomSlider = function CustomSlider(_ref) {
     shouldAutoFocus = _ref$shouldAutoFocus === void 0 ? false : _ref$shouldAutoFocus,
     _ref$extraStyles = _ref.extraStyles,
     extraStyles = _ref$extraStyles === void 0 ? {} : _ref$extraStyles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   // Add custom class (for bold text) to label adjacent to thumb component.
   // Material UI doesn't support highlighing only adjacent label
   // when track is highlighted everywhere below selected value.
@@ -3986,7 +3928,7 @@ var CustomSlider = function CustomSlider(_ref) {
   }, props));
 };
 
-var _excluded$5 = ["variant", "className", "value"];
+var _excluded$6 = ["variant", "className", "value"];
 // This button is same as MUI ToggleButton but adds the variant prop
 var CustomToggleButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$variant = _ref.variant,
@@ -3994,7 +3936,7 @@ var CustomToggleButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className = _ref.className,
     _ref$value = _ref.value,
     value = _ref$value === void 0 ? 0 : _ref$value,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
   return jsx(ToggleButton, Object.assign({
     className: variant + " " + className,
     ref: ref,
@@ -4002,7 +3944,7 @@ var CustomToggleButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, props));
 });
 
-var _excluded$4 = ["tooltip", "list", "currentIndex", "onChangeMouseWheel", "isEnabled", "hasBackgroundColor", "variant", "additionalStyling", "skipLocalStyling"],
+var _excluded$5 = ["tooltip", "list", "currentIndex", "onChangeMouseWheel", "isEnabled", "hasBackgroundColor", "variant", "additionalStyling", "skipLocalStyling"],
   _excluded2 = ["className", "additionalStyling", "MenuProps"];
 var TooltipSelect = function TooltipSelect(_ref) {
   var _ref$tooltip = _ref.tooltip,
@@ -4021,7 +3963,7 @@ var TooltipSelect = function TooltipSelect(_ref) {
     additionalStyling = _ref$additionalStylin === void 0 ? {} : _ref$additionalStylin,
     _ref$skipLocalStyling = _ref.skipLocalStyling,
     skipLocalStyling = _ref$skipLocalStyling === void 0 ? false : _ref$skipLocalStyling,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   var _React$useState = React.useState(false),
     selectOpen = _React$useState[0],
     setSelectOpen = _React$useState[1];
@@ -4228,7 +4170,7 @@ var tooltipContainerStyles = function tooltipContainerStyles(theme, isEnabled, h
   });
 };
 
-var _excluded$3 = ["title", "title2", "defaultExpanded", "disableGutters", "expandedElevation", "collapsedElevation", "transitionDuration", "detailsSx", "CustomExpandIcon", "children", "amountOfItems"];
+var _excluded$4 = ["title", "title2", "defaultExpanded", "disableGutters", "expandedElevation", "collapsedElevation", "transitionDuration", "detailsSx", "CustomExpandIcon", "children", "amountOfItems"];
 var CustomAccordion = function CustomAccordion(_ref) {
   var title = _ref.title,
     title2 = _ref.title2,
@@ -4246,7 +4188,7 @@ var CustomAccordion = function CustomAccordion(_ref) {
     CustomExpandIcon = _ref.CustomExpandIcon,
     children = _ref.children,
     amountOfItems = _ref.amountOfItems,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   var _React$useState = React.useState(defaultExpanded),
     expanded = _React$useState[0],
     setExpanded = _React$useState[1];
@@ -4357,8 +4299,8 @@ var SearchHighlight = function SearchHighlight(_ref) {
   });
 };
 
-var _excluded$2 = ["activeLabel", "inActiveLabel", "tooltip"];
-var styles = {
+var _excluded$3 = ["activeLabel", "inActiveLabel", "tooltip"];
+var styles$1 = {
   label: {
     color: 'geowebColors.buttons.tertiary.default.color',
     opacity: 1,
@@ -4373,19 +4315,19 @@ var SwitchButton = function SwitchButton(_ref) {
     inActiveLabel = _ref$inActiveLabel === void 0 ? 'Viewer' : _ref$inActiveLabel,
     _ref$tooltip = _ref.tooltip,
     tooltip = _ref$tooltip === void 0 ? 'Switch mode' : _ref$tooltip,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
   return jsx(CustomTooltip, {
     className: "switch-button",
     title: tooltip,
     children: jsxs("span", {
       role: "button",
       children: [jsx(FormLabel, {
-        sx: styles.label,
+        sx: styles$1.label,
         children: inActiveLabel
       }), jsx(Switch, Object.assign({
         "data-testid": "switchMode"
       }, props)), jsx(FormLabel, {
-        sx: styles.label,
+        sx: styles$1.label,
         children: activeLabel
       })]
     })
@@ -5143,7 +5085,7 @@ var SearchField = function SearchField(_ref3) {
   });
 };
 
-var _excluded$1 = ["activeLabelFilterCount", "filters", "onClickFilterChip", "onSearch", "isAllSelected", "searchQuery", "showLabelFilterToggle", "isLabelFilterOpen", "onToggleLabelFilter", "showSearchField"];
+var _excluded$2 = ["activeLabelFilterCount", "filters", "onClickFilterChip", "onSearch", "isAllSelected", "searchQuery", "showLabelFilterToggle", "isLabelFilterOpen", "onToggleLabelFilter", "showSearchField"];
 var DEFAULT_FILTER_HEIGHT = 85;
 var Filter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$activeLabelFilte = _ref.activeLabelFilterCount,
@@ -5161,7 +5103,7 @@ var Filter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onToggleLabelFilter = _ref.onToggleLabelFilter,
     _ref$showSearchField = _ref.showSearchField,
     showSearchField = _ref$showSearchField === void 0 ? true : _ref$showSearchField,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   return jsx(Box, {
     ref: ref,
     sx: Object.assign({
@@ -5310,14 +5252,14 @@ var LegendToggleButton = function LegendToggleButton(_ref) {
   });
 };
 
-var _excluded = ["isDark", "children", "sx"];
+var _excluded$1 = ["isDark", "children", "sx"];
 var StorybookDocsWrapper = function StorybookDocsWrapper(_ref) {
   var _ref$isDark = _ref.isDark,
     isDark = _ref$isDark === void 0 ? false : _ref$isDark,
     children = _ref.children,
     _ref$sx = _ref.sx,
     sx = _ref$sx === void 0 ? [] : _ref$sx,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   return jsx(Box, Object.assign({
     sx: [].concat(isDark ? [{
       backgroundColor: 'geowebColors.background.surfaceBrowser'
@@ -6064,27 +6006,6 @@ var startOfYearUTC = function startOfYearUTC(date) {
     milliseconds: 0
   });
 };
-// TODO - IF TODAY time is going to be used, we need to edit this to handle the time.
-//      - now.getTimezoneOffset();   by subtracting the timezone offset, this can be used to convert the time to similar to UTC, because startOfDay retuns values in local time with offset
-/**
- * Parse custom time format of NOW+current time | current date in UTC. The result will be in UTC.
- * @param timeValue - string value
- * @returns Time in UTC format
- */
-var convertNOWFormatToUTC = function convertNOWFormatToUTC(timeValue) {
-  var now = new Date();
-  var today = startOfDay(now);
-  var regex = /(NOW|TODAY)([+-])PT(\d+)H(\d+)M/;
-  var matches = regex.exec(timeValue);
-  if (matches) {
-    var base = matches[1] === 'NOW' ? now : today;
-    var sign = matches[2] === '+' ? 1 : -1;
-    var hours = parseInt(matches[3], 10);
-    var minutes = parseInt(matches[4], 10);
-    return addMinutes(addHours(base, sign * hours), sign * minutes).toISOString();
-  }
-  throw new Error('Invalid endTime format');
-};
 /**
  * Parse custom time format of NOW+-hours and minutes || TODAY+-hours and minutes into UTC. The result will be in UTC.
  * @param timeValue - string value
@@ -6157,7 +6078,6 @@ var index$1 = /*#__PURE__*/Object.freeze({
   DATE_FORMAT_UTC: DATE_FORMAT_UTC,
   DATE_FORMAT_YEAR: DATE_FORMAT_YEAR,
   add: add,
-  convertNOWFormatToUTC: convertNOWFormatToUTC,
   convertNOWandTODAYFormatsToUTC: convertNOWandTODAYFormatsToUTC,
   createDate: createDate,
   dateToIsoString: dateToIsoString,
@@ -6253,7 +6173,7 @@ var formatRelativeReferenceTimeLabel = function formatRelativeReferenceTimeLabel
 var getValidInstancesNewestFirst = function getValidInstancesNewestFirst(instances) {
   return instances.filter(function (instance) {
     return isValid(parseCustomDateString(instance.id));
-  }).toSorted(function (firstInstance, secondInstance) {
+  }).sort(function (firstInstance, secondInstance) {
     return parseCustomDateString(secondInstance.id).getTime() - parseCustomDateString(firstInstance.id).getTime();
   });
 };
@@ -6611,6 +6531,329 @@ var isDialogFocused = function isDialogFocused() {
   return Boolean((_document$activeEleme = document.activeElement) == null ? void 0 : _document$activeEleme.closest('[role="dialog"]'));
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2026 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2026 - Finnish Meteorological Institute (FMI)
+ * Copyright 2026 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+var convertNumericInputValue = function convertNumericInputValue(value, inputMode) {
+  if (value !== '' && !isNaN(parseFloat(value))) {
+    return inputMode === 'numeric' ? parseInt(value, 10) : parseFloat(value);
+  }
+  return null;
+};
+var getAllowedKeys = function getAllowedKeys(inputMode) {
+  if (inputMode === void 0) {
+    inputMode = 'numeric';
+  }
+  var allowedKeys = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '-', 'Backspace', 'ArrowRight', 'ArrowLeft', 'Tab', 'Home', 'End', 'PageDown', 'PageUp', 'Delete'].concat(inputMode === 'decimal' ? ['.'] : []);
+  return allowedKeys;
+};
+
+var arrowKeySteps = {
+  ArrowUp: 1,
+  ArrowDown: -1
+};
+var integerKeys = getAllowedKeys('numeric');
+var CARET_WIDTH = '24px';
+var SIGN_WIDTH = '1ch';
+var transparentBackdrop = {
+  slotProps: {
+    backdrop: {
+      sx: {
+        backgroundColor: 'transparent'
+      }
+    }
+  }
+};
+var countDigits = function countDigits(text) {
+  return text.replace(/[^0-9]/g, '').length;
+};
+var styles = {
+  field: {
+    flexShrink: 0
+  },
+  /* Filled inputs only offset start adornments for the label, so match that offset here. */
+  unit: {
+    flexShrink: 0,
+    marginTop: '16px'
+  }
+};
+var isClipboardShortcut = function isClipboardShortcut(event) {
+  var isMac = window.navigator.userAgent.includes(' Mac ');
+  var hasModifier = isMac ? event.metaKey : event.ctrlKey;
+  return hasModifier && ['c', 'v', 'x'].includes(event.key.toLowerCase());
+};
+var NumberWithUnitField = function NumberWithUnitField(_ref) {
+  var label = _ref.label,
+    value = _ref.value,
+    unit = _ref.unit,
+    unitOptions = _ref.unitOptions,
+    _onChange = _ref.onChange,
+    onInputChange = _ref.onInputChange,
+    unitAriaLabel = _ref.unitAriaLabel,
+    minValue = _ref.minValue,
+    _ref$maxDigits = _ref.maxDigits,
+    maxDigits = _ref$maxDigits === void 0 ? 5 : _ref$maxDigits,
+    maxMagnitude = _ref.maxMagnitude,
+    _ref$error = _ref.error,
+    error = _ref$error === void 0 ? false : _ref$error,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  var inputId = React.useId();
+  var _React$useState = React.useState(String(value)),
+    typedValue = _React$useState[0],
+    setTypedValue = _React$useState[1];
+  React.useEffect(function () {
+    setTypedValue(String(value));
+  }, [value]);
+  var clampValue = function clampValue(newValue) {
+    if (!Number.isFinite(newValue)) {
+      return minValue != null ? minValue : 0;
+    }
+    var truncated = Math.trunc(newValue);
+    return minValue === undefined ? truncated : Math.max(minValue, truncated);
+  };
+  var commitTypedValue = function commitTypedValue(newValue, isStep) {
+    if (isStep === void 0) {
+      isStep = false;
+    }
+    var allowedDigits = maxMagnitude === undefined ? maxDigits : Math.min(maxDigits, String(maxMagnitude).length);
+    var parsed = convertNumericInputValue(newValue, 'numeric');
+    if (countDigits(newValue) > allowedDigits || parsed !== null && maxMagnitude !== undefined && Math.abs(parsed) > maxMagnitude) {
+      return;
+    }
+    setTypedValue(newValue);
+    onInputChange == null || onInputChange();
+    if (parsed === null) {
+      return;
+    }
+    if (isStep) {
+      _onChange({
+        value: clampValue(parsed),
+        unit: unit
+      }, true);
+      return;
+    }
+    _onChange({
+      value: clampValue(parsed),
+      unit: unit
+    });
+  };
+  /* Typed text can clamp onto the value already stored, which leaves no prop change to resync from. */
+  var showStoredValue = function showStoredValue() {
+    setTypedValue(String(value));
+  };
+  var stepValue = function stepValue(step) {
+    var parsed = convertNumericInputValue(typedValue, 'numeric');
+    commitTypedValue(String(clampValue((parsed != null ? parsed : value) + step)), true);
+  };
+  var handleKeyDown = function handleKeyDown(event) {
+    var step = arrowKeySteps[event.key];
+    if (step !== undefined) {
+      event.preventDefault();
+      event.stopPropagation();
+      stepValue(step);
+      return;
+    }
+    if (isClipboardShortcut(event)) {
+      return;
+    }
+    var isRepeatedMinus = event.key === '-' && event.target.value.includes('-');
+    if (!integerKeys.includes(event.key) || isRepeatedMinus) {
+      event.preventDefault();
+    }
+  };
+  var handlePaste = function handlePaste(event) {
+    var input = event.target;
+    var pasted = event.clipboardData.getData('text/plain');
+    var before = input.value.slice(0, input.selectionStart);
+    var after = input.value.slice(input.selectionEnd);
+    if (!/^-?[0-9]+$/.exec(before + pasted + after)) {
+      event.preventDefault();
+    }
+  };
+  var longestUnitLabel = unitOptions.reduce(function (longest, option) {
+    return Math.max(longest, option.label.length);
+  }, 0);
+  var inputWidth = "calc(" + maxDigits + "ch + " + SIGN_WIDTH + ")";
+  /* Fixed so a longer unit grows the value box leftwards instead of widening the field. */
+  var unitWidth = "calc(" + longestUnitLabel + "ch + " + CARET_WIDTH + ")";
+  return jsxs(FormControl, {
+    disabled: disabled,
+    error: error,
+    sx: styles.field,
+    variant: "filled",
+    children: [jsx(InputLabel, {
+      htmlFor: inputId,
+      shrink: true,
+      variant: "filled",
+      children: label
+    }), jsx(FilledInput, {
+      endAdornment: jsx(FormControl, {
+        sx: styles.unit,
+        variant: "standard",
+        children: jsx(Select, {
+          MenuProps: transparentBackdrop,
+          disableUnderline: true,
+          disabled: disabled,
+          inputProps: {
+            'aria-label': unitAriaLabel != null ? unitAriaLabel : label
+          },
+          onChange: function onChange(event) {
+            return _onChange({
+              value: value,
+              unit: event.target.value
+            });
+          },
+          /* Select escalates its own min-width rule by repeating its class, so only an inline style wins. */
+          SelectDisplayProps: {
+            style: {
+              textAlign: 'right',
+              width: unitWidth
+            }
+          },
+          value: unit,
+          variant: "standard",
+          children: unitOptions.map(function (option) {
+            return jsx(MenuItem, {
+              value: option.value,
+              children: option.label
+            }, option.value);
+          })
+        })
+      }),
+      id: inputId,
+      inputProps: {
+        inputMode: 'numeric',
+        style: {
+          width: inputWidth
+        }
+      },
+      onBlur: showStoredValue,
+      onChange: function onChange(event) {
+        return commitTypedValue(event.target.value);
+      },
+      onKeyDown: handleKeyDown,
+      onPaste: handlePaste,
+      value: typedValue
+    })]
+  });
+};
+
+var _excluded = ["value", "defaultValue", "minDateTime", "maxDateTime", "onAccept", "onChange", "showUTCAdornment", "slots", "slotProps"];
+var utcToPickerDate = function utcToPickerDate(value) {
+  return new Date(value.getUTCFullYear(), value.getUTCMonth(), value.getUTCDate(), value.getUTCHours(), value.getUTCMinutes(), 0,
+  // seconds to zero
+  0);
+};
+var pickerDateToUTC = function pickerDateToUTC(value) {
+  return new Date(Date.UTC(value.getFullYear(), value.getMonth(), value.getDate(), value.getHours(), value.getMinutes(), 0,
+  // seconds to zero
+  0));
+};
+var OpenPickerIcon = function OpenPickerIcon() {
+  return jsx(CalendarToday, {});
+};
+var mergeFieldSlotProps = function mergeFieldSlotProps(slotProps) {
+  return Object.assign({
+    openPickerButtonPosition: 'start'
+  }, slotProps);
+};
+var mergeOpenPickerButtonSlotProps = function mergeOpenPickerButtonSlotProps(slotProps) {
+  return Object.assign({
+    size: 'small',
+    sx: {
+      padding: 0
+    }
+  }, slotProps);
+};
+var mergeTextFieldSlotProps = function mergeTextFieldSlotProps(slotProps, showUTCAdornment) {
+  var _slotProps$slotProps;
+  return Object.assign({
+    variant: 'filled'
+  }, showUTCAdornment && {
+    endAdornment: jsx(InputAdornment, {
+      position: "end",
+      sx: {
+        paddingTop: '16px'
+      },
+      children: "UTC"
+    })
+  }, slotProps, {
+    slotProps: Object.assign({}, slotProps == null ? void 0 : slotProps.slotProps, {
+      input: Object.assign({}, slotProps == null || (_slotProps$slotProps = slotProps.slotProps) == null ? void 0 : _slotProps$slotProps.input)
+    })
+  });
+};
+var DateTimePicker = function DateTimePicker(_ref) {
+  var value = _ref.value,
+    defaultValue = _ref.defaultValue,
+    minDateTime = _ref.minDateTime,
+    maxDateTime = _ref.maxDateTime,
+    onAccept = _ref.onAccept,
+    onChange = _ref.onChange,
+    _ref$showUTCAdornment = _ref.showUTCAdornment,
+    showUTCAdornment = _ref$showUTCAdornment === void 0 ? true : _ref$showUTCAdornment,
+    slots = _ref.slots,
+    slotProps = _ref.slotProps,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var callerFieldSlotProps = slotProps == null ? void 0 : slotProps.field;
+  var callerOpenPickerButtonSlotProps = slotProps == null ? void 0 : slotProps.openPickerButton;
+  var callerTextFieldSlotProps = slotProps == null ? void 0 : slotProps.textField;
+  var fieldSlotProps = typeof callerFieldSlotProps === 'function' ? function (ownerState) {
+    return mergeFieldSlotProps(callerFieldSlotProps(ownerState));
+  } : mergeFieldSlotProps(callerFieldSlotProps);
+  var openPickerButtonSlotProps = typeof callerOpenPickerButtonSlotProps === 'function' ? function (ownerState) {
+    return mergeOpenPickerButtonSlotProps(callerOpenPickerButtonSlotProps(ownerState));
+  } : mergeOpenPickerButtonSlotProps(callerOpenPickerButtonSlotProps);
+  var textFieldSlotProps = typeof callerTextFieldSlotProps === 'function' ? function (ownerState) {
+    return mergeTextFieldSlotProps(callerTextFieldSlotProps(ownerState), showUTCAdornment);
+  } : mergeTextFieldSlotProps(callerTextFieldSlotProps, showUTCAdornment);
+  return jsx(LocalizationProvider, {
+    dateAdapter: AdapterDateFns,
+    children: jsx(DateTimePicker$1, Object.assign({
+      ampm: false,
+      desktopModeMediaQuery: "@media (min-width: 720px)",
+      format: DATE_FORMAT_DATEPICKER,
+      timeSteps: {
+        minutes: 1
+      }
+    }, props, {
+      defaultValue: defaultValue ? utcToPickerDate(defaultValue) : undefined,
+      maxDateTime: maxDateTime ? utcToPickerDate(maxDateTime) : undefined,
+      minDateTime: minDateTime ? utcToPickerDate(minDateTime) : undefined,
+      onAccept: onAccept ? function (acceptedValue, context) {
+        return onAccept(acceptedValue ? pickerDateToUTC(acceptedValue) : null, context);
+      } : undefined,
+      onChange: onChange ? function (changedValue, context) {
+        return onChange(changedValue ? pickerDateToUTC(changedValue) : null, context);
+      } : undefined,
+      slotProps: Object.assign({}, slotProps, {
+        field: fieldSlotProps,
+        openPickerButton: openPickerButtonSlotProps,
+        textField: textFieldSlotProps
+      }),
+      slots: Object.assign({
+        openPickerIcon: OpenPickerIcon
+      }, slots),
+      value: value ? utcToPickerDate(value) : value
+    }))
+  });
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -6635,4 +6878,4 @@ var SystemScope = {
   plugin: 'plugin'
 };
 
-export { AlertBanner, AlertIcon, AppHeader, AppLayout, Avatar, CanvasComponent, ConfirmationButtons, ConfirmationDialog, ConfirmationServiceProvider, CustomAccordion, CustomDialog, CustomDialogHeader, CustomIconButton, CustomSlider, CustomToggleButton, CustomTooltip, DEBOUNCE_TIMEOUT, DEFAULT_ERROR_MESSAGE, DEFAULT_FILTER_HEIGHT, DraggableComponent$1 as Draggable, ErrorBoundary, Filter, FilterChip, FilterOption, LastUpdateTime, LegendToggleButton, PROJECTION, ResizeComponent as Resizable, SHARED_NAMESPACE, SearchField$1 as SearchField, SearchFieldButton, SearchHighlight, SessionStorageKey, StatusTag, StorybookDocsWrapper, StyledSelect, SwitchButton, SystemScope, ToggleMenu, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, MenuItemTheme as UserMenuItemTheme, adjustPosition, calculateDialogSizeAndPosition, calculateStartSize, index$1 as dateUtils, defaultDelay, getAxiosErrorMessage, getAxiosWarningMessage, getErrorMessage, getInitials, getLastUpdateTitle, getPosition, getWarningMessage, isAuthError, isAxiosAuthError, isAxiosError, isDialogFocused, isTargetInteractiveInput, linkifyText, loadAllTranslations, pollingIntervalTimeout, index as referenceTimeUtils, renderCounter, safelyInitI18nForTestsAndStories, sessionStorageProvider, sharedTranslations, showPrompt, sliderHeaderStyle, tooltipContainerStyles, useConfirmationDialog, useControlledTooltip, useDebounce, useDialogActions, useIsMounted, useMakeSureContainerStaysInsideWindow, usePoller, usePreventBrowserClose, usePrevious, useResizeObserver, useScrollingInIsolation, useUserMenu, useWheelStopPropagation };
+export { AlertBanner, AlertIcon, AppHeader, AppLayout, Avatar, CanvasComponent, ConfirmationButtons, ConfirmationDialog, ConfirmationServiceProvider, CustomAccordion, CustomDialog, CustomDialogHeader, CustomIconButton, CustomSlider, CustomToggleButton, CustomTooltip, DEBOUNCE_TIMEOUT, DEFAULT_ERROR_MESSAGE, DEFAULT_FILTER_HEIGHT, DateTimePicker, DraggableComponent$1 as Draggable, ErrorBoundary, Filter, FilterChip, FilterOption, LastUpdateTime, LegendToggleButton, NumberWithUnitField, PROJECTION, ResizeComponent as Resizable, SHARED_NAMESPACE, SearchField$1 as SearchField, SearchFieldButton, SearchHighlight, SessionStorageKey, StatusTag, StorybookDocsWrapper, StyledSelect, SwitchButton, SystemScope, ToggleMenu, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, MenuItemTheme as UserMenuItemTheme, adjustPosition, calculateDialogSizeAndPosition, calculateStartSize, convertNumericInputValue, index$1 as dateUtils, defaultDelay, getAllowedKeys, getAxiosErrorMessage, getAxiosWarningMessage, getErrorMessage, getInitials, getLastUpdateTitle, getPosition, getWarningMessage, isAuthError, isAxiosAuthError, isAxiosError, isDialogFocused, isTargetInteractiveInput, linkifyText, loadAllTranslations, pickerDateToUTC, pollingIntervalTimeout, index as referenceTimeUtils, renderCounter, safelyInitI18nForTestsAndStories, sessionStorageProvider, sharedTranslations, showPrompt, sliderHeaderStyle, tooltipContainerStyles, useConfirmationDialog, useControlledTooltip, useDebounce, useDialogActions, useIsMounted, useMakeSureContainerStaysInsideWindow, usePoller, usePreventBrowserClose, usePrevious, useResizeObserver, useScrollingInIsolation, useUserMenu, useWheelStopPropagation, utcToPickerDate };

package/dist/src/lib/components/DateTimePicker/DateTimePicker.d.ts

@@ -0,0 +1,8 @@
+import type { DateTimePickerProps as MuiDateTimePickerProps } from '@mui/x-date-pickers';
+import React from 'react';
+export declare const utcToPickerDate: (value: Date) => Date;
+export declare const pickerDateToUTC: (value: Date) => Date;
+export interface DateTimePickerProps extends MuiDateTimePickerProps {
+    showUTCAdornment?: boolean;
+}
+export declare const DateTimePicker: React.FC<DateTimePickerProps>;

package/dist/src/lib/components/DateTimePicker/index.d.ts

@@ -0,0 +1 @@
+export * from './DateTimePicker';

package/dist/src/lib/components/NumberWithUnitField/NumberWithUnitField.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+export interface NumberWithUnitOption {
+    value: string;
+    label: string;
+}
+export interface NumberWithUnitValue {
+    value: number;
+    unit: string;
+}
+export interface NumberWithUnitFieldProps {
+    label: string;
+    value: number;
+    unit: string;
+    unitOptions: NumberWithUnitOption[];
+    onChange: (value: NumberWithUnitValue, isStep?: boolean) => void;
+    onInputChange?: () => void;
+    unitAriaLabel?: string;
+    minValue?: number;
+    maxDigits?: number;
+    maxMagnitude?: number;
+    error?: boolean;
+    disabled?: boolean;
+}
+export declare const NumberWithUnitField: React.FC<NumberWithUnitFieldProps>;

package/dist/src/lib/components/NumberWithUnitField/index.d.ts

@@ -0,0 +1 @@
+export * from './NumberWithUnitField';

package/dist/src/lib/components/ToggleMenu/ToggleMenu.d.ts

@@ -13,7 +13,6 @@ export interface MenuItemType {
     isDisabled?: boolean;
     isSelected?: boolean;
     controlType?: 'radio';
-    subMenuItems?: MenuItemType[];
 }
 interface ToggleMenuProps {
     buttonTestId?: string;

package/dist/src/lib/components/index.d.ts

@@ -25,3 +25,5 @@ export * from './CanvasComponent';
 export * from './Filter';
 export * from './LegendToggleButton';
 export * from './Storybook';
+export * from './NumberWithUnitField';
+export * from './DateTimePicker';

package/dist/src/lib/types/types.d.ts

@@ -6,6 +6,7 @@ export interface ConfigType {
     GW_AUTH_CLIENT_ID?: string;
     GW_AUTH_ROLE_CLAIM_NAME?: string;
     GW_AUTH_ROLE_CLAIM_VALUE_PRESETS_ADMIN?: string;
+    GW_AUTH_TRUSTED_HOSTS?: string;
     GW_BE_VERSION_BASE_URL?: string;
     GW_APP_URL?: string;
     GW_INITIAL_PRESETS_FILENAME?: string;

package/dist/src/lib/utils/dateUtils/dateUtils.d.ts

@@ -330,12 +330,6 @@ export declare const startOfMonthUTC: (date: Date) => Date;
  * @returns the new date
  */
 export declare const startOfYearUTC: (date: Date) => Date;
-/**
- * Parse custom time format of NOW+current time | current date in UTC. The result will be in UTC.
- * @param timeValue - string value
- * @returns Time in UTC format
- */
-export declare const convertNOWFormatToUTC: (timeValue: string) => string;
 /**
  * Parse custom time format of NOW+-hours and minutes || TODAY+-hours and minutes into UTC. The result will be in UTC.
  * @param timeValue - string value

package/dist/src/lib/utils/index.d.ts

@@ -7,3 +7,4 @@ export { renderCounter } from './renderCounter';
 export { SessionStorageKey, sessionStorageProvider } from './sessionStorage';
 export type { SessionStorageProvider } from './sessionStorage';
 export { isTargetInteractiveInput, isDialogFocused } from './keyboardUtils';
+export * from './numberInputUtils';

package/dist/src/lib/utils/numberInputUtils.d.ts

@@ -0,0 +1,3 @@
+export type NumberInputMode = 'numeric' | 'decimal';
+export declare const convertNumericInputValue: (value: string, inputMode: NumberInputMode) => number | null;
+export declare const getAllowedKeys: (inputMode?: NumberInputMode) => string[];

package/package.json

@@ -1,47 +1,48 @@
 {
-  "name": "@opengeoweb/shared",
-  "version": "19.6.1",
-  "description": "GeoWeb shared library with shared components and utils for the opengeoweb project",
-  "license": "Apache-2.0",
-  "repository": {
-    "type": "git",
-    "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
-  },
-  "main": "./dist/index.esm.js",
-  "module": "./dist/index.esm.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    "./package.json": "./package.json",
-    ".": {
-      "@opengeoweb/source": "./src/index.ts",
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.esm.js",
-      "default": "./dist/index.esm.js"
-    }
-  },
-  "dependencies": {
-    "@opengeoweb/theme": "*",
-    "react-draggable": "^4.4.6",
-    "re-resizable": "^6.9.11",
-    "lodash": "^4.18.1",
-    "axios": "^1.18.0",
-    "date-fns": "^4.1.0",
-    "react-i18next": "^15.1.1",
-    "i18next": "^25.0.1",
-    "@mui/material": "^9.0.1"
-  },
-  "peerDependencies": {
-    "react": "19",
-    "@emotion/react": "*",
-    "@emotion/styled": "*"
-  },
-  "devDependencies": {
-    "eslint-plugin-storybook": "10.3.3"
-  },
-  "files": [
-    "dist",
-    "!dist/package.json",
-    "README.md",
-    "package.json"
-  ]
-}
+    "name": "@opengeoweb/shared",
+    "version": "20.0.0",
+    "description": "GeoWeb shared library with shared components and utils for the opengeoweb project",
+    "license": "Apache-2.0",
+    "repository": {
+        "type": "git",
+        "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
+    },
+    "main": "./dist/index.esm.js",
+    "module": "./dist/index.esm.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        "./package.json": "./package.json",
+        ".": {
+            "@opengeoweb/source": "./src/index.ts",
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.esm.js",
+            "default": "./dist/index.esm.js"
+        }
+    },
+    "dependencies": {
+        "@opengeoweb/theme": "20.0.0",
+        "react-draggable": "^4.4.6",
+        "re-resizable": "^6.9.11",
+        "lodash": "^4.18.1",
+        "axios": "^1.18.0",
+        "date-fns": "^4.1.0",
+        "react-i18next": "^15.1.1",
+        "i18next": "^25.0.1",
+        "@mui/material": "^9.0.1",
+        "@mui/x-date-pickers": "^9.3.0"
+    },
+    "peerDependencies": {
+        "react": "19",
+        "@emotion/react": "*",
+        "@emotion/styled": "*"
+    },
+    "devDependencies": {
+        "eslint-plugin-storybook": "10.3.3"
+    },
+    "files": [
+        "dist",
+        "!dist/package.json",
+        "README.md",
+        "package.json"
+    ]
+}