@opengeoweb/warnings 15.2.0 → 15.3.0

package/index.esm.js

@@ -2,28 +2,32 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useDispatch, useSelector } from 'react-redux';
 import { uiTypes, uiActions, getSingularDrawtoolDrawLayerId, drawingToolSelectors, layerSelectors, uiSelectors, layerActions, drawingToolActions, mapListener, layersListener, drawingToolListener, syncGroupsListener, openlayersListener, syncGroupsReducer, drawingToolReducer, uiReducer, layerReducer, mapReducer, useSetupDialog, genericSelectors, useUpdateSharedData, genericActions, selectorMemoizationOptions } from '@opengeoweb/store';
 import { Polygons, CoastalEvent, TemperatureLow, TemperatureHigh, Rain, Snow, Lightning, Fog, Wind, Thunderstorm, SevereMountainWaves, VulcanicEruption, Haze, FreezingPrecipitation, ModerateAircraftIcing, SevereAircraftIcing, ModerateTurbulence, SevereTurbulence, SandStorm, RadioactiveMaterials, ExitDomain, Share, Edit, Delete, DrawPolygon, Visibility, Add, breakpoints, DragHandle, Info, ArrowUpCompact, ArrowDownCompact, Copy, Update, Cancel, Success, Expire, Remove, Options, ChevronDown, ChevronUp, Close, Clock } from '@opengeoweb/theme';
-import { WEBMAP_REACT_NAMESPACE, defaultPolygon, emptyGeoJSON, MapControlButton, defaultSmoothLine, defaultLineString, defaultFreehandLine, defaultOval, defaultCircle, defaultBox, defaultSquare, defaultLocation, defaultPoint, defaultDelete, getDrawModeIdFromSelectionType, getIcon, rewindGeometry, getGeoJSONPropertyValue, currentlySupportedDrawModes, defaultLayers, viewUtils, OpenLayersMapView, MapControls, OpenLayersZoomControl, OpenLayersLayer, OpenLayersFeatureLayer, genericOpenLayersFeatureStyle, DEFAULT_GEOJSON_STYLE_FILL_OPACITY, FEATURE_DRAW_FILL_COLOR, FEATURE_DRAW_SECONDARY_FILL_COLOR, FEATURE_DRAW_STROKE_COLOR } from '@opengeoweb/webmap-react';
+import { WEBMAP_REACT_NAMESPACE, defaultPolygon, emptyGeoJSON, MapControlButton, defaultSmoothLine, defaultLineString, defaultFreehandLine, defaultOval, defaultCircle, defaultRotatableBox, defaultSquare, defaultLocation, defaultPoint, defaultDelete, getDrawModeIdFromSelectionType, getIcon, rewindGeometry, getGeoJSONPropertyValue, currentlySupportedDrawModes, defaultLayers, viewUtils, OpenLayersMapView, MapControls, OpenLayersZoomControl, OpenLayersLayer, OpenLayersFeatureLayer, genericOpenLayersFeatureStyle, DEFAULT_GEOJSON_STYLE_FILL_OPACITY, FEATURE_DRAW_FILL_COLOR, FEATURE_DRAW_SECONDARY_FILL_COLOR, FEATURE_DRAW_STROKE_COLOR } from '@opengeoweb/webmap-react';
 import { SHARED_NAMESPACE, useConfirmationDialog, sessionStorageProvider, dateUtils, ConfirmationDialog, AlertBanner, ToggleMenu, calculateStartSize, ToolContainerDraggable, CustomIconButton, usePrevious, usePreventBrowserClose, CustomTooltip, Avatar, getInitials, SwitchButton, Filter, CustomToggleButton, FilterChip, TooltipSelect, LastUpdateTime, StatusTag, FilterOption, getAxiosErrorMessage, CustomDialog, ConfirmationButtons, ErrorBoundary } from '@opengeoweb/shared';
 import { createEntityAdapter, createSlice, createSelector, createListenerMiddleware, current, combineReducers, configureStore } from '@reduxjs/toolkit';
 import { t } from 'i18next';
 import { useTranslation } from 'react-i18next';
 import { defaultBbox } from '@opengeoweb/core';
-import { FORM_FIELDS_NAMESPACE, useDraftFormHelpers, ReactHookFormSelect, ReactHookFormHiddenInput, isValidGeoJsonCoordinates, ReactHookFormTextField, ReactHookFormProvider, defaultFormOptions, errorMessages, isEmpty, ReactHookFormDateTime, isXHoursAfter, isXHoursBefore } from '@opengeoweb/form-fields';
+import { FORM_FIELDS_NAMESPACE, useDraftFormHelpers, ReactHookFormSelect, ReactHookFormHiddenInput, isValidGeoJsonCoordinates, ReactHookFormTextField, ReactHookFormProvider, defaultFormOptions, errorMessages, isEmpty as isEmpty$1, ReactHookFormDateTime, isXHoursAfter, isXHoursBefore } from '@opengeoweb/form-fields';
 import { SA_NAMESPACE, isInstanceOfCancelSigmet, getDefaultValidFromValue, isInstanceOfCancelAirmet, getDefaultValidUntilValue, useShortTestHelpers, ProductAction, SigmetForm, AirmetForm, isVAPhenomenon, getConfirmationDialogCancelLabel, getConfirmationDialogButtonLabel, getConfirmationDialogContent, getConfirmationDialogTitle, CancelSigmetVolcanicMovements, createAirmetPostParameter, createSigmetPostParameter, prepareCancelSigmet, getProductFormMode, findSequenceNumber, getSequenceStyling } from '@opengeoweb/sigmet-airmet';
 import { LayerType, generateMapId } from '@opengeoweb/webmap';
 import React, { useRef, useState, useEffect, useMemo, useCallback } from 'react';
 import { useAuthenticationContext as useAuthenticationContext$1 } from '@opengeoweb/authentication';
-import { MenuItem, Grid, Box, Typography, styled, ListItem, Paper, ListItemButton, Stack, LinearProgress, Button, FormHelperText, Card, CardContent, Tabs, Tab, useTheme, FormControl, CircularProgress, Menu, ListItemText, DialogTitle, DialogContent, Switch, RadioGroup, FormControlLabel, Radio, InputAdornment, Collapse } from '@mui/material';
+import { MenuItem, Grid, Box, Typography, styled, ListItem, Paper, ListItemButton, Stack, LinearProgress, Button, FormHelperText, Card, CardContent, Tabs, Tab, useTheme, FormControl, CircularProgress, Menu, ListItemText, DialogTitle, DialogContent, Switch, RadioGroup, FormControlLabel, Radio, InputAdornment, Collapse, Tooltip } from '@mui/material';
 import { useQueryClient, useMutation, queryOptions, QueryClient, useQuery } from '@tanstack/react-query';
 import { getHeaders, handleResponse, AirmetPhenomena, SigmetPhenomena, useAuthQuery, useAuthenticationContext, optimisticUpdate, ProductStatus } from '@opengeoweb/api';
 import { snackbarListener, snackbarReducer, snackbarActions, snackbarTypes } from '@opengeoweb/snackbar';
 import { List, useListRef } from 'react-window';
 import { isEqual, cloneDeep, clamp, concat, groupBy, pick } from 'lodash';
 import { useFormContext, useForm, FormProvider } from 'react-hook-form';
+import { isEmpty, createEmpty, extend } from 'ol/extent';
+import GeoJSON from 'ol/format/GeoJSON';
 import { ReactSortable } from 'react-sortablejs';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import Box$1 from '@mui/material/Box';
+import Tooltip$1 from '@mui/material/Tooltip';
 
 var en = {
 	"drawing-tool-form-tools": "Tools",
@@ -84,6 +88,11 @@ var en = {
 	"warning-level-moderate": "Moderate",
 	"warning-level-severe": "Severe",
 	"warning-level-extreme": "Extreme",
+	"warning-level-letter-moderate": "M",
+	"warning-level-letter-severe": "S",
+	"warning-level-letter-extreme": "E",
+	"warning-level-letter-SIG": "SIG",
+	"warning-level-letter-AIR": "AIR",
 	"warning-level-SIG": "Sigmet",
 	"warning-level-AIR": "Airmet",
 	"warning-phenomenon": "Phenomenon",
@@ -347,6 +356,11 @@ var nl = {
 	"warning-level-moderate": "Gematigd",
 	"warning-level-severe": "Ernstig",
 	"warning-level-extreme": "Extreem",
+	"warning-level-letter-moderate": "G",
+	"warning-level-letter-severe": "E",
+	"warning-level-letter-extreme": "X",
+	"warning-level-letter-SIG": "SIG",
+	"warning-level-letter-AIR": "AIR",
 	"warning-phenomenon": "Fenomeen",
 	"warning-phenomenon-wind": "Windstoten",
 	"warning-phenomenon-fog": "Dichte mist",
@@ -567,6 +581,11 @@ var fi = {
 	"warning-level-moderate": "Kohtalainen",
 	"warning-level-severe": "Vakava",
 	"warning-level-extreme": "Äärimmäinen",
+	"warning-level-letter-moderate": "K",
+	"warning-level-letter-severe": "V",
+	"warning-level-letter-extreme": "Ä",
+	"warning-level-letter-SIG": "SIG",
+	"warning-level-letter-AIR": "AIR",
 	"warning-phenomenon": "Sääilmiö",
 	"warning-phenomenon-wind": "Tuuli",
 	"warning-phenomenon-fog": "Sumu",
@@ -739,6 +758,11 @@ var no = {
 	"warning-level-moderate": "Moderat",
 	"warning-level-severe": "Stor",
 	"warning-level-extreme": "Ekstrem",
+	"warning-level-letter-moderate": "M",
+	"warning-level-letter-severe": "S",
+	"warning-level-letter-extreme": "E",
+	"warning-level-letter-SIG": "SIG",
+	"warning-level-letter-AIR": "AIR",
 	"warning-phenomenon": "Fenomen",
 	"warning-phenomenon-wind": "Vind",
 	"warning-phenomenon-fog": "Tåke",
@@ -883,6 +907,11 @@ var areaObjectLoaderType = uiTypes.DialogTypes.AreaObjectLoader;
 function _OverloadYield(e, d) {
   this.v = e, this.k = d;
 }
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
 function asyncGeneratorStep(n, t, e, r, o, a, c) {
   try {
     var i = n[a](c),
@@ -908,6 +937,23 @@ function _asyncToGenerator(n) {
     });
   };
 }
+function _createForOfIteratorHelperLoose(r, e) {
+  var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (t) return (t = t.call(r)).next.bind(t);
+  if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) {
+    t && (r = t);
+    var o = 0;
+    return function () {
+      return o >= r.length ? {
+        done: true
+      } : {
+        done: false,
+        value: r[o++]
+      };
+    };
+  }
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 function _objectWithoutPropertiesLoose(r, e) {
   if (null == r) return {};
   var t = {};
@@ -1092,6 +1138,13 @@ function _regeneratorValues(e) {
   }
   throw new TypeError(typeof e + " is not iterable");
 }
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
 function _regeneratorRuntime() {
 
   var r = _regenerator(),
@@ -4279,7 +4332,7 @@ var drawToolConfig = [{
   secondaryMode: defaultOval
 }, {
   primaryMode: defaultSquare,
-  secondaryMode: defaultBox
+  secondaryMode: defaultRotatableBox
 }, {
   primaryMode: defaultPoint,
   secondaryMode: defaultLocation
@@ -6864,12 +6917,30 @@ var AreaObjectLoader = function AreaObjectLoader(_ref) {
   });
 };
 
+var EXTENT_PADDING = 50;
+function getGeojsonExtent(featureCollection, viewSrs, dataSrs) {
+  var format = new GeoJSON();
+  var features = format.readFeatures(featureCollection, {
+    dataProjection: dataSrs,
+    featureProjection: viewSrs
+  });
+  var extent = createEmpty();
+  for (var _iterator = _createForOfIteratorHelperLoose(features), _step; !(_step = _iterator()).done;) {
+    var feat = _step.value;
+    var geo = feat.getGeometry();
+    if (geo) {
+      extend(extent, geo.getExtent());
+    }
+  }
+  return extent;
+}
 var WarningsMapView = function WarningsMapView(_ref) {
   var _defaultMapPreset$lay, _defaultMapPreset$lay2, _viewRef$current;
   var geojsonFeature = _ref.geojsonFeature,
     defaultMapPreset = _ref.defaultMapPreset,
     _ref$isSnapshot = _ref.isSnapshot,
     isSnapshot = _ref$isSnapshot === void 0 ? false : _ref$isSnapshot;
+  var containerRef = useRef(null);
   var defaultMapPresetBbox = geojsonFeature != null && geojsonFeature.features.length ? undefined : defaultBbox;
   var defaultBbox$1 = (defaultMapPreset == null ? void 0 : defaultMapPreset.proj) || defaultMapPresetBbox;
   var defaultBaseLayer = (defaultMapPreset == null || (_defaultMapPreset$lay = defaultMapPreset.layers) == null ? void 0 : _defaultMapPreset$lay.find(function (layer) {
@@ -6885,12 +6956,36 @@ var WarningsMapView = function WarningsMapView(_ref) {
   };
   var viewRef = useRef(viewUtils.makeView());
   React.useEffect(function () {
+    var _geojsonFeature$featu;
     if (viewRef.current.getProjection().getCode() !== (defaultBbox$1 == null ? void 0 : defaultBbox$1.srs)) {
       viewRef.current = viewUtils.makeView(defaultBbox$1 == null ? void 0 : defaultBbox$1.srs);
     }
-    defaultBbox$1 != null && defaultBbox$1.bbox ? viewUtils.setViewFromExtent(viewRef.current, defaultBbox$1 == null ? void 0 : defaultBbox$1.bbox) : viewUtils.setViewFromFeature(viewRef.current, geojsonFeature);
+    var isNew = (defaultBbox$1 == null ? void 0 : defaultBbox$1.bbox) && !(geojsonFeature != null && geojsonFeature.features.length);
+    if (isNew) {
+      viewUtils.setViewFromExtent(viewRef.current, defaultBbox$1 == null ? void 0 : defaultBbox$1.bbox);
+      return;
+    }
+    if (geojsonFeature != null && (_geojsonFeature$featu = geojsonFeature.features) != null && _geojsonFeature$featu.length) {
+      var viewSrs = viewRef.current.getProjection().getCode();
+      var extent = getGeojsonExtent(geojsonFeature, viewSrs, 'EPSG:4326');
+      if (!isEmpty(extent)) {
+        var el = containerRef.current;
+        var rect = el == null ? void 0 : el.getBoundingClientRect();
+        var size = rect && rect.width > 0 && rect.height > 0 ? [Math.round(rect.width), Math.round(rect.height)] : undefined;
+        viewRef.current.fit(extent, {
+          size: size,
+          padding: [EXTENT_PADDING, EXTENT_PADDING, EXTENT_PADDING, EXTENT_PADDING],
+          maxZoom: 12,
+          duration: 0
+        });
+        return;
+      }
+    }
+    // fallback
+    viewUtils.setViewFromFeature(viewRef.current, geojsonFeature);
   }, [defaultBbox$1, geojsonFeature]);
   return jsx("div", {
+    ref: containerRef,
     style: {
       height: '200px',
       width: '100%'
@@ -7198,18 +7293,18 @@ var WarningLevel;
 var LevelColors = {
   moderate: {
     color: '#FAE21E',
-    textColor: '#051039',
-    borderColor: '#FBFE02'
+    textColor: '#3A3400',
+    borderColor: '#A08F07'
   },
   severe: {
     color: '#E27000',
     textColor: '#051039',
-    borderColor: '#FEAE02'
+    borderColor: '#9C4D00'
   },
   extreme: {
     color: '#D62A20',
     textColor: '#ffffff',
-    borderColor: '#FF0000'
+    borderColor: '#890101'
   }
 };
 var getLevelStyle = function getLevelStyle(levelColor) {
@@ -7327,7 +7422,7 @@ var ProbabilityField = function ProbabilityField(_ref) {
   var onChangeProbability = function onChangeProbability() {
     void trigger('probability');
     // We don't want to trigger the missing value validation
-    if (!isEmpty(getValues('level'))) {
+    if (!isEmpty$1(getValues('level'))) {
       void trigger('level');
     }
   };
@@ -7436,7 +7531,7 @@ var _isMaxHoursAfterCurrentTime = function isMaxHoursAfterCurrentTime(value, t)
   });
 };
 var _isMinHoursAfterValidFrom = function isMinHoursAfterValidFrom(value, validFromValue, t) {
-  if (isEmpty(value) || isEmpty(validFromValue) || !dateUtils.isValidIsoDateString(validFromValue)) {
+  if (isEmpty$1(value) || isEmpty$1(validFromValue) || !dateUtils.isValidIsoDateString(validFromValue)) {
     return true;
   }
   var duration = dateUtils.differenceInHours(new Date(value), new Date(validFromValue));
@@ -14091,4 +14186,705 @@ ComponentsLookUpWrapper) {
   }
 };
 
-export { DrawingToolConnect, Wrapper as DrawingToolForm, DrawingToolFormConnect, DrawingToolMapButtonConnect, ObjectManagerConnect, ObjectManagerMapButtonConnect, PublicWarningsFormDialog, PublicWarningsFormDialogConnect, WARN_NAMESPACE, componentsLookUp, createMockStore, isAlreadyEdited, selectors as publicWarningsSelectors, useObjectDrawDialogAction, warningFormConfirmationOptions, warningsDrawingsActions, warningsDrawingsReducer, warningsFiltersActions, warningsFiltersReducer, warningsFormActions, warningsFormListener, warningsFormReducer, warningsMiddlewares, warningsReducersMap, warningsTranslations };
+/* *
+ * 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 draftStripes = function draftStripes(stripeColor, bgColor) {
+  return "repeating-linear-gradient(\n    -45deg,\n    transparent,\n    transparent 8px,\n    " + stripeColor + " 8px,\n    " + stripeColor + " 9px\n  ), " + bgColor;
+};
+var TimelineColors = {
+  // Public warnings - Extreme (Red)
+  extreme: {
+    published: {
+      background: LevelColors.extreme.color,
+      border: LevelColors.extreme.borderColor,
+      iconColor: LevelColors.extreme.textColor,
+      letterColor: LevelColors.extreme.textColor
+    },
+    draft: {
+      background: '#F1D0D0',
+      stripeColor: 'rgba(255, 255, 255, 0.5)',
+      border: LevelColors.extreme.borderColor,
+      iconColor: LevelColors.extreme.color,
+      letterColor: LevelColors.extreme.color
+    },
+    expired: {
+      background: '#EFEFEF',
+      border: LevelColors.extreme.borderColor,
+      iconColor: LevelColors.extreme.color,
+      letterColor: LevelColors.extreme.color
+    }
+  },
+  // Public warnings - Severe (Orange)
+  severe: {
+    published: {
+      background: LevelColors.severe.color,
+      border: LevelColors.severe.borderColor,
+      iconColor: 'white',
+      letterColor: 'white'
+    },
+    draft: {
+      background: '#FADDC2',
+      stripeColor: 'rgba(255, 255, 255, 0.5)',
+      border: '#E27000',
+      iconColor: '#9C4D00',
+      letterColor: '#9C4D00'
+    },
+    expired: {
+      background: '#EFEFEF',
+      border: '#E27000',
+      iconColor: '#9C4D00',
+      letterColor: '#9C4D00'
+    }
+  },
+  // Public warnings - Moderate (Yellow)
+  moderate: {
+    published: {
+      background: LevelColors.moderate.color,
+      border: LevelColors.moderate.borderColor,
+      iconColor: '#3A3400',
+      letterColor: '#3A3400'
+    },
+    draft: {
+      background: '#FFFACE',
+      stripeColor: 'rgba(250, 226, 28, 0.5)',
+      // Yellow stripes
+      border: LevelColors.moderate.borderColor,
+      iconColor: '#3A3400',
+      letterColor: '#3A3400'
+    },
+    expired: {
+      background: '#EFEFEF',
+      border: LevelColors.moderate.borderColor,
+      iconColor: '#3A3400',
+      letterColor: '#3A3400'
+    }
+  },
+  // Aviation (SIGMET/AIRMET) - Blue
+  aviation: {
+    published: {
+      background: '#186DFF',
+      border: '#0800B9',
+      iconColor: '#FFFFFF',
+      letterColor: '#FFFFFF'
+    },
+    draft: {
+      background: '#E3EDFF',
+      stripeColor: 'rgba(255, 255, 255, 0.5)',
+      border: '#0800B9',
+      iconColor: '#0800B9',
+      letterColor: '#0800B9'
+    },
+    expired: {
+      background: '#EFEFEF',
+      border: '#0800B9',
+      iconColor: '#186DFF',
+      letterColor: '#186DFF'
+    }
+  },
+  // Default/fallback
+  "default": {
+    published: {
+      background: '#FFFFFF',
+      border: '#AAAAAA',
+      iconColor: '#333333',
+      letterColor: '#333333'
+    },
+    draft: {
+      background: '#FFFFFF',
+      stripeColor: 'rgba(255, 255, 255, 0.5)',
+      border: '#AAAAAA',
+      iconColor: '#333333',
+      letterColor: '#333333'
+    },
+    expired: {
+      background: '#EFEFEF',
+      border: '#AAAAAA',
+      iconColor: '#333333',
+      letterColor: '#333333'
+    }
+  }
+};
+var getThemeForLevel = function getThemeForLevel(level, isAviation) {
+  if (isAviation) {
+    return TimelineColors.aviation;
+  }
+  switch (level) {
+    case WarningLevel.extreme:
+      return TimelineColors.extreme;
+    case WarningLevel.severe:
+      return TimelineColors.severe;
+    case WarningLevel.moderate:
+      return TimelineColors.moderate;
+    default:
+      return TimelineColors["default"];
+  }
+};
+var getBlockStyle = function getBlockStyle(level, status, isAviation) {
+  var theme = getThemeForLevel(level, isAviation);
+  if (status === PublicWarningStatus.DRAFT || status === PublicWarningStatus.DRAFT_PUBLISHED) {
+    var _theme$draft = theme.draft,
+      stripeColor = _theme$draft.stripeColor,
+      background = _theme$draft.background,
+      border = _theme$draft.border,
+      iconColor = _theme$draft.iconColor,
+      letterColor = _theme$draft.letterColor;
+    return {
+      background: draftStripes(stripeColor, background),
+      border: "1px solid " + border,
+      borderColor: border,
+      iconColor: iconColor,
+      letterColor: letterColor
+    };
+  }
+  if (status === PublicWarningStatus.EXPIRED) {
+    return {
+      background: theme.expired.background,
+      border: "1px solid " + theme.expired.border,
+      borderColor: theme.expired.border,
+      iconColor: theme.expired.iconColor,
+      letterColor: theme.expired.letterColor
+    };
+  }
+  // Published (default)
+  return {
+    background: theme.published.background,
+    border: "1px solid " + theme.published.border,
+    borderColor: theme.published.border,
+    iconColor: theme.published.iconColor,
+    letterColor: theme.published.letterColor
+  };
+};
+
+/* *
+ * 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 EDGE_PADDING = 24;
+var SIZE_THRESHOLDS = {
+  xxs: 24,
+  xs: 50,
+  sm: 100
+};
+var getTimelineX = function getTimelineX(targetTime, timelineStart, timelineEnd, drawableWidth) {
+  var totalTimelineDuration = timelineEnd.getTime() - timelineStart.getTime();
+  if (totalTimelineDuration <= 0) {
+    return 0;
+  }
+  var elapsedMs = targetTime.getTime() - timelineStart.getTime();
+  return EDGE_PADDING + elapsedMs / totalTimelineDuration * drawableWidth;
+};
+var getTimeFromX = function getTimeFromX(x, timelineStart, timelineEnd, drawableWidth) {
+  var totalTimelineDuration = timelineEnd.getTime() - timelineStart.getTime();
+  if (drawableWidth <= 0) {
+    return new Date(timelineStart);
+  }
+  var adjustedX = x - EDGE_PADDING;
+  var ratio = adjustedX / drawableWidth;
+  var timeMs = timelineStart.getTime() + ratio * totalTimelineDuration;
+  return new Date(timeMs);
+};
+var generateTicks = function generateTicks(timelineStart, timelineEnd) {
+  var ticks = [];
+  var hourInterval = 3;
+  var current = new Date(timelineStart);
+  current.setUTCMinutes(0, 0, 0);
+  if (current < timelineStart) {
+    current.setUTCHours(current.getUTCHours() + 1);
+  }
+  while (current <= timelineEnd) {
+    var hour = current.getUTCHours();
+    if (hour === 0) {
+      ticks.push({
+        time: new Date(current),
+        type: 'day'
+      });
+    } else if (hour % hourInterval === 0) {
+      ticks.push({
+        time: new Date(current),
+        type: 'major'
+      });
+    } else {
+      ticks.push({
+        time: new Date(current),
+        type: 'dashed'
+      });
+    }
+    current.setUTCHours(current.getUTCHours() + 1);
+  }
+  return ticks;
+};
+var getTickLineStyle = function getTickLineStyle(tickType) {
+  if (tickType === 'day') {
+    return {
+      width: '2px',
+      borderLeft: '2px solid #ABC3FF'
+    };
+  }
+  if (tickType === 'dashed') {
+    return {
+      width: '1px',
+      borderLeft: '1px dashed #E7ECFA'
+    };
+  }
+  return {
+    width: '1px',
+    borderLeft: '1px solid #90caf9'
+  };
+};
+var getBlockSize = function getBlockSize(width) {
+  if (width < SIZE_THRESHOLDS.xxs) {
+    return 'xxs';
+  }
+  if (width < SIZE_THRESHOLDS.xs) {
+    return 'xs';
+  }
+  if (width < SIZE_THRESHOLDS.sm) {
+    return 's';
+  }
+  return 'l';
+};
+
+/**
+ * Gets the author/editor from a warning.
+ * For airmet/sigmet warnings, author is in sigmetAirmetDetails.
+ * For public/maritime warnings, editor is on the base warning.
+ */
+var getWarningAuthor = function getWarningAuthor(warning) {
+  if ('sigmetAirmetDetails' in warning) {
+    var _warning$sigmetAirmet, _warning$sigmetAirmet2;
+    return (_warning$sigmetAirmet = (_warning$sigmetAirmet2 = warning.sigmetAirmetDetails) == null ? void 0 : _warning$sigmetAirmet2.author) != null ? _warning$sigmetAirmet : warning.editor;
+  }
+  return warning.editor;
+};
+var formatPeriod = function formatPeriod(from, until) {
+  var ff = new Date(from);
+  var uu = new Date(until);
+  var dateOpts = {
+    day: 'numeric',
+    month: 'short',
+    timeZone: 'UTC'
+  };
+  var timeOpts = {
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+    timeZone: 'UTC'
+  };
+  var fDate = ff.toLocaleDateString('en-GB', dateOpts);
+  var uDate = uu.toLocaleDateString('en-GB', dateOpts);
+  var fTime = ff.toLocaleTimeString('en-GB', timeOpts);
+  var uTime = uu.toLocaleTimeString('en-GB', timeOpts);
+  return fDate === uDate ? fDate + " " + fTime + " \u2013 " + uTime + " UTC" : fDate + " " + fTime + " \u2013 " + uDate + " " + uTime + " UTC";
+};
+var getTooltipContent = function getTooltipContent(warning, t) {
+  var warningDetail = warning.warningDetail,
+    status = warning.status,
+    type = warning.type;
+  var author = getWarningAuthor(warning);
+  var isAviation = type === 'sigmet' || type === 'airmet';
+  var phenomenonEntry = warningPhenomena.find(function (entry) {
+    return entry.key === warningDetail.phenomenon;
+  });
+  var phenomenonLabel = phenomenonEntry ? t(phenomenonEntry.translationKey) : warningDetail.phenomenon;
+  var line1 = isAviation ? [type.toUpperCase(), phenomenonLabel].filter(Boolean).join(' · ') : [phenomenonLabel, warningDetail.level, warningDetail.probability ? warningDetail.probability + "%" : null].filter(Boolean).join(' · ');
+  var period = warningDetail.validFrom && warningDetail.validUntil ? formatPeriod(warningDetail.validFrom, warningDetail.validUntil) : null;
+  var meta = [author, status].filter(Boolean).join(' · ');
+  return jsxs(Box, {
+    sx: {
+      fontSize: 12,
+      lineHeight: 1.6
+    },
+    children: [jsx(Box, {
+      sx: {
+        fontWeight: 600
+      },
+      children: line1
+    }), period ? jsx(Box, {
+      children: period
+    }) : null, meta ? jsx(Box, {
+      children: meta
+    }) : null]
+  });
+};
+var WarningBlock = function WarningBlock(_ref) {
+  var warning = _ref.warning,
+    left = _ref.left,
+    top = _ref.top,
+    width = _ref.width;
+  var _useWarningsTranslati = useWarningsTranslation(),
+    t = _useWarningsTranslati.t;
+  var warningDetail = warning.warningDetail,
+    status = warning.status,
+    type = warning.type;
+  var author = getWarningAuthor(warning);
+  var isAviation = type === 'sigmet' || type === 'airmet';
+  var level = warningDetail.level || null;
+  var letter = level ? t("warning-level-letter-" + level) : '';
+  var _getBlockStyle = getBlockStyle(level, status, isAviation),
+    background = _getBlockStyle.background,
+    border = _getBlockStyle.border,
+    iconColor = _getBlockStyle.iconColor,
+    letterColor = _getBlockStyle.letterColor;
+  var size = getBlockSize(width);
+  var elements = [];
+  if (size === 's' || size === 'l') {
+    elements.push(jsx(Box, {
+      sx: {
+        fontSize: 16,
+        fontWeight: 600,
+        lineHeight: '80%',
+        color: letterColor
+      },
+      children: letter
+    }, "letter"));
+  }
+  if (size !== 'xxs') {
+    elements.push(jsx(Box, {
+      sx: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        color: iconColor,
+        fontSize: 18
+      },
+      children: getPhenomenaIcon(warningDetail.phenomenon) || null
+    }, "icon"));
+  }
+  if (size === 'l') {
+    elements.push(jsx(Box, {
+      sx: {
+        border: '0.5px solid white',
+        borderRadius: '50%'
+      },
+      children: jsx(WarningAvatar, {
+        editor: author != null ? author : ''
+      })
+    }, "avatar"));
+  }
+  return jsx(Tooltip, {
+    placement: "top",
+    title: getTooltipContent(warning, t),
+    children: jsx(Box, {
+      "data-testid": "warning-block",
+      sx: {
+        position: 'absolute',
+        left: left,
+        top: top,
+        width: width,
+        height: 28,
+        padding: '4px 8px',
+        background: background,
+        border: border,
+        borderRadius: 1,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: elements.length === 1 ? 'center' : 'space-between',
+        overflow: 'hidden'
+      },
+      children: elements
+    })
+  });
+};
+
+var WARNING_BLOCK_HEIGHT = 34;
+var DEFAULT_VISIBLE_ROWS = 10;
+var TIMELINE_BAR_HEIGHT = 40;
+var PIXELS_PER_HOUR = 30;
+var MS_PER_HOUR = 60 * 60 * 1000;
+var MS_PER_DAY = 24 * MS_PER_HOUR;
+var WarningsTimeline = function WarningsTimeline(_ref) {
+  var warnings = _ref.warnings;
+  var timelineWarnings = React.useMemo(function () {
+    var _warnings$filter;
+    return (_warnings$filter = warnings == null ? void 0 : warnings.filter(function (warning) {
+      return Boolean(warning.warningDetail.validFrom) && Boolean(warning.warningDetail.validUntil);
+    })) != null ? _warnings$filter : [];
+  }, [warnings]);
+  var warningsAreaRef = React.useRef(null);
+  var timeAxisRef = React.useRef(null);
+  var _React$useState = React.useState(0),
+    containerWidth = _React$useState[0],
+    setContainerWidth = _React$useState[1];
+  React.useEffect(function () {
+    if (!warningsAreaRef.current) {
+      return undefined;
+    }
+    var resizeObserver = new ResizeObserver(function (entries) {
+      for (var _iterator = _createForOfIteratorHelperLoose(entries), _step; !(_step = _iterator()).done;) {
+        var entry = _step.value;
+        setContainerWidth(entry.contentRect.width);
+      }
+    });
+    resizeObserver.observe(warningsAreaRef.current);
+    return function () {
+      return resizeObserver.disconnect();
+    };
+  }, []);
+  var handleWarningsScroll = React.useCallback(function () {
+    if (warningsAreaRef.current && timeAxisRef.current) {
+      timeAxisRef.current.scrollLeft = warningsAreaRef.current.scrollLeft;
+    }
+  }, []);
+  var _React$useState2 = React.useState(function () {
+      return new Date();
+    }),
+    now = _React$useState2[0],
+    setNow = _React$useState2[1];
+  React.useEffect(function () {
+    var id = setInterval(function () {
+      return setNow(new Date());
+    }, MS_PER_HOUR / 60);
+    return function () {
+      return clearInterval(id);
+    };
+  }, []);
+  var _React$useMemo = React.useMemo(function () {
+      var snapshotNow = new Date();
+      var defaultStart = new Date(snapshotNow.getTime() - MS_PER_DAY);
+      var defaultEnd = new Date(snapshotNow.getTime() + 3 * MS_PER_DAY);
+      if (!timelineWarnings.length) {
+        return {
+          timelineStart: defaultStart,
+          timelineEnd: defaultEnd
+        };
+      }
+      var warningMin = Number.POSITIVE_INFINITY;
+      var warningMax = Number.NEGATIVE_INFINITY;
+      for (var _iterator2 = _createForOfIteratorHelperLoose(timelineWarnings), _step2; !(_step2 = _iterator2()).done;) {
+        var warning = _step2.value;
+        var _warning$warningDetai = warning.warningDetail,
+          validFrom = _warning$warningDetai.validFrom,
+          validUntil = _warning$warningDetai.validUntil;
+        if (validFrom) {
+          warningMin = Math.min(warningMin, new Date(validFrom).getTime());
+        }
+        if (validUntil) {
+          warningMax = Math.max(warningMax, new Date(validUntil).getTime());
+        }
+      }
+      // Floor earliest warning to previous 3-hour boundary, then subtract 3h to get some 'air'
+      var warningStartDate = new Date(warningMin);
+      warningStartDate.setUTCMinutes(0, 0, 0);
+      var flooredHour = warningStartDate.getUTCHours() - warningStartDate.getUTCHours() % 3 - 3;
+      warningStartDate.setUTCHours(flooredHour);
+      var minTime = Math.min(defaultStart.getTime(), warningStartDate.getTime());
+      // End is bound by the last warning
+      return {
+        timelineStart: new Date(minTime),
+        timelineEnd: new Date(warningMax)
+      };
+    }, [timelineWarnings]),
+    timelineStart = _React$useMemo.timelineStart,
+    timelineEnd = _React$useMemo.timelineEnd;
+  var totalMs = timelineEnd.getTime() - timelineStart.getTime();
+  var totalHours = totalMs / MS_PER_HOUR;
+  var contentWidth = Math.max(containerWidth, totalHours * PIXELS_PER_HOUR);
+  var fullWidth = contentWidth + 2 * EDGE_PADDING;
+  var ticks = generateTicks(timelineStart, timelineEnd);
+  var _React$useState3 = React.useState(null),
+    hoverTimelineX = _React$useState3[0],
+    setHoverTimelineX = _React$useState3[1];
+  var hoverTime = hoverTimelineX !== null ? getTimeFromX(hoverTimelineX, timelineStart, timelineEnd, contentWidth).toLocaleString('en-GB', {
+    day: 'numeric',
+    month: 'short',
+    hour: '2-digit',
+    minute: '2-digit',
+    timeZone: 'UTC'
+  }) + " UTC" : '';
+  var handleTimeAxisMouseMove = React.useCallback(function (event) {
+    var _timeAxisRef$current$, _timeAxisRef$current;
+    var rect = event.currentTarget.getBoundingClientRect();
+    // Only show tooltip when mouse is below the top 10px (away from scrollbar)
+    if (event.clientY - rect.top < 10) {
+      setHoverTimelineX(null);
+      return;
+    }
+    setHoverTimelineX(event.clientX - rect.left + ((_timeAxisRef$current$ = (_timeAxisRef$current = timeAxisRef.current) == null ? void 0 : _timeAxisRef$current.scrollLeft) != null ? _timeAxisRef$current$ : 0));
+  }, []);
+  var handleTimeAxisMouseLeave = React.useCallback(function () {
+    setHoverTimelineX(null);
+  }, []);
+  var currentTimeX = getTimelineX(now, timelineStart, timelineEnd, contentWidth);
+  var showCurrentTime = now.getTime() >= timelineStart.getTime() && now.getTime() <= timelineEnd.getTime();
+  return jsxs(Box$1, {
+    sx: {
+      width: '100%',
+      height: '100%',
+      display: 'flex',
+      flexDirection: 'column'
+    },
+    children: [jsx(Box$1, {
+      onScroll: handleWarningsScroll,
+      ref: warningsAreaRef,
+      sx: {
+        flex: 1,
+        overflow: 'auto',
+        minHeight: 0
+      },
+      children: jsx(Box$1, {
+        sx: {
+          width: fullWidth,
+          position: 'relative'
+        },
+        children: jsxs(Box$1, {
+          sx: {
+            position: 'relative',
+            height: Math.max(timelineWarnings.length * WARNING_BLOCK_HEIGHT, DEFAULT_VISIBLE_ROWS * WARNING_BLOCK_HEIGHT)
+          },
+          children: [ticks.map(function (tick) {
+            var x = getTimelineX(tick.time, timelineStart, timelineEnd, contentWidth);
+            var lineStyle = getTickLineStyle(tick.type);
+            return jsx(Box$1, {
+              sx: Object.assign({
+                position: 'absolute',
+                left: x,
+                top: 0,
+                bottom: 0
+              }, lineStyle)
+            }, tick.time.toISOString());
+          }), showCurrentTime ? jsx(Box$1, {
+            sx: {
+              position: 'absolute',
+              left: currentTimeX,
+              top: 0,
+              bottom: 0,
+              width: '3px',
+              bgcolor: '#0051DD',
+              zIndex: 10
+            }
+          }) : null, timelineWarnings.map(function (warning, index) {
+            var warningDetail = warning.warningDetail;
+            var validFrom = new Date(warningDetail.validFrom);
+            var validUntil = new Date(warningDetail.validUntil);
+            var left = getTimelineX(validFrom, timelineStart, timelineEnd, contentWidth);
+            var right = getTimelineX(validUntil, timelineStart, timelineEnd, contentWidth);
+            var blockWidth = Math.max(0, right - left);
+            return jsx(WarningBlock, {
+              left: left,
+              top: index * WARNING_BLOCK_HEIGHT,
+              warning: warning,
+              width: blockWidth
+            }, warning.id);
+          })]
+        })
+      })
+    }), jsx(Tooltip$1, {
+      enterDelay: 150,
+      followCursor: true,
+      leaveDelay: 0,
+      placement: "top",
+      slotProps: {
+        popper: {
+          sx: {
+            pointerEvents: 'none'
+          }
+        }
+      },
+      title: hoverTime,
+      children: jsx(Box$1, {
+        onMouseLeave: handleTimeAxisMouseLeave,
+        onMouseMove: handleTimeAxisMouseMove,
+        ref: timeAxisRef,
+        sx: {
+          height: TIMELINE_BAR_HEIGHT,
+          overflow: 'hidden',
+          borderTop: '1px solid #ccc'
+        },
+        children: jsx(Box$1, {
+          sx: {
+            width: fullWidth,
+            position: 'relative',
+            height: '100%'
+          },
+          children: ticks.filter(function (tick) {
+            return tick.type === 'day' || tick.time.getUTCHours() % 3 === 0;
+          }).map(function (tick) {
+            var x = getTimelineX(tick.time, timelineStart, timelineEnd, contentWidth);
+            var hour = tick.time.getUTCHours();
+            var hourLabel = String(hour).padStart(2, '0') + ":00";
+            var isDayBoundary = tick.type === 'day';
+            var dateStr = tick.time.toLocaleDateString('en-GB', {
+              day: 'numeric',
+              month: 'short',
+              timeZone: 'UTC'
+            });
+            return jsxs(Box$1, {
+              sx: {
+                position: 'absolute',
+                left: x,
+                top: 2,
+                transform: 'translateX(-50%)',
+                textAlign: 'center',
+                lineHeight: 1.1
+              },
+              children: [jsx(Box$1, {
+                component: "span",
+                sx: {
+                  fontSize: isDayBoundary ? 14 : 12,
+                  fontWeight: isDayBoundary ? 'bold' : 'normal',
+                  color: isDayBoundary ? '#333' : '#666'
+                },
+                children: hourLabel
+              }), isDayBoundary ? jsx(Box$1, {
+                sx: {
+                  fontSize: 12,
+                  color: '#666'
+                },
+                children: dateStr
+              }) : null]
+            }, "label-" + tick.time.toISOString());
+          })
+        })
+      })
+    })]
+  });
+};
+
+var WarningsTimelineConnect = function WarningsTimelineConnect(_ref) {
+  _ref.panelId;
+  var _useWarningsTranslati = useWarningsTranslation(),
+    t = _useWarningsTranslati.t;
+  var _useAuthenticationCon = useAuthenticationContext$1(),
+    isLoggedIn = _useAuthenticationCon.isLoggedIn;
+  var warnings = [];
+  if (!isLoggedIn) {
+    return jsx(AlertBanner, {
+      dataTestId: "warnings-timeline-auth-error",
+      severity: "error",
+      title: t('error-auth-login')
+    });
+  }
+  return jsx(WarningsTimeline, {
+    warnings: warnings
+  });
+};
+
+export { DrawingToolConnect, Wrapper as DrawingToolForm, DrawingToolFormConnect, DrawingToolMapButtonConnect, ObjectManagerConnect, ObjectManagerMapButtonConnect, PublicWarningsFormDialog, PublicWarningsFormDialogConnect, WARN_NAMESPACE, WarningsTimeline, WarningsTimelineConnect, componentsLookUp, createMockStore, isAlreadyEdited, selectors as publicWarningsSelectors, useObjectDrawDialogAction, warningFormConfirmationOptions, warningsDrawingsActions, warningsDrawingsReducer, warningsFiltersActions, warningsFiltersReducer, warningsFormActions, warningsFormListener, warningsFormReducer, warningsMiddlewares, warningsReducersMap, warningsTranslations };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/warnings",
-  "version": "15.2.0",
+  "version": "15.3.0",
   "description": "GeoWeb warinings library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -8,24 +8,24 @@
     "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
   },
   "dependencies": {
-    "@opengeoweb/api": "15.2.0",
-    "@opengeoweb/shared": "15.2.0",
-    "@opengeoweb/store": "15.2.0",
-    "@opengeoweb/webmap-react": "15.2.0",
+    "@opengeoweb/api": "15.3.0",
+    "@opengeoweb/shared": "15.3.0",
+    "@opengeoweb/store": "15.3.0",
+    "@opengeoweb/webmap-react": "15.3.0",
     "@tanstack/react-query": "^5.85.5",
     "react-redux": "^9.2.0",
-    "@opengeoweb/theme": "15.2.0",
-    "@opengeoweb/form-fields": "15.2.0",
+    "@opengeoweb/theme": "15.3.0",
+    "@opengeoweb/form-fields": "15.3.0",
     "react-hook-form": "^7.50.1",
     "lodash": "^4.17.21",
     "@reduxjs/toolkit": "^2.6.1",
-    "@opengeoweb/snackbar": "15.2.0",
+    "@opengeoweb/snackbar": "15.3.0",
     "react-window": "^2.2.6",
     "axios": "^1.7.7",
-    "@opengeoweb/core": "15.2.0",
-    "@opengeoweb/webmap": "15.2.0",
-    "@opengeoweb/authentication": "15.2.0",
-    "@opengeoweb/sigmet-airmet": "15.2.0",
+    "@opengeoweb/core": "15.3.0",
+    "@opengeoweb/webmap": "15.3.0",
+    "@opengeoweb/authentication": "15.3.0",
+    "@opengeoweb/sigmet-airmet": "15.3.0",
     "react-i18next": "^15.1.1",
     "i18next": "^25.0.1",
     "@mui/material": "^7.0.1",

package/src/index.d.ts

@@ -4,6 +4,7 @@ export * from './lib/components/DrawingTool';
 export * from './lib/components/DrawingToolForm';
 export * from './lib/components/PublicWarningsFormDialog';
 export * from './lib/components/ComponentsLookUp';
+export * from './lib/components/WarningsTimeline';
 export * from './lib/store';
 export { WARN_NAMESPACE } from './lib/utils/i18n';
 export { warningsTranslations };

package/src/lib/components/WarningsMapView/WarningsMapView.d.ts

@@ -1,6 +1,7 @@
 import type { FeatureCollection } from 'geojson';
 import React from 'react';
 import type { MapPreset } from '@opengeoweb/store';
+export declare const EXTENT_PADDING = 50;
 interface WarningsMapViewProps {
     geojsonFeature?: FeatureCollection | undefined;
     defaultMapPreset?: MapPreset;

package/src/lib/components/WarningsTimeline/WarningBlock.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { Warning } from '../../store/warningsForm/types';
+interface WarningBlockProps {
+    warning: Warning;
+    left: number;
+    top: number;
+    width: number;
+}
+export declare const WarningBlock: React.FC<WarningBlockProps>;
+export {};

package/src/lib/components/WarningsTimeline/WarningsTimeline.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { Warning } from '../../store/warningsForm/types';
+export interface WarningsTimelineProps {
+    warnings?: Warning[];
+}
+export declare const WarningsTimeline: React.FC<WarningsTimelineProps>;

package/src/lib/components/WarningsTimeline/WarningsTimeline.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/src/lib/components/WarningsTimeline/WarningsTimeline.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryObj } from '@storybook/react-webpack5';
+import { WarningsTimeline } from './WarningsTimeline';
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("./WarningsTimeline").WarningsTimelineProps>;
+    tags: string[];
+};
+export default _default;
+type Story = StoryObj<typeof WarningsTimeline>;
+export declare const ShortRange: Story;
+export declare const LongRange: Story;
+export declare const NoWarnings: Story;

package/src/lib/components/WarningsTimeline/WarningsTimelineConnect.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface WarningsTimelineConnectProps {
+    panelId: string;
+}
+export declare const WarningsTimelineConnect: React.FC<WarningsTimelineConnectProps>;

package/src/lib/components/WarningsTimeline/WarningsTimelineConnect.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,4 @@
+export { WarningsTimeline } from './WarningsTimeline';
+export type { WarningsTimelineProps } from './WarningsTimeline';
+export { WarningsTimelineConnect } from './WarningsTimelineConnect';
+export type { WarningsTimelineConnectProps } from './WarningsTimelineConnect';

package/src/lib/components/WarningsTimeline/warningBlockColors.d.ts

@@ -0,0 +1,16 @@
+import { PublicWarningStatus } from '../../store/warningsForm/types';
+import { WarningLevel } from '../PublicWarningsForm/LevelField';
+/**
+ * Timeline Block Color Theme
+ *
+ * Organized by warning type (public warnings by level, aviation)
+ * Each type has colors for each status: published, draft, expired
+ */
+export interface BlockStyle {
+    background: string;
+    border: string;
+    borderColor: string;
+    iconColor: string;
+    letterColor: string;
+}
+export declare const getBlockStyle: (level: WarningLevel | null, status: PublicWarningStatus | undefined, isAviation: boolean) => BlockStyle;

package/src/lib/components/WarningsTimeline/warningBlockColors.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/src/lib/components/WarningsTimeline/warningsTimelineUtils.d.ts

@@ -0,0 +1,15 @@
+export declare const EDGE_PADDING = 24;
+export type TickType = 'day' | 'major' | 'dashed';
+export interface Tick {
+    time: Date;
+    type: TickType;
+}
+export type BlockSize = 'xxs' | 'xs' | 's' | 'l';
+export declare const getTimelineX: (targetTime: Date, timelineStart: Date, timelineEnd: Date, drawableWidth: number) => number;
+export declare const getTimeFromX: (x: number, timelineStart: Date, timelineEnd: Date, drawableWidth: number) => Date;
+export declare const generateTicks: (timelineStart: Date, timelineEnd: Date) => Tick[];
+export declare const getTickLineStyle: (tickType: TickType) => {
+    width: string;
+    borderLeft: string;
+};
+export declare const getBlockSize: (width: number) => BlockSize;

package/src/lib/components/WarningsTimeline/warningsTimelineUtils.spec.d.ts

@@ -0,0 +1 @@
+export {};